Front Tips's repositories
drag-drop-elements-datatransfer-interface
Using the `HTML Drag and Drop API` to copy and move elements with `DataTransfer` in JavaScript
native-javascript-screen-recorder
Using the `Screen Capture API` to make a browser based screen Recorder via JavaScript.
css-container-style-queries
Using the experimental CSS feature `@container style()`, showcasing dynamic styling for different product states (new and popular).
html-data-list
Using `<datalist>` element to implement HTML combobox functionality for input field suggestions.
customizing-native-file-input
Using the CSS `::file-selector-button` pseudo-element to style the default `<input type="file">` type natively.
face-detection-api-chrome
Using Chrome's experimental Face Detection API to dynamically detect and highlight faces in images with JavaScript.
filelist-web-api
Using the `FileList` interface to display information about a list of files selected with the `input` of `type="file"` HTML element.
fetch-performance-tracker
Using the JavaScript `PerformanceMeasure` interface of the `Performance API` to track and measure the timing of `fetch` operations.
css-container-queries-dynamic-content
Using the `@container` CSS at-rule to conditionally switch emojis based on container height for responsive content.
css-infinite-animation-loop-with-js
Using the JavaScript `updateTiming` method of the `AnimationEffect` interface to set multiple CSS animations to loop infinitely
css-scroll-driven-animation
Like JS's `IntersectionObserver`, using CSS to track elements crossing the ScrollPort and applying `blurFadeIn` animation.
stylelint-rules-sorting-css-properties
Using `stylelint-order` to organize CSS properties, enhancing readability and ensuring a consistent coding style across your projects.
css-margin-inline-rtl-element
Using `margin-inline-end` to align a picture to either the left or the right depending on the browser direction (right to left, or left to right).
css-ribon-shapes-collection
A ready-to-use list of CSS ribbons collection, customizable with CSS variables, can be used in multiple scenarios like badges for promotions, decorative cards and more.
dynamic-background-css-painting-api
Using the `CSS Painting API` to access CSS custom properties and make checkerboard patterns with JavaScript.
gamepad-status-monitor
Using the JavaScript `Gamepad API` to display real-time connection status and button states of game controllers.
native-css-color-mixing
Using `color-mix` to achieve native CSS color mixing, effective for creating color shades from a single base color.
shadow-dom-user-profile
Using the HTML `<template>` content template element and `Shadow DOM` for creating isolated and modular user profile component.
fetch-api-nodejs-example
Testing the compatibility and stability of the `Fetch API` in different Node.js versions
iframe-message-exchange
Using the Channel Messaging API to make a communication (Cross-window communication) between iframe and its parent app.
js-ambient-light-sensor-interface
Using the experimental `AmbientLightSensor` interface of the `Sensor APIs` to measure the light intensity around the device's camera.
json-parse-reviver-function
Using `JSON.parse()` second parameter (reviver) to selectively alter JSON content.
maintaining-square-proportions
Using `aspect-ratio` to consistently create a perfect square while preserving its aspect ratio.
react-monitoring-battery-levels
Using `useBattery` hook and the native Battery Status API for tracking and displaying battery levels in React applications.
responsive-html-video
Using the `orientation: portrait` media query in HTML to deliver responsive `video` content, enhancing usability and performance across devices.