Code By
Lucas Mouilleron

62 projects - An Open Source selection

+ webAppSnapshotBoilerplate

JavaScript 92.8% - HTML 3.2% - CSS 3% - PHP 0.8% - Shell 0.2% - ApacheConf 0.1%
Last update : 23/11/2015 - 14:46

A simple phantomJS snapshot generator for web app.

Screenshot

Features

  • Snapshot generation for angular app with phantomJS
  • Detect Google requests (with htaccess and escape_fragment) and servers the html snasphot instead of the web app
  • Auto generation on Google request if snapshot does not exist
  • Sample angular web app

Install

  • Apache + PHP 5
  • Install NodeJS : http://nodejs.org/download
  • cd server && npm install
  • cd server && vi config.json :
    • envPath : paste the result of echo $PATH
    • baseURL : the base URL of the app
  • cd webApp && npm install && grunt build
  • cd webApp && vi .htaccess : edit the RewriteBase

Tests

  • Manually generate snaphots :
    • make-snapshot http://localhost.com/webAppSnapshotBoilerplate/webApp/#!/reddits
    • make-snapshot http://localhost.com/webAppSnapshotBoilerplate/webApp/#!/github/lucasmouilleron
  • Get snapshot, like Google would do it :
    • http://localhost.com/webAppSnapshotBoilerplate/webApp/?escapedfragment_=/reddits
    • http://localhost.com/webAppSnapshotBoilerplate/webApp/?escapedfragment_=/github/lucasmouilleron
  • Scaffhold for background snapshot generation
  • Remove php dependencie
  • Alert in server/phantomjs-runner.js
  • Alert in server/snapshots/index.php

+ slimBoilerplate

JavaScript 88.9% - PHP 8% - CSS 3% - ApacheConf 0.1%
Last update : 22/11/2015 - 19:00

Slim is a lightweight but powerfull API Rest PHP framework.

Screenshot

Features

  • A nice slim boilerplate
  • Stack : slim, php, SimpleCache, JWT authentication
  • Build : install, build, watch, grunt, bower

Install requirements

  • Install NodeJS : http://nodejs.org/download
  • sudo npm install bower -g
  • sudo npm install grunt -g
  • sudo gem install sass
  • sudo gem install --pre sass-css-importer
  • Install composer :
    • curl -sS https://getcomposer.org/installer | php
    • mv composer.phar /usr/local/bin/composer

Install

  • cd api && composer install
  • cd build && npm install

Run and tests

  • little JS app at index.php and _dev/js
  • php requests at test.php

TODO

  • edit api/libs/JWTAuthenticationMiddleware.php > JWTAuthenticationMiddleware->doLogin to add login logic

Credits

Thanks to guys at Slim

TSSocketTest

Java 100%
Last update : 21/04/2015 - 12:00
Project is private, can't show more.

+ requireJSBoilerplate

JavaScript 94.1% - CSS 3.4% - HTML 2.5%
Last update : 18/02/2015 - 15:33

Features

  • A nice frontend requireJS boilerplate
  • Stack : requirejs, compass, bootstrap, fontawesome
  • Build : install, build, watch, grunt, bower

Install requirements

  • Install NodeJS : http://nodejs.org/download
  • sudo gem install compass
  • sudo npm install bower -g
  • sudo npm install grunt-cli -g
  • sudo npm install grunt -g
  • sudo gem install sass
  • sudo gem install --pre sass-css-importer

Install

  • cd _build && npm install
  • Possible to add custom install commands in config->installCommands

Build

  • modify _build/config.json if needed
  • cd _build && grunt build

Sync

  • cd _build
  • grunt sync

RequireJS

  • Debug mode :
    • Launch ndex-debug.html instead
    • index-debug.html loads the non compiled version

Bower

  • Add a requirejs module from bower :
    • cd _build && bower install the_module --save
    • Then, add path to _dev/js/libs/vendor/the_module/path/to/jsFile in _dev/main.js in path section and include module name in the requirejs call
  • Add a css from bower :
    • cd _build && bower install the_module --save
    • Then edit _dev/scss/main.scss and add @import "CSS:../js/libs/vendor/the_module/the_css_path/the_css_file_without_extension";
  • Add a public resource from bower :
    • cd _build && bower install the_module --save
    • Then edit build/config.json and update the copyFiles value so the files from the vendor path are copyied in the public assets folder

+ reactBoilerplate

JavaScript 61.1% - CSS 38.9%
Last update : 12/02/2015 - 18:32

Features

  • Based React, React-router and UIKit
  • Stack : browserify, reactify, scss

Install requirements

  • Install NodeJS : http://nodejs.org/download
  • sudo gem install compass
  • sudo npm install bower -g
  • sudo npm install grunt-cli -g
  • sudo npm install grunt -g
  • sudo gem install sass
  • sudo gem install --pre sass-css-importer

Install

  • npm install && grunt install

Build

  • edit config.json if needed
  • grunt build

TODO

  • github service
  • datamanagment
  • cf sql react github trending

+ testMongoDB

JavaScript 70.3% - CSS 15.8% - PHP 13.9%
Last update : 31/01/2015 - 09:55

