Skip to main content

VOL. IV

Edwin Krivoseev
Edwin Krivoseev
Passkeys & Pnpm hidden gems
Jemal Khachidze
Jemal Khachidze
CSS Cascade Layers

FULLHAUS DEV DUNGEON

  • Passkeys
  • CSS Cascade Layers
  • Pnpm hidden gems

Passkeys (SSH for noobs)​

Passkeys are a safer and easier alternative to passwords. With passkeys, users can sign in to apps and websites with a biometric sensor (such as a fingerprint or facial recognition), PIN, or pattern, freeing them from having to remember and manage passwords.

Benefits:

  • More secure
  • Bulletproof against phishing
  • Passwordless
  • Built-in 2FA

Security​

Thanks to the authentication flow with a public and a private key, there is no need for sending sensitive information (like passwords) to the server. The private key will not leave the device it was created on for authentication. Furthermore, the private key is encrypted with biometrics, a PIN or pattern. (Biometric material never leaves the user's personal device)

Phishing​

Pishing will no longer work with Passkeys because there are no passwords you could accidentally leak.

Passwordless​

It's not just more convenient, but it's also more reliable as there is no need for storing user passwords on a server. Instead, the public key will be stored, making attacks on servers far less valuable and data breaches less painful.

Fun fact:

25% to 40% of all help desk calls are due to password problems or resets.

In a single month in 2017, Microsoft had to reset 686,000 passwords for employees, resulting in support expenses of over $12 million. [Source]

2FA​

If you use two-factor authentication (2FA), passkeys satisfy both password and 2FA requirements, so you can complete your sign in with a single step. If you don't use 2FA, using a passkey will skip the requirement to verify a new device via email.

Verification flow​

  1. A user triggers signing in with a passkey. The client then will request a random challenge from the server.
  2. The user then will be prompted to verification with biometric or a PIN in order for the passkey to sign the challenge.
  3. The client then sends the signed challenge to the server. The server checks the challenge and will authorize the user if it was successfully.

For a deeper dive you should check out this: https://www.passkeys.io/technical-details

Support​

Browser​

Devices​

  • iOS 16+ (iPhone 8 from 2017)
  • macOS 13+ (Macs from 2017)
  • Android 9+ (Samsung Galaxy S8 from 2017)
  • Windows 10/11
  • Linux via Phone passkeys (QR code flow) and physical security keys only

Services​

  • GitHub
  • Google
  • Microsoft
  • Adobe
  • Playstation
  • Discord

You can check out this list for even more: https://www.passkeys.io/who-supports-passkeys

Reminder​

In most cases it will still be possible to log in your account by password, even tho you are using a passkey. Therefore, please use strong passwords with a password manager like KeePassXC. Use passphrases if you don't like to/can't use a password manager.

Source: https://xkcd.com/936/

CSS Cascade Layers (Overview)​

Disclaimer

Following blog post is a summary of the information provided at useful links section and serves purpose to give readers introduction to CSS Cascade Layers feature. Any suggestions for improvements are welcome and much appreciated ❤️.

What is CSS Cascade​

MDN Defines Cascade as follows: The cascade is an algorithm that defines how user agents combine property values originating from different sources. The cascade defines the origin and layer that takes precedence when declarations in more than one origin, cascade layer, or @scope block set a value for a property on an element.

Benefits of Layers:

  • Enhanced Control Over Style Priority: Cascade layers allow developers to organize and prioritize CSS rules, making it easier to manage which styles are applied, especially when dealing with multiple sources of CSS. This reduces the need to rely on !important declarations.

  • Simplified Management of Complex Stylesheets: In projects with multiple stylesheets from different sources (e.g., third-party plugins, different teams), cascade layers help organize and control these styles in a structured way, preventing conflicts and reducing the need to increase specificity manually.

  • Improved Maintainability: Cascade layers make the CSS more maintainable by allowing developers to group related styles and control their application order. This makes it easier to update and refactor CSS without unintended side effects.

  • Reduction in Specificity Wars: With cascade layers, the need to increase specificity to override styles is minimized, which helps avoid the common problem of “specificity wars,” where developers keep increasing specificity to ensure their styles are applied.

  • Clearer Debugging and Troubleshooting: When inspecting elements in browser developer tools, cascade layers help clarify why certain styles are applied or overridden, making it easier to identify and fix issues related to style conflicts.

Cascading order​

  1. Relevance

  2. Origin and importance: Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. Ignoring layers for the moment, the cascade order is as follows:

    Order (low to high)OriginImportance
    1user-agent (browser)normal
    2usernormal
    3author (developer)normal
    4CSS @keyframe animations
    5author (developer)!important
    6user!important
    7user-agent (browser)!important
    8CSS transitions

  3. Specificity:

  4. Scoping proximity:

  5. Order of appearance:

Cascading order​

Cascading without layers
Cascading with layers

Source: https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/

What are Cascade Layers​

Here are definitions from different sources:

  • The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.
  • CSS Cascade Layers are intended to solve tricky problems in CSS. Let’s take a look at the main problem and how cascade layers aim to solve it.
  • With Cascade Layers you can split your CSS into several layers via the @layer at-rule. Because of its unique position in the Cascade, using Layers comes with a few benefits that give us developers more control over the Cascade.

Creating a Cascade Layer​

A Cascade Layer can be declared in several ways:

  1. Using the @layer block at-rule, with styles assigned immediately to it:
@layer reset {
  * { /* Poor Man's Reset */
      margin: 0;
      padding: 0;
  }
}
  1. Using the @layer statement at-rule, without any styles assigned:
@layer reset;
  1. Using @import with the layer keyword or layer() function:
@import url(reset.css) layer(reset);

Each of these standalone examples, creates a Cascade Layer named reset.

warning

💡 A possible 4th way is still being worked on: by means of an attribute on a <link> element. See CSSWG Issue #5853.

Managing Layer Order​

Cascade layers are sorted by the order in which they first are declared.

@layer reset { /* Create 1st layer named “reset” */
  * {
    margin: 0;
    padding: 0;
  }
}

@layer base { /* Create 2nd layer named “base” */
  …
}

@layer theme { /* Create 3rd layer named “theme” */
  …
}

@layer utilities { /* Create 4th layer named “utilities” */
  …
}

Following their declaration order, the Layer Order becomes:

  1. reset
  2. base
  3. theme
  4. utilities
info

When re-using the name of a Layer, styles will be appended to the already existing Layer. The order of the Layers remains the same, as it’s only the first appearance which determines the order:

To avoid confusions it is recommended to declare all layers upfront and once order will be established we can append styles to each layer

@layer reset, base, theme, utilities;

In total there will be 4 layers created, in this order:

  1. reset
  2. base
  3. theme
  4. utilities

Once a winning declaration has been determined via Layer Order, the Cascade won’t even check Specificity or Order of Appearance for those declarations anymore. This is because Layers is a separate and higher ranked criterion of the Cascade

Practical example

@import url(reset.css) layer(reset); /* 1st layer */

@layer base { /* 2nd layer */
  form input {
    font-size: inherit;
  }
}

@layer theme { /* 3rd layer */
  input {
    font-size: 2rem;
  }
}

Although the input-selector (Specificity 0,0,1) used on line #10 is less specific than the form input-selector (Specificity 0,0,2) from line #4, the declaration on line #10 will win because the theme Layer (3) is ordered after the base layer (2).

Note​

!important origins, context, and layers are reversed!

Detailed info can be seen at following link

Quick example:​

Browser Support​

Pnpm hidden gems​

Pnpm is not just a fast and disk space efficient package manager - it can do even more! Beyond its core functionalities, pnpm comes packed with a variety of hidden features that can significantly enhance our development workflow(s).

Commands​

If you run a command that isn't directly recognized as a pnpm command, pnpm will automatically search for a script with that name in your project's package.json. For example, pnpm run watch is effectively the same as just typing pnpm watch. This makes running scripts intuitive and saves you from typing extra commands.

Node Version Management​

Pnpm can handle Node versions directly, potentially replacing tools like nvm. You can easily switch Node versions on the fly with a single command:

pnpm env use --global 22
warning

pnpm requires to be installed via the standalone script to use this!

This is especially handy when using the use-node-version key inside a .npmrc file. With this setting pnpm will automatically install the specified version of Node and use it for running pnpm run commands. This wouldn't just replace nvm but also making the .nvmrc file unnecessary.

You can explore all available configuration keys at https://pnpm.io/npmrc.

Git Branch Lockfiles​

Merge conflicts in lockfiles are a developer's nightmare, but pnpm offers a unique solution: Git Branch Lockfiles. With this feature, pnpm creates separate pnpm-lock.yaml files for each Git branch, drastically reducing the chances of encountering lockfile merge conflicts. When you're ready to merge branches, simply use:

pnpm install --merge-git-branch-lockfiles

This command seamlessly merges the lockfiles, keeping your dependencies in sync without the headache.

Dungeon Pick​

A principle called "Rule of Least Power" advises developers to use the least powerful language suitable for a task. On the web, this means preferring to use HTML over CSS and CSS over JavaScript. By doing so, we create more robust, faster, and accessible web experiences.