Maggie Appleton calls “Programming Portals”:

Small, scoped spaces inside of a graphical interface that permit customers to learn and write easy programmes

brb updating all of the advertising and marketing replica round right here.

I love how casually Brad Frost describes necessarily all of internet design. All of it boils right down to stuff and format:

The majority of a design gadget’s element library will also be considered stuff. Buttons! Accordions! Shape controls! Stuff! Format and grid function containers to position all that different stuff, and as such they require some other concept and attention than different stuff-shaped parts.

Even format itself has gotten moderately simple in CSS these days, which Brad demonstrates with a number of great reference Pens.

Let’s hang around at the format factor for a minute. I loved Vadim Makeev’s 6+5 tactics to make a two-column format: from beautiful cheap to com­pletely unsuitable.

Two columns! That’s it! A facet-by-side format, which internet design has had to do since day one. (I additionally recall to mind side-by-side layouts as a “Media Object” since Nicole Sullivan’s seminal article on CSS structure.) What number of tactics to do that can one language have? Cling my beer, says CSS.

1. HTML <desk>
2. Floats
3. Inline Block
4. Multi Column
5. Flexbox
6. Grid

The ones, as Vadim says, are “cheap”. The “+5” phase is every other entire staff of how to do that that paintings however are questionable at very best.

1. Absolute positioning
2. The usage of writing mode to show blocks of textual content “sideways”
3. SVG foreignObject
4. component()
5. frameset / body

I find it irresistible. I believe like we must stay going. Canvas! Unicode blocks in a <pre>! And the ever-hilarious –webkit-box-reflect.

There’s a specified variant of the :nth-child selector that makes use of the of key phrase to scope what you might be counting. For instance:

li:nth-child(2 of .featured) {
  
}

So that you’re now not simply settling on the second one listing merchandise, you’re settling on the second look of the .featured magnificence on listing pieces. It’s a not unusual mistake that that’s what li.featured:nth-child(2) does, however no, that most effective selects if an inventory merchandise each has the category featured and occurs to be the second baby. We wish to make a choice…

<*l>
  <li>factor
  <li>factor
  <li magnificence="featured">factor
  <li>factor
  <li magnificence="featured">**THIS ONE**
  <li>factor

Unhappy trombone: most effective Safari has carried out this selection.

However Bramus Van Damme has an answer!

.featured ~ .featured:now not(.featured ~ .featured ~ .featured) {
  colour: crimson;
}

That’s a whack-looking selector, however it’s necessarily announcing “choose all .featured parts that come after every other .featured component, however forestall settling on if you hit 3”. You stay getting an increasing number of difficult with this, which is in reality excellent to understand is imaginable, however I believe I’ll wait on that motion till I would like it for one thing.