Friday Frontend: The Case for Types Edition
Tags: fridayfrontend, css, javascript, webdev
Published: 2019-09-13 20:13:48

---
title: Friday Frontend: The Case for Types Edition
published: true
tags: friday-frontend, css, javascript, webdev
canonical_url: https://zendev.com/2019/09/13/case-for-types-edition.html
---

Happy [Friday the 13th](https://en.wikipedia.org/wiki/Friday_the_13th)! Hope you have only good luck and no bad, and your weekend plans are entirely excellent. :P

This week we’ve got a number of great articles, but what caught my eye are the announcement about TypeScript 3.7 and the related article about using types in JavaScript. The fact that 3 of the 5 major features in the next version of TypeScript are features coming straight from TC39 and the evolution of JavaScript reminds me that these 2 languages are in many ways joined at the hip. As JavaScript evolves, the differences between the two may trend smaller and smaller.

Have a great weekend! Enjoy!

Best,  
KBall from ZenDev

#### CSS & SCSS

##### [Logical Operations with CSS Variables](https://css-tricks.com/logical-operations-with-css-variables/)

This completely blew my mind. Boolean logic entirely within CSS variables using calc, letting you build up some very very cool structures to generate images & do other neat things all with CSS.

  

##### [CSS Security Vulnerabilities](https://css-tricks.com/css-security-vulnerabilities/)

A look at some common concerns related to CSS vulnerabilities… mostly showing how they’re not really issues at all, because browsers have already thought about them. Interesting read.

  

##### [“My favorite CSS hack”](https://dev.to/gajus/my-favorite-css-hack-32g3)

Nice quick-hitting snippet that will let you see at a glance how all of your different elements are arranged in the DOM.

  

##### [Various Methods for Expanding a Box While Preserving the Border Radius](https://css-tricks.com/various-methods-for-expanding-a-box-while-preserving-the-border-radius)

Very cool exploration of different ways of expanding a box, and their implications for what properties of that box and the things inside that box do during the expansion. Will text move? Will border radiuses change? It turns out, it depends how you do it...

  
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&amp;placement=zendevcom" id="_carbonads_js"></script>
#### JavaScript

##### [The 5 Big Features of TypeScript 3.7 and How to Use Them](https://dev.to/pimterry/the-5-big-features-of-typescript-3-7-and-how-to-use-them-1bfn)

This is really interesting because 3 of the 5 features being touted and explained are actually features coming soon to JavaScript. Top level await, nullish coalescing, and optional chaining are all at stage-3 in TC39, and will soon be officially in JS. So even if you don’t normally use TypeScript, but you want to get ahead of the curve for JavaScript, you might want to take a look.

  

##### [You Already Use Types](https://www.swyx.io/writing/types-already)

On the subject of types and TypeScript, this is a great and recent article aimed at type-skeptics. Walks through some ways we’re already using (implicit) types even in a dynamically-typed language like JavaScript, and the advantages of moving to more explicit/compiler checked types like in TypeScript.

  

##### [Why is React doing this?](https://gist.github.com/sebmarkbage/a5ef436427437a98408672108df01919)

This is a brain-twister, but I learned some things from it. One of the core developers of React does a brain dump on some of the design choices React is making, particularly in contrast to Vue.js and Svelte.

  

##### [How to build an Unsplash Search App with Svelte 3](https://dev.to/ayoisaiah/how-to-build-an-unsplash-search-app-with-svelte-3-4h0e-temp-slug-6430771)

I’m currently playing with Svelte and loving it, and this tutorial is in-depth enough to get you a solid taste of Svelte while not being too overwhelming. Plus, Unsplash is such a cool resource - free, available photos with an incredibly permissive license. I’m going to be trying it first the next time I need stock photography.

  

##### [How to learn D3.js](https://wattenberger.com/blog/d3)

This is a tour-de-force on D3, still one of the best JavaScript libraries out there for making data visualizations. D3 has long been in my “to-learn” list, I’m just waiting for a project that gives me a good opportunity… and when it comes along, I’ll be coming back to this article, because boy it’s a good one.

  

#### Other Awesomeness

##### [Machine Learning For Front-End Developers With Tensorflow.js](https://www.smashingmagazine.com/2019/09/machine-learning-front-end-developers-tensorflowjs/)

Super cool look at how to get tensorflow running in a web browser, and hints a little bit at some of the possibilities. Also talks a bit about the limitations of doing this in the browser instead of on a server.

  

##### [Atomic Design and UI Components: Theory to Practice](https://blog.bitsrc.io/atomic-design-and-ui-components-theory-to-practice-f200db337c24)

Great soup-to-nuts explanation of Atomic Design and how it works. I think having a definable approach & language to talk about your design & design systems is super valuable, and while I’m not a huge fan of the particular language choices used for Atomic Design, the approach is top notch.

  

##### [CanIEmail](https://www.caniemail.com/)

Ooohhhh long overdue, this site is an equivalent to ‘caniuse’ specifically for HTML emails. OMG I wish I’d had this a couple years back when I was working on stuff for Foundation for Emails. 

  

##### [Why I'm preloading a font even when I shouldn't have to](https://www.alexrp.co.uk/blog/preloading-fonts.html)

I love that in the modern web we can use a wide variety of fonts; back when we had to stick to ‘web safe’ our design choices felt so stale. And yet. Fonts are a huge bugaboo for first-page-load performance, and if you’re not careful they can really slow you down. This article does a fascinating walk through of one person’s quest to get a truly fast experience for a custom font.

  

* * *

#### Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably [follow me on Twitter](https://twitter.com/kbal11) or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: [https://zendev.com/friday-frontend.html](https://zendev.com/friday-frontend.html)