Chrome extension for finding and resolving common form issues.
Using Chrome DevTools Show user agent shadow DOM feature to inspect and customize input placeholders
Show user agent shadow DOM
Using <datalist> element to implement HTML combobox functionality for input field suggestions.
<datalist>
Using the caret-color property to customize the text cursor in <input>, <textarea> fields or those with contenteditable attribute.
caret-color
<input>
<textarea>
contenteditable
Using the orientation media query in HTML video content for users devices orientation, enhancing usability and performance.
orientation
video
abbr
title
Using the <abbr> HTML element with the title attribute to enhance accessibility and provide definitions.
<abbr>
Using the inherit CSS keyword to match type to user's custom browser font settings.
inherit
font
A collection of 404 page designs from various websites.
Using the CSS ::file-selector-button pseudo-element to style the default <input type="file"> natively.
::file-selector-button
<input type="file">
infinity
Using the CSS calc function with the infinity constant, which represents the largest possible value, to create a fully rounded corner button.
calc
head
Using capo.js in Chrome DevTools Snippets to set the correct order of the <head> to improve the performance of your website.
capo.js
<head>
A website featuring a range of pure CSS-rendered devices, including the latest iPhone, Google Pixel, MacBook Pro, and Apple Watches.
fetch
Testing the compatibility and stability of the Fetch API when using different Node.js versions
Fetch API
fetch()
Using the JavaScript PerformanceMeasure interface of the Performance API to track and measure the timing of fetch operations.
PerformanceMeasure
Performance API
Using the HTML <template> content template element and Shadow DOM for creating isolated and modular user profile component.
<template>
Shadow DOM
Using the JavaScript CSSStyleSheet interface of the CSSOM API to dynamically manipulate CSS rules for interactive use cases.
CSSStyleSheet
CSSOM API
Using the JavaScript Gamepad API to display real-time connection status and button states of game controllers.
Gamepad API
Using the JavaScript WheelEvent Browser API interface to detect mouse wheel and trackpad events.
WheelEvent
Using the experimental JavaScript EyeDropper native browser API to pick colors from the screen including outside of the browser window.
EyeDropper
Using the FileList interface to display information about a list of files selected with the input of type="file" HTML element.
FileList
input
type="file"
Using the experimental AmbientLightSensor interface of the Sensor APIs to measure the light intensity around the device's camera.
AmbientLightSensor
Sensor APIs
Using the @container CSS at-rule to conditionally switch emojis based on container height for responsive content.
@container
DataTransfer
Using the HTML Drag and Drop API to copy and move elements with DataTransfer in JavaScript
HTML Drag and Drop API
Using the CSS Painting API to access CSS custom properties and make checkerboard patterns with JavaScript.
CSS Painting API
Using the Channel Messaging API to make a communication (Cross-window communication) between iframe and its parent app.
Using Chrome's experimental Face Detection API to dynamically detect and highlight faces in images with JavaScript.
Using enterpictureinpicture and leavepictureinpicture events to toggle Picture-in-Picture mode in videos with JavaScript.
enterpictureinpicture
leavepictureinpicture
JSON.parse()
Using JSON.parse() second parameter (reviver) to selectively alter JSON content.
Using hr to add horizontal rule elements into select to break up content visually.
hr
select
Like JS's IntersectionObserver, using CSS to track elements crossing the ScrollPort and applying blurFadeIn animation.
IntersectionObserver
blurFadeIn
Using the experimental CSS feature @container style(), showcasing dynamic styling for different product states (new and popular).
@container style()
Using an AI tool presented by Meta AI Research to animate characters to move around.
Using useBattery hook and the native Battery Status API for tracking and displaying battery levels in React applications.
useBattery
Battery Status API
Using CSS aspect-ratio to consistently create a perfect square while preserving its aspect ratio.
aspect-ratio
Make a unique VSCode theme by visually customizing each aspect.
Convert PNG and JPG images to SVG vectors quickly and easily Using AI.
Regex
Using regular expressions Regex in VSCode to efficiently replace specific parts of URLs in multiple files.
Using sshx from your terminal to share it in real-time with anyone via a link, on a multiplayer infinite canvas featuring remote cursors and chat.
sshx
Git Query Language allows you to search through .git files using an SQL-like language. It includes many SQL features such as sorting, grouping, and performing calculations.
.git
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.
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).
margin-inline-end
A website that regroups a curated collection of buttons from various creators. It is well-organized, categorizing the buttons into predefined groups. Each button includes HTML/CSS code and, in some cases, JavaScript.
Using the Screen Capture API to make a browser based screen Recorder via JavaScript.
Screen Capture API
Using stylelint-order Stylelint Plugin and vscode-style VSCode Extension to organize CSS properties, enhancing readability and ensuring a consistent coding style across your projects.
stylelint-order
vscode-style
color-mix
Using color-mix to achieve native CSS color mixing, effective for creating color shades from a single base color.
updateTiming
Using the JavaScript updateTiming method of the AnimationEffect interface to set multiple CSS animations to loop infinitely.
AnimationEffect
Using animationstart and animationend events in JavaScript to capture the start and end of a CSS animation's lifecycle.
animationstart
animationend
start
end
Play and Pause a video based on its visibility in the viewport.
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.
prefers-reduced-transparency
reduced transparency
@media
Using CSS scripting @media query scripting: enabled to check whether JavaScript is enabled or not.
scripting: enabled
Using the H key to easily hide nodes in Chrome DevTools
H
Using $0, $1, $2 to navigate through DOM elements with extended history in Chrome DevTools Console.
$0
$1
$2
Duplicate elements in Chrome DevTools using either the right-click option or a keyboard shortcut.
right-click
shortcut
nth of selector
Using selector:nth-child(nth of selector) to target the nth element matching a specific selector, enabling complex and precise CSS elements selection.
selector:nth-child(nth of selector)
nth
selector
Using the CSS property list-style-type to style <details> disclosure widgets with custom emoji markers.
list-style-type
<details>
Using appearance and :checked for a customizable switch with CSS variables.
appearance
:checked
Using the Browser File System Access API to read and write to files via JavaScript
Using the CSS property and value isolation: isolate to create a new stacking context
isolation: isolate
Using the JavaScript Context Drop-down in Google Chrome DevTools to Run JavaScript in an iframe Context
iframe
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.
contain: paint
Using the CSS property background-attachment to achieve layered scrolling effects with fixed and dynamic shadows.
background-attachment
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.
scroll-snap-type
scroll-snap-align
Using animation-timeline to create a dynamic reading progress bar for enhanced user engagement.
animation-timeline
:is()
Using :is() pseudo-class to regroup the link :hover and :focus states instead of chaining them for an increased readability.
:hover
:focus
Using overscroll-behavior: none to fix nested scrolling issues, ensuring only the targeted element scrolls.
overscroll-behavior: none
Implementing a typewriter effect fully in CSS with animated text and a blinking caret, using custom properties for timing and steps.
GSAP
Animating text with a gradient during scrolling by creating an interactive scroll animation using GSAP's ScrollTrigger and CSS's mix-blend-mode.
ScrollTrigger
mix-blend-mode
unset
Using the unset CSS keyword to reset all properties to their inherited values, including parent and initial values.
Using check-html-links to check for broken links and references in a public GatsbyJS built folder.
check-html-links
public
anime.js
Sequentially animating an SVG cube with anime.js by drawing a 3D cube one square at a time
NextJS Minimalistic Portfolio Template: Perfect if you are a UX designer or Frontend developer looking to showcase your projects minimalistically.
Drag and Drop files for upload, including file type and size limitations.
ReactJS Component toolkit for creating a live-running code editing experiences in the browser.
|>
Using the JavaScript Pipeline Operator |> to pipe the value of an expression into a function.
Emulate CSS media features using Google Chrome DevTools Rendering tab.
A course designed for those new to web performance to understand Core Web Vitals.
Using canvas-confetti library to generate a fireworks effect in your browser via confetti animations.
canvas-confetti
A collection of bad practices in HTML, including details and tips on how to fix them.
An example showcasing how a browser handles bad markup nesting.
Using @media for a conditional loading of CSS stylesheets based on viewport size to ensure quick loading of high-priority content and defer low-priority content, optimizing performance and resource usage.
viewport
defer
Using the orientation CSS media feature to test the viewport portrait and landscape orientations.
portrait
landscape
Using Scene.JS library to make complex timeline-based animation using JS and CSS.
Scene.JS
Using Intl.PluralRules to create English ordinal number suffixes (st, nd, rd, th) for numbers.
Intl.PluralRules
Creating interactive User Interfaces that track cursor movements.
Using the CSS scroll-padding-top to add space at the top so nothing gets hidden when you scroll.
scroll-padding-top
@counter-style
Using the CSS at rule @counter-style to make a new list style type instead of using the predefined one.
An interactive reference to the most popular/used parts of the SVG spec.
SVG
Using the JS Keyboard Event getModifierState to toggle the element's class on and display ON or OFF text depending on the Caps Lock state.
getModifierState
ON
OFF
srcset
Using Google Chrome DevTools to identify which picture is loaded when using the img tag's srcset attribute, which delivers pictures based on the viewport width and Device Pixel Ratio DPR.
img
DPR
Make Smooth Pages Transitions using barba JS library.
barba
Using the CSS :has and :invalid pseudo-classes to check the input's validity then apply a different style.
:has
:invalid
Two Retro Gaming Design HTML/CSS Kits for creating a nostalgic 8-bit and 16-bit pixel art portfolio.
8-bit
16-bit
Using the ­ HTML entity to enable a long word to break at specified points with a hyphen - when necessary.
­
-
Make responsive full screen scrollable video using the scrolly-video JS library.
scrolly-video
A Chrome Extension that gives different filetypes different icons to GitHub and GitLab.
Using the CSS property offset-path to control the placement of a circle along a custom SVG path, and animating the circle to move across the path from start to finish.
offset-path
npoint
Using npoint for mocking publicly accessible API endpoints, ideal for fetching non-sensitive data.
Using Chrome DevTools to fix low-contrast text.
low-contrast
Using the Page Visibility API's visibilityChange event to pause the video when the browser tab is inactive and play it when active.
visibilityChange
Using the currentColor CSS value to reduce the code redundancy of an alert user interface that has two states, success and danger
currentColor
alert
success
danger
Using a simple online editor scrollbar.app for creating custom CSS scrollbar.
scrollbar.app
Using depcheck to identify unused npm packages from your projects.
depcheck
npm
Using importmap in <script> HTML tag to enable native module importing.
importmap
<script>
Enabling Emulate a focused page in Chrome DevTools to maintain focus for interactive elements (overlay elements), even when clicking outside the inspected element.
Emulate a focused page
Using first-letter and first-line CSS pseudo-elements to make a subheading newspaper first letter style.
first-letter
first-line
Explore browser rendering from HTML/CSS to web content. Discover stages from DOM creation to final display.
textarea
Highlight search results within a textarea element using texthighlighter JS library.
texthighlighter
Dark/Light
Testing the Operating System's response to the CSS media query prefers-color-scheme, which applies different styles for users preferring 'dark' or 'light' mode.
prefers-color-scheme
Using the JS visibilitychange event listener to change the favicon when switching browser tabs.
visibilitychange
in-browser
Generate and test bookmarklets in-browser.
trace.cafe
Using trace.cafe to create a shareable profile link from DevTools, perfect for profiling issues discussions with coworkers or when asking for help in forums.
Using Can I Email to check for the validity of your email's HTML/CSS syntax for the most commonly used email clients.
Can I Email
HTML/CSS
A Handy JS library to Search, Sort and Filter Lists.
Using ls-lint a name linter to enforce rules for file and directory naming.
ls-lint
MIT-licensed open-source Washington Post Design System.
A handpicked list of creative 30,000+ unique color names.
Notion-style WYSIWYG editor with AI-powered autocompletions.
Using text-wrap: balance to optimally distributes characters for balanced text wrapping, already supported in Chromium browsers.
text-wrap: balance
Edit and customize SVG path settings for each node interactively and easily.
LCP
Using LCP Chrome DevTools Script to display information about the Largest Contentful Paint in the console which adds a green dotted line to the LCP (Largest Contentful Paint) element.
Control programmatically a video to adjust playback from the Chrome DevTools.
Disable an Event Listener Manually using Google Chrome DevTools.
Get the font used for an element in Chromium-based browsers vs. Firefox.
A JavaScript library designed for creating interactive on-page tours and guides.
Draw an animated SVG line art for easy sketching and replay.
Chrome extension for simulating smartphones/tablets, ideal for testing responsive websites.
A guideline crafted by W3C's Sustainable Web Design Community Group emphasizes putting people first and assessing visitor needs for a more eco-friendly web experience.
A Chrome Extension to Debug Scroll-Driven Animations via the DevTools.
Using oddContrast for advanced color contrast analysis to ensure WCAG 2 accessibility compliance.
oddContrast
Explore SVG path syntax by entering the d attribute string to visualize and discover its commands.
path
d
An interactive tool for testing your recall of HTML tags.
Discover the reasons behind large CSS downloads by breaking down the CSS document's size into specific selectors and declarations.
selectors
declarations
A 3.8kB minified + gzipped JS lightweight smooth buttery scroll library.
3.8kB
Using Regular Expression in VSCode to find and replace HTML comments.
Using line-clamp CSS property to truncate text at a specific number of lines in a box.
line-clamp
A website including more than 500 CSS Animations Loaders.
Using jitter for making animated UIs, social media posts, apps, logos and more.
jitter
insertAdjacentHTML
Using insertAdjacentHTML to insert Nodes in the DOM at Specified Positions.
Using dateInput.showPicker() to programmatically open the native browser picker of the date form control.
dateInput.showPicker()
date
Using <details> and <summary> Interactive HTML elements to reveal or hide content as needed.
<summary>
Pin Tabs on VSCode Separate Row with Drag-to-Pin.
Using CSS writing-mode to change text direction to horizontal and vertical orientations.
writing-mode
Using CSS mix-blend-mode to control how elements blend together.
Using the CSS shape-outside property to define a shape around a content, allowing for more appealing layouts.
shape-outside
2
2rem
Identify the effects of line-height: 2 (twice the element's font size) versus line-height: 2rem (twice the root font size) by checking the computed style using Chrome DevTools.
line-height: 2
line-height: 2rem
||=
Using JavaScript ||= symbol for Logical OR Assignment, showing how to assign values conditionally in code.
#
Using JavaScript # symbol to define private class fields.
I found Geoff Graham's TIL (Today I Learned) section intriguing. Consider implementing it in your primary portfolio. It can serve as an archive of your progress and keep you motivated to learn more.
Using create-chrome-ext for a faster scaffolding of a chrome extension using boilerplates that support multiple technologies.
create-chrome-ext
An API to fetch song lyrics.
Ignore folders and files globally in all your projects by using a .gitignore_global.
.gitignore_global
href
Find and Replace All href attributes values in VSCode using RegEx.
RegEx
Organize and highlight CSS selectors and combinators by types.
Devices.css https://devicescss.xyz/