A better website development workflow – part 2 puphpet

Here is a very bare bones way to get a local machine up and running in Vagrant. If you don’t have admin access to your machine you probably will not be able to do this, so make sure you have it for your local machine. The great thing about using puphpet is you don’t have to invest a lot time learning puppet to take advantage of the a virtual environment.

For this you will need:

  • Virtual Box
  • Vagrant
  • Mac OSX but this may work on other OSes, but I am doing this from the OSX machine

Everything will be configured via puphpet.com. There are lots of options that puphpet provides that make it really simple to get your first virtual machine running.

For a typical box I will run ubunutu 14 with apache, php, mysql. Everything on puphpet is setup with php and zend but you can use hhvm if you are feeling adventurous.

To get started go to puphpet.com

Deploy Target:

Below is a screenshot of the first screen, remember your ip address. Also note the sync folder this is how you can sync files via your local system.
Note not all of the screen is shown here:

Server Packages:

I usually leave as is. You can setup Mailcatcher to deliver email if you need it, I don’t recommend it.  If you need email you will need to edit your config.yaml file once your are done building the box and re-provision the machine.

You can add this under the php ini settings and then run a vagrant provision. It should fix any email issues as long as you have sendmail or postfix installed.

ini: 
       sendmail_path: '/usr/sbin/sendmail -t -i'

Firewall Rule:

I usually leave as is since this only running locally.

Webservers:

I usually select apache and then also add apache modules: vhost_alias and headers


On the second part of this page I will setup custom domain:

using the example below everything is based off of awesome.dev. You can replace this with whatever domain you like as long as you edit you localhost file. On mac this is /etc/hosts

custom domains

 

Next you can configure php, I usually leave defaults unless you need something specific like curl, or gd, etc… You can also install xdebug, which I have not used but looks pretty nice.  If you use sublime you can try  this tutorial on installing xdebug.

php for puphpet

 

Next I leave the database as is.  Work queues and search servers I leave as is then create your manifest file by pressing the big blue button.

Vagrant Up

Now we are almost ready to launch. I like to keep my machines in vagrantboxes folder on my desktop. First unzip the file and then copy over you  puphpet folder and vagrant file. Next bring up your terminal. You will need to use this to start your virtual machine.  To keep it simple lets say you have a folder on your desktop called vagrantboxes.

In your terminal switch over to directory. You should be able to see your Vagrantfile. Next type vagrant up. You should now see your machine building. It may take several minutes for this to finish as it is building the machine so be patient.

cd ~
cd Desktop
cd vagrantboxes
vagrant up

.... when it is done you should see someting like this:

 ____        ____  _   _ ____      _      generated using
|  _ \ _   _|  _ \| | | |  _ \ ___| |_   ___ ___  _ __ ___
| |_) | | | | |_) | |_| | |_) / _ \ __| / __/ _ \| '_ ` _ \
|  __/| |_| |  __/|  _  |  __/  __/ |_ | (_| (_) | | | | | |
|_|    \__,_|_|   |_| |_|_|   \___|\__(_)___\___/|_| |_| |_|

Once it is finished, I usually try and ping the server to verify it worked.

ping 192.168.56.101

Congrats you now have a virtual machine working isolated from your desktop. Now you can look at the services by using ssh.
Type vagrant ssh and sudo netstat -tlnp

$ vagrant ssh
$ sudo netstat -tlnp

Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 127.0.0.1:3306          0.0.0.0:*               LISTEN      844/mysqld      
tcp        0      0 0.0.0.0:111             0.0.0.0:*               LISTEN      600/rpcbind     
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      1019/apache2    
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1385/sshd       
tcp        0      0 0.0.0.0:1080            0.0.0.0:*               LISTEN      884/ruby1.8     
tcp        0      0 0.0.0.0:1025            0.0.0.0:*               LISTEN      884/ruby1.8     
tcp        0      0 0.0.0.0:50022           0.0.0.0:*               LISTEN      716/rpc.statd   
tcp6       0      0 :::111                  :::*                    LISTEN      600/rpcbind     
tcp6       0      0 :::22                   :::*                    LISTEN      1385/sshd       
tcp6       0      0 :::38971                :::*                    LISTEN      716/rpc.statd  

In the next part of this series I will be looking at setting up the custom local domain, connecting with a mysql client and using automated deployment via dandelion.

A better website development workflow

I have been looking at ways to improve my overall speed and quality of development.  I have been developing locally for a while on various Mamp/Wamp boxes and it seems to work pretty well for most of what I need. However I have been hearing a lot of about various (new at least to me) tools out there such as Vagrant. I really did not quite grasp the full advantage of Vagrant over a MAMP setup at first but now it has become more clear.

I would like to share a few of the various links and videos that have helped me setup Vagrant and get it running.

Getting Started with Vagrant

To run Vagrant you will need a virtual machine, I am using virtualbox but you can use vmware or whatever vm software you like.

Also you will need to get your virtual box operating system  which you can do so here: http://www.vagrantbox.es/

You want  to get the most of Vagrant so you should use a provisioner to help. What is a provisioner? It basically allows you to configure what get installed automatically, kind of like a gulpfile.js but for Vagrant instead. Below are two website GUI’s for generating a manifiest file. One is for puppet the other is for ansible.

 

Vagrant Webpage Tutorials

 

Vagrant Video Tutorials

