Pure CSS Vertical Divider

So several months ago I had a few designs come by my desk requiring vertical dividers between the columns of a grid system. If you have done any front end development for some time you will know how much of a pain this can be. The requirements that I required for a vertical divider were the following, dividers need to expand to the column with the most amount of content, need to have some responsive aspect to it, needs to be able to be added to other columns fast. So after racking my brain for several hours, I came up with the solution below.

Please feel free to pick this apart and adapt it to your frameworks and grid systems!

BackupBuddy saves the day… again.

Three years ago, I joined an agency that up until my arrival had been manually migrating their WordPress sites. This processes usually involved pulling down all the site files through FTP or compressing them through shell on a development server, exporting the mySQL database through phpMyAdmin, uploading the site files to the live server, modifying some sort of config file, importing the mySQL database to the live server, edit a few tables in the database to reflect the live information, and followed up with a find and replace in all the content (usually with a lot of praying and cursing in between). Several hours and failed migrations later I determined there had to be a better way.

After a few Google searches the answer was obvious. Enter BackupBuddy!!! BackupBuddy by iThemes claims to have the best way to back up and move a WordPress site and I would agree. After using the plugin for a few years, I have easily migrated 50+ sites.

So why am I writing about how amazing BackupBuddy is today? Generally speaking I use BackupBuddy to migrate developments sites usually no larger than 500mb in size. Well, today I needed to move an existing site that came in around 2.5GB in file size and an uncompressed database of over 500MB to a development environment to work on. Think of it as if I duplicated a shitty car, park it into my garage to work on, then burned the old car to the ground, and rolled the now fixed car out of the garage. Now until now I had never attempted to migrate a site of that size with the plugin, usually because the existing site would be coming from some shitty server that wouldn’t be able to handle it. The success of a migration has a lot to do with the quality of where the site is currently hosted. But I had few options this time around as I did not have access to the servers databases. So I fired up BackupBuddy and ran a backup which the first time around halted at around 2.4GB of file backing up, which is damn good, but unfortunately the server wasn’t powerful enough to capture the whole thing. So then option two, I pulled down all of the site files, moved them to the development server, then ran BackupBuddy to backup the database only, followed the BackupBuddy instructions to migrate, and SUCCESS. A WordPress site with about 10,000 posts with large amount of images successfully migrated.

So buy BackupBuddy (Note: this was not paid for or sponsored by iThemes, I just really like the plugin.)

Switch from Dreamweaver to Sublime

switch-from-dreamweaver-to-sublime

So several months ago I switched from Adobe Dreamweaver to Sublime Text. I switch for a number of reasons, many of which I will talk about below. If you are thinking about switching here is some good information to have during the transition.

Reasons to switch to Sublime Text

1. It’s much faster.

In every sense, Sublime Text is faster than Dreamweaver. Load time takes mere seconds and switching between projects in an instant. Coding also becomes faster with the addition of packages such as Emmet you can write several lines of code in just a few keystrokes.

2. Custom Themes and Layouts

Changing Dreamweaver to a dark theme has long been a pain in my ass, very talented developers have created gorgeous themes for Sublime Text that are easy to install, making staring at code for hours on end an absolute pleasure. Sublime Text also has several different layout options to place separate files next to each other horizontally, vertically, in a grid fashion and more.

3. Cheaper and all the cool kids are using it

A license for Sublime Text is $70, compared to Dreamweaver CC which could cost you $19.99 a month for just Dreamweaver or $49.99 a month for the entire Creative Cloud Suite. Which is a kick ass deal if you are using a large amount of Adobe products, but ultimately more expensive if you only need a text editor. I’ve long said Dreamweaver focuses too much on the shitty live preview and WYSIWYG editor. The direction of Dreamweaver is not that of a programmer, but some hybrid designer/developer. So why not switch to a “real programmers” 🙄 text editor like Sublime Text, Atom, or Vim.

Recommended Packages for Web Development

Out of the gate, Sublime Text does not come with most of the features that Dreamweaver does. In my opinion, this is a good thing. I don’t need dozens of panels that I never use cluttering my window. None the less, some of those features are a must have for my workflow. Listed below are packages I use to regain some of those features and a few others that are just awesome.

To start you are going to need Package Control, a Sublime Text package manager that makes finding, installing and managing your packages easier.

AutoFileName

