matt-wceu-2

A European WordCamp

Last night I got home at 3:00 from the first ever multi-nation WordCamp, WordCamp Europe 2013 in Leiden, The Netherlands. The weekend was packed with many inspiring talks, but above all it was a unique chance to meet other developers and designers from around Europe and the world. Based on discussions I had during the past two days, advanced use cases of WordPress as an app platform are becoming more and more common. I also had the opportunity to talk to many WordPress “superstars” like Andrew Nacin, Nikolay Bachyisky and The Matt.

Putting together a conference of over 700 people can not be an easy task, but everything went pretty much without a hiccup (there were occasional wifi problems but that’s almost to be expected). A big thanks to the international team of organisers!

An Introduction for WordCamp Europe

Tea break on the balcony

Hello WordCamp Europe attendees! My name’s Daniel and I live in Tampere, Finland. After seeing similar posts by Rhys, Nuno and Jeremy, I thought I’d steal the idea and introduce myself to the WordCamp Europe croud in blog form. Hope you don’t mind. :)

So here goes: I’m the main translator for the Finnish version of WordPress and get paid by my employer H1 to work on interesting WordPress projects all day long. My first experiences with WordPress date back to 2005, professionally since 2008. I’m traveling to Leiden with all my beautiful colleagues (Aki, Jaana, Marco and Markus) so it’s going to be a grand weekend!

In addition to learning lots of new things from the conference sessions, I’m looking forward to meeting fellow WordPress professionals and discussing the following topics:

  • Using WordPress as an application platform
  • Scaling issues in deeply hierarchical and/or multilingual sites
  • Development/staging/production environments and workflows for teams

We’re arriving in Leiden on Friday evening. See you there folks! Meanwhile you may connect with me on Twitter.

A screenshot of Sublpress

Sublpress: Manage WordPress Sites in Your Text Editor

Sublpress is a new extension for Sublime Text by Nic Dienstbier that makes it possible to manage your WordPress site (or multiple sites) in the editor. Currently you can edit settings, create and edit posts and manage taxonomy terms. All features can be easily accessed via the Command Palette.

Creating a new post with Sublpress
Creating a new post with Sublpress

I tested Sublpress in both Sublime Text 2 and beta of Sublime Text 3, and my initial impressions are it seems to be a bit more stable (ironically) in the latter. This could be just something relating to my setup however.

Sublpress options
Sublpress options

I’m still not entirely sure whether I want to manage my WordPress sites in my text editor, but if it sounds like fun to you, go get Sublpress on GitHub. :)

webdev-workflow

My Dev Setup, part 4: Version Control and Deployments with WordPress

In an earlier post, I promised to shed some light on our git workflow for WordPress projects. The above image sums it up pretty nicely, but read on for the details.

Most of the development we do happens in a local Apache + PHP + MySQL environment, using MAMP Pro. That means I have a local copy of each site I’m developing, which creates some overhead compared to everyone just working on a central dev server. It’s worth it though because it makes working on different features and code branches easy.

Repository structure

Every project has its own git repository, which we set to the WordPress root directory. This is because most of our projects involve a combination of custom themes and plugins, and it makes sense to group them in a single repository. We still don’t want any of the core WordPress code in git, so we use a .gitignore file based on this excellent template by Joe Bartlett:

The above means that in practice the contents of a typical project repository structure looks somewhat like this:


/
+-- wp-content/
    |-- plugins/
    |   +-- custom-plugin/
    |
    +-- theme/
        +-- custom-theme/

Sharing code and automated staging with Beanstalk

When I want to share code with my colleagues or am ready to something to a client, I do a git push to a central repository hosted on Beanstalk. Beanstalk has loads of useful features, but the best thing about it has to be the simple deployments it offers. For all projects, we set up automated deployments to a staging server, where we have copies of each site. Deployments to production are also set up in Beanstalk, but (intentionally) require a manual click in the web app.

Going to production

