Posts filed under "Code" - Steve Grunwell

Automatically Recompile Sass upon Deployment Using Git Hooks

October 10, 2012

When I’m the only one working on a site, compiling my Sass files locally and committing the generated CSS isn’t the worst thing in the world. When you’re working in a team environment however, it’s necessary to consider that several developers of different experience levels may touch a site throughout its lifecycle. What would happen if a developer who had never used Sass needed to make an update to a site? How long would it be before someone starts complaining that the change they made to the CSS file was overwritten after the next compilation of the corresponding .scss file?

This technique has one goal: keep generated CSS files out of the git repository. In order to do this, we’ll need to make sure of a few things:

Generated files are explicitly blocked from the repo (to prevent someone who doesn’t know any better from committing them)
Automatically recompile our SASS files into CSS upon deployment.

Continue reading→

An Introduction to Sass in Responsive Design

October 4, 2012

In Code

I’ve been wanting to explore CSS pre-processors for several months and re-building this site seems like a good chance to get my feet wet. I’ve been following the debates between the two most popular pre-processors, Sass and LESS, and decided that for my purposes and experience, Sass would be a better fit.

Using a workflow that I learned in the Build Responsively Workshop, I wanted to create separate .scss partials for each of my breakpoints, then import them into my main stylesheet using media queries and @import statements within my main Sass stylesheet (style.scss). Normally I avoid @import statements in my CSS files (which would prevent stylesheets from being downloaded in parallel), but the compiled nature of Sass means that the only time these files are actually imported is when the actual CSS files are generated. Importing multiple Sass partials also a) keeps my styles organized better (with no performance hit) and b) allows me to easily re-use partials for alternative stylesheets.

Continue reading→

Quick Tip: Override WordPress Toolbar Styles

September 10, 2012

In WordPress

I’m working on a project right now that uses the WordPress Toolbar, that dark-colored bar at the top of the administration area (and optionally your site) since version 3.3, as part of the site template. Unfortunately the default styles didn’t quite cut it for this project, so I needed to come up with a way to override these styles with my own.

Continue reading→

Keeping WordPress Under [Version] Control with Git

September 4, 2012

In WordPress

Over the last year or so I’ve been deploying my sites and applications almost exclusively through Git. It took a while to get used to, but pushing all of my code through git has forced me to think through my code before committing (lest I get git blame’d), kept me concentrated on the task at hand, and has made collaborating with other developers so much easier. Deploying WordPress sites through Git require a little configuration; this article outlines my personal Wordpress-Git workflow.

Continue reading→

Quick Tip: Set the Default Display Name for WordPress Users

August 31, 2012

In WordPress

I started work on a new WordPress site this morning and, after creating a couple of users, quickly got bored manually setting each user’s nickname and display_name properties in order to display authors as “firstname lastname.” I found a few forum posts in the WordPress support forums for “how do I automatically set the display name for WordPress users?” that had partial answers but no real solutions. Then I stumbled on this article by Rares Cosma that had just what I needed.

Rares’ solution uses the user_register WordPress action hook, which gets triggered when a new user account is registered. I modified his original version, streamlined it a bit, and applied the ‘firstname lastname’ pattern to both the display name and the nickname attribute.

Continue reading→

Using Git Checksums to Invalidate Browser Caches

August 29, 2012

In Code

I’ve been having a lot of fun with the new, open-source version of this site and have been looking for opportunities to experiment with things I’d have little reason to do on client sites. For instance, I wanted to see if I could get the current git checksum as a string using PHP (without resorting to shell commands) so that I could display it in the comments of my WordPress template. Once I was able to achieve that, I took it one step further and used it to invalidate browsers’ cached versions of my scripts and styles anytime I made an update to the theme.

Continue reading→

Using Advanced Custom Fields for WordPress

August 23, 2012

In WordPress

If you regularly build WordPress sites and haven't tried Elliot Condon's Advanced Custom Fields plugin, I'd highly recommend checking it out as it will forever change the way you use WordPress.

With Advanced Custom Fields, you can easily define custom field templates for particular post types, page templates, or even individual posts/pages. With the help of some paid add-ons, you can quickly add support for repeaters (useful for carousels/sliders), a site options page (hello Google Analytics profile ID), or any of a dozen other official and third-party add-ons.

Continue reading→

Using jScrollPane with jQuery UI Draggable

August 6, 2012

In Code

An application that I’ve been working on recently makes heavy use of the jQuery UI library, particularly the draggable, sortable, and droppable modules. Users need to be able to sort a list of locations by dragging them within a fairly confined space. Since the area containing the list items has a fixed size, scrollbars appear when the list exceeds the bounds of the pane.

Normally, $.draggable( { scroll: true } ); is enough to get jQuery UI to work with the native browser scrollbars. For this particular project, the design called for custom scrollbars, which led me to Kelvin Luck’s jScrollPane jQuery plugin. Unfortunately, while jScrollPane allows us to style scrollbars however we wish, they doesn’t behave exactly like those native to the browser.

Continue reading→