Drop #318 (2023-08-16): You Can't Spell HTML

MDN Front-End Developer Curriculum; Things You Forgot; CSS Patterns

Faithful followers of the Drop are, by now, used to my rantings about how we're all web developers. Most readers generate some content, on the daily, that is read in a browser context. That content contains HTML, CSS and — very likely — JavaScript. Some go beyond that and, directly or indirectly, create interactive experiences, as well (think "Shiny", "Quarto", "Jupyter", "Flask", etc.). As such, it remains important to keep on top of tools, tips, and techniques so said content is both increasingly more compelling and easier to create. So, today we focus, once more, on the front-end.

TL;DR

MDN Front-End Developer Curriculum

MDN (Mozilla Developer Network) has announced the creation of the "MDN curriculum for front-end development." This resource aims to provide industry recommendations for the fundamental skills and best practices that front-end web developers should have. It also includes soft skills and mindset guidance for long-term success. The curriculum is based on extensive research conducted by the MDN team, which identified key gaps and problems in front-end developer skills.

The curriculum will be available for free and is organized into three major sections:

Precursor knowledge: Topics that are not, strictly speaking, web development topics but do constitute useful topics for anyone wanting to learn front-end web development. This includes soft skills and knowledge of a typical development environment.
Core modules: Topics that we feel every web developer should have a good grounding in. These modules include all the information they need to design and build a basic, accessible website/app that follows modern best practices, and manage and deploy their code using a tool like GitHub.
Optional extension modules: These "extension" topics constitute useful additional skills to learn as web developers start to expand their knowledge and develop specialties.

They're seeking feedback from the community to ensure the curriculum is comprehensive and helpful to its target audiences. The official launch is planned for Q4 2023

The MDN resources are top-notch, and I suspect this will be as well (the GH preview reinforces that assertion).

Once they do officially launch this resource, it may have a cascade effect in this particular space. There are scads of designers and developers who have similar (paid) content out there. If this ends up covering what that content also covers, it may force those folks to rejigger their own offerings to include more advanced content. Either way, this should be something that makes its way to your bookmarks once it's released.

Things You Forgot

In "Things you forgot (or never knew) because of React", Josh Collinsworth discusses his experience with React — the aged, massive, popular, and 100% unnecessary front-end framework, and how it can limit developers from exploring other tools and technologies. Josh uses a music discovery analogy to encourage folks to dig into what is available in the context of modern web development vs just accept what is the equivalent of being told what's "good" by the zeitgeist.

An argument is put forth that React, despite its popularity, has fallen behind its peers in terms of features and adaptability. The post highlights the importance of considering user experience over developer experience and encourages developers to explore other frameworks and technologies beyond React.

While the presence of a giant community and heft set of ancillary resources is always a "nice to have", the truth of the matter is that ecosystem size should not be the sole determining factor when choosing a framework (for these front end bits or any development or data science context), as there are well-supported alternatives available.

Overall, the post aims to introduce us all to new possibilities beyond the React bubble, including:

Josh included a few quotes from Alex Russell, including this one, which I'll use as the section's closer:

React is ‘13 tech designed to ‘08 constraints. Nothing about it is innovative in 2023; in fact, it’s the slowest way to get functional-reactive front end programming in the modern era.

CSS Patterns

As I've noted on a few occasions, I'm more of an "assembler" than a creative-type. As such, I rely (heavily) on examples and resources others have built.

While I do not have a ton of use cases for CSS background patters, Temani Afif sure made them super-easy to use GH. Just find one you like from the myriad of choices, tap the "copy" button and use it. That isn't an oversimplification, too. I did those exact steps to make this example page.

For the "CSS gradient curious" out there, this is a sample of what the code looks like (using a different pattern from the one in the aforementioned example):

html {
  --s: 50px; /* control the size */
  
  --c:calc(50%/3),#0000 75%,#5E412F 0; /* 1st color */
  --g:conic-gradient(at 50% var(--c));
  --l:conic-gradient(at var(--c));
  background:
    var(--g),
    var(--g) calc(var(--s)/2) var(--s),
    var(--g) var(--s) calc(2*var(--s)),
    var(--l) calc(2*var(--s)) 0,
    var(--l) 0 var(--s) #CCC68D; /* 2nd color */
  background-size: calc(3*var(--s)) calc(3*var(--s));
}

Honestly, it's fun just browsing the patterns.

FIN

I am (still) eagerly awaiting the next release of Svelte, which will be using JSDoc vs TypeScript. ☮