Snippets

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:

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) :

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.

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.

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:

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;

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.

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.

This seems like it could be a useful tool:

Increase your form conversions by fixing common usability issues

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!

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.

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.

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.