Drop #318 (2023-08-16): I Bet They Can't Even 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, even if it started out in some form of Markdown.

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

This is an AI-generated summary of today's Drop.

Today, I “took one for the team” and temporarily installed Microsoft Edge (Dev channel) to try out Bing Chat. I converted the post's Markdown to HTML, shoved it on my site, and used the following prompt:

I need you to create a three bullet point summary of this page (one bullet for each section). I need each bullet to include a link to the primary resource mentioned.

It did make three bullets. They were verbose and required significant editing. Bing also failed to heed the “include a link” (though it did try).

• The MDN curriculum for front-end development is intended to be a free and comprehensive resource that covers the fundamental skills and best practices for web developers. It launches in Q4 2023.

• Things you forgot (or never knew) because of React discusses the drawbacks of React, a popular but outdated front-end framework, and encourages developers to explore other frameworks and technologies that offer better features and user experience.

• CSS Patterns showcases some CSS patterns that can be used to create interesting backgrounds for web pages.

Edge is now back in the trash heap where it belongs.

---

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

Photo by AbsolutVision on Unsplash

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. He uses a music discovery analogy to encourage folks to dig into what is available in the context of modern web development, vs. just accepting what is the equivalent of being told what's “good” by the zeitgeist.

An argument is made that React, despite its popularity, has fallen behind its peers in terms of features and adaptability, and 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 to new possibilities beyond the React bubble, including:

• Svelte

• Vue

• Solid

• Fresh

• Astro

• Preact

• Qwik

Josh tossed in 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 occasionally, 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 patterns, Temani Afif certainly 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 kind of fun just browsing the patterns.

FIN

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