Google Chrome (Canary) Emulation

 

I am a massive Google Chrome users, so much so that I have two versions installed on my work machine. I have the stable Google Chrome that everyone should be using, and I also used Chrome Canary, which is the bleeding edge of the web, or so they say.

By default I do all my development in Canary, this is to keep my history, Cookies, and everything else separate from my main browser, which is right stable Chrome.

If like me you deal with responsive (device aware) web sites/applications you will be aware of the challenges of testing and viewing your sites in all the different browsers and devices, while you can never beat looking at your creations on these real devices, I for one love speed and the ability to do it all from my desktop while in the depths of development and prototyping. This is where Chrome Canary comes in, I know I have wrote about this sort of thing before (Mobile device detection in Google Chrome), it turns out the Chrome team have updated this device emulation parts of Chrome Dev tools, there is a new Mobile icon next to the magnifying glass when you have Dev tools open, click on this icon and you will be greeted with the new Emulation features that contain a whole bunch of cool things like:

  • Better UI for seeing the breakpoints and size screen
  • Added more predefined Devices
  • Bar graph at top for quickly jumping between media queries
  • Ability to set your Network Speed (throttling)

The best thing of the new UI and layout and features that I have found useful so far is the Network drop down to be able to see how you site performs on different network speeds, again while it’s not as good as testing it for real on a device, it certainly helps with development and being able to see the Network tab and the timeline when looking at how your site is performing over different internet speeds.

The onDemand generation

When I was growing up we only have 5 TV channels, and that fifth channel was quite new too, for my early years we had four channels at our home. Back then that seemed great, even better when we got the new channel 5. Getting home from school and having a cup of tea and numerous biscuits we would sit in front of the television watching the children’s programs, and every 15 or so minutes the advert breaks would appear, for a few minutes.

As I grew up I learnt that a black and white square box would appear in the top right to highlight an ad break was coming very soon. Back then we thought nothing of ad breaks, all part and parcel of watching television, even better as you could nip for a toilet or make another cup of tea.

Spring forward 20′ish years and now I have a son, who does a few similar things to what I used to growing up.

He watch’s TV after coming home from school once his homework is done, or the weather is bad, in the mornings, quite a lot, but not too much. But… He never gets an advert break!

Why is this? Because he never actually watch’s normal TV, he is either consuming Netflix, BTVision, NowTV, or stuff we have downloaded. One might not find this bad, but the interesting thing is that the other week there was a children’s movie on Sunday afternoon television, one he really likes, so I decided we would watch that.We started watching just as it had began, 15 to 20 minutes in the first advert break came, the surprise of my son who did not know what was happening, as he had watched this movie many times before and knew that something else was to appear not some random TV.

When the advert break appear he was not best pleased. Trying to explain advert breaks to a five year old who has never experienced them before is very difficult. Since then we have tried to introduce more normal TV where possible, and still he struggles with the advert breaks.

One other thing I have noticed with my son is, he is very aware of the ability to Pause, Stop, rewind or forward parts of a TV program, and the more normal TV we have introduced to him he thinks he has the same control, while we have BTVision he is able to do it, but when visiting family it can get a bit tricky.

My Sublime Text

my_sublime_text

Over the past few weeks I’ve added a few more packages to my Sublime Text work flow, it’s been a good while since I last added a package. I had got myself into a nice flow and was happy. But then I saw someone mention something about Sublime Text and I decide it was time to see if there where any new packages that might help with my work flow or speed up my development.

I’ve been using Sublime Text 2 for over two years now, and love it to bits, I have tried other editors and can not bring myself to move away, or spend the time to learn something new. I believe that the more time I spend within Sublime learning it’s little short cuts the better I’ll be, and then every now and then I’ll spend a bit of time seeing if there is anything else I should learn, or any other packages I should install. I don’t believe you can become an expert with your editor very quickly, but over time you will begin to gel with it and learn more about it, the trick for me is to every now and then spend some time learning something new with it.

As you may now if you are a sublime user, it’s a good editor straight out the box, but you really need the package manager for it to become it’s own, and for you to make it your own. It’s the first thing you should do after installing Sublime, even if its just for one or two packages.

I will not go into the basics of setting up Sublime and it’s settings, but I am going to talk about the settings I have, the packages I use, etc.

User Preferences

Listed below is a copy of my User Preferences ( Menu > Preferences > Settings – User )

