## Why now? Modern web features didn't just stop with Flexbox and View Transitions. New features are constantly being added, and its time to let go of our bloated javascript Libraries/Meta-Frameworks/Frameworks. With the significant advancements in browsers, our architecture needs to catch up --- ## Wait, What Features?? Let me provide you with a small sample of underrated features that are often overlooked. While this list is not exhaustive, it aims to expand your knowledge of what is possible. The best part is that everything I mention can be used today in all major browsers and even older ones with polyfills. You don't need to install packages found on a 5-year-old Stack Overflow post. --- ### Intl namespace Moment.js has been a go-to package for date parsing, timezones, and localization. However, it comes with the cost. That cost is embedding a database encoded in json holding various translations, timezone preferences, and other locale-specific information. This database has thing like ... the Tamil translation of "in 3 Days" ... or the fact that Mexico prefers 24-hour Time. ... or the preference of "PM" in the US and "p.m." in Canada ... or every time a city in Indiana decided change its timezone over the last century You get the idea, we dont need to ship all this data. The `Intl.DateTimeFormat` and `Intl.RelativeTimeFormat` APIs provide a simple and flexible solution. ```javascript new Intl.RelativeTimeFormat('default', { // en-us (for me) style: 'long' }).format(3, 'day'); // output: // in 3 days new Intl.DateTimeFormat('en-ca', { timezone: 'America/Chicago', dateStyle: 'full', timeStyle: 'long' } ).format(Date.now()); // output: // Sunday, July 16, 2023 at 3:09:44 p.m. CDT ``` These APIs are supported today and offer powerful date and time formatting capabilities. --- ### Form Validation Instead of installing one of the 2,000+ form validation packages available on [npmjs.com](https://www.npmjs.com/search?q=form%20validation), consider utilizing the built-in form validation in browsers. It covers the vast majority of use cases. ```html ``` This approach, combined with CSS pseudo-selectors, enables powerful styling and validation feedback. ```css form:has(:invalid):before { content: "You are missing some stuff"; } label:has(input[type="password"]:invalid):after { content: "Password needs to be 8 chataters long..."; } ``` Side-note: The form submission is disabled until all requirements are met. --- ### HTMLDialogElement Meet the `

bl42

The web has been waiting for HTMX

Join Our Newsletter. No Spam, Only the good stuff.