The future of CSS: Nesting Selectors

Early March the first draft for the CSS Nesting Module was published. The draft outlines a future mechanism by which we’ll be able to nest CSS selectors natively (e.g. in pure CSS, without the use of any preprocessors)

This module describes support for nesting a style rule within another style rule, allowing the inner rule’s selector to reference the elements matched by the outer rule. This feature allows related styles to be aggregated into a single structure within the CSS document, improving readability and maintainability.

Using the & selector (read this as “the nesting selector”), you can refer to the elements matched by the parent rule:

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child + td { border: 1px solid black }
  }
  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

As it’s an actual selector, you always need to use the & selector, so you won’t be able to do this:

/* INVALID */
.foo {
  .bar {
    color: hotpink;
  }
}

(The fix would be to write & .bar instead of .bar)

The & selector can also only be used when it’s first compound selector (e.g. it appears at the first position) of an inner selector.

/* INVALID */
.foo {
  .bar & {
    color: hotpink;
  }
}

To cater to these scenarios you’ll need to use the @nest rule, which is more lax:

/* VALID */
.foo {
  @nest .bar & {
    color: hotpink;
  }
}

To me it feels like this @nest rule should go. The interpreter should be smart enough to figure things out all by itself.

CSS Nesting Module (Draft) →

what3words – The addressing system to uniquely identify locations using just three words

what3words is a really simple way to talk about location. We have divided the world into a grid of 3m x 3m squares and assigned each one a unique 3 word address. It means anyone can accurately find any location and share it more quickly, easily and with less ambiguity than any other system.

The service can be used via the free mobile app or online map. It can also be built into any other app, platform or website, with just a few lines of code.

For example, the torch of the Statue of Liberty is located at toned.melt.ship. This combination is unique, no other location across the globe has it. Easier to remember than WGS84 coordinates, and still very precise.

what3words Online Map →
what3words Website →
what3words: toned.melt.ship

ESNext: Proposals to look forward to (Full Stack Ghent)

Yesterday I was invited as a speaker at the March 2019 Meetup by “Full Stack Ghent” (their first one!) at the Clarabridge CX Social offices.

At the meetup I gave a reprise of the talk “ESNext: Proposals to look forward to”, which I had already done at a Full Stack Antwerp meetup, a few months ago.

With the yearly ECMAScript releases (ES2015..ES2019) of a lot of things have changed in JavaScript-land. And even more changes are ahead!

This talk takes a look at a few of the upcoming ECMAScript features, which will (hopefully) become part of the ECMAScript Language Specification in the near future.

The slides are up on slidr.io, and also embedded below:

Talk Outline:

  • TC39: Info on TC39, what they do, and how they work.
  • ESNext Proposal: Field Declarations
  • ESNext Proposal: Optional Chaining
  • ESNext Proposal: Null Coalescing
  • ESNext Proposal: Pipeline Operator
  • ESNext Proposal: Dynamic Imports
  • ESNext Proposal: Pattern Matching
  • ES2015 Refresher: Promises
  • ESNext Proposal: Cancellation API
  • ESNext Proposal: Function Bind Syntax
  • ESNext Proposal: Slice Notation
  • ES2019 Feature: Object.fromEntries()
  • Fin.

Thanks to the organisers for having me, and thanks to the attendees for coming to see me. I hope you all had fun attending this talk. I know I had making it (and whilst bringing it forward) 🙂

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

CraftQL – A drop-in GraphQL server for Craft CMS

CraftQL is a drop-in GraphQL server for your Craft CMS implementation. With zero configuration, CraftQL allows you to access all of Craft’s features through a familiar GraphQL interface.

❓ Unfamiliar with GraphQL? Earlier today Ryan Glover (Ponyfoo) posted a great introduction to it.

In the admin interface you get a GraphiQL interface, and the ability to define access rights per token you generate.

Querying is very familiar:

CraftQL provides a top level entries field that takes the same arguments as craft.entries does in your template. This is the most commonly used field/access point.

Like so:

