30 seconds of code

30 seconds of code Coding articles to level up your development skills https://www.30secondsofcode.org en-us https://www.30secondsofcode.org/assets/logo.png 30 seconds of code https://www.30secondsofcode.org 1440 Implementing a Sudoku validator in JavaScript https://www.30secondsofcode.org/js/s/sudoku-validator Sudoku is a logic-based combinatorial number-placement puzzle. This article discusses how to implement a Sudoku validator in JavaScript. Wed, 11 Jun 2025 00:00:00 GMT Markdown Cheatsheet https://www.30secondsofcode.org/articles/s/markdown-cheatsheet Markdown is the most popular markup language for writing documentation. Here is a cheatsheet with the most common syntax. Sun, 08 Jun 2025 00:00:00 GMT Vocal fails are better than silent fails https://www.30secondsofcode.org/js/s/vocal-fails-silencing-errors Learn why vocal errors are better than silent ones, how to handle them effectively, and improve debugging and collaboration in JavaScript. Wed, 04 Jun 2025 00:00:00 GMT Creating a Matrix data structure in JavaScript https://www.30secondsofcode.org/js/s/matrix-data-structure After working with 2D arrays for a while, I decided to create a convenient wrapper for operations. Here's the gist of it. Sun, 01 Jun 2025 00:00:00 GMT ESLint & Prettier configuration https://www.30secondsofcode.org/js/s/eslint-prettier-configuration Instead of reconfiguring ESLint and Prettier every time, I use this configuration to get started quickly. Wed, 28 May 2025 00:00:00 GMT Creating tabbed content without JavaScript https://www.30secondsofcode.org/css/s/details-tabbed-content Leverage modern HTML and CSS capabilities to create a tabbed content component without JavaScript. Mon, 26 May 2025 00:00:00 GMT Creating accordion-style content without JavaScript https://www.30secondsofcode.org/html/s/details-accordion Did you know you don't need JavaScript to create accordion-style content? Here's how to do it with the details element. Thu, 22 May 2025 00:00:00 GMT Are text-align and align-items the same when it comes to text alignment in CSS? https://www.30secondsofcode.org/css/s/text-centering-line-block In the age of flexbox and grid, text alignment may seem simpler than ever, but there are a few things you should be aware of. Mon, 19 May 2025 00:00:00 GMT Using the inset CSS property https://www.30secondsofcode.org/css/s/inset The inset shorthand property makes element positioning in CSS easier. Learn how to use it effectively in your projects. Thu, 15 May 2025 00:00:00 GMT Logical and physical CSS properties equivalents https://www.30secondsofcode.org/css/s/logical-physical-properties-map New to CSS logical properties? This article provides a handy map of logical properties to their physical counterparts. Mon, 12 May 2025 00:00:00 GMT You Shouldn’t Always Modularize Your Code https://www.30secondsofcode.org/articles/s/code-modularization Have you ever stopped to wonder if modularization is right for your use case? What if I told you it might not be? Sat, 10 May 2025 00:00:00 GMT JavaScript Operator Cheatsheet https://www.30secondsofcode.org/js/s/operator-cheatsheet Quick reference for JavaScript operators. Wed, 07 May 2025 00:00:00 GMT Progressive enhancement with Web Components https://www.30secondsofcode.org/js/s/progressive-enhancement-web-components Dive into Web Components with me and learn how I used them to create modular interactive components to progressively enhance my website. Sat, 03 May 2025 00:00:00 GMT Implementing fuzzy matching in JavaScript https://www.30secondsofcode.org/js/s/n-gram-fuzzy-matching Having built a search engine with TF-IDF and inverted indexes, we will now implement fuzzy matching to make searching error-tolerant. Tue, 29 Apr 2025 00:00:00 GMT Formatting relative time in JavaScript https://www.30secondsofcode.org/js/s/relative-time-formatting Did you know JavaScript has a built-in way to format relative time? It's called Intl.RelativeTimeFormat and it's awesome! Thu, 24 Apr 2025 00:00:00 GMT Detect the user's OS in the browser with JavaScript https://www.30secondsofcode.org/js/s/browser-os-detection Learn how to easily detect the user's operating system in the browser using JavaScript. Sat, 19 Apr 2025 00:00:00 GMT Implementing partial search matching in JavaScript https://www.30secondsofcode.org/js/s/partial-search-matching Building on top of the TF-IDF and inverted index implementation, we will implement partial search matching to make searching more robust. Mon, 14 Apr 2025 00:00:00 GMT Implementing search in JavaScript, using TF-IDF and an inverted index https://www.30secondsofcode.org/js/s/tf-idf-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. Wed, 09 Apr 2025 00:00:00 GMT Implementing the Porter stemming algorithm in JavaScript https://www.30secondsofcode.org/js/s/porter-stemming-algorithm Learn how to implement the Porter stemming algorithm in JavaScript, a simple algorithm for stripping English words of common suffixes. Sun, 06 Apr 2025 00:00:00 GMT Implementing signals and reactivity with vanilla JavaScript https://www.30secondsofcode.org/js/s/event-driven-vanilla-js-signals Let's demystify signals and reactivity, one of the most popular patterns in modern JavaScript, using event-driven programming! Wed, 02 Apr 2025 00:00:00 GMT Using Test-Driven Development to refactor a JavaScript project https://www.30secondsofcode.org/js/s/tdd-codebase-refactoring In the last installment of the series, we'll refactor our codebase to reduce bundle size and complexity, while making it more maintainable. Fri, 28 Mar 2025 00:00:00 GMT Implementing a library for readable regular expressions in JavaScript https://www.30secondsofcode.org/js/s/tdd-library-implementation-with-vite-vitest 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. Mon, 24 Mar 2025 00:00:00 GMT Designing a user-centric API for a JavaScript library https://www.30secondsofcode.org/js/s/user-centric-api-design Building atop the TDD foundation from last time, let's explore how to design a user-centric API for our JavaScript library. Thu, 20 Mar 2025 00:00:00 GMT Kickstart a JavaScript project with Test-Driven Development https://www.30secondsofcode.org/js/s/test-driven-development-intro I recently built a project using Test-Driven Development (TDD) and it was a great experience. Here's why I think you should try it, too. Mon, 17 Mar 2025 00:00:00 GMT What happens when you call every() on an empty JavaScript array? https://www.30secondsofcode.org/js/s/empty-array-every-some A few days ago, I stumbled upon a perplexing piece of JavaScript behavior. Let's break it down. Fri, 14 Mar 2025 00:00:00 GMT Create a math expression parser in JavaScript https://www.30secondsofcode.org/js/s/math-expression-parser Building on top of everything we've tried in past articles, we'll use the Earley parsing algorithm to parse and evaluate math expressions. Wed, 12 Mar 2025 00:00:00 GMT Making a Brainfuck interpreter in JavaScript - Part 2 https://www.30secondsofcode.org/js/s/brainfuck-interpreter-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. Sat, 08 Mar 2025 00:00:00 GMT Making a Brainfuck interpreter in JavaScript - Part 1 https://www.30secondsofcode.org/js/s/brainfuck-interpreter-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. Sat, 01 Mar 2025 00:00:00 GMT Implementing a Smallfuck Interpreter in JavaScript https://www.30secondsofcode.org/js/s/smallfuck-interpreter Yet another interpreter article, this time around we'll be building a full-fledged interpreter for the esolang Smallfuck. Mon, 24 Feb 2025 00:00:00 GMT Simple HTML tokenization & validation in JavaScript https://www.30secondsofcode.org/js/s/simple-html-tokenization-validation Expanding upon previous articles on bracket matching and tokenization, it's time to try a basic HTML tokenization and validation algorithm. Fri, 21 Feb 2025 00:00:00 GMT Create a math expression tokenizer in JavaScript https://www.30secondsofcode.org/js/s/math-expression-tokenizer Learn how to tokenize math expressions, using a simple JavaScript algorithm, forming the basis for more complex interpreters and compilers. Tue, 18 Feb 2025 00:00:00 GMT How can I parse Reverse Polish Notation in JavaScript? https://www.30secondsofcode.org/js/s/parse-reverse-polish-notation Parsing Reverse Polish Notation, also known as postfix notation, is a simple algorithm that can be implemented in JavaScript using a stack. Sat, 15 Feb 2025 00:00:00 GMT How can I calculate the diff between two strings in JavaScript? https://www.30secondsofcode.org/js/s/myers-diff-algorithm Delve deep into the Myers diff algorithm and learn how to calculate the difference between two strings in JavaScript, the way Git does. Wed, 12 Feb 2025 00:00:00 GMT Find matching bracket pairs in a string with JavaScript https://www.30secondsofcode.org/js/s/find-matching-bracket-pairs A common problem when building parsers is finding matching bracket pairs in a string. Here's how you can solve it with JavaScript. Fri, 07 Feb 2025 00:00:00 GMT How can I find the longest common subsequence of two strings in JavaScript? https://www.30secondsofcode.org/js/s/longest-common-subsequence The longest common subsequence is the longest subsequence common to all given sequences and can be easily found using dynamic programming. Mon, 03 Feb 2025 00:00:00 GMT Formatting day and hour ranges with JavaScript https://www.30secondsofcode.org/js/s/formatting-day-hour-ranges I recently came across a fairly interesting algorithmic problem when formatting day and hour ranges. Here's my take on the solution. Wed, 29 Jan 2025 00:00:00 GMT Modeling complex JavaScript object advanced relationships https://www.30secondsofcode.org/js/s/complex-object-advanced-relationships In this installment of the ActiveRecord-like JavaScript implementation, we will revisit modeling relationships between objects. Thu, 23 Jan 2025 00:00:00 GMT Modeling complex JavaScript object autoloading and console https://www.30secondsofcode.org/js/s/complex-object-autoloading-console In this installment, we'll create a custom object inspect utility to help us debug our complex objects in the console. Thu, 16 Jan 2025 00:00:00 GMT Modeling complex JavaScript object field validation https://www.30secondsofcode.org/js/s/complex-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. Thu, 09 Jan 2025 00:00:00 GMT Modeling complex JavaScript object factories https://www.30secondsofcode.org/js/s/complex-object-factories Expanding even further upon our ActiveRecord-inspired project, we'll figure out how to create factories that produce complex objects. Thu, 02 Jan 2025 00:00:00 GMT Modeling complex JavaScript object serialization https://www.30secondsofcode.org/js/s/complex-object-serialization In the fourth part of the series, we will look at how to serialize complex JavaScript objects. Thu, 26 Dec 2024 00:00:00 GMT Modeling complex JavaScript object scopes https://www.30secondsofcode.org/js/s/complex-object-scopes In the third installment of implementing an ActiveRecord-like pattern in JavaScript, we'll model and optimize object scoping. Thu, 19 Dec 2024 00:00:00 GMT Modeling complex JavaScript object attributes & relationships https://www.30secondsofcode.org/js/s/complex-object-attributes-relationships Continuing on the journey to implement an ActiveRecord-like pattern in JavaScript with object attributes and relationships. Thu, 12 Dec 2024 00:00:00 GMT Modeling complex JavaScript object collections in memory https://www.30secondsofcode.org/js/s/complex-object-collections-in-memory A deep dive into a fairly flexible implementation, inspired by Rails' ActiveRecord, for modeling JavaScript object collections in memory. Thu, 05 Dec 2024 00:00:00 GMT Display the right type of keyboard for form inputs https://www.30secondsofcode.org/html/s/keyboard-type-using-inputmode Keyboard input on mobile devices is hard to get right. Here's how to ensure the right keyboard is displayed for each input. Tue, 03 Dec 2024 00:00:00 GMT How can I calculate the distance between two coordinates using JavaScript? https://www.30secondsofcode.org/js/s/distance-of-two-lat-lng-coordinates Given two pairs of latitude and longitude coordinates, you can calculate the distance between them using the Haversine formula. Let's find out how. Mon, 02 Dec 2024 00:00:00 GMT Show menu on image hover https://www.30secondsofcode.org/css/s/image-hover-menu Display a menu overlay when the user hovers over an image. Tue, 24 Sep 2024 00:00:00 GMT Reveal additional content on hover https://www.30secondsofcode.org/css/s/hover-additional-content Learn how you can create a card that displays additional content on hover. Mon, 23 Sep 2024 00:00:00 GMT Scroll progress bar https://www.30secondsofcode.org/css/s/scroll-progress-bar Create a progress bar indicating the scroll percentage of the page, using CSS and JavaScript. Sun, 22 Sep 2024 00:00:00 GMT Image rotate on hover https://www.30secondsofcode.org/css/s/image-hover-rotate Zoom in and rotate your images on hover and make them stand out. Sat, 21 Sep 2024 00:00:00 GMT

