A few months ago I was lucky enough to come down with a brain-nibbling virus that has made being vertical and straightened out (aka “standing”) a tad troublesome. It’s not that I can’t do it any more, it’s just become a special-occasions activity.

For a while I just relaxed watching YouTube, but eventually I came to the end (spoiler alert, it ends with a tank sliding off a truck into a frozen pond while gruff Russians bellow “nyet nyet nyet”).

Having nothing else within my physical circle of influence, I decided to read all the web-related specs (actually just the 80 best ones). This meshed nicely with my desire to generate a list of all the things I didn’t know about web development.

I blogged about this as I went, because I can’t keep my trap shut. First about the idea, then about the performance of the site, then about converting it to good old JavaScript. Along the way, a few other people expressed interest in the concept, so I decided to get a bit official and make a project out of it.

I put on my designer’s designer fedora and set out to create something that allows you to craft your own personal list of things you don’t know about web development, with the absolute minimum amount of effort.

Let us progress thusly:

• I will paste the link to the thing I’ve made.
• I will show you a few pictures of the thing I’ve made in case clicking a link is too much commitment for you.
• I will ramble on and on (and probably on) about the thinking behind this thing and you can leave if you’re not interested.

You all cool with that?

Good.

The link

know-it-all.io

The pictures

Lots of words…

What is expected of you

For each of the items in the tree, select how well you know it.

That’s it.

Oh, and then go learn the things you didn’t know, but want to know. Yes, don’t forget that part.

Why would I do this, David?

Firstly, don’t use people’s names when you talk to them, you’re not fooling anyone.

Secondly, like so many things in life, you need to look backwards from the future to see it clearly. Imagine six months from now, waiting in a coffee shop (or whatever you call a shop that sells coffee in your weird country) for your order of a cup full of cappuccino sprinkles to arrive.

You find a spot to wait that is out of the way (but somehow still in everyone’s way) and pull out your phone because quiet contemplation terrifies you. You bring up your trusty List Of Things You Don’t Know. The warmth of knowing you’re about to learn something washes over you.

Your eyes fall upon the top item … ah yes document.importNode().

You were intrigued when you first saw this, and now the time has come to learn what it does. You internet your way to MDN (or the spec if you’re hardcore, or w3schools if you’re softcore) and before you know it the coffee chick is screaming your name but you don’t hear her. You’re deep in thought wondering if you can hack up something funky with iFrames to get DOM rendering on a second thread.

If that doesn’t get your juices flowing, this app isn’t for you, and you should get your juices checked.

So the goal is all green?

Why you gotta be like that? No, the goal is to have no red. That doesn’t mean you need to know everything.

I know of WebGL. I have no interest in knowing it thoroughly. And at this point in my life I’m happy to say I don’t care about WebRTC. And push notifications will wait patiently for me until I’m ready, I don’t need to know it now — just like I don’t need to know how to fold a fitted sheet. It is enough to know that there are 82 videos on YouTube that I can watch (again) when the time comes.

This is a common enough sight in mine, plenty of orange (know of it) and grey (don’t care).

Actually I know EventSource, because I looked it up just after taking this screenshot, and recalled that I used it years ago in an experiment pushing NodeJS console output to the browser console via server-sent events (isolog, if you’re interested). Wow, that was two years ago. Time really flies when you don’t go outside.

This seems like it’s going to be an awful lot of clicking

That’s like being given a panda and complaining that your guardianship of said fluff ball will involve a lot of bamboo schucking. You’ve got a panda for God’s sake, stop complaining!

Fun fact: the World Wildlife Fund selected the panda for their logo because pandas are black and white, thus slashing their printer ink expenditure. Take that, peacocks, with your ridiculous CMYK plumage. Oh and since we’re on facts that sound made up, did you know that the novel 1984 was originally called 1982 but it was two years late?

Back to the matter at hand. If you’ve got a keyboard connected to your screen, you can use the arrow keys to move up/down and expand/collapse the tree. Use the number keys 1/2/3/4 to rate an item (or 0 to unrate, if you feel the need). You can even use two different hands!

(There is a really good reason that “Don’t care” is higher than “Know it” but I can’t for the life of me remember what that reason is.)

Even with the non-rodent navigation, you’ll often be thinking “wait, I really have to indicate that I know border-top, and border-right, and border-bottom, and border-left”?

Well, yeah. And here’s why, grasshopper: maybe I guess that everyone knows that there’s padding left, right, top, bottom.

I might be right, but maybe there’s someone out there that didn’t know that padding is shorthand, just like you thought font was always a shorthand.

And I might think everyone knows there’s display: block, and inline-block, and flex and maybe inline-flex? contents? run-in?

