Jekyll2023-05-08T13:23:16-07:00https://zendev.com/ZenDev, LLCZenDev is a web development training and consulting firm led by KBall, former lead developer for ZURB Foundation. We provide resources, training, and coaching for developers and teams who are trying to level up in Front-end Web Development.
Kevin BallFriday Frontend: Juneteenth Edition2020-06-19T00:00:00-07:002020-06-19T00:00:00-07:00https://zendev.com/2020/06/19/juneteenth-edition<p dir="ltr">
Happy day of <a href="https://www.juneteenth.com/history.htm">celebrating the end of slavery in the US</a>. Crazy how recent it was, and how much this history continues to haunt us today.
</p>
<p dir="ltr">
I’m not going to say much today; it’s a good day to not just stick with the folks you already listen to or follow but to seek out Black voices in tech. If you’re not sure where to get started, some amazing folks I follow include <a href="https://twitter.com/anjuan">Anjuan Simmons</a>, <a href="https://twitter.com/MoxieHampton">Mo Hampton</a>, <a href="https://twitter.com/codermeow">Crystal Martin</a>, <a href="https://twitter.com/nomadtechie">Amal Hussein</a>, <a href="https://twitter.com/bdougieYO">BDougie</a>,<a href="https://twitter.com/nickcald">Nick Caldwell</a>, <a href="https://twitter.com/shaft">Leslie Miley</a>, and <a href="https://twitter.com/kstewart">Kevin Stewart</a>.
</p>
<p>
Best,<br/>
KBall from ZenDev
</p>
<p dir="ltr">
</p>
<h4>CSS & SCSS</h4>
<h5>
<a href="https://codersblock.com/blog/the-surprising-things-that-css-can-animate/">The Surprising Things That CSS Can Animate</a>
</h5>
<p>
This is a bloody fascinating article. Looks at what animation means when it comes to discrete properties like text transforms and visibility, how to use z-index animation to create layers and 3-d effects, and more. Absolutely love it!
</p>
<br/>
<h5>
<a href="https://thirumanikandan.com/posts/learn-z-index-using-a-visualization-tool">Learn Z-Index Using a Visualization Tool</a>
</h5>
<p>
When I was first starting to do more CSS, I think z-index was one of the most confusing things to me. It seems like it should be so simple, but when you layer on the concepts of stacking context and requiring an element to have position, you quickly end up in a position of frustration asking why the HECK the element you’ve just laid <code>z-index: 99999</code> is still hidden. If you’re still living that, you definitely should check out this combination article + tool for learning how Z-index works.
</p>
<br/>
<h5>
<a href="https://piccalil.li/blog/cube-css/">CUBE CSS</a>
</h5>
<p>
In-depth writeup of an approach to writing CSS by a super-experienced CSS developer. This probably won’t be relevant for those who have gone all in on CSS-in-JS, but I really appreciate how this approach truly embraces the cascade and native capabilities of CSS rather than trying to work around them in the name of pure isolation. As the author points out, design systems have both an bottom-up set of components and a top-down global consistencies, and it’s great to have a CSS approach that embraces both of those.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/how-to-reverse-css-custom-counters/">How to Reverse CSS Custom Counters</a>
</h5>
<p>
Neat article looking at how to handle automatically counted items (similar to a <code>ul</code>) that decrement or have other custom properties of the count.
</p>
<br/>
<h5>
<a href="https://ishadeed.com/article/grid-layout-flexbox-components/">Grid for layout, Flexbox for components</a>
</h5>
<p>
Helpful guide for those struggling to figure out when to use Grid and when to use Flexbox. The title of the article sums it up, but it includes more detailed decision criteria and then follows through with a series of examples showing straightforward implementations of common component and layout problems.
</p>
<br/>
<h5>
<a href="https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/">The Mad Magazine Fold-In Effect in CSS</a>
</h5>
<p>
Super cool effect, demonstrated and then documented in code. Doesn’t really explain much about *why* it works but if you’re up to dig through and understand it there’s some useful techniques in here.
</p>
<br/>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&placement=zendevcom" id="_carbonads_js"></script>
<h4>JavaScript</h4>
<h5>
<a href="https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/">How to Get All Custom Properties on a Page in JavaScript</a>
</h5>
<p>
Step by step walkthrough of how to programmatically pull out all of the custom properties in your CSS and make them accessible to your JavaScript. I’d be curious to explore how it works if you’re doing more than setting properties at the <code>:root</code> level of the cascade - I suspect you’d end up with duplicate properties and some more context would be useful - but still a useful exercise.
</p>
<br/>
<h5>
<a href="https://medium.com/better-programming/recoil-js-the-new-better-state-management-library-for-react-1095947b5191">Recoil.js — The New, Better State Management Library for React</a>
</h5>
<p>
Nice introduction to a new state management library released by Facebook. Certainly with many of the new capabilities React has introduced, there are a larger and larger number of usecases that don’t need the full heavy-handed approach of a Redux or Mobx, so interesting to see these alternatives coming out.
</p>
<br/>
<h5>
<a href="https://jsgrids.io/">JSGrids.io</a>
</h5>
<p>
Ooooh this is super useful! A filterable index of table/grid libraries in JavaScript. Lets you filter by JavaScript framework and by a set of commonly needed features to understand what your options are.
</p>
<br/>
<h5>
<a href="https://www.freecodecamp.org/news/advanced-typescript-types-cheat-sheet-with-examples/">Advanced TypeScript Types Cheat Sheet (with Examples)</a>
</h5>
<p>
If you, like me, have jumped onto the TypeScript bandwagon but are still climbing up the learning curve, this is a super useful resource that highlights a set of tools and utility types that will improve your ability to make the type checker do your bidding.
</p>
<br/>
<h4>Other Awesomeness</h4>
<h5>
<a href="https://mamunhpath.github.io/josh.js/">Josh.js</a>
</h5>
<p>
I’m happy to see folks working on animation libraries like this that make it easy to add micro-interactions as you scroll through your page. This is a tiny library -- it’s not as fully-featured as the long-neglected <a href="https://prinzhorn.github.io/skrollr/">Skrollr</a> -- but shows how easy it is to build something like this on top of modern tools like Animate.css. I’d love to see someone take this (or a similar) library and build out something as powerful as Skrollr but that actually works on mobile and is actively maintained.
</p>
<br/>
<h5>
<a href="https://www.logolounge.com/articles/2020-logo-trend-report">2020 Logo Trend Report</a>
</h5>
<p>
More on the design side than front-end development, but this is a fascinating look through logo trends this last year, with enough context discussion that even a non-designer like me can understand a little bit about what’s going on and why some of these trends are interesting.
</p>
<br/>
<h5>
<a href="https://jakearchibald.com/2020/events-and-gc/">Event listeners and garbage collection</a>
</h5>
<p>
Interesting look at how event listeners interact with the browser’s garbage collection. I also found it interesting to take note of just how hard it is to correctly handle race conditions and related aborts. I wish the browser had better primitives for that.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/">Striking a Balance Between Native and Custom Select Elements</a>
</h5>
<p>
This looks at a dilemma that has come up before in this newsletter: Native select elements are clunky and hard to customize, but custom select elements often fall down when it comes to accessibility and keyboard use. The article goes through some of these challenges and then walks down an example “hybrid” approach that attempts to get the best of both worlds… or at least avoid the major downsides of either.
</p>
<br/>KBallkball@zendev.com/authors/kball.htmlHappy day of celebrating the end of slavery in the US. Crazy how recent it was, and how much this history continues to haunt us today.Friday Frontend: Reactivity in 20202020-06-12T00:00:00-07:002020-06-12T00:00:00-07:00https://zendev.com/2020/06/12/reactivity-in-2020-edition<p dir="ltr">
Hope you had a good week and are looking at a great weekend. I’m surely looking forward to a rest after working a lot of late nights on a deadline.
</p>
<p dir="ltr">
This week, if you read one article, read the article at the top of the JavaScript section on reactivity patterns in 2020. Fascinating look at one of the defining characteristics of modern front-end development.
</p>
<p>
Best,<br/>
KBall from ZenDev
</p>
<p dir="ltr">
</p>
<h4>CSS & SCSS</h4>
<h5>
<a href="https://webplatform.news/issues/2020-06-04">CSS :is() and :where() are coming to browsers</a>
</h5>
<p>
This is super cool, especially for those who are still writing traditional CSS (not in JS) where having additional control while maintaining low specificity will be super valuable.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/creative-background-patterns-using-gradients-css-shapes-and-even-emojis/">Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis</a>
</h5>
<p>
Delightfully whimsical walk through creating inventive background patterns with CSS.
</p>
<br/>
<h5>
<a href="https://ishadeed.com/article/css-color/">Colors in CSS</a>
</h5>
<p>
Super deep dive into the different ways of setting and manipulating color in CSS.
</p>
<br/>
<h5>
<a href="https://polypane.app/blog/the-complete-guide-to-css-media-queries/">The complete guide to CSS media queries</a>
</h5>
<p>
Includes not only the standard size based queries but all sorts of fun ones based on functionality and aspect ratio.
</p>
<br/>
<h5>
<a href="https://snook.ca/archives/html_and_css/overlapping-header-with-css-grid">Overlapping Header with CSS Grid</a>
</h5>
<p>
Short and sweet walkthrough of how to take a design and implement it using CSS grid. A useful pattern to add to your toolkit.
</p>
<br/>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&placement=zendevcom" id="_carbonads_js"></script>
<h4>JavaScript</h4>
<h5>
<a href="https://indepth.dev/exploring-the-state-of-reactivity-patterns-in-2020/">Exploring the state of reactivity patterns in 2020</a>
</h5>
<p>
Absolutely fascinating article looking at the patterns we’re using in modern front-end frameworks today. If you read one article in this newsletter, read this one.
</p>
<br/>
<h5>
<a href="https://www.smashingmagazine.com/2020/06/higher-order-components-react/">Higher-Order Components In React</a>
</h5>
<p>
Long-form tutorial on higher order components (HOCs). Do note: this tutorial uses entirely the older class-based approach to React Components. Some of the use cases they describe for HOCs can now be better implemented with hooks. But HOCs are still a useful concept. See <a href="https://medium.com/javascript-scene/do-react-hooks-replace-higher-order-components-hocs-7ae4a08b7b58">this post</a> for a cogent breakdown of when you’d use one or the other.
</p>
<br/>
<h5>
<a href="https://medium.com/javascript-scene/one-cool-trick-to-simplify-reducer-functions-bbbffe488bb6">One Cool Trick to Simplify Reducer Functions</a>
</h5>
<p>
Nice demonstration of a library (Immer) designed to make programming with immutable state easier in JavaScript, and how that tool then makes it simpler to write and reason about functional patterns like a Reducer.
</p>
<br/>
<h5>
<a href="https://indepth.dev/a-deep-dive-into-injectable-and-providedin-in-ivy/">A Deep Dive into @Injectable and providedIn in Ivy</a>
</h5>
<p>
Long-time readers know that I’m not a huge Angular fan. That said, the focus on dependency injection is one of the truly unique and powerful aspects of Angular that has not made its way into broader use in the front-end ecosystem. This is a deep dive into how it works.
</p>
<br/>
<h4>Other Awesomeness</h4>
<h5>
<a href="https://blog.logrocket.com/graphql-directives-are-underrated/">GraphQL directives are underrated</a>
</h5>
<p>
I didn’t even know directives were a thing in GraphQL. Very curious after reading this article to try them out. If you’ve used them before, can you shoot me a quick note back and let me know if you found them useful, and if so for what? Thanks!
</p>
<br/>
<h5>
<a href="https://developer.ibm.com/articles/why-webassembly-and-rust-together-improve-nodejs-performance/">Why using WebAssembly and Rust together improves Node.js performance</a>
</h5>
<p>
I’m hearing more and more examples of using WebAssembly as a way to plug in Rust-based blocks of high-performance libraries into various places. The amazing thing with WASM is you can plug them into Node, you can plug them into the web, it will just work everywhere! Love it!
</p>
<br/>
<h5>
<a href="https://medium.com/paypal-engineering/reusing-ui-components-at-enterprise-level-a7df1ea1f8dd">Sharing UI components at an enterprise level</a>
</h5>
<p>
A nice look at how Paypal handles sharing UI components. What I like about this article is that they don’t treat this as purely a technical challenge, but dive into the core human challenges like discoverability.
</p>
<br/>
<h5>
<a href="https://www.impressivewebs.com/adding-css-to-a-page-via-http-headers/">Adding CSS to a Page via HTTP Headers</a>
</h5>
<p>
Interesting and bizarre. Every day I learn something new that is possible on the web. I’m not sure how practical this is likely to be for most people, but I imagine someone will come up with something.
</p>
<br/>KBallkball@zendev.com/authors/kball.htmlHope you had a good week and are looking at a great weekend. I’m surely looking forward to a rest after working a lot of late nights on a deadline.Friday Frontend: “Modern” JS & Web Dueling Takes Edition2020-05-29T00:00:00-07:002020-05-29T00:00:00-07:00https://zendev.com/2020/05/29/modern-js-dueling-takes<p dir="ltr">
Happy Friday! There’s some super cool articles this week that I’d love to draw your attention to. In particular there are some dueling takes that present fascinating viewpoints on our front-end ecosystem.
</p>
<p dir="ltr">
The first pair is the first two articles in the JavaScript section looking at what JavaScript is like today, highlighting both the challenges faced by outsiders and the potential in the ecosystem.
</p>
<p dir="ltr">
The second is a pair of takes about the “Modern Web”, summarized by the first article in the “Other Awesome” section.
</p>
<p>
Best,<br/>
KBall from ZenDev
</p>
<p dir="ltr">
P.S. I’m sorry, I’ve been completely slammed with deadline and life and have not been able to get back to everyone who reached out about finding work. I’ll keep plugging the resources I’ve been plugging, but have to say that realistically I won’t be able to do much personalized help until I finish this work project. The 2 resources in question: <a href="https://airtable.com/shrpj2r4Kjc4YoMu4/tbl8m95GiuWehnIiT?blocks=hide">this great resource</a> of which companies are hiring and which are not, as well as share <a href="https://www.wfhbuthiring.com/">this resource</a> that a reader shared.
</p>
<h4>CSS & SCSS</h4>
<h5>
<a href="https://css-tricks.com/flexbox-like-just-put-elements-in-a-row-with-css-grid/">Flexbox-like “just put elements in a row” with CSS grid</a>
</h5>
<p>
Nice little quick recipe for using Grid even when looking for a vector layout. I’m not sure exactly why you’d want to reach for Grid over flexbox here, but good to know what’s available.
</p>
<br/>
<h5>
<a href="https://amberwilson.co.uk/blog/css-tips-for-new-devs/">CSS Tips for New Devs</a>
</h5>
<p>
A good roundup of useful info for folks who are new to CSS. Not much new content if you’ve been in the space for a while, but I know a number of you are newer to CSS and this is a nice rundown to get you oriented.
</p>
<br/>
<h5>
<a href="https://www.smashingmagazine.com/2020/05/reusable-react-components-tailwind/">Building Reusable React Components Using Tailwind</a>
</h5>
<p>
I’ve never used Tailwind, and I am not aware of best practices for use, but I thought this was interesting. The author wraps up Tailwind classes both as individual and grouped props in React. Honestly to me it feels like it’s taking it a bit away from the Tailwind philosophy to spec out particular items as props, but I’d be curious what folks who’ve actually used Tailwind think. If that’s you, drop me a note!
</p>
<br/>
<h5>
<a href="https://hugogiraudel.com/">Using calc to figure out optimal line-height</a>
</h5>
<p>
Nice look at creating a universal formula for line-height across elements of different font sizes. If you’ve got a super consistent design system and always use the same heights via classes (or by element), you may get better results by explicitly setting for every font size, but if you’re dealing with a more chaotic system this approach looks great!
</p>
<br/>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&placement=zendevcom" id="_carbonads_js"></script>
<h4>JavaScript</h4>
<h5>
<a href="http://lea.verou.me/2020/05/todays-javascript-from-an-outsiders-perspective/">Today’s Javascript, from an outsider’s perspective</a>
</h5>
<p>
A valuable look from the outside at the costs associated with the power in our profusion of tools around JavaScript -- Complexity and difficulty of use. We’ve done a great job of enabling JavaScript to do more and more powerful and complex things, but done a poor job of keeping the basic use case simple. We need not just more powerful tools, but more accessible and immediately usable tools.
</p>
<br/>
<h5>
<a href="https://www.swyx.io/writing/js-third-age/">The Third Age of JavaScript</a>
</h5>
<p>
Great counterpoint to the piece above, this looks at what is going on in the community now and the evolution that is happening. Some of the big developments directly address the problems above - in particular the collapsing of layers into single end to end tools is likely to make it far easier to get started, pick up some JavaScript, and have it “just work”.
</p>
<br/>
<h5>
<a href="https://vgpena.github.io/js-arrays/">Best Practices in JavaScript Array Iteration</a>
</h5>
<p>
Nice educational article - I love the high level descriptions of each form of iteration, and descriptions of the “why” you’d want to use each one. The tactical “here’s how it works” is fine, but that “why” is what sets this article apart.
</p>
<br/>
<h5>
<a href="https://changelog.com/jsparty/127">A visit to Deno Land (Audio)</a>
</h5>
<p>
If you’re interested in Deno as potentially being the “new hotness”, definitely take a listen through this recent episode of JSParty with one of the core contributors. I wish I’d been able to be on this show because I definitely would have pushed a bit harder on questions about package management and the community and CoC, but Divya and Nick did a great job interviewing and there’s a ton of fascinating content in there.
</p>
<br/>
<h5>
<a href="https://dev.to/blacksonic/the-vue-3-upgrade-guide-4dc4">The Vue 3 upgrade guide</a>
</h5>
<p>
Super excited about Vue 3, and I love to see articles like this coming out to help migrate existing applications into the new hotness. The new approaches look super clean to me, and I love how much easier it’s going to get to use TypeScript with Vue.
</p>
<br/>
<h4>Other Awesomeness</h4>
<h5>
<a href="https://css-tricks.com/the-modern-web/">“The Modern Web”</a>
</h5>
<p>
A quick summary of two opposing posts making the rounds with opposite takes on the state of the modern web. You should read the underlying <a href="https://macwright.org/2020/05/10/spa-fatigue.html">negative</a> and <a href="https://dev.to/richharris/in-defense-of-the-modern-web-2nia">positive</a> posts as well, but this is a nice summary that draws it together.
</p>
<br/>
<h5>
<a href="https://ethanmarcotte.com/wrote/responsive-design-at-10/">Responsive web design turns ten.</a>
</h5>
<p>
If you’re getting into front-end development now, it may feel like responsive web design has always been around. There’s almost no web development done today that isn’t responsive in some form. But back when mobile phones had just started to get browsers, this was a brand new concept! This is a great backstory behind how the concept first came to be.
</p>
<br/>
<h5>
<a href="https://docs.google.com/spreadsheets/d/1IucQobJUiqMl0DUMPpf9tGftNR0SQ_hfvlA2blXgyyo/edit#gid=1423434830">The Fastest Google Fonts</a>
</h5>
<p>
Fascinating walk through the process of optimizing load for webfonts from google fonts. Many of the tricks used here can apply to other types of CSS if applied carefully, but the level of impact the author sees from applying them strictly to fonts is striking. If you’re using webfonts, I highly recommend reading through this and applying some of the lessons. And if not, read through it anyway for a master class in optimizing meaningful front-end performance metrics.
</p>
<br/>
<h5>
<a href="https://www.swyx.io/writing/ie11-eol/">IE11 Mainstream End Of Life in Oct 2020</a>
</h5>
<p>
I love the optimism in this post that we might be able to get away from IE11 soon, but now working at a company focused on large enterprises, and starting to interact with those large enterprises more and more… I think anyone focused on enterprise will likely have to support IE11 for a good while yet.
</p>
<br/>
<h5>
<a href="https://kilianvalkhof.com/2020/accessibility/accessibility-is-not-like-drowning/">Accessibility is not like drowning</a>
</h5>
<p>
The author draws from philosophical discussions of virtue and drowning to highlight that Accessibility is not a binary switch. Small improvements matter, and if we each keep making progress it will make a meaningful difference for the web.
</p>
<br/>KBallkball@zendev.com/authors/kball.htmlHappy Friday! There’s some super cool articles this week that I’d love to draw your attention to. In particular there are some dueling takes that present fascinating viewpoints on our front-end ecosystem. Friday Frontend: May 22 Edition2020-05-22T00:00:00-07:002020-05-22T00:00:00-07:00https://zendev.com/2020/05/22/may-22-edition<p dir="ltr">
Hope you’re doing well this week. I continue to be slammed with work, but there’s a light at the end of the tunnel. Very close to feature complete & starting on QA. Hope to be more responsive to y’all soon.
</p>
<p dir="ltr">
Enjoy your weekend reading!
</p>
<p>
Best,<br/>
KBall from ZenDev
</p>
<p dir="ltr">
P.S. I’m sorry, I’ve been completely slammed with deadline and life and have not been able to get back to everyone who reached out about finding work. I’ll keep plugging the resources I’ve been plugging, but have to say that realistically I won’t be able to do much personalized help until I finish this work project. The 2 resources in question: <a href="https://airtable.com/shrpj2r4Kjc4YoMu4/tbl8m95GiuWehnIiT?blocks=hide">this great resource</a> of which companies are hiring and which are not, as well as share <a href="https://www.wfhbuthiring.com/">this resource</a> that a reader shared.
</p>
<h4>CSS & SCSS</h4>
<h5>
<a href="https://cloudfour.com/thinks/css-animation-timelines-building-a-rube-goldberg-machine/">CSS Animation Timelines: Building a Rube Goldberg Machine</a>
</h5>
<p>
Super fun example of what is possible with CSS animation. I have to say I also love the level of readability that CSS variables brings to CSS. Similar to how you might factor out named constants in JavaScript code instead of using magic numbers, you can now do this throughout your CSS as well.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/equal-width-columns-in-css-grid-are-kinda-weird/">Equal Width Columns in CSS Grid are Kinda Weird</a>
</h5>
<p>
Interesting edge case in Grid. I’m currently building in an environment where we aren’t using Grid because it’s a pain (though doable) to get Grid layouts working for IE11, so I haven’t hit all of these weird edge cases yet. But if you are able to use Grid for your layouts, chances are you’ve battled this challenge and will find this useful.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/how-to-tame-line-height-in-css/">How to Tame Line Height in CSS</a>
</h5>
<p>
Deep dive into the line-height property, how it behaves, how that is different than you might expect if you were coming from a print/typography background, and how to force it to behave like leading does in print design.
</p>
<br/>
<h5>
<a href="https://codepen.io/ricardoolivaalonso/pen/PoPyPvW">Codepen: Painter</a>
</h5>
<p>
Brilliant inspiration of a piece of CSS art. I also love that all the CSS class names are in Spanish; part of me wishes we had the ability to translate e.g. property names automatically, so that you could learn things that make sense in your native tongue rather than everyone being forced into English for your syntax and CSS properties. Especially given how constrained the names are, it seems like we could do this and enable auto-translation for those particular words. Ah well.
</p>
<br/>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&placement=zendevcom" id="_carbonads_js"></script>
<h4>JavaScript</h4>
<h5>
<a href="https://codechips.me/how-to-use-typescript-with-svelte/">How to use Typescript with Svelte</a>
</h5>
<p>
I’ve been using TypeScript more and more at work, and honestly I dunno that I’d ever choose to go back to vanilla JS given the choice. But I would love to get back to playing with Svelte if and when I ever have free time again (post COVID?). So I’m very excited to see folks publishing resources like this on how to integrate the two.
</p>
<br/>
<h5>
<a href="https://www.simform.com/react-architecture-best-practices/">React Architecture Best Practices and Tips from Community Experts</a>
</h5>
<p>
This article wasn’t as good as I hoped it would be from the title - yes there is some good stuff in there, but I was hoping for a lot more! But frontend architectural articles are few and far between, and there is at least some good stuff in here.
</p>
<br/>
<h5>
<a href="https://levelup.gitconnected.com/5-javascript-tips-i-learned-from-vue-source-code-6095df4e9bc1">5 JavaScript Tips I Learned From Vue Source Code</a>
</h5>
<p>
Interesting dive into some nitty gritty behaviors of the JavaScript language and different runtime environments. Probably not very useful for day to day work, but more so for framework authors or folks really trying to master the language.
</p>
<br/>
<h5>
<a href="https://blog.marklreyes.com/upgrading-a-legacy-angular-web-app/">Upgrading a Legacy Angular Web App</a>
</h5>
<p>
Has any framework done a worse job of enabling migration to new versions than Angular? There was the 1 to 2 no migration path debacle, but I thought they might have learned their lesson from that. Apparently not. Check out this trail of pain in trying to update from version 4 to version 6!
</p>
<br/>
<h4>Other Awesomeness</h4>
<h5>
<a href="https://css-tricks.com/how-to-build-a-chrome-extension/">How to Build a Chrome Extension</a>
</h5>
<p>
I think a lot of folks have an idea in their head of extensions as complicated things to build, but honestly if you can use HTML, CSS, and Javascript to make a webpage, you can use them to make a chrome extension. Check out how easy it is!
</p>
<br/>
<h5>
<a href="https://www.smashingmagazine.com/2020/05/accessible-images/">Accessible Images For When They Matter Most</a>
</h5>
<p>
Fascinating super-deep dive into how to make images accessible. Starting from how to think about the role an image is playing and what the implications are for accessibility. It’s a lot more than slapping an alt tag on.
</p>
<br/>
<h5>
<a href="https://blog.stephaniestimac.com/posts/2020/05/web-we-want-2019-survey-results/">The Web We Want Survey Results</a>
</h5>
<p>
I love to see browser developers working with the community like this, and the choices people are making for what they want are fascinating. The bifurcation on some of the accessibility requests is fascinating - some people really want the browser to automatically fix accessibility issues, and others seem to really not (I guess worried it will mess up other things).
</p>
<br/>
<h5>
<a href="https://adamsilver.io/articles/form-design-multiple-inputs-versus-one-input/">Form design: multiple inputs versus one input</a>
</h5>
<p>
Walk through of design tradeoffs for situations where you might be tempted to use multiple inputs in place of one. Does a nice job of not only explaining which is the right answer, but also the decision criteria and what you can do to solve the problem that might lead you to the other approach.
</p>
<br/>
<h5>
<a href="https://www.baymard.com/blog/current-state-of-checkout-ux">The Current State of Checkout UX (18 Common Pitfalls)</a>
</h5>
<p>
Thanks to COVID-19 and related lockdowns, e-commerce is currently experiencing a massive boom. If you’re working in this space, you probably know that checkout is one of the key gates to conversion and revenue, and optimizing your checkout flow is almost always a good investment. This article dives into how different e-commerce companies are doing and shows a set of common mistakes you can walk through and fix right away.
</p>
<br/>KBallkball@zendev.com/authors/kball.htmlHope you’re doing well this week. I continue to be slammed with work, but there’s a light at the end of the tunnel. Very close to feature complete & starting on QA. Hope to be more responsive to y’all soon.Friday Frontend: May 15 Edition2020-05-15T00:00:00-07:002020-05-15T00:00:00-07:00https://zendev.com/2020/05/15/may-15-edition<p dir="ltr">
Hope your week went okay. I’ve been absolutely SLAMMED with life stuff plus a big work project coming close to deadline. Little bit of a shorter set of articles this week for that reason, but still some great ones.
</p>
<p dir="ltr">
Enjoy!
</p>
<p>
Best,<br/>
KBall from ZenDev
</p>
<p dir="ltr">
P.S. I’m sorry, I’ve been completely slammed with deadline and life and have not been able to get back to everyone who reached out about finding work. I’ll keep plugging the resources I’ve been plugging, but have to say that realistically I won’t be able to do much personalized help until I finish this work project. The 2 resources in question: <a href="https://airtable.com/shrpj2r4Kjc4YoMu4/tbl8m95GiuWehnIiT?blocks=hide">this great resource</a> of which companies are hiring and which are not, as well as share <a href="https://www.wfhbuthiring.com/">this resource</a> that a reader shared.
</p>
<h4>CSS & SCSS</h4>
<h5>
<a href="https://css-tricks.com/min-max-and-clamp-are-css-magic/">min(), max(), and clamp() are CSS magic!</a>
</h5>
<p>
Working at a company focused on enterprise clients I’m sadly unable to use all of these fun magic tricks that don’t work in IE, but DAMN has CSS gotten cool if you can focus entirely on modern browses.
</p>
<br/>
<h5>
<a href="https://moderncss.dev/">Modern CSS Solutions for Old CSS Problems</a>
</h5>
<p>
Great series of CSS solutions for common problems. If you’re an old-time frontend developer like me who has your “way to do things” this is a great place to look and see if any of those ways have been superseded, whereas if you’re newer to CSS this is just a great set of implementation guides for common situations.
</p>
<br/>
<h5>
<a href="https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/">CSS fix for 100vh in mobile WebKit</a>
</h5>
<p>
This is great! A simple useful fix to work around the issues with iOS and 100vh. Yes, it’s a total and complete hack, but it also works. This solves a problem that has vexed me multiple times when building mobile layouts.
</p>
<br/>
<h5>
<a href="https://ishadeed.com/article/twitter-css/">CSS Findings From Twitter Design</a>
</h5>
<p>
A deep dive digging through Twitter’s production CSS looking for interesting things. Some cool techniques, but also a lot of ‘WTF?’ type of pieces, many of which to me look like broken abstractions coming from using CSS-in-JS like a massive hammer without understanding CSS.
</p>
<br/>
<h5>
<a href="https://elijahmanor.com/firefox-devtools-inactive-css/">Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools</a>
</h5>
<p>
Quick hit showing a super useful tool within Firefox devtools.
</p>
<br/>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&placement=zendevcom" id="_carbonads_js"></script>
<h4>JavaScript</h4>
<h5>
<a href="https://www.swyx.io/writing/react-sfcs-here/">React Single File Components Are Here</a>
</h5>
<p>
Super cool breakdown of the new ‘Cell’ approach from Redwood.js, which the author points out is an extremely viable approach to “single file components” within React. If you’re intrigued by Redwood (I certainly am!) you might enjoy <a href="https://changelog.com/jsparty/119">this JSParty episode</a> as well.
</p>
<br/>
<h5>
<a href="https://deno.land/v1">Deno 1.0</a>
</h5>
<p>
Any way you cut it, this is a big deal. A Typescript first server-side environment similar to Node.js, launched by among others Ryan Dahl who was the original developer behind Node. Lots of fascinating stuff. Honestly though, I’m pretty worried about the culture of the project. The maintainers have systematically pushed back against adopting a code of conduct, despite reports of toxicity in the online communities. Does not strike me as a community that will be welcoming to anyone outside of the reigning SV/tech bro culture.
</p>
<br/>
<h5>
<a href="https://webkid.io/blog/react-flow-node-based-graph-library/">React Flow - A Library for Rendering Interactive Graphs</a>
</h5>
<p>
This looks super cool; a very simple to use library for rendering interactive graphs. If you have graph-like data (a set of nodes with edges) that you want to visualize, check this out!
</p>
<br/>
<h5>
<a href="https://chrisboakes.com/getting-started-with-sapper-and-svelte/">Getting started with Sapper and Svelte</a>
</h5>
<p>
Shortly before I started my most recent job I started playing around with Svelte and Sapper, and I built a simple JAMStack site with them. Have to say I loved the experience. If you’re curious, this looks like a solid step by step tutorial to get you started.
</p>
<br/>
<h4>Other Awesomeness</h4>
<h5>
<a href="http://www.timcasasola.com/blog/writing">Why does writing matter in remote work?</a>
</h5>
<p>
An article after my own heart. Writing has elevated so many aspects of my career, and is one of the key reasons I’ve been able to be successful in remote work both before and now during the pandemic.
</p>
<br/>
<h5>
<a href="https://www.smashingmagazine.com/2020/05/reducing-design-risk/">Reducing Design Risk</a>
</h5>
<p>
Great article on conducting usability research. I have to say, I’ve had the opportunity this last 6 months or so to work with a dedicated UX researcher (as compared to someone who tried to fit in UX research as a part of an overall design position) and it is a BLESSING to have on your team.
</p>
<br/>
<h5>
<a href="https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html">Introducing Web Vitals: essential metrics for a healthy site</a>
</h5>
<p>
The team over at Google is continuing to push the web for high performance websites, and have just introduced a new standard set of metrics. You should definitely look at these, not only because they are generally useful, but also because Google looks like they’re putting these into all of their tooling and will probably be using them to do things like drive search engine ranking and more.
</p>
<br/>KBallkball@zendev.com/authors/kball.htmlHope your week went okay. I’ve been absolutely SLAMMED with life stuff plus a big work project coming close to deadline. Little bit of a shorter set of articles this week for that reason, but still some great ones.Friday Frontend: May 8 Edition2020-05-08T00:00:00-07:002020-05-08T00:00:00-07:00https://zendev.com/2020/05/08/may-8-edition<p dir="ltr">
Hope you had as good a week as we can in the current craziness.
</p>
<p dir="ltr">
It’s been another frantic week this week for me between childcare, dealing with parent health issues, and keeping up on work, but I’ve got a lot of great stuff for you below.
</p>
<p>
Best,<br/>
KBall from ZenDev
</p>
<p dir="ltr">
P.S. I’ve been a bit overwhelmed this last week so haven’t been able to help as many folks as I’d like to on the COVID displacement/hiring front, but don’t hesitate to reach out to me if you’ve been laid off and need help finding something (and if you already reached out, feel free to ping me again; I’ve just been slammed, sorry!). A couple resources - I want to plug again <a href="https://airtable.com/shrpj2r4Kjc4YoMu4/tbl8m95GiuWehnIiT?blocks=hide">this great resource</a> of which companies are hiring and which are not, as well as share <a href="https://www.wfhbuthiring.com/">this resource</a> that a reader shared.
</p>
<h4>CSS & SCSS</h4>
<h5>
<a href="https://uglyduck.ca/fake-3d-elements-with-css/">Faking 3D Elements with CSS</a>
</h5>
<p>
A fun example that shows how to create what looks for all intents and purposes like a 3d sphere using CSS and 2 HTML elements.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/list-style-recipes/">List Style Recipes</a>
</h5>
<p>
A great set of tools to use for styling your lists. I didn’t know about some of these tricks! I particularly am excited about all of the ways for customizing the numbers of an ordered list.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/complete-guide-to-css-functions/">A Complete Guide to CSS Functions</a>
</h5>
<p>
Incredibly detailed list of all of the different functions available to you in CSS. Organized by group. Good both as a resource to go to for a specific function or to browse for new and interesting CSS… I’m particularly intrigued by some of the ‘not ready for primetime’ functions.
</p>
<br/>
<h5>
<a href="http://www.js-craft.io/blog/when-to-use-css-grid-and-when-to-use-flexbox/">When to use CSS grid and when to use flexbox</a>
</h5>
<p>
Short, easy to understand, and with great visual examples. What’s not to love?
</p>
<br/>
<h5>
<a href="https://medium.com/chegg/performance-monitoring-in-css-animations-f11a21d0054f">Performance monitoring in CSS animations</a>
</h5>
<p>
A great look at some of the tools available to you in devtools to understand (and debug) the performance of your CSS animations.
</p>
<br/>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&placement=zendevcom" id="_carbonads_js"></script>
<h4>JavaScript</h4>
<h5>
<a href="https://www.tiny.cloud/blog/modern-javascript-refactoring-tinymce/">Continuously refactoring 100000 lines of code</a>
</h5>
<p>
Interesting look behind the scenes at modernizing a large JavaScript project. Working with legacy code is a huge part of many developer’s lives, but often under-emphasized in educational posts, so love to see something like this with real life examples of how to approach it.
</p>
<br/>
<h5>
<a href="https://obedparla.com/code/a-visual-guide-to-react-mental-models/">A Visual Guide To React Mental Models</a>
</h5>
<p>
For something billed as a visual guide, the visuals on this actually aren’t super helpful. HOWEVER, the writeup is helpful, so I want to share it anyway. Sums up a number of the core concepts and mental models around writing React applications.
</p>
<br/>
<h5>
<a href="https://blog.scottlogic.com/2020/05/01/demystifying-react-redux.html">Demystifying React Redux</a>
</h5>
<p>
In-depth dive into the mental models behind Redux and how it works with React. I like this approach of re-implementing a simplified version of a library to understand the mental models. Well done.
</p>
<br/>
<h5>
<a href="https://blog.bitsrc.io/image-manipulation-libraries-for-javascript-187fde1ad5af">10 JavaScript Image Manipulation Libraries for 2020</a>
</h5>
<p>
Very neat set of tools. I love to see how easy some of these make it to do features that feel advanced like auto-cropping, edge detection, and more.
</p>
<br/>
<h5>
<a href="https://aralroca.com/blog/detect-text-toxicity-with-react">Detect text toxicity using React</a>
</h5>
<p>
This is also a super cool example of how easy it is to integrate machine-learning based tools for real and important impacts. Add toxicity checking into your React forms or others using a few simple hooks.
</p>
<br/>
<h4>Other Awesomeness</h4>
<h5>
<a href="https://kilianvalkhof.com/2020/accessibility/accessibility-is-an-unknown-unknown/">For many, accessibility is an unknown unknown</a>
</h5>
<p>
This is an article that expresses better than I have the sense that “More of accessibility should be baked into the browser”. Not in the sense that individual developers will never have to do anything, but that we should build the same types of guide rails and error flagging for common accessibility errors as we do for visual & logical JavaScript errors.
</p>
<br/>
<h5>
<a href="https://stegosource.com/how-to-build-html-forms-right-accessibility/">How to Build HTML Forms Right: Accessibility</a>
</h5>
<p>
Great super in-depth article about how to handle accessibility in forms. What I like about this article is that it brings together a whole slew of techniques that you can often fine one-off articles on and gives you the big picture.
</p>
<br/>
<h5>
<a href="https://remysharp.com/2020/04/29/were-not-smarter-than-browsers">We're not smarter than browsers</a>
</h5>
<p>
Straightforward, well-written argument for why we should default to using vanilla HTML and CSS for elements over building custom JavaScript-based replacements whenever possible. I particularly like the formulation that “when you disable user-select or try to disable right-click on your web page and you're not only breaking the accessibility the page, but you're also making the rather bold statement that your code will never, ever break.”
</p>
<br/>
<h5>
<a href="https://v8.dev/blog/wasm-decompile">What’s in that .wasm? Introducing: wasm-decompile</a>
</h5>
<p>
Very interesting new tool if you’re doing stuff with webassembly. Takes a wasm binary (even an optimized one) and “decompiles” it into readable pseudo code.
</p>
<br/>KBallkball@zendev.com/authors/kball.htmlHope you had as good a week as we can in the current craziness.Friday Frontend: May Day Edition2020-05-01T00:00:00-07:002020-05-01T00:00:00-07:00https://zendev.com/2020/05/01/may-day-edition<p dir="ltr">
Hope you’re staying safe and healthy. Welcome to May! After about the longest April I can ever remember. Hope things start to get better this month.
</p>
<p dir="ltr">
I’ve been super busy this week, so a little light on the articles, but there’s still some great ones. Definitely check out the article on JavaScript performance, and I love the look at the spectrum of static to non-static sites.
</p>
<p>
Best,<br/>
KBall from ZenDev
</p>
<p dir="ltr">
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 <a href="https://airtable.com/shrpj2r4Kjc4YoMu4/tbl8m95GiuWehnIiT?blocks=hide">this great resource</a> of which companies are hiring and which are not, as well as share <a href="https://www.wfhbuthiring.com/">this resource</a> that a reader shared.
</p>
<h4>CSS & SCSS</h4>
<h5>
<a href="https://css-tricks.com/how-to-make-a-css-only-carousel/">How to Make a CSS-Only Carousel</a>
</h5>
<p>
This tutorial contains a few excellent examples of how far we’ve come with CSS. OMG it used to take heavy JavaScript and tons of tinkering to get the behavior that can now be implemented with simple properties like <code>scroll-snap-type</code> and <code>scroll-behavior</code>. Wow!
</p>
<br/>
<h5>
<a href="https://css-tricks.com/accessible-font-sizing-explained/">Accessible Font Sizing, Explained</a>
</h5>
<p>
Part of me felt like this shouldn’t be in the CSS section, because it touches on design choices and isn’t isolated to the technology, but the tactical information for how to implement accessible fonts in CSS is just too good to leave it out of this section.
</p>
<br/>
<h5>
<a href="https://ishadeed.com/article/selection-in-css/">Selection in CSS</a>
</h5>
<p>
Great look into the tools you have available in CSS for styling things related to selection. Is text selectable? What does it look like if you select it? What are the limitations of how you can style selection? It’s all there in this article.
</p>
<br/>
<h5>
<a href="https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/">The CSS "content" property accepts alternative text</a>
</h5>
<p>
Woah, this is cool! If you, like me, often use the <code>content</code> property of <code>:before</code> and <code>:after</code> pseudoelements to style things, and your approach to accessibility with those pseudoelements was simply to hide them from aria, look again! There’s a way to set alt text!
</p>
<br/>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&placement=zendevcom" id="_carbonads_js"></script>
<h4>JavaScript</h4>
<h5>
<a href="https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/">The Cost of Javascript Frameworks</a>
</h5>
<p>
Phenomenal piece of research looking at the performance of sites across the web, broken down by which frameworks they’re using. There’s some nuance here, and as the author highlights “It’s not just about the framework, but approach to development the framework encourages”, but definitely some very important data and food for thought.
</p>
<br/>
<h5>
<a href="https://dmitripavlutin.com/javascript-scope-gotchas/">5 JavaScript Scope Gotchas</a>
</h5>
<p>
While newer features of JavaScript have given us tools like <code>const</code> and <code>let</code> which are easier to think about with regards to scope than <code>var</code>, they have not made the challenges of scope go away completely. This article highlights 5 common errors, explains what’s going on, and how to fix them.
</p>
<br/>
<h5>
<a href="https://bitsofco.de/what-i-wish-i-knew-about-react/">What I wish I knew about React</a>
</h5>
<p>
This is a great article for folks new to React coming from other front-end frameworks. It’s also a solid example of why you don’t need to be an expert to write great articles. The author documents their learning process, and some of the key realizations they’ve made as a developer new to React. And it’s super useful! Check it out.
</p>
<br/>
<h4>Other Awesomeness</h4>
<h5>
<a href="https://css-tricks.com/static-or-not/">Static or Not?</a>
</h5>
<p>
A nice breakdown of some of the pros and cons of building a static site vs using a more traditional CMS or web application. That said, I think the big point that Chris is making here is key: It’s not an either or. Instead, the way to think about static sites and static site generators is around precompilation. How much *can* we precompute before a user is making a request, so that it can be living out on a CDN all ready for them. I think a future of many sites is a hybrid of precomputed static content intermingled with dynamic, server-rendered sections.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/advice-for-writing-a-technical-resume/">Advice for Writing a Technical Resume</a>
</h5>
<p>
Sadly many folks are in the position right now of trying to find new work, and for those just coming out of school or bootcamps the situation is even more difficult. I’ve done a lot of helping folks with resumes (and BTW if you’d like a quick review/feedback you’re welcome to email me and ask), and it’s something most of us struggle with. This is a great set of guidelines that includes advice for what to do if you don’t have much work experience.
</p>
<br/>
<h5>
<a href="https://medium.com/@nodejs/node-js-version-14-available-now-8170d384567e">Node.js version 14 available now</a>
</h5>
<p>
BIG release in the Node world. Lots of stuff to be excited about, but one that particularly catches my attention is the experimental release of a WASI (Web Assembly System Interface) implementation, letting you write packages for Node that compile to WebAssembly and access system resources like the filesystem. Very cool!
</p>
<br/>KBallkball@zendev.com/authors/kball.htmlHope you’re staying safe and healthy. Welcome to May! After about the longest April I can ever remember. Hope things start to get better this month.Friday Frontend: Buying Time Edition2020-04-24T00:00:00-07:002020-04-24T00:00:00-07:00https://zendev.com/2020/04/24/buying-time-edition<p dir="ltr">
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.
</p>
<p dir="ltr">
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.
</p>
<p>
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.
</p>
<p dir="ltr">
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.
</p>
<p dir="ltr">
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?
</p>
<p>
Best,<br/>
KBall from ZenDev
</p>
<p>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 <a href="https://airtable.com/shrpj2r4Kjc4YoMu4/tbl8m95GiuWehnIiT?blocks=hide">this great resource</a> of which companies are hiring and which are not, as well as share <a href="https://www.wfhbuthiring.com/">this resource</a> that a reader shared.
</p>
<h4>CSS & SCSS</h4>
<h5>
<a href="https://ethanmarcotte.com/wrote/css-grid-without-max-width/">Constrained CSS grids without max-width.</a>
</h5>
<p>
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.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/pseudo-randomly-adding-illustrations-with-css/">Pseudo-Randomly Adding Illustrations with CSS</a>
</h5>
<p>
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.
</p>
<br/>
<h5>
<a href="https://rachelandrew.co.uk/archives/2020/04/07/making-things-better/">Making Things Better</a>
</h5>
<p>
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.
</p>
<br/>
<h5>
<a href="https://www.chenhuijing.com/blog/css-for-i18n/#%F0%9F%91%BE">CSS for internationalisation</a>
</h5>
<p>
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.
</p>
<br/>
<h5>
<a href="https://ishadeed.com/article/spacing-in-css/">Spacing in CSS</a>
</h5>
<p>
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.
</p>
<br/>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&placement=zendevcom" id="_carbonads_js"></script>
<h4>JavaScript</h4>
<h5>
<a href="https://codersera.com/blog/advanced-javascript-interview-questions/">23+ Advanced JavaScript Interview Questions (ANSWERED)</a>
</h5>
<p>
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.
</p>
<br/>
<h5>
<a href="https://dev.to/tidelift/unconventional-vue-vue-as-a-backend-framework-3h6l">Unconventional Vue—Vue as a Backend Framework</a>
</h5>
<p>
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.
</p>
<br/>
<h5>
<a href="https://dev.to/ilonacodes/frontend-shorts-how-to-create-link-content-previewer-with-react-vue-and-vanilla-javascript-1pm1">Frontend Shorts: How to create link content previewer with React, Vue, and Vanilla JavaScript</a>
</h5>
<p>
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.
</p>
<br/>
<h5>
<a href="https://2ality.com/2020/04/typescript-workflows.html">How does TypeScript work? The bird’s eye view</a>
</h5>
<p>
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!
</p>
<br/>
<h5>
<a href="https://blog.bitsrc.io/3-ways-to-theme-react-components-9cfa631351e9">3 Ways To Theme React Components</a>
</h5>
<p>
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.
</p>
<br/>
<h4>Other Awesomeness</h4>
<h5>
<a href="https://blog.bitsrc.io/creating-morphing-animations-with-css-clip-path-3c3bf5e4335f">Creating Morphing Animations with CSS clip-path</a>
</h5>
<p>
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.
</p>
<br/>
<h5>
<a href="https://chipcullen.com/the-contrast-triangle/">The Contrast Triangle</a>
</h5>
<p>
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 <a href="https://contrast-triangle.com/">neat tool</a> as well. Though as Chris Coyier <a href="https://css-tricks.com/the-contrast-triangle/">points out</a>, once you add things like hover and selected states you end up in more of an N-dimensional constraint, not just 3-way.
</p>
<br/>
<h5>
<a href="https://changelog.com/jsparty/123">JS "Danger" Party (audio)</a>
</h5>
<p>
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!
</p>
<br/>
<h5>
<a href="https://dev.to/bogdanned/the-graph-in-graphql-1l99">The Graph in GraphQL</a>
</h5>
<p>
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.
</p>
<br/>
<h5>
<a href="https://stork-search.net/">Stork - WASM-based Search for Static Sites</a>
</h5>
<p>
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.
</p>
<br/>KBallkball@zendev.com/authors/kball.htmlHere 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.Friday Frontend: Celebrating Caregivers Edition2020-04-17T00:00:00-07:002020-04-17T00:00:00-07:00https://zendev.com/2020/04/17/celebrating-caregivers-edition<p dir="ltr">
Hope you’re staying safe, healthy, and sane during this crazy year. I’m still doing okay, sheltering in place, but it’s extremely mentally & emotionally difficult to keep up with work while also doing extra childcare and coordinating extra care for my parents. Makes me realize how good I have it most of the time, and how much we tend to underestimate the amount of emotional, mental, and physical work caregivers put in every day.
</p>
<p dir="ltr">
This week, hats off to every one of you who is taking on extra burdens of care during this pandemic. And to those who take on that caregiving even in normal times, bearing up still under these abnormal ones.
</p>
<p>
Anyways, on to the content. Lots of good stuff, but if I were to recommend one article it would be the article on front-end debugging. Getting good at debugging has been one of the highest leverage skills in my career, and that article will help you get there.
</p>
<p>
Best,<br/>
KBall from ZenDev
</p>
<p dir="ltr">
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 <a href="https://airtable.com/shrpj2r4Kjc4YoMu4/tbl8m95GiuWehnIiT?blocks=hide">this great resource</a> of which companies are hiring and which are not, as well as share <a href="https://www.wfhbuthiring.com/">this resource</a> that a reader shared.
</p>
<h4>CSS & SCSS</h4>
<h5>
<a href="https://www.welcometothejungle.com/en/articles/btc-css-limits">Extending the Limits of CSS</a>
</h5>
<p>
This is an amazing roundup of projects people have done that push CSS beyond all reasonable expectations. I’d seen some of the artwork before, but the <a href="https://community.algolia.com/algoliasearch-client-css/demo/">pure CSS search engine</a>!?! Oh my gosh. People do some truly astounding things.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/">Styling in the Shadow DOM With CSS Shadow Parts</a>
</h5>
<p>
This is pretty interesting, and now after Safari’s latest release has very widespread availability. The Shadow DOM already allows you to completely encapsulate styles for custom components (similar to CSS-in-JS, but more complete and built-in), but I hadn’t seen this functionality: you can deliberately expose parts of your custom component to be styleable by the outside page, while keeping others completely contained. This article dives into how.
</p>
<br/>
<h5>
<a href="http://www.js-craft.io/blog/making-a-responsive-css-grid-layout-with-just-3-properties/">Making a responsive CSS grid layout with just 3 properties</a>
</h5>
<p>
Solid quick hit article that really shows some of the power of CSS Grid. Goes through a specific design, but also very easy to generalize.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/using-css-to-set-text-inside-a-circle/">Using CSS to Set Text Inside a Circle</a>
</h5>
<p>
Interesting technique for wrapping text within a shape, despite the current lack of a <code>shape-inside</code> property. Also highlights a nifty tool from Firefox for testing and tweaking your shaped text.
</p>
<br/>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&placement=zendevcom" id="_carbonads_js"></script>
<h4>JavaScript</h4>
<h5>
<a href="https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/">How the Vue Composition API Replaces Vue Mixins</a>
</h5>
<p>
Very nice look at the Vue 3 composition API, and how it cleans up some of the behavior-sharing properties that previously Vue developers relied on mixins to provide.
</p>
<br/>
<h5>
<a href="https://www.smashingmagazine.com/2020/04/particle-trail-animation-javascript/">How To Create A Particle Trail Animation In JavaScript</a>
</h5>
<p>
Super fun article demonstrating a really neat animation. The <a href="https://animejs.com/">library they use</a> looks super cool too.
</p>
<br/>
<h5>
<a href="https://dmitripavlutin.com/javascript-and-or-logical-operators/">How && and || Operators Really Work in JavaScript</a>
</h5>
<p>
You might think these are simple boolean operators, but in a very loosely typed language like JavaScript, that can lead to some very interesting behavior. Read on to learn how truthy and falsy values behave with these operators, and what actually gets returned when you mix types.
</p>
<br/>
<h5>
<a href="https://blog.bitsrc.io/using-styled-components-with-vuejs-17741c435b40">Using styled-components with VueJS</a>
</h5>
<p>
I’ve been using Styled Components with React at work, and while I continue to not be a huge fan of this hard-core CSS-in-JS approach, many of my coworkers are. This is the first I’ve seen of taking this approach to Vue. Now personally, I think Vue’s SFCs and using their scoped CSS features are a way nicer approach, but if you find yourself working in Vue and wishing you could use Styled Components, take a look at this article!
</p>
<br/>
<h4>Other Awesomeness</h4>
<h5>
<a href="https://ishadeed.com/article/image-techniques/">Image Techniques On The Web</a>
</h5>
<p>
Great in-depth breakdown of various ways to handle images on the web. I wish I’d had this when I was first learning about how to put images in.
</p>
<br/>
<h5>
<a href="https://tech.ebayinc.com/engineering/front-end-debugging-tips-on-resolving-issues-quickly-so-you-can-move-on-to-better-things/">Front End Debugging — Tips on Resolving Issues Quickly so You Can Move on to Better Things</a>
</h5>
<p>
Debugging often feels like a black art - it is rarely taught, and techniques are passed from engineer to engineer by word of mouth. I love to see articles like this written, and while some of these tips seem obvious, there is a tremendous amount of wisdom here. Don’t skim past the “obvious” ones either; I can’t tell you how many times simple instructions like “try to read and understand the error message” are the solution to otherwise vexing problems.
</p>
<br/>
<h5>
<a href="https://changelog.com/jsparty/121">What even is a micro frontend? (Audio)</a>
</h5>
<p>
(Bias Alert: I was a panelist in this podcast episode). This JSParty podcast episode was super fun, interviewing the author of ‘Micro Frontends in Action’ about the pros and cons of this new approach.
</p>
<br/>KBallkball@zendev.com/authors/kball.htmlHope you’re staying safe, healthy, and sane during this crazy year. I’m still doing okay, sheltering in place, but it’s extremely mentally & emotionally difficult to keep up with work while also doing extra childcare and coordinating extra care for my parents. Makes me realize how good I have it most of the time, and how much we tend to underestimate the amount of emotional, mental, and physical work caregivers put in every day.Friday Frontend: Passover 2020 Edition2020-04-10T00:00:00-07:002020-04-10T00:00:00-07:00https://zendev.com/2020/04/10/passover-2020-edition<p dir="ltr">
The Jewish tradition of Passover seems incredibly symbolic at this time in the world. We are all stuck alone in our homes, hoping and praying that the plague will pass us over. And I’ve heard so many stories of people finding ways to innovatively be together for the holiday without physically being together. Zoom Seders are a thing!
</p>
<p dir="ltr">
Anyway, we’re still moving forward. If you read one article this week, read the one about CSS findings from the new Facebook design. It is utterly fascinating. Lots of other good stuff as well. Enjoy, and stay safe and healthy!
</p>
<p>
Best,<br/>
KBall from ZenDev
</p>
<p dir="ltr">
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 <a href="https://airtable.com/shrpj2r4Kjc4YoMu4/tbl8m95GiuWehnIiT?blocks=hide">this great resource</a> of which companies are hiring and which are not, as well as share <a href="https://www.wfhbuthiring.com/">this resource</a> that a reader shared.
</p>
<h4>CSS & SCSS</h4>
<h5>
<a href="https://ishadeed.com/article/new-facebook-css/">CSS Findings From The New Facebook Design</a>
</h5>
<p>
This is a fascinating article. The author goes through the new Facebook design element by element, looking at what they’re doing. In some places he uncovers some very bizarre choices, but what’s extra cool is that Facebook engineers then responded and he updated the article with the reasons behind those choices. A ton to learn here!
</p>
<br/>
<h5>
<a href="https://9elements.com/bem-cheat-sheet/">BEM Cheat Sheet</a>
</h5>
<p>
Super useful quick reference if you’re using BEM and having trouble figuring out how to name things. Also a nice set of examples to scroll through just to see how one experienced developer structures common web components in HTML and CSS.
</p>
<br/>
<h5>
<a href="https://css-tricks.com/how-to-re-create-a-nifty-netflix-animation-in-css/">How to Re-Create a Nifty Netflix Animation in CSS</a>
</h5>
<p>
Nice little step by step explainer to recreate a particular effect using only CSS.
</p>
<br/>
<h5>
<a href="http://www.js-craft.io/blog/css-logical-properties-using-the-margin-block-and-margin-inline-instead-of-the-default-margin/">CSS logical properties: using the margin-block and margin-inline instead of the default margin</a>
</h5>
<p>
Super quick hit, but worth going through if you’re not already using logical properties. The more we can get in the habit of using logical properties like <code>margin-inline-start</code> instead of <code>margin-left</code> or <code>margin-block-start</code> instead of <code>margin-top</code>, the easier it will be to adapt our sites to different language directions and devices.
</p>
<br/>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6K7I&placement=zendevcom" id="_carbonads_js"></script>
<h4>JavaScript</h4>
<h5>
<a href="https://lihautan.com/the-svelte-compiler-handbook/">The Svelte Compiler Handbook</a>
</h5>
<p>
Super cool dive into how Svelte works it’s magic. Worth checking out even if you’re not using Svelte; you’ll learn a lot about how frameworks parse and compile your code. Vue’s single file components use a similar parser-like approach, though of course Vue doesn’t precompile everything in the same way.
</p>
<br/>
<h5>
<a href="https://www.taniarascia.com/default-parameters-javascript/">Understanding Default Parameters in JavaScript</a>
</h5>
<p>
Super useful article about one of the very nice improvements in the JavaScript language in recent years. I use static default parameters all the time, but hadn’t been aware that you could also use dynamic defaults that run functions or do other work at call time, and can even base them on earlier parameters. Very cool!
</p>
<br/>
<h5>
<a href="https://kriss.io/30-helpful-javascript-snippet-that-you-should-know/#.Xo_P0NNKjUI">30 Helpful Javascript Snippet That You Should Know</a>
</h5>
<p>
A set of small useful snippets of code for different purposes. Useful both as a resource to come back to as you need particular functionality, or as a learning resource to go through each snippet and understand how they work.
</p>
<br/>
<h5>
<a href="http://willtaylor.blog/an-introduction-to-lambda-calculus-explained-through-javascript/">An introduction to Lambda Calculus, explained through JavaScript</a>
</h5>
<p>
For those interested in going deeper on functional programming, this is a really nice post. Lambda calculus has long been one of the “scary” things about the hardcore functional programming languages, but this post breaks it down (relatively) simply using JavaScript.
</p>
<br/>
<h4>Other Awesomeness</h4>
<h5>
<a href="https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/">Getting JavaScript to Talk to CSS and Sass</a>
</h5>
<p>
Ever struggle with getting information back and forth between your styles and your JavaScript? I definitely have! If you’re all into CSS-in-JS this won’t be important to you, but for those of us who aren’t, check out these cool tricks!
</p>
<br/>
<h5>
<a href="http://www.webaxe.org/the-webaim-million-updated/">The WebAIM Million—Updated</a>
</h5>
<p>
A look at how the world is doing from an accessibility front, looking at the top million homepages, with a comparison to last year. Spoiler alert: it doesn’t look so good! Surely we can do better.
</p>
<br/>
<h5>
<a href="https://www.youtube.com/watch?v=c1-4JkSCoV0">Covid-19 and the dark side of web performance [video]</a>
</h5>
<p>
Great talk on web performance and looks at how the massive increases in web traffic going on right now are impacting folks. Includes some interesting look at Gatsby around minute 9 and where it falls a bit short of its performance claims of being “fast in every way that matters”.
</p>
<br/>
<h5>
<a href="https://cloudfour.com/thinks/responsive-images-the-simple-way/">Responsive Images the Simple Way</a>
</h5>
<p>
I don’t know if I’d call this exactly *simple*, but it is pretty clear and explicit how to use adaptive images via srcset.
</p>
<br/>
<h5>
<a href="https://colors.lol/">colors.lol</a>
</h5>
<p>
We could all use a little levity these days. This is a delightful set of whimsical “overly descriptive” color palettes.
</p>
<br/>KBallkball@zendev.com/authors/kball.htmlThe Jewish tradition of Passover seems incredibly symbolic at this time in the world. We are all stuck alone in our homes, hoping and praying that the plague will pass us over. And I’ve heard so many stories of people finding ways to innovatively be together for the holiday without physically being together. Zoom Seders are a thing!