After publishing my article on ECMAScript 6, some have reached out to ask how I exactly I make it all work.
I refrained from including these details on the original post because they're subject to immiment obsoletion. These tools are changing and evolving quickly, and some of these instructions are likely to become outdated in the coming months or even weeks.
When evaluating the available transpilers, I decided to use 6to5, which has recently been renamed to Babel. I chose it based on:
| /* bling.js */ | |
| window.$ = document.querySelector.bind(document); | |
| window.$$ = document.querySelectorAll.bind(document); | |
| Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); }; | |
| NodeList.prototype.__proto__ = Array.prototype; | |
| NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); }; |
| Here are a few questions that will tee us up for a good conversation: | |
| - Can you tell me about your project in a few sentences? | |
| - What’s the timeframe? Does a certain event depend on this project launching? | |
| - What are you looking for from us? Do you want us to design, build, and launch the whole site? Or do you have developers or other partners lined up and only need us for design? | |
| - Have you already started on any part of the project? Do you have existing work? A new logo? Some rough designs or ideas for the site? | |
| - How large is your team? What are the roles you envision on your end? | |
| - How did you hear about our work? What specifically interests you about it? Any projects that you’re keen on? | |
| - How much money have you set aside for this project? | |
| - Are you talking to others about this project? Might we ask how many? What do you like about their work? |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
Service Worker - offline support for the web
Progressive apps - high-res icon, splash screen, no URL bar, etc.
The following guide will show you how to deploy a simple microservice written in JavaScript using 𝚫 now.
It uses Open Source tools that are widely available, tested and understood:
📷
| 👍 | 💰 | 🔗 |
|---|---|---|
| 6 | $648 | Sony A6000 |
| 5 | $1100 | Fuji X100T |
| 3 | $4250 | Leica Q |
| 3 | $1400 | Fuji XT1 |
| 2 | $950 | Sony RX100 IV |
| 2 | $950 | Fuji T-10 |
Several years ago I got curious about how css worked at scale. When I first started out, there weren’t nearly as many learning resources as there are now. CSS zen garden was amazing, at the time it showed how much you could change a design without altering the html.
In the beginning, that’s what people sold me as a feature. By writing css, you could make a change one place and have it propagate everywhere. In principle this sounds pretty good. I’m lazy so I like doing things one time. But eleven years later, my experience on both large and small teams is that this is the most terrifying thing about css.
https://twitter.com/thomasfuchs/status/493790680397803521
In the past few years a lot of very smart people have been thinking more about CSS and this has lead to some fascinating discussions around how to build ‘scalable’ ui and how that relates to CSS. When I first started to think about scalability I naturally started to read every blog post and watch every tech talk I could get
| Device/Platform | Typeface |
|---|---|
| iOS 9+, watchOS, tvOS, OS X 10.10+ | San Francisco |
| iOS 1-8, OS X 10.9 | Helvetica Neue |
| OS X 10.0-10.8 | Lucida Grande |
| Android 5+, ChromeOS | Roboto |
| Android 1-4 | Droid Sans |
| Windows Phone, Windows Vista-10 | Segoe UI |
| Windows XP | Tahoma |
| Kindle Fire OS | Droid Sans |
With the release of Node 6.0.0, the surface of code that needs transpilation to use ES6 features has been reduced very dramatically.
This is what my current workflow looks like to set up a minimalistic and fast microservice using micro and async + await.
