Photo by Louis Reed on Unsplash

Test-driven development (TDD) is a process where you write tests before you write the associated code. You first write a test that describes an expected behavior, and you run it, ensuring it fails. Then, you write the dumbest, most straightforward code you can to make the test pass. Finally, you refactor the code to make it right. And you repeat all the steps for each test until you’re done.

This approach has many advantages. First, it forces you to think before you code. It’s commonplace to rush into writing code before establishing what it should do. This practice leads to…

Photo by Jefferson Santos on Unsplash.

In Build Your First Vue.js Component we made a star rating component. We’ve covered many fundamental concepts to help you create more complex Vue.js components.

Yet, there’s one crucial point you need to build bulletproof components you can use in production: unit testing.

Why unit test a component?

Unit tests are a crucial part of continuous integration. They make your code a lot more reliable by focusing on small, isolated entities and making sure these always behave as expected. You can confidently iterate on your project without fear of breaking things.

Unit tests aren’t limited to scripts. Anything we can test in isolation is unit…

Photo by Lena L on Unsplash

I’m a big advocate for utility-first CSS. After trying several methods over the years, it’s what I’ve found to be the best, most maintainable and scalable way of writing CSS to this day.

When my coworker Clément Denoix and I built, I decided to use Tailwind CSS to style it. Tailwind CSS is a theme-agnostic, fully customizable, utility-first library.

Photo by Alexandru Tugui on Unsplash

If you’re building an app or a website that changes often, modular CSS methods solve many issues. Instead of copying your HTML structure in CSS and decorating it, you create consumable libraries of components. This makes projects more scalable and keeps the CSS codebase under control.

CSS modularity relies on composition, which inevitably fattens the HTML. This collateral effect can be a significant deterrent for many people because of the “bloat” it creates.

In this article, we’ll compare two techniques: chaining and extending. …

Photo by Allef Vinicius on Unsplash

My friend Cory and I chat almost every day, so you can bet he knows about everything going on in my life. But as we were talking the other day, I realized he had no idea how Dinero.js, my latest project, actually works. Like, what you can do with it.

I paused and realized it may actually not be that obvious. It’s easier, whatever your skill level is, to understand what a smooth scrolling plugin does than what a money library has to offer.

“Do you see in JavaScript how you can use a Date constructor to store a date…

Photo by Thought Catalog on Unsplash

Money is everywhere.

Banking apps, e-commerce websites, stock exchange platforms — we interact with money daily. We also increasingly rely on technology to handle ours.

Yet, there’s no consensus around how to programmatically handle monetary values. It’s a prevalent concept in modern societies, yet it’s not a first-class data type in any mainstream language, while things like date and time are. As a result, every piece of software comes up with its own way of handling money, with all the pitfalls that come with it.

Pitfall #1: Money as a Number

Your first instinct when you need to represent money might be to use a Number.

Photo by Chad Kirchoff on Unsplash

When I started my career, my mentor told me:

“A good developer is a lazy developer. Don’t waste time on repetitive tasks, instead spend it on building automated processes. The computer works for you, and it will always be faster than you.”

This was back in 2010, and the toolset we had at our disposal was more scarce than it is today. Yet, this piece of advice has stuck with me ever since.

From executable scripts to Yeoman configs, IFTTT setups and Automator workflows, not to mention the slew of apps I use to assist my every move on the…

Photo by Vic on Flickr

One of the powers of utility classes lies in giving you access to every small concept of your design system in a slew of contexts. If your main color is royal blue, you can apply it as a text color on anything with a .text-royal-blue class, as a background color with a .bg-royal-blue class, and so on.

But how do you write them in an effective, consistent, and scalable way?

TL;DR: this post goes in-depth in the how-to stuff. If you want to understand the whole thought process, read on. …

Creative Things by Kyle Adams

Long gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become the number one solution for displaying icons in your web projects.

Fonts are vectors, so you don’t have to worry about resolution. They benefit from the same CSS properties as text. As a result, you have full control over size, color, and style. You can add transforms, effects, and decorations such as rotations, underlines, or shadows.

Photo by Iker Urteaga on Unsplash

“Favor composition over inheritance”.

This piece of wisdom from Design Patterns, one of the most influential software engineering books, is the foundation of utility-first CSS. It also shares many principles with functional programming: immutability, composability, predictability, and avoidance of side-effects. The goal behind all those fancy terms is to write code that’s easier to maintain and to scale.

Despite its growing popularity, utility-first CSS still hasn’t convinced everyone. While some praise it, others have been vividly critical about such a practice. I used to be in the latter group. I was a BEM fan, sold to an approach I adopted…

Sarah Dayan

Front-end developer with a taste for design and typography. I like to share what I know on HTML, CSS and JavaScript, UI/UX and other front stuff.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store