<title>30 seconds of code</title>

<description>Coding articles to level up your development skills</description>

<image>

<url>https://www.30secondsofcode.org/assets/logo.png</url>

<title>30 seconds of code</title>

</image>

<atom:link href="https://www.30secondsofcode.org/feed.xml" rel="self" type="application/rss+xml"/>

<item>

<title>Implementing a Sudoku validator in JavaScript</title>

<description>Sudoku is a logic-based combinatorial number-placement puzzle. This article discusses how to implement a Sudoku validator in JavaScript.</description>

</item>

<item>

<title>Markdown Cheatsheet</title>

<description>Markdown is the most popular markup language for writing documentation. Here is a cheatsheet with the most common syntax.</description>

</item>

<item>

<title>Vocal fails are better than silent fails</title>

<description>Learn why vocal errors are better than silent ones, how to handle them effectively, and improve debugging and collaboration in JavaScript.</description>

</item>

<item>

<title>Creating a Matrix data structure in JavaScript</title>

<description>After working with 2D arrays for a while, I decided to create a convenient wrapper for operations. Here's the gist of it.</description>

</item>

<item>

<title>ESLint & Prettier configuration</title>

<description>Instead of reconfiguring ESLint and Prettier every time, I use this configuration to get started quickly.</description>

</item>

