OSX post install para desarrollo con node, react, atom, brew

Small reference guide for OSX installation basics.

Homebrew

This is most used macOS pacakage manager.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Atom

brew cask install atom
apm install nuclide
apm install prettier-atom bootstrap-3-snippets-for-atom emmet language-graphql language-vue remote-ftp git-time-metric

PHP

apm install atom-autocomplete-php language-blade php-fmt

Configure atom-autocomplete-php composer path /usr/local/bin/composer.phar and php-fmt plugin with executable /Users/smac/kscripts/fmt.phar

HHVM

Facebook´s php engine. (optional)

brew tap hhvm/hhvm
brew install hhvm

To have launchd start hhvm/hhvm/hhvm now and restart at login:
  brew services start hhvm/hhvm/hhvm
Or, if you don't want/need a background service you can just run:
  hhvm -m daemon -c /usr/local/etc/hhvm/php.ini -c /usr/local/etc/hhvm/server.ini

Node

brew install node watchman

React native

npm install -g yarn && react-native-cli && react-native-git-upgrade && react-devtools

GraphQL

npm install -g graphql-cli && graphql completion >> ~/.bash_profile

Alias

vi .bash_profile
sudo launchctl load -w /System/Library/LaunchDaemons/com.apple.locate.plist

Maria DB

Install brew install mariadb && brew services start mariadb

Old database are stored in:

/Volumes/OLD_DRIVE/usr/local/var/mysql

Applications passwords

Some applications are using the following location to store the passwords, for example Squel Pro. Copy old keychain to new hard drive.

cp /Volumes/OLD_DRIVE/Users/OLD_USER/Library/Keychains/login.keychain-db /Users/NEW_USER/Library/Keychains/login.keychain-db

SSH

Copy importants files from ~/.ssh/

Install Laravel & Co.

brew install homebrew/core/php
composer global require "laravel/installer"
composer global require laravel/valet
composer global require laravel/envoy

PHP extras

brew install imagemagick
brew install pkg-config
pecl install imagick

VueJS

npm install -g @vue/devtools

Laravel Lumen GraphQL Server for React Relay Modern

Having Laravel´s Lumen to work as a GraphQL Server able to provide feeds to client applications for Relay Modern its been a beautiful jurney, and i´ll like to share with the world on this publication.

Laravel its Magic, and this is a fact, thanks to its nature we able to do things like this, in this example all work its done thanks to a recently released v2 of an excellent library known as LightHouse, you can find documentation on nuwave/lighthouse, this library it´s in charge some Magic.

On its core uses another library, lets say Lighthouse its a Laravel Wrapper with supercharged powers, on top of webonyx/graphql-php, the real GraphQL implementation under PHP.

As a result of this implementation you able to access and download resuling proyect implementation on this GitHub Repository:

kikoseijo/lumen-lighthouse-graphql

The Jurney starts

Maybe i have missed some steps, but main logic its here, as you having the repository you can get from there whats not documented here.

Steps to reproduce

Fresh install of Lumen, and initial packages requirements its done on the following bash commands:

lumen new lumen-lighthouse-graphql
cd lumen-lighthouse-graphql
composer update
composer require nuwave/lighthouse
cp .env.example .env

setup your configuration folders, and lighthouse defaults folders needed if you are going to implement some queries, mutactions, etc…

mkdir config && mkdir app/Models && mkdir app/GraphQL && mkdir app/GraphQL/Mutations && mkdir app/GraphQL/Queries && mkdir app/GraphQL/Scalars && mkdir app/GraphQL/Directives
cp vendor/nuwave/lighthouse/config/config.php config/lighthouse.php

Helping Lumen acknowledge regarding Lighthouse:

$app->withFacades();
$app->withEloquent();
$app->configure('lighthouse');
...
$app->register(Nuwave\Lighthouse\Providers\LighthouseServiceProvider::class);

Add klaravel (Optional)

composer require ksoft/klaravel
cp vendor/ksoft/klaravel/stubs/config/ksoft.php config/ksoft.php
$app->configure('ksoft');

Laravel Passport

Im using a wrapper to be able to have Passport fully integrated on Laravel Lumen´s. For more info or extended usage:

https://github.com/dusterio/lumen-passport

composer require dusterio/lumen-passport
composer require appzcoder/lumen-routes-list
namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Dusterio\LumenPassport\LumenPassport;
use Laravel\Passport\Passport;
use Carbon\Carbon;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        Passport::tokensExpireIn(Carbon::now()->addDays(15));
        Passport::refreshTokensExpireIn(Carbon::now()->addDays(30));
        LumenPassport::tokensExpireIn(Carbon::now()->addYears(50), 2);
    }
}

