codenimbus

make it rain.

Building Grids with PHP, the easy way

In my years as a developer, I have found myself building grids in html, always with a different number of elements per row. The first few times I solved this problem, I used the modulus (%) divided by the number of elements needed for the row, with an if statement to see if the row container should be closed or not.  This especially sucks if you are doing something recursively, so why not do it in a way that is easy to read, doesn’t require css hacks, and can take advantage of the row-fluid and span classes in bootstrap. Use array_chunk.

//row markup
$row = '
<div class="row-fluid">%s</div>
';
//$posts = whatever you are trying to put in a grid.
$span_divs = array();
foreach ( $posts as $post ) {
  //make a span box
  $span_divs[] = sprintf('
<div class="span4">%s</div>
', $post);
}
//chunk the array of grid items into a number if items
foreach ( array_chunk($span_divs, 3) as $spans ) {
  //pull the chunked array markup into the row markup and write it out
  echo sprintf($row, implode('', $spans));
}

Isn’t that much easier to read?

Beginning NodeJS for PHP Devs: Getting Started Locally

You’re no stranger to locally hosted php. Especially using MAMP or XMPP. Here is how you get started locally with NodeJS.

Getting started setting up your first node.js app up locally on OS X is so easy it makes my eyes tingle. I have always developed on a Mac, so if you are interested in windows, it’s probably best to find someone who specializes in that.

First you’ll need to install node on your OS X installation. The easiest way to do that is with homebrew. If you aren’t familiar with homebrew, it is a package manager that takes care of the installation of software in the *nix underbelly of OS X.

Install homebrew by going here http://brew.sh/. And following the installation instructions.

Once that is done. You will be able to install node.js on your Mac with three beautiful words. Open your terminal and type:

brew install node 

This will install node.js on your mac, where node can be activated at any time by popping open a terminal and typing “node”. This installation will include “npm” the node package manager. Which gives you access to all of the node modules that exist on npmjs.org. Similar to composer, but easier to set up.

Next. Open up your terminal and type:


npm install -g express

This command will install express in a location on your mac where you can access it from any directory. If you leave out the “-g” it will install express in a directory named node_modules in the directory you were in when you ran the command.

Keeping the `-g` will make it so you can boilerplate a new express app in any directory you wish.

Pop open your terminal create a directory for your new app using:

mkdir ~/myfirstnodeapp
cd myfirstnodeapp

Then you will use express to set up the boilerplate for your app. You can see the options by typing the command:

express --help

Screeny Shot Jan 12, 2014, 10.31.37 PM

For the purposes of showing you what I used, we are going to create our app with a couple of the options. We will be using ejs for the templating engine, and we want to enable sessions. There are lots of different templating engines that use different styles of injecting dynamic content into your templates. EJS markup is remarkably similar to the php templating `

So lets boilerplate our app.

express -e -s

Screeny Shot Jan 12, 2014, 10.34.14 PM

You’ll see feedback in your terminal that will echo the files that are created in your app directory. Included will be the instructions for installing the app from the boilerplate that was created using npm.

Do that by typing:

npm install

This will read the contents of the package.json file that was generated in your app directory, and it will download and install the dependencies into a node_modules directory.

Now you’re ready to start up your server and see whats going on. It’s easy as this.

node app

Then open a browser and navigate to http://localhost:3000

And you’ll see your first node app running on your local server.

Your App’s Anatomy

Looking in your node app directory, you’ll see four directories.

`node_modules`: holds all of your locally installed libraries for your app. As you build, adding a dependency is as easy as typing.

npm install *what you want* --save

And requiring that new dependency in your code to use it.

PROTIP: If you remember the `–save` your added dependency will automatically be added to your package.json file.

`public`: Holds all of the static assets that you need to have available to the browser. In there you’ll find directories for images, front end javascripts, and stylesheets.

`routes`: Holds your controllers all of your logic to be executed when your app hits a particular route. Ex. http://localhost:3000/ maps to the index.js, which provides the logic, and then renders the markup for views/index.ejs

`views`: Holds your view templates, in this case they are *.ejs files

`app.js`: Is the main application file, that knits together these directories, and starts up your web server. Node and express replaces the functionality of Apache and PHP.

`package.json`: Is the file that sets up the list of dependencies, the app name and version etc. So when you go to deploy this somewhere else. running npm install will setup everything you need.

TIME TO BUILD!

One of the things to remember is that when your app is started up, all of the JavaScript files are read into memory. So as you develop, the server would need to be restarted to see your changes. Having to do this is tedious, and nodemon fixes this. Nodemon is a node utility that will watch your files for changes, and restart the server for you, so that you can simply save your work, and refresh your browser to see your changes.

To install nodemon:

npm install -g nodemon

To use nodemon go to your app directory and type:

nodemon app.js

If you happen to have an error in your code however, it will fail to restart, you’ll see the error in your terminal where you launched the app.  I do a lot of  `console.log` in the browser to debug client side JavaScript. This command works in server-side JavaScript as well, and the console messages will echo out in the terminal.

Just like that, you should have node installed, an express app setup and running locally, and the basic file structure and debugging info to be able to start tinkering with your own node.js application. Now it’s time for me to gather my thoughts on the next step of authentication and data storage with mongoose and mongodb, or, you know, sleep. Probably both.

Redirecting www domain to non www on Ghost

Sure. There are other ways you can do this. .htaccess on apache, or a config in nginx. But one of the cool things about node.js is that It can be its own webserver. And in many cases, thats exactly how your ghost blog could be running. That’s how mine runs.

Since Ghost is built using express.js the redirect rules can be right in your codebase.

To redirect www to non-www in ghost, you simply need to open up your frontend.js file which is located in

ghost/core/server/routes/frontend.js

And add this block of code before all of the other routes.

server.get('/*', function(req, res, next) {
  if (req.headers.host.match(/^www/) !== null ) {
    res.redirect(301, 'http://' + req.headers.host.replace(/^www\./, '') + req.url);
  } else {
    next();
  }
});

This will catch the request, and if the www is included in the url, does a 301 redirect to the non-www url.

Restart Ghost and you are done.

« Older posts

© 2014 codenimbus

Theme by Anders NorenUp ↑