Desktop Keyboard Input for Android Chrome via Chrome Developer Tools(OSX)

As a web developer or a QA Tester there will come a time when you need to run a web form on mobile multiple times. This becomes quite laborious as mobile keyboards are not the most efficient bits of software.

Below i’ll show you the steps to use your desktop keyboard via Chrome Developer Tools on your mobile/tablet while also having full developer access to the webpage on the Android device.

Requirements:

  • A usb cable
  • Chrome 32 or later
  • An android device with Android 4.0+

Note: A small note. Remote debugging requires your desktop Version of Chrome to be a newer version Android Chrome. To resolve this just ensure you run Chrome Canary.

Step 1. Enable remote debugging on your Android Device.

On your Android phone goto: Settings > Developer Options and Tap the “Build Number” Seven times. Then check the “USB debugging” option in the menu (Developer Options).
(An in depth guide from Google)

Step 2. Connect your Android Device to your computer via USB cable.

Step 3. Open “Inspect devices” in Chrome Canary.

Screenshot 2015-01-13 10.13.34

Step 3. Open Chrome on your Android device

A notification will appear on your Android device asking to “Allow USB debugging?” Tap OK. If this is your Developer machine check “Always allow from this computer”

Step 4. Inspect a website.

In the below image you will see that I am opening a web page on the android device without needing to use the Android Keyboard.

You can simply enter your ultra long developer url in here. Some developer urls are by no means nice urls so this is a extremely handy feature.

After that Click “Inspect”

8aadcbf6d12f196c98d99f5e1b7b1a26

Tip: If you have a single server that you hit quite a bit maybe you should place a NFC tag on your screen so you can open the url on any number of NFC enabled android devices.

Step 5. hit the Screencast Icon.

Once in Developer tools, click the screencast Icon. This will mirror the Android website to your desktop. Kinda like Remote Desktop. The transparent sections are the Android user interface.

You will now be able to fill in forms with your desktop keyboard hopefully saving you many hours in development.

914fc6abb8e7c97d59b19bbfbfb6e693

The Back, Forward and Refresh icons are now available on your desktop as well as a url box. This will hopefully allow you to perform hands free mobile development.

This will also allow you to test situations where the devices keyboard will cover half your web page, something that cannot be emulated right now with desktop chrome.

Screenshot 2015-01-13 10.10.22

 

Tip: Instead of selling your old phones or giving them away, create your own personal device testing station. You can build your own or buy one. I use the Vanamco Device Lab which is pretty neat. I bought an 8 port USB dongle and connect that to my computer.

I also have a few NFC tags for websites I am currently developing.

Screenshot 2015-01-13 14.18.33

Wintersmith.io – Static site generator built with node.js.

Screenshot 2014-12-22 20.20.39

Static site generators seem to be all the rage at the moment. Wintersmith.io is built on top of node.js. It’s flexible too. Allowing various templating engines like jade, liquid, handlebars and many others.

It uses markdown for its content. It also allows you to bundle JavaScript with Browserify and compile CSS with any popular CSS pre compiler.

Quick-start

First install wintersmith using npm:

$ npm install wintersmith -g

This will install wintersmith globally on your system so that you can access the wintersmithcommand from anywhere. Once that is complete run:

$ wintersmith new <path>

Where <path> is the location you want the site to be generated. This creates a skeleton site with a basic set of templates and some articles, while not strictly needed it’s a good starting point.

Now enter the directory and start the preview server:

$ cd <path>
$ wintersmith preview

At this point you are ready to start customizing your site. Point your browser tohttp://localhost:8080 and start editing templates and articles.

When done run:

$ wintersmith build

This generates your site and places it in the build/ directory – all ready to be copied to your web server!

Boom!!! 

Being Smart with Colours in CSS/SCSS/LESS

I saw a question on reddit the other day about how professionals use colors in CSS. Having built a website or two for some of the top global brands I decided to detail what i believe as a good standard for professional color systems in CSS.

Use SCSS… No really.

The days of using CSS are gone. SCSS and LESS offer so much more. The techniques I use will all relate to SCSS but these can easily be adopted with any CSS pre processor.

RGBa, HSLa or HEX?

Regardless of what color system you use in SCSS or LESS all solid color’s get converted to hexadecimal colors. Also all color systems that have an alpha/transparency will convert to RGBa.

I personally like HSLa because of it’s no nonsense approach to naming and properties: Hue, Saturation, Lightness, Alpha. If you need to lighten a color all you need to do is increase or lower the percentage. I highly recommend visiting http://mothereffinghsl.com/ 

If using HSLa or RGBa when you define a non transparent color like: rgba(50, 50, 50, 1.0) sass will convert this to a HEX value. Sweet.