Under AuthServiceProvider.php add this line in the boot method

// use Dusterio\LumenPassport\LumenPassport;
LumenPassport::routes($this->app, ['prefix' => 'v1/oauth']);

User model

use Laravel\Passport\HasApiTokens;

Enable Passport under Lumen:

$app->configure('auth');
...
$app->register(Laravel\Passport\PassportServiceProvider::class);
$app->register(Dusterio\LumenPassport\PassportServiceProvider::class);
// Optional if yo want to list your routes.
if ($app->environment() == 'local') {
    $app->register(Appzcoder\LumenRoutesList\RoutesCommandServiceProvider::class);
}

Now your are going to need the migrations:

php artisan make:migration create_users_table
$table->increments('id');
$table->string('name');
$table->string('email')->unique();
$table->string('password');
$table->rememberToken();
$table->timestamps();

Seeder:

php artisan make:seeder UsersTableSeeder
if (!DB::table('users')->where('email', 'kiko@example.com')->first()) {
  DB::table('users')->insert([
    'name' => 'Kiko Seijo',
    'email' => 'kiko@example.com',
    'password' => app('hash')->make('secret'),
    // 'admin' => 1,
  ]);
}

Finish install Laravel Passport install with: This is the simplest way to setup a login method that Passport provides, there are many more https://laravel.com/docs/master/passport)

php artisan migrate --seed
php artisan passport:keys
php artisan passport:client --personal

Testing install:

mutation Login {
  login(username: "kiko@example.com", password: "secret") {
    user {
      id
      name
      email
    }
    token
  }
}

Should return:

{
  "data": {
    "login": {
      "user": {
        "id": "1",
        "name": "Kiko Seijo",
        "email": "kiko@example.com"
      },
      "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJS........your token"
    }
  }
}

Testing auth middleware from Viewer Query:

query ViewerQuery {
  viewer {
    id
    name
    email
  }
}

Add the headers to your query and adjust the token to the one you are getting from previous login:

{
  "Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJS........your token"
}

And you should get:

{
  "data": {
    "viewer": {
      "id": "1",
      "name": "Kiko Seijo",
      "email": "kiko@example.com"
    }
  }
}

GraphQL viewer Query with a Laravel Passport bearer token using Lighthouse auth middleware


Credits

Sunnyface.com, is a software development company from Málaga, Spain. We provide quality software based on the cloud for local & international companies, providing technology solutions with the most modern programming languages.

DevOps Web development
Custom App Development Mobile aplications
Social Apps and Startups Residents mobile application
Graphic designer Freelance senior programmer


Created by Kiko Seijo

Copias de seguridad en laravel con vistas, rutas y controladores

Todo lo que uno neceista para montar copias de seguridad en una instalación de laravel usando una librería que podemos instalar desde: laravel-activitylog

Aquí teneis todos los archivos: Descargar archivos

Lo primero es tener un controlador definido con los puntos de entrada,

BackupsControler.php

Luego creamos las vistas, las he dividido en dos por mejorar la visualización.

backup.blade.php
backup-table.blade.php

Por ultimo nos quedan las rutas de entrada, estas van en web.php,

Route::get('backup', 'BackupController@index');
Route::get('backup/create', 'BackupController@create');
Route::get('backup/download/{file_name}', 'BackupController@download');
Route::get('backup/delete/{file_name}', 'BackupController@delete');

tendremos que protegerlas por medio de un middleware, en mi caso he optado por usar el consctructor del controlador y añadido mi middleware:

public function __construct()
{
    $this->middleware('auth');
}

Tendremos que ajustar algunas librerias extras como los Flash:: y Alert::

Aquí os dejo todos los archivos en un gist.

https://gist.github.com/kikoseijo/d4ec87a121cba7bcb6231bfa046be291

Espero os sirva de ayuda.

Configurar el nombre de las relaciones polimórficas de Laravel

Con este sencillo truco podemos ajustar el nombre de las relaciones polimorficas con tablas anidadas que por defecto van a tomar el nombre de la clase del modelo.

Lo primero es crear una tabla de relaciones, en nuestro caso vamos a incorporarla dentro del archivo config/app.php

// config/app.php
...
'post_types' => [
    'point' => 'App\Models\Point',
    'post' => 'App\Models\Post',
    'doc' => 'App\Models\Doc',
    'supplier' => 'App\Models\Supplier',
    'page' => 'App\Models\Page',
],
...

A Continuacion nos vamos a nuestro Service Provider, en nuestro ejemplo vamos a usar el que viene por defecto en la instalación del Laravel, app/Providers/AppServiceProvider.php


