Tag input field
Create a custom input field with selectable tags, using React.
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 · JavaScript Data Structures - Linked List
A linked list is a linear data structure where each element points to the next.
-
JavaScript · JavaScript Data Structures - Doubly Linked List
A doubly linked list is a linear data structure where each element points both to the next and the previous one.
-
JavaScript · Can I use an object as an array without modifying it in JavaScript?
Learn how you can leverage the Proxy object to use a JavaScript object the same way as you would use a regular array.
-
JavaScript · Formatting day and hour ranges with JavaScript
I recently came across a fairly interesting algorithmic problem when formatting day and hour ranges. Here's my take on the solution.
-
JavaScript · Formatting numeric values in JavaScript
Learn common number formatting operations, such as rounding, padding, optional decimal marks, currency, seconds, bytes, and more.
-
JavaScript · Find matching bracket pairs in a string with JavaScript
A common problem when building parsers is finding matching bracket pairs in a string. Here's how you can solve it with JavaScript.
-
React · Mapping data structures to React components
Ever wanted to transform an array into a table or an object into a tree view? Here are some React components that can help you do just that.
-
React · Tooltips, alerts and modals in React
Dialog components like tooltips, alerts and modals are essential for user interaction. Learn how to create them in React.
-
JavaScript · How can I get all ancestors, parents, siblings, and children of an element?
Learn how to traverse the DOM and find all elements related to a given element.
-
JavaScript · What is the Event Loop in JavaScript?
The Event Loop is a source of confusion for many developers, but it's a fundamental piece of the JavaScript engine.
-
JavaScript · JavaScript Data Structures - Graph
A graph is a data structure consisting of a set of vertices connected by a set of edges.
-
CSS · How can I create a circular progress bar using only CSS?
Circular progress bars are fairly common in the web. Luckily, some new CSS features make it easier than ever to create them.
-
React · Stateful checkbox with multiple selection
Render a checkbox list that uses a callback function to pass its selected value/values to the parent component.
-
JavaScript · Render DOM elements with JavaScript
Ever wondered how React's rendering works? Here's a simple JavaScript function that renders a DOM tree in a specified container.
-
CSS · Card hover effects
Create cards with hover effects, such as rotating, shifting and perspective transforms.
-
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.