Skip to content

Instantly share code, notes, and snippets.

@enijar

enijar/plugins.md

Last active August 25, 2022 02:24
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save enijar/6b1b388e795d2353abbc to your computer and use it in GitHub Desktop.
Save enijar/6b1b388e795d2353abbc to your computer and use it in GitHub Desktop.
Download ZIP
Useful
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://BITBUCKET_USERNAME@bitbucket.org/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];
  }
}
@aprabaldi
Copy link

Nice & easy to customize adaptive and touch supportive carousel (tested in IE9)
http://owlgraphic.com/owlcarousel/

@aprabaldi
Copy link

Download all files in an s3 bucket subfolder

$ aws s3 cp s3://bucket/subfolder --recursive

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment