Editor's Pick
Naming Tokens in Design Systems - Terms, Types, and Taxonomy to Describe Visual Style
Effective token names improve and sustain a team’s shared understanding of visual style through design, code, and other interdisciplinary handoffs. Terms matter. As we make things, we must be able to browse and search tools to quickly recognize and recall the purposeful decisions we’ve made.
CSS
CSS Shape: Wiggly Box
A CSS-only Wiggly Box Shape made with a single-element and modern CSS. Edit the code to control the shape then copy it.
Single HTML Element Star Rating Component
Learn how to create a customizable star-rating component using just HTML and CSS, with a minimal amount of inline JavaScript. This article covers practical tips, code examples, and trade-offs for building flexible, visually appealing rating systems.
HTML
Learning HTML is the best investment I ever did
One of the running jokes and/or discussion I am sick and tired of is people belittling HTML. Yes, HTML is not a programming language. No, HTML should not just be a compilation target. Learning HTML is a solid investment and not hard to do.
HTML structures our content, makes it easier to index and gives us tons of accessible and easy to use interface elements. And it is straight forward to learn. The syntax is clear and the rules are only a few. And yet, nobody seems to even bother to look those up.
JavaScript
A checklist for your tsconfig.json
In order to feel more confident about my tsconfig.json, I decided to go through the tsconfig.json documentation, collect all commonly used options and describe them below:
- You can come along for the whole ride and go through the options with me. Afterward, you should be able to understand all of your tsconfig.
- Or you can skip ahead to the summary at the end.
- I also list recommendations for tsconfig.json by several other people.
Vanta.js - Animated 3D Backgrounds For Your Website
Gallery of customizable plug & play animated backgrounds using three.js.
Pharaoh's Tomb HD
Follow the adventure of archaeologist Nevada Smith in a reimagined classic video game from 1990.
This was made with the JavaScript Library Kaplay.
Svelte Standalone - Integrate Svelte Anywhere
Svelte Standalone is a CLI tool that simplifies bundling Svelte components into standalone JavaScript files. It has opt-in support for Tailwind, TypeScript, and Storybook, making it simple to integrate to your workflow.
Next Icons ~ Icon library for React and Next.js
Lightweight icon component library for React and Next.js, designed for simplicity and seamless integration.
TypeScript enums: use cases and alternatives
In this blog post, we take a closer look at TypeScript enums:
- How do they work?
- What are their use cases?
- What are the alternatives if we don’t want to use them?
The blog post concludes with recommendations for what to use when.
Building Advanced React Forms Using React Hook Form, Zod and Shadcn
If you're working on a simple contact form (e.g., email, subject, message), check out part one. It covers the basics of React forms using React Hook Form, Shadcn UI, and Zod.
But what if your forms need advanced behaviors and validations? That's where this guide comes in. Whether you need conditional fields, custom validation logic, or dynamic form generation, this article will help you take your React forms to the next level.
JavaScript Object Creation Guide
Learn multiple ways to create objects in JavaScript: from literals to ES6 classes, and explore prototypes for efficient object-oriented programming.
UX
Data Viz Project | Collection of data visualizations to get inspired and find the right type
Data Viz Project is the world’s biggest library of data visualizations. With more than 160 (still counting) different types of data visualizations presented, each with definitions, taxonomies, and examples, it’s the most comprehensive collection, where you can find the right one and get inspired.
Miscellaneous
Dear Software Engineer: It's Time to Reclaim Your Role
What’s happening now with AI, however, feels far more like a tectonic shift than just another iteration of the same old cycle - and my Master’s research is confirming this. The data clearly shows that AI is already having a significant impact on how software engineers work. Not everyone sees it. Not everyone wants to see it. But it’s happening.
Learn to Use GitHub Actions: a Step-by-Step Guide
GitHub Actions are one of the most helpful features of GitHub. Actions help you automate, build, test, and deploy your app from your GitHub. They also help you perform code reviews and tests, manage branches, triage issues, and more.
Naming Tokens in Design Systems - Terms, Types, and Taxonomy to Describe Visual Style
Effective token names improve and sustain a team’s shared understanding of visual style through design, code, and other interdisciplinary handoffs. Terms matter. As we make things, we must be able to browse and search tools to quickly recognize and recall the purposeful decisions we’ve made.
10 Backend Terms Every Frontend Developer Should Know
When a backend dev gives their update in the daily standup meeting, most frontend devs are clueless about the work they're doing. They use a lot of jargons that sound gibberish to us frontend devs. But not anymore.
Frontend Case Studies - a curated list of talks and articles about real world frontend development
Articles like “Building a simple todo list with [framework or technology name]” won’t teach you how that framework or technology solves real-world problems and works at a large scale. This website is a curated list of technical talks and articles about real-world enterprise frontend development.