Tag: code

Quickly Deploy LAMP Stacks with ServerPilot

Easily Deploy LAMP Stacks, and it’s free

I have yet to use ServerPilot, but will be setting up a new VPS at DigitalOcean in the coming weeks for a new venture. ServerPilot makes getting a LAMP stack setup very quickly.

ServerPilot will automatically install Nginx, Apache, PHP, and MySQL on a new, freshly installed/created, 64-bit Ubuntu 12.04 or Ubuntu 14.04. So if you’re using DigitalOcean, create your Droplet, and SSH to it. You should be able to harden SSH up a little, but make sure you don’t install any new packages yet.

Getting Started

Getting started with ServerPilot is crazy easy. All you need to be able to do is SSH into your server and run a command. I highly doubt anyone reading this doesn’t know how to do this. If you don’t, Google will tell you how.

1. Sign Up

Sign up for a free account with ServerPilot.

2. Connect A Server

“Connect” a new server. Just enter your servers hostname and click the “Continue With Setup” button. Screenshot below.
serverpilot-connect-server

3. Run The Install

Connect to your server via SSH. Remember, it must be a new server, preferably with no additional packages installed yet. To install Nginx, Apache, PHP, and MySQL, run the command below, from this gist:

The --server-id and --server-apikey values will be provided for you, they’re blacked out in the screenshot below.
serverpilot

Additional Information

On GitHub

ServerPilot also has a GitHub account with two repositories currently. One is ServerPilot/Vagrantfile and the other is ServerPilot/API.

ServerPilot/Vagrantfile

This repository provides a sample Vagrant configuration for testing ServerPilot. Basically a server that you can use to test ServerPilot before using it on a new, paid VPS. The README is very detailed, definitely read it if you need help using Vagrant. There’s even an example on using composer to create a Laravel app.

ServerPilot/API

From the README, The ServerPilot API is RESTful and allows you to manage ServerPilot resources using HTTP requests. All responses return JSON objects, including errors. As seems typical from ServerPilot, the documentation in the README is excellent.

The API will let you do things like list servers, connect new servers, or list all system users, among many others. An example that would list all servers can be seen in the gist below.

That request would return JSON similar to this:

Do you use Vagrant?

View Results

Loading ... Loading ...

Paid Accounts

You get a pretty cool monitoring dashboard for $10/month. I found the screenshot below in a post from Jake Peterson, it appears to be the ServerPilot monitoring dashboard.
serverpilot-dashboard
There’s the free plan, obviously, and then two paid plans. One is $10/month and the other is $49/month. You can see what you get for your money on their pricing page.

End

If you’re a PHP developer and use a VPS provider like DigitalOcean or Linode, ServerPilot is probably worth checking out. Even if you don’t end up using, it’s pretty neat that something like this even exists.

I only have one feature I’d really like to see, the ability to select certain packages to be installed. If that were included in the $10/month plan, I’d definitely do it. As it stands currently, though, it’s definitely a time saver and very well executed.

0

Add Open Graph Protocol Markup to Any WordPress Theme

Rich objects in a social graphs

When you share a link on Facebook, an image from the link is shown, usually. Sometimes, no image is displayed, as if Facebook couldn’t find a suitable image at the URL.

Why?

Adding Open Graph protocol tags to your site will ensure that Facebook knows which image to use when someone shares a page on your website. Open Graph markup is similar to schema.org markup. Both allow you to define values for certain aspects of your website, as seen by other sites like Facebook, Twitter, and many other social media sites.

How?

There’s a couple of ways we can do this. You can use a plugin, like Open Graph Protocol Framework, or you can add Open Graph markup to your WordPress theme manually.

We’ll be covering how to add Open Graph markup to your theme manually. Especially useful for theme developers who want to build Open Graph protocol support into their themes.

The markup we’ll be adding can be seen in this GitHub gist:

Most of that should be pretty self-explanatory.

The og:type property is the only tag that needs explanation, as there’s only certain values that are valid. Most of the time, you’ll probably be setting the og:type property to article or website. A list of other Open Graph protocol object types can be found at the Open Graph protocol site.

The Code

Every Open Graph property will be set on-the-fly, depending on which post or page is being viewed or shared. To add the necessary markup, we need to use the add_action WordPress function inside your theme’s functions.php file. Here’s how I’ve been handing it:

Comments are open below, feel free to ask questions or tell me how wrong I am on one point or another. 🙂

1+

HTML Boilerplate

I’ve been using this for a boilerplate lately, it’s pretty nice, and not all that different from the piece of HTML I’ve had saved on Dropbox for the last 10 years.

It provides a bare, standards-compliant starting point for your websites, giving you just enough to get started, making it easy to add your own stuff in.

It’s available under the MIT license, which is GPL compatible, and can be downloaded from GitHub.

There are a few things you may want to customize before you start writing a bunch of content, though. This is taken straight from the README on GitHub. Take these points into consideration, especially page titles, css includes, and javascript includes.

  • Document’s language
  • Meta description
  • Title
  • Favicon file
  • CSS includes
  • Javascript includes
0

Poll: Which Language?

Just an unscientific poll of Hacker News and Designer News users (mostly)

Choose your favorite 3:

View Results

Loading ... Loading ...

Results will always be publicly available. This is more of a practice simply to help me gauge where I should go from PHP and JavaScript. Golang is enticing and is currently what I’m leaning towards.

Hacker News thread, and Designer News thread.

0

Sticky Alerts: A New, Tiny jQuery Plugin

A super tiny sticky alerts plugin

Why?

Just because. Sticky Alerts can be downloaded here, and a demo can be seen here.

This pen from Thommy Browne caught my eye. The sticky alert bar was made with some very simple jquery and a bit of CSS.

I’ve been quickly increasing my JavaScript knowledge and figured I’d try creating a legit jQuery plugin, using the code from Thommy Browne. After a couple hours of tinkering, I had it! I was really surprised how easy it is to create a jQuery plugin, even adding options to plugins is crazy easy.

So, if nothing else, this was simply an exercise in creating a jQuery plugin.

Get It

You can see the plugin in action at https://sticky.longren.io/, which is hosted on GitHub Pages. The plugin itself can be downloaded from GitHub. The JavaScript is incredibly small, a total of 36 lines, which could easily be condensed into about 5 lines.

jQuery Sticky Alerts is available under the MIT license and is free for use on personal or even commercial projects.

Using the plugin is extremely easy. Just define the container you want the alert to sit in, make sure jQuery and jquery.stickyalerts.js (and jquery.stickyalerts.css) is loaded, define some options, and you’re set!

You can also use jQuery Sticky Alerts with bower and npm.

You can see usage instructions at the GitHub project page. Below are the options in use on the demo page:

Get It For WordPress

Mike Smith was generous enough to build a WordPress plugin using my Sticky Alerts jQuery plugin. The plugin is called Guerrillas Sticky Bar and can be found at the WordPress plugins page.

Provide Feedback

I’m new to building jQuery plugins, so let me know if I’ve made any errors or if you see anything I could be doing better (I want to learn!!). You can leave a comment on this post or create an issue at GitHub. Pull requests are also welcome! :)

If you decide to use Sticky Alerts in a project, I’d love to know about it! Just drop a link in the comments.

4+