As a developer, I’m always looking for ways to improve my processes for coding and running the business. I’m also a bit obsessed with organizing things – be they physical or digital. Things are constantly changing around here – although it seems that some of the apps, processes and equipment I use never do change, which I take to be a sign that they’re still working well.
Every new year, I like to review how I work and I’m always interested in how others accomplish the same thing. Let’s take a look at my physical and digital workspaces, the apps I use to run my business, how I organize my code and my business goals for 2016.
Note: None of the links in this post are affiliate links, nor am I getting paid or freebies for talking up these cool apps, plugins and people. Enjoy!
My Physical Workspace
My physical workspace doesn’t change much, except I periodically clear off all of the clutter or decor and start afresh. Above my desk are vintage British travel posters and a watercolor world map by Meera Lee I’ve also several gorgeous British travel postcards and greeting cards sent to me by friends, and my racing medals. All of these serve to motivate me and remind me of what I’m working towards (more travel and better health, of course).
There’s nothing much frivolous on my desk, except a few Sailor Moon models and one of my favorite framed cross-stitch pieces. I usually also keep a glass of water or tea on my desk and a paper to-do list. I love to-do lists, as you’ll see in the app section below. I can’t keep a lot on my desk because I’m easily distracted by clutter.
Technology-wise, I’m running a 27″ Thunderbolt display and a beefed-up 15″ Retina Macbook Pro. I’ve also got the original bluetooth keyboard (with a dalek exterminate button cover) and mighty mouse, both of which use rechargeable Apple batteries. The batteries were a new addition to my line-up this year, after years of buying and replacing disposable ones.
The Macbook is sitting on a Twelve South HiRise to bring the height up and I use an Apple Time Capsule for backups and wireless internet.
Internet-wise, I’m currently running around 94mbps in Nashville, thanks to a recent free Comcast upgrade. We’ll most likely upgrade to Google Fiber as soon as it’s out (hopefully very soon).
My Digital Workspace
As simple as my office is, my digital workspace is quite a bit more complicated. I use Mac’s Spaces to keep everything separated out, and usually one app per screen.
SPACE 1
Space 1 is my main workspace. On the left (Thunderbolt) screen I use Panic Coda full screen for my development IDE (with it’s built in FTP instead of an outside app), and on the right (Macbook) screen, I keep my design programs open – usually Photoshop but sometimes Illustrator or Sketch. This allows me to see what I’m coding while I’m coding, and saves me time from having to switch between apps, especially when selecting text and colors.
I don’t often work outside of WordPress, since I love the CMS, but there are a few times I need to build static sites, whether in standalone PHP or HTML only. Hammer for Mac is great for building static HTML sites while allowing you a templated feature similar to using PHP or some other backend language. I’ll also occasionally use MAMP if I’m writing up something PHP, but prefer to build WordPress sites on a live development server of mine.
If I’m working with other developers on the same project, I’ll also use the Github Desktop app (as I still hate the command line). I also recommend Balsamiq Mockups for super fast wireframing. I don’t usually use the app for client work since I don’t offer design, but do use it a lot for working out the layouts of my side projects.
SPACE 2
Space 2 is where my browsers, personal apps and email live. I work mainly in Chrome, full size on the left screen, for both development and casual browsing. The Twitter App sits in the background on the right screen, behind Mail app, which i still prefer to use above other email apps. I also usually keep Messages open here.
If I’m testing a website, this is where I’ll open Safari and Firefox. For IE testing, I use VMware Fusion with Windows 8 and IE Edge installed. This allows me to emulate IE9-11 (which is all I support right now), as well as the occasional glance at Windows Firefox and Chrome if there’s a weird bug present.
SPACE 3
Space 3 is where all the business apps are organized. On the left screen I use iCal for 3/4 of the space to show my calendar, which I keep both personal and business appointments on, especially because I have a nasty habit of double (or triple) booking myself for meetings. The rest of the space on the left screen is taken up by Wunderlist, which keeps dozens of my to-do lists. I’ve lists for pieces that need to go in my portfolio, places I want to travel, wishlists, house lists and more. I’m a serious list fanatic, and should probably see a doctor about this.
On the right screen, I keep the original Billings app up full screen for client management. Unfortunately, they no longer support the standalone app, but I’ll keep using it until it doesn’t work anymore, because I really hate the idea of both online client management and a monthly fee for it. Billings is great for client estimates, invoicing, expenses and payments – and best of all it has a series of reports that makes tax time a breeze.
MOBILE TESTING
I’m currently doing all of my mobile testing on a 1st Gen iPad Mini and an iPhone 6. I also have an old Android 2.5 for testing, though I rarely need to use it. Thankfully, 2015 brought with it better desktop and mobile browser consistency.
Coding Practices
Here are the things I haven’t changed this year:
- Still Desktop-down responsive coding
- Still Anti-Preprocessor
- Still a WordPress lover
“Core” Plugins
My must-use WordPress plugins have expanded to Contact Form 7, WP Page Navi and Advanced Custom Fields PRO. ACF Pro has turned WordPress into a supremely easy-to-use, customized to the client, organized CMS. I couldn’t live without this plugin. I’ll often use The Events Calendar, AJAX Load More and Geo My WP if necessary. Everything else I pretty much custom code or leave it up to the client to install themselves. I do recommend this additional plugins if they ask:
Organized CSS
My CSS has become more and more commented and organized over the years. I don’t comment on functionality, but on sections. I section out the CSS with a super long comment for:
- Core Body styles (reset, html, body, h1-h6, a, a:hover, etc etc)
- Header styles
- Nav styles
- Footer styles
- Homepage styles
And from then on, a long comment for each template or page.
Shorter comments are used to delineate sections within each template. For example, a homepage might have:
- Hero
- Intro text
- Three column callouts
- Testimonials
The sections are in order from top to bottom in relation to the design. The properties themselves within each rules are alphabatized. For example:
- background
- color
- font
- margin
- opacity
- position
- width
Organizing CSS like this has made it super easy to find and update styles after the site has been done and launched (and forgotten about) for months. It also makes it super easy for people to come behind you and make updates.
Organized HTML
There’s nothing super special about the way I organize my HTML, except to say I like a lot of spacing around sections and I indent with auto spaces. Lately, I’ve been adding comments to delineate sections, almost mirroring the sectioning in the CSS. The longer the code on each file, the more precise I comment what each section is. I still don’t make “techie” comments, since HTML (like CSS) is explanatory by itself.
I’ve gotten out of the habit of using a lot of IDs, unless I need it for a unique purpose, or for Javascript. I prefer descriptive dash classes, but try not to use more than 2 or 3 words. Here’s some examples of classes I might use:
- page-hero
- large-callout
- intro-content
- testimonial-content
I’ve read about the BEM method, but haven’t been interested in trying it yet.
Organized PHP & JS
My PHP and JS *are* commented for both sectioning AND functionality. I’ll section out both similar to CSS and HTML, but then also add inline comments for explanation if it’s anything beyond the most simple functionality. Most of my PHP is still related to WordPress, though I do more custom stuff now.
Hosting
I don’t normally deal with hosting for clients, but am happy to recommend a few different providers if they ask. Currently, I use Mediatemple for my own site and Siteground for my client dev server. I’m also a big fan of WPEngine myself, as a lot of clients use it so I have a bit of experience with their setup.
What I Learned Most in 2015
Although I felt a bit stagnate in 2015, upon really looking back I have learned *tons*, just not necessarily in my main area of front-end development.
Flexbox
Flexbox has been a lifesaver for me, and I make almost daily use of Chris Coyier‘s Flexbox guide, though I’m finally starting to memorize all the new rules.
CSS Filters
I’m just starting to hop into learning about CSS Filters. Though I’ve only use it once for a B&W rollover effect, I’m already loving this functionality and will probably use it more in 2016.
More PHP & jQuery
My knowledge of non-WP-related PHP and jQuery has expanded greatly this year. I’m more likely to write custom jQuery (and even some AJAX now) than use a plugin or add-on. I’m also getting better at reading plain Javascript, and reading other people’s code better. The same goes for my PHP. I can do a lot more in terms of functionality that I could the year before. I even did two side projects to help learn more – an Outlander Themed Loreum Ipsum Generator and a CSS/PHP-Based Fair Isle Knitting Chart Challenge.
Goals for 2016
Redo portfolio
What did they say about the cobbler’s kid’s shoes? My own website is a few years old now and is really showing it’s age, especially when I look at the code itself (and want to cry). I’m hoping to redo both the design and code as soon as possible. The new portfolio will have a major emphasis on performance speeds, as I feel that’s going to become more and more important as time goes on (and websites get bigger). Cleaner code (of course), larger typography and hopefully, more blogging again.
Finish a dozen coding books
I decided to re-read all of the A Book Apart series, and to read the new ones that I haven’t caught up on. I’m also currently reading Andy Clarke‘s recently released 5th Anniversary Edition of Hardboiled Web Design. I usually avoid coding books like the plague, but decided I really need to up my ante. Plus, they’re good bathroom reading anyways.
Learn a new something
I’ve got two slots for two new side projects to help me learn something new this year. I’m not sure what it’ll be. New CSS grid rules? More PHP? Rails? Or maybe more JS? I haven’t decided on this one yet, I just know I *will* learn some major this year.
A Big Wish
I would *love* to go to An Event Apart this year, which is actually being held here in Nashville (where I live)! But I can’t really afford the $1000+ ticket, so who knows at this point. Maybe I’ll get lucky and win a ticket or something. (hint hint!)
Phew
So it’s been a busy 2015, and a busier 2016 is planned. This industry changes so much, so quickly, it can sometimes feel like you’re doggy-paddling with water up to your chin. Just remember, you don’t have to learn it all. That’s where specializing in something that interests you works well.
What do you have planned for the next year? What are your working processes or desk organizations like?