Combinando objetos con Lodash

Es cierto que los siguientes métodos proveen más características para combinar objetos, pero hoy vamos a cubrir el típico ejemplo de combinar “settings”:

let source = {
    title: 'Awesome',
    description: 'Awe-inspiring',
    derived: {
        awesomely: 'In a manner inspiring awe', 
        awesomeness: 'The quality of being awesome',
        awesomest: 'Superlative form of awesome: most awesome'
    }
};

let customizer = {
    title: undefined,
    description: 'Arousing awe through being nice',
    derived: {
        awesomely: 'Inspire kindness', 
        awesomeness: null,
        awesomest: undefined
    },
    synonyms: ['overwhelming', 'impressive'],
    antonym: 'boring',
};

_.assign(source, customizer)

assign

_.assign()

nota: _.extend es un alias de _.assign, por lo tanto funcionan igual.

_.merge(source, customizer)

merge

_.merge()

_.defaults(source, customizer)

defaults

_.defaults()

_.defaultsDeep(source, customizer)

defaultsDeep

_.defaultsDeep()

¿Ya había dicho que amo lodash?

_.get()

if (awesome && awesome.plugins && awesome.plugins.notification) {
    // Usa awesome.plugins.notification
}

Se puede simplificar usando la función “_.get()” de lodash:

if (_.get(awesome, 'plugins.notification')) {
    // Usa awesome.plugins.notification
}

lodash

Array of Objects

var users = [
    {username: 'josoroma', id:1, age: 38}, 
    {username: 'celine', id:2, age: 25},
    {username: 'isa', id:3, age: 21},
    {username: 'wifi', id:4, age: 21},
    {username: 'coco', id:5, age: 21}
];

_.findWhere

Encontrar la primera ocurrencia:

var findWhereUsers = _.findWhere(
    users,
    { 
        age: 21 
    }
);
{
    age: 21,
    id: 3,
    username: "isa"
}

_.where

Encontrar todas las ocurrencias:

var whereUsers = _.where(
    users,
    { age: 21 }
);
[
    {
        age: 21,
        id: 3,
        username: "isa"
    },
    {
        age: 21,
        id: 4,
        username: "wifi"
    },
    {
        age: 21,
        id: 5,
        username: "coco"
    }
]

Sí vale la pena aprender Typescript

Some people really like static type checking.

A simple vista parece que Typescript se siente como JavaScript pero con anotaciones lo cual es una ventaja “static typing”.

TypeScript Deep Dive

Typescript

Un lenguaje es “statically typed” si el tipo de una variable se conoce en su tiempo de compilación. La ventaja principal es que todos las verificaciones de tipos pueden ser realizadas por el compilador, lo que permite atrapar de manera temprana una gran cantidad de errores estúpidos.

Un lenguaje es “dynamically typed” si el tipo de una variable se interpreta en tiempo de ejecución, esto favorece al desarrollador ya que puede escribir código un poco más rápido, ya que no tiene que especificar el tipo cada vez.

La mayoría de los “scripting languages” tienen esta característica ya que no hay compilador para hacer “static typechecking” de todos modos, pero el desarrollador puede terminar buscando un error que se debe a la mala interpretación del tipo de una variable por parte del intérprete. Por suerte, la mayoría de los scripts tienden a ser pequeños, así que los errores no tienen tantos lugares para esconderse.

Por supuesto es posible desarrollar con ES6 y ES7, por ejemplo, usando Babel, lo interesante es que Typescript proporciona características similares a las de Babel, pero con el extra de la comprobación de tipos (es opcional).

Quickstart

The core concepts of Angular 2

API Query Builders

laravel-api-query-builder

Laravel & Lumen Api Query Builder Package:

laravel-api-handler

This helper package provides functionality for parsing the URL of a REST-API request:

node-mongo-querystring

Accept MongoDB query parameters through URI queries safe and easy:

Buenas excusas para aprender Angular 2

RTFM

Books

ng-book 2 Become a Ninja with Angular 2

Cheatsheet

Style GuideS

Awesome

Angular 2 Education

Learn Angular 2

Seeds, starters and boilerplates

Installing Atom and Vagrant/Homestead Box

Docker instead of Vagrant

LaraDock helps you run your Laravel App on Docker real quick. It’s like Laravel Homestead but for Docker instead of Vagrant.

LaraDock

Update Ubuntu (Elementary OS 14.04.1)

sudo apt-get update
sudo apt-get upgrade

Git

sudo apt-get install git

Atom Editor

sudo add-apt-repository ppa:webupd8team/atom
sudo apt-get update

sudo apt-get install atom

sudo apt-get upgrade

Latest Stable Node JS

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -j nodejs

sudo apt-get install -y build-essential

NPM

npm config set prefix ~/.npm
vim ~/.bashrc

export PATH="$PATH:~/.npm/bin"

Linters

