Category: Git

Scotch Box: A Vagrant LAMP Stack That Just Works

Just a dead-simple local Vagrant LAMP stack for developers

I discovered Scotch Box recently, brought to us by the folks at scotch.io. It actually looks like Nicholas Cerminara has done most of the work, or as least done all of the committing to GitHub. Here’s the Scotch Box announcement at the Scotch.io blog.

After using Scotch Box for a day, I’ve decided this is how I will do all future development work. It’s so easy, and you really don’t need to know much about Vagrant or VirtualBox to get up and running with Scotch Box.

Scotch Box has a repository setup at GitHub that explains how to make use of Scotch Box. Basically, just clone the repository, and then run vagrant up inside that repo.

Scotch Box is currently running Ubuntu 12.04.5. Here’s a bit from the Scotch Box readme:

Scotch Box is a preconfigured Vagrant Box with a full array of LAMP Stack features to get you up and running with Vagrant in no time.

A lot of PHP websites and applications don’t require much server configuration or overhead at first. This box should have all your needs for doing basic development so you don’t have to worry about configuring Vagrant and you can simply focus on your code.

No provisioning tools or setup is really even required with Scotch Box. Since everything is packaged into the box, running “vagrant” is super fast, you’ll never have to worry about your environment breaking with updates, and you won’t need Internet to code.

Do you use Vagrant?

View Results

Loading ... Loading ...

Bringing Scotch Box Up

scotch

Once you’ve run vagrant up, you’ll be able to access your site at http://192.168.33.10/, you should see something similar to the image below.

Useful Stuff in Scotch Box

  • PHP 5.5
  • No Internet connection required
  • PHP errors turned on
  • Laravel and WordPress ready (and others)
  • Operating System agnostic
  • Goodbye XAMPP / WAMP
  • New Vagrant version? Update worry free. ScotchBox is very reliable with a lesser chance of breaking with various updates
  • Bootstrap and jQuery are saved in the server’s home folder in case you don’t have Internet (usually plains, trains or cars)
  • Chef and Puppet ready in case you want to add extra features on Vagrant Up
  • Super easy database access and control
    MIT License

Server Components Included

  • Apache
  • Vim
  • MySQL
  • PHP 5.5
  • Git
  • Screen
  • Composer
  • cURL
  • GD and Imagick
  • Mcrypt
  • Memcache and Memcached

Front End Stuff Included

  • NPM
  • Grunt
  • Bower
  • Yeoman
  • Gulp
vagrant-ssh

You can SSH to your server as well, by running vagrant ssh. Upon logging in via SSH you’ll see something similar to the image below.

Scotch Box is in its infancy still. It’s initial commit to GitHub was on October 6, 2014 and has about 10 commits in total.

Updating Scotch Box is easy too. To check for an updated version with Vagrant, do vagrant box outdated. That will tell you if there’s a newer version available. If there is a newer version available, you can update to it by running vagrant box update.

Head to the official Scotch Box website for more information on setting up databases, setting a hostname, and for more details on updating the box. Some basic Vagrant commands are also included to help you with basic Vagrant usage (ie: pausing, resuming, or destroying a server).

If you’re a LAMP developer like I am, and are tired of developing on your client’s dev servers, Scotch Box could be a good solution for you to develop locally. It’s sometimes much easier to develop locally then having to rely on a slow dev server provided by your client. :)

All the images in this post are included in the gallery below.

0

Free Flat Buttons Are Free

Include stylesheet, apply class, done.

I like flat design. I also like Free Flat Buttons, from freeflatbuttons.com. Did I mention they’re free? But most buttons are free, so the naming must be a marketing thing.

It’s been a while since Free Flat Buttons have seen any updates, but there’s really nothing to update in my opinion. They serve their purpose quite well. They look very nice when paired with FontAwesome, too.

Free Flat Buttons can be found on GitHub, it’s repository is very simple and only includes the button stylesheet and the HTML and CSS associated with the freeflatbuttons.com website.

