DeveloPassion's Newsletter #3 - TypeScript News

Welcome to the third edition of DeveloPassion’s newsletter.

First of all, I’d like to ask all of you to help me out a bit. If you find this newsletter interesting, then please do take a bit of time to share this link to others on social media: With your help, others will also get a chance to discover and enjoy reading it. As an added benefit, it’ll also motivate me to continue the experience! =)

TypeScript 3.7 has been released (it’s been a while already). Isn’t that great? Now I just have to wait for Angular to support it before I upgrade: https://github.com/angular/angular-cli/issues/16071 To me, the coolest features in this release are:

Optional chaining really is the coolest feature and it’ll also be valid JavaScript real soon. So code like this will already be valid from TS 3.7 on an in the next ES version: const age = person.personalDetails?.age; Which is equivalent to the more verbose version: const age = person && person.personalDetails && person.personalDetails.age; Of course, with the code above, the “age” constant can actually be a number or undefined. If you want to get rid of the undefined, then you can use the second coolest feature of TS 3.7: nullish coalescing: const what = yes?.no ?? wtf How fun is that? ;-) The line above reads as follows: if yes is not null or undefined, then we set “what” to “no”; otherwise we set it to “wtf”. By combining optional chaining and nullish coalescing, we will save tons of trees when printing out our code… A-W-E-S-O-M-E-Rrrrrrrrr. There are of course many other smaller features in this release, which you can read about in the official release notes.

While we’re talking about TypeScript, did you know that the videos of the last TS conf are up? https://tsconf.io/videos.html

This week, I’ve stumbled upon CSSDB: https://cssdb.org/ It is a wonderful resource that lists all current and future CSS features, as well as support for each in Web browsers. Thanks to this, we have a sort of equivalent of caniuse (https://caniuse.com/) for CSS!

I re-read an old blog article of mine today, titled “Do you ever forget things at work?”. It was written in 2016 (ages ago!! :p), but is still fully valid today. It describes a few tricks that I use on a daily basis to keep track of everything and make sure that I never forget anything voluntarily(this last word is key) ;-) You can read it over here on my personal blog: https://www.dsebastien.net/2016/02/21/do-you-ever-forget-things-at-work/

When you create complex forms with Angular (out of the realm of demo code), you realize that things that may seem simple on the surface (e.g., “this is just a form with four simple fields”) are not so straightforward to implement (e.g., “ah in fact this field and that field are linked together and there are various business rules to respect; that field is an autocomplete and we want enter/tab to validate the current selection”). The first thing to learn with Angular forms is that Reactive Forms are the way to go. Template-driven forms are simple, but not great in any way. I’ve covered this in greater length in the Angular chapter of my TypeScript book. In our project, we’ve decided to create reusable dumb components whenever possible in order to maximize reuse of our code. Applied to complex forms, this means that a complex data structure handled through a form will actually be a composition of multiple components, each handling a specific sub-part of the data model. Composed together, those parts form (pun intended :p) a complex reactive form. One useful Angular construct to be aware of is the ControlValueAccessor, which makes it possible to use dumb components as FormControls, which is terrific!Kara Erickson has made a few great presentations covering nested forms and ControlValueAccessor, which you can find here and there, and also there. Here are a few awesome resources about CVAs:

There are also two libraries that I’d like to recommend for forms:

I don’t know if you already seen this one, but here’s an awesome JS snippet that will prove useful when fiddling with layout using CSS: https://medium.com/@gajus/my-favorite-css-hack-a7f447026cf2 What it does is outline every DOM element on the page with different colors. There’s an alternative version from Addy Osmani called the CSS Layout Debugger. It is really useful as it allows to easily see where everything is, the space it takes, etc.

I’m really interested to hear about what you think of this new initiative, ideas to improve, links to share, etc. Don’t hesitate to contact me through Twitter: https://twitter.com/dSebastien If you find this newsletter interesting, then please share the link around: See you next time!