Technical blog for the future me and other beings.

2015-12-04
Flux Alternatives

Sometimes React.js alone may serve your need, you don’t have to prematurely flux it.
The Case for Flux — Startups, Wanderlust, and Life Hacking — Medium

And there are other strategies besides Flux for architecting your application.
6 no-Flux strategies for React component communication

Gist of a modern data-driven app:

  • don’t use fat models
  • data from server is just another input, not your model, CQRS
  • modify state via a SINGLE component
Read More

2015-12-04
Flux

Flux is a pattern for web applications architecture, rather than a library. Though there are some example implementations.

Flux promotes unidirectional data flow:
DISPATCHER -> STORES -> COMPONENTS
Dispatcher and stores are global.
Components take immutable prop as input and can maintain internal mutable state. Changes to state via setState() will trigger a re-rendering.
Components can also fire “intent” (also called “action”) or listen to the dispatcher/stores.

Read More

2015-12-04
React.js

Read More

2015-12-04
Wierd Science

Read More

2015-12-01
Webpack

Read More

2015-11-27
Browserify

Read More

2015-11-19
Rust

Read More

2015-11-19
Web Development

CSS

CSS | MDN
CSS Reference | Codrops
CSS Cheat Sheet | OverAPI.com
CSS Vocabulary
CSS Reference
CSS Values | CSS Reference, Properties and Values, CSS3

CSS Diner - Where we feast on CSS Selectors!

CSS Ruler • Explore CSS lengths.
Mastering the :nth-child | CSS3 pseudo classes and :nth-child ranges
5 Things You Might Not Know About the CSS Positioning Types | Scotch

CSS is Alive and Well
The Debate Around “Do We Even Need CSS Anymore?” | CSS-Tricks

Modularization

Movement to restrict CSS local to a component.

CSS Modules Welcome to the Future - Glen Maddern: Internet Pro
Interoperable CSS A CSS standard for the Loader Age - Glen Maddern: Internet Pro

js-next/react-style
JedWatson/classnames
[React] Add support for arrays with holes in style attribute by vjeux · Pull Request #2196 · facebook/react

Preprocessors

Blog ◩ CSS PREprocessors
Compare ◩ CSS PREprocessors

Sass Compatibility

Viewport

A tale of two viewports — part one
A tale of two viewports — part two

Flexbox

CSS Flexbox Video Series: Introduction & Basics — 1/6 | Wes Bos
Flexbox Tutorial
A Complete Guide to Flexbox | CSS-Tricks
Experiment: Using Flexbox Today - Chris Wright
Chris Wright - Experiment: Flexbox Adventures
Flexbox @ Work - Coursera Technology
弹性盒模型指南 | bubkoo

The Ultimate Flexbox Cheat Sheet
Flexbox Cheatsheet Cheatsheet
Flexbox Cheatsheet
Flexy Boxes — CSS flexbox playground and code generation tool

philipwalton/flexbugs

Grid

Grid by Example

Filters

CSS Filters Demo

Alignment

How to Center in CSS

Boarder

Setting CSS3 Border-Radius with Slash Syntax

Bézier Curves

Animated Bézier Curves - Jason Davies
Bézier curve - Wikiwand

Style Guide

CSS Guidelines (2.2.4) – High-level advice and guidelines for writing sane, manageable, scalable CSS
bevacqua/css
BEM — Block Element Modifier

rstacruz/rscss CSS structure with CSS
Sass Guidelines

Tricks

12 Little-Known CSS Facts
12 Little-Known CSS Facts (The Sequel)

HTML

HTML (HyperText Markup Language) | MDN
HTML Elements
W3Schools Online Web Tutorials
HTML Vocabulary
HTML5 Beginner’s Guide - Tutorial by WebsiteSetup.org

audreyr/favicon-cheat-sheet

Responsive Image

