Forem: Mustapha Aouas

Streamlining Route Data Binding with Angular Signal inputs

Mustapha Aouas — Tue, 17 Sep 2024 16:41:23 +0000

Angular's latest versions introduce a powerful combination of signal inputs,
and route binding, simplifying how we handle route information in components.
This article will explore this relatively new feature and how it integrates with
Angular's reactive programming model.

StackBlitz example: Angular route binding with signals.

How Route Data Binding Works with Signals

In the latest versions of Angular, we can bind route information
directly to component signal inputs, making our code more reactive and easier to manage.

Let's start with a simple route configuration:

export const DASHBOARD_ROUTES: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
  },
];

Now, instead of using @Input() decorators or injecting ActivatedRoute,
we can use signal inputs in our component:

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  template: `
    <h1>Selected tab: {{ tab() }}</h1>
    <!-- Rest of the template -->
  `
})
export class DashboardComponent {
  readonly tab = input<string>();
  // The router will automatically update this signal
  // Example URL: http://localhost:4200/dashboard?tab=Angular
}

For more complex scenarios, including path parameters, route data, and resolved data:

export const DASHBOARD_ROUTES: Routes = [
  {
    path: "dashboard/:id",
    component: DashboardComponent,
    data: { title: "Dashboard title" },
    resolve: { dashboardData: DashboardDataResolver }
  },
];

@Component({
  // ... component metadata
})
export class DashboardComponent {
  readonly id = input<string>();
  readonly title = input<string>();
  readonly dashboardData = input<SomeType>();
  // These signals will be automatically updated by the router
}

Data Binding Precedence and Input Aliasing

Data Binding Precedence

When route data has the same name across different sources
(resolved data, route data, path params, query params), the binding follows this order:

Resolve Data
Route data
Path params
Query params

To avoid ambiguity, you should use different names.

Input Aliasing

Consider this snippet:

readonly dashboardId = input('', {alias: 'id'});

In the code above, for the route /dashboard/:id, we can use dashboardId in
the component while still matching the :id parameter of the route.

This can improve maintainability as a change in to an external naming (route param)
doesn't require many changes to internal component code.
Also, it can be more readable depending on the context, as variables within the
component have clear, descriptive names.

Steps To Try It Out

Enable It In Your Application's Router Configuration

For standalone applications:

bootstrapApplication(App, {
  providers: [
    provideRouter(routes,
      withComponentInputBinding()
    )
  ],
});

For NgModules:

@NgModule({
  imports: [
    RouterModule.forRoot([], {
      bindToComponentInputs: true
    })
  ],
})
export class AppModule {}

Migrate To The New API

Remove ActivatedRoute service injections.
Replace @Input() properties with input signals.
Enable bindToComponentInputs or withComponentInputBinding in your router configuration as we saw in the section above.

Example migrating from this:

@Component({/* ... */})
export class MyComponent implements OnInit {
  private route = inject(ActivatedRoute);
  id$ = this.route.params.pipe(map(params => params['id']));

  ngOnInit() {
    this.id$.subscribe(id => { /* do something */ });
  }
}

To this:

@Component({/* ... */})
export class MyComponent {
  readonly id = input<string>();

  constructor() {
    effect(() => { /* do something with this.id() */ });
  }
}

Note: In the next angular version (19), there will be a new way to share data using routerOutletData directly in the <router-outlet />. We will cover this in the next article.

Wrapping Up

The combination of signal inputs and route binding in Angular represents a
significant step forward in simplifying how we handle route information in our applications.

This approach offers several benefits:

Reduced boilerplate code: We no longer need to inject the ActivatedRoute service or set up (some-what complex) RxJS pipelines to handle route parameters. The router automatically updates our signals.
Improved readability: By using signals, our component code becomes more declarative and easier to understand (at a glance).
Simplified testing: It's straightforward to test components using signal inputs for route binding compared to ActivatedRoute + observables.
Future-proofing: As Angular continues to evolve, signals are likely to become more central to the framework. Adopting them can help future-proof our applications.

While there are some considerations to keep in mind, such as the priority of route
information binding and the need for clear naming conventions (maybe using input aliases),
the benefits of using signal inputs with route binding far outweigh these minor caveats
in my opinion.

Why HTML has both and ?

Mustapha Aouas — Mon, 16 Sep 2024 07:32:00 +0000

TLDR;

The b and i tags are from HTML's past, focusing on appearance.

The strong and em tags represent HTML's present and future, focusing on meaning.

As a web developer, you might have noticed something puzzling. There seem to be two sets of tags that do very similar things:
1 The b tag makes text bold, and the i tag makes it italic.
2 The strong tag also makes text bold, and the em tag makes it italic.

So why does HTML have both? Aren't they doing the same job? Well, not exactly. Let's uncover the story behind these seemingly redundant pairs.

A Brief History Lesson

To understand why we have both sets of tags, we need to take a quick trip back in time. When HTML was first created in the early 1990s, it included the b and i tags. These tags were straightforward: b made text bold, and i made it italic. Simple, right?

But as the web evolved, developers and designers realised something important: HTML shouldn't just be about how things look. It should also be about what things mean.

Enter Semantic HTML

This realisation led to the concept of "semantic HTML”. The word "semantic" refers to the meaning of something. In the context of HTML, it means using tags that describe what the content is, not just how it looks.

This is where strong and em come in. These tags were introduced to give meaning to the text, not just change its appearance:

strong indicates that the text is important or urgent.

em (short for emphasis) suggests that the text should be stressed when read.

So, here's the big difference:

b and i are about appearance. They tell the browser, "Make this text bold" or "Make this text italic."

strong and em are about meaning. They tell the browser, "This text is important" or "This text should be emphasised”.

Why Does It Matters

You might be thinking, "Okay, but they still look the same on the page. Why should I care?”.
Well, I see two main reasons why this distinction is important:

Accessibility: Screen readers (software that reads web pages aloud for visually impaired users) can interpret strong and em tags to add the right tone or emphasis when reading the text. They might just skip over b and i tags.

Search engines: Some search engines might give more weight to text within strong tags, considering it more important.

When to Use Which?

Let's look at an example to make this clearer:

The zoo's new panda, named Mei Lan, will make her <strong>public debut next Tuesday, July 16</strong>. Visitors are advised to arrive <em>early</em> as large crowds are expected. <b>Note:</b> Her favorite food is <i>bambusa vulgaris</i>, a type of bamboo.

In this example:

strong is used for the important information about the debut date.

em emphasises that visitors should arrive early.

b is used for a note that's visually distinct but not necessarily more important.

i is used for the scientific name of the bamboo species.

The Bottom Line

While b/i and strong/em might look the same on a webpage, they serve different purposes.

The b and i tags are from HTML's past, focusing on appearance.

The strong and em tags represent HTML's present and future, focusing on meaning.

As a general rule, it's best to use strong and em in your HTML. They provide more information about your content's meaning and can improve accessibility and search engine optimisation.

However, b and i still have their places for purely visual styling or in specific situations where you don't want to imply extra importance or emphasis. That said, for simple visual styling, you can use a span elements with CSS classes, as it offers more flexibility and maintains a clearer separation between content and presentation.

Good HTML isn't just about making pages look right — it's about making them mean right too ;)

Relative Units in CSS: A Comprehensive Guide

Mustapha Aouas — Tue, 30 Jul 2024 18:19:00 +0000

In the ever-evolving world of web development, creating flexible, responsive, and accessible designs is crucial. One of the most powerful tools in a developer's CSS toolkit is the use of relative units.
These units allow our designs to be more flexible, responsive, and accessible. In this article, we'll dive deep into the world of relative units, exploring how to use them effectively and why they're so crucial in modern web development.

Why Does It Matter?

Before we delve into the specifics, let's understand why relative units are so vital in modern web development:

Responsiveness: Relative units are the backbone of responsive design, allowing elements to scale fluidly across different device sizes.

Accessibility: Using relative units for font sizes ensures that text remains readable when users adjust their browser's default font size.

Maintainability: With relative units, global layout changes often require updating just a few values, rather than dozens of hardcoded pixel values.

Consistency: Relative units help maintain proportional relationships between elements, even as the overall scale changes.

Let's explore the various types of relative units and how to use them effectively.

Ems and Rems

The two most commonly used relative units are em and rem. Both are based on font size, but they behave differently in important ways.

Understanding Ems

An em is a unit relative to the font size of the element on which it's used. Here's a detailed example:

.parent { font-size: 16px; } .child { font-size: 1.5em; /* 24px (16px * 1.5) */ padding: 1em; /* 24px */ border-radius: 0.25em; /* 6px */ }

