A few months ago, I was following a couple of very content-rich courses on Scrimba, furiously taking notes into Notepad++.
Although it might seem like a waste of time to take notes from material that you can revisit any time, doing so helps me concentrate. Just writing notes isn't enough to get confident with the material, though. I need to edit and rearrange my notes to make myself actually read them and take material in.
In this case, I decided to kill 2 birds with 1 stone by making myself a fully responsive local website using HTML to store my notes and present them in a usable and attractive way using css. That way, I could implement the practices I was simultaneously writing into my notes.
Local Notes Website 1.0
By the time it was 90% finished, I'd done more than just practice some HTML and css. I had also picked up some additional skills and knowledge that should come in handy, such as:
- using BEM with css;
- the advantages of building sites mobile first;
- using the before and after pseudo elements effectively and creatively;
- how position and z-index contexts are created;
- how to use css counters;
- how to create a table of contents in Javascript;
- how to smoothly stick and shrink a header on scroll in Javascript; and much, much more.
Local Notes Website 2.0
Despite all that I'd learned and done, I was not happy with my results, because I didn't have any reusable components in my project. I was just copying and pasting HTML for the header, footer and table of contents on all of my pages.
What I had wasn't anywhere close to dry. In fact it was so wet, it might as well have come from the Mariana trench!
I thought of putting my project aside until I'd got a little into React and then recreate my site. But first, I really wanted to create code that was as dry as it possibly could be using only HTML, css and vanilla Javascript.
So I started researching web components and recreated my header, footer and table of contents as web components.
Recreating the site that looks identical to the end user was eye-opening. I refactored, edited, researched, watched YouTube and consolidated over a couple of weeks and my code is now more Sahara Desert than Mariana Trench, even if I do say so myself.
What Notes 2.0 taught me
I got so much out of redoing my project that I can't remember the half of it! In any case, I learned:
- What is the shadow DOM and how to use it;
- How to create and use custom elements;
- What encapsulation means in the context of web components;
- How to really use Javascript classes, in particular: a. what actually is a prototype; b. the ins and outs of 'this' and binding; c. lifecycle hooks (and a bit more about using callback functions with classes generally); d. how to properly declare methods on classes and how to invoke them.
And what's more, I'm pretty sure that I've got myself off to a good start when I turn to React!
Some hard lessons from 1.0 and 2.0
While I clearly haven't wasted my time building my project and then rebuilding it, I've learned a couple of things the hard way:
- Always click on the little (i) tooltip in the inspector. You might save yourself 2 days of searching. I spent days trying to work out why my header was jumping to the bottom of the screen on the first scroll. I tried and tried to solve my problem with heavy use of developer tools, but didn't bother clicking on the "!" against my header component in the inspector. When I did, I got the immediate answer, something I'd read in passing right when I started building the header. Web components are automatically created with
component {
display:inline;
}
Clearly this was the source of my problem! I made the change to
component {
display:block;
}
Problem solved!
2.If a Javascript function just won't fire, make sure you've actually called it somewhere....
Local Notes Website 3.0?
There may yet be a 3.0 version of this project using React, but at the moment I don't know enough about it to decide.
Even of that project doesn't come about, though, I completely agree that:
When you learn through coding, [you're] coding to learn. You're learning it in a meaningful context, and that's the best way of learning things.
Mitchel Resnick
About Me
Once upon a time I was a usability engineer. After many years in that field, I finally realised I had made virtually no usability improvements to any products, because my time was almost entirely taken up with trying to persuade developers and product managers to take account of users. I also virtually never got to talk to actual users, because - politics.
I made a complete lifestyle change and now have a job I love, but it only keeps me busy for half of the year. A couple of years ago, I rekindled my interest in html and css and more recently I've taken the plunge into Javascript. React comes next.
From time to time I throw some very raw and unfinished stuff into Codepen - here's the web component version of this project and GitHub repositories.
You can find me (mostly lurking) on Twitter @liveinlapland.
Top comments (0)