How to Smooth Scroll to an Element with Native Javascript
It is a commonly required to scroll to a particular section of a page upon a click. This can be done with the native scrollIntoView() method which also supports smooth scrolling.
Controlling Whether Mouse & Touch Allowed with CSS pointer-events Property
The CSS pointer-events property can control whether an element can be a target for pointer (mouse & touch) events.
Changing Cursor Color for Textboxes with CSS caret-color Property
The CSS caret-color property changes the color of the caret, or the blinking cursor for text inputs fields. Changing the color of the cursor when the user focuses on the text field makes it more noticeable.
How to Get and Set Attributes with Javascript
Just like jQuery's $.attr() method, there are native browser methods — getAttribute & setAttribute that can get and set attributes of an element.
How to Serialize Form Data with Javascript
Libraries such as jQuery makes it easy to serialize form data, but it is equally simple in vanilla Javascript also. This happens with the URLSearchParams and FormData objects.
Setting Tab Sizes in HTML with CSS tab-size Property
Setting width for the Tab key can change the look for textboxes and 〈pre〉 element. This can be done with the tab-size CSS property.
New Policies for Autoplaying Audio & Video on Websites
Automatically playing a video or audio on page load is probably one of the annoying things that a website can do to a user. So to deter websites from autoplaying audio and video, browsers have brought out new policies.
How to Justify Text using text-align & text-justify CSS Properties
In a webpage, justification of text can be done with the text-align property. Spaces can further be adjusted with text-justify property.
Adding Hyphens to Text with the CSS hyphens Property
It is a common practice to break lines by introducing a hyphen character between a word. In web pages this is done with the CSS hyphens property.
Checking Element has Specific CSS Class with Vanilla Javascript
Similar to the jQuery's hasClass method, there exists a native Javascript alternative that tells whether the DOM element contains the specified CSS class or not.
Indent Text with CSS text-indent Property
Many times you would like to leave empty spaces before the starting line of a paragraph. This can be done with the text-indent CSS property which defines the length of the white space appearing before the first line.
Adding & Removing CSS Classes With Vanilla Javascript
jQuery's addClass & removeClass makes it very simple to add and remove CSS classes. But it is equally straightforward with native Javascript also.
Golden Rules for Typography on the Web (VIDEO)
Good typography does not improve speed or understanding, but leads to greater engagement in reading. This video presented at CSS Day brings out some general guidelines for typography on websites.
jQuery append() in Pure Javascript
jQuery's append() method can add a DOM element or a HTML string into a given DOM element. But the same can be done with natively available methods also.
Maintaining Aspect Ratios for HTML Videos with CSS
When rendering an image browers maintains its aspect ratio. But this does not happen in this case of video element. This can be done with a bit of CSS.
Understanding Event-Loop, Asynchronous, Single-Threaded in Javascript (VIDEO)
The Javascript event loop is the key to understanding terms such as "Asynchronous", "Single-Threaded", "Non-Blocking" etc. This is explained through a video presented at JSConf.
Types of Buttons in HTML Forms
Many times clicking on a simple button in a form will automatically submit the form. This is because of the "type" attribute of the button which works only inside a form.
Setting Spaces between Letters with CSS letter-spacing Property
The letter-spacing CSS property can be used to set spacing between individual characters or letters in words.
Adding Event Handlers on Dynamically Created Elements with Vanilla Javascript
In jQuery adding event handlers to dynamic elements is quite simple. But when you try to do the same thing with vanilla Javascript, it is not very direct.
Getting the 〈html〉Tag with Javascript
Although it may rarely happen, but sometimes you may need to access the 〈html〉element with Javascript. This can be done using 3 ways.