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.
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.
-
JavaScript · -
HTML · Display the right type of keyboard for form inputs
Keyboard input on mobile devices is hard to get right. Here's how to ensure the right keyboard is displayed for each input.
-
JavaScript · How can I calculate the distance between two coordinates using JavaScript?
Given two pairs of latitude and longitude coordinates, you can calculate the distance between them using the Haversine formula. Let's find out how.
-
CSS · Show menu on image hover
Display a menu overlay when the user hovers over an image.
-
CSS · Reveal additional content on hover
Learn how you can create a card that displays additional content on hover.
-
CSS · Scroll progress bar
Create a progress bar indicating the scroll percentage of the page, using CSS and JavaScript.
-
CSS · Image rotate on hover
Zoom in and rotate your images on hover and make them stand out.
-
CSS · Image overlay on hover
Learn how to display an image overlay effect on hover using CSS.
-
CSS · Navigation list item hover & focus effect
Create a custom hover and focus effect for navigation items, using CSS transformations.
-
CSS · Animate box shadow on hover
Create an animated shadow box around the text when it is hovered.
-
CSS · Create a custom scrollbar with CSS
Customize the scrollbar style for elements with scrollable overflow, using just CSS.
-
CSS · Engraved and embossed text
Make the text appear engraved or embossed into the background, using CSS.
-
CSS · Squiggle link hover effect
Create the most whimsical link hover effect with a squiggle animation.
-
CSS · Styling checkboxes and radio buttons
Learn how to create customized and animated checkboxes and radio buttons with CSS.
-
CSS · Card with image cutout
Cutout effects seem tricky to implement, but they really aren't. CSS has you covered!
-
CSS · Alternating text animations
Ever wondered how those alternating text animations work? Here's a simple way to create one using CSS and JavaScript.
-
CSS · Card hover effects
Create cards with hover effects, such as rotating, shifting and perspective transforms.
-
CSS · Isometric card
Learn how to create an isometric card using CSS.
-
CSS · Gradient text
Modern CSS can help you create gradient text with a few lines of code. Learn how today!
-
CSS · Display a fallback for images that fail to load
Having trouble loading an image? Display a fallback message instead!
-
CSS · Image with text overlay
Learn how to create an image with a text overlay using CSS.
-
CSS · Style elements when in fullscreen mode
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!
-
CSS · Hide scroll bars on an element
Learn how to hide scrollbars on an element, while still allowing it to be scrollable.
-
CSS · Typewriter effect
Create a typewriter effect animation with CSS variables and just a sprinkle of JavaScript.