Do you ever find yourself sifting through folders in the sidebar trying to remember what you named that file? Can’t remember if it was a jpg or a png? Maybe you just wish you could type filenames faster. No more.

Whether your making a img tag in html, setting a background image in css, or linking a .js file to your html (or whatever else people use filename paths for these days…), you can now autocomplete the filename. Plus, it uses the built-in autocomplete, so no need to learn another pesky shortcut.

BracketHighlighter

Bracket Highlighter matches a variety of brackets such as: [](){}""''<tag></tag>, and even custom brackets.

CSSFont Family

CSSFontFamily is a Sublime Text 2/3 plugin with a collection of font stacks autocomplete.

Emmet

It is hard to explain Emmet, But you must get it. Trust me.

SFTP

Commercial SFTP/FTP plugin – upload, sync, browse, remote edit, diff and vcs integration

Sidebar Enhancements

Provides enhancements to the operations on Sidebar of Files and Folders for Sublime Text.

Theme – Spacegray

I love this theme so much. I honestly forget what Sublime Text looks without it.

I’ll be speaking at WordCamp Ann Arbor October 4th, 2014

wordcamp_ann_arbor_badge

Very similar to my last talk in Columbus, i’ll be speaking on using Frameworks and Child Themes in your development process to create a more sustainable result. This is primarily a Developer/Workflow track talk, but I think anyone who tinkers with WordPress Themes would benefit. If you have never been to one of my talks you are in for a fast talking, loud, cussing, short guy pacing back and forth. I hear Ann Arbor is gorgeous and look forward to speaking, showing, and Q&A with everyone! See you at WordCamp Ann Arbor.

For more information about WordCamp Ann Arbor visit their site.

First Impression of DigitalOcean

digital_ocean_logo_1200x900

I have been desperately looking for a hosting company to house my personal and freelance projects. In my line of work, I’ve used a handful of hosting companies (HostGator, Dreamhost, DewPixel, Rackspace, and dozens more) and formulated an opinion on them all.

Where I work I’ve finally landed on Rackspace Cloud Sites, which I immediately fell in love with. To dumb down a much more complicated product Cloud Sites is basically like a shared hosting plan on steroids. I loved it because it integrated wonderfully with our team’s process and knowledge, easy enough for nontechnical folks to handle, yet robust to handle more complicated projects. It comes with a price tag starting at $150 a month and rightfully so, it is an amazing service. But that is a tad too hefty for my personal projects. I needed something that was reliable, scalable, fast to deploy, and affordable. After several months of testing and countless Google searches which didn’t wield me any closer to a solution, I turned to Twitter to see how my fellow nerds handled their hosting.

Which erupted into a 50+ reply string involving representatives from several hosting companies competing for my business (something I did not expect). After the smoke had cleared and statements made I found myself giving DigitalOcean a shot.

I had attempted to use DigitalOcean a year ago and found the service to be too difficult to be used on a regular basis, requiring knowledge of command line and server set up I did not have, nor the time to learn. To give a bit of perspective I am a web developer. I build things that go on servers and spend minimal time on the server setup. But I was assured that the service has matured and may suit my needs.

So it has been just shy of a week of using the service so it is a bit too early to determine its long term advantages, but so far I am completely nerding out over the DigitalOcean platform. With DigitalOcean you can launch a SSD VPS service which they call a “Droplet” for the ridiculously low starting price of $5 a month. Doing a very quick and crude comparison to similar packages on other providers it was obvious this was the most affordable VPS hosting.

I tested two separate methods of using the Droplets as well. The first method involved launching a fresh site from a Droplet that installs WordPress for you and the second method of migrating an existing site into a LAMP Droplet. Both took around 25 minutes to complete from start to domain propagation, which was acceptable being the first time using the service and both required a moderate amount of command line knowledge. Additional command line steps do not fit my current web development process, but their documentation and knowledge base are well written and vast making it easy to accomplish these tasks.

Also, response time is amazing, this site has hovered around a 250ms load time since moving.

So my next steps in using DigitalOcean for all my personal and freelance needs will be to set up a Droplet with some sort of Control Panel that can handle multiple domains and databases to limit my time inside of terminal manually setting up sites.

Overall I am pleased with my decision and I’ll keep you informed if that ever changes!

5 Free Plugins Everyone With a WordPress Site Should Be Using

I have been developing WordPress sites for a long while now and have found a handful of plugins I couldn’t live without. I list them below in no particular order. I would love to hear what some of your must have plugins are in the comments.

