error on line 321 at column 13: Opening and ending tag mismatch: item line 320 and channel
Below is a rendering of the page up to the first error.
30 seconds of codeCoding articles to level up your development skills
https://www.30secondsofcode.org
en-ushttps://www.30secondsofcode.org/assets/logo.png30 seconds of code
https://www.30secondsofcode.org
1440Designing 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 GMTKickstart 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 GMTWhat 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 GMTCreate 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 GMTMaking 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 GMTMaking 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 GMTImplementing 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 GMTSimple 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 GMTCreate 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 GMTHow 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 GMTHow 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 GMTFind 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 GMTHow 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 GMTFormatting 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 GMTModeling 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 GMTModeling 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 GMTModeling 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 GMTModeling 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 GMTModeling 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 GMTModeling 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 GMTModeling 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 GMTModeling 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 GMTDisplay 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 GMTHow 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 GMTShow 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 GMTReveal 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 GMTScroll 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 GMTImage 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 GMTImage overlay on hover
https://www.30secondsofcode.org/css/s/image-overlay-hover
Learn how to display an image overlay effect on hover using CSS.Fri, 20 Sep 2024 00:00:00 GMTNavigation list item hover & focus effect
https://www.30secondsofcode.org/css/s/navigation-list-item-hover-and-focus-effect
Create a custom hover and focus effect for navigation items, using CSS transformations.Thu, 19 Sep 2024 00:00:00 GMTAnimate box shadow on hover
https://www.30secondsofcode.org/css/s/hover-shadow-box-animation
Create an animated shadow box around the text when it is hovered.Wed, 18 Sep 2024 00:00:00 GMTCreate a custom scrollbar with CSS
https://www.30secondsofcode.org/css/s/custom-scrollbar
Customize the scrollbar style for elements with scrollable overflow, using just CSS.Tue, 17 Sep 2024 00:00:00 GMTEngraved and embossed text
https://www.30secondsofcode.org/css/s/engraved-embossed-text
Make the text appear engraved or embossed into the background, using CSS.Mon, 16 Sep 2024 00:00:00 GMTSquiggle link hover effect
https://www.30secondsofcode.org/css/s/squiggle-link-hover-effect
Create the most whimsical link hover effect with a squiggle animation.Sun, 15 Sep 2024 00:00:00 GMTStyling checkboxes and radio buttons
https://www.30secondsofcode.org/css/s/custom-checkbox-radio
Learn how to create customized and animated checkboxes and radio buttons with CSS.Sat, 14 Sep 2024 00:00:00 GMTCard with image cutout
https://www.30secondsofcode.org/css/s/card-image-cutout
Cutout effects seem tricky to implement, but they really aren't. CSS has you covered!Fri, 13 Sep 2024 00:00:00 GMTAlternating text animations
https://www.30secondsofcode.org/css/s/alternating-text
Ever wondered how those alternating text animations work? Here's a simple way to create one using CSS and JavaScript.Thu, 12 Sep 2024 00:00:00 GMTCard hover effects
https://www.30secondsofcode.org/css/s/card-hover-effects
Create cards with hover effects, such as rotating, shifting and perspective transforms.Wed, 11 Sep 2024 00:00:00 GMTIsometric card
https://www.30secondsofcode.org/css/s/isometric-card
Learn how to create an isometric card using CSS.Tue, 10 Sep 2024 00:00:00 GMTGradient text
https://www.30secondsofcode.org/css/s/gradient-text
Modern CSS can help you create gradient text with a few lines of code. Learn how today!Tue, 10 Sep 2024 00:00:00 GMTDisplay a fallback for images that fail to load
https://www.30secondsofcode.org/css/s/broken-image-fallback
Having trouble loading an image? Display a fallback message instead!Mon, 09 Sep 2024 00:00:00 GMTImage with text overlay
https://www.30secondsofcode.org/css/s/image-text-overlay
Learn how to create an image with a text overlay using CSS.Sun, 08 Sep 2024 00:00:00 GMTStyle elements when in fullscreen mode
https://www.30secondsofcode.org/css/s/fullscreen
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!Sun, 08 Sep 2024 00:00:00 GMTHide scroll bars on an element
https://www.30secondsofcode.org/css/s/hide-scrollbars
Learn how to hide scrollbars on an element, while still allowing it to be scrollable.Sat, 07 Sep 2024 00:00:00 GMTTypewriter effect
https://www.30secondsofcode.org/css/s/typewriter-effect
Create a typewriter effect animation with CSS variables and just a sprinkle of JavaScript.Fri, 06 Sep 2024 00:00:00 GMTEvenly distributed children
https://www.30secondsofcode.org/css/s/evenly-distributed-children
Evenly distribute child elements within a parent element, using Flexbox.Fri, 06 Sep 2024 00:00:00 GMTSpeech bubbles with CSS
https://www.30secondsofcode.org/css/s/speech-bubble
Create a content container with a triangle at the top, much like a speech bubble.Thu, 05 Sep 2024 00:00:00 GMTImage gallery with horizontal or vertical scroll
https://www.30secondsofcode.org/css/s/horizontal-vertical-gallery
Create a horizontally or vertically scrollable image gallery.Thu, 05 Sep 2024 00:00:00 GMTCreate a toggle switch using HTML & CSS
https://www.30secondsofcode.org/css/s/toggle-switch
A toggle switch is little more than a checkbox with a custom appearance. This article shows you how to create one without using JavaScript.Wed, 04 Sep 2024 00:00:00 GMTDynamic shadow
https://www.30secondsofcode.org/css/s/dynamic-shadow
Learn how to create a shadow similar to box-shadow, but based on the colors of the element itself.Wed, 04 Sep 2024 00:00:00 GMT