... use Illuminate\Database\Eloquent\Relations\Relation; ... public function boot() { ... Relation::morphMap(config('app.post_types')); ... }

Ya hemos terminado!

Cambiar React nativo a modo producción – iPhone iOS

Unos apuntes rápidos de los pasos a seguir para cambiar una app hecha con react de modo desarrollo al modo producción y poder publicar o llevar la app instalada para enseñarla al cliente.

Son muchas las cosas que pueden darnos problemas, empezando por cada librería que tengamos añadida.
El mejor consejo es leer los logs, yes, detenidamente, yes, buscando errores, por eso es mejor hacer el build por el terminal que darle al play en el xCode.

La mayoria de las veces el problema va a estar relacionado con problemas tipo: no has puesto el dominio del app, librerias mal linkeadas, etc..

Cambio desarrollo a producción

Estas son las indicaciones de React al día de hoy, tal cual.

Product → Scheme → Edit Scheme. cambiamos el schema al modo release.

vamos al archivo AppDelegate.m de nuestro proyecto en la carpeta ios y modificamos lo siguiente:

...
// DEVELOPMENT
// jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot: @"index" fallbackResource:nil];

// PRODUCTION
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension: @"jsbundle"];
...

Build Settings Header search path – los hacemos recursivos.

Pro Tip: para proyectos grandes de carga algo lenta, le metemos un loading…

// Loading "LaunchScreen"
UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0]UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];

launchScreenView.frame = self.window.bounds;
rootView.loadingView = launchScreenView;

Luego tenemos que hacer un build, ⌘ + B o por el menú del xCode: Product → Build

Hacer el build por comando

Con este comando debemos poder hacer el build sin problemas una vez hayamos resuleto todos los problemas. Intenta primero con tu dispositivo móvil.

react-native run-ios --device --configuration Release

si todo va bien y eres capaz de correr la app sin problemas podrás hacer el build -> archive y publicar…, no entramos hoy en eso.

Bash limpiador

Os dejo aquí también un bash script para limpiar un poco y poder hacer las compilaciones.

#!/bin/bash
# Copyright 2018 Sunnyface.com.
#

rm -rf ios/build
rm -rf node_modules && npm install
node_modules/react-native/packager/packager.sh --reset-cache
watchman watch-del-all

Crea el fichero en ./scripts, ponle de nombre limpiador.sh y ejecuta cuando veas conveniente.

sh ./scripts/limpiador.sh

Programas fantasma

buscamos si hay programas enchufados a nuestro puerto

sudo lsof -i :8081

con esto lo matamos el proceso, pega el pid el recurso que veas.

kill -9 PID_DEL_RECURSO    

¿Qué más puedo hacer?

No hay mucho más que puedas hacer, a menos que tengas logs, si no puedes o sabes que hacer, busca ayuda en la red, google es tu mejor amigo y el este caso, el orden de tus palabras claves van a marcar la diferencia en la velocidad de las respuestas adecuadas. (hablar inglés ayuda mucho)

Usa github, en react-native la gente aporta sus trucos, pero mira bien las fechas y versiones, los hilos empiezan por el 2016.

Y si todo va bién, ponme dos estrellas.
a testear!

Twenty Seventeen y Contact form7 CSS

Con este código estilamos el css de contact form 7 para el theme de twenty seventeen, el usado actualmente por este website.

