DEV Community: Cyd

CSS Transitions

Cyd — Sun, 20 Dec 2020 14:41:15 +0000

CSS transitions allow you to animate property values smoothly, over a given duration. CSS transitions may seem simple, but there are a lot of things you can do with them that most people don't utilise or know. Here are a few things I've learned over the years.

The basics

The simplest way to add a transition property is like this:

.element {
  transition: 1s;
}
.element.transitioned {
  transform: translateX(10px);
}

This will cause any change to .element's animatable properties to transition in 1s (second). It's probably not actually what you want to be going for. Much better practice is to reference the actual property you'd like to transition.

For example:

.element {
  transition: transform 1s;
}
.element.transitioned {
  transform: translateX(10px);
}

This way only the transform change of .element is transitioned.

To be able to see any transition on your element you have to change either it's state or add, for example, a class with JavaScript.

An example of a state change:

.element {
  transition: transform 1s;
}
.element:hover {
  transform: translateX(10px);
}

If you want to add a transition without any user input, like hover, focus or adding a class, you're better off using a css animation.

Location location location

Where you place the transition property is important, if you want to transition on hover and back you can add the animation to the element without the hover pseudo class. Like the example above. When you want to add a different animation on mouse enter than mouse out you can add two transition properties.

In the above example I used the :focus pseudo class on a button to animate sibling elements (that's the ~ selector part) with the class .transition. The first element (.transition--1) only has the transition element set on focus, that means that when the button above is unfocused the element is just put back in it's original place without a transition. The second element .transition--2 transitions the transform property in 2 seconds. The third element .transition--3 has a different transition property set on the focused state, this means it transition on :focus in 1 second and on unfocus or blur in 2 seconds.

Easing

An 'easy' way to add prettier transitions is to add an easing or speed curve. There are a few predefined easings:

ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
linear - specifies a transition effect with the same speed from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

The cubic bezier is a good way to add a very custom feel to your transitions, some people can write these by hand, I'm definitely not one of them, I use this tool a lot, but I also use ease-out a lot.

Multiple properties

It's possible to add multiple properties in the transition property, that way you can first fade an element in and then transform it, for example.

What really frustrates me about this functionality is that you can't independently transition transform functions (you could use something like GSAP to accomplish that, though), but it's still very useful. In the example above I transition the clip-path and transform properties. I transition the properties on .transition--1 at the same time, .transition--2 delays the clip-path transition on :focus and delays the transform transition when it transitions back. This makes the transition a lot clearer.

Advanced examples

Here are some examples of what you can actually create with transitions:

Questions/suggestions?

If you have any questions, suggestions or good examples about this topic please let me know in the comments.

4 things in web development I've learned in 2020, so far

Cyd — Mon, 10 Aug 2020 13:15:31 +0000

The thing I like most about web development is that you never stop learning new properties and tricks. These past few months have been weird; working from home, having the company I've worked at for three years stop, and starting as a freelancer. It's been a while since writing my last post, for all those reasons and more, but today I decided to pick it up again and write about all the small triumphs I've had this year learning new things!

Fill available

In the Safari iOS browser 100vh is calculated on the viewport height regardless of the visibility of the bottom navigation bar. While this is fine most of the time, and is probably preferable to the other option, in which element heights are recalculated when you scroll slightly up, it can be a very weird bug on fixed scrollable containers (like the popups in the following example).

This is a bug many developers have been pulling their hair out to fix for many many years.
Then in April Matt Smith tweeted this and it almost made up for being socially isolated for a month by that point.

Matt Smith

@allthingssmitty

🔥 TIL a #CSS trick to handle that annoying mobile viewport bug with `100vh` in WebKit (iOS Safari)! #WebDev #ProTip

20:53 PM - 25 Apr 2020

998 5232

The best way to implement this in my opinion is like Matt does, with a backup for browsers that don't yet understand this property, for example;

.container {
  height: 100vh;
  height: -webkit-fill-available;
  height: fill-available;
}

Interaction based media queries

I think I'm a bit late to the party, but this might be my favourite CSS discovery this year. It's supported by all modern browsers and allows you to style based on a user's primary input mechanism. The great thing about media queries like these is that you don't have to rely on using screen size media queries which don't always correspond with modern devices (looking at you iPad Pro).

Possible options are pointer, any-pointer, hover, and any-hover, the beautiful thing about pointer is that it accepts coarse, fine or none taking in account the specificity of the pointer device's input. This would allow you to create slightly larger CTA's, inputs or checkboxes for devices that have a coarse pointer input to create a more accessible experience ✨. I believe the fine pointer value is implemented when a user is using a stylus, but I'm not sure.
I have used the hover property a handful of times, mostly to create custom cursors, which obviously do not have to show on touch devices.

Example:

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
  }
}

