12 Feb 2014
Oftentimes when I'm prototyping a website or just want to tinker I'll launch a quick local server through the terminal with the following:
cd ~/Sites/MyWebsite
python -m SimpleHTTPServer
You can then access the website at http://localhost:8000.
OS X Mavericks shipped with PHP 5.4 which introduced a handy built-in web server. You can start a PHP server with the following command (hat tip @davatron5000):
cd ~/Sites/MyWebsite
php -S localhost:8000
Keep in mind this isn't a full-featured PHP web server with .htaccess support or MySQL, but you can plop in <?php include("header.php"); ?> and that sort of thing. It's perfect for testing and situations where you need to fire up a quick demo.
I find myself using this feature nearly every day so I created an alias for it. You can do this by adding alias srv='php -S localhost:8000 to your .bash_profile. This way you can simply type srv to fire up the server. Many times I'll have multiple projects open and need to start a server on a different port so I also have the following function in my .bash_profile:
function serve {
php -S localhost:$@ |
open -a "Google Chrome" http://localhost:$@
}
Then you can, for example, type serve 8888 in the terminal and this will start a server and also launch a chrome window at http://localhost:8888.
10 Jun 2013
I know a lot of folks are moving away from designing sites in photoshop and going straight to designing in the browser. I still like designing and coming up with rough comps in photoshop. I don't spend as much time getting things "pixel perfect" in a 960 grid as I did in the past, however, I like to design interfaces, color schemes, buttons, and come up with the overall look and feel of a site before moving to the browser.
Lately I've been using a handful of plugins that improve my web design workflow. Here are a few worth checking out:
CSS3Ps is a handy tool that converts your layer styles into CSS3. It works really well for quickly grabbing gradients, borders, box shadows, etc. It doesn't always turn out perfect, but gives you a nice starting point. And for Sass users, it can spit that out as well.
Enigma64 exports your photoshop layers to losslessly optimized images but even cooler is it's ability to export and encode your images to Base64. $20 ain't too shabby for the amount of time it can save.
Web zap aids in creating website mock-ups by giving you the ability to generate common interface elements with the click of a button. It generates lorem ipsum text and common layout patterns with ease. It also has a nice preview feature that will take your design and put it in an iPad/iPhone, etc.
The FontShop plug-in gives you the ability to test out and preview a massive amount of fonts in your mock-up. It can be extremely useful if you use TypeKit as a lot of the fonts in TypeKit are in FontShop as well.
Creating rounded corner boxes in photoshop is easy, however, if you've ever tried to resize them you'll know that the corners don't maintain their radius and become distorted. Corner Editor is a simple free script that makes working with rounded borders in photoshop much less frustrating.
I always wished photoshop had a "transform each" option like in illustrator. Luckily, Kamil Khadeyev wrote an awesome little script that brings that feature into photoshop. I highly recommend checking out his blog for other useful PS scripts.
02 Jun 2013
Advanced Custom Fields is my essential go to WordPress plugin. It's the first, and sometimes only, plugin I install when developing a theme for clients. ACF fills in a lot of short comings that WordPress has as a CMS. It gives you the ability to create extremely customizable custom fields that you can assign exactly where to appear. For example, if you have a field that is only specific to a certain template you can assign that field to only show up when that template is selected.
Keep code out of the page/post editor
We're all guilty of plopping in code that handles layout in the WP post editor. Of course this can get a bit sketchy and the client can easily turn your beautiful perfect design into a mess. ACF makes it much easier to separate the content from your HTML and CSS. No more <div>'s and <span>'s sitting in your post editor.
ACF is free, however, there are a few pay add-ons. The repeater field is my favorite that I use on nearly every project. It's perfect for creating repeatable entries like tabular data. You define what sort of content the columns will hold and can then add as many rows as needed. Elliot Condon, the plugin developer, has a nice tutorial on creating a custom image slider you can find here.
Here's a simple example of something I set up recently with ACF. The client wanted to be able to choose and upload a header photo for each page of the site. In addition it needed to do the following:
- Default to a general default picture if no header photo is chosen for a page.
- For subpages/child pages the photo should default to that pages parent header photo.
All I had to do was create an image field (in the example below the field name is "masthead") and use the following code in the template:
<?php
/* Check if a header photo has been uploaded to the page */
if(get_field('masthead')): ?>
<?php $image = wp_get_attachment_image_src(get_field('masthead'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('masthead')) ?>" />
<?php
/* If not then use it's parents header photo if it has one */
elseif(get_field('masthead',$post->post_parent)): ?>
<?php $image = wp_get_attachment_image_src(get_field('masthead',$post->post_parent), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('masthead')) ?>" />
<?php
/* Finally fallback to a default picture if neither exist */
else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/default.jpg" alt="">
<?php endif; ?>
Pretty neat stuff - check out more uses and examples at advancedcustomfields.com.