<item>

<title>Creating tabbed content without JavaScript</title>

<description>Leverage modern HTML and CSS capabilities to create a tabbed content component without JavaScript.</description>

</item>

<item>

<title>Creating accordion-style content without JavaScript</title>

<description>Did you know you don't need JavaScript to create accordion-style content? Here's how to do it with the details element.</description>

</item>

<item>

<title>Are text-align and align-items the same when it comes to text alignment in CSS?</title>

<description>In the age of flexbox and grid, text alignment may seem simpler than ever, but there are a few things you should be aware of.</description>

</item>

<item>

<title>Using the inset CSS property</title>

<description>The inset shorthand property makes element positioning in CSS easier. Learn how to use it effectively in your projects.</description>

</item>

<item>

<title>Logical and physical CSS properties equivalents</title>

<description>New to CSS logical properties? This article provides a handy map of logical properties to their physical counterparts.</description>

</item>

<item>

<title>You Shouldn’t Always Modularize Your Code</title>

<description>Have you ever stopped to wonder if modularization is right for your use case? What if I told you it might not be?</description>

</item>

<item>

<title>JavaScript Operator Cheatsheet</title>

<description>Quick reference for JavaScript operators.</description>

</item>

<item>

<title>Progressive enhancement with Web Components</title>

<description>Dive into Web Components with me and learn how I used them to create modular interactive components to progressively enhance my website.</description>