Intersection Observer API

This is one of the best ways to create scroll position based animations and I could write an article solely on this. I've learned a lot about it from reading this Mozilla article.
It's supported in all modern browsers and allows you to call functions when elements come in to view (or are intersecting) in your viewport.

const header = document.querySelector('.header');
const inView = (entries) => {
  for (const entry of entries) {
    // try logging entry to view all the possible values
    if (entry.boundingClientRect.y < -32) {
      header.classList.add('background--dark'); // for example change the background of the header when the page has scrolled 32 px.
    } else {
      header.classList.remove('background--dark'); 
    }
  }
};
// threshold is just one of the options you can pass in the InteractionObserver
// It determines the amount of triggers while scrolling, it allows an array of numbers between 0 and 1
let threshold = []; 
for (let i = 0; i <= 100; i++) {
  threshold.push(i / 100);
}

const observePageHeader = new IntersectionObserver(inView, { threshold });

// observing the element that has .header as a class
observePageHeader.observe(header);

It can be used to create lazy loading images or play videos only when they're in view. Or add styles and animations to elements at certain scroll positions.
I was also pleasantly surprised it still worked while using the Locomotive scroll library!

Perspective

Apparently, when you set the css perspective property and create a horizontally scrollable container it creates a sort of out of the box scroll animation? Weird stuff!

Found this unexpected feature while working on a way to create a sort of scrollable timeline:

Bonus: learn from my mistakes

I've spent waaaay too many hours trying to fix a 'bug' where a container wouldn't scroll on mobile iOS but would on desktop. It appears using pointer-events: none on a parent element can really screw up the ability to scroll inside a scrollable container on iOS.

Want to work with me?

Check out my portfolio

How to create a 3 dimensional object with CSS only

Cyd — Sat, 28 Mar 2020 10:39:29 +0000

To become a better web developer you have to keep challenging yourself and keep learning new stuff. Thankfully I have amazing colleagues at Matise who are critical thinkers and always curious about new technologies, even while in self isolation. Last week I learned about the Observer api for example and I implemented it in two of our projects. This week I wanted to know how to make objects three dimensional with CSS, and in order to keep it fun I used a TARDIS as the object.

Transform styles and translating the Z axis

I started simpler of course; I did a little research and found that there are a couple of CSS properties you can use to create a 3d object.

One of the most important is transform-style, it has a default value of flat but needs to be set to preserve-3d; in order for the cube to become a cube. otherwise the sides will just be stacked on top of each other.

The perspective property lets you determine how far away the object is on the Z plane by adding any length value, which sounds really trippy. Increasing the perspective amount makes the object seem farther away. There's also a difference between the perspective property and perspective transform function, which is still a bit unclear to me to be honest.

The final property you'll need is the transform property which allows multiple transform functions like rotateY and rotateX, but also the very important translateZ property to assign positions on the z-axis per element.

Using rotate you can create a different perspective and see some of the top of the cube.

.cube {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(1turn);
  // using a linear animation easing
  // to create an infinitely spinning cube
  animation: turn 12s linear infinite;

A cube has six sides (unless you count the inside, hehehehe) so I had to add 6 divs which are all 10x10em. Somehow setting translateZ to half the width of the sides creates a pretty hotpink cube.

  .side {
    position: absolute;
    width: 10em;
    height: 10em;
    background: hotpink;
    &.front {
      transform: translateZ(5em);
    }
    &.top {
      transform: rotateX(90deg) translateZ(5em);
    }
    &.right {
      transform: rotateY(90deg) translateZ(5em);
    }
    &.left {
      transform: rotateY(-90deg) translateZ(5em);
    }
    &.bottom {
      transform: rotateX(-90deg) translateZ(5em);
    }
    &.back {
      transform: rotateY(-180deg) translateZ(5em);
    } 
  }
}

Time and relative dimension in space

After successfully creating a cube I thought it was time for the real deal; a TARDIS. I created a TARDIS before but it had just one dimension which means it just wasn't good enough, because everyone knows a Tardis should spin.

While a TARDIS is a little more complicated than a cube the principle is the same; set perspective: 800px; on the parent element and transform-style: preserve-3d; on the container element, and add 6 sides to transform.

The thing I struggled with most were things like the roof and the fact that once you've set a translateZ on a parent element the children aren't translatable on the z-axis anymore. Orrrr I was doing something wrong, please let me know if you know what.

You can do it too!

Let me know if you create any three dimensional stuff in CSS, bonus points if it's from Doctor Who. :)

