Snippets

These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven't yet. The concept is inspired by Jeremy Keith's links and CSS-Tricks, among other things. Enjoy.

Are We Breaking The Internet?

As more people and more devices get connected to the internet, the lure of centralizing control—which makes it easier for companies to manage them—is bumping its head against the initial design of the internet: to drive reliability and scalability. With every new largely centralized system that comes online, the internet becomes more brittle, as centralization creates an increased number of single points of failure.

Tags: 

CSS Grid Guides on MDN

A few weeks ago I was approached by the good people over at MDN, asking if I would be interested in writing a comprehensive resource for MDN on CSS Grid Layout. A series of guides to explain the grid specification with examples - ready for Grid shipping in Firefox 52 today.

I think that MDN is the best place for references and increasingly for learning web development, therefore I was very keen to add to that material and to create a learning resource for grid. Over the last couple of weeks I have written a book-worth of words and it is all available on MDN right now.

[...]

  1. Basics concepts of grid layout
  2. Relationship to other layout methods
  3. Line-based placement
  4. Grid template areas
  5. Layout using named grid lines
  6. Auto-placement in grid layout
  7. Box alignment in grid layout
  8. Grids, logical values and writing modes
  9. CSS Grid Layout and Accessibility
  10. CSS Grid Layout and Progressive Enhancement
  11. Realizing common layouts using grids

Tags: 

Text stroke with CSS

The text "Here is some special text" with the words "some special" having a stroke applied to them, and a base inner colour matching the background.

There is a non-standard way to stroke HTML text (SVG has a standard way). It's not particularly new. There are -webkit- and -moz- prefixes for it. Jen Simmons recently posted about it, with an example:

CSS

span {
     -moz-text-fill-color: #fde;
  -webkit-text-fill-color: #fde;
     -moz-text-stroke-color: #666;
  -webkit-text-stroke-color: #666;
     -moz-text-stroke-width: 2px;  
  -webkit-text-stroke-width: 2px;
}

And she's right:

This CSS isn't fully-baked or fully-supported. But it's good enough to be used today, especially since it's simply offering a visual enhancement. It's not mission critical to making a website usable.

I'd only perhaps add that if you were going to do something like add a stroke around white text, you could wrap it in a @supports to be extra sure it'll be OK (just in case a browser exists that supports text-fill-color but not text-stroke-color) :

CSS

@supports 
  ((-webkit-text-stroke-color: #666)
  and
  (-webkit-text-fill-color: white))
  or
  ((-moz-text-stroke-color: #666)
  and
  (-moz-text-fill-color: white)) {
  span {
       -moz-text-fill-color: white;
    -webkit-text-fill-color: white;
       -moz-text-stroke-color: #666;
    -webkit-text-stroke-color: #666;
       -moz-text-stroke-width: 2px;  
    -webkit-text-stroke-width: 2px;
  }
}

See the link for more tricks, and the comments make a good point that you don't have to use text-fill-color if you're using @supports: just use color.

Tags: 

Dealing with long words in CSS

CSS

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

This solution will show hyphens for every browser supporting it and will break lines in every other browser – perfect. [Although] I have tested this solution in 26 different browsers I am still not sure this will work 100% – if you find any edge case please let me know.

Tags: 

Expand last row of wrapped flex items to fill entire row

Thanks to Jonathan Snook, I've learnt that we don't need quantity queries to create a balanced grid. Quantity queries are very powerful, but so is Flexbox. If we just want all the items in the last row to fill the space, regardless of how many there are, then Flexbox can take care of this. But if we want to add additional styles to the items, we still need quantity queries.

This is the grid we want to achieve:

A wrapped grid of flexbox items. The first two rows have four items each, stretching to the full width of the container. The third row only has three items, but they also stretch to the available space.

Here's the Flexbox magic.

The container needs to have the property display: flex; and the items need to be wrapped using flex-wrap: wrap;

CSS

.list {
    display: flex;
    flex-wrap: wrap;
}

Now here's the clever bit. We can set an initial width to the items (in this case flex-basis: 23%;) so that each item will always get a width of 23% unless otherwise stated in the CSS. flex-grow: 1; tells the items to grow and fill the space in the row.

CSS

.list-item {
    ...
    flex-basis: 23%;
    flex-grow: 1;
}

So, thanks to flex-grow, no matter how many items are in the last row, they will always fill the space. Works like magic! It's amazing how much can be achieved with so little CSS.

Tags: 

Silo Buster - A markup generator for URL display optimizations in social content silos

A screenshot of the Silo Buster page and form, with fields for many aspects of what to display on social networks when sharing your site.

The generator supports Twitter cards, Pinterest rich pins, Google's structured data and Facebook's Open Graph.

Add this markup to your web pages to make links to your site look great in social apps and websites! Also, making outbound content look attractive helps people escape these content silos and venture back out onto the wild wild web!

Tags: 

Tuna - Typeface

A technical dissection of the Tuna typeface, showing various features such as x-height, pen-like structure, etc.

Tuna is simply a contemporary body text font. It is contemporary, meaning the merge of charming broad-nibbed calligraphic style with optimized legibility on screen – showing that the roots of writing and typesetting are still in charge when reading “Anna Karenina” on a kindle till 4 o’clock in the morning.

Tuna has a natural fit for cross-media use because the design is based on forms characterized by different conditions of consistency, stability and good legibility. Well defined shapes and distinctive details only become apparent when used in larger sizes, making Tuna a true all-rounder.

With more than 700 glyphs in 10 styles created with a maximum of consideration, it has all the qualities of a modern OpenType font serving the needs of [today's] communication.

Tags: 

Pages