Web in May - Newsletter by Agney
Hey June 🚀
Every time I start to make a reference to the season, I remember that it’s not the same season for everyone. It’s monsoon at my place, but it might be summer at yours. It’s impossible to generalise. I think it’s important that we remember this when building web applications as well. There are all kinds of people all around the world and experiences you build might be critical to some of them. Let’s be humble and keep the different seasons for users in our mind.
As we did for the last couple of issues, I will begin with some updates from the war field (I wish I didn’t have to)
- How Starlink Scrambled to Keep Ukraine Online - Wired
- A Timeline of Russian Cyberattacks on Ukraine - Wired
- The Russian invasion shows how digital technologies have become involved in all aspects of war - The Conversation
Releases
Cloudflare Platform Week
Cloudflare was celebrating Platform Week this month and there are a slew of announcements from them. Here’s some that got me excited.
- The next chapter for Cloudflare Workers: open source
- D1: our first SQL database
- Spring Developer Challenge
Flutter 3
The next major version of Flutter was announced at Google I/O and it brings in support for six major platforms - iOS, Android, Web, Windows, Linux and MacOS apps. Material Design is also entering it’s v3 with this release. It’s cool to know that Google finds 500,000 apps that are now build with Flutter.
Microsoft Power Pages
Satya Nadella accentuated their commitment to low code/no code on keynote while launching their new static page builder - Power Pages. It comes with a design view where users can change designs to a templates hub for most common applications.
TypeScript 4.7
This minor release focuses on the upgrade to NodeJS 16 and support for ECMA module system natively. This brings forth it’s own challenges and features (for eg. the wild system that forces you to say .js for every file you import). There are also other useful changes like:
- Instantiation Expressions - Generic on function expressions
- Go to source definition - If you have used TypeScript, you will know that the editors have a way of going to the type file instead of the actual library when you click on an invocation. This helps in some cases, but mostly you just wanted to see the library source. This feature gives an option to change the behaviour.
- Group-Aware Organize Imports - TypeScript has long had a command for organizing imports. But what it usually did (annoyingly) was to remove the separation between internal and external imports and misplace comments. This brings a change to this annoying organization
Storybook 6.5
The announcement reads that this is the biggest release yet for expanding what you can do with stories. The rewrite of storybook and support for runners other than Webpack (Vite for now) is really cool. Even if you continue to use Webpack, it now supports lazy compilation of stories (which makes a lot of sense here) things should be much quicker.
Tutorials
SmolCSS
Stephanie Eckles creates a site for minimal snippets with modern CSS for problems that has existed since forever. Even if you are familiar with the solutions mentioned, you will find that the code has smol tidbits that help you avoid potential problems.
Migrating Stripe to Typescript
Last month’s newsletter had featured a tweet with some migration wisdom on Stripe’s transition to using TypeScript - That’s been converted into a detailed blog post now. There are interesting catches now how they decided to convert their codebase and migration path.
Remixing React Router
React Router is combining with the powers of router from Remix (from the same authors). This means that a lot of data fetching, loading states and error boundaries get tied into the route configuration but also faster smarter states for all these. It’s still under release plan, the code is really cool but I’m wondering how data fetching libraries like react-query take this approach.
Layouts RFC
The new RFC from NextJS has a killer feature (that apparently has existed in NuxtJS since forever in JavaScript times) - Nested Routes. It is super difficult to build nested layouts in NextJS right now. (Here’s how). The layouts will make this process much simpler and it seems like NextJS is going the Rails - Convention over Configuration route this time as well.
TypeScript tips and Tricks with Matt
Matt Pocock is wildly recognised as a TypeScript Guru. He was on Visual Studio Code Youtube channel explaining some tips and concepts with TypeScript with live code examples and use cases. It’s a great watch if you want to level up and test TypeScript depths.
A City in a Bottle 🌆
— Frank Force 🌻 (@KilledByAPixel) April 22, 2022
<canvas style=width:99% id=c onclick=setInterval(‘for(c.width=w=99,++t,i=6e3;i–;c.getContext2d
.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27pic.twitter.com/N3WElPqtMY
Building data-centric apps with a reactive relational database
Riffle has a blog on building data centric applications with an SQLite database on the client interacting with reactive queries. They reason that this can hold all state for the UI persistently in a single place and retrieve them super fast. The sync with remote servers would be centered around the CRDT sync that was made famous by Actual Budget (which went open source around last month)
In the Spotlight 🔦
Google’s developer conference was this month and among all the updates (Pixel 6A, Pixel Watch and mythical translation lens) are the State of the Union keynotes for Web (Chrome) and other Google products like Android. It’s a big opportunity to catch up with what’s new with all these technologies and platforms.
- Google I/O Keynote under 12 minutes - YouTube
- Google I/O Developer Keynote - YouTube
- Top 10 web things to know from Google I/O - YouTube
- State of CSS - YouTube
- State of Angular - YouTube
- DevTools: State of the Union 2022
Google was not the only company with the developer event happening in May. Here’s Microsoft:
- Satya Nadella 2022 Build Keynote Recap - YouTube
- Microsoft Edge | Build 2022: Enriching desktop experiences with the power and reach of the web
Hydration in React was originally not built for SSR. It was because IE6 had a really slow DOM API but relatively fast JS strings. It was faster to concat HTML strings on the client and then “hydrate” it. This equation later changed as more refs were used and the DOM got faster.
— Sebastian Markbåge (@sebmarkbage) April 20, 2022
In Other News
Open-Source GPU Kernel Modules - NVIDIA
NVIDIA is now publishing Linux GPU kernel modules as open source with dual GPL/MIT license, starting with the R515 driver release. You can find the source code for these kernel modules in the NVIDIA/open-gpu-kernel-modules GitHub page
NVIDIA likes empowering everyone to find and fix the issues with their Linux graphics drivers.
Attack campaign using stolen OAuth tokens
There was hack on Github based on oAuth tokens issued to Heroku and Travis CI. Just when you think it’s individuals who lost their tokens, Github’s own company - NPM was also revealed to be affected. Github reveals that the attacker may have cloned private repositories that were linked to the user (of interest). Github has send notified users who were affected by the hack.
Framework Laptop
Framework laptop is renowned for bring the dream of upgradable and repairable laptops into reality. There is a new and improved processor support with 12th Gen Intel® Core™ processors and Ethernet expansion cards.
Fall of Terra and Luna
Terra was the famous “Bluechip” coin for investors which proudly proclaimed “powering the innovation of money”. It’s an algorithmic stablecoin - meaning that it was pegged to US dollar by an algorithm. The algorithm did this with the help of it’s sister coin Luna. The rise of Terra was powered by the Anchor protocol which had users deposit their share of Terra and get upto 20% interest on it, the protocol in turn lent the deposited cryptocurrency to other users. Both the coins fell sharply this month, wiping $60 billion in value.
- How the Anchor protocol helped sink Terra - The Verge
- TerraUSD Crash Led to Vanished Savings, Shattered Dreams - WSJ
- Terra’s epic collapse, explained - CNBC
- Terra 2.0 has got crypto world divided - IndianExpress
Looking Forward
- JSConf Budapest - June 2-3
- Apple WWDC - June 6-10
- JSHeroes - June 9
- CSS Day - June 9, 10
- Prisma Day - June 15, 16
- HasuraCon - June 28-29