(Web/View) Components: Should everything be a component?

Recently I was reviewing a merge request of some front-end code, and a simple div, that changed a bit of the custom appearance of a block of text through a few custom classes, was changed in a call to a view component that then applied the same classes, passed onto the component through a more deeply nested hash.

> -
> + ’itis ](https://en.wiktionary.org/wiki/divitis) you get ‘TextComponent’-itis.. we don’t add better semantic or structural information to the page layout

Instead?

Keep the code as is. And perhaps create a ticket (or annotate it with TODO:) that you perhaps want to extract this ‘custom-class’ call into a true reusable component. While I don’t think there is something inherently bad with offering the option to override or add some custom classes to a component, a component should only be used if it adds structural meaning either from the developer's side of things or (better) from the consumer’s side of things (e.g. semantic output that can be p…

WebComponents with XSLT

I’m a sucker for standards. Especially those more theoretical standards: peak theoretical standards era for the web is the era that promised the semantic web; early 2000’s.

Some history

In that time, the first version of this site was built using an XML-based index file, XML files that provided meta data on certain topics and XHTML files that featured the content. With PHP-code to tie requests and responses together, the site was mainly powered by several (big) XSL-Transforms that rendered the pages (it (c|sh)ould’ve been a static site).

Fast forward to today. While WebAssembly is gaining traction, these days the focus is on JavaScript for components. Popularised by frameworks such as React, new elements are defined in JavaScript that can be used in the DOM (the latter is not what React uses btw). The (promoted as) ‘standard’ way to make custom elements is using WebComponents. Yet this effort is driven primarily by Google.

And I’m still closing my ``’s and write `…

Design Systems and the source of truth

Some excerpts I created from the transcript of the Design System Podcast, hosted by Chris Strahl, which in Episode 11 featured Brad Frost and Evan Lovely.

Hand-over of comps

The traditional process starts with the design of comps, comps, non-interactive previews, which are generated by the design team and undergo a rigid design review process up to a design director or VP, and is only then passed on to the developers who need to implement that initially static comp pixel perfect. But Evan Lovely notes that while there is nothing wrong with comps, there is something wrong with mistaking it for the final product. That’s why he likes tools like pattern lab, storybook or knapsack, because they really allow someone to quickly mock up a comp that actually works within the final environment.

To some companies this is a problem; because the formal approva…

Highlights from the Atomic Design book by Brad Frost

Since his talk at Fronteers I was interested in the thinking of Brad Frost, his blog posts, etc., but never actually read his book Atomic design until recently, as it got more and more relevant to an internal discussion at an organization I was working for. A few notes:

• Most importantly, what it is not: Atomic Design is not about being a practical guide for implementing design systems (although it has some examples in Pattern Lab, which was originally built by him). I was also hoping it would also give guidance on naming things / structuring CSS when building atomic design based design systems, but it does not. But don’t mind, plenty of good content(!)
• Atomic design sounds like an too obvious idea and while I didn’t dismiss it because of that, I realized I also didn’t try to understand it thoroughly enough. Reading the book helped me to better understand it and especially thinking about the intermediate forms (molecules) was actually despite its o…

Creating a link in Vue

Any HTML is legal, so you can just write a regular link, but if you want to have a fast response, it is recommended that you include Vue Router. This brings two important tags: , which this post is mainly about and.

Creating a link in Vue is as simple as:

Home

This renders a perfectly correct link, using the earlier mentioned a-tag. It even adds a nice bonus, adding an ‘active’ class when that route is active. If you prefer this class on the containing element, do this:

Home

This will render something along the lines of:

Home

Be aware: this is the only valid use-case for the tag-property in vue’s router-link component. Hence be wary if you come across any use of the tag-property, but Vue’s default is good.

You pick up on this link by defining the route ‘home’, make sure your app contains a and attach a component to this route. In the most basic form:

…

How do I navigate to another page in React or Vue?

Congratulations, you started working with one of the popular front-end frameworks. Both Vue and React are excellent choices to create rich and reactive applications. But sometimes, you 'just' want to show the user another page. Whether it is a simple about page, or another 'section' in the app. In this post I will cover both Vue en React and, little bonus, “React on steroids”, NextJS.

It is important to know that you need a router to make in-app pagination work. If you look up router and your favourite framework you're probably find a way to do it, accompanied with some ways to actually not do it. Hence, here I'll focus on the right way.

The basics of every link

While you can make everything clickable (or touch-able), it is important that enabling navigation between pages was already a core concept when the web was invented. Even when writing webpages using React, Vue, or most other JavaScript frameworks, it ends up as HTML to the browser (with JavaScript & CSS). HT…

Should I use styled components?

This was originally posted at CoffeeAndOrange

You may have asked yourself if you shouldn’t invest more time getting started with this thing called styled components (or CSS-in-JS). They get heavily promoted in modern front-end application frameworks. And sure, they look interesting.

While it depends may be the only right answer, sometimes you might be simply making things more difficult than really needed. You’re fixing the wrong problem.

Take for example the SCSS code.

$blue = #5DBCD2;

@mixin button-styles($bg-color, $color) {
  background: $bg-color;
  color: $color;
  border: none;
  border-radius: 0.20em;
  &:hover{
      background: darken($bg-color, 6%);
      cursor: pointer;
  }
}

.button {
  @include button-styles(#ddd, black)
}

.button--primary {
  @include button-styles($blue, white)
}

To pair with a simple component along the lines of:

const Buttons = props => ...