3 reasons why we created our own SCSS framework, and you should too

Cyd — Thu, 05 Mar 2020 08:53:02 +0000

For the past four years we've been using and creating our own SCSS frameworks at Matise. We've had different versions, but the core idea has remained the same; it has to make the translation from design to development easier.

The frameworks therefore weren't only implemented by our development team but the philosophy was also adopted by our designers. The latest version of our framework is called Matise Gryd. It's composed mostly of functions but also provides Foundation-like column classes.

All our past and present frameworks have been based on a 24 column grid. This grid is implemented in our designs by our designers, which makes it much faster to develop. This grid also makes our elements scalable over many screen sizes.

The evolution

As I said before, we've had multiple versions of this framework, it all started with Matise Grid created by our former senior frontend developer and SCSS magician Sil van Diepen. Sil then created Henris, after Henri Matisse ;), because he wanted to make it bigger and better. This proved too big to maintain after he left Matise, and it also did a lot more than we actually needed so I recycled some of Henris functions and created Matise Gryd.

In this version I really went back to the basics and only added what we actually use. You can read all about it in our documentation

Why we created it

1. It makes developing faster and easier
Because of the SCSS functions and the fact that our designers design on the same grid we work with in development we spend a lot less time for example on setting widths for different screen sizes. Almost all sizes we use are flexible viewport widths (vw) until tablet or mobile screens, even our font sizes.

2. It creates more consistent development
Using a grid as a designer is always a good idea, it helps keep designs more consistent. It also really helps us keep the same look and feel on different sections and pages.

3. It's completely customisable to your needs
If we decided to start working with a 32 columned grid tomorrow we could. When we find a bug we can fix it ourselves and don't have to create an issue or pull request.
If we find that we use a certain piece of code often we can add it easily.

Bonus

We also created two NPM packages to create an automatise (sounds like the Dutch word automatisch which means automatic which is in my top ten puns of all time) Vue/Nuxt or Wordpress project with Matise Gryd installed and ready. This saves us a lot of start up time in projects, and also when we've learned something from a previous project it's really easy to update the package to implement it in all future versions!✨

Please let me know if you have any questions about creating a SCSS framework

Spent my Sunday building a TARDIS...

Cyd — Sun, 16 Feb 2020 19:47:10 +0000

Not the most productive or useful Sunday I've ever had, but I sure enjoyed it. :)

Let me know if you have any questions on how I created this.

Crazy canvas animations

Cyd — Thu, 23 Jan 2020 17:14:51 +0000

Before you read: I don't claim to be any kind of expert in canvas. But over the years I have dabbled with it a bit and these are some of my findings. You can also go straight to the fun stuff

Recently I started a new project which had a very cool pattern that made me think of old school Windows struggles. Do you remember that when your computer was really busy downloading stuff you could drag the download window over the entire screen and it wouldn't render correctly?
I created a "simple" codepen a few months ago, for fun it literally has no purpose:

Unknowingly this pen had prepared me for the animation I wanted to make for an actual client (LOVE IT when that happens).

Canvas?

Maybe you've come this far in this article without actually knowing what canvas is or does. Canvas is an HTML element that you can use to draw graphics on a web page with JavaScript. If that sounds weird, I got you, it is a little weird. BUT it also means you can do crazy stuff like interacting with events an animating all the things!

First thing you need to do is select the canvas element with JS and get the "context" which is the drawing object. That is really just a weird way of saying that it's the part of the canvas which you'll mention when changing anything.

<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Don't ask me why this is called ctx and canvas is written out entirely, it doesn't make sense but seems to be the standard.

An image constructor allows you to add an image with JavaScript. You can also add an event listener to check if it has loaded.

There are multiple properties that can be applied to the context of the canvas.
I used ctx.drawImage() to add the image to the center of the window on image load. 🧐

const image = new Image();
image.src = 'http://api.cydstumpel.nl/wp-content/uploads/2020/01/graphic.png';

image.addEventListener('load', e => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // in this case I want to make the canvas as high and wide as the window
  ctx.drawImage(image, window.innerWidth / 2 - image.width / 2, window.innerHeight / 2 - image.height / 2, image.width, image.height);
  // calculating the space left and on top of the image to center it on the page by subtracting half of the page by half of the image.
});

I added some event listeners to check when the mouse/touch event is "down", "up" and "moving". The moving event should only be fired when the mouse is down (clicked) and not when it's just hovering over the page.

I add the coordinates of the last 5 events fired to an array to add a windows error like effect.

// [...]
let lastImages = [];
// declare lastImages as an array in the global scope
// [...]

