front-tips Goto Github PK

accordion-with-custom-styled-markers

Using the CSS property `list-style-type` to style `details` disclosure widgets with custom emoji markers.

animejs-cube-drawing

Sequential SVG Cube Animation with Anime.js: Drawing a 3D Cube One Square at a Time

auto-play-stop-video-on-scroll-into-view

Play and Pause a video based on its visibility in the viewport.

calc-infinity-rounded-corner

css-animation-event-js-tracker

Using `animationstart` and `animationend` events in JavaScript to capture the start and end of a CSS animation's lifecycle.

css-at-media-scripting-property

Using CSS scripting media query `@media (scripting: enabled)` to check whether JavaScript is enabled or not.

css-container-queries-dynamic-content

Using the `@container` CSS at-rule to conditionally switch emojis based on container height for responsive content.

css-container-style-queries

Using the experimental CSS feature `@container style()`, showcasing dynamic styling for different product states (new and popular).

css-custom-checkbox

Using `appearance` and `:checked` for a customizable switch with CSS variables.

css-infinite-animation-loop-with-js

Using the JavaScript `updateTiming` method of the `AnimationEffect` interface to set multiple CSS animations to loop infinitely

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-prefers-reduced-transparency-media-feature

Using the media feature `prefers-reduced-transparency` to create an accessible article summary card for users with visual impairments who enable the `reduced transparency` system setting.

css-property-contain-paint

Using the CSS property `contain: paint` which improves performance by limiting the layout and painting of child elements to the container's dimensions, restricting unnecessary rendering outside its boundaries.

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.

css-rule-dynamic-update

css-scroll-driven-animation

Like JS's `IntersectionObserver`, using CSS to track elements crossing the ScrollPort and applying `blurFadeIn` animation.

customizing-native-file-input

Using the CSS `::file-selector-button` pseudo-element to style the default `<input type="file">` type natively.

drag-drop-elements-datatransfer-interface

Using the `HTML Drag and Drop API` to copy and move elements with `DataTransfer` in JavaScript

dropzone-client-server

Drag and Drop files for upload, including file type and size limitations.

dynamic-background-css-painting-api

Using the `CSS Painting API` to access CSS custom properties and make checkerboard patterns with JavaScript.

eyedropper-api

face-detection-api-chrome

Using Chrome's experimental Face Detection API to dynamically detect and highlight faces in images with JavaScript.

fetch-api-nodejs-example

Testing the compatibility and stability of the `Fetch API` in different Node.js versions

fetch-performance-tracker

Using the JavaScript `PerformanceMeasure` interface of the `Performance API` to track and measure the timing of `fetch` operations.

filelist-web-api

Using the `FileList` interface to display information about a list of files selected with the `input` of `type="file"` HTML element.

gamepad-status-monitor

Using the JavaScript `Gamepad API` to display real-time connection status and button states of game controllers.

html-data-list

Using `<datalist>` element to implement HTML combobox functionality for input field suggestions.

iframe-message-exchange

Using the Channel Messaging API to make a communication (Cross-window communication) between iframe and its parent app.

interactive-scroll-animation-gsap

Animating text with a gradient during scrolling by creating an interactive scroll animation using GSAP's `ScrollTrigger` and CSS's `mix-blend-mode`

isolation-new-stacking-context-creation

Using the CSS property and value `isolation: isolate` to create a new stacking context.