npm install -csslint
npm install -jshint

sudo apt-get install php5-cli
sudo apt-get install php-pear
sudo pear install PHP_CodeSniffer

Composer

curl -sS https://getcomposer.org/installer | php && sudo mv composer.phar

Vagrant

Manually download via URL and install latest Vagrant version.

Virtualbox

wget http://download.virtualbox.org/virtualbox/debian/oracle_vbox.asc

sudo apt-key add oracle_vbox.asc

sudo apt-get update

sudo apt-get install virtualbox-5.0
sudo apt-get install virtualbox-dkms

sudo apt-get upgrade

Composer

vim ~/.bashrc

export PATH="$PATH:~/.npm/bin:~/.composer/vendor/bin"
composer global require "laravel/homestead=~2.0"

mkdir ~/Code

homestead init
vim ~/.homestead/Homestead.yaml

sudo vim /etc/hosts
homestead up
homestead ssh

Atom Theme

seti-syntax
seti-ui

Atom Packages

angularjs
atom-autocomplete-php
atom-beautify
atom-material-syntax
atom-material-ui
atom-pair
atom-ternjs
autoclose-html
color-picker
docblockr
editorconfig
emmet
file-icons
git-time-machine
hyperclick
hyperclick-php
javascript-snippets
js-hyperclick
language-javascript-jsx
linter
linter-csslint
linter-jshint
linter-phpcs
merge-conflicts
minimap
pigments
plantuml-viewer
rest-client
sort-lines
terminal-plus

AMD Modules and CommonJS Packages

Design Patterns

AMD Modules

/* -------------------------------------------------------------------------- */

/*
* AMD (Asynchronous Module Definition):
*
*   The module and dependencies can be asynchronously loaded. It helps to
*   removes the tight coupling between code and module identity.
*
*  JavaScript is single-threaded amd runs synchronous code executed in sequence:
*
*    All the time works on a synchronous code-flow executionn (in sequence).
*
*    Feel free to use Asynchronous code when performing expensive and
*    time-consuming operations.
*
*    We should always use XMLHttpRequest Asynchronously and update "the page"
*    when responses are available.
*
* Please read and enjoy:
*
*   https://github.com/amdjs/amdjs-api/wiki/AMD
*   
*   http://addyosmani.com/writing-modular-js
*/

/* -------------------------------------------------------------------------- */

/*
* My First Module.
*/
define('myFirstModule', [
  // Module Dependencies.
  'mySecondModule',
  'myThirdModule'
],
// Module definition function: Dependencies are mapped to Function Parameters.
function (mySecondModule, myThirdModule) {
  // Our Module Code Lives Here.
  var myFirstModule = {
    // Do stuff and Respond to requests.
    myResponse: function() {
      return '{"status": "success", "data": {"var": "val"}, "message": null}';
    };
  };
  // Returns a value that defines the Module Export.
  return myFirstModule;
});

/* -------------------------------------------------------------------------- */

/*
* Basic Example.
*/
define('myFirstModule', [
  'mySecondModule',
  'myThirdModule'
],
// Code lives here.
function (mySecondModule, myThirdModule) {
  return {
    myResponse: function(arg1, arg2) {
      return mySecondModule.yourResponse(
        myThirdModule.theirResponse(arg1, arg2)
      );
    };
  };
};
});

/* -------------------------------------------------------------------------- */

/*
* AMD Modules with jQuery.
*/
define('myjQeuryModule', [
  'js/jquery.js',
  'js/lodash.js'
],
// Here we map jQuery with $ and Lodash with _
function($ , _) {
  // Here we can use: https://jquery.com an d https://lodash.com
  // through the use of the parameters $ and _
  return {
    // What we return here can be used by other modules.
  };
});

/* -------------------------------------------------------------------------- */

/*
* Most Commonly Used Browser Module Loader: http://requirejs.org
*
* "yourModule" and "theirModule" are two external modules.
*
* The "exports" from this two modules loaded are passed as function
* arguments to the callback (yourModule, theirModule) so that they can
* similarly be accessed.
*/
require([
  'yourModule',
  'theirModule'
],
function (yourModule, theirModule) {
  // Rest of the Code Lives Here.
  yourModule.yourResponse();
  theirModule.theirResponse();
});

/* -------------------------------------------------------------------------- */

/*
* Dynamically-loaded Dependencies.
*/
define(function ( require ) {
  var isReady = false,
      myResponse;
  // Note the inline require within our module definition above.
  require([
    'yourModule',
    'theirModule'
  ],
  // Code lives here.
  function (yourModule, theirModule) {
    isReady = true;
    myResponse = yourModule.yourResponse() + theirModule.theirResponse();
  });
  // We can still return a module.
  return {
      isReady: isReady,
      myResponse: myResponse
  };
});

/* -------------------------------------------------------------------------- */

CommonJS Packages

