Responsive Logo with CSS min() Function (No Media Query Involved)
A responsive logo can be achieved in a HTML page using the CSS min() function, without involving any media query.
Checking If CSS Property Supported in Current Browser with Javascript
With newer CSS properties not available in all browsers, it is sometimes required to check whether a CSS property & its value are supported in the current browser. This can be detected in Javascript using the CSS.supports() method.
Maintain Image Quality When Applying CSS Transform & Scale
While applying CSS transform on an image, and scaling it, a common problem comes up that the image becomes blurred. This can be largely improved using the CSS image-rendering property.
Get Random Numbers, Cryptographically Secure, in Javascript
Random numbers that are cryptographically strong, can be generated in Javascript using the Web Crypto API.
Get Date and Time for a Given Timezone in Node.js
The toLocaleString() method of the Date() object can be used to get date and time for a given IANA timezone name in Node.
Using formdata Event for AJAX Form Submissions
The newly introduced formdata event can enable the Javscript FormData object to participate in form submissions. When trying to submit a form via AJAX, this is helpful to include custom elements in the request.
Base64 Encoding and Decoding in Node.JS
Node.js does not support the standard Javascript methods of atob() and btoa() for base64 conversions. Encoding and decoding base64 data in Node can be done through the inbuilt Buffer module.
How to Make a DIV 100% of the Window Height using CSS
Making the height of a container element same as that of the window is useful in cases where there is a hero content to be presented. This can be done by setting the CSS height of the element in vh units.
Download File from AWS S3 Bucket and Save to Local Server using API (PHP)
This article contains sample PHP code that implement the GetObject S3 API call. It will download a file from a S3 bucket, and save it to local server.
Dynamically Rotating an Image using Javascript
An image can be rotated with Javascript by dynamically changing its CSS transform property. The point around which rotation needs to happen can be specified with the transform-origin property.
How to Create a Black and White Image with CSS
An image can be converted to grayscale or black & white by applying the grayscale CSS filter on it. Even a partial grayscale conversion can be done.
Managing the URL Hash with Javascript
The Javascript URL object can be used to get and set hash value of a given url. To detect a change in hash in the current url, the hashchange event can be listened to.
Reading a File and Getting its Binary Data in Javascript
The binary data of a local file selected by the user can be retrieved using the readAsBinaryString method of a FileReader object.
CSS Latest Updates - Inner & Outer Values of display Property
The CSS display property has been upgraded to a two-valued syntax. This will allow us to make new layouts that were not possible before.
How to Change Link Underline Color using text-decoration-color CSS
By default, the color of the underline in a link is the same as its text color. However with the newly introduced text-decoration-color CSS property, the underline and the text can have different colors.
How to Check if Cookies are Enabled or Disabled
Without cookies being enabled in the browser, some web applications may not work as expected. To prevent such cases navigator.cookieEnabled property can be used to do a prior check whether cookies are enabled or not.
Checking for a Secure Context Before Running User Sensitive Code
Browsers allow user-sensitive and low-level web APIs to execute only when the page is in a secure context. In addition, the window.isSecureContext property can be used to check whether the current environment is safe or not.
CSS Updates - New Properties for Styling Text Decorations & Underlines (VIDEO)
The new CSS properties such as text-decoration-thickness, text-decoration-color etc can help in creating attractive text decorations and underlines, which were not possible before.
How to Prevent Sending the Referring URL when Clicking a Link
The referring url may compromise user privacy when a link is clicked. However this can be prevented through the referrer meta tag, or using the referrerpolicy attribute on hyperlinks.
How to Create a Dark / Light Mode for Websites
Giving user the preference of choosing a dark or light mode has become a very popular feature of operating systems. Webpages can also be shown in dark or light theme depending on the mode chosen in the device settings.