query fetchNews {             # The query, `query fetchNews` is completely optional
  entries(section:[news]) {   # Arguments match `craft.entries`
    ...on News {              # GraphQL is strongly typed, so you must specify each Entry Type you want data from
      id                      # A field to return
      title                   # A field to return
      body                    # A field to return
    }
  }
}

A license costs $59, but for that amount of money you can’t build it yourself …

CraftQL.xyz →
CraftQL (GitHub) →

📽 Whilst everything is quite self-explanatory, a video on how to set it up is included in the “Headless Craft CMS” video series over at CraftQuest. The Installing GraphQL via CraftQL introductory video is one of the free videos you can watch over there.

Combining position: sticky; with overflow: scroll;

Figure: position: sticky; and overflow: scroll;, a quirky combination … but it can be fixed!

Dannie Vinther:

Say we want an overflowing table of columns and rows with sticky headings on a page. We want the headings to stick while scrolling on the document window, and we want to be able to scroll horizontally within the overflowing container.

When working with overflows you might find that your sticky element isn’t so sticky after all, which may cause some frustration. The browser doesn’t seem to be respecting position: sticky; once we add overflow to the mix.

The solution is to use two scrollcontainers and sync up their scrolling using a tad of JavaScript:

See the Pen Position Sticky Table with overflow by Dannie Vinther (@dannievinther) on CodePen.

position: stuck; — and a Way to Fix It →
syncscroll (GitHub) →

❓ Not familiar with position: sticky;? Check out this introduction then.

Aladdin Trailer

Disney’s Aladdin (1992) is getting a live-action remake. Today the trailer got released:

I was 9 when the original Aladdin came out. I can sing along to all of its songs by heart. So yeah, I’m quite the sucker for this re-make. The trailer looks quite promising so I’m starting to think that they won’t have f*cked it up too much (unlike what they did with that Beauty and the Beast remake).

Browse the web like it’s 1990: CERN 2019 WorldWideWeb Rebuild


Figure: WorldWideWeb, with the homepage of bram.us loaded

Today the web turned 30. Perfect time to mention that back in February a small team of people have worked on a rebuild of the original WorldWideWeb application – the world’s first browser – which was used to access the web back then.

In December 1990, an application called WorldWideWeb was developed on a NeXT machine at The European Organization for Nuclear Research (known as CERN) just outside of Geneva. This program – WorldWideWeb — is the antecedent of most of what we consider or know of as “the web” today.

In February 2019, in celebration of the thirtieth anniversary of the development of WorldWideWeb, a group of developers and designers convened at CERN to rebuild the original browser within a contemporary browser, allowing users around the world to experience the rather humble origins of this transformative technology.

Jeremy Keith, who was part of that team, has a nice writeup on their adventure and its result.

To me, this project has two very interesting parts:

  1. It’s recreated using web technologies, showing (some of) the power of what the web is capable of today.

  2. The application acts a litmus test to see whether your site is built in a timeless manner or not: If your site content can be consumed using WorldWideWeb, it means that a screen-reader, browsers with JS disabled, etc. will be able to read it too.

Nowadays I see a lot of sites that are built using a JS-first state of mind. The proven concept of Progressive Enhancement is nowhere to be found, and that’s sad. The fact that these sites don’t work in WorldWideWeb is a direct result from that, and that is – to me – a red flag.

The web is timeless, and so should the sites we build be. The fact that sites which I have built also are consumable in WorldWideWeb is something I take pride in.

WorldWideWeb →

A few tips on using WorldWideWeb:

  • Go to “Document” → “Open from full document reference” to open a URL
  • Links needed double clicking back then 😉

Using the <details> element to create modals and menus

The folks over at GitHub have been leveraging the <details> element to create modals and menus:

<details class=“dropdown”>
  <summary class=“btn” aria-haspopup=“menu”>…</summary>
  <ul class=“dropdown-content”>
    <li><a href="/muan">profile</a></li>
    …
  </ul>
</details>

Very clever, as <details> trumps the <modal> element in many ways:

  • Semantic
  • Accessible
  • No JavaScript

Next to that, they’ve also released a few custom elements that make use of this technique: a <details-menu> and a <details-dialog> custom element.

Details on <details>
Details on <details> (slides)
<details-menu> element →
<details-dialog> element →