Web frontend evolves at a breathtaking pace, they say. While this phrase is certainly more truthy than not, many of us webby developers have been grinding with pretty much familiar tools and flavors of the beloved React for almost a decade. Once in a while, it pays to zoom out and dedicate a few days to check out what’s cooking in the frontend world. My choice was to attend the Future Frontend conference in Helsinki in June 2024.
Instant working prototypes
Imagine. That’s sometimes all it takes, at least to create prototypes of web applications. Generative AI engines not only take text as input, but images and other media as well. Wireframes and sketches made in a popular infinite canvas tool, tldraw, can be directly sent to OpenAI. Let’s try it out!
Here’s a wireframe layout of a holiday calculator which I made with Tldraw in 15 minutes:
By using the special, “make real” version of tldraw, we can get a HTML prototype by just pressing the namesake button in the editor. Voilá, the image of the prototype is below:
What’s even more merrier, you can link directly to the HTML prototype, so please feel free to check it out and calculate your summer vacations via this link.
You can also automatically share the code of the created application on CodeSandbox, StackBlitz or Replit. OpenAI API is not free, so you need to create and top-up an OpenAI account and trust tldraw with your API key. But I don’t see it as an issue, since you can charge it only with a small amount and deactivate that key if leaked. Just remember not to enable auto-recharge. My experiments with this calculator (about ten iterations) cost approximately 10 euro cents.
This integration of tldraw and OpenAI, presented by Steve Ruiz, the CEO of tldraw, was the cherry on the top of the 2nd edition of Future Frontend conference that took place on 13-14th June in Helsinki. Some 200 of frontend developers and designers gathered together to get new ideas and mingle. Future Frontend is the successor of the once very popular React Finland conference series. Here are some highlights.
Deno, your TypeScript based friend on the server
For more than a decade, NodeJS has been our number one choice to run server-side JavaScript apps. With all its glory, Node has become somewhat cumbersome. Especially working with TypeScript apps has made the process complicated. Deno, as a multilingual millennial, understands TypeScript natively and we can e.g. skip the explicit compiling (tsc) process altogether.
And there’s more. When using Deno, we can leverage the JSR package repository. JSR is a superset of NPM, which has not been actively developed for many years. Publishing Typescript packages to JSR is a quick breeze compared to NPM, which requires compiled typings (.d.ts) and other boilerplate. Since JSR is a superset of NPM, you can still refer to all NPM packages via JSR.
Luca Casonato and Jo Franchetti from the Deno Company presented brave live demos on publishing JSR packages with Deno.
Green computing
Lots of effort and public coverage has been put into calculating emissions from physical activities such as manufacturing and transportation. However, the carbon footprint of digital activities is growing rapidly and cannot be ignored. The big issue with digital emissions has been the lack of means in calculating them. We learned from Dr. Jari Porras (LUT) and Ben Holmes (Astro) about new models in this field, aggregating the CO2 emissions from data centers (CPU usage), network usage (mainly constant) and user devices (weighted bytes transferred).
As we humans love calculators and tests, we can check the digital CO2 footprint of any public website. Let’s start looking at the mirror and put our website, vincit.com, on the table. Ben Holmes referred to the Web Climate Calculator, so let’s use that here as well.
Doesn’t look too good. You can also check the results by yourself: https://www.websitecarbon.com/website/vincit-com/. As seen in the screenshot, the results are somewhat outdated (November 2023), but I doubt that our rating has improved since. For some reason, re-calculation didn’t work out, but I guess it was a temporary glitch.
The bottom line, that every visit on our website emits about 6 grams of CO2, feels low, but unavoidably adds up over time. Furthermore, our service provider, HubSpot, doesn’t seem to run on green energy either, which would be one low-hanging fruit in this game. So, we are not (yet at least) practicing what we preach. I guess this is always balancing between impact, accessibility and simplicity, but definitely something we and most of us in this business should take into consideration.
The Finnish Companion
We learned the amazing story of Dr. Zak Allal, an Algerian-born medical doctor and a concert pianist, who emigrated to the United Stated and eventually to Finland. Dr. Allal took on the challenge of learning one of the most difficult languages in the Western world, Finnish. When faced with lack of proper tools and materials, he started making one by himself and soon, the Finnish Companion was born.
But the web is full of translators and dictionaries, so what’s new? The Finnish Companion goes much further by enabling search by all cases of words, not just by the infinitive forms that are not so often used in everyday speech. Finnish Companion also includes SisuDrills, which offers cherry-picked translation exercises on those word-classes etc where you need practice most.
And it’s free-to-use. We need diversity here, so if your non-Finnish-speaking colleague is looking for a language prep, Finnish Companion is a great starting point.
Shoggots? Yes, Shoggoths!
My personal favorite concept presented at the conference was the squishy nature of AI, presented by Maggie Appleton. Generative AI is something that our deterministic, engineer-bent brains have troubles to comprehend. Maggie introduced us to Shoggoths, which are fictional creatures from H.P. Lovecraft’s Cthulhu novels. A shoggoth is difficult to describe by words, so let’s take a look at some artwork inspired by Lovecrafts novel At the mountains of madness:
(Shoggth by Nottsuo at DeviantArt (CC-BY-3.0) )
According to Wikipedia, shoggots are “massive amoeba-like creatures made out of iridescent black slime, with multiple eyes "floating" on the surface”.
I somehow find it inherently hilarious that after almost 100 years, Lovecraft's works of imagination are now representing artificial intelligence in the form of internet memes, blog posts and t-shirts. But I must admit that a Shoggoth quite accurately depicts the look-and-feel that we end users get when working with LLMs. Thus, the future of the frontend, albeit a bit squishy, looks more interesting than ever before!
Final words
The Future Frontend conference included four sessions per day with two speeches each. So altogether sixteen presentations, which all cannot be covered in this post. We learned e.g. how the ECMA TC39, a body that maintains and develops the JavaScript language, works and communicates. We learned about inspirational AI clocks developed by Matt Webb. These simple devices just display an inspirational rhyme about the moment with current time in hours and minutes. But relax, not every rhyme is generated for you individually, so not so CO2 intensive as one might think of.
And much more, as described in this post earlier and lot’s of topics that I did not have space to cover here. I can sincerely recommend Future Frontend for all designers and frontend-aligned (at least a bit, I’m fullstack as well) developers.
PS: Future Frontend 2025 edition is already in the works. Hook up on their mailing list, so you won’t forget to attend next time. And a big shout out to the organizers of the conference!
