Here in the US, we’re starting to see some folks pushing back against ‘stay at home’ orders. And while I think this is misguided, and the numbers of protestors remain small, I understand the frustration. It’s hard to bear up under this level of disruption to our daily lives, especially if you’re dealing with added caregiving burdens or struggling with a loss of income.

So it’s worth remembering why we’re doing this. Why we’re locked down, stuck in our homes and under such constraints about our day to day live.

We’re buying time. Buying time to build supply chains of testing reagents and organizations to do contact tracing, which might allow us to better detect and isolate cases of COVID-19. Buying time to learn better therapeutic approaches, test drugs, and scale up the tools we find that work. And buying time to develop a vaccine.

It’s super painful, from an emotional, financial, and often even physical standpoint. But every day or week we buy, the more we and our loved ones can be protected from COVID and treated if we do catch it. I wish we were making more rapid progress, but the progress is happening, even if it’s hard to see from lockdown.

Anyways, on to the content. I’ve got quite a few great articles today, but the one that captured my imagination the most is the one on using Vue in the backend. So much of innovation is taking lessons from one domain and applying them to another; what else can we take from our front-end knowledge and apply in other places?

Best,
KBall from ZenDev

P.S. If you are looking for work, or your company is hiring, please hit REPLY and let me know. I know so many folks have been impacted by COVID related economic problems, and I’m doing my best to play matchmaker to help them find new opportunities. A couple resources for those looking -  I want to plug again this great resource of which companies are hiring and which are not, as well as share this resource that a reader shared.

CSS & SCSS

Constrained CSS grids without max-width.

Very nice example of the way that CSS Grid enables you to “think differently” about stuff we’ve been doing in hacky ways for a long time in web dev. A centered layout with a max width and margin auto is just “how things are done”, but with grid it turns out that might not be the best way to think about things anymore.


Pseudo-Randomly Adding Illustrations with CSS

Figuring out how to add imagery to a blog post can be tricky for those of us who aren’t super visually inclined, and yet it’s undeniable that some amount of illustration makes the page flow better, even if mostly disconnected from the content. This is a nice trick used for pseudo-randomly inserting images to break up content.


Making Things Better

A great look through the history of how constraints on the web have evolved, and a look at both all of the amazing things we can do with modern CSS. If you haven’t challenged your assumptions about what’s possible online recently, read through this for a reset.


CSS for internationalisation

A look through the tools that CSS makes available for you for internationalisation. As the author points out, many of us don’t think about CSS when we think about internationalization. But there is quite a bit of variation in look and feel of text across languages, not to mention wanting to make things match cultural visual norms, etc. CSS is a powerful tool for this purpose, and our i18n projects should not ignore it.


Spacing in CSS

Extremely thorough article looking at many different types of spacing situation you might run across in implementing a design, and highlighting proven ways of implementation. Both obvious applications of padding/margin and more obscure and unusual tricks like negative margins and spacer components.


JavaScript

23+ Advanced JavaScript Interview Questions (ANSWERED)

I’m not a huge fan of learning things just for interviews. And interviews that push you down into deep rabbit holes unrelated to your job are worthless (There is pretty much no reason to have a front-end developer answering questions about sorting algorithms, for example). However, this article is pretty good, because it goes through a set of features of the language that you really will want to learn if you’re writing JavaScript regularly. Don’t view it as interview questions - view it as a survey of topics to learn.


Unconventional Vue—Vue as a Backend Framework

This is really interesting, though I’d love to take it further than this article does. Reactivity is one of the things I miss the most now that I’m not programming in Vue very often, and I found it one of the most powerfully expressive ways to think about front-end development. Applying this concept to back-end development seems like a really interesting idea, and I’d be very curious to take it further.


Frontend Shorts: How to create link content previewer with React, Vue, and Vanilla JavaScript

Nice set of comparisons of creating a relatively simple component in three different ways. One interesting thing that wasn’t called out by the article, but that I noticed is how both the Vanilla and Vue.js versions the author was able to give full examples as flat files… but for React they needed to reach for Code Sandbox to get a build system working. Not a problem for green fields or modern projects, but if you’re in the situation of retrofitting components into an existing system without a front-end build system, that might be an important detail.


How does TypeScript work? The bird’s eye view

Thanks to the setup at my current work, I have finally made the leap to TypeScript and climbed the learning to the point where I’m getting more value than pain from it. It truly does lead to a higher degree of confidence in deploying new code. Anyway, if you haven’t yet made the switch and are looking for something to give you the big picture of how to get started and what it means for a project workflow, take a look here!


3 Ways To Theme React Components

While this article claims to be specific to React, 2 out of the 3 methods involved have no React dependencies at all, while the 3rd is using Styled Components in a mechanism that would work for any CSS-in-JS library and could be applied to whatever your framework of choice might be.


Other Awesomeness

Creating Morphing Animations with CSS clip-path

Super cool tutorial on building animations that morph shapes from one to another. Starts from building out the shapes in SVG, highlights tools for translating from those SVGs to straight HTML and CSS, and closes with a hint at what the future looks like.


The Contrast Triangle

Interesting way of thinking about the 3-way constraint of text colors, background, and link colors to maintain sufficient contrasts for accessibility. Comes with a neat tool as well. Though as Chris Coyier points out, once you add things like hover and selected states you end up in more of an N-dimensional constraint, not just 3-way.


JS "Danger" Party (audio)

I was not on this show, but this was a delightfully fun JSParty episode with special guest Scott Tolinski from SyntaxFM. It’s Jeopardy-style, so you can follow along and see if you can answer the questions better than the panelists!


The Graph in GraphQL

Nice dive through the mental model involved with GraphQL. If you’re considering adapting GraphQL, still feel like you’re trying to understand it, or just curious about how it works, this is a good place to start building the mental model involved.


Stork - WASM-based Search for Static Sites

This is a very cool example of one of the highest potential areas for WebAssembly - plug-in libraries that can be used from JavaScript (or even in mostly static site) to provide targeted functionality. Very simple to use and blazingly fast. If you’re building JAMStack sites and want to provide search functionality, definitely check it out.