</item>

<item>

<title>Implementing fuzzy matching in JavaScript</title>

<description>Having built a search engine with TF-IDF and inverted indexes, we will now implement fuzzy matching to make searching error-tolerant.</description>

</item>

<item>

<title>Formatting relative time in JavaScript</title>

<description>Did you know JavaScript has a built-in way to format relative time? It's called Intl.RelativeTimeFormat and it's awesome!</description>

</item>

<item>

<title>Detect the user's OS in the browser with JavaScript</title>

<description>Learn how to easily detect the user's operating system in the browser using JavaScript.</description>

</item>

<item>

<title>Implementing partial search matching in JavaScript</title>

<description>Building on top of the TF-IDF and inverted index implementation, we will implement partial search matching to make searching more robust.</description>

</item>

<item>

<title>Implementing search in JavaScript, using TF-IDF and an inverted index</title>

<description>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.</description>

</item>

<item>

<title>Implementing the Porter stemming algorithm in JavaScript</title>

<description>Learn how to implement the Porter stemming algorithm in JavaScript, a simple algorithm for stripping English words of common suffixes.</description>

</item>

<item>

<title>Implementing signals and reactivity with vanilla JavaScript</title>

<description>Let's demystify signals and reactivity, one of the most popular patterns in modern JavaScript, using event-driven programming!</description>

</item>

<item>

<title>Using Test-Driven Development to refactor a JavaScript project</title>

<description>In the last installment of the series, we'll refactor our codebase to reduce bundle size and complexity, while making it more maintainable.</description>

</item>

<item>

<title>Implementing a library for readable regular expressions in JavaScript</title>

<description>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.</description>

</item>

<item>

<title>Designing a user-centric API for a JavaScript library</title>

<description>Building atop the TDD foundation from last time, let's explore how to design a user-centric API for our JavaScript library.</description>

</item>

<item>

<title>Kickstart a JavaScript project with Test-Driven Development</title>

<description>I recently built a project using Test-Driven Development (TDD) and it was a great experience. Here's why I think you should try it, too.</description>

</item>

<item>

<title>What happens when you call every() on an empty JavaScript array?</title>

<description>A few days ago, I stumbled upon a perplexing piece of JavaScript behavior. Let's break it down.</description>

</item>

<item>

<title>Create a math expression parser in JavaScript</title>

<description>Building on top of everything we've tried in past articles, we'll use the Earley parsing algorithm to parse and evaluate math expressions.</description>

</item>

<item>

