Validate HTML for missing id in the inputs - html

I'm trying to do some simple validation of HTML files, to check if all inputs, buttons, textareas and selects, int html document, have their 'id' attribute.
I would like to check it on CI tool and I would like to use Grunt for that check. I couldn't find any relevant information on that topic. I've checked grunt-html and grunt-html-validation packages, but seems like it's not what I need.

The closest to what you want seems to be htmllint - and its associated grunt task.
It doesn't have a rule for what you want, but you could contribute one - cleaner and more sharable than a custom grunt task :)

I don't know about tools but you can do a trick like this in jquery
$('input, button, select, etc').each(function (index){
if(this.id)
{
alert($(this).attr('name'));
}
});

Related

PhpStorm generate template from code selection

I frequently use PhpStorm's Extract variable & method refactorings. Is there a way to add/extend functionality that could create a new template file from the selected code, prompt for desired template path, and create an include/require statement for that template?
I'm asking either for an entry point into coding this functionality, or extending existing functionality. Or maybe it's already available and I missed it.
As #Ástþór mentioned, there is no such way to change the refactoring templates.
You can use surround with live templates to emulate this behavior. This will not find duplicates and will not replace them as well, but may be it's close enough what you want.
Add a surround live template like this one. Open the editor with Ctrl+Alt+S:
Edit the variables in order to get a nicer UX:
Select the variable you want to extract and select Code > Surround with Live Templates from the menu or press Ctrl+Alt+J.
Adjust the templates to your needs.
Live template variables
HTH
No, there isn't. You can ask this question at https://intellij-support.jetbrains.com/hc/en-us/community/topics/200366979-IntelliJ-IDEA-Open-API-and-Plugin-Development
Other useful sources: https://www.jetbrains.org/intellij/sdk/docs/basics/getting_started.html & https://confluence.jetbrains.com/display/PhpStorm/Setting-up+environment+for+PhpStorm+plugin+development

Modifying the edit Button in Mediawiki

I want to add the 'target="_blank"' parameter to the edit Button in my wiki, so edit pages will open up in a new window.
I think the simplest way to do this is to edit the specific file which creates this element, but as i am not familiar with the architecture of mediawiki i wasnt able to find this one yet.
Does anybody know where to find this part of code?
I'd advise against patching the MediaWiki core - and also, in this case it's kind of hard. Assuming you're using a standard skin, SkinTemplate.php makes the links as property arrays (look for $content_navigation['views']['edit']), and then the skin (VectorTemplate.php, for example) actually outputs them as HTML. You will have to patch the individual skin - in VectorTemplate.php, you can look for "p-views" and add an if ( $key === '$key' ) to add your target.
Alternatively, and probably a bit better, you can hack the LinkTarget extension so that it can accept IDs as well as classes, and then you could use that to target the specific "edit" link ('#ca-edit'). If you contribute the code back, you won't even have to maintain a fork, unlike the first option.
And third, you can just go the easy route, and use Javascript - just edit MediaWiki:Common.js on the wiki, and add something like this:
$(document).ready( function() {
$( '#ca-edit a' ).attr( 'target', '_blank' );
}

Chrome devtools: How to call a function from another snippet?

I have created many snippets in the Chrome devtool's "Elements > Snippets" panel.
I have a snippet with utility functions like loadJquery, loadUnderscore, etc. I would like to call these functions from another snippet. Is this possible?
Came here cause I struggle with the same question.
I think the correct answer would be yes, if you run each one of them individually and in dependency order.
For example, I have a snippet with a pickDeep() functionality that I got from here. And then I created some other snippets which use that function. So what I do is just run the one with the pickDeep() declaration first, and then any other snippet which use it.
It's the exact same thing as you had typed and run everything on the console directly. So it does not matter where the declaration comes from, as long as it has been declared some way in the current session.
Of course is not the desirable way, but I want to point out there is a workaround.
No, snippets have no knowledge of other snippets nor is there a way to query them up. Snippets are isolated scripts that work independently of each other.

How to change format of Warning admonition or add Caution in Sphinx HTML output

This seems like it should be straightforward but I've been prowling the documentation and web and haven't found the answer.
I want to output HTML doc from Sphinx. Ideally I'd like to have three levels of "note" type highlighted text boxes. ReST defines several "admonitions": (http://docutils.sourceforge.net/docs/ref/rst/directives.html#admonitions) but most of the Sphinx HTML themes include special formatting only for Note and Warning. (I am using one of the preinstalled themes, Classic.)
I have two questions:
1) How can I customize the color behind Warning in my documents?
2) How can I add a formatting style for Caution?
I see that these all end up with tags like <div class="admonition warning"> ... in the HTML output. But I can't find where the formatting for that class is defined. Is it in a stylesheet? Is it in a layout.html file or some other file?
Is there anything that explains how the various files in themes actually interact with each other? I haven't found a good primer. (I am no expert on css-based HTML either, so maybe that's part of the problem.)
Okay, I figured out more and have a working workaround. (I'm still not sure how I'm supposed to handle this.)
Looks like my HTML code is reading directly from a few cascading stylesheets stored along with the output in a directory called _static. There's classic.css, which inherits from basic.css.
I don't understand how these relate to the files named like basic.css_t that live in the Python Sphinx install.
To change things, should I (A) try altering the _t files? or (B) create an altered local copy of classic.css that lives in my source directory?
If I go with B, more questions.
Will it be overwritten by the values in the css_t template at build time? (I guess this is easy enough to test)
Is it good practice to use the same filename for a modified version of that stylesheet?
Here's a workaround that avoids those questions and seems to be doing what I want - from this: https://github.com/snide/sphinx_rtd_theme/issues/117
I created an override stylesheet that includes just the formatting I want to change.
I stored it in the _static of my source directory.
I defined it in my conf.py as follows:
html_context = {
'css_files': [
'_static/theme_overrides.css',
],
}
Now, that github discussion said that this wasn't a solution for all kinds of themes (including the RTD theme mentioned in the question) but I think I'm safe for now.
What more should I know?

