What are some examples of less obvious web development features/technologies worth learning?

I've been working as a bona fide junior developer for almost 6 months now and I've got a reasonably good handle on the foundations of web dev stuff and know the big obvious things to learn.

But what are some useful but maybe lesser-known technologies worth looking into? One example I saw would be WebSockets which I only really noticed after seeing them in an interview task example. Another would be looking deeper into ES Modules and trying to understand how they actually work.

Love to hear what you think and recommend!

Comments

[Austin S. Hemmelgarn]

The HTML <template> element. A lot of people just default to using complex application frameworks like React or Angular even for stuff they really don't need to just so they can get the templating functionality they provide. In reality though, if all you need is basic templating, you can get it easily by just using HTML <template>'s yourself, and it will often outperform the templating provided by many of those frameworks.

[Sean]

IndexDB, Web Workers, WASM

[Pacharapol Withayasakpunt]

How far do you need to know WASM if you are using JavaScript?

[Sean]

WASM is about creating bindings between one language, like Rust, and JavaScript. So if I have a function that does expensive calculations I could create it in a faster language like Rust, create a binding for it and compile it into a wasm module that gets imported into JavaScript. Then I just use the function as any other JavaScript function. So to answer your question, you don’t need to know wasm at all, you need to know a compiled language and the simple API that provides the bindings.

[Daniel Brady]

I’d suggest exposing yourself to new ways to think about problem spaces, rather than spending time diving into specific technologies if you don’t use them on a daily basis. The return on your investment will be higher early on in your growth as an engineer.

Some examples from my own life:

• Read Structure and Interpretation of Computer Programs, and work through the exercises. It really helps you grok what coding is, and shows you how to see your programs through the eyes of the machine: as data.
• Watch lectures on ethics in computing and data science. With the barriers between data science and computing science blurring more and more, and the power each developer has to impact ever-increasing numbers of people, it is critical that we all think about the culture we build into software.
• Take a simple computing problem, such as the classic “fizzbuzz” exercise, and pick a language, and solve it in as many ways as you can. For an added challenge, do this for a handful of different languages. For an even better challenge, choose unfamiliar languages, and/or languages that are drastically different from each other. The main value of this comes from the various perspectives it forces you to think from.

[Dean Radcliffe]

RxJS Observables - they're like Promises on steroids. But so that you don't have to climb their steep learning curve, I've written a helper library called polyrhythm that gives you a feel for what they can do in a friendlier coding style. :)

Here's a chat app that works like the one on your phone: codesandbox.io/s/poly-chat-imw2z

I'll be making a dev.to post about that soon, so I'd appreciate a follow if you're interested!

[Pacharapol Withayasakpunt]

• I would recommend knowing both WebSockets and socket.io at some point.
• PWA
• Webextensions API
• Webcomponents

Things like Observables and programming patterns would also be helpful to know.