Finally, moving from staging to production can require some tricky search-and-replacing domains and absolute paths in the database. WordPress in Network mode tends to be particularly keen on saving the site URL in way too many places. One way to do this is to perform a search and replace on a SQL dump, but we use this nifty tool by Interconnect/IT, because it correctly handles serialised strings, which are often used in WordPress for things like widget options etc. The same tool is useful when doing the reverse, ie. creating a local copy of an existing site.

Relevant links:

helsinki2

Staying Connected, Working from Home

Working from home is great, especially when starting each day would otherwise mean a two-hour train journey to Helsinki. On the downside I sometimes feel disconnected from my colleagues, since I only see them in person about once or twice a month. Of course we have video conferences when there’s a matter we need to discuss, but the spontaneous questions and chats of the workplace are lost. So a couple of weeks ago I had a revelation: why not just leave the connection on? Using an iPad at home (which I don’t usually need during the work day) and a spare laptop at the company HQ, we established our little virtual window. It’s not in anyone’s face, so it’s more informal than having an actual video meeting, but allows us to ask questions and share knowledge (and bad jokes) throughout the work day as if we were all in the same room.

Testing on iPad, iPhone, Nexus 4 and Nokia E51

My Dev Setup, part 3: Browser Testing

Some years ago browser testing meant just testing in Firefox, Safari and possibly Opera, and cursing and testing in IE6. Good standards support in current browsers has made development easier on one hand, but more complex than ever on the other hand with the demands of responsive design, the rise of mobile and websites themselves becoming more advanced.

Now on the desktop we have to worry about Chrome, Firefox, Safari, Internet Explorer 7,8,9 & 10, and on ‘mobile’ there’s at least Safari for iOS (phone and tablet), Windows Phone, multiple versions of the Android Browser, Chrome for Android, the BlackBerry Browser, Firefox, Opera Mobile and Opera Mini.

This post describes a snapshot of my current browser test setup and it’s the third part in my “web dev on Mac OS X” series. The first two were about utilities and web development apps. I’ll try to keep this series of posts up to date as the tools of the trade change.

Latest versions of Chrome, Firefox, Opera and Safari

Google Chrome with Web Inspector

You should of course have all the latest versions of the most popular desktop browsers. Ideally it would be a good idea to have older versions too, but since both Firefox and Chrome update themselves automatically, this is not much of an issue (see Arstechnica’s browser share analysis from last October)

Since Firefox 3.6 was the last version not to be updated automatically, I like to keep it around, since it has quite a few issues with some HTML5 elements and CSS3. An easy way to install an old version of FF alongside the current version is via portableapps.com.

Internet Explorer 7, 8, 9 & 10 in VMWare

IE 8 running in XP, IE 10 running in Windows 8

Internet Explorer testing is annoying, because installing multiple stand-alone versions of IE is difficult, and in some cases impossible. I currently have a VMWare virtual machine running XP with IE versions 6,7 and 8, installed using Multiple IE. Unfortunately this setup is somewhat buggy, but it works. I have a separate Windows 7 and 8 VM’s running IE 9 and 10 respectively. This can get messy and requires a lot of HD space. Also, testing local websites requires editing the hosts file of each VM.

Microsoft offers free VM images for IE7-10.

Mobile testing

The Real Thing

Testing on iPad, iPhone, Nexus 4 and Nokia E51

Testing on real devices is essential, and at least before going live I try to test on as many devices as possible. Since my own collection is limited (Android, iOS and S60) and there’s no open device lab near me, I occasionally visit the local department store and try out all the phones on display. Necessary, but not very practical for quick debugging.

Adobe Edge Inspect

Adobe Edge Inspect

For devices that support it (ie. Android and iOS), Adobe Edge Inspect is a great time saver. Basically it allows you to browse the same site synchronously on your desktop and your mobile via a mobile app and a browser extension. Even Edge Inspect doesn’t allow browsing local sites though, and that’s where the next solutions come in.

Opera Mobile Emulator

Opera Mobile Emulator simulating a Nokia N9
Opera Mobile Emulator simulating a Nokia N9

