Knowledge Pills
Bite-sized code snippets and tips to sharpen your frontend skills.
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