All posts tagged “Installing”

Installing cocos2d Templates with Xcode 4

IMG_0863

cocos2d is a powerful framework that is used to power countless games for iOS – the purpose of this article is to get you up and running with the cocos2d templates and get them installed on Xcode 4.

Before we begin, you must have Xcode and Apple’s developer tools actually installed – to install Xcode, simply head over to the Mac App Store and search for Xcode and then install and run the app and you’ll be ready to go!

1. Go to cocos2d’s download page and download the most recent stable version of cocos2d to your computer.

Screen Shot 2012-07-10 at 17.41.15

2. Once the download has finished, extract the contents of the ZIP file and move the new folder to your Desktop and rename the folder to ‘cocos2d’.

3. Open up Terminal (Applications – Utilities – Terminal) and type in the following:

cd /Users/daniel/Desktop/cocos2d

Although instead of putting ‘daniel’ put the short name of the account you’re using.

Screen Shot 2012-07-10 at 17.43.33

4. Now, once you’re pointed Terminal in the direction of the cocos2d folder, we are now going to run the installation file so ensure that Xcode is not open and type the following into Terminal:

./install-templates.sh -u

You should find that Terminal opens and run the installation files for you and the final thing that Terminal says should be ‘done!’. Sure enough, this means that everything went well and it should be installed.

Screen Shot 2012-07-10 at 17.45.59

5. Now, we’re going to verify that we’ve actually installed the templates correctly, to do this open up Xcode and create a New Project (CMD + Shift + N) and then when the New Project Template dialogue appears, you should see cocos2d in the sidebar ready for you to make use of.

Screen Shot 2012-07-10 at 17.47.14

6. You’ll find that there’s three templates installed, each has it’s own purpose and use so choose wisely.

7. If you choose the basic first cocos2d template and open the project and then run the application you’ll also find that conveniently, cocos2d has created a basic, simple, functional iPhone app for you!

That concludes this tutorial, the purpose of this was to help you get started with cocos2d and installing the templates, you can now go on to conquering the world of iOS game development.

Screen Shot 2012-07-10 at 17.48.30


Fuel Your Coding

Installing WordPress Through Command Line

I assume that many people would do the following to install WordPress in local server: Download the Package from WordPress.org, unpack it, put the files on the local server, open the localhost followed with the wordpress directory in the Browser, and then follow the instruction as shown.

This is the standard way to install WordPress. It works fine, except it requires several layer of steps. And most of the time, I have to manually re-download the package for new installation.

Another way to install WordPress is by using WP-CLI, which I found to be more streamlined. WP-CLI is a set of command lines for operating WordPress stuff. This includes install and update WordPress Core, as well as install and update plugins.

So, if you mainly work on WordPress environment and are comfortable on performing command lines in Terminal, you can follow this tip.

Getting Started

We first need to install WP-CLI, and the easiest way would be via Homebrew. Type the following commands:

 brew tap josegonzalez/homebrew-php brew install wp-cli 

Once installed, you can type wp command to verify the it is applicable. If you got a message like what is shown in the screenshot below, it means “it works”.

Creating Project

We start installing WordPress through command lines. First let’s create our project directory. In my case, all web projects reside under ~/Sites folder. So, I can type the command below to create a folder named /wordpress in it:

 mkdir ~/Sites/dev/wordpress 

Then, we navigate to this folder with the following command.

 cd ~/Sites/dev/wordpress 

Let’s download the WordPress package to this folder.

 wp core download 

Tip: If you want to download a particular version of WordPress, you can run the command followed with the version number. For example:

 wp core download --version=3.5 

If the download has completed, we can begin the installation.

Install WordPress

First, run the following command to create wp-config.php file.

 wp core config --dbname=wordpress --dbuser=root --dbpass=root 

The above command assumes that, you previously have created a database named wordpress. Change the database name with the one that you have created for the WordPress site.

Next, we use wp core install command to install WordPress. This commands the following parameters:

  • --url The website address url, e.g. http://localhost:8888/wordpress/.
  • --title The website title, e.g. My Blog.
  • --admin_user The admin username. It should be all in lowercase, e.g. admin.
  • --admin_password
  • --admin_email

Type the command below. Swap the parameters value as per your own setup.

 wp core install --url=http://localhost:8888/dev/wordpress/ --title=WordPress --admin_user=myusername --admin_password=mypassword --admin_email=tfirdaus@outlook.com 

The process should run quick. If it has completed, you will see the following message:

Let’s take a look at the database.

Yes, as you can see above, we have successfully installed WordPress through command lines.

Final thought

I hope you will find WP-CLI as a great alternative to operate WordPress. For more reference, you can head over to WP-CLI.org Commands Doc.


    




