Is Vanilla Tech Just for Juniors? Exploring the Role of HTML, CSS, and JS in 2024

Episode Sponsor - Magic Mind & Wix Studio

Magic Mind returns as an episode sponsor this week and we thank them for their support!

‍Limited time Magic Mind deal for our listeners!

https://magicmind.com/HTMLPOD20 - 20% off for one-time purchases and subscriptions (Use the link and code!)

Code: HTMLPOD20

Wix Studio: The Web Platform for Agencies and Enterprises

Wix Studio is the new web platform tailored to designers, developers and marketers who build websites for others or for large organizations. The magic of Wix Studio is its advanced design capabilities which makes website creation efficient and intuitive.

Check out Wix Studio today.

How to support the show? 

Patreon

Prices subject to change and are listed in USD

• Support the show from as little as ~$1/month
• Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
• Help support the HTML All The Things Podcast: Click Here

Show Notes

What is vanilla tech?

• HTML, CSS, JS
  • HTML is your skeleton
    • Extra html functions: https://markodenic.com/html-tips/ 
  • CSS is your styles (colors, responsive layouts)
  • JS is your interactivity
• In this episode we’re going to be focusing primarily on the these frontend vanilla technologies

Why is vanilla tech a hot button issue?

• Vanilla tech still “runs the web” 
  • We interact with websites in an almost entirely GUI-manner
    • Even accessibility tools for those with eyesight impairments interpret the GUI in various ways - typically audio - the tools are effectively reading the screen then helping navigate
  • GUI is generated by HTML, CSS, and JS in your browser
    • This happens despite your fancy plugins, frameworks, libraries, etc.
    • The browser interprets the HTML, CSS, and JS together to render the UI
    • If you’re using a UI creation tool (like a framework, plugin etc.) then it will commonly compile down to vanilla code
  • This means that anything a fancy tools can do, can be accomplished in vanilla tech
• Aspiring junior developers are often told to learn HTML, CSS, and JS because they’re so foundational…but this is where the problem starts:
  • Vanilla tech, despite its name, takes a long time to learn because it can become very complex
  • Popular tooling is often required by many employers (ie React) and they also take a long time to learn
  • Argument: You should go straight for a popular tool in your learning to get a job faster, vanilla tech has no place in modern web development
• In our recent episode “Why is web development a cluster f*ck?” Mike did an overview of the history of web development through the ages into modern time
  • Not going to reiterate everything
  • The overall impression I got was that we are going even deeper into abstraction layers (more and more tooling) which divides developers even further from foundational vanilla tech - does this mean that foundational tech is becoming less relevant in 2024? Is it just a learning tool?

Is vanilla tech just a learning tool?

• Yes (for some)
  • If you’re looking to get a job at a web dev agency or join a team of internal web developers for a large company - then you’ll largely need to use the tools that they use, which will most likely be a popular dev tool (ie React) or a very proprietary enterprise CMS solution (ie Adobe’s Magento)
  • If you’re interested in building your own online business and are hard-set on a tech stack that doesn’t involve writing vanilla
  • Note: In the two above situations, vanilla tech will only be used in training, if you use them at all, many people will skip learning the foundations to get started quickly
• No (for some)
  • If you’re using a website builder solution (ie Webflow agency, WordPress w/ site builder plugins)
    • You probably don’t know code at all, and if you want to extend your capabilities outside the possible solutions offered by your tools, vanilla tech typically plugs into site builders quite well and easily (ie Webflow quiz building)
    • Many web devs will roll their eyes at the idea of a Webflow agency, but in reality some people go this route to make money fast - the same reason why people will argue vanilla tech is dead (learn frameworks first to get a job faster)
  • If you’re trying to be versatile
    • Learning foundational tech allows you to learn programming logic and syntax that works on virtually any website solution today
    • Foundational tech allows you to extend the functionality of website builders (as mentioned above) and even make changes to sites that are built with frameworks to some extent
    • By having vanilla tech knowledge, it’s typically easier to transition between frameworks and tools (a great skill to have with new tools and approaches coming out relatively quick these days)

Vanilla Tech Examples in 2024

• Websites that need to be very performant (ie bad network connection - dial-up speeds)
• Manipulating and extending no-code
  • Built a quiz using a Webflow email form, Webflow styling, custom JS, custom HTML
• Adjusting content in a CMS when the visual editor doesn’t get it quite right
  • This happens more than you think! CMS can have a pretty clunky rich-text editing solution that generates some messy HTML (or just straight up incorrectly represents your content)
  • There is almost always a “code editor” built-in so that you can go in and fine-tune the HTML
• CSS adjustments to WordPress themes
  • Make adjustments that have no UI controls to WordPress themes
• Add functionality for free!
  • Don’t install another WordPress plugin for something simple, some custom HTML/CSS/JS can usually do the trick! For example, I’ve achieved conditional visibility on an older version of Elementor Pro using custom attributes and tailored CSS