Image gallery with horizontal or vertical scroll
Create a horizontally or vertically scrollable image gallery.
Code Snippets
30 seconds of code provides a curated collection of short code snippets for all your development needs. Our collection spans many topics, ranging from simple coding problems to theoretical concepts and development techniques.
-
CSS · -
JavaScript · Convert between CSV and JavaScript arrays, objects or JSON
Serialize and deserialize CSV data in JavaScript with this in-depth guide.
-
CSS · Styling checkboxes and radio buttons
Learn how to create customized and animated checkboxes and radio buttons with CSS.
-
React · React rendering
Take a deep dive into React's rendering process to understand the basics, performance optimization and the role of state management in it.
-
JavaScript · Calculate SHA-256 hash in JavaScript
Calculate a SHA-256 hash in JavaScript using native APIs in both the browser and Node.js.
-
React · Advanced React state hooks
Is
useState()too limited for you? PerhapsuseReducer()doesn't quite cut it either? Let's explore some advanced state management hooks. -
React · Tag input field
Create a custom input field with selectable tags, using 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 numeric values in JavaScript
Learn common number formatting operations, such as rounding, padding, optional decimal marks, currency, seconds, bytes, and more.
-
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.