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.
Smooth Scrolling with CSS
For modern browsers it is now possible to set smooth scrolling for a webpage with the CSS "scroll-behavior" property. No Javascript is required for smooth scrolling.
Showing Relative Time (1 day ago, 1 min ago, Yesterday etc) with Native Javascript
Showing relative time such as "1 day ago", "5 days ago" etc previously required external Javascript libraries such as Moment.js. But now browsers have added native support for this — you may not need external libraries.
Managing Spacing Between Words with CSS word-spacing Property
The CSS word-spacing property defines the width of white space between words in a block of text.
Styling First-Letters with CSS ::first-letter
Styling first letter in a block of text is a good way of increasing user attention span. It can be done with the ::first-letter CSS pseudo-element.
Creating Attractive First Lines with CSS ::first-line
When your copy content goes long, it is a good idea to make it visually attractive. The CSS pseudo-element ::first-line can be used to style the first line appearing within an element.
Selecting Sibling Elements with CSS
CSS provides the adjacent sibling combinator (+ character) and general sibling combinator (~ character), to select siblings of an element.
Selecting Child Elements with CSS
The child combinator represented by the greater-than character (>) select direct children of the parent element. The descendant combinator represented by a single-space character can be used to select children, grand-children, grand-grand-children also.
Writing jQuery each() in Pure JavaScript
The jQuery $.each() method can be replicated in vanilla JavaScript using natively available methods — document.querySelectorAll() and forEach loop.
CSS :focus-within
The :focus-within CSS pseudo-class is a selector for an element that contains a focused element as a child. It is the only CSS selector that reaches a parent from a child.
Keeping HTML & Javascript Code Separate using the <template> Tag
In present ajax driven web applications quite a lot of HTML content is dynamically inserted inside the page with Javascript. To keep this dynamically generated HTML separate from the Javascript code, the <template> tag is used.
Displaying Date and Time in Javascript
In Javascript, date and time are handled with the built-in Date object. The Date objects has several methods such as getDate(), getMonth(), toLocaleString() etc to customize the format of the date-time string.
Tagged Templates Literals
Tagged templates can be thought of as an advanced form of template literals, where the placeholders (${variable}) and text are passed through a function.
Cropping and Resizing Images in CSS using object-fit and object-position
Images can be cropped and resized in CSS using the new object-fit and object-position properties. They are similar to background-size and background-position properties, but can be applied directly to image elements.
Pre-Loading and Pre-Decoding Images with Javascript for Better Performance
Pre-loading an image is a popular technique to improve performance. However it is also possible to pre-decode the image for a bigger performance boost.
Creating Multi-line Strings in Javascript with Template Literals
ES6 Template Literals is the new way of creating multi-line strings in Javascript. Variables and expressions can also be substituted in a template literal multi-line string.
Repeating Strings in Javascript
Sometimes it is required to keep repeating a string for a specific number of times. The new ES6 function repeat() can help you to do so.
Padding Strings in Javascript
It is sometimes required to make sure that strings are of a specific length. padStart() and padEnd() functions can help you to achieve this.
Trimming Strings in Javascript
Strings can be trimmed in Javascript using the native trim functions — trim(), trimStart() & trimEnd()