A Chrome extension Form Troubleshooter for identifying and resolving common form issues, ensuring smoother form functionality and user experience.
Form Troubleshooter
Using Chrome DevTools Show user agent shadow DOM feature to inspect and customize input placeholders
Show user agent shadow DOM
Use the <datalist> element to implement a combobox functionality, providing input field suggestions for enhanced user interaction.
<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>
Use the inherit CSS keyword to match text styles to the user's custom browser font settings, enhancing accessibility and user experience.
inherit
font
Explore a collection of creative 404 page designs from various websites, showcasing innovative approaches to error messaging and user engagement.
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
Test the compatibility and stability of the Fetch API across different Node.js versions, exploring its functionality in both experimental and stable releases.
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
Use the JavaScript WheelEvent API to detect mouse wheel and trackpad events, enabling responsive interactions based on user input.
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
Use the HTML Drag and Drop API to copy and move elements with DataTransfer in JavaScript, enabling interactive and intuitive user experiences.
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()
Use the reviver function in JSON.parse() to selectively alter JSON content during parsing, enabling customized data transformations.
reviver
Use the <hr> element to add horizontal rules in <select> menus, visually breaking up content for improved readability and organization.
<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()
Animate characters and bring drawings to life with fluid movement using the AI tool from Meta AI Research, designed for easy and engaging animations.
Using useBattery hook and the native Battery Status API for tracking and displaying battery levels in React applications.
useBattery
Battery Status API
Use the CSS aspect-ratio property to consistently create a perfect square, ensuring the element maintains its proportions across different screen sizes.
aspect-ratio
Create a unique VSCode theme by visually customizing every aspect, allowing for a personalized coding environment tailored to your preferences.
Convert PNG and JPG images to SVG vectors quickly and easily using AI, offering a fast and efficient way to vectorize your images.
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.
Use the Screen Capture API to create a browser-based screen recorder with JavaScript, enabling users to capture their screen activities effortlessly.
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, allowing for an engaging user experience that reacts to scrolling.
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
Use the H key in Chrome DevTools to easily hide nodes, simplifying the process of debugging and visualizing page elements.
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>
Use the appearance property and :checked pseudo-class to create customizable switches with CSS variables for dynamic styling.
appearance
:checked
Use the Browser File System Access API to read and write files directly with JavaScript, enabling local file interactions within web applications.
Use the CSS isolation: isolate property to create a new stacking context, controlling the stacking order of elements on the page.
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
Use animation-timeline to create a dynamic reading progress bar, enhancing user engagement by visually tracking their reading progress.
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 animate an SVG cube using the anime.js library by drawing a 3D cube one square at a time, creating a captivating visual effect.
NextJS Minimalistic Portfolio Template: Perfect if you are a UX designer or Frontend developer looking to showcase your projects minimalistically.
Easily implement drag-and-drop file uploads with Dropzone.js, featuring file type and size limitations for efficient handling of user uploads.
drag-and-drop
ReactJS component toolkit for creating live code editing experiences in the browser, enabling users to interact with and modify components in real-time.
|>
Using the JavaScript Pipeline Operator |> to pipe the value of an expression into a function.
Emulate CSS @media features directly in the Chrome DevTools Rendering tab to test responsive design and media queries.
A beginner-friendly course to help you understand web performance, focusing on Core Web Vitals to improve site speed and user experience.
Using canvas-confetti library to generate a fireworks effect in your browser via confetti animations.
canvas-confetti
A collection of common bad practices in HTML, with detailed tips and fixes to improve your markup and avoid pitfalls.
See how browsers handle incorrectly nested HTML tags with this example, demonstrating how bad markup is managed during rendering.
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.
defer
Using the orientation CSS media feature to test the viewport portrait and landscape orientations.
portrait
landscape
Use the Scene.JS library to create complex timeline-based animations with JavaScript and CSS for more dynamic and engaging web experiences.
Scene.JS
Use Intl.PluralRules in JavaScript to create English ordinal number suffixes like st, nd, rd, and th for formatting numbers.
Intl.PluralRules
Create interactive User Interfaces that track and respond to cursor movements using the watching you JavaScript library.
watching you
Use the CSS scroll-padding-top property to ensure content isn’t hidden behind fixed headers or elements when scrolling by adding space at the top.
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.
Explore an interactive reference to the most commonly used parts of the SVG specification, helping you better understand and use SVG in HTML.
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
Create smooth page transitions using the barba JavaScript library, enhancing the user experience with seamless navigation effects.
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.
­
-
Create responsive, fullscreen scrollable videos with the scrolly-video JavaScript library, enhancing your website's interactivity and visual appeal.
scrolly-video
Enhance GitHub and GitLab with a Chrome extension that assigns unique icons to different file types, improving file visibility and organization.
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.
Use Chrome DevTools to identify and fix low-contrast text, improving readability and accessibility on your website.
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
Create custom CSS scrollbars easily using the online editor scrollbar.app, allowing you to personalize the look of scrollbars on your website.
scrollbar.app
Use depcheck to identify and remove unused npm packages from your JavaScript projects, helping to keep your dependencies clean.
depcheck
npm
Use the importmap in the <script> HTML tag to enable native JavaScript module importing for better control over dependencies.
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 inside a textarea element using the texthighlighter JavaScript library for improved text navigation and visibility.
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
Use the JavaScript visibilitychange event listener to change the favicon dynamically when switching between browser tabs.
visibilitychange
in-browser
Generate and test bookmarklets directly in your browser, allowing you to quickly create and experiment with JavaScript code snippets.
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
List.js is a handy JavaScript library that allows you to easily search, sort, and filter lists for better data management on your website.
Use ls-lint, a naming linter, to enforce consistent rules for file and directory naming across your projects.
ls-lint
The Washington Post Design System is an MIT-licensed open-source design system, providing reusable components and guidelines for consistent UI development.
A handpicked collection of over 30,000 unique and creative color names, providing a rich resource for designers and developers.
A Notion-style WYSIWYG editor with AI-powered autocompletions, designed for seamless and intuitive content creation.
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 interactively for each node, providing an easy way to manipulate and fine-tune SVG designs.
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 video playback programmatically using Chrome DevTools to adjust playback settings directly from the console for more precise control.
Disable or remove event listeners manually using Google Chrome DevTools to control event-driven behaviors during debugging.
Learn how to identify the fonts used for any element on a webpage in Chromium-based browsers like Chrome and Edge, and in Firefox.
Driver.js is a JavaScript library that helps you create interactive on-page tours and guides to enhance user experience.
Create animated SVG line art for easy sketching and replay, bringing your drawings to life with smooth animations.
Use this Chrome extension to simulate smartphones and tablets, making it perfect for testing responsive designs on various devices.
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.
Use this Chrome extension to debug scroll-driven animations directly in DevTools, helping you optimize your animations for a smoother user experience.
Use oddContrast for advanced color contrast analysis to ensure your designs meet WCAG 2 accessibility compliance standards.
oddContrast
Explore SVG path syntax by entering the d attribute string to visualize and discover its commands.
path
d
Test your knowledge of HTML tags with this interactive tool, designed to help improve your recall and mastery of common HTML elements.
Discover the reasons behind large CSS downloads by breaking down the CSS document's size into specific selectors and declarations.
selectors
declarations
Lenis is a 3.8kB minified and gzipped lightweight JavaScript library for smooth, buttery scrolling on your web pages.
3.8kB
gzipped
Use Regular Expressions in VSCode to find and replace HTML comments faster, making your workflow more efficient.
Use the line-clamp CSS property to truncate text after a specific number of lines, ensuring content fits within a defined space.
line-clamp
Explore a collection of over 500 CSS animation loaders to enhance your website's loading experience with smooth and creative effects.
Use Jitter to create animated UIs, social media posts, apps, logos, and more with ease, offering a versatile tool for motion design.
insertAdjacentHTML
Use insertAdjacentHTML in JavaScript to insert nodes into the DOM at specific positions for efficient content updates.
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 in VSCode with ease. Learn how to pin tabs on a separate row and use drag-to-pin for better organization.
Using CSS writing-mode to change text direction to horizontal and vertical orientations.
writing-mode
Learn how to use the CSS mix-blend-mode property to control how elements blend with each other and create interesting visual effects.
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.
#
Learn how to use the # symbol in JavaScript to define private class fields and maintain encapsulation within your JS classes.
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
Use the Lyrics API to fetch song lyrics easily with this JavaScript library, providing seamless access to music data for your projects.
Ignore folders and files globally across all your projects by configuring a .gitignore_global file in Git, ensuring consistent exclusion of unwanted files.
.gitignore_global
href
Use RegEx in VSCode to find and replace all href attribute values efficiently, speeding up your workflow.
Learn about CSS selectors and combinators by organizing and classifying them based on their types for easier understanding and application.