{
  "auto_complete": false,
  "binary_file_patterns":
  [
      "*.jpg",
      "*.jpeg",
      "*.png",
      "*.gif",
      "*.ttf",
      "*.tga",
      "*.dds",
      "*.ico",
      "*.eot",
      "*.pdf",
      "*.swf",
      "*.jar",
      "*.zip"
  ],
  "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
  "detect_indentation": false,
  "ensure_newline_at_eof_on_save": true,
  "folder_exclude_patterns":
  [
      ".git",
      "node_modules",
      ".sass-cache"
  ],
  "font_size": 8,
  "highlight_modified_tabs": true,
  "ignored_packages":
  [
      "Vintage"
  ],
  "line_padding_bottom": 1,
  "line_padding_top": 1,
  "overlay_scroll_bars": "disabled",
  "preview_on_click": false,
  "tab_size": 2,
  "trim_trailing_white_space_on_save": true,
  "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
  "word_wrap": true
}

You may notice that I like my font_size small, I hate word wrap, and hate trailing white space, and yes I use tabs, but only indent by 2.

Packages

I use the package manager and have a bunch of packages installed to help with my development.

12 Packages to help with my daily development. A few of them are for syntax highlighting, so not sure if they count, but without out them it would be difficult.

The first two, ColdFusion and Enhanced HTML and CFML along with Sass are for syntax highlighting along with auto completion.

Grunt is quite a new package to me, and it’s one I wish I had found earlier, it means one less terminal window open for me and I can access all my grunt commands without leaving Sublime, and by using the keyboard. You can run any of your grunt commands, including the watch commands, and you can also kill running grunt tasks.

HTTP Requester is a package I sometimes forget I have installed. It’s a great little package for making HTTP Requests from within Sublime, take a few minutes to look at the documentation, it’s not just for basic HTTP Requests.

SideBarEnhancements is the first package I tell anyone who installs Sublime Text 2 to go get, in my eyes it contains everything that Sublime should do out of the box, it provides some basic right click menu action for the left sidebar of Sublime text, for example: New Folder/File.

SVN, is exactly what you might think. Subversion control from within Sublime, while I don’t use this greatly as I get a little nervous when committing file(s) without using a GUI to check my changes, it can come it very handy when I need to do an update or check the status of things. I use a Windows machine to develop on and getting SVN set up via the command line, and then through Sublime took me all evening one day, I should of documented it but never, but I might try and find the settings and things I did and document them. So bear in mind you might be in for a little bit of configuration and banging your head against the wall getting this package to work.

VCS Gutter, this again is a fairly new package for me. This package is a great enhancement to the Sublime interface. The basics of the package is it will provide your visual indicators in the gutter of an open file of it’s local state against the repository’s state. It requires SVN to be on your path and a diff tool to be available on your path, for me I have it set to do the diff check on save of the file.

Switching to Android

Its been a week since I walked into a Phones4u shop as a avid Apple fan, and massive iPhone fan/user. An hour later I walked out a changed man, carrying a Android based phone, the Motorola X, running Android KitKat.

A year ago I received a Nexus 7 as a Christmas Gift and was very impressed in how far Google had brought Android along, and given the amount of time I was using my Nexus 7 I was getting more and more drawn to the Android OS.

For the past couple of months I have been thinking about my options for my next phone, knowing I was due an upgrade I started to think could I ditch the iPhone ecosystem and move over to the “other side”? The more I thought about it the more I realised that it could be a viable option. A lot of the apps I use on a regular basis are either by Google, or not by Apple. I took a look at my iPhone and started going through all the apps I had installed and which ones I used the most, Gmail, Google Maps, Hangouts, Twitter, Foursquare, Instagram, Phone, Messaging (iMessage), and a good few installed from the App Store.

Turns out that I am not using a majority of the default Apple apps when using my phone, and I do use my phone an awful lot. So it begin to seem like I could make the switch easy enough, the only BIG draw back I had, was that all of my family are using iPhones and they all use iMessage, and we even have a lot of group chat as a family. This alone was not help my decision to switch as I would loose a good communication channel between my family, who between the five of us are split across three countries, and regular travel.

So, after walking out of the phone shop with an Android based phone in my pocket, I was still not 100% convinced I had made the right choice. It’s been just over 7 days since then and I am 100% convinced that it was the correct choice for me. Yes I am going to miss the group chat with my family, but all the other stuff I do on my phone out ways this one con.

After spending the first couple of days playing around with the new phone, and looking at all the difference features, installing my regular apps and just getting used to having Android on my phone I have fallen in love with my phone again.
You may of seen my post about “A Fresh iPhone” where I talk about feeling like the Apple iOS going stale. I have been on iOS7 since it’s official release, and it was still lacking something, and this move to Android has been a breathe of fresh air.