The Opera Mobile Emulator is an excellent and easy way to test a responsive web site in a huge number of different sized displays. It’s a useful tool whether your users use Opera or not.

iOS Simulator

Apple iOS Simulator

The free Mac OS X Developer Tools include an iOS simulator, which is at least 99% identical to the actual devices (iPhones and iPads). The emulator allows rotating the device, simulated shakes etc. This is probably the mobile testing tool I use the most.

Going forward: Remote virtual machines with Browserstack

Maintaining all these emulators is messy, to say the least. So I’ve been eyeing Browserstack, which allows testing in IE 6-10, recent versions of Chrome, Firefox, Opera, and best of all, emulators of most Android & iOS devices of significance. From my point of view the only thing missing is Windows Phone. Oh and Symbian would be nice too.

Browserstack running IE7 in Windows XP

The interface is really easy to use and straightforward. You input the address you want to test, choose an operating system and browser, and that’s it. Using a remote desktop via a browser is of course fairly slow, but the really killer feature of Browserstack is the ability to test local sites (like testsite.dev). This often makes Browserstack more convenient than the alternatives.

Browserstack is a subscription service (starting at $19 per month for an individual user). If you feel like trying it out, there’s a Microsoft-sponsored three-month free trial available. CrossBrowserTesting is another similar-looking service, although I haven’t tried it out.

Final Words

Browser testing is a complicated business, and your needs will depend on the type of site you’re developing and user demographic. Testing in more than one browser is a start, but mobile testing has also become a must. In a year or two it might even be more important than desktop browser testing, if it isn’t already.

Testing on a real device gives a good feel to the restraints of that device, but remember your iPhone/Samsung/Nokia model isn’t the only one out there. As more and more varied devices enter the market and testing needs get more complex, tools like Browserstack are likely to be the only realistic testing option for the vast majority of designers and developers in the future.

My Dev Setup, part 2: Web Development Apps for Mac OS X

In the second post of my “set up” series, I’m listing some of the apps I use daily for web development. The first part dealt with utility apps.

There are a multitude of tools available, and the specific ones you need will inevitably vary based on the kind of development you do, the languages you use, size of team etc. I do mostly front-end dev and WordPress theme + plugin development in a small team, so my choice of apps obviously reflects this. Also keep in mind that the industry is moving fast and in 12 months time we might all be using an entirely different set of tools.

Text Editor: Sublime Text 2

Sublime Text 2

I’ve written about Sublime Text in an earlier post, but I’m still going to mention it. It’s one of the best code editors out there at the moment, if not the best. Highly extensible, there are plenty of good additions relating web development and WordPress.

Get Sublime Text 2 here: http://www.sublimetext.com

CodeKit for Sass & Compass

Codekit

Sass is a robust CSS preprocessor that runs on Mac, Windows and Linux/Unix, and I’ve used it pretty heavily for the last 2 years. It allows extending CSS with variables, nested rules, logic, inheritance and mixins, among other neat things. It can be installed and run just fine from the command line as a Ruby gem, but recently we’ve started using Codekit, a marvellous app which takes care of compiling Sass (or Less/Stylus/HAML/Coffeescript etc) into final code in a nice, GUI-configurable fashion. It will also refresh your browsers automatically on save, combine + compress JavaScript and even optimise image files.

For an introduction to Sass, go to http://sass-lang.com/

Codekit ($29) http://incident57.com/codekit/

Version Control: Tower & GitBox

Tower screenshot