WordPress SEO by Yoast

Do you like traffic to your site? Do you not have WordPress SEO by Yoast install? WHAT IS WRONG WITH YOU GO INSTALL AND CONFIGURE IT NOW! WordPress SEO by Yoast is the go to plugin to optimize your site for search engines. Easily edit page titles and meta descriptions, create xml sitemaps, modify robots meta, clean up your head section and much more. Also Yoast just partnered with the web security company Sucuri so you know it is legit!

Download Here

Stream

Update 4/30/15: I am putting this one on the bench for a while, will revisit soon.

Ever have a team member or client change something on your site, but can’t figure out exactly what, where, or when? Well Stream solves all of that by tracking every little move you make inside of WordPress including auto updates and displays the data in an easy to read and filterable manner. Never again will can a client call up yelling that you broke something on their site when in reality they uninstalled a key plugin.

Download Here

iThemes Security

Update 4/30/15: I have since found iThemes Security to be a bit buggy, I recommend reading the Hardening WordPress info as well as developing and maintaining a tip top WordPress install.

Somewhere out there is a someone or something trying to ruin your day right now. Hackers, bots, malware, and a slew of other nasty bullshit is trying to destroy all your hard work. Protect yourself with iThemes Security. iThemes Security protects your site against brute force attacks, common WordPress security flaws, banns known offenders, detect file changes, and so much more! If you are running a site without this plugin installed you are asking to be hacked. Just do me a favor and install it right now.

Download Here

WooSidebars

They way sidebars and widgets are currently handled in WordPress could use an overhaul. They have since outgrown their original purpose and are now being used to serve up large amounts of dynamic and custom content on a per situation basis. While WordPress core has done little to assist in these features a handful of plugins have come to ease the pain. I have used a fair amount of plugins to handle custom widget areas ( Display Widgets / Sidebar & Widget Manager ) none have been as simple and lightweight as WooSidebars.

Download Here

Akismet

Akismet is an anti-spam plugin that comes installed on every WordPress site installed. So why are so many of us guilty of never activating it? Is it because it requires you to associate it with a WordPress.com account which would take a whole 5 minutes of your life to sign up for? I guess you just like huge amounts of spam piling up in your database filled with malicious links and link bate galore? I will admit from an agency perspective it is a little bit of a pain to set up Akismet on every single site we build, but it’s benefits surpass that folly.

Download Here

WP Decoded Podcast

I was able to hop on the very first WP Decoded podcast to talk about WordPress Columbus 2014 and WordPress 4.0! Unfortunately, had to take the call from my car so my signal was poor and was dropping in and out with a bad delay. Hopefully, no one thinks I was talking any derpier than I usually do!

Watch the podcast below and get more information about WP Decoded right here.

Come to the Cleveland WordPress Meet Up!

I have started a WordPress meet up group in the Cleveland Area! If you are interested at all anything WordPress related ( web development, blogging, etc… ) feel free to stop by our events that take place on the second Tuesday of every month. The location changes from month to month to give more opportunities to those who live in surrounding areas. For more information on specific events visit our MeetUp page at Cleveland WordPress Meetup.

I’ll be speaking at WordCamp Columbus on August 2nd

SPEAKERS_BADGE

I will giving my “Using a Frameworks and Child Themes” talk at 3:30pm in the Lecture hall at WordCamp Columbus located in the CompuSuites building ( 5000 Arlington Centre Blvd, Bldg. 2 Upper Arlington, OH 43220 ).

Like the title of my talk implies I will be going over using Frameworks and Child Themes to build websites on WordPress. Over the past several years I had the unique opportunity to create a process for building websites using WordPress which lead me to develop a theme framework to rapidly deploy themes. If you can not attend the WordCamp I will make the slide available online, but you will miss out on me mumbling and fumbling my way through a presentation. 😉

More info on WordCamp Columbus 2014

Fullscreen Masthead

A very popular feature among sites right now is to have a call to action or as I like to call them a “Masthead” that occupy the entire browser window and scales to fit any browser size. It is a great way to get a single message across to your audience without other site elements distracting or using a terrible slider. But I found it terribly hard to Google this feature and an array of methods to achieve this effect.

I choose to stick with a simple CSS solution for the Masthead and borrowed some javascript from MightyScroll to achieve the desired feature. Feel free to play with it below.

[CodePen height=400 show=result href=niqKL user=philhoyt ]