Service Worker - offline support for the web
Progressive apps - high-res icon, splash screen, no URL bar, etc.
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
| 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? |
| /* 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)); }; |
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:
Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets
“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”
You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?
| # Hello, and welcome to makefile basics. | |
| # | |
| # You will learn why `make` is so great, and why, despite its "weird" syntax, | |
| # it is actually a highly expressive, efficient, and powerful way to build | |
| # programs. | |
| # | |
| # Once you're done here, go to | |
| # http://www.gnu.org/software/make/manual/make.html | |
| # to learn SOOOO much more. |
| // array utils | |
| // ================================================================================================= | |
| const combine = (...arrays) => [].concat(...arrays); | |
| const compact = arr => arr.filter(Boolean); | |
| const contains = (() => Array.prototype.includes | |
| ? (arr, value) => arr.includes(value) | |
| : (arr, value) => arr.some(el => el === value) |
| . | |
| ├── actions | |
| ├── stores | |
| ├── views | |
| │ ├── Anonymous | |
| │ │ ├── __tests__ | |
| │ │ ├── views | |
| │ │ │ ├── Home | |
| │ │ │ │ ├── __tests__ | |
| │ │ │ │ └── Handler.js |
| The MIT License (MIT) | |
| Copyright (c) 2014 Tomas Kafka | |
| Permission is hereby granted, free of charge, to any person obtaining a copy | |
| of this software and associated documentation files (the "Software"), to deal | |
| in the Software without restriction, including without limitation the rights | |
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| copies of the Software, and to permit persons to whom the Software is | |
| furnished to do so, subject to the following conditions: |