They’re really simple to use, as they should be. All you have to do is include the CSS, <link rel=”stylesheet” href=”button.css”>, include the FontAwesome CSS if you want it, <link href=”http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css” rel=”stylesheet”>, and then add a class to an anchor tag.

For a normal sized button, something like this:

<a class="btn color-1" href="#">Color 1</a>

To make a button with rounded corners, use style-2, the other styles are listed on the freeflatbuttons.com site:

<a class="btn color-1 style-2" href="#">Color 1</a>

Aside from the homepage, a demo can also be found on CodePen. I’ve embedded it below. Version 1.0 of Free Flat Buttons can be downloaded from http://www.flatbuttons.com/button.css.

See the Pen Flat Buttons by Anıl Bilir (@Qanser) on CodePen.

0

Automate Taking Snapshots of Your DigitalOcean Droplets with DOSnapshot

Multi-threading. Auto-cleanup. Cron optimized.

There are a lot of neat tools people have built for DigitalOcean.

The app I’m really in love with is DOSnapshot, and is hosted on GitHub. DOSnapshot does exactly what its name would suggest, it takes snapshots of your droplets.

As of this post, I’m the only one that’s left a comment on the DOSnapshot Community Projects page, which took me a bit by surprise, given the quality of the tool.

Taking a snapshot of a DigitalOcean Droplet is essentially like making an exact copy of the Droplet (server) that you can then use again at a later time. Very useful for scaling and updating a Droplet to a newer version of your Linux distribution without losing all of the Droplet’s configuration.

Etel Sverdlov does a very good job of explaining the difference between snapshots and backups in this DigitalOcean community tutorial. I suggest you read it if you’re unsure what the differences between a backup and snapshot are.

1. Install DOSnapshot

DOSnapshot can be installed as a ruby gem, which is what I chose to do because it’s just so easy. Don’t install this on your DigitalOcean Droplet! It’s meant to run from your local machine. Installing DOSnapshot as a Rubygem is as simple as: 

sudo gem install do_snapshot

Pre-built binaries are also provided for Linux users, and OSX users have the option of installing via Homebrew Tap.

2. Set Your DigitalOcean Client ID and API Key

Once you’ve got it installed, you’ll need to set your DigitalOcean Client ID and API Key. You can set them as environment variables, or you can pass them as parameters when actually running DOSnapshot. This is straight from the README:

First you may need to set DigitalOcean API keys:

$ export DIGITAL_OCEAN_CLIENT_ID=”SOMEID”
$ export DIGITAL_OCEAN_API_KEY=”SOMEKEY”

If you want to set keys without environment, than set it via options when you run do_snapshot:

$ do_snapshot –digital-ocean-client-id YOURLONGAPICLIENTID –digital-ocean-api-key YOURLONGAPIKEY

3. Take A Snapshot

Please remember that running the do_snapshot command will cause your droplet to shutdown so the snapshot can be taken.

DOSnapshot has a pretty large number of options that you can specify. I’m going to keep this simple so you get the basics of it. Learning a few of the main options will be mostly what you need to know, after you’ve got them figured out, setting up a cronjob is cake.

You can take snapshots of all of your droplets at once, you can specify which droplets to take snapshots of, and you can specify droplets that you don’t want to take a snapshot of. I typically take a snapshot of a single droplet at a time, and I do it like this: 

do_snapshot --only 1111 -k 3 -c -v

The above will take a snapshot of only one droplet, a droplet with an ID of 1111, replace 1111 with the ID of your droplet. You can find your droplets ID in your browser URL bar while managing the droplet. So if you see https://cloud.digitalocean.com/droplets/1234567, your droplet’s ID is 1234567.

Here’s all of the options.

4. Scheduling With Cron

First, you must have cron installed. There’s plenty of tutorials on how to do that. That tutorial even explains how to configure a cron job using the crontab utility. There’s an example crontab entry in the DOSnapshot README. Mine is pretty simple: 