Allow user to change layout of web page

I have a web page that allows users to insert form input objects with a label. When they add a new object I automatically add it to a 2 column table, the left column is the label and the right is the form control.
I want to give the user more control over how the page is layed out. I was wondering if there are any examples, patterns or suggestions that would help me achieve this. The only example I found is in Liferay, where you can choose different layout templates and then position portlets on that page according to the layouts and ordering.
Update:
I would like to persist the layout they design.
I already have the form itself persisted. The HTML is not persisted, I generate it on the fly when the form is requested. I would like a way to also persist the layout of the form as well.
I am not looking for anything too detailed. Mainly just thoughts and suggestions.
Thank you
Here's how I've done something similar in the past using the .sortable() method. Use jQuery to keep track of the data that has been rearranged. Ajax the order to a database field, which can then be recalled at a later time. The database field would end up with something like "42,12,6,4"
function saveSortChanges () {
var qString = $("#sortable").sortable("serialize"); // this should produce something like 'artOrder[]=5&artOrder[]=27&artOrder[]=3
$.ajax({
type: 'get',
url: 'ajax.php',
data: qString,
success: function(txt) { }
});
}
$("#sortable").sortable({
cursor: 'move',
update: function(event,ui) {
saveSortChanges();
}
});
and the html is like
<div id="sortable">
<div class="editindex" id="artOrder_22"><!--stuff--></div>
<div class="editindex" id="artOrder_12"><!--stuff--></div>
<div class="editindex" id="artOrder_4"><!--stuff--></div>
</div>
The easiest and most secure way to do this would be via jQuery or another JavaScript library. Check out jQuery UI and YUI. Both feature widgets which allow repositioning, resizing, and other customizations. It grows more complicated if you want to make the user's changes persistent, however.
Do you have a login system? If so, I guess you need to have a separate table where you store user preferences in the database.
Else you can use cookies or SESSION variables as per your needs.
A clean way is to have separate CSS files, and just store the css file ID/name in your session variable (or db table). Let the main HTML that you emit remain the same, just change the css rel link (dont use inline css).
There is a way to have CSS with parameters (I forgot the technical term), but apparently IE has stopped supporting from IE9 onwards, so it might not be very cross browser compatible.
JP19 had very good general advice.
What are using for your back-end? If you are using ASP.NET, because they have Personalization and Themes that are specifically designed specifically for this purpose. It may be worthwhile to examine Personalization as well as ASP.NET WebParts to get an idea of how to implement this.
Take a look at DropThings. It might have what you are looking for.
I think layout is mainly about some css attributes, like width, height, position, float, margin, padding, etc. you can let the user edit these attributes and stores them with the input object in your persist layer.