Image gallery with horizontal or vertical scroll
Create a horizontally or vertically scrollable image gallery.
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 · -
JavaScript · Create a math expression parser in JavaScript
Building on top of everything we've tried in past articles, we'll use the Earley parsing algorithm to parse and evaluate math expressions.
-
JavaScript · Modeling complex JavaScript object autoloading and console
In this installment, we'll create a custom object inspect utility to help us debug our complex objects in the console.
-
JavaScript · Modeling complex JavaScript object advanced relationships
In this installment of the ActiveRecord-like JavaScript implementation, we will revisit modeling relationships between objects.
-
JavaScript · Using Test-Driven Development to refactor a JavaScript project
In the last installment of the series, we'll refactor our codebase to reduce bundle size and complexity, while making it more maintainable.
-
JavaScript · Modeling complex JavaScript object serialization
In the fourth part of the series, we will look at how to serialize complex JavaScript objects.
-
JavaScript · Modeling complex JavaScript object field validation
Returning to the models and records part of the implementation, this time around we'll explore how to add constraints to individual fields.
-
JavaScript · Making a Brainfuck interpreter in JavaScript - Part 2
Picking up where I left off last time, I'm wrapping up the Brainfuck interpreter, by making a simple VM for code execution and debugging.
-
JavaScript · Modeling complex JavaScript object scopes
In the third installment of implementing an ActiveRecord-like pattern in JavaScript, we'll model and optimize object scoping.
-
JavaScript · Modeling complex JavaScript object factories
Expanding even further upon our ActiveRecord-inspired project, we'll figure out how to create factories that produce complex objects.
-
JavaScript · Modeling complex JavaScript object collections in memory
A deep dive into a fairly flexible implementation, inspired by Rails' ActiveRecord, for modeling JavaScript object collections in memory.
-
JavaScript · Making a Brainfuck interpreter in JavaScript - Part 1
Continuing on the code interpretation path, I'm attempting to build a Brainfuck interpreter, using an AST to represent and execute the code.
-
JavaScript · Implementing a library for readable regular expressions in JavaScript
Having set up our environment and designed the API, it's time to implement the RegExp library we've been planning, using Vite and Vitest.
-
JavaScript · Convert between CSV and JavaScript arrays, objects or JSON
Serialize and deserialize CSV data in JavaScript with this in-depth guide.
-
JavaScript · Simple HTML tokenization & validation in JavaScript
Expanding upon previous articles on bracket matching and tokenization, it's time to try a basic HTML tokenization and validation algorithm.
-
JavaScript · Implementing search in JavaScript, using TF-IDF and an inverted index
Building on top of the Porter stemmer, we'll explore how to use TF-IDF and an inverted index to implement a search algorithm in JavaScript.
-
JavaScript · Implementing a Smallfuck Interpreter in JavaScript
Yet another interpreter article, this time around we'll be building a full-fledged interpreter for the esolang Smallfuck.
-
JavaScript · Modeling complex JavaScript object attributes & relationships
Continuing on the journey to implement an ActiveRecord-like pattern in JavaScript with object attributes and relationships.
-
CSS · Styling checkboxes and radio buttons
Learn how to create customized and animated checkboxes and radio buttons with CSS.
-
JavaScript · How can I calculate the diff between two strings in JavaScript?
Delve deep into the Myers diff algorithm and learn how to calculate the difference between two strings in JavaScript, the way Git does.
-
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 · Designing a user-centric API for a JavaScript library
Building atop the TDD foundation from last time, let's explore how to design a user-centric API for our JavaScript library.
-
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.