Search for answers to your development problems among 1142 code snippets on 30 seconds of code.

Browse a wide variety of ES6 helper functions, including array operations, DOM manipulation, algorithms and Node.js utilities.

JavaScript

Browse helper functions for Python 3.6, including utilities for primitives, lists, dictionaries and date objects.

Python

Discover function components and reusable hooks for React 16.

React

A snippet collection of interactive CSS3 examples, covering layouts, styling, animation and user interactions.

JavaScript Date

JavaScript String

JavaScript Math

JavaScript Type

JavaScript Array

JavaScript Function

JavaScript Object

Python Dictionary

A snippet collection of simplified git documentation and tips, covering most commonly-used commands and covering various use-cases.

Python String

JavaScript generator functions are a more advanced yet very powerful JavaScript ES6 feature, which you can start using in your code right now.

JavaScript Generator Functions

Python Math

JavaScript promises provide a modern and elegant way to to handle asynchronous operations. This snippet collection covers the basics of promises and how to use them in your code.

JavaScript Promises

Python Date

Python Function

Python List

Working with color in JavaScript requires some understanding of color formats and conversions. Luckily, this snippet collection's got you covered.

Working with color in JavaScript

Learn some of the basics of testing React components in various scenarios using React Testing Library.

React Testing

Prepare for your next JavaScript interview with this collection of interview questions and answers.

JavaScript Interview Questions

Learn a handful of awesome tips and tricks that you can leverage in your code to make array manipulation a breeze.

JavaScript Array Tricks

Discover a collection of reusable function components for React 16.

React Components

Discover a collection of reusable hooks for React 16.

React Hooks

A collection of techniques for centering HTML elements in any situation using CSS.

CSS Centering

Comparing values in JavaScript is one of the most common tasks, yet it has a lot of things you should bear in mind.

JavaScript Comparison

A guide to some of the most commonly-used data structures, along with JavaScript implementations and examples.

JavaScript Data Structures

Understand the fundamentals of React's rendering process as well as more advanced techniques with this series of articles.

React Rendering

A collection of cheatsheets to bookmark and come back to whenever you need to look up anything.

Cheatsheets

CSS Animations

CSS Visual

Select, traverse and manipulate DOM elements with this collection of JavaScript ES6 snippets.

JavaScript Browser

Discover a collection of server-side JavaScript utility functions for Node.js 14.x.

Node.js

Learn a handful of popular algorithms, implemented in JavaScript ES6.

JavaScript Algorithms

CSS Interactivity

A collection of quick tips and tricks to level up your coding skills one step at a time.

Tips & Tricks

CSS Layouts

Git Branch

Git Repository

Git Commit

Git Configuration

Creates a horizontally scrollable image gallery.

Image gallery with horizontal scroll

Image gallery with vertical scroll

Take a deeper dive into React's rendering process and understand the basics behind the popular JavaScript framework.

React rendering basics

Creates a styled checkbox with animation on state change.

Custom checkbox

There are many ways to iterate and transform array data in JavaScript. Learn how each one works and where you should use them.

For loops, array reduce and method chaining

Code Anatomy - For loops, array reduce and method chaining

Take a deeper dive into React's rendering process and understand the role of the Context API and Redux in it.

React rendering state

A doubly linked list is a linear data structure where each element points both to the next and the previous one.

Doubly Linked List

JavaScript Data Structures - Doubly Linked List

A graph is a data structure consisting of a set of vertices connected by a set of edges.

Graph

JavaScript Data Structures - Graph

A linked list is a linear data structure where each element points to the next.

Linked List

JavaScript Data Structures - Linked List

Testing React components that update asynchronously with React Testing Library is a common scenario. Learn how to deal with common issues and speed up your testing.

Asynchronous component update testing

Testing React components that update asynchronously with React Testing Library

Learn how the new JavaScript ES6 Iterators work and how you can use them to level up your programming projects by understanding these short code examples.

JavaScript iterators introduction

What are JavaScript Iterators and where can I use them?

Learn how you can leverage the Proxy object to use a JavaScript object the same way as you would use a regular array.

Object as array

Can I use an object as an array without modifying it in JavaScript?

JavaScript provides a handful of native data structures that you can start using in your code right now.

Native Data Structures

Native JavaScript Data Structures

Tag input field

When working with state in your code, you often run into issues with maintaining complexity and readability. Oftentimes, these issues are easily fixable.

Readable reducer tips

Writing readable reducers in Redux

Take a deeper dive into React's rendering process and understand how to make small yet powerful tweaks to optimize performance.

React rendering optimization

Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.

Stateful checkbox with multiple selection

Boolean traps can cause readabiltiy and maintainability issues in your code. Learn what they are, how to spot and fix them in this article.

Boolean traps

Boolean traps and how to avoid them

Creates a list with floating headings for each section.

List with floating section headings

Learn the differences between JavaScript ES6 arrow functions and regular functions and how they affect event listener callbacks.

