Latest Web Development News & Stories

Fixing Common Web Vitals Issues (Chrome Dev Summit 2020)

This talk explains how to fix many of the issues that sites frequently encounter when trying to optimize their Web Vitals.

CSS Individual Transform Properties

CSS Transforms Module Level 2 has added individual CSS transform properties - translate, rotate & scale - the functions that were previously done by transform property.
See all web development news & stories

Latest Tutorials and How-To's

css

Custom Radio Buttons with CSS appearance Property

The look of radio buttons can be customized using the CSS appearance property. This property allows to suppress the native appearance of an element so...
January 17, 2021
css

Hide Dropdown Arrow for Select Input with CSS appearance

The arrow icon in select input can be hidden by setting the CSS appearance to none. This property allows to suppress the native appearance of an eleme...
January 15, 2021
javascript

Detect If Element Removed from DOM with Javascript

We can detect whether an element has been removed DOM using the MutationObserver object. This provides the ability to observe for changes being made t...
January 13, 2021
javascript

Detect If Element Added to DOM with Javascript

We can detect if an element has been added to DOM using a MutationObserver object. This provides the ability to observe for changes being made to the ...
January 11, 2021
javascript

Getting Camera Resolution with Javascript

There is no direct method to find out the maximum resolution supported by the camera. Instead we can specify the required width & height using the ide...
January 9, 2021
javascript

Record Video From Camera using Javascript

Videos can be recorded from the user camera using MediaDevices & MediaRecorder APIs.
January 7, 2021
javascript

Uploading Canvas Image to a Server

Canvas images can be uploaded to server-side as a data URL string, base64 string or as a file.
January 4, 2021
javascript

Capture Photo From Camera using Javascript

Photos can be captured from a camera using a combination of MediaDevices & Canvas Javascript APIs. Video frame of the camera stream can be captured as...
January 2, 2021
css

Setting a Fixed Width for Items in CSS Flexbox

A flexbox item can be set to a fixed width by setting 3 CSS properties - flex-basis, flex-grow & flex-shrink.
December 27, 2020
css

How to Animate Bullets in Lists

Bullets in a HTML list can be animated using the ::marker CSS selector. This selector selects the marker box (bullet / number) for list items.
December 26, 2020
javascript

Replacing All String Instances With replaceAll()

All instances of a given string can be replaced by using the replaceAll() method. This method newly added to Javascript is now supported in all modern...
December 26, 2020
css

Change Bullet Color for Lists with ::marker CSS Selector

Bullet color for HTML lists can be changed using the ::marker CSS selector. This selector selects the marker box (bullet or number) for list items.
December 26, 2020
javascript

Detecting First Contentful Paint (FCP) in Javascript

First contentful paint (FCP) marks the time when browser renders some content for the given document. FCP can be captured in native JavaScript using P...
December 23, 2020
javascript

How usefulangle.com Improved Its Largest Contentful Paint (LCP)

This article describes how usefulangle.com improved the LCP web vital metric when there was a hero image in the page.
December 21, 2020
javascript

Detecting If Adblocker Extensions Are Blocking Ads

A possible way of detecting adblockers is to listen to the onerror event of the ad serving script element. If the script fails to load, probably it ha...
December 20, 2020