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) { |