Ivan Volti voltidev

"Parens and Performance" – counterpost

Kyle Simpson (@getify) wrote a very thoughtful post decrying optimize-js, which is a tool I wrote that exploits known optimizations in JavaScript engines to make JS bundles parse faster (especially minified bundles, due to what could be reasonably described as a bug in Uglify).

Kyle lays out a good case, but I tend to disagree with nearly all his points. So here's my rebuttal.

Aspirational Dropbox SCSS Principles

This is purposefully ambitious and aspirational. Some concepts that are worth understanding in addition to the principles outlined here include:

Here’s a CodePen I’ll periodically update with the compiled CSS to use as a testing playground.

Importing differentiation

You might be wondering why the Sass file here is using import directives with underscores, as opposed to the normal un-suffixed and un-prefixed importing (@import "base/all";, for example.)

Well, I’ve always had "_all.scss" as an importer for directories, but today I created a component SCSS file that appeared before "_all.scss" in the file browser.

To counter this, and make sure that the importer is always the first file I see in a directory of Sass files, I renamed the importers to "__all.scss". This has the added benefit of being extremely explicit in what exactly the imported file does—it’s in charge of pulling its siblings along with it.

This post is also on my blog, since Gist doesn't support @ notifications.

Components are taking center stage in Ember 2.0. Here are some things you can do today to make the transition as smooth as possible:

Use Ember CLI
In general, replace views + controllers with components
Only use controllers at the top-level for receiving data from the route, and use Ember.Controller instead of Ember.ArrayController or Ember.ObjectController
Fetch data in your route, and set it as normal properties on your top-level controller. Export an Ember.Controller, otherwise a proxy will be generated. You can use Ember.RSVP.hash to simulate setting normal props on your controller.

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.

I wrote this in early January 2012, but never finished it. The research and thinking in this area led to a lot of the design of Yeoman and talks like "Javascript Development Workflow of 2013", "Web Application Development Workflow" and "App development stack for JS developers" (surpisingly little overlap in those talks, btw).

Now it's June 2013 and the state of web app tooling has matured quite a bit. But here's a snapshot of the story from 18 months ago, even if a little ugly and incomplete. :p

In the beginning…

Intro to tooling

	# You will need fswatch installed (available in homebrew and friends)
	# The command below will run tests and wait until fswatch writes something.
	# The --stale flag will only run stale entries, it requires Elixir v1.3.
	fswatch lib/ test/ \| mix test --stale --listen-on-stdin

	#!/usr/bin/env bash
	# Run this command to execute the script:
	# curl https://gist.githubusercontent.com/daneden/c6b5cfbcff4d3cc3ca46/raw/smaller-sketch-svgs.sh \| bash

	# Tell Sketch to export compact SVGs
	defaults write com.bohemiancoding.sketch3 svgExportCompact -bool yes
	defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist svgExportCompact -bool yes

	# Tell Sketch to omit layer names as IDs for SVGs
	defaults write com.bohemiancoding.sketch3 svgExportSkipAssignIdToLayerName -bool yes

	defmodule ROP do

	defmacro try_catch(args, func) do
	quote do
	(fn ->
	try do
	unquote(args) \|> unquote(func)
	rescue
	e -> {:error, e}
	end

	You'll need proper development environment, learn about Ember CLI - https://www.youtube.com/watch?v=hygxGDjhGp8.

	You might want to know about more about what's happening under the hood, watch Robert Jackson talk about Ember Magic - https://www.youtube.com/watch?v=OjqcI8KWesk.

	Learn more about complex architecture in Ember https://www.youtube.com/watch?v=Kcij9lH2OyM

	Learn more about Ember Data - https://www.youtube.com/watch?v=HL2bMjndviE.

	You can get lost in the View layer, learn about Events and Actions from Luke Melia - https://www.youtube.com/watch?v=w6__hEUjqaw