In this example, all the child element's properties are relative to its own font size. This creates a scalable component where all properties maintain their proportions if the font size changes.

Typically, ems are used for setting font sizes, but as you saw in the example above, their potential extends far beyond that. By using ems, you can define many properties of an element and then easily scale the entire thing up or down with a single change to the font size. This flexibility makes ems incredibly useful for various properties, not just fonts.

A Potential Pitfall

Ems can be tricky when used for defining font sizes of nested elements, as they compound.
Let's look at an example:

<section> <ul> <li>First level item</li> <ul> <li>Second level item</li> <ul> <li>Third level item</li> <ul> <li>Fourth level item</li> </ul> </ul> </ul> </ul> </section>

Now, let's apply some CSS using em:

section { font-size: 16px; } ul { font-size: 0.9em; }

This will result in this:

Let's break down what happens at each level:

First level - Font size: 0.9em of 16px = 14.4px

Second level - Font size: 0.9em of 14.4px = 12.96px

Third level - Font size: 0.9em of 12.96px = 11.66px

Fourth level - Font size: 0.9em of 11.66px = 10.50px

As you can see, the font size gets progressively smaller with each nested level. This compounding effect can lead to text becoming unreadably small in deeply nested structures.
This is both a feature and a potential pitfall, depending on your design needs.

Rems: Root Ems

To avoid the compounding issue with em, we have rem units. These are always relative to the root element's font size (usually the <html> element).
Let’s suppose for the next examples, the current font-size of the root element is 16px:

.deeply-nested-element { font-size: 1.5rem; /* Always 24px, regardless of nesting */ padding: 1rem; /* Always 16px */ margin: 0.5rem; /* Always 8px */ }

Rems provide consistency across your document, making them ideal for font sizes and many other properties!

Practical Example

Let's create an accessible button component that scales nicely using a combination of em and rem:

.button { font-size: 1rem; /* 16px (or the prefered size set by the user) */ padding: .5em 1em; /* 8px 16px, using em to scale with the current element font-size */ border-radius: .25em; /* 4px */ transition: font-size .3s ease, padding .3s ease, border-radius .3s ease; } @media (prefers-reduced-motion: no-preference) { .button:hover { font-size: 1.1rem; /* Grows to 17.6px on hover */ } }

In this example, the button's padding and border-radius will scale proportionally if the user changes the font size of the html document :)

Viewport-Relative Units

While ems and rems are incredibly useful, sometimes we need units that are relative to the size of the viewport (screen). That's where viewport-relative units come in:

vw: 1% of the viewport width

vh: 1% of the viewport height

vmin: 1% of the smaller dimension (width or height)

vmax: 1% of the larger dimension (width or height)

These units are particularly useful for creating full-screen layouts or elements that need to scale dramatically with the viewport size.

.hero-section { height: 100vh; width: 100vw; /* ... */ } .hero-section-image { width: 50vmin; height: 50vmin; object-fit: cover; /* ... */ }

This creates a full-height hero section with content that scales based on the viewport size, and an image that's always square and takes up half of the smaller viewport dimension.

While these units are great, they were originally designed with desktop browsers in mind, where the viewport size remains constant unless the user manually resizes the window.
On mobile, it’s an other story.

The Dynamic Nature of Mobile Viewports

Many mobile browsers implement a user experience feature where the browser's UI elements, such as the address bar and navigation buttons, can appear or disappear based on user interaction. Here's how it typically works:

When a user first loads a page, these UI elements are visible, reducing the available viewport height.

As the user scrolls down the page, these elements often slide out of view, effectively increasing the viewport height.

When the user scrolls back up or taps near the top of the screen, these elements reappear, once again reducing the viewport height.

This dynamic behavior creates a fluctuating viewport size, which can lead to layout issues when using viewport-relative units like vh (for overlays, side-bars, etc…).

Enter Dynamic Viewport Units

To address these issues, new viewport units were introduced:

svh (Small Viewport Height): Represents the viewport height when mobile browser UI elements are visible.

lvh (Large Viewport Height): Represents the viewport height when mobile browser UI elements are hidden.

dvh (Dynamic Viewport Height): Dynamically adjusts between svh and lvh as the browser UI elements appear or disappear.

We have the same properties for width, and for smaller and larger dimension (width or height):
s(vh | vw | vmin | vmax)
l(vh | vw | vmin | vmax)
d(vh | vw | vmin | vmax)

Consider this example:

.side-menu { height: 100dvh; }

This element will dynamically adjust its height based on the current state of the mobile browser's UI elements, providing a more consistent user experience 👍.

Do not use dvh for scrollable sections: Imagine scrolling past multiple full-screen sections sing 100dvh, then scrolling up slightly. The content suddenly jumps waaaaay up.
This can cause major lag and it forces the browser to recalculate the entire page layout, which can hurt performance (layout thrashing).

Inline / Block Logical Properties

To ensure completeness, it’s important to mention an additional set of unit types: inline and block. These are known as "logical properties”. They function similarly to width and height but are designed to adapt to vertically-written languages like Mongolian, effectively transposing their behavior. These are vi , vb , svi , svb , lvi , lvb , dvi , dvb.

Browser Support and Fallbacks

Although support for dynamic viewport units is 93.21% (at the time of writing), you might want to provide fallbacks if you target older browsers:

.modal { height: 100vh; /* Fallback for browsers that don't support dvh */ height: 100dvh; /* Will be used by browsers that support it */ }

Combining Units

Using calc Function

The calc() function is a game-changer for responsive design. It allows you to perform basic math operations with different units, making it easier to create flexible layouts. Here's what you need to know:

Supports addition (+), subtraction (-), multiplication (*), and division (/)

Always add spaces around operators

Example:

p { font-size: calc(0.5em + 1svw); }

In this example, the font size will scale with the viewport width but will never get smaller than 0.5rem.

Note: Always include em or rem units when using viewport units for font sizes. This ensures user font preferences are respected.

Using clamp Function

The clamp() function takes this concept even further, allowing you to set a preferred value with a minimum and maximum. clamp() takes three arguments:

Minimum value

Preferred value (can be an expression)

Maximum value

Have a look at this example:

h1 { font-size: clamp(1em, 5vw, 6em); }

This sets a font size that scales with the viewport width but is never smaller than 1em or larger than 6em.

Using Other Useful Functions

min(): Chooses the smallest value from a list

Example: width: min(200px, 20svw);

max(): Chooses the largest value from a list

Example: min-height: max(200px, 20svw);

Wrapping up

Mastering relative units in CSS is a game-changer for creating flexible and accessible designs. By understanding the nuances of ems, rems, viewport units, and how to combine them effectively, you can create layouts that adapt seamlessly to different screen sizes and user preferences.

The introduction of dynamic viewport units like dvh represents an important step in adapting web design to the unique challenges of mobile browsers. By using these units, you can create responsive layouts that handle the dynamic nature of mobile viewports.

However, the goal is not to eliminate pixels entirely, but to use them judiciously. Absolute units like pixels still have their place, especially for borders or when you need pixel-perfect control. The key is knowing when to use relative units for flexibility and when to use absolute units for precision.

As you build your next project or your next UIs, challenge yourself to use relative units wherever possible. You'll likely find that your stylesheets become more concise, your layouts more flexible, and your overall design more robust across different devices and user settings.

Until next time, happy coding!

Mastering CSS: Understanding the Cascade

Mustapha Aouas — Mon, 15 Jul 2024 13:05:38 +0000

Cascading Style Sheets (CSS) is a fundamental technology of the web, allowing developers to control the visual presentation of HTML documents. While CSS syntax may seem simple at first glance, the way styles are applied and inherited can be surprisingly complex. Understanding these intricacies is crucial for writing efficient, maintainable, and predictable CSS.
In this comprehensive guide, we'll explore the cascade and inheritance concepts of CSS.

The CSS Cascade

The cascade is the algorithm that determines which CSS rules are applied to elements when multiple conflicting rules exist. It's essential to understand how the cascade works to write CSS that behaves as expected. The cascade considers several factors in the following order:

1 Stylesheet origin

2 Inline styles

3 Selector specificity

4 Source order

To be completely exhaustive, we can add:

2.5 Styles that are defined in layers read more

3.5 Styles that are scoped to a portion of the DOM read more

Let's break down the factors that influence the cascade, in order of precedence:

1. Stylesheet Origin

CSS can come from three different sources:

1 User-agent styles: These are the browser's default styles. Each browser has its own set of default styles, which is why unstyled HTML can look slightly different across browsers.

