Repositories list

• html-data-list

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

  htmldatalist

  CSS

  •1•7•0•0•Updated Mar 25, 2024Mar 25, 2024

• responsive-html-video

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

  htmlorientation-detectionresponsive-videos

  HTML

  •0•0•0•0•Updated Mar 23, 2024Mar 23, 2024

• customizing-native-file-input

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

  cssfile-inputpseudo-element+ 1file-selector-button

  CSS

  •0•5•0•0•Updated Mar 21, 2024Mar 21, 2024

• calc-infinity-rounded-corner

  Public
  cssinfinitycalc-constant

  JavaScript

  •0•1•0•0•Updated Mar 19, 2024Mar 19, 2024

• fetch-api-nodejs-example

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

  nodejsjavascriptfetch-api

  JavaScript

  •0•0•0•0•Updated Mar 17, 2024Mar 17, 2024

• fetch-performance-tracker

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

  javascriptperformance-analysisperformance-api

  JavaScript

  •0•4•0•0•Updated Mar 17, 2024Mar 17, 2024

• shadow-dom-user-profile

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

  JavaScript

  •0•1•0•0•Updated Mar 15, 2024Mar 15, 2024

• css-rule-dynamic-update

  Public
  javascriptcss-rulescssom

  JavaScript

  •0•0•0•0•Updated Mar 14, 2024Mar 14, 2024

• gamepad-status-monitor

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

  javascriptgame-controllergamepad-api

  CSS

  •0•1•0•0•Updated Mar 12, 2024Mar 12, 2024

• mouse-wheel-listener

  Public
  jsweb-apimouse-wheel+ 1wheel-event

  JavaScript

  •1•0•0•0•Updated Mar 10, 2024Mar 10, 2024

• eyedropper-api

  Public
  jsweb-apieyedropper+ 1eyedropper-api

  JavaScript

  •1•0•0•0•Updated Mar 9, 2024Mar 9, 2024

• filelist-web-api

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

  jsweb-apifilelist-api

  CSS

  •0•4•0•0•Updated Mar 8, 2024Mar 8, 2024

• js-ambient-light-sensor-interface

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

  chromeexperimentaljs+ 1ambient-light-sensor

  JavaScript

  •0•0•0•0•Updated Jan 25, 2024Jan 25, 2024

• css-container-queries-dynamic-content

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

  csscss-container-query

  CSS

  •1•2•0•0•Updated Jan 24, 2024Jan 24, 2024

• drag-drop-elements-datatransfer-interface

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

  htmljsdatatransfer+ 1html-drag-and-drop

  JavaScript

  •12•49•0•0•Updated Jan 24, 2024Jan 24, 2024

• dynamic-background-css-painting-api

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

  cssjscss-paint-api

  JavaScript

  •0•0•0•0•Updated Jan 22, 2024Jan 22, 2024

• iframe-message-exchange

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

  jsiframechannel-messaging

  HTML

  •0•0•0•0•Updated Jan 20, 2024Jan 20, 2024

• face-detection-api-chrome

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

  jsface-detectionchrome-experiment

  JavaScript

  •

  Other

  •0•4•0•0•Updated Jan 17, 2024Jan 17, 2024

• picture-in-picture-web-api

  Public
  JavaScript

  •0•1•0•0•Updated Jan 17, 2024Jan 17, 2024

• json-parse-reviver-function

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

  jsjson-parsereviver-function

  JavaScript

  •0•0•0•0•Updated Jan 16, 2024Jan 16, 2024

• css-scroll-driven-animation

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

  cssscroll-driven

  CSS

  •0•2•0•0•Updated Jan 15, 2024Jan 15, 2024

• css-container-style-queries

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

  csscss-container-querycss-container-style

  CSS

  •2•9•0•0•Updated Jan 12, 2024Jan 12, 2024

• react-monitoring-battery-levels

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

  reactjsbattery-monitor

  JavaScript

  •0•0•0•0•Updated Jan 11, 2024Jan 11, 2024

• native-javascript-screen-recorder

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

  jsscreenrecorder

  JavaScript

  •7•16•0•0•Updated Jan 5, 2024Jan 5, 2024

• css-ribon-shapes-collection

  Public
  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.

  cssribbon

  CSS

  •0•1•0•0•Updated Jan 5, 2024Jan 5, 2024

• maintaining-square-proportions

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

  cssaspect-ratio

  JavaScript

  •0•0•0•0•Updated Jan 4, 2024Jan 4, 2024

• css-margin-inline-rtl-element

  Public
  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).

  cssmultilingual

  HTML

  •0•1•0•0•Updated Jan 4, 2024Jan 4, 2024

• stylelint-rules-sorting-css-properties

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

  stylelintcss

  CSS

  •0•2•0•0•Updated Jan 4, 2024Jan 4, 2024

• native-css-color-mixing

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

  css

  CSS

  •0•1•0•0•Updated Jan 3, 2024Jan 3, 2024

• css-infinite-animation-loop-with-js

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

  cssjs

  JavaScript

  •0•2•0•0•Updated Jan 2, 2024Jan 2, 2024