{"payload":{"pageCount":2,"repositories":[{"type":"Public","name":"html-data-list","owner":"Front-Tips","isFork":false,"description":"Using `<datalist>` element to implement HTML combobox functionality for input field suggestions.","allTopics":["html","datalist"],"primaryLanguage":{"name":"CSS","color":"#563d7c"},"pullRequestCount":0,"issueCount":0,"starsCount":6,"forksCount":1,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-25T16:13:59.547Z"}},{"type":"Public","name":"responsive-html-video","owner":"Front-Tips","isFork":false,"description":"Using the `orientation: portrait` media query in HTML to deliver responsive `video` content, enhancing usability and performance across devices.","allTopics":["html","orientation-detection","responsive-videos"],"primaryLanguage":{"name":"HTML","color":"#e34c26"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-23T19:49:15.486Z"}},{"type":"Public","name":"customizing-native-file-input","owner":"Front-Tips","isFork":false,"description":"Using the CSS `::file-selector-button` pseudo-element to style the default `<input type=\"file\">` type natively.","allTopics":["css","file-input","pseudo-element","file-selector-button"],"primaryLanguage":{"name":"CSS","color":"#563d7c"},"pullRequestCount":0,"issueCount":0,"starsCount":5,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-21T13:16:12.857Z"}},{"type":"Public","name":"calc-infinity-rounded-corner","owner":"Front-Tips","isFork":false,"description":"","allTopics":["css","infinity","calc-constant"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-19T23:42:32.630Z"}},{"type":"Public","name":"fetch-api-nodejs-example","owner":"Front-Tips","isFork":false,"description":"Testing the compatibility and stability of the `Fetch API` in different Node.js versions","allTopics":["nodejs","javascript","fetch-api"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-17T20:10:28.885Z"}},{"type":"Public","name":"fetch-performance-tracker","owner":"Front-Tips","isFork":false,"description":"Using the JavaScript `PerformanceMeasure` interface of the `Performance API` to track and measure the timing of `fetch` operations.","allTopics":["javascript","performance-analysis","performance-api"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":4,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-17T12:48:12.586Z"}},{"type":"Public","name":"shadow-dom-user-profile","owner":"Front-Tips","isFork":false,"description":"Using the HTML `<template>` content template element and `Shadow DOM` for creating isolated and modular user profile component.","allTopics":[],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":1,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-15T20:26:33.860Z"}},{"type":"Public","name":"css-rule-dynamic-update","owner":"Front-Tips","isFork":false,"description":"","allTopics":["javascript","css-rules","cssom"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-14T17:25:33.674Z"}},{"type":"Public","name":"gamepad-status-monitor","owner":"Front-Tips","isFork":false,"description":"Using the JavaScript `Gamepad API` to display real-time connection status and button states of game controllers.","allTopics":["javascript","game-controller","gamepad-api"],"primaryLanguage":{"name":"CSS","color":"#563d7c"},"pullRequestCount":0,"issueCount":0,"starsCount":1,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-12T20:30:30.547Z"}},{"type":"Public","name":"mouse-wheel-listener","owner":"Front-Tips","isFork":false,"description":"","allTopics":["js","web-api","mouse-wheel","wheel-event"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":1,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-10T10:59:30.570Z"}},{"type":"Public","name":"eyedropper-api","owner":"Front-Tips","isFork":false,"description":"","allTopics":["js","web-api","eyedropper","eyedropper-api"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":1,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-09T13:16:35.435Z"}},{"type":"Public","name":"filelist-web-api","owner":"Front-Tips","isFork":false,"description":"Using the `FileList` interface to display information about a list of files selected with the `input` of `type=\"file\"` HTML element.","allTopics":["js","web-api","filelist-api"],"primaryLanguage":{"name":"CSS","color":"#563d7c"},"pullRequestCount":0,"issueCount":0,"starsCount":4,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-03-08T15:20:20.315Z"}},{"type":"Public","name":"js-ambient-light-sensor-interface","owner":"Front-Tips","isFork":false,"description":"Using the experimental `AmbientLightSensor` interface of the `Sensor APIs` to measure the light intensity around the device's camera.","allTopics":["chrome","experimental","js","ambient-light-sensor"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-25T16:20:04.136Z"}},{"type":"Public","name":"css-container-queries-dynamic-content","owner":"Front-Tips","isFork":false,"description":"Using the `@container` CSS at-rule to conditionally switch emojis based on container height for responsive content.","allTopics":["css","css-container-query"],"primaryLanguage":{"name":"CSS","color":"#563d7c"},"pullRequestCount":0,"issueCount":0,"starsCount":2,"forksCount":1,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-24T16:50:43.976Z"}},{"type":"Public","name":"drag-drop-elements-datatransfer-interface","owner":"Front-Tips","isFork":false,"description":"Using the `HTML Drag and Drop API` to copy and move elements with `DataTransfer` in JavaScript","allTopics":["html","js","datatransfer","html-drag-and-drop"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":49,"forksCount":12,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-24T13:18:30.667Z"}},{"type":"Public","name":"dynamic-background-css-painting-api","owner":"Front-Tips","isFork":false,"description":"Using the `CSS Painting API` to access CSS custom properties and make checkerboard patterns with JavaScript.","allTopics":["css","js","css-paint-api"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-22T15:23:34.092Z"}},{"type":"Public","name":"iframe-message-exchange","owner":"Front-Tips","isFork":false,"description":"Using the Channel Messaging API to make a communication (Cross-window communication) between iframe and its parent app.","allTopics":["js","iframe","channel-messaging"],"primaryLanguage":{"name":"HTML","color":"#e34c26"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-20T09:19:01.487Z"}},{"type":"Public","name":"face-detection-api-chrome","owner":"Front-Tips","isFork":false,"description":"Using Chrome's experimental Face Detection API to dynamically detect and highlight faces in images with JavaScript.","allTopics":["js","face-detection","chrome-experiment"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":4,"forksCount":0,"license":"Other","participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-17T18:18:14.355Z"}},{"type":"Public","name":"picture-in-picture-web-api","owner":"Front-Tips","isFork":false,"description":"","allTopics":[],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":1,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-17T14:53:23.380Z"}},{"type":"Public","name":"json-parse-reviver-function","owner":"Front-Tips","isFork":false,"description":"Using `JSON.parse()` second parameter (reviver) to selectively alter JSON content.","allTopics":["js","json-parse","reviver-function"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-16T15:18:41.211Z"}},{"type":"Public","name":"css-scroll-driven-animation","owner":"Front-Tips","isFork":false,"description":"Like JS's `IntersectionObserver`, using CSS to track elements crossing the ScrollPort and applying `blurFadeIn` animation.","allTopics":["css","scroll-driven"],"primaryLanguage":{"name":"CSS","color":"#563d7c"},"pullRequestCount":0,"issueCount":0,"starsCount":2,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-15T17:57:55.650Z"}},{"type":"Public","name":"css-container-style-queries","owner":"Front-Tips","isFork":false,"description":"Using the experimental CSS feature `@container style()`, showcasing dynamic styling for different product states (new and popular).","allTopics":["css","css-container-query","css-container-style"],"primaryLanguage":{"name":"CSS","color":"#563d7c"},"pullRequestCount":0,"issueCount":0,"starsCount":9,"forksCount":2,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-12T16:19:48.931Z"}},{"type":"Public","name":"react-monitoring-battery-levels","owner":"Front-Tips","isFork":false,"description":"Using `useBattery` hook and the native Battery Status API for tracking and displaying battery levels in React applications.","allTopics":["react","js","battery-monitor"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-11T12:22:17.088Z"}},{"type":"Public","name":"native-javascript-screen-recorder","owner":"Front-Tips","isFork":false,"description":"Using the `Screen Capture API` to make a browser based screen Recorder via JavaScript.","allTopics":["js","screenrecorder"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":16,"forksCount":7,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-05T15:06:49.850Z"}},{"type":"Public","name":"css-ribon-shapes-collection","owner":"Front-Tips","isFork":false,"description":"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.","allTopics":["css","ribbon"],"primaryLanguage":{"name":"CSS","color":"#563d7c"},"pullRequestCount":0,"issueCount":0,"starsCount":1,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-05T01:59:31.540Z"}},{"type":"Public","name":"maintaining-square-proportions","owner":"Front-Tips","isFork":false,"description":"Using `aspect-ratio` to consistently create a perfect square while preserving its aspect ratio.","allTopics":["css","aspect-ratio"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":0,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-04T20:16:42.634Z"}},{"type":"Public","name":"css-margin-inline-rtl-element","owner":"Front-Tips","isFork":false,"description":"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).","allTopics":["css","multilingual"],"primaryLanguage":{"name":"HTML","color":"#e34c26"},"pullRequestCount":0,"issueCount":0,"starsCount":1,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-04T16:47:37.397Z"}},{"type":"Public","name":"stylelint-rules-sorting-css-properties","owner":"Front-Tips","isFork":false,"description":"Using `stylelint-order` to organize CSS properties, enhancing readability and ensuring a consistent coding style across your projects.","allTopics":["stylelint","css"],"primaryLanguage":{"name":"CSS","color":"#563d7c"},"pullRequestCount":0,"issueCount":0,"starsCount":2,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-04T12:41:06.600Z"}},{"type":"Public","name":"native-css-color-mixing","owner":"Front-Tips","isFork":false,"description":"Using `color-mix` to achieve native CSS color mixing, effective for creating color shades from a single base color.","allTopics":["css"],"primaryLanguage":{"name":"CSS","color":"#563d7c"},"pullRequestCount":0,"issueCount":0,"starsCount":1,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-03T14:49:34.706Z"}},{"type":"Public","name":"css-infinite-animation-loop-with-js","owner":"Front-Tips","isFork":false,"description":"Using the JavaScript `updateTiming` method of the `AnimationEffect` interface to set multiple CSS animations to loop infinitely","allTopics":["css","js"],"primaryLanguage":{"name":"JavaScript","color":"#f1e05a"},"pullRequestCount":0,"issueCount":0,"starsCount":2,"forksCount":0,"license":null,"participation":null,"lastUpdated":{"hasBeenPushedTo":true,"timestamp":"2024-01-02T18:09:10.711Z"}}],"repositoryCount":48,"userInfo":null,"searchable":true,"definitions":[],"typeFilters":[{"id":"all","text":"All"},{"id":"public","text":"Public"},{"id":"source","text":"Sources"},{"id":"fork","text":"Forks"},{"id":"archived","text":"Archived"},{"id":"template","text":"Templates"}],"compactMode":false},"title":"Repositories"}