Arrow function as callback for event listener

Can I use an arrow function as the callback for an event listener in JavaScript?

Learn different ways to memoize function calls in JavaScript as well as when to use memoization to get the best performance results.

Memoization introduction

Where and how can I use memoization in JavaScript?

Learn how to use JavaScript ES6 generators and iterators to iterate over ranges of numbers.

Generator functions for ranges

Using JavaScript generator functions for ranges

Create your own static file server with Node.js in just 70 lines of code.

Node.js static file server

Create a static file server with Node.js

Groups the given data into <code class="notranslate">k</code> clusters, using the <a target="_blank" rel="nofollow noopener noreferrer" href="https://en.wikipedia.org/wiki/K-means_clustering">k-means clustering</a> algorithm.

K-means clustering

Asynchronously looping over arrays in JavaScript comes with a few caveats you should watch out for.

Asynchronous array loops

Asynchronous array loops in JavaScript

Learn everything you need to know about higher-order functions with this short guide and level up your programming skills.

Higher-order functions

Understanding higher-order functions in JavaScript

Did you know you can define an iterator for any JavaScript value? This quick tip will show you how.

Make any value iterable

Tip: Make any JavaScript value iterable

A tree is a data structure consisting of a set of linked nodes representing a hierarchical tree structure.

Tree

JavaScript Data Structures - Tree

Renders a textarea component with a word limit.

Textarea with word limit

Renders a Modal component, controllable through events.

Modal dialog

JavaScript arrays have a very robust API offering a plethora of amazing tools. Learn the 4 must-know JavaScript array methods in this quick guide.

Useful array methods

4 JavaScript Array methods you must know

Learn how to programmatically copy text to clipboard with a few lines of JavaScript and level up your web development skills.

Copy text to clipboard

How can I copy text to clipboard with JavaScript?

Enums are part of TypeScript, but what about defininf enums in plain old JavaScript? Here are a few way you can do that.

Enum implementation

How can I define an enum in JavaScript?

Learn how JavaScript handles mutable data, such as objects and arrays, and understand how shallow cloning and deep cloning work.

Object cloning

How do I clone an object in JavaScript?

Easily remove duplicates from a JavaScript array using the built-in <code class="notranslate">Set</code> object.

Remove duplicates from an array

Tip: Remove duplicates from a JavaScript array

Renders a tabbed menu and view component.

Tabs

Displays an image overlay effect on hover.

Image overlay on hover

A hover effect where the gradient follows the mouse cursor.

Mouse cursor gradient tracking

Retrieves a set of properties indicated by the given selectors from an object.

Get nested object property from path string

Closures are used frequently, yet often misunderstood. Understanding them in depth is crucial to be able to write clean, maintainable code.

Closures and hidden state

Are JavaScript closures inherently evil?

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.

Array index in for...of loops

Tip: Get the index of an array item in a JavaScript for...of loop

Learn how to use the JavaScript ES6 spread syntax to converting iterables to arrays and level up your code today.

Iterable to array

How do I convert an iterable to an array in JavaScript?

A binary tree is a data structure consisting of a set of linked nodes representing a hierarchical tree structure, in which each node can have at most two children.

Binary Tree

JavaScript Data Structures - Binary Tree

Wrapping your mind around React hooks and how they interact with <code class="notranslate">setInterval()</code> can be difficult. Here's a guide to get you started.

Step-by-step useInterval hook

Write a useInterval hook in React

Displays a menu overlay when the user hovers over the image.

Menu on image hover

Returns the human-readable format of the given number of milliseconds.

Format duration

Creates an object containing the parameters of the current URL.

URL parameters as object

Classifies a data point relative to a labelled data set, using the <a target="_blank" rel="nofollow noopener noreferrer" href="https://en.wikipedia.org/wiki/K-nearest_neighbors_algorithm">k-nearest neighbors</a> algorithm.

K-nearest neighbors

Learn everything you need to know about promises and asynchronous JavaScript with this handy cheatsheet.

Asynchronous JavaScript Cheat Sheet

Learn how to implement the singleton design pattern in JavaScript, using the Proxy object.

Singleton implementation

How can I implement a singleton in JavaScript?

When working with numeric arrays in JavaScript, you might find yourself in need of finding the minimum or maximum value. Here's a quick and easy way to do it.

Min and max value of an array

Tip: Min and max value in a JavaScript array

A binary search tree is a data structure consisting of a set of ordered linked nodes representing a hierarchical tree structure, in which each node can have at most two children.

Binary Search Tree

JavaScript Data Structures - Binary Search Tree

Maps and objects are very similar, but they have some differences that can help you decide which one better fits your use-case.

Maps vs objects

What are the differences between Maps and objects in JavaScript?

Did you know there are multiple ways to remove an element from an array? Let's take a look.

Recommended snippets

Image gallery with horizontal scroll

Image gallery with vertical scroll

React rendering basics