If you need to support Internet Explorer or below sadly you can’t use RGBa or HSLa. But on the upside because SASS and LESS converts HSL to HEX you can in fact use HSL with IE6. Bonus!

One last thing. In a professional environment when working with global brands, you will almost always be handed a style guide which you will have to adhere to. In this case you pretty much use what ever color system they suggest.

Variables, VARIABLES!

One of the great things that CSS pre processors introduced was variables in CSS. Finally. With colors I like to define only the main colors outlined in the style guide.

A style guide would normally give you 5 to 10 different colors. Naming should be memorable so developers can code without stoppage. Here is an example of the main variables for a fictitious brand. These would sit in the varibles.scss file in your project.

$navy: rgb(17, 47, 65);
$teal: rgb(6, 133, 135);
$saltWater: rgb(79, 185, 159);
$mustard: rgb(242, 177, 52);
$tangerine: rgb(237, 85, 59);

colours

Note: Sass has a base set of pre-defined color variables. These can be seen here.

Now you have your base colors you will want variations of these transparent and solid. The best way is to use new variables that call the base color variables and apply one of the many SCSS functions:

red($color)
This returns the Red component of a colour as a number. there is also a green() and blue()
example: red(#efffef); returns 239.

mix($color1, $color2, [$weight])
If you want to mix two colours together this is the function to use.
example: mix(red, yellow, 50%) returns #FF7F00

lighten($color, $amount)
This will darken a color by a percentage.
example: darken(white, 50%) will return gray

darken($color, $amount)
Like lighten() this does the opposite and lightens the colour.
example: lighten(black, 10%) returns #1a1a1a

complement($color)
This will return the complement color. It’s actual function is: adjust-hue(color, 180deg)
example: complement(green) returns purple

adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
This will adjust a colour by property.
example: adjust-color(blue, $blue: -100, $alpha: -0.5) will return rgba(0, 0, 155, 0.5)

ie-hex-str($color)
This converts colors that can be understood by IE filters
example: ie-hex-str(green) will return #FF008000

There are many other functions that I have left out. They can be found here: http://sass-lang.com/documentation/Sass/Script/Functions.html

Example Brand Color Set

Below is what a color brand set would look like. With this setup if the company or yourself decide to change the main colors you only need to change the base colors and the rest will inherit from these variables. This really is a godsend for CSS.

// base colors
$navy: rgb(17, 47, 65);
$teal: rgb(6, 133, 135);
$saltWater: rgb(79, 185, 159);
$mustard: rgb(242, 177, 52);
$tangerine: rgb(237, 85, 59);

// darker base colors
$mustard-dark: darken($mustard, 15%);
$navy-dark: darken($navy, 15%);
$mustard-darker: darken($mustard, 20%);
$navy-darker: darken($navy, 20%);

// lighter base colors
$mustard-light: lighten($mustard, 25%);
$navy-light: darken($navy, 25%);
$mustard-lighter: lighten($mustard, 50%);
$navy-lighter: darken($navy, 50%);

// complementary colors
$navy-complementary: complement($navy);
$teal-complementary: complement($teal);
$saltWater-complementary: complement($saltWater);
$mustard-complementary: complement($mustard);
$tangerine-complementary: complement($tangerine);

Alternate colours are created with sass functions like Lighten or Darken to create shades and complementary colors sets.

When styling the site you can just use these color variables knowing that a color change is no hassle at all.

My suggestion be creative with your colours and embrace the functions that sass provides to change and manipulate the colors.

A basic CSS Grid layout with a few lines of SASS.

I’ve found rolling my own ‘Grids’ layout a much better option than using a framework. I’ve refined it down to this small bit of SCSS.


.row{
  @for $i from 1 through 12 {
    .grid-#{$i} {
      width: 100% / 12 * $i;
      float: left;
    }
  }
  clear: both
}

Then in your markup just define how many of the 12 grids you want the column to take up.

<div class="row">
    <div class="grid-6">Column A</div>
    <div class="grid-6">Column B</div>
</div>
<div class="row">
    <div class="grid-4">Column A</div>
    <div class="grid-4">Column B</div>
    <div class="grid-4">Column C</div>
</div>
<div class="row">
    <div class="grid-8">Column B</div>
    <div class="grid-4">Column C</div>
</div>

An example can be found here: http://jsfiddle.net/awKQ7/

Chrome 38 Introduces a Responsive Design View

Chrome 38 has introduced a responsive design view in Chrome Developer tools. It allows you to view the available breakpoints for the loaded site. Clicking each of the bars resizes the window to the specified breakpoint or selecting the device will resize the window to that devices resolution.

As well as User Agent spoofing It also introduces network throttling to produce near real device simulations for development.

Chrome version 38 is available in Chrome Canary build.

Capture

Basic introduction to Express JS

Express is a web application framework for Node js. I will show you how you can get up and running with express in 5 mins.

