Code By
Lucas Mouilleron

An Open Source selection - 40 projects
Private repositories are not fully showcased for obvious reasons :)

+ slimBoilerplate

JavaScript 88.9% - PHP 8% - CSS 3% - ApacheConf 0.1%
Last update : 22/11/2015 - 18: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

+ requireJSBoilerplate

JavaScript 94.1% - CSS 3.4% - HTML 2.5%
Last update : 18/02/2015 - 14: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 - 17: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 - 08: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 - 21: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 - 10: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 - 09: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 - 12: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

+ emailBuilder

CSS 67.8% - JavaScript 32.2%
Last update : 19/10/2014 - 12:33

A grunt based email builder for designing, testing and publishing.

  • Multiple campaigns and email
  • Templates : Ink from Zurb, Mailchimp blueprints
  • Saas, handlebars, inlining
  • Mandrill, AWS S3

Installation

Run

  • cd _build
  • npm install
  • cp campaigns/config.json.sample campaigns/config.json
  • Type grunt and follow instructions

Tasks

  • grunt _build : Builds a campaign to campaign-dist/campaign_name
  • grunt watchit : Watches and builds a campaign
  • grunt prod : Prepare campaign for prod (CDNfys assets) (the campaign-dist/campaign_name html files are production ready)
  • grunt test : Sends a test email of a campaign (requires CDN)
  • grunt send : Sends an email of a campaign (requires CDN)

Campaigns

  • Archives and templates are located campaign-archives
  • Campaigns are located in campaigns
  • One campaign can contain more than one email
  • Configuration :
    • Global config is defined in campaigns/config.json
    • Per campaign config can be overrided : add a config.json file in the campaign folder

Emails

  • Emails are written with handlebars format
  • Assets basepath is ./ : <img src="logo.png" height="50" alt="Mailgun"> or <link href="main.css" media="all" rel="stylesheet" type="text/css"/>
  • Templates :
    • Ink framework from Zurb : classes and guidelines doc : in campaigns-archive/_zurb
    • Mailchimp responsive blueprints : sources : in campaigns-archive/_mailchimp
    • Mailgun transactional emails : sources : in campaigns-archive/_mailgun

Sending

  • Email sending is taking care by mandrill, which is great
  • Create a manrill account and an API key
  • Configuration : subject, sender, receivers and mandrillKey in config.json (global or local)

CDN

  • Uses AWS S3 as a CDN
  • Configuration : set awsKey, awsSecretAccessKey and awsBucket in config.json (global or local)
  • Create the bucket on S3 (the name you defined in awsBucket)

Litmus

  • Create a test project in Litmus
  • Change the receivers in config.json to the adress given by Litmus

Email design best practices (reminder, as the templates we provide are compliant)

  • Simple and clear subject (not in full caps, no !!!!!)
  • Main information withing the first 300px
  • Linear structure
  • Use a template boilerplate to avoid basic structure mistakes
  • No white text
  • Standard fonts (arial, times new roman)
  • No shapes or images in text background (only plain color)
  • No videos, no javascript
  • Center contents with <center>
  • Use alt attribute for images fallback (no special characters)
  • Inline CSS

Credits

+ testFramerJS

JavaScript 99.9% - CSS 0.1%
Last update : 24/09/2014 - 13:05
  • Made with FramerStudio
  • http://framerjs.com