0 4 * * 2 do_snapshot --only 1111 -k 3 -c -v

If you have questions about setting any of this up, feel free to leave a comment!

0

Meet Unyson, A Drag & Drop WordPress Framework

Features a visual drag & drop page builder that will let your users create countless pages at a drop of a dime

Got an email from Olga at ThemeFuse yesterday announcing the release of their new drag & drop WordPress framework named Unyson.

Unyson comes with many built-in extensions, and the documentation seems to be very helpful and complete. Some highlights from the Unyson home page:

  • All the built in extensions & options work in perfect harmony. You’ll find developing on Unyson a breeze.
  • Your users will love the drag and drop page builder and the customization options built into
  • All you need to do is download the Unyson WordPress framework and start developing your theme.
  • We have a lot of tools ready to help you along the way: developer manual, Trello, GitHub Support and more.

unyson-docs
Unyson also includes an extensive list of customizations and options:

  • Page Builder
  • Option Types
  • Styling
  • Sidebars
  • Megamenu
  • Backup
  • Sliders
  • SEO
  • Breadcrumbs
  • Portfolio
  • Custom Widgets

I enjoy this theme so much because it has many features that premium or paid themes have, but Unyson is free! You can download the source on GitHub.

Getting started with Unyson is extremely easy, but slightly different than how you’d typically upload a theme. Installation of Unyson is like so:

  1. Download the framework archive from the framework’s GitHub repository
  2. Extract it to your parent theme directory. After this you must have framework/ directory in parent theme. It’s mandatory to have this exact same folder structure otherwise it will not work.
  3. Include the Unyson framework by adding this line in your theme’s functions.php:

require_once TEMPLATEPATH .’/framework/bootstrap.php’;

After that, you’ll need to add some more code to the beginning of all the PHP files associated with your theme. I suggest you go over the Getting Started guide and really pay attention so you get a good understanding of what Unyson can do. The documentation is really awesome, most issues or questions you could have are more than likely covered in the docs.

I haven’t had much of a chance to play with Unyson, but will get the opportunity to on an upcoming client project, so I’m really looking forward to that.

Unyson is quite new, so hopefully we will see more features as it matures. It’s definitely worth checking out.

0

Dark GitHub

GitHub Lights Out

I love the GitHub explore today emails. It’s a daily email consisting of currently trending repositories, repositories starred by people you follow, and repositories that have been starred by GitHub staff members.

The September 06, 2014 email included a repository that caught my eye, StylishThemes/GitHub-Dark. Apparently one of the people I follow on GitHub starred it, which is awesome. I may not have found this otherwise.

Dark GitHub requires that you have the Stylish extension installed for your browser. Stylish can be easily installed in Google Chrome or Mozilla Firefox.

So, before you go any further, make sure you have the Stylish extension installed. Click here for Stylish for Google Chrome, and click here for Stylish for Mozilla Firefox. Stylish is a very useful tool for changing the style of websites, they have an extensive repository of styles that you can apply to your favorite websites. As of this post, they have custom styles for 59,197 websites. Stylish is powered by userstyles.org.

The Dark GitHub userstyle comes with a variety of syntax highlighting themes, the ability to set your own background image, setting a base color scheme, and changing the code tab size (defaults to 4).

Installing the Dark GitHub Stylish Extension
Installing the Dark GitHub Stylish Extension

To install Dark GitHub, visit the GitHub-Dark userstyles.org page. Select your options (ie: syntax highlighting theme, background image, etc). I typically just leave everything at their defaults.

Once you’ve got the options set how you want, click the green Install With Stylish button, as seen in the image above. You’ll be asked if you’re really sure that you want to proceed with installing the GitHub Dark userstyle. If you do want to install it, just click OK.

Now visit GitHub and enjoy the dark colors! :)

dark-github
0