Testing on devices locally using mamp

October 25th, 2013 No Comments

Here is a little tip I just picked up. You can test your responsive builds on actual devices using MAMP. This is new to me, and hopefully new to you!

To get this going all you need to do is install MAMP and start it up, I will not go into installing MAMP, because pretty much you just click a few things and you are up and running. My set up is just the regular MAMP, no need to go pro. From the Preferences menu select the Apache tab and point the document root towards your project.

Normally you would now just open a browser and go to localhost:8888 and be up and running with your project. But in order to get to this site from your device there is one extra step. You will need to find your IP address, on a Mac just go to the networks panel in the OS System Pretences and it should be just under the status of your connection on the first screen. With that information in hand all you have do is navigate to 192.168.0.196:8888 (where the ip matches your own) on your devices and that is it! You should be up and running.

Code

Pulldown vs Bower, which is for you.

August 27th, 2013 No Comments

Recently Jack Franklin of JavaScript Playground and Tom Ashworth created Pulldown and it is pretty sweet. Now there is no better information on Pulldown vs Bower than the information in the projects README.md, I just wanted to quickly look at how you might start using one of the two today.

Both Bower and Pulldown are package managers. Meaning they allow you a quicker faster way of grabbing any dependencies you might need for a project. Rather then going to the jquery site and getting the source then coping and pasting it into a blank document and saving it from there. These two tools allow you to run simple commands and POOF, you have what you need.
Read more…

Code

Staying up to date with the web

August 22nd, 2013 No Comments

It can be hard to stay up to date with what is going on on the web. If you are new to the web industry it can be a bit daunting trying to stay up to date when new technologies appear. I thought I might share a few of the outlets I use to keep up to date:

Podcasts

Shoptalk:
This is a great podcast hosted by Chris Coyier and Dave Rupert, it is really a question and answer show. The questions from people focus on stuff like “How do I become a web developer?”(the answer is just build websites by the way) to ways you might keep a local database in sync with a live database. They also record live, so if you can catch it, you can participate in the chat room as they are speaking with their guest.

Upfront podcast:
This is a newer podcast and it only runs about ~30-40 minutes. It is run by Jack Franklin and Ben Howdle. They focus mostly on front-end tooling and best practices, you can expect to hear about newer projects and technologies that are out there.

JavaScript Jabber:
This one is run by a bunch of people. It is pretty much exclusively focused just on javascript, talking about testing, various patterns and libraries. The panels are usually pretty large, so you do get a lot of different opinions, which can be nice.

The Creative Coding Podcast:
The creative Coding Podcast is all about…well creative coding. Hosted by Seb Lee-Delisle and Iain Lobb, they have not aired a new podcast in a while, but if you have a listen through the archive they are fun to listen to, and might inspire you to play around a bit more!

Happy Monday:
This is a pdocast that is more about how people work, hosted but Sarah Parmenter and Josh Long. The episodes are short and sweet, but talk to people about their motivations and experiences.

Bizcraft:
Bizcraft is all about the business of running a company. Hosted by Carl Smith and Gene Crawford it is some insight into how decision are made, or how they might deal with clients. It can be a really fun educational listen!

News Letters

JavaScript Weekly & HTML5 Weekly:
These are very similar in their content, but they are nice little weekly looks at what has been happening around the web. The latest breaking stories on browser specs or new best practices. They also post links to videos from recent conferences or talks, which is probably one of my favourite portions of the newsletters.

Sidebar:
Sidebar is small list of the best design links from the previous day. It covers web design and development, iOS design, UI and UX patterns and much more. It is a nice quick view, since not everything will be what you are interested in!

Talk

Let’s Build a Game! Part 3

July 30th, 2013 No Comments

Space shooter game screen
Here we go, Part 3, the “Return of the Jedi” for our game. If you have been following along you should be able to just pick it up. If not, check out Part 1 and Part 2. In this final part we will add a few finishing touches. Lets start with something in the background, and an enemy. It will be a simple finish, but it should allow you to expand from there!

Lets start with the background, we will keep it simple and draw some stars in the background. The idea is to randomly draw 50 2×2 pixel particles for our stars. Create a simple function that has a loop in it that will add a new object to a Game.stars array.

Game.stars = [];

Game.createStars = function() {
	var x,y,a;
	for(var i = 0; i < 50; i++){
		x = Math.floor(Math.random() * Game.W);
		y = Math.floor(Math.random() * Game.H);                  
		a = Math.random();	
		Game.stars.push({x:x,y:y,a:a});
	}
};

Let’s Build a Game! Part 2

July 11th, 2013 1 Comment

Alright so in the last part we got a ship to the screen and that is about it, nothing really exciting. Let’s change that! Let’s get our player moving, and get him shooting!
First lets update our player object to account for a few more variables.

Game.player = {
	x: 0,
	y: 0,
	w: 64,
	h: 64,
	speed: 10,
	left: false,
	right: false,
	up: false,
	down: false,
    ...
}