The state of today's discourse around frontend web education is not in a good place.
Many managers believe they must adopt React (or similarly heavy and slow) tools because "that's what we can hire for". Students are told that they need to learn legacy frameworks "because that's what employers want".
These stories elide the primary role of professional frontend work: to serve users and the organisastions that serve them. They also underplay how advanced browsers have become, and the value to society in building faster, more accessible products with lower complexity.
We assert that students and businesses are best served when they focus on fundamentals. These fundamentals provide a lifetime of value to those who learn them and drive success for the products and services based in them.
This document is not a manifesto, but it is designed to help catalyse a return to basics, arm learers and prospective employers with a list of long-term valuable skills to value, and to connect to communities of practice that hold end users in the highest regard.
Browser teams and volunteers jointly maintain documentation essential to the web community1 at "MDN"; the canonical repository of web API references.
If you are just starting with web development, or looking for a basic list of skills all web developers must master, MDN's "Getting Started With the Web" is the best place to start. It walks you through the basic software to install, as well as painless introductions to HTML, CSS, and JavaScript. We recommend also spending time with MDN's "Basics of HTTP" as well, as networking is essential to delivering experiences on the web.
Learners and businesses will encounter differences between browsers and come to value skills in dissecting experiences that aren't going right. For this, each browsers's built-in development tools ("DevTools") are powerful debugging aids:
As you work through examples, keep DevTools open so that you can build an understanding of how changes to your pages impact the UIs that are delivered.
To build for the web is to author HTML. It is not uncommon to hear seasoned developers who look into HTML again to say something like, "I didn't know this existed." HTML has incredible capabilities and many of the things we build to "work around HTML" are unnecessary.
- "Learn HTML" on web.dev
- "HTML basics" on MDN
To build for the web is to work with CSS. Beautiful design and web pages rely on CSS and not enough developers are aware of its capabilities. The teaching and instruction in the industry around CSS has gotten really good in the past few years. Features are being added to CSS frequently that therefore allow for further leaning into its capabilities as a standard.
- "Learn CSS" on web.dev
- "CSS basics" on MDN
- "Getting started with CSS" by Jen Kramer
Interactivity is probably the trickiest concept to grasp. At face value it is very simple. However, JavaScript is meant to "add" interactivity to the site NOT be the thing applications are dependent upon.
- "JavasScript basics" on MDN
- "Getting Started with JavaScript, V2" by Kyle Simpson
There are an incredible amount of resources ranging from free - thousands of dollars. Everyone has their preference. Below are a few recommendations. If you are looking for feel free to message me, Ben, on LinkedIn
- "Web Component Engineering" by Rob Eisenberg
- "Frontend Masters Web Components Workshop" by Dave Rupert
- "Intermediate HTML and CSS" by Jen Kramer
- "Responsive Web Design" by FreeCodeCamp
We understand there is no 'one size fits all' when it comes to people who are either learning web development or coming to this document to understand web standards and best practices. Our aim in outlining the paths below is to provide a suggested path for those at various stages of their journey or coming from different engineering backgrounds.
You have decided what you want to do. Whether you are changing careers or you are deciding what to do as a career path, you are setting out into the world wide web as an architect and artisan, not simple a consumer. The suggested path here may seem daunting but do not fear, there are resources a plenty on your path to help you along the way.
As you go you may be wondering if you should "specialize". We think this is best left to after you have started working and can start to zero in on the aspects of being a web developer or software engineer that will become available to you within a workspace. The resources we have above are not the resources that would make you a "full-stack" engineer. That is intentional for the purpose of this document. We want you to become excellent with web standards technology so that when you add the other skills to become 'full-stack' you will be able to do that with excellence and confidence and not over reliance on tools to make that so.
Inevitably we know this is difficult, for many reasons. Some reading this may initially be repulsed or find some mild anger rising. Some may be utterly confused. And some may be thinking, "finally somewhere to find out more." For these reasons and more, the first set of resources and links we want to provide here are links to help us think more critically about how we build web applications. Let us be clear, there are many, many incredibly skilled wonderful engineers who use React and love it.
The purpose of what is being laid out here is to "present the data", as it were, to help frontend developers, agencies, and so on understand the choice that is being made when React and associated frameworks are the "obvious" choice. The standard here which we are setting forth is Progressive Enhancement. This inevitably raises the question in many a React developer's mind, "but who isn't using JavaScript these days." Whereas we concede that is likely to be true, that most people do not have JavaScript disabled, the more telling marker is to ask, "will this break if JavaScript is turned off?"
Progressive Enhancement is about providing a first class User Experience to all users of your app. If your application or site will work without JavaScript and JavaScript is only used to sweeten the experience of your users, it will be more performant and a delight.
The more JavaScript shipped to the page, the greater impact it will have on performance. Many of us Web Developers have iPhones and a Macbook or other high end devices. The vast majority of the population does not. Meaning on high end devices the app with more JavaScript may not have a perceived difference but as the app scales, performance drops. If you make it work without JavaScript and Enhance it with JavaScript, your work will be more resilient. Resilience isn't revisiting your work every 6 months to year and updating your dependencies. Resilience is writing your app knowing it could continue to run without ever being updated.
This is not a dream. It is a present reality that many of us are ignorant to and don't take advantage of. We want you to have longevity in your career and work. Knowing standards means you are flexible and can adapt to the new thing should a job require it. Knowing the standards means that you have confidence in your work.
- Alex Russell makes browsers
- Ben Patton optimistic builder and dreamer for the web
Footnotes
-
Historically, Microsoft's "MSDN" hosted the most important and authoritative documentation, but in the past 15 years this torch has been passed to Mozilla's MDN, which now recieves contributions from all major browser teams, as well as a community of dedicated volunteers. Getting involved with MDN and working to improve articles that you find confusing is a great way to help improve the commons!
If you are working in web technology professionally and can afford it, you can also support MDN directly by subscribing to MDN Plus. ↩
-
Mozilla also produces a version of Firefox specifically taylored to the needs and interests of working web developers; you can download and use it without worry that it will replace your default browser. ↩