umbrella VS httparchive.org

If you are mainly using jquery for its DOM manipulation¹ rather than for browser compatibility² or things that didn't exist consistently in older browsers³ then there are much smaller libraries that do that job which may be worth looking into. https://github.com/fabiospampinato/cash or https://github.com/franciscop/umbrella to give a couple of examples. Some explicitly support IE11 so you are not dropping as much support for legacy browsers as you might otherwise.

Though if jQuery works for you and isn't a performance issue, then by all means keep with it. It may not be ideal, but good enough and does the job. Let the naysayers spend their time debating whether you should or not, and just get on with making things!

---

[1] selection engine, chained selections, chained modifications, …

[2] not the issue it once was, if you can abandon IE and old Android browsers from your supported UAs or can deal with any issues that crop up individually

[3] again, if you can afford to drop support for legacy UAs

Yes, and if you continue long enough you end up with one of the many jQuery alternatives, like mine:

https://umbrellajs.com/

If you're learning React just to get a job, you're doing it wrong, since recruiters are always changing their requirements. They will add `proficient in Svelte` just to annoy you, (after having learning React) and now you're no longer relevant to them.

That's why I say: stick to the baseline of HTML, CSS, & JS. Learn to write vanilla JS for common things, maybe learn UmbrellaJS[0] for syntactic sugar and manipulating the DOM.

Oh and learn some APIs to do back-end stuff too. And for forms, there's loads of projects out there to automate that[1]

[0] https://umbrellajs.com/

[1] https://www.producthunt.com/search?q=forms

const insertAfter = (col, html) => col.forEach(el => el.insertAdjacentElement('afterend', html));

Keep going a bit like that, until you realize you are basically reinventing jQuery. Add a couple of very nice-to-haves, like chaining (instead of nesting in these examples above) and that's exactly what Umbrella JS is, very thin methods to manipulate the DOM and handle events. In fact, compare our "addClass" implementation in this comment to [Umbrella's addClass](https://github.com/franciscop/umbrella/blob/master/src/plugi...), it's almost the same size but hundred times more flexible:

// Add class(es) to the matched nodes

Astro didn't capture the data themselves, it's data from The HTTP Archive.

Based on HTTP Archive real-world performance data (Lighthouse, P90) • Read the full report

A longstanding problem in the HTTP Archive dataset has been extracting insights from blobs of HTML in BigQuery. For example, take the source code of example.com:

The data for this chart came from the wonderful httparchive.org. Tools used to make the chart: Python, Pandas, Matplotlib.

First of all, web development hasn't really evolved that much in the last decade, or it all depends on what you mean by “evolved”. Sure, there’s webpack and React and ES6, but according to data from httparchive.org the median page load time has remained about the same over the past 10 years, even though internet speeds have been steadily increasing, along with rapid advancements in hardware. So it’s safe to say that the internet is faster, but websites aren’t. In addition, as the team behind the Skypack utility has pointed out, “building for the web has never been more complicated.”

The technologies you use to build your website can have an effect on your ability to deliver good user experiences. Good UX is key to performing well with Core Web Vitals (CWV), a topic which is probably top of mind for you, as it is for many other web developers now that these metrics play a role in Google Search ranking. While web developers have had tools like Search Console and PageSpeed Insights to get data on how their sites are performing, the web community has been lacking a tool that has operated at the macro level, giving us something more like WebSpeed Insights. By combining the powers of real-user experiences in the Chrome UX Report (CrUX) dataset with web technology detections in HTTP Archive, we can get a glimpse into how architectural decisions like choices of CMS platform or JavaScript framework play a role in sites' CWV performance. The merger of these datasets is a dashboard called the Core Web Vitals Technology Report.

One of the main things that affect performance and is not so easy to optimize in a web application is assets such as images and videos. Images form almost half of all web content, and so optimizing them goes a very long way to improve experiences with applications. Images are unique because they are not usually compressed in an optimal way and they load all at once on the web and so the Next team decided to solve this. An image component in Next abstracts and enables images to be optimized without any input from you, the developer. Great right? All you have to do is replace the img element with Image from Next. Here is how it is done. Let’s say your image tag is like this:

The HTTP Archive runs Lighthouse audits for approximately 7.2 million websites every month. In the May 2021 dataset, Lighthouse was able to identify an LCP element in 97.35% of the tests. Since we have the ability to query all of these Lighthouse test results, we can analyze the result of the LCP audits and get more insight into what drives this metric across the web.

A good place for data around this is the HTTP Archive (https://httparchive.org/). It has collected data and reports.