Install mongo server

  • brew install mongodb [Mac OS]
  • mkdir -p /path/to/data/db
  • sudo mongod --fork --logpath /var/log/mongodb.log --port 27017 --dbpath /path/to/data
  • UI : http://www.girbal.net/umongo

Authentication

  • Create admin user :
    • sudo mongod --fork --logpath /var/log/mongodb.log --port 27017 --dbpath /path/to/data
    • mongo --host the_host --port 27017
    • use admin
    • db.createUser({user: "admin", pwd: "iamagod", roles: [ "root" ]})
    • kill mongodb
    • sudo mongod ... --auth

Tables

  • mongo --username admin --password iamagod admin --authenticationDatabase admin
  • use main
  • db.shops.ensureIndex({"loc":"2dsphere"})
  • db.shops.ensureIndex({"name":"text"})
  • db.shops.ensureIndex({"address.zip":1})
  • db.shops.ensureIndex({"address.city":1})
  • db.shops.ensureIndex({"date":1})

Operations

  • Dump : mongodump --username admin --password iamagod --authenticationDatabase admin --db main --collection shops
  • Restore : mongorestore --username admin --password iamagod --db main --authenticationDatabase admin --collection shops dump/test/shops.bson

Install php api

  • Install autoconf [Mac OS]
    • take autoconf
    • curl http://ftp.gnu.org/gnu/autoconf/autoconf-latest.tar.gz > autoconf.tar.gz && tar -xzf autoconf.tar.gz && cd autoconf-2.69 && ./configure && make
    • sudo make install
    • export PHP_AUTOCONF=/usr/local/bin/autoconf
  • sudo pecl install mongo
  • sudo vi /etc/php.ini and add extension=mongo.so
  • Install composer :
    • curl -sS https://getcomposer.org/installer | php
    • mv composer.phar /usr/local/bin/composer
  • Install API deps : cd api && composer install

Map API

  • Demo account created on https://developer.here.com/myapps/app-details/5twHHror0c2KgeiMxSzJ#/
  • More tiles http://leaflet-extras.github.io/leaflet-providers/preview/index.html

DBViewer

  • Edit dbViewer/config.js
  • node dbViewer/app.js
  • http://localhost:8081

Miscs

  • //<?php $cursor = $shops->find()->sort(array("_id"=>-1))->limit($limit)->skip($skip);
  • console.log(leafletEvents.getAvailableMapEvents());
  • console.log(leafletEvents.getAvailableMarkerEvents());
  • http://l-lin.github.io/font-awesome-animation/
  • sudo mongod --fork --logpath /var/log/mongodb.log --dbpath $HOME/Projects/haveidols/testMongoDB/data --auth
  • mongo --host localhost --port 27017 --username admin --password iamagod admin --authenticationDatabase admin
  • mongodump --host localhost --port 27017 --username admin --password iamagod --authenticationDatabase admin --db main --collection shops

+ testResponsiveImages

JavaScript 96.5% - CSS 3.5%
Last update : 26/11/2014 - 22:42

Features

Install requirements

  • Install NodeJS : http://nodejs.org/download
  • sudo npm install bower -g
  • sudo npm install grunt -g
  • sudo gem install sass
  • sudo gem install --pre sass-css-importer

Install

  • cd _build && npm install

Build

  • modify _build/config.json if needed
  • cd _build && grunt build

+ angularRequireJsBoilerplate

JavaScript 96.9% - CSS 3.1%
Last update : 19/11/2014 - 11:57

Features

  • A nice angular requirejs boilerplate
  • Stack : requirejs, angular, scss, bootstrap, fontawesome
  • Build : install, build, watch, grunt, bower

Install

  • Install NodeJS : http://nodejs.org/download
  • sudo npm install bower -g
  • sudo npm install grunt -g
  • sudo gem install sass
  • sudo gem install --pre sass-css-importer

Build

  • modify _build/config.json if needed
  • cd _build
  • npm install && grunt build

Notes

RequireJS

  • Debug mode :
    • Launch ndex-debug.html instead
    • index-debug.html loads the non compiled version

Bower

  • Add a requirejs module from bower :
    • cd _build && bower install the_module --save
    • Then, add path to _dev/js/libs/vendor/the_module/path/to/jsFile in _dev/main.js in path section and include module name in the requirejs call
  • Add a css from bower :
    • cd _build && bower install the_module --save
    • Then edit _dev/scss/main.scss and add @import "CSS:../js/libs/vendor/the_module/the_css_path/the_css_file_without_extension";
  • Add a public resource from bower :
    • cd _build && bower install the_module --save
    • Then edit build/config.json and update the copyFiles value so the files from the vendor path are copyied in the public assets folder

+ githubManagement

PHP 100%
Last update : 14/11/2014 - 10:19

Features

  • Github projects management and processing for entreprisess
  • Respond on created tags on master branch with processors
  • Processors : per project configuration of standard (clone, build, send, etc.) and custom processors to run against a tag hook
  • Relies on Github user roles and access system
  • Small API : create tags on master, respond to Github web hooks, etc.
  • Miscs : loging

