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.

Markdown Here – a browser extension for quick Markdown

Markdown Here Screenshot.

Markdown Here is a browser extension (for all sorts of browsers too) that enables quick and easy rendering of the Markdown text into the HTML.  This works well in a number of scenarios – Gmail email composition, WordPress post editing, and a few other.

Alt-texts: The Ultimate Guide

Daniel Göransson, a web developer with vision impairment, put together this ultimate guide to the image alt texts.  Unlike all the keyword stuffing SEO guides, his focuses on making alt texts useful for people who are using screen readers and other assisting technologies.

If you’ve never browsed the web with a screen reader switched on, this guide is the next best thing for you to understand the issues and make your sites better.

Don’t Design Your Emails

I do hate HTML emails with passion.  They are always too heavy, often bloated, render horrible, and just plain annoying.  I miss the old good days, when email clients were warning users that their signature was too long, spanning more than 4 lines.  Today, everybody is sending out HTML emails whether they need to or not.  Whether it’s for the signatures, corporate branding, or the “marketing value” or the “professional look”.

Finally, there is someone on my side of the fence, who actually tested the effects of HTML emails and suggests that plain emails are more efficient even for the marketing purposes.  Read the whole thing – “Don’t Design Your Emails“, especially if you are involved with email marketing.

The plain email—which took no time to design or code—was opened by more recipients and had 3.3x more clicks than the designed email.


The plain, unstyled emails resulted in more opens, clicks, replies, and conversions, every time.

Replies to welcome emails were tripled. Cold emails were getting 30-35% open rates and 3% conversion rates, which is incredible.

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.

Real Favicon Generator

Real Favicon Generator is a handy tool for setting up your website’s favicon properly.  It takes care of both the images (formats, resolutions, etc) and the HTML that you’ll need to include.  With just a few clicks your website will work properly with browsers, operating systems, and mobile applications.

With so many platforms and icons, it’s hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.

If you still prefer to do it yourself and know all there is to generating proper favicon images and markup, have a look at this resource for everything there is to it and more.

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.

Web Developer Tools from Browserling


Browserling – an awesome cross-browser testing service, has a collection of Web Developer Tools, which are as simple to use as possible.  There are now more than 80 (!!!) tools, according to this Peteris Krumins blog post, that provide immediate help with things like converting dates and times, formats like CSV, JSON, Markdown, HTML, XML, etc, generating passwords, minimizing or prettifying HTML, CSS, JavaScript, and more.

10k Apart – Inspiring the Web with Just 10k

10k apart

From this article, I’ve learned about an excellent (for our times) 10k Apart competition:

With so much of an emphasis on front-end frameworks and JavaScript runtimes, it’s time to get back to basics—back to optimizing every little byte like your life depends on it and ensuring your site can work, no matter what. The Challenge? Build a compelling web experience that can be delivered in 10kB and works without JavaScript.

Think you’ve got what it takes? You have until September 30th.

I can’t wait to see the submissions and all the ways to squeeze the awesomeness of the modern web into just 10 kilobytes.  This reminds me of the Perl Golf posts over at PerlMonks and Assembly PC 64K Intro from my childhood early days (here are some examples).