The inspiration for me this week was a new API that Google just enabled in Chrome Canary that really opens up the possibilities of Augmented Reality live in a website!
Enjoy!
KBall from ZenDev
CSS & SCSS
More Unicode Patterns
A little more than a month ago I shared a post that looked at patterns generated with CSS and unicode. That post was one of the most popular items in that week’s edition of the Friday Frontend, and now the author is BACK with a ton more patterns. These are just so much fun!
Here’s the thing about “unused CSS” tools
Chris Coyier breaks down the constraints and challenges of ‘unused CSS’ tools. I remember doing all sorts of fighting with ‘uncss’ with regards to ZURB Foundation; configuration can be a nightmare and tracking what does “unused” really mean on a dynamic site is a challenge. No wonder some folks decide to go to CSS-in-JS solutions… but to me what stands out is this: “I don't think these tools are useless — they are just...tools”. Whether you’re doing static analysis, CSS in JS, or any other of a myriad of possibilities these are all just tools to better understand and manage your code. Use based on the situations of your team and codebase.
Don’t Use The Placeholder Attribute
I think the strong version of this argument (“the placeholder attribute is broken, don’t use it”) is overdone. HOWEVER, the drawbacks raised in this article are real, and very valuable and important to keep in mind when using placeholder attributes. As with many articles critiquing a technology, this could potentially better be described as “placeholder attributes have limitations and drawbacks, know them and use them properly”, but that type of milquetoast position wouldn’t get any attention. :)
A Comprehensive Guide to Flexbox Alignment
At this point flexbox is getting to be pretty widely known and understood, but this is still a nice refresher/guide to all of the different alignment options. And if you’re not yet using flexbox alignment, this is a MUST READ. Flexbox takes certain alignment issues that have been problematic since the beginning of web development and makes them trivial to solve.
Centering: The Newest Coolest Way vs. The Oldest Coolest Way
Nothing earthshattering, but a nice reminder of how far we’ve come in CSS. From extraneous markup and various voodoo-seeming table styling to achieve centering on a page, now we can use a few short lines in grid that are actually semantic and pretty clearly describe what we’re doing.
JavaScript
Here’s Why Mapping a Constructed Array in JavaScript Doesn’t Work
Fascinating exploration into the underlying guts of how Arrays are implemented in JavaScript (ie - as a special class of object), and why that can lead to some unexpected behavior. Loved it!
Learn more about JavaScript’s promises: from zero to hero in 25 tests
I’ve done Test Driven Development before, but this was the first time I’ve seen a ‘Test Driven Tutorial’. I think I like it! The author set up a series of jasmine tests to explore the functionality of promises. Makes for a reasonably intuitive approach to a tutorial, plus now you’ve got a test suite you can tinker with on jsfiddle and get immediate feedback about if you’re using promises correctly.
JavaScript async/await: The Good Part, Pitfalls and How to Use
This is great. Not only instructional about how to use async/await, but highlighting what the benefits and drawbacks are, and some different ways you can approach it to maximise benefits and avoid drawbacks. And worthy of emphasis again: async/await is syntactic sugar around promises, if you don’t feel like you understand promises… go learn them! They’ll make your life so much better.
Spice up your JavaScript
An interesting approach to using chained closures and functions that return functions to get implement a ‘currying-like’ approach to functions. If you haven’t encountered this approach before, it will blow your mind, though I must say I prefer the (admittedly slightly more heavy-duty in terms of implementation) approach Rambda takes to implement true currying. And if currying just makes you think of Thai food, don’t worry, I was there not long ago. :P If you’re looking for an in depth intro to the concept I recommend this one.
How To Build Vue Components That Play Nice
(Bias alert - I wrote this article as a guest post). I’ve been using a lot of open-source Vue components, developing components for my own use, and working on an open source component library. This article breaks down a set of best practice patterns I’ve put together from that work, explaining how to create Vue components that will work well in any project.
Other Awesomeness
Augmented reality for the web
This is really really cool. Google Chrome has just enabled (in canary, on really advanced android devices) an API that lets web developers do complex “hit-testing”, essentially mapping out of where things are in physical space in a photo or streaming video. This is paving the way towards making Augmented Reality - putting virtual items in place within the physical world - accessible via the web on websites. Imagine e-commerce sites that let you see how their products will look in your living room, or a city tourism website that lets you see annotations or listen to a virtual tourguide as you walk around the city. All from your smartphone, without having to install anything but a web browser. The future looks amazing!
8-Point Grid: Typography On The Web
Really interesting overview of the thinking behind typography sizing systems on the web. If you’re not super familiar with thinking around typography (I’m not) you’ll probably want to click through to the references & prior articles down at the bottom. Regardless, if you’re at all involved in the design/typography choices for your sites, you’ll want to read this.
5 Ways to Handle Forms on Your Static Site
I love static sites for a wide variety of use cases. They’re fast, simple, and scale super well so if you happen to get a crazy traffic burst by landing on the HackerNews front page, you don’t have to worry about it. But let’s face it - most sites need some sort of way for the user to submit content, even if it’s just a “get in touch” form. This article goes through some of the options available to you.
Marketers Can’t Wait to Use AMP for Email, But Here’s What Will Be Holding Them Back
Woah - I’d never heard of AMP for Email, but this looks really interesting. There’s a bunch of caveats and current limitations - this article has a number of them - but if you’re heavy into email marketing I think this is a space you’re going to want to be watching and experimenting with.
How to Export Sketch to CSS Animations Code
Having spent hours before going back and forth with a designer trying to get timings exactly right on a set of CSS animations, this gets me really excited. Build your animations directly in Sketch using the Anima plugin, and then export them to CSS. Sweeeeet!
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)