hongkiat.com

Installing Ghost Blogging Platform On Your Mac

Ghost.org is a newly launched blogging platform, initiated by John O’Nolan, and then developed together with Hannah Wolfe. Ghost started out as a Kickstarter project that successfully raised funding of over $ 300,000. Many popular brands in tech and blogging fields such WooThemes, and Envato backed the project.

The idea behind Ghost is to make the blogging experience easy and beautiful, and unlike WordPress that has evolved as a CMS for creating any kind of website, Ghost is aimed to be a blogging platform, nothing else.

In this post, we are going to walk you through installing Ghost locally on your computer.

Requirement

We need Node.js version 0.10.* (the current stable release) to be able to run Ghost. Node.js installation package is available for Windows, Mac, and Linux. Download it here, and install it.

If you have installed Node.js before, verify the version with this command in the Terminal: node -v. At the time of the writing, my Node.js installation was outdated, so I need to update it first.

Thanks to a tip by Simon Holmes, updating Node.js is so easy. We run the following set of command lines, then wait for a while for the installation process to complete.

 sudo npm cache clean -f sudo npm install -g n sudo n stable 

Let’s verify the version once again.

As you can see above, Node.js 0.10.21 has been installed, and we are all set to install Ghost.

Installing Ghost

You can download Ghost from the official website or from the Github repo.

We will be using command line and Terminal to install Ghost. Ghost does not come with a step-by-step installation guide like in WordPress or other blogging platforms/CMS that you might have come across. So it might not tougher on those who rarely work with Terminal and command line.

Open Terminal and navigate to the Ghost folder that you have just extracted, for example: cd ~/your/path/to/ghost/folder. And run these two commands:

 npm install --production npm start 

Your Ghost blog should now run.

You can access your Ghost blog in 127.0.0.1:2368 URL within the browser.

Ghost Back-end Admin

Go to 127.0.0.1:2368/ghost. For the initiation, input your name, email, and password. Once that is done, you will be redirected to the back-end administration, where you can write, edit, and publish post. The layout is minimal yet refreshing.

Hit the + New Post button to start creating a new post.

Ghost uses MarkDown. You can head over to our previous post to learn how to write using MarkDown.

Final Thought

Ghost is a new blogging platform with a very active development, and they plan to add a bunch of new features in the next version. At the time of the writing, Ghost is missing several trivial features for a blog. First, you can only assign Tags for the post; there is still no way to manage post by category. The Tag archive however is not yet accessible – you cannot sort posts that are saved under Tags on the front-end. Plus, we cannot schedule post, and comment to the post as well.

Despite all that, I’m looking forward to how this new platform will grow, and things that will be built around it in the next couple of years.


    




hongkiat.com

Installing, Configuring and Building a Responsive Website with the Gumby Framework


My name is Adam Chambers, I’m a senior engineer at Digital Surgeons and a lead developer on our open source project Gumby Framework.

In this tutorial I’m going to take you through the process of installation and configuration of a Gumby project and then put together a simple web page.

Gumby Framework Logo

First off I’d like to apologise for my hilarious colleague and fellow Gumby lead dev, Craig Keller. His passion and admiration for my nationality and all things English never fails to amaze me, hence this (slightly patronising) design we’re going to build.

Anyway, disclaimers aside, lets dive in.

Here’s what we’re going to build in it’s finished state:

Gumby Framework Tutorial demo Screenshot
View the Demo

Gumby is a responsive front end framework built on Sass and Compass. Along with the release of Gumby 2.5 we launched Claymate, an NPM module that interfaces with Bower and Uglify to assist in the installation and optimisation of Gumby. Because of this there are a number prerequisites for getting started. It would be out of the scope of this tutorial to explain the installation of each of these dependencies, however there is a load of information out there so I’m going to assume you have the latest versions and a basic understanding of the following: Ruby, Sass, Compass, Node.js, Bower & Git.

Installation

Claymate currently has two functions, installation and optimisation. We’ll cover optimisation later but for now lets setup our Gumby project. With one simple command Claymate will install Gumby and set up a basic project scaffold.

# install Claymate globally via npm
$   npm install -g claymate

# bootstrap Gumby project
$   claymate install

You can read more on Claymate installation in our documentation but for the purpose of this tutorial we’ll use an example git repository so we can jump back and forth between the stages that make up a Gumby build.

# create and cd into project directory
$   mkdir gumby-tutorial
$   cd gumby-tutorial

# clone the tutorial git repo and checkout step 1
$   git clone git@github.com:GumbyFramework/Tutorial.git
$   git checkout step-1

Now take a look at the directory structure here.

