What Danny Guo learned by relearning HTML

HTML does not stand for HoTMachineLearning.

Gotta love raw HTML.

I wondered what I was missing by never learning HTML in a comprehensive way. Forget CSS and JavaScript. I’m just talking about raw HTML. It might seem silly to go back to such a basic aspect of web development after a decent amount of experience, but it’s easy to become overconfident with a skill just because you know enough to do a few useful things.

So I decided to relearn HTML and discover my unknown unknowns.

Everyone should learn HTML. It’s easy and doesn’t break as much as other programming languages.

Plain HTML works

A lesson in priorities when it comes to coding for the Web and for the people using it.

Great piece from Terence Eden on the importance of simple HTML.

If your laptop and phone both got stolen – how easily could you conduct online life through the worst browser you have? If you have to file an insurance claim online – will you get sent a simple HTML form to fill in, or a DOCX which won’t render?

What vital information or services are forbidden to you due to being trapped in PDFs or horrendously complicated web sites?

Are you developing public services? Or a system that people might access when they’re in desperate need of help? Plain HTML works.

You may or may not have noticed that I changed the design of this site last night after 4 years of having the old one. I used to strive for aesthetically pleasing themes until I realised just how much data they used and how slow they were (thanks Lighthouse). There are probably “cleaner” themes than this one and it’s still a work in progress but HTML and readability will always be my priority.

If your site relies on JavaScript over HTML, it’ll be blank if it breaks. HTML can be “broken” and still work. Think about that before you put your faith in a million and one JavaScript libraries for a 5-page site.

See also: Tatiana Mac on Hacking Digital Style Guides for Accessibility

20 Web research studies/surveys from 2020

The likes of Google, Mailchimp, and Stack Overflow have generated reports about the state of the Web in 2020.

CSS Tricks compiled a list of 20 surveys, studies, and almanacs involving Web research. Everything from HTML, CSS, JavaScript, and UX is covered and judging by the findings, it’s been a very busy year for the Web as more of us have been using it during the pandemic.

You can read the full list on CSS Tricks but here are 5 of my favourites:

  1. 2020’s Web Almanac by HTTP Archive (which features some of my industry colleagues in the SEO section)
  2. State of CSS 2020
  3. Google’s Year in Search
  4. Mailchimp’s 2020 Annual Report
  5. Stack Overflow Developer Survey 2020

I wonder what the future holds for the Web in 2021 with a new US president on the way and a second year of the pandemic (because it won’t just disappear next year). If you have any thoughts, let us know in the comments.

89 YouTube channels to help improve your coding skills

Need some coding inspo? Check out these YouTube channels curated by Dev&Gear featuring Colt Steele, Chris Coyier, and Ania Kubów.

When I’m invested in a subject, one of the first things I do is scour the Internet for books, tutorials, and YouTube videos about it. They help me learn, gain insights from other people’s experiences and shape mine. So I was super stoked to find this “ultimate list of YouTube channels to boost your web development and programming skills” by Dev&Gear.

I won’t copy the full list of 89 channels (it’s bad blogging etiquette) but I will list some of the channels and people I’m already subscribed to or I’m otherwise familiar with:

What YouTube channels do you follow for web dev knowledge? Let us know in the comments.

Anna Lytical codes a website with nothing but copy and paste

The sickeningly entertaining coding drag queen uses copy and paste to create a website in HTML, CSS, and JS.

Hands up if you’ve copied and pasted some code from Stack Overflow to make something work. I know I have.

And that’s okay because Anna Lytical understands. The coding drag queen made a video in response to some men who got upset at her tweet saying:

no one tells you “coding” actually is:  - 30% cutting/pasting from google
- 30% coffee break
- 30% debugging with console.log
- 9% figuring out what’s wrong with your parenthesis/data types/loops
- 1% actually coding

Cue a bunch of misogynistic tweets. Boohoo to those men. If you don’t know Anna Lytical, she works as a developer relations engineer at Google, but creates video content in drag in her spare time with a mission “to teach the children how to code” and “engage a young LGBTQ+ audience with code and tech”.

In the video, Anna makes a website where she only copies and pastes HTML, CSS, and JavaScript code from the internet to tell her whether RuPaul’s Drag Race is on that day.

That’s exactly how I learnt to code when I started in 2001 at the age of 11. You can study from books and academic material for as long as you want but you’re gonna have to put the code down at some point. And if you learn via copying and pasting, so be it. Of course, you shouldn’t just blindly do it and never actually learn the syntax and context, and that isn’t what Anna Lytical is suggesting, but to call someone a “bad coder” for doing it is nonsense. Especially when other men can make these kinds of jokes and they’re understood as humour.

And if you don’t like it, go copy and paste rm -rf / into your terminal and hit enter*. But if you love the video and want to see more, subscribe to Anna Lytical on YouTube and follow her on Instagram, Twitter, and Patreon.

* – Please don’t actually do this or you’ll wipe all the files on your computer.

My new favourite blog post is about hypertext from 1998

Hypertext still makes the world wide web go round but things were really spinning back in the 90s.

This is a hyperlink to a post about the internet in 1996. The words inside it are known as hypertext. They connect to different pages and give us what we know as The Web. Think of them as the words on signs. Web pages are coded with a markup language called HTML or hypertext markup language.