canvas.addEventListener('mousemove', (e) => {
  x = e.clientX - image.width / 2;
  y = e.clientY - image.height / 2;
  // to make sure the image will be centred around the mouse remove half the width and height respectively

  // Save coordinates to last images as long as it's < 5
  if (lastImages.length < 5) {
    lastImages.push({x, y});
  } else {
    // Delete first item in array (first item is last added) and add new coordinates
    lastImages.shift();
    lastImages.push({x, y});
  }
  // The code above makes sure that there are not more than 5 elements on the screen at the time, adding more could definitely slow down your browser.
  if (mouseDown) {
    // check if mouse is down before firing drawIt function
    window.requestAnimationFrame(drawIt);
  }
});

The draw function:

function drawIt() {
  if (mouseDown || popping) {
    // Clear entire canvas because clearing just the image doesn't work unfortunately
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Draw new image for each item in lastImages array
    // For loops are faster than foreach I read somewhere
    for (let i = 0; i < lastImages.length; i++) {
      // After clearing the entire canvas draw the images from the lastImages array again
      ctx.drawImage(image, lastImages[i].x, lastImages[i].y, image.width, image.height);
    }
  }
}

The popIt function is called when mouse goes up or out:

function popIt() {
  mouseDown = false;
  // Okay this is a bit gross, I know about intervals this just works better:
  for (let i = 0; i < 5; i++) {
    setTimeout(removeLastItems, 50 * (-i * 1.2) );
    // -i * 1.2 creates an increasingly faster timeout simulating a fade in bezier
  }
}

The removeFirstItems function shifts (removes) the first item of the array (which is equal to the first item that was added to the array)

if (!mouseDown && lastImages.length > 1) {
  popping = true;
  // Get first drawn image and remove it from array (first drawn is first in array)
  lastImages.shift();
  drawIt();
  // initiate drawIt function without the request keyframe for it's only fired 5 times 
}

Fun stuff

You should really check this out on a large screen, it works a lot better when you have a lot of space to drag.

Ask me anything

If you don't understand my rambling, or don't agree with it don't hesitate to add your comment to this article. :)
Big thank you to commenters last week who mentioned I should really think about debouncing events, I still need to actually implement it in my portfolio though😅.

Using event listeners to create better animations

Cyd — Sat, 18 Jan 2020 16:40:11 +0000

If you want to go beyond the standard hover, focus and click animations you've interacted with the right article! This is all about turning user input into better animations.

Event listeners

There are A LOT of event listeners in JavaScript, some of them you've probably heard of, most of them you'll probably never need or use. My favourite events to use are touch/mouse and scroll events. I am also trying to understand the devicemotion events but haven't come very far, if anyone has any reading tips let me know please!

In the first example I'm using the mouseover event to determine the mouse's position (x y coordinates) on the screen.

Example 1 Skewing on mouseover

An example of how I used this on my portfolio:

The HTML is quite basic:

<div class="skew">
  <div class="skew__item">
    <img src="https://pbs.twimg.com/media/BcvmxibIYAAH8a3.jpg" /> 
    <!-- TIP: always use an image you really enjoy
    looking at for codepens 😻 -->
  </div>
</div>

The JavaScript gets a bit more complicated:

const skewItemContainer = document.querySelector('.skew'); 
// Get the container element to add the mouseover 
// event and css variable to
const skewItem = document.querySelector('.skew__item').getBoundingClientRect();
// getBoundingClientRect() returns an object with the
// coordinates and width, height etc of an element

const imageCenterX = skewItem.left + skewItem.width / 2;
const imageCenterY = skewItem.top + skewItem.height / 2;
// Calculating the center coordinates for the image

// Add the event to the container around the image 
// (more room to mouseover == more better😎)
skewItemContainer.addEventListener("mousemove", function(e) {
  // the event, e, is an object with a lot of
  // information, I only use clientX and clientY
  // for this animation

  const clientX = e.clientX;
  const clientY = e.clientY;
  // Get x and y positions of the 
  const xCalc = (clientX - imageCenterX) * 0.000001;
  // increasing 0.000001 will make the animation more pronounced
  const yCalc = (clientY - imageCenterY) * 0.000001;
  // Subtracting the X & Y coordinates by the image
  // center ensures that the center of the image 
  // (where ever it may be positioned on the page) is 0, 0 🧐

  skewItemContainer.style.setProperty("--x-translate", `${xCalc}`);
  skewItemContainer.style.setProperty("--y-translate", `${yCalc}`);
  // using setProperty to add css variables to the container element
});

Okay I lied a little bit, I'm not actually using the skew() transformation function, I'm using matrix3d(), it gives you more control. This matrix3d transform is complicated AF, I found out you could create a skew like effect by continuously trying different values.

