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.

Presentation slides with HTML5 systems

In the last few month I had to prepare quite a few presentations and slides.  This is not something that I’m very familiar with, so every time I end up with either LibreOffice or Google Slides or some other overpowered tool.  Clicking around, formatting and reformatting, and having absolutely no version control that I am so used to for my programming and system administration needs – I thought there must be a better way.

Looking at some of the technical talks and presentations around, I discovered that the world is indeed a better place than what I think of it after spending hours in the fight with fonts and pictures.  Apparently, there are quite a few systems now that utilize the power of HTML5, CSS, and JavaScript to help a semi-technical person keep his sanity.

Sitepoint has a helpful list of “5 of the Best Free HTML5 Presentation Systems“.  Some of the links are broken, but even those that work have enough options to choose from:

I have a big and important presentation to prepare next week, so I’ll give these three a go and see which one I like the most.

HTML Canvas Tutorial

Skilled.co put together this HTML Canvas Tutorial, which covers the HTML 5 <canvas> functionality, that allows web developers to draw all sorts of graphics on the fly, using JavaScript.  The tutorial is available for download in PNG and PDF formats, as well as on the webpage, and it covers the following:

  • Shapes
  • Styles and color
  • Text
  • Images
  • Transformations
  • Compositing and clipping
  • Animation
  • Pixel manipulation
  • Hit regions and accessibility

It also provides a few useful tips, inspiration, and links to other resources.

Is INPUT tag valid when used outside of a FORM tag?

Here is an update from the “learn something new every day” department – using <input> tag outside of (or, in other words, without) <form> tag is perfectly valid.  It’s valid in the newest HTML5 spec, and it was valid with earlier versions of HTML and XHTML too.

Interesting, that today was the first time I came across this, after doing HTML for almost 20 years.

DevDocs.io – a local cache of searchable documentation

DevDocs.io – a local cache of searchable documentation

I’ve heard about this project for a while now, but tried it only today.  This blog post left me no options.  And I’m glad.  Because DevDocs are absolutely awesome!

Echo – lazy-loading HTML5 images with data-* attributes via JavaScript

Echo  is quite handy for web developers.  On those pages that feature a lot of images, things can get slow and the server might get too much of an abuse (with more traffic thrown at it).  One way to work around this is to only load those images that are in the visible part of the screen.  Here is a demo of how it works.  Just keep scrolling down and notice how by default you have a blank.gif image shown, with a standard loading indicator and a split second later you see the actual image which was supposed to be in there.

Simple, easy, elegant – and that’s how I like it.