├── bower_components/
│   └── gumby/
├── css/
│   └── gumby.css
├── fonts/
│   └── icons/
│       ├── entypo.eot
│       ├── entypo.ttf
│       └── entypo.woff
├── img/
├── sass/
│   ├── var/
│   │   └── _settings.scss
│   ├── _custom.scss
│   ├── _fonts.scss
│   └── gumby.scss
├── config.rb
├── gumby.json
├── index.html
└── ui.html

This is what you would see after running $ claymate install. A number of things have happened here in order to bootstrap your Gumby project so lets go through it in detail.

Firstly, Gumby has been installed using the awesome tool that is Bower. You’ll find a full build of the framework in the bower_components directory, as if you had directly cloned Gumby’s GitHub repo. Bower allows you to install, update and manage your front end dependencies; With a simple command you can update your dependencies to the latest releases. This means the bower_components directory should remain untouched so nothing is overwritten. This, however, presents a problem.

We encourage Gumby users to edit the variables in settings.scss in order to customize the framework to as close to ones requirements as possible before overwriting and extending Gumby. However, our changes would get overwritten if we updated to the latest Gumby. Luckily, Claymate provides a solution by copying the files that require editing out of the bower_components directory and into the root of your project.

You’ll notice sass, css, js, img and fonts directories along side config.rb, ui.html and index.html files. The fonts directory is a direct copy from Gumby and contains your icon font while the js/img directories are empty and there for your convenience.

Now here’s where the real magic has happened. Open up the sass directory and you’ll find various partials copied from Bower’s copy of Gumby. If you open gumby.scss in a text editor you’ll notice the original paths have been updated to point to the bower_components directory, except for _settings.scss and _fonts.scss which are pointing to the new copied files.

The only core files you should need to edit are _settings.scss and _fonts.scss, copying these files out of the bower_components directory allows you to work on top of Gumby rather than within. The only manual change you’d need to make when updating would be to copy any new variables into your _settings.scss copy.

This set up allows Bower to really flex it’s muscles when the time comes to update.

Take a look around this fresh installation and get a feel for how the file structure is set up and when you’re ready, checkout step 2 of the tutorial.

$   git checkout step-2

Configuration

As I said, _settings.scss is the only core Gumby file you need to edit, and herein lies Gumby’s real power. If you open the file, you’ll notice that since step 1 I have modified a load of the default variables.

Before I was ready to start building out any markup I had changed the grid width, number of columns, font face, header colours, navbar colours and primary/secondary colours. Building the basic theme of the site out like this allows developers and designers to really collaborate on the core styling before any markup or specific styles are written. We have found that this method of development drastically improves maintainability.

In fact, this is how we recommend you begin any development with Gumby. You can tweak settings variables to get the core theme of your project together, or at least as close as you can, before you begin to overwrite anything.

If you call the compass watch command from the root of your project, you can play with the settings variables and check out the results in ui.html. Mess around with the variables and and get a feel for how they are used throughout the framework. Once you’re ready, checkout step 3 of the tutorial (you’ll need to undo or commit any changes you made to move on).

$   git checkout step-3

Extensions

Ok, so now we have installed Gumby and configured the settings to get our build as close as possible to the site theme. Before we begin building out the site, we’re going to need to install a few more packages. Gumby Extensions, of which there are currently 4, are modules hosted in separate GitHub repositories and installed individually via Bower. We are going to utilise all four of these extensions in this design.

If you look in the project root you’ll see a new bower.json file and inside the bower_components directory there are now gumby-parallax, gumby-images, gumby-shuffle and gumby-fittext directories. These packages have all been installed using the $ bower install command.

# install all a package
$   bower install --save gumby-parallax

# update all packages
$   bower update

# update gumby parallax only
$   bower update gumby-parallax  

Once installed, these extensions needed to be imported into our Gumby project. Open up gumby.scss and you’ll see a new line I’ve added right before _custom.scss importing the parallax sass from bower_components. Once compass compile has been called, our css will contain the parallax styles.

@import "../bower_components/gumby-parallax/parallax";

Check out the bottom of index.html to see the new script tags. The parallax, images, shuffle and fittext JavaScript have been added with the other UI modules before gumby.init.js, this is the order in which Gumby JavaScript must be executed.

gumby.js -> modules -> gumby.init.js

<!-- Gumby and Gumby modules -->
<script gumby-touch="js/libs" src="bower_components/gumby/js/libs/gumby.js"></script>
<script src="bower_components/gumby/js/libs/ui/gumby.retina.js"></script>
<script src="bower_components/gumby/js/libs/ui/gumby.fixed.js"></script>
<script src="bower_components/gumby/js/libs/ui/gumby.skiplink.js"></script>
<script src="bower_components/gumby/js/libs/ui/gumby.toggleswitch.js"></script>
<script src="bower_components/gumby/js/libs/ui/gumby.checkbox.js"></script>
<script src="bower_components/gumby/js/libs/ui/gumby.radiobtn.js"></script>
<script src="bower_components/gumby/js/libs/ui/gumby.tabs.js"></script>
<script src="bower_components/gumby/js/libs/ui/gumby.navbar.js"></script>
<script src="bower_components/gumby/js/libs/ui/jquery.validation.js"></script>