The point is, I don’t know what you already know; even you don’t know what you don’t already know. So the safest bet is to go through the whole list, one by one. And frankly, m’dear, I took the time to type all this out for you; it’s the least you could do.

As my final rebuttal to your complaints of copious clicking: don’t think you need to do this all at once. Just set aside some specific recurring time and bite off one little chunk at a time. Take the 10 minutes you normally spend every Monday morning asking people how their weekend was (“oh just a quiet one” means they don’t want to talk to you), and instead spend it going through this list. Or sneeze slightly quicker and use the time you save to go through this list.

And do you really need to spend time preparing completely different meals for you and the dog?

C’mon. Sands through the hourglass, people. And candles in the wind.

Big fat caveats

There’s thousands of items in this list; I don’t want you to spend a bunch of time going through them all and then your phone ends up at the bottom of the garbage chute when you throw out a pair of jeans because you spilled spaghetti sauce all over them and didn’t realise that your phone was in the pocket and now you feel naked and alone because you don’t have your phone or your pants.

Or your know it all scores.

So please be aware, your scores will be saved locally to the device. They are safe there, but not transportable (yet) to other devices.

Even though I wrote the list, I’m still going through it myself, and I’ve chosen to do it on my desktop because I like the keyboard shortcuts and the computer is nowhere near where I eat dinner.

PWA tricks

Know it all works offline (in super modern browsers) so once you’ve loaded the site you can safely use it with or without a connection. You can add it to your homescreen for easy access (and if you’re on Android, it will look and feel like a native app).

‘Old’ and ‘new’ items

You’ll notice some items have ‘old’ or ‘new’ tags.

It’s quite subjective but I had to do something. If you live in a world of supporting IE9 and see no way out, you can safely ignore anything flagged as ‘new’.

There are some things that are flagged as ‘new’ that are only in Chrome, but have reached W3C Candidate Recommendation and are under development in Firefox/Edge. So they’re on their way.

‘Old’ items are anything that is deprecated. Although even here there’s some subjectivity. MDN flags navigator.userAgent as ‘deprecated’ and says “This feature has been removed from the Web standards”. But it’s still in WHATWG and W3C so methinks they’re telling a fib to stop newbies using userAgent.

SVG is a bit of a mess, too. Some SVG 1 things are marked as deprecated, but SVG 2 isn’t really here yet, so we’re in a bit of version limbo. (Ooh, I wonder if they’ll go straight to SVG 4?)

But none of this should worry you because know it all is not a teaching tool, it’s a discovery tool. If it works as intended, it will help you find new things to learn, but then it’s over to you to go and learn them.

Including whether or not they’re worth learning.

Who wants to nerd out about data entry with me?

This is the sort of thing I would love to read about someone else’s project. And since I’m the epitome of normal I assume everyone else is the same. So here’s some behind the scenes action for you…

I spent a bit of time experimenting with the best way to get all of this data into one place. I wanted to type it all out (the goal of all of this is to learn, after all — hitting some API would have missed the point) so there were going to be many hours spent typing.

I looked at a few different tools, and discovered that the best software for entering hierarchical data, complete with shortcuts for indenting/outdenting and easy drag/drop to rearrange trees was…

Microsoft Word (outline mode with the nav open and split windows).

This dealt quite heroically with 10,000 headings, and the only hiccup I faced was its maximum of 7 levels deep in outline mode. The split view was excellent when it came to rearranging things.

And what, you are no doubt asking, is the best way to turn all that typed data into structured data?

Microsoft Excel.

Here I could split out the name, notes and tags using my Excel prowess that has been lying dormant from one of my previous lives (Lucy the ape thing > Tutankhamun’s bedtime story reader > frog > hairdresser to Jesus > just some dude in Italy > Excel trainer).

I then just copy/pasted the final column into WebStorm and boom, I was ready to build an app around the data.

The Word and Excel files are now in the bin and the nested JSON file is what goes in the github repo. At build time, I take the nested JSON and flatten it, adding parentId, visible, and expanded flags to each row. I then split it all into modules (CSS, HTML, JS, etc.) so that I can load them separately (I only need the CSS module for the first render) and because they’re a simple sequential list I can just append the rest as they come in. This was a big performance win, cutting down 10,000 items to just under 1,000 for first paint.

If someone wants to add Lodash or npm or capitals of the world or anything else they can just add it as a new node at the top level of the JSON file.

The end

Thanks for reading, and I hope at least a few people find this useful and discover a few new things. I’ve learned a crap load making it.

All feedback is very welcome. Either in the repo or down in the comments below, or throw pebbles at my window and say it in song under the moonlight.

Source:  https://hackernoon.com/master-web-development-with-these-9-985-weird-tricks-77c71d1d96f3#.6vzb4h9h2