addyosmani

Composition

On an architectural level, the way we craft large-scale applications in JavaScript has changed in at least one fundamental way in the last four years. Once you remove the minutia of machinery bringing forth data-binding, immutable data-structures and virtual-DOM (all of which are interesting problem spaces) the one key concept that many devs seem to have organically converged on is composition. Composition is incredibly powerful, allowing us to stitch together reusable pieces of functionality to "compose" a larger application. Composition eschews in a mindset of things being good when they're modular, smaller and easier to test. Easier to reason with. Easier to distribute. Heck, just look at how well that works for Node.

Composition is one of the reasons we regularly talk about React "Components", "Ember.Component"s, Angular directives, Polymer elements and of course, straight-up Web Components. We may argue about the frameworks and libraries surrounding t

samselikoff

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.

addyosmani

{
    "name": "my-app",
    "version": "1.0.0",
    "description": "My test app",
    "main": "src/js/index.js",
    "scripts": {
        "jshint:dist": "jshint src/js/*.js",
        "jshint": "npm run jshint:dist",
        "jscs": "jscs src/*.js",
        "browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

frontendbeast

<script type="text/javascript">
    (function () {
      "use strict";
      // once cached, the css file is stored on the client forever unless
      // the URL below is changed. Any change will invalidate the cache
      var css_href = './index_files/web-fonts.css';
      // a simple event handler wrapper
      function on(el, ev, callback) {
        if (el.addEventListener) {
          el.addEventListener(ev, callback, false);

greydnls

<?php

function computeErrorForLineGivenPoints($b, $m, array $points)
{
    $total_error = 0;

    foreach ($points as $point)
    {
        $total_error += pow(($point['y'] - ($m * $point['x'] + $b)), 2);
    }

addyosmani

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

mrkrstphr

Deploying Sculpin Sites to GitHub Pages

I wanted to be able to use Sculpin to generate GitHub pages. Here's what I did...

1. Created a super awesome Sculpin site from the Sculpin Blog Skeleton

2. Make sure everything is under version control in my master branch (except things that shouldn't be. see the .gitignore)

3. Updated publish.sh:

#!/bin/bash

antonioribeiro

public function connections()
{
	$relation = $this
		->belongsToMany(static::class, 'connections', 'requestor_id', 'requested_id')
		->withTimestamps();

	/// delete the already built inner join
	$relation
		->getQuery() // Eloquent\Builder

levinotik

package com.grasswire.grasswireurlshortener

import akka.actor.ActorSystem
import com.typesafe.config.ConfigFactory
import org.apache.commons.validator.routines.UrlValidator
import spray.http.StatusCodes
import spray.routing._
import scala.util.Random
import scalaz.concurrent._

toddmotto

/**
 * Read the post for full details, hope these comments are helpful!
 * http://toddmotto.com/angular-js-dependency-injection-annotation-process
 */
function annotate(fn, strictDi, name) {
  var $inject,
      fnText,
      argDecl,
      last;