Frontend Code Snippets & Tips
Bite-sized code snippets and tips to sharpen your frontend skills.
CSS Anchor Positioning
Position popovers relative to any element using CSS anchor positioning — no JavaScript positioning library needed.
CSS Animated Accordion
Smooth open/close animations on native details elements using interpolate-size — no JavaScript height measurement.
CSS color-mix() Palette
Derive an entire color system from one base color using color-mix() and oklch() — no Sass functions, no JavaScript.
CSS Container Queries
Make components respond to their container width instead of the viewport — true component-level responsive design.
CSS :has() Form Validation
Style forms based on input validity using the :has() parent selector — no JavaScript event listeners needed.
Native CSS Nesting
Write Sass-like nested rules directly in CSS — no preprocessor, no build step, no extra dependency.
CSS Scroll Progress Bar
Build a reading progress bar that fills as you scroll — entirely with CSS, no JavaScript.
CSS Scroll Reveal Animations
Animate elements into view as they enter the viewport — no JavaScript, no libraries, just CSS.
CSS @starting-style
Animate elements into view from display none using @starting-style — no JavaScript timing hacks, no setTimeout workarounds.
CSS View Transitions
Morph between UI states with smooth animations using the View Transitions API — CSS handles the animation, JavaScript just toggles a class.
Event handlers arguments in React
onClick, onChange, onBlur... We usually pass a reference to the function handler but how do we add more arguments instead of just the event itself?
Remove duplicates in JavaScript
Clones might take over the world, we need to learn how to remove duplicates from an array.
Reverse String in JavaScript
There is no built-in method on string type to reverse it in JavaScript.
React Dark Mode hook
We'll create useDarkMode hook to switch between light and dark themes.
React fetch hook
Let's create a custom hook for fetching data with the browser fetch.
Place HTML Elements Absolutely with CSS
Use a combination of position relative and absolute to place text on the image card.
React toggles hook
Having too many dialogs, modals, popups and state starts to become repetitive? Solution - write a custom hook.
React counter hook
Let's create a custom hook for tracking the counter state and exposing the current counter value with increment, decrement handlers.
CSS Relative Units
Do you only use pixels or % in CSS? Open yourself to more possibilities and best practices.
ECMAScript new features
Null coalescing operator, optional chaining, and Array.flat method are all amazing.
Search through string in JavaScript
Need to search for a character, word, or entire sentence? String .includes method to the rescue.
JavaScript multiple condition checks
Checking multiple values in JavaScript often leads to redundant, boilerplate code - let's use .includes method to fix that.
Convert JavaScript data structures
Converting data structures is a day-to-day job as a Developer.
Method chaining
Method chaining is a helpful pattern to learn in programming.
Sum using reduce
Use the versatile .reduce method to sum an array of numbers.
Immutable add, edit, delete operations
Learn how to add, edit and delete array of objects in semantic, declarative approach using rest spread operator and array methods.
Adjust box sizing in CSS
Adjust box-sizing property to include padding and border to actual width or height. Simplifies overhead of the box model.
Reset & normalize for CSS
Avoid CSS reset and normalize your styles through different browsers.
Flexbox equal height cards
Make all cards equal height with flexbox. Especially helpful when content is dynamic.
Outline HTML elements
Outline all your HTML elements with a single line of CSS.
Want to write for BigDevSoon? Reach out at adrian@bigdevsoon.me
Become an author