div.wpcf7 {
     background: #f7f7f9;
     border-radius: 32px;
     padding: 22px !important;
     width: 700px;
}
div.wpcf7 label {
    width: 100%;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
textarea
{
    font-size: 16px;
    background-color: #fff;
    border: none;
    color: #000;
    width: 95%;
}
select.wpcf7-form-control.wpcf7-select {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    width: 95%;
    border-radius: 0;
    overflow: hidden;
    background-color: #fff;
    background: #fff;
    position: relative;
}
select.wpcf7-form-control.wpcf7-select:after {
    top: 50%;
    left: 85%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;
    border-width: 5px;
    margin-top: -2px;
    z-index: 100;
}
select.wpcf7-form-control.wpcf7-select select {
    padding: 8px 1px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
select.wpcf7-form-control.wpcf7-select select:focus {
    outline: none;
}
.wpcf7-form-control-wrap {
    width: 95%;
}
.wpcf7 input[type="submit"] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    background: #9ED9330;
    padding: 15px 25px 15px 25px;
    border: none;
    border-radius: 5px;
    width: auto;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.wpcf7 input:hover[type="submit"] {
    background: #494949;
    transition: all 0.4s ease 0s;
}
.wpcf7 input:active[type="submit"] {
    background: #000000;
}
.wpcf7 form {
     margin-left: 25px;
     margin-right: 25px;
     margin-top: 25px;
}

Añade fuentes en iOS y Android con React-native – modo fáci

OS muestro la forma más sencilla para hacer que React-nativo sea capaz de instalar nuestras fuentes dentro de los proyectos de forma automática en aplicaciones iOS y Android.

  1. Primer paso

Elige una carpeta dentro de tu proyecto y copia ahí las fuentes, en nuestro caso
vamos a usar el directorio ./src/assets/fonts/

  1. Paso segundo

añade este trozo de código dentro de tu proyecto, en el archivo de configuración en la raíz del proyecto package.json:

  "rnpm": {
    "assets": ["./src/assets/fonts"]
  },

solo tienes que reemplazar tu directorio por ./src/assets/fonts.

  1. Paso final

corre el siguiente comando en tu terminal.

$ react-native link

Ahora, cada vez que quieras instalar una fuente en tu aplicación móvil, solo tienes que dejar caer la fuente y correr el último comando, i voailá ya puedes usar la fuente.

Pro Tip: Cada vez que corres el comando react-native link deberas recompliar el proyecto para que carge las nuevas librerías.

Configurar Atom para React-native y flow

1) Instalar Atom

Descarga la ultima versión de Atom desde la página oficial, Si usas mac y tienes Hombrew y Cas, puedes instalaro con el siguente comando:

$ brew cask install atom
2) Instalar Nuclide para Atom

Nuclide es un conjunto de herramientas de código abierto perfecto para trabajar con React.

Busca el plugin en el buscador de paquetes en las preferencias de atom o usando el siguente comando:

$ apm install nuclide
3) Configuramos nuclide

Abre Atom,
Busca “Ajustes > Paquetes instalados” o con el shortcut CMD + SHIFT + P y busca “paquetes instalados”:

Busca “Nuclide” y dale a “Ajustes”:

Busca la opción “Instalar paquetes recomendados al arrancar”, la activamos.

En la sección de “Nuclide-flow” activa la opción de usar flow de manera local en cada proyecto, esto requerira que instales flow-bin en cada proyecto de React, es lo que nos recomiendan hacer la gente de facebook.

4) Instalar Prettier para Atom

Prettier es tu mejor amigo, se encarga de hacer que tu código sea bonito y agradable de leer. Además es capaz de seguir una reglas que tu le marques en los archivos de configuración que tengas.
Para instalarlo desde la ventana de comandos:

$ apm install prettier-atom
5) Configuramos Prettier

Como en la sección anterior, buscamos el plugin instalado y nos vamos a editar sus preferencias:

Tenemos que asegurarnos que la opción de “Integrarse con ESlint” esté activada.

Reiniciamos Atom.

6) Listos!

Ya estamos lístos para trabajar como máquinas con un monton de herramientas creadas por los creadores de React.

— Así nos queda una instalación limpia con todos los plugins instalados —

Asi quedarían los paquetes instalados

Es hora de programar con mucho @flow.

Heart pulse in pure CSS3

Un ejemplo perfecto de como usar las mejoras que nos ofrece CSS3

Aquí os dejo un ejemplo funcionando: (Que bonito pié de página 😱)

Made with in Málaga, Spain. Created by Kiko Seijo.

Este es el código que os hace falta para el html:

<i class="fa fa-heart text-danger pulse"></i>

Y por último el css para añadir en vuestra hoja de estilos.

.pulse {
  animation-name: pulse_animation;
  animation-duration: 3000ms;
  transform-origin: 50% 100%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes pulsnimation {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.2);
  }
  45% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  55% {
    transform: scale(1);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

Instalar self-signed certificados de Valet en los simuladores para iOS

Con el siguiente truco podeis instalar certificados dentro del simulador de ios de forma rápida y fácil, tan solo has de tener el certificado generado por Valet creado por el mismo que hizo laravel.

Cona el repositorio siguiente a tu equipo:
git clone https://github.com/ADVTOOLS/ADVTrustStore.git
entra dentro del repositorio recien descargado
cd ADVTrustStore/
copia dentro de esta carpeta tu certificado, (tendremos comandos mas cortos)
cp somewhere/something.crt my.crt
convertimos el certifado al formato que le gusta a ios, .pem
openssl x509 -in my.crt -out my.pem -outform PEM
Ahora instalamos los certificados en los simuladores
./iosCertTrustManager.py -a my.pem

Pro Tip: aquí va un bash con todo el proceso automatizado.

certToSimulator.sh

voilá, super sencillo!