Welcome to "This week's finds" - a new weekly series where I share my findings of the past week. I often browse various resources about web development and find things that I found valuable. Because of that, I came up with an idea to gather and share the most interesting ones that I stumbled upon. Without further ado let's get into it.
Details - the native way to make an accordion
Let's start with the simplest ones - <details> is just a simple HTML tag that lets you create native accordions. Just wrap the content with it, put <summary> tag inside which work as heading, and you are ready to go. Built-in accessibility, no JavaScript needed and every modern browser is supporting it. Furthermore, you can natively apply styling based on open state and listen to toggle event. The only problem that I see is expanding animation - I couldn't find the other way than using Web Animation API. It can be a little of a challenge and it's still not widely supported.
Datalist, an HTML element to create a simple searchable dropdown
The second one of not-so-known elements which I want to show you is <datalist>. It's pretty similar to <select> but allows you to search through the options list. You can check the documentation about it there. As you could expect, same as with the native <select> element it's hard to style it, especially the options list. But if you want to make something simple, that may be something just for you.
Imba - a (not) new way of creating web applications
The next one is a programming language built with web apps in mind. Actually, it's not really new - if you look at its Github you could find commits from 6 years ago. However, I guess that many of you never heard of it before. With their small but devoted community, they are recently pursuing the beta release of the 2.0 version. It's promoted as the fast, fast way of building.
The first "fast" comes from the minimal, elegant, time-saving syntax. This makes Imba really expressive as a language when it comes to building apps. These points make the language itself really appealing to me. HTML tags are first-class citizens and built-in styling syntax resembles Tailwind.
The second one comes from the performance in a browser thanks to a technique "magnitude faster than virtual DOM" - memoized DOM. It compiles to vanilla JS and thanks to its interoperability you don't need to abandon many of your favorite libraries. One of the main selling points is that you can use it to make both - the frontend and the backend part of the website, exactly as with our beloved JavaScript.
To close out I want to highlight the community around the Imba - it's not the biggest one but it's definitely one of the easiest ones to join. They have a Discord server when you can easily find help and talk. Moreover, they have weekly meetings when they discuss the future of the Imba ecosystem. Check out the website where you can find everything about it.
Div.js, joke with a moral
"Div.js, a framework for the HTML programming language." - maybe you stumbled across this heading last week. The slogan is accurately describing the jokingly created framework, so let's have some laughs. However, more importantly, try to learn something from the moral. The library lets you use <div> as literally everything. The satiric catchphrase accurately describes one of the problems in frontend nowadays. The bloat of divs. Often we forgot about the semantic elements which we can use to build a website, replacing buttons with divs is one of the most flagship examples. Sometimes it has some justification, few native elements are hard to style in a cross-platform way. But then we should make sure to make them accessible for everyone and it's a relevant part which is often forgotten.
Through not-so-new but definitely exciting language to the importance of semantic usage of HTML tags (with a reminder for few uncommon ones), that's all for this week. Thanks for reaching the end, I wish you enjoyed it and see you next week.