Archive • Frontend Sketches • Buttondown

Issue 7: Design Systems

Design System Process

Welcome friends 👋

This month's newsletter will be about Design Systems. The first time I heard about Design Systems, was when reading Brad Frosts Atomic Design book in 2016. Of course, modular design existed way before that, for example in graphic design with the iconic brand guidelines of the 60s, that described, what colors, fonts and sizes to use. However, Frost's book was one of the first foundational books for creating modular pattern libraries for the web.

From 2016 onwards there was a big hype around design systems and most major companies like Apple and Google adapted them. You can find a great collection of amazing design systems on designsystemsrepo.com.

#7

September 3, 2021

Issue 6: Web Animation

Web animation effects on the user

Welcome friends 👋

Web Animation has always been one of the most exciting topics in web development for me. I even wrote a master thesis about it to learn more about the scientific aspects of animation.

The interesting part about animating on the web is that there are so many different ways of creating animations. You can start with simple CSS interactions, which are great for the user experience. Check out Val Head's Designing Interface Animation for learning more about the combination of animation and interfaces. Then we have more elaborate SVG animations, which are great for creating complex animations, that explain you something. Read Sarah Drasner's SVG Animations book to learn all about it.

#6

July 26, 2021

Issue 5: The Head

Web Crawlers unhappy about missing head

Welcome friends 👋

The first half of the year went by so quickly! This month I want to talk about the <head> element. It's such an invisible part of a website, yet it's quite important and powerful.

If we use the most minimal tags, we need to define our charset, viewport and title within the <head>. But there are so many things you can set in the head, that will influence your SEO and performance. There are actually 8 elements that are valid in the head: meta, link, title, style, script, noscript, and base.

#5

June 7, 2021

Issue 4: Web Typography

Web Typography

Welcome friends 👋

This month's issue is about web fonts and typography. A few years ago I found this infographic on choosing typefaces inside the excellent information graphics book. Choosing the right font is a really hard decision, that highly influences how a website, app or, print product looks in the end. The infographic tries to solve this hard choice by starting with the kind of project you're working on. It also shows how complex choosing the right font can be.

My sketch shows some of the considerations that are important on the web. One of the main aspects of web typography is readability. Since the web is a medium that is consumed by many different people in many different contexts, the text should be very readable and accessible. This means enough contrast, a large enough font size as well as a readable font family. But of course, that shouldn't be the only aspect.

#4

May 3, 2021

Issue 3: Frontend Testing

Welcome friends 👋

This month I wrote quite a few unit tests in Vue, so this issue will take a look a the seven pillars of frontend testing. When I was working at the university, all our student projects had to go at least through some user testing to evaluate and improve their projects. I think it is probably the first kind of testing every developer has to go through and a testing method that provides immense value but is often overlooked.

For user testing, there are many tools and great guides on how to conduct different user testing methods. The usability and UX area is very close to frontend development and there are a lot of basics usability concepts to keep in mind while developing applications. As a frontend developer, I invested some time in reading usability blogs like the Niels Norman Group or usabilitygeek to understand some of the important usability basics.

#3

April 6, 2021

Issue 2: CSS Features

Welcome friends 👋

This month, we'll take a look at CSS Features. Every year you'll find articles like Future of CSS Features in 2021 or 5 new CSS features you can test right now. Over the years CSS has become really powerful, supporting responsiveness on many devices and different use cases like right to left direction, prefers-reduced-motion or prefers-color-scheme. For me that makes a lot of sense because CSS has been around for more than 25 years, since 1994 and the world has changed a lot since then. If you want to learn a little bit more about the history of CSS, I can recommend reading this article by the W3C.

But how are CSS features actually made? The main discussion around what features will be implemented in browsers will be made in the W3C in the CSS Working Group with its 142 members. A lot of the members are made up of representatives from big companies that are involved in maintaining browsers like Adobe, Apple, Google, HP, Microsoft, Mozilla and, Opera. Another part of the working group are invited experts like Rachel Andrews or Lea Verou. You can see the full list of members here and you can check the updates on anything that is being discussed on the CSS Working Group site.

#2

March 1, 2021

Issue 1: Frontend Frameworks

Welcome friends 👋

This first issue is about picking frontend frameworks. In the last few years I've worked with many different frameworks. Some I loved, some felt confusing, others took quite some time to learn. With every framework I learned, I got a step closer to understanding that the right question to ask is not What is the best framework? but rather What is the framework for?.

React certainly is a good choice for single-page applications and cross-platform apps, but you don't need it for every little use case. Angular is not as popular as it used to be, still it's a great choice for large-scale applications and a solid software architecture. Ember really focuses on developer productivity, while Preact shines with its tiny library size. Svelte on the other hand is lightning fast by optimizing the compile step. Every framework comes with advantages and disadvantages and sometimes the best solution might be no framework at all.

#1

January 29, 2021