.skew {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  // Centering the element with flexbox ❤️
  background: black;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  --x-translate: 0;
  --y-translate: 0;
  // creating defaults for the css variables
  &:hover {
    .skew__item {
      transform: matrix3d(1, 0, 0.00, var(--x-translate), 0.00, 1, 0.00, var(--y-translate), 0, 0, 1, 0, 0, 0, 0, 1); 
      // By adding the transform only on hover you 
      // make sure that when the user hovers out it
      // will return to it's non transformed standard
      // position, which saves you some code ;)
    }
  }
  &__item {
    width: 60vw;
    max-width: 500px;
    transition: 0.4s cubic-bezier(0.64, 0.57, 0.67, 1.53);
    img {
      width: 100%;
      height: 100%;
      object-fit: cover; // ❤️❤️❤️❤️ object-fit
    }
    &:hover {
      transition: 0.4s ease-out;
      // adding a different animation on hover than
      // hover out makes animations more playful
    }
  }
}

Example 2 Scaling up on scroll

An example of how I used this on my portfolio:

In the codepen I used three videos, this is absolutely not necessary! In the code examples here I'll show you how to do it with just one video.

Big shout out to the company I work at (Matise) who created this video and the design shown in the video. 👏

<section class="scale-video">
  <video class="video" autoplay muted loop playsinline src="https://cdn.matise.nl/content/uploads/2018/03/20092418/02_bbbSingleProduct.mp4"></video>
</section>
<section class="row">
  <h1>Scroll!!</h1>
</section>

const videoContainer = document.querySelector('.scale-video');
const video = document.querySelector('.video');
// Create variables for the container and the video for easy access

window.addEventListener('scroll', function(e) {
  let scrollY = window.scrollY  / window.innerHeight * 5;
  // Create a calculation to base the scale amount on

  // Create min and max values for the scaling:
  if (scrollY <= 0.3) {
    scrollY = 0.3;
    // We don't want the video to become smaller than (scale(0.3))
  }
  if (scrollY >= 1) {
    scrollY = 1;
    // We don't want the video to become bigger than (scale(1))
  }
  videoContainer.style.setProperty('--scale', `${ scrollY }`);
  // Set css variable on the video container
});

:root {
  // setting defaults can also be done on the root pseudo class
  // https://tympanus.net/codrops/css_reference/root/
  --scale: 0.3;
}

.scale-video {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  // Center the content with flexbox
  width: 100vw;
  box-sizing: border-box;
  height: 300vh;
  // The height here is quite outrageous, haha.
  // It's to make sure that you have enough place
  // to scroll to let the animation do its thing.
  overflow: hidden;
  background: black;
}

.video {
  position: fixed;
  top: 0; 
  transition: 1s ease-out;
  width: 100vw;
  z-index: 2;
  overflow: hidden;
  object-fit: cover;
  transform: scale(var(--scale));
  // Add the scale via css variable
}

That was it for now, let me know if you've ever made animations like these. I'd love to see them!

4 CSS tricks that will get you dirty looks from other developers

Cyd — Fri, 10 Jan 2020 13:41:25 +0000

Dirty tricks in CSS are very useful; where would YouTube players be without using padding–bottom: 56.25% to create a 16:9 ratio? I assembled a list of my favourite dirty tricks for you!

1. Min margins

This one gets me a lot of dirty looks, but that doesn't mean it's wrong.
If you add items that vary in width in a row with a (quite large) gap in between it can be very hard to determine when those items won't fit on the same row anymore, using a margin on only one side can also mess with centered items or make items break too soon.

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2rem;
}

.column {
  margin: 10px 2rem 0; // ensures a 4rem gap between items
}

2. Extending the clickable area

I've talked about this in a previous article, because pseudo elements like ::before on an anchor tag (<a>) inherit the click-ability of its parent you can use it to extend the clickable area of a link.

Make sure you add position: relative on the element you want to use as reference for the clickable area.

In the following example I used position: relative to the entire .list-item and position: absolute to the pseudo element with either top, left, right & bottom set to 0, or width: 100%; height: 100%;

Some developers would add an anchor link around the entire list item, this is really annoying to people using screen readers. It's also annoying to style, because you'd have to set the text-transform and color property to overwrite standard link behaviour on all text.

This trick works on buttons as well🤓

3. Writing mode

Writing mode is a css property used to set the writing direction. This is of course meant for languages that have a different writing direction than left to right, it's also very useful to style text that has been rotated 90deg.
When you use transform to rotate text 90deg padding-left will appear on the top of the element (which is probably what you would expect) but the container also gets a weird width; see the codepen below when you click on the texts. You won't get this with writing-mode: vertical-lr;. The big downside of using writing mode instead of transforms is that you can't animate the rotation between two writing modes.

