Web Weekly #132 | Stefan Judis Web Development

Greetings from Italy! 🇮🇹

What questions did you have when starting with TypeScript? How do you manage files in your terminal? And how can you apply view transitions across good old page navigations?

Turn on the Web Weekly tune and find all the answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are 5 more songs left in the queue.

Years ago, I reverse-engineered Preact to create my own VDOM library. The goal wasn’t to release yet another JS framework but to understand its internals. These “debugging days” helped me understand the core principles of React / Preact to this day. Marcelo shares how he created his VDOM library. 💯

Understand modern JS libs

Type Hints — These are answers to all the questions I had as a beginner in TypeScript.

I’ll probably never reach the point of saying, “Heck yeah, I’m good at TypeScript”, but it’s not as painful as it used to be. Still, sometimes I discover that I don’t understand fundamentals.

“Type Hints” is a collection of questions and (answers) you might have when starting out with TS.

Understand the types

Web component base classes

class MyComponent extends BaseElement { 	render() { 		return `<h1>Hello! I'm in the Shadow DOM!</h1>`; 	} }

I don’t use a web component framework when writing basic custom elements, but this approach leads me to write the same code repeatedly.

If you don’t want to bring in a dependency but are still looking for some developer convenience, a “base class” is the perfect middle ground. Hawk’s approach includes a render method, event handling, and basic stylesheet handling.

Adopt a base class

Not too long ago, Mayank shared a similar but different approach.

No wrong doors.

This week, I learned about “no wrong doors” policies. The idea is to be helpful and set people up for success. Will explains how you would apply “no wrong doors” in an engineering organization, but his example is a primer on how to be a helpful colleague in general.

Help out!

You’re halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

The wonderful weird web – music for programming

function musicFor(task = 'programming') { return 'A series of mixes intended for listening while ${task} to focus the brain and inspire the mind.'; }

If you’re looking for some background noise while working on your new feature, you might find it on “Music for programming”.

Focus!

CLI output: deno test --doc Check file:///Users/sum.ts$8-13.ts error: TS2345 [ERROR]: Argument of type 'string' is not assignable to parameter of type 'number'. const finalValue = sum(1, "this is a string");                           ~~~~~~~     at file:///Users/main.ts$8-13.ts:2:27

Our friends at Deno released a new JS / TS registry. The new home for your open-source code comes with first-class JSDoc support. This post explains why TS and JSDoc are a great match. Me likey!

And TIL — the deno binary even comes with tools to lint and run JSDoc examples — I love it!

Document your code

slash pages — A guide to common pages you can add to your website

I almost feel guilty for not having more slash pages on my site. Right now, an outdated /uses is the best I have. But when I have time, I’ll add some more — /nope, especially, is one I should add!

Build out your site

Terminal-based file management

A preview of the superfile file manager. It includes mutliple columns and shows files, folders and stats.

I’ve been playing around with Superfile lately. It’s a terminal-based file manager. I like it, but I’m uncertain if I should invest time into going keyboard-only and terminal-first for operations that take me only a couple of seconds in the OS GUI.

What’s your take? Do you use more advanced file management tools than mv and rm?

Use the terminal for moving files

Design details that feel like magic.

I’m no designer, but adding some small details will go a long way. Here’s a collection that will spark your inspiration to delight your apps and sites.

Add some fancy

<p>   <label for="imageFile">Upload a photo of yourself:</label>   <input type="file" id="imageFile" capture="user" accept="image/*" /> </p>

From the unlimited MDN knowledge archive…

Did you know that you can access a mobile camera and take pictures going into a file input field, all just via HTML?

Capture it!

TIL recap – Implicit form submissions

<form onsubmit="alert(1)">   <!-- this will alert if you press enter while "foo" is focused -->   <input name="foo" /> </form>  <form onsubmit="alert(2)">   <!-- this won't -->   <input name="foo" />   <input name="bar" /> </form>” loading=”lazy” onload=”this.classList.add(‘kf-fade-in’)”></source></source></picture></a></figure>
</div>
<p>Are you also scared of accidentally submitting a form by pressing <code>ENTER</code>? Here’s a fun fact about these <em>implicit form submissions</em>: only some HTML forms are submitted on <code>ENTER</code>. Learn more about this on the blog.</p>
<p><a rel=Submit!

New on the platform — MPA view transitions ship in Chrome 126

Example showing two pages morphing into each other.

It’s happening! You can spin up Chrome Canary today and see cross-document view transitions. Here’s a quick demo from the Chrome DevRels. These navigations (👆) “morphing” into each other are different HTML documents loaded after clicking a link!

How do they work?

You must opt-in via CSS (@view-transition), and the transitions can only be applied to same-origin navigations. New JS events (pageswap and pagereveal) are available to change the DOM right after or before a view transitions so that you can fiddle with the DOM and create fancy transitions. And to ensure that the elements you want to render are ready, there’s a new rel=expect attribute.

It’s all coming together!

Bramus gave a talk at the wonderful JSHeroes conference giving you all the facts and if you prefer video, here’s the most recent Google I/O presentation about MPA view transitions.

Three valuable projects to have a look at

Minimalist temporary Email - Privacy friendly - Valid for 1 hour - AD friendly - 100% Run on Cloudflare

If you’re looking for a quick way to receive a throw away email address — Email.ML does exactly this.

Keep your inbox safe

I’ve worked at four different VC-funded companies so far. And the longer you’re in this environment the more you realize that it’s all about money. duh?!

Sure, these startups exist to multiply their investors money. That’s obvious, but it took me a while to realize how ruthless this market is.

Employees — unimportant. Ethics — unimportant. Trust — unimportant.

Wherever you look; mass layoffs, companies ignoring any rules and shady tactics to increase revenue. There’s only one mission — grow faster and make more money. And as Baldur puts, not even users are save.

If it’s a VC-funded startup, they will sell out their users at some point.

Did you learn something from this issue?

💙 Your support not only makes my day but also pays the infra for sending 5k weekly emails.

Loved this email? Hated this email? I want to hear about it!

If you think there’s something that needs to be improved or something that you enjoyed, reply to this email because I want to know more!

And with that, take care of yourself – mentally, physically, and emotionally.

I’ll see you next week! 👋