Automating resource selection with Client Hints — Google Web Updates`
» Responsive Images, Part 10: Conclusion Cloud Four Blog

JavaScript

Explaining to non-programmers what JavaScript is
JavaScript for Cats

Introduction to JavaScript
JavaScript.com
JavaScript Garden
JS: The Right Way

JavaScript | MDN
JavaScript reference - JavaScript | MDN
Douglas Crockford’s Javascript
JavaScript Patterns
JS: The Right Way
How To Node - NodeJS does a great job in explaining concepts

JavaScript conferences and events | Lanyrd

CodinGame - Programming is fun
olistic/warriorjs - Game written in JavaScript for learning JavaScript and artificial intelligence.

NodeSchool

javascripting
learnyounode
how-to-npm
git-it
scope-chains-closures
stream-adventure
count-to-6
planetproto
learnuv

functional-javascript-workshop
shader-school
introtowebgl
bytewiser
makemehapi
browserify-adventure
promise-it-wont-hurt
test-anything
tower-of-babel
learnyoureact
thinking-in-react

Style

Video: JavaScript coding tips
rwaldron/idiomatic.js
JavaScript Standard Style
Use Linters For Safer Coding With Less Javascript Errors

EditorConfig
Lint Like It’s 2015 — Medium

Are Semicolons Necessary in JavaScript? - YouTube

  • IIFE
  • array
  • return

ESLint

ESLint - Pluggable JavaScript linter
List of available rules - ESLint
Documentation - ESLint: disabling rule for temporarily

ESLint 101
babel/babel-eslint Babel parser, needed if you use ES6 syntax (e.g. rest/spread)

config:
npm “eslintplugin”
JavaScript Standard Style uses ESLint internally, saves you from the hassle of managing configurations and arguments over style
feross/standard
feross/snazzy standard with color
Flet/standard-tap to TAP and use your TAP reporter
Flet/semistandard
yannickcr/eslint-plugin-react
Fine-Tuning AirBnB’s ESLint Config
nodesecurity/eslint-plugin-security

Resources

Life of JavaScript
Modern Web tools with Node.js
Resources – JS Central
ericelliott/essential-javascript-links

How to Write an Open Source JavaScript Library - Video Tutorial Series @eggheadio

Derivatives

Make ES6, Not Coffee » Gofore

List of languages that compile to JS · jashkenas/coffeescript Wiki

A Little Coffee Guidebook

LiveScript - a language which compiles to JavaScript

Books

getify/You-Dont-Know-JS
Learn Javascript - GitBook
Speaking JavaScript (Axel Rauschmayer, ES5)
Programming JavaScript Applications (Eric Elliott)
Eloquent JavaScript (Marijn Haverbeke, ES5, Node.js and Browser)
Human JavaScript

Exploring ES6 (Axel Rauschmayer, ES6)
Understanding ECMAScript 6 | Leanpub (Nicholas C. Zakas)
JavaScript Allongé, The “Six” Edition | Leanpub (Reg “raganwald” Braithwaite, FP, OOP)
Learning JavaScript Design Patterns
Table of Contents - Mixu’s Node book

JS Jottings (Javascript and its quirks, ES5, ES6)

JSbooks - free javascript books

Course

JavaScript | Codecademy

Video

Video: An overview of ECMAScript 6
Four talks on ECMAScript 6/ECMAScript.next
#RSConf. Dr. Axel Rauschmayer. Using ECMAScript 6 today. Part I - YouTube
#RSConf. Dr. Axel Rauschmayer. Using ECMAScript 6 today. Part II - YouTube

bolshchikov/js-must-watch
Javascript Planet - YouTube
NodeJS Fan - YouTube

Isomorphism

Isomorphic JavaScript - The future of web app development

Universal JavaScript — Medium
Is “Isomorphic JavaScript” a good term?

Isomorphic JavaScript: The Future of Web Apps - Airbnb Engineering
Why and How Coursera Does Isomorphic Javascript: A Fast and Snappy Quiz - Coursera Technology
How to Migrate React to Isomorphic Rendering - Coursera Technology

spikebrehm/isomorphic-examples
spikebrehm/isomorphic-tutorial
RickWong/react-isomorphic-starterkit
tildeio/ember-cli-fastboot

wat

Wat — Destroy All Software Talks

Node

also read JavaScript

The Node Way
Node Labs

Production Practices - Developer Center - Joyent

Video

Node Tuts
Learn All The Nodes

Web

Web Fundamentals — Google Developers
WebPlatform Docs · WebPlatform Docs · WPD · WebPlatform.org
HTML CSS: The Right Way
Dive Into HTML5
HTML5 Rocks - A resource for open web HTML5 developers
Learn Web Development
Adobe Web Platform Team
Scotch | Developers bringing fire to the people.
How to keep up to date on Front-End Technologies - The Recipe
SitePoint – Learn HTML, CSS, JavaScript, PHP, Ruby & Responsive Design
Web development tutorials | w3resource
bendc/frontend-guidelines
Move The Web Forward | Guide to getting involved with standards and browser development

The web developer survival guide - revolunet blog

Single page apps in depth (a.k.a. Mixu’ single page app book)
Static Web Apps - A Field Guide

The Problem with Native JavaScript APIs - O’Reilly Media
High Performance Browser Networking
Book of Speed

An Introduction To DOM Events – Smashing Magazine

pazguille/offline-first

The Twelve-Factor App
Web开发中需要了解的东西 | 酷 壳 - CoolShell.cn

Stop pushing the web forward - QuirksBlog
Tools don’t solve the web’s problems, they ARE the problem - QuirksBlog

tools

Drowning in Tools in the Web Development Industry
keycod.es

Web developer tools
miripiruni/frontdesk
Book of Modern frontend tooling
HTML5 Please - Use the new and shiny responsibly
20 Useful Docs and Guides for Front-End Developers
20 More Docs and Guides for Front-End Developers
Another 20 Docs and Guides for Front-End Developers
20 Docs and Guides for Front-End Developers (No. 4)

Browser Rendering Optimization - Udacity

demos

HTML5 Demos and Examples
HTML5 Demos
Demo Studio | MDN

list of resources

ripienaar/free-for-dev
The Toolbox: a directory of the best time-saving apps and tools
Superhero.js
CodeVisually | Web Developer Tools & Resources
shit for making websites
Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!
Javascript Territory - JSter Javascript Catalog
JavaScripting.com - The Database of JavaScript Libraries
plainJS - The Vanilla JavaScript Repository

Libscore scan site for library usage
Sibbell get release updates for your starred projects.

Read More

2015-11-04
Plasma

Read More

2015-11-04
Fuel Cell

Read More

2015-10-27
Drawing

Read More

2015-10-25
PopcornTime

PopcornTime is an app built upon web technology (Electron) for streaming contents via bittorrent. It was shutdown in March 2014.
Popcorn Time Shuts Down, Then Gets Resurrected by YTS (YIFY) - TorrentFreak

PopcornTime.io was the PopcornTime fork backed by the original team. It was shutdown in October 2015.
Popcorn Time Chaos Leads to Shutdown - TorrentFreak

The core technology was forked as Butter Project. Sources will be implemented as add-ons (like the Kodi project).
Butter Project - Watch movies and TV shows instantly!

r/PopcornTime
r/ButterProject

Use TV endpoint http://eztvapi.co.za/ for now.

Time4Popcorn (popcorn-time.se) was the other fork but embeds adware.

Read More

2015-10-19
Robotics

Read More

2015-10-17
Buddhism

Read More

2015-10-14
Decision Making

Trolley Problem (and variants)

Trolley problem - Wikiwand
How the Trolley Problem Works - HowStuffWorks
How Trolley Problems Work | Stuff You Should Know: The Podcast

Matching Problem

Freakonomics » Make Me a Match: A New Freakonomics Radio Episode
on markets where price is not applicable, matching should be done by a clearing house with stable matching algorithms

Read More

2015-10-09
Cold Weapons

Read More

2015-10-09
Bridges

Read More

2015-10-09
Food

Read More

2015-10-09
World History

Read More

2015-10-09
Morality

Read More