<title>Making a Brainfuck interpreter in JavaScript - Part 2</title>

<description>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.</description>

</item>

<item>

<title>Making a Brainfuck interpreter in JavaScript - Part 1</title>

<description>Continuing on the code interpretation path, I'm attempting to build a Brainfuck interpreter, using an AST to represent and execute the code.</description>

</item>

<item>

<title>Implementing a Smallfuck Interpreter in JavaScript</title>

<description>Yet another interpreter article, this time around we'll be building a full-fledged interpreter for the esolang Smallfuck.</description>

</item>

<item>

<title>Simple HTML tokenization & validation in JavaScript</title>

<description>Expanding upon previous articles on bracket matching and tokenization, it's time to try a basic HTML tokenization and validation algorithm.</description>

</item>

<item>

<title>Create a math expression tokenizer in JavaScript</title>

<description>Learn how to tokenize math expressions, using a simple JavaScript algorithm, forming the basis for more complex interpreters and compilers.</description>

</item>

<item>

<title>How can I parse Reverse Polish Notation in JavaScript?</title>

<description>Parsing Reverse Polish Notation, also known as postfix notation, is a simple algorithm that can be implemented in JavaScript using a stack.</description>

</item>

<item>

<title>How can I calculate the diff between two strings in JavaScript?</title>

<description>Delve deep into the Myers diff algorithm and learn how to calculate the difference between two strings in JavaScript, the way Git does.</description>

</item>

<item>

<title>Find matching bracket pairs in a string with JavaScript</title>

<description>A common problem when building parsers is finding matching bracket pairs in a string. Here's how you can solve it with JavaScript.</description>

</item>

<item>

<title>How can I find the longest common subsequence of two strings in JavaScript?</title>

<description>The longest common subsequence is the longest subsequence common to all given sequences and can be easily found using dynamic programming.</description>

</item>

<item>

<title>Formatting day and hour ranges with JavaScript</title>

<description>I recently came across a fairly interesting algorithmic problem when formatting day and hour ranges. Here's my take on the solution.</description>

</item>

<item>

<title>Modeling complex JavaScript object advanced relationships</title>

<description>In this installment of the ActiveRecord-like JavaScript implementation, we will revisit modeling relationships between objects.</description>

</item>

<item>

<title>Modeling complex JavaScript object autoloading and console</title>

<description>In this installment, we'll create a custom object inspect utility to help us debug our complex objects in the console.</description>

</item>

<item>

<title>Modeling complex JavaScript object field validation</title>

<description>Returning to the models and records part of the implementation, this time around we'll explore how to add constraints to individual fields.</description>

</item>

<item>

<title>Modeling complex JavaScript object factories</title>

<description>Expanding even further upon our ActiveRecord-inspired project, we'll figure out how to create factories that produce complex objects.</description>

</item>

<item>

<title>Modeling complex JavaScript object serialization</title>

<description>In the fourth part of the series, we will look at how to serialize complex JavaScript objects.</description>

</item>

<item>

<title>Modeling complex JavaScript object scopes</title>

<description>In the third installment of implementing an ActiveRecord-like pattern in JavaScript, we'll model and optimize object scoping.</description>

</item>

<item>

<title>Modeling complex JavaScript object attributes & relationships</title>

<description>Continuing on the journey to implement an ActiveRecord-like pattern in JavaScript with object attributes and relationships.</description>

</item>

<item>

<title>Modeling complex JavaScript object collections in memory</title>

<description>A deep dive into a fairly flexible implementation, inspired by Rails' ActiveRecord, for modeling JavaScript object collections in memory.</description>

</item>

<item>

<title>Display the right type of keyboard for form inputs</title>

<description>Keyboard input on mobile devices is hard to get right. Here's how to ensure the right keyboard is displayed for each input.</description>

</item>

<item>

<title>How can I calculate the distance between two coordinates using JavaScript?</title>

<description>Given two pairs of latitude and longitude coordinates, you can calculate the distance between them using the Haversine formula. Let's find out how.</description>

</item>

<item>

<title>Show menu on image hover</title>

<description>Display a menu overlay when the user hovers over an image.</description>

</item>

<item>

<title>Reveal additional content on hover</title>

<description>Learn how you can create a card that displays additional content on hover.</description>

</item>

<item>

<title>Scroll progress bar</title>

<description>Create a progress bar indicating the scroll percentage of the page, using CSS and JavaScript.</description>

</item>

<item>

<title>Image rotate on hover</title>

<description>Zoom in and rotate your images on hover and make them stand out.</description>

</item>

</channel>

</rss>