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.

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: 

xo - JavaScript happiness style linter

A screenshot of several JavaScript linting errors.

Opinionated but configurable ESLint wrapper with lots of goodies included. Enforces strict and readable code. Never discuss code style on a pull request again! No decision-making. No .eslintrc or .jshintrc to manage. It just works!

[...]

Highlights

  • Beautiful output.
  • Zero-config, but configurable when needed.
  • Enforces readable code, because you read more code than you write.
  • No need to specify file paths to lint as it lints all JS files except for commonly ignored paths.
  • Config overrides per files/globs. (ESLint doesn't support this)
  • Includes many useful ESLint plugins, like unicorn, import, ava, and more.
  • Caches results between runs for much better performance.
  • Super simple to add XO to a project with $ xo --init.
  • Fix many issues automagically with $ xo --fix.
  • Open all files with errors at the correct line in your editor with $ xo --open.
  • Specify indent and semicolon preferences easily without messing with the rule config.
  • Great editor plugins.

Tags: 

Introducing A11y Dialog

Almost all projects involve some form of dialog window at one point or another. However, accessibility is all too often set aside in favor of quick implementation. Truth is, accessible dialog windows are hard. Very hard.

Fortunately, there is a super clever guy named Greg Kraus who implemented an accessible modal dialog a few years ago and open-sourced it on GitHub. Now that’s nice!

However, his version—no matter how good it is—requires jQuery. We try to avoid using jQuery as much as we can here. We realised we did not really need it most of the time. On top of that, his script is not very flexible: only one dialog window per page, hard-coded IDs inside the functions. Not very practical and certainly not a drop-in script for any project.

So I rolled up my sleeves and improved it.

Tags: 

Fixed and sticky headers and in-page anchors

I made a little tweak to The Session today. The navigation bar across the top is “sticky” now—it doesn’t scroll with the rest of the content.

I made sure that the stickiness only kicks in if the screen is both wide and tall enough to warrant it. Vertical media queries are your friend!

But it’s not enough to just put some position: fixed CSS inside a media query. There are some knock-on effects that I needed to mitigate.

I use the space bar to paginate through long pages. It drives me nuts when sites with sticky headers don’t accommodate this. I made use of Tim Murtaugh’s sticky pagination fixer. It makes sure that page-jumping with the keyboard (using the space bar or page down) still works. I remember when I linked to this script two years ago, thinking “I bet this will come in handy one day.” Past me was right!

The other “gotcha!” with having a sticky header is making sure that in-page anchors still work. Nicolas Gallagher covers the options for this in a post called Jump links and viewport positioning. Here’s the CSS I ended up using:

CSS

:target:before {
    content: '';
    display: block;
    height: 3em;
    margin: -3em 0 0;
}

I also needed to check any of my existing JavaScript to see if I was using scrollTo anywhere, and adjust the calculations to account for the newly-sticky header.

Anyway, just a few things to consider if you’re going to make a navigational element “sticky”:

  1. Use min-height in your media query,
  2. Take care of keyboard-initiated page scrolling,
  3. Adjust the positioning of in-page links.

Tags: 

Pages