enijar/plugins.md

## plugins.md

      
    Raw
  

              plugins.md
            
          
    Node Scripts

React + Babelify + Watchify with Node Scripts
Mac Web Dev Setup

Scripts Gist
Socket.io + Redis + Laravel 5.1

Tutorial Link
Angular

Angular Configuration File for Laravel
Laravel

Queue supervisorc
    nano /usr/local/bin/artisan.sh
### Count Lines
    find . -name '*.php' | xargs wc -lc

Bash

List files recursively

ls -R DIRECTORY_NAME | awk '/:$/&&f{s=$0;f=0} /:$/&&!f{sub(/:$/,"");s=$0;f=1;next} NF&&f{ print s"/"$0 }'
Find and replace in file

replace() {
        perl -pi -e "s,{{domain}},$2,g" "$1.txt"
        perl -pi -e "s,{{path}},$3,g" "$1.txt"
        perl -pi -e "s,{{logs}},$4,g" "$1.txt"
}
PHP

Laravel 5.1 Domain Redirect Middleware
Strong encryption / decription of data
MySQL search encrypted data
jQuery Plugins

Scrollbar - IE 7+ (A little jittery on IE <=9)
Magic Scrollbar - IE 7+ (Used for Parallax and scroll stuff)
jQuery Parallax Simplified
Timeago - Human readable timestamps
Element Visibility - Checks if element is visivle on viewport
Login with Facebook - One liner to login with Facetbook SDK
Responsive Text - Resizes text to fix container
Cover Images - Acts like background-cover but for img elements
Data Table - Sortable data
Image Rotation - 360 deg image rotation
Open Maps Custom Pin - Custom pins with Open Maps
Export Table Data - Export as PDF, CSV, etc.
Enhanced Animations - Enhanced jQuery animations
jBox - Nice notifications
Uploader - IE7+ AJAX file uploader.
More... - A load more plugins here.
Support

getUserMedia() shim - Flash fallback for getUserMedia()
CSS

Normalize / Reset CSS file
CSS Text tool
Page Transitions
JavaScript

Local Storage Abstraction - Laravel style API for LocalStorage and LocalSession.
Canvas Image Masking - Mask images using the data-mask attribute to the image mask
Front-end Validation - Validate common data types: emails, postcodes, etc.
Canvas Transitions
Carousel
Animation

3D globe with json data - Works on mobile and IE9+
CSS3 Animations - Fully browser prefixed
Javascript

Aspect Ratio Calculator Sets the aspect ratio responsively for an element
Dev Tools

Icons - Nice collection of copyright-free icons
CSS & JS minifier - Minifies and outputs CSS / JS
Laravel IDE Helper for PHPStorm
Laravel Debug Bar
Gulp Dependencies

{
    "devDependencies": {
        "gulp": "*",
        "gulp-ruby-sass": "*",
        "gulp-notify": "*",
        "browser-sync": "*"
    }
}
Gulp File

var gulp        = require('gulp');
var sass        = require('gulp-ruby-sass');
var browserSync = require('browser-sync');
var notify      = require('gulp-notify');

gulp.task('browser-sync', function() {
    browserSync({
        proxy: 'james.local/bp',
        open: 'external'
    });
});

gulp.task('sass', function() {
    return sass('assets/css/', {style: 'expanded'})
        .pipe(gulp.dest('assets/css/'))
        .pipe(notify('Sass compiled'))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default', ['sass', 'browser-sync'], function() {
    gulp.watch('assets/css/**/*.scss', ['sass']);
    gulp.watch('**/*.php', ['bs-reload']);
});

// ES6 & React Classes

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var fs = require('fs');

gulp.task('build', function () {
    return browserify('./app/app.js')
        .transform('babelify', {
            presets: ['es2015', 'react']
        })
        .bundle()
        .pipe(fs.createWriteStream('./public/js/bundle.js'));
});

gulp.task('watch', ['build'], function () {
    gulp.watch('./app/**/*.js', ['build']);
});

gulp.task('default', ['watch']);
PHP Libraries

24 Usefull Libraries - 24 useful functions / libraries for PHP
Apache

Clean URLs

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
</IfModule>
Virtualhost