<!-- Gumby extensions -->
<script src="bower_components/gumby-parallax/gumby.parallax.js"></script>
<script src="bower_components/gumby-images/gumby.images.js"></script>
<script src="bower_components/gumby-shuffle/gumby.shuffle.js"></script>
<script src="bower_components/gumby-fittext/gumby.fittext.js"></script>

<!-- Gumby Init -->
<script src="bower_components/gumby/js/libs/gumby.init.js"></script>

Debug Mode

The last change I made in this step was to ]turn on Gumby’s debug mode. This is done by adding the gumby-debug attribute to the gumby.js script tag. When in debug mode, Gumby will log information to the console including module installations and event triggers. This can be a really useful tool during development. Open index.html in your browser (it will be blank). Then open up the console (alt + command + i in Chrome) and refresh to see Gumby’s debug info. You can use Gumby’s debugging methods throughout your own JavaScript if you wish.

<script gumby-debug gumby-touch="js/libs" src="bower_components/gumby/js/libs/gumby.js"></script>

Gumby.debug('Print debug message to the console');
Gumby.info('Print information to the console');
Gumby.warn('Print warning to the console');
Gumby.error('Print error to the console');

Build

Ok, now it’s time to start building out the example site. Checkout step-4 to see the complete build and follow through the commit log on GitHub or, if you know your way around Git, checkout each commit to look around the code at that particular stage.

$   git checkout step-4

Markup

Firstly I built out the basic markup.

The grid is put together as columns inside rows – there’s no need for container elements unless you want them. Grid systems have been around for long enough so I’ll avoid going into too much detail here but we have .row, .columns, .centered, .push_x, and .pull_right and pull_left classes for you to play with. Most of which are used throughout this example project.

<div class="row">
    <div class="seven columns"></div>
    <div class="four columns push_three"></div>
</div>

Gumby’s settings file contains a number of color variables, several of which we edited for the example site. Each of these variables has a corresponding class that can be applied to a button, label, badge or alert. You’ll notice several buttons with pre-pended icons used throughout the design. These can be created with a few simple classes.

<p class="btn primary medium"><a href="#">Primary Medium Button</a></p>
<p class="btn primary medium icon-left icon-location"><a href="#">Primary Medium Button</a></p>

Gumby’s responsive navigation is included at the top of the page complete with a dropdown menu. Check out how it responds – nice, huh? We’ll cover the logic behind the mobile navbar toggle later. If you inspect the logo <img> you’ll notice it has a gumby-retina attribute. In the same images directory we have a retina ready version of the image with @2x appended to the file name. Adding the gumby-retina attribute initialises Gumby’s retina module which will load the retina version on supporting devices.

Sass

Next I wrote some custom sass to style my markup and override a few Gumby defaults.

The details of the Sass could easily be a separate tutorial so I’ll be brief. However, there are a few Gumby mixins I’d like to pick up on.

Fancy Tiles

Fancy Tiles are used to style the footer links and are perhaps best described as a combination of Tiles and the Grid. If you find #foot-links in _custom.scss you’ll see the mixin in use.

/* scss */
@include fancytiles(8,8,4);