Architecture

  • api : the public API
  • configs : global config and projects config files
  • clones : temporary repos clones (clones for building then copying to web)
  • envs-assets : projects env specific assets
  • libs : libs
  • locks: the locks folder
  • processors : the processors

Users management

  • Relies on Github user roles and access system
  • Users must have a valid Github account
  • To be able to clone and create tags (with the API or not), a user must be granted access to the repo on Github

Triggering

  • Tag name syntax : .*--deploy==ENV==TARGET
  • ENVs are defined in $PROCESSOR_AVAILABLE_ENVS in configs/config.php
  • If target is ommited, target = "default"
  • The tag must be created on the master branch
  • Wheter the tag is created from the API or from a local repo (and then pushed), the processing will be triggered
  • For the tag to trigger processor, a webhook must be set on the repo. Our small API can take care of it. cf Route 'Init processing'

Processors

  • The available processors are located in processors
  • Processors docs can be found in the headers of the processors/* files
  • The main processor must be called first and calls the next processors configured in configs/owner/repo.json->processors
  • All processors extends Processor class (libs/processor.php)
  • All processors must implement the run method
  • All available properties are the public properties of the Processor class

API

Overview

  • The API is used to respond to the Github webhook
  • It can be used as well to init the webhook config or create tags (without clone the project !)
  • Most API calls require a Github user access token : https://github.com/settings/applications#personal-access-tokens
  • GITHUB_MASTER_TOKEN user must have access to all repos

Routes

  • List repos :
    • GET /repos
    • List all managed repos
  • Create a tag :
    • POST /repos/:owner/:repo/tag :
    • Post params : tag-revision, tag-name, tag-message
    • Get param : github-token (the github token of the user)
    • Example : cf tests/api-tests.php
  • Init repo :
    • POST /repos/:repo/init
    • Post params : none
    • Get param : github-token (the github token of the user) (the user must be part of $MASTER_USERS)
    • Create a repo and init hook
    • Example : cf tests/api-tests.php
  • Init hook :
    • POST /repos/:owner/:repo/hook/init
    • Post params : none
    • Get param : github-token (the github token of the user) (use GITHUB_MASTER_TOKEN if called from PHP for administration purpose)
    • Example : cf tests/api-tests.php
  • Github hook :
    • POST /repos/:owner/:repo/hook/:token
    • Called by github on tag create

Tests

  • API tests : http://public.url.to.the.api.folder.com/tests/api-tests.php
  • Processors tests : php tests/processors-test.php
  • In production mode, use a htaccess or remove this folder
  • Debug tip : tail -f processing-owner-repo.log and tail -f api.log
  • Debut tip 2 : some exec error will go in the apache log : tail -f /var/log/apache2/error_log

Install requirements

  • curl -sS https://getcomposer.org/installer | php
  • mv composer.phar /usr/local/bin/composer
  • Apache, mod_rewrite
  • PHP 5.3
  • Unix system (some processors use cp, rsync, ssh, etc.)

Install

  • composer install
  • mv configs/config.php.sample configs/config.php
  • edit the configs/config.php file :
    • change API_PRIVATE_KEY to a random string
    • set APACHE_HOME to an existing folder and make sure Apache can write in it (or sudo mkdir /ghm-tmp && sudo chmod -R 777 /ghm-tmp (the APACHE_HOME folder, defined in configs/config.php)
    • set ENV_PATH so it contains all binaries that might be called from processors (rsync, scp, git), or build files (npm, grunt, etc.)
    • API_URL is where your api is publicly http available
    • set DEBUG to false in production mode
  • Test : http://public.url.to.the.api.folder.com

Git workflow

  • This management method is agnostic of pull requests and branches
  • It just helps deploying the master branch when you want (see Triggering

Docs

TODO

  • Not yet compatible with Github Entreprise (maybe some API differences)
  • better capture exec ouput un tools->run()
  • Could do ENV detection based on what branch the tag has been created (master -> prod, dev -> dev)
  • log cleanup

+ photoshopTools

Last update : 19/10/2014 - 14:36

Motivations

List of more or less usefull tests for Photoshop.

Web and app oriented.

Grids and guides

  • Guideguide : Guides generator, loads of configuration (breakpoints, columns, padding, gutters), exports as png and scss, Photoshop 5+
  • Spectrr : Annotation tool (text, spacing, sizes), Photoshop 6+
  • Gridpak : Guides (as image) generator, easy configuration (breakpoints, columns and padding), exports as png and scss, Photoshop 5+

Cuting

  • Cut and Slice Me : Exports groups and layers automaticaly (trimed transparent pngs), clever method : add "@" at the end of the name of group you want exported, Photoshop 6+

Prototyping

  • Invision : Very easy, cloud, Photoshop auto slicing and sycing, comments
  • FramerJS : Convenient framework (animation helpers, states machine, coffee or js), Photoshop auto cutting
  • Reflow : Adobe tool, connects to Photoshop, simple prototyping features (multiple page), responsive aware, review in browser, Photoshop CC+

Layouts

  • Web Zap : Layout builder, text layout builder (multiple font swap), UI builder, Photoshop 6+
  • Velositey : Layout builder, guides nice features, favicon generator

Exports

Miscs