After having used Git for the last couple of years, it’s almost hard to imagine web development without some kind of version control. Learning at least the basics of git on the command line is most certainly recommended, but day-to-day I find a good GUI client is very handy. For many small projects the simple and elegant Gitbox (http://gitboxapp.com/, 13.99 € on the Mac App store) is quite enough, but for most projects I use Tower (http://www.git-tower.com/, 49.00 €).

I’ll be expanding on how we use Git in WordPress projects in a later post.

Diff with Kaleidoscope

Kaleidoscope screenshot

Sometimes (ie. often) you get conflicts when merging somebody else’s code with your own. A good merge tool helps, and for the Mac you can use either the free FileMerge included in the Mac OS X Developer Tools, or the excellent Kaleidoscope. Kaleidoscope used to be just a really good (and pretty) file comparison tool, but in its latest version 2 beta it includes merging capabilities for text and folders.

Download the trial here: http://www.kaleidoscopeapp.com/

PHP Error Monitoring: Console

console

Thanks to my excellent colleague Marco, I’ve discovered how useful the built-in OS X Console.app can be for tracking down PHP errors when doing local WordPress development. This allows you to easily view any errors without printing them out using WP_DEBUG and messing up everything.

MySQL Admin: Sequel Pro

Sequel Pro

For both local and remote MySQL administration, there’s nothing better than Sequel Pro. And it’s free.

http://www.sequelpro.com/

WP-CLI for command-line WordPress

WP Cli running in a terminal

When developing multiple WordPress sites locally or remotely, activating and deactivating plugins and themes via the admin interface can become tedious. For geeky-minded people, there’s WP-CLI, a simple command-line interface for creating and managing WordPress installations. Quoting from the website:

You can update plugins, set up multisite installs, create posts and much more.

http://wp-cli.org/

That’s all! In the next post in this series, I’ll look into my browser testing setup.

h1logobig

One year at H1

Yesterday marked one full year working for my current employer, H1. Professionally, this has been perhaps the most interesting and rewarding time I’ve ever had, despite working most of my time from home. So big thanks to my colleagues Aki, Jaana and Marco!

My desktop

My Dev Setup, part 1: Utility Apps

This is the start of a series of posts on my current web dev setup. The various software I use, how it’s set up etc. Being a big nerd, I enjoy reading descriptions of peoples’ work environments, and I figured it was my turn to chip in. In this first post, I’m starting with a bunch of nifty utility apps that help me stay productive. Unfortunately only some of them are free, but I find in general you get what you pay for, especially when it comes to Mac OS X apps.

An app launcher: Alfred

Alfred screenshot

Alfred is a beautiful, minimalist and fast app launcher for OS X which I’ve been using for the last year. In addition to launching apps, it can be used for search (like Spotlight), clipboard history, controlling iTunes and many many other things. Alfred is free, but the Power Pack extension costs GBP 15.

Dropbox

dropbox icon

Dropbox probably doesn’t need an introduction. Since its launch, I’ve used it to sync files between my own computers and share files with colleagues and clients. I still use it extensively, but for some work activities it has been somewhat replaced by git version control and Basecamp. To get 500 MB extra, use my referral link: Get Dropbox

BetterTouchTool

Better Touch Tool Screenshot

If you have an Apple laptop, a Magic Touchpad or Magic Mouse (or all three), BetterTouchTool has some nice options to configure gestures and keyboard shortcuts. It also gives you window snapping à la Windows 7. And it’s free!

iTerm

iTerm icon

I recently discovered iTerm. It’s basically an alternative to the built-in Terminal.app, and mostly I don’t find them that different from one another. The thing that won me over was the split-pane view, which is especially useful in full screen mode.

TextExpander

TextExpander screenshot

For all sorts of reusable text and code snippets, TextExpander is indispensable. There’s also a great TextExpander tutorial on TutsPlus.

PathFinder

Path Finder screenshot

The default OS X Finder is OK, but Path Finder is the same thing on steroids. Obviously meant for power users, it has (among other things) a built-in terminal, dual-pane file browsing, Git & Subversion support, batch renaming etc.

That’s all for now, to be continued!

WordCamp Stockholm

Thanks to my employer, I got to go to WordCamp Stockholm, which was held yesterday at the Waterfront Congress Centre in the heart of the city. Witnessing the enthusiasm of Swedish WordPress developers and users was inspiring, and we picked up some good plugin and development tips along the way.

For those who understand Swedish, most of the sessions were filmed and can be found on Bambuser, tagged ‘wpstlhm’.
Continue reading WordCamp Stockholm