This gist's comment stream is a collection of webdev apps for OS X. Feel free to add links to apps you like, just make sure you add some context to what it does — either from the creator's website or your own thoughts.
— Erik
| #!/bin/sh | |
| ### | |
| # SOME COMMANDS WILL NOT WORK ON macOS (Sierra or newer) | |
| # For Sierra or newer, see https://github.com/mathiasbynens/dotfiles/blob/master/.macos | |
| ### | |
| # Alot of these configs have been taken from the various places | |
| # on the web, most from here | |
| # https://github.com/mathiasbynens/dotfiles/blob/5b3c8418ed42d93af2e647dc9d122f25cc034871/.osx |
Attention: the list was moved to
https://github.com/dypsilon/frontend-dev-bookmarks
This page is not maintained anymore, please update your bookmarks.
I've been working with Flux a lot recently, and one of the questions I've been struggling with is in which part of the Flux cycle to put my asynchronous data requests.
Here are some different opinions:
The famous Flux diagram puts them in the action creators.
| /** | |
| * Returns the global object. | |
| * Works even inside ES6 modules. | |
| */ | |
| function getGlobalObject() { | |
| // Workers don’t have `window`, only `self` | |
| if (typeof self !== 'undefined') { | |
| return self; | |
| } | |
| if (typeof global !== 'undefined') { |
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Английская версия: https://evilmartians.com/chronicles/bootstrap-an-intervention
У CSS есть несколько базовых проблем, которые позволяют очень быстро отстрелить себе ногу при неправильном использовании:
Глобальный неймспейс – в серверном программировании все что написано в файле, в файле и остается. Все же что написано в css и js засирает глобальное пространство имен со всеми вытекающими. В JS эту проблему сейчас побороли всякими модульными системами, а вот с css сложнее. В идеальном мире это должен починить Shadow DOM и настоящие Web Components, но пока их нет единственный способ с этим бороться – следовать какой-то системе именований селекторов, которая по возможности уменьшает и исключает возможные конфликты.
Каскадность – если на один элемент может сработать несколько правил, то они все и сработают последовательно. Если есть элемент h1.title, на него сработают все правила для тегов h1 и все правила для класса .title. Так как весь html состоит из тегов, то правил которые п
| 'use strict'; | |
| /* | |
| Ways to improve site speed for theme: | |
| =========================================== | |
| - Store fonts.css in localStorage, don't make request if it's there | |
| - Create a custom FontAwesome lib, lazyload | |
| */ |
| class DecrementAction extends Error {} | |
| class IncrementAction extends Error {} | |
| const reducer = (state, error) => { | |
| switch (error.constructor) { | |
| case DecrementAction: | |
| return state - 1 | |
| case IncrementAction: | |
| return state + 1 |
| // The following data should be run in the console while viewing the page https://read.amazon.com/ | |
| // It will export a CSV file called "download" which can (and should) be renamed with a .csv extension | |
| var db = openDatabase('K4W', '3', 'thedatabase', 1024 * 1024); | |
| getAmazonCsv = function() { | |
| // Set header for CSV export line - change this if you change the fields used | |
| var csvData = "ASIN,Title,Authors,PurchaseDate\n"; | |
| db.transaction(function(tx) { |