Lorenzo Cinque Mulder90

Web Performance

Requirements

You need to have the latest version of Node. Preferably, you're using 9.8.0, but the latest LTS should work as well.
You should have npx installed using npm install -g npx.
Install the React Developer Tools.

Repositories

If you want a run-down of the 1.3 changes and the design decisions behidn those changes, check out the LonestarElixir Phoenix 1.3 keynote: https://www.youtube.com/watch?v=tMO28ar0lW8

To use the new phx.new project generator, you can install the archive with the following command:

$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez

Bump your phoenix dep

Phoenix v1.3.0 is a backwards compatible release with v1.2.x. To upgrade your existing 1.2.x project, simply bump your phoenix dependency in mix.exs:

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;

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

Common JS support
NPM support
a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

Git Cheat Sheet

Commands

Getting Started

git init

or

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

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.

	// Matraka's source code decoded and beautified
	// by @tlack
	//
	// Matraka is a 1005 byte Javascript "demo" by p01. It includes an 'evolving animation'
	// and great dirty synth music. View here:
	//
	// http://www.p01.org/releases/MATRAKA/matraka.png.html
	//
	// I fondly recall the demo scene of my youth, puzzling over the work of Future
	// Creators and those guys. I was puzzled by this worked so I had to figure it

	const isWalkable = value => value !== null && typeof value !== 'undefined';
	const getChild = (parent, child) => (isWalkable(parent) ? parent[child] : undefined);
	const getIn = (descendants, origin) => descendants.split('.').reduce(getChild, origin);