Front-Tips/react-monitoring-battery-levels

Using `useBattery` hook and the native Battery Status API for tracking and displaying battery levels in React applications.

Language: JavaScript - Size: 157 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 0 - Forks: 0

Front-Tips/face-detection-api-chrome

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

Language: JavaScript - Size: 391 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 4 - Forks: 0

Front-Tips/drag-drop-elements-datatransfer-interface

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

Language: JavaScript - Size: 106 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 48 - Forks: 12

Front-Tips/reading-progress-indicator

Using `animation-timeline` to create a dynamic reading progress bar for enhanced user engagement.

Language: HTML - Size: 1.95 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 0 - Forks: 0

Front-Tips/native-css-color-mixing

Using `color-mix` to achieve native CSS color mixing, effective for creating color shades from a single base color.

Language: CSS - Size: 0 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/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.

Language: CSS - Size: 1000 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/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`

Language: JavaScript - Size: 107 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 0 - Forks: 0

Front-Tips/json-parse-reviver-function

Using `JSON.parse()` second parameter (reviver) to selectively alter JSON content.

Language: JavaScript - Size: 0 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 0 - Forks: 0

Front-Tips/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.

Language: CSS - Size: 108 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/css-at-media-scripting-property

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

Language: HTML - Size: 1000 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 0 - Forks: 0

Front-Tips/css-custom-checkbox

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

Language: CSS - Size: 1000 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 0 - Forks: 1

Front-Tips/fetch-performance-tracker

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

Language: JavaScript - Size: 127 KB - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 4 - Forks: 0

Front-Tips/customizing-native-file-input

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

Language: CSS - Size: 1000 Bytes - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 5 - Forks: 0

Front-Tips/html-data-list

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

Language: CSS - Size: 1000 Bytes - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 6 - Forks: 1

Front-Tips/css-container-style-queries

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

Language: CSS - Size: 3.91 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 9 - Forks: 2

Front-Tips/shadow-dom-user-profile

Using the HTML `<template>` content template element and `Shadow DOM` for creating isolated and modular user profile component.

Language: JavaScript - Size: 444 KB - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 1 - Forks: 0

Front-Tips/responsive-html-video

Using the `orientation: portrait` media query in HTML to deliver responsive `video` content, enhancing usability and performance across devices.

Language: HTML - Size: 4.58 MB - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 0 - Forks: 0

Front-Tips/css-animation-event-js-tracker

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

Language: JavaScript - Size: 197 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 3 - Forks: 2

Front-Tips/calc-infinity-rounded-corner

Language: JavaScript - Size: 125 KB - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 0 - Forks: 0

Front-Tips/fetch-api-nodejs-example

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

Language: JavaScript - Size: 0 Bytes - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 0 - Forks: 0

Front-Tips/stylelint-rules-sorting-css-properties

Using `stylelint-order` to organize CSS properties, enhancing readability and ensuring a consistent coding style across your projects.

Language: CSS - Size: 17.6 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 2 - Forks: 0

Front-Tips/css-rule-dynamic-update

Language: JavaScript - Size: 125 KB - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 0 - Forks: 0

Front-Tips/gamepad-status-monitor

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

Language: CSS - Size: 126 KB - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 1 - Forks: 0

Front-Tips/mouse-wheel-listener

Language: JavaScript - Size: 126 KB - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 0 - Forks: 1

Front-Tips/preventing-scrolling

Using `overscroll-behavior: none` to fix nested scrolling issues, ensuring only the targeted element scrolls.

Language: HTML - Size: 58.6 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/css-infinite-animation-loop-with-js

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

Language: JavaScript - Size: 106 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 2 - Forks: 0

Front-Tips/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.

Language: CSS - Size: 1000 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/filelist-web-api

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

Language: CSS - Size: 126 KB - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 4 - Forks: 0

Front-Tips/eyedropper-api

Language: JavaScript - Size: 125 KB - Last synced at: about 1 year ago - Pushed at: about 1 year ago - Stars: 0 - Forks: 1

Front-Tips/native-javascript-screen-recorder

Using the `Screen Capture API` to make a browser based screen Recorder via JavaScript.

Language: JavaScript - Size: 130 KB - Last synced at: 25 days ago - Pushed at: over 1 year ago - Stars: 16 - Forks: 7

Front-Tips/dynamic-background-css-painting-api

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

Language: JavaScript - Size: 1000 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/css-container-queries-dynamic-content

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

Language: CSS - Size: 1000 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 2 - Forks: 1

Front-Tips/js-ambient-light-sensor-interface

Using the experimental `AmbientLightSensor` interface of the `Sensor APIs` to measure the light intensity around the device's camera.

Language: JavaScript - Size: 106 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 0 - Forks: 0

Front-Tips/accordion-with-custom-styled-markers

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

Language: HTML - Size: 1.95 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 4 - Forks: 0

Front-Tips/iframe-message-exchange

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

Language: HTML - Size: 0 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 0 - Forks: 0

Front-Tips/picture-in-picture-web-api

Language: JavaScript - Size: 57.6 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/auto-play-stop-video-on-scroll-into-view

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

Language: HTML - Size: 10.1 MB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 3 - Forks: 2

Front-Tips/css-scroll-driven-animation

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

Language: CSS - Size: 106 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 2 - Forks: 0

Front-Tips/maintaining-square-proportions

Using `aspect-ratio` to consistently create a perfect square while preserving its aspect ratio.

Language: JavaScript - Size: 68.4 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 0 - Forks: 0

Front-Tips/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).

Language: HTML - Size: 103 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/sandpack-react-demo

ReactJS Component toolkit for creating a live-running code editing experiences in the browser.

Language: JavaScript - Size: 155 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 4 - Forks: 0

Front-Tips/vertical-scroll-snapping

Using `scroll-snap-type` and `scroll-snap-align` to achieve a vertical scroll snapping to align sections at the top of the viewport, enabling slide-like navigation as users scroll down or top.

Language: CSS - Size: 1.95 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 6 - Forks: 0

Front-Tips/nth-of-selector-syntax

Using `selector:nth-child(nth of selector)` to target the `nth` element matching a specific `selector`, enabling complex and precise CSS elements selection.

Language: JavaScript - Size: 56.6 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/isolation-new-stacking-context-creation

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

Language: CSS - Size: 1000 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/scrolling-shadows-background-attachment

Using the CSS property `background-attachment` to achieve layered scrolling effects with fixed and dynamic shadows.

Language: CSS - Size: 1000 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/typewriter-effect-using-css

Implementing a typewriter effect fully in CSS with animated text and a blinking caret, using custom properties for timing and steps.

Language: CSS - Size: 1000 Bytes - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 1 - Forks: 0

Front-Tips/animejs-cube-drawing

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

Language: JavaScript - Size: 58.6 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 0 - Forks: 0

Front-Tips/dropzone-client-server

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

Language: CSS - Size: 63.5 KB - Last synced at: about 1 year ago - Pushed at: over 1 year ago - Stars: 4 - Forks: 0