2 User styles: These are custom styles set by the user. While rare, some users may have custom stylesheets to override default styles for accessibility or personal preference.

3 Author styles: These are the styles you write as a web developer.

Generally, author styles take precedence over user styles, which in turn override user-agent styles. This allows developers to customise the appearance of elements while still respecting user preferences when necessary.

2. Inline Styles

Styles applied directly to an element using the style attribute have very high priority:

<p style="color: red;">This text will be red.</p>

Inline styles will override any styles defined in external stylesheets or <style> tags, regardless of their specificity (That’s no longer true if you use the !important keyword. I’ll get on that in a second).

Using inline styles is generally discouraged as it mixes presentation with content and makes styles harder to maintain.

3. Selector Specificity

Specificity is a crucial concept in CSS that determines which styles are applied to an element when multiple conflicting rules exist. Each CSS selector has a specificity number, which can be calculated to predict which styles will take precedence.

Specificity is typically represented as a four-part number (a,b,c,d), where:

a: Number of inline styles (generally omitted)

b: Number of ID selectors

c: Number of class selectors, attribute selectors, and pseudo-classes

d: Number of element selectors and pseudo-elements

The resulting number is not base 10. Instead, think of it as separate columns that are compared from left to right. See the examples:

p = (0,0,0,1)

.class = (0,0,1,0)

#id = (0,1,0,0)

Inline style = (1,0,0,0)

Consider these two conflicting rules:

#header .nav li { color: blue; } /* (0,1,1,1) */ nav > li a { color: red; } /* (0,0,0,3) */

The first rule (0,1,1,1) has higher specificity, so the text would be blue.

Pseudo-class selectors (such as :hover) and attribute selectors (such as [type="text"]) each have the same specificity as class selectors.

The universal selector (*) and combinators (>, +, ~) do not affect specificity.

Also, the :not() pseudo-class also doesn't add to the specificity value; only the selectors inside it are counted.

Several online tools can help calculate specificity (https://specificity.keegan.st/).

4. Source Order

If all else is equal, the rule that appears later in the stylesheet takes precedence:

.button { background-color: blue; } .button { background-color: green; } /* This one wins */

In this example, buttons will have a green background.

A Powerful Override

While understanding the cascade is crucial for writing maintainable CSS, there's one more piece of the puzzle that can override all the rules we've discussed so far: the !important keyword.

How !important Works

The !important keyword can override all other considerations in the cascade, except for other !important declarations of higher origin precedence.

/* styles.css */ .button { background-color: blue !important; }

 <head> <link rel="stylesheet" href="styles.css"> </head> <body> <button style="background-color: red"> My button </button>  </body>

In this example, even though inline styles usually have the highest priority, the button will still have a blue background because of the !important declaration.

The Cascade and !important

The !important keyword actually introduces additional layers to the cascade. The full order of precedence, from highest to lowest, is:

User agent important declarations

User important declarations

Author important declarations

Important Inline styles

Important not inlined styles

Author normal declarations

Inline styles

Not inlined styles

User normal declarations

User agent normal declarations

When to Use it

While !important can be tempting as a quick fix, it's generally considered a last resort. Overuse can lead to specificity wars and make your CSS harder to maintain. Legitimate use cases include:

Overriding third-party styles you can't modify

Creating utility classes that should always apply

Ensuring critical accessibility styles are applied

A Potential Solution To Simplify Specificity Management

If you find yourself using !important often, consider refactoring your CSS to use more specific selectors or a more modern approach like utilising :is() and :where() to write more flexible and maintainable styles. (I talk about these two in more details here)

Also, the @layer at-rule, which is fairly supported, allows you to create "layers" of styles with explicitly defined order of precedence:

@layer base, components, utilities; @layer utilities { .btn { padding: 10px 20px; } } @layer components { .btn { padding: 1rem 2rem; } }

This offers a more structured approach to managing style precedence without resorting to !important or engaging in a specificity arms race. However, I haven’t used this in a production project myself, if you do, I’d love to hear about your experience :)

Inheritance

Passing Styles Down the DOM Tree

Inheritance is another fundamental concept in CSS. Some CSS properties are inherited by default, meaning child elements will take on the computed values of their parents. This is particularly useful for text-related properties like color, font, font-family, font- size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform, white-space, and word-spacing.

