Daniel Norman 2color

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

SUIT CSS naming conventions + SUIT CSS design principles;
PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
Flexbox is awesome. No need for grid framework;
Normalize.css, base styles and variables are solid foundation for all components;

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Virtual DOM and diffing algorithm

There was a [great article][1] about how react implements it's virtual DOM. There are some really interesting ideas in there but they are deeply buried in the implementation of the React framework.

However, it's possible to implement just the virtual DOM and diff algorithm on it's own as a set of independent modules.

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

I'm having trouble understanding the benefit of require.js. Can you help me out? I imagine other developers have a similar interest.

From Require.js - Why AMD:

The AMD format comes from wanting a module format that was better than today's "write a bunch of script tags with implicit dependencies that you have to manually order"

I don't quite understand why this methodology is so bad. The difficult part is that you have to manually order dependencies. But the benefit is that you don't have an additional layer of abstraction.

Learn JavaScript concepts with the Chrome DevTools

Authored by Peter Rybin , Chrome DevTools team

In this short guide we'll review some new Chrome DevTools features for "function scope" and "internal properties" by exploring some base JavaScript language concepts.

Closures

Let's start with closures – one of the most famous things in JS. A closure is a function, that uses variables from outside. See an example:

	1. Create an etcd token; store it in Vault or some other secure location
	2. Create file /etc/systemd/system/docker.service.d/custom.conf with contents:

	[Service]
	Environment="DOCKER_OPTS=-H=0.0.0.0:2376 -H unix:///var/run/docker.sock --cluster-advertise eth1:2376 --cluster-store etcd://127.0.0.1:2379"

	This needs to be done in cloud-init since CoreOS is super bare-bones and "doesn't" contain support for config mgmt out of the box.

	to check if the server works - https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice

	stun:
	stun.l.google.com:19302,
	stun1.l.google.com:19302,
	stun2.l.google.com:19302,
	stun3.l.google.com:19302,
	stun4.l.google.com:19302,
	stun.ekiga.net,
	stun.ideasip.com,

	#!/bin/bash
	# Cloud-config for CoreOS IPXE deployment on Vultr
	##################################################
	# This cloud-config bootstraps CoreOS on /dev/vda and provisions:
	# - private ip-address on eth1
	# - etcd on private network
	# - fleet on private network
	# - basic firewall (docker compatible)
	# - SSHd security hardening
	##################################################

	# to generate your dhparam.pem file, run in the terminal
	openssl dhparam -out /etc/nginx/ssl/dhparam.pem 2048