4. Padding bottom

For some reason when you use percentages for padding-bottom they are not based on the height of the element but the width. This is very useful in styling YouTube embeds since you probably want it to take up 100% of the available width, but you can't always be exactly sure how wide that space is. Using height: 56.25% (16/9) won't work, but adding padding-bottom: 56.25% will!

Fun with variable fonts!

Cyd — Sun, 05 Jan 2020 14:31:31 +0000

Variable fonts are a (r)evolution on OpenType fonts. They are animatable from one font style to another and require only one file to load!

You can read about what they are, or go straight to the fun stuff

The what and how

If you haven't heard about variable fonts yet, here's the gist:
Normal/static fonts have a couple of predefined widths or even styles (like italic or narrow) it's not crazy to load a Graphik-Bold, Graphik-Medium and Graphik-Regular version of a font in your website. Sometimes you even need a Graphik-BoldItalic, to add emphasis for example. This means a lot of HTTP requests, which means your website will be slow to load or in the worst case slow to show any typography at all (always try to use the font-display css property).

Variable fonts only need one file to load all weights and styles. This file is going to be bigger than a single font weight file, but about as big as loading 3 or 4 font weight files. A big plus in my opinion is that you can transition smoothly between these styles and weights, allowing for fun interactions.

The variation axis

Variable fonts have introduced the variation axis, this is the amount in which you can change the style of a variable font. It works similar to font-weight: 0 - 999, but can also be binary as in 0 or 1. In static fonts you would declare the regular font on 400, medium on 500 etc. In variable fonts the entire range can be available.

There are both registered- and custom axes, the registered ones are: italic (font-style), slant (font-style), optical-sizing (font-optical-sizing), width (font-stretch) and weight (font-weight). The custom ones are limitless, they are set by the font creator and need to be 4 capitalised letters.
You can add them all in one shorthand font-variation-settings: 'ital' var(--italic), 'slnt' var(--slant), 'opsz' var(--optical-size), 'wght' var(--weight), 'wdth' var(--width);, or as separate css properties.

I added the values as css variables, if you haven't heard about those yet, you can read this article I wrote:

Using css variables to create smooth animations

Cyd ・ Mar 18 '19

#cssvariables #customproperties #javascript #css

The fun stuff

I love creating animations on scroll or mouse position and variable fonts are great for that:

Where to get them or see them

https://codepen.io/nlwilliams/pen/JjPJewp
https://v-fonts.com/ (a lot of fonts here are paid but some have a trial version you can play with)
https://www.axis-praxis.org/
https://speckyboy.com/variable-font-examples/ (some other examples)
https://www.variable-fonts.com/

Good luck, I'm exited to see what you create!

Animating forms like a semi pro ✨

Cyd — Tue, 31 Dec 2019 12:31:32 +0000

Have you ever come across a form which used placeholders in stead of labels? THE HORROR.

Placeholders disappear after you start writing, but also when they're prefilled by Chrome for example. This means you can't check if Google put your address actually in the address input, all in all; VERY bad user experience (UX).

This article is about the front end of forms only, I'm no expert in posts and javascript validation.

Head straight to the fancy stuff.

Semantics

Animating forms like a semi pro begins with a good setup of a form.

<form class="form">
  <div class="form__input-container form__input-container--text">
    <input type="text" class="form__input form__input--text" id="firstname" name="firstname" placeholder=" " />
    <label class="form__label form__label--text" for="firstname">First name: </label>
  </div>
  [...]
</form>

I use BEM syntax for classes, this makes it really easy to style similar elements like inputs, but for clarity's sake I'll just use the element names in this article.

I encased the input and label in a div, this will make it much easier to style later on. I added a name attribute to the input element, without this the input is useless and will not send any data. I used the for attribute on the label to link it to the ID attribute on the input, now if you click the label you'll focus on the input. I added the label after the input to be able to style it with sibling selectors :).

Pseudo classes!

Form elements have a lot of pseudo classes available, you can check the state of an input with things like :valid, :checked etc.

input:checked + label::after {
  left: 0.3rem;    
}

Selecting the label's ::after pseudo element that is a sibling of the checked input.

It's possible to add multiple pseudo classes at once:

input:placeholder-shown:not(:focus) + label { 
  position: static;
  padding: 10px 20px;
  font-size: 1rem;
}

The :placeholder-shown pseudo class is still experimental, you should only use it for enhancements, not features. It's an amazing enhancement though, you do need to put a placeholder attribute on the input element for it to work, but it can be empty!