Vagrant Beginner (Part 1)   

This is a quick video and about the fastest way to get a simple Vagrant box up and running. In this tutorial he is using PuPHPet which is a simple website to create a puppet manifest file.

PHP UK Conference 2014 – Erika Heidi – Vagrant Provisioners In A Nutshell   


 

 

Taskrunners

If you use a task runner like gulp, here is a neat way to get notifications to work with Vagrant.

http://jpbetley.com/vagrant-gulp-notifications/

 

jquery table sorting

I have been using the jquery table sorter plugin for a while now and really like it. You can view more information her on jquery tablesorter on github. There is even a bootstrap version, which looks pretty good.

I will try and post some examples of what can be done with this plugin but the site does a pretty good job of providing detailed explanations.

On a related note there are a few alternatives to this plugin since it can be a bit large. One is called the stupid jquery table sort plugin. I have not had  a chance to use this but it looks pretty straight forward and would work well with not much overhead.

A few more table sorting plugins:

 

 

 

 

Toshiba Satellite A665-S5170 Bios Password

A friend of my was unable to boot his satellite laptop and so I took a look. Turns out it had a BIOS password that was need before you could do anything. Very frustrating as you can’t even boot off of an external drive without the password. The only thing you can do is reset the cmos.

So Below are the steps I took to fix this. I am not liable for any damage. *** Proceed at your own risk *** .

So now that we are ready, I must give credit, first.  I found this post, fixing  regarding how to fix it and it worked perfectly. I took some photos to help anyone who maybe in the same predicament.

Step 1

Remove the back memory cover.  You will need a Phillips screw driver.  Remove one screw and any memory.  Both pieces of memory are removed  in the picture show below.

Step 2

You will then need to peel back this clear plastic film. I used a then need needle nose plyers. A bobby pin or any thin piece of plastic or metal will work. Just be careful not to touch anything that could short or spark, that would be bad.

Memory compartment showing clear tape covering cmos

Step 3

Now we will need to locate the  JCMOS. This is the jumper for your cmos.  We will connect both sides of this together with something conductive to reset the password/bios.

CMOS Jumper which you will need to reset

Step 4

Finally connect both sides of the cmos to complete the circuit. This will reset the bios password.  You don’t need much to do this just a small plyers or piece of metal. Hold the connection for at least 5 seconds to make sure it works.  You should then be set.

Reset the cmos to remove the password from boot up.

Step 5

Put back down the clear tape, put your ram back in and put on the cover. Next turn on your computer and if all goes well you should now be booting as normal.  You will then be prompted to enter a date and time in your bios, since it was reset. Enter your information and now you should be finished.

If you are still having problems below is another videos that may help. Again, I am not liable for any damage. *** Proceed at your own risk ***.

Reset BIOS password

HTML5 Dev Conf Douglas Crockford

A speech of “JavaScript Programming Style and Your Brain with Douglas Crockford”

htaccess redirect old pages to new pages

Setting up redirects can be a real pain. Here is a quick snippet that you can use. to redirect visitors from old.com/about.htm to go to new.com/about.htm.

To set this up you need to be using apache and have mod_rewrite installed. You can do this with a mod_rewrite rule in .htaccess:

This rule redirects everything on your domain to your new domain.


RewriteEngine on
RewriteRule ^(.*)$ http://www.thenewdomain.com/$1 [R=permanent,L]

Another variation of the code above, this will match records starting from “www” and “old.com” but not “blog.old.com” or “something-else.old.com”.


RewriteEngine on
RewriteCond %{http_host} ^www.old.com [NC,OR]
RewriteCond %{http_host} ^old.com [NC]
RewriteRule ^(.*)$ http://www.thenewdomain.org/ [R=301,NC,L]

CSS3 code generators and css selectors

I saw this post and thought it may be useful. Here are 10 of the best css3 code generators for quickly adding css3 styles to your sites.

SelectorGadget is a great way to quickly select elements. Point and click to get the css selection for any page element. Below is a quick video using firebug and SelectorGadget for rapid jQuery prototyping.

Do you even need to use ID’s in CSS?

Oli Studholme did an interesting post on if we should use css id selectors in css.

I think the most interesting point is using roles as selectors.

Responsive Web Design Tips

Smashing Magazine did a great post on responsive web design.  Here are a couple of interesting parts I saw from the article.

Structured Content

Stephen Hay elaborates on what is mobile and then how to design for it. You can listen/watch the full presentation below.

Structured Content First
View another webinar from Stephen Hay

Media Query Debug Demo

Johan Brook has a clever way to debug media queries that shows the view port size via  a pseudo selector in CSS.

body::before{
	content: "Tablet media query (768 < 979) fired";
	font-weight: bold;
	display: block;
	text-align: center;
	background: rgba(255,255,0, 0.9); /* Semi-transparent yellow */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

  A Book Apart: Mobile First

Luke Wroblewski is the author of the sixth event apart book. I look forward to the release for more information on this book visit his mobile first website.

CSS Media Query Gallery

I found a nice gallery of css media query based sights. Here you can see multiple sizes of different view-ports at a glance.  You can then click on the image to view the site and re-size the browser window and try it out for yourself.

Below are two examples from worm sign, a uk t-shirt company. If you re-size your browser you can see the design grow and shrink. I am working on a longer post / tutorial regarding css media queries for later this year.