The move to Android was helped by a year of using a Nexus 7, so one could say I actually was always comparing the two for the past 12 months, which technically I was in the back of my mind, and I think having that ability has been amazing, and actually help me make the call to ditch an iPhone for an Android phone.

Code Conventions

Recently I put together a set of markdown files for the few different web languages I write a lot of code in, these being HTML, CSS (Sass), JavaScript/jQuery, and CFML. I have these located on my GitHub page under a repository named Conventions

I put together the set of conventions for a few different reason. I thought someone might be able to get something from it, or for when I release open source code/ library’s I can point people to them, the final reason being I can show people the method to my madness if they every cross my code paths.

While the conventions documents are not 100% full proof I will be continuing to add and tweak little items as I can continue to write more code and find my rhythm.
A lot of what is already documented is straight from how I write my code at the moment, if I see a pattern in the way I write certain parts of code I document it as a convention, simple as that. I don’t go out of my way to write a convention to change the way I code, I write the conventions on the way I am coding.

I feel conventions should not be something you force, obviously this can break down within a team environment, but that’s a whole different story. While the conventions I have documented do contain some ways of writing faster/better code, a lot of what I have documented is personal preference and more style based.

A simple example of one of my conventions, spacing around if statements:

if ( x ) {

Instead of

if(x)

When I grow up I want to be…

Whilst out for a Sunday walk with my son, he comes out with: When I grow up I want to be a teacher. Now he is only 5 and I imagine he will change his mind within the next 20 years… heck he will probably change his mind this year, or even within the month.

After he mentioned this to me, I tried to remember my earliest memory of what I wanted to be when I grew up. While I can not remember the earliest, I do remember a few of the jobs I considered.

First I wanted to be a mechanic, just like my dad. Then I wanted to be a professional rugby player because I played for a local team and then a professional cyclist as I was actually pretty good in my teenage years. It was around this time I got involved with the internet and making websites and also took an interest in photography too.

Turns out that I was correct for two of them, having worked for three years as a rally technician. I have been making websites for over ten years and employed as a web developer for the last three and a half years.

I am looking forward to seeing how my little boy grows up and how he change his mind. I am really looking forward to seeing what he we will be when he grows up. I hope I have some influence upon his decision but I want him to decided for himself and I will 100% support his choice.

Following my gut with Hill Valleu

If you have read my previous entry or perhaps follow me on Twitter, you may know that I am currently working on a web app, Hill Valleu. Yes, the last update was a few months ago, but a lot has changed since then.

When I published that post, I was using a working copy of Hill Valleu in a beta stage. Within a week of launching it I had some friends and colleagues using the app. Feedback was good and the users seemed to like it. I knew a few items were missing and the limited users who were in all confirmed this by suggesting a few of the same enhancements. So, I got to work on these and within a couple of days I had a few new features launched to the small user base.

Everything seemed to be going great. A few app users, no major issues…so I planned to give it a couple of weeks before getting more users into the system and then a few more weeks before launching it for real. But over this period of time I noticed that my own usage of the app had dropped. This was not a good sign, when an app I was supposed to be building for myself was was not even being used by me…and it turned out the beta users had pretty much all stopped using it.

Why?

Now that’s a good question. I am not sure why others stopped using. A few said they were using other services, which is fair enough. I am trying to break into a crowded market – hard going if you do the basics, but miss a lot of features of the bigger apps.

The main question I needed to answer was why did I stop using a service I built to fill a need for myself?

After sitting down and working out the issue, I discovered the problem was I had stopped building the app for myself and started building it based on what others said they wanted. To get my heart back into the project, I made a big decision to go back to the root of why I started out on this path to begin with. To fill my need, and build something I would use everyday.

I deleted all the content and beta user data and started afresh. My next plan was to get back to where I wanted to be to start with. I ripped out a load of code, reworked the design and features to drastically reduce the complexity I had built in.

Within the week I had a skelton app but up online and I have been using it everyday since, slowly tweaking little bits here and there, adding couple new little enhancments, and have a list of the basic feature set I want in the app before I let anyone else in to the system.

To see the current state and to get a preview of the all new reworked Hill Valleu, go over to the website – and if you like what you see and would like to hear when I launch the app drop your email in the box at the bottom of the page.

Authorization header with Ajax requests in local development using Google Chrome

This past week at work we’ve been working with an API to fetch data for a mobile application using PhoneGap that needs to send an authorization header for each request, and if you have ever tried to play with an API that requires you to send an Authorization header chances are you have not being able to from a web application. If you have been able to send such a header this means the API you are using has enabled CORS support.

As you may or may not know, using PhoneGap you are able to build your application using web technologies (HTML,CSS and JavaScript), and then PhoneGap packages it up in a native like app.

So as you are building the application using web technologies this gives you the ability to develop the application just like you would develop a website. You can use your web browser to quickly browse/ test as you are working, this saving time having to build the app to the device or run the emulator each time.

As mentioned earlier with local development you may not be able to access the API if you need send certain headers with each request.

This is where Chrome Apps come you rescue. Due to the nature of Chrome and it not allowing local requests to send the required headers, you can use a Chrome App to do so, I am not 100% sure on why this is the case but it’s a great little feature.

So first off you need to set up a couple of files in your working folder, so say you have the following folder structure for your app

  • index.html
  • js
    • app.js
  • css
    • app.css

That’s just a basic outline, what we need is to add to files to the same level as your index.html file. These being manifest.json and background.js, these are the files Chrome needs for an App. For what to put in the files see below. You can copy paste these if you so wish.

One thing to note. See the Permissions array inside the manifest.json this the URL to the website you are making API calls to that require the Authorization headers. In this example I am using a local IP address, as we are actually working with a copy of the web application. You can change this to the URL of the API.

manifest.json

{
 "name": "Local Dev",
  "version": "0.1.0",
  "manifest_version": 2,
  "description": "Local API Stuff",
  "permissions": [
    "http://10.0.0.1/"
  ],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    'bounds': {
      'width': 700,
      'height': 600
    }
  });
});

