This week I was lucky enough to attend and speak at Web Unleashed 2017 in Toronto, and boy did I have fun! I love conferences; I always come away inspired and with a ton of new ideas and things I want to explore.

Major themes at Web Unleashed this year were progressive web applications, front-end unit testing, and component-based thinking and workflows. They’re gathering slides from as many of the speakers as possible, so definitely check those out, and at least 2 of the rooms were being recorded so I imagine they’ll be posting videos soon.

I hope your week as as good as mine - if not, hopefully I can brighten it a bit with this Friday Frontend! Enjoy!

Happy Friday!
KBall from ZenDev

P.S. - The conference inspired me to embrace being a ‘hybrid’ and explore more design skills to go with my development background… what’s inspiring YOU these days? Add a comment below and let me know!

CSS & SCSS

Web truths: CSS is not real programming

Don’t be fooled by the title - this is a nice rebuttal to the “CSS is the Devil” crowd and a discussion of the problem domain that CSS is designed to address.


Mastering Advanced Sass & Workflow with Zurb Foundation

A nice little two-part series that introduces you first to the capabilities exposed by Sass, and then how to use it to level up your use of ZURB Foundation.


Designing Websites for iPhone X

Some details are beginning to emerge about the CSS techniques being included in Safari and other browsers to address the unique challenges posed by the iPhone X.


An event for CSS position:sticky

An excellent little walkthrough of what CSS position:sticky enables and how it’s going to make our lives SO much easier when creating sticky components.


CSS Grid by Example Video Series

I had the opportunity to chat with Rachel Andrew while I was at Web Unleashed, and was reminded yet again that if you want to know about CSS Grid, there is really no one more knowledgeable. This is a great video series she’s put together for learning CSS Grid by example.


JavaScript

JavaScript: A Basic Guide to Scope

Very nice beginner to intermediate level introduction to the varying types of scope in JavaScript.


To Redux or Not: the Art of Structuring State in React Apps

An excellent walkthrough of some of the key things to consider when structuring state inside of a React/Redux application. Redux is amazing, but not all state is appropriate for redux.


Modern JS Cheatsheet

An excellent resource for those of us still wrapping our heads around the myriad of new features available to us in modern JavaScript. (No shame! I’m totally in this boat, and I use these things every day.)


Angular & Redux

I’m a big fan of Redux as a model for managing state within a single page application. Most folks associate Redux with using React, but did you know you can use it with Angular (or Vue, or really just about any view library) as well? Check out this nice tutorial of using Redux with Angular!


The Past, Present, and Future of the Angular CLI

One of both the pros and the cons of an all-encompassing framework like Angular is the amount of choices it makes for you. On the negative side, this reduces your options, but on the positive side it does a heckuva lot of work for you. The Angular CLI, inspired by the Ember CLI 😉, takes this even further and sets up all the pieces you need for an awesome Angular development flow.


Other Awesomeness

Relicensing React, Jest, Flow, and Immutable.js

Just last week we included an article about how Wordpress was moving away from using React due to licensing concerns around the React patent clause… and this week Facebook announced they’re relicensing to a pure MIT license! In the words of Joe Biden, this is a Big F*ing Deal.


React 16: A look inside an API-compatible rewrite of our frontend UI library

Concurrent with the relicensing, Facebook released a complete rewrite of React that is API-compatible but enables asynchronous rendering. Check out this super cool behind-the-scenes view into how they did it.


The Mega HTML5 Cheatsheet

Wow. Just wow. There’s a lot in here, and it’s definitely worth taking a look through.


Exploring Animation And Interaction Techniques With WebGL (A Case Study)

A delightful and thorough introduction to programmatically creating animations using three.js. Super cool!


Organic SVG Shape Morph Ideas

A beautiful set of examples of SVG shapes and animations, all achieved with some relatively straightforward SVG, CSS, and JavaScript.


Happy Friday!