Card hover effects
Create cards with hover effects, such as rotating, shifting and perspective transforms.
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.
-
CSS · -
React · Collapsible content React components
Collapsible content is a common UI pattern. Learn how to create collapsible content components in React in this short guide.
-
JavaScript · Modeling money, currencies & exchange rates using JavaScript
A deep dive into modeling money, currencies, and exchange rates using JavaScript.
-
CSS · Alternating text animations
Ever wondered how those alternating text animations work? Here's a simple way to create one using CSS and JavaScript.
-
JavaScript · Get all unique values in a JavaScript array & remove duplicates
Easily remove duplicates from a JavaScript array using the built-in
Setobject, and learn a few other tricks along the way. -
JavaScript · Case conversion in JavaScript
A complete guide to case conversion in JavaScript, including camel case, kebab case, snake case, Pascal case, title case and sentence case.
-
JavaScript · How can I clone an object in JavaScript?
Learn how JavaScript handles mutable data, such as objects and arrays, and understand how shallow cloning and deep cloning work.
-
JavaScript · What are JavaScript Iterators and where can I use them?
Learn how JavaScript's iterators work and how you can use them to level up your projects by understanding these short code examples.
-
JavaScript · Get a nested object property by key or path in JavaScript
Learn how to get a nested object property by key or a path string in JavaScript, and how to search for nested values in an object.
-
JavaScript · How can I group and count values in a JavaScript array?
Learn how to group and count the values of a JavaScript array using simple array methods.
-
JavaScript · The many ways to initialize a JavaScript Array
Discover the inner workings of JavaScript arrays and learn about the different ways to initialize them.
-
React · Testing React components that update asynchronously with React Testing Library
Testing React components that update asynchronously is pretty common. Learn how to deal with common issues and speed up your testing.
-
React · Button with ripple effect
Learn how to create an animated button with a ripple effect when clicked.
-
JavaScript · Transform the keys of a JavaScript object
Learn how to perform various transformations on the keys of a JavaScript object.
-
JavaScript · Using a Proxy to implement the Observable pattern
Use the Proxy object to implement the Observable pattern in JavaScript.
-
JavaScript · Code Anatomy - For loops, array reduce and method chaining
There are many ways to iterate and transform array data in JavaScript. Learn how each one works and where you should use them.
-
React · React hooks to handle window and environment events
Learn how to use React hooks to handle window events, media queries, server-side rendering and more.
-
React · Create a textarea React component with word or character limit
Create your custom textarea components, with a word or character limit in React.
-
JavaScript · How can I copy text to clipboard with JavaScript?
Learn how to programmatically copy text to clipboard with a few lines of JavaScript and level up your web development skills.
-
JavaScript · Can I use an arrow function as the callback for an event listener in JavaScript?
Learn the differences between JavaScript ES6 arrow functions and regular functions and how they affect event listener callbacks.
-
React · Star rating component
Create your very own star rating component in React.
-
JavaScript · How can I zip and unzip arrays in JavaScript?
Learn how to implement array zipping, a grouping of elements based on position in the original arrays, and its inverse, unzipping.
-
JavaScript · Sort an array of objects in JavaScript
Ever wanted to sort an array of objects, but felt like it was too complex? Here's a robust solution for just that.
-
JavaScript · Partition a JavaScript array into two or more arrays based on a condition
Group array elements into two or more arrays arrays, depending on the provided function's return value.