Lesser known CSS quirks & advanced tips

Lesser known CSS quirks & advanced tips” is a collection of some really weird CSS features and behaviors.  These are good to know, as sometimes they can shed some light on strange results or help with implementation of a particular design feature, where no other options are applicable.

micron.js – a micro-interaction CSS/JavaScript library


a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power

It won’t change your life, but it will help with adding a little human touch to your web application.

Crooked Style Sheets

Crooked Style Sheets is a proof of concept for website tracking/analytics using only CSS and without Javascript.

What can we do with this method?

We can gather some basic information about the user, like the screen resolution (when the browser is maximized) and which browser (or engine) is used. Further we can detect if a user opens a link or hovers with the mouse over an element. This can be used to track which (external) links a user visits and using the hover method. It should be even possible to track how the user moved their mouse (using an invisible table of fields in the page background). However, using my method it’s only possible to track when a user visits a link the first time or hovers over a field the first time. Maybe it’s possible to modify the method so that it is possible to track every click.

Furthermore it is possible to detect if a user has installed a specific font. Based on this information it should be possible to detect, which OS a users uses (because different operating systems ship different fonts, e.g. “Calibri” on Windows).

Front-End Checklist

This Front-End Checklist is pretty awesome and quite extensive:

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your site / page HTML to production.

It is based on Front-End developers’ years of experience, with the addition from some other open-source checklists.

It goes over generic HTML bits, meta information, web fonts, CSS, images, JavaScript, security, accessibility, performance and more.

The best part is that large parts of this list are pretty easy to automate and integrate with your deployment / continuous delivery tool chain.

Spellbook of Modern Web Dev

Spellbook of Modern Web Dev is a collection of 2,000+ carefully selected links to resources on anything web development related.  It covers subjects from Internet history and basics of HTML, CSS, and Javascript, all the way to tools, libraries and advanced usage of web technologies, and more; from network protocols and browser compatibility to development environments, containers, and ChatOps.

  • This document originated from a bunch of most commonly used links and learning resources I sent to every new web developer on our full-stack web development team.
  • For each problem domain and each technology, I try my best to pick only one or a few links that are most important, typical, common or popular and not outdated, base on the clear trendspublic data and empirical observation.
  • Prefer fine-grained classifications and deep hierarchies over featureless descriptions and distractive comments.
  • Ideally, each line is a unique category. The ” / “ symbol between the links means they are replaceable. The “, “symbol between the links means they are complementary.
  • I wish this document could be closer to a kind of knowledge graph or skill tree than a list or a collection.
  • It currently contains 2000+ links (projects, tools, plugins, services, articles, books, sites, etc.)

On one hand, this is one of the best single resources on the topic of web development that I’ve seen in a very long time.  On the other hand, it re-confirms my belief in “there is no such thing as a full-stack web developer”.  There’s just too many levels, and there’s too much depth to each level for a single individual to be an expert at.  But you get bonus points for trying.