First we need nodejs to run the application. You can download this here: http://nodejs.org/

Next you will need to make a new directory where we will put our application.

$ mkdir boom

Go in there and create a package.json file where we will fill out the dependencies of this application. Take note at the express dependency. It’s best to get the latest version of express. You can find this out by going to https://npmjs.org/package/express

{
  "name": "boom",
  "description": "test app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "3.x"
  }
}

After you have created the package.json you will need to install the projects dependencies with the following command in either terminal or command prompt.

$ npm install

You will see there is now a file named node_modules. This is ok. If you are using version control, be sure to add this as an ignored file.

Now we need to make the application. Create the following file: server.js in your project root and open it in a code editor of your choice.

First we create the application with express();

var express = require('express');
var app = express();

Now we define our routes with app.COMMAND. These are like urls the end user will see. You can see the various commands here. We will use the app.GET command in our script. This has two objects that are passed into the function request and response.

app.get('/hello.txt', function(req, res){
	var body = 'Hello World';
	res.setHeader('Content-Type', 'text/plain');
	res.setHeader('Content-Length', body.length);
	res.end(body);
});

You can see here we are sending the response back to the client with res.end(). We are also setting the Content-Type and Content-Length.

(OPTIONAL) We will assign one more route to make this app slightly exciting. Here we are use a request variable and displaying it in the response.


app.get('/user/:username', function(req, res){
        var body = 'Hello ' + req.params.username;
        res.setHeader('Content-Type', 'text/plain');
        res.setHeader('Content-Length', body.length);
        res.end(body);
});

We then use the app.listen method and assign a port.

app.listen(3000);

Save that file and go back to your terminal or command prompt and start your server with the following:

$ node server.js

you can then navigate to the following http://localhost:3000/hello.txt and you will see your site running.

To see the second route we setup goto http://localhost:3000/user/yourname

MongoDB and jQuery in 10 Minutes.

MongoDB is an open source document-orientated database system. It’s part of the NoSQL family of database systems. MongoDB Stores structured data as a JSON-like documents. As a web developer this makes it soo much easier to work with the data with JavaScript.

So first up you will need to find a host that offers MongoDB hosting. There are a few out there. For this tutorial I will be using Mongolab. MongoLab offers a sandbox account with 500mb usage which is perfect for what you will be using it for. Also they have CORS enabled :)

Once you have signed up you will need to create a new database and choose a host. I will name mine Geolocation and host it on AWS, be sure to select the free sandbox account. Don’t add any user info for the moment. You should now see the below screen.

slide1

Click your ‘geolocation’ database to goto that databases dashboard. MongoDB groups it’s documents as collections. It calls these BSON documents. “BSON” is a portmanteau of the words “binary” and “JSON”. Think of BSON as a binary representation of JSON (JavaScript Object Notation) documents. Moving forward… Create a collection in your shiny new database. To do this click Add. Pretty simple. I named mine “boom” because lack of a better name.

slide2

Now click the “boom” collection to view its dashboard. We will need to get the api key from it. Once inside click the “Open Api view”. inside there you should see the Resource url. We need that. It should look like this with your api key:

https://api.mongolab.com/api/1/databases/geolocation/collections/boom?apiKey=zWAZavbCD5GCoXQbjao5HSrr7uwrWj

Open up your favorite code editor and we’ll create a simple layout with twitter bootstrap because it’s awesome for prototyping stuff like this.  I’m using a Bootstrap CDN because it’s just easier.

So below we have a Button that when pressed Get’s the Geoposition object from the W3C Geolocation API.

So now we have some data we want to store, let’s store this in our newly created Mongo Database.

Below we have a standard jQuery Ajax post. The url is set to your newly created database with your own Api key.The data being an object needs to be stringified prior to being posted.

Now when you run this on a server when clicking the button you will see the data being sent to mongolab in Chrome dev tools.

Note: you cannot run this locally

slide4

When you check your MongoLabs DB you will see your database full of awesome data. When you browse to your API url you will have a json object that you can now use.

slide3

Below is a complete code example:

SASS Helpers: Grey RGB Helper

I found it annoying when defining grey RGB values in SASS you would repeat the same value three times.

rgb(150, 150, 150);

This annoyed me so I created a SCSS function as a helper to optimize my workflow.

The function is pretty straightforward. It grabs the value and returns the RGB value:


// returns grey RGB colours
@function grgb($greyScale) {
    @return rgb($greyScale, $greyScale, $greyScale);
}

Add this to your mixins file. Now when you define a Grey color do so like below:


.someclass{
    color: grgb(150);
    border: solid grgb(50) 1px;
}

The compiled CSS looks like this:


.someclass{
    color: rgb(150, 150, 150);
    border: solid rgb(50, 50, 50) 1px;
}

Happy coding.