/* -------------------------------------------------------------------------- */

/*
* CommonJS the Module Format Optimized For The Server.
*
* Is a Standard for Asynchronous Modules.
*
* The CommonJS module specifies a simple API for declaring server-side modules.
* It covers a set of concerns such as: io, filesystem, promises and more.
*
* Contains two primary parts:
*
*   A free variable named "exports" which contains the objects a module wishes
*   to make available to other modules.
*
*   A "require" function that modules can use to import the exports of other
*   modules.
*/

/* -------------------------------------------------------------------------- */

/*
* Package/library is a dependency we require.
*/
var library = require('package/library');

function myMethod() {
  return library.theirMethod();
}

// Exports/Exposes myMethod to other modules.
exports.myMethod = myMethod;

/* -------------------------------------------------------------------------- */

/*
* Most Commonly Used Server Module Loader: http://nodejs.org
*
* Node adapter for RequireJS: http://requirejs.org/docs/node.html
*
* Node.js is single-threaded amd runs synchronous code executed in sequence:
*
*   Sometimes have both asynchronous and synchronous versions of things:
*    - writeFile.
*    - writeFileSync.
*
*  "Node.js handles requests with a single thread concurrently by multiplexing
*   and sequencing all your JS logic in a single stream of execution which works
*   well for IO-bound workloads."
*
*   Always behave Asynchronous when I/O is involved or when in doubt.
*
* Please read and enjoy:
*
*   http://www.nodewiz.biz/your-doing-node-js-wrong-avoid-synchronous-code
*/

/* -------------------------------------------------------------------------- */

/*
* Basic consumption of exports.
*/
function messages() {
  this.success = function() {
    return '{"status": "success", "data": {"var": "val"}, "message": null}';
  }

  this.error = function() {
    return '{"status": "error", "data": null, "message": "System Message"}';
  }
}

// Exposes messages to other modules.
exports.messages = messages;

/* -------------------------------------------------------------------------- */

/*
* An application/module consuming 'messages'.
*/
var messages = require('./modules/messages').messages;

var res = new messages();

res.success();

/* -------------------------------------------------------------------------- */

Handy Sass “Mixins”

Sass Style Guide

Compass Mixins

A Simple and Lightweight Mixin Library

Useful SASS Mixins Library

Reusable Mixins

Really Simple Media Queries

Serving High Resolution Background Images

Sassaparilla Grid

Sass MediaQueries

Set Text on the Web to a Baseline Grid

A Grid System for Humans

A Lightweight, Responsive CSS Layout Engine

Unicorn UI Buttons

Sassy Buttons

Bootstrap Sass

Optimización de SVGs y Procesador de datos JSON

SVGO

Es una herramienta útil para la optimización de archivos gráficos vectoriales SVG.

SVG

¿Por qué?

Los archivos SVG, especialmente los exportados por los diversos editores, por lo general contienen una gran cantidad de información redundante e inútil como: metadatos, comentarios, elementos ocultos, valores por defecto no óptimizados y otras cosas que se pueden quitar sin afectar el resultado o renderizado adecuado del SVG.

Por ejemplo, para optimizar múltiples carpetas de manera recursiva podemos usar:

find . -type d -print0 | xargs -0 -n 1 svgo -f

jq

JQ es como sed para datos JSON – se puede utilizar para cortar, filtrar, mapear y transformar datos estructurados con la misma facilidad que sed, awk, grep y amigos.

JSON

brew install jq

curl 'http://reqr.es/api/users' | jq '. | {id: .data[0].id}'

{
  "id": 1
}

curl 'http://reqr.es/api/users' | jq '. | {id: .data[].id}'

{
  "id": 1
}
{
  "id": 2
}
{
  "id": 3
}

curl 'http://reqr.es/api/users' | jq '[. | {id: .data[].id}]'

[
  {
    "id": 1
  },
  {
    "id": 2
  },
  {
    "id": 3
  }
]

curl 'http://reqr.es/api/users' | jq '. | {ids: [.data[].id]}'

{
  "ids": [
    1,
    2,
    3
  ]
}

Integración Continua Agil como Práctica de Desarrollo

Rocketeer es agilidad con baterías, es moderno y además permite gestionar de manera fácil las tareas, los eventos y la gestión de implementaciones/lanzamientos de proyectos o aplicaciones. Es inspirado en la filosofía Laravel: Ser ágil, elegante y lo más importante, fácil de usar.

Por favor consulte:

Igual que Laravel, hace hincapié en el uso de valores predeterminados inteligentes presentes en el desarrollo de punta. Con Rocketter se puede implementar cualquier proyecto desde pequeños sitios web HTML/CSS hasta aplicaciones grandes realizadas con PHP, Rails, entre otros…”.

Send your projects up in the clouds

Ahora tengo muchas ganas de seguir explorando: Ansible, Crusible y Review Board.