The :not pseudo class allows you to check if an input is not :focused, CRAZY inception type stuff, but very fun.

Validating with css

Some types of input elements (like type="email") have their own built in validation, you can also add a pattern attribute to inputs to be able to validate them with css.
It always reaaally bugged me that validation already started before you were even done typing. I admitted before that :placeholder-shown is not well supported so this is more of a future thing, but I found a way to only show errors and validation after you filled an input and weren't focussed on it anymore:

input:not(:placeholder-shown):not(:focus):invalid {
  border-bottom: red 2px solid;
}

input:not(:placeholder-shown):not(:focus):valid {
  border-bottom: green 2px solid;
}

Animating custom radio buttons

I always create custom radio buttons and because it is still not possible to animate the browser's standard ones I create them by using ::before and ::after pseudo elements.

input[type="radio"] + label {
  position: relative;
  display: block;
  padding-left: 30px;
  border-radius: 1rem 0 0 1rem; // t
  overflow: hidden;
}

// we're actually creating our own radio button styles
input[type="radio"] + label::before,
input[type="radio"] + label::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
}
input[type="radio"] + label::before {
  // this makes up the border around the input
  width: 1rem;
  height: 1rem;
  border: 1px solid black;
  border-radius: 50%;
}
input[type="radio"] + label::after {
  // this makes up the dot to indicate if it's selected or not
  width: 0.5rem;
  height: 0.5rem;
  background: black;
  border-radius: 50%;
  top: 50%;
  left: -10px;
  // because the label has a `overflow: hidden` style the dot will be invisible at -10px
  transform: translateY(-50%);
  transition: left 0.4s;
}
input[type="radio"] {
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
}
input[type="radio"]:checked + label::after {
  left: 0.3rem; // this makes the dot visible again, only when the input is checked.
}

Editing focus states

I know the standard focus states of really every browser is to say the least probably not conformant to your website's style. But before you remove it all together think about the keyboard dependent users out there! It's really easy to add some kind of focus style (it doesn't need to be dotted or blue) and it's not only disabled people who use the keyboard it's also a lot of developers!

N.B. You can do a lot more with pseudo classes this is just the tip of the iceberg, for example you can check if an input is :disabled.
Css/HTML validation is **not* an alternative to JavaScript validation, it's a lot easier to do complex checks with a script than write it in an input pattern attribute.*

The fancy form

Creating a fold out navigation with CSS only

Cyd — Sun, 29 Dec 2019 15:29:55 +0000

While using JavaScript to open a mobile navigation is a solid option, it's also possible to do it with CSS only. Even submenus don't necessarily need any JS to work, pseudo classes and sibling selectors are the answer!

How

Fold out navigations are usually triggered by what's been lovingly called the hamburger menu, referring to the three horizontal lines. This has been a much debated icon, but people have gotten used to it, so for now let's stick to it.

To create a CSS only navigation we need to use an <input /> element with type="checkbox", we will use the :checked pseudo class to see if it's selected. And we need a <label> that's linked to the input element with a for attribute.
This is the simplified version of what I usually create, for clarity's sake I've styled on elements rather than classes:

<nav>
  <input type="checkbox" id="trigger" />
  <label aria-label="open main navigation" for="trigger"><span></span></label>
  <ul>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
  </ul>
</nav>

Note that I put the label element after the input element, this makes it possible to style the label by the input's state (:focus, :checked, etc).

Hiding the checkbox

The checkbox input needs to be entirely gone. I added position fixed because the rest of the navigation is fixed and standard behaviour of clicking on a checkbox label is scrolling to it, which would mean scrolling to the top.

input {
  opacity: 0;
  width: 0;
  height: 0;
  appearance: none;
  position: fixed;
}

Creating the trigger

You can just add a background image of a hamburger icon here or you can use before and after selectors to create them. This is the visible part of the trigger, this will be your "nav is closed!"-state.

You might have wondered about the 'unnecessary' span inside the label tags, I added it to make it styling it easier, you can leave the span out.

label {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  width: 15px;
  height: 10px;
  margin: 40px;
}

label span {
  display: block;
  width: 100%;
  background: hotpink;
  height: 2px;
  transition: transform 1s;
}

label span::before,
label span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  height: 2px;
  background: hotpink;
  transition: 0.4s
}

label span::before {
  top: 0;
}

label span::after {
  top: calc(100% - 2px); /* to make the transition easier :) */
}

Hiding the navigation

While you could just add display: none here, and display: block when you want to show it, using a transform is a lot more fun.
I chose to translate the ul 100vw on the X axis to hide it from the screen until the user clicks on the trigger.

