Category: Tools

Categories
Gulp Tools

On Gulp

– Starting up:

$ npm install –global gulp

$ npm install –save gulp

– Create a gulpfile.js on your root directory, sample content:

var gulp = require(‘gulp’);

gulp.task(‘welcome’, function () {

  console.log(‘gulp is working!’);

});

– run your gulp functions / commands:

$ gulp welcome

note: some linux installations refer to nodejs as “node” internally. If you get the following error message when running your gulp commands:

/usr/bin/env: node: No such file or directory

that means you need to create a soft link to alias node to nodejs:

$ ln -s /usr/bin/nodejs /usr/bin/node

– install the pluging that will let you concat your js files together in one big file:

$ npm install –save gulp-concat

– install the plugin that will compact and uglify your js (needs to go along with the other one, to make uglification compatible with angular)

$ npm install –save gulp-uglify

$ npm install –save gulp-ng-annotate

– here is an example that will concat and uglify into an app.js file, and put it into your assets directory, loading file ng/module.js first in the resulting file:

var gulp = require(‘gulp’);

var concat = require(‘gulp-concat’);

var uglify = require(‘gulp-uglify’);

var ngAnnotate = require(‘gulp-ng-annotate’);

gulp.task(‘js’, function () {

  gulp.src([‘ng/module.js’, ‘ng/**/*.js’])

    .pipe(concat(‘app.js’))

    .pipe(ngAnnotate())

    .pipe(uglify())

    .pipe(gulp.dest(‘assets’));

});

 

Categories
IOS iphone phonegap testing Tools

Weinre: troubleshoot mobile and remote apps

1) Install it if you haven’t yet:

$npm install weinre -g

2) run it:

$ weinre -boundHost [your ip address here or localhost]

3) Put the following reference in the page you are trying to troubleshoot:

<script src=”http//[the ip address you entered]:8080/target/target-script.js#anonymous”></script>

4) Point your browser to the ip address you entered, that will give you the firebug kind of debugger:

http://[localhost or ip address]:8080/

 

 

Categories
Tools

Web Developer Tools: MAMP

The error log is at:

/Applications/MAMP/logs/php_error.log

To avoid SQL using the wrong time, add –default-time-zone=’+00:00′ to the following file:

/Applications/MAMP/bin/startMysql.sh

To log all the queries that hit the database:

Login all the queries that hit your mysql database:
if you are running MAMP, edit
/Applications/MAMP/bin/startMysql.sh
and put this in the command line

–log=/Applications/MAMP/logs/mysql_query_log

Categories
Tools

Useful websites / apps and tools for troubleshooting and other stuff I keep forgetting about

weinre: amazing ipad debugging tool, firebug style.
Adobe has gotten into this business as well: http://labs.adobe.com/technologies/shadow/
Also, I haven’t tried this one, but it may be a good alternative: http://jsconsole.com/

http://www.whatismybrowser.com/ Quick and dirty what browser / operative system you are using. Useful for customers to tell you exactly what browser they are using.

Tower: git UI in case your IDE lacks of it, or you don’t have an IDE. http://www.git-tower.com/

MAMP: Apache / PHP / MYSQL all in one, installation is a snap http://www.mamp.info/en/index.html

NAVCAT lite: you need a mysql modeler / admin interface, very useful: http://navicat.com/

MailServe: you need a simple mail server, almost zero config, to run on your mac http://cutedgesystems.com/software/MailServe/

IETester: quick and dirty all versions of IE tester.

Firefox must haves:
Firesizer — emulate viewports to test responsive design in small screens
HTTPfox — like fiddler, http sniffer

Colorzila — Not only for the color picker, but for the tool to create Gradients, it is great!

HTML5 find out what browsers support what features: http://caniuse.com/ , http://mobilehtml5.org/ and http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

Mobile browsers emulators (you can also use Chrome developer tools / Console / emulator to emulate the most popular browser platforms.)

http://www.mobilexweb.com/emulators

http://www.responsinator.com/

Web mobile validator:

http://validator.w3.org/mobile/

 

Browser statistics: http://gs.statcounter.com/

HTML entities: http://www.danshort.com/HTMLentities/

CSS lint: http://csslint.net/

Ruby On Rails in Windows: when all fails and you can’t install it properly (specially in Windows 8), you can use the bitnami installer: http://bitnami.com/stack/ruby . There is actually another one from http://railsinstaller.org/ in case that other one doesn’t work

Rename files as a batch (utility):
http://development.christopherdrum.com/software/filewrangler/

Fast site boostrap:

http://www.initializr.com/

ecommerce via wordpress:

http://www.woothemes.com/woocommerce/

ember.js online console:

Fast and dirty way to do a post via the command line:

curl -d “username=yo&message=anothertest” http://yourserver.com/yourpage

Generate virtual users:

http://randomuser.me/

Dealing with javascript dates: moment.js is awesome, specially with dates arithmetics

A bundle of cheat sheets: http://overapi.com/

SEO: if you need to implement it, must see this one:

http://schema.org/docs/schemas.html

Outsource the backend:

https://www.firebase.com/

Code review help:

http://www.airpair.com/

Fast image placeholders:

http://placehold.it/

If you are in a mac, fast and simple apache-like server via Python to test web things in localhost:8080

$ python -m SimpleHTTPServer 8080

or you can also install a simple server via npm:

$ sudo npm install -g http-server

$ http-server

Guide to come up with a good json format:

http://jsonapi.org/format/

Internet marketing tools:

http://growthtools.io/