Editor's Pick
Announcing the MDN front-end developer curriculum
MDN has created a curriculum for aspiring front-end developers to build a rewarding and successful career. Take a look at the curriculum, who it's for, and the research it's based on.
CSS
HyperUI - Free Open Source Tailwind CSS Components
HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, eCommerce store and much more.
CSS Selectors: A Visual Guide & Reference
A visual guide detailing and visualizing the most popular CSS selectors.
Skeleton UI v2.0 Release Candidate
Today we're happy to introduce the new v2 release candidate of Skeleton! This represents a huge step forward for Skeleton, introducing a number of important updates, new features, and of course some necessary breaking changes. As part of today's update you'll find a new Skeleton plugin for Tailwind, new theme format and configuration options, a dynamic transitions system for components, and much more!
Skeleton is a UI toolkit for Svelte and Tailwind.
Four new CSS features for smooth entry and exit animations
Motion is a core part of any digital experience, guiding your user from one interaction to the next. But there are a few gaps in smooth animations on the web platform. These include the ability to to easily animate entry and exit animations, and smoothly animate to and from the top layer for dismissible elements such as dialogs and popovers.
To fill these gaps, Chrome 116 and 117 includes four new web platform features, which enable smooth animations and transitions for discrete properties.
HTML
Why Does Email Development Have to Suck?
First of all, if you're reading this because you unwillingly have to deal with email development, you have my deepest condolences for being one of the cursed souls condemned to suffer through this absurdity.
I regard email development as the filthiest job you can do with a laptop. Nothing makes sense and you have to repeatedly test everything like a lunatic, much like trying to scrub dried up shit off a bathroom wall.
Well, I hope the following will shine a light on this whole mess, give you useful advice, and relieve any potential suicidal thoughts you may be having.
JavaScript
Linkify - find links in plain-text and convert them to HTML <a> tags
Linkify is a JavaScript plugin. Use Linkify to find links in plain-text and convert them to HTML <a> tags. It automatically highlights URLs, #hashtags, @mentions and more.
Front-end frameworks popularity (React, Vue, Angular and Svelte)
Charts are from different sources and thus colors are inconsistent, please carefully read the chart's legends.
Procedural animation for controlling a (simulated) robot dog: first steps
My previous post was about implementing a simulator for a quadruped robot (in javascript). I got it to work, including inverse kinematics for controlling robot’s feet and torso poses. Next step is making the simulated model move and walk. How hard can it be?
ai-town: A deployable starter kit for building and customizing your own version of AI town
The primary goal of this project, beyond just being a lot of fun to work on, is to provide a platform with a strong foundation that is meant to be extended. The back-end engine natively supports shared global state, transactions, and a journal of all events so should be suitable for everything from a simple project to play around with to a scalable, multi-player game. A secondary goal is to make a JS/TS framework available as most simulators in this space (including the original paper above) are written in Python.
The map in the live demo never loaded for me, but I'm giving this a link regardless as it looks interesting
How we reduced the size of our JavaScript bundles by 33%
At Dropbox, over the past year, our web performance engineering team narrowed some of our performance problems down to an oft-overlooked culprit: the module bundler.
Discover three.js!
Discover three.js is a complete introduction to the web as a platform for 3D graphics using the three.js WebGL library, from one of the core three.js developers.
This book is a complete tutorial series designed to get you started on your journey of creating modern, professional-quality 3D web applications in the shortest time possible.
UX
Exit this page fast with the Design System’s new component
The GOV.UK Design System team have released Exit this page, a component which helps users quickly leave a page or site. It was originally suggested by Rob King at the Ministry of Justice (MoJ) following a collaboration between MoJ, the Department for Work and Pensions and the Scottish Government.
GDS's mission is to design and protect the user experience of government. This work supports that by helping vulnerable users.
Miscellaneous
MJML - The Responsive Email Framework
MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices.
Announcing the MDN front-end developer curriculum
MDN has created a curriculum for aspiring front-end developers to build a rewarding and successful career. Take a look at the curriculum, who it's for, and the research it's based on.
usps-zip-codes: JSON dataset of every USPS zip code from the USPS ZIP code API
Ever got tired of filling in the City and State fields every time a form asked for a ZIP code? Although the USPS readily provides data over an API, it's challenging to find a valid and comprehensive list of all USPS codes. This project aims to bridge that gap by providing an up-to-date and easily accessible JSON file containing all USPS ZIP codes and their associated City and State.