Into the (vanilla) JavaScript weeds-this week's ready from Web Directions
A couple of weeks back we launched our Dev Summit program, and it is if we do say so ourselves fantastic. Chock full of??relevant, in depth valuable talks for any and every front end developer. Take a look at the lineup with more to come!?
There's also??stellar workshops–one Modern CSS with Miriam Suzanne (the person who brought us container queries among other things) and on Web Components with Scott Jehl. Modern teams need to know about these technologies, so what better place to go in-depth??
This week's reading
This week we're into the weeds, with some detailed reading on memory management
How Google handles JavaScript throughout the indexing process – Vercel
Understanding how search engines crawl, render, and index web pages is crucial for optimizing sites for search engines. Over the years, as search engines like Google change their processes, it’s tough to keep track of what works and doesn’t—especially with client-side JavaScript.
We’ve noticed that a number of old beliefs have stuck around and kept the community unsure about best practices for application SEO:
“Google can’t render client-side JavaScript.” “Google treats JavaScript pages differently.” “Rendering queue and timing significantly impact SEO.” “JavaScript-heavy sites have slower page discovery.”
There are some well established but perhaps not too well grounded beliefs about the impact of JavaScript driven sites on search engine discovery
Common Causes of Memory Leaks
Memory leaks are a silent threat that gradually degrades performance, leads to crashes, and increases operational costs. Unlike obvious bugs, memory leaks are often subtle and difficult to spot until they start causing serious problems.
Increased memory usage drives up server costs and negatively impacts user experience. Understanding how memory leaks occur is the first step in addressing them.
At Conffab we have a curious affection for memory management, so this recent article appealed to us! And at Developer Summit we have Basarat Ali Syed on JavaScript Memory Leaks, what causes them and how to remediate them.
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript
As an industry, we’ve offloaded most of this direct rendering to frameworks. All JavaScript frameworks(React, Angular, Vue, Svelte, etc) use these APIs under the hood. While I recognize that the productivity benefits of frameworks often outweigh the potential performance gains of manual DOM manipulation, I want to demystify what goes on under the hood in this article.
Back in the day we rolled up our sleeved and worked directly with the DOM. In a framework first world we increasingly don’t do this. But it’s at least worth know what’s going on deep under the hood.
Plain Vanilla
There's an irony in vanilla being the adjective we use to describe things that are simple, unadorned–unspicy. It is that vanilla was once among the most exotic and expensive substances on earth.?
领英推荐
Modern web development frameworksare powerful in their ability to develop rich well-structured web applications quickly, and for this reason alone they are well worth your time to learn. However, this rich functionality comes at the cost of framework and tooling complexity, and the resulting projects often require regular maintenance to keep secure and up to date.
The plain vanilla style of web development makes a different choice, trading off a few short term comforts for long term benefits like simplicity and being effectively zero-maintenance. This approach is made possible by today's browser landscape, which offers excellent web standards support.
Source: Plain Vanilla
In an era where we lean so heavily on frameworks is web development beyond static content-driven sites even possible? Joeri Sebrechts is here to teach us that it is.
Regexes Got Good: The History And Future Of Regular Expressions In JavaScript
In this article, I’ll recount the history of improvements to JavaScript regexes (spoiler: ES2018 and ES2024 changed the game), show examples of modern regex features in action, introduce you to a lightweight JavaScript library that makes JavaScript stand alongside or surpass other modern regex flavors, and end with a preview of active proposals that will continue to improve regexes in future versions of JavaScript (with some of them already working in your browser today).
Source: Regexes Got Good: The History And Future Of Regular Expressions In JavaScript — Smashing Magazine
Despite learning about (though never really properly learning) regular expressions in first year at University (a long time ago) I suspect like many (most? almost all?) folks I never moved beyond the most rudimentary working knowledge and searching for solutions when I had a use case in mind (and now using ChatGPT).
But they are powerful and valuable and have improved significantly in JavaScript in recent years. Just don’t use them to parse HTML ok?
The CSS contain property
The?purpose?of CSS’?contain?property (“CSS containment”) is twofold:
Optimization
Styling possibilities
When we apply?contain?to an element we’re isolating it (and it’s descendents) from the rest of the page, and this isolation what opens those possibilities. There are different types of containment which all do different things, and we’ll be getting into each of them.
The contain property is well supported, but less known than perhaps it should be. It brings performance and styling benefits, as Preethi Sam explains in detail here.
Bonus video: We also covered containment in the context of performance at Hover in 2022.
Want more like this?
Head over to Conffab's Elsewhere section, add our RSS feed to your favourite newsreader, or follow us on Mastodon (we're @[email protected]).
Or why not create a free Conffab account giving you access to a lot of the back catalog of presentations.
We publish a lot more than we can fit here each week so to keep up with everything we think is vital in web technology and practice see you there!
Biomedical Data Gamification
7 个月Vanilla JS is great, the best thing about it is ChatGPT has plenty of examples in it's training dataset