React useBodyScrollLock hook
Do you need to lock the body scroll when a modal is open? Perhaps this custom hook can help.
Code Articles
30 seconds of code contains a curated collection of code articles covering a wide range of development needs. The collection spans many topics, ranging from simple coding problems to theoretical concepts and development techniques.
-
React · -
JavaScript · Show or hide HTML elements with JavaScript
Ever wanted to show or hide one or more elements in HTML, using JavaScript? Turns out it's very easy to do so.
-
JavaScript · Introduction to the Node.js test module
The Node.js test module is a new testing tool that's still in its early stages. Learn more about it in this short introduction.
-
JavaScript · Understanding higher-order functions in JavaScript
Learn everything you need to know about higher-order functions with this short guide and level up your programming skills.
-
JavaScript · Get elements wider than the viewport with JavaScript
Ever had elements that horizontally overflow the viewport? This JavaScript function can help you identify them.
-
JavaScript · Calculate all permutations of a JavaScript array or string
Generate all permutations of an array's elements or a string's characters using recursion.
-
JavaScript · Add or remove an event listener in JavaScript
Learn how to add or remove event listeners from elements with ease.
-
CSS · Typewriter effect
Create a typewriter effect animation with CSS variables and just a sprinkle of JavaScript.
-
CSS · Animated CSS loaders
Loading indicators are a staple of modern web design. Here are some CSS loaders to keep your users engaged while they wait.
-
CSS · List with floating or sticky section headings
Learn how to create a list with floating or sticky headings for each section.
-
React · React useRequestAnimationFrame hook
Turn
requestAnimationFrame()into a custom hook to animate your React components. -
JavaScript · Split a JavaScript string into words
Learn how to split a string into words, using the
Intl.SegmenterAPI. -
JavaScript · Initialize a JavaScript array with a sequence of generated values
Ever wanted to initialize an array with a sequence of generated values? Here's a few ways to do it.
-
JavaScript · JavaScript function methods - call(), apply() and bind()
Learn everything you need to know about JavaScript's
call(),apply()andbind()in this short guide. -
JavaScript · How can I define an enum in JavaScript?
Enums are part of TypeScript, but what about defining enums in plain old JavaScript? Here are a few way you can do that.
-
JavaScript · 4 JavaScript Array methods you must know
JavaScript arrays have a very robust API offering some amazing tools. Learn the 4 must-know JavaScript array methods in this quick guide.
-
HTML · Recommended HTML head links
Make your HTML documents more SEO-friendly by including these lines in your
<head>element. -
CSS · How do you review CSS code in Pull Requests?
Reviewing CSS code is a skill that takes time to master. Here are some tips from my personal experience to help you get started.
-
CSS · 10 beautiful CSS background patterns
I hand picked 10 of my favorite CSS background patterns from MagicPattern for your next project. Get them now!
-
React · Persisting state in React
Learn how to persist state in React using hooks and
localStorageorsessionStorage. -
React · Lazy-loading images in React
Learn how to create your own lazy loading image component in React.
-
JavaScript · Understanding the "this" keyword in JavaScript
JavaScript's
thiskeyword can confuse beginners and veterans alike. Learn how it works in different scenarios and start using it correctly. -
JavaScript · What are the differences between Maps and objects in JavaScript?
Maps and objects are very similar, but they have some differences that can help you decide which one better fits your use-case.
-
JavaScript · Get the index of an array item in a JavaScript for...of loop
Did you know you can get the index of an array item in a JavaScript for...of loop? Learn how with this bite-sized tip.