body { font-family: Arial, sans-serif; color: #333; line-height: 1.5; }

In this example, all text within the body will inherit these styles unless explicitly overridden. This allows for efficient styling of document-wide typography without having to repeat rules for every element.

A few others inherit as well, such as the list properties: list-style, list-style-type, list-style-position, list-style-image, and some other table related properties

Not all properties are inherited by default. For example, border and padding are not inherited, which makes sense – you wouldn't want every child element to automatically have the same border as its parent.

Inheritance keywords

CSS provides several keywords to give you fine-grained control over inheritance and to reset styles:

The inherit keyword forces a property to inherit its value from its parent element (This can be useful for properties that don't inherit by default, like border in this example).

The initial keyword resets a property to its initial value as defined by the CSS specification (This can be helpful when you want to completely reset an element's styling).

The unset keyword acts like inherit for inherited properties and initial for non-inherited properties (This provides a flexible way to reset properties without needing to know whether they're inherited or not).

The revert keyword resets the property to the value it would have had if no author styles were applied (This is useful when you want to fall back to browser defaults rather than CSS-defined initial values).

The initial and unset keywords override all styles, affecting both author and user-agent stylesheets. This means they reset the element's styling to its default state, ignoring any previous styling rules applied by the author or the browser.

However, there are scenarios where you only want to reset the styles you’ve defined in your author stylesheet, without disturbing the default styles provided by the browser (user-agent stylesheet). In such cases, the revert keyword is particularly useful. It specifically reverts the styles of an element back to the browser’s default styles, effectively undoing any custom author-defined styles while preserving the inherent browser styling.

Note that when using shorthand properties omitted values are implicitly set to their initial values. This can potentially override other styles you've set elsewhere.

Wrapping up

By understanding the intricacies of the cascade, inheritance, and modern CSS features, you'll be better equipped to write efficient, maintainable, and powerful stylesheets. Remember, CSS is not just about making things look good – it's about creating robust, flexible designs that work across a wide range of devices and browsers.

:where :is CSS?

Mustapha Aouas — Mon, 10 Oct 2022 08:45:05 +0000

In this post we will talk about the not so new functional pseudo-class selectors :is() and :where().

We will see how they work in details, how they differ and when to use them to get the most out of these CSS features.

1. CSS :is

Let's start by the :is() pseudo-class selector. Then we will talk about :where() and the difference between them.

What is :is()?

Originally named :matches() and :any(), :is() is a functional pseudo-class selector. Meaning it is a keyword recognized by CSS that consists of a colon (:) followed by the pseudo-class name and a pair of parenthesis to define the arguments.

:is() takes as an argument a selector list separated by a comma and selects any element that can be selected by one of the selectors in that list. Let's see some use-cases.

Targeting parents

Suppose that we need to set the font-size of every paragraph element (<p>) located in a <section> or an <article>, we can use :is() to write that in a more compact form:

Of course, in this example, we only removed one line, but we'll see later that we can remove much more using this to write more compact code.

Targeting children

Now let's say we need to target every <b> and <strong> inside an <article> to set their font-weight property, here's how we can use :is() to do it:

ℹ️ Note

Notice the space between article and :is. It's important to keep it. We will talk about it further in the post.

Combining multiple :is()

If we wanted to target every every <b> and <strong> located inside a p or span that is located inside an <article> or a section it would look like this:

In the example above we can see that it makes the code much more concise. It also makes it more readable and easier to maintain in my opinion.

Applying is() to the current element

Like we saw before, the space between before :is() is important. If we remove it, to have something like this: article:is(b) we would be asking for an article element that is also a b element witch is impossible.

We could use :is() to check if an element is for exemple the first-child or last-child in witch case we don't put the space before the :is():

ℹ️ Note

:is() does not select pseudo-elements. Meaning some-element:is(::before, ::after) will not work.

is() is forgiving

Typically, if any of the selectors in a comma-separated list are invalid, all of them will be invalid and the entire expression will fail to match anything. This is not the case while using is():

Specificity

:is() takes the specificity of its most specific selector. This means that :is(p, .some-class, #some-id) will have a specificity score of an ID (100 points) and :is(p, .some-class)will have specificity score of a class (10 points).

To see why this is important to keep in mind, let's consider the example below:

The rectangle above is orange because the specificity score of .wrapper .rect is 20 while the specificity score of :is(.rect, #some-id) is equal to the specificity of its most specific selector which is #some-id (100 points).

2. Every :where

Now that we are familiar with the is() pseudo-class selector, let's talk about where().

What is :where()?

where() is also a functional pseudo-class selector and works like is(). It takes as an argument a selector list separated by a comma and selects any element that can be selected by one of the selectors in that list. We can use it to target elements like we did with is() and it is also forgiving.

So why does it exists if it works the same as is()?
Well, because it doesn't work exactly the same.

The difference

The only difference is that the specificity of :where() is always zero. That's it.

So, if we take our previous examples, :where(p, .some-class, #some-id) will have a specificity score of zero. The same for :where(p, .some-class).

When to use it?

Every time you want to keep the specificity low, which I think is a good thing to do most of the time.
So, for example, using :where() you can easily target an element by its ID without messing the specificity.

Browsers compatibility

Both these functional pseudo-class selectors are supported by all evergreen browsers:

source 🔗

Wrap up

That's it for this post. We saw how to use :is & :where and the difference between them. But before you go and rewrite your entire CSS code base, remember that readability is what your team is used to, so it might be a good idea to discuss this before :)

Cheers!

Mesmerizing CSS art: Silence

Mustapha Aouas — Thu, 29 Sep 2022 20:23:04 +0000

This is just a short post about a piece of CSS art I made that mesmerized me and I hope it does the same for you :)

Fun fact: There are 5000 snow flakes in this pen ❄️

If you like content like this, make sure to follow me @theAngularGuy on Twitter.

Cheers everyone!

What to read next?

Sibling selector & 4 other webdev tips you may want to know 🚀

Mustapha Aouas ・ Sep 16 '22

#webdev #javascript #html #css

How to create an interactive donut chart using SVG

Mustapha Aouas — Fri, 10 Dec 2021 20:04:47 +0000

In this post, we'll make an SVG donut chart with clickable slices/parts. I'll start by explaining the issue with the most common way to implement an SVG donut chart (using stroke-dasharray and stroke-dashoffset). Then we'll talk about a new way to do it, I'll go over the math and SVG usage in great detail, and we'll finally implement the solution with React & Angular.

The problem with the stroke-dasharray implementation

Salomone Baquis talks about this in this post. This method uses the stroke-dasharray and stroke-dashoffset properties to draw a slice of border around SVG circles. Read the post to see how he do it.

The problem is that we can't interact we the slices. For example, we can't change the color of the slice on hover or do something when the slice is clicked.
Because, to draw the slices we have to draw an entire circle and color parts of its border. So the circles go on top of each other and only the last circle is interactive. Think of this as positioning multiple HTML elements in the same spot. The element with the highest z-index hides all the other elements below it. Have a look at the illustration below, and pay attention to the ID of the circle that is highlighted (42).

Path to the rescue

What we want is something like this:

To do this we will draw each donut slice using a <path>. The <path> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.
The shape of a <path> element is defined by one parameter: d. The d attribute contains a series of commands and parameters used by those commands (Docs here).

To draw the slices we need only three commands:

M [x] [y]: Move to the x,y position

L [x] [y]: Draw line from the previous position to the x,y position

A [x radius] [y radius] [x-axis-rotation] [large-arc-flag] [sweep-flag] [x] [y]: Draw an arc from the previous position to the x,y position

The move and line commands are pretty straightforward. The arc command is more complex, but don't worry we will see how to use each of its params.

Follow me on Twitter at twitter.com/theAngularGuy as I tweet (almost) every day about the things I learned in my 6+ years journey in web development ✅

Let's say we have an SVG with the following viewBox: viewBox="0 0 100 100". The most top-left point is 0,0 and the most bottom-right point is 100,100.

Let's build a quarter of a circle (multiple of a quarter are the easiest because we know their x, y positions):

<svg viewBox="0 0 100 100"> <path fill="tomato" d="M 100 50 A 50 50 0 0 0 50 0 L 50 50" /> </svg>

So, we moved to the point 100, 50, then we drew an arc (with a radius of 50) to the 50, 0 point. And finally, we drew a line back to the center (50, 50).

ℹ️ The SVG closes automatically, so we don't have to draw a line back to the starting position (100, 50).

So far we have this (I outlined the SVG with a black border):

Now let's play with the different flags to understand them.
Let's start with the sweep-flag. Say we set it to true (1), we have this:

The arc went from convex to concave. This flag determines if the arc should begin moving at positive angles or negative ones, which essentially picks which of the two circles will be traveled around. We will talk more about this in a second.

Let's move on to the large-arc-flag, if we set it to 1, we have this:

This flag determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines whether we take the short route to the point or the long one.

Now let's enable both of these flags. This is what we get:

We get this because we took the longest route to the point (50, 0), and we move there while taking a negative angle direction.

With this, we are set to move on to the drawing of the chart. But before we do, we have to talk about some basic trigonometry.

Trigonometry

Pie chart slice

Let's say we want the position of this point (at 45°):

To find its position we have to do some trigonometry. For now, left put aside the radius and the positions of the SVG viewBox. Let's say we have a circle of a radius of one:

To get the coordinate of the point, we have to do cos(angle) for the horizontal position and sin(angle) for the verticle position. The angle must be in radiants so if we want the position of our point that is placed at 45 degrees we have to first transform it to radiant. To do this we multiply it by PI and we divide by 180.
So the point position is the following:

const position = [ Math.cos(45 * Math.PI / 180), Math.sin(45 * Math.PI / 180) ] // [0.707106781186547, 0.707106781186547]

Now if we want to place this point in our SVG, we have to transform the horizontal and vertical positions to make sure our point is positioned correctly in our circle.
For this, we should multiply the x position by the radius then add the horizontal size of the SVG. And, for the vertical position, we have to multiply it by minus the radius and then we add the vertical size of the SVG. If we implement a function to do this we would have the following:

function getCoordFromDegrees(angle, radius, svgSize) { const x = Math.cos(angle * Math.PI / 180); const y = Math.sin(angle * Math.PI / 180); const coordX = x * radius + svgSize / 2; const coordY = y * -radius + svgSize / 2; return [coordX, coordY]; } getCoordFromDegree(45, 50, 100); // [85.35499, 14.64500]

If we use this in our SVG we would have this:

<svg viewBox="0 0 100 100"> <path fill="tomato" d="M 100 50 A 50 50 0 0 0 85.35499, 14.64500 L 50 50" /> </svg>

Donut chart slice

To go from the pie slice to the donut slice we have to calculate two more points. Instead of going back to the center, we stop before. Let's say we want a donut border to be 20 units large (remember the view box is 100 by 100), so we need to draw a line to getCoordFromDegrees(45, 30, 100) (30 because radius - 20).
Finally, we go back to starting position minus 20 horizontal units. Remember to set the sweep-flag to 1 because of the negative direction.
Have a look at the illustration below:

<svg viewBox="0 0 100 100"> <path fill="tomato" d="M 100 50 A 50 50 0 0 0 85.35499 14.64500 L 71.213 28.78700 A 30 30 0 0 1 80 50" /> </svg>

A slice bigger than 180 degrees

If a slice is bigger than 180 degrees remember that we have to tell the SVG to take the longest route (by default it will take the shortest). For that, we set the large-arc-flag to 1.

Stacking up multiple slices/parts

We are almost there, we now need to place the slices where they should be. Let's say the first slice is the green one with 270 degrees, the next one is the purple with 45 degrees, and then the blue one also with 45 degrees. So we need to rotate the second one by 270 degrees and the third one by 315 degrees (270 + 45).

ℹ️ We also need to set the transform-origin of the path to center (transform-origin: center;) since we rotate it relative to the center.
⚠️ Be aware that CSS rotation moves in a clockwise direction whereas degrees move in a counter-clockwise direction.

Implementation

So to do this, we first need to set up the interface that we will expose to the other components and an internal interface that the donut chart component needs to work correctly:

export interface DonutSlice { id: number; percent: number; color: string; label?: string; onClickCb?: () => void; } interface DonutSliceWithCommands extends DonutSlice { offset: number; // This is the offset that we will use to rotate the slices commands: string; // This will be what goes inside the d attribute of the path tag }

React

There are a million ways to do it, this is how I implemented it.
First I created a helper class to do the calculus, It will transform each DonutSlice to a DonutSliceWithCommands (You may want to put it in a separated file in a real world project). Then I created a function component to loop through the slices:

class CalculusHelper { getSlicesWithCommandsAndOffsets( donutSlices: DonutSlice[], radius: number, svgSize: number, borderSize: number ): DonutSliceWithCommands[] { let previousPercent = 0; return donutSlices.map((slice) => { const sliceWithCommands: DonutSliceWithCommands = { ...slice, commands: this.getSliceCommands(slice, radius, svgSize, borderSize), offset: previousPercent * 3.6 * -1, }; previousPercent += slice.percent; return sliceWithCommands; }); } getSliceCommands( donutSlice: DonutSlice, radius: number, svgSize: number, borderSize: number ): string { const degrees = this.percentToDegrees(donutSlice.percent); const longPathFlag = degrees > 180 ? 1 : 0; const innerRadius = radius - borderSize; const commands: string[] = []; commands.push(`M ${svgSize / 2 + radius} ${svgSize / 2}`); commands.push( `A ${radius} ${radius} 0 ${longPathFlag} 0 ${this.getCoordFromDegrees( degrees, radius, svgSize )}` ); commands.push( `L ${this.getCoordFromDegrees(degrees, innerRadius, svgSize)}` ); commands.push( `A ${innerRadius} ${innerRadius} 0 ${longPathFlag} 1 ${ svgSize / 2 + innerRadius } ${svgSize / 2}` ); return commands.join(' '); } getCoordFromDegrees(angle: number, radius: number, svgSize: number): string { const x = Math.cos((angle * Math.PI) / 180); const y = Math.sin((angle * Math.PI) / 180); const coordX = x * radius + svgSize / 2; const coordY = y * -radius + svgSize / 2; return [coordX, coordY].join(' '); } percentToDegrees(percent: number): number { return percent * 3.6; } } export default ({ data, radius, viewBox, borderSize, clickCb, }: { data: DonutSlice[]; radius: number; viewBox: number; borderSize: number; clickCb: (slice: DonutSlice) => void }) => { const helper = new CalculusHelper(); return ( data && ( <svg viewBox={'0 0 ' + viewBox + ' ' + viewBox}> {helper .getSlicesWithCommandsAndOffsets(data, radius, viewBox, borderSize) .map((slice) => ( <path onClick={() => clickCb(slice)} fill={slice.color} d={slice.commands} transform={'rotate(' + slice.offset + ')'} > <title>{slice.label}</title> </path> ))} </svg> ) ); };

You can find the stackBlitz here.

Angular

We will first implement a pure pipe that takes an array of DonutSlice and return an array of DonutSliceWithCommands:

@Pipe({ name: 'slicesWithCommandsAndOffset', pure: true, }) export class DonutChartPipe implements PipeTransform { transform(donutSlices: DonutSlice[], radius: number, svgSize: number, borderSize: number): DonutSliceWithCommands[] { let previousPercent = 0; return donutSlices.map(slice => { const sliceWithCommands: DonutSliceWithCommands = { ...slice, commands: this.getSliceCommands(slice, radius, svgSize, borderSize), offset: previousPercent * 3.6 * -1, // we multiply by -1 because CSS rotation move in clockwise direction whereas degrees move in counter-clockwise direction }; previousPercent += slice.percent; return sliceWithCommands; }); } getSliceCommands(donutSlice: DonutSlice, radius: number, svgSize: number, borderSize: number): string { const degrees = this.percentToDegrees(donutSlice.percent); const longPathFlag = degrees > 180 ? 1 : 0; const innerRadius = radius - borderSize; const commands: string[] = []; commands.push(`M ${ svgSize / 2 + radius } ${ svgSize / 2 }`); commands.push(`A ${ radius } ${ radius } 0 ${ longPathFlag } 0 ${ this.getCoordFromDegrees(degrees, radius, svgSize) }`); commands.push(`L ${ this.getCoordFromDegrees(degrees, innerRadius, svgSize) }`); commands.push(`A ${ innerRadius } ${ innerRadius } 0 ${ longPathFlag } 1 ${ svgSize / 2 + innerRadius } ${ svgSize / 2 }`); return commands.join(' '); } getCoordFromDegrees(angle: number, radius: number, svgSize: number): string { const x = Math.cos(angle * Math.PI / 180); const y = Math.sin(angle * Math.PI / 180); const coordX = x * radius + svgSize / 2; const coordY = y * -radius + svgSize / 2; return [coordX, coordY].join(' '); } percentToDegrees(percent: number): number { return percent * 3.6; } }

Finally, we implement the component that loops through the array of DonutSliceWithCommands:

@Component({ selector: 'app-donut-chart', styleUrls: ['./donut-chart.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, template: ` <svg [attr.viewBox]="'0 0 ' + viewBox + ' ' + viewBox" *ngIf="data"> <path *ngFor="let slice of data | slicesWithCommandsAndOffset:radius:viewBox:borderSize; trackBy: trackByFn; let index = index" [attr.fill]="slice.color" [attr.d]="slice.commands" [attr.transform]="'rotate(' + slice.offset + ')'" (click)="slice.onClickCb ? slice.onClickCb() : null" > <title>{{slice.label}}</title> </path> </svg> `, }) export class DonutChartComponent implements OnInit { @Input() radius = 50; @Input() viewBox = 100; @Input() borderSize = 20; @Input() data: DonutSlice[] = []; ngOnInit() { const sum = this.data?.reduce((accu, slice) => accu + slice.percent, 0); if (sum !== 100) { throw new Error(`The sum of all slices of the donut chart must equal to 100%. Found: ${ sum }.`); } } trackByFn(index: number, slice: DonutSlice) { return slice.id; } }

You can find the stackBlitz here.

That's it for this post. I hope you liked it. If you did, please share it with your friends & colleagues and follow me on Twitter at @theAngularGuy where I tweet about web development and computer science.

Cheers!

What to read next?

Angular unit testing 101 (with examples)

Mustapha Aouas ・ Aug 29 '19

#angular #testing #javascript #webdev

I made a working Gameboy CSS art: try it out 🕹

Mustapha Aouas — Thu, 25 Nov 2021 15:19:55 +0000

Here is the story. Three years ago, I went to an interview (for an Angular position) and the interviewer asked me about a maze-solving algorithm. So I completed the algorithm and just for fun I went ahead and did an Angular project where you had to solve a maze (generating a maze is also a good exercise).

So, I had a fully working maze game on my laptop, and I also had a CSS art of a Gameboy 👉 I figured it would be fun to merge these two together.

Try it out here (if you're on laptop you can use your keyboard)

Contribute here (or if you'd like to give a ⭐️)

Demo here 👇

// Detect dark theme var iframe = document.getElementById('tweet-1463889796158398466-606'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1463889796158398466&theme=dark" }

Follow me on Twitter at twitter.com/theAngularGuy as I tweet (almost) every day about the things I learned in my 6+ years journey in web development ✅

In this post, we will talk about a couple of things that went into this project. First, we will talk about the maze generation algorithm, and the maze solving algorithm. Then we will talk about some CSS art key concepts.

Maze generation algorithm

There is a lot of algorithms for this. The one I went with is the recursive generation, for two reasons:

Because I love solving problems with recursion (Scheme changed me forever)

Because the generated maze is prettier to look at (with long alleys)

There are four steps in this algorithm:

Delimit the maze area

Divide the area vertically in the middle (or at a random point) and make an opening in the division

Take the two halves and divide them horizontally in the middle, and make an opening in each division

Take each new portion and go to step. 2

This will go on and on until there's not enough room to make a division.
Here is a gif with the full process of generation 👇

You can visualize the maze as a binary tree, each node represents a part / division of the maze.

Maze solving algorithm

For solving the maze I used the depth-first search algorithm. It's not the most performant algorithm for solving a maze but it gets the job done and it's fairly easy to implement. Also, I use it to go through the maze and find the longest path possible, then I use that as the exit point (goal location some might call it) of the maze. Here is a gif illustrating this algorithm:

I won't go deep into the details here, but tell me in the comments if you would be interested in a maze-solving article.

CSS art: key concepts

We are gonna talk about some CSS properties I wanted to highlight. We can divide these properties into two categories. Shape and Lightening (impression of light and shadows).

Shape

border-radius

The first one is the good old border-radius. You might use it to make circles or ellipses. But this property can achieve more. You can specify the horizontal and vertical radius of each corner. Have a look at this snippet below:

.plate { border-radius: 20% 20% 49% 49% / 2% 2% 6.5% 6.5%; }

I used this to shape the gameboy plate and the black screen.

aspect-ratio

This property is very useful, it sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes.
For example I can set the width and an aspect ratio, and the height will be calculated automatically. Have a look:

.plate { width: 500px; aspect-ratio: 1 / 2; /* The height will be 1000px */ }

I used this on almost every element. Yeah I know I love this property!

transform: skew

You might use transform for rotations, scaling (resizing), or translation (moving), but you can also use it for distortion (skewing).
The skew CSS property defines a transformation that skews an element on the 2D plane.

I use this for the sound holes grid. Have a look at the image below with skewing (right) and without (left):

There's also a rotation that is applied on the grid in both pictures.
Also, for the sound grid, I used a grid layout. If you want to learn more about CSS grid I wrote an article where I explain every concept of it 👇

CSS Grid: illustrated introduction

Mustapha Aouas ・ Sep 12 '19

#css #webdev #tutorial #beginners

Light and shadow

box-shadow

To give an impression of volume, lighting is essential. Look at the two examples below, left is without shadow and right is using shadows (text-shadow & box-shadow):

To achieve this effect of lighting we have to understand where to put light and where to put some shadow, and that depends on if something is in relief or depression. Have a look at the image below:

If we apply this to the buttons, we would have something like this (assuming the light is at the top left of the screen):

That translates to this code:

.button { box-shadow: inset 3px 5px 5px -1px rgb(255 255 255 / 50%), inset -3px -3px 5px -1px rgb(0 0 0 / 99%), 1px 1px 1px 2px rgb(0 0 0 / 80%), 2.5px 5px 5px 1px rgb(0 0 0 / 90%) }

The inset keyword sets the shadow to go inside the frame.

text-shadow

Fo the texts we use the same principle either the text is in relief or depression. Here is an example of a text that is in relief:

.text { text-shadow: -1px -1px 1.2px rgb(255 255 255 / 50%), 1px 1px 1px rgb(1 1 1 / 7%); }

That's it for this post. I hope you liked it. If you did, please share it with your friends & colleagues and follow me on Twitter at @theAngularGuy where I tweet about web development and computer science.

Cheers!

What to read next?

7 amazing CSS properties you may not know (yet)

Mustapha Aouas ・ Apr 20 '20

#css #webdev #design #beginners

Mesmerizing animation using only CSS rotations 🧘‍♀️

Mustapha Aouas — Thu, 18 Nov 2021 17:30:35 +0000

I created an oddly satisfying CSS animation on codepen, using only rotations. It turns out it went a little bit viral on Reddit so I decided to share how I did it here :)

Step 1

Let's skip the intro that no one ever read and jump right into it. The first step is to create a yin yang using CSS.
Because a picture is worth a thousand words, take a look at the illustration below:

We have the main circle which is a div and the two small circles are the ::before and ::after pseudo-elements of the div. The three elements have a border-radius of 50% to be circles.

The main div has a background-image set to this linear-gradient: (to left, #fff, #fff 50%, #000 50%, #000). With this, the div should be half white half black.

For the two other circles, they have a big border-width, and their border-color is the opposite of their background color (eg. white circle with black border). That way we don't need too many html elements and it's easier to place them in the center (one on top of the other).

With this, it could be a good exercise to try to do the rest of the animation on your own. You can come back here to compare the implementations ;)

Step 2

Next, we need a container div (also half black half white) and another yin yang (the two should be placed one on top of the other). Have a look:

Step 3

At this point we are almost done, all we have to do is to animate the yin yangs in the opposite direction of the container div. For that we can use the animation-direction CSS property and set it to reverse.

The CSS animation looks like this:

@keyframes roll { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }

Here is the final code:

That's it for this post. I hope you liked it. If you did, please share it with your friends & colleagues and follow me on Twitter at @theAngularGuy where I tweet about web development and computer science.

Have a nice day!

What to read next?

I made a working Gameboy CSS art: try it out 🕹

Mustapha Aouas ・ Nov 25 '21

#css #javascript #algorithms #tutorial

Responsive images for better performance: Start using srcset and picture

Mustapha Aouas — Mon, 08 Nov 2021 18:15:54 +0000

Hi there, in today's article, we will be talking about responsive images, screen sizes, pixel density, and how the srcset and sizes attributes can help us achieve better performance and a great user experience. Read until the end there's a bonus for you.

Implementing responsive images isn't complicated. However, it requires us to write a little bit more code, it also forces us to couple our CSS and HTML, as the image sizes must be declared directly on the <img> browsers tag.
Testing responsive images also require new methods, as we now need to ensure that the correct resolution is being loaded at the right time.

The srcset and sizes attributes

The responsive image spec boils down to two tags and two attributes. The first tag we’re going to look at is our good old <img> tag. Two new attributes have been added to the <img> tag: srcset and sizes. These two attributes tell the browser what resolutions are available for a given image, and what size the image is supposed to be displayed at, at any given breakpoint. Based on this information, the browser is able to choose and download the most optimal image file for any given device.

Lets start by having a look at the srcset attribute.

The srcset attribute

<img srcset="/assets/images/image-tiny.jpeg 150w, /assets/images/image-small.jpeg 300w, /assets/images/image-medium.jpeg 600w, /assets/images/image-large.jpeg 1000w, /assets/images/image-extra-large.jpeg 1500w" src="/assets/images/image-medium.jpeg" alt="Banner image">

The srcset attribute contains a comma-separated list of URLs with a w-descriptor, informing the browser how wide each source image is.
One awesome thing about this syntax is that we don’t need to tell the browser what images to use for the different pixel density displays, and what images to use for the different screen sizes. The browser is able to pick the best image size on its own.
Note that the scr attribute is here as a fallback for browsers that does not support srcset (IE 😒).

In the snippet above, with the srcset attribute we provide five image sources with different sizes: 150px, 300px, 600px, 1000px, and 1500px. And the browser will choose the best image depending on screen size and pixel density. Have a look at the video below:

And if we open the network tab we see that the images were fetched when needed:

That makes for better performance because the images will load quickly on smaller devices, and it therefor makes a better user experience.

In the example above the image width was 100vw, what if we had a layout where the width of the image was 50vw (minus some padding) on desktop and 100vw (minus some padding) on mobile?
That's what sizes is for.

The sizes attribute

While the srcset attribute describes the actual width of the source files, the sizes attribute tells the browser how wide the image is supposed to be displayed on the screen. This is done with the use of inline media queries. They work exactly the same as in CSS (without the curly braces), except you only use it to describe the displayed width of the image. Let's have a look:

<img srcset="/assets/images/image-tiny.jpeg 150w, /assets/images/image-small.jpeg 300w, /assets/images/image-medium.jpeg 600w, /assets/images/image-large.jpeg 1000w, /assets/images/image-extra-large.jpeg 1500w" sizes="(max-width: 700px) calc(100vw - 10px), calc(50vw - 10px)" src="/assets/images/image-medium.jpeg" alt="A photo of Lyon city">

In the first line (of the sizes attribute) we specified the width of the image when the screen width is less than 700px. Then, in the second line we specified the default width (so in this case, devices with a screen size that is bigger that 700px).

With this, the browser is aware of the width of the image in our layout and is able to decide what is the best file to load. Have a look at the result:

Note that the order of the image-URLs in the srcset attribute doesn’t matter. The order in the sizes attribute, however, matters a lot! The browser will use the first media query that matches the current state of the browser.

This is amazing, but there's more. Now let's say we want to use other images if the user prefers dark themes.
For that, we can use the <picture> tag. Let's dig in.

Picture

You can think of the <picture> element as a group of image sources. Each individual <source> work much like a single <img> tag, but with an added media attribute. This allows us to specify different groups of sources for different media queries, while still benefitting from the browser's ability to choose the most optimal resolution of a given image.

Let's use that to specify two sources, one for a light theme and one for a dark theme:

<picture>  <source media="(prefers-color-scheme: dark)" srcset="/assets/images/tiny-dark.png 150w, /assets/images/small-dark.png 300w, /assets/images/medium-dark.png 600w, /assets/images/large-dark.png 1000w, /assets/images/xl-dark.png 1500w" sizes="(max-width: 700px) 100vw, 50vw">  <source srcset="/assets/images/tiny.png 150w, /assets/images/small.png 300w, /assets/images/medium.png 600w, /assets/images/large.png 1000w, /assets/images/xl.png 1500w" sizes="(max-width: 700px) 100vw, 50vw"> <img src="/assets/images/medium.png" alt="Banner image"> </picture>

That looks like this in the browser:

To emulate dark mode: command + shift + p then paste "prefers-color-scheme" and select light or dark.

Note that the picture element itself does not display anything, it provides a context for its contained <img> element that enables it to choose from multiple URLs. That means that you should always add an <img> tag inside the the <picture> tag to specify the alt attribute and loading="lazy" if you want to lazy load the image.

Bonus

Better image encodings, such as webP and AVIF, can be used for even better performance. See the thread below for more details (fallback, browser support and more):

// Detect dark theme var iframe = document.getElementById('tweet-1457618942533386246-800'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1457618942533386246&theme=dark" }

Also, you could use this npm pkg to automate the generation of multiple image sizes.

Wrap up

We saw how to use srcset and sizes with the <img> tag and the <picture> tag. We saw when to use each and why. Now that we saw how useful these features are there’s no reason for forcing people to load unnecessarily large images over a 3g or 4g connection on their phones anymore :)

That's it for this post. I hope you liked it. If you did, please share it with your friends & colleagues and follow me on Twitter at @theAngularGuy where I tweet about web development and computer science.

Have a nice day!

What to read next?

A deep dive into ES6 Classes

Mustapha Aouas ・ Oct 26 '21

#javascript #webdev #programming

A deep dive into ES6 Classes

Mustapha Aouas — Tue, 26 Oct 2021 17:12:27 +0000

Classes were introduced in ECMAScript 6, and we can use them to structure our code in a traditional OOP fashion by defining a template for creating objects.
In this post we'll learn everything about ES6 classes, then we will compare them to constructor functions and prototypal inheritance.

A quick word before we start. This article is intended to appeal to a wide range of readers. So, if you're an advanced JS user, you can use the table of contents below to select which sections to read. If, on the other hand, you're just getting started with JS and you're having trouble understanding something, feel free to ask me in the comments section.

Table of Contents

Anatomy of a class

The class keyword

Constructor

Properties

Methods

Getters and Setters

Static fields and methods

Creating an object with a class

The new keyword

Hoisting

Inheritance

The extends keyword

Super

Metadata

Comparison with Constructor functions

Properties and methods

Getters and Setters

Prototypal inheritance

Wrap up

We will see how to define classes and how to create objects using them, then we will talk about inheritance and more - But first, let's start right away by taking a look at the anatomy of a class.

Anatomy of a class

The class keyword

To declare a class we use the class keyword followed by the name of the class.

Class declaration

class Point { constructor() {} }

In the snippet above we declared a "Point" class. This is called a class declaration.

Note that I'm using the PascalCase notation for the name of the class. This is not mandatory but a common convention.

In fact classes are special functions, and like with functions, you can use either class declarations or class expressions.

Class expression

This is a class expression:

let Point = class { constructor() {} }

Constructor

The constructor method is a special method for creating and initialising an object created with a class.

There can only be one constructor in each class. A SyntaxError will be thrown if the class contains more than one occurrence of a constructor.

It is not mandatory to have a constructor in the class definition. The code bellow is valid.

class Point { }

Properties

Instance properties

Instance properties must be defined inside of class methods. In the snippet below x and y are instance properties:

class Point { constructor(a, b) { this.x = a; this.y = b; } }

Fields

The code can be more self documenting by declaring fields up-front. Let's refactor the code above using fields, and while we're at it, let's give them a default value:

class Point { x = 0; y = 0; constructor(a, b) { this.x = a; this.y = b; } }

Note that fields are always present whereas instance properties must be defined inside of class methods.
Note also that fields can be declared with or without a default value.

Private fields

To declare a private field all you have to do is prefix its name with #. See the code below:

class Point { #x = 0; #y = 0; constructor(a, b) { this.#x = a; this.#y = b; } }

Trying to access a private field outside the scope of the class will result in a syntax error.

Note that instance properties can not be private, only fields can. So you can't create an instance property with the # prefix. This would result in a syntax error.

Methods

Public methods

To declare a method we can use the ES6 shorter syntax for method definitions on objects:

class Point { #x = 0; #y = 0; translate(a, b) { this.#x += a; this.#y += b; } }

Private methods

Like we did with private fields, we can use a # as a prefix of our private methods:

class Point { #x = 0; #y = 0; constructor(x, y) { this.#setXY(x, y) } translate(a, b) { this.#setXY( this.#x + a, this.#y + b); } // Private method #setXY(x, y) { this.#x = x; this.#y = y; } }

Generator methods

The same way as public methods we can declare generator methods:

class Point { #x = 0; #y = 0; #historyPositions = []; translate(a, b) { this.#x += a; this.#y += b; this.#historyPositions.unshift( [this.#x, this.#y] ); } *getHistoryPositions() { for(const position of this.#historyPositions){ yield position; } } }

In the snippet above we declared a getHistoryPositions generator method.

Note: to declare a private generator method use this syntax: *#getHistoryPositions() {}.

Getters and Setters

To implement getters and setters we use the get and set keyword:

Here is an example:

class Point { #x = 0; #y = 0; get position() { return [this.#x, this.#y]; } set position(newPosition) { // newPosition is an array like [0, 0] [this.#x, this.#y] = newPosition; } }

Static fields and methods

Static methods and fields (of a class) can be defined using the static keyword. Static members (fields and methods) cannot be called through a class instance and must be called without instantiating the class.

Static methods are frequently used to construct utility functions, whereas static properties are excellent for caching, fixed-configuration, or any other data that does not need to be copied across instances.

Here is an example of a static method:

class Point { static isEqual(pointA, pointB) { const [x1, y1] = pointA.position; const [x2, y2] = pointB.position; return x1 === x2 && y1 === y2; } #x = 0; #y = 0; get position() { return [this.#x, this.#y]; } constructor(a, b) { [this.#x, this.#y] = [a, b]; } } // Consider that p1 and p2 are both instances of Point Point.isEqual(p1, p2) // Boolean

Creating an object with a class

The new keyword

To create a new instance of a class we use the new keyword:

class Point {} const point = new Point();

Hoisting

Function declarations and class declarations can be distinguished by the fact that function declarations are hoisted whereas class declarations are not. You must first define and then access your class; otherwise, code like this will throw a ReferenceError:

const point = new Point(); // ReferenceError class Point {}

Inheritance

The extends keyword

In class declarations or class expressions, the extends keyword is used to create a class that is a child of another class (a subclass).
We'll look at an example in the next section.

Super

The super keyword is used to access and call functions on an object's parent.
If there is a constructor present in the subclass, it needs to first call super() before using this.

See the code below:

class Vehicle { #numberOfPassengers = 0; constructor(nb) { this.#numberOfPassengers = nb; } getNumberOfPassengers() { return this.#numberOfPassengers; } } class Car extends Vehicle { constructor() { super(5); } } class Bike extends Vehicle { constructor() { super(1); } } const car = new Car(); const bike = new Bike(); car.getNumberOfPassengers(); // 5 bike.getNumberOfPassengers(); // 1

Metadata

In class constructors, new.target refers to the constructor that was called directly by new. This is also true if the constructor belongs to a parent class and was delegated from a child constructor.

class Vehicle { constructor() { console.log(new.target.name); } } class Car extends Vehicle { constructor() { super(); } } new Vehicle(); // Vehicle new Car(); // Car

Consider the following use case: If we want the Vehicle class to be abstract, we can throw an error if (new.target.name === 'Vehicle') is true. However, you've to keep in mind that if you use this in production and build your project with bundlers, the names of your classes may be prefixed, causing the condition to always be false.

Comparison with Constructor functions

Before there were classes, constructor functions and prototypes were the default. I won't go too deep in this section, but i wanted to show you how we could achieve pretty much the same with constructor functions and prototypes since ES6 classes use prototypes behind the hood.

Properties and methods

Let's start by setting some properties and methods:

function Point(x, y) { this.x = x; this.y = y; this.translate = function(a, b) { this.x += a; this.y += b; } } const point = new Point(4, 5); point.translate(2, 2); point.x; // 6 point.y; // 7

Getters and Setters

To implement setters and getters we have to use Object.defineProperty or Object.defineProperties:

function Point(x, y) { this.x = x; this.y = y; Object.defineProperty(this, 'position', { set: function([x, y]) { [this.x, this.y] = [x, y]; }, get: function() { return [this.x, this.y]; }, }); } const point = new Point(); point.position = [4, 5]; point.position; // [4, 5]

Basically, I used Object.defineProperty to set/change the property descriptor of the position property. To learn more about property descriptors, you can check this article:

A deep dive into Javascript Object properties

Mustapha Aouas ・ Oct 18 '21

#javascript #webdev #programming #beginners

Prototypal inheritance

Here's an example of prototypal inheritance:

function Vehicle(numberOfPassengers) { this.numberOfPassengers = numberOfPassengers; this.getNumberOfPassengers = function() { return this.numberOfPassengers; } } function Car() { Vehicle.call(this, 5); // The same way we used super for classes, here we call the Vehicle constructor in this context (Car context) } Car.prototype = Object.create(Vehicle.prototype); // Setting up the inheritance Car.prototype.constructor = Car; // As a side effect of the line above, we loose the Car constructor. So we have to set it back const car = new Car(); car.getNumberOfPassengers(); // 5

I won't go into much details here as there's a lot to talk about. But this is the minimal setup to do prototypal inheritance.

You may agree with me or not, but I find it a lot less straight forward and less descriptive than the class implementation.

Wrap up

We covered a lot already. We saw all of the tools we can use to create classes that are tailored to our needs, we discussed how to create objects using classes and we talked about some caveats to be aware of. Finally we saw how difficult it can be to use constructor functions compared to using classes.

That's it for this post. I hope you liked it. If you did, please share it with your friends and colleagues. Also you can follow me on twitter at @theAngularGuy as it would greatly help me.

Have a good day !

What to read next?

7 Tips to boost your productivity as a web developer 🚀

Mustapha Aouas ・ Aug 15 '19

#javascript #webdev #beginners #productivity

A deep dive into Javascript Object properties

Mustapha Aouas — Mon, 18 Oct 2021 08:40:58 +0000

In this post we’ll take a dive to see how objects are created then we'll talk about some interesting properties of object’s properties, but first let's start by taking a look at how we usually create an objects using object literals:

const car = { numberplate: '1234' };

We have created an object containing a property numberplate with a value of '1234'. Behind the scene javascript is using Object.create method to create this object. This is how it looks like:

const car = Object.create( Object.prototype, { numberplate: { writable: true, enumerable: true, configurable: true, value: '1234', } }, );

The two snippets of code above are absolutely equivalent and you can see why we use object literals, but let's take a moment to understand what is happening in the second snippet.
As a first argument the Object.create takes the object which should be the prototype of the newly-created object, since we don't have/want any prototypal inheritance, we specify that it should take the default object prototype.
More interestingly, the second argument specifies the property descriptors to be added to the newly-created object, with the corresponding property names.

Note that you can also use Object.defineProperties or Object.defineProperty to specify property descriptors for any given object. More on it here and here.

Let's see what each property descriptor is responsible for.

Property descriptors

Writable

The writable property descriptor defines whether the property (in this case numberplate) value can be changed from its initial value.

'use strict' const car = { numberplate: '1234' }; Object.defineProperty( car, 'numberplate', { writable: false } ); car.numberplate = '0000'; // -> Uncaught TypeError

Note that if you don't use strict mode (with 'use strict') in the exemple above, the interpreter will not throw an error and the value will not be changed.

There is a caveat to be aware of. The writable property descriptor stops the pointer of the property from moving. that means if the property points toward an object, the members of that object can still be changed, for exemple:

'use strict' const plane = { numberplate: { value: '1234' }, }; Object.defineProperty( plane, 'numberplate', { writable: false } ); plane.numberplate.value = '0000'; plane.numberplate.value // -> '0000' plane.numberplate = {}; // -> Uncaught TypeError

Enumerable

By default object properties are enumerable, so we can enumerate over them with for...in loops and we can get them as an array with Object.keys.

Note that the difference between these two ways of getting the enumerable properties is that Object.keys returns only an array with the own properties of the object, while the for...in loop returns also the keys found in the prototype chain.

const car = { numberplate: '1234', brand: 'Koenigsegg', }; Object.defineProperty( car, 'numberplate', { enumerable: false } ); Object.keys(car); // -> [brand]

Setting enumerable to false will also affect the JSON serialization of the property as it won't be serialized. That can be useful in some cases.

Configurable

The configurable descriptor of a property prevents the descriptors (of that given property ex: platenumber) from being changed. Also it prevents the property from being deleted from the object. Let's see an exemple:

'use strict' const car = { numberplate: '1234', }; Object.defineProperty( car, 'numberplate', { configurable: false } ); delete car.numberplate; // -> Uncaught TypeError Object.defineProperty( car, 'numberplate', { enumerable: false } ); // -> Uncaught TypeError Object.defineProperty( car, 'numberplate', { configurable: true } ); // -> Uncaught TypeError

Once you set the configurable descriptor of a property to false, you can not switch it back to true later.

One caveat to be aware of is that even if you set configurable to false, you still can change the writable descriptor.

Value

Finally the value descriptor is here to set or change the value of the property.

'use strict' const car = { numberplate: '1234', }; Object.defineProperty( car, 'numberplate', { value: '0000' } ); car.numberplate; // -> '0000'

Setter and getter

Getters

Another useful thing you could also do with Object.create (or Object.defineProperty or Object.defineProperties) is implementing setters and getters. Let's see how we can do it.

const point = { x: 0, y: 0 }; Object.defineProperty( point, 'position', { get: function() { return [this.x, this.y]; } } ); point.position; // -> [0, 0]

To create a getter, you set the get attribute to a function, this function is our getter.

Setters

const point = { x: 0, y: 0 }; Object.defineProperty( point, 'position', { set: function(pointArray) { [this.x, this.y] = pointArray; } } ); point.position = [4, 2]; point.x; // -> 4 point.y; // -> 2

Like we did for the getter, to implement a setter we set the set attribute to a function that takes an argument, the argument is the value you want to set.

Note that when you set a getter or setter for a property, it can't have a writable or a value property descriptor. See below:

Object.getOwnPropertyDescriptor( point, 'position' ); // -> { enumerable: false, // configurable: false, // get: ƒ, set: ƒ }

Notice that when you set a getter or a setter, the enumerable and configurable descriptors are automatically set to false. So you may want to set the getters and the setters in the same expression, or manually set configurable to true while implementing them.

That's it for this post. I hope you liked it. If you did, please share it with your friends and colleagues. Also you can follow me on twitter at @theAngularGuy as it would greatly help me.

Next week we will talk about ES6 classes and how they compare to constructor functions, so make sure to stay around.
Have a nice day and see you soon.

What to read next?

CSS Grid: illustrated introduction

Mustapha Aouas ・ Sep 12 '19

#css #webdev #tutorial #beginners

Forem: Mustapha Aouas

Streamlining Route Data Binding with Angular Signal inputs

How Route Data Binding Works with Signals

Data Binding Precedence and Input Aliasing

Data Binding Precedence

Input Aliasing

Steps To Try It Out

Enable It In Your Application's Router Configuration

Migrate To The New API

Wrapping Up

Why HTML has both and ?

TLDR;

A Brief History Lesson

Enter Semantic HTML

Why Does It Matters

When to Use Which?

The Bottom Line

Relative Units in CSS: A Comprehensive Guide

Why Does It Matter?

Ems and Rems

Understanding Ems

A Potential Pitfall

Rems: Root Ems

Practical Example

Viewport-Relative Units

The Dynamic Nature of Mobile Viewports

Enter Dynamic Viewport Units

Inline / Block Logical Properties

Browser Support and Fallbacks

Combining Units

Using calc Function

Using clamp Function

Using Other Useful Functions

Wrapping up

Mastering CSS: Understanding the Cascade

The CSS Cascade

1. Stylesheet Origin

2. Inline Styles

3. Selector Specificity

4. Source Order

A Powerful Override

How !important Works

The Cascade and !important

When to Use it

A Potential Solution To Simplify Specificity Management

Inheritance

Passing Styles Down the DOM Tree

Inheritance keywords

Wrapping up

:where :is CSS?

1. CSS :is

What is :is()?

Targeting parents

Targeting children

Combining multiple :is()

Applying is() to the current element

is() is forgiving

Specificity

2. Every :where

What is :where()?

The difference

When to use it?

Browsers compatibility

Wrap up

Mesmerizing CSS art: Silence

What to read next?

Sibling selector & 4 other webdev tips you may want to know 🚀

Mustapha Aouas ・ Sep 16 '22

How to create an interactive donut chart using SVG

The problem with the stroke-dasharray implementation

Path to the rescue

Trigonometry

Pie chart slice

Donut chart slice

A slice bigger than 180 degrees

Stacking up multiple slices/parts

Implementation

React

Angular

What to read next?

Using `calc` Function

Using `clamp` Function

How `!important` Works

The Cascade and `!important`

What is `:is()`?

Combining multiple `:is()`

Applying `is()` to the current element

`is()` is forgiving

What is `:where()`?

The problem with the `stroke-dasharray` implementation

`border-radius`

`aspect-ratio`

`transform: skew`

`box-shadow`

`text-shadow`

The `srcset` and `sizes` attributes

The `srcset` attribute

The `sizes` attribute

The `class` keyword

The `new` keyword

The `extends` keyword