HomeNewsletterArchive

Newsletter #2: Front-End Tooling Tips

Hi folks šŸ‘‹

The second edition of this newsletter after a semi-planned break. Iā€™ve reduced writing on my blog due to family matters ā€“ the good kind!

In short: I had to read aloud some books šŸ˜‰ Btw. you can find JavaScript for Babies and CSS for Babies on Amazon, or check out codebabies.com for more info.

When I shared the news on Twitter I was surprised how many people told me that the content of those books is invalid and really bad. Iā€™ve always seen them as a tongue-in-cheek joke, and wouldnā€™t have given them a code review šŸ˜… Do some image searches to see for yourself, and if broken code makes you uneasy, donā€™t buy šŸ˜‚

Iā€™m slowly getting back to speed on writing new content. Right now, Iā€™m creating the finishing touches of a book of my own, which Iā€™m going to announce soon. No, itā€™s not TypeScript for Babies, but I guess that would be fun.

Canā€™t wait to share whatā€™s coming up!

New on oida.dev #

Go Preact ā¤ļø ā€“ Iā€™m starting to do a lot more Preact, and I like working with it a lot! You get all the React ergonomics, but also a ton of extra benefits when it comes to performance, speed, and overall library design. What the team put together is nothing but amazing. Be sure to check out what they have in store! Oh, and it comes with TypeScript support built-in!

On Air with Orta: Shiki and Twoslash #

Orta Therox from the TypeScript team invited me to be on a pair programming session live on Twitch. It was kind of surprising for me as I didnā€™t know we would go on air, but I enjoyed using this hour and walk with him through some very interesting Pull Request on oida.dev.

Itā€™s about adding Shiki and Twoslash to my 11ty powered website. Shiki is a version of the syntax highlighting engine that powers VSCode, and Twoslash is basically ā€œTypeScript in a Syntax Highlighterā€. The idea is that you take the full power of the TypeScript compiler to get error messages, type information, and everything else that makes VSCode so wonderful on a static webpage.

Orta used both tools for the new TypeScript website and the live-stream gives you a good run-down of whatā€™s possible. Iā€™ merged the PR and Iā€™m working to finalize Twoslash to get the same info for my upcoming blog posts.

Being on Ortaā€™s live stream was a TON of fun. And Shiki + Twoslash is an amazing combination.

From the TSConf:EU archives: T-Shirts #

If you have read the previous edition of this newsletter, you remember the piece about Rob Draper, who did the ScriptConf intro and was going to do the T-Shirt design for TSConf:EU.

Since TSConf:EU didnā€™t happen due to COVID-19, the T-Shirts never came to be. Still, I want to share some images with you so you get a glimpse of how they might have looked like.

![](https://mcusercontent.com/b82088f16842254dd4d1fd440/images/560d1a89-4908-449d-87d5-5e9771363d3e.jpg)

The tagline Definitely Hyped was by me. Iā€™m happy that we didnā€™t put a year to the design, I hope that someday we will be able to make use of those shirts.

Upcoming in the Cinema #

We recently did an online meetup on Rust, with some great talks that people really enjoyed. I especially enjoyed our opener Ryan Levick and his introduction to Rust. Heā€™s showing you Rust from all programming language perspectives. No matter if you develop in TypeScript, JavaScript, C#, Java, C++, Python, Ruby, Swift, Kotlinā€¦ He showā€™s you what to look out for. Check it out:

Oh, and be sure to come by when we meet again! Our second meetup is on Thursday, September 17.

Web components as a compile target #

I had to wrap my head around web components recently and how they seem to be so far off from everything people do in component-based frameworks.

But maybe we should treat them differently. Not as a browser-style version of what we get in component frameworks, but as an API layer or compile target to get our framework based components distributed. Especially when you have to create widgets or design systems that have to work in surroundings that you canā€™t control.

I have been playing around with that idea and got some really great results with Preact.

I had some questions and hopped on a call with Marvin from the Preact core team. While we were discussing he directly jumped into VSCode and developed a pull request to feature web component slots and carry them over to the Virtual DOM. Nice work!

Iā€™m collecting my thoughts and prepare an article, but Iā€™m also very interested in what you think. Are web components even a topic for you? Are you in a similar situation that you kind of need to support web components even if you donā€™t get the same results? Or do you think we donā€™t need anything else but web components to create rich design systems and applications? Drop me a line and let me know.

This also leads me to the project I want to highlight this time.

Interesting projects #

šŸ‘‰ Preact Custom Element ā€” Create a web component out of any Preact component. Includes working with slotted components and web component style nesting.

Thatā€™s it for today #

As with everything I do, Iā€™d love to hear from you. Drop me a DM or shoot an e-Mail. Iā€™m happy to discuss all things TypeScript, programming languages, software engineering, and more!

Also, is there a TypeScript topic that you want to see covered? Let me know and Iā€™ll try to craft an article!

See you around šŸ‘‹