Tag: css

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.

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.

Browsing The Web Without CSS

Jon Kantner turned CSS off to see how different the web would be and whether it’d function. Here were his findings.

I love using Dev Tools to see how HTML work on websites. It helps me learn and I’m nosey in all honesty. But what if there was no CSS? You’d hope a website would still function without it. After all, CSS stands for cascading style sheet. Jon Kantner tried an experiment where he browsed five popular websites with it turned off.

To do this yourself, Jon gave the following tips:

  • Chrome: There’s actually no setting in Chrome to disable CSS, so we have to resort to an extension, like disable-HTML.
  • Firefox: View > Page Style > No Style
  • Safari: Safari > Preferences… > Show Develop menu in menu bar. Then go to the Develop dropdown and select the “Disable Styles” option.
  • Opera: Like Chrome, we need an extension, and Web Developer fits the bill.
  • Internet Explorer 11: View > Style > No style

The websites he tried were Amazon.com, DuckDuckGo, GitHub, Hex Naw, Stack Overflow, and Wikipedia.

And his conclusion? Stylesheets should be secondary to the overall structure and function of the site’s HTML. But you already knew that.

Head over to CSS Tricks to read the article in full.

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.