<VirtualHost *:80>
        ServerName www.example.com

        DocumentRoot /path/to/website/files

        <Directory />
                Options FollowSymLinks
                AllowOverride None
        </Directory>
        <Directory /path/to/website/files>
                Options -Indexes +FollowSymLinks -MultiViews
                AllowOverride All
                Order allow,deny
                Allow from all
                Require all granted
        </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName example.com
    Redirect permanent / http://www.example.com/
</VirtualHost>
References

JavaScript Game Fundamentals - Nice slide documentation for canvas animation
Git commands

New Repository

cd /path/to/repo
git remote add origin https://[email protected]/TEAM_OR_USER_NAME/GIT_NAME.git
git push -u origin --all
git push -u origin --tags
Terminal

Generate Strong Passwords

openssl rand -base64 20
Custom PROMPT

PS1="
\[\033[0;33m\]\u\[\033[0m\]\[\033[0;32m\]@\h\[\033[0m\] \[\033[0;35m\]\w\[\033[0m\]
\[\033[0;31m\]->\[\033[0m\] "
FFMPEG Convert image into MP4

ffmpeg -r 30 -i "input_sequence_%05d.png" -c:v libx264 -crf 23 -pix_fmt yuv420p output.mp4
FFMPEG Convert Alpha to webm transparent

ffmpeg -i snowman.mov -c:v libvpx -pix_fmt yuva420p snowman.webm
ImageMagic Command Line Tools

Photoshop Magic Wand
Git

Useful tips
Use MAMP version of PHP

PHP_VERSION=`ls /Applications/MAMP/bin/php/ | sort -n | tail -1`
export PATH=/Applications/MAMP/bin/php/${PHP_VERSION}/bin:$PATH
SQL

FULLTEXT search

ALTER TABLE `table_name` ENGINE MYISAM;
ALTER TABLE `table_name` ADD FULLTEXT `index_key_name`(column1,column2,column3);

SELECT column_name 
FROM table_name 
WHERE MATCH(column1,column2) AGAINST(+'search term')
Facebook

Get Photos From All Albums

FB.api('/me/albums?fields=id,name', function (response) {
    for (var i = 0; i < response.data.length; i++) {
        var album = response.data[i];

        FB.api('/' + album.id + '/photos', function (photos) {
            if (photos && photos.data && photos.data.length) {
                console.log(photos.data);
            }
        });
    }
});
Sharing

Result
window.fbAsyncInit = function() {
    FB.init({
        appId: '995440483809011',
        xfbml: true,
        version: 'v2.2'
    });
    
    FB.Canvas.setAutoGrow();
    
    FB.ui({
        method: 'feed',
        name: 'Philips Lighting',
        caption: 'Are you working with the correct light?',
        description: 'Different levels of light can impact the way you work in many different ways. Low light can cause eye strain and greater fatigue while too much light could be inhibiting your creativity at work. Even worse, the amount of light you need changes as you get older.',
        link: 'https://www.facebook.com/seewhatlightcando?sk=app_995440483809011',
        picture: 'https://apps2.finervision.com/philips-lighting/public/img/home-header-bg.png'
    }, function(response) {
        if(response && response.post_id) {
           console.log('Post was published.');
        } else {
          console.log('Post was not published.');
        }
    });
};

(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Facebook

AutoGrow

var wrapper = $("#wrapper");
wrapper.height('auto');
var newHeight = wrapper.height();
wrapper.height(newHeight);

FB.Canvas.setSize({ height: (newHeight+20) });
Snippets

Image Preloader with Callback
function imgpreload( imgs, callback ) {
  "use strict";
  var loaded = 0;
  var images = [];
  imgs = Object.prototype.toString.apply( imgs ) === '[object Array]' ? imgs : [imgs];
  var inc = function() {
    loaded += 1;
    if ( loaded === imgs.length && callback ) {
      callback( images );
    }
  };
  for ( var i = 0; i < imgs.length; i++ ) {
    images[i] = new Image();
    images[i].onabort = inc;
    images[i].onerror = inc;
    images[i].onload = inc;
    images[i].src = imgs[i];
  }
}