Hypertext is a fundamental element of The Web but we take them for granted now. We click on them without thinking about how cool it is to have a web page full of information linking to more information. That’s how we fall down Wiki rabbit holes. Before the creation of Wikipedia, we only had blogs to link us to the weirdest places on the web. Jason Kottke is one of the original bloggers and in 1998 he wrote possibly my all-time favourite blog posts. I can’t pretend to have seen it at the time as I neither had a computer nor did I know what The Web even was.

Hypertext and HyperMedia are concepts, not products.*

Kottke saw a lack of appreciation for hypertext even then, only a decade into The Web’s life. He called it a “communications medium” that was “almost an afterthought on the web”. If hyperlinks weren’t appreciated in 1998, they’re certainly not appreciated now. At least not to the general public. Hyperlinks are an integral part of digital marketing in the form of backlinks as they help the authority of domains, which contribute to where sites place on Google’s search results pages (or SERPs).

My favourite part that showcases the important of hypertext is this:

The real promise of hypertext is to provide more information about what you are reading. Consider the line “the meek shall inherit the earth.” When reading this line, I might want to know:

– that this is a quote from the King James version of the Bible, Psalms 37:11.

– the meaning of the word “meek”

– about inheritance laws

– the circumference and mass of the earth

– the earliest recorded use of the word “shall”

The power of hypertext lies in the power of knowledge. A simple phrase like “the meek shall inherit the earth” has many links to many ideas, as described above. A phrase like “the cat sat on the mat” might conjure thoughts of:

  • Childhood rhymes
  • Cat breeds
  • Persian rugs
  • Persian cats
  • Memes about cats being Muslim on prayer mats

I have an interest in semiotics and hypertext seems like a modern extension of that. Coincidentally, it exists in the realm of semiotics but with a different context. Semiotic hypertext is defined as text related to earlier work. Prof Paul Wouters of Leiden University wrote a paper on The Semiotics of The Hyperlink, where he addressed the concept of hyperlinks and looked at postmodern and literary studies about as well their relationship in computer science and Webometrics. Woah, what the hell are webometrics I hear you ask. Well, it’s the science of measuring the Web to obtain knowledge regarding hyperlinks, their quantity and type, the Web’s structure and how it’s used. If you haven’t noticed already, this is becoming a hypertext rabbit hole about hypertext. How meta!

So far, this article has featured 7 links so far. If you’ve clicked on any, you’ll have learnt about internet in 1996, what The Web is (not the same as the internet), Wikipedia rabbit holes, what backlinks are, a cat sitting on a mat, hypertext in semiotics, and an academic paper on the semiotics of the hyperlink and webometrics. And now that’s 8 when you include the definition of the internet. That’s how powerful hypertext is. They point us in the right direction and sometimes we travel down paths we didn’t know existed.

Further reading

*Quote taken from the first ever website.

1MB – the service offering affordable web hosting

No longer free but still cost-effective.

I can still remember learning about web design on Frontpage Express back in 2001. Things were still primitive back then, even after the dot-com bubble burst in 2000. Flash was the latest craze but simple websites (now called brutalist websites) still reigned supreme.

The good thing about non-Flash websites was their small size. Internet speeds were slow in today’s terms so larger websites took longer to load and used up more data. Now most people in Europe and the US use broadband and superfast speeds are literally that. That means bigger websites can get to users quicker. But not for everybody. Internet is still expensive in Africa and the Caribbean and bigger websites eat up data like no one’s business.

1MB might be a nifty solution for that. They’re a free web host “designed to make web development feel more approachable”. But there’s a catch: your site has to be 1MB or less in size to use the free service. Most web pages go over that.

With 1MB, you can host HTML, CSS, and JS. The service comes with a browser-based code editor with templates and live previews. It’s a quick service to get you onto the web.

Other features include:

  • Free custom domains and SSL certificates
  • SQL-less databases
  • Command line and API deployment

But if you don’t see yourself squeezing your site into a 1MB box, there is a Pro version offering 5GB of storage, up to 50 sites, image hosting, and instant apps.

1MB is a lesson in web brevity – how much can you do with a small amount of data? It’s a great lesson in stripping away superfluous code and leaving the fundamentals.

If 1MB sounds like the right host for you, register today!

Update: Sadly, from 11th May 2021, all free 1MB sites will be shut down. In an email today, 1MB stated:

We are reaching out to inform you that all free 1MB sites will be permanently deleted on May 11th, 2021. The process will begin around 3PM EST. This is all in an effort to make our platform more financially stable and support a brighter future for us. We just introduced some new affordable pricing you can check out here: 1mb.co/pro

While their Pro packages are affordable, it’s a great shame that their free hosting is disappearing and 1MB is really just a name now.

The History of CSS

Jason Hoffman of CSS Tricks took a trip down memory lane this week to look at the history of CSS.

Hoffman’s article A Look Back at the History of CSS gives an account of how we came to style websites in the first place. From Marc Andreessen claiming there was no way to style a website with HTML back in 1994 (at least at the time) to the introduction of SCSS in 2017, the language has come a long way.

You get to see how CSS code used to look (things were measured in centimetres at one point) and how browsers found it difficult to translate it all.

If you enjoy his article, you should consider subscribing to his weekly newsletter called The History of the Web.