CINXE.COM
30 seconds of code
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" version="2.0" > <channel> <title>30 seconds of code</title> <description>Coding articles to level up your development skills</description> <link>https://www.30secondsofcode.org</link> <language>en-us</language> <image> <url>https://www.30secondsofcode.org/assets/logo.png</url> <title>30 seconds of code</title> <link>https://www.30secondsofcode.org</link> </image> <ttl>1440</ttl> <atom:link href="https://www.30secondsofcode.org/feed.xml" rel="self" type="application/rss+xml" /> <item> <title>Implementing signals and reactivity with vanilla JavaScript</title> <link>https://www.30secondsofcode.org/js/s/event-driven-vanilla-js-signals</link> <description>Let's demystify signals and reactivity, one of the most popular patterns in modern JavaScript, using event-driven programming!</description> <pubDate>Wed, 02 Apr 2025 00:00:00 GMT</pubDate> <item> <item> <title>Using Test-Driven Development to refactor a JavaScript project</title> <link>https://www.30secondsofcode.org/js/s/tdd-codebase-refactoring</link> <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> <pubDate>Fri, 28 Mar 2025 00:00:00 GMT</pubDate> <item> <item> <title>Implementing a library for readable regular expressions in JavaScript</title> <link>https://www.30secondsofcode.org/js/s/tdd-library-implementation-with-vite-vitest</link> <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> <pubDate>Mon, 24 Mar 2025 00:00:00 GMT</pubDate> <item> <item> <title>Designing a user-centric API for a JavaScript library</title> <link>https://www.30secondsofcode.org/js/s/user-centric-api-design</link> <description>Building atop the TDD foundation from last time, let's explore how to design a user-centric API for our JavaScript library.</description> <pubDate>Thu, 20 Mar 2025 00:00:00 GMT</pubDate> <item> <item> <title>Kickstart a JavaScript project with Test-Driven Development</title> <link>https://www.30secondsofcode.org/js/s/test-driven-development-intro</link> <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> <pubDate>Mon, 17 Mar 2025 00:00:00 GMT</pubDate> <item> <item> <title>What happens when you call every() on an empty JavaScript array?</title> <link>https://www.30secondsofcode.org/js/s/empty-array-every-some</link> <description>A few days ago, I stumbled upon a perplexing piece of JavaScript behavior. Let's break it down.</description> <pubDate>Fri, 14 Mar 2025 00:00:00 GMT</pubDate> <item> <item> <title>Create a math expression parser in JavaScript</title> <link>https://www.30secondsofcode.org/js/s/math-expression-parser</link> <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> <pubDate>Wed, 12 Mar 2025 00:00:00 GMT</pubDate> <item> <item> <title>Making a Brainfuck interpreter in JavaScript - Part 2</title> <link>https://www.30secondsofcode.org/js/s/brainfuck-interpreter-part-2</link> <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> <pubDate>Sat, 08 Mar 2025 00:00:00 GMT</pubDate> <item> <item> <title>Making a Brainfuck interpreter in JavaScript - Part 1</title> <link>https://www.30secondsofcode.org/js/s/brainfuck-interpreter-part-1</link> <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> <pubDate>Sat, 01 Mar 2025 00:00:00 GMT</pubDate> <item> <item> <title>Implementing a Smallfuck Interpreter in JavaScript</title> <link>https://www.30secondsofcode.org/js/s/smallfuck-interpreter</link> <description>Yet another interpreter article, this time around we'll be building a full-fledged interpreter for the esolang Smallfuck.</description> <pubDate>Mon, 24 Feb 2025 00:00:00 GMT</pubDate> <item> <item> <title>Simple HTML tokenization & validation in JavaScript</title> <link>https://www.30secondsofcode.org/js/s/simple-html-tokenization-validation</link> <description>Expanding upon previous articles on bracket matching and tokenization, it's time to try a basic HTML tokenization and validation algorithm.</description> <pubDate>Fri, 21 Feb 2025 00:00:00 GMT</pubDate> <item> <item> <title>Create a math expression tokenizer in JavaScript</title> <link>https://www.30secondsofcode.org/js/s/math-expression-tokenizer</link> <description>Learn how to tokenize math expressions, using a simple JavaScript algorithm, forming the basis for more complex interpreters and compilers.</description> <pubDate>Tue, 18 Feb 2025 00:00:00 GMT</pubDate> <item> <item> <title>How can I parse Reverse Polish Notation in JavaScript?</title> <link>https://www.30secondsofcode.org/js/s/parse-reverse-polish-notation</link> <description>Parsing Reverse Polish Notation, also known as postfix notation, is a simple algorithm that can be implemented in JavaScript using a stack.</description> <pubDate>Sat, 15 Feb 2025 00:00:00 GMT</pubDate> <item> <item> <title>How can I calculate the diff between two strings in JavaScript?</title> <link>https://www.30secondsofcode.org/js/s/myers-diff-algorithm</link> <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> <pubDate>Wed, 12 Feb 2025 00:00:00 GMT</pubDate> <item> <item> <title>Find matching bracket pairs in a string with JavaScript</title> <link>https://www.30secondsofcode.org/js/s/find-matching-bracket-pairs</link> <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> <pubDate>Fri, 07 Feb 2025 00:00:00 GMT</pubDate> <item> <item> <title>How can I find the longest common subsequence of two strings in JavaScript?</title> <link>https://www.30secondsofcode.org/js/s/longest-common-subsequence</link> <description>The longest common subsequence is the longest subsequence common to all given sequences and can be easily found using dynamic programming.</description> <pubDate>Mon, 03 Feb 2025 00:00:00 GMT</pubDate> <item> <item> <title>Formatting day and hour ranges with JavaScript</title> <link>https://www.30secondsofcode.org/js/s/formatting-day-hour-ranges</link> <description>I recently came across a fairly interesting algorithmic problem when formatting day and hour ranges. Here's my take on the solution.</description> <pubDate>Wed, 29 Jan 2025 00:00:00 GMT</pubDate> <item> <item> <title>Modeling complex JavaScript object advanced relationships</title> <link>https://www.30secondsofcode.org/js/s/complex-object-advanced-relationships</link> <description>In this installment of the ActiveRecord-like JavaScript implementation, we will revisit modeling relationships between objects.</description> <pubDate>Thu, 23 Jan 2025 00:00:00 GMT</pubDate> <item> <item> <title>Modeling complex JavaScript object autoloading and console</title> <link>https://www.30secondsofcode.org/js/s/complex-object-autoloading-console</link> <description>In this installment, we'll create a custom object inspect utility to help us debug our complex objects in the console.</description> <pubDate>Thu, 16 Jan 2025 00:00:00 GMT</pubDate> <item> <item> <title>Modeling complex JavaScript object field validation</title> <link>https://www.30secondsofcode.org/js/s/complex-object-field-validation</link> <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> <pubDate>Thu, 09 Jan 2025 00:00:00 GMT</pubDate> <item> <item> <title>Modeling complex JavaScript object factories</title> <link>https://www.30secondsofcode.org/js/s/complex-object-factories</link> <description>Expanding even further upon our ActiveRecord-inspired project, we'll figure out how to create factories that produce complex objects.</description> <pubDate>Thu, 02 Jan 2025 00:00:00 GMT</pubDate> <item> <item> <title>Modeling complex JavaScript object serialization</title> <link>https://www.30secondsofcode.org/js/s/complex-object-serialization</link> <description>In the fourth part of the series, we will look at how to serialize complex JavaScript objects.</description> <pubDate>Thu, 26 Dec 2024 00:00:00 GMT</pubDate> <item> <item> <title>Modeling complex JavaScript object scopes</title> <link>https://www.30secondsofcode.org/js/s/complex-object-scopes</link> <description>In the third installment of implementing an ActiveRecord-like pattern in JavaScript, we'll model and optimize object scoping.</description> <pubDate>Thu, 19 Dec 2024 00:00:00 GMT</pubDate> <item> <item> <title>Modeling complex JavaScript object attributes & relationships</title> <link>https://www.30secondsofcode.org/js/s/complex-object-attributes-relationships</link> <description>Continuing on the journey to implement an ActiveRecord-like pattern in JavaScript with object attributes and relationships.</description> <pubDate>Thu, 12 Dec 2024 00:00:00 GMT</pubDate> <item> <item> <title>Modeling complex JavaScript object collections in memory</title> <link>https://www.30secondsofcode.org/js/s/complex-object-collections-in-memory</link> <description>A deep dive into a fairly flexible implementation, inspired by Rails' ActiveRecord, for modeling JavaScript object collections in memory.</description> <pubDate>Thu, 05 Dec 2024 00:00:00 GMT</pubDate> <item> <item> <title>Display the right type of keyboard for form inputs</title> <link>https://www.30secondsofcode.org/html/s/keyboard-type-using-inputmode</link> <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> <pubDate>Tue, 03 Dec 2024 00:00:00 GMT</pubDate> <item> <item> <title>How can I calculate the distance between two coordinates using JavaScript?</title> <link>https://www.30secondsofcode.org/js/s/distance-of-two-lat-lng-coordinates</link> <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> <pubDate>Mon, 02 Dec 2024 00:00:00 GMT</pubDate> <item> <item> <title>Show menu on image hover</title> <link>https://www.30secondsofcode.org/css/s/image-hover-menu</link> <description>Display a menu overlay when the user hovers over an image.</description> <pubDate>Tue, 24 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Reveal additional content on hover</title> <link>https://www.30secondsofcode.org/css/s/hover-additional-content</link> <description>Learn how you can create a card that displays additional content on hover.</description> <pubDate>Mon, 23 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Scroll progress bar</title> <link>https://www.30secondsofcode.org/css/s/scroll-progress-bar</link> <description>Create a progress bar indicating the scroll percentage of the page, using CSS and JavaScript.</description> <pubDate>Sun, 22 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Image rotate on hover</title> <link>https://www.30secondsofcode.org/css/s/image-hover-rotate</link> <description>Zoom in and rotate your images on hover and make them stand out.</description> <pubDate>Sat, 21 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Image overlay on hover</title> <link>https://www.30secondsofcode.org/css/s/image-overlay-hover</link> <description>Learn how to display an image overlay effect on hover using CSS.</description> <pubDate>Fri, 20 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Navigation list item hover & focus effect</title> <link>https://www.30secondsofcode.org/css/s/navigation-list-item-hover-and-focus-effect</link> <description>Create a custom hover and focus effect for navigation items, using CSS transformations.</description> <pubDate>Thu, 19 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Animate box shadow on hover</title> <link>https://www.30secondsofcode.org/css/s/hover-shadow-box-animation</link> <description>Create an animated shadow box around the text when it is hovered.</description> <pubDate>Wed, 18 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Create a custom scrollbar with CSS</title> <link>https://www.30secondsofcode.org/css/s/custom-scrollbar</link> <description>Customize the scrollbar style for elements with scrollable overflow, using just CSS.</description> <pubDate>Tue, 17 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Engraved and embossed text</title> <link>https://www.30secondsofcode.org/css/s/engraved-embossed-text</link> <description>Make the text appear engraved or embossed into the background, using CSS.</description> <pubDate>Mon, 16 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Squiggle link hover effect</title> <link>https://www.30secondsofcode.org/css/s/squiggle-link-hover-effect</link> <description>Create the most whimsical link hover effect with a squiggle animation.</description> <pubDate>Sun, 15 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Styling checkboxes and radio buttons</title> <link>https://www.30secondsofcode.org/css/s/custom-checkbox-radio</link> <description>Learn how to create customized and animated checkboxes and radio buttons with CSS.</description> <pubDate>Sat, 14 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Card with image cutout</title> <link>https://www.30secondsofcode.org/css/s/card-image-cutout</link> <description>Cutout effects seem tricky to implement, but they really aren't. CSS has you covered!</description> <pubDate>Fri, 13 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Alternating text animations</title> <link>https://www.30secondsofcode.org/css/s/alternating-text</link> <description>Ever wondered how those alternating text animations work? Here's a simple way to create one using CSS and JavaScript.</description> <pubDate>Thu, 12 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Card hover effects</title> <link>https://www.30secondsofcode.org/css/s/card-hover-effects</link> <description>Create cards with hover effects, such as rotating, shifting and perspective transforms.</description> <pubDate>Wed, 11 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Isometric card</title> <link>https://www.30secondsofcode.org/css/s/isometric-card</link> <description>Learn how to create an isometric card using CSS.</description> <pubDate>Tue, 10 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Gradient text</title> <link>https://www.30secondsofcode.org/css/s/gradient-text</link> <description>Modern CSS can help you create gradient text with a few lines of code. Learn how today!</description> <pubDate>Tue, 10 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Display a fallback for images that fail to load</title> <link>https://www.30secondsofcode.org/css/s/broken-image-fallback</link> <description>Having trouble loading an image? Display a fallback message instead!</description> <pubDate>Mon, 09 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Image with text overlay</title> <link>https://www.30secondsofcode.org/css/s/image-text-overlay</link> <description>Learn how to create an image with a text overlay using CSS.</description> <pubDate>Sun, 08 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Style elements when in fullscreen mode</title> <link>https://www.30secondsofcode.org/css/s/fullscreen</link> <description>Did you know you can differentiate an element's styles when it's in fullscreen mode? Learn how to do it with this code snippet!</description> <pubDate>Sun, 08 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Hide scroll bars on an element</title> <link>https://www.30secondsofcode.org/css/s/hide-scrollbars</link> <description>Learn how to hide scrollbars on an element, while still allowing it to be scrollable.</description> <pubDate>Sat, 07 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Typewriter effect</title> <link>https://www.30secondsofcode.org/css/s/typewriter-effect</link> <description>Create a typewriter effect animation with CSS variables and just a sprinkle of JavaScript.</description> <pubDate>Fri, 06 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Evenly distributed children</title> <link>https://www.30secondsofcode.org/css/s/evenly-distributed-children</link> <description>Evenly distribute child elements within a parent element, using Flexbox.</description> <pubDate>Fri, 06 Sep 2024 00:00:00 GMT</pubDate> <item> <item> <title>Speech bubbles with CSS</title> <link>https://www.30secondsofcode.org/css/s/speech-bubble</link> <description>Create a content container with a triangle at the top, much like a speech bubble.</description> <pubDate>Thu, 05 Sep 2024 00:00:00 GMT</pubDate> <item> </channel> </rss>