While browser-based operating systems haven’t taken over the world, 2011 has been a pretty good year for Web developers. It’s an exciting time to be working in Web development, and there’s never been a better crop of tools to work with. Web standards are eclipsing proprietary toolkits, and the development community is creating its own set of open source tools to work with. Here’s a look at some of the best we’ve seen in 2011: Top Web Developer Tools of 2011.
Development at paulcarvill.com, the home of Paul Carvill on the web
paulcarvill.com
Hi, I'm Paul Carvill and I'm a web developer. I am Head of Interface Development at LBi, Europe's largest digital agency.
I also like walking, cooking, Bollywood and rock 'n' roll.
Archive for the ‘Development’ Category
Top Web Developer Tools of 2011
Sunday, December 11th, 2011Wordpress theming without installing Wordpress, MySQL or PHP
Saturday, September 17th, 2011I’m a big fan of Vagrant, the tool for building and distributing virtualized development environments. What does that mean? It means you can easily create, save or destroy virtual machines, administer them with a set of nice commands and provision them with software by writing installation scripts. Because everything is scripted, your virtual machines are portable, reusable and reliably consistent. This is a good example of an idempotent operation — the result is the same every time you run your provisioning script, no matter how many time you run it.
Even better, because your provisioning scripts create the same virtual machine every time you run them, you don’t need to keep the virtual machine hanging around when you’re not using it. Once you’re done, you can destroy the VM, then simply rerun the script to bring it back up. You can even put the script into version control so that your team can use, amend and update it. If you find you need some more software on your VM, simple add it to the provisioning script. Provisioning can be done in Vagrant using Puppet or Chef.
My first real requirement to use this stuff was for a prototype for a pitch, where I was installing a whole bunch of stuff I’d never used before — Ruby, Sinatra, ActiveRecord and Backbone.js. I needed other developers on the team to have the exact same environment as me so we could get the work done in time. I couldn’t guarantee I’d be around to do setup and configuration, so put all the configuration into a Chef script, installed Vagrant and we were good to go.
I’ll write more on that, and on Vagrant, another time, but more recently I had another instance where using an automated virtual development environment would be of real benefit in terms of time and ease of use. Installing and configuring Wordpress, something my team at work always seem to end up doing a lot of, is a pain in the arse. But using Vagrant and Chef we can easily spin up a brand new Ubuntu VM, install PHP, MySQL and Wordpress onto it and point the themes directory back to a directory on the host machine. When we’re finished, destroy the VM.
I’ve built on the scripts provided by the Chef developers, Opscode, to get Wordpress installed seamlessly onto Ubuntu. You can clone my Git repo here:
https://github.com/paulcarvill/vagrant-wordpress.
There are instructions in the README for how to use it. You can read through the Vagrant file and it should be quite obvious where you can make changes e.g. to the HTTP port forwarding (set to 8080 by default, but you might want to change that if you have other sites already set up on your computer using that port).
Further reading: Google “infrastructure as code“, which the DevOps guys seem to be really excited about at the moment.
Where is the interface development profession heading in the next few years?
Thursday, January 20th, 2011I originally posted this as an answer to a question on Quora, but I thought I’d post it here too, with a few minor changes, as it’s an accurate reflection of my current thinking.
Web development is an industry which moves fairly quickly. Looking back, between 1990-2000 a huge amount was achieved, including, fairly obviously, the invention of the web and thus the creation of the industry. But in the same length of time between 2000-2010 the industry was far less volatile than you might have expected. Until the last 2 or 3 years I’d say it was definitely a demotivated industry in danger of being almost in a state of inertia. So, here’s what I think will happen to the profession over the next few years.
Right now
Interface development (or client-side/front-end development) is the hottest area of development right now. Platform, device and browser innovation and competition is currently the healthiest it’s ever been. This means interface developers, in some ways, have the richest set of tools and the quickest route to market of anyone in the web development world.
At the same time, they operate in what Douglas Crockford once described as “the most hostile software development environment imaginable” — the browser. The sheer variety of user agent rendering, standards compliancy and provision of APIs means that creating consistent cross-platform websites will remain a specialism. Combine this with the ever-increasing demand by the market for rich interfaces, web standards and accessibility, and you ensure the continued high-value placed on interface developers.
Technical maturity
I see the profession evolving in two ways. The web development industry is working to apply the lessons of computer science to interface development, to create robust, repeatable mechanisms for development, testing and deployment. At the same time as developers from other disciplines are generalising their skills in the direction of front-end tech, so front-end developers are embracing full-stack development. You will increasingly see programmers equally comfortable working on either side of the client/server divide, and particularly using dynamic languages — there’s natural bi-directional traffic between JavaScript and Python/Ruby, and there’s an ancestral line between JavaScript and Java/C#. This trend will continue in a logical fashion to embrace development on Infrastructure-as-a-Service systems such as Amazon EC2, Heroku and Google App Engine, and will peak in a mammoth movement towards Platform-as-a-Service systems, with tight integration between users and the host service, whether it is Salesforce, Facebook, Google or even the UK government.
This focus on the technical aspects of the profession will also see a blooming of the Web Performance Optimisation industry (WPO), and the deep analytical aspects of this will attract a certain proportion of the interface development community.
Beautiful creativity
The other path that will become more apparent as time goes on is the one focusing on true front-end technologies, the user experience and the creative process. Standards-support from the browser vendors, fast broadband speeds, GPU support and the ubiquity of development frameworks for every possible requirement mean that rich, seductive interfaces, immersive multimedia environments, games and a tighter integration with the desktop/OS/device will be more and more popular. Specialisms, and greater toolsets, will emerge for vector graphics (SVG) and bitmap graphics (Canvas), and tech-leaning creatives and formerly emasculated Flash/Flex developers will all be sharing the spoils.
$$$
I also see an initial rebalancing of pay structures to reflect both of these changes in the current weighting of development disciplines. This has already been happening for some time, with server-side jobs increasingly commoditized and their remuneration remaining largely static in comparison to front-end developer rates which have been steadily rising for the last 18 months. This may itself be counterbalances, however, by an influx of eager interface developers who are skipping college/university and going straight to work for a startup, agency or enterprise.
HTML Developer’s Guide for ADOBE AIR
Wednesday, July 21st, 2010Adobe’s website is absolutely useless. Hey Adobe, why not put all your developer tools, documentation & code examples in fragmented, ambiguous and duplicate sections on your site? Oh wait, you already did… So much of the documentation is misnamed, out of date or just impossible to find.
So if you’re looking for information on developing for Adobe Air using non-Flash, non-ActionScript, non-Flex options then this appears to be the most definitive documentation that I was able to find on the Adobe site: HTML Developer’s Guide for ADOBE AIR. Hopefully it will save you some time.
Internet time
Tuesday, June 8th, 2010Me and @agentdeal have both recently been noticing an increased interest in analogue clock-based time interfaces on the web. Pleasingly, the practice has been implemented across web development disciplines, proving that it’s not just loopy Flash developers who spend their time making utterly pointless widget-y gizmos — even Steve Jobs and his panting army of fanboys can have a go!
The trend seems to have started with bbc.co.uk’s lovingly crafted piece of old test card nostalgia, made using Canvas:
It continues in spectacular fashion with the new Times paywall site thetimes.co.uk, which has a heartbreakingly pathetic laurel-wreathed carriage clock, rendered in Flash, updating in real time, presumably sitting atop a digital mantelpiece as a retirement gift to the online news industry:
The newest kid on the block, and definitely the showiest, is the timezone-straddling multi-clock Flash display of Globe Trotter, purveyor of hand made luxury luggage:
What fascinates me about all this is that surely every single example here and elsewhere is completely redundant. Is there a device anywhere that doesn’t display the time and/or date somewhere in the interface? I’m pretty sure that anything running a web browser also has a clock or calendar in view a mere eyeball movement away. But that is what makes these internet clocks so great — each is a conceit made of whimsy and I love them.
How to handle a Python BadKeyError exception in Google AppEngine
Tuesday, June 1st, 2010This drove me nuts an hour tonight. If you’re trying to get an entity key using something like:
yourKey = someString
candidate = Candidate( key=db.Key(yourKey) )
and you get a BadKeyError, it’s because the string you’re sending in isn’t the right length. Also, AppEngine doesn’t return None from the Key method but instead returns a BadKeyError exception. You can handle this by doing:
yourKey = someString
try:
candidate = Candidate( key=db.Key(yourKey) )
except db.BadKeyError:
# handle the exception here
Increasing memory limit for PHP in Rackspace Cloud Sites
Sunday, February 28th, 2010If you install more than a few modules in your Drupal implementation the chances are that it’ll run out of memory and you’ll start seeing blank pages and odd behaviour. The fix for this is to increase the amount of memory allocated to PHP, which you can usually do in your php.ini file. But if your hosting is Rackspace Cloud Sites you don’t have access to the php.ini file. You must instead put your PHP settings in a .htaccess file in the root directory of your hosting space.
Here’s some example settings:
php_value memory_limit 96M php_value upload_max_filesize 50M php_value post_max_size 50M
Now, here’s the important bit: once you’ve made put those lines in your .htaccess file and FTP’d it to your webspace, the changes might not appear to have taken effect. I had to delete the original .htaccess file and upload a fresh one for my changes to be picked up. Hopefully this might help somebody else in the same situation.
N.B. Rackspace’s support had next to no idea of what I was talking about. Their Livechat support service was as useful as telephoning someone in a library and waiting while they went off to find the information. They obviously don;t support individual applications hosted by them, but I’d have expected a little more help.
Apache Continuum error: Provider message: No such provider: ’s’.
Tuesday, January 26th, 2010If you’re trying to use Apache Continuum and get the error “Provider message: No such provider: ’s’.” then you probably haven’t provided the correct SCM Url format in your project information. Importantly, it needs to begin with something like “scm:svn” e.g.
scm:svn:https://example.com/svn/project/trunk
Tree command for Mac OS X
Saturday, January 16th, 2010This outputs a structured view of files and folder of the directory you execute it in:
find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'e.g.
. |____.git | |____branches | |____config | |____description | |____HEAD | |____hooks | | |____applypatch-msg.sample | | |____commit-msg.sample | | |____post-commit.sample | | |____post-receive.sample | | |____post-update.sample | | |____pre-applypatch.sample | | |____pre-commit.sample | | |____pre-rebase.sample | | |____prepare-commit-msg.sample | | |____update.sample | |____index | |____info | | |____exclude | |____objects | | |____info | | |____pack | |____refs | | |____heads | | |____tags |____CHANGELOG.txt |____COPYRIGHT.txt |____cron.php |____includes | |____actions.inc | |____batch.inc | |____bootstrap.inc | |____cache-install.inc | |____cache.inc | |____common.inc | |____database.inc | |____database.mysql-common.inc | |____database.mysql.inc | |____database.mysqli.inc | |____database.pgsql.inc | |____file.inc | |____form.inc | |____image.gd.inc | |____image.inc | |____install.inc | |____install.mysql.inc | |____install.mysqli.inc | |____install.pgsql.inc ...
ls -R does something similar, but structured considerably differently.
Get Git to ignore Python .pyc files
Monday, January 4th, 2010This will tell Git to ignore the files you specify by listing them in a special file, which you will tell Git the location of. This will only work on your local installation of Git. If someone clones your Git repository and adds files of the type you are ignoring, those files will be noticed and tracked by Git unless they also tell Git to ignore those files. For more on ignoring files on a per-repository basis, look here.
In Terminal:
git config --global core.excludesfile path/to/excludesfileThen create your excludes file:
vim path/to/excludesfileand add the files to exclude, using wildcards if necessary:
*.pyc