ul {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateX(100vw);
  transition: transform 0.2s;
  background: white;
}

Creating the 'open state'

I talked earlier about using the :checked pseudo class, a pseudo class is a keyword that's added to an element when it has a certain state.

Radio- and checkbox input types have a :checked state. Checkboxes can be checked and unchecked by clicking on them, in order to select another radiobutton there needs to be another button. Checkboxes are more suitable for our goals so we use them.

This is the place to add the css for the nav trigger's open state, a lot of websites don't style and animate this and it's a shame in my opinion.

The code may look intimidating if you're new to css but if you read it out loud it sometimes helps to understand it more clearly. The first line for example: select the inner element 'span' of the sibling 'label' of the checked 'input'.
Okay that still sounded a bit like gibberish, practice really does make perfect here.

input:checked + label span {
  transform: rotate(45deg);
}

input:checked + label span::before, input:checked + label span::after {
  top: calc(50% - 1px);
  transition: 0.4s;
}
input:checked + label span::after {
  transform: rotate(90deg);
}

Showing the navigation

I used the general sibling selector here, this means "select any ul that is a sibling of a checked input", input:checked + label + ul would also have worked, but is more sensitive to errors (what if you add an element in between?).

input:checked ~ ul {
  transform: none;
  transition: transform 0.4s; 
}

The pretty SCSS version with beziers and all the fancy stuff:

But why?

Because we can!

This may seem a lot more complicated than just adding a class with JavaScript and you may be right. This is not only a great exercise if you want to get better at handling pseudo classes and sibling selectors, it's also very sturdy. Imagine your website has a small error in the JS, this would mean people couldn't use your navigation anymore. Let's leave JavaScript for the crazy animations and keep simple things like opening and closing a navigation as a CSS thing.

Accessibility

A good point to throw away this entire article is that using an input element to open and close a navigation is not semantic.

But really if you think about it, most people using screen readers (the group that might notice that you used an input element in stead of a more semantic button element) aren't exactly developers, you might really annoy the blind developers though, be ware.

The trigger is automatically accessible with the keyboard, if you also add a clear aria-label you've done more than most developers who use a button to open a fold out navigation.

I would really love some input from actual blind users or accessibility experts, let me know in the comments whether I'm completely clueless.

5 things in web development I learned this year

Cyd — Fri, 27 Dec 2019 15:01:48 +0000

This year has been weird but good, after suddenly becoming the most experienced frontend developer at the company I work at, Matise, I really had to step it up.

In this article I've listed 5 things I learned this year concerning web development.

1. Mix blend modes

Okay, I had heard about this one, but I never really delved in to it. mix-blend-mode is a css property that determines how an element's content should blend with the content of the element's parent and the element's background [1]. It's a great way to add animated effects on images or implement a dark mode for example.

2. CSS Filters

CSS filter are amazing, I would only recommend using filters on images if you want to animate them. Because although browsers have become better at handling them, it's still a bit of a performance hit [2]. I actually used a SVG filter to create a duotone effect before realising it would be soooo much easier using blend modes and pseudo elements which are actually animatable.

3. Line clamping

A lot of our clients like it when excerpts on blog previews are the same height, I always explained to them that that's not possible because of varying text lengths and not using monotype fonts etc. I found out this year I was wrong! It is possible as an enhancement, this doesn't work in non webkit browsers, to 'line-clamp' text at three lines for example. I still instruct clients to keep their excerpts short and to the point but this is a nice extra for them.

.text-excerpt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

4. CSS variables are funnnn

I've used CSS variables (or custom properties if you like it old school) to animate elements so much this year and bored people with talking about it so much, I might be it's biggest advocate.
They can be global, they can be scoped, you can change them in a lower scope IT'S GREAT.

I like to use the style.setProperty method in stead of actually using JavaScript to add css properties directly. I always hate when I want to overwrite these JavaScript set properties I have to use !importants. I also love that my logic stays in the SCSS file and the variables are available in all child elements. This can be useful if you want to set a style on multiple elements, no need for JavaScript loops anymore you can just simply set the property on the parent element and use a class selector to add it to all of them.

5. Text strokes

This is more just a really fun thing I've found out about this year, like line clamping it should really be used as an enhancement because of its browser support.

BONUSSS

I learned about clip-paths back in 2018. But I've still used them a lot this year, and learned some new things about animating them. For example you can't animate between two different types of clip-path like a circle and polygon type, which is understandable but really still a shame. You can fake it a little by first creating a square and then replacing the polygon type with a circle type, but it's not ideal.

What did you learn this year?