I recently changed out just about all of my computer equipment. Nothing dramatic like #davegoeswindows, but all new gear within my relative comfort-zone. It was the first time since late 2013, and now it's going on 2017, so I figured it was time.
No surprise: I'm an Apple guy. I have been for a couple of decades now. I was pretty excited about the new MacBook Pro's and ordered one within a few days of them coming out. Coinciding with all that, I've also changed out my mouse, keyboard, and monitor. None of those accessories are Apple. Partly because they've stopped making them (monitors), or the ones they do make kind of suck (mice, keyboards).
I figured I'd review my new setup since it's on my mind.
We shared a little trick not long ago about using the writing-mode property to set a title vertically. While a useful trick, it's the tip of the iceberg on this property. Jen Simmons digs in and explains what's really going on.
There is a certain way elements flow on websites. Without doing anything special, block elements push downward from top to bottom. Inline elements go from left to right. In writing-mode, that would be expressed by (the default) horizontal-tb (horizontal inline flow, "top to bottom" block flow). Different languages and cultures handle layout in other ways, so this property allows for control over that in a more comprehensive way than the dir attribute is capable of. For example, vertical-rl (vertical inline flow, "right to left" block flow).
Virtual reality has become a thing again! All of the usual suspects are involved: HTC, Microsoft, Samsung, and Facebook, among others, are all peddling their respective devices. These predictable players shouldn’t be having all the fun, though!
You make websites. You know a bit of Javascript. You have a mobile device. You can have a slice of this virtual pie too! WebVR is here, and it’s not that difficult to learn. If you already know the basics of three.js, you might be surprised at how simple it is to get it going. If you haven’t ever used three.js, this will be a fun way to learn it.
Back by popular demand! It's difficult to keep track of all of the great talks and conferences happening in our industry. Sometimes you may find out too late that an event is taking place, and it's a real shame when it's an something you might have attended. We've compiled this list so you can see what's happening, both in your hometown, and abroad. This list will be updated throughout the year.
If you have a conference to add, we're happy to put it in! Please use the form at the bottom of the post.
When it comes to animation, we're told that setInterval is a bad idea. Because, for example, the loop will run regardless of anything else going on, rather than politely yielding like requestAnimationFrame will. Also some browsers might "play catchup" with a setInterval loop, where an inactive tab might have been queuing iterations and then run them all very quickly to catch up when it becomes active again.
If you'd like to use setInterval, but want the performance politeness of requestAnimationFrame, the internet has some options available!
When web components are modular like Lego bricks down to the elements level, they become more versatile and easier to maintain. We believe it’s the next step to take in modular web design.
It's a clever system: put a half-gutter around all elements and a half-gutter around the containers. That way no matter what touches what, full gutters are naturally there.
Perhaps you've heard about the WebP image format? And how it's a pretty good performance win, for the browsers that support it? Well that's only for Blink-based browsers, at the moment. Estelle Weyl's article Image Optimization explains the best image format for each browser:
Browser
Optimal image format
Chrome
WebP
IE 9+ / Edge
JPEG-XR
Opera
WebP
Safari
JPEG-2000
And you can serve these formats through the <picture><source type=""> syntax.
Couple that complexity with the complexity of responsive images, and it really seems like outsourcing image delivery to a dedicated service seems like the way to go. At least above a certain scale.
This is a distinction worth knowing about. They look pretty similar. They can do some of the same things. But, one is very easy to override and the other is not.
