App Development

#WAT-Up4.0

blog-featured-image watup-4.0-510x296

#WAT-Up

/topic Each week, the Web Applications Team (WAT) at WillowTree uses Slack to post interesting articles, share development tricks, and discuss technologies used in our world. Here’s a breakdown of what we talked about this week.

@media-query: Pixels, rem and em, oh my!

Which size unit is best for CSS media queries? Zell’s blog conducted an experiment that tested the three size units against three scenarios. Spoiler alert: the only unit that consistently performed in each scenario and browser was ‘em.’

@react: Updates, Tutorials, and Disclaimers from React.

The News: React announced on July 7th that they are actively working on a solution to allow users to return multiple elements from render(). This means no more unnecessary (and frustrating) div wrappers. This is currently supported in an up-and-coming core algorithm but it’s far from complete.

The Education: Looking to hone your redux skills in React? Dan Abramov, creator of Redux, has an egghead series that discusses how to build React applications with idiomatic Redux. It’s free, informative, and supplemented with community notes.

The Gotcha: Mixins, although not deprecated, are highly discouraged by React. Facebook renounced Mixins because of its “snowballing complexity,” especially with newer developers. Their announcement includes example replacements for commonly used Mixins.

@terminal-tips: How to Make Your Terminal Notify You (OSX only)

As a multitasker, usually with a million files open on my laptop, I hate waiting for long running commands to finish. This blog post shows how to create OSX notifications to notify you when your commands have completed , but only if your terminal is out of focus.

@beautify: Interactive Elements with ‘:target’

Use the :target pseudo-element to create Javascript functionality, minus the Javascript. This BitsofCode blog post shows how you can use :target to toggle content visibility , to create a slide-out navigation drawer , to implement a pop-up modal , and to change global styles.

@boilerplate: MERN

MERN is a tech stack encompassing Mongo, Express, React, and NodeJS. Mern.io provides a starter boilerplate repo and a command line utility to give you a headstart on your newest project.

@performance: Easy Ways to Increase Your Website Performance

Nate Berkopec, author of _ Hacking Your Webpage’s Head Tags for Speed and Profit_, remarks that it is “…easier to decrease perceived load time than to decrease total load time.” His blog post explains how you can reduce perceived load time to improve your user experience. Berkopec’s suggestions are simple to implement and inspired me to check my github repos to see where I could improve.

Quickstart-Guide-to-Kotlin-Multiplatform

A Quick Start Guide to Kotlin Multiplatform

Kotlin Multiplatform, though still experimental, is a great up-and-coming solution...

Read the article