Category: components

Prototyping in the Browser

Prototyping animations and interactions is vital for a number of reasons: they can make your interface feel deceptively fast, they can help focus the user on a specific task, and they can provide a better sense of the current state of your application. Is data being loaded? Is something now unclickable? How long do the...

One-Offs

There is this sentiment that you don’t design the homepage of a site first. For most sites, it’s an anomaly. It’s unlike any other page and not something to base the patterns you use for the rest of the site or help inform other pages. You might call it a one-off.1 One-offs are OK! A world without on...

5 React Architecture Best Practices

There can be no doubt that React has revolutionized the way we build user interfaces. It’s easy to learn and greatly facilitates creating reusable components that offer your site a consistent look and feel. However, as React only takes care of the view layer of an application, it doesn’t enforce any specific archit...

How to Create a Component Library From SVG Illustrations

I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components. Here’s a GIF that shows what I mean: What’s unDraw? While unDraw is still fairly new, its open source nature means that it’s being used by a range of products already. Her...

A Practical Guide to Angular Directives

This article focuses on Angular directives — what are they, how to use them, and to build our own. Directives are perhaps the most important bit of an Angular application, and if we think about it, the most-used Angular unit, the component, is actually a directive. An Angular component isn’t more than a directi...

Understanding Component Architecture: Refactoring an Angular App

In part one or this series, we learned how to get our Todo application up and running and deploy it to GitHub pages. This worked just fine, but unfortunately the whole app was crammed into a single component. In this article, we’ll examine a more modular component architecture. We’ll look at how to break this singl...

Managing Code Components with Bit

As the world moves to software architecture based on microservices and multiple repositories, the ecosystem struggles to keep code bases maintainable. From monoliths to publishing hundreds of micro-packages, solutions try to battle growing code duplications across repositories. Bit is a new OSS distributed code compon...

Intro to Vue.js: Components, Props, and Slots

This is the second part in a five-part series about the JavaScript framework, Vue.js. In this part, we’ll go over Components, Props, and Slots. This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Vue.js and understand what the framewor...

Redux without React — State Management in Vanilla JavaScript

I am one of those developers who likes to do things from scratch and get to know how everything works. Although I am aware of the (unnecessary) work I get myself into, it definitely helps me appreciate and understand what lies behind a specific framework, library, or module. Recently, I had one of those moments again a...

Building Resizeable Components with Relative CSS Units

The following is a guest post by Ahmad Shadeed. Ahmad has put together a ton of examples to show off how using relative units can benefit us. I think a lot of us think of units like em as being for font-size, which it is, but can also be for lots of other things, tying together typographic sizing and other visual eleme...