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.

My lightbulb moment with modular design

Cameron Lock, of Yammer fame, describes the complexities involved that led her and the team to a simpler, more modular approach to the mobile application design.  The most important bit after grouping everything into modules, practically, I think, is this:

We stopped defining margins between modules. Instead, all the spacing in the app would come from padding within the modules — specifically, top padding. Bottom padding would have worked, too; just not both. The key is to choose one of the two and stick with it.

Modular CSS : Block, Element, Modifier

I don’t do a lot of front-end work these days, but I am genuinely interested in approaches that help build modular systems, especially when the subject is something as messy and as context-dependent as CSS.

Recently, I came across the Block-Element-Modifier approach, aka BEM, which I find interesting.

If you’re not familiar with BEM, it’s a naming methodology that provides a rather strict way to arrange CSS classes into independent components. It stands for Block Element Modifier and a common one looks like this:

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

The principles are simple — a Block represents an object (a person, a login form, a menu), an Element is a component within the block that performs a particular function (a hand, a login button, a menu item) and a Modifier is how we represent the variations of a block or an element (a female person, a condensed login form with hidden labels, a menu modified to look differently in the context of a footer).

This follow-up article provides more details and examples.

Web Developer Tools from Browserling

browserling-effortless-cross-browser-testing

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

CSS Hamburgers

After spending years and years in close proximity to web and user interface design, I’m still amazed sometimes at a variety of ways to solve even the simplest of problems.  The growth of the web users on mobile devices has brought us the hamburger icon, which usually hides the collapsed navigation menu.  It looks like this:

hamburger

Now, when you click on that, something happens.  The menu expands or collapses, usually.  But what you don’t often notice is a tiny bit of animation that is applied to the icon itself.  Here is a collection of such animations.  There are 14 different effects, both in 2D and 3D.  Wow!

css hamburgers