Now you have these two files inside of your working directory, you now need to load this directory as an unpacked extension. In Chrome go to Extension, which is located in theMenu > Tools > Extensions. Make sure you are in developer mode (make sure the Developer Mode checkbox is ticked). This will give you some buttons. You want to click on the the Load unpacked extension button. Find the folder from earlier where we put the two files manifest.json and background.js, and click OK. This will give you an extension named Local Dev (if you did not rename the name from the manifest above).

Now we have the working folder loaded as a Google Extension. Open a new tab, and click Apps in top left of the new tab, on the bookmarks bar, or you can navigate to it using the following address chrome://apps/. You will see your application listed there, it’s the one without an image.

If you click on it you will get a popup window (700x600px – You can change this in your background.js file) containing your application.

Now you can work on you application like normal, and you can also use Chrome Dev Tools from this window. Use Inspect Element from the right click menu not Inspect background page

One thing to note, when ever making changes to your code and you need to refresh the app, right click in the pop up and choose Reload app.

Welcome Hill Valleu

hill_valleu_rss_reader

Welcome, hillvall.eu – A simple RSS reader, nothing more, nothing less.

Back in April, when Google announced they where shutting down Goole Reader, I wrote a blog post on my thoughts and how it would affect me as I was a big user of Google Reader. Being a developer I am in a position to be able to create my own solution, and that is exactly what I have been doing. I did have a working version I was using before Google shut down their service, and I mentioned this to a few people, and they showed interest.

At the beginning I was writing the system for myself, the first version I had and had started to use was very limited, no user accounts, feed management or folders. Scroll forward a few months and after the interest I decided I would rewrite the app to work with multiple users with the intention of getting it online so others can use. I’ve never set a deadline for when I wanted to get an early alpha/beta out, and the past few weeks I’ve been working very hard on it to try and get it to a alpha release. For a few weeks I felt it going a bit stale and I starting to question all the time and effort I had been putting in, but I’ve got over that stage and progress is moving along very well, and I am hoping within the week I’ll have actual users apart from myself within the app.

So, if you are interested in getting on the list for early access then head over to hillvall.eu and pop your email in the form. If you would like to keep up to date on news, and details of hillvall.eu, hen I have set up a blog for the app at blog.hillvall.eu

Start of School

On Monday by little baby boy starts his first day of proper school (P1 as we live in Scotland), it’s so hard to believe he is nearing five years old and in three weeks time he will be in School for six hours a day. (They give them three weeks to break into the routine of proper school).

I am finding it quite hard to believe it’s happening, I look at him and remember all the little memories so far, from the day he was born up until the current day, and I find it hard that nearly five years has passed as it does not feel like it was that long ago that we welcomed him into the world.

Just last weekend me and my wife were in the kitchen putting his name in all his different school items, it felt really wired to be doing it but also amazing to be doing it as my little boy is growing up. The best part is he is very excited for school, while me and my wife are very nervous. I just hope he has a great time and fits in with all the other kids, and does not get picked on.