There are a lot of new tools out there to help speed up and streamline your workflow as a developer, and to be honest they can seem a bit daunting to get into. Two new tools I have started using this year were Grunt and Sass. Grunt is a commandline JavaScript Task Runner, and Sass is a Css preprocessor that lets you write more powerful css, with the use of variables, mixins/functions and nesting! Lets take a look at getting started using Grunt to compile our Sass.
Read more…
Getting started with Grunt and Sass
Let’s Build a Game! Part 1
Canvas has been something I wanted to make games with for a while now. It can be tough to put the time into it when you are focusing on other things, but every now and then I get to sit down and play around. But I have learned a few things, so lets see if I can help you too as well!.
So to begin, you can find an example of the game here https://github.com/Rchristiani/Space. I will be creating a separate repo for the game, so that you can see the code as it is from part to part. The game we will be creating will be very simple. We will have a few key features:
1. Player movement from input
2. Getting the player firing bullets!
3. Getting the enemy to fire back.
So in the end we will have a simple game. You have your players ship, it can move up and down and left and right etc, you can fire bullets, and we will have an enemy that can fire back at us. Super simple but pretty satisfying to get set up. Lets dive in!
All game files can be found Here. So that you can follow along, or create your own!
Read more…
Em’s in Media Queries
The Scenario: You are building a site, the designer has set what looks like a base font size of 13px. So you go ahead and set body{font-size: 13px;} and carry on using this as the value for your measurements. Need something to be 26px? font-size: 2em; etc.
You ran into a problem though when you set up your media queries with ems:
@media screen and (max-width: 76.9230769em){
/*1000px? No*/
}Emmet
Not to long ago I was hearing about Zen Coding, and at the time I thought nothing of it. Why would I need a tool to help me write faster markup, HTML isn’t that hard…WRONG. I started to look into it again, and noticed that it had changed its name to Emmet, and it is amazing.
Why would you want to use such a tool? When you are building out sites and have to have tags that repeat over and over. Copy and paste seems fine, but it can sure get tedious. Enter Emmet.
Example markup, you would probably copy and paste all the li tags.
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>With Emmet you can write a small amount of syntax you can produce that same markup:
ul>li*6jQuery CSS Multi-property getter
How many times have you wanted to get more than one property, say the margin or padding of an element with jQuery? After looking through the jQuery 1.9 release notes I saw that you can now use .css() to get many properties.
Now, apparently being able to set something like the padding short hand was something that you have be able to do for a while.
$('div').css('padding','1em 2em 3em 4em');
As of 1.9 you are now able to get multiple values:
var cssProps = $('div').css(['paddingTop','paddingRight','paddingBottom','paddingLeft']);