/* compiles to */
@media only screen and (min-width: 320px) { #foot-links ul { width: 25%; } }
@media only screen and (min-width: 768px) { #foot-links ul { width: 12.5%; } }
@media only screen and (min-width: 1100px) { #foot-links ul { width: 12.5%; } }

The numeric arguments I’m passing to the mixin specify the number of columns per row I want at three predefined breakpoints, desktop, tablet and mobile. Resize the browser window and see how they respond accordingly. Fancy Tiles are awesome for fat footers like this, product grids and any dynamic website where the required number of rows and columns is unkown. No longer worry about opening and closing rows and save yourself a lot of time and stress!

Respond

Next up is a very important mixin in Gumby development. The respond mixin allows you to define responsive styles at a number of pre-defined breakpoints. Check out the full list of breakpoints in the mixin definition. Simply include the mixin, pass it the required breakpoint and insert your styles. Sass will convert these into ugly media queries when compiled.

/* scss */
@include respond(portrait-tablets) {
    background: red;
}

/* compiles to */
@media only screen and (max-width: 768px) {
    background: red;
}
Font Size

Finally the font size mixin. The em is a great format but can be dificult to work with, we all like px right? Well the font-size() mixin makes the conversion for us. Simply pass in a px size or one of our pre-defined modular scale variables variables.

/* scss */
@include font-size(18px);

/* compiles to */
font-size: 16px;
font-size: 1.125em;

FitText

Here is where I first used one of Gumby’s extensions, in this case FitText. The FitText extension was modified from the awesome FitText.js jQuery plugin and serves to make font sizes flexible. Add the .fittext class to any element with optional gumby-rate and gumby-sizes attributes. The gumby-rate attribute works like FitTex.js’s Compressor and controls the rate at which the font size increases/decreases. The gumby-sizes attribute lets you specify a minimum and maxiumum font size separate by a pipe. Resize your browser and watch fittext do it’s thing.

<h2 class="fittext" gumby-rate="2" gumby-sizes="30|60">Traverse the time vortex with precision.</h2>

Fixed Positions

Next I applied the fixed position module to the navbar to make it ‘fix’ when it reaches the top of the viewport and ‘pin’ when it reaches the bottom of the masthead. Fixing and pinning like this is a common UI requirement and the fixed position module works as a kind of polyfil for the CSS3 property position: sticky; with some advanced functionality. This module is great for navigation, sidebars as seen in our documentation and many other UI features.

<!-- fix when top of viewport is reached
     pin when window scrolled 500px -->
<div gumby-fixed="top" gumby-pin="500">My fixed content</div>

Skip Links

Skip links slide the window to a specific vertical point. They are quick and easy to set up and are utilised in various locations in this design. The navbar dropdown menu contains a set of skip links and the three featured images at the top of the content area also skip to sections of content. To initialise a skip link add a class of .skip to any element, although usually an anchor. All you need to do then is add a gumby-goto attribute containing either a px value, the string ‘top’ or a css selector and your skip link will take you there. You also have gumby-duration and gumby-easing (requires jQuery easing plugin) to play around with, so have some fun!

<!-- on click slide to #main -->
<a href="#" class="skip" gumby-goto="#main">Skip to main</a>

Toggles & Switches

Toggles & Switches really require a dedicated tutorial. They are one of the coolest features of Gumby and really allow you to get creative and build UI elements without having to write a single line of JS. The basic idea is to add/remove css classes using HTML attributes, so that CSS transitions can be used to power UI aesthectics. We can avoid having to use :psuedo states or wasting JavaScript’s time toggling classes. Gumby comes with Modals and Drawers, both of which are examples of toggles & switches and are not dedicated UI modules with associated JS files.

Markup

In this design we use Gumby’s modal example of Toggles & Switches. First I added the modal markup. The modal is hidden by default with a negative z-index and opacity: 0;, these values are then overwritten when the .active class is applied.

<div class="modal" id="modal">
    <div class="content">
        <h1 class="row">Modal Markup</h1>
    </div>
</div>

Switches

Next I added several switches to open the modal. The gumby-trigger attribute contains a selector targeting the modal element. Inside the modal I have two hidden divs of content. Different buttons and links should open the modal with the appropriate content displayed. To do this, the switch’s gumby-trigger attribute contains a selector that targets the modal itself and the content we want to display, with the content we want to hide specified after a pipe. Toggles & Switches will add a class of .active to the selector specified before the pipe and remove it from the selector specified after.

<a href="#" class="switch" gumby-trigger="#modal,#modal .get-quote|#modal .find-dealer">Get a quote</a>

You can get really advanced with Toggles and Switches once thir full potential is understood. I recommend reading our documentation and experimenting with the possiblities.

Parallax

The next extension I used was Parallax. I applied the parallax module to the masthead to quickly create a cool scrolling effect. The Parallax module modifies the background-position of the the element the .parallax class is applied to. It will scroll the background image relative to the window scroll at the rate specified in gumby-parallax.

<!-- scroll background image position at half the rate the window scrolls -->
<div class="parallax" gumby-parallax="0.5"></div>

Shuffle

The Shuffle module provides an easy way manage source ordering. In this example I applied the shuffle module to the #highlights images, so that at tablet size the order reverses. This can be useful for ensuring your content appears above your sidebar when columns stack or moving calls to action and mobile specific features to the top of the page on smaller screens. The shuffle module requires a media query and a sequence specified in a gumby-shuffle attribtue, separated with a pipe. The sequence should be zero indexed, separated with a dash and represent the order the children elements should be shuffled to.

<!-- reverse order at 768px -->
<div class="row" gumby-shuffle="only screen and (max-width: 768px) | 2-1-0">
    <div class="four columns">...</div>
    <div class="four columns">...</div>
    <div class="four columns">...</div>
</div>

JavaScript

Now it’s time for some JavaScript. Gumby has a load of events and advanced JavaScript features which we won’t go into in this tutorial, but for those who know JS, here’s a couple of simple-ish examples. I won’t be offended if you web designers skip past this section!

Initialisation

So first things first, I created a JavaScript file in the js directory and named it main.js. I then updated the path to main.js in index.html from Gumby’s example in bower_components to js/main.js. I then wrote the first lines of JS used in this project.

The shuffle module works by removing elements from the DOM, reordering and inserting again. Becuase of this, the skiplinks need initialising as if they were dynamically added to the web page. Gumby UI modules trigger and bind to many events that you can use in your custom JS. In this case we bind to the Shuffle module’s gumby.onShuffle event and call the Gumby.initialize() method to initialise new modules of a certain type. There are many events and variations on initialisation and I encourage you JavaScript nerds to check them out.

// Gumby is ready to go
Gumby.ready(function() {
    // initialise new skiplinks when #highlights are shuffled
    $  ('#highlights').on('gumby.onShuffle', function() {
        Gumby.initialize('skiplink');
    });
});

Validation

Next up I used Gumby’s Validation JQuery plugin to apply validation logic to the quote form in the modal. Call the jQuery plugin on any form element and pass it a ‘required’ property containing an array of required objects. Each required object should contain a ‘name’ matching an input’s name attribute within the form and an optional corresponding validate function. The validate function is passed the element itself as an argument and must return a boolean to indicate success or failure. If the validate function is ommitted the field will just be tested for a present value. Optional submit and fail callback functions can be specified, if ommitted the form will submit as usual when validation is passed.

$  ('.get-quote form').validation({
    required: [
        {
            name: 'name'
        },
        {
            name: 'phone'
        },
        {
            name: 'email',
            // email must contain @
            validate: function($  el) {
                return $  el.val().indexOf('@') > -1;
            }
        },
        {
            name: 'version',
            // must pick version with valid value
            validate: function($  el) {
                return $  el.val() !== '#';
            }
        }
    ],
    // validation passed
    submit: function(formData) {
        Gumby.debug(formData);
        alert("Succes! Posting form...");
    },
    // validation failed

    fail: function() {
        alert("Form validation failed...");
    }
});

Optimisation

We’re all about performance at Gumby and have a number of performance based extensions coming to the framework in the near future. Claymate also has a build function to help in creating a single, optimised, production-ready JavaScript file. Check out step-5 to see the final optimisation stage of this example project.

$   git checkout step-5

Responsive Images

Media Queries

The responsive images module helps to serve up the most optimial image by file size or format.

In this example site I applied the responsive images module to the masthead to serve up a smaller background image to tablets. The gumby-media attribute can be set on any element with the syntax MEDIA QUERY | IMAGE PATH, it will refer to background images unless specified on an <img>. You can see here that we want bg_masthead-768.jpg to render should the associated media query evaluate to true, with a default image supplied in gumby-default.

<!-- serve up bg_masthead-768.jpg at < 768px viewport -->
<div id="masthead" 
     gumby-media="only screen and (min-width: 768px)|img/bg_masthead.jpg,only screen and (max-width: 768px)|img/bg_masthead-768.jpg">   

Feature Detection

I also applied the responsive images module to two large images. In this instance I’m serving up images based on feature detection. The gumby-supports attribute can also be used on an any element and should use the syntax FEATURE | IMAGE PATH. The feature detection is passed directly to Modernizr so make sure your Modernizr build contains the tests you require. Webp is an awesome image format from Google I recommend you check out, however gumby-supports can be used with any feature detection supported by Modernizr e.g svg. You could even add your own tests.

<!-- if supported use webp image otherwise fallback to jpg -->
<img gumby-default="img/img_tardis.jpg" gumby-supports="webp|img/img_tardis.webp" />

Build JS

Each JS module is a separate file. As explained earlier we recommend that you include the required modules separately in development. Just be sure gumby.js is included first and gumby.init.js is included last. In production, we recommend you minifiy and concatenate all your JavaScript down to a single optimised file.

Don’t worry, Claymate is here to help again! Claymate’s build function will create a single gumby.min.js file for you, containing the UI modules you require and any external modules and custom files you specify.

When we installed with claymate, a gumby.json file was generated. Simlar to bower.json, we can update this file to include the information Claymate needs so that we can call $ claymate build without any arguments. Check out gumby.json and you can see the specification for this project. The UI modules we’ve used, the extensions and also our main.js file are all in there. This will create a new gumby.min.js file inside your js directory containing all the code you need for your application to run.

Your project is now ready for launch!

Conclusion

That brings this tutorial to an end. We’ve covered installation using Claymate, configuration using Gumby’s settings files and Sass variables, building an example site with Gumby and production ready optimisation. I hope you found this useful, if you have any questions, our Google+ community is a good place to start. We have a thriving and growing community of Gumby developers ready to help and discuss responsive web design. I’d also encourage anyone who wants to contribute to check out our GitHub repositories and shoot us any pull requests or ideas for improvements or new functionality you may have. Finally follow me and Gumby on Twitter to keep up with the latest!


Installing, Configuring and Building a Responsive Website with the Gumby Framework


Speckyboy Design Magazine

Installing the Android SDK on OS X

Android is becoming more and popular amongst developers, the purpose of this tutorial is to show you how to install the Android SDK on your Mac – for this tutorial, I am running OS X and will be installing it in the Eclipse IDE (don’t worry, we’ll walk through all the steps, including obtaining the IDE).

Part One: Downloading

1. Firstly, we need to actually download the SDK along with the IDE that we’ll be using, to do this go to:

Download Eclipse Classic
Download the Android SDK

Screen Shot 2012-07-29 at 09.28.03

2. Now, once you’ve downloaded both the SDK and IDE, extract both the ZIPs and move the Eclipse folder to your Applications folder.

3. Now, extract the Android SDK and move the new folder into the Eclipse folder.

Screen Shot 2012-07-29 at 10.04.00

Part Two: Installing

1. Now we’re going to install the SDK, open up Eclipse.app from within the Eclipse folder and go to Help – New Software.

2. Next, click on Add from the top right corner from within the new dialogue.

3. Once you’re prompted to, add the following details:

Name: Android SDK
Location: https://dl-ssl.google.com/android/eclipse/

Click OK.

Screen Shot 2012-07-29 at 10.03.20

4. Once you click OK, check Developer Tools from the next window and press Next and then agree the license agreements and click Finish

Screen Shot 2012-07-29 at 10.03.33

5. Once you’ve completed the installation, you’ll be promoted to restart Eclipse, click Restart Now.

Part Three: Configuring the SDK

1. Now, after you’ve just restarted Eclipse, go to Preferences at Eclipse – Preferences.

2. In the left column, select Android and then click the Browse button next to the SDK location and change it to the location of the folder we extracted at the start and placed within the Eclipse folder in Applications.

Screen Shot 2012-07-29 at 10.05.23

3. Now, if you go to New – Project, you’ll be able to select Android project and create Android apps!

There we have it, not quite as simple as Xcode but nonetheless, a rather straightforward process.


Fuel Your Coding

Installing cocos2d Templates with Xcode 4

IMG_0863

cocos2d is a powerful framework that is used to power countless games for iOS – the purpose of this article is to get you up and running with the cocos2d templates and get them installed on Xcode 4.

Before we begin, you must have Xcode and Apple’s developer tools actually installed – to install Xcode, simply head over to the Mac App Store and search for Xcode and then install and run the app and you’ll be ready to go!

1. Go to cocos2d’s download page and download the most recent stable version of cocos2d to your computer.

Screen Shot 2012-07-10 at 17.41.15

2. Once the download has finished, extract the contents of the ZIP file and move the new folder to your Desktop and rename the folder to ‘cocos2d’.

3. Open up Terminal (Applications – Utilities – Terminal) and type in the following:

cd /Users/daniel/Desktop/cocos2d

Although instead of putting ‘daniel’ put the short name of the account you’re using.

Screen Shot 2012-07-10 at 17.43.33

4. Now, once you’re pointed Terminal in the direction of the cocos2d folder, we are now going to run the installation file so ensure that Xcode is not open and type the following into Terminal:

./install-templates.sh -u

You should find that Terminal opens and run the installation files for you and the final thing that Terminal says should be ‘done!’. Sure enough, this means that everything went well and it should be installed.

Screen Shot 2012-07-10 at 17.45.59

5. Now, we’re going to verify that we’ve actually installed the templates correctly, to do this open up Xcode and create a New Project (CMD + Shift + N) and then when the New Project Template dialogue appears, you should see cocos2d in the sidebar ready for you to make use of.

Screen Shot 2012-07-10 at 17.47.14

6. You’ll find that there’s three templates installed, each has it’s own purpose and use so choose wisely.

7. If you choose the basic first cocos2d template and open the project and then run the application you’ll also find that conveniently, cocos2d has created a basic, simple, functional iPhone app for you!

That concludes this tutorial, the purpose of this was to help you get started with cocos2d and installing the templates, you can now go on to conquering the world of iOS game development.

Screen Shot 2012-07-10 at 17.48.30


Fuel Your Coding

Installing Google Custom Search Engine (CSE) on WordPress Site

If you are not satisfied with the weak funtionality of WordPress’s native search function, here’s an alternative solution. You can use the Custom Search Engine provided by Google itself on your WordPress-based website.

With Google’s search engine features, your site visitors will have a better experience while making searches. You can use CSE in sidebar/footer or on a whole page. This tutorial will guide you on how to easily implement Google CSE on your WordPress website.

Creating your custom Search

Signing up for CSE is as easy as signing up for an email account. You need to enter some details defining your search engine and CSE will be ready. Here are the steps required.

At the Google Custom Search page, click on the Create a Custom Search Engine button. You’ll be redirected to the CSE login page (if you’re not already logged in). Enter your Google account’s credentials and hit the Sign in button. If you don’t have a Google account, then it’s time to create one!

Enter your search engine details: Name, Description, Language and Sites to search. You must list all the sites in the Sites to search box to set the parameters for your custom search engine to crawl and give results from.

Set Up Google Custom Search

Choose your edition of CSE (the Standard edition costs nothing but Site Search is available at $ 100/year) then agree to the Terms of Service before clicking Next. At the Try it Out (design) page, click at ‘Look and feel‘, written in first line of the page.

Look and feel

At the Layout page, choose a layout for the CSE on the site. Hit the Save & Get Code… button. Keep this Get Code page opened in your browser. Check below on how to implement CSE in various layouts on your WordPress site.

Layout Style

Implementing Templates

We’ll be using WordPress page templates to implement CSE in some layouts. You’ll need this template to implement CSE on yoru site. WordPress templates are tools to extend the functionality of WordPress pages to show dynamic or programmed content.

Here is a quick way to create a template for your CSE. On a notepad or text editor, paste this code below; note that a single spacing out of place may render the code useless. Save the file as page-template-cse.php on your computer.

<?php
/**
 * Template Name: Google CSE
*/

global $  theme; get_header(); ?>

    <div id="main">
    
        <?php $  theme->hook('main_before'); ?>

        <div id="content">
            
            <?php $  theme->hook('content_before'); ?>

		/* Paste your CSE-Bar-code below this line. */

             /* Paste your CSE-Bar-code above this line. */

             /* Paste your CSE-Results-code below this line. */

             /* Paste your CSE-Results-code above this line. */

            <?php $  theme->hook('content_after'); ?>
        
        </div>
    
        <?php get_sidebars(); ?>
        
        <?php $  theme->hook('main_after'); ?>
        
    </div>
    
<?php get_footer(); ?>

Implementing Google CSE on your site

Full-width

Open page-template-cse.php and paste the copied content into where it’s written to paste the CSE-Bar-code. Save the file. Upload the file on your website’s WordPress installation directory via the File Manager of your hosting account.

Login to your website’s dashboard and create a new page. Enter other details like Page Name and/or SEO Options, but nothing in the page body.

Look for the Template option (right side). Choose Google CSE from the dropdown menu. Save or Publish the page.

Compact / Results Only / Google-hosted

Copy the deciding Google Search Element code from the Get Code page. Login to your website’s dashboard and go to Appearance > Widgets. Select Text widget and drag it to the Sidebar or Footer, wherever you want to position it. Paste the copied content in the text widget and click Save.

Two page

Specify the url where your CSE’s search results will appear on your site. Once you specify this page name or slug, you must use the same slug while creating the page. Its format should be http://<your-site-name>/<page-name or slug>.

Page Name

Copy the CSE-Bar-code from the Get Code page. Login to your website’s dashboard and go to Appearance > Widgets. Select Text widget and drag it to the Sidebar or Footer, wherever you want to position it. Paste the copied content in the text widget and click Save. Copy the CSE-Results-code from the Get Code page.

Element codes

Open the template you saved as page-template-cse.php and paste the copied content where it’s written to paste the CSE-Results-Code. Save and upload the file. Login to your website’s dashboard and create a new page. Enter other details like Page Name and/or SEO options.

Keep its slug the same as what you entered in the page URL box but don’t enter anything in page body. Look for the Template option at right side. Choose Google CSE from dropdown menu. Save/Publish the page.

Conclusion

Google CSE is a good tool to enhance your site. Visitors will get better search results. Moreover, you can monetize your site results using Google Adsense. Hope this tutorial was helpful and that you were easily able to implement Google CSE on your WordPress website. If you get any problems, let me know in the comments.

Related posts:

  1. 5 Steps to More Accurate and Efficient Google Search
  2. How to Find Your Previous Google Search Queries [Quicktip]
  3. Enable Facebook Like Button In Google Search Result Page [Quicktip]
  4. 10 (More) Awesome Things Google Search Can Do For You


hongkiat.com

Guide to: Installing Firebug in Major Browsers and iOS Devices