Steve Workman's BlogWeb* Advocate [Standard|Perf|A11y|App]2022-01-30T21:00:00Zhttps://www.steveworkman.com/Steve Workmansteve.workman@gmail.comWebsite Changes2006-06-24T00:00:00Zhttps://www.steveworkman.com/2006/website-changes/<p>Well, I've been hard at for for 2 weeks now and I've kinda ignored this blog, so, I thought I'd do a bit of an update. I'm not going to dump the changelog on here cos it's a few miles long, this "update" has become much more of a major change than I thought.</p>
<p>Last year, there were no real functions for looking through previous years' data, or even separating it from the current year. Therefore, on this new version, users, matches, events and pictures now have an 'archived' field. There are now search facilities all over the site, all of which work on AJAX technology which makes things all nice and pretty. Therefore, the major changes are: Integrated PhpBB2 (single login, single database) Archive Support Added user details AJAX search across the site Fantasy Hockey online (currently not implemented) Added admin features including full user control, security log and information pages and adverts in the db Picture enhancements including better gallery, re-arranged directory structure and a "who is in this picture" aka 'facebook' functions. Additional squad filters by users' preferred playing position More user preferences and attributes. More match statistics including cards and a friendly option. and so on....</p>
<p>Most of this is now done and can be seen at <a href="http://www.sheffieldhockey.com/beta">www.sheffieldhockey.com/beta</a></p>
<p>It's hard work. It'll all be done soon though, nearly there</p>
<p><img src="https://www.blog.co.uk/img/smilies/icon_wave.gif" alt="" loading="lazy" /> Steve</p>
<p>Currently Watching: Green Wing Currently Eating: very little, damn bank manager Currently Listening To: Pink Floyd Currently Reading: A Scanner Darkly</p>
v3.012006-08-25T00:00:00Zhttps://www.steveworkman.com/v3-01<p>I've a feeling that I really should update this more often. Ah well, here goes:</p>
<p>USE (University Sports Engine) v3.01 Fixed: Lop-sided forums Standardised folder names Email addresses always being hidden</p>
<p>Added: Icons for MSN/AOL/Register etc</p>
<p>Known bugs: Picture association with even/match incorrect Profile picture upload not being available to everyone</p>
<p>Scheduled additions in v3.02 Tutorials "Who is in picture" to be displayed with each picture Rotate pictures in the edit picture menu Alternate profile picture upload</p>
<p>The reason for all these new icons is that in the v3.1 update the website will be completely modular, split into Basic, Standard, Full and an additional module known as Fantasy Hockey, available for Standard and Full packages. The website has been renamed 'USE' for University Sports Engine. Therefore, the packages are named: USE-less (basic), USE (standard), USE-Full (Full) with Fantasy appended onto either of the latter two.</p>
<p>Next week I shall be registering <a href="http://www.uni-sport.org/">www.uni-sport.org</a> and <a href="http://www.steel-software.com/">www.steel-software.com</a> and moving hosts to <a href="http://www.dreamhost.com/">Dreamhost</a> which gives me a bucketload more space and bandwidth. From then, any uni who wants a sports website, just has to ask! They'll be limited with the choice of template at first, but that's a story for another day.</p>
<p>v3.02 is scheduled for late next week. However, some of the changelist may be subject to change.</p>
<p><img src="https://www.blog.co.uk/img/smilies/icon_wave.gif" alt="" loading="lazy" /> Steve</p>
<p>Currently Listening To: Belle & Sebastian Currenlty Eating: Very little, on a diet Currently Watching: Grey's Anatomy Currenty Reading: The Times (sudoku) Minutes Left at current job: 68</p>
v3.022006-09-03T00:00:00Zhttps://www.steveworkman.com/v3-02<p>USE v3.02: Fixed edit squad error Fixed minor error in randomprofile selector Fixed picture association for matches and events in edit picture displayed incorrectly Fixed picture association for matches not including matches for archived squads Changed CSS so that siteinfo displays more clearly Add who in picture to showpicture</p>
<p>There's still a very random bug with the adverts on some computers using IE6. If you can't see the ads, clear your cache. If that doesn't work, use a proper browser (Opera/Firefox) I'm moving the demo system to <a href="http://demo.uni-sport.org/">demo.uni-sport.org</a> and making all 4 modules available to play with. I've gotten an email from an interested party for the USE-Lite system so pricing for everything will be confirmed later in the week. I was recently reminded that phpBB forums are under the GNU license so I can't actually sell it as part of my packages. I can give it away with the packages, but not sell it so things are gonna change slightly there.</p>
<p>Shef Uni Rowing Club's website should be done by next week, and it'll start testing on <a href="http://shef.uni-sport.org/rowing">shef.uni-sport.org/rowing</a> soon.</p>
<p>Steve Currently Listening To: Captain - This is Hazelville Currently Watching: Brazil v Argentina Currently Eating: Weetos, strangley they're healthier for you can cornflakes! Currently Reading: Any information I can get on setting up a business</p>
v3.03 and The Business2006-09-18T00:00:00Zhttps://www.steveworkman.com/v3-03-and-the-business<p>First things first... USE v3.03</p>
<p>Fixed: Minor security bug when uploading errors Minor fix in view mini-profile Finally fixed hidden email addresses Default avatar now correct type Maintenance mode page now uses the site's clubname Account Activation fixed Comment in showpicture is now back in the centre Commitactivation email link fixed Registration layout and error message</p>
<p>Added: New Default avatar Match Reports now link to player's profiles Deny button in account activation Admin-only opt-out of FH to user profile Ability to change a player's nickname Alternate profile picture upload Admin Activate account without email confirmation Add user for Admins</p>
<p>Now, that's a serious amount of bugfixes, seriously, there are loads in there. It's mostly come from the fact that since I am now a business (Steel Software UK now has a bank account!) and have 4 clients under my belt with loads more interested I'm now finding the little things, the things which just make life easier for everyone. Things like forcing account activation, changing usernames if you misspell, just more things that before I'd go in to the database for can now be done through the UI. This is probably going to be the last bugfix release before 3.1 which won't contain a whole lot more considering admin add user was scheduled for then.</p>
<p>So, the business: <a href="http://mensrugby.shef.uni-sport.org/">http://mensrugby.shef.uni-sport.org</a> or <a href="http://www.menofsheffield.com/">www.menofsheffield.com</a> My first clients. It's been a good experience, steep learning curve really. The annoying thing was that most of the bugs were caused by me working at 2am with v3.01 code. Very silly things that were fixed in SUHC3, but not in USE-Full. So, I've gotta try to get some sort of CVS working in dreamweaver. It's quite hard actually, considering my desktop pc here doesn't like doing FTP with the current router (the mac is fine tho, both on wireless, one next to the other, very odd) so I can't use the demo sites to host the version control. So, a CVS will get me started. I'm noting everything I do down, it's just taking the time to make sure all sites are at the same level.</p>
<p>Tomorrow, meeting with Squash, meeting with Rowing the next day (<a href="http://rowing.shef.uni-sport.org/">http://rowing.shef.uni-sport.org</a>) then versioning, as long as I don't get any more clients yet. Also, now things are pulling together and I actually have some sites, therefore, the whole <a href="http://shef.uni-sport.org/">shef.uni-sport.org</a> web page needs some sprucing up, probably with a choice selection of news tidbits from the network sites and the uni logo somewhere. I've also got a lovely fashion design student (friend of a friend) who has said she'll do a logo for Steel Software (that site needs re-doing).</p>
<p>Anyway, its well past my bedtime Steve</p>
<p>Currently Listening To: The Dears - Gang of Losers Currently Watching: Futurama Currently Eating: Cheese on toast with Henderson's Relish - best hangover cure ever, FACT! Currently Reading: Photoshop CS Classroom in a Book Company Profits To Date: £35</p>
v3.04 and upcoming development2006-09-29T00:00:00Zhttps://www.steveworkman.com/v3-04-and-upcoming-development<p>As per usual:</p>
<p>USE v3.04 Changed spelling of 'location' in add newsletter menu Fixed RSS validation Fixed email message output Fixed ability to submit an email twice by accident Fixed a CSS bug causing 404 errors Fixed div bugs when access to a page was denied Added ability to send email to all members Fixed yellow/red cards not displaying in readreports</p>
<p>Yeah, I know what I said in the last post. I was incredibly annoyed when I had pushed 3.03 out the door only to run into another salvo of bugs. 3.04 has been much more of an incremental update than the last one so half the fixes have been out in the wide world all week. I'm pretty sure I've gotten a final feature list for v3.1, but that's been put on the back-burner for a bit until I get all my changes to <a href="http://uni-sport.org/">uni-sport.org</a> done (i.e. the demo sites are still on v3.02 and contain real data). I have also started exploratory coding on USE v4. The first task of which is to reproduce v3 exactly. After that... who knows what I'll dream up, maybe even some satisfactory way to do sessions without copying phpBB exactly, a better way for people to configure RSS better, maybe even give people different templates and the ability to change their layout based upon a basic uni colour scheme. Maybe the site will even be secure! Pipe dreams my friends, pipe dreams, lol.</p>
<p>Other than that, things are goin alright. 5 paying clients are currently on my books and the White Rose Enterprise Agency wants to give me up to £500 to spend on stuff for the business. So, that's an external HDD for secure code storage between computers; a CVS for dreamweaver; overheads for the year covered; professionally made business cards and logo; exams in dreamweaver and photoshop so i can get certified; and even coffee if i'm with a client. The perks of the job ya see.</p>
<p>Steve Currently Listening To: Ryan Adams Currently Watching: The start of all the tv shows i missed last year (and futurama) Currently Eating: Ibuprofen and tomatoes (apparently I have a kidney infection) Currently Reading: Background material..... how dull Unnecessary hours of Genesys lecutures: all of them, all 12 hours *grrr*</p>
Fantasy Hockey Lessons (v3.05)2006-10-27T00:00:00Zhttps://www.steveworkman.com/fantasy-hockey-lessons-v3-05<p>*ahem... swallows pride*</p>
<p>USE v3.05 ( Fantasy Hockey Update) League table now links to teams and managers profiles Create team allows for team names with ' in them Profiles for other people's teams displays correctly Myteam budget remaining now has a £m formatted to it Table pagination now works correctly Anonymous and SS removed from top points Fixed Picmenu delete bug Two addslashes fixes Delete match report empty array error Transfer price fix Fixed archives special characters bug Fixed minor layout bug in gallery Fantasy Hockey Logic Fixed</p>
<p>Yeah.... that's a lot of bugs considering I said it was all done last time. There are lots of minor ones like links not working, but there are also some massive ones like the long-standing bugs like the edit match report bug that i've never been able to reproduce!</p>
<p>It turns out that the fantasy hockey bug was a problem with my logic. It works with a repeated function to calculate each person's individual score then it posts those scores back into an array which are added to each team which has that player in it. Turns out that I was posting back the player's total score for all time rather than just the updated score. So, I moved the individual player score database update to the repeated function and it returns the difference rather than the total. With that done, everything should work "flawlessly"...</p>
<p>So, it's been a learning process. There are still minor bugs (there's no admin menu for fantasy hockey) and v3.1 is quite a long way off. Development of v4.0 is slow to non-existent. Genesys work is slightly on top of me. Lots to do.</p>
<p>Anywho, next time, more features, i promise!</p>
<p>Steve</p>
<p>Currently Listening To: Damien Rice - 9 Currently Reading: Email... so much spam! Currently Watching: Heroes Currently Eating: Spag bog Things to do tomorrow: millions</p>
Life on Rails, the fast track2006-11-01T00:00:00Zhttps://www.steveworkman.com/2006/life-on-rails-the-fast-track/<p>This is going to sound like a sales pitch for Rails, I'll admit, but if I like something, I'll shout about it from the rooftops. So, lets talk about my current phase. Welcome to Ruby on Rails...</p>
<p>I was introduced to Ruby on Rails at Genesys by Elliot. It all started when he wrote the 6 hour speed coding challenge in 20 minutes. Then I watched this video:</p>
<p>Amazing isn't it. So, I got cracking at it. It took me a while to get it set up on OS X but I followed this tutorial: <a href="http://developer.apple.com/tools/rubyonrails.html">http://developer.apple.com/tools/rubyonrails.html</a> from apple and everything was set up. With textmate installed everything was organised, syntax highlighted and databases hooked up. Ruby is a Model View Controller language. Everything you do is a method. Calling generate creates skeletons that are very simple to edit. It's got templates built in to it, unit tests, it's super fast and... just amazing. Sorry, it's late. Zero brain power.</p>
<p>So, I pretty much want to try and develop USE v4 in Ruby. It'll be a great test and it'll probably make me a better programmer.</p>
<p>Enough of this. I'm off to bed</p>
<p>Steve</p>
<p>Currently Listening to: Muse - Black Holes and Revelations Currently Watching: American Dad Currently Eating: Jammy Dodgers Currently Reading: Agile Web Development using Rails</p>
Joys of MSDN2006-12-01T00:00:00Zhttps://www.steveworkman.com/2006/joys-of-msdn/<p>There are a number of benefits to being a Microsoft Student Partner. You get to learn about the new stuff before anyone else, you get to attend conferences and product launches (XNA Studio launch December 13th @ Warwick Uni), you get free stuff like t-shirts, laptop bags and USB pens, but the best thing of all is your MSDN Premium subscription.</p>
<p>I recieved mine in the post today and honestly, I knew MS made a lot of software, but I didn't know they made this much! The first shipment contained 23 DVDs with every server, operating system (Vista RTM didn't make the November edition), application (Nor did Office 2007 RTM) and the whole library. They've even included Virtual PC Mac (but not Office 2004 Mac). I am well and truly amazed at it.</p>
<p>So, after downloading Vista for 2 hours today I'll be installing it tomorrow. I'll let you know how it goes, how easy it is etc but for a brief guide, see <a href="http://www.winsupersite.com/">www.winsupersite.com</a></p>
<p>Steve Currently Listening to: Muse Currently Watching: Scrubs Series 6 Currently Eating: Anna's Birthday Cake Currently Reading: xmas present lists Days til xmas: 24</p>
Vista - Ready or not2006-12-03T00:00:00Zhttps://www.steveworkman.com/2006/vista-ready-or-not/<p>First, a little bit of news.</p>
<p>Playing hockey today, I got hit by the ball just to the left of my eye, 4 stitches and a monsterous bruise have seen that I won't be playing for a week or so. It happens.</p>
<p>So, whilst I've been at home, I've been playing with my new copy of Windows Vista Ultimate... well...</p>
<p>Firstly, It's a big improvement over XP. Really, it is. It's the first time I've wanted to use the new start menu. The desktop searching is excellent and works far better than on OS X. Aero is fun but it's not as good as Apple's Expose feature which I really hope will be made an add-on by some bedroom coder sometime soon.</p>
<p>The bad things.... The sidebar, whilst nice, isn't as amazing as the OS X dashboard. It's alright, but not brilliant. Driver support at this time is pretty poop. I'm running with RC1/2 drivers and my sound is dodgy (Audigy 2 ZS card). Graphics seem fine (Geforce 6800GT) but I tried to run a dvd and firstly, it played without sound (re-installing the drivers 3 times sorted that :-s) and now it jerks and just isn't worthwhile (this worked fine in RC1). The zip file extraction algorithm is awful. It took 3 minutes to extract 8.8Mb of files. Also, I was expecting the Windows Sync center to be able to perhaps sync with Office 2004 Mac... nope, it definitly doesn't do that... still not worked out exactly what it does!</p>
<p>Office 2007 IS everything they said it would be though. Love it to bits. So, I'll keep hunting for drivers (most of which will be out in January) so until then I'll play dvds on my laptop!</p>
<p>Steve</p>
Web sites and Milestones2006-12-19T00:00:00Zhttps://www.steveworkman.com/2006/web-sites-and-milestones/<p>Well, Genesys is taking a lot of my time at the moment, however, I've done lots of good work.</p>
<p>Genesys now has a new logo and web site, both currently found at <a href="http://beta.steel-software.com/">beta.steel-software.com</a></p>
<p>They look lovely no? Please leave me comments, I need the feedback.</p>
<p>Steve</p>
<p>Currently Watching: Brainiac Currently Reading: digg Currently Eating: Chinese Currently Listening To: Muse Currently Sitting: In my house in Lancaster</p>
What I Learned at XNA2006-12-19T00:00:00Zhttps://www.steveworkman.com/2006/what-i-learned-at-xna/<p>So, Microsoft and their DirectX team, being the geniuses that they are, have come up with a new product, <a href="http://msdn.microsoft.com/directx/XNA/default.aspx">XNA Studio Express</a> which is rather good. I went to the launch event at Warwick uni thru the MSP programme. Here's what I learnt.</p>
<ol>
<li>
<p>XNA is a great technology The demos that they showed were amazing. Literally, 5 lines of code got some components loaded and everything sorted for windows or Xbox 360 and you've got a spinning cube lit with phong shading. All this ease makes you able to focus on gameplay instead of fiddling around with rendering modes etc. Also, the ability to compile for either Xbox or windows with a few minor chanegs is amazing.</p>
</li>
<li>
<p>Peter Molenyeux is a great man He really knows his onions. He's a great speaker and has a clear vision. It's all about positivity and drive. Playing about with something until its fun, concentrating on the gameplay rather than graphics or using the physics to make gameplay features.</p>
</li>
<li>
<p>If you want to develop games, you MUST know C++ Talking to the people at Rare, Microsoft and Peter, they all said, you'll still need to know it for the next 5 years. XNA is great, C# is one of the easiest languages to learn ever, BUT, you can't get all the hardware access (apparently, XNA is 95% of the XDK (Xbox dev toolkit. It's currently missing the networking layer)) and pointers are essential if you're really pushing the envelope of what it can do. Until the CLR is at 99% of C++ native performance and XNA allows full hardware access, people won't change. Apparently, using XNA, the games at the moment are CPU limited rather than GPU limited. PPC cores were never really good for games :D</p>
</li>
<li>
<p>Academics should not be allowed to be funny They are not funny, the best joke had the punchline "why the long face"</p>
</li>
<li>
<p>I want an Xbox 360 But apparently, Santa can't fit one in his sack. Lousy santa</p>
</li>
</ol>
<p>Steve</p>
Why electronic Monopoly sucks2006-12-27T00:00:00Zhttps://www.steveworkman.com/2006/why-electronic-monopoly-sucks/<p>Ok, I'll explain a bit first.</p>
<p>I have an xmas tradition. Usually, on xmas day, my family goes over to an old friend's house for xmas day dinner and afterwards, games of trivial pursuits and monopoly follow. The kids (that's me btw) are now 21, 21, 23 and 24 years old respectively so monopoly generally involves alcohol these days too. However, since my family had grandma over this xmas, we didn't do the traditional lunch at theirs thing, instead, we did the monopoly tradition later on that evening. <a href="http://www.amazon.co.uk/Monopoly-Here-Now-Electronic-Edition/dp/B000G6JY0U/sr=8-1/qid=1167234362/ref=pd_ka_1/026-8688568-6030005?ie=UTF8&s=toys"><img src="https://images.amazon.com/images/G/02/uk-toys/cdpplusimages/mopoly1.jpg" alt="" loading="lazy" /></a></p>
<p>This xmas, James had received a new version of monopoly, with electronic banking. Great idea you'd think. No. God no. Worst. Idea. Ever. FACT. <img src="https://images.amazon.com/images/G/02/uk-toys/cdpplusimages/mopoly2.jpg" alt="" loading="lazy" /> The problem is not the game, I like the updated pieces, the new hotels and flats, the updated chance and community chest cards ("you have been convicted of identity theft, move directly to jail"), i didn't even mind the prices (10,000x the originals but in the same ratio), but the card reader just killed the game.</p>
<p>Everyone gets a card instead of paper money and there is only 1 card reader. Suddenly there's no more looking at your money in front of you and at everyone else's to see who to try and break next. To do that you have to put your card in a machine and ask it! It'd be ok if these were swipe cards but they're not, stick them in this horrid fiddly slot and the machine is so slow you'd expect it to crash at any moment!. The card reader kills the flow of the game and slows it down so much that by the end we decided to call it a draw just to end the agony.</p>
<p>Next year we're going back to paper. Monopoly: nice idea, bad implementation.</p>
<p>Steve<br />
Currently Listening to: Zero 7<br />
Currently Watching: one of the 4 films he got at the HMV sales. Fight Club (SE), King Kong (SE), School of Rock and Orange County. Total price: £15.30! Cha-ching!<br />
Currently Eating: xmas chocolates. Feeling fat<br />
Currently Reading: Papers on computational biology<br />
Words still to write for the 4th.... 5000</p>
Application Forms2007-01-25T00:00:00Zhttps://www.steveworkman.com/2007/application-forms/<p>There's a certain monotony about application forms. I'm currently on the fourth of the day (LogicaCMG) after completing 3 yesterday, bringing the final total to.... 15! You will not believe the number of times I've repeated myself, or how a very slight change in the question can lead to a completely different answer.</p>
<p>However, i've now got it down to a number of set answers and examples and I just want it out of the way. I've got a telephone interview tomorrow with HP so I need to prepare for that (and get up, gotta set the alarm and be awake).</p>
<p>Grumble grumble... rant over.</p>
<p>Steve</p>
<p>Currently Listening to: Bloc Party - A Weekend in the City (amazing record) Currently Watching: Heroes - it's back Currently Eating: Cake Currently Reading: Agile Web Dev with Rails 2nd Edition Application Forms Rejected: 5</p>
Vista launch = patches2007-01-31T00:00:00Zhttps://www.steveworkman.com/2007/vista-launch-patches/<p>If you didn't know already, Microsoft officially released <a href="http://www.microsoft.com/vista" title="Windows Vista">Windows Vista</a> yesterday. I've been running Vista for 2 months now, and in that time it I've seen some major performance improvements, mostly thanks to new drivers.</p>
<p>YesterdayI knew it was launch day because windows update tagged 9 new downloads for me. 6 patches for Vista (including one that wasn't optional), a texas hold'em poker game for Vista Ultimate users (which isn't too bad once you get used to it, textures are a bit off though) and Visual Studio 2005 SP1 for pro and express (I have express installed for XNA studio). Overall improvement to Vista: minimal. Most of the speed boosts will come from drivers, just have a look what a good video card driver can do in this ATI/nVidia test: <a href="http://www.pcper.com/article.php?aid=354&type=expert" title="Video card comparison">link</a></p>
<p>In other news, I've started up Uni-Sport development again, this time on rails. Struggling with this new language reminds me of my first forray into PHP almost 2 and a half years ago. In two days I have created a small application that reads RSS feeds, sorts them by date and displays them. Two days, for that! It seems that this agile framework isn't so agile really, or is it just that I spent most of my day assuming that rails wrote accessors and mutators for me.</p>
<p>Anyway, this small section is rather flexible and will become part of the portal site which will eventually reside at <a href="http://shef.uni-sport.org/" title="Uni-Sport Sheffield">http://shef.uni-sport.org</a>. This will aggregate news/events/results from around the network. It'll do it all in a funky AJAX-enabled way too with flashy prototype effects. Depending upon how bored i get in the next few days I'll be debuting it very soon.</p>
<p>Finally, I'm off to <a href="http://www.designertopia.net/" title="Designertopia">Designertopia</a> today, courtesy of Microsoft, so I'll give you an update of what I learned from that then. It should be good, I'm looking to pick up design tips from the best, and I'll pass them on. It's a service, I know. :-)</p>
<p>Steve</p>
<p>Currently Listening to: Bloc Party - A Weekend in the City (words cannot express how good this record is) Currently Reading: Agile Web Dev with Rails 2nd Ed Currently Watching: the world go by Currently Eating: Lamb korma Days until next interview: 5 (phone with Fujitsu services)</p>
Designertopia - Day 12007-02-02T00:00:00Zhttps://www.steveworkman.com/2007/designertopia-day-1/<p>Today has been a real eye-opener. The things I learnt today, I will remember for a long time to come.</p>
<p><img src="https://www.microsoft.com/products/expression/en/images/home/fma/expressionstudio.gif" alt="Expression Studio" loading="lazy" /> <img src="https://www.microsoft.com/design/App_Themes/Zaaz/overheadKalidescope.jpg" alt="Expression Studio" loading="lazy" /></p>
<p>Lets take it back a bit. Microsoft invited MSPs to the Designertopia conference at the London Marriott for a two-day conference on web development and design. Principally, its about Microsoft Expression Studio (their answer to Macromedia Studio). This includes Expression Web (Dreamweaver), Expression Blend (Flash but with total integration for Web), Expression Design (Fireworks) and Expression Media (a media catalogue and video encoding tool designed to be the final process before putting on the web). All of these things require some form of Visual Studio (express will do, Pro with Orcas CTPs is best). They're all linked together by the .NET 3.0 framework which includes XAML, and <a href="http://asp.net/">ASP.NET</a> 2.0 with AJAX. XAML allows for fancy effects that Adobe has been doing for ages to be put together in a markup language that anyone can use easily. This allows for some quite funky web sites, most of which can be seen on <a href="http://ajax.asp.net/">ajax.asp.net</a>.</p>
<p>However, Microsoft also announced the second beta of WPF/e, a cross-platform browser independent (well, currently not Opera) set of libraries that allowed for 3D object manipulation and all sorts of fancy effects that .NET 3.0/WPF comes out with. Using Expression Blend, you can create some great web sites using .NET 3.0 online. These sites impressed me a lot (especially the Burton one). You can see demos at <a href="http://channel9.msdn.com/playground/wpfe">Channel 9's WPF/e Playground</a></p>
<p>This keynote speech was good, but it wasn't amazing (well, the 3D stuff was). With my exposure to Digg, Prototype, <a href="http://script.alioc.us/">script.alioc.us</a> and dojo has rendered me somewhat immune to regular AJAX effects. What I didn't realise however, was the business effect of such things. The New York times has a reader written in WPF and users of the reader spend 10 times longer looking at the paper than those visiting the regular HTML site.</p>
<p>The first afternoon talk I went to was on the future of games and mobile entertainment looking at interaction with the user. The only really interesting bit was the potential introduction of emotion into video games. Headsets exist that can almost measure your current emotional state based on perspiration, heart rate and blood-oxygen levels. Imagine, Elder Scrolls: Oblivion with quests that you can only get information out of someone if you are angry with them! This talk also defined a very simple thing. If the core interactivity of a game is not fun then the game is not fun (i.e. in Quake the core is moving and shooting. If it's not fun, it's not a good game).</p>
<p><img src="https://www.webbyawards.com/images/webby_logo_sm.gif" alt="Webby Awards" loading="lazy" /></p>
<p>The second talk I went to was entitled, "Participatory Design" and was presented by the Director of the Webby Awards. He told two contrasting stories about implementations of user participation into a web site. 1. Doritos: Crash the Superbowl - Create a 30 second ad for the Superbowl - No limits, just feature Doritos - No tools given - Submissions moderated by Doritos before going online It created major interest as it was targeting people in small advertising companies who have access to camcorders and editing suites. The prize was suitably big; it doesn't get bigger than the Superbowl. Any malicious adverts simply didn't make it. It produced high quality ads i.e. <a href="http://tinyurl.com/yb5gf4">http://tinyurl.com/yb5gf4</a>: video below.</p>
<p>2. Chevy SUV ad - Create an ad for a new SUV. Potentially shown on TV - Given creative tools online. Stock footage and ability to put your own captions on too - Users can share their videos instantly online. Chevy messed up. Their target audince, SUV drivers, don't care enough about Chevrolet to make adverts for them. Therefore it falls to regular internet users who are very knowledgeable about issues such as climate change and the MPG of an SUV. Giving these people the tools allowed them to make realistic looking videos available online with a minimal amount of effort (just about as much effort that the general internet user wants to make). Chevrolet also released this on a Friday with no moderation process. By Monday morning they had a large number of negative adverts circling the internet that look like Chevy made themselves. By the time they took them down, it was too late.</p>
<p><a href="http://news.com.com/1606-2_3-6056633.html">More negative Chevy ads</a></p>
<p>Lessons. 1. Target the right people 2. Use the right incentives to attract the right people 3. If you want quality, don't make the process too easy 4. Avoiding bad press is essential, mediation can be necessary</p>
<p><img src="https://www.adaptivepath.com/images/new/logo_ap_180.gif" alt="Adaptive Path" loading="lazy" /></p>
<p>The final talk of the day was on a technical track. Called "Connecting Design to Real Business Value", presented by Brandon Schauer of Adaptive Path (who will be getting my C.V.). He took us through a series of examples trying to answer the question: "Does good design lead to an increase in product value?". He presented a number of examples from Flickr (photo web site) to Lula (book publishing web site). He came up with a simple workflow: 1. Identify problems - I want pictures for these users on my site 2. Compare projects and potentials 3. Benchmark metrics - Quantify things and see how much it should bring back in value 4. Design and Test 5. Assessment of Value - See how well it has done, quantify it. 6. Set budget - If it was successful, budget goes up 7. Repeat</p>
<p>The main problem is in identifying the areas of a business that will produce the most revenue from additional functionality. His solution was to first produce a simple business model (using <a href="https://www.steveworkman.com/2007/designertopia-day-1/www.Lula.com">www.lula.com</a> as an example). So, books uploaded * quantity sold * profit per book = revenue. The difficult part is to identify ways in which these simple factors can be increased. He pointed us all to a book published by Adaptive Path: "Business Case Modelling for Design Initiatives" <a href="http://adaptivepath.com/publications">Adaptive Path Publications</a>. The final important part is to prototype this new strategy. Brandon used storyboards to illustrate the effect on the user of this new strategy aimed at getting authors to write a second book. These simple storyboards are designed to be shown to clients for active discussion on ideas which then may/may not become a new design feature. It boils down to a few things: Model the business, identify areas in the model that can be enhanced Connect value with user behaviour. Quantify it and how to design it Prototype the strategy He recommended that you watch the design documentary on The Incredibles and that design studios take cues from film into having "dailies" to identify good and bad bits early.</p>
<p>That was the end of day 1. At the networking event afterwards (read: free beer) I met a man called Ian Lloyd, who wrote "Build Your Own Website the Right Way" - Standards based web design for the complete beginner (<a href="http://beginningwebdesign.com/">Link</a> - I hope I get some freebies for the plug). Talking with him about general practice in web standards was good, but what surprised us most was that of the people who had laptops, >50% of them were macs (mostly macbook pros) and that most of the presentations were given using Keynote, but that one of presenters used Vista under bootcamp on his mac! It's a Microsoft conference but that won't stop Apple ruling the design space. Unless Adobe completely screws up CS3 (not likely), no one will be moving from their mac.</p>
<p>I'll also mention that over lunch I met two people from RM (<a href="https://www.steveworkman.com/2007/designertopia-day-1/www.rm.com">www.rm.com</a> - the computing firm I most associate with computers in my primary school). Well, they've convinced me to apply for a graduate position there. It seems they do quite a bit of interesting consultancy out of their Oxford offices, including the government's school rebuilding project. It seems that they don't just network all schools in the local area, they're then connected to a complete country-wide network. RM are also into rebuilding schools from walls to catering (all outsourced but all contracts must be tendered etc) so the work is very varied. It sounds fun and at 22-26k starting I won't say no.</p>
<p>Well, I hope you're still reading, that was a really good mini-essay and there's more tomorrow.</p>
<p>Steve</p>
<p>Currently Listening to: the sounds of London i.e. taxis. Oh, and The Killers - Sam's Town Currently Reading: My notes from today and the agenda for tomorrow Currently Watching: Scrubs - 606 - My Musical. Best Episode Ever! Currently Eating: Hotel food, not bad! Tube rides so far: 3</p>
Designertopia - Day 22007-02-03T00:00:00Zhttps://www.steveworkman.com/2007/designertopia-day-2/<p>Friday 2nd Feb 2007</p>
<p>Designertopia - Day 2</p>
<p>After yesterday's revelations, my expectations were sky high and I was not to be disappointed. I tried to split my time equally between creative and technical sessions, so I hope I provide a good overview of everything that was on offer.</p>
<p>First up was "Technocraft", presented by Marcus Fairs, the founder of Icon magazine. My notes say that he talked about art using technology, but he talked about some very good examples. There were three which stood out, mirrors created from silver balls and servos, a chandelier with LED-embedded crystals that could write messages sent over SMS (called Lolita), and a simple device called the armchair activist, a speaker that reads out text messages (it is currently in the designer's office. It's phone number is: +447790272804). Images and videos below.</p>
<p><img src="https://www.waldemeyer.com/images/DSCF5745.jpg" alt="Lolita by Ron Arad" loading="lazy" /></p>
<p>So, with that rather light-hearted session out of the way, the creative track tackled "Creativity vs Technology". We were warned that from this point onwards the speakers would start repeating each other from the day before, therefore, I'll only tell you about the new stuff. Question: Is there creativity in the interactive space without technology? Answer: No. There are certain things that we are unable to do in that space without technology. The user's expectation is now very high so they need to involve the user. To do this, you must focus your users on a mission, create a puzzle or building blocks and let the user solve it, giving them the proper incentive of course. Secondly, designers must collaborate with designers from the initial stages of conception, involving the end user/consumer in the process. This is similar to the way that extreme programming and agile development works. Whilst this talk didn't really have much to do with creativity vs technology, the main theme was that they must be used together to create a complete experience. The speaker left us with a web site <a href="http://www.joshuadavis.com/">joshuadavis.com</a>. This man specialises in generative design, providing a set of rules for a program to follow that then creates the image.</p>
<p>The talk before lunch was more of a demonstration than anything. Carrie Langham from Microsoft took us through a number of real-world WPF applications including one for London fashion week, a golf tournament (which looked very good, with an enormous amount of detail) and finally an application designed for 2012, the final stage of the Building Schools for the Future project. I'll admit, this was the first time that I was truly amazed at what a WPF application could do, but I was incredibly surprised at it. I'll explain...</p>
<p>What was shown to us were four separate applications, a teacher's workdesk, a student at home, a student on a UMPC, and an administration application. The student and teacher apps had Vista sidebar gadgets associated with them too which launched the apps themselves. The workflow goes like this: A teacher sets an assignment and posts this to his students. The teacher can drag and drop graphics into an assignment in his workbook from anywhere and can even add bits of video. The student then opens their application (every desktop is customisable) and reads their workbook. They see that they have been assigned a partner and they can then IM/audio/webcam chat to their partner about their work. They then set up a shared workspace and can add things to it. Provided is a search facility which brings up articles, picture and video from approved sources (i.e. MSN Encarta). They can then drop these into their shared workspace and construct an assignment. They are also able to delve deeper into pictures and diagrams, i.e. a model of the body, double clicking the heart displays a 3D model of a beating heart that they can rotate and go inside. If they need help at any point, apart from all the resources on the net, they can call up an expert (IM/audio/webcam) and get an answer straight away. They then submit the assignment to the teacher who will add the marks to his online mark book. All this functionality is contained within the one application. The admin application that we were shown tracked pupils through the school using RFID tags. This application would then flash up alerts and call parents whenever they had been truant for a number of days, and, if necessary, would call the police!</p>
<p>This all sounds amazing. All this functionality in one place is astonishing, and its already happening too. Some schools are implementing RFID tags for registration and school access. Marking of homework is being done online starting from this year. However, from all this I saw a number of challenges, even in 2012. 1. Bandwidth - some of this stuff was very high quality. Even on an 8Mb connection, if someone is saturating your upload bandwidth with P2P applications, webcam performance degrades significantly. 2. Approved sources for search - Homework will suddenly become the same as kids are unlikely to dig for additional information. 3. Copy and paste generation - Children will not learn as they may just copy the text and past it into their homework without reading it 4. Experts - People don't want to be bothered at 10pm and will not care if it's deadline day 5. Privacy - Do you want your child to be on a webcam with a so called "expert"??? 6. Assumption of computing power - It'd be really nice to assume everyone will be on Vista, have a UMPC and a webcam, but that'll never be the case. Will this application run on OS X? I doubt it 7. Assumption of quality of resources - Poor resources will break this system. If you look at the 3D model of a heart and want the lungs but they've not been written yet, then you're in trouble. Low quality models won't provide adequate data either. What if the student is studying a really abstract section of the curriculum? Are the trusted sources guaranteed to give back an answer?</p>
<p>There are a lot of problems that need to be ironed out, but as a proof of concept, it's astonishing. I'm going to try and get the demo, or at least slides of it, then I'll show you what's going on.</p>
<p>Still with me? Good.</p>
<p><img src="https://news.bbc.co.uk/olmedia/140000/images/_143665_ikea.jpg" alt="IKEA Logo" loading="lazy" /></p>
<p>The first talk of the afternoon was by Lars Engman, design director of Ikea. This was more of an inspirational talk by a man who had been in design since 1968 and had been at Ikea since 1975. He explained Ikea's design process, which is similar to any other design process in the world, except for the idea stage. Ikea look at trends, and go the opposite direction! Below are a few facts and quotes from Ikea's methodology which I found interesting: Ikea is the 6/7th largest restaurant chain in the world. Their Bejing branch is able to seat 800 people. Good design contributes to positive emotions Science and technology define functionality. Simplicity is a virtue Identify the relevant customer benefits of a product Design is not about trends, but new ways to meet a person's needs Dare to fail, you will learn even more When you have good design, beauty will look after itself</p>
<p>I need some of those in big print on my wall :-)</p>
<p><img src="https://www.microsoft.com/library/media/1033/windows/images/products/windowsvista/features/details/mediacenter_01.jpg" alt="Windows Vista Media Centre" loading="lazy" /></p>
<p>The final talk of the day was on Vista Media Centre and Live services mashup. It was presented by a guy who definitely knew it was Friday afternoon and most of the demos were poor (thanks to the hotel's limited net connection and the non-functionality of his Xbox 360). He demonstrated the theory behind TVs with media centre extenders built in (think Apple's iTV but for media player), and explained what you needed to write applications for this service. To be honest, I didn't take much in and started writing this up.</p>
<p>After this talk, I was approached by Emile from <a href="https://www.steveworkman.com/2007/designertopia-day-2/www.akqa.com">AKQA</a>, saying that they were looking for students interested in the web site side of this in their creative development and IT development areas and to drop them a C.V. when I graduate. Sounds good to me.</p>
<p>In summary, it's been a great two days. I've learned a lot about what is expected of next-gen internet applications and what Vista and WPF can do for applications. Clearly, social sites like Digg and Flickr are here to stay. Users don't just expect quality from big company sites and large networking sites, but from every site that they visit. It's no longer just about the hook of the web site, it's the way they carry it off. Impress, or fail.</p>
<p>Steve</p>
<p>Currently Listening to: The Shins - Wincing the Night Away Currently Reading: AJAX for Rails Currently Watching: The world go by Currently Eating: nowt Miles to Sheffield: Don't know, however many it is from Watford Gap</p>
One long week2007-02-21T00:00:00Zhttps://www.steveworkman.com/2007/one-long-week/<p>This has been a truly amazing week. I've travelled over 1000 miles and I'm not done travelling yet. I've had success, I've had failure, but I've also had so much fun that I'd do it all again in an instant.</p>
<p>Everything started on Tuesday really, with my trip to Fujitsu. An early start meant travelling to Bracknell for 1pm, where I met 4 other people who, honestly, only one of which I liked. The day was done by Fujitsu's recruitment people, Alexmann. The presentation was boring and I was nervous when doing our individual presentations because I hadn't really practised it. I really wasn't bothered with the Fujitsu job. The pay they were offering was the lowest that I was applying for and the offices were horrid. The group exercise that we did didn't go particularly well either as the girl who was with us was determined to compromise on everything. Anyway, After that I came home, saw Zoe, then slept.</p>
<p>The Wednesday was a big day for me as it was the Microsoft Imagine Cup Roadshow tour. I'd spent ages organising it, getting parking permits, lecture theatres, buffets, but I'd not spent enough time advertising it, meaning that only 30 people turned up. However, it all went well and I think those that came enjoyed it. Some good free stuff was given out too. Straight after, I had to get on a train to Bracknell again as it was the HP interview the next day. This assessment centre was far more important than Fujitsu as it was the final stage so I'd actually done some preparation for this one. I had also just gotten a phone call from PA Consulting telling me I'd made it to their next round in early March. That was great news as the money they're offering is amazing.</p>
<p>This train journey was good, I finally got into Bracknell at about 10pm. I then proceeded to the Travellodge where I'd booked a room for the night. However, the bloke at the desk informed me that they were full! (It was valentines day but still, I'd booked!) He then called a hotel nearby called the Coppid Beech Hotel, a far more upmarket place and got me a room. He then put £45 on my card so that I could stay in the £115 room for the £70 I was meant to be paying! I finally got into my room just after 11pm. In general, it was very nice and breakfast was good the next morning, but still, it was a lot of hassle. I spent the rest of the evening practising my presentation for the next morning.</p>
<p>So, the big day came around and I walked the 10 mins down the road to HP HQ at Amen Corner. The offices were huge and nicely laid out (everyone had ID tags that let them into bits of the building). They first showed us a presentation about what HP was and what I'd be doing for the next two years. HP seems to have a good balance between taught training and on the job experience. There were 14 of us there (meant to be 15) and this was the third of seven sessions. We were also told there were 35 jobs. 7*15=105/15 = 5 people to get jobs that day. Not bad odds! There were 4 tasks that day. My first task was a case study (I won't go into detail) where you had to make recommendations and priorities how to change the IT infrastructure at this business. It wasn't too bad and I'm pretty sure I spotted the pitfalls and avoided them so all good there. I then had a competency interview which went well enough. Like at PA, they talked about Steel Software and Genesys a lot whilst asking a few questions about service and HP itself. Afterwards we all had lunch (very nice) and we talked to the managing consultants including one guy who'd been there 18 years (very interesting man). After lunch we had a team exercise. Using the usual stationary items plus 2 coins, straws and some wine gums, we had to come up with a game idea that lasted 10 mins for 4 people and then sell it to company directors in a dragon's den style presentation. What we came up with was a board game similar to mousetrap. Go round the board (coins to set distance) and collect straws and elastic bands, then landing on a sweet square you had to use the straw/elastic band to pick up a sweet and put it on your tower. It was a fantastic idea and on talking to other people definitely seemed like the best one of the day (then again, it was my idea *ego*). The final task was to do a presentation to one of the senior consultants. I presented Steel Software which was to time and prompted some good questions and seemed interesting too. The other guy in the room, another candidate, presented on a project he did in his sandwich year at Intel. However, he was talking about a project he was still under NDA for so his talk was somewhat devoid of detail on how exactly he solved problems but the message got across, somewhat boringly though. After that was a short Q+A session with one of last year's graduates. Turns out we're only the second graduate intake in 10 years! After this I went home. Finally got to Sheffield at half 8 and then went straight to see the Guillemots at the octagon. Fantastic gig, they'd been better but they'd not had more energy than that performance. After the gig I went for a curry with my godfather, ended up getting home at 1am. Such an immensely long, but incredibly enjoyable day, left me rather drained and just wanting to sleep.</p>
<p>The next day I just didn't wanna get out of bed. I got a call from Ernst and Young inviting me to interview shortly (I couldn't make the day the wanted to they said they'd call me back). Sounds good to me! My first proper day at uni all week was alright, but the evening was special. Zoe and I had put off valentines until the Friday so I took her out to a nice restaurant and then we went home and watched a film. It capped off a great week in style.</p>
<p>I'm writing this on a train down to London (again). Tonight and tomorrow is the MSP event, I'm staying at the Hilton Metropole in central London, then on Tuesday is my IBM half-day, with two group exercises, one of which I've done before. All sounds great and I get to stay in hotels for another two nights. It's strange but I'm becoming rather used to it. As a consultant I'll basically be living in a hotel all week then going home at the weekends. I'm sure I'll get bored in the end but all this travelling is exciting, meeting new people is great and I'm excited to start work (but also excited to stop job hunting!) I'll miss Sheffield when I'm gone, mostly for the people and hockey, but I'll find another club near Reading.</p>
<p>I need some sleep</p>
<p>Steve</p>
<p>Currently Listening To: Joan as Police Woman - Real Life Currently Reading: Marketing bumpf Currently Eating: Tesco sandwiches Currently Watching: Grey's Anatomy (you can't kill off primary characters!!!) Miles travelled this week: unknown (will edit later)</p>
Interviews and Decisions2007-03-13T00:00:00Zhttps://www.steveworkman.com/2007/interviews-and-decisions/<p>Today I was at PA Consulting in London (Victoria). This was my last interview of my job hunting process as I've already been offered a job at HP which I've accepted (not signed on the line yet tho). There were 4 of us there, including a guy I met at the HP interview (he'd been offered a job there too). We got on quite well as I knew him and he was nice n chatty. We weren't actually in PA's offices as their meeting room floor is being re-furbished, we were on the 27th floor of a building nearby (which had rather spectacular views). Anywho, the day was set out to have three tasks. An interview by a senior consultant, a case study and a group exercise. Firstly, I'll say that these were the hardest three tasks I've had at any assessment day.</p>
<p>The case study was to plan an initial meeting with the CEO of a phone company who somehow had 30% of the marketplace with a very small number of phone handsets. That was hard because you had to prep it all on your own and there wasn't a huge amount to prepare for, just hope you covered everything. The other candidates said they presented using the flip chart but I just sat with an agenda and talked to him. The case study said it's a discussion and presenting just wasn't necessary to be honest.</p>
<p>The interview was just a standard interview, they went over the CV and didn't ask too many hard questions. That bit was almost relaxing actually.</p>
<p>The group discussion, it wasn't the solution that was hard, but the fact that the plan we came up with was so tight to budget and time that there was no room for error, which, of course, lets the assessors ask the most awkward questions. I was actually completely stumped by one of their questions, (about the history of the company that we were representing) but the rest of the team pitched in and blagged an answer. Thankfully though, I was the one who took the lead and made good suggestions for the marketing, pointed out mistakes in one of their working and thankfully corrected it because otherwise we'd have made the wrong suggestion.</p>
<p>I'll find out on Thursday if I have a job with them. Would I take them over HP? Yes. They're a nice bunch of people and they'll train me to the highest standard and they'll pay very well. The route up the tree is good and the bonuses can be great. If I don't get it, it doesn't matter. But, in my personal opinion it'll be me and the other HP guy who get it if we are gonna get it. If I do, I'll be happy in the knowledge that I'm one of 8-10 people who are the best graduate consultants in the country. That's a great honor, and the usual ego boost for me :D</p>
<p>There is a problem though, wherever I go. I will no longer have the time to develop Steel Software and Uni-Sport. It's a real shame that I can't carry on with my passion, but it's the truth and I can't kid myself that I'll be able to do it all. So, as far as I see it, I've got a few options: 1. Stop all-together, leave it as it is now, get no new clients. Fix bugs as necessary and release the source code to each club 2. Stop, but make the project open-source 3. Keep the code, add in facebook API profiles, fix any problems that have come up and extend fantasy hockey a little bit so it's manageable. 4. Keep the code, re-write everything so it's facebook-integrated and modern with rails then attempt to keep a little side-business open with the occasional sale 5. Same as above but sell the code to someone else</p>
<p>I don't think that option 1 would work. The clubs wouldn't understand how to work it, but, if I can't commit to anything then I'd prefer that option over number 2. Open-source community could do some funky things to it and I'm not sure I'd like it. Option 3 is the most likely, it's not a major amount of work and I can still sell it around Sheffield uni. Option 4 would be ideal but the amount of time that would take is basically my entire summer holiday, not to mention that I'll be learning as I go along which will slow things down immensely. If I found a buyer for this stuff it'd be amazing but I wouldn't know who to start with. Only facebook would be interested and that takes away the public front-end of sheffieldhockey which is not what the club wants.</p>
<p>I think I choose 3, with the option of doing 4 if I have nothing else on in the summer. Of course, if the hockey club ask for the code, I'll give it to them. I'll also need to create a lot more documentation.</p>
<p>So, with that decided I can relax for the rest of my train journey, yay.</p>
<p>Steve</p>
<p>Currently Listening to: Queens of the Stone Age - Lullabies to Paralyze Currently Reading: Not much Currently Eating: Less Currently Watching: Re-runs Difference in £ between HP and PA annual salary: £5,500</p>
Facebook Platform - a thought2007-05-26T00:00:00Zhttps://www.steveworkman.com/2007/facebook-platform-a-thought/<p>Right, in the post below this one I said Uni-Sport will never be a facebook app in its current form. I'll clarify that.</p>
<p>The USE (University Sports Engine) will never be a facebook app. <a href="http://uni-sport.org/">Uni-Sport.org</a> can be!</p>
<p>In January, I beta tested a simple RSS reader system that gathered statistics from the Uni-sport network and presented them in one big page. This type of functionality can be put into a facebook app. Basically, it'll display news stories from the network and provide links for you to log in and talk on the forums, post news, read match reports etc. Not only does that involve facebook in Uni-Sport, (with USE changes) logging into facebook will allow you to see news stories in your facebook news feed, which then will take you to your Uni-sport site where you'll already be logged in (by virtue of facebook's active sessions)</p>
<p>You can expect to see this feature sooner rather than later</p>
<p>Steve</p>
The Facebook Platform2007-05-26T00:00:00Zhttps://www.steveworkman.com/2007/the-facebook-platform/<p><img src="https://static.ak.facebook.com/images/devsite/header_logo.gif" alt="Facebook Developers" title="Facebook Developers" loading="lazy" /></p>
<p>Well, facebook have certainly shaken things up a bit haven't they. Almost totally opening up the API so developers can write applications that fit <strong>inside facebook itself</strong>! Utterly unheard of before, but potentially brilliant. Lets have a quick look at what you can do with all this new technology.</p>
<p>From the developer's pages, <a href="http://developer.facebook.com/">developer.facebook.com</a> they've created their own markup language, FBML. This allows for quick access to certain functions and their layout styles. Great stuff. You can also add in flash and mp3 files so people can listen to music. You can also add in an <code><iframe></code> element to display an off-site page. You can upload pictures from external applications and you can query the database using FQL (Facebook Query Language). This all sounds really great, but lets look at the limitations.</p>
<ul>
<li>No Javascript - though not a surprise, some applications and advanced forms rely on it</li>
<li>No external stylesheets - boo and hiss to this one, all your styles must be in <style> tags</li>
<li>No AJAX - well, they provide automatic form submission, but that's it. You can't perform your own queries though the usual AJAX way</li>
<li>You can't edit user details or post stuff to groups - still a bit disappointment as this limits the level of interaction with the user profile.</li>
</ul>
<p>The big thing really is the ability to put iframes inside the canvas. From there you can do whatever you like inside the frame.</p>
<p>So, it all sounds good. Now it's whether I can use it. Today I sent out an e-mail to all <a href="http://uni-sport.org/">uni-sport.org</a> members with a link to a survey on it (<a href="http://www.tigersurvey.com/survey.php?survey=2815">http://www.tigersurvey.com/survey.php?survey=2815</a>) so I can get some feedback. One of the questions is about facebook and if people would want an extra feature, would it be better pictures, commenting, facebook integrates with profiles or uni-sport integrates with facebook in the way of an app. At the moment, I'm hoping a lot of people don't go for the last option.</p>
<p>After some thought, I'm not sure if it would be possible to use facebook apps for such a complicated application as uni-sport. For it to work as it does at the moment, if a club asks for a web site, they will have to have their own unique facebook application. This is because of the team selection idea. If a group wanted to do team selection from within an application, only people in that group would be on the list. However, there is no way to make an application private between a group of people and AFAIK, no way to moderate who uses the application. There can't be a global application as team selection wouldn't work very well (it'd have to be select from people in network X who are members of group X, but that forces people to be in a group, which isn't how it should work).</p>
<p>At the moment, Uni-sport is a glorified group page with team selection, match reports and a calendar. With team selection being at the heart of uni-sport, until private applications can be written, Uni-Sport will not be appearing as a facebook application.</p>
<p>Well, I'm glad that that decision has been made, now I can get back to my revision (lol)</p>
<p>Steve</p>
<p>Currently Listening to: David Ford Currently Eating: Birthday Cake Currently Reading: CSS Mastery and facebook documentation Currently Watching: Lost season 3 finale. Amazing Days left at University: 13</p>
A plea to CSS experts2007-05-27T00:00:00Zhttps://www.steveworkman.com/2007/a-plea-to-css-experts/<p>I've been having some fun today. Apart from not getting out of bed to earn my keep (aren't laptops great) I've been playing with techniques from the book <a href="http://www.cssmastery.com/" title="CSS Mastery">"CSS Mastery" by Budd, Moll and Collison</a>. This playtime will form the <a href="http://www.genesysconsulting.co.uk/" title="Genesys Consulting">Genesys Consulting</a> website, which will go online when I'm done with it.</p>
<p>However, I've run into a big problem. The Fuzzy CSS Shadow technique in the book (also found on <a href="http://www.alistapart.com/articles/cssdrop2/" title="CSS Drop Shadows 2">A List Apart</a>) has the annoying problem that it floats the image to the left. This causes me whole swathes of problems because this image needs to be centered. I've uploaded a test version to <a href="http://beta.steel-software.com/" title="Steel Software Beta">my beta site (beta.steel-software.com)</a> so you can have a look.</p>
<p><a href="https://www.steveworkman.com/2007/05/a-plea-to-css-experts/genesys-consulting-with-problems/" title="Genesys Consulting, with problems!"><img src="https://www.steveworkman.com/static/img/plea-picture-1.png" alt="Genesys Consulting, with problems!" loading="lazy" /></a></p>
<p>The following ideas do not work:</p>
<ul>
<li>If I apply a <code><div align="center"></code> to it, nothing happens</li>
<li>If i remove the float:lefts from the CSS, the shadows break</li>
<li>The page is liquid layout and having margin-left: 40% produces different results in FF compared to Opera/Safari</li>
<li>I would also want to be using different images for that section, loaded in from a db, not all of them will be the same width, so a margin-left: 300px won't do either.</li>
</ul>
<p>This is all explained in a <a href="http://www.codingforums.com/showthread.php?t=115061" title="Help me!">plea I made on CodingForums.com</a>. So, I'm now asking you lot, the people who read my blog (yes, all 2 of you). If you know what I can do to fix this problem, please leave the answer in a comment, send me an email (steve dot workman at gmail dot com) or write on my facebook wall.</p>
<p>Steve</p>
<p>Currently Listening to: Zero 7 Currently Watching: BBC2 Currently Reading: CSS help sites! Currently Eating: Sunday roast, mmmmmmm</p>
Something a little special2007-06-24T00:00:00Zhttps://www.steveworkman.com/2007/something-a-little-special/<p>Good morning folks.</p>
<p>It's 2:24am here, I've just finished watching the Glastonbury coverage on TV and I've just finished the layout for a new website, which, as far as I'm concerned, it's something really special.</p>
<p>The general idea is that the website looks like a notebook. Practically, it looks like it's been done in flash but it's actually 100% CSS and XHTML. It's taken me about a week of trying things out but finally it's done. Hopefully tomorrow I'll do the content and stick it up. Therefore, I present to you, <a href="http://steel-software.com/">Steel-Software.com</a></p>
<p><a href="https://blog.steel-software.com/wp-content/uploads/2007/06/steelsoftware1.jpg" title="Steel-Software"><img src="https://blog.steel-software.com/wp-content/uploads/2007/06/steelsoftware1.jpg" alt="Steel-Software" loading="lazy" /></a></p>
<p>Comments and criticism are more than welcome.</p>
<p>In other news, I've found out that I've got a first in my degree and that I've just got a new flat in London (Balham exactly, south of Clapham).</p>
<p>Steve</p>
<p>Currently Listening To: Arcade Fire, also signed up for <a href="http://last.fm/">Last.fm</a> - user sylverfyre Currently Watching: Glastonbury Currently Reading: Adobe Photoshop CS3 for Photographers Currently Eating: The contents of my fridge as I'm now moving out! Days left in Sheffield: 6</p>
Steel-Software.com reborn2007-06-29T00:00:00Zhttps://www.steveworkman.com/steel-software-com-reborn<p>Good afternoon everyone,</p>
<p>It's a whole week since I last posted a teaser for the new <a href="http://steel-software.com/">Steel-Software.com</a> design, and after a significant shrinking process (the whole design didn't really work if it didn't fit on one page without scrolling) the website is now live! Go, go now to <a href="https://www.steveworkman.com/www.steel-software.com">www.steel-software.com</a> and have a look! I'm rather proud of it, but I have a feeling that I'll be tweaking it next week, and hopefully making it load faster too!</p>
<p><a href="https://www.steveworkman.com/static/img/picture-3.jpg" title="Steel-Software.com reborn"><img src="https://www.steveworkman.com/static/img/picture-3.jpg" alt="Steel-Software.com reborn" loading="lazy" /></a>I've updated my blog pages a bit too. On the right you'll now see my weekly top artists on <a href="http://last.fm/">Last.fm</a> and the latest pictures I put on my flickr photostream. Whilst it's a bit of a shame that I can't keep the blog in with the styling of the website, but that's for another day when I have time to learn the wordpress architecture!</p>
<p>Other than that, there's no more news. I'm packing my bags in Sheffield and moving back home for a few months. I'll be working on my projects in the comfort of my own bed :-)</p>
<p>Steve</p>
<p>Currently Listening to: Look to the right, find out! Currently Reading: nothing Currently Eating: Minstrels Currently Watching: American Dad Hours left in Sheffield: 16</p>
Uni-Sport Survey Results2007-07-02T00:00:00Zhttps://www.steveworkman.com/2007/uni-sport-survey-results/<p>In mid-May, just before the start of exams, I created a survey for the members of the <a href="http://uni-sport.org/">Uni-Sport.org</a> network. This survey was designed to show me what was missing from the website and how I could improve it. It's now early July and I've finally collated the results for everyone to see. After each graph I'll give some of my personal thoughts and feedback on everyone's suggestions, along with some deeper analysis if it is necessary to clarify anything. So, without further ado, lets get to the results!</p>
<h3 id="how-much-did-you-enjoy-the-club-news-feature%3F" tabindex="-1">How much did you enjoy the Club News feature?</h3>
<p><img src="https://blog.steel-software.com/wp-content/uploads/2007/07/070207-2059-unisportsur1.jpg" alt="" loading="lazy" /></p>
<p>Well, from this I'd say that the club news is a success. News doesn't have to be amazing, it just has to be there and accessible, which it is. Those people who voted it as poor were from mens eugby (2 posts all year) and mens football (0 posts all year), and those people who voted it as excellent (hockey and womens football) have posts almost every week. Simply put, use the news feature more; your members will get more out of it.</p>
<h3 id="how-useful-were-the-forums%3F" tabindex="-1">How useful were the forums?</h3>
<p><img src="https://blog.steel-software.com/wp-content/uploads/2007/07/070207-2059-unisportsur2.jpg" alt="" loading="lazy" /></p>
<p>For once, a resounding success! Whilst the level of banter may have receded due to Facebook, there's still enough to keep things going. The forums shall stay as-is, with perhaps an upgrade to <a href="http://www.phpbb.com/">phpBB</a> v3 (the technology the forums are built on).</p>
<h3 id="how-useful-do-you-find-the-picture-gallery%3F" tabindex="-1">How useful do you find the picture gallery?</h3>
<p><img src="https://blog.steel-software.com/wp-content/uploads/2007/07/070207-2059-unisportsur3.jpg" alt="" loading="lazy" /></p>
<p>Well, I can hardly say I'm surprised. Since version 1 was me putting pictures up myself and version 2 featured possibly the worst searching system I'd ever devised, version 3 at least came up with something usable. Then, along came Facebook with an easy-as-pie Java picture uploader, support for iPhoto exporters and proper albums. Along with the UI and profiles, this is the other major area of upgrade in v4.</p>
<h3 id="how-useful-do-you-find-the-team-selection-feature%3F" tabindex="-1">How useful do you find the team selection feature?</h3>
<p><img src="https://blog.steel-software.com/wp-content/uploads/2007/07/070207-2059-unisportsur4.jpg" alt="" loading="lazy" /></p>
<p>This surprised me somewhat. An even spread amongst the voting indicates a number of things:</p>
<ol>
<li>The way it's done amongst the non-hockey clubs differs greatly, generally because they didn't keep it up or start using it at all. This may be a problem with not all members being in the system (you can't be picked for a team unless you're on the system)</li>
<li>The interface for picking teams needs an overhaul</li>
<li>Some people without the system voted for poor anyway</li>
</ol>
<p>Either way, some of you are happy, some aren't. Things will be done about it, don't worry, but nothing fundamental</p>
<h3 id="how-useful-do-you-find-the-events-calendar%3F" tabindex="-1">How useful do you find the events calendar?</h3>
<p><img src="https://blog.steel-software.com/wp-content/uploads/2007/07/070207-2059-unisportsur5.jpg" alt="" loading="lazy" /></p>
<p>Some interesting comments came with this one. One person said that the events calendar could have training schedules on. At the moment, you have to create training as an event, but I can split the event category into two and have a "social" event and a "non-social" event. That way, you can stick anything on the calendar. So, that'll get fixed (probably) but the majority response was positive.</p>
<h3 id="(hockey-only)-did-you-enjoy-the-fantasy-hockey-feature%3F" tabindex="-1">(Hockey Only) Did you enjoy the fantasy hockey feature?</h3>
<p><img src="https://blog.steel-software.com/wp-content/uploads/2007/07/070207-2059-unisportsur6.jpg" alt="" loading="lazy" /></p>
<p>Well, this graph more shows how many responses I got from hockey players. The person who voted 'no' was actually from the rowing club, so that vote can safely be ignored. Will fantasy hockey come back next year? Err... maybe. The problem is that I set it up in a hurry and there's no archival feature. Building that in would take 1. A long time, and 2. More effort than it's worth. I could simply reset the database for next year, though good luck to the webmaster that has to value everyone!</p>
<h3 id="if-you-could-add-one-thing-to-the-website%2C-what-would-it-be%3F" tabindex="-1">If you could add one thing to the website, what would it be?</h3>
<p><img src="https://blog.steel-software.com/wp-content/uploads/2007/07/070207-2059-unisportsur7.jpg" alt="" loading="lazy" /></p>
<p>'Other' Comments:</p>
<ul>
<li>The site is a very good idea but I logged on to the site once last year. Facebook was much preferred option to organise events and let people know about anything that was going on as people used it far more often. Plus I preferred to use BUSA website to see fixtures and results as it was up to date.</li>
<li>All good!!!</li>
<li>Could possibly include names of people in photo when uploading, if not known could be edited by anyone later... Then could search all photos by person as well as by event. E.g. search "Husky" and "Sutra" and all photos containing both Husky and Sutra would be displayed... - No idea how difficult that would be to setup.</li>
<li>Don't include facebook!</li>
<li>Many, many, many thanks</li>
<li>should have training schedules on</li>
<li>It's a splendid advance on anything I've seen before, and a model for websites elsewhere (so I've been pointing people to it as an example of good practice).</li>
</ul>
<p>Firstly, the graph: I refer everyone to my previous post <a href="http://blog.steel-software.com/?p=29">about USE and Facebook</a> quoting the following lines:</p>
<blockquote>
<p>"With team selection being at the heart of Uni-sport, until private applications can be written, Uni-Sport will not be appearing as a facebook application."</p>
</blockquote>
<blockquote>
<p>"The USE (University Sports Engine) will never be a facebook app. <a href="http://uni-sport.org/">Uni-Sport.org</a> can be!"</p>
</blockquote>
<p>Everyone has seen Facebook Apps by now, and personally, they're getting on my wick. No, I do not want to have superpoke, horoscopes, fortune cookies etc cluttering up an already cluttered page! I want to you see my <a href="http://last.fm/">Last.fm</a> tracks and my Flickr photos; shove everything else out the way! As I've said before, complete integration won't work, but partial integration will. Simply put, from September, you will be required to have a Facebook ID to sign in to the site. This will control your profile, meaning you only have to have one login. Secondly, there will be a small Facebook App called Uni-Sport which will aggregate your personal RSS feed that the website will generate for you. This will tell you if there are any news posts, if you've been selected for a team or if there's any events. Members in authority will still have to add these things from the main site, but every member will now be notified on their Facebook home page. Hallelujah!</p>
<p>Regarding the 'other' comments, Husky, the photo tagging feature actually made its way into USE in v3.05 but I didn't exactly shout it from the rooftops. You'll actually get some notice this time and I promise it'll work better than it does right now. The person who said don't include Facebook is wrong. There's no point in trying to fight it, Facebook is the 'big kahuna' now and I'd better hop on the band wagon. The final person, thanks for the comment, I do appreciate it.</p>
<p>If you'd like to see the full results, one may go here: <a href="http://www.tigersurvey.com/report.php?survey=2815">http://www.tigersurvey.com/report.php?survey=2815</a></p>
<p>So, the main points to take away from this 1200 word essay:</p>
<ol>
<li>I hear you, Facebook rocks, we're getting onboard</li>
<li>The picture gallery sucks, do something about it</li>
<li>The user interface could do with a spring clean</li>
<li>The forums are great</li>
<li>People need to visit the site more often. Getting people to do that will have to involve Facebook</li>
</ol>
<p>Well, you can now see my plans for USE v4. Some of these have been in the pipeline for a while, others popped into my head whilst writing this. Still, I'll now be taking a small break from talking about USE and Facebook whilst I develop it. The next time you hear of it, I'll have a beta of the new UI up, most likely on <a href="http://beta.steel-software.com/">Steel Software Betas</a>.</p>
<p>Steve</p>
<p>Currently Listening to: Jeff Buckley Currently Eating: Left-over bolognaise Currently Watching: Daytime TV Currently Reading: My PA Consulting pensions pack. Who knew there were so many options! Days until I can upgrade my crap phone: 9</p>
USE v4 Preview2007-07-04T00:00:00Zhttps://www.steveworkman.com/2007/use-v4-preview/<p>Well, I've been hard at the re-design for 2 days. The underlying code now seems a lot more readable, and the page is far more organised and robust. I believe I've completed the layout of each sections, and I've completed the first iteration of the header stylings, which I'll show to you, right now</p>
<p><a href="http://blog.steel-software.com/wp-content/uploads/2007/07/header_july4.png" title="USE v4 Header July 4"><img src="https://blog.steel-software.com/wp-content/uploads/2007/07/header_july4.png" alt="USE v4 Header July 4" loading="lazy" /></a></p>
<p><a href="https://blog.steel-software.com/wp-content/uploads/2007/07/header_july4.png" title="USE v4 Header July 4"></a></p>
<p>I am currently feeling that the lower buttons are too tall and they need to be different in some way. The header is also a little too tall itself. I was considering moving the home/forum/FH buttons to the top, next to the club name. We'll see.</p>
<p>That's all for now, might update when the rest of the page is of a similar standard.</p>
<p>Steve</p>
<p>Currently Listening to: Harry Potter 6 on audiobook Currently Eating: Parent-cooked food :-D Currently Reading: My CSS book again. Lifesaver! Currently Watching: Rome, never has there been such an excuse for flesh Commits to the USE v4 SVN: 4</p>
2 weeks in2007-07-15T00:00:00Zhttps://www.steveworkman.com/2007/2-weeks-in/<p>I thought I'd write about what I've learned so far with the development of USEv4. I've been working at it for 2 weeks now and it's come quite a long way, so quickly, here's a list of what's been done.</p>
<ol>
<li>The re-design is complete, navigation is now completely in the header, context-sensitive options are on the right, information is on the left.</li>
<li><a href="http://jquery.com/" title="jQuery">jQuery</a> functionality has been integrated. Sidebar panels can be closed with a fancy slide transition effect.</li>
<li>The public side of things (calendar, match reports etc) are now in the <a href="http://www.smarty.net/" title="Smarty">smarty</a> templating system.</li>
</ol>
<p>The benefit of putting everything into the template system, is not only for code re-use, but for the future and for expandability, i.e. if you want to make your own templates and completely change the presentational layer, you can! The other benefit is that I'm going through what is now 2-year-old code, some of which was updated a year ago, some of which wasn't. At every line I'm making it more efficient, removing loops, updating the SQL, and putting everything into objects.</p>
<p>Objects are something of a life-saver. At uni, I've been taught that Object-Oriented programming is great because of code re-use. I've never been the best O-O programmer, but I do know how to do it, though it seems from my previous two years work that I've forgotten! For example, the current site has 3 places where a 'mini-profile' is displayed, containing the same information each time. In USEv3, this was controlled by 3 separate sets of statements. In USEv4, this is controlled by one object, meaning that to display a mini-profile now only requires 4 lines of code, instead of 70.</p>
<p>Putting the major website functionality into objects is taking time though, but I've got 90% of them done now, so development will speed up significantly.</p>
<p>Quickly, a word on jQuery. It's incredibly powerful but also very annoying because even the tinyest slip can throw an error, but firebug (javascript debugging in firefox) doesn't always pick it up! However, it is easy to do some very fancy effects with it, though I'm wondering how much overhead this is going to create for the website! Thank god for broadband prevalence!</p>
<p>Steve</p>
<p>Currently Listening to: Pink Floyd Currently Reading: Stuff about Greece Currently Watching: Not much Currently Eating: Curry Number of USEv4 SVN commits: 24</p>
Fixes and Fancy Stuff2007-08-17T00:00:00Zhttps://www.steveworkman.com/2007/fixes-and-fancy-stuff/<p>First, sorry for not updating this blog in the past month. I've been to Greece and then spent another week here doing all the touristy things with my girlfriend so I've not really had time to update this.</p>
<p>I'd then like to say, that whilst I've not been updating this, I've been hard at work on USEv4. Since I last updated, the whole site has been put into the templates and at the moment I'm just going over everything and fixing any problems I come across. Whilst I've been doing this I've been getting the opportunity to add a couple of fancy bits in. For instance, I've now got the <a href="http://jquery.com/demo/thickbox/">Thickbox</a> jQuery plugin working for squad status (see below)</p>
<p><img src="https://www.steveworkman.com/static/img/fixes-picture-1.jpg" alt="alt-text" title="a picture" loading="lazy" /></p>
<p>Basically, instead of popping up a new window showing the page, this tiny 10KB plugin makes the rest of the page inactive and gets whatever little bit of data I want. This will also be used in the new facebook login ;-)</p>
<p>Talking of the Facebook login, I'm going to try and have that done by early next week. I'm actually quite looking forward to getting on to the new stuff. Fixing the current site (all 20,000 lines of it) is alright, but it's monotonous and really gets to me because it's very repetitive. New stuff gives me chance to make things better, not just fighting to make them work!</p>
<p>So, Wanna see what this all looks like? <a href="http://beta.steel-software.com/">http://beta.steel-software.com</a> Username: hockey Password: love</p>
<p>It's updated nightly with the latest revision and there's a list of things that are working and aren't on the front page.</p>
<p>I'd love to hear what you think and if you find anything that's wrong. Also, I'd love to know about how fast the website loads. At the moment the adverts are disabled so that'll save some time, but I often worry that it's getting a little bloated.</p>
<p>Anywho, that's enough from me. Take a look at the site!</p>
<p>Steve</p>
<p>Currently Listening to: The White Stripes Currently Eating: Chicken Rogan Josh Currently Watching: Whose Line is it Anyway Currently Reading: Nothing, Harry Potter was good though! Current SVN Revision: 75</p>
Getting a Facebook Login working on your application2007-08-18T00:00:00Zhttps://www.steveworkman.com/2007/getting-a-facebook-login-working-on-your-application/<p><em><strong>Update 2010:</strong> This method is still valid but has been replaced with "Facebook Connect". See a follow-up post: <a href="https://www.steveworkman.com/web-design/facebook/2010/facebook-logins-with-facebook-connect/">Facebook Logins with Facebook Connect</a></em></p>
<p>I'm writing this after a hard day's work with the Facebook API. It's almost been work the blood, sweat and tears that I have shed during the last 5 hours. This will also hopefully serve as a guide for anyone trying to get something simple done with facebook authentication.</p>
<p>Firstly, my mission:</p>
<ul>
<li>Enhance the current login system of USE to use Facebook, thereby giving me access to their facebook profiles and posting messages to them there, instead of giving my users 'just another thing to update'</li>
<li>At this point in time, I only want my users to be able to log in with facebook</li>
<li>Doing this also makes my login more secure</li>
</ul>
<p>My first steps take me to <a href="http://platform.facebook.com/">platform.facebook.com</a> and to their guides. I add the developer application and get myself an API key, setting up my server at the same time. There are plenty of other tutorials that show you how to do that.</p>
<p>The next thing I do is go to the <a href="http://platform.facebook.com/documentation.php?doc=login_web">authenticaiton documentation</a> and grab their login button and put it into my website. As previously mentioned in other posts, I wanted to use the <a href="http://jquery.com/demo/thickbox/">thickbox</a> technique to log in; however, I then came upon the first limitations of the facebook platform</p>
<ol>
<li>The thickbox can open an iframe with the facebook login in it, but in order to close that box on the click of login, I have to attach some javascript to the button, which I can't do</li>
<li>Even simply having the login come up in a popup has the same problem.</li>
<li>Even so, ignoring that, once you click ok, Facebook redirects you to the callback page, but it does so in the iframe/popup!</li>
<li>Even if that was all acceptable, in order to retrieve the Facebook session, you need to use the auth token provided in the returned URL, which you can't get at in the iframe/popup without some funky javascript</li>
</ol>
<p>Thus, I've dropped the thickbox login. Very sorry. If you can think of a way around this, please please please let me know.</p>
<p>Next comes with what to do with everything. My previous login was actually controlled by the phpBB forums and, whilst it is still possible to throw the token to the forums, I haven't in this example as it overcomplicates things (and I'm waiting for phpBBv3 to go gold). I considered the following tasks that the script had to do before it would log people in</p>
<ol>
<li>Test if the auth_token is real</li>
<li>Test if the user is in the database</li>
<li>Get their details and fill my session variables</li>
<li>Prevent this process from happening every time</li>
</ol>
<p>The first one was quite easy actually. Looking at the facebook.php file in the client library (from the developer tools) I found a do_get_session($auth_token) method. This swaps my token for a session, returning an array if it's alright, nothing if it's not. The array contains the user id, session key and a time for when the session expires</p>
<p>The second bit is the hardest. On <a href="http://sheffieldhockey.com/">sheffieldhockey.com</a> alone there are 435 registered members (though only half that number are active really). Also, not all of them are on facebook and I certainly don't know their facebook IDs to populate the database with. Therefore, this second bit involves a test to see if the user is there, then if they're not, they will be bounced to a page asking them to register, or to pick their name from a list. This is the only way I can see a nice smooth transition without me getting the admin to trawl facebook for people.</p>
<p>The third part isn't that hard, assuming there's a person in there. Simply get the data and set it.</p>
<p>Preventing it from happening each time is a simple check of the sessions to see if they're set and then if an auth_token is set. The trickiest part of this was that I'd been defining my variables twice and so it looked like the sessions weren't setting until a refresh of the page. Thankfully that's fixed now.</p>
<p>The hardest part in this game actually seemed to be getting the logout working! Facebook requires that to log a user out you must POST to <a href="http://www.facebook.com/logout.php">www.facebook.com/logout.php</a> with confirm=1 set. I tried a couple of ways first, initially with a form, but that simply dropped me out into a Facebook login screen and when I went back, I hadn't cleared my sessions so I was still logged in!</p>
<p>Secondly, I tried and AJAX request to the page, but that page disallowed it. Finally, I found a script that let you do POST requests without forms (google for it) and from there I made a page, called the function, cleared my sessions and headered back as normal.</p>
<p>And all that does is log you in... it's a lot of work for not very much, but it'll allow you to do so much more. That said, the pain of not being able to do the thickbox login is annoying and to be honest it distracts from the site. Any way around that and I'll be eternally greatful!</p>
<p>There's no nightly USE build tonight due to the above (and me not having finished the facebook ID associator)</p>
<p>Steve</p>
<p>Currently Listening to: My Chill playlist for Emily Currently Reading: Facebook documentation Currently Watching: Batman Begins Currently Eating: Leftovers and Milka Current SVN Revision: 81</p>
USEv4 is Done!2007-09-01T00:00:00Zhttps://www.steveworkman.com/usev4-is-done<p>I am very proud to announce the immediate availability of USEv4, the latest generation of sports clubs websites. This generation features a massive amount of enhancements and new features, lots and lots of which are below:</p>
<ul>
<li>New design - Completely re-done layout with all the latest CSS trickery and web 2.0 graphics.Designed to focus your view on the content and yet have every option at your fingertips. Features collapsible menus, lots of fancy transitions and auto-completing forms</li>
<li>Facebook logins - Associate your account with facebook and use that to log in and out of the site. Your profile will then be read from facebook and notifications will be sent to your account! (pending a minor change)</li>
<li>New Gallery - Pictures now feature tagging and are organised into albums. There are also shared albums that anyone can create, edit and add to.</li>
<li>Improved editor - USEv4 integrates with the TinyMCE text editor so it's easier to create more colourful messages</li>
<li>Improved squad selection - much-improved selection process</li>
<li>More efficient - All this extra functionality for very little extra downloads</li>
<li>Templating system - USEv4 uses the Smarty templating system, allowing different designs to be made easily</li>
<li>Many, many, many bug fixes....</li>
</ul>
<p>Version 4.0 will be the last major revision (unless anyone wants to but it??? Anyone?) though there may be additions to it, and there will be bug fixes of course (if you find any, contact <a href="mailto:support@steel-software.com">support@steel-software.com</a>), but as I start my job on Monday, support will be limited until I get settled.</p>
<p>So, what does this mean for the clubs? Well, I'll be sending out invoices in the next few days for this year's upkeep and as soon as I receive payment you'll be upgraded to v4.</p>
<p>For the average user, once your club has received v4, all you have to do is click the button that looks like this: <img src="https://static.ak.facebook.com/images/devsite/facebook_login.gif" alt="" loading="lazy" /> This will then ask you to log in to facebook, accept the application and then find your username in the list. If you're not on the list then you can register from that page.</p>
<p>I've updated the security settings so that current committee members have access to everything they need.</p>
<p>I'd love to hear you comments on the site and any suggestions that you have. Any feedback is better than no feedback so leave a comment in this post or if you're registered, post on the <a href="http://www.sheffieldhockey.com/forum">sheffieldhockey.com forums</a>!</p>
<p>That's all for now. I hope you all enjoy the website as much as I enjoyed making it</p>
<p>Steve AKA Girder</p>
<p>Currently Listening to: Arcade Fire - Neon Bible Currently Watching: Goldeneye on tv Currently Reading: PA Consulting's code of conduct! Currently Eating: Home-cooked food! Hours til I start my new job: 36</p>
A Catchup and a Roadmap2007-12-05T00:00:00Zhttps://www.steveworkman.com/2007/a-catchup-and-a-roadmap/<p>Welcome to the first update in months!</p>
<p>There are a few reasons why I've been so quiet since the release of USEv4. Firstly, I've started my job at PA. It's been a great couple of months and I'm thoroughly enjoying it. However, this gives me very little time for updating blogs etc. Secondly, because I'm no longer in Sheffield, I'm away from the club that I created the system for, giving me little need to update the site unless something was broken</p>
<p>With that out of the way, I'm happy to say that there's more updates to USE coming in the next few months. My time at PA has reminded me what project management was about and that it actually matters, even if it's just a one man band. So, in honor of such knowledge, I've created a defect tracker, which can be found at <a href="http://tracker.steel-software.com/" title="Steel Software Tracker">tracker.steel-software.com</a> to track my defects that I've noticed, and to help me plan my releases.</p>
<p>If you have a look at it now, you'll see that there's 16/17 known issues and fixes, most of which are minor, though some are new functionality. They're arranged into versions so you can see what's going to get fixed in what release.</p>
<p>Talking of releases, the next one, 4.10, should be happening over xmas. It's got a big list of changes in it, some of which have already been implemented. One of these, is Facebook notifications.</p>
<p>If you've noticed, when a friend of yours posts some news, an event, a match report or selects you for a match, you are sent a notification with a link back to the site! Very neat.</p>
<p>This feature will be expanded in the 4.2/4.4 release, though those currently don't have a schedule (cos this job has taken my weekends). If you're interested, 4.3 is quite a small release relating to crontab functions.</p>
<p>Anyway, I've rambled on for long enough.</p>
<p>Steve</p>
<p>Currently Listening to: Coldplay Currently Watching: Heroes in HD Currently Eating: takeout Currently Reading: How to win friends and influence people Hours in the office this week: too many already</p>
Re-design2007-12-09T00:00:00Zhttps://www.steveworkman.com/2007/re-design/<p>Greetings!</p>
<p>I've given the design of this blog a much-needed update and have finally made a wordpress theme (comments welcome). The whole site now fits nicely into the design of <a href="http://www.steel-software.com/">steel-software.com</a> and I'm pleased to say the process wasn't too hard! I followed a guide on <a href="http://www.dezinerfolio.com/2007/11/27/developing-a-wordpress-theme/">Deziner Folio</a> (though don't copy code directly from the website, all the 's and "s are HTML encoded and dreamweaver doesn't like it). I've even managed to make the site widget-enabled which works rather well.</p>
<p>So, in summary, I'm pleased with myself.</p>
<p>Steve</p>
<p>Currently Listening to: Bloc Party Currently Eating: Burgers, 3 in 3 days! Currently Watching: Blade Runner, not understanding the whole Deckard is a replicant thing Currently Reading: How to win friends and influence people Currently Feeling: like a pork pie</p>
Macbook Airy fairy2008-01-15T00:00:00Zhttps://www.steveworkman.com/2008/macbook-airy-fairy/<p>Whilst at work today, I, like almost everyone else in the office, was being updated in some way/shape/form on the Macworld keynote speech, in which lord Jobs announced a number of products including the <a href="http://www.apple.com/macbookair" title="Macbook Air">Macbook Air.</a> Possibly the most talked-about piece of hardware since the <a href="http://www.apple.com/iphone" title="iPhone">iPhone</a>, the ultra-portable macbook looks mighty pretty (see picture below) and is incredibly small. I'm writing this on a 3rd generation Macbook with the same 13.3" screen, but the new Air will be almost as thin as the lid of the macbook!</p>
<p><img src="https://images.apple.com/euro/macbookair/images/design_gal08_20080115.jpg" alt="Macbook Air" loading="lazy" />?</p>
<p>However, there are a few problems that I've gleaned from the press release, and for these reasons, I won't be buying one for a long time.</p>
<p>1. There's only 1 USB port and no firewire - which for me is a no-go area. I've got somewhat of a complex external storage problem in that all my music is stored on an external hard drive that connects with either firewire or 2 USB ports. So, without also carting around a USB hub, I can't use my external drive, which sucks. However, Apple wants you to do everything wirelessly, so I'd have to somehow permanently plug my external drive into the media center at home and wirelessly access it any time I want anything (or buy one of their Time Capsule devices, also announced. No thanks). That, of course, defeats the purpose of having the external drive and significantly reduces the macbook air's portability for me.</p>
<p>2. You can't replace the battery - which isn't always going to be a big thing, but if it goes wrong it'll mean sending the whole thing back to Apple. I'm one of the lucky ones with an Apple store in my home town, but otherwise, Apple will have to send a courier to pick up my laptop and then I'll be laptopless for 2 weeks. Hmmmm...</p>
<p>3. It's incredibly expensive - and I'm not talking Sony expensive, this is another level. Me and my colleague <a href="http://www.sortingshapes.com/">Jon</a> were chatting and trying to guess how much it would cost. I said $1599, the same as a top level Macbook Pro. Nope, the answer was $1799. So, we thought, what's that in proper money? At the current exchange rate, plus a bit of tax I said £999. When the apple store came back online, I was once again, shocked</p>
<p><img src="https://blog.steel-software.com/wp-content/uploads/2008/01/picture-1.png" alt="Mac pricing" loading="lazy" /></p>
<p>My macbook, now £700 for the same size screen, a more powerful processor, an optical drive and all the gimicks compared with £1200 for a thin, cut-down macbook air. Sure, it may look prettier, but who cares about that when you can nearly buy 2 macbooks for the same price.</p>
<p>I then looked at the customisation options. Another £190 for a 0.2GHz speed increase, that might be worth paying for. £689 for a 64GB solid-state drive! That's astronomic! There's also no word on how much faster the SSD will make the computer. I know Windows Vista is optimised for SSDs, is Leopard? There's also Apple being cheeky and making you pay again for a display output (it's different on the macbook, macbook pro and macbook air!) and this time they're making you pay another £9 for a remote control! They used to hand those things out, now you have to pay! I though Apple were a generous company that included all the extras, and that's what made them so good.</p>
<p>All-in all if you want to get a fully loaded macbook air including portable superdrive, you'll pay £2102.00</p>
<p>In the other announcements, they put <a href="http://www.engadget.com/2008/01/15/apple-adds-five-apps-to-the-ipod-touch/">5 new apps onto the iPod Touch for $20</a> which is frankly ridiculous as a simple trip to <a href="http://jailbreakme.com/">jailbreakme.com</a> will allow you to get all those application for free! They also announced the iPhone update which turns the iPhone into a GPS device which is pretty cool, and a NAS (network attached storage) solution for wirelessly backing up macs. To be honest, just let me use time machine to target a hard drive on my media center and that'll do nicely thanks.</p>
<p>So, that ends my wrap-up of Macworld. When my macbook dies and I get a monstrous bonus, I'll get a Macbook Air. For now, I'll stick with my macbook.</p>
<p>Steve Currently Listening to: Radiohead - In Rainbows Currently Watching: QI Currently Reading: Another Bloody Love Letter - Anthony Loyd Currently Eating: Bangers and Mash Current utilisation: 213% (somehow)</p>
Apple Store Frivolity2008-01-19T00:00:00Zhttps://www.steveworkman.com/2008/apple-store-frivolity/<p>Wandering around London today, I found myself in the Apple store on Regents Street, firstly to find out who's supporting Athlete tonight in Camden (Boy Kill Boy was the answer), but secondly to test a rumour I heard. I'd been told that the iPhones in the store all had working sim cards and you could make and receive calls! I had to find out if it was true.</p>
<p><img src="https://images.apple.com/iphone/features/images/phone_hero20071019.png" alt="iPhone" loading="lazy" /></p>
<p>In the Regents Street store, there's a lot of iPhones. One big table with 8 phones, a row of 3 behind that and then another 4 upstairs (and probably some more but I didn't go round the whole store). I tried to test this rumour this subtly, but there's no way to conceal that you're going around trying every iPhone seeing if they worked. I was pleasantly surprised to find that all of them called my phone, and they all left their numbers behind!</p>
<p>On the tube on my way home, I started to think about pranks you could play, having such a list of numbers. Ideas such as calling every phone at the same time saying they've all won a free iPhone, or putting the numbers randomly in phone boxes around London (some people will know what I mean, others are probably too young and shouldn't know what I mean). You could sign all the phones up for spam or Jamster ringtones (same thing), the possibilities are only as twisted as your imagination.</p>
<p>So, instead of playing these pranks myself, here are 9 of the numbers:</p>
<ul>
<li>07515847360</li>
<li>07515847036</li>
<li>07515847549</li>
<li>07515847519</li>
<li>07515847517</li>
<li>07515847039</li>
<li>07515847479</li>
<li>07515847408</li>
<li>07515847406</li>
</ul>
<p>Remember, if you're going to call these numbers yourself, place 141 before the number to hide it from the receiver.</p>
<p>I am, of course, not encouraging people to use these numbers maliciously. These numbers are quite easily available and anyone who has been into the store can get access to these numbers. I also do not know if the store changes the sim cards.</p>
<p>Enjoy!</p>
<p>Steve</p>
<p>Currently Listening to: Athlete - Beyond the Neighbourhood Currently Reading: Another Bloody Love Letter - Anthony Loyd Currently Eating: Sandwiches in Green Park Currently Watching: Family Guy - Blue Harvest (very funny) Going to see: Athlete, Camden Roundhouse (Flickr will be updated)</p>
Athlete @ The Camden Roundhouse2008-02-04T00:00:00Zhttps://www.steveworkman.com/athlete-the-camden-roundhouse<p>A few weeks ago, the Camden Roundhouse played host to one of Britain's great underestimated bands. Perhaps to call them undiscovered would be a misrepresentation for Athlete have had 3 top-ten albums and a couple of top-ten singles, but the sell-out crowd would call them one of the country's most unappreciated bands. The crowd was mostly middle-class 18-30s, a lot of couples and close groups of friends, which is probably one of the biggest indicators of why Athlete have never taken off in the way they should have. They're not a band that your whole group of friends will like, some people will understand and some won't. Truth be told, I didn't get in to their latest album, Beyond the Neighbourhood, until the 3rd listen, but after that I was hooked. Its beautiful balance of soft guitar, electronic noise and traditional rock has made it one of my favourite albums of 2007.</p>
<p>The gig started somewhat badly. When I discovered that Boy Kill Boy would be supporting, I was quite excited at the prospect, but the reality did not pan out as I had thought. The audience simply weren't engaged by Boy Kill Boy's raucous strumming, and tunes that would have other audiences bouncing fell on deaf ears. This wasn't completely the band's fault (though the drummer could hardly stop his eyes rolling into his head, looking like he was in intense pain with every beat), the sound was completely wrong for this band. My sound engineer friend kindly pointed out that you couldn't hear the guitar at all, just the bass and high-end keyboard. It certainly didn't help that the vocals then were lost in the Roundhouse's high ceiling, echoing at every opportunity. That's not to say it was all bad, the band loosened up and sound problems were remedied, but not before the audience was returning nonchalant looks to the front-man's wry smiles.</p>
<p>After a short break, Athlete took to the stage to rapturous applause and quickly launched into <em>"Second Hand Stores'</em>" (one of my favourite tracks), which buoyed the crowd with their energy and upbeat choice of opener. The gig progressed flicking between all three albums, playing crowd pleasers and all the singles, front-man Joel's smile exuding happiness and energy back to the crowd. Twenty minutes in and everyone had settled into a rhythm, Athlete continuing to delight the audience with every new song. The crowd certainly seemed to enjoy the melancholy a lot more than I thought they would. This seemed like an audience who would actually sit and marvel at Pink Floyd rather than enjoy bouncing off the walls to Muse. Athlete's brilliance shone through with some excellent instrumental sections, notably at the end of <em>"The Outsiders</em>" where their keyboard player worked his magic on the sound banks, producing a calming notion on the crowd.</p>
<p>When the lights came up everyone looked satisfied, as though they had came expecting greatness and had received their dues. The out track, <em>"Flying Over Bus Stops"</em> provided a sombre end to a show that had been brimming with life. Whilst some bands like to go out with a bang, Athlete left the audience in no doubt as to their musical style; understated, never compromising on quality, and most of all, absolutely brilliant.</p>
<p>Steve</p>
<p>Currently listening to: Radiohead - In Rainbows Currently Reading: still reading that Anthony Lloyd book Currently Eating: Goooood food Currently Watching: Cloverfield and Lost, both brilliant Currently praying for the writers strike to end because: I miss scrubs</p>
Ditch this doctype talk until IE6 is dead2008-03-03T00:00:00Zhttps://www.steveworkman.com/2008/ditch-this-doctype-talk-until-ie6-is-dead/<p>Once upon a time, about 6 years ago, the internet had just started to recover from an almightly hangover called the dot com boom. There were only two major browsers out and about at the time, Microsoft's Internet Explorer (IE) and Netscape Navigator (<a href="http://blog.netscape.com/2007/12/28/end-of-support-for-netscape-web-browsers/" title="RIP netscape">RIP</a>) (I won't talk about Opera and Safari at this point as their market share is, and always has been, minimal). There were a number of people out on the internet who, with the W3C, were evangelising web standards, but they had a problem: browser support.</p>
<p>For those who don't know, IE6 is not standards compliant. Run IE6 through the <a href="http://www.webstandards.org/action/acid2/" title="Acid 2 Test">Acid 2 test</a> and watch it fail miserably. It had problems, lots of problems, fast-forward to modern times and you'll see that the accepted way to get around IE6's failings is to write a separate stylesheet for it!</p>
<p>Web standards gurus finally started having their way when Mozilla's firefox browser appeared. Firefox raised the bar in terms of standards compliance, allowing web developers to use the full power of CSS to create some amazing techniques (look at <a href="http://www.silverbackapp.com/">Silverback</a> for brilliant use of % widths and transparency to make a parallax effect). Microsoft however, left IE to stagnate in its non-standards compliance for 5 years until the summer of 2006 when IE7 finally saw the light of day.</p>
<p>There were many people talking of <a href="http://blog.wired.com/monkeybites/2006/10/why_internet_ex.html">"breaking the internet"</a> by making IE7 standards-compliant from he outset. This was because when IE6 was released, only 1 of the top 200 internet sites were running in a standards-compliant mode. By the time IE7 came out that number was up to >50% of the top 200 sites. The so-called "quirks" mode of IE6 allowed for some very non-compliant code to render perfectly well; run the same code in firefox and everything changed, with some sites looking an absolute mess. IE7 was meant to be a wake-up call to all lazy web developers who wrote bad code, but businesses didn't change. IE6 had been around for so long, many, many businesses don't install IE7 as standard because their intranet will break (AKA not look right) and the cost of changing it would be too high. Despite numerous calls to <a href="http://www.css3.info/kill-ie6-to-let-css3-live/">let IE6 die</a>, Microsoft continues to ship Windows XP with IE6 installed. With lagging sales of Vista, MS has an uphill struggle to gain back fans from the web standards community.</p>
<p>Fast-forward to 2008 and for web standards afficionados, browser support isn't a problem. Safari and Opera now support most of the CSS3 selector set and Firefox 3 is just around the corner. The real problem for web designers is still IE6, which maintains a <a href="http://www.w3counter.com/globalstats.php">39%</a> share of the browser market (Firefox 2 and IE7 both near 23%, the rest insignificant). Until IE6 dies, web designers will have to invest significant amounts of time making their designs work with IE6.</p>
<p>Microsoft think they have the answer, in the form of IE8, a browser that shall succeed where IE7 failed. IE8 came onto everyone's radar with a bang when Dean Hachamovitch, IE's general manager, announced that <a href="http://blogs.msdn.com/ie/archive/2007/12/19/internet-explorer-8-and-acid2-a-milestone.aspx">IE8 passes the Acid2 test</a>. "Huzzah", shouted most, "What about my website!" cried the rest. MS soon answered that with their announcement that by default, <a href="http://blogs.msdn.com/ie/archive/2008/01/21/compatibility-and-ie8.aspx">IE8 would render like IE7</a>, a method <a href="http://www.webstandards.org/2008/01/22/ie8-will-see-the-smile/">developed hand-in-hand with WaSP members.</a>. The backlash came quickly, but not fiercely. With an issue of <a href="http://www.alistapart.com/issues/253">A List Apart dedicated to the subject</a> people were quickly suggesting ways around it to force the IE8 rendering mode, none of which will be implemented (except maybe the forced standards mode for the public beta).</p>
<p>So, here's my two pence on the issue: with this default doctype in place, IE6 will not die. IE8's take-up will be the same as IE7, effectively replacing the browser. MS has tried to kill the browser by <a href="http://blogs.msdn.com/ie/archive/2006/07/26/678149.aspx">forcing it through windows update</a> (though they provided a tool to block it), though most businesses resisted. IE6 will only die out when MS releases its next operating system and businesses finally upgrade. There is currently no need to upgrade as business computers (on their 3 year cycle) can't cope with Vista's system requirements and their tech support teams are blocking IE7 as it won't work correctly with all the sites people use in their day-to-day routines.</p>
<p>So, whilst I do care about IE8, lets not argue about default rendering mode, lets campaign to make IE8's standards mode the best that it can be, with as many ground-breaking features as possible (maybe some CSS3 even), so that businesses <strong>want</strong> to upgrade.</p>
<p>Steve</p>
<p>Currently listening to: whatever's on my shuffle Currently reading: Web standards creativity - brilliant book for advanced CSS techniques and inspiration Currently watching: Jurassic park! Currently eating: take-out Time when running a half-marathon: 2 hours 11 minutes (not bad for a first go)</p>
A quick guide to IE8's new features - Activites and WebSlices2008-03-07T00:00:00Zhttps://www.steveworkman.com/a-quick-guide-to-ie8-s-new-features-activites-and-webslices<p>With the release of <a href="http://www.microsoft.com/windows/products/winfamily/ie/ie8/default.mspx">Internet Explorer 8 beta 1</a> this week, MS debuted a few new features for the browser. Not only is it more standards compliant etc (<a href="http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/">read about all the features here</a>), there are two major features which developers can utilise to make web sites and services more accessible through IE8. I'm talking about Activites and WebSlices.</p>
<p>Activities is a browser feature where you can right-click on the page and bring up a context-sensitive menu where you can perform actions based on the content of the page. You can also select some text, say the address of a restaurant, and a drop-down menu will appear with options for a map or wikipedia entry. You can also get a preview of the resulting page if you hover over the link.</p>
<p><img src="https://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/images/ScreenActivities.png" alt="Activities" loading="lazy" /></p>
<p>The best thing about activities is that anyone can define them. They're installable XML files which define aspects of the activity. As far as I can see they're like firefox extensions but only for the right-click/context-sensitive menu and they seem really easy to make. If you want to know how to develop them, read the <a href="http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=ie8whitepapers&ReleaseId=566">whitepaper</a>.</p>
<p>WebSlices are mini-RSS feeds that integrate with the favourites bar (now a permenant fixture) allowing users to "discover" areas of web sites where they can get regular updates of small parts of a site. The example MS are using is an auction site where you can watch an individual item.</p>
<p><img src="https://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/images/ScreenWebSlicePreview2.png" alt="WebSlices" loading="lazy" /></p>
<p>The code behind this uses CSS selectors and special keywords to describe the content. It's easy enough to implement but I'm unsure as to how many sites will be able to do it without the risk of upsetting a site's CSS stylings. I'll put an example of a web slice-able section up when I get a few minutes (if you want a go yourself, read the <a href="http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=ie8whitepapers&ReleaseId=567">whitepaper</a>).</p>
<p>So, IE8 is doing well, seems to be some good reaction to it, but it does definitely need some work (:hover class it a bit buggered). I'm looking forward to see it develop.</p>
<p>Steve</p>
<p>UPDATE: IE Blog has done a mini-article on this <a href="http://blogs.msdn.com/ie/archive/2008/03/06/activities-and-webslices-in-internet-explorer-8.aspx">same subject</a>.</p>
<p>Currently Listening to: We Are Scientists - Brain Thrust Mastery (brilliant album) Currently Watching: Top Gear on Dave Currently Eating: the week's left-overs Currently Reading: IE8 white papers! Current stage of re-design: on paper</p>
SteveWorkman.com Launches2008-05-05T00:00:00Zhttps://www.steveworkman.com/steveworkman-com-launches<p>Welcome everyone to <a href="http://steveworkman.com/">SteveWorkman.com</a>!</p>
<p>After a few long weeks work I've finished the re-design. This re-design is far more user-friendly, accessible and standards-compliant. It's screen-reader friendly and accessible.</p>
<p>The idea of this blog, to show by example, CSS techniques and CSS 3 experiments, along with technology news, web-standards and my current projects. Check out the articles in the categories above, click on the links to the left to see my other sites and get access to downloads and my photo archive.</p>
<p>Once again, welcome!</p>
Opera Dragonfly - Some Suggestions2008-05-08T00:00:00Zhttps://www.steveworkman.com/2008/opera-dragonfly-some-suggestions/<p><a href="http://www.opera.com/products/dragonfly" title="Opera Dragonfly">Opera Dragonfly</a>, the opera web browser's developer tools, were released into alpha yesterday. It features tools like a DOM inspector, CSS style tracing, Javascript console with breakpoints and step-through inspection, and support for debugging other opera browsers (opera mobile and opera tv, though not opera mini). However, it's not all roses.</p>
<p><a href="https://www.steveworkman.com/static/img/dom-css.jpg"><img src="https://www.steveworkman.com/static/img/dom-css.jpg" alt="Dragonflys DOM inspector" title="Dragonfly DOM inspector" loading="lazy" /></a></p>
<p><a href="https://www.steveworkman.com/static/img/dom-css.jpg"></a></p>
<p>First off, I like opera. I use it every day as my primary browser because it's fast, standards-compliant and has great time-saving features like search shortcuts, speed dial and a great password saving facility. So, I'm the type of person that the announcement of an this is aimed at. I've been using the tools today and there are some very good things.</p>
<p>First-off, the CSS inspector is pretty good. It's not as clear as firebug as if you switch the shorthand styles off there's just a mass of styles and along with the initial browser styles it gets a bit too much. Whilst I'm being picky, I'm finding the buttons hard to use, and it's hard to tell what's going on at first. The difference in on and off positions for active buttons isn't clear enough and will flummox most users.</p>
<p><a href="https://www.steveworkman.com/static/img/buttons.jpg"><img src="https://www.steveworkman.com/static/img/buttons.jpg" alt="Dragonflys buttons" title="Dragonfly buttons" loading="lazy" /></a></p>
<p>The DOM inspector is pretty good, though the element highlighting doesn't select "invisible" elements i.e. anytihng that's "visibility:hidden;" which is something that I really value in firebug.</p>
<p>There's a good javascript debugging facility available, though finding the right script is a bit of a mission as any inline scripts are named the same with line numbers. If you're debugging an ASP .NET site, there's javascript everywhere and that makes it very difficult to find what you're after. I also found it quite hard to tell what line I was on when stepping through a simple AJAX call as there was no visible line highlighting; something that will need to be fixed before I use it again.</p>
<p><a href="https://www.steveworkman.com/static/img/js.jpg"><img src="https://www.steveworkman.com/static/img/js.jpg" alt="Dragonflys JavaScript Inspector" title="Dragonfly JS" loading="lazy" /></a></p>
<p>This alpha's big downfall is that it's not dockable i.e. it has to be in a separate window. For those of us on laptops or without large monitors it's hard to see what's going on when you have to flick between the two. This is coming in a new release in a few weeks time, which will update itself, thanks to the way Dragonfly is built.</p>
<p>There are some other niggles too, some of which are bugs:</p>
<ul>
<li>Searching the DOM is case sensitive</li>
<li>Lots of different consoles, though only javascript and CSS have produced results so far</li>
<li>The console thinks that CSS3 styles (rgba) and mozilla/webkit specific styles are errors</li>
<li>The close button keeps disappearing on the settings menu</li>
<li>It badly needs header inspection. Debugging AJAX isn't worth much without it</li>
</ul>
<p>All in all, a very good start which I'm certain will improve. It's not going to change the way I work as almost anything that's wrong in opera is also wrong in firefox. It's better than IE6/7's debugger, though not as good as firebug. With the addition of mobile browser debugging, a useful feature I've not had time to test, Dragonfly could be amazing. We'll wait and see...</p>
Why I Use Opera - A case for the browser underdog2008-05-09T00:00:00Zhttps://www.steveworkman.com/2008/why-i-use-opera-a-case-for-the-browser-underdog/<p><img src="https://techzone26.files.wordpress.com/2007/11/opera-logo.jpeg" alt="Opera Logo" loading="lazy" />I’ve been using <a href="https://www.opera.com/" title="Opera Browser">Opera</a> since it reached version 9.0 in 2006. I have used it every day since in one form or another. I use Opera on my PA laptop, on my Mac, on my TV, my games console and on my Phone, and since Opera’s rendering engine is now built into some Adobe products (Photoshop, Dreamweaver and GoLive) I’m using Opera even when I don’t realise it.</p>
<p>I use Opera for its productivity features. Opera Desktop contains keyboard shortcuts for almost every action, but I’ll start with the most important features:</p>
<p><strong>Speed Dial</strong> – Opera lets you pick 9 web sites that you visit the most and assigns them to the number keys. Now, if I want to go to my e-mail, I simply press Ctrl+3 and the browser goes to the page I want. I could also type 3 into the address bar and press enter or use the voice commands.</p>
<p><strong>Searching with letters</strong> – With the multitude of services on the internet, I find myself having to go through many pages and lots of tedious loading in order to get to a search page. Opera does have a dedicated search box for many services, but you can do it another way. In the address bar, I can type “g PA Consulting” and it’ll perform a Google search for PA Consulting. It works for any search too and can be set up by the user, so I often type “a Web Design”, which will search <a href="http://amazon.co.uk/">Amazon.co.uk</a> for “Web Design”.</p>
<p><strong>“The Wand” - Password manager</strong> – A very simple and effective solution. On any form you can save the input to “the wand”. If you return to that page and want to put the same information in again, hit Ctrl+Enter. If you have saved more than one set of data to the form, it’ll ask you to select one. Managing your passwords couldn’t be simpler.</p>
<p><strong>Built-in RSS reader</strong> – Most browsers have some form of RSS syndication functionality, but few come close to Opera’s easy-to-manage feed reader. It’s not as fully featured as a stand-alone feed reader or Google Reader, but it loads stories very quickly and does its job. Other features that I’ll mention here are an in-built <strong>download manager</strong>, <strong>BitTorrent client</strong> and <strong>POP3/IMAP e-mail</strong> program. Opera is a Swiss-army knife that doesn’t need extensions to make it powerful.</p>
<p><strong>Presto Rendering Engine</strong> – The Opera team has produced their own rendering engine that renders web pages faster than any other browser (even Safari, depending on the test). Opera supports the full range of CSS2 and most of the CSS3 feature set. Put simply, if a web site renders incorrectly in Opera, the web site isn’t correct (according to W3C standards). Whilst this used to cause a lot of problems, this really isn’t the case today. In your day-to-day usage, you shouldn’t find many popular web sites that render incorrectly in Opera.</p>
<p>Opera is also the fastest web browser for JavaScript. Run the <a href="http://mootools.net/slickspeed/">SlickSpeed</a> test on all the modern browsers and Opera will come out on top every time (the 9.5 release excels at this test).</p>
<p><strong>Voice Commands and Screen Reader</strong> – From a testing perspective, screen readers can be right at the bottom of the list for resource requests. With Opera, the UE expert need not worry about accessibility because Opera has a voice module built in. You can issue commands to read the page, go to a certain page (or a speed dial choice) and do all the commands that are available throughout the program.</p>
<p>The next few features are in the <em><a href="http://www.opera.com/products/desktop/next/" title="Opera 9.5 Kestrel">upcoming v9.5</a></em> release:</p>
<p><strong>Bookmark synchronisation</strong> – A very popular extension for Firefox is a built-in feature for Opera. This allows you to synchronise bookmarks, speed dials and search engine preferences between instances of the browser on multiple computers. Perfect for using Opera on your desktop and your laptop.</p>
<p><strong>Opera Dragonfly – Developer tools</strong> – Opera now has a suite of developer tools, including a full DOM and CSS inspection tool, JavaScript debugger and multiple error consoles. It will also be able to debug Opera Mobile and Opera TV devices. Whilst Dragonfly is not as developed as Firebug, it can be considered as a genuine alternative.</p>
<p>Opera includes even more features including mouse gestures, fraud protection, individual site preferences, thumbnail preview of tabs, widgets, notes, custom themes and a very useful kiosk mode. It’s also the least memory-hungry of all the browsers and the fastest to load.</p>
<p><strong>So why isn’t it used more?</strong></p>
<p>It’s used a lot on mobile devices (40 million phones have shipped with it pre-installed), though its take-up on the desktop is around 1.5% of the market. It’s partly to do with Opera’s rendering “problems” and the reputation that has gained it. Firefox tends to be kinder to web pages that are less standards-compliant, and so has gained a greater following. Opera has only recently (i.e. 6th May 2008) received developer tools, something Firefox and Internet Explorer have enjoyed for years. This has discouraged developers for developing to Opera, which starts a vicious cycle of errors, a bad reputation and fewer developers fixing problems on it. It also doesn’t help that many large companies simply ban Opera from some of their services (RBS Banking doesn’t support Opera, though it supports Firefox).</p>
<p>It may also be that before version 8.5. Opera was supported by advertisements. This image has been a hard one to shake off, especially as Firefox was coming to fruition at this time and was completely free. Opera has recently gained some popularity in other channels like on the Nintendo Wii and mobile phones, emerging markets that will increase the profile of the company and hopefully the use of the full browser, though that remains to be seen.</p>
<p><strong>Why should I change my browser now?</strong></p>
<p>Most people simply “make do” with the browser they are given. Now people are realising there is a choice (Firefox), but they are simply making do with that. Changing to Opera will boost your productivity and supports the features that other browsers only seem to copy. If you’re even remotely interested in where the internet is headed (i.e. mobile devices/integrated computing), Opera will be at the forefront of that movement.</p>
Browser Wars - The SlickSpeed Test2008-05-13T00:00:00Zhttps://www.steveworkman.com/2008/browser-wars-the-slickspeed-test/<p><a href="https://www.steveworkman.com/static/img/firefox3.jpg"><img src="https://www.steveworkman.com/static/img/firefox3.jpg" alt="Firefox 3 start page" title="FireFox 3" loading="lazy" /></a>With the impending release of <a href="http://www.mozilla.com/en-US/firefox/all-beta.html" title="Download Firefox 3">Firefox 3</a>, a new chapter to "browser wars" is upon us. In this short series, I'll be looking at what each browser offers to a user, and hopefully pick a champion.</p>
<p>The first battleground is JavaScript. In the late 1990s, JavaScript was shunned by many web developers because of browser incompatabilities, bugs and that it wasn't very useful for things other than fancy clock (which flash is better at anyway). Since the rise of the XmlHttpRequest, JavaScript has become a way to enhance a website and provide new ways of interacting with the users. Combine this with JavaScript libraries such as <a href="http://jquery.com/" title="jQuery">jQuery</a>, <a href="http://mootools.net/">mooTools</a>, <a href="http://www.prototypejs.org/" title="Prototype">Prototype</a> and <a href="http://dojotoolkit.org/" title="DoJo">DoJo</a>, JavaScript has had a renaissance of biblical proportions. With the <a href="http://www.webstandards.org/" title="The Web Standards Project">Web Standards Project</a> releasing <a href="http://acid3.acidtests.org/" title="Acid 3">Acid 3</a> as a JavaScript test, the JavaScript comeback has been set high standards of compliance in the same way that Acid 2 did for CSS</p>
<p>This is where the browser comes in. A user's internet experience is only as good as their browser, and with JavaScript being used to drive the user's experience, testing how well a browser performs in JavaScript is as essential test. The team at mooTools have developed the <a href="http://mootools.net/slickspeed/" title="SlickSpeed Selectors Test">SlickSpeed selectors test</a>. This tests all four major JavaScript libraries on their ability to navigate and modify the DOM and measures their performance in response times. The results vary significantly from browser to browser, each library claiming to be the fastest on certain platforms. Yesterday, I ran every browser, current and upcoming, against this test and have collated the results below:</p>
<table>
<thead>
<tr>
<th>Library</th>
<th>IE6</th>
<th>IE7</th>
<th>IE8 beta 1</th>
<th>Safari 3.1</th>
<th>Firefox 2</th>
<th>Firefox 3 beta 5</th>
<th>Opera 9.2</th>
<th>Opera 9.5 beta 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dojo</td>
<td>391</td>
<td>518</td>
<td>276</td>
<td>72</td>
<td>132</td>
<td>69</td>
<td>132</td>
<td>24</td>
</tr>
<tr>
<td>jQuery</td>
<td>600</td>
<td>508</td>
<td>619</td>
<td>151</td>
<td>298</td>
<td>114</td>
<td>298</td>
<td>76</td>
</tr>
<tr>
<td>mooTools</td>
<td>962</td>
<td>895</td>
<td>715</td>
<td>264</td>
<td>87</td>
<td>93</td>
<td>87</td>
<td>44</td>
</tr>
<tr>
<td>Prototype</td>
<td>1992</td>
<td>2663</td>
<td>2417</td>
<td>351</td>
<td>224</td>
<td>196</td>
<td>224</td>
<td>68</td>
</tr>
</tbody>
</table>
<p><a href="https://www.steveworkman.com/static/img/slickspeedgraph.jpg"><img src="https://www.steveworkman.com/static/img/slickspeedgraph.jpg" alt="SlickSpeed Test Graph" title="SlickSpeed Test graph" loading="lazy" /></a></p>
<p>As you can see, Internet Explorer doesn't fare well on this test. In fact, it seems to be getting worse as time goes on in the Prototype test! The IE team have said that their aim for IE8 is not to make things worse, and they'll work on speed once the rest of IE's problems have been solved. If I were them, I'd start with a full re-code as their rendering engine lags so far behind the others that it's just not funny.</p>
<p>The other browsers in this test fare much better, showing decent results throughout. The crown, however, goes to Opera 9.5, beating the competition in every test, often halving the next-lowest time. Such an effort is phenomenal, especially for the 68ms in the Prototype tests, a 3600% improvement over IE 7. That said, these results also show us that some libraries are simply faster than others. Dojo is consistently the fastest, with jQuery and mooTools fighting for second place. Prototype has always been a 'heavier' library than the others, though this is shown very clearly now. It's also a 150KB library, which is huge compared to jQuery's 23KB compressed library.</p>
<p>JavaScript is just one area that the browsers are competing in. CSS support, productivity features and extendability are all key areas for the major browsers. I'll do another browser wars post soon.</p>
Is CSS a black art?2008-05-29T00:00:00Zhttps://www.steveworkman.com/2008/is-css-a-black-art/<p><img src="https://www.bookpool.com/covers/851/0764579851_500.gif" alt="CSS" loading="lazy" />Recently, I've been asked a lot of questions about CSS and my commitment to it. I'm a purist when it comes to the web. I firmly believe that the only way to create a web site is to use standards-compliant CSS that is cross-compatible with all major browsers. Javascript should only be used as a progressive enhancement technique and should certainly not be relied upon (yes, I'm looking at you ASP .NET). Most of my colleagues regard this stance as noble, but somewhat stupid in the "real world", where it's not always getting it done "right", it's just getting it done. Why is CSS considered such a black art?</p>
<p>Cascading Style Sheets are a mystery to most programmers. There's nothing object-oriented about it, there are no methods, no variables, just a series of properties attributable to classes, identifiers and HTML elements. Such a simple thing can hardly be described as a programming language, and it's not exactly difficult to pick up, there is a definitive resource at <a href="http://www.w3schools.com/">W3Schools</a>, excellent tutorials at professional sites like <a href="http://www.sitepoint.com/">sitepoint</a>, and hundreds of blogs (like this one). It's a simple markup language, what's so hard about it?</p>
<p>Well, in principle it's all roses. Take your basic elements, set the fonts, colours, padding and positioning. If you want, set a background image, it makes everything much prettier. However, great site design certainly isn't as easy as this. It takes well laid out simple elements or well laid out beautiful graphics, and it's making those graphics look beautiful with CSS that's the hard part.</p>
<p>Because CSS is a markup language and it is "just that", positioning complex lists, understanding floating elements and the use of the box model can be annoyingly tricky, especially when dealing with IE6. Using properties to control web elements that don't perform the same on every browser is the principal reason why CSS is a black art. If a regular programmer can tell you exactly where a CSS positioned element will end up on every browser first time, they're lying. Principally, it's the work-arounds that get to developers. Having to have conditional styles, or negative margins to control where an element will end up (cross-browser) can be incredibly frustrating, especially when you get it working for firefox then it's still broken in safari/opera. By this time, most developers have given up.</p>
<p>Most of the developers at my office code by hand, some use the visual editor to create their pages. This is great for them, it increases their productivity and makes life easier, giving them more black boxes instead of having to know about every component, but this can introduce a lot of extraneous code, like tables and extra paragraph tags. ASP .NET is very bad for this, most of their pre-built elements use tables. Some, like the Login control, insert a table into the markup even when you ask to lay out the control yourself! Creating CSS that works in all of these situations, where pages are marked up differently, is a very hard task where you are constantly fire-fighting, making new exceptions for dodgy markup. Developers blame CSS for this, when it is the browser, and the markup that should be blamed (though it's alright to blame ASP too).</p>
<p>So, is CSS a black art? Well, if you don't know the work-arounds, it's going to frustrate the hell out of you and it's more than likely that you will give up, go for inline styles and tables. If you have the patience for it, and want a pure web experience that loads fast, looks amazing, and you'll be able to completely change the look of a web site just by switching stylesheets.</p>
Opera 9.5 Released2008-06-12T00:00:00Zhttps://www.steveworkman.com/opera-9-5-released<p>Opera 9.5 is has now been released. The browser underdog (and my personal favorite) now has more features than ever! It's also faster (see my <a href="https://www.steveworkman.com/standards/browsers/2008/browser-wars-the-slickspeed-test/" title="SlickSpeed test article">SlickSpeed test article</a>) and includes lots more CSS3 features including media queries, full selectors capabilities and new properties like text shadows and box sizing.</p>
<p><a href="http://www.opera.com/download/" title="Download Opera">Download Opera 9.5</a></p>
<p><a href="http://dev.opera.com/articles/view/opera-9-5-the-next-generation-of-web-s/" title="Opera 9.5 new features">View full release notes and new features</a></p>
Firefox 3 Out Today2008-06-17T00:00:00Zhttps://www.steveworkman.com/2008/firefox-3-out-today/<p><img src="https://blog.mozilla.com/files/2008/05/foxkeh_dday_badge_stages.png" alt="Firefox download day" loading="lazy" />Just a quick message to say that Firefox 3 will be released today at 10am PDT (6pm BST if you're in the UK like me).</p>
<p>Easiest way to get it is to go to <a href="http://www.getfirefox.com/">www.getfirefox.com</a> Or, download from <a href="http://www.spreadfirefox.com/">www.spreadfirefox.com</a> and add to their guiness world record attempt of the most downloads in one day.</p>
<p>Firefox 3 looks to be a great release so give it a go.</p>
Best Practice Error Messages2008-06-30T00:00:00Zhttps://www.steveworkman.com/2008/best-practice-error-messages/<p><a href="https://www.steveworkman.com/static/img/warningsign.jpg"><img src="https://www.steveworkman.com/static/img/warningsign.jpg" alt="Warning: Error messages" title="Warning" loading="lazy" /></a>Entering data into a web site is possibly the most common task that is performed. In my time designing and developing sites, I’ve seen good forms and I’ve seen bad forms. The biggest sin with these forms has always been error messages. Web sites are designed to communicate a message. Whether it’s the day’s news or that a friend is having a party, the message must be clear an unmistakable. With errors, correct placement, styling and reference are essential. I’m going to show you how not to do it, and then best practice error messages.</p>
<p>How not to make error messages</p>
<p>Quite simple this: by displaying no information at all, just telling them that there is an error, like this</p>
<p><a href="https://www.steveworkman.com/static/img/basic-details.png"><img src="https://www.steveworkman.com/static/img/basic-details.png" alt="bad error messages" title="bad error messages" loading="lazy" /></a></p>
<p>The user has a hard enough time finding out that there’s something wrong, let alone working out what they have to do to correct it.</p>
<p>Pointing out that something is awry in a clear colour is better, though this still doesn’t really tell the user what is wrong. Be aware of colour blind users – 4 in 10 males in the UK are colour-blind, with red/green being the most common kind. Remember this when putting red text (the accepted colour of error/warning messages) on a green background as colour-blind users won’t see it.</p>
<p><a href="https://www.steveworkman.com/static/img/slightly-better-errors.png"><img src="https://www.steveworkman.com/static/img/slightly-better-errors.png" alt="slightly better errors" title="Slightly better errors" loading="lazy" /></a></p>
<p>A better way is to list what is going wrong at the top of the page. This gives the user information about what has gone wrong, though it still leaves the user to work it out for themselves (which is a bit mean, considering the web site knows exactly what went wrong). This effect can be achieved very easily in frameworks like ASP .NET as there are built-in controls to display this very data.<a href="https://www.steveworkman.com/static/img/more-descriptive.png"><img src="https://www.steveworkman.com/static/img/more-descriptive.png" alt="Descriptive yet unhelpful errors" title="Descriptive yet unhelpful errors" loading="lazy" /></a></p>
<p>Error messages start becoming usable from this next point, taking the cognitive workload away from the user by placing error messages next to the field that has an error. These error messages should be descriptive, not just an asterisk and let the user work out what is wrong.</p>
<p><a href="https://www.steveworkman.com/static/img/good-errors.png"><img src="https://www.steveworkman.com/static/img/good-errors.png" alt="Good error messages" title="Good error messages" loading="lazy" /></a></p>
<p>When this is combined with an error message at the top of the page to alert the user that there are problems, the form becomes usable. However, in its un-styled nature, these error messages can seem abrupt and abrasive to the user. This is the best-practice styling that has been applied by many companies, giving the right information to the user and how to fix it.</p>
<p><a href="https://www.steveworkman.com/static/img/well-styled-errors.png"><img src="https://www.steveworkman.com/static/img/well-styled-errors.png" alt="Well styled errors" title="Well styled errors" loading="lazy" /></a></p>
<p>It's not all doom and gloom though. Many major sites provide excellent error messages. <a href="http://www.yahoo.com/">Yahoo</a> shows best-in-class error messages, highlighting the individual rows, providing graphical and textual indicators of errors that are readable and descriptive</p>
<p><a href="https://www.steveworkman.com/static/img/yahoo-errors.png"></a></p>
<p><a href="https://www.steveworkman.com/static/img/yahoo-errors.png"><img src="https://www.steveworkman.com/static/img/yahoo-errors.png" alt="Yahoo error messages" title="Yahoo error messages" loading="lazy" /></a></p>
<p>Artistic web site <a href="http://www.deviantart.com/">DeviantArt</a> goes with the header description approach whilst changing the colour of the incorrect field labels. Whilst I'm not a fan of the latter as it is not descriptive, the header message is well styled and conveys the error message accurately</p>
<p><a href="https://www.steveworkman.com/static/img/deviantart-errors.png"><img src="https://www.steveworkman.com/static/img/deviantart-errors.png" alt="" title="deviantart-errors" loading="lazy" /></a></p>
<p>Finally, popular social bookmarking site <a href="http://digg.com/">Digg</a> has a good registration page, though the error messages leave something to be desired. Whilst they are next to their respective fields, they do not stand out from the page</p>
<p><a href="https://www.steveworkman.com/static/img/digg-errors.png"><img src="https://www.steveworkman.com/static/img/digg-errors.png" alt="" title="digg-errors" loading="lazy" /></a></p>
<p>So, how can you achieve these effects simply and effectively with very little code. It's as simple as putting <a href="http://http//jquery.bassistance.de/validate" title="jQuery Validation">jQuery validation</a> on your site. It's simple, unobtrustive and very customisable. Have a look at the <a href="http://jquery.bassistance.de/validate/demo/" title="jQuery validaiton demo">jQuery validation demonstration site</a> for all the wonderful things that it can do.</p>
Steve is now on Twitter2008-08-05T00:00:00Zhttps://www.steveworkman.com/2008/steve-is-now-on-twitter/<p>Just a short post to say you can now follow me on <a href="http://twitter.com/steveworkman">twitter</a>. Just go to <a href="http://twitter.com/steveworkman">http://twitter.com/steveworkman</a> and see what I'm doing (and where!) A twitter widget shall shortly be appearing in my sidebar no doubt :-)</p>
CSS Animations on iPhones2008-08-14T00:00:00Zhttps://www.steveworkman.com/2008/css-animations-on-iphones/<p>I've just come across this brilliant CSS 3 technique from <a href="http://ajaxian.com/archives/iphone-safari-flick-navigation-by-example">Ajaxian</a> on how to do web animations. This produces a great iPhone-esque technique by simply writing 6 lines of code!</p>
<p>Take a look, there's a lot more that can be done with this.</p>
Patching iUI2008-09-22T00:00:00Zhttps://www.steveworkman.com/2008/patching-iui/<p>Recently, I've been working on an iPhone web app for my employer (internal, so I can't share). I based the design and architecture around the <a href="http://code.google.com/p/iui/" title="iUI">iUI</a> library by Joel Hewitt, which became an overnight <em>de-facto</em> standard for web apps. However, after a lot of playing with it and turning it inside out, I've found there are a number of problems which have not yet been fixed.</p>
<p>For example; I want to run an AJAX search on a page one menu down my site tree. I found that this wasn't possible as subsequent javascript code was not evaluated by Safari. There's other things too, like any iPhone/iPod application link not working, having to press any link that goes to "_self" twice and having a slide animation that stutters more than a broken record.</p>
<p>I am happy to say that fixes exist for all but the last item, and I have put them all into a javascript file, which can be found at the end of this post.</p>
<p>However, I do not believe that this is the solution to iUI's problems. I feel that a complete re-write in a standardised library like <a href="http://jquery.com/" title="jQuery">jQuery</a> is the solution. Who knows, I may even find time to write it ;-)</p>
<p>So, here's the file: <a href="http://download.steveworkman.com/iui.patched.js" title="iUI Patched">iui.patched.js</a></p>
<p>Steve</p>
jQuery to be Integrated with ASP .NET2008-09-28T00:00:00Zhttps://www.steveworkman.com/jquery-to-be-integrated-with-asp-net<p>Fantastic news! Long-time golden boy of the javascript world, <a href="http://jquery.com/">jQuery</a>, is to be integrated with Microsoft's ASP .NET framework.</p>
<p>In an <a href="http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/">announcement</a> today on the jQuery blog, <a href="http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx">Scott Guthrie's blog</a> and <a href="http://www.hanselman.com/blog/jQueryToShipWithASPNETMVCAndVisualStudio.aspx">Scott Hanselman's blog</a>, the jQuery library would be distributed AS IS with Visual Studio 2008 SP1 and the free Express editions. The aim is to extend ASP .NET AJAX support and generally make life easier for MS developers. Microsoft would also be contributing tests and patches to the jQuery core, but would not be submitting features etc.</p>
<p>This is a massive boost for a framework that won me and my company over a long time ago. jQuery now has backing from the biggest names in IT and will benefit immensely from the additional support.</p>
<p>The benefits are not only for the jQuery team, they're also for any web standardistas. This support for jQuery signals Microsoft's intentions for the ASP framework. I can only hope that from this, Microsoft adopts jQuery in its entirety, having ASP output unobtrusive, cross-browser javascript, not the 'impossible to debug or follow' mess that it currently uses.</p>
Easy Semantic Forms with CSS2008-10-26T00:00:00Zhttps://www.steveworkman.com/2008/easy-semantic-forms-with-css/<p>In the early days of the Internet, web sites were for gathering and displaying information. In its 20 year history, this hasn't changed much! At some point on a site you have to enter your details or what information you're searching for. So, it makes sense that the thing I spend most of my time doing is creating forms!</p>
<p>Most of the time you see a form, the label is on the left and the field is on the right, with validation or help after the input field. There are lots of ways this can be laid out, but the simplest and most semantically correct method is hardly ever used. What I'm going to show you is how to lay out a form properly with standards-compliant CSS.</p>
<p><strong>The HTML</strong> The most semantically-correct HTML takes the following structure</p>
<pre><code><fieldset>
<legend>Form Title</legend>
<form action="#" method="post">
<ol>
<li>
<label for="field1">Field 1</label>
<input name="field1" type="text" />
</li>
<li>
<label for="field2">Field 2</label>
<input name="field2" type="text" />
</li>
<li>
<input type="submit" name="submit" class="submit" />
</li>
</ol>
</form>
</fieldset>
</code></pre>
<p>The form is contained in a fieldset element, which, naturally, is a set of fields. This has a legend element, telling the user what this area of the form relates to. This is especially useful for giving context to the fields in multi-part forms. Inside this is the form element, after which we have the ordered list. It makes the most sense for this element to be used as a form is a list of questions and completing a form is an ordered process, starting from the first field and then submitting. The</p>
<p>tag is one of the lesser utilised elements and most of the time, it won't interfere with any other CSS on your site. Inside each list item, we have a label and the input field. The label and its 'for' attribute is very important as screen readers use these to identify what field a user is currently focused on. The 'for' attribute relates directly to the 'name' attribute of the input element, so make sure that these are the same.</p>
<p><strong>The CSS</strong> This is the tricky part, though it really shouldn't be! Working on the principal that each list element takes up the whole width of the fieldset, it's pretty simple to use them as floated block elements, as the code below shows:</p>
<pre><code>legend {
margin-left:1em;
color:#000;
font-weight:bold;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style:none;
}
fieldset ol li {
float:left;
clear:left;
width:100%;
padding-bottom:0.5em;
}
label {
float: left;
width: 10em;
margin-right:1em;
}
fieldset.submit {
float: none;
width: auto;
border-style: none;
padding-left: 12em;
background-color: transparent;
background-image: none;
}
</code></pre>
<p>Starting at the top, the legend indents the text and sets it colour and weight. The ordered list then gets some padding and has its list style removed. This gets rid of any 1, 2, 3... notation that the browser adds. The magic then starts in the list items. Firstly, they are floated to the left to allow for multiple elements on the same line. It then clears the float from any previous elements (i.e. the4. above) and sets its width to 100%. This gives it complete ownership of the whole width of the fieldset - any subsequent list items will be on the next line down. Some padding is applied to the bottom of the list item to separate the fields making it easier on the eye. The labels are then floated left within the list item. They are given a width of <code>10em</code> and a right-margin of <code>1em</code>. This gives enough room for most long labels and then all input elements to the right will be in line. The use of em is important here as users with non-standard font sizes will have consistent margins, whereas using % or px will produce an inconsistent look and feel. Finally, the submit button is given a class of submit to correctly align the element with the input elements. This could also be achieved using <code>input[type="submit"]</code> but IE6 doesn't support attribute selectors so a class is used. Notice that this CSS doesn't style the input element at all. All elements after the label are free to be styled as required, they'll all be in the correct alignment. This method works especially well with date pickers which have a small linked image at the end of the input element. The same goes for validaiton messages: no extra formatting is required.</p>
<p>This solution produces the following elegant form: <a href="https://www.steveworkman.com/static/img/form.png"><img src="https://www.steveworkman.com/static/img/form.png" alt="" title="A semantic Form" loading="lazy" /></a></p>
<p>It doesn't look pretty, but a few colour changes can make this simple form zing.</p>
<p>So, there you have it. Really simple, elegant, semantic forms.</p>
What Would the Best Mobile Web Toolkit Do?2008-11-18T00:00:00Zhttps://www.steveworkman.com/2008/what-would-the-best-mobile-web-toolkit-do/<p>As I mentioned in a <a href="https://www.steveworkman.com/projects/2008/patching-iui/">previous post</a>, I'm planning a mobile web toolkit to replace iUI, but what would you want in it that's not in iUI already? Should is work across all browsers, even Pocket IE and that godawful Blackberry Web Browser? Should it use progressive enhancement all over the shop or just create a new version for each browser? Should it focus on touch screens or is clicking important too?</p>
<p>Put your thoughts in the comments!</p>
Easy iPhone Applications2008-12-08T00:00:00Zhttps://www.steveworkman.com/2008/easy-iphone-applications/<p>A few days ago I read about <a href="http://www.phonegap.com/">PhoneGap</a>, an easy way to make an iPhone application using the web. The basic idea is that the native application runs a Webkit install pointed at a URL. From there you can run your iPhone-optimised web site without a hitch. Sounds wonderful.</p>
<p><a href="https://www.steveworkman.com/static/img/iphoneapp.png"><img src="https://www.steveworkman.com/static/img/iphoneapp.png" alt="SteveWorkman iPhone App" title="SteveWorkman" loading="lazy" /></a></p>
<p>I then found another <a href="http://openideals.com/2008/12/05/turn-your-blog-into-a-native-iphone-app-in-10-steps/">blog</a> telling me how to create a simple Dashcode application that read from an RSS feed. So, I pointed it at this feed and off I go! A really simple application whilst watching the TV. If you want to have a look, point Safari or your iPhone at <a href="https://www.steveworkman.com/iPhone">PhoneGap</a> is a great piece of technology, and is a great stop-gap between learning how to make web sites and iPhone apps.</p>
Unique IDs in AJAX Web Applications2008-12-09T00:00:00Zhttps://www.steveworkman.com/2008/unique-ids-in-ajax-web-applications/<p>This week, Roger Johansson of 456 Berea Street <a href="http://www.456bereastreet.com/archive/200812/the_id_attributes_value_must_be_unique/">posted about unique IDs in web applications</a>. I read this and thought, "you're right, they should be unique, but what if you've got an AJAX repeater?" By this I mean when I'm loading functional parts of my application that I'll be referencing with JavaScript again, do I have to maintain a unique ID? Surely it knows what I added last or how to make them into an array?</p>
<p>This problem is common with certain kinds of forms where you want to let the user add another item but don't want to have a large form on a page. For this I then append a bit of my form to the page. However, if I want to manipulate that field again, I have to assign it a unique ID, but what should that be?</p>
<p>Say the field had and ID of "cheese", what would you add to the end to make it unique? Would you continually increment and hope they don't hit the button 65 million times? (unlikely I know, but possible). Do you assign it a random number, then have to remember this random number and hope it doesn't come up again?</p>
<p>What I would love to see is to be able to (naturally) access arrays of IDs, allowing IDs to be duplicated without the browser falling over. Is it too much to ask, or do I have to keep appending random numbers to my fields?</p>
Want your company to develop for iPhones? Get in the Yellow Pages!2008-12-12T00:00:00Zhttps://www.steveworkman.com/want-your-company-to-develop-for-iphones-get-in-the-yellow-pages<p><img src="https://www.g5searchmarketing.com/blog/wp-content/uploads/2008/08/yellow-pages.jpg" alt="Yellow Pages" title="Yellow Pages" loading="lazy" />Have you tried registering for the iPhone developer programme? I have. Today I registered my company for the scheme and was told there would be a verification process and it would take about a week. I called Apple to see what this process was. Your company goes through the following:</p>
<ol>
<li>Your e-mail address is checked against the company name</li>
<li>Your e-mail address is checked against the web address you gave</li>
<li>Your website is checked to make sure you exist</li>
<li><strong>Apple then check you are in the Yellow Pages</strong></li>
</ol>
<p>What! Check that I'm in the Yellow Pages!</p>
<p>I understand the need to check that the company actually exists but how many internet companies are registered to a physical address and listed in the Yellow Pages? Most "companies" will be a small-time operation and not actually registered. If you fail the "Yell check", you have to provide a certificate of incorporation. How many internet companies have that?</p>
<p>All that said, Apple have done well to make the app store a place for professionally-created programs. They've taken it onto themselves to test and approve all apps which is a significant overhead, but the store is better for it.</p>
Music of the Year2008-12-20T00:00:00Zhttps://www.steveworkman.com/2008/music-of-the-year/<p>I've been using the brilliant <a href="http://www.last.fm/">Last.fm</a> service for nearly two years now, during which time it's introduced me to loads of new artists. The best thing about it is its iPod scrobbling, so it keeps track of what I listen to and I can do all sorts of stats on it. As it is that time of year, here's my <a href="http://last.fm/">Last.fm</a> music of the year!</p>
<p><strong>Artist of the Year</strong> <a href="https://www.steveworkman.com/static/img/top_artists_2008.jpg"><img src="https://www.steveworkman.com/static/img/top_artists_2008-273x300.jpg" alt="" title="top_artists_2008" loading="lazy" /></a> Winner: <strong>Guillemots</strong> I absolutely loved the Guillemots new album <em>Red</em>, a solid follow up to their debut and an album that keeps me listening all the way through. I've now been to see them live 9 times! I also saw Feeder live for the first time this year which is why they've shot up the charts, the same goes for Athlete. Bloc Party hardly featured in my list of the year until they released <em>Intimacy</em>, though I'll come to that later. Kings of Leon, Portishead and Metallica also make appearances in the top 20 for the first time after some great albums this year. Sex on Fire is an amazing song that never fails to get me going. BBC Radio 5 is down there because of my religious listening to Mark Kermode's Film Reviews and Fighting Talk podcasts.</p>
<p><strong>Album of the Year</strong> <a href="https://www.steveworkman.com/static/img/top_albums_2008.jpg"><img src="https://www.steveworkman.com/static/img/top_albums_2008-300x223.jpg" alt="" title="top_albums_2008" loading="lazy" /></a></p>
<p>Winner: <strong>Athlete - Beyond the Neighborhood</strong> Athlete's third album is their true masterpiece. After a stunning debut and a mediocre follow up, the difficult third album didn't set the charts alight. To be honest, first listen I didn't like it either, then I heard it again and I couldn't stop listening to it, hence 400 listens to tracks from the album. It's an absolute triumph and an album that gets better as the album goes on! Very close behind is Guillemots' <em>Red</em> and amazingly, Bloc Party's <em>Intimacy</em>. I don't really understand <em>Intimacy</em>, it's a mish-mash mess of an album that manages to be brilliant every other track. Still, I listen to the crap between the good bits as the tracks I like are amazing. Jimmy Eat World's <em>Chase This Light</em> is just pure fun so I've listened to it a lot. Other notable albums are The Dears's <em>Missiles</em> (Pink Floyd meets Blur) and We Are Scientists <em>With Love and Squalor</em> which has a few great tracks but not enough to carry it up the charts.</p>
<p><strong>Song of the Year</strong> <a href="https://www.steveworkman.com/static/img/top_tracks_2008.jpg"><img src="https://www.steveworkman.com/static/img/top_tracks_2008-300x262.jpg" alt="" title="top_tracks_2008" loading="lazy" /></a> Winner: <strong>Guillemots - Cockateels</strong> Best song on my favorite album of the year. Unfortunately they've never played it live as their shows have been scaled back and they just don't have room for orchestras! Second on the list is Oceansize's <em>Unfamiliar</em> which is a great song from an underrated album and artist. It should be at the top of the list by miles, but it's an 8 minute song so I can't get that many listens in! Note Bloc Party's <em>Talons</em> at the bottom of the list, by the 31st it'll have climbed a few places.</p>
6 Useful Sites for Beginning iPhone Development2009-01-30T00:00:00Zhttps://www.steveworkman.com/2009/6-useful-sites-for-beginning-iphone-development/<p>iPhone development is the forefront of "cool" programming. Doing something with your latest toy and potentially selling it to millions of people, making a few bucks along the way. The main stumbling block (assuming you have a Mac) is the Objective-C language.</p>
<p>My experience in programming starts out with Java (university) -> PHP -> C# -> ASP .NET. Nowhere along the way have I ever delt with memory management or pointers. However, you can pick these things up quite quickly once you've had some things explained to you. So, here's 10 great sites for starting out in your iPhone development.</p>
<p><strong><a href="http://www.stanford.edu/class/cs193p/cgi-bin/index.php">Stanford Cocoa Programming Course</a></strong></p>
<p><a href="http://www.stanford.edu/class/cs193p/cgi-bin/index.php"><img src="https://www.stanford.edu/class/cs193p/assets/cs193p-banner.png" alt="" title="Stanford Cocoa Progamming" loading="lazy" /></a></p>
<p>A full 20-lecture course with sample code, walkthrough assignments and guest lectures from Apple employees. If you've ever been through uni/college you'll know what to expect, a bit of a challenge to the casual developer but you'll learn amazingly quickly. Thoroughly recommended.</p>
<p><strong><a href="http://phonegap.com/">PhoneGap</a></strong></p>
<p><a href="http://phonegap.com/"><img src="https://s3.amazonaws.com/twitter_production/profile_images/61102217/icon_iphone_wo_glare_bigger.png" alt="" title="PhoneGap" loading="lazy" /></a></p>
<p>PhoneGap, for iPhone, Android and Blackberry, allows you to put your web sites into a native application with no objective-c knowledge! Any web site can be made into an app. It's simple and open-source too! You can also access native device functionality like the accellerometer and the location system using javascript. There's a great tutorial in <a href="http://openideals.com/2008/12/05/turn-your-blog-into-a-native-iphone-app-in-10-steps/">turning your blog into an app</a> on the <a href="http://openideals.com/">open ideals blog</a>.</p>
<p><a href="http://developer.apple.com/iphone">Apple Developer Documentation</a></p>
<p><a href="http://developer.apple.com/iphone"><img src="https://devimages.apple.com/iphone/images/header.gif" alt="" title="iPhone Dev Center" loading="lazy" /></a></p>
<p>The bible for iPhone developers. The whole SDK can be viewed from here along with some great exercises and videos on how the whole thing works. When you download the SDK you can download this whole library into XCode for viewing offline.</p>
<p><a href="http://iphonekicks.com/">iPhoneKicks.com</a></p>
<p>A Digg-esque site for bookmarking iPhone resources. Not a massive community at the moment but it's getting there.</p>
<p><a href="http://iphonedevelopment.blogspot.com/">Jeff LaMarche's Blog</a></p>
<p>Jeff has been an Objective-C programmer for the past 10 years and regularly blogs about iPhone development, whether it's a new component or some funky OpenGL particle system. His posts are full of great code samples so go have a look!</p>
<p><a href="http://is.gd/hlhV">Tim Haines' Twitter List</a></p>
<p><img src="https://assets1.twitter.com/images/twitter_logo_s.png" alt="" title="Twitter" loading="lazy" /></p>
<p>If you're in to Twitter (<a href="http://twitter.com/steveworkman">like I am</a>) Tim Haines maintains a list of iPhone developers on Twitter. If you go and put your name on the spreadsheet there's a ruby script you can run to follow all the developers on that list. You'll get access to hundreds of people-worth of knowledge and help. The community is very friendly and always willing to help you out.</p>
<p>So, good luck making your shiny new app! If you have any good sites you want added to the list, leave a comment!</p>
Why iPhone Web Apps are Still Worthwhile2009-02-20T00:00:00Zhttps://www.steveworkman.com/2009/why-iphone-web-apps-are-still-worthwhile/<p>I've been playing with iPhone development for a month now and I've understood the concepts and am ready to make my first app, but I haven't.</p>
<p>See, my first exposure to the iPhone world was through a web app my company made for its partner group. It was a simple ruby on rails web app that used my <a href="https://www.steveworkman.com/projects/2008/patching-iui/" title="iUI Patched">patched version of iUI</a> to drive the experience. It was such a big hit that I'm currently finishing up a third demo branch of this for a client, hoping to convince them that even large organisations can get on the mobile bandwagon. So, you may ask, why isn't it being done as a native app? Well, there's a lot of good reasons, but what it really boils down to is that if you're writing a native app for the iPhone, you're only writing it for the iPhone.</p>
<p>At Mobile World Congress this week we've seen new <a href="http://www.htc.com/www/product/magic/overview.html">Android devices</a>, new <a href="http://www.microsoft.com/presspass/press/2009/feb09/02-16MWCPR.mspx">Windows Mobile</a> devices and more of the <a href="http://www.palm.com/us/products/phones/pre/">Palm Pre</a>, devices that have one important thing in common with the iPhone, a web connection and a browser.</p>
<p>The best thing about all of them having a browser is that 3 of the 4 run a version of Webkit with Apple's <a href="http://webkit.org/specs/CSSVisualEffects/CSSTransforms.html">transforms</a> and <a href="http://webkit.org/specs/CSSVisualEffects/CSSAnimation.html">animations</a> built in (Windows Mobile users can download Opera ;-)) So, really, when you're creating a web app for an iPhone, you're creating a web app for all other mobile devices with a half-decent browser (S60 included).</p>
<p>How much work would it be to port an Objective-C (iPhone)-based app to Java (S60 and Android) and then to .NET (Windows Mobile), only to have to create a web-based version for the Palm Pre! What all these iPhone developers need to understand is that if they want the full potential of the market they'd better start learning HTML5 databases and Javascript. Web apps are certainly still worthwhile.</p>
<p>All that said, App stores can't push web sites to your phone, which is the main source of advertising and how the iPhone apps have become so successful. Maybe Apple should allow you to browse web apps too?</p>
Don't just complain about CSS3, do something!2009-03-03T00:00:00Zhttps://www.steveworkman.com/don-t-just-complain-about-css3-do-somethin<p>A colleague of mine and I were discussing the current state of the internet, CSS3 and IE being behind the rest of the browsers in terms of standards adoption. He argued that IE was "rubbish because it doesn't support CSS3 selectors/borders etc". My reply to this was, "well, do something about it".</p>
<p><a href="http://blogs.msdn.com/ie">IE doesn't support any non-candidate recommendation CSS3 modules</a> so they can't be accused of not supporting standards. If you want this to change, we have to get CSS3 finished (at least one module!). To do that, the W3C needs help.</p>
<p>The CSS Working Group is made up of invited experts and representatives of the major web companies (Microsoft, Mozilla, Apple, Google, Opera and Adobe). It's unlikely that you'll get to go to one of their meetings any time soon, but everything that they talk about is discussed openly on their <a href="http://www.w3.org/Mail/Lists.html#www-style">mailing list</a>. I've been subscribing to this list for around 6 months and haven't contributed a lot, but anyone can. They currently want people to comment on working drafts and come up with suggestions on how things should work and any problems you have day to day that you think can be solved with CSS.</p>
<p>So seriously, if you want to help, don't just complain, <a href="http://www.w3.org/Mail/Lists.html#www-style">do something</a>.</p>
Safari update makes itself obsolete on Windows2009-03-04T00:00:00Zhttps://www.steveworkman.com/2009/safari-update-makes-itself-obsolete-on-windows/<p><a href="https://www.steveworkman.com/static/img/chromeissafari.png"><img src="https://www.steveworkman.com/static/img/chromeissafari.png" alt="" title="Chrome = Safari 4" loading="lazy" /></a></p>
<p>Last week, Apple announced the <a href="http://www.apple.com/safari">Safari 4 beta</a> with a whole host of updates and enhancements. Whilst all of this is great for Mac users, it renders the browser completely obsolete for Windows users. Let me explain:</p>
<p>Lets go through the list of <a href="http://www.apple.com/safari/whats-new.html">new features</a>.</p>
<ul>
<li><strong>Top Sites</strong> - <a href="http://www.opera.com/">Opera</a> first added this feature 3 years ago, Google <a href="http://www.google.com/chrome">Chrome</a> has it, all Apple did was make it fancy and unusable</li>
<li><strong>Cover Flow</strong> - I like the live page preview (other browsers do have that) but cover flow, to me, is something that windows users will never understand</li>
<li><strong>Full history search</strong> - Safari is the last browser to get this function</li>
<li><strong>Tabs on top</strong> - Google spent a lot of effort getting this right, Apple haven't put the same level of thought into it. If anything, it makes Apple look like they're copying Google, badly.</li>
<li><strong>Nitro engine</strong> - Makes pages run fast. Cool</li>
<li><strong>Native look and feel</strong> - looks good in Vista, awful in XP. Considering Vista usage is < 10%, that's not a good thing</li>
<li><strong>Developer tools</strong> - once again, Apple is playing catch-up</li>
</ul>
<p>So, what does this all mean exactly? Well, Safari is becoming more and more like Chrome. In fact, all Google has to do is update their Webkit rendering engine and they will be the same browser. In this manner, Safari for Windows has just shot itself in the foot by removing any differentiating features between itself and its nearest competitior.</p>
<p>I fully expect Safari 5 to make itself even more like Google Chrome (whatever that may look like in 2 years time).</p>
CSS Matrix Layouts - Another Way?2009-03-13T00:00:00Zhttps://www.steveworkman.com/2009/css-matrix-layouts-another-way/<p>Today, <a href="http://twitter.com/snookca">Jonathan Snook</a> posted about <a href="http://snook.ca/archives/html_and_css/matrix-layouts">CSS Matrix Layouts</a>, a proposal for a third way for creating advanced layouts in CSS3, with <a href="http://www.w3.org/TR/css3-layout/">Advanced Layouts</a> and <a href="http://www.w3.org/TR/2007/WD-css3-grid-20070905/">Grid Layouts</a> being the others. His ideas are around creating a grid and defining sections (be it divs or natural HTML5 elements) that are effectively laid out like a table. Each section can span like a table can span rows and columns, with all those values being stored in CSS. Take a look at <a href="http://snook.ca/archives/html_and_css/matrix-layouts">the post</a> for an example, it's quite simple once you get your head around it.</p>
<p>I raised <a href="http://snook.ca/archives/html_and_css/matrix-layouts#c63005">some concerns</a> about generated columns, and how the grid might not know how to react, and also that adding columns is a bit of a headache in complex layouts, but is relatively minor compared to the benefits that it would bring. In general, there's a lot of support for the module. Hopefully we'll see a draft on www-style very soon.</p>
<p>Of course, this is just all new stuff and unlikely to be fast-tracked to CR status any time soon. However, this module is similar to the CSS Grid Layout module, and some of Snook's work could be very useful in that module. I'm going to investigate the working draft and if it looks like I can improve it, I might even have a go.</p>
It's time to upgrade your browser, no, really2009-03-20T00:00:00Zhttps://www.steveworkman.com/it-s-time-to-upgrade-your-browser-no-really<p><img src="https://www.microsoft.com/library/media/1033/windows/images/internet-explorer/default/ie8_logo.gif" alt="IE 8 Logo" loading="lazy" /> <a href="http://www.microsoft.com/ie">Internet Explorer 8</a> has now been unleashed upon the Windows world to a small ripple of applause and a snigger from <a href="http://www.getfirefox.com/">every</a> <a href="http://www.opera.com/">other</a> <a href="http://www.apple.com/safari">browser</a> <a href="http://www.google.com/chrome">manufacturer</a>. It's a big step forward for Microsoft, the IE team have put in a lot of hard work and should be proud of everything they've done to enforce standards on the web.</p>
<p>Now it's your turn.</p>
<p>IE6 still accounts for 20% of all web browsing, and its even higher for corporations where policy gets in the way of letting people upgrade. This browser is now so far behind in terms of security, speed and browsing experience that it's not even funny, and has become a perennial headache for all web designers who want to push the Internet forward as a medium.</p>
<p>So, I implore you, <a href="http://www.microsoft.com/ie/">upgrade your browser today</a>. I'm going to do so and declare from the rooftops that I shall no longer support IE6. My web sites will be standards compliant and I will not be making any exceptions for this browser.</p>
<p>So, farewell IE6. It's been a long time coming, but you're gone.</p>
Destroy Twitter - my new favourite Twitter client2009-03-24T00:00:00Zhttps://www.steveworkman.com/2009/destroy-twitter-my-new-favourite-twitter-client/<p><img src="https://www.destroytoday.com/bin/projects/destroytwitter/destroytwitter_128.gif" alt="Destroy Twitter" loading="lazy" /> Just a quick note about a new Twitter client - <a href="http://www.destroytoday.com/projects/destroytwitter">Destroy Twitter</a>, that has quickly replaced Twhirl as my client of choice. It's lightweight, very simple and very fast whilst being incredibly slick at the same time. Now, all they have to do is get rid of the rubbish Windows chrome at the top and they're on to a winner!</p>
Classitis (class-eye-tiss) – The new CSS disease2009-05-07T00:00:00Zhttps://www.steveworkman.com/classitis-class-eye-tiss-the-new-css-disease<p>CSS has gone through many trends and phases in web development. Certain trends are welcome, like conditional stylesheets and developers refusing to do them for Internet Explorer 6. Other trends can have leave a web application with a disadvantage for the rest of its life, yes, in-line styles, I’m looking at you.</p>
<p>This is all well and good, people learn from their mistakes and in the end, best practice comes out. The latest trend seems to have brought us full-circle.</p>
<p>About a year ago, HTML was plagued by a trend known as divitis (div-eye-tiss), a syndrome where a web page was seemingly marked up entirely in </p><div> tags, making a mess of the markup and producing un-readable pages. This was mainly produced by new web developers who had just moved away from the safety of table-based design and into the world of web standards and can be easily remedied with some education on elements other than <div> and <br />.<p></p>
<p>This disease now seems to have mutated and crossed over to CSS in a trend I’m calling <strong>classitis</strong> (class-eye-tiss). It’s easy to diagnose: the first sign is in the HTML. Look closely at each element, it may have a class attached to it. If it does, does the one above have the same one? If this repeats all over the page, you may have classitis. In the navigation of your site, do all the list items have the same class name? You may have classitis. The way to tell for sure is to dive into the CSS: If the styles are predominately classes (i.e. are “.className”) with ancestor selectors being few and far between, then you have classitis.</p>
<p>The root cause of such a syndrome relates to modern web programming languages, notably ASP .NET. I’ll try to explain: ASP has a number of helpful server-controlled elements which when processed turn into regular HTML elements. These all have their own unique identifier, but this is the reference for the server, not for CSS. Therefore, each of these elements can have a CSS class applied to it, and developers use this constantly. The real kicker is that ASP encourages you to use its own controls rather than standard HTML elements, making this disease especially prevalent amongst users of ASP. What makes this even worse is that ASP has been the default option for enterprise level applications for a while now, and Microsoft have made ASP accessible to new users with the Express editions of Visual Studio. It’s now easier than ever to start coding badly.</p>
<p>Is classitis really that bad? Well, no, but it’s what it comes with that can cause problems. A recent web site template that I was given by a company that shall remain nameless, was riddled with classisits, even so far as that there was an individual class for each font type and size. Surely setting a single class for the body would be easier and using ancestor selectors after that would provide for simpler HTML. The real problem here is maintainability: my task was to add another page which used a three-column layout rather than their two-column one. I’ve ended up duplicating their code to make my new layout fit, even then, changes made to their stylesheet won’t be reflected in my layout.</p>
<p>It’s a sorry state of affairs, but the remedy is simple, learn to use HTML elements properly. Some developers seem to forget that <html> and <body> are tags like all the rest and can be used to dictate the styles of the whole page. For users of frameworks like ASP, remembering that there are more elements than the ones the framework provides is very important; though don’t rely on the visual designer. Classitis is curable, and education on its prevention is important. Lets hope it’s caught before it becomes a pandemic.</body></html></p>
</div></div>Recent work - entirely non-UI focused2009-05-21T00:00:00Zhttps://www.steveworkman.com/2009/recent-work-entirely-non-ui-focused/<p>When I created this blog, I wanted it to be about user interfaces, CSS, and maybe a bit of client script and design. That's what I do and what I love doing, truly it's what I got into this business to do. My last few months, however, have been spent dealing with all sorts of other technologies that exist nowhere near the front end.</p>
<p>The technology I've been using has actually been quite fun. I've been dealing with the <a href="http://en.wikipedia.org/wiki/ADO.NET_Entity_Framework" title="Entity Framework">.NET Entity Framework</a>, which is an auto-generating data access layer similar to <a href="http://www.llblgen.com/defaultgeneric.aspx" title="LLBLGen">LLBLGen</a> or <a href="http://www.hibernate.org/" title="Hibernate">Hibernate</a> for Java. It's free, works very well and has saved me a heap of time on this project. There are quite a few problems with it though, namely handling of scalar stored procedures, mediocre data model updating and the usual Attach/Detach context problems that it shares with Hibernate. It could do with some "scaffold" functionality too, but I think that's included in <a href="http://www.asp.net/mvc/" title="MVC Framework">.NET MVC Framework</a>.</p>
<p>I'vealso been playing with <a href="http://www.asp.net/ajax/" title=".NET AJAX">.NET AJAX</a> which works ok, though it's not as lightweight as doing the posts to another page (or in another language, damned viewstate), it has built-in fallbacks for non-javascript users, which is exactly what you want to do when making a AAA accessible site! I've had exposure to <a href="http://itextsharp.sourceforge.net/" title="iTextSharp">iTextSharp</a>, a .NET PDF assistant. I found it very easy to use and getting .NET to populate some PDF form fields was very easy. Having to use Adobe Acrobat Pro to make the PDFs was not as fun :-(</p>
<p>I've also been playing with SQL database mail, SQL's bcp function, and fighting with Visual SourceSafe and IIS. Yes, I'm working for a client who likes Microsoft ;-)</p>
<p>In reality, I've been sidelined from what I like doing because I can also do the server-side gubbins. Some days I'd rather not know how to do it, but I've now been a programmer for nearly 6 years (!!!) and I've realised that I know quite a lot about the entire process of building a system architecture that works (I know the following languages, Java, C#, CSS, HTML, JavaScript, PHP, Ruby, SQL, Objective-C, Haskell, Prolog, and lots of specific libraries like DirectX, OpenGL, jQuery).</p>
<p>My next project looks like it will be iPhone based, so whilst I need to brush up on my Cocoa, I may get back to doing what I love: creating beautiful, usable interfaces that improve the way we work with technology.</p>
<p>I'm looking to complete work on an article on "Designing for Touch" soon. Looking good so far...</p>
My problem with HTML 5 - Styling <meter>2009-10-15T00:00:00Zhttps://www.steveworkman.com/my-problem-with-html-5-styling-meter<p>I consider myself quite a forward-looking chap. Apart from the occasional glance backwards to see IE6 still behind me and throw it some pity code every now and again, I try and use the latest technology and techniques whenever I can.</p>
<p>Looking forward then, to HTML 5, I'm met with a lot of optimism. These new elements, accessible web forms, canvas, SVG, are all going to save me a lot of trouble in the future and will generally make the Internet experience better.</p>
<p>I recently had a read of the <a href="http://html5doctor.com/">HTML 5 doctor</a> blog and am excited to see what's going on. However, reading the <a href="http://html5doctor.com/measure-up-with-the-meter-tag/">Measure up with the meter tag</a> article, my brain did a backflip and my mouth said "Wuh?! How'd they do that?"</p>
<p>I'm refering to a specific part of the article where author Tom Leadbetter shows off some meter tags and the JustGiving web site saying "we could use meter here" (linked image below)</p>
<p><img src="https://html5doctor.com/wp-content/uploads/2009/08/just-giving-example.jpg" alt="" title="HTML 5 Just Giving example" loading="lazy" /></p>
<p>He also shows the code that goes below it, reproduced and corrected for the example here:</p>
<dl> <dt>Target</dt> <dd><meter min="245" value="245" title="pounds">245</meter></dd> <dt>Amount raised so far</dt> <dd><meter min="0" max="250" value="185" title="pounds">185</meter></dd> </dl>
<p>What I was thinking at this point was, <em><strong>"how on earth is that possible using those tags? Surely that's not posssible."</strong></em> So, I set about trying to prove that it was possible...</p>
<p><strong>It's not</strong></p>
<p><a href="http://download.steveworkman.com/meter.html">See my attempt to style the meter tag.</a> (works in Opera, Firefox and Safari)</p>
<p><a href="https://www.steveworkman.com/static/img/styling-meter.png"><img src="https://www.steveworkman.com/static/img/styling-meter.png" alt="" title="Styling the meter tag" loading="lazy" /></a></p>
<p>The fundamental issue is that using CSS and HTML5 alone, you do not have access to values of attributes that you can use again to set CSS properties. My main issue is that this is trivial in javascript, as demonstrated on the demo page.</p>
<p>There are some potential CSS modules that can help in this respect, namely <a href="http://disruptive-innovations.com/zoo/cssvariables/">CSS Variables</a> and <a href="http://kilianvalkhof.com/2006/css-xhtml/random-css-thought-math-in-css/">CSS Math</a>. I am also oblivious to the power of canvas and SVG, so if anyone can give me an answer using those I'd be very pleased.</p>
<p>I like the idea of HTML 5 but actually styling these new elements is going to be a real challenge. So, community at large, how do you solve this one?</p>
<p><strong>Update:</strong> I <a href="http://lists.w3.org/Archives/Public/www-style/2009Oct/0100.html">submitted this to the W3 CSS Working Group</a> and got some very good responses. Principally, as Bruce commented, I should be using the <a href="http://www.w3.org/TR/css3-values/#attribute">CSS3 Values attr()</a> element to access values of properties and do the math, then use the <a href="http://www.w3.org/TR/css3-content/">generated content</a> module to put the graphic in the right place. Their main concern is that you'd have to use "s/#meter::after/#meter::after::after" as a selector, which isn't supported by anything right now, and background clipping is a bit dodgy too.</p>
<p>Brad Kemper <a href="http://www.bradclicks.com/cssplay/guage.html">did a quick mock-up</a> which will work on webkit nightlies. I would update my <a href="http://download.steveworkman.com/meter.html">demo</a> to show what the CSS WG guys were doing, but nothing works, it's all theory at the moment. Lets hope for more soon.</p>
The Future of the Wave2009-10-27T00:00:00Zhttps://www.steveworkman.com/2009/the-future-of-the-wave/<p>I've started using Google Wave recently (thanks to a colleague of mine, <a href="http://twitter.com/jmcquarrie">James McQuarrie</a>) and up-front, I'll say that I don't get it. I currently don't see the usefulness of it in my current situation (I'm working in a team that's all in the same room). However, I got an invite to the <a href="http://www.london-gtug.org/">Google Technology Users Group</a> (#gtug) talk on Wave by the Wave developers themselves so I thought I'd go along and see what all the fuss was about.</p>
<p>They started with a few videos of what the whole thing is about (the <a href="https://www.youtube.com/watch?v=xcxF9oz9Cu0">pulp fiction</a> one is my favorite) and I was starting to understand that it's a very fancy collaboration client with lots of other features that are 'still to come'.</p>
<p>And that seemed to be the main theme of the talk: there's more to come. They were talking about draft mode, extension gallery (paid-for apps too), translation, spell check, more languages, better keyboard shortcut support, mobile web versions (<strong>iPhone native app NOT in the works</strong>) and open libraries. There's a lot there and they've got a lot of ideas which they "don't have the resources to do", and that's an interesting point.</p>
<p>Yes, it's really early in the days of Wave, a product which has been "workable" for 5 months now, but they can't push new features in until their core changes are complete. For this reason, Google haven't open-source'd the core functionality or built all their API hooks yet, so developers are having to hack around problems.</p>
<p>The Google IO video also mentioned that you'll be able to build your own Wave servers for private use. These servers will have to contact the main Google Wave servers, and <em>all communications between these two will be cryptographically signed</em>, which is major news. There's quite a large overhead of performing this and for larger organisations, they may have to shell out for dedicated hardware.</p>
<p>Steph and Lars (the presenters) also talked about e-mail integration. They said they had it working for quite a long time but didn't like the way that it interfered with other waves, so they dropped it. They're hoping that the community will build it for them.</p>
<p>They also mentioned that it's very popular in the USA, Canada, UK, then France and Brazil. China is half way down the list but Korea is nowhere to be seen. For a country that has the highest Internet connectivity per capita that seems very odd.</p>
<p>Finally they mentioned the Client API, and the lack of one. There's no intention of making one either as they want everyone to use the web interface.</p>
<p>In my opinion, there's so much more to come and I can see some very good potential uses (apparently lawyers love it). At the moment though, it's still very early days. There's so many basic things they've still got to work out, test and tweak, and then it'll be ready for the prime time. Still, will it beat e-mail? I'm not leaving Outlook behind just yet.</p>
<p><em>Disclaimer: I work for PA Consulting Group, but the opinions above are not those of PA and are entirely my own.</em></p>
Apple product roadmap 2010-2011 (prediction)2009-12-29T00:00:00Zhttps://www.steveworkman.com/apple-product-roadmap-2010-2011-prediction<p>If you're like me, with an eye on Google Reader even over the holidays, you won't have failed to notice the upcoming Apple event at which the Apple touch-screen tablet, likely to be called iSlate or the Slate, will be announced. Such is the predictability of this event, given the number of rumours that have appeared, it is now completely without interest. Even the <a href="http://www.newsfactor.com/story.xhtml?story_id=70810">stock market</a> takes more notice of Apple's rumours, rather than their product announcements.</p>
<p>So, I've gazed into my crystal ball, looked at the last few years of product announcements, and have come up with the major headlines for the next two years of Apple products.</p>
<p><a href="https://www.steveworkman.com/static/img/apple-product-roadmap-2010-2011.png"><img src="https://www.steveworkman.com/static/img/apple-product-roadmap-2010-2011.png" alt="Apple product roadmap 2010-2011" title="Apple product roadmap 2010-2011" loading="lazy" /></a></p>
<p>The major events, spread throughout the year, all have very specific themes. January is iLife/iWork and major product announcements, March is a developers preview of new software, WWDC in June is a major product launch, September is a big iPod event and November is pre-Christmas product refresh time. For those reasons, the above list shouldn't be too surprising to most people in the know.</p>
<p>I'm predicting next year will be the Slate's year, rather than the iPhone. It's too soon for a form factor change and it's got all the features it could have at this time, so 2011 will be the next iPhone update. The Slate will fit into the iPhone's product release schedule, now being Apple's flagship product, with yearly updates for the first few years depending on its success. The Macbook Pro line will be somewhat ignored until the end of 2010 when it gains Intel quad cores like its iMac brother. At this time, I believe the first details on OS X 10.7 will come out, probably with a new UI paradigm, potentially merging with the Slate's modified iPhone OS.</p>
<p>2011 will see "Westmere" Mac Pros, though it's possible that this will be quite a quiet event, given <a href="http://www.macworld.com/article/143998/2009/11/corei7vsmacpro.html">i7 iMacs are more cost-effective</a> than Mac Pros. An updated iPhone/Slate OS will follow in March, and a second generation Slate in June (which will be the one I'll get). Some controversy to follow then with a new iPod on the horizon; my thinking goes that the whole product line there needs a kick to keep people buying them, and by this time, technology will be good enough for something amazing. Finally, after that will come Intel i9 iMacs, with those processors being available for Macbook Pros by the end of 2012.</p>
<p>Honestly, you could probably try and predict further ahead than that with some accuracy, but forecasts become quite hazy more than two years down the line. Still, if there's any betting shops out there willing to give me good accumulator odds on this, drop me a line!</p>
<p><strong>Update 1 (March 2010):</strong> I got the <a href="http://apple.com/ipad">Slate/iPad</a> right, though not the release date. Still, by the time it reaches the rest of the world it probably will be July. Not so sure about a March "Town Hall" event, though I'd still expect iPhone OS 4.0 with the iPhone update this year. Also, people keep going on about potential Core i3/i5 updates for the Macbook Pro line. This hasn't happened yet and I still think I'm in with a shout of November. The problem will be power consumption and heat, which may need a bit more work to keep the 8 hour battery life promise that Apple have made.</p>
<p><strong>Update 2 (April 2010):</strong> it seems I got the iPhone 4.0 OS announcement right at the town hall event, just seems that it was in April rather than March. Unfortunately, the i5/i7 Macbook Pro announcement was in April, not November as I said. Better luck next time for that one</p>
Why CSS Multi-Columns aren't ready for prime time2010-01-05T00:00:00Zhttps://www.steveworkman.com/why-css-multi-columns-aren-t-ready-for-prime-time<p><a href="https://www.steveworkman.com/static/img/cssmulticolumn.png"><img src="https://www.steveworkman.com/static/img/cssmulticolumn.png" alt="CSS Multi-column layout problem" title="CSS Multi-column layout problem" loading="lazy" /></a> Of the upcoming CSS3 modules that are coming into common use: selectors, borders, text etc, the multi-column layout module interests me the most. I've always been a fan of newspaper style layouts and that was one of the key looks I was going for when re-designing this site. The big problem is that the module just isn't ready yet.</p>
<p><strong>The facts:</strong></p>
<ol>
<li>The module is currently supported by Safari 4, Chrome 3 and Firefox 3.5</li>
<li>Opera 10.5 has support coming but is not implemented yet. IE has no support for the feature, which is currently <a href="http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx">not planned for IE9</a> (at least not mentioned)</li>
<li>The <a href="http://www.w3.org/TR/2009/CR-css3-multicol-20091217/#column-breaks">spec</a> has a number of properties that are not implemented by any browser (column breaks)</li>
</ol>
<p>Ok, so you can work around some of those problems with <a href="http://welcome.totheinter.net/2008/07/22/multi-column-layout-with-css-and-jquery/">javascript hacks</a> but that's not the point here. I wanted a pure multi-column layout for the front page of my blog, but instead I've removed the experiement and relegated it to the footer as I just could not get it to work consistently. If you look at this page's footer (or the image at the top of this post) now you can see the problem.</p>
<p><strong>The basics of my issue</strong></p>
<p>I've got a containing <code><div></code> with [-moz|-webkit]column-count set to 3, ample gap for the lists and no width specified to let the browser lay out the content as it sees fit. There are three <code><h5></code> elements, each followed by a <code><ul></code> element in the <code><div></code>. What I expect the browser to do is identify the <code><h5></code> elements at column headings and start a new column with this element. Instead, it ignores my semantics and tries to push out equal height columns.</p>
<p><strong>Why is this so annoying</strong></p>
<p>Simply because column-break doesn't work. What I do is put <code>[-moz|-webkit\]column-break:after</code> on the <code><ul></code> elements but the browser continues to insist on its own break points.</p>
<p><strong>Get it right</strong></p>
<p>It appears that the <a href="http://www.w3.org/TR/2009/CR-css3-multicol-20091217/#column-breaks">candidate recommendation spec</a> (17th December 2009) has resolved some of these issues, but it will take a while for them to get in to builds and even longer before they become mainstream. For now, keep using floated <code><div></code> elements and javascript. Maybe then it'll be worth the pain.</p>
Adding colour to colour theory2010-01-12T00:00:00Zhttps://www.steveworkman.com/2010/adding-colour-to-colour-theory/<p><a href="https://www.steveworkman.com/static/img/BluBar.png"><img src="https://www.steveworkman.com/static/img/BluBar.png" alt="BluBar Colour palette" title="BluBar" loading="lazy" /></a></p>
<p><em>This is the first in a short series about my blog re-design. I'll try and cover all the techniques used, including CSS3 and HTML5 usage</em></p>
<p>When considering the colour scheme for this blog, I looked at my old one quite a bit and decided that I quite liked it. Based on the resolution that blog design should be evolution rather than revolution, I set about finding a suitable palette that matches the silver, yet provides a bit more of a range of colours.</p>
<p>My first, and only, stop was the wonderful <a href="http://www.colourlovers.com/">Colour lovers</a>, whose search engine for "electric blue" brought me the keystone to my design. Straight off the back of that I found the <a href="http://www.colourlovers.com/palette/807697/BluBar">"BluBar" palette</a> which gave me the matching colours to create the design.</p>
<p>Off to a great start, I made the whole thing using only those 5 colours and some gradients.</p>
<p>Still, when I came to look upon the design at the end, I was disappointed. The whole site looked very dark, and since the elecric blue was used for borders and links, there was little to catch the eye.</p>
<p>What I learnt, immediately, is that there needs to be another bright colour that can add intensity and be used in the opposite end of the spectrum. So, I started looking for my elusive opposite: electric orange.</p>
<p>There were quite a few results on colour lovers, but I eventually plumped for this one: <a href="http://www.colourlovers.com/color/EE7300/electric_orange">electric orange (#ee7300)</a> - a darker orange that brightens colours around it without being too brilliant a colour. This is almost exactly the complementary colour (apparently #ffa100 is the theoretical match) but it's close enough. Just shows that knowledge of colour theory is essential for designers</p>
<p>This new colour will be making its way into my design slowly as I get chance to work on it. I'm still not pleased with the way it looks at 1024*768, there's a few bugs too and after last week's r<a href="https://www.steveworkman.com/web-design/css3-web-design/2010/why-css-multi-columns-arent-ready-for-prime-time/">ant about css3 multi columns</a>, I think I'll drop it from the footer.</p>
<p>Watch this space</p>
HTML 5 Forms - a spammers paradise2010-01-18T00:00:00Zhttps://www.steveworkman.com/2010/html-5-forms-a-spammers-paradise/<p><a href="https://www.steveworkman.com/static/img/formspam.jpg"><img src="https://www.steveworkman.com/static/img/formspam.jpg" alt="HTML 5 form spam" title="Form spam" loading="lazy" /></a> Did you know, HTML 5, the spec that will be <a href="http://html5doctor.com/2022-or-when-will-html-5-be-ready/">completed in 2022</a>, but with some bits available now, will have a whole new set of form elements designed to make complex forms available natively from the browser. I've been to a few talks where Opera's <a href="http://www.brucelawson.co.uk/">Bruce Lawson</a> has demoed and talked about these upcoming features that have been implemented in the Opera browser. From an accessibility standpoint it looks great; no longer will screen readers have to rely on labels to infer the type of data to be entered into forms. From a developer's standpoint, you won't have to code javascript date pickers any more, nor have to rely on javascript for validation.</p>
<p>So, all of this makes it easier to enter data on the web, a great thing. I asked the question this morning, "who enters the most data on the internet?". The answer is spammers. It is generally thought that 90% of all e-mail sent is spam, and a quick glance at my blog's spam counter sees 7,300 fake comments caught compared to 56 real comments.</p>
<p>So, why will HTML 5 forms be such a problem? Well, at the moment, spammers use automated tools to crawl the internet, looking for forms to fill in to spread their advertising links or perform XSS attacks. To bypass most validation, the crawlers look for labeled form fields to fill in. Quite simply, HTML 5 forms will make this job easier.</p>
<p>Instead of labelling forms with "e-mail", there's now a specific input type <input type="email" /> which validate an e-mail address. Common anti-spam methods of adding a second e-mail field hidden to normal users will be ignored as there is a clear (and CSS visible) e-mail address field.</p>
<p>Forms validation may be useful for the normal user, but it's even more useful for the spammer. With limits of input fields now being contained in plain text in the input, it makes it trivial for bots to enter correct data.</p>
<p>So, what can be done about this? Well, I'm not sure. There are some anti-spam methods that will still work, for instance timing the entrance to the page and seeing how long it took to complete the form. Very short times are spam, short times are sent for moderation and normal times are approved. There's <a href="http://www.w3.org/TR/turingtest/">captcha, which is inaccessible</a> and then there's blacklisting, which hasn't worked for years.</p>
<p>If you have any theories, please share them here. If there's a solution or something the working group can do to make spam more difficult rather than easier, it should get into the spec sooner, rather than later.</p>
Tablet usability - the future can't come soon enough2010-01-20T00:00:00Zhttps://www.steveworkman.com/tablet-usability-the-future-can-t-come-soon-enough<p><a href="https://www.steveworkman.com/static/img/asus-eee-pc-t91-convertible-netbook-tablet.jpg"><img src="https://www.steveworkman.com/static/img/asus-eee-pc-t91-convertible-netbook-tablet.jpg" alt="ASUS eee tablet" title="asus-eee-pc-t91-convertible-netbook-tablet" loading="lazy" /></a>Last weekend I was sat on the tube (London underground to international readers), picadilly line to be exact, heading into central London. A young man got on and sat down opposite me. He got out a little ASUS netbook, turned it on and swivelled the lid to use it as a touch screen. "Awesome", I thought, "he's got one of those cool touch screen netbooks running Windows 7, I'd love one of those, it'd be so convenient".</p>
<p>I watched the man use the laptop for a while, tapping at the screen, using two fingers to scroll on a page and it looked ace; it looked simple. Soon, the experience turned sour.</p>
<p>I watched as the man pulled a stylus out from the side of the computer and starts to tap at the screen. I had thought styluses had been banned by international law since the introduction of the iPhone nearly two and a half years ago. Still, if there are some things that can't use the OS zoom function then maybe a stylus has to be used.</p>
<p>I then received an even greater shock.</p>
<p>I watched in amazement as the man lifted up the screen to try and use the keyboard. Upside down. A control + something command that was not present in the touch screen menu.</p>
<p>Naturally, as a usability practitioner, I was horrified but continued to watch the bloke struggle. It took five stabs and glances back at the screen to confirm the action was successful. By this time, the man looked thoroughly frustrated with his program's choice of shortcut. Soon after, he packed up his laptop and got off the train.</p>
<p>What appears to be the moral story, is that no matter how advance your OS is, the applications that you run can still scupper the experience, especially with tablets. There are two solutions to this problem:</p>
<p>1. The iPhone way - touch is the only interaction option. No legacy apps are allowed. It's an OS designed for touch and for touch only. 2. The full screen keyboard way - Windows 7 may have a good touch screen keyboard, but it isn't implemented in all apps (the iPhone way). You would need a true full-screen multi-touch keyboard, adaptable to different screen sizes, to make it function correctly.</p>
<p>Hopefully there's a third way, the Apple tablet way. We'll <a href="http://www.engadget.com/2010/01/18/its-on-apple-holding-january-27th-event-to-show-off-its-lates/">wait and see about that</a>...</p>
The Death of the Netbook2010-01-26T00:00:00Zhttps://www.steveworkman.com/2010/the-death-of-the-netbook/<p><a href="https://www.steveworkman.com/static/img/netbook-death-watch.jpg"><img src="https://www.steveworkman.com/static/img/netbook-death-watch.jpg" alt="Netbook death watch" title="Netbook Death watch" loading="lazy" /></a>I've never really understood the netbook craze. I can see the benefits of having a lightweight, low-power computer that performs 90% of the tasks you use a personal computer for; it just hasn't appealed to me, or my wallet.</p>
<p>I can understand that it's a very cheap way to get online (even though they are double US$ the price in the UK), but I've been perfectly happy with a 13" Macbook I bought 4 years ago. I haven't seen a purpose to re-spend the money that I invested all those years ago on a laptop that can do half as much.</p>
<p>Other things worry me about netbooks though, they're a stop-gap. Since the iPhone, the dream has been to have a fully-fledged PC available in your hand, that works quickly and has a long battery life. Netbooks bridged a gap by providing a long(er) battery life and smaller screen, but have left it to the big boys to sort out the proper way of interacting with these smaller devices. See my post on <a href="https://www.steveworkman.com/user-interfaces/2010/tablet-usability-the-future-cant-come-soon-enough/">netbook touch screen</a> usability for more on how infuriating it gets.</p>
<p>So, in the next two years, netbooks will die completely. They will be replaced by what these users have wanted all along: a tablet PC with a good touch screen interface. For the first year, pretenders to the throne may have to carry a small bluetooth keyboard whilst the niggles are worked out, then the revolution will come, prices will drop and all those people who shelled out their hard-earned money will happily spend again to get a tablet.</p>
<p>If it is not beyond my power, I'd put the whole netbook format on deathwatch. Its death will be prolonged by price, but it will soon fall. The netbook's time will come, and we'll be a whole lot better off with its sucessor.</p>
I could really do with an iPad right now2010-02-07T00:00:00Zhttps://www.steveworkman.com/2010/i-could-really-do-with-an-ipad-right-now/<p>I've found my use case for an <a href="https://www.apple.com/ipad">iPad</a>: working without wi-fi. <a href="https://www.steveworkman.com/static/img/gallery-software-ibooks-20100127.jpg"><img src="https://www.steveworkman.com/static/img/gallery-software-ibooks-20100127.jpg" alt="iPad" title="gallery-software-ibooks-20100127" loading="lazy" /></a> I'm sat on my sofa watching the superbowl and my Internet connection is down. I'm left trying to write blog posts on my iPhone, which, by the speed of my typing, is not going to be fun. At this point, I'd like an iPad. I'd like a laptop which isn't quite a laptop, it just does what I need it to do. Thanks to lots of apps, the only thing I couldn't do on an iPad would be code, and I'm sure that won't be far away. All I want to do is write a blog post from the comfort of my sofa, without getting cramp in my hands or the battery running out.</p>
<p>The wi-fi only version is an interesting prospect, though wouldn't solve my current internetless problem unless I could tether the iPhone to it. I wouldn't be against the 3g version, though the data would have to be allowed to be shared with my current plan, or I simply couldn't justify the expense.</p>
<p>I'd also love it if it was intelligent enough to use the home sharing feature that iTunes 9 introduced. Music over wi-fi seems like a no brainer to me.</p>
<p>Well, will I get one in April? Maybe. If the price isn't as silly a conversion as Macs are, it may be worth a look. Otherwise, it looks like i'll make do with my old laptop</p>
HTML5 in your blog2010-02-16T00:00:00Zhttps://www.steveworkman.com/2010/html5-in-your-blog/<p><em>This is the second part of a series on the construction of my blog. In this post, I'll be focusing on the underlying HTML5 markup.</em></p>
<p>When I started making this blog, I had a decision about what language to use underneath. The choices were simple: HTML4, XHTML 1.0, or HTML5. The first two options represent the old school of HTML, both based on standards from 1999, with tags which have worked for years and are well understood and supported across all browsers. What these standards fall down on are their semantic tags.</p>
<p>Since table layouts disappeared, site content has been divided by large blocks, created using </p><div> tags. Whilst having a single multi-purpose tag has been very useful, this tag has become littered around websites, trying to find ways to semantically structure their data.<p></p>
<p><strong>HTML5 Tags</strong></p>
<p>HTML5 brings a new set of structural tags for designers and developers to use in their sites. These tags are:</p>
<ul>
<li><code><header></code></li>
<li><code><nav></code></li>
<li><code><section></code></li>
<li><code><article></code></li>
<li><code><aside></code></li>
<li><code><footer></code></li>
<li><code><figure></code></li>
</ul>
<p>These semantic elements can all be used in place of </p><div> tags, as they are all "block-level" elements. For an example of how they can be used, let's take a look at the front page of my blog.<p></p>
<p><a href="https://www.steveworkman.com/static/img/layout.png"><img src="https://www.steveworkman.com/static/img/layout.png" alt="Steve Workman blog layout" title="Blog layout" loading="lazy" /></a></p>
<p>It all looks like the blog has a firm structure, that could quite easily be </p><div> tags. Look closer and you'll see that there isn't a single <div> tag defining general structure. Only the <article> and <section> tags have been repeated at any point in the page. Take a look at this next screenshot, without the content visible:<p></p>
<p><a href="https://www.steveworkman.com/static/img/layout-bare.png"><img src="https://www.steveworkman.com/static/img/layout-bare.png" alt="Steve Workman's blog structure" title="Blog structure" loading="lazy" /></a>The layout is very simple, making full use of the HTML5 tags. The advantages here are clear:</p>
<ul>
<li>For screen readers, users can skip straight past the <code><header></code> and <code><nav></code>, and locate <code><articles></code> simply by using keyboard shortcuts or having screen readers jump to articles</li>
<li>For search engines, all <code><articles></code> are marked up accordingly, making it easier to determine what the actual content of the site is</li>
<li>The same goes for the <code><nav></code>, providing hard links for the main parts of the site.</li>
</ul>
<p>There's other benefits too. This blog uses <a href="http://www.w3.org/WAI/intro/aria">WAI-ARIA</a> to identify the role of each of the sections. Using this, the content section is marked up differently to the toolbox section where my Twitter and <a href="http://last.fm/">Last.fm</a> links are displayed.</p>
<p>It's a similar story on a single article page. Making use of the new tags makes reading an article easier and more clearly defined:</p>
<p><a href="https://www.steveworkman.com/static/img/layout3.png"><img src="https://www.steveworkman.com/static/img/layout3.png" alt="Steve Workman's blog single page layout" title="Single page layout" loading="lazy" /></a>The single page template makes use of the <code><aside></code> tag to mark up the sidebar as inconsequential information.</p>
<p><strong>Browser issues</strong></p>
<p>As usual, IE has problems rendering these new tags. Thankfully, Remmy Sharp has an very <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">useful bit of JavaScript that makes everything work nicely</a>. IE then acts just like the other browsers. Problem solved.</p>
<p><strong>HTML5 Video</strong></p>
<p>Structural tags are one of the only items currently implemented in most modern web browsers. Other technologies such as web databases and drag & drop are still a long way off. What isn't a long way off is HTML5's <code><video></code> tag - native video in the browser. Youtube and Vimeo are already implementing this so you can too. It's simple enough, just encode your videos in H.264 (for webkit browsers) and Ogg (for Firefox and Opera) and you're good to go. If you want to know a bit more about the H.264/Ogg debate, read <a href="http://www.brucelawson.co.uk/2010/what-are-the-business-benefits-of-html5-video/">Bruce Lawson's column</a>.</p>
<p>There are lots more benefits to HTML5 that I'll show as I add them to the blog (like the <code><mark></code> element!).</p>
<p>I hope you've found this useful. The accessibility benefits of HTML5 are excellent, and I hope you'll be upgrading your blog soon.</p>
</section></article></div></div></div></div>Microsoft's Design Evolution2010-03-01T00:00:00Zhttps://www.steveworkman.com/microsoft-s-design-evolution<p><a href="https://www.steveworkman.com/static/img/2010-02-15win7phonepr-4-1266243856.jpg"><img src="https://www.steveworkman.com/static/img/2010-02-15win7phonepr-4-1266243856.jpg" alt="Windows 7 Series Phone UI" title="Windows 7 Series Phone UI" loading="lazy" /></a></p>
<p><em>This is an opinion piece about Microsoft's Windows 7 Series phones. The opinions are my own and not that of my employer.</em></p>
<p>I remember the 'good old days'. Back in 2004 (at uni) I tried to create a Windows CE program for a little mobile device. My friends and I spent months trying to get it to work (at one point resorting to Java, quickly realising our mistake), and in the end all we could produce was a list of menu items and a few forms. The overall user experience (UX) was horrible and it was slow and unintuitive. That was the standard for Microsoft products of the time.</p>
<p>The turnaround began in 2005 when MS hired their new head if UX for Office, Jenny Lam. Jenny revolutionised the tired <a href="http://office.microsoft.com/">Office UI</a> with the ribbon, and hence inspired the Windows 7 UI. A few years later, the Xbox team developed the <a href="http://www.google.com/url?q=http://www.xbox.com/en-GB/live/NXE/&ei=vu2IS_ibD47u0wSslrnWCw&sa=X&oi=nshc&resnum=1&ct=result&cd=1&ved=0CAcQzgQoAA&usg=AFQjCNFB_WWXFGZoxsAf9kXLLNY7GjIwAA">NXE</a>, based on ideas from the Windows Vista media centre interface, which was leaps and bounds better than the XP MCE UI. This "text focused" design, using Jenny's <a href="http://en.wikipedia.org/wiki/Segoe">Segoe UI</a> typeface found it's way into he <a href="http://en.wikipedia.org/wiki/Zune">Zune</a>, and came to fruition in the <a href="http://en.wikipedia.org/wiki/Zune_HD">Zune HD</a>. From this, we get the next evolution, the 7 series phone.</p>
<p>With such a clear evolutionary path, it's hard to see why so many people are surprised by the new phone OS. When the Zune HD launched, people cried out for this UX to be made into a phone. Now that wish has been granted and Apple should be scared.</p>
<p>The <a href="http://www.windowsphone7series.com/">7 series UI</a> is everything that the iPhone is not. It's got a home screen that displays useful information, with integration into multiple web services out of the box. It's got cloud-enabled apps, not relying on purpose built sites but working with service leaders. It's got a calendar that's useful, and a UI paradigm that is consistent, though, as with the ribbon toolbar, will take some getting used to.</p>
<p>And that's the thing with MS's UX strategy. They are now prepared to go out on a limb to try new stuff, even if it may require a learning curve.</p>
<p>We had a question go round the office a few days ago: name a MS app that was rubbish at first, and is now a market leader. We named pretty much every product that MS make (except IE). With 7 series phone, MS have completed their line up. Far from being a dead company to the consumer, Microsoft are still the king of the hill.</p>
<p>Where do MS go from here? The evolution will continue, and although it will seem slow, with product releases every 2-3 years, innovation will continue to flourish. MS will never be a trend setter, and will mostly go their own way, but their way is rarely wrong. I predict that MS still have their best work within, and you would be a fool to ignore them.</p>
Accessibility gone mad2010-03-02T00:00:00Zhttps://www.steveworkman.com/2010/accessibility-gone-mad/<p>Just a quick post: a colleague of mine sent me this from Facebook CNet.</p>
<p><a href="https://www.steveworkman.com/static/img/login_too_far.png"><img src="https://www.steveworkman.com/static/img/login_too_far.png" alt="CNet login validation: a login too far" title="login_too_far" loading="lazy" /></a></p>
<p>Have usability and accessibility gone too far?</p>
O2 Broadband's Efficient Packaging2010-03-04T00:00:00Zhttps://www.steveworkman.com/o2-broadband-s-efficient-packaging<p>I've signed up for <a href="https://www.o2broadband.o2.co.uk/">O2 broadband</a> (again) this week, and I've been quite impressed with their service for setting things up. For every step you get an e-mail, then a text, which is great and keeps me up to date with how everything is going.</p>
<p>What's better than that is the new router that they've sent me, other than that it arrived before the text saying it was on its way. The packaging on it is really quite clever and space efficient. Here's the package I got:</p>
<p><a href="https://www.steveworkman.com/static/img/Image0040.jpg"><img src="https://www.steveworkman.com/static/img/Image0040.jpg" alt="O2 Broadband box package" title="O2 Broadband box package" loading="lazy" /></a> It's just a box with shipping labels right? The router will be in another box inside it? Wrong.</p>
<p><a href="https://www.steveworkman.com/static/img/Image0039.jpg"><img src="https://www.steveworkman.com/static/img/Image0039.jpg" alt="O2 Box in a box" title="O2 Box in a box" loading="lazy" /></a> It seems that the outer box is the whole box. Everything is tightly packed and doesn't move around. The best thing though is under the lid:</p>
<p><a href="https://www.steveworkman.com/static/img/Image0042.jpg"><img src="https://www.steveworkman.com/static/img/Image0042.jpg" alt="Instructions under the lid" title="Instructions under the lid" loading="lazy" /></a> A list of package contents, quick steps on how to get set up and a sticker with the wireless information. It's clear, it's informative and it's all I needed from the box. There's only one sheet of cardboard, only one panel is written on to save printing and it's small enough to fit through most postboxes. A definite win for packaging and the environment.</p>
<p>Competitors take note.</p>
Post drought = busy2010-03-23T00:00:00Zhttps://www.steveworkman.com/2010/post-drought-busy/<p>You know those days, the ones that turn into weeks, and when the weeks can quickly turn into months you start thinking I really should have stopped the rot when it was weeks (and before that, days). That feeling, is what I have now. Over the past few weeks (actually, nearly a month), I've been rushing around trying to get projects sorted, doing extra projects and starting new ones. Therefore, I haven't had a chance to post. My bad. <a href="https://www.steveworkman.com/static/img/writers-block.jpg"><img src="https://www.steveworkman.com/static/img/writers-block.jpg" alt="Steve has writer's block" title="writers-block" loading="lazy" /></a> Good news is, I've found 10 minutes to write, so, here's my last month: 1. I've been asked to write articles for <a href="http://www.uxmag.com/">UX Magazine</a> from an industry perspective. I'll be posting once every few months, with my first one due in a week or two. I'm really pleased to be able to write for these guys who are just trying to spread the word of UX 2. I'm at a new client, doing standards-based SharePoint work. I know, those two words don't go well together, but just go with me on this one. 3. I'm finishing an iPhone demo too. This could be really big so fingers crossed 4. I'm going to buy an <a href="https://www.steveworkman.com/offtopic/ramblings/2010/i-could-really-do-with-an-ipad-right-now/">iPad</a>. I had previously said that <a href="https://www.steveworkman.com/offtopic/ramblings/2009/apple-product-roadmap-2010-2011-prediction/">I won't buy one til the 2nd generation</a>, and, like with my 1G iPod Touch, I'll probably regret it in the end, but I want one dammit! 5. Finally, if you didn't know already, I'm now engaged to my girlfriend/now fiancee Emily. We had a very good party last weekend and even 8 days later are still not fully recovered</p>
<p>Here's a promise that I'll have an on-topic post for next week.</p>
HTML5 Coming of Age2010-03-31T00:00:00Zhttps://www.steveworkman.com/2010/html5-coming-of-age/<p><a href="https://www.steveworkman.com/static/img/2917_large.jpg"><img src="https://www.steveworkman.com/static/img/2917_large.jpg" alt="iPad flaming chariot" title="iPad flaming chariot" loading="lazy" /></a></p>
<p>If technology is driven forward by demand and hype, Apple is at the helm of a HTML5 labelled chariot rampaging through the streets. The <a href="http://www.apple.com/ipad">iPad</a> is coming and high-end newspaper and magazine publications are falling over themselves to change their sites to be used with Apple's new flagship device.</p>
<p>The amount of power Apple holds is amazing. Forcing the likes of News Corp to <a href="http://www.engadget.com/2010/03/18/npr-and-wsj-building-flash-free-pages-for-ipad-apple-quietly/">change the way their content is published</a> is a task that would normally be impossible for any external company. Even if you were coming at it from the inside, you would never have a hope of dropping Flash video players. There simply isn't the business case to change something that so many man hours will have been put into, and backwards-compatability issues crop up all over the place. Yet with the onset of this new device, predicted to sell between 8 and 10 million units this year, companies have had to look to new, Apple endorsed, technologies.</p>
<p>This change, away from Flash, has forced the issue of HTML5 video. YouTube has HTML5 video mode, as does Vimeo, and this will soon be supported by the upcoming <a href="http://ie.microsoft.com/testdrive/">IE9</a>. All of these major sites are now raising awareness of this new technology to people who wouldn't normally know about it i.e. your manager AKA the person with the budget. Now they're aware of the benefits of HTML5, they want to see what else it can do. If you are ever asked this question, show them <a href="http://html5demos.com/">HTML5demos.com</a> or the IE9 test drive page. If they've got a more detailed question, go to the <a href="http://html5doctor.com/">HTML5 Doctor</a> or just twitter <a href="http://twitter.com/brucel">@brucel</a>, Opera's web evangelist.</p>
<p>With so much drive towards HTML5 at the moment, you can't get away from it. With Apple as the driving force, the train will be unstoppable, though it will still be many years until you can use it in all situations; probably around the time we ditch Windows XP for good.</p>
Dangers of an open mobile OS2010-04-08T00:00:00Zhttps://www.steveworkman.com/2010/dangers-of-an-open-mobile-os/<p><a href="https://www.steveworkman.com/static/img/HTC-HD2-b.jpg"><img src="https://www.steveworkman.com/static/img/HTC-HD2-b.jpg" alt="" title="HTC HD2" loading="lazy" /></a> A friend of mine recently bought a HTC HD2, the extra large touch screen Windows Mobile 6.5 phone. He loves it, it's great for movies and the mobile web, thanks to Opera and other apps built in to the Sense UI.</p>
<p>A friend of his gave him a memory card with a load of programs on it. Whilst on the tube, my friend went through the list and selected a few to install, things like extra dictionaries, radios and the like. By the time he had reached his stop, he couldn't make phone calls directly from the contacts list, and by the time he was at his front door, text in SMS messages was ten times larger than normal.</p>
<p>This is an issue for "open" operating systems, and especially true for constrained mobile OSs that rely on a small number of core classes. These can have fundamental settings overridden by apps which appear quite innocent at first, but have ramifications across the device if programmed improperly. That's just the start; all sorts of things can go wrong including the potential for malicious apps to quietly access all of your data and e-mail it to anyone it wishes.</p>
<p>OS makers have now learnt their lessons, sandboxing apps and allowing for limited communication between services using registered links and restricted APIs. This 'closed' solution hasn't limited developers as many expected, most have simply found ways around the solution, often coming up with innovative and novel methods, working with the strengths of the device instead of against each other.</p>
<p>My friend has learnt his lesson too. He's reset the phone to factory settings and is building the application library up one at a time from trusted sources. He'll know better next time.</p>
Facebook Logins with Facebook Connect2010-04-13T00:00:00Zhttps://www.steveworkman.com/2010/facebook-logins-with-facebook-connect/<p><a href="https://www.steveworkman.com/static/img/connectgraphic.jpg"><img src="https://www.steveworkman.com/static/img/connectgraphic.jpg" alt="Facebook Connect" title="Facebook Connnect" loading="lazy" /></a>This is a follow-up to one of my most popular posts, "<a href="https://www.steveworkman.com/projects/use/2007/getting-a-facebook-login-working-on-your-application/">Getting a Facebook Login working with your application</a>". That was written in 2007, and is quite out of date.</p>
<p><em>This entire post was inspired by a reader who e-mailed me asking for help. I'm more than happy to help someone who is learning. It makes the whole thing worthwhile.</em></p>
<p>In May 2008, Facebook <a href="http://developers.facebook.com/news.php?blog=1&story=108">announced "Facebook Connect"</a>, a Trusted authentication method so that user's profiles can be used on other sites. My 2007 article pretty much does what Facebook Connect does for you now, but Facebook have made it much easier. To get started, take a look at the <a href="http://developers.facebook.com/connect.php">Facebook Connect web pages</a> and more specifically, the <a href="http://wiki.developers.facebook.com/index.php/Connect/Authentication_and_Authorization">single sign-on guide</a>.</p>
<p>A few things of note:</p>
<ol>
<li>This does not replace your current login system. You still need a user database</li>
<li>People still need to click "connect" and you cannot use general session/cookie information to simply log in without interaction.</li>
</ol>
<p>Facebook claims it gives you 15% more registrations, so what are you waiting for, <a href="http://developers.facebook.com/setup.php">get started!</a></p>
"Click here" for basic SEO2010-04-19T00:00:00Zhttps://www.steveworkman.com/click-here-for-basic-seo<p>In the office on Friday, I was talking about web site content, more specifically about links and SEO. I discussed the most basic element of SEO, link text. The link text contains the keywords that Google, Bing, Yahoo et al use to match your search query to their web site. The more links to a page with the same keywords, the higher up the ranks it goes.</p>
<p>So, sounds pretty obvious that you should have searchable keywords in your links. But what do most people do? Well, you mostly see something like "Click here to see..." which to a search engine explains nothing about the target content. If you search Google for "<a href="http://www.google.co.uk/search?hl=en&source=hp&q=click+here&meta=&aq=f&aqi=g10&aql=&oq=&gs_rfai=">click here</a>", you get 872,000,000 results, most of which point to Adobe Reader!</p>
<p><a href="https://www.steveworkman.com/static/img/Screen-shot-2010-04-18-at-09.42.51.png"><img src="https://www.steveworkman.com/static/img/Screen-shot-2010-04-18-at-09.42.51.png" alt="Click here on Google" title="Click here on Google" loading="lazy" /></a></p>
<p>So, a very simple tip: <strong>Don't use "Click here" in your link text</strong>.</p>
<p>If your link text matches the content of the <code><h1></code> or <code><h2></code> tag on the target page, you also get a rank boost as these headings telegraph that the content matches the link, making it a trusted link, rather than just spam or "<a href="http://en.wikipedia.org/wiki/Google_bomb">Google bombing</a>".</p>
<p>It's hard to underestimate how important SEO is for a web site. With billions of pages now floating around the Internet, if you don't appear on the first few pages of Google for your targeted search, for all intents and purposes, you don't exist.</p>
Executive Summary - Flash vs HTML52010-05-01T00:00:00Zhttps://www.steveworkman.com/2010/executive-summary-flash-vs-html5/<p><a href="https://www.steveworkman.com/static/img/box_flash_cs5_150x150.jpg"><img src="https://www.steveworkman.com/static/img/box_flash_cs5_150x150.jpg" alt="Flash CS5 box" title="Flash CS5 box" loading="lazy" /></a>So, infamously, the iPhone OS doesn’t support Flash, encouraging its users to use the advantages of the webkit-based Safari to overcome any challenges that a lack of Flash can present. Last year, <a href="http://eon.businesswire.com/portal/site/eon/permalink/?ndmViewId=news_view&newsId=20091005006358&newsLang=en">Adobe announced that in Flash CS5, you’d be able to convert it to run on the iPhone</a>. In April, with a revised iPhone developer agreement, <a href="http://www.macrumors.com/2010/04/08/apple-blocks-adobes-flash-to-iphone-compiler-in-latest-sdk-agreement/">Apple put the brakes on</a>, saying only apps written in one of three languages would be accepted on the App store. Adobe’s solution would compile directly to the CPU bytecode, hence being illegal.</p>
<p>Adobe weren’t too pleased about this, yet launched the product anyway, hoping Apple would change its mind. Since then, <a href="http://www.apple.com/hotnews/thoughts-on-flash/">Steve Jobs wrote an open letter</a>, explaining their position, claiming six points:</p>
<ol>
<li>Flash is closed source (like the iPhone), HTML5 is open</li>
<li>Flash is the number one cause of crashes on OS X</li>
<li>Flash is not designed for touch</li>
<li>Need to maintain app quality on the store</li>
<li>HTML5 can do everything that Flash can</li>
<li>Battery life suffers</li>
</ol>
<p>In the letter, there’s a bit of pretending that the iPhone is the only phone in the market, but otherwise, in my opinion, it’s accurate.</p>
<p><a href="http://www.engadget.com/2010/04/29/adobes-ceo-jobs-flash-letter-is-a-smokescreen-for-cumberso/">Adobe’s response</a> was somewhat deluded; laughing that Flash wasn’t an open platform (someone should break the news to Adobe’s CEO) and saying that Flash 10.1 will ship to mobile devices later this year, focusing on multi-platform development. Adobe’s CEO also points that Apple’s developer restrictions are cumbersome and have nothing to do with the technology.</p>
<p>Even worse for Adobe, Microsoft has weighed in, saying <a href="http://www.engadget.com/2010/04/30/microsoft-weighs-in-the-future-of-the-web-is-html5/">HTML5 is the future of the web</a>.</p>
<p>So, who’s on the right side? I believe that Apple have got it right this time, even implementing a half-finished specification is better than a platform that Apple have no control over, especially when the user experience is so important for the iPhone’s success. HTML5 genuinely can do everything Flash can, and do it all on hardware. It goes beyond Flash with geo-location and JavaScript access to more hardware features like the accelerometer and camera.</p>
<p>Personally, Adobe needs a re-think of their strategy. Flash enjoyed enormous success as a video player (thanks to YouTube) but they should have seen HTML5 coming. It’s been on the cards since the first iPhone in 2007 and Adobe has done through an entire release cycle (CS5) with little though for HTML5. If they’re smart, which they are, Flash CS6 will be able to create SVG graphics and Canvas apps using web databases and fonts, having Flash fallbacks for non-HTML5 capable browsers. Dreamweaver will have HTML5 structure tags available and Illustrator and Photoshop will do SVG too.</p>
<p>If Adobe don’t keep up with developers, the devs will simply find other tools to use. Adobe can avoid this, and it’s in their hands.</p>
Why tablets aren't working2010-05-02T00:00:00Zhttps://www.steveworkman.com/why-tablets-aren-t-working<p><a href="https://www.steveworkman.com/static/img/ms-courier.jpg"><img src="https://www.steveworkman.com/static/img/ms-courier.jpg" alt="Microsoft Courier tablet" title="Microsoft Courier tablet" loading="lazy" /></a>It seems like making a tablet computer that is efficient, usable and cost-effective, can be quite a difficult proposition. The <a href="https://thejoojoo.com/">Joo Joo</a>, a tablet that everyone <a href="http://www.engadget.com/2010/04/05/fusion-garage-joojoo-review/">wants to love</a> is getting none. The <a href="http://gizmodo.com/5527442/microsoft-cancels-innovative-courier-tablet-project">Courier will never see daylight</a>. The <a href="http://www.engadget.com/2010/04/30/asus-ceo-netbooks-will-outsell-tablets-eee-pad-will-run-micro/">EeePad</a> is delayed and most surprisingly, the Microsoft lauded <a href="http://techcrunch.com/2010/04/29/hewlett-packard-to-kill-windows-7-tablet-project/">HP Slate has been canned</a>.</p>
<p>Only the <a href="http://www.apple.com/ipad">iPad</a> survives, and you still can’t get one outside of the states. Apple must be delighted that its competitors are falling by the wayside, giving it the whole market to itself.</p>
<p>Why have the others failed? The culprit seems to be a combination of OS, battery life and performance. HP claimed that the Slate, using Windows 7, was not suitable for touch. Its combination with a comparatively power hungry Atom processor meant battery life suffered (3-5 hours reportedly). The Joo Joo suffers from new OS syndrome. Like Android, the first few iterations show promise but stability is lacking and it needs a lot more work. These issues can be resolved, but it needs time and investment.</p>
<p>The Courier is an interesting proposition. Never going past a rendered concept video, its UX and ideas will hopefully make their way into larger screen Windows Mobile 7 implementations.</p>
<p>I believe that this is how tablets should work in real life: a mobile OS on a larger device. They are designed for touch, are low power and can do some remarkable things.</p>
<p>I’m going to be excited when the first Android and WM7 tablets arrive. If, as hoped, the Slate becomes a Web OS device, the market, completely dominated by the iPad, will have competition. The tablet isn’t dead; it’s just been approached in the wrong way. Apple is leading the way as usual, and everyone is playing catch up. They will get there eventually, as they did in the wake of the iPhone. I’m looking forward to the competition.</p>
Debugging print stylesheets2010-05-13T00:00:00Zhttps://www.steveworkman.com/2010/debugging-print-stylesheets/<p>Simple premise: web sites are designed for the screen, they are meant to be viewed through a computer and that’s about it. Still, most people want to print out a web site at some point and your design probably won’t look very good. Print media strips out all backgrounds and forces a page width so large fixed width sites simply won’t print all their detail.</p>
<p>The simple answer to this is print stylesheets using the media=”print” or @media print options. This is <a href="http://www.alistapart.com/articles/goingtoprint/">covered</a> in <a href="http://www.cssnewbie.com/7-tips-print-style-sheets/">great</a> <a href="http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/">detail</a> all over the web, and so the basics of print stylesheets won’t be told here. What I’m going to cover is how best to debug those print styles so that you can quickly edit and get a good print stylesheet together.</p>
<h3 id="why-can%E2%80%99t-i-see-you!" tabindex="-1">Why can’t I see you!</h3>
<p>My number one issue with debugging print styles is having to use print preview to show what the effects of a print stylesheet will look like. It can take a long time for older browsers (IE6) to render print previews and it’s just not necessary.</p>
<p>Simple remedy: when debugging, make your print stylesheets media=”all” to see live previews of what the effects are.</p>
<p>This isn’t ideal, especially if you’re debugging on a live site (though if you are, you really should get a development environment). So, thankfully, there is an alternative, in the form of the <a href="https://addons.mozilla.org/addon/60">Firefox Web Developer toolbar</a>.</p>
<p><a href="https://www.steveworkman.com/static/img/webdevprintstyles.jpg"><img src="https://www.steveworkman.com/static/img/webdevprintstyles.jpg" alt="Using the web developer toolbar to debug print stylesheets" title="Web developer in print styles" loading="lazy" /></a></p>
<p>In the image above, I’m using the web developer toolbar to display my print styles, reducing my web page to what print preview will see. You should also tick the “persist features” option or you’ll have to keep turning the print stylesheet on each time you visit the page.</p>
<p>This technique has additional benefits, in that <a href="http://www.getfirebug.com/">Firebug</a>, the web developer’s best friend, picks up the print styles as if they were the only ones available. This allows you to experiment with the stylesheet on the fly, speeding up development time.</p>
<h3 id="what-about-ie%3F" tabindex="-1">What about IE?</h3>
<p>Due to the unique way that most developers are funded, you will still have to deal with Internet Explorer. IE 8 is pretty good at print styles, using the “fit to width” option by default, which gets around most of the awkward layout problems. However, IE 6 doesn’t have this facility, so layouts often go wrong. Here’s a few workarounds for common problems:</p>
<h4 id="pre-requisite" tabindex="-1">Pre-requisite</h4>
<p>Make yourself an IE 6 only stylesheet. In the spirit of graceful degradation, use conditional comments to target the offending browser with its own stylesheet. This allows you to target IE6’s inflexible width issue without damaging the other stylesheets. Put something like this in your site:</p>
<p>Make all your IE 6 specific changes in this file. As with the first technique, you may want to change the media to “all” to see what happens without using print preview.</p>
<h4 id="my-content-goes-off-the-page-(to-the-right-generally)-and-doesn%E2%80%99t-come-back" tabindex="-1">My content goes off the page (to the right generally) and doesn’t come back</h4>
<p>With a print page in portrait mode, you only get about 70% of the screen space. In this case, content simply overflows off the page and can’t be retrieved. Instructing your users to print in portrait mode alleviates this a little, but isn’t ideal for most clients.</p>
<p>If you have a fixed width layout, start by changing all of these pixel values into percentages. IE printing responds quite well to this in both landscape and portrait. If this doesn’t have the desired effect, consider removing and floated columns that you may have, allowing the sections to naturally flow beneath each other. Whilst this isn’t ideal, it can prevent content loss.</p>
<h4 id="there%E2%80%99s-a-blank-page-in-my-printing-%2F-nothing-appears-when-i-go-to-print-preview" tabindex="-1">There’s a blank page in my printing / nothing appears when I go to print preview</h4>
<p>This is an odd one. This can be caused by improperly clearing floated elements, so check those out. A good way to debug this is to turn off any custom styles that you’ve added (i.e. make sure your main stylesheet is set to screen, or comment it out) and see if the content prints. If it does, build your stylesheet back up until you find the problem.</p>
<p>If you still don’t see anything, it’s likely there is an in-line style causing the issue. SharePoint has tendency to add “height: 100%” to a few elements, which to most browsers means absolutely nothing, but IE6 takes seriously. Set that to “height: auto;” and you should get all of your content back again.</p>
<h4 id="i%E2%80%99ve-got-some-vml-(ie%E2%80%99s-canvas-implementation)-that-i-need-to-hide-but-can%E2%80%99t" tabindex="-1">I’ve got some VML (IE’s Canvas implementation) that I need to hide but can’t</h4>
<p>Sad news here, I don’t believe you can hide it in print stylesheets. If anyone knows how to do this, please let me know.</p>
<h3 id="don%E2%80%99t-forget%3A-printing-is-about-the-content" tabindex="-1">Don’t forget: printing is about the content</h3>
<p>A printed page doesn’t have to look beautiful, with rounded corner borders or large images; the content should be laid out simply and should flow correctly. Use these techniques to get that right and all your print styling headaches will go away.</p>
A Week in Web - May 17-21st2010-05-20T00:00:00Zhttps://www.steveworkman.com/2010/a-week-in-web-may-17-21st/<p><a href="https://www.steveworkman.com/static/img/weekinweb170510.png"><img src="https://www.steveworkman.com/static/img/weekinweb170510.png" alt="A week in the web - May 17-21" title="weekinweb170510" loading="lazy" /></a></p>
<p>This was very good week to be a web developer, some big announcements: <a href="http://www.webmproject.org/">Google announces WebM</a> - a collaborative project with Mozilla, <a href="http://windowsteamblog.com/windows/b/bloggingwindows/archive/2010/05/19/another-follow-up-on-html5-video-in-ie9.aspx">Microsoft</a> and <a href="http://labs.opera.com/news/2010/05/19/">Opera</a> all announcing that a new royalty-free HTML 5 <video> format has been created using the VP8 codec. Apple haven't said anything thus far but you can guarantee they'll say something soon.</video></p>
<p><a href="http://blog.typekit.com/2010/05/19/typekit-and-google/">TypeKit and Google</a> have got together to make the <a href="https://fonts.google.com/">Web Fonts API</a> including a modified version of TypeKit's WebFont loader. The fontsquirrel has this <a href="http://www.fontsquirrel.com/webfont_comparison/">comparison of the fonts</a> used by all three loaders.</p>
<p><a href="http://futureofwebdesign.com/">Future of Web Design</a> and <a href="http://www.uxlondon.com/">UX London</a> happened. There are video passes available and lots of people will be sharing their slides. Check out the presenters' twitter feeds for more information. <a href="http://www.css3.info/box-shadow-back-on-the-menu-and-other-updates/">Box-shadow may make its way back into CSS3</a> - as reported by <a href="http://css3.info/">CSS3.info</a></p>
<p>Oh, and my server got hacked, leading to a wasted evening of clearing out and removing attack points.</p>
CSS3 Bookshelf2010-05-31T00:00:00Zhttps://www.steveworkman.com/2010/css3-bookshelf/<p>Using CSS3 and a little JavaScript, I've created a bookshelf for your blog. For a demo, go to the <a href="https://www.steveworkman.com/bookshelf">CSS3 bookshelf</a>, for some more information on how it was made, read on.</p>
<p><strong>Inception</strong></p>
<p>A few weeks ago, <a href="http://www.peoplethinking.co.uk/">Nic Price</a> (<a href="http://twitter.com/nicprice">@nicprice</a>) and I were talking about blogs and taking a picture of his bookshelf to show what books he's found helpful over the years. After a little consideration, and watching the <a href="http://www.satine.org/archives/2009/07/11/snow-stack-is-here/">CSS 3D transform demo (snow stack)</a>, I thought that this is a perfect candidate for some CSS trickery.</p>
<p><strong>The sketch</strong></p>
<p>One sunny morning, I drew this:</p>
<p><a href="https://www.steveworkman.com/static/img/bookshelf-sketch.jpg"><img src="https://www.steveworkman.com/static/img/bookshelf-sketch.jpg" alt="CSS3 bookshelf sketch" title="CSS3 bookshelf sketch" loading="lazy" /></a></p>
<p>The concept is simple:</p>
<ul>
<li>a definition list of title and description.</li>
<li>Style and transform thes to look like books on a shelf</li>
<li>CSS animations on hover to pull the book slightly out of the shelf</li>
<li>Move the book into the centre on click/touch, displaying the definition underneath</li>
<li>Use as many CSS3 techniques as possible</li>
</ul>
<p><strong>Implementation</strong></p>
<p>Starting with the definition list, I set out the widths and heights required for each of the books. Initially, only the spine of the book was showing, but that didn't look as good as a small gap. Each element is positioned using <a href="http://css-tricks.com/absolute-positioning-inside-relative-positioning/">relative-absolute positioning</a>, allowing for simple movements using the left property to center each book in the screen, instead of lots of calculations when using translateX. So, pretty standard stuff to get the books in line.</p>
<p><strong>Book Styles</strong></p>
<p>Each book has a css class associated with it. This allows for title position customisation and different backgrounds, widths and heights. Each book makes use of <a href="http://www.css3.info/preview/multiple-backgrounds/">CSS3 Multiple backgrounds</a>, allowing for different images between the book spine and the front cover. Whilst this can be done in one image with photoshop, I decided not to (potentially, the spine of the book can be removed).</p>
<p><strong>Book titles</strong></p>
<p>The title of each book needs to be rotated to read down the spine. Optionally, I could have put the titles into the background elements, making them more like the actual books. Unfortunately, I couldn't find good images of the spines on the internet, and there's more opportunity for <a href="http://webkit.org/blog/130/css-transforms/">CSS3 transforming</a> text. So, using the -vendor-transform property, I rotated the text 90 degrees:</p>
<p><code>-webkit-transform: rotate(90deg); /\* Rotate book title 90 degrees \*/</code></p>
<p>However, this rotates the whole element, so a tag has to be used to target only the text. In the example there's a few other properties to make the text line up properly, and on some books it's overridden to allow for longer or shorter titles. In the end, it looks like this:</p>
<pre><code>dl.bookshelf dt span {
-webkit-transform: rotate(90deg); /\* Rotate book title 90 degrees \*/
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
display: block;
position: relative;
width: 300px; /\* width is height of book \*/
top:150px;
right: 130px;
}
</code></pre>
<p><strong>Animations</strong></p>
<p>On hover (or focus) the book pulls itself out from the shelf and tilts slightly, adding some box shadow to give it a 3D look. This is in two parts, defining what elements will transition on the element, and then changing the values on hover. These values were gained by trial and error, with a small rotation and translation looking better than a more pronounced movement.</p>
<pre><code>dl.bookshelf dt {
height:300px; /\* Default height of books \*/
display: block;
float: left;
border:1px solid black;
font-size: 1.5em;
position: absolute; /\* Using relative-absolute positioning \*/
-webkit-transition-property: left, webkit-transform, webkit-box-shadow; /\* transition on two properties \*/
-webkit-transition-duration: 0.5s; /\* take 0.5 seconds \*/
-webkit-transition-timing-function:ease-in; /\* Ease in \*/
-webkit-transform-origin: left bottom; /\* use the left, bottom of the element as the origin of transformation \*/
/\*... see css file for full vendor property list \*/
}
/\* Hover over or focus on a book and have it pull out of the shelf \*/
dl.bookshelf dt:not(.showBook):hover, dl.bookshelf dt:not(.showBook):focus {
cursor:pointer; /\* turn cursor to a hand \*/
-webkit-transform: rotate(-5deg) translateX(-30px); /\* Roate 5 degrees and pull out 30px \*/
-webkit-box-shadow:#000 1px 3px 5px; /\* Add a box shadow so it looks like the book has depth \*/
/\*... see css file for full vendor property list \*/
}
</code></pre>
<p>Note the <code>dt:not(.showBook)</code>, because we don't want the selected book rotating when hovered over. I tried using <code>-webkit-perspective</code> here to make the books look a little more "3D", but I couldn't make it work properly. It's a feature only available on Safari on Snow Leopard so isn't widely used enough for my purposes.</p>
<p>All of those three together produces this:</p>
<p><a href="https://www.steveworkman.com/static/img/cssbookshelf.png"><img src="https://www.steveworkman.com/static/img/cssbookshelf.png" alt="CSS3 Bookshelf using animations, transforms, web fonts and multiple=" title="CSS3 Books" loading="lazy" /></a></p>
<p><strong>Showing the Book</strong> Using a little JavaScript, I added a click event that added a class of "showBook" onto the <dt> and </dt><dd> tags. This triggers an animation to move the book to the middle of the page and displays the definition below it.</dd></p>
<p>The animation is pretty simple stuff, modifying the left property and the z-index, no <a href="http://webkit.org/blog/324/css-animation-2/">keyframed animation</a>. I did try more complex animations, but it didn't add anything to the look and feel, only complicated code.</p>
<p>Themakes use of border radius, <a href="http://www.css3.info/preview/rgba/">RGBA</a> for its background and <a href="http://www.css3.info/preview/text-shadow/">text-shadow</a> to make the text stand out on the opaque background. Eachhas an Amazon affiliates link which floats to the right hand side of the definition. These together look like this:</p>
<p><a href="https://www.steveworkman.com/static/img/bookcss3.png"><img src="https://www.steveworkman.com/static/img/bookcss3-220x300.png" alt="A Book and description in CSS3, showing transform, box shadow, RGBA and text shadow" title="CSS3 Book" loading="lazy" /></a></p>
<p>The code for that looks like this:</p>
<pre><code>dl.bookshelf dt.showBook {
-webkit-transform: translateZ(10px); /\* Come above all the books \*/
-webkit-box-shadow:#000 10px 10px 5px;
/\* See code for other vendors \*/
left:335px; /\*(page width / 2) - (book width / 2), or thereabouts \*/
z-index: 100; /\* just in case the translateZ doesn't work \*/
padding-left: -80px;
}
/\* Class applied to definitions when shown \*/
dl.bookshelf dd.showBook {
display:block;
width:350px;
position: absolute;
top:310px;
left:250px;
background:rgba(0,0,0,0.8); /\* RGBA background \*/
padding: 10px;
color:#fff;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px; /\* Opera and MS will support border radius without prefix \*/
text-shadow: #666 1px 1px;
}
</code></pre>
<p>Before I finish, there are a few caveats:</p>
<ul>
<li>The only browsers to completely support all features are Safari for Mac, Chrome 5 and Opera 10.5</li>
<li>Firefox gets animation support in 3.7 (or above)</li>
<li>Animations aren't smooth in Opera 10.5 until they've been run a few times; after that, it look fantastic.</li>
<li>Internet Explorer... let's not go there. Some features like border radius will work in IE9. I've put all vendor prefixes in even if the browser doesn't support it at this time.</li>
</ul>
<p><strong>Update #2:</strong> Firefox 5 is fully supported with animations. IE9 is functional and IE10 platform-preview 2 works very well</p>
<p>So, enjoy the <a href="https://www.steveworkman.com/bookshelf">CSS3 Bookshelf</a>, I've enjoyed making it and it's a good use of this new technology. I'll make a downloadable package available in a few days, for now, take a look at the source code.</p>
<p>Thanks for reading.</p>
<p><strong>Update:</strong> I've re-jigged the CSS a little to account for some more perspective. I've also changed the shelf as the old one was, well, hideous. New screenshot below:</p>
<p><a href="https://www.steveworkman.com/static/img/bookshelf.png"><img src="https://www.steveworkman.com/static/img/bookshelf.png" alt="CSS3 Bookshelf" title="CSS3 Bookshelf" loading="lazy" /></a></p>
Designing for Touch2010-06-16T00:00:00Zhttps://www.steveworkman.com/2010/designing-for-touch/<p>Over half of the UK population has a mobile phone, and there are <em>40 million</em> active mobile devices. Of that number, there are about 8 million touch screen devices, with around half of that number being accounted for by the Apple iPhone. More than half of the new handsets being manufactured today have touch screen functionality, though no other single device has had the success of the iPhone.</p>
<p>The reason is partly to do with the Apple brand, but this is second to the iPhone’s well-designed software, specifically the user interface (UI). Interacting with an iPhone is simply a joy and no other device has combined its simplicity and accessibility. How can its design principles be learned upon to produce great touch screen interfaces?</p>
<p>The secret lies in keeping to the four principles of touch screen applications: <strong>direct interaction, concise wording, natural input and integrated applications</strong>.</p>
<p>The iPhone is a <strong>direct interaction</strong> device, meaning that all of the input takes place on the screen, not relying on any other hardware keys to support the UI. It uses this direct input mechanism to allow the UI designer to place important navigation and action buttons within the UI in more intuitive places than hardware keys allow. This principle can be leveraged in one simple piece of advice: touch screen input is <strong>direct</strong>, place buttons in intuitive, easy to reach places for best usability. Because these devices are small, the edges of the screen are always in reach and easy to access, so it makes the ideal place for navigation and essential functions.</p>
<p>It is important to note the difference in the web and web interfaces with touch screen applications. A lot of web sites rely on a pointer hover in order to reveal different or additional navigation options. This is simply not possible with direct input devices as a finger never hovers on the screen, it simply taps. A small paradigm shift is expected from these designers to harness direct input correctly. This does not mean that a web interface cannot function as well on a touch screen device, far from it. The web has to be tailored for direct input. In principle, the web will work just fine on any display, but the screen is a lot smaller on handheld devices and information is either lost of compressed, making the user perform a large number of ‘zoom’ actions to locate the information that is contained within the web page. Making direct input usable can simply be a matter of reducing the zoom operations. Make action buttons big; big enough for a finder to press without having to zoom in. Apple recommends a 40 pixel or larger button to allow for all finger sizes.</p>
<p>All of these lessons on the mobile web show why Apple’s applications have taken off so well; they are simple and <strong>concise</strong>. None of the apps are overcrowded or even feature word-heavy instructions. This part is key: if a user does not know what to do with a button within the first few seconds then the wrong label has been chosen. It is not that the screen is complicated and needs explanation, if it does then you should think of alternative ways to express that function.</p>
<p>Take, for example, the iPod application. It plays music, but often there is a very long list of music to be displayed; it has to be categorised by artist, album or genre. If the app decided that it wanted to give categorisation choice to the user, it may start with a few buttons asking for a category selection (see diagram).</p>
<p><a href="https://www.steveworkman.com/static/img/1.png"><img src="https://www.steveworkman.com/static/img/1.png" alt="iPod menu" title="iPod menu" loading="lazy" /></a></p>
<p>Instead, it offers the most recognisable selection and then keeps all of the other options available at all times by using a tab bar. This level of functional accessibility paves the way for a golden rule in touch screen menu navigation: all functions must be accessible within three actions. There are no functions in the iPod app that cannot be accessed in more than three screens of data. This is a very important rule for touch screen devices, as many follow the single hardware button principle of the iPhone, giving no permanent button for going back a level of detail (which, as before, is a good thing) then burying functions deep within the menu system, making it very difficult to go from one set of functions to another. Three is the ideal number here as it allows for a good level of data granularity and yet has all top-level functions on two taps away.</p>
<p>There are some exceptional applications, but no exceptions to the rule. If there are circumstances where actions require more then three touches, then those apps need to make use of <strong>natural input</strong>, an innovative facet of touch screen design. Natural input is performing an action with a motion or gesture which is indistinguishable in the given context. Put into plain English, there can be no other plausible action that can be represented by a given gesture. A perfect example of this is the Photos app on the iPhone. Select an album, where to start, then view the pictures (note: three steps). To view the next picture, push the current one off the screen. Zoom is performed with a pinch and you can rotate pictures by picking up its edges and turning it round. Photos also rotate pictures automatically based on the orientation of the device. There are few better examples of natural input that this.</p>
<p>Applications can be further improved by using natural input. The iPhone’s Maps application, especially when compared to its web-based counterpart, is not the most intuitive application. Sure, it has a good amount of options, uses one finger to pan around the map and two to zoom, but when I want to do anything advanced it falls short. Say I want to know how far Leicester Square is from my office in Victoria. Both locations easily fit on one map, but I have to search for the locations before it drops a pin into the map. A more usable way would be to allow me to drop the pin from the UI, a double-tap would be natural, or dragging a pin from a menu bar and placing it on the map.</p>
<p><a href="https://www.steveworkman.com/static/img/2.png"><img src="https://www.steveworkman.com/static/img/2.png" alt="Google maps" title="Google maps" loading="lazy" /></a></p>
<p>Maps can create a route between those two places for me. The route it’s given me takes me along The Mall, but I want to go through Green Park. Attempting to move the route with a drag action (like the web interface) I only succeed in moving the map. There are ways around this, but it is not as easy as it could be and certainly isn’t as natural. The same goes for wanting to move a pin; the functionality is either absent or difficult to use. Improvements here would be very simple and highly effective.</p>
<p>Natural input is very under-used by non-Apple applications, but good use of it can lead to very successful apps, like the excellent Flight Control, where plane flight paths are dragged with a single finger, or the intuitive first-person shooter controls on Wolfenstein 3D.</p>
<p><a href="https://www.steveworkman.com/static/img/3.png"><img src="https://www.steveworkman.com/static/img/3.png" alt="Flight Control" title="Flight Control" loading="lazy" /></a></p>
<p>The final piece of Apple’s puzzle is <strong>integration</strong>. This has been a large component of all ‘Web 2.0’ applications, the ability to communicate between sites easily, as if you were using the site itself. It is not simply about providing links but providing functionality between applications. This integration is important on touch screen and handheld devices as removing all unnecessary actions and tasks is essential. If an application is able to perform useful tasks with a piece of information, it should not rely on the user to perform that task. For example, the iPhone app Zensify can post pictures to Twitter and Facebook, and does so at the same time without the user having to perform the action for each service.</p>
<p>Creating great touch screen applications can be hard, but sticking to the four design principles, <strong>direct interaction, concise wording, natural input and integrated applications</strong>, and you’ll be well on your way to making an award-winning app.</p>
4 years on2010-06-29T00:00:00Zhttps://www.steveworkman.com/2010/4-years-on/<p>*Breathe deeply. Think.*</p>
<p>Has it really been that long?</p>
<p>Four years have passed since I started writing this blog. Since then I have written 88 posts (including this one) with 89 tags in 23 categories. There have been 94 comments, 31 of which were on the <a href="https://www.steveworkman.com/?p=330">CSS3 Bookshelf</a>. The site has been through four designs under three different names on two different hosts.</p>
<p>For many years, the site went unnoticed, getting less than 10 page views a day. With the latest iteration, a conscious effort to drive more traffic by writing good articles every week, and a bit of help from <a href="http://twitter.com/steveworkman">Twitter</a>, this improved to 30 visits a day. A few good tweets from Bruce Lawson increased this to 50, with the odd spike around the 250 mark. Then I write about a technique to make a bookshelf with new CSS technology. A lot of pushing gets a spike of 300 visits. Then, whilst on a day off, <a href="http://www.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/">Smashing Magazine</a> posts it twice as part of a "<a href="http://www.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/">what you can do with CSS3</a>" compilation, which sends me 1000 visitors a day for the weekend. That's more visitors than I've had in the last 3 years put together.</p>
<p>So, what's next? Well, I'm going to keep writing. There's so much more that interface design can help us accomplish and good design becomes more and more important every day. I'm going to blog more about design itself, and things that inspire me. At the moment, a lot of those thoughts are limited to my twitter stream, so I want to expand that. I'll talk more about my after-hours tech activities, the interesting stuff that I don't always get to do during the nine to five.</p>
<p>I'm also going to get more involved in the community, discussing more issues and attending more group events. <a href="http://www.londonwebstandards.org/">London Web Standards</a> is fantastic and I'm going to try and make it to every one from now on.</p>
<p>So, there'll be more of the good stuff, some more tutorials and more discussion. If there's anything else you'd like to see, please leave a comment.</p>
<p>Thanks for reading,</p>
<p>Steve</p>
<p><a href="https://www.steveworkman.com/static/img/WhatsCookin-4years-B1-604-mayz.gif"><img src="https://www.steveworkman.com/static/img/WhatsCookin-4years-B1-604-mayz.gif" alt="" title="WhatsCookin-4years-B1-604-mayz" loading="lazy" /></a></p>
UX Questions with Andy Budd2010-07-13T00:00:00Zhttps://www.steveworkman.com/2010/ux-questions-with-andy-budd/<p>Last night was <a href="http://londonwebstandards.org/">London Web Standards</a>' UX Questions with Andy Budd (of <a href="http://www.cssmastery.com/">CSS Mastery</a> and <a href="http://clearleft.com/">Clearleft</a> fame)</p>
<p>My sketchnotes for this are at the bottom of the page. This is only a brief write-up, hopefully the LWS guys will put the video up soon. Much of this is para-phrased. <em>Andy, if you do read this, let me know if you want any of these answers changed.</em></p>
<p><strong>Q: Good UX vs Good design?</strong> (the actual question was a lot more wordy than that)</p>
<p>UX is a quality attribute, it can be good and bad. An aspect of good design takes UX into account, though there are exceptions i.e. the Phillips Juicer. Good design does not imply ease of use, UX is a design philosophy or style. A good UI designer understands HCI, social, environmental and cognitive psychology .</p>
<p><strong>Q: User-Centric Design or Persuasive Design?</strong></p>
<p>Both together please.</p>
<p><strong>Q: How do you manage difficult clients?</strong></p>
<p>Clearleft tend not to get them thanks to their reputation. Basically, just manage expectations all the way through.</p>
<p><strong>Q: What should you do if you're told to design "for IE 6" or "inaccessibly"</strong></p>
<p>Ignore the request. You're a professional (dammit) and you need to use the right tools for the job. Don't just keep patching a crumbling building, i.e. if you have an intranet made for IE6, don't just patch it up, start again.</p>
<p><strong>Q: What tools couldn't you live without?</strong></p>
<p>Pen and paper. Oh, and sticky notes.</p>
<p><strong>Q: What makes a good UX designer?</strong></p>
<ul>
<li>Empathy</li>
<li>Inquisitive</li>
<li>Unsatisfied with life (want to make things better)</li>
<li>Desire to fix the world</li>
</ul>
<p><strong>Q: How do you get clients to invest in UX even if they have a small budget?</strong></p>
<p>Design on paper to reduce costs. Too many designers just go straight into photoshop. This will allow for more iterations and less money in the long term. Remember that you're also in a facilitation role so its up to you to guide the process.</p>
<p><strong>Q: Is any testing better than no testing?</strong></p>
<p>Yes.</p>
<p>Generally there's lots of low-hanging fruit (if doing a re-design) so take that! You only need to do the deep level of thought if you're solving a very specific problem.</p>
<p><strong>Q: Are there any design patterns you use regularly? Should you make new ones?</strong></p>
<p>Real-world patterns work very well, i.e. tabs. Most people don't know that a site logo takes you to the home page, so always have a home link. If you're making a new pattern, test test test, then think, would something else be better.</p>
<p><strong>Q: Where do you get your inspiration from?</strong></p>
<p>The real world. Architecture, a book called "Why people buy" (but not the section on the internet), the Disney Imagineers. Overall, it's about how it functions, not how it looks.</p>
<p><strong>Q: Is the user wrong? When does the designer know better?</strong></p>
<p>Generally, the user isn't wrong. It's very rare that their opinion doesn't count, so swallow your pride.</p>
<p><strong>Q: How do you establish credibility in an organisation?</strong></p>
<p>It's difficult, very hard to do internally. You need to play the office politics game. Build a level of knowledge and use references as much as you can, so it's not only you saying these things. Have confidence in you and what you are doing. Visualise it in your client's language if possible.</p>
<p><strong>Q: What should you do if a business objective creates a disjointed experience?</strong></p>
<p><em>Andy can't help on this one, this is an answer from the LWS crowd</em>.</p>
<p>Switch it around, get buy-in from people and sell ti to them. Do it in the pub, many people are much more open there. With regard to "Dark Patterns" i.e. hiding a company's phone number or directing through certain channels, read <a href="http://www.90percentofeverything.com/2010/07/08/dark-patterns-dirty-tricks-designers-use-to-make-people-do-stuff/">Dan Lockton's post</a>.</p>
<p>Finally, if you're not happy in your job, there are loads of UX jobs out there at the moment. <a href="http://clearleft.com/is_hiring/">Clearleft is hiring a world-class interaction designer</a>.</p>
<p>That's it. Sketchnotes below. Hope you enjoyed it</p>
<p><a href="https://www.steveworkman.com/static/img/UX-Questions-Sketchnotes.png"><img src="https://www.steveworkman.com/static/img/UX-Questions-Sketchnotes.png" alt="UX Questions Sketchnotes" title="UX Questions Sketchnotes" loading="lazy" /></a></p>
The Low-Hanging Fruit2010-08-03T00:00:00Zhttps://www.steveworkman.com/2010/the-low-hanging-fruit/<p><a href="https://www.steveworkman.com/static/img/ceppas-cristiana-the-tree-2409455.jpg"><img src="https://www.steveworkman.com/static/img/ceppas-cristiana-the-tree-2409455.jpg" alt="Ceppas Cristiana's The Tree" title="Low-hanging Fruit" loading="lazy" /></a></p>
<p>Hearing childhood teenage professional hero Andy Budd speak at #lwsux last month confirmed many things that I already knew, and introduced me to even more things that I needed to be more aware of (<a href="https://www.steveworkman.com/standards/2010/ux-questions-with-andy-budd/">read my full write-up</a>).</p>
<p>The one thing that really got me was talking about the "low-hanging fruit". It's a pretty simple concept, as a consultant, much of the benefit you will bring to an organisation, in improving a system's design, will be painfully obvious.</p>
<p>Take, for example, a client of mine. An old system based on 2003 technology, with even more prehistoric standards support. It used javascript everywhere, all links opened in new windows (complete with navigation) and whilst there were templates, from a programmers perspective, there may as well not have been.</p>
<p>So, how to make it better instantly? Update the system to use templates, stop links appearing in new windows, make it work cross-browser and replace as much of the javascript with "server-side" code as possible. That's before you get to the simple layout changes that you can make. Spending a bit of time on the information architecture improves the flow of information and user journeys. The system hasn't changed much, but it's infinitely more usable and user-friendly. The client almost had a "crisis" when I showed it working on my iPad.</p>
<p>What's the lesson here? Take the easy usability problems and solve them with best practices. Test as you go, there's no need for large-scale user testing unless there's a specific problem that you've been asked to solve. The simple solutions to simple problems solve most of the issues of user-friendliness within a system, and a good bit of IA generally does the rest.</p>
<p>So, take the easy option!</p>
Is Wordpress putting whitespace in your XML? Here's how to fix it2010-08-05T00:00:00Zhttps://www.steveworkman.com/is-wordpress-putting-whitespace-in-your-xml-here-s-how-to-fix-it<p><a href="https://www.steveworkman.com/static/img/139822945.png"><img src="https://www.steveworkman.com/static/img/139822945.png" alt="XML error" title="XML error" loading="lazy" /></a></p>
<p>Since I started using <a href="http://www.feedburner.com/">Feedburner</a> to add adverts into my RSS feed (there are now ads, let me know if they're intrusive), I've been getting errors like the one above in my XML feed. Basically, there's a few new line characters being output by several classes. This means the XML is invalid and services like Feedburner complain, as do some browsers (FF, Opera, Chrome).</p>
<p>In PHP, there's a simple way to fix this, using a buffer and stripping newline characters off the beginning and end. Wordpress have <a href="http://core.trac.wordpress.org/ticket/12089">considered this before</a>, and have rejected this method of fixing it because it's generally caused by plug-ins which should fix themselves. Hence, their solution for 3.0: indicating when additional characters are output when the plugin is activiated.</p>
<p>So, I did that for all my plugins. I found that the following were giving me extra characters:</p>
<ul>
<li>AVH First Defense Against Spam (2)</li>
<li>FeedBurner FeedSmith</li>
<li>JR Post Image</li>
<li><a href="http://last.fm/">Last.fm</a> for wordpress</li>
<li>Tweetbacks</li>
<li>Twittar</li>
<li>Twitter for Wordpress</li>
<li>WP-Spamfree</li>
</ul>
<p>So, I then removed the blank line at the top of each of these files. This got the number of blank lines from 12 to 2, which still isn't enough.</p>
<p>I then re-installed wordpress, thinking one of the core files had become corrupted. Still no valid XML.</p>
<p>More research led me back to the output buffering solution. <a href="http://wejn.org/stuff/wejnswpwhitespacefix.php.html">wejn.org</a> has a pre-prepared file to resolve this issue. It's a simple install and is well documented. Since putting this fix in, I've had no issues and my RSS feed is back up and running.</p>
<p>I'd still love to know what caused the single line, but I'm glad there's a fix to sort it out.</p>
The Future of Web Typography with Richard Rutter (LWS Future)2010-08-18T00:00:00Zhttps://www.steveworkman.com/the-future-of-web-typography-with-richard-rutter-lws-future<p>Monday night (16th August 2010) was <a href="http://www.londonwebstandards.org/">London Web Standards</a>' 'Web Futures' event with presentations from <a href="http://www.clearleft.com/">Clear Left</a>'s <a href="http://blog.andyhume.net/">Andy Hume</a> (<a href="http://twitter.com/andyhume">@andyhume</a>) and <a href="http://clagnut.com/">Richard Rutter</a> (<a href="http://twitter.com/clagnut">@clagnut</a>).</p>
<p>This second part was on the Future of Web Typography, presented by Richard Rutter (also of <a href="http://www.fontdeck.com/">FontDeck</a>)</p>
<p><a href="https://www.steveworkman.com/static/img/LWSFuture-RichardRutter.png"><img src="https://www.steveworkman.com/static/img/LWSFuture-RichardRutter.png" alt="Sketch Notes of The Future of Web Typography with Richard Rutter" title="The Future of Web Typography with Richard Rutter" loading="lazy" /></a></p>
<p>Richard is heavily into his typography. He recently launched <a href="http://www.fontdeck.com/">FontDeck</a>, a web fonts web service similar to <a href="http://typekit.com/">TypeKit</a> et al. Richard talked a lot about how bad things were before, how system fonts had reduced our creativity and what sort of deep opportunities for font producers lay in the <a href="http://www.w3.org/TR/css3-fonts/">CSS3 Fonts module</a>.</p>
<p>Many of the features discussed (and sketched) aren't available in <em>any</em> build of a web browser, for instance kerning, numeric variants, ligatures, different types of ligatures, font stretch, named font weights, hyphenation and many other things. Firefox 4.0 is starting to implement many of these features but it's very slow going. A lot of time was spent pointing out what these things could do, and how they improved readability. He did also say that this "is not a Firefox fanboy love-in".</p>
<p>Near the end of the talk, Richard discussed a new anti-aliasing method from Microsoft called DirectWrite, a feature that uses a computer's GPU to render fonts on a sub-pixel level. He even went so far as to say that</p>
<blockquote>
<p>"With DirectWrite, fonts will look better on IE9/Windows 7 than on a Mac"</p>
</blockquote>
<p>He also made mention of the iPhone 4's retina display. The future is high-resolution displays, and with rendering technology that can actually support all of these rules which are built into fonts, the web will be a much nicer place to read content.</p>
<p>Richard made a lot of the new way fonts were being served (as a service) being beneficial to both the client and to the foundry. It's cheaper for the client (not having to buy fonts at £500 a go) and the foundry also stops their fonts being pirated and distributed around the web.</p>
<p>Overall, Richard was quite downbeat about the state of things right now, but is confident they'll get better.</p>
<p>The full slides from this presentation will be available shortly (check back later).</p>
<p>Read the first part of this event, <a href="https://www.steveworkman.com/standards/2010/the-progressive-web-with-andy-hume-lws-future">Andy Hume on The Progressive Web</a>.</p>
The Progressive Web with Andy Hume (LWS Future)2010-08-18T00:00:00Zhttps://www.steveworkman.com/the-progressive-web-with-andy-hume-lws-future<p>Monday night (16th August 2010) was <a href="http://www.londonwebstandards.org/">London Web Standards</a>' 'Web Futures' event with presentations from <a href="http://www.clearleft.com/">Clear Left</a>'s <a href="http://blog.andyhume.net/">Andy Hume</a> (<a href="http://twitter.com/andyhume">@andyhume</a>) and <a href="http://clagnut.com/">Richard Rutter</a> (<a href="http://twitter.com/clagnut">@clagnut</a>).</p>
<p>This is part covering Andy's talk which was on "The Progressive Web". First up, my sketchnotes.</p>
<p><a href="https://www.steveworkman.com/static/img/LWSFuture-AndyHume.png"><img src="https://www.steveworkman.com/static/img/LWSFuture-AndyHume.png" alt="Sketch Notes of The Progressive Web with Andy Hume" title="The Progressive Web with Andy Hume" loading="lazy" /></a></p>
<p>The basic message of Andy's talk is that the landscape of the web these days (note my awesome rolling hills) has <a href="http://dowebsitesneedtolookexactlythesameineverybrowser.com/">changed</a> and people should be more open to these new techniques. By designing and coding sites for today <em>and</em> tomorrow, you are not only reducing the amount of work you have to do now, but you're decreasing the number of bugs, not having to re-do gradients for high-resolution displays, and you're also making your web site faster, which is <a href="http://twitter.com/flexewebs/status/21336343816">directly linked to revenue</a>. There's no reason not to add these things in now unless you're designing entirely for IE6.</p>
<p>Andy talked extensively about @media queries, how these should be used instead of browser sniffing (read: should do feature detection) and how they can make simple websites work better across more web-enabled devices. He demonstrated the <a href="http://2010.dconstruct.org/">dConstruct</a> website as a good example of this.</p>
<p>Andy put up two great slides, one on when you can use HTML5/CSS3 standards today, and where you should use intermediaries like jQuery. The other slide is poorly reproduced in my sketchnotes (middle-right), showing the cycle between standards, new hacks, old hacks and back to standards. This indicates a whole new era of innovation in the web now that we have these new standards.</p>
<p>So, a great talk by Andy. <a href="https://www.steveworkman.com/standards/2010/the-future-of-web-typography-with-richard-rutter">Read part two, on the future of web typography by Richard Rutter</a>.</p>
What do you want from a re-design?2010-08-20T00:00:00Zhttps://www.steveworkman.com/2010/what-do-you-want-from-a-re-design/<p>I've been asking questions about my blog on Twitter, and a few notable things have come back:</p>
<ol>
<li>Text shadow on hover makes you feel <a href="http://twitter.com/davereinhardt/statuses/21593605933">seasick</a></li>
<li>Text shadow is <a href="http://twitter.com/cheezepie/statuses/21644810137">fine on headers</a></li>
<li>Colours on the footer are <a href="http://twitter.com/davereinhardt/statuses/21567433022">hard to read</a></li>
<li>It all feels a bit <a href="http://twitter.com/flexewebs/statuses/21562890614">busy</a></li>
</ol>
<p>So, many of these things can be remedied simply, but I can't get it out of my head that you just skim the content because it's all bunched up. The white space for the text is compressed against two differently coloured, high-contrast sections which mark the edge of the world. Instead of helping you focus, I feel trapped when reading it.</p>
<p>So, I reach out again, what would help alleviate this? What would make you read more on this blog. It's not a for-profit enterprise, it's simply putting my opinion and some of my work onto the Internet.</p>
<p>Please, your thoughts in the comments or contact me steve at steveworkman dot com (or use the contact form on this site).</p>
Geeks need their space2010-08-24T00:00:00Zhttps://www.steveworkman.com/2010/geeks-need-their-space/<p>Today's post inspiration comes courtesy of <a href="http://youtheuser.com/">Matthew Solle</a> (<a href="http://twitter.com/solle">@solle</a>) who tweeted this video of <a href="http://www.campaignmonitor.com/blog/post/3242/the-new-campaign-monitor-office/">Campaign Monitor's new offices</a></p>
<p>This video reminded me of my afternoon at my client. After a week of wireframing, data architecting and meetings, I finally got to sit down and code what I'd had in my head for nearly a month. Fellow geeks, you know how good a feeling it is to be in the zone and just do simply excellent work at what feels like breakneck speed, it's great.</p>
<p>Except, I work in an open-plan office. There's meeting rooms all around me and I'm right by the door, so people come and go all the time. I've also got two laptops and an iPad on my desk, along with a main monitor. Add to that an iPhone and my actual phone and things are pretty busy and I can easily get distracted without all the people around me.</p>
<p>This video showed me the absolute joys of having space to sit and think. People can still ask you stuff, messenger is always on, and they can pop round whenever it takes their fancy, but you have a room all to yourself with white boards and space to put all your thoughts on the walls. These developers, these lucky, lucky developers, will have the space to concentrate on what they do best, in an environment that they can tailor to their liking. It's the joy of freelancing and having a home office, mixed with working with the best people around. Throw in guitar hero and I can't imagine a better office.</p>
<p>So, why aren't there more of these?</p>
<p>Simply, it's money. In London, it wouldn't make financial sense to have a kick-ass view of the river and all that space for only 20 people. It simply doesn't happen. Open plan offices allow for people to be much closer together and still have some sense of space for themselves (just say no to cubicles).</p>
<p>I'd argue that the best people need this space, and if they can't always have an office, then a project room for a small team. Failing that, just some space on the walls. As a developer, I value my space to think. As a designer, I value my space to create, and as a leader, I value my team.</p>
<p>Employers, give your people more space. A smaller office does not mean you save money if your workforce is unhappy. A smaller office does not equal more team spirit because you're packed in together. A smaller office does not guarantee people talking to each other more just because they're so tight up next to each other. Think about your office, think about your people, and create a space to work.</p>
<p>I've found a great post on cool workplaces. Get inspiration from these and make your office a better place to work: <a href="http://positivesharing.com/2006/10/10-seeeeeriously-cool-workplaces/">10 Seriously cool workplaces on Chief Happiness Officer</a></p>
Droid Doesn't do tablets2010-09-01T00:00:00Zhttps://www.steveworkman.com/droid-doesn-t-do-tablets<p><a href="https://www.steveworkman.com/static/img/asus-eee-pad-android-tablet-device.jpg"><img src="https://www.steveworkman.com/static/img/asus-eee-pad-android-tablet-device.jpg" alt="No Android on tablets" title="Android and tablets" loading="lazy" /></a> As a developer and iPhone fan, nothing pleases me more to say that Android has caught up with the iPhone. Android hardware has been great for a while, the Motorola Droid and Nexus One being the first in a wave of great devices, but the software hadn't been right. Android took its sweet time to develop but finally has all the great features iPhone users have enjoyed since the iPhone 3G and more (wi-fi hotspots for example).</p>
<p>Thing is, the iPhone, and iOS, has moved on.</p>
<p>Since the launch of the iPad, every Android-lover has been waiting for a tablet with Android on it. They want the brilliance and openness of Android on a more useful (day-to-day) form factor. To those people, I say wait, it's not ready yet. In order to put iOS on a tablet, Apple had to fork the code base into two versions, iPhone 3.1 (later 4.0) and iPad 3.2. To date (though that may change at the September 1st event), these two branches have not converged, nearly 9 months later. Apple did this for a very good reason: the native controllers and views are not suitable for tablet devices and new paradigms needed to be created.</p>
<p><a href="https://www.steveworkman.com/static/img/splitview_master.jpg"><img src="https://www.steveworkman.com/static/img/splitview_master.jpg" alt="The SplitView Navigation controller" title="SplitView diagram" loading="lazy" /></a></p>
<p>Android tablets, on the other hand, are content with throwing the same old mobile-centric code at tablets. For example, today <a href="http://www.engadget.com/2010/08/31/archos-unleashes-five-five-new-android-froyo-tablets-we-go-h/">Archos unveiled five new Android 2.2 devices from 2.8" to 10.1"</a> and Samsung is about to unveil their <a href="http://galaxytab.samsungmobile.com/">Galaxy tablet</a> which is a 7" Froyo device.</p>
<p>So, why isn't this a good idea. For one, the Android developer API says it <a href="http://developer.android.com/guide/practices/screens_support.html">doesn't support screens larger than 4.3"</a>. That should be a pretty good first clue. Take the iPad HCI guidelines for a second clue. It states that full screen transitions are bad, interfaces have to be tailored to the device, and you have to do more than just blow up the interface to twice the size. Take a look at how iPhone apps look on the iPad for that one.</p>
<p><a href="https://www.steveworkman.com/static/img/iphone-on-ipad.png"><img src="https://www.steveworkman.com/static/img/iphone-on-ipad.png" alt="iPhone app on an iPad" title="iphone-on-ipad" loading="lazy" /></a></p>
<p>Truthfully, the current Android SDK just can't cope with the demands of a tablet UI. Little things like smooth transitions when rotating to big things like having universal apps which cover multiple screen sizes well. Android has support for multiple screen sizes, but it relies on relative positioning for this and is an inelegant solution compared with Apple's interface builder.</p>
<p>A bigger screen will accentuate the differences in the quality of iOS and Android apps. If you have a mediocre Android app and put it on a tablet, it's going to look poor, but put a mediocre iPhone app on the iPad, and it's at least usable. Take a look at this video of a $50 Android tablet from India Do you want a UI like that on your tablet? Didn't think so.</p>
<p>So, my advice, is wait. Wait until Android 3.0 (Gingerbread) comes out in Q4 this year, then wait until 2011 for some good hardware. 3.0 has set precedent by disallowing vendor customisation, forcing a much-more Apple-esque standard set of controllers which will suit more purposes. Acer and Motorola have already announced that they're <a href="http://www.engadget.com/2010/08/19/acer-and-motorola-getting-spicy-gingerbread-for-android-3-0-tabl/">delaying the launch of their Android tablets</a> until 3.0 is available.</p>
<p>Still, when that time comes around, the second generation iPad will be out, and then Android will be playing catch up again.</p>
<p><strong>Update:</strong> Just seen the <a href="http://www.engadget.com/2010/09/01/viewsonic-viewpad-7-video-hands-on/">ViewSonic ViewPad</a> 7, a 7" Froyo tablet. Take a look at the video in the link: it's full-screen all the way, sluggish and, I quote "a plastic rebadge me-too Android tablet". When you're watching the video, think about how that's going to work on a tablet the size of an iPad (or the Archos 101 for that matter). It's not going to be pretty.</p>
8 HTML5 Features You Haven't Seen Before at lwsdeep2010-09-21T00:00:00Zhttps://www.steveworkman.com/8-html5-features-you-haven-t-seen-before-at-lwsdeep<p>This month at <a href="http://www.londonwebstandards.org/">London Web Standards</a>, two in-depth HTML5 talks, covering bits which aren't in common usage at the moment, and what you can do with the bits that are. This is part one, Google's <a href="http://mahemoff.com/">Michael Mahemoff</a> (<a href="http://twitter.com/mahemoff">@mahemoff</a>) on 8 HTML5 features you haven't seen before, and <a href="https://www.steveworkman.com/?p=459">part two</a>, Opera's <a href="http://www.splintered.co.uk/">Patrick Lauke</a> (<a href="http://twitter.com/patrick_h_lauke">@patrick_h_lauke</a>) on <code><video></code> and <code><audio></code>. Below are my notes and write-up. Enjoy!</p>
<p><a href="https://www.steveworkman.com/static/img/8-html5-features.png"><img src="https://www.steveworkman.com/static/img/8-html5-features-200x300.png" alt="Sketchnotes for 8 HTML5 Features You Haven't Seen Before" title="8 HTML5 Features You Haven't Seen Before" loading="lazy" /></a></p>
<p>This talk focused on 8 less-commonly used features of HTML5. Whether they're all actually part of HTML5 is up for debate, but they're all specifications being worked on for implementation in browsers, so that's enough.</p>
<p>Firstly, Michael had made his slides using HTML5, which worked really quite well, nice flashy transitions and all that and was a good example of some of the features he showed off (notably the history API) .</p>
<p><strong>1. App Caching</strong> App caching is making web sites work offline: it tells browsers which files they should keep cached and re-load when the URL is requested. Whole apps can be cached like this and the iPhone and Android make good use of this. This is not the same as...</p>
<p><strong>2. Client-side Storage</strong> Which is data storage accessed from JavaScript. You used to do this with cookies, but now you've got access to simple storage arrays, and WebSQL and IndexedDBs are coming. Both of these together replace services like Google Gears which was a stop-gap for this.</p>
<p><strong>3. Cross Origin Resource Sharing</strong> One big problem with AJAX is that the XHR request can't request something on another domain. The work-around for this is <a href="http://remysharp.com/2007/10/08/what-is-jsonp/">JSONP</a> which is a hack if there ever was one. CORS allows people to do this in an open way... which to me, is simply dangerous. However, it will have some uses, unlike...</p>
<p><strong>4. Ping</strong> Which, apart from being a new social network, adds a bit of header information basically pinging a web site when a link is clicked. It's designed to replace redirects but I didn't really understand a good use case for it. If anyone wants to explain it, <a href="https://www.steveworkman.com/contact">please drop me a line</a>.</p>
<p><strong>5. Web Sockets</strong> Web sockets allow for a connection to a server to be kept alive and events received, much like sockets created in any other programming language. Web sites like Facebook (for chat) and <a href="http://www.swoopo.co.uk/">Swoopo</a> currently use <a href="http://en.wikipedia.org/wiki/Comet_(programming)">Comet</a> for doing this and web sockets will allow them to get updates pushed to the page from the server without the ugly hacks.</p>
<p><strong>6. History API</strong> I'm looking forward to this one: it allows for JavaScript inspection and manipulation of the browser's history stack (or array, whatever it is) without changing the URL to use the # technique. It's going to be very powerful for making applications where you don't change the page but lots of things change state and users use the back button a lot. I made a note that it's quite a bit like a view state, making an <a href="http://asp.net/">ASP.NET</a> comparison, but that's a bit unfair.</p>
<p><strong>7. Workers</strong> Web workers enables multi-threading in JavaScript. Finally! I hear you cry. It's not widely supported at the moment and it is about 25% slower than running the process in the main thread, but means you can do all sorts of things whilst the UI keeps updating.</p>
<p><strong>8. Geo-location</strong> Used to be done by IP with big expensive databases, but can now be done with hooks into device hardware. Useful for a load of different applications, this will be one of the most widely-used of the HTML5 APIs.</p>
<p>And that's it. They're all under-the-hood improvements, and the browser makers are making it easier to do the cool stuff, which will bring in a lot of innovative web apps as people discover the power of these new tools.</p>
<p><a href="https://www.steveworkman.com/?p=459">Part two of #lwsdeep can be found here</a></p>
<p>Update: here's a picture of what's in HTML5 and what isn't by Bruce Lawson (<a href="http://flic.kr/p/81PfaR">Flickr</a>)</p>
<p><a href="https://www.steveworkman.com/static/img/4603715307_c878c8a77b.jpg"><img src="https://www.steveworkman.com/static/img/4603715307_c878c8a77b.jpg" alt="What's in HTMl5" title="What's in HTML5" loading="lazy" /></a></p>
HTML5 Video and Audio at lwsdeep2010-09-21T00:00:00Zhttps://www.steveworkman.com/2010/html5-video-and-audio-at-lwsdeep/<p>This month at <a href="http://www.londonwebstandards.org/">London Web Standards</a>, two in-depth HTML5 talks, covering bits which aren't in common usage at the moment, and what you can do with the bits that are. This is part two, Opera's <a href="http://www.splintered.co.uk/">Patrick Lauke</a> (<a href="http://twitter.com/patrick_h_lauke">@patrick_h_lauke</a>) on <code><video></code> and <code><audio></code>. <a href="https://www.steveworkman.com/?p=456">Part one</a> has Google's <a href="http://mahemoff.com/">Michael Mahemoff</a> (<a href="http://twitter.com/mahemoff">@mahemoff</a>) on 8 HTML5 features you haven't seen before. Below are my notes and write-up. Enjoy!</p>
<p><a href="https://www.steveworkman.com/static/img/html5-video-audio.png"><img src="https://www.steveworkman.com/static/img/html5-video-audio.png" alt="Sketchnotes from HTML5 Video and Audio" title="HTML5 Video and Audio" loading="lazy" /></a></p>
<p>First off, Patrick had a cold, hence the poorly drawn tissue in the top-left corner.</p>
<p><code><video></code> and <code><audio></code> are some of the most important elements in HTML5. Steve Jobs thought so much of these new elements and HTML5's potential, that Flash was dropped from iOS devices and everyone was encouraged to make the transition. Even Microsoft has recognised their importance, adding native support for the elements in IE9.</p>
<p>The basic idea behind <code><video></code> and <code><audio></code> was to do for these media types what had been done for images. Instead of using messy <code><object></code> and <code><embed></code> tags to make Flash work properly, create something simple that doesn't rely on proprietary technology. Therefore, <code><video></code> is now a native object in the browser, which allows you to treat it just like any other object, including styling it with CSS and even using CSS transforms on the video.</p>
<p>There's an important aside around video formats which I'll cover briefly here. There are three codecs:</p>
<ol>
<li><a href="http://www.mpegla.com/main/default.aspx">MP4/H.264</a> - implemented by Chrome, Safari and IE9, encumbered with potential royalty payments, whatever the MPEG association try to say.</li>
<li><a href="http://www.theora.org/">Ogg Theora</a> - implemented by Chrome, Firefox and Opera, open source but not very good as a codec</li>
<li><a href="http://www.webmproject.org/">WebM</a> - implemented by Chrome, Firefox, Opera and IE9 (with downloaded codec) it's made for the web and will be the de-facto standard going forward. Apple have yet to commit to using the format</li>
</ol>
<p>Thankfully, you can use multiple sources in your videos which will fall back to one another. You can even fall back all the way to Flash to give older browsers a fighting chance.</p>
<p>Each browser gets to implement their own controls for the video player, but these can be overridden and the whole video controlled by JavaScript. There are events which fire at different times and theoretically it's possible to time-match subtitle tracks, which <a href="http://www.whatwg.org/">WhatWG</a> are looking into for future versions of the HTML spec.</p>
<p><code><audio></code> is very similar in implementation to <code><video></code>, with the same format fight, this time between MP3 and Ogg Vorbis. Interestingly you can remove the controls from the page and run the whole thing from JavaScript, allowing for such horrible interactions as a whoosh sound when hovering over a button.</p>
<p>Best yet, is that Patrick officially certified these techniques ready for use. Their is sufficient support and fallback options to support all browsers, take YouTube for example, running HTML5 video for nearly a year now. However, he asks that you use feature detection rather than browser sniffing when making these fallbacks. There are a few tools out at the moment which do all this for you, such as <a href="http://sublimevideo.net/">SublimeVideo</a> and <a href="http://videojs.com/">videoJS</a>.</p>
<p>And that's it. Hope you enjoyed it. You can read <a href="https://www.steveworkman.com/?p=456">Part one of #lwsdeep here</a>.</p>
Emily vs the iPad2010-09-28T00:00:00Zhttps://www.steveworkman.com/2010/emily-vs-the-ipad/<p><a href="https://www.steveworkman.com/static/img/DSC_0450-1.jpg"><img src="https://www.steveworkman.com/static/img/DSC_0450-1.jpg" alt="Emily and the iPad" title="Emily and the iPad" loading="lazy" /></a></p>
<blockquote>
<p><strong><em>Aaargh! I hate this stupid thing! Why won't it do what I ask it to do!</em></strong></p>
</blockquote>
<p>I heard this cry coming from the living room one evening. My fiancée, Emily, was trying to use my beloved iPad to write an e-mail. "What's it done this time?", I politely inquire in response. "Everything!" came the reply, "All I want to do is send an e-mail, how hard can it be!"</p>
<p>Always wanting to help (like the loving husband-to-be I am) I show her how to copy and paste, move the cursor and find the comma key on e-mail layout keyboards, but then it struck me, why is this so hard? So, I asked her to sit down with me and tell me all of the problems that a real person(tm) has with Apple's latest gadget.</p>
<hr />
<blockquote>
<p>"Firstly, before I met you, I hadn't ever used a Mac. I had heard they were just for designers and arty-farty people, but they're just normal computers for every-day use. This is not about not understanding Macs, this is about the iPad. Also, I love the long battery life, and I really like the screen, it's brilliant."</p>
</blockquote>
<blockquote>
<p>"I'm a Hotmail user, and I can't get more than 50 messages when I'm using the Mail app. Your GMail account works fine, searches on the server and everything, but Hotmail is a second-class citizen and doesn't get all the features it should. It also doesn't sync read/unread items back to the web interface (which I use most of the time) so I don't know what I've read and what I haven't."</p>
</blockquote>
<blockquote>
<p>"There's no iPad app for Facebook. The iPhone version on the iPad looks rubbish, as do all iPhone-specific apps. The visual quality is really poor and not what I've come to expect from the iPad."</p>
</blockquote>
<blockquote>
<p>"I'm left-handed, and sometimes the iPad doesn't pick up the gestures that I make. Tapping on an icon sometimes sends me to the search screen! The whole interface seems to have been made for right-handed people."</p>
</blockquote>
<blockquote>
<p>"Moving the cursor around when entering text is painfully slow and really inaccurate. When I'm moving it the magnifying glass is right under my finger so that doesn't help at all! When my wrist touches the screen the whole screen moves and suddenly jumps to the bottom which is infuriating."</p>
</blockquote>
<blockquote>
<p>"It's heavy. For a girl, it'd be nice to have it in a handbag, but the iPad is too large and heavy for that. It wouldn't fit in 80% of my handbags and any it would fit in would also take a 13" laptop, which would be far more useful."</p>
</blockquote>
<blockquote>
<p>"I've not played many games on any platform so I can't compare the iPad to anything else like that. Still, the games I play on it are fun, if a little pointless."</p>
</blockquote>
<blockquote>
<p>"Getting stuff on to it is hard. iTunes is an issue and if you don't use Google/MobileMe, something like Dropbox or have your work e-mail on it, it's even harder to put stuff on it. It needs a USB port to load documents on. The camera connection kit is good, but it's pretty slow."</p>
</blockquote>
<blockquote>
<p>"There's no Flash support for it, and to me that's critical. For example, checking the weather on the BBC, I can get the basic information but the radar weather map doesn't work. Sites that have their own video player, like Wedding TV1 don't work, and for me, that seriously hampers its usefulness"</p>
</blockquote>
<blockquote>
<p>"I want web sites to work the same on the iPad as they do on the PC. These 'Mobile-optimised' sites are suitable for the iPhone, but not for the iPad and they shouldn't come up <em>(N.B. this is referring to the Hotmail mobile web interface).</em> I don't want to have to learn another interface. If I wanted just e-mail, I'll use the Mail app, but since I want the web site in the browser, show me the actual web site!"</p>
</blockquote>
<blockquote>
<p>"It's just not an improvement on a laptop for the situations where I'd use it. If I wanted something that size I'd take a laptop instead as it's has a DVD drive, all my music and all my web sites."</p>
</blockquote>
<blockquote>
<p>"All that said, it's a brilliant device that has its purposes and has generally replaced the laptop for general Internet browsing, but for what I want something that kind of size to do, it just doesn't do it."</p>
</blockquote>
<p>1 <em>Yes boys, it exists, it's on Sky.</em></p>
<hr />
<p>These aren't the typical usability problems that his lordship <a href="http://www.useit.com/alertbox/ipad.html">Neilsen came up with</a>, they represent problems of someone who uses Macs, works with a computer every day, and still has issues getting things done on the iPad. To be honest, some days I do too (discovering that yet another web site uses Flash is a classic).</p>
<p>What gets me is that many of these can be resolved by Apple and their close partners: making Hotmail work better with Mail, doing more testing with left-handed users, Facebook releasing an iPad app, Hotmail turning off the mobile site for the iPad, making the iPad render pixel-doubled iPhone apps properly (I refuse to believe that text can't be made smooth), and finally making iTunes work better for file management (or enabling people to use explorer/finder).</p>
<p>The moral of the story is whilst you can't please everyone with your designs, don't think solely about your target audience. Try to think about the people around them who will use the device and make sure it works for them too. If you're after a more practical use for this story, learn that the iPad isn't perfect, in fact, it's far from it. I still believe it's the best that's out there, and I'd love Emily to get her hands on a Galaxy Tablet to compare the two. We'll have to wait to see what 2011 and Android 3.0 and the <a href="http://www.blackberry.com/playbook">BlackBerry Playbook</a> can bring to the table to gauge if the iPad has a real competitor which can make my fiancée happy!</p>
5 Rules for a great workspace2010-10-01T00:00:00Zhttps://www.steveworkman.com/2010/5-rules-for-a-great-workspace/<p><a href="https://www.steveworkman.com/static/img/156005025.jpg"><img src="https://www.steveworkman.com/static/img/156005025.jpg" alt="My back garden office" title="My back garden office" loading="lazy" /></a></p>
<p>I started writing this post about a month ago whilst sat in the back garden of a friend's house. I wasn't actually thinking of much, but the environment allowed me to think clearly and freely. For reference, I was in the garden pictured above, and there wasn't just one of those gorgeous dogs, there were three!</p>
<p>Since that time I've been thinking more about workspaces, and I've come up with some golden rules for a good office for me. I must stress that this works for me, and may or may not work for you.</p>
<p><strong>Rule 1: as few interruptions as possible</strong></p>
<p>I had had a good afternoon in the garden, silent apart from the birds singing, and plenty of tea in the kitchen. I was getting a lot of good thinking done and I was starting to get it down on paper. My only problem was three lovely four-legged distractions. One of them wanted me to throw a stone every 5 minutes and would bark if I didn't. The further I threw it, the longer a break I got. If I threw it out of sight, she'd come back with a different stone after giving me nearly 15 minutes of uninterrupted peace as a reward for my good throw.</p>
<p>The more I think about my workspace, the more important a lack of interruptions becomes. A place where a person can think, exclusive of noise and distractions is conducive to creativity and great work. Someone speaking to you engages the language part of your brain (the left hemisphere). This generally dominant part stops the creative half of your brain (the right hemisphere) in its tracks and it can take a few minutes to re-engage this half your brain.</p>
<p>Now, in my opinion, coding is a creative task like drawing, and not a language or logical task. I've noticed this recently as I've been reading "<a href="http://amzn.to/9EJWx1">Drawing with the right side of the brain</a>" in an attempt to learn to draw. The book describes giving the language center of your brain a task it rejects in order to engage the right, more creative, hemisphere. As I've been doing this with drawing, I've noticed I do exactly the same thing when I'm engrossed in coding. The book recommends as few interruptions as possible when drawing, and so I recommend the same when working.</p>
<p><strong>Rule 2: a clear desk is a clear mind</strong></p>
<p>Once again, on the subject of distractions, having too much junk on your desk is conducive to procrastination, the enemy of getting things done. I personally tend to tidy, play with my iPad, sketch something, all generally whilst I'm waiting for something to load (I'll come to that later). This also relates to any application that sends you messages. I'm a sucker for having GTalk, DestroyTwitter and Outlook open on my laptop as well as the company messaging system. It's a blessing that most of my e-mail is mailing list stuff that I can ignore and that DT has an "away" function that queues up tweets for when I need a break or I'd get nothing done.</p>
<p><img src="https://sphotos.ak.fbcdn.net/photos-ak-ash1/v299/48/82/539833614/n539833614_1239678_7482.jpg" alt="My cluttered desk" title="My cluttered desk" loading="lazy" /></p>
<p>For instance, look at the picture above. This is me in 2007, not long after I'd started working at my current employer. I'm not following any of my rules here and I'm amazed that I got much done at all. The following things are wrong:</p>
<ol>
<li>My desk is a mess, there's paper all over the place and I have to rummage through things to find what I'm after</li>
<li>I have two notepads in front of me, that's one too many</li>
<li>There's another laptop behind me with my work e-mail. This is so far out of my way for looking at my main screen that I disconnect from my task every time the laptop screen flickers</li>
</ol>
<p>I've learned a lot since then and now my desk is a lot clearer with fewer distractions.</p>
<p>So, a new policy, my desk shall be clear and the only apps open shall be the ones that I am working with directly.</p>
<p><strong>Rule 3: I must have a wall, it stores the ideas too big for my head</strong></p>
<p>This one may seem odd, but I have to have a wall for me to put design work on. If I don't get some place for me to stick my database diagrams and wireframes, even if it's just the little partition between my desk and the next, I won't be able to see the big picture.</p>
<p>One of my jobs back in 2009 was up in Sheffield, where a team of four were trapped in a tiny glass box in the middle of a floor of people. Crampt conditions and general overheating weren't the best when all of us were in the room, but since we didn't have any desk space, we all used the walls and shared ideas. The result was a well thought-out system which was hugely well received by the client, all because we could see the big picture.</p>
<p>On other projects where I've not had access to a permanent wall, I've simply worked from home where I have a whiteboard (which I've had since uni). Giving myself the freedom to work in large spaces always produces my most creative and thought-out work.</p>
<p><strong>Rule 4: equipment is just as important as space</strong></p>
<p>Recently my desk and office have been brilliant, I'm following my rules and they're working. However, I'm falling into an old trap, doing something else whilst the system loads. Unfortunately for me, the system needs to take a 30 second break every time I move the cursor (no prizes for guessing what tech I'm using) and hence I'm taking 30 seconds out to do other stuff, like get distracted by twitter.</p>
<p>The rule here is that your equipment is important. If you're having to compromise and work around issues which allow you to lose concentration, be it a rubbish laptop or running out of sharpies, then you have to correct that. I'd never dream of doing iPhone development on my 2006 macbook, it's simply not fast enough and would annoy me more than the task would be worth. Get the most powerful computer you can afford, it will make your life so much easier in the long run.</p>
<p><strong>Rule 5: keep yourself happy</strong></p>
<p>This last rule is the hardest to achieve, but will do the most for your productivity. My team, my colleagues and with few exceptions my friends, are not only there to work with me, but to keep each other happy.</p>
<p>An example from a project in late 2009, this time 12 people crammed into a room for 10; desk space at a premium, we were all in the same boat, and we kept each other going. The team dynamic was good because we were all working on something that we knew was important to the client and we were happy to work all sorts of hours to make it work. We also had an assignment manager who bought chocolate and sweets by the boat-load whenever morale started to waiver. Lunch was taken together and trips to the pub were highly encouraged. We were happy, and so we worked hard.</p>
<p>It is important for your health, not just your productivity, that you're happy at work. Take breaks when you want, not when you're distracted by someone. Build up a relationship with your colleagues where you can talk about anything, not just about work all the time, and have some fun!</p>
<p>These are my rules that I've come up with for a more productive place of work. I'm not saying they're right, but they work for me.</p>
<p><em>What are your rules for a productive workspace? I'd love to hear your suggestions and advice. Just leave a comment below.</em></p>
A Web Sized Education Problem at LWSEdu2010-10-19T00:00:00Zhttps://www.steveworkman.com/2010/a-web-sized-education-problem-at-lwsedu/<p>This month at london web standards, Opera's Chris Mills (<a href="http://twitter.com/chrisdavidmills">@chrisdavidmills</a>) and <a href="http://maban.co.uk/">Anna Debenham</a> (<a href="http://twitter.com/anna_debenham">@anna_debenham</a>) came down to talk to us about education and the web. Chris talked about the state of adult and professional education.</p>
<p><a href="https://www.steveworkman.com/static/img/a-web-sized-education-problem-lwsedu.jpg"><img src="https://www.steveworkman.com/static/img/a-web-sized-education-problem-lwsedu.jpg" alt="A web sized education problem at LWSEdu" title="a-web-sized-education-problem-lwsedu" loading="lazy" /></a></p>
<p>Chris talked about certificates and courses in web design. Most computing courses are little or no better than the GCSE courses, teaching the very basics of HTML markup, and then all the way to E-commerce without teaching the middle. Many of these courses were written 10-15 years ago and still have the hangovers of the pre-CSS era.</p>
<p>Things that must be eradicated from web education:</p>
<ol>
<li>Tables as layout, spacer.gif, inline javascript</li>
<li>Resources on HTML3 and Netscape</li>
<li>Courses that try to fly before crawling</li>
<li>Dumb sysadmin policies (lock into IE6)</li>
</ol>
<p>There are solutions:</p>
<ul>
<li><a href="http://www.opera.com/company/education/curriculum/">The Web Standards Curriculum</a> (Opera)</li>
<li><a href="http://interact.webstandards.org/">WaSP InterACT</a></li>
<li><a href="http://www.webstandards.org/action/edutf/">WaSP Education Task Force</a></li>
<li><a href="http://www.amazon.co.uk/gp/product/0321703529?ie=UTF8&tag=stevwork-21&linkCode=as2&camp=1634&creative=19450&creativeASIN=0321703529">Interacting with web standards</a> (book)</li>
<li>Mozilla portfolio project - students projects are marked by professionals and portfolios created.</li>
<li><a href="http://www.w3.org/2005/Incubator/owea/">Open Web Education Alliance</a> (OWEA)</li>
</ul>
<p>We need to teach the tools to learn, rather than teaching someone an evolving field. Web design is not like computer science, where underlying principles can be easily taught, it's an art form.</p>
<p>So, web community, reach out, create resources for learning and teach people how to teach themselves.</p>
<p>The slides are up at <a href="https://www.steveworkman.com/2010/a-web-sized-education-problem-at-lwsedu/slideshare.net/Chrisdavidmills">slide share</a></p>
Tales from the Trenches at LWSEdu2010-10-19T00:00:00Zhttps://www.steveworkman.com/2010/tales-from-the-trenches-at-lwsedu/<p>This month at london web standards, Opera's Chris Mills (<a href="http://twitter.com/chrisdavidmills">@chrisdavidmills</a>) and <a href="http://maban.co.uk/">Anna Debenham</a> (<a href="http://twitter.com/anna_debenham">@anna_debenham</a>) came down to talk to us about education and the web. Anna has recently been through the UK education system and had her tales from the trenches of what it's really like to be educated in the web at school.</p>
<p><a href="https://www.steveworkman.com/static/img/tales-from-the-trenches-lwsedu.jpg"><img src="https://www.steveworkman.com/static/img/tales-from-the-trenches-lwsedu.jpg" alt="Tales from the Trenches at #LWSEdu" title="tales-from-the-trenches-lwsedu" loading="lazy" /></a></p>
<p><strong>Curriculum</strong> ICT education on the web and making web sites is awful. Since 2003, ICT has been mandatory at key stage 3 and 4 (SATS and GSCEs or ages 14 and 16 (ish)). Over the past few years, the curriculum has been so basic that children often know more than their teachers. This isn't the teacher's fault.</p>
<p>Anna showed us some of the resources teachers are given and one of the bits of coursework. The website was for the band "purple spiders" and consisted of some images, links and a purple background colour. Seriously, it was as basic as that. There were form pages with no submit button. Music download pages that said if you downloaded music you were a criminal.</p>
<p><strong>Software</strong> Teachers have a certain amount of recommended software, and principally it's MS Office. If it's not on the list they don't get funding for it. Almost zero open source software is to be found. Every course told you to use tables for layout, because that's what the software can do well. Ofsted, the teaching governing body, recognise that ICT is misused.</p>
<p>EdExcel, the examining body, seem to be rising above this. Their 2011 curriculum has encouraging statements like "knowledge of accessibility" and "creative commons".</p>
<p><strong>Age perception</strong> Anna talked about the perception of age in the web world. There are many success stories, including <a href="http://ma.tt/">Matt Mullenweg</a> creating Wordpress before his 18th birthday. However, there is a general bias against young people in that experience counts in web design.</p>
<p>Anna also taught us that Flash is terrorism. She put a flash-based interactive room map of her school on their web site which they wouldn't allow because "it would aid terrorism". You heard it here first.</p>
<p><strong>How to help</strong> So, what can we do? Courses need to be made more interesting and relevant. Whilst "common software" like Office won't go away any time soon, the teachers need better resources, and importantly, better tools. Adobe can help here, and so can Microsoft, making their most common tools more web-standards oriented.</p>
Real-time Analytics2010-10-25T00:00:00Zhttps://www.steveworkman.com/2010/real-time-analytics/<p>There are loads of good reasons to look at and study users visiting your site: entrance points, pages visited, time spent reading, adverts clicked etc. Google Analytics (GA) provides a great free service for this and can't really be faulted considering how much traffic it is receiving.</p>
<p>Still, GA only provides averages, aggregates and tries to show a typical user, rather than individuals, nor does it handle JavaScript-heavy pages or AJAX very well, and you also have to wait until the morning to get traffic stats on your site.</p>
<p>So, today I've been looking at real-time solutions, and I've come up with a few.</p>
<p><strong>Reinvigorate</strong> (<a href="http://www.reinvigorate.net/">www.reinvigorate.net</a>)</p>
<p><a href="https://www.steveworkman.com/static/img/summary.jpg"><img src="https://www.steveworkman.com/static/img/summary.jpg" alt="Reinvigorate.net summary" title="Reinvigorate.net summary" loading="lazy" /></a></p>
<p>Reinvigorate gives you a few features the others can't, such as named user tracking and detailed stats about those users (which pages they visited, in which order and how long they spent on each page). The heatmaps are great, tracking any click (though take some time to generate) and the dashboard updates instantly. It's also pretty cheap given how powerful it is.</p>
<p><strong>ChartBeat</strong> (<a href="http://chartbeat.com/">chartbeat.com</a>)</p>
<p><img src="https://static.chartbeat.com/dashboard2/tour/chartbeat_tour1_screen1.png" alt="ChartBeat summary screen" title="ChartBeat" loading="lazy" /></p>
<p>ChartBeat works in a similar way to Reinvigorate, giving detailed real-time traffic analysis of your site. Its detailed and flexible dashboard gives you instant feedback on which of your pages are popular at a certain time. It's also got a good API and an iPhone app to keep you informed on the move.</p>
<p><strong>UX Tools</strong></p>
<p>Arran Ross-Patterson (<a href="http://twitter.com/arranrp">@arranrp</a>) sent me this <a href="http://www.delicious.com/arranrp/analytics">bookmark list of analytics solutions</a> over Twitter, of which <a href="http://www.mouseflow.com/">MouseFlow</a> and <a href="http://www.clicktale.com/">ClickTale</a> looked very promising. These are tools designed to record all movements on the screen over the browser and be able to play them back to the developer, effectively performing silent usability tests. If anyone has any experience using these, please let me know.</p>
<p>So, for now, I'm using Reinvigorate, but I'm sure there are others out there. Let me know what you're using in the comments.</p>
Interesting North2010-11-15T00:00:00Zhttps://www.steveworkman.com/2010/interesting-north/<p>On my way to see some friends in Sheffield, tweeting away on the train, <a href="http://twitter.com/chrismurray0">Chris Murray</a> offered me a ticket for <a href="http://www.interestingnorth.com/">Interesting North</a> as a way out of going shopping with the missus and her friends.</p>
<p>Jumping at the chance, I had a great time, learned a lot and laughed a lot. I made some notes and sketches, so take a look. Have a laugh at the "daft novels about nazis" (morning sketch at the bottom), they were brilliant.</p>
Real World HTML with Marcus Alexander -2010-11-16T00:00:00Zhttps://www.steveworkman.com/2010/real-world-html-with-marcus-alexander/<p>This month, Marcus Alexander of EMC Consulting and <a href="http://twitter.com/arranrp">Arran Ross-Paterson</a> (of this parish) talk about HTML in the real world, dealing with clients, and what a quality project actually looks like.</p>
<p><a href="https://www.steveworkman.com/static/img/LWSWorld-Marcus-Alexander.png"><img src="https://www.steveworkman.com/static/img/LWSWorld-Marcus-Alexander.png" alt="" title="LWSWorld - Real world HTML - Marcus Alexander" loading="lazy" /></a></p>
<p><strong>Everything is designed that way for a reason</strong> Semantic HTML may be brilliant, but all those extra bits are in there for a reason. Until you understand them, don't mess with them</p>
<p><strong>The best solution is the one that meets the requirements</strong> Clients don't really care about the technology, just about getting things done on time and on budget. If a solution meets all the requirements, it doesn't matter how hacky it is, it's the right solution.</p>
<p><strong>Ask the right questions up front</strong> The client may not have thought of everything, so go through your standard checklist of questions and get everything agreed before you start.</p>
<p><strong>Bugs happen, deal with it</strong> 100 bugs in a project is normal, most of them will be problems with other people's code. Deal with them and try not to let the client get carried away. Products will ship with bugs, just deal with them.</p>
<p><strong>Developers will build a rocket ship to get to Ikea</strong> And then they'll only leave room in the rocket for a hot dog and some light bulbs. Internal coding standards aren't very useful, try code reviews and examples of structure instead.</p>
<p><strong>Deployment scripts are your friend</strong> They do all the grunt work for a release for you. Make use of ANT or MSBuild to speed things up.</p>
<p>Finally, thanks to Marcus for a great talk. Update: his slides are on slideshare: <a href="http://slidesha.re/980xv4">http://slidesha.re/980xv4</a> See my notes on this meetup's other talk: <a href="https://www.steveworkman.com/?p=558">Arran Ross-Paterson on Why validate</a></p>
Why Validate? - Arran Ross-Paterson2010-11-16T00:00:00Zhttps://www.steveworkman.com/2010/why-validate-arran-ross-paterson/<p>This month, Marcus Alexander of EMC Consulting and <a href="http://twitter.com/arranrp">Arran Ross-Paterson</a> (of this parish) talk about HTML in the real world, dealing with clients, and what a quality project actually looks like.</p>
<p>These are my notes on Arran's talk:</p>
<p><a href="https://www.steveworkman.com/static/img/LWSWorld-Arran-Ross-Paterson.png"><img src="https://www.steveworkman.com/static/img/LWSWorld-Arran-Ross-Paterson.png" alt="" title="LWSWorld - Why Validate - Arran Ross-Paterson" loading="lazy" /></a></p>
<p>Greeted by boos from the crowd, Arran's controversial talk focused on why we shouldn't worry that our web sites don't validate in the W3C checker.</p>
<p><strong>Validation</strong> Browsers don't care, nor does Google. Unless it's a requirement, just use it as a sanity checker. Your code doesn't always have to validate to be valid.</p>
<p><strong>Alt tags</strong> Alt tags never fully describe a picture. There's no point in having an alt tag on an image if it's not completely descriptive. If the image is just to attract attention, then don't worry. If it's an image map, you will need to add some more description.</p>
<p><strong>Calendars</strong> Calendars look like tables, but they could be a list, and surely it's ordered, but if you're doing an event calendar, a definition list is the most semantic markup, except that </p><dl>s are really hard to style and missing tags can cause problems. Having <dd> inside a </dd><dt> isn't correct according to the validator, but feels more correct semantically.<p></p>
<p><strong>Don't abandon standards</strong> Standards are very useful, so don't abandon them. They're great for learning and teaching people, to bring them up to a certain level, but as long as it works, don't sweat it.</p>
<p>Thanks again to Arran for his talk. See my notes tonight's other talk: <a href="https://www.steveworkman.com/?p=553">Marcus Alexander's on real world HTML</a></p>
</dt></dl>Why your workforce needs to be mobilised today2011-01-17T00:00:00Zhttps://www.steveworkman.com/2011/why-your-workforce-needs-to-be-mobilised-today/<p><a href="http://www.flickr.com/photos/yourdon/2715599454/"><img src="https://www.steveworkman.com/static/img/2715599454_ca105ab726_z.jpg" alt="Laptop man by Ed Yourdon" title="Laptop man" loading="lazy" /></a></p>
<p>I came up onto the District line platform at South Kensington station this morning just as a train pulled in. Normally, I would find my door (the one that opens straight onto the exit at Victoria) and jump in, but this time, whilst minding the gap, I brushed past a man trying to work on his laptop.</p>
<p>Seriously. A man trying to work on his laptop. Whilst stood up. On a busy rush-hour train in central London.</p>
<p>I was astonished at a few things:</p>
<ol>
<li>the man's ability to hold a 15" old-school laptop on a moving train</li>
<li>his lack of forethought in trying to edit a private word document on a very public train</li>
<li>his inability to use something more appropriate</li>
</ol>
<p>It's this last thing that really gets to me. At my work, I'm trying to bring my clients to the modern world by freeing their data and mobilising their workforce. This man exemplifies why I'm trying to do these things. It's simply not feasible to work on the move without a device built for mobility, and no, not even a Macbook Air would have been suitable for this kind of use. A 7 to 10 inch device would have worked, something that isn't going to endanger the passengers stood next to you if the train brakes suddenly, something that won't run out of battery before you get into the office. Yet, conversely, something that you can access everything you need at work from your device.</p>
<p>As the PunchCut blog said, "<a href="http://www.punchcut.com/perspectives/mobile-not-device-it%E2%80%99s-lifestyle">Mobile is not a device, it's a lifestyle</a>". Bosses: embrace this. Let your employees use their own phones and tablets to access data. If you don't let them, they will find a way around it because the busy people of this world simply can't work the old way any more: there's just too much to do.</p>
<p>This is the year that businesses should be unleashing their employees. Give them the freedom to work the way they want to (like working from home and flexi time have done) and they will pay dividends, simply by being happier. A happy employee is a productive employee, and when you let that happy employee out of the office, they will tell their friends and be happier still.</p>
<p>So don't let your employees be the ones stood on the tube holding a laptop, be the ones leaning by the doors, smiling at their iPad.</p>
Hardware, then UI, will drive mobile forward2011-02-16T00:00:00Zhttps://www.steveworkman.com/2011/hardware-then-ui-will-drive-mobile-forward/<p>It's Mobile World Congress 2011 this week, and amongst the throngs of Honeycomb tablets, Nokia and Microsoft square dancing on the showroom floor, there are a few announcements that may not be hugely exciting to the general public, but that the tech community should be giggling with glee about.</p>
<p>I'm talking about this:</p>
<p><a href="https://www.steveworkman.com/static/img/DSC_1401_sm.jpg"><img src="https://www.steveworkman.com/static/img/DSC_1401_sm.jpg" alt="Kal-El benchmark, courtesy of Anandtech" title="DSC_1401_sm" loading="lazy" /></a></p>
<p>This is Nvidia announcing the Kal-El SoC (System on Chip), a 12-core Tegra 2 GPU mixed with a quad-core ARM Cortex A9 CPU, all on one chip. Even better yet, this chip will be seen in tablet computers in <strong>6 months time</strong>. That's an incredibly aggressive timeline considering the brand new Tegra 2 chip is only 9 days old, and yet it's performance has already been doubled.</p>
<p>The even bigger news that has slipped by, is that that's not all.</p>
<p><a href="https://www.steveworkman.com/static/img/roadmap_sm.jpg"><img src="https://www.steveworkman.com/static/img/roadmap_sm.jpg" alt="Tegra 2 roadmap" title="roadmap_sm" loading="lazy" /></a></p>
<p>Notice the scale on the left hand side. Whilst the new chips are rising in a linear fashion, that's a logarithmic scale, so every year, these chips will double in power. By 2014, we should have SoCs in mobile computers that are 4 times as fast as a Core i7 CPU and 25 times faster than a Core2 Duo. That's an amazing amount of computational power in a chip the size of a peanut with a TDP of ~1W.</p>
<p><strong>Modern UIs need this power</strong> So what are we going to do with all this power? Whilst it'll be like having an XBox 360 in your pocket, games aren't the only thing that will use this power.</p>
<p>Just take a look at Microsoft's <a href="http://beautyoftheweb.com/">Beauty of the Web</a> demo site, showing off IE9's hardware acceleration enabling it to make blizzards with HTML5 web technologies. That's just the start of what we'll be able to do with this power. Think how useful Honeycomb's 3D Google maps will be, and think how it can be used to empower a mobile workforce, being able to take your entire desktop with you and have it work like your desktop pc. It will enable the mobile user to process huge data sets which previously would have been a server job, letting the workforce make complex decisions quickly and on the move.</p>
<p>Of course, don't expect things to change overnight. The first things to happen will be "true" multi-tasking, then a proliferation of HD video including Skype. It's taken years for web developers to embrace CSS3 functions, it'll take another few years to truly embrace canvas, SVG and WebGL.</p>
<p><strong>The future vision is coming</strong> At CES 2009, Microsoft showed off a video for their Office of 2019 concept (below). The hardware announced today will drive this forward and enable developers to make these UIs of the future. I can't wait to be part of this future</p>
<p><lite-youtube videoid="XiqgmAYrd3c" style="background-image: url('https://i.ytimg.com/vi/XiqgmAYrd3c/hqdefault.jpg');"></lite-youtube></p>
<p>Images in this post are from <a href="http://www.anandtech.com/show/4181/nvidias-project-kalel-quadcore-a9s-coming-to-smartphonestablets-this-year">Anandtech.com</a></p>
Chrome or Opera2011-02-23T00:00:00Zhttps://www.steveworkman.com/2011/chrome-or-opera/<p><a href="https://www.steveworkman.com/static/img/opera-chrome.jpg"><img src="https://www.steveworkman.com/static/img/opera-chrome.jpg" alt="opera and chrome" title="opera-chrome" loading="lazy" /></a>I've been experimenting with browsers for the past few days. Ever since Firefox 4b11 blew up (literally couldn't do anything, even with a re-install) I've been playing with other browsers. I've been an Opera user since 9.5 and I've been very happy - but you can't help thinking, "is life greener on the other side of the fence? Is Chrome better?" So, I tried to answer that</p>
<p>No, it's not.</p>
<p>After setting my default browser to Chrome 10 dev channel, I set about finding extensions to match what Opera gives you out of the box. I end up with the speed dial, gesture and colour picker extensions, as well as a funny little flag icon that is supposed to tell me where a server is from, but doesn't work. Overall, none of these extensions were as good as Opera's default functionality. The speed dial slowed my computer down more than sped it up and it didn't have the Ctrl+(num) navigation that I love so much. The gesture plugin was good but not as quick as Opera. The colour picker was fine and matched Dragonfly fine.</p>
<p>Just, in general, browsing seemed slower. Tabs seemed slower to change and page rendering wasn't as smooth. Font rendering wasn't as smooth and, although it was GPU accelerated, didn't feel right.</p>
<p>So, what was better in Chrome? Well, the web inspector has a better UI, but Dragonfly has come on leaps and bounds in terms of performance. Neither of them are as good as Firebug, but web inspector currently trumps Dragonfly. To be honest, that's about it. The Omni-bar is good but just as good as Opera's. Weirdly, Chrome works better on my company's network. I guess software designed for windows just understands NTLM authentication better than browsers designed for Unix.</p>
<p>So, for me it's back to Opera. Have a go with both yourself, <a href="http://www.opera.com/browser">download Opera</a> and <a href="http://www.google.com/chrome">Chrome</a> today and see which you like best. Let me know in the comments.</p>
iPad 2 - the Porsche school of "all new design"2011-03-03T00:00:00Zhttps://www.steveworkman.com/ipad-2-the-porsche-school-of-all-new-design<p><a href="https://www.steveworkman.com/static/img/ipad2.png"><img src="https://www.steveworkman.com/static/img/ipad2.png" alt="iPad 2 - an "all new design"" title="iPad 2 - All new Design" loading="lazy" /></a></p>
<p><strong>The iPad 2 may be an "all new design", but Apple</strong> <strong>attended the same school as Porsche, making few changes on the surface and lots under the hood.</strong></p>
<p>Does anyone here own a Porsche? No, me neither. However, I have been lucky enough to have driven one and I watch top gear all the time (which clearly makes me an expert in such matters). I can confidently say that since 2003, two "new" Boxster models have been released, and the shell shape, which apparently is better than ever, has not changed. In the same way, the <a href="http://www.apple.com/ipad">iPad 2</a> is a complete redesign, and yet nothing has really changed. Though that's not a bad thing.</p>
<p>What changed on the Boxster is the same that has happened on the iPad, the engine and electrics got a big tweak, and it's whats under the hood that really matters.</p>
<p><a href="https://www.steveworkman.com/static/img/white-2010-porsche-boxster.jpg"><img src="https://www.steveworkman.com/static/img/white-2010-porsche-boxster.jpg" alt="White 2010 Porsche Boxster" title="white-2010-porsche-boxster" loading="lazy" /></a></p>
<p>For the iPad, they have a new processor, the heart of the beast. It is (likely to be) a ARM Cortex A9 dual core CPU, meaning it can multi-thread better and reduce power consumption per calculation thanks to architecture improvements. This gives it the same 10 hour battery life as the old model. That means it's faster too, a bit like every new Porsche is faster than the last. It's also a bit lighter, thanks to improved manufacturing processes meaning they can get rid of the wall and taper the edges of the device. it's not a big improvement there, only 60g saved, but the feel of the thing has changed for the better, another thing that Porsche will tell you makes the new model an essential purchase.</p>
<p>Yes, the iPad 2 has new features: the cameras and gyroscope. However, these are sanity factors and the iPad is simply catching up with it's older siblings. There was nothing unexpected in the announcement, a very nice looking cover and an HDMI connector being welcome but nothing out of the ordinary. This is very much a "<a href="http://www.anandtech.com/show/2722/4">tock</a>" product, with the innovation to come in the next version.</p>
<p><strong>Is it worth it?</strong> Is it an essential purchase? Well, like with the Porsche, if you already have one and want a new one, you have more money than sense. But if you don't, like all Porsches, it's very, very tempting and will make you the envy of your friends for the next 6 months until the next one comes out</p>
Javascript Fun at London Web Standards2011-04-12T00:00:00Zhttps://www.steveworkman.com/2011/javascript-fun-at-london-web-standards/<p>Last night was <a href="http://www.londonwebstandards.org/">London Web Standards</a>' April 2011 event, Fun with JavaScript. Speakers <a href="http://twitter.com/robhawkes">Rob Hawkes</a> of Mozilla and <a href="http://twitter.com/seb_ly">Seb Lee-Delisle</a> of Plug-in Media came to talk about all the fun stuff you can do with JavaScript, canvas, and HTML5. Sketchnotes for both talks are below.</p>
<p>We were also joined by a man showing us a quick look at Dreamweaver CS5.5 with it's new HTML5 features. Unfortunately, the software had a few bugs which showed up in the talk, and after being burned by the very expensive adobe software for years, the crowd didn't take to the UI very well, which wasn't helped by a low-res projector. Still, it looks like a big improvement over the old version, but I'll still use Coda when on my Mac.</p>
<p><strong>Rob Hawkes: multiplayer gaming in HTML5</strong></p>
<p><a href="https://www.steveworkman.com/static/img/LWSFun-Rob-Hawkes.png"><img src="https://www.steveworkman.com/static/img/LWSFun-Rob-Hawkes.png" alt="Sketchnotes of Rob Hawkes' talk Multiplayer Gaming with HTML5" title="LWSFun - Rob Hawkes" loading="lazy" /></a></p>
<p>Rob is a canvas and animation guru. He's not far out of uni and has a book out this month! He gave a new talk on multiplayer gaming, and how it was possible in HTML5.</p>
<p>Basically: Canvas + Websockets + a server (rob recommended Node.js) = multiplayer gaming on the web.</p>
<p>Rob didn't go into much detail as to how to do all this, just talked us through the principles of what you should be doing, what you should avoid, how to prevent cheating and simple tricks to improve performance.</p>
<p>At the end, Rob proposed a HTML5 gaming knowledge repository, a community wiki and tutorial site, so that it's easier for people to learn. Someone at the event will take him up on the offer, so look forward to more things soon!</p>
<p>Rob has a book on <a href="http://www.friendsofed.com/book.html?isbn=9781430232919">Foundation HTML5 Canvas: Gaming and Entertainment</a> for <a href="http://amzn.to/gIdIQa">pre-order on Amazon.co.uk</a></p>
<p><strong>Seb Lee-Delisle: Fun with JavaScript</strong></p>
<p><a href="https://www.steveworkman.com/static/img/LWSFun-Seb_ly.png"><img src="https://www.steveworkman.com/static/img/LWSFun-Seb_ly.png" alt="Sketchnotes for Creative JS visual effects – Seb Lee-Delisle" title="LWSFun - Seb_ly" loading="lazy" /></a></p>
<p>Seb is a flash guy, but also a JavaScript guy and a graphics guy. He's so multi-talented that he doesn't know what exactly he does any more.</p>
<p>Seb has won two BAFTAs (thanks for correcting me Seb!) for some of his BBC kids web sites. He personally runs a javascript graphics workshop and took us through a few things that we'd do if we went on it.</p>
<p>He started with particles, showing us how to do basic (pseudo) physics in canvas and JavaScript. He then broke out his large array of particle demos, showing how complex effects can be produced with very simple code.</p>
<p>Seb then talked about performance, and how bad canvas is at the moment. DOM elements with hardware acceleration is easily twice as fast as canvas, especially on the iPad. The iPad's saving grace is its touch screen, which can take 11 touch points (just in case we grow an extra finger). Seb created a simple asteroids game using touch events for input.</p>
<p>Seb finally talked about 3D and how using libraries was a great way to go from 2d to 3D very simply. He recommended Unity as a game engine and framework of choice, and they're building HTML5 renderers on top of their regular OpenGL and DirectX methods. Exciting stuff indeed.</p>
Future of Web Design Sketchnotes - Day 22011-05-19T00:00:00Zhttps://www.steveworkman.com/2011/future-of-web-design-sketchnotes-day-2/<p>Over the last few days I attended the Future of Web Design conference in central London. It was a great two days meeting some of my peers and heroes of web design. Here's my notes from Day 2, featuring <a href="http://twitter.com/beep">Ethan Marcotte</a>, [Femi Adesina](<a href=), <a href="http://twitter.com/globalmoxie">Josh Clark</a>, <a href="http://twitter.com/brucel">Bruce Lawson</a>, <a href="http://twitter.com/thebeebs">Martin Beeby</a> (from #LWSIE the day before), <a href="http://twitter.com/elliotjaystocks">Elliot Jay Stocks</a>, <a href="http://twitter.com/sarahbeee">Sarah B Nelson</a> and once again, <a href="http://twitter.com/globalmoxie">Josh Clark</a>!</p>
<p><a href="https://www.steveworkman.com/web-design/2011/future-of-web-design-sketchnotes-day-1-2/" title="Future of Web Design Sketchnotes – Day 1">Sketchnotes for Day one can be found behind this link</a>.</p>
<p>Thank you once again to everyone involved.</p>
Future of Web Design Sketchnotes - Day 12011-05-19T00:00:00Zhttps://www.steveworkman.com/2011/future-of-web-design-sketchnotes-day-1/<p>Over the last few days I attended the Future of Web Design conference in central London. It was a great two days meeting some of my peers and heroes of web design. Here's my notes from day 1 including talks from <a href="http://twitter.com/aarron">Aaron Walters</a>, <a href="http://twitter.com/mikekus">Mike Kus</a>, <a href="http://twitter.com/rachelandrew">Rachel Andrew</a>, <a href="http://twitter.com/usa2day">Robin Christopherson</a>, Daniel Rhatihgan, <a href="http://twitter.com/sazzy">Sarah Parmenter</a>, <a href="http://twitter.com/danrubin">Dan Rubin</a>, <a href="http://twitter.com/coldfumonkeh">Matt Gifford</a> and <a href="http://twitter.com/aral">Aral Balkan</a>.</p>
<p><a href="https://www.steveworkman.com/web-design/2011/future-of-web-design-sketchnotes-day-2/" title="Future of Web Design Sketchnotes – Day 2">Day 2 sketchnotes can be found behind this link.</a></p>
The Limitations of WebSQL and Offline apps2011-06-08T00:00:00Zhttps://www.steveworkman.com/2011/the-limitations-of-websql-and-offline-apps/<p>Web applications are the next big thing in the web. Being able to take web sites and make them run alongside native apps, having them work offline and perform just as well as their native counterparts is the next step along the road. As usual, with all new technology, there are some limitations.</p>
<p>There are three pieces of technology that are combined to make a web app: app caching, local storage and a web database technology.<br />
App caching tells browsers what files to store offline and retrieve from disk. These are permanently stored until new instructions are received, unlike traditional caching which works until the cache is full, then starts removing files.</p>
<p><strong>Limitation 1</strong><br />
In iOS 4.3, app caching for offline web apps is broken and does not work.</p>
<p>Local storage is for key/value pairs of information. It's for simple things like settings and values that need to be retrieved quickly. It's been called "cookies on crack" before, but it's really just a very fast dictionary for simple data.</p>
<p><strong>Limitation 2</strong><br />
Depending on your browser, localStorage will keep 5-10MB of data, the equivalent of 200,000-500,000 characters. If all you want to do is store small serialised JSON objects that aren't related, use this.</p>
<p>Web databases are client-side data storage for larger amounts of more complex data. Whilst you can make web apps with just app caching and local storage, it's not going to be very interactive, or the data may be unstructured, or there will be lots of Ajax calls to fetch data. Web databases are where this technology gets a bit dodgy.</p>
<p>Originally, there was Google Gears, a plug-in which brought a SQLite database to help web apps run offline. This was then standardised into the WebSQL module and developed as a SQL database available through JavaScript. Google, Apple and Opera all implemented it and it can be found in iOS and Android devices today.</p>
<p><strong>Limitation 3</strong><br />
Chrome has a hard 5MB database size limit - you will need to use a chrome web app to remove this limit.<br />
<strong>Limitation 4</strong><br />
Chrome doesn't support OUTER JOIN or RIGHT JOIN statements.<br />
<strong>Limitation 5</strong><br />
Debugging is very difficult with large amounts of data as the web inspector isn't efficient at displaying a thousand rows (and will crash with around 20,000 rows, around 2MB of data).<br />
<strong>Limitation 6</strong><br />
Version numbers are not taken into account. Don't bother with them.<br />
<strong>Limitation 7</strong><br />
All calls are asynchronous - if you rely on results at a certain time, be prepared to write a lot of callback functions. Your code can get messy very quickly.<br />
<strong>Limitation 8</strong><br />
Performance is sluggish if you don't batch up statements into transactions.</p>
<p>Even better still, WebSQL is no longer in development, so these problems will remain. Microsoft and Mozilla said they didn't like it and wanted to used a different technology: IndexedDB.</p>
<p>IndexedDB is on it's way, but not mature enough yet to be used, nor is it implemented in any of the mobile browsers.</p>
<p><strong>Advice</strong><br />
For offline apps, you're better sticking with WebSQL until IndexedDB matures.</p>
<p>Hopefully, some kind developer will come along and write a technology-agnostic wrapper, maybe that person will be you, the reader of this article. If you're thinking about it, let me know :-)</p>
Responsive web design in practice - making Steve and Emily's Wedding.co.uk2011-06-17T00:00:00Zhttps://www.steveworkman.com/responsive-web-design-in-practice-making-steve-and-emily-s-wedding-co-uk<p>Over the last few months I've been making a web site for my wedding. Emily (my fiancée) and I didn't want your run-of-the-mill wedding website, hosted by someone on an unrecognisable domain (for example, <a href="http://www.ewedding.com/themes.php?page=1">ewedding.com</a> or <a href="http://www.gettingmarried.co.uk/examplesites.php">gettingmarried.co.uk</a> sub-domains). I wanted something that I had control over, that I could make as the perfect website for us, not a nice template that thousands of others have. We wanted something personal.</p>
<p>Secondly, these pre-packaged themes aren't suited to modern web standards. They just-about work on small screens, and quite a few of them use flash, or they take 5-10 seconds to load (lots of people, heavily shared servers, you do the math). Don't get me started on the ones that play music in the background.</p>
<p>So I started with a solid foundation of responsive web design and HTML5. This is how I did it.</p>
<p><a href="https://www.steveworkman.com/static/img/steveandemilyswedding.jpg"><img src="https://www.steveworkman.com/static/img/steveandemilyswedding.jpg" alt="Steve an Emily's Wedding homepage" title="Steve an Emily's Wedding homepage" loading="lazy" /></a>The spine of this site is:</p>
<ul>
<li><a href="http://www.wordpress.org/">Wordpress</a> for the CMS</li>
<li><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and up</a> for layout</li>
<li><a href="http://www.fontsquirrel.com/fonts/Tangerine">Tangerine</a> and <a href="http://www.fontsquirrel.com/fonts/Scriptina">Scriptina</a> font</li>
<li><a href="http://html5doctor.com/go-offline-with-application-cache/">Appcache</a> to increase performance</li>
</ul>
<p><strong>Wordpress</strong> I used wordpress because it's easy to make great themes quickly. You've got full control of the output in a simple CMS. Job done, but for one thing: the default theme doesn't use HTML5 semantics. I took the <a href="https://github.com/iamamused/wp-theme-html5-boilerplate">Wordpress html5 boilerplate</a> from Jeffrey Sambells and used that as my base, giving me a good template for responsive web design.</p>
<p><strong>320 and up</strong> The choice of layout framework, 320 and up, comes from seeing <a href="http://www.abookapart.com/products/responsive-web-design">Ethan Marcotte</a> present at <a href="http://futureofwebdesign.com/london-2011/">Future of Web Design</a>, showing off the <a href="http://boston.com/">Boston.com</a> re-design. I thought it was a wonderful talk and seeing how a site responds to screen size and context on such a high profile site made me rethink my views on responsive design. I used to think that for large, image-heavy sites, it just wasn't economical to make a site work with media queries. It's a change in mind-set to design for mobile first. Thinking like that, instead of retrofitting a smaller design onto your UI, makes the whole proposition a lot more appealing. <a href="http://twitter.com/malarkey">Andy Clark</a> took this concept and made a framework out of it, and that is 320 and up.</p>
<p>320 and up works on the principle that you code a mobile site, and layer additional layout on top with media queries for each of the sizes you want to support. Coding this way also makes you very aware that the content is very much the purpose of the site, and that nothing should be left out, no matter what screen size you're on.</p>
<p>Adding 320 and up to the HTML5 Wordpress baseline wasn't as easy as I'd have liked. No offence to Malarkey, but you don't need all of the 320 framework to make a great site, so I cut a number of the hacks out and updated the respond.js library. Still, it solves many of the gotchas for you, so use it :-)</p>
<p>320 and up has these screen size stops built in: 480, 768, 992, 1182, and a high-dpi option for retina displays . For my this site, I added in 768 and orientation: portrait to deal with iPad portrait mode problems. It's up to you what stops you use, but these worked for me. If you want to support the galaxy tab and other screen sizes, more media queries are easy to add in.</p>
<p><a href="https://www.steveworkman.com/static/img/saew480.jpg"><img src="https://www.steveworkman.com/static/img/saew480.jpg" alt="Steve and Emily's Wedding at 480px" title="Steve and Emily's Wedding at 480px" loading="lazy" /></a> <a href="https://www.steveworkman.com/static/img/saew1024.jpg"><img src="https://www.steveworkman.com/static/img/saew1024.jpg" alt="Steve and Emily's Wedding at 1024px" title="Steve and Emily's Wedding at 1024px" loading="lazy" /></a> <a href="https://www.steveworkman.com/static/img/saew1200.jpg"><img src="https://www.steveworkman.com/static/img/saew1200.jpg" alt="Steve and Emily's Wedding at 1200px" title="Steve and Emily's Wedding at 1200px" loading="lazy" /></a></p>
<p><strong>The Design</strong> There's a lot of CSS3 that's gone into this site. The background and header uses CSS3 multiple backgrounds to allow the layout to flex without the overhead of another div to layer the extra backgrounds on. <em>Note, I did chicken out and add those extra divs in as it just didn't look as good on IE7/8 and that's what 30% of people are using on my this site.</em></p>
<p>The font choice was very important for me and Emily, and <a href="https://www.fontsquirrel.com/">FontSquirrel</a> came to the rescue. It's got a great selection of script fonts that just aren't available in the standard set that comes with computers these days. Text shadow adds to the effects but isn't essential, so it doesn't look out of place on IE.</p>
<p>My use of box shadow is basically in place of borders. It makes the whole theme pop off the page with slight shadows and a red tint that matches the theme really well. However, <strong>box shadow on the iPhone and small screen devices slows down scrolling, and should be used sparingly. Lovingly</strong>, responsive web design lets me turn it off for small screens :-)</p>
<p>There's lots of other little things, like using CSS3 selectors so that class names don't have to be used all the time, and some nice stuff for the first letter, and also border radius (as standard).</p>
<p><strong>Performance</strong> The site uses appcache to speed up the site loading, and it makes a massive difference. The cache is around 1MB, that's data I'll never have to download again. It works on all of the latest browsers and mobiles (where is makes the most difference). I can't recommend it enough.</p>
<p>For the useful information section, I used local storage to keep the different sections open/closed so that it's the same when you come to the page next time.</p>
<p><a href="https://www.steveworkman.com/static/img/Screen-shot-2011-06-16-at-23.30.07.png"><img src="https://www.steveworkman.com/static/img/Screen-shot-2011-06-16-at-23.30.07.png" alt="Site performance" title="Site performance" loading="lazy" /></a></p>
<p><strong>Summary</strong> In summary, this site has allowed me to showcase responsive design, mobile first, lots of CSS3 and make it work in IE7/8. Take a look at the source code, and learn. Oh, and wish us well on our wedding :-)</p>
Retrospective - Apple product prediction2011-07-22T00:00:00Zhttps://www.steveworkman.com/2011/retrospective-apple-product-prediction/<p>Well over a year ago, I wrote an article on the regulated rigidness that is Apple's product release cycle. I mapped out the next two years of Apple's product launches down to the month, and it has been the most viewed post on my blog for the entirety of last year, even eclipsing Smashing Mag calling my bookshelf "rough". nearly 40% of all page views were for that and over 80% of searches led to that page</p>
<p>So, looking back on what I wrote, was I right? Does it even matter?</p>
<p>Was I right?</p>
<p>Yes, most. Of the time. I predicted the iPhone, iPad, new iPods and 10.7 announcements very well. The iPhone 4 sdk announcement was spot on, but the ipad launch date was a bit off, as was the iPad 2 and iPhone 5 as well. I didn't see OS X 10.7 Lion coming so soon after it's announcement, given how long 10.6 took to release.</p>
<p>It seems that Apple have switched to an 18 month release cycle with it's more mature products like the iPhone. The iPad is still new so innovation and new features are simple, the iPhone is more difficult as there's very few extra sensors that they could add, so software and CPU/GPU components as well as the design of the device itself are the updates to be made. Significant changes like that take longer, so the 18 month cycle seems more reasonable.</p>
<p>What I got wrong or missed completely was more telling: I didn't get the iMac refresh or te MacBook pro or air updates. I also got iWork 2011 out by 6 months. Not brilliant form, but let me explain why they're out: Apple don't control them, Intel do.</p>
<p>Intel's processors are the main reason to get a new MacBook, they're certainly the biggest update in every generation. The recent addition of Thunderbolt ports and a bit more RAM isn't really a good reason to upgrade. Major design changes I.e. the unibody MacBook pro change or the nee design MacBook Air are harder to predict, but Intel makes it's roadmaps very clear. They go in an annual tick-tock pattern, new architecture on the tick then tweaks and enhancements to that architecture on the tock. Then it continues (like clockwork) with a new micro-architecture every 2 years. This means you get an updated MacBook every year, at almost the same time of year. The only time it misses is if Intel miss a deadline, and they've not done that for years.</p>
<p>So, what's the future? Pretty much the same as when I last wrote. Expect updates, regularly. As products mature, expect their release cycles to extend. New products get 12 months updates, then after a few years get 18 months updates until they are eventually discontinued. MacBook updates will continue to be in line with Intel processor updates.</p>
<p>And that is how Apple's release cycle works. Any questions, Tweet me or write a comment below.</p>
End of an era2011-08-18T00:00:00Zhttps://www.steveworkman.com/2011/end-of-an-era/<p>It's the end of an era for me. On Monday night, I got this e-mail from my old university hockey club</p>
<p><a href="https://www.steveworkman.com/static/img/email.png"><img src="https://www.steveworkman.com/static/img/email.png" alt="" title="Sheffield Hockey e-mail" loading="lazy" /></a></p>
<p>It's a sad time for me as <a href="http://www.sheffieldhockey.com/">www.sheffieldhockey.com</a> was my first big web project. Over the four years I was at uni, I re-wrote it three times. As I learnt more and more about programming, CSS, MVC and HTML, I discovered whole new things I could do. It was one of the first sites I'd seen that used Facebook to log people in, well before Facebook had a proper mechanism for allowing you to do that, and people loved it. It was my playground and now it is no more.</p>
<p>However, all is not lost. I've set up <a href="http://sheffieldhockey.steveworkman.com/">http://sheffieldhockey.steveworkman.com</a> to serve as a lasting memory of an awesome site. Joe, the new club captain, may still want to carry on with the site, get one of the freshers to, well, freshen it up. I'm hopeful that my gift to the club may continue to be used in some capacity, but, for now, it's gone.</p>
Tips and Problems when Enhancing SharePoint with JavaScript2011-08-23T00:00:00Zhttps://www.steveworkman.com/2011/tips-and-problems-when-enhancing-sharepoint-with-javascript/<p>If you've developed for Microsoft's SharePoint before (I'm talking about 2007 here, but this applies to WSS2 and 2010 as well) , then you'll know that you can reach the limits of it's functionality very quickly. This is a big problem if you're making a zero-code solution, i.e. you have no access to Visual Studio and can't create web parts. This is more common than you'd think, especially in large organisations that use SharePoint extensively. For this, the only choice is to use SharePoint Designer 2007 (SPD), but it's not pleasant because, frankly, SPD sucks. I've not found a program that crashes as much as SPD, or that performs so poorly when presented with the most basic tasks. If you make a page that is too complex, has too many web parts, large data sources or lots of conditionals, connections and filters, it can take anywhere <em>up to 20 minutes to perform a single action</em>.</p>
<p><img src="https://2.bp.blogspot.com/_2mIeP-q6ShI/TKn6AMvC_gI/AAAAAAAAACg/FnwxjpsJHmU/s1600/sp2010crash.png" alt="SharePoint crash" title="SharePoint crash" loading="lazy" /></p>
<p>Very quickly, you have to start looking at alternatives to complex data views. These days, the go-to technology is JavaScript, which is very powerful and can allow developers to access almost every SharePoint function through web services. However, this functionality <em>comes at the cost of accessibility</em>. So, the first piece of advice: <strong>if you can avoid using JavaScript, do so</strong> because otherwise the site won't be accessible. See these links for why <a href="http://www.access-board.gov/publications/adafactsheet/a13.html">accessibility</a> <a href="http://www.access-board.gov/adaag/html/adaag.htm">is</a> <a href="http://www.section508.gov/">a</a> <a href="http://www.shoosmiths.co.uk/news/3441.asp">good</a> <a href="http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/uk-website-legal-requirements.shtml">thing</a>.</p>
<p>Unfortunately, SharePoint is so limited that often a JavaScript is the only way to add functionality in or to correct formatting. In this case, use of <strong>simple SPD functions and <noscript> tags</noscript></strong> can keep your content accessible, allowing you to progressively enhance the user's experience on top.</p>
<p><img src="https://images.sixrevisions.com/2009/05/14-03_error-debug.png" alt="" title="IE6 JavaScript error" loading="lazy" /></p>
<p>The final hurdle to cross before you can create great JavaScript-based interfaces in SharePoint is IE.</p>
<p>Internet Explorer, especially IE6, has <a href="http://www.atalasoft.com/cs/blogs/insertqualityhere/archive/2008/08/07/why-ie-developer-tool-bar-is-second-to-firebug.aspx">appalling developer tools</a> for JavaScript debugging. There's no console, inspector, breakpoint facility, no nothing. It's almost impossible to debug your problems because they all manifest themselves as runtime errors on some arbitrary line on the page.</p>
<p><strong>The best way that you can debug JavaScript in IE, is with Google Chrome.</strong> It doesn't sound right, but I promise it's the easiest way to make your code work. Both Chrome's Web Inspector and Firefox's Firebug work very well with SharePoint, though my personal preference is for Chrome as it works better with Windows' NTLM authentication system (it doesn't ask you for your login details, just takes them from Windows). They allow you to check and validate your code so that it works well and runs as expected. You should be able to achieve this in half the time that you would if you were just developing for IE, using alerts to work out what's going wrong.</p>
<p>There's another benefit for working this way around: <strong>your code will work on standards-compliant browsers, and any that come along in the future.</strong> This is always a good thing as you don't know when the organisation will roll out IE8/9 to its users, <em>nor can you always guarantee that a user will be using a IE</em>. It's important that sites are ready for these changes and best-practice development is maintained.</p>
<p>In summary, if you have to use JavaScript, ensure the page content will work without it. If you are doing any major development work, do it in Chrome and reap the benefits of its debugger, then make it work in IE.</p>
Handling iPhone App Ideas2011-08-30T00:00:00Zhttps://www.steveworkman.com/2011/handling-iphone-app-ideas/<p>There's one question that I get asked a lot:</p>
<blockquote>
<p>I've got this great idea for an app...... what do you think?</p>
</blockquote>
<p>I run the mobile development team at my employer, a role that I really enjoy and feel privileged to be doing. I get to work with cutting edge technology, forward-thinking clients and brilliant developers and user experience experts. There's always a flip side, and for this role it is filtering out the bad ideas from the good ones.</p>
<p><a href="https://www.steveworkman.com/static/img/Screen-shot-2011-08-27-at-13.24.45.png"><img src="https://www.steveworkman.com/static/img/Screen-shot-2011-08-27-at-13.24.45.png" alt="I've got an idea for an app" title="I've got an idea for an app" loading="lazy" /></a></p>
<p><strong>The process</strong> I have a simple process for capturing and evaluating ideas: listen, write it down and do a quick estimate of effort and benefits. If the benefits do not heavily outweigh the effort, say thank you and move on.</p>
<p>That's it in a nutshell, but it's a bit more complicated than that. Lets step through the process.</p>
<p><strong>Ideas</strong> An idea will come from one of two sources:</p>
<ol>
<li>The media, or</li>
<li>A personal need</li>
</ol>
<p><strong>Ideas based in the media</strong> The request goes a bit like this:</p>
<blockquote>
<p>Hi Steve, have you seen this article about this cool iPhone/android app? Well, I think we could do something similar (for the other platform)! It'd be great for [publicity/marketing/a demo/this client I have/making lots of money]. What do you think?</p>
</blockquote>
<p>If I get a request like this alarm bells start ringing in my head. Clearly, someone else has already done this, and therefore has 3-6 months development time ahead if we were to start developing a rival app. Requests based on the media tend to be for porting android apps to iOS, and unless it's an android-only developer, there's likely to be a good reason why there's no iOS version. Take the <a href="http://www.bbc.co.uk/news/business-14574816">BBC 3G strength meter app</a>. It's only on android and I was asked if we could do an iPhone version. The answer was simply "no". The long answer was, "do you really think the BBC wouldn't have tried to make an iOS version? Of course they would have. It's not possible. iOS doesn't allow you that level of access to the phone's hardware."</p>
<p>The only time that an idea from the media would meet the benefits/effort threshold is if there was a direct client opportunity and the idea came from demand, rather than porting an app. Augmented Reality was a big buzz topic a few years ago, but finding a useful application for it for a client was a challenge, hence I didn't make an AR app.</p>
<p>So, unless there's a direct need for an app, it'll go into my big black book of ideas for a rainy day.</p>
<p><img src="https://kennysilva.net/wp-content/uploads/2011/02/moleskine.jpg" alt="My big black book of ideas" title="Big black book of ideas" loading="lazy" /></p>
<p><strong>Ideas from personal need</strong> The best ideas for apps come from genuine need. You can quote me on that. When someone comes up to me and says,</p>
<blockquote>
<p>I've got this problem, I need to ...... I thought it could work as an app?</p>
</blockquote>
<p>I listen and I'm always much more hopeful. If someone has a need, then you can bet that other people have that need too. It may be something like large manuals or reference information for a specific sport e.g. SCUBA diving, or an app that collects a lot of information together and displays it usefully. These are the kinds of apps that I like people to talk to me about, and that straight away get to the top of the to-do list.</p>
<p><strong>Which app to do first?</strong> This is a tricky question, but it should be one that you can answer. Follow this formula:</p>
<blockquote>
<p><em>Potential audience * USP / effort</em></p>
</blockquote>
<ol>
<li>Your <em>potential audience</em>, on a scale of 1-10 where 1 is "just you" and 10 is "every phone owner"</li>
<li><em>USP</em> (Unique Selling Point) on a scale of 1-10 where 1 is "It's a twitter app" and 10 is "best idea ever, never been done before, it'll revolutionise the way we live"</li>
<li><em>Effort</em> is a 1-10 scale of how long it'll take you to make the USP work (1 is short time, 10 is long time). It is not how long until you can get a first release out, it is how much effort will it take to create the hook for users.</li>
</ol>
<p>So, for a basic twitter app, you will end up with a formula of 8*1/4 = 2. For an app for flight controllers, you'd get 3*7/7 = 3, so you'd be better-off spending your time on the flight controllers app. Either way, they're both not very high scores, so you may want to keep looking for better ideas.</p>
<p>Yes, I know it's a contrived example, and that it won't apply in every case, but give it a go if you are given a few ideas and don't know which one to do.</p>
<p><strong>What next?</strong> Once you've got your good idea, don't ignore any other ideas that come your way. Keep writing them down, keep doing the analysis, and you'll always have an idea in your pocket to fall back upon. You may have so many good ideas that you'll have to hire some more developers to work on more apps, and that is a very good problem to have.</p>
Project WOW on the Google App Engine Blog2011-09-27T00:00:00Zhttps://www.steveworkman.com/2011/project-wow-on-the-google-app-engine-blog/<p>A really quick note: one of my colleagues <a href="http://twitter.com/edhgoose">Ed Hartwell-Goose</a> has written a post for the Google App Engine blog on <a href="http://googleappengine.blogspot.com/2011/09/project-wow.html">Project WOW</a> - a site for weather enthusiasts to send their readings to and be collated by the Met Office. It's well worth the read to see what we've been up to and some of the hugely high-performance stuff you can write for App Engine.</p>
<p><img src="https://3.bp.blogspot.com/-YrOewIpAgIM/ToCQpYkSGaI/AAAAAAAAAK4/eM2_ahb28mM/s1600/image00.png" alt="Met Office WOW Website" title="Met Office WOW Website" loading="lazy" /></p>
<p>You see the site in action over at <a href="http://wow.metoffice.gov.uk/">wow.metoffice.gov.uk</a></p>
Sketchnotes from LWS3D - A 50-line WebGL app2011-09-29T00:00:00Zhttps://www.steveworkman.com/2011/sketchnotes-from-lws3d-a-50-line-webgl-app/<p>After a summer break, <a href="http://londonwebstandards.org/">London Web Standards</a> was back with an evening of WebGL with <a href="http://twitter.com/ilmari">Ilmari Heikkenen</a> from Google and a short demo from <a href="http://twitter.com/C4RL05">Carlos Ulloa</a> of <a href="http://www.helloenjoy.com/">HelloEnjoy</a>. Sketchnotes are below</p>
<p><strong>Carlos Ulloa</strong> of Brighton-based HelloEnjoy showed off two demos that he made using <a href="https://github.com/mrdoob/three.js/">Three.js</a> and WebGL. The first was <a href="http://helloracer.com/webgl/">HelloRacer</a>, an interactive look at the 2010 Ferrari F1 car that you can even drive and do handbrake turns in. The second demo got it premiere at LWS, an <a href="http://lights.elliegoulding.com/">interactive music video for Ellie Goulding's "Lights"</a>. Honestly, it was extremely cool, on a <a href="http://ro.me/">Ro.me "3 dreams of black"</a> scale. It'll appear at the linked URL in the next week or so. There's a <a href="http://www.londonwebstandards.org/2011/09/lws3d-liveblog/">great Q&A session on the London Web Standards blog</a> of the event for more detail on how they did it.</p>
<p><strong>Ilmari Heikkenen</strong> showed the gathered crowd how to make a basic WebGL app using <a href="https://github.com/mrdoob/three.js/">Three.js</a> in about 50 lines. He showed off all of the components that you need: a renderer, scene, camera, mesh and lights (and shadows). He went into more depth about vertex shaders and fragment shaders, the GPU effects that make everything look a lot more real.</p>
<p>Ilmari gave examples of a few uses, including games, 3D bar charts and scatter graphs. He then started animating all of these, including a 10,000 point scattergraph that moved in real-time. Finally, he demonstrated a loader for Collada meshes (supported by Maya) and brought in a monster that with a few lines of code started walking around the screen.</p>
<p>Overall, it was a great introduction to the subject, one worth a lot more of your time.</p>
<p><a href="http://fhtr.org/BasicsOfThreeJS">Ilmari's slides can be found on his blog</a>.</p>
Adobe's Acquisition of Nitobi and TypeKit - Great for them, not so much for us2011-10-04T00:00:00Zhttps://www.steveworkman.com/adobe-s-acquisition-of-nitobi-and-typekit-great-for-them-not-so-much-for-us<p>Adobe has done the unthinkable, it's actually bought two companies worth giving a crap about. <a href="http://blogs.nitobi.com/andre/index.php/2011/10/03/nitobi-enters-into-acquisition-agreement-with-adobe/">Nitobi</a>, makers of <a href="http://www.phonegap.com/">PhoneGap</a>, and <a href="http://www.adobe.com/aboutadobe/pressroom/pressreleases/201110/AdobeAcquiresTypekit.html">TypeKit</a>, pioneers of the CSS3 web-font game, have been acquired by Adobe.</p>
<p><strong>Adobe should be thrilled.</strong></p>
<p>It's now got two sets of highly skilled developers with great ideas and good products to work with. TypeKit is an obvious acquisition as it'll be part of <a href="http://www.adobe.com/products/creativecloud.html">Adobe's Creative Cloud</a> offering that gives them the ability to use (and sample) a huge range of fonts across their apps.</p>
<p>Adobe have also promised that PhoneGap will remain open source, being donated to the Apache Software Foundation. This feels strange, as then Adobe just gets the developers at Nitobi themselves (who are obviously very good). This begs the question: why did Adobe bother with it?</p>
<p>Well, Adobe is a tools company - they make programs that we make other cool things with. Nitobi was also a tools company, making PhoneGap, that lots of people made cool things with. Alongside the PhoneGap framework, there were two smaller projects, <a href="https://build.phonegap.com/">PhoneGap Build</a> and <a href="https://github.com/brianleroux/cordova">Cordova</a>.</p>
<p><a href="https://www.steveworkman.com/static/img/Build-Diagram.png"><img src="https://www.steveworkman.com/static/img/Build-Diagram.png" alt="PhoneGap Build" title="PhoneGap Build" loading="lazy" /></a></p>
<p>PhoneGap Build takes the pain out of making PhoneGap apps for multiple platforms. If you've ever tried to do a build for iOS, Android and Blackberry, you know it's a world of pain and about 10GB of tools and frameworks. PhoneGap Build takes this all away from you, and is a service that Adobe can integrate into their Cloud offering.</p>
<p>Cordova is the stand-alone desktop equivalent of PhoneGap Build. It's creator, Brian LeRoux, recently <a href="https://twitter.com/#!/brianleroux/statuses/111189165219119104">said</a>:</p>
<blockquote>
<p>All the cli tooling prototyped in Cordova now first class in phonegap/[ios|android]. Time to update Cordova.</p>
</blockquote>
<p>I take this to mean that Cordova is back in focus, and Adobe will be actively looking to integrate it into DreamWeaver, in the same way it integrated jQuery Mobile.</p>
<p><strong>We should be wary</strong></p>
<p>Adobe's track record for mergers is not great. The Macromedia merger led to a focus on Flash and Photoshop, whereas other products like DreamWeaver and Fireworks were not given the time that they deserved. Lots of people <a href="http://www.infoworld.com/t/applications/layoffs-pending-after-adobe-macromedia-merger-530">lost their jobs</a> in that merger too and I'd hate to see that happen to the guys at Nitobi or TypeKit.</p>
<p>We have to watch out for <strong>rising prices</strong> and being forced to <strong>buy products that we don't need</strong>. I can see it already: with PhoneGap integrating with DreamWeaver, the easiest way to build a PhoneGap app will be with that product or Build. Yesterday, those in the PhoneGap Build program were sent a pricing structure:</p>
<p><a href="https://www.steveworkman.com/static/img/pricing-announcement_0.png"><img src="https://www.steveworkman.com/static/img/pricing-announcement_0.png" alt="PhoneGap Pricing Announcement" title="PhoneGap Pricing Announcement" loading="lazy" /></a></p>
<p>I can see these prices going up, and up (and they're not that cheap to begin with). One build a day with the free package probably isn't enough. I hope the same doesn't occur with TypeKit, or people will just move to one of the other services that exist (<a href="http://fonts.com/">Fonts.com</a> for example).</p>
<p>The other danger is that somewhere down the line, these products that many have come to rely upon will simply cease to exist. Merged so deep into Adobe's pipeline, the one thing that made them great, their independence, is stripped from them and the revolutions that they make simply slow down and stop. With the core of PhoneGap, we've been promised that they'll <a href="https://twitter.com/#!/brianleroux/status/120908967953186816">actually have more time for it</a> and I hope this continues for as long as possible. What I'd hate to see is the core being neglected in favor of tools for products that I don't want to buy.</p>
<p>Fingers crossed that Adobe will really make something good this time, and that their commitment to the web and web standards continues, but I won't be holding my breath.</p>
Developers need inspiration to survive2011-10-17T00:00:00Zhttps://www.steveworkman.com/2011/developers-need-inspiration-to-survive/<p>It's been quite a few months since I've been really inspired to do something. The last time I was truly inspired was after watching The Social Network: the film about the origins of Facebook. It's a tale about a man and some friends who was driven to create a service that everyone on campus, and eventually the world, would use.</p>
<p><img src="https://30.media.tumblr.com/tumblr_lepxevfwAv1qaje9go1_400.jpg" alt="" title="The Social Network" loading="lazy" /></p>
<p>It's inspiring because it's played out by an anti-hero (Zuckerberg) whose determination and talent brought about the result. It isn't really about angel investors or girls, it's about hard work to create a great product, burning the candle at both ends and willing to put your everything into a cause.</p>
<p>I saw another example of this this weekend, from the unlikely source of the musical Legally Blonde. It's another hero story, but this time our heroine is attending Harvard Law school for completely the wrong reason. She finds that when she puts in years of hard work, she finds something far better than that thing she went for (and love).</p>
<p>What struck me is how driven people are when they're inspired. It's a rare project for me that inspires, that really makes me think I'm making a difference, but when those projects do come around the atmosphere in the team is completely different; people want to work their evenings and weekends because they are having fun, enjoying their work, and actually want to do it.</p>
<p>A product that people want to work on and enjoy doing will simply be of higher quality (and sometimes completed faster) because the product matters to that developer. They are driven, compelled, inspired.</p>
<p>Without inspiration, a developer's soul withers and dies. I'm a firm believer that all almost all people want to do good, whether that's through charity work or writing financial software that allows those grants to be given.<br />
so pick one.</p>
<p>Pick the right tool I've discovered the hard way that not all grids are made equal. Here's a list of features and grids that we tried (in chronological order)</p>
<ul>
<li>Custom SlickGrid</li>
<li>JQGrid</li>
<li>ExtJS 4</li>
<li>ExtJS 3.2 +plugins</li>
</ul>
So, you want an app?2011-10-28T00:00:00Zhttps://www.steveworkman.com/2011/so-you-want-an-app/<p>Earlier this year, I was lucky enough to meet <a href="http://twitter.com/globalmoxie">Josh Clark</a> at FOWD. I'd been reading his articles about <a href="http://globalmoxie.com/blog/mobile-web-vs-native.shtml">flagship apps</a> and content first, and I was very keen to have a chat with him about a discussion I'd had with a client. I had been discussing which platform they should be targeting, and depending upon who I was talking to at the client (and their opinions on the goals of the project) the decision on a choice of platform was different.</p>
<p>Josh, and his mobile vs native talk, positioned this decision as an "audience/content/budget" question, which matched the conversations I'd been having with my client. At the end of his talk I said to Josh, "this would make a great flow-chart, like that one that <a href="http://shouldiworkforfree.com/">Jessica Hische did</a>!", "Yeah, that'd be awesome!", said Josh.</p>
<p>I'm very pleased to say, that after some delay, it's ready for public consumption.</p>
<p><a href="http://www.paconsulting.com/so-you-want-an-app/"><img src="https://www.steveworkman.com/static/img/so-you-want-an-app-2.png" alt="So, you want an app?" title="So, you want an app?" loading="lazy" /></a></p>
<p>With a lot of help from my <a href="http://www.paconsulting.com/">company</a> and colleagues <a href="http://twitter.com/edhgoose">Ed Hartwell-Goose</a>, <a href="http://twitter.com/finventing">Fin Edridge</a> and <a href="http://twitter.com/simondring">Simon Dring</a> we made an <a href="http://www.paconsulting.com/so-you-want-an-app/">interactive flow-chart</a> to guide our clients, other industry professionals and their clients through the minefield that is choosing the platform for your app. We called it, <a href="http://www.paconsulting.com/so-you-want-an-app/">"So, you want an app?"</a>.</p>
<p>It's still a simplification of the whole process but, in researching it, three things became abundantly clear:</p>
<ol>
<li><strong>You <em>must</em> know your audience</strong> - there are no exceptions to this. People use different phones for very different things. Blackberries are used by teenagers for BBM and by corporations because of it's security and low data usage; iPhones are very high-end consumer devices; and Android phones are thought of as being for very technically minded people, but they're also entry-level smart phones. Picking a platform without knowing what your <em>content and its audience</em> is a recipe for disaster.</li>
<li><strong>Your content needs to be simple to access</strong> - all end-points on the flow-chart will need some form of content platform behind them to drive engagement, re-use and to keep the app up-to-date. If you've got an old CMS, you may have to build a light-weight web service to let your app access the content easily, quickly and efficiently. People use apps to get at content, and whether they're a game or social media, your content is king.</li>
<li><strong>You cannot do this half-heartedly</strong> - and by that I mean you've got to have a decent budget. Also at FOWD, <a href="http://twitter.com/coldfumonkeh">Matt Gifford</a> was joking that the £50 website was now a £75 website; apps are suffering this problem. Apps are viewed as small, simple bits of functionality that you can knock-up in a weekend; this is simply not true. Apps are often full-sized websites with the added complexity of fitting the core content onto a tiny screen, but since they look small clients think they're easy to make and do, and are therefore cheap. Stories in the news of <a href="http://www.bbc.co.uk/newsbeat/12224670">14-year-olds making games in the app store top 10</a> aren't helping either. Start with a 5-figure sum, and keep going upwards if you want your app to really succeed.</li>
</ol>
<p>I also mention <a href="http://www.phonegap.com/">PhoneGap</a> a lot in the flow-chart, and that'd because I genuinely believe it's a great solution to the "discoverability" problem. This is where you have a mobile web site that isn't getting enough exposure as people think of "apps" as items in the "app store". PhoneGap fills this hole nicely, and gives you access to device hardware as a brilliant bonus. The tools are easy to use and <a href="https://build.phonegap.com/">PhoneGap Build</a> now takes all of the hard bits of building for Blackberry and Windows Phone away.</p>
<p>Still, there are gray areas in the platform selection process, especially when it comes to tight budgets and enterprise apps. If there's only one thing you take away from this tool it should be this: <strong><em>Content is King, know your audience and how they will use your app. The rest flows from there.</em></strong></p>
<p>You can find the tool here: <a href="http://www.paconsulting.com/so-you-want-an-app/">www.paconsulting.com/so-you-want-an-app</a> - I'll post the full poster version here when it's completed.</p>
<p>Please, let me know what you think, and let me know if you use it for a client as well, share your stories and share the tool with your friends.</p>
Problems loading local fonts with font-family2011-10-31T00:00:00Zhttps://www.steveworkman.com/2011/problems-loading-local-fonts-with-font-family/<p>I'm investigating a problem with loading locally installed fonts in Windows 7. It's a weird one this, and it only seems to affect Firefox and IE9/10, or, those browsers that use DirectWrite.</p>
<p><strong>The problem</strong></p>
<p><a href="https://www.steveworkman.com/static/img/UniversTest-2.png"><img src="https://www.steveworkman.com/static/img/UniversTest-2.png" alt="Font rendering comparison" title="Font rendering comparison" loading="lazy" /></a></p>
<p>This image shows the beautiful <a href="http://www.linotype.com/1560/univers-family.html">Univers font</a> in four different browsers. Each of them are rendering the following CSS:</p>
<pre><code>#univers55, #univers55bold, #univers45, #univers45bold { font-size:3em;}
#univers55 { font-family:"Univers 55", serif; }
#univers55bold { font-family: "Univers 55", serif; font-weight:bold; }
#univers45 { font-family: "Univers 45 Light", serif; }
#univers45bold { font-family: "Univers 45 Light", serif; font-weight:bold; }
</code></pre>
<p>Now, Univers 45 is a light-weight font, an should be a good 10 points lighter than Univers 55, you can see this in Chrome and IE8 (top-left and bottom right). In Firefox and IE10, Univers 45 looks heavier than Univers 55, and the bold version actually appears to be the same size. That just isn't right. So I called for reinforcements: step up <a href="http://twitter.com/paulrouget">Paul Rouget</a> (Mozilla) and <a href="http://twitter.com/thebeebs">Martin Beeby</a> (Microsoft).</p>
<p><strong>Further investigation</strong></p>
<p>I raised a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=698369">bug against Firefox</a> core with a <a href="http://jsfiddle.net/CYTdd/5/">test case on jsfiddle</a> and got some good responses. Martin and Paul both asked:</p>
<blockquote>
<p>@steveworkman @paulrouget could you include the font-face code in the fiddle for Univers 55 and Univers 45 Light</p>
</blockquote>
<p>So, they thought it was something to do with the way I was including the font in the CSS. So, let's put it in and see what happens:</p>
<p><a href="https://www.steveworkman.com/static/img/Font-face-rule-comparison.png"><img src="https://www.steveworkman.com/static/img/Font-face-rule-comparison.png" alt="Font-face rule comparison" title="Font-face rule comparison" loading="lazy" /></a></p>
<p>The rendering appears to have corrected itself. Univers 45 and 55 are now properly weighted in Chrome, IE10 and Firefox. So, what happened? Well, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=698369#c4">Jonathan Kew</a> sheds a little light on the problem:</p>
<blockquote>
<p>Note that the @font-face rules shown in your second image are incorrect (e.g. 'src: "Univers 55"' is invalid; did you mean "src: local('Univers 55')"?), and as a result you're not getting Univers at all in some of those examples, you're getting fallback to the default sans-serif font, probably Arial. Look at the shape of the "5", for example.</p>
<p>Also note that under the DirectWrite model, font families are organized differently from the old GDI model. Family names like "Univers 45 Light" are not generally used; instead, all the faces belong to a single family, with distinct font-weight values. (But I haven't examined the Univers family to see exactly how they're organized.)</p>
</blockquote>
<p>So, yes, a little stumble over the "local('font-name');" issue, but otherwise it appears to be fine. The second part where he mentions that in Windows 7, font families are organised differently, and so may be under a different name intrigued me. So, I took a look:</p>
<p><a href="https://www.steveworkman.com/static/img/Univers-Fonts.png"><img src="https://www.steveworkman.com/static/img/Univers-Fonts.png" alt="Univers Font Families" title="Univers Fonts" loading="lazy" /></a></p>
<p><a href="https://www.steveworkman.com/static/img/Univers-Fonts-45.png"><img src="https://www.steveworkman.com/static/img/Univers-Fonts-45.png" alt="Univers 45 Fonts" title="Univers Fonts-45" loading="lazy" /></a></p>
<p><a href="https://www.steveworkman.com/static/img/Univers-Fonts-55.png"><img src="https://www.steveworkman.com/static/img/Univers-Fonts-55.png" alt="Univers 55 Fonts" title="Univers Fonts-55" loading="lazy" /></a></p>
<p>So, this is where it goes a bit fuzzy. I can address the "Univers 45 Light" font directly through font-face, but I can't access the "Univers 55 Normal" font, though I can access the whole font family by looking for "Univers 55". That doesn't feel right to me, and needs more investigation. Still, I can at least get it to render the font when using font-face. So, is that it? Bug closed?</p>
<p><strong>Why can't I just use font-family?</strong></p>
<p>This is the question that I want answering, and Martin has kindly <a href="http://twitter.com/#!/thebeebs/status/130980949029687296">volunteered</a> to look into. Loading a local font through font-family should work in exactly the same way as @font-face and src: local(); - but in Firefox and IE 9/10 it's not.</p>
<p>So, web community, do you know why this doesn't work? Can you make it work with the <a href="http://jsfiddle.net/CYTdd/6/">test case</a>? <strong>Please help!</strong> Leave a comment, <a href="http://twitter.com/steveworkman">send me a tweet</a> or <a href="http://jsfiddle.net/CYTdd/6/">update the test case</a> and make it work!</p>
<p><strong>UPDATE 1st November 2011:</strong></p>
<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=698369#c7"> Jonathan Kew has responded again</a> with some more words of wisdom for me:</p>
<blockquote>
<p>The @font-face and non-@font-face cases there aren't comparable. When you say</p>
<p><code>font-family: "Univers 55";</code></p>
<p>without the use of @font-face, you're requesting that _font family_, which may have multiple faces with different weights. What you'll get when you use font-weight:bold along with this depends which faces have been grouped under that family name - which may well differ between GDI and DirectWrite environments. And if there's no "bold" face in the family, then the browser will artificially "embolden" the text. (You can tell exactly which font is really being displayed using the "font-info" add-on, btw.) I suspect you might get a true bolder face in one case and synthetic bold in the other, but that depends very much on the structure of the font families you're using.</p>
<p>In the @font-face case, you're defining your own font families (independently of how the OS or the font designer organized things), and your CSS only assigns them a single (normal-weight) face each, which means that when your styles ask for font-weight:bold, you should be getting synthetic emboldening rather than a real face with a heavier weight.</p>
<p>To see what faces are supposed to be available within each family, look in the Windows Fonts folder - IIRC, this should reflect the DirectWrite organization of the fonts. Do you see separate "Univers 45" and "Univers 55" families? What faces exist in each?</p>
</blockquote>
<p>So, I looked back at the spec and re-engineered the @font-face CSS, and the non-font-face CSS. The non-font-face CSS was definitely wrong, so I updated that, but the @font-face CSS still wasn't working. I looked at the font libraries as they are in Windows, and identified the following named structure:</p>
<ul>
<li>
<p>Univers 45</p>
</li>
<li>
<p>Univers 45 Light</p>
</li>
<li>
<p>Univers 45 Light Oblique</p>
</li>
<li>
<p>Univers 55</p>
</li>
<li>
<p>Univers 55 Black</p>
</li>
<li>
<p>Univers 55 Normal</p>
</li>
<li>
<p>Univers 55 Oblique</p>
</li>
</ul>
<p>Given the advice Jonathan gave me, the correct font-family should be "Univers 45" and "Univers 55", and the correct fonts for @font-face should be "Univers 45 Light" and "Univers 55 Normal". That gave the following results in Firefox and IE10</p>
<p><a href="https://www.steveworkman.com/static/img/font-face.png"><img src="https://www.steveworkman.com/static/img/font-face.png" alt="Font-face comparison IE10 and Firefox 9" title="Font-face comparison IE10 and Firefox 9" loading="lazy" /></a></p>
<p>IE is finding the correct font, but Firefox isn't and is falling back to the serif font. I used the font finder plugin to look at which fonts were being used on the page, and the answer surprised me. When loading the Univers 55 font-family, the normal weight font is titled "Univers 55 Roman", instead of "Univers 55 Normal", and the bold version is "Univers 75 Black", instead of "Univers 55 Black".</p>
<p>So, I took a look at the system file properties for the font, and lo-and-behold, the detailed properties were different to the name of the font:</p>
<p><a href="https://www.steveworkman.com/static/img/univers55-normal.png"><img src="https://www.steveworkman.com/static/img/univers55-normal.png" alt="Univers 55 detail" title="univers55-normal" loading="lazy" /></a></p>
<p>I quickly looked to see if Firefox was looking for the title property instead of the file name, and I was right. If you've got the Univers font you can see the <a href="http://jsfiddle.net/CYTdd/9/">jsFiddle test case</a> for this, otherwise, the final result is below:</p>
<p><a href="https://www.steveworkman.com/static/img/font-face2.png"><img src="https://www.steveworkman.com/static/img/font-face2.png" alt="Corrected Font-Face" title="font-face2" loading="lazy" /></a></p>
<p>The @font-face code goes like this:</p>
<pre><code>@font-face {
font-family: MyUnivers55;
src: local('Univers 55 Roman'), local('Univers 55 Normal');
font-weight:normal;
}
@font-face {
font-family: MyUnivers55;
src: local('Univers 75 Black'), local('Univers 55 Black');
font-weight:bold;
}
@font-face {
font-family: MyUnivers45;
src: local('Univers 45 Light');
font-weight:normal;
}
</code></pre>
<p>It looks to me like <strong>IE and Firefox use different properties to identify fonts under Windows 7: IE looks at the name in the file system and Firefox looks at the Title attribute of the file.</strong></p>
<p>Amazingly, it looks like <a href="http://www.w3.org/TR/css3-fonts/#src-desc">the spec doesn't care which one is right, and advises you to include both</a> as different platforms use different naming conventions. What surprises me is that two browsers look for a different name on the same platform, as this could cause naming clashes; the Univers 55 Black is titled Univers 75 Black - so if there was also a Univers 75 Black titled Univers 85 Black, browsers are going to retrieve the wrong font.</p>
<p>So, Microsoft, Mozilla, please sort it out :-) Who is right?</p>
Improving Javascript XML Node Finding Performance by 2000%2011-11-11T00:00:00Zhttps://www.steveworkman.com/improving-javascript-xml-node-finding-performance-by-2000<p>In my work, I'm parsing web services all of the time. Most of the time, they're XML, which does not make the best use of bandwidth/CPU time (compared to JSON), however, if it's all that you're given then you can certainly get by. I've been looking into ways to speed up the XML document traversal in with jQuery after the current best practice method was removed.</p>
<p>The basic way to find certain nodes in an XML web service is to use the .find() method. This is used heavily by the <a href="http://spservices.codeplex.com/">SPServices</a> jQuery helper (which is, in general, a great library).</p>
<pre><code>$(xData.responseXML).find("\[nodeName='z:row'\]").each(function() {
// Do stuff
});
</code></pre>
<p>That's absolutely fine - it's going to find the attribute nodeName with a value of z:row. However, <strong>since jQuery 1.7, this method does not work</strong>. I <a href="https://bugs.jquery.com/ticket/10377">raised this regression</a> in the jQuery bug tracker and was encouraged to find a solution; another selector that worked in all browsers. Unfortunately, at the time I couldn't come up with anything better than this:</p>
<pre><code>$(xData.responseXML).find("z\\\\:row, row").each(function() {
// Do stuff
});
</code></pre>
<p>The <code>"z\\\\:row"</code> selector works in IE and Firefox, and the "row" selector works in Chrome and Safari (I'm unable to test in Opera here, sorry). This was flagged as the solution to the problem and they wouldn't be making any fixes to the jQuery core.</p>
<p>After a few weeks of using this method, I noticed that the site had been slowing down, especially in IE, and I thought this new selector was the cause. So, I looked into the performance numbers using <a href="https://jsperf.com/">jsPerf</a> and I <a href="https://bugs.jquery.com/ticket/10720">raised a bug</a> too. My first test was to see what the current solution was doing, and whether jQuery 1.7 had made things worse. Test case: <a href="https://jsperf.com/node-vs-double-select/4">https://jsperf.com/node-vs-double-select/4</a></p>
<p><a href="https://www.steveworkman.com/static/img/IE-performance-loss-jq1-7.png"><img src="https://www.steveworkman.com/static/img/IE-performance-loss-jq1-7.png" alt="https://jsperf.com/node-vs-double-select/4" title="IE performance loss jq1-7" loading="lazy" /></a></p>
<p>So, performance in Chrome is identical for each of the selectors (and it's the same in Firefox and Safari) but IE drops nearly half of its operations because it has to perform that second selector.</p>
<p>It's still not very high performance though, and so I looked for other solutions.</p>
<p>Dmethvin suggested:</p>
<blockquote>
<p>Did you try the custom plugin in the ticket? If you're having performance issues that should be much faster.</p>
</blockquote>
<p>The plugin he's referring to is this:</p>
<pre><code>jQuery.fn.filterNode = function(name){
return this.filter(function(){
return this.nodeName === name;
});
});
</code></pre>
<p>This filters content by their nodeName and compares it against the name that you gave it. The issue with this is that .filter() does not traverse down the tree, staying at the level of the set of objects that it was given. Therefore, a quick solution was this:</p>
<pre><code>$(xData.responseXML).children().children().children().children().children().children().children().filterNode('z:row').each(function() {
// Do stuff
});
</code></pre>
<p>jsPerf Test: <a href="http://jsperf.com/node-vs-double-select/1">http://jsperf.com/node-vs-double-select/1</a></p>
<p><a href="https://www.steveworkman.com/static/img/deep-child-filter-node.png"><img src="https://www.steveworkman.com/static/img/deep-child-filter-node.png" alt="" title="Performance increase using filter plugin" loading="lazy" /></a></p>
<p>Wow, that's about 50 times faster. Even IE beats Chrome when doing this operation. The simple reason is that it's got a smaller set of objects to go through and it's comparing a single attribute rather than parsing the text of the XML to try and find the namespaced element.</p>
<p>Still, I wasn't satisfied as in order to achieve that performance, I had to know how deep I was going to be going in order to retrieve the set. So, back to the bug and another suggestion by dmethvin:</p>
<blockquote>
<p>If you're going that deep, use a filter function passed to .find(). How does that fare?</p>
</blockquote>
<p>After a few attempts, a colleague of mine came up with this beauty:</p>
<pre><code>$.fn.filterNode = function(name) {
return this.find('\*').filter(function() {
return this.nodeName === name;
});
};
</code></pre>
<p>jsPerf test: <a href="https://jsperf.com/node-vs-double-select/3">https://jsperf.com/node-vs-double-select/3</a> <a href="https://www.steveworkman.com/static/img/find-filter.png"><img src="https://www.steveworkman.com/static/img/find-filter.png" alt="" title="find()-filter" loading="lazy" /></a></p>
<p><strong>Using .find('*').filter() increased performance to 200x faster than the original .find('z:row') selector</strong></p>
<p>I mean, <em>wow</em>, that's incredible. On the graph, those tiny little bits of colour are the original selectors, and those only 20% of the way up are the previous massive performance increase by using filter. It should also be noted that IE8 performance using this selector increased in jQuery 1.7 in comparison to when using jQuery 1.6.</p>
<p><em>Side-note: IE10's javascript performance is almost equal to that of Google Chrome. In comparison, IE9 (not shown) is about half of that.</em></p>
<p>The reason for this massive increase is that it's backed by native selectors. A .find('*') will translate into element.querySelectorAll('*') which is very fast when compared to doing 8 .children() calls.</p>
<p><strong>Summary</strong> Dealing with large amounts of data from web services needs to be fast. Using a simple .find() on the node name no-longer works and alternatives have been investigated. The fastest method, using a short one-line plug-in, improves performance by up to 2000% compared to the old methodology.</p>
<p>I'll be notifying the <a href="https://spservices.codeplex.com/">SPServices</a> group of this post, and hopefully they can improve the performance of their library.</p>
An Evening with Sprintly2011-12-15T00:00:00Zhttps://www.steveworkman.com/2011/an-evening-with-sprintly/<p>Last night, I was lucky enough to meet <a href="http://stu.mp/">Joe Stump</a>, former Lead Architect at Digg and founder of SimpleGeo, who sat down with 7 developers near Old Street and showed us his latest creation: <a href="http://sprint.ly/">Sprintly</a>. Here's my notes from the talk.</p>
<iframe src="https://player.vimeo.com/video/33085361?title=0&;byline=0&;portrait=0" frameborder="0" width="400" height="225"></iframe>
<p>Sprintly was born out of frustration in how products are made. Joe is a business major, not CompSci like many Silicon Valley successes. The guiding principle behind Sprintly is that product is greater than the process.</p>
<p><strong>No time like the present</strong> The first major difference to most agile tracking tools is that there's no concept of time in Sprintly. In SCRUM, we use points, but that's still tied back to a notion of time (where it should be effort+complexity+doubt), so it's still a developer lying to themselves. Sprintly works with the notion of features, and those features will ship when they're done.</p>
<p>Sprintly has Stories, Tasks, Tests and Bugs. Stories are your general user stories, Tasks are any other tasks, Tests are for developers to write tests for their code and Bugs are bugs! Any of these can be tagged with anything. A lot of teams tag with "a release" (1.0, Cupcake, whatever) which is fine, but the release will happen when stories are done or when the team decides to release something. Sprintly isn't there to enforce the process, just help you along the way.</p>
<p><a href="https://www.steveworkman.com/static/img/sprintly.png"><img src="https://www.steveworkman.com/static/img/sprintly.png" alt="" title="sprintly" loading="lazy" /></a></p>
<p><strong>The holy grail for "older" clients: e-mail integration</strong> Everyone is allowed to be part of the process in adding stories to the backlog, favouriting a story or just looking around. There's e-mail integration whereby emailing a specific <a href="http://sprint.ly/">Sprint.ly</a> address and cc'ing a developer will create a task assigned to that developer with the content and attachments of that email. The developer can then respond via email and that will be added to the conversation. It's awesome. I can see my clients getting involved with the agile process through this even though they may not be aware of it, helping manage the admin overhead of ticketing through e-mails. Long-term there will be ZenDesk support and potentially others depending upon "how much their API make me want to kill myself".</p>
<p>Tasks can be sorted easily with the quick-sort bar which shows in-progress and backlog items. These are <strong><em>integrated with GitHub</em></strong>, but it can work with any SCM that has a post-commit hook (SVN,Perforce etc), and even those SCMs behind a firewall. Any open bugs can be modified with your commit messages, even closing or marking multiple tickets as fixed.</p>
<p><strong>Dashboards for those up top</strong> There's a dashboard with standard drag & drop Kanban board on it. It's a bit bare at the moment but this will be much improved in the future, including tools that allow managers to estimate better and identify overloaded developers. There'll be a read/write API coming in January so developers will be able to do our own dashboards for stakeholders etc if we don't want them to have access. Eventually Sprintly will give you daily digest emails and better integration with email when tasks are closed/broken.</p>
<p>In comparison to others, it's got its own niche: "Jira is like bringing a thermonuclear warhead to a knife fight", you only use 1% of it at most. Trello is similar but isn't just for software developers, it could be used for anything so won't be as useful in the long term.</p>
<p>Sprintly is currently getting loads of great feedback from users with around 35% retention rate for daily task usage creation, which is excellent for such a new product. You just have to search Twitter for <a href="https://twitter.com/#!/search/sprintly%20love">Sprintly love</a> to see how well they're doing.</p>
<p><strong>Making money right now, and opening beta in 2012</strong> Joe talked about how important he thought it was to be making money straight away, rather than having profit as "an afterthought". So, from January 1st 2012, Sprintly will be $9/month/seat (which is cheap compared to competitors) and it will enter open beta shortly after that.</p>
<p>I'm really looking forward to using <a href="http://sprint.ly/">Sprintly</a> in anger at the start of next year. If you want to be part of it, get yourself on the waiting list. Thanks again to Joe for talking to us and I can't wait to start playing.</p>
Vendor Prefixes and Evangelism2012-02-09T00:00:00Zhttps://www.steveworkman.com/2012/vendor-prefixes-and-evangelism/<p>If you follow any front-end web developers on Twitter today, you'll probably have come across articles on vendor prefixes and the latest CSSWG fight over Mozilla, Microsoft and Opera wanting to implement -webkit- vendor prefixes. Before I delve into why this is happening, I want to make something very clear** - this is wrong and must not happen.**</p>
<h3 id="so-why-is-it-happening%3F" tabindex="-1">So why is it happening?</h3>
<p>The February 2012 face-to-face meeting of the CSSWG [<a href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0313.html">complete transcript</a>] had vendor prefixes on the agenda because:</p>
<blockquote>
<p>glazou: Title is: Why and How to Implement Other Vendors' Prefixes<br />
tantek: This is a specific subtopic of vendor prefixes<br />
tantek: The problem statement right now, and this is a problem for<br />
Mozilla and any other non-WebKit browser<br />
tantek: Sites have webkit-specific content, and serve backup content to<br />
everyone else. Specifically for mobile content.<br />
tantek: Non-WebKit browsers face prisoners dilemma<br />
tantek: similar to quirks in 2003 or so</p>
</blockquote>
<p><em>FYI: glazou is Daniel Glazman, chair of the CSSWG, tantek is from Mozilla. Other parties who appear in quotes are Peter Linss (HP), Florian Rivoual (Opera), Sylvain Galineau (Microsoft) and Simon Fraser (smfr from Apple).</em></p>
<p>So far, sounds reasonable, then tantek continues:</p>
<blockquote>
<p>tantek: At this point we're trying to figure out which and how many webkit<br />
prefix properties to actually implement support for in Mozilla<br />
plinss: Zero.<br />
tantek: Currently we have zero. Zero is no longer an option for us.</p>
</blockquote>
<p>Suddenly, everything is turned upside down. Opera and Microsoft start saying the same thing - the argument is that of the top 1000 websites, a significant percentage uses webkit-only prefixes without the other browser prefixes.</p>
<blockquote>
<p>glazou: A long time ago, Mozilla had an Evangelism team that would call up<br />
the website owners and ask them to change.</p>
</blockquote>
<p>This refers to developer evangelism, people like <a href="http://twitter.com/brucel">Bruce Lawson</a>, <a href="http://twitter.com/thebeebs">Martin Beeby</a> and <a href="http://twitter.com/robhawkes">Rob Hawkes</a> to name just three (Google has a <a href="http://code.google.com/team/index.html?product=chrome">huge team</a> - [Thanks to Michael for the correct link]). All of these people are pioneers in web technology and use vendor prefixes every day, and all of them tell developers to use the other browser's vendor prefixes too. This is not the opinion of the CSSWG:</p>
<blockquote>
<p>Florian, Sylvain: Evangelism has failed.<br />
glazou: Have you tried pinging the WASP about that? Other activists of web<br />
standards?<br />
sylvaing: If MS can't scale to handle this, you think WASP can?<br />
tantek: Opposite is happening right now. Web standards activists are teaching<br />
people to use -webkit-<br />
tantek: People like Lea Verou.<br />
tantek: Their demos are filled with -webkit-. You will see presentations<br />
from all the web standards advocates advocating people to use<br />
-webkit- prefixes.</p>
</blockquote>
<p>These words make me sad indeed. The CSSWG has lost faith in evangelists and the community upon which it relies so much that they are prepared to implement other vendor's non-standard code and prefixes to help them gain market share back.</p>
<h3 id="quirks-mode-all-over-again" tabindex="-1">Quirks mode all over again</h3>
<p>Yes, this is where we're at. The current dominance of webkit, especially on mobile, is causing developers to adopt non-standard technology and only those bits of technology for webkit. This cannot happen. Daniel Glazman understands:</p>
<blockquote>
<p>tantek: What are the thresholds, even approximate, for implementing<br />
-webkit- properites (or none)?<br />
glazou: Unbelieveable we are having this discussion.<br />
Florian: Our job is to solve interoperability. We want to discuss it here,<br />
because that's our job.<br />
tantek: Help us minimize the damage.</p>
</blockquote>
<p>There are two problems that have been raised: that webkit has an "IE6 style" dominance over mobile, and that developers are making matters worse.</p>
<h3 id="time-for-action" tabindex="-1">Time for action</h3>
<p>The first problem is not a problem at all. It is a symptom of developer knowledge being controlled by the "latest sexy and experimental technology". Developers are fixated on making all of those great effects that we used to have with Flash work on iPads and iPhones, and because that's webkit only, they pay no attention to the other browsers that can use their sites. Web standards is going backwards, and it's our fault. It's not Apple's, it's not Google's, they simply make technology available, we produce code that only targets them.</p>
<p>The first step is to admit that there is a problem. Look at your code. If there is a vendor prefix for any property ask yourself why you chose to use it. If there's a good reason (like 2d transforms are cool) then look closer - have you put all of the other vendor prefixes there as well? Have you checked the syntax to make sure it's the same (because that's what vendor prefixes are for). One final thing is to make sure you never do it again. There's tools to help like <a href="http://leaverou.github.com/prefixfree/">prefix-free</a> and SASS and LESS CSS pre-processors all do this for you.</p>
<p>Do it.</p>
<h3 id="change-for-browsers-is-harder" tabindex="-1">Change for browsers is harder</h3>
<p>I'll <a href="http://remysharp.com/2012/02/09/vendor-prefixes-about-to-go-south/">quote directly from Remy Sharp</a> on this one:</p>
<blockquote>
<p>Browsers need to:</p>
<ol>
<li>Fucking drop experimental prefixes. It's unacceptable and a disservice to the developers working with your browser. You need to give timelines to dropping these things.</li>
<li>Non-production ready browsers should support experimental prefixes, <em>production ready releases</em> <strong>should not</strong>. If it's Chrome 16 - the stable version - experimental support should not be baked in. The properties should be full available <em>without</em> the prefix.</li>
<li>Work with the working groups (...Apple).</li>
</ol>
</blockquote>
<p>I especially like item 2 here. Too many developers use dev channels as their main browser (I know I do). This is fine, but by removing prefixes from stable browser versions has the great advantage of breaking for your clients who will be on the stable channel. This will raise bugs and force developers to change their code. It works for me has never been a good excuse, and with this change it never will be.</p>
<h3 id="make-some-noise%2C-internet" tabindex="-1">Make some noise, Internet</h3>
<p>None of these changes will be made if we don't get the evangelism community back on its feet. For too long have we assumed that everything is hunky-dory now that HTML5 has ridden in and saved us from non-standard implementations. I implore you, blog about this, shout about this, tell your friends and make them review their code. Vendor prefixes are here to stay, and so are the five major browsers. You must code for all of them, all the time. Shout it from the rooftops, the only good vendor prefix, is every vendor prefix.</p>
Node & Tell at London Web Standards2012-03-03T00:00:00Zhttps://www.steveworkman.com/2012/node-and-tell-at-london-web-standards/<p>February 2012's <a href="http://londonwebstandards.org/">London Web Standards</a> event at Forward London was an introduction to <a href="http://nodejs.org/">Node.js</a>, the server-side javscript framework designed for high concurrency and real-time events. There were two sessions at the event, George Ornbo (<a href="http://twitter.com/shapeshed">@shapeshed</a>) giving an introduction to Node, and a "Node & Tell" session, where four sets of developers came and told the gathered crowd how they'd been using Node in their work.</p>
<p><a href="https://www.steveworkman.com/static/img/LWSNode-George-Ornbo.png"><img src="https://www.steveworkman.com/static/img/LWSNode-George-Ornbo.png" alt="" title="LWSNode - George Ornbo" loading="lazy" /></a></p>
<h3 id="introduction-to-node.js---george-ornbo" tabindex="-1">Introduction to Node.js - George Ornbo</h3>
<p>George is a front-end javascript developer who wanted a simpler way to create web apps quickly, and in a language that he knows. Enter Node.js, with its "Event driven I/O", or better put as "Network programming with javascript".</p>
<p>George fired up his browser, and gave the attendees the IP address of his laptop, which was running a simple Node.js chat server, which coped incredibly well with 100 people trying to join from their phones and laptops, showing how resilient it can be on a small laptop. We were then treated to a demo of a "Love/Hate" measure, taking a data feed from Twitter in real-time, it counted and displayed a graph of the percentage of love and hate on Twitter within the last 10 minutes. Seeing the data streaming in, and then the 30 lines of code used to create that was amazing. Node is a framework that does all the hard stuff for you, and enables you to write applications quickly and efficiently.</p>
<p>George then explained why it was so fast - Node works on an event loop, rather than threads. The idea is that no operation should be blocking so that Node can always keep getting http requests and fire of requests to the database or any other data sources asyncronously. It's a big of a head scratcher to anyone who hasn't done much high-performance javascript before, but it's a very efficient way to program. George showed two graphs (roughly transcribed to the notes) on node performance vs apache for high concurrency and memory usage: node wipes the floor with it. <em>Note: since this talk took place, Apache 2.4 has come out. These graphs are a bit different now but Ngix is still well ahead on speed</em></p>
<p>In summary, Node is great for high concurrency situations and for making server back-ends quickly. It's a break from your normal programming style but is is just JavaScript when you're over that hurdle. Give it a go!</p>
<p><a href="https://www.steveworkman.com/static/img/LWSNode-Node-and-Tell.png"><img src="https://www.steveworkman.com/static/img/LWSNode-Node-and-Tell.png" alt="" title="LWSNode - Node and Tell" loading="lazy" /></a></p>
<h3 id="node-%26-tell" tabindex="-1">Node & Tell</h3>
<p>All of these 4 people gave it a go and were kind enough to show us what they'd been doing.</p>
<p>First was <a href="http://twitter.com/tiny_m">Maired Buchan</a> from Head who had made a voting system based on an Arduino and Node to collect the data. Other than that the voting machine use marble runs to capture votes, she explained that they'd tried a number of places to put the Node server to get maximum performance, eventually settling on a separate server, allowing the Arduino to just count and send a message to Node. The <a href="https://github.com/mairead/the-arduino-vote-o-matic">source code is now on GitHub</a>.</p>
<p>The second talk was from <a href="http://twitter.com/teabass">Andrew Nesbitt</a> talking about the <a href="http://lnug.org/">London Node User Group</a> (which me mentioned on and off), and showing off how he'd made the LNUG website with Node and GitHub.</p>
<p>The third talk was <a href="http://twitter.com/thompsonsimon">Simon Thompson</a> talking about how he's used Node as a prototyping language, making a drag & drop filing cabinet backed by a MongoDB. He was really impressed with how simple everything was and how little setup you needed to do before everything was working.</p>
<p>The final talk from <a href="http://twitter.com/danielknell">Daniel Knell</a> and <a href="http://twitter.com/flexewebs">Jason Grant</a> showed a responsive web app that found interesting things to do in your local area. Using Node to help them make some of the more complex geolocation calculations, the web app is a very simple idea that is well executed. It is so good that it won first place at a recent hack day, and they finished in half the time they were given.</p>
<h3 id="node-training" tabindex="-1">Node Training</h3>
<p>If you want to learn more, go to <a href="http://lnug.org/">LNUG.org</a> or look into <a href="http://leftlogic.com/training">Remy Sharp's training course</a>, which is an excellent introduction to Node</p>
<p><a href="https://www.steveworkman.com/static/img/20120214-091636.jpg"><img src="https://www.steveworkman.com/static/img/20120214-091636.jpg" alt="London Web Standard crowd at Forward" loading="lazy" /></a></p>
Installing JSDom on Windows2012-03-16T00:00:00Zhttps://www.steveworkman.com/2012/installing-jsdom-on-windows/<p>If you've ever wanted to scrape a web page and extract some information using Node.js, there's a really useful module called <a href="http://search.npmjs.org/#/jsdom">JSDom</a> that parses a document and gives you a DOM that you can then manipulate with YUI or jQuery.</p>
<p>This all works really well... on Linux and OS X. On Windows, Node.js can't run pre-built native Node.js libraries, so it has to be build by the NPM build service. This is all documented on the <a href="https://github.com/tmpvar/jsdom/issues/378">JSDom github</a> issue, but for brevity, this is what you have to do to make it work</p>
<ol>
<li>Node.js 0.6.12 is required, apparently 0.6.13 will make this easier</li>
<li>NPM 1.1.8 is required - Node.js is bundled with 1.1.4 so you'll need to run npm install npm</li>
<li><a href="http://www.python.org/">Python 2.7</a> is required - And the python runtime needs to be on the PATH</li>
<li>Microsoft Visual C++ 2010 is also required - I've got the whole Visual Studio installed on my machine, but I think you'll be able to get away with the <a href="http://www.microsoft.com/download/en/details.aspx?id=5555">distributable package</a></li>
<li>I believe you'll also need the <a href="https://github.com/TooTallNate/node-gyp">node-gyp module</a> installed globally Node-gyp is included in NPM</li>
</ol>
<p>**Update: **Node.js 0.6.13 is now out with npm 1.1.9 and an updated node-gyp which will make this a lot easier. However, you'll still need Python 2.7 and Visual C++ 2010</p>
<p><strong>Update 2:</strong> Having the Visual C++ redist package isn't enough, you have to have Visual Studio installed too. You can get the <a href="http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-cpp-express">express edition for free from Microsoft here</a></p>
<p>**Update 3: **The express edition of Visual C++ 2010 doesn't come with the latest SDKs so it won't compile out of the box. You'll need to run Windows Update and <a href="http://www.microsoft.com/en-us/download/details.aspx?id=4422">download a special set of compiler updates</a> from Microsoft. Thanks to Pavel Kuchera for <a href="https://github.com/brianmcd/contextify/issues/39#issuecomment-7035383">finding this one out</a> (the hard way).</p>
<p>That's a lot of dependencies, but it should all work. Once Python and C++ are installed, the commands you'll need to run are:</p>
<pre><code>npm install -g npm
npm install -g node-gyp
npm install jsdom
</code></pre>
<p>And that's it. If there are build errors, let me or the JSDom team know.</p>
Sketchnotes from The Big M 2012 at Bath Digital Festival (Open Mic 13)2012-03-23T00:00:00Zhttps://www.steveworkman.com/sketchnotes-from-the-big-m-2012-at-bath-digital-festival-open-mic-13<p>Yesterday, I went to Bath to learn about the latest in mobile development from some of the best people in the industry. We had talks from network operators, people who interact with developer advocates, how to make money from apps, digital media distribution, the future of the mobile web and talks about good web apps and responsive web design.</p>
<p>I took sketchnotes throughout the day and inked them up earlier. They were started in pen, hence being a bit rough around the edges (my <a href="https://www.steveworkman.com/web-design/2011/future-of-web-design-sketchnotes/" title="Future of Web Design Sketchnotes – Day 1">FOWD set</a> is still the <a href="https://www.steveworkman.com/web-design/2011/future-of-web-design-sketchnotes-day-2/" title="Future of Web Design Sketchnotes – Day 2">high water mark</a> personally), but have a look.</p>
<p>My thanks again to <a href="http://twitter.com/jamesparton">James Parton</a>, <a href="http://twitter.com/twhume">Tom Hume</a>, <a href="http://twitter.com/kgutteridge">Keiran Gutteridge</a>, <a href="http://twitter.com/thayer">Thayer Prime</a>, <a href="http://twitter.com/klbarber">Karen Barber</a>, <a href="http://twitter.com/rickcc">Rick Chapman</a>, <a href="http://twitter.com/ppk">PPK</a>, <a href="http://twitter.com/philarcher1">Phil Archer</a> and <a href="http://twitter.com/laurakalbag">Laura Kalbag</a> for such great talks, and to Chris and Mike for putting on the event.</p>
State of the Browser 20122012-04-28T00:00:00Zhttps://www.steveworkman.com/2012/state-of-the-browser-2012/<p>Just a quick post to say that State of the Browser 2012 was awesome. I had loads of fun, met a lot of great new people and heard loads of really interesting talks.</p>
<p>If you couldn't make it, sad times, but we streamed the whole thing live on the website. Vimeo videos will be on the website soon, direct yourself to <a href="http://browser.londonwebstandards.org/">browser.londonwebstandards.org</a> for the goodies.</p>
<p>Before that, I was taking photos, so take a look at this album to see what was going on: <a href="https://plus.google.com/photos/102931355438327676259/albums/5736524470114876337"><img src="https://lh3.googleusercontent.com/-QdkonACtjlY/T5w7GbEJ6zI/AAAAAAAAAX4/xn_ZPB70omI/s569/DSC_0002.JPG" alt="" loading="lazy" /></a> <a href="https://plus.google.com/photos/102931355438327676259/albums/5736524470114876337">https://plus.google.com/photos/102931355438327676259/albums/5736524470114876337</a></p>
<p>Steve</p>
The importance of cooperation2012-04-30T00:00:00Zhttps://www.steveworkman.com/2012/the-importance-of-cooperation/<p>This weekend, London Web Standards manage to get evangelists from all of the major browsers in a panel to talk about their companies' products. After a week of Opera bashing for being the first vendor to alias webkit CSS prefixes it was a sight for sore eyes. Thing is, from what I've observed, this is how things usually are between the vendors.</p>
<p>Sure, there were a few cutting comments about each other's browsers, but they were all very friendly, no one actively dislikes the other's browser. These guys are all good friends. When Bruce Lawson walked in a little late, Chris Heilman noticed, got up and gave Bruce a Playbook and a big hug. This kind of respect and friendship helps make the web happen, so that when different HTML5 specs come to the W3C, they can genuinely listen to each other, and come up with the right solution. This is how specs like the new layout modules will be resolved.</p>
<p>However, there's always a gap in the panel, generally represented by the panelist from Opera eating an Apple. Tr maker of the second most popular mobile browser, Safari, do not have a public-facing evangelism /developer relations function and do not send representatives to these kind of events. If you've tried to book an Apple rep for an event before the answer is as follows, "tr event will take place at an Apple campus, every attendee will sign an NDA and no tweeting or blogging or discussion of what was said will be allowed". This is unacceptable to almost every meetup group and conference that I know of, so they fon't turn up. With the stability of HTML5 being in such a fragile state, this cannot continue.</p>
<p>Apple's absence is starting to cause problems. A good question to tr panel about mobile safari becoming the new IE6 and that Apple don't do betas or announce features in advance went unanswered because there was no Apple rep to defend them. The only time that apple do represent themselves is at w3c meetings where they push new standards through. But they haven't engaged the community and so the reaction to their ideas by the community can be negative. Put simply, I believe that Apple's policy of not discussing their browser in public is damaging to the industry, and will lead to another IE66 situation</p>
London Web Standards Semantic Web2012-06-19T00:00:00Zhttps://www.steveworkman.com/2012/london-web-standards-semantic-web/<p>Last night was London Web Standards' Semantic Web event with <a href="http://twitter.com/mischatuffield">Mischa Tuffield</a> and <a href="http://twitter.com/jarredmcginnis">Jarred McGinnis</a> talking about RDF standards, SPARQL, how it all works and how it works in the real work in the mainstream press.</p>
<p>Here's my sketchnotes from both presentations</p>
<p><a href="https://www.steveworkman.com/static/img/LWSSemantic-Mischa-Tuffield.png"><img src="https://www.steveworkman.com/static/img/LWSSemantic-Mischa-Tuffield.png" alt="Sketchnotes of Mischa Tuffield at LWSSemantic" title="LWSSemantic - Mischa Tuffield" loading="lazy" /></a> Sketchnotes of Mischa Tuffield at LWSSemantic</p>
<p><a href="https://www.steveworkman.com/static/img/LWSSemantic-Jarred-McGinnis.png"><img src="https://www.steveworkman.com/static/img/LWSSemantic-Jarred-McGinnis.png" alt="Sketchnotes of Jarred McGinnis at LWSSemantic" title="LWSSemantic - Jarred McGinnis" loading="lazy" /></a> Sketchnotes of Jarred McGinnis at LWSSemantic</p>
Interacting with HTML5 Video Players2012-06-27T00:00:00Zhttps://www.steveworkman.com/2012/interacting-with-html5-video-players/<p>HTML5 video players are incredibly useful, enabling developers to display video on non-flash devices (I'm looking at you, Apple). It's really simple to get started with HTML5 video, but when you want to do something more complicated, there's not much documentation. Thankfully, it's really quite simple, and this article will show you how to use the HTML5 video JavaScript API to interact with the videos.</p>
<h3 id="basic-video" tabindex="-1">Basic video</h3>
<p>This is the HTML:</p>
<p>This is your standard HTML5 video player, with the standard browser video controls. The video has multiple sources so browsers that only support certain codecs (FireFox and Ogg for example) get the right video.</p>
<p>Let's say you want the video to start when you click a button. That's pretty easy, and looks like this:</p>
<pre><code>var firstvideo = document.getElementById('firstvideo');
var playButton = document.getElementById('playfirstVideo');
playButton.addEventListener('click', function(e) {
firstvideo.play();
});
//jQuery version
$('#playfirstVideo').on('click', function(e) {
$('#firstvideo').play();
});
</code></pre>
<p>Play</p>
<script type="text/javascript">var firstvideo = document.getElementById('firstvideo'); var playButton = document.getElementById('playfirstVideo'); playButton.addEventListener('click', function(e) { firstvideo.play();});</script>
<p>And if you want to pause it:</p>
<pre><code>var stopButton = document.getElementById('stopfirstVideo');
stopButton.addEventListener('click', function(e) {
firstvideo.pause();
});
//jQuery version
$('#stopfirstVideo').on('click', function(e) {
$('#firstvideo').pause();
}
</code></pre>
<p>Pause</p>
<script type="text/javascript">// < ![CDATA[ var stopButton = document.getElementById('stopfirstVideo'); stopButton.addEventListener('click', function(e) { firstvideo.pause();}); // ]]></script>
<h3 id="subscribable-events" tabindex="-1">Subscribable events</h3>
<p>That's cool, you can interact with the element through JavaScript. If you're a fan of the regular video controls, you can still access events fired by the video. The main ones you'll be interested in are:</p>
<ul>
<li><strong>play</strong> - triggered when the video starts playing</li>
<li><strong>playing</strong> - triggered whilst the video is playing</li>
<li><strong>canplay</strong> - triggered when the video has been loaded and it can be played</li>
<li><strong>pause</strong> - triggered when the video is paused</li>
<li><strong>ended</strong> - triggered when the video has finished</li>
</ul>
<p>There are lots of others too, a full list can be seen on the <a href="http://www.w3.org/2010/05/video/mediaevents.html">W3C demo</a> for HTML5 video. These include events triggered when the video is seeked (skipped forward or backwards in time) and when the time on the video has changed.</p>
<p>It's simple to hook these up using event listeners to see what's going on.</p>
<p>Video state:</p>
<p>Try it out using this video, watching the label which says which event was fired last.</p>
<pre><code> var secondvideo = document.getElementById('secondvideo');
var statelabel = document.getElementById('videoState');
secondvideo.addEventListener('play', function(e) { // Repeat this for other events
// The video is playing
statelabel.innerHTML = "Playing";
});
// jQuery example
var statelabel = $('#videoState');
$('#secondvideo').on('play', function(e) { // Repeat this for other events
// The video is playing
statelabel.html("Playing");
});
</code></pre>
<script type="text/javascript">var secondvideo = document.getElementById('secondvideo');var statelabel = document.getElementById('videoState'); var events = ['play', 'playing', 'canplay', 'pause', 'ended', 'seeking', 'seeked', 'loadstart']; for (var i=0, len=events.length; i<len ; i++) { secondvideo.addEventListener(events[i], function(e) {statelabel.innerHTML = event.type;}); }</script>
<p>That's the basics, from there you can use the timing event to make a caption system (tag words with data elements and mark them when their time hits in the video).</p>
<h3 id="what-about-youtube%3F" tabindex="-1">What about YouTube?</h3>
<p>With YouTube and other embedded video players there's no direct access to the video element, which makes interacting with videos in the way shown above very difficult. Thankfully, the kind folks at Google have thought of this and provided an API to help us through. The whole documentation is on <a href="https://developers.google.com/youtube/player_parameters#IFrame_Player_API">YouTube developers</a> and there's a great <a href="https://developers.google.com/youtube/youtube_player_demo">player demo</a>, but here's the gist of it.</p>
<p>There's a few gotchas you need to be aware of:</p>
<ol>
<li>You've got to be using a served web page, local files won't work.</li>
<li>If you're trying to interact more than one YouTube embed on a page, you will need to address each one individually with unique IDs, otherwise the browser won't know which video to interacti with</li>
</ol>
<p>Got it? Great, let's head into the code. This first section, is the embed code needed to include the video in the page. This should be standard YouTube embedding stuff.</p>
<pre><code>// The element that the player will be inserted into
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
<div></div>
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'g8evyE9TuYk',
events: {
'onStateChange': "onytplayerStateChange"
}
});
}</iframe></script>
</code></pre>
<p>Video state:</p>
<script type="text/javascript">// Load the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);var player; function onYouTubePlayerAPIReady() { player = new YT.Player('ytplayer', { height: '390', width: '640', videoId: 'g8evyE9TuYk', events: { 'onStateChange': "onytplayerStateChange" } }); }</script>
<p>That's your YouTube video, now we need to subscribe to the events <em>N.B. there's no need to subscribe to the onYouTubePlayerReady event as you've effectively done this when the API loads</em></p>
<pre><code>function onytplayerStateChange(e) {
document.getElementById('ytvideoState').innerHTML = e.data;
}
// jQuery version
function onytplayerStateChange(e) {
$('#ytvideoState').html(e.data);
}
</code></pre>
<script type="text/javascript">function onytplayerStateChange(e) { document.getElementById('ytvideoState').innerHTML = e.data; }</script>
<p>As the state changes, a different value appears at the bottom. These are: unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5). From there you can access any function of the YouTube JavaScript API, which mimics the HTML5 spec with a few small changes, such as the play command is playVideo() instead of just play(). Take a look at the documentation for full details about what you can do.</p>
<h3 id="vimeo-too%3F" tabindex="-1">Vimeo too?</h3>
<p>Yes, Vimeo can do this too. The API is similar to YouTube, but isn't quite as simple without their <a href="https://github.com/vimeo/froogaloop">Frogaloop</a> library, so have a look at their documentation for the <a href="http://developer.vimeo.com/player/js-api">Vimeo JavaScript API</a>.</p>
<h3 id="summary" tabindex="-1">Summary</h3>
<p>So, there you have it, a few bits of code to control different types of HTML5 video that are common on the web. They're really useful for counting the number of views of a video, captions, and generally making videos more interactive. Let me know what uses you come up with for it in the comments.</p>
Mobile Augmented Reality at London Web Standards2012-07-17T00:00:00Zhttps://www.steveworkman.com/2012/mobile-augmented-reality-at-london-web-standards/<p>This month's <a href="http://londonwebstandards.org/">London Web Standards</a> was on augmented reality, a hot topic a few years ago that is making its way back into people's mindshare with projects like Google Glass. We had <a href="http://twitter.com/MysticMobile">Dr. Paul Coulton</a> talking about the current state of AR on mobile, <a href="http://twitter.com/teppie">Imogen Levy</a> talking about how Westminster Abbey is using 3D and AR to improve the visitor experience, and <a href="http://twitter.com/thewarpedcoder">Trevor Ward</a> talked about how we can use AR now on current-generation devices.</p>
<p>We were also graced with the presence of <a href="http://twitter.com/claresutcliffe">Clare Sutcliffe</a>, who came to talk to us about <a href="http://codeclub.org.uk/">Code Club</a>, getting kids aged 9-11 to learn to program using Scratch. The video that she showed is after the gallery.</p>
<p><lite-youtube videoid="FxhGIajRsq4" style="background-image: url('https://i.ytimg.com/vi/FxhGIajRsq4/hqdefault.jpg');"></lite-youtube></p>
CSS Bookshelf - now on github2012-08-01T00:00:00Zhttps://www.steveworkman.com/2012/css-bookshelf-now-on-github/<p>My <a href="https://www.steveworkman.com/bookshelf/" title="CSS3 Bookshelf">CSS bookshelf</a> is now <a href="https://github.com/steveworkman/cssbookshelf">available on github</a> as an easy download if you want one yourself. Given that the code is now 2 years old it's showing its age somewhat, so I'll give it a spruce up over the next few weeks. Things like:</p>
<ul>
<li>Removing the jQuery dependency (as I know a lot more JS now)</li>
<li>Using a CSS pre-processor on the stylesheet</li>
<li>Adding CSS gradients for the spines of the books, because there's no need for images for most of them</li>
</ul>
<p><a href="https://github.com/steveworkman/cssbookshelf">Take a look at the project</a> and let me know what you think in the comments</p>
Why would Twitter close the door on 3rd party apps?2012-08-17T00:00:00Zhttps://www.steveworkman.com/2012/why-would-twitter-close-the-door-on-3rd-party-apps/<p>Last night, Twitter blogged about <a href="https://dev.twitter.com/blog/changes-coming-to-twitter-api">upcoming changes to its API in version 1.1</a>. It's not the most communicative of posts, goes on for quite a bit and has <a href="http://daringfireball.net/linked/2012/08/16/twitter-drop-dead">incensed</a> quite a lot of developers.</p>
<p>The fury is all about this diagram and paragraph:</p>
<blockquote>
<p><img src="https://dev.twitter.com/sites/default/files/images_blog/dev_chart.png" alt="Twitter dev quadrant" title="Twitter dev quadrant" loading="lazy" /></p>
<p>In the upper right-hand quadrant are services that enable users to interact with Tweets, like the Tweet curation service <a href="http://storify.com/">Storify</a> or the Tweet discovery site <a href="http://favstar.fm/">Favstar.fm</a>. That upper-right quadrant also includes, of course, "traditional" Twitter clients like <a href="http://tapbots.com/software/tweetbot/">Tweetbot</a> and<a href="http://www.echofon.com/">Echofon</a>. Nearly eighteen months ago, we gave developers guidance that they should not build client apps that mimic or reproduce the mainstream Twitter consumer client experience." And to reiterate what I wrote in my last post, that guidance continues to apply today.</p>
</blockquote>
<p>So, apps like Tweetbot, Echofon and Tweetdeck are no longer wanted. But why would they do this, and what are the alternatives?</p>
<h3 id="why%3F" tabindex="-1">Why?</h3>
<p>Because Twitter is changing, and it's going to change rapidly. Twitter's 1.0 API has been around for 6 years, which is an eternity in API terms. They need to move on and they want their applications to come with them in the same way that Apple wants to control their app ecosystem and user experience. The problem is that these rules haven't existed before and the way it's all been phrased is pretty hideous and very negative.</p>
<h3 id="alternatives" tabindex="-1">Alternatives</h3>
<p>Well, they could have phrased it better. <a href="http://dashes.com/anil/2012/08/what-twitters-api-announcement-could-have-said.html">Anil Dash does a great job of re-writing the post</a> and making the world seem right again.</p>
<p><a href="http://stu.mp/">Joe Stump</a> makes some <a href="https://twitter.com/joestump/status/236323626545201152">great suggestions</a> as to how to control third party clients:</p>
<blockquote>
<p>Why not run API like the App Store? 1. Require they use Twitter ads 2. Require they follow design rules 3. Require all clients be approved</p>
</blockquote>
<p>I really like those ideas, and they seem implementable, but it will require a lot of effort on Twitter's side to set up this ecosystem and encourage third party apps again.</p>
<p>But, from the blog post, it seems Twitter doesn't want to encourage third party apps.</p>
<h3 id="what-next%3F" tabindex="-1">What next?</h3>
<p>There'll still be 6 months between v1.1 being turned on and 1.0 being turned off, which is plenty of time for developers to bring themselves into line with the new rules. Twitter will be listening to this discussion, and will probably respond in time. Hopefully this will clear up the confusion, and I hope they work directly with the developers that are affected by this, instead of just dictating the rules. We can always hope!</p>
<p>Just remember, it's still a great service (<a href="https://twitter.com/jsnell/status/236276552009150464">via Jason Snell</a>)</p>
<blockquote>
<p>As the Twitter angst burns bright, let me say this: I think Twitter is the single best thing ever made on the Internet. Seriously.</p>
</blockquote>
LWS is 5 - Less on CSS and More on CSS!2012-10-24T00:00:00Zhttps://www.steveworkman.com/lws-is-5-less-on-css-and-more-on-css<p>This month was a very special meetup for <a href="http://www.londonwebstandards.org/">London Web Standards</a> - it's 5th birthday celebrations! Yes, it's hard to believe that 5 years ago in October three guys met up in a North London pub to talk about the web. To celebrate this momentous occasion, <a href="http://twitter.com/teppie">Imogen Levy</a> baked us a massive 7-layer London Web Standards Cake (British Bake-off contender next year 2013 for sure). Imogen, thank you so much (from all of the LWS Organisers)!</p>
<p><a href="http://instagram.com/p/RGJGpgjQvt/"><img src="https://distilleryimage5.instagram.com/dffb9b7a1c7c11e2b8f522000a1fbce9_7.jpg" alt="" loading="lazy" /></a></p>
<p>It was also a big LWS for me personally, as I took the stage to talk about a pet topic of mine: Less, Sass and CSS Pre-processors. Gotta say, I had a lot of fun and got some really great questions and comments from the audience. I'll definitely do it again.</p>
<p>So, the sketchnotes service is at half capacity today, it being quite hard to do sketchnotes of my own talk. The notes this month are of Peter Gasston's talk on The CSS of Tomorrow, covering future specs that will bring some of the features from Less/Sass to CSS, and hugely improve the way we layout websites (finally!).</p>
<h3 id="my-talk---css-pre-processors%3A-21st-century-css-(html-slides)" tabindex="-1">My Talk - <a href="https://speakerdeck.com/steveworkman/css-pre-processors-21st-century-css">CSS Pre-Processors: 21st Century CSS</a> (<a href="http://steveworkman.github.com/less-sass-talk">HTML slides</a>)</h3>
<script async="" class="speakerdeck-embed" data-id="50852d2ffecefb00020286a1" data-ratio="1.4586894586894588" src="https://speakerdeck.com/assets/embed.js"></script>
<h3 id="peter-gasston-the-css-of-tomorrow" tabindex="-1">Peter Gasston <a href="https://speakerdeck.com/stopsatgreen/the-css-of-tomorrow-revised">The CSS of Tomorrow</a></h3>
<script async="" class="speakerdeck-embed" data-id="5085eadcae6235000201e95f" data-ratio="1.3333333333333333" src="https://speakerdeck.com/assets/embed.js"></script>
<h4 id="my-sketchnotes-from-peter's-talk" tabindex="-1">My Sketchnotes from Peter's Talk</h4>
<p><a href="https://www.steveworkman.com/static/img/LWSIs5-Peter-Gasston.jpg"><img src="https://www.steveworkman.com/static/img/LWSIs5-Peter-Gasston.jpg" alt="The CSS of Tomorrow - Peter Gasston" title="The CSS of Tomorrow - Peter Gasston" loading="lazy" /></a> The CSS of Tomorrow - Peter Gasston</p>
<p>Thanks again to everyone involved, we truly celebrated LWS's birthday in style.</p>
Sketchnotes from LWS Print2012-10-24T00:00:00Zhttps://www.steveworkman.com/2012/sketchnotes-from-lws-print/<p>September's <a href="http://www.londonwebstandards.org/">London Web Standards</a> Meetup featured UX designers and developers bringing print to life with their tales of making web apps for the FT (<a href="http://twitter.com/andrewsmatt">Matt Andrews</a>) and an iPad app for The Week (<a href="http://twitter.com/harrybr">Harry Brignall</a>). Sketchnotes are below.</p>
<p>Sorry it's not much of a write-up (and a month late) but better late than never.</p>
The Guardian Mobile Business Summit 20122012-11-20T00:00:00Zhttps://www.steveworkman.com/2012/the-guardian-mobile-business-summit-2012/<p>Yesterday I attended <a href="http://www.guardian.co.uk/media-network/2012/nov/20/mobile-media-business-summit">The Guardian Mobile Business Summit</a> in London. As a few hundred mobile marketing and business people from a wide variety of large and small companies sat and listened to talks on the future of mobile, mobile wallets and the mobile ecosystem.</p>
<p>Some of the talks were very interesting in the huge number of stats that they poured out: conversion rates, sales figures, profit figures, all pointing to the decline of Nokia and the rise of Samsung (a principle sponsor who gave the most monotone speech of the day). For me, the most interesting talk was on LinkedIn's mobile redesign, focusing on the IA of the site rather than aesthetics or profit figures.</p>
<p>I particularly enjoyed the talk by Mozilla's r&d director who talked about the Firefox OS, a contender to grab hold of the low end smartphone market by replacing the native APIs with standardised HTML and JavaScript.</p>
<p>I've done sketchnotes for most of the sessions except the panel sessions where absolutely nothing new was said or discussed, the mobile future panel being particularly grumpy about their own subject as if they'd said it a thousand times before (and they had).</p>
<p>Overall it was an enjoyable day, but lacking in any revolutionary sound bites or theories, though I'm sure that the crowd got what they wanted out of each of the sessions. My thanks to Chris at he guardian for inviting me along.</p>
CSS3 Object-fit Polyfill2012-11-21T00:00:00Zhttps://www.steveworkman.com/2012/css3-object-fit-polyfill/<p><strong>TL;DR; I've made a polyfill for CSS3 Object-fit. Download it from Github here: <a href="https://github.com/steveworkman/jquery-object-fit">https://github.com/steveworkman/jquery-object-fit</a></strong></p>
<h3 id="the-need-for-object-fit" tabindex="-1">The need for object-fit</h3>
<p>A month ago, I was looking into creating a responsive grid full of images for a client. The width of the columns would vary depending upon device, and the dimensions and aspect ratio of the provided images could not be guaranteed.</p>
<p>The issue for me is keeping the images looking great, without skewing the dimensions and distorting the results, but I also needed them to expand or shrink to fit the boxes that they had been provided with.</p>
<p><img src="https://dev.opera.com/articles/view/css3-object-fit-object-position/figure1.jpg" alt="A skewed picture" loading="lazy" /></p>
<p>Knowing CSS, the property <code>background-size: cover|contain</code> would do this perfectly (See <a href="http://www.alistapart.com/articles/supersize-that-background-please/">this A List Apart article</a> for lots more detail), but this is for background images, and semantically, the images in my grid are part of the content, so should not be background images. Looking for an equivalent, I found Object-fit: part of the <a href="http://dev.w3.org/csswg/css3-images/#the-object-fit">CSS3 Image Values and Replaced Content spec</a>. Unfortunately, browser support for this is very poor; this is the current browser implementation of this property:</p>
<iframe src="http://caniuse.com/object-fit/embed/" width="100%" height="280" \="">
<p>As you can see, as of September 2012, only Opera support this feature! <em>Side note: there is one other browser (there has to be for this to be for the spec to reach candidate recommendation) which is the HP TouchPad, not very useful for the majority of users</em></p>
<p>This isn't going to get anyone very far, given that over 90% of all browser usage doesn't support this feature. So, whilst browsers catch up, we have to use a polyfill to re-create this functionality with JavaScript.</p>
<h3 id="object-fit-polyfill" tabindex="-1">Object-fit polyfill</h3>
<p>The polyfill is based on <a href="https://github.com/schmidsi/jquery-object-fit">jquery-object-fit by Simon Schmid</a>, to which I've made some improvements:</p>
<ul>
<li>Added support for <code>cover</code></li>
<li>Fixed the implementation for IE and Firefox</li>
<li>Added feature detection so it uses the native implementation where possible</li>
<li>Made it re-calculate on resizing the browser for responsive layouts</li>
<li>Added a more tests to the suite</li>
</ul>
<h3 id="the-results" tabindex="-1">The results</h3>
<p><a href="https://www.steveworkman.com/static/img/testsuite.jpg"><img src="https://www.steveworkman.com/static/img/testsuite.jpg" alt="Object-Fit tests" title="Object-Fit tests" loading="lazy" /></a></p>
<p><a href="https://www.steveworkman.com/static/img/grid.jpg"><img src="https://www.steveworkman.com/static/img/grid.jpg" alt="Object-fit grid of images" title="Object-fit grid of images" loading="lazy" /></a> A responsive grid of images with the correct aspect ratios</p>
<p>What you get is a simple polyfill for object-fit which follows the spec as closely as it can. There is one main difference:</p>
<ul>
<li>In a native implementation the image size remains the same and the picture within the image changes its dimensions, revealing grey letterboxed content. In the poly fill, an extra div is created around the image to take its dimensions and then the image is resized within that to provide the effect.</li>
</ul>
<p>The <a href="https://github.com/steveworkman/jquery-object-fit">source code is on github</a> so please contribute if you can. I'll be keeping this up-to-date so follow me <a href="http://twitter.com/steveworkman">@steveworkman</a> on Twitter for the latest updates.</p>
<p>My thanks to Chris Mills of Opera for his articles and helping to explain how on earth all this works, and to Tab Atkins and the CSS WG for spelling it out. Hopefully there will be some more work on this feature soon. You can track the status of its implementation in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=624647">Gecko (Firefox)</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=52040">Webkit (Chrome et al)</a> on their bug trackers (see links).</p>
<p>Please, let me know what you think in the comments and on <a href="https://github.com/steveworkman/jquery-object-fit">github.</a></p>
</iframe>My 20122013-01-09T00:00:00Zhttps://www.steveworkman.com/2013/my-2012/<p>It's been an amazing year, getting married, the olympics, doing my first public speaking gig, so many highlights. Here's just a few in pictures</p>
<p>2013 is already shaping up to be a landmark year, I'm hugely excited about it already and can't wait to share the first bit of news in the next few weeks (no, my wife isn't pregnant - see this: <a href="http://instagram.com/p/T5k0Nqv0TL/">http://instagram.com/p/T5k0Nqv0TL/</a>)</p>
Speaking at Future of Web Design London 20132013-01-09T00:00:00Zhttps://www.steveworkman.com/2013/speaking-at-future-of-web-design-london-2013/<p><a href="http://futureofwebdesign.com/london-2013"><img src="https://www.steveworkman.com/static/img/fowd-london.png" alt="Future of Web Design London Logo" title="Future of Web Design London Logo" loading="lazy" /></a></p>
<p>Massively exciting news: I am going to be speaking at the <a href="http://futureofwebdesign.com/london-2013">Future of Web Design London</a> conference on their Rising Stars track! I'm going to be talking about "Putting your site on a diet" - an educational/technical talk on reducing the size of web pages whilst keeping all of the great graphics and interaction that is possible with the latest browsers.</p>
<p>I'm really pleased to be doing this talk, if you've got any specific topics you'd like me to mention, put them in the comments or twitter <a href="http://twitter.com/steveworkman">@steveworkman</a></p>
The web standards project - job done2013-03-01T00:00:00Zhttps://www.steveworkman.com/2013/the-web-standards-project-job-done/<p><a href="http://www.webstandards.org/2013/03/01/our-work-here-is-done/">"Our work here is done"</a> - the immortal final words of the web standards project. Please, read the post, for me it's a tearjerker, and I'll tell you why.</p>
<p>Before I left uni, when I still didn't know what I wanted to do, I found the WaSP group online and thought, "that's amazing - people from all walks of life and competing companies no less, all getting together to make possibly the world's most important invention a better place. I want to do what they do"</p>
<p>Many years later, as the web standards project closes its doors, I help to run a web standards meetup group, speak at conferences on web standards and evangelise their use every day. Thank you WaSP members for inspiring me to be where I am today.</p>
<p>Thank you so much</p>
Back on the Blogging Wagon2013-08-13T00:00:00Zhttps://www.steveworkman.com/2013/back-on-the-blogging-wagon/<p>It feels like months and months since I wrote a meaningful post on here. I’d love to say it’s just that I’m too busy, but it’s really that I’ve not prioritised this over all the other things that are going on. I’ve got into speaking at events, and I’m loving that, so quite a lot of my time goes on researching and writing talks. The rest of the time usually reserved for writing has gone into coding for an internal project. This gives me loads of time to put into practice all the stuff I’m talking about, to really try it out, but some of that time could be better spent writing it up for you to read about, rather than just hear about it.</p>
<p>So, let’s catch up. I’ve had some fun with a few minor projects recently:</p>
<ul>
<li><a href="https://github.com/steveworkman/jquery-object-fit">Jquery-object-fit</a> is now on bower – thanks to <a href="http://twitter.com/johnkpaul">John K. Paul</a> for the nudge</li>
<li>I made a grunt plugin for yslow: <a href="https://github.com/steveworkman/grunt-yslow-test">grunt-yslow-test</a>. You can get it from npm</li>
<li>I was on the <a href="http://upfrontpodcast.com/2013/07/26/s02-e8.html">Upfront Podcast</a>, talking about web performance</li>
<li>I gave a pecha kucha talk on <a href="https://speakerdeck.com/steveworkman/from-0-to-automated-in-20-slides">automating dev processes</a> at Berkshire Digital, the slides for which make no sense at all without the transcript (which is below the slides)</li>
<li>I’m in the process of buying a house, and a proper one at that. That one is quite stressful.</li>
</ul>
<p>So, this is me getting back onto the blogging wagon. There’s lots more to come…</p>
From 0 to Automated in 20 Slides2013-08-13T00:00:00Zhttps://www.steveworkman.com/2013/from-0-to-automated-in-20-slides/<p><em>I gave this talk at Berkshire Digital's Pecha Kucha night. I talked about automating development processes to improve the speed at which we can iterate. The full transcript is below</em></p>
<script async="" class="speakerdeck-embed" data-id="a80dc570bc7c0130a9b30a6315f6dab5" data-ratio="1.33333333333333" src="https://speakerdeck.com/assets/embed.js"></script>
<p>Hey everyone, my name is Steve Workman, I’m a web developer living in Reading and I work for a company called PA Consulting in London. I’m also an organiser of the London Web Standards group, and have been for a few years now. Most of my work is to do with making the web better, and faster for everyone, but I also like making life easier for my team of developers, and for that we need automation.</p>
<p>Let’s face it, the world as we know it wouldn’t exist without the invention of the assembly line. Whether that is 20 people sharing out tasks in an order or a completely automated production line, this way of working, an individual dedicated to a single task, passing the results on to the next stage, increases the speed at which we can get a product, and it is the enabler of what we know as mass production.</p>
<p>And by mass I really mean millions of items per day, which was a pipe dream in the early days of the Industrial revolution, like in this classic picture of the steel works in Barrow. Much of the work done here involved a lot of labour, only involving machines for large jobs. For true mass production, you need automated machines, or as we know it in technology, computers. For this talk I thought, what can I give as an analogy for mass production that is relatable to everyone and I know quite a bit about – well, my wife works for a large chocolate manufacturer – problem solved! (note, picture above may or may not be for her role).</p>
<p>This company makes 3.2 million bars per day on a single line, for the UK region alone! To do this kind of scale with industrial revolution techniques you would need an entire city full of people, though this line runs with a shift of around 20 people. And it’s not like it’s an easy job, making chocolate is a very complicated process that takes hours from raw materials to bars, and whilst people may think that it’s like stage 13, pouring chocolate into moulds, the whole process is much bigger and complex than this – which is why it must be automated to work on scale.</p>
<p>I think there is a lot that the web industry can learn from this kind of manufacturing. Automation allows developers to perform labour-intensive manual tasks like deploying an application into quick scripts to save developers huge amounts of time, and make the whole process much more reliable. In my own personal experience, back in the early days of iPhone development, we didn’t have an automated process, and code was strewn around a number of different laptops, making it very difficult to track down code and sometimes it would take us about a day to build and deploy the app. It now takes about a minute to do everything.</p>
<p>We took on the principles of the manufacturing line to make what we do better. Developers need a factory, and that is their server room. If a developer has to walk over to another computer to make an automated process happen, it’s not an automated process. For me, this is where my application servers live, and this is where my build server lives. This is my factory We have developers - they are the farmers, harvesting source code and creating the raw materials to make our wonderful chocolate bar of an application. Developers have to supply quality raw ingredients, quality source code, to make a great application. Developers have coding standards so they know how they should write their code to make it work as part of the recipe</p>
<p>Developers normally store their code in source code repositories, like they are sending their over the information highway to the loading depot, where all the ingredients will be combined to make this lovely application. The two most popular of these are subversion and git – subversion being more like a traditional factory, and git being an at-home 3D printer. Then we have our recipe, the instructions on how to combine all of our ingredients together. Traditionally this does things like compiling the code, but it’s also about applying performance enhancements that you wouldn’t want to develop with. It’s like taking cocoa beans and turning them into cocoa liquor so they’re the right size for your process. This recipe is called a build script. Over the years, build scripts have evolved from the original, and still widely used, Apache Ant, a simple worker that you specify tasks to run, then there’s maven, which also handles a project’s reporting and documentation from a single, central piece of information. More recently, we’ve got Grunt, a build script that encourages plug-ins so you can enhance it and do whatever you like. It’s like instantly summoning a new machine from a third-party company to do a complex piece of work for you.</p>
<p>Then we have our control room, and for me this is a piece of software called Jenkins – it takes the ingredients from the loading bay and runs them through the recipe. Other bits of software that does the same job are available, but Jenkins is free as in free beer, and the icon is a butler, which is a big plus in my book. Jenkins watches for what is going wrong. Like modern factories, you set thresholds for quality, and you can monitor when things are starting to go wrong, and keep it in check, to bring it back within its quality spec. You wouldn’t want a chocolate bar with a gritty, high particle size, and I wouldn’t want an application that was over 2MB to download on the page, so you can monitor this and get those warning signs sent to you via e-mail, sms, or chat.</p>
<p>The important bit is to make sure that your combined recipe is actually up to snuff. In the chocolate world, about twice a shift, the operators unwrap and check up to 150 bars out of the tens of thousands that have been made, simply to check its quality – and that’s attention to detail.</p>
<p>In software, we try to automate this as much as possible, and give ourselves traffic lights to say when things are working well and when the quality is off – something doesn’t work. When it doesn’t work, it looks like this – some nice green tests, then a big chasm as tests fail and everything breaks. These are needed to trigger the factory alarms and shut down the process. The last thing you want is this poor quality product getting out into the general marketplace – and these tests and alarms stop that. Obviously, the quality of your checks matters a lot, and the better they are, the less likely you are to produce bad code and a bad product.</p>
<p>The massive advantage that software development gives us is that your workers are other computer programs, tiny little ultra-fast robots that never tire, never go on a coffee break. They can perform practically any task you want to get your lovely app into ship shape. Say, when it’s done, you wanted your app to be submitted to a service like TestFlight so you can automatically send your app to testers.</p>
<p>But just because the little robots are very fast, doesn’t mean they’re indestructible – in reality it means they fail faster, and often without much warning. That little robot that sent the app to TestFlight won’t have anywhere to send the app to if TestFlight changes their API. These programs need maintenance, and it won’t just be because of third-party services that your robots will fail – your app itself will change and need to do different things over time, so you have to keep tweaking the program to make sure it runs like the well-oiled machine that it should be. In the chocolate world, people with the toolbox, those in the reliability team, have one of the most important jobs in the factory – to keep it going so that chocolate can reach consumers as quickly as possible and in as good a quality as possible.</p>
<p>All of this is really important so you can keep innovating, keep shipping, keep distributing and gather feedback from your users as fast as possible. Innovation and ability to react are two of the defining characteristics of startups and lean organisations. Keeping your factory running as fast as possible is vital, and something software houses should invest more in.</p>
<p>So, keep shipping, keep those little robots moving, and importantly, buy chocolate</p>
Time for a change of scenery2013-11-05T00:00:00Zhttps://www.steveworkman.com/2013/time-for-a-change-of-scenery/<p>It’s official, from the end of November I’m going to be working for hibu as the UI Tech Lead for <a href="http://yell.com/">yell.com</a></p>
<p>I've had a great start to my career – over my 6 years at PA I’ve worked for the biggest employer in Europe (twice), the world’s biggest medical charity, oil giants, financial regulators, one-man-bands, governments, utility companies, major pharmas and worldwide hotel chains. I’ve gotta say, there’s no feeling like you’re making a difference in a company, and I've had some great results over the year;. I’ve even managed to carry 15 iPads in my hand luggage through Istanbul airport. With all of that comes trade-offs, and a pretty long commute, and it's time to leave that behind.</p>
<p>So, I'm really looking forward to be able to focus on this product and make it great. I'm going to continue to be an organiser for <a href="http://londonwebstandards.org/">London Web Standards</a> so I'm not abandoning the city completely, but you'll also see me at Reading events like <a href="http://breakingborde.rs/">Breaking Borders</a>, <a href="http://readinggeeknight.com/">Reading Geek Night</a> and <a href="http://www.berkshiredigital.org/">Berkshire Digital</a>.</p>
<p>Here's to the next step.</p>
Are you browsing comfortably?2013-11-11T00:00:00Zhttps://www.steveworkman.com/2013/are-you-browsing-comfortably/<p>I was lucky enough to be asked to speak at Remy Sharp's <a href="http://2013.full-frontal.org/sideview">Side View</a> conference in Brighton this weekend, a part of the full frontal conference event. I tried to give an overview of the state of the web on TVs and how our current attitude to responsive web design works, or rather doesn't work, on big screens. Here's the slides and abstract.</p>
<p>[speakerdeck <a href="https://speakerdeck.com/steveworkman/are-you-browsing-comfortably%5C">https://speakerdeck.com/steveworkman/are-you-browsing-comfortably\</a>]</p>
<blockquote>
<p>The Responsive Web Design trend was triggered by the need to make the web presentable on small, handheld devices. Now, the Internet is encroaching on every aspect of our lives, and it won’t be long before it takes over large screens too.</p>
<p>How much of manufacturers’ internet TVs claims are true? Will the next generation of consoles bring the Internet to the living room, or will Chromecast be the gateway to the large screen future, and where do web developers fit in?</p>
<p>Lets make a web site that is suitable for the sofa</p>
</blockquote>
<p><strong>Update:</strong> The video is now online via Remy's YouTube channel and is embedded below. I've also written about this topic for the <a href="http://12devsofxmas.co.uk/2013/12/day-5-are-you-browsing-comfortably/">12 devs of Xmas</a>, if you want to read through the talk rather than watch it.</p>
<p><lite-youtube videoid="nv0KlMmLE3M" style="background-image: url('https://i.ytimg.com/vi/nv0KlMmLE3M/hqdefault.jpg');"></lite-youtube></p>
<p>The most common question I got after the talk was, "<em>What inspired you to do the talk, did a client ask you to do some TV work or something else?</em>" The answer is simple, I just wanted to know how it was and tell people about it. I know that members of the Opera developer relations team have done much of the research into the web TV for the opera web TV product, and I've always wanted to hear them talk about this subject and wondered why they didn't do those talks - the technology to make it happen exists. So I did my own research into the problems, and now I understand why they don't talk about it much. The whole web on TV experience is a mess, the technology promises a great user experience that doesn't live up to expectations, and almost actively discourages the browser usage in favour of pre-loaded app experiences.</p>
<p>Now that the research is done, I an going to look for better answers. <a href="http://www.lukew.com/">Luke Wroblewski</a> is doing this, as is <a href="http://twitter.com/beep">Ethan Marcotte</a>, and in this industry, when heavyweights like those start to investigate, there is clearly a problem to solve, and probably a mindset change to happen to enable our industry to grow and embrace this technology.</p>
<p>I hope you like the talk, let me know what you think on <a href="http://twitter.com/steveworkman">Twitter</a> and in the comments</p>
I'm Hiring, Come and Work with Me2013-11-29T00:00:00Zhttps://www.steveworkman.com/i-m-hiring-come-and-work-with-me<p><strong>Update 4th Feb 2017:</strong> I'm looking for a new front-end developer. If you think this could be you, have a look at the <a href="https://careers.yell.com/vacancies/1966/front_end_developer">front-end developer job description</a> **Update 4th Feb 2014: **I've successfully recruited two new developers to fill these roles, thank you to everyone who has applied. I will update this page as roles become available. **Update 13th August 2014: **I'm looking for another <a href="https://careers.yell.com/vacancies/1107/front_end_developer/">front-end developer</a>, and we're also looking for a <a href="https://careers.yell.com/vacancies/1335/java_developer/">Java developer</a>. If you want to apply, or know anyone who would suit, <a href="https://www.steveworkman.com/contact/">get in touch</a></p>
<p>I'm looking for two very talented developers to come and join me at Yell to work on <a href="https://www.yell.com/">yell.com</a>. With over 22 million users a month, <a href="http://yell.com/">Yell.com</a> holds a prominent position in the UK’s online industries. Over the coming months, we are looking to push the boundaries of our user interface to maintain and improve our usage and user satisfaction. As part of the Technology team, with your help we will use the latest technologies to design exciting new interactions for desktop and mobile browsers. It's a tough challenge, and to do it, I need some great people to join my team.</p>
<p>Here are the two job descriptions: <a href="https://careers.yell.com/vacancies/1107/front_end_developer/">Front End Developer</a> and <a href="https://careers.yell.com/vacancies/1133/ui_developer/">UI Developer</a></p>
<p>I'm looking for people who are adaptable and are willing to learn new technology quickly. I'm after developers who will do the right thing for the long-term, over fixing a problem quickly. I want developers who are familiar with new technology, and how it can be applied to get the absolute best performance out of the web browser, and importantly, I need someone who can appreciate the differences in browsers and know how to get the best out of them, no matter how big or small the screen size is.</p>
<p>In return, you will get freedom to implement features as you see fit, and access to the tools that you need to do your job. The role is based in <a href="https://www.google.co.uk/maps/preview#!q=One+Reading+Central%2C+Forbury+Road%2C+Reading&data=!1m4!1m3!1d1099!2d-0.9684029!3d51.4584235!4m15!2m14!1m13!1s0x48769b3d36d6186f%3A0xbdbb8fe096cab763!3m8!1m3!1d4363926!2d-2.3278149!3d52.8382005!3m2!1i1279!2i679!4f13.1!4m2!3d51.458067!4d-0.967984">central Reading</a>, just by the mainline train station (25 minutes from London Paddington). The office itself is large and spacious, with a great restaurant/cafeteria on the 10th floor with some of the best views over the city, and pretty decent coffee throughout the rest of the building. There's a whole host of other benefits (including competitive salaries, naturally) that you'll be told about if you join us.</p>
<p>If you want to apply, or know more information, <a href="https://www.steveworkman.com/contact/" title="Contact">contact me</a>, <a href="https://twitter.com/steveworkman">tweet me</a>, or just <a href="https://careers.yell.com/vacancies/1107/front_end_developer/">apply</a>. Please note, you have to be eligible to work in the UK or hold a valid work visa to get either of these roles.</p>
Going jQuery-free2014-01-15T00:00:00Zhttps://www.steveworkman.com/2014/going-jquery-free/<p>It's 2014 and I'm feeling inspired to change my ways. In 2014, I want to go <strong>jQuery-free</strong>!</p>
<p>Before I get started, I want to clear the air and put in a big fat disclaimer about my opinions on jQuery. Here we go:</p>
<p><em>jQuery is an excellent library. It is the right answer for the vast majority of websites and developers and is still the best way to do cross-browser JavaScript. What I am against is the notion of that jQuery is the answer to all JavaScript problems.</em></p>
<p>Lovely, now that's done, this is why I want to do it. Firstly, as <a href="http://browserdiet.com/">lots</a> <a href="http://vanilla-js.com/">of people</a> <a href="http://upfrontpodcast.com/2013/07/26/s02-e8.html">know</a>, jQuery is quite a weighty library considering what it does. Coming in at 32KB for version 2.x and around 40KB for the IE-compatible (gzipped and minified), it's a significant chunk of page weight before you've even started using it. There are alternatives that support the majority of its functions in the same API, such as <a href="http://zeptojs.com/">Zepto</a>, but even that comes in at around 15KB for the most recent version, and can grow larger. The worst thing for me, is that I don't use half of the library, all I really do is select elements, use event handlers and delegation, show/hide things and change CSS classes. So, I want a library of utility functions that only does these things.</p>
<p>Word to the wise, this is not a new notion, and follows on very nicely from the <a href="http://remysharp.com/2013/04/19/i-know-jquery-now-what/">work that Remy Sharp has done in this area</a> in his <a href="https://github.com/remy/min.js">min.js library</a>.</p>
<p>I'm going to write a series of posts as I attempt to separate myself from jQuery, and make my websites leaner and faster. The first of which will be on "what you think you need, and what you actually need" and give you ways to work out if this approach is for you, or if you should be sticking with jQuery. Next, I'll cover the basics of what a minimalist jQuery library; and finally I'll cover strategies for dealing with unsupported browsers.</p>
<p>Let me know if there's anything in particular you want me to cover, and I'll do my best to go over it for you.</p>
Notes from Edge Conf 2014 London2014-03-24T00:00:00Zhttps://www.steveworkman.com/2014/notes-from-edge-conf-2014-london/<p>I was lucky enough to be invited to attend and speak at <a href="http://edgeconf.com/2014-london/">Edge Conf London 2014</a>, an assembly of web development superheroes charged with discussing the future of web technology in front of a live audience. I've written up my main take-aways from the event.</p>
<h3 id="web-components" tabindex="-1">Web Components</h3>
<p><img src="https://lh4.googleusercontent.com/-jsHOa-2k3wA/UzIE9VxcSwI/AAAAAAAAMpQ/jh6eQ7WLi5s/w1000-h668-no/DSC_6208.jpg" alt="Web Components Panel at EdgeConf 3" loading="lazy" /> Web Components Panel at EdgeConf 3</p>
<ul>
<li>Web Components are the custom elements that you've always wanted. If you're after a <google-map> tag, web components can give it to you.</google-map></li>
<li>The basics are registering a new element with the DOM, then you can do anything</li>
<li>Web components are imported with a HTML link element: <link import="component.html" /></li>
<li>To make these components useful, you need to use the Shadow DOM - this is the DOM inside an element, which is already being used on the web: take a look inside Chrome's dev tools at an <input type="range" /> element - tickers are <button> elements inside the </button><input /></li>
<li>There are no browsers that support this out of the box yet, so there are two polyfills that you can use: <a href="https://github.com/Polymer/polymer">Polymer</a> (Google) and <a href="http://www.x-tags.org/">X-Tags</a> (Mozilla)</li>
<li>The Server/Client rendering trade-off is the concern at the moment. Any JS downloading in a web component will block rendering unless specified as async. You can also compress and minify web components and their resources, which is a necessary step to get anywhere near good performance. We're adding new tools, but the old techniques still apply.</li>
<li>Responsive components, that have media queries related to their own size, aren't possible because they could be influenced by the parent too, which will get the rendering engine into infinite loops.</li>
<li>On semantics and accessibility: they are still important, but with ARIA roles not caring what element they are on, you can make anything appear like anything, so the argument that web components are bad for semantics is kinda moot.</li>
<li>On SEO, the usual rules still apply, you've got to make your content accessible and not hide it, but the search bots will read web components</li>
<li>On styling, using scoped styles (a level 4 spec) works very well, as these will override at scope. However, using an object-oriented CSS approach makes this easier. It is, however, generally harder to make all of your CSS into OOCSS, which is more of a team/rigour problem.</li>
<li>In the end, you're responsible for packaging and de-duplicating your resources. Web components will remove any duplicate files from the same origin, but it's still very easy to import two versions of jQuery. You are responsible for that.</li>
</ul>
<p><lite-youtube videoid="e29D1daRYrQ" style="background-image: url('https://i.ytimg.com/vi/e29D1daRYrQ/hqdefault.jpg');"></lite-youtube></p>
<p><a href="http://twitter.com/brucel">Bruce Lawson</a> has another <a href="http://www.brucelawson.co.uk/2014/notes-on-accessibility-of-web-components/">very good write-up on this session</a>, and web components in general on his blog.</p>
<h3 id="developer-tooling" tabindex="-1">Developer Tooling</h3>
<p><img src="https://lh3.googleusercontent.com/-W1rZAjQDHds/UzIFLx5haXI/AAAAAAAAMnY/ZvtKO0YfiL0/w1000-h668-no/DSC_6256.jpg" alt="Developer Tooling Panel at Edge Conf 3" loading="lazy" /> Developer Tooling Panel</p>
<ul>
<li>Firefox's in-built developer tooling has come a long way from Firebug, with new features like deep scoping of function variables, great memory profiling and visual descriptions of CSS transforms</li>
<li>Chrome's dev tools will have a better call stack flame graph</li>
<li><a href="http://brackets.io/">Brackets</a> does great in-line CSS editing and rendering</li>
<li><a href="http://remotedebug.org/">Remote Debug</a> aims to solve the complex workflow issue, where a developer knows how to use Chrome's dev tools, but not Firefox's, and it will let you use Chrome's tools with Firefox.</li>
<li>JS Promises aren't in the dev tools sets yet. We need to experiment with the technology and then make tools. We can't make tools for something that doesn't exist yet</li>
<li>Use debugger; rather than console.log - you may as well use alert()</li>
<li>It would be great if we could inspect headless browsers with dev tools so that we can see what went on with a test</li>
<li>It was also noted that contributing to dev tools is harder than it could be. <a href="http://twitter.com/rem">Remy Sharp</a> suggested creating some kind of Greasemonkey scripting capability for dev tools</li>
</ul>
<p><lite-youtube videoid="tQG6PljqmLc" style="background-image: url('https://i.ytimg.com/vi/tQG6PljqmLc/hqdefault.jpg');"></lite-youtube></p>
<h3 id="build-tools" tabindex="-1">Build Tools</h3>
<p><img src="https://lh6.googleusercontent.com/-s8go42fV4Ck/UzIFFRP02aI/AAAAAAAAMpg/f-lxXyH_21o/w1000-h668-no/DSC_6320.jpg" alt="Build Process panel at Edge Conf 3" loading="lazy" /> Build Process panel</p>
<ul>
<li>Building software is not new. The Unix make command is 37 years old.</li>
<li>We are trying to avoid a plugin apocalypse with grunt, gulp, bruch etc re-inventing the wheel</li>
<li>A big mention in this session of the <a href="http://extensiblewebmanifesto.org/">Extensible Web Manifesto</a> as a basis for how we should be developing these tools</li>
<li>There are things that belong in our build process, and things that belong in our browser. With Sass, variables should be in the browser, but minification and compilation should not.</li>
<li>As a community, we need to be responsible with what we put into the standards</li>
<li>Having NodeJS as a dependency is reasonable right now. However, we should standardise our tools on JavaScript, rather than on NodeJS. Node is a runtime, and it will be superseded eventually.</li>
<li>Use git, not github. Use the npm protocol, not npm. The basics are great, but we can't rely on services like this</li>
<li>More tools fuel innovation. A single task spec as a way to describe tasks between the task runners would be great, but this is on hold as they currently can't agree.</li>
<li>On Grunt/Gulp - use the tool you're comfortable with, and make the most of it.</li>
<li>We are still in the early days of build tools. Being locked in to a certain tools for 5 years probably won't hurt, because at least you're using a build tool!</li>
</ul>
<p><lite-youtube videoid="C4Zz0tCCcIk" style="background-image: url('https://i.ytimg.com/vi/C4Zz0tCCcIk/hqdefault.jpg');"></lite-youtube></p>
<h3 id="page-load-performance" tabindex="-1">Page Load Performance</h3>
<ul>
<li>"Put it in the first 15KB for ultimate performance". Load content first, then enhancements, then the leftovers, and you'll get great performance</li>
<li>Use <a href="http://www.sitespeed.io/">sitespeed.io</a> and <a href="http://www.webpagetest.org/">webpagetest</a> for your synthetic testing</li>
<li>Looking at The Guardian - their branched loading model saves them 42% with their responsive site</li>
<li>There will still be times when an adaptive site, with proper redirects, will give you better performance. I can vouch for this: <a href="http://www.yell.com/">Yell.com</a> on the desktop is around 700KB, the homepage on mobile is around 60KB.</li>
<li>HTTP2 will make spriting an anti-pattern, as it makes it easier to only download what you need. Remember, it's only the network that needs the data in one file</li>
<li>If you own your site, instrument it. Target StartRenderTime, and use Window.performance for better timing. Look to improve the Page OnLoad Event.</li>
<li>Resource Priorities and timing APIs will arrive soon. You're encouraged to use these in your <a href="http://en.wikipedia.org/wiki/Real_user_monitoring">Real User Monitoring (RUM)</a> stats. Not many companies do this at the moment.</li>
<li>Finding out is a user is getting page jank is a hard problem as you'd have to hook into RequestAnimationFrame</li>
</ul>
<p><lite-youtube videoid="bZjxGSwn17o" style="background-image: url('https://i.ytimg.com/vi/bZjxGSwn17o/hqdefault.jpg');"></lite-youtube></p>
<h3 id="pointers-and-interactions" tabindex="-1">Pointers and Interactions</h3>
<p>I was on this panel, so I've not got any notes! Thankfully, Google were there to video it for everyone</p>
<p><lite-youtube videoid="lRY8jHmiIIw" style="background-image: url('https://i.ytimg.com/vi/lRY8jHmiIIw/hqdefault.jpg');"></lite-youtube></p>
<h3 id="accessibility" tabindex="-1">Accessibility</h3>
<p><img src="https://lh4.googleusercontent.com/-fl5d7KpzCVY/UzIFNJ_pquI/AAAAAAAAMns/zJpl_BP8BpI/w1000-h668-no/DSC_6468.jpg" alt="Accessibility panel at EdgeConf 3" loading="lazy" /> Accessibility Panel</p>
<ul>
<li>For accessibility, complying to geo-specific regulations is important, <strong>but</strong>, complying with the law doesn't make your website accessible</li>
<li>Are <a href="http://www.w3.org/TR/WCAG20/">WCAG</a> guidelines outdated? No, their values are still good, but there are more complex use cases since it was written. For example, gaming accessibility is about making visual cues auditory</li>
<li>Mechanical audits of a website don't give you the full accessibility brief. It can give you ARIA roles, colour contrast, click regions and alt-text etc</li>
<li>Try the <a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome Accessibility Tools</a> extension, and the <a href="https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfdcn">SEE extension</a>, to see your page though different eyes</li>
<li>If you want to know what it feels like to have a muscular problem, try using your mouse with you non-writing hand</li>
<li>Accessibility needs to be considered at the design stage - if done at the QA stage, you've missed the point</li>
</ul>
<p><lite-youtube videoid="npHcvAV2lew" style="background-image: url('https://i.ytimg.com/vi/npHcvAV2lew/hqdefault.jpg');"></lite-youtube></p>
<h3 id="future-web" tabindex="-1">Future Web</h3>
<p>Sadly, I wasn't at the event for this, but here's the video for you all to enjoy</p>
<p><lite-youtube videoid="6u03xYkwMVI" style="background-image: url('https://i.ytimg.com/vi/6u03xYkwMVI/hqdefault.jpg');"></lite-youtube></p>
<h3 id="related-reading" tabindex="-1">Related Reading</h3>
<p>I loved the conference, I've not learnt so much in a day in years! Here are some other write-ups from around the web:</p>
<ul>
<li><a href="http://adactio.com/journal/6719/">Jeremy Keith</a></li>
<li><a href="http://mntr.dk/2014/i-love-the-unix-philisophy-but/">Peter Muller on the Unix build philosophy</a></li>
<li><a href="http://aerotwist.com/blog/web-components-and-three-unsexy-pillars/">Paul Lewis on web components</a></li>
</ul>
Going jQuery-free Part 1 - Planning2014-09-01T00:00:00Zhttps://www.steveworkman.com/2014/going-jquery-free-part-1-planning/<p>Removing jQuery from your website is a big thing. We have become so reliant upon it that there are far more JavaScript plugins and modules that rely on it than that don't. You have to be so careful when we try to remove it, or you'll end up losing functionality. We need to plan to remove this code - we need to know what could break when we take jQuery away, and we need to know what holes we will need to plug to make our code work again.</p>
<h3 id="what-browsers-do-you-need-to-support%3F" tabindex="-1">What browsers do you need to support?</h3>
<p>First things first, if you are going jQuery-free we need to talk about what browsers your JavaScript will support. jQuery does a lot of good things, especially for old IE, polyfilling a huge amount of code that is only available in IE9 or later. Beyond this, old Android has significant bugs and lacks support for a number of different technologies. You need to decide what the baseline will be for your usage, and apply polyfills to suit.</p>
<p><strong>If you have to support IE8</strong> I do not recommend that you ditch jQuery. IE8 doesn't have many of the fundamentals to be considered "modern" and work without significant polyfilling in a way that modern Webkit browsers do. <a href="http://beta.theguardian.co.uk/">The Guardian</a> uses a simple script to detect whether your browser is modern:</p>
<pre><code>isModernBrowser:('querySelector'in document&&'addEventListener'in window&&'localStorage'in window&&'sessionStorage'in window&&'bind'in Function&&(('XMLHttpRequest'in window&&'withCredentials'in new XMLHttpRequest())||'XDomainRequest'in window))
</code></pre>
<p>This checks for the following functions:</p>
<ul>
<li>querySelector</li>
<li>EventListener</li>
<li>Local Storage and Session Storage</li>
<li>Function.bind</li>
<li>Standards-based AJAX</li>
<li>CORS (Cross-origin resource scripting)</li>
</ul>
<p>If you're modern, The Guardian will give you everything. If not, you get a gracefully degraded experience. IE8 will fail all but the local storage part of that test, and polyfilling that much code will negate all the benefits of removing jQuery.</p>
<p>With some browsers, it is possible to polyfill small parts of this functionality and still remove jQuery. For example, Yell supports iOS 4 and above, which doesn't have Function.bind, Android 2.3 doesn't support Element.ClassList or SVG, and IE10 doesn't support Element.data. We chose to polyfill these functions for the older browsers, but not SVG or Element.data, as these can be resolved by other techniques or just coding differently.</p>
<p>In the end, it's your choice what browsers you support, but you have to be careful. There is a <a href="http://kangax.github.io/compat-table/es5/">complete list of ECMAScript 5 functions and browsers that support them on Kangax's Github page</a> (as well as pages for <a href="http://kangax.github.io/compat-table/es6/">ES6</a> and <a href="http://kangax.github.io/compat-table/es7/">ES7</a> if you're interested) that is incredible for helping you make this decision.</p>
<h3 id="plugins-%26-third-party-code" tabindex="-1">Plugins & Third-party code</h3>
<p>jQuery made JavaScript very accessible to the novice coder because large amounts of complex code can be contained in plugins, and there are lots of them. Because jQuery is the starting point, so many bits of third-party code will need jQuery rather than using vanilla javascript and so are completely unsuitable for going jQuery-free. This can be quite a big problem.</p>
<p>There will be plenty of times that you will be able to find alternatives to plugins that work without jQuery. The simple way to find them is to use <a href="http://www.google.com/">Google</a>, <a href="http://www.github.com/">Github</a>, <a href="http://www.stackoverflow.com/">StackOverflow</a> and <a href="http://twitter.com/">Twitter</a> to search for alternatives. I wish that there was a repository that told you the good alternatives for common jQuery plugins - but there isn't one <em>(note to self: do this)</em>. This can be laborious, and involve a lot of trial and error to find alternatives that match the feature set you're looking for.</p>
<p>I went through this same process with my team for <a href="http://yell.com/">yell.com</a>'s mobile site. Luckily, there was only one plugin that we needed to keep, <a href="http://photoswipe.com/">Photoswipe</a> - a cool plugin that creates a touch-friendly lightbox from a list of images. We looked high and low for vanilla JS alternatives that 1. were mobile-friendly, and 2. worked on <a href="http://www.windowsphone.com/">Windows Phone 8</a> & <a href="https://www.mozilla.org/en-US/firefox/os/">Firefox OS</a> and <a href="https://www.mozilla.org/en-US/firefox/android/">Firefox mobile</a>. That last part was the hard bit, and I'm sad to say that we didn't find an answer. So, we had to build this ourselves - you can see it on any business profile page on your smartphone like <a href="http://www.yell.com/biz/the-three-tuns-henley-on-thames-901360987/">this one</a> (though you'll have to change your browser user agent to a mobile phone to see it).</p>
<p><strong>TL;DR</strong>: you'll need to find replacements for all plugins, and if you don't, your options are to write it yourself, or drop the functionality.</p>
<h3 id="auditing-your-javascript" tabindex="-1">Auditing your JavaScript</h3>
<p>Once you've found solutions for third party code, you need to focus on your own custom code. To find out what could break, you'll need to look over your JS and see what jQuery methods and properties are in use. You can do this manually, but I don't fancy looking over 10,000 lines of code by hand. I asked <a href="http://stackoverflow.com/questions/21110360/how-can-i-find-out-what-jquery-functions-i-use-in-my-scripts">"how can I do this" on Stack Overflow</a> and got a great answer from <a href="https://twitter.com/eliasdorneles">Elias Dorneles</a>:</p>
<blockquote>
<p>You need a tool that understands JavaScript, like <a href="http://graspjs.com/">grasp</a>. You could try to do the counting using the <code>-o</code> option for grasp and adding a sed filter to get only the function names: <code>grasp '$(__).__' -e -o *.js | sed 's/.*[.]//' | uniq -c</code>. This fails for some code for the same reasons that grep, but maybe it can help you get an estimate.</p>
</blockquote>
<p>You can run this on one file, or an entire directory. Here's what Bootstrap.js looks like (after I've tabulated it in excel):</p>
<pre><code>Function Count
on 13
data 6
js 5
each 3
is 2
ready 2
off 2
height 2
insertAfter 1
remove 1
appendTo 1
target 1
parentsUntil 1
parents 1
width 1
one 1
trigger 1
</code></pre>
<p>This is the list of functions that you will have to find alternatives to in order for your JS to function correctly, along with an approximate count of the number of times a function is used. I say approximate, because in my experience, the grasp script doesn't get everything, especially where chained functions are concerned. The good news with this set is that there aren't many complex functions in use - the vast majority can be replaced with a line or two.</p>
<p>The results of this query can bring back all sorts of jQuery functions, things like <em>.live, .die, .delegate, .browser, .size, .toggle</em>, and other deprecated functions from over the years. These are the warning signs that the rest of your code may not be ready for a move away from jQuery, and if you get these, you should seriously consider why you're doing this. I listed my reasons in the <a href="https://www.steveworkman.com/html5-2/2014/going-jquery-free/" title="Going jQuery-free">introduction post</a> and there are more besides, like minimal memory footprint whilst adding Windows Phone 8 and Firefox OS support. You may end up spending a lot more effort on your code than you originally intended, just to bring it up to par with the current state of web standards. Clearly, this isn't a bad thing, but your boss may be wondering why it's taking so much time. For a great article on technical debt, try <a href="http://blog.codinghorror.com/paying-down-your-technical-debt/">Paying Down your Technical Debt from Chris Atwood's Coding Horror</a> site.</p>
<h3 id="up-next%2C-replacing-individual-functions-with-standards-based-code" tabindex="-1">Up next, replacing individual functions with standards-based code</h3>
<p>That's it for this part, in the next one, I'll cover replacing the functions identified above with standards-compliant code to create your own <a href="https://github.com/remy/min.js/">min.js</a>.</p>
I'm Hiring a Graduate UI Developer at Yell2015-03-28T00:00:00Zhttps://www.steveworkman.com/i-m-hiring-a-graduate-ui-developer-at-yell<p><strong>Update - this position has now been filled. You can look at <a href="https://careers.yell.com/vacancies/?c%5Bfield_59%5D=209#results">all of the jobs available in Digital on the careers website</a></strong> -- I'm looking for a talented junior/graduate developer to come and join my team at Yell. We work exclusively on the <a href="http://yell.com/">Yell.com</a> search engine, dealing with over 20 million users a month. I've got some fantastic senior developers working for me, and we need a junior developer in the team.</p>
<p>Here is the <a href="https://careers.yell.com/vacancies/1470/graduate_ui_developer/">job description on the Yell Careers site</a></p>
<p>I'm looking for a person who is adaptable and are willing to learn new technology quickly. I'm after a developer who will do the right thing for the long-term, over fixing a problem quickly. I want developers who are familiar with new technology, and how it can be applied to get the absolute best performance out of the web browser, and importantly, I need someone who can appreciate the differences in browsers and know how to get the best out of them, no matter how big or small the screen size is.</p>
<p>In return, you will get freedom to implement features as you see fit, and access to the tools that you need to do your job. The role is based in <a href="https://www.google.co.uk/maps/preview#!q=One+Reading+Central%2C+Forbury+Road%2C+Reading&data=!1m4!1m3!1d1099!2d-0.9684029!3d51.4584235!4m15!2m14!1m13!1s0x48769b3d36d6186f%3A0xbdbb8fe096cab763!3m8!1m3!1d4363926!2d-2.3278149!3d52.8382005!3m2!1i1279!2i679!4f13.1!4m2!3d51.458067!4d-0.967984">central Reading</a>, just by the mainline train station (25 minutes from London Paddington). The office itself is large and spacious, with some of the best views over the city, and pretty decent coffee throughout the rest of the building. There's a whole host of other benefits (including competitive salaries, naturally) that you'll be told about if you join us.</p>
<p>If you want to apply, or know more information, <a href="https://www.steveworkman.com/contact/" title="Contact">contact me</a>, <a href="http://twitter.com/steveworkman">tweet me</a>, or just <a href="https://careers.yell.com/vacancies/1470/graduate_ui_developer/">apply</a>. Please note, you have to be eligible to work in the UK or hold a valid work visa to get either of these roles.</p>
<p>If UI development isn't your thing, <a href="http://yell.com/">Yell.com</a> engineering is hiring for the following roles:</p>
<ul>
<li><a href="https://careers.yell.com/vacancies/1541/automation_tester/">Automation Tester</a></li>
<li><a href="https://careers.yell.com/vacancies/1471/senior_java_developer/">Senior Java Developer</a></li>
<li><a href="https://careers.yell.com/vacancies/1462/senior_software_engineer_in_test/">Senior Software Engineer in Test</a></li>
<li><a href="https://careers.yell.com/vacancies/1483/software_engineer_in_test/">Software Engineer in Test</a></li>
<li><a href="https://careers.yell.com/vacancies/1481/senior_ux_designer/">Senior UX Designer</a></li>
<li><a href="https://careers.yell.com/vacancies/1482/ux_designer/">UX Designer</a></li>
</ul>
<p>I'll do my best to strike these positions out when they're filled, and apologies in advance if I'm not fast enough.</p>
<p>Good luck!</p>
A weekend with Android Wear2015-06-08T00:00:00Zhttps://www.steveworkman.com/2015/a-weekend-with-android-wear/<p>I've been really interested in wearables since I saw the first press shots of the Moto 360. When wearables first appeared (the Pebble, Galaxy Gear) they were the equivalent of a calculator watch - quite useful for adding things together, but awful at telling the time and even worse for your sex life. They were blocky, had incredibly poor battery life and not something you'd even consider wearing on a night out. The Moto 360 made me take notice - a well-designed and, importantly, watch-like appearance gives it the credibility that it deserves. So, when I got the chance to try one for a weekend, I couldn't pass it up.</p>
<p><img src="https://pbs.twimg.com/media/CGuMQryUgAA_bvA.jpg:large" alt="My regular watch and the Moto 360" loading="lazy" /> My regular watch and the Moto 360</p>
<h3 id="setup" tabindex="-1">Setup</h3>
<p>The Moto 360 was a lot different to my regular watch. All dressed in black with a thin leather strap, it's a far cry from my tiny, battered metal Swatch timepiece. At first I was pleasantly surprised by its feel - very comfortable to wear and lightweight, I hardly noticed it was there. It's certainly a lot larger than my normal watch but I quickly got used to the differences, and got on with my day.</p>
<p>Initial setup was ok, it took two goes to connect over Bluetooth, but it was mostly painless. Then the notifications started raining in - Google Now bombarding me with reminders, weather updates, emails, Twitter, Facebook Messenger and more. At first it was overwhelming, and I wasn't used to the swipe-to-dismiss, or scroll on to ignore motions. With a bit too much going on the watch also regularly janked and slowed down, not reacting to my input, which was far more frustrating.</p>
<h3 id="the-first-day" tabindex="-1">The first day</h3>
<blockquote>
<p>As a watch, it's really pretty poor</p>
</blockquote>
<p>I spent most of the Friday in the office working at my computer. I'd be getting notifications on my phone and on the watch and on my laptop - it was all a bit much. I'd also put my normal watch back in my bag, so telling the time got quite hard. As a watch, it's really pretty poor. Telling the time it the one thing that watches are supposed to be good at and every time I turned to look at my wrist I'd see a black screen, then about a second later, finally, I'd see the time. Frankly, that's unacceptable and is one of the real issues that I struggled with during the first day.</p>
<p>I also played quite a lot of music on that day, and controlling that with the watch sounded like a good idea. In practice, I pressed the pause button on my headphones - much faster and far more convenient. It's another example of a problem that the watch solves that has already been solved in better ways.</p>
<p>In the evening I had a play and found a whole host of useful settings that made the rest of the weekend far more pleasant:</p>
<ul>
<li><strong>Smart unlock</strong> - phone is unlocked when near the watch, no more typing in your passcode</li>
<li><strong>Ambient clock</strong> - the watch is always a watch telling you the time</li>
<li><strong>Only show notifications on the watch</strong> - no double/triple notifications</li>
<li><strong>Silent mode</strong> - no noise, just a light vibration on your wrist when something happens</li>
</ul>
<h3 id="saturday" tabindex="-1">Saturday</h3>
<blockquote>
<p>During the party the watch went pretty-much unnoticed... It was just a normal watch that people paid no attention to.</p>
</blockquote>
<p>This was a big day in the Workman household, we were throwing a party and I was on BBQ duty. We were running around getting things ready, so without time to check our phones regularly, it was nice to have messages popping up on my wrist. Trying to send a message back to someone with my voice was a case of hit-and-miss, so after a few tries I gave up and returned to my phone. It was just a bit too noisy for my watch and it couldn't understand me properly - at this point the "Open on phone" action came in handy and the watch fell back to being a secondary screen.</p>
<p>I played with a few apps today, and some worked, most didn't:</p>
<ul>
<li>First-party apps such as <strong>Google Keep, Play Music</strong> and <strong>Maps</strong> were great</li>
<li>The heart rate monitor only gave a reading a few times, never really changed.</li>
<li><strong>Google Fit</strong> was interesting, but my <strong>Fitbit</strong> was more accurate (I believe)</li>
<li><strong>PlayerFM</strong> (podcast app) was the only third-party app that worked really well</li>
<li><strong>Wunderlist</strong> only showed me the inbox, did nothing else, crashed a lot</li>
<li><strong>TripAdvisor</strong> showed me items in my area (after a lot of waiting). That's not what I use TripAdvisor for, I go looking for things in other places, so that one was useless as well</li>
<li><strong>Amazon's</strong> wear app only works in the USA</li>
</ul>
<p>During the party the watch went pretty-much unnoticed. It was nice to see who was at the door by who was calling me (and the dog announcing their arrival), but it was only in the small hours of the morning that someone said "is that one of those smart-watches". To me, the watch passed a very big test that day - acceptance. It was just a normal watch that people paid no attention to. A piece of technology that is so obvious on your body but that doesn't garner a reaction is what I wanted. It's not a big thing, it's just a watch.</p>
<p>The watch's battery lasted the whole party, which is more than can be said for my phone (Moto X 2nd gen). It passes that test for me.</p>
<h3 id="sunday" tabindex="-1">Sunday</h3>
<blockquote>
<p>That ability for it to blend into the background is something that I didn't really appreciate before, but really welcome.</p>
</blockquote>
<p>The morning after, a little worse for wear, the watch was starting to feel more natural. I didn't get many notifications, and I felt a lot more relaxed with it. I started weighing up whether I would buy one or not.</p>
<p>We went for a bike ride along the river in the afternoon and the watch stayed out of the way. I could have used it to track my heart-rate, or my journey, but I wasn't interested in that at all, I just wanted to go for a bike ride, and the watch stayed out of the way - it became just another watch again. That ability for it to blend into the background is something that I didn't really appreciate before, but really welcome.</p>
<p>I came into this experiment wanting this very watch, and I come out the other side thinking that I still want one, but not that one, and probably not the next one either. The problem isn't so much the watch - it could be prettier, smaller, more like a watch, but it's the software. It's still unintuitive and the apps on there aren't really apps. It's a glorified notification reader, with a few really nice features. It's really bad at telling the time, but that's not its primary function. I almost feel that I need a watch and then need an Android watch. Third party apps really jank the watch and are so hard to find that it took me a few hours to really start exploring the watch's capabilities. Android Wear needs more testing - the watches need more CPU/memory power, and developers need to test it out in the real world more. It has to come up with a better solution for "being a watch" which was just unacceptable.</p>
<h3 id="handing-it-back" tabindex="-1">Handing it back</h3>
<p>I handed the watch back this morning and now have my watch back on my wrist. It's heavier than I remember, but I can look down and know what the time is instantly. It serves its purpose.</p>
<p>I don't miss the Moto 360. I still want one. I don't want that one. I wish I wanted one more, but I don't. <strong>It has so much promise</strong>, but right now, I'm happy to give it back.</p>
On Speaking2015-06-08T00:00:00Zhttps://www.steveworkman.com/2015/on-speaking/<p>I've been off the speaking circuit for a while now. After a successful 2012 and 2013, I let my public speaking take a backseat to focus on my new role at Yell. I'm really happy to have got to a point in this role where I can begin to talk at the work that I'm doing here, and there's a lot that I'm really proud of.</p>
<p>Recently I got back up on the stage at Oxford Geek Night to do Yell's first technology talk in a very long time. It was a five minute slot, nothing grand, but it was to a room full of people I didn't know, though many who I recognised from their Twitter profiles but was too nervous to say "hello, I really like what you do". I was far more nervous before the talk than I'd been in a very long time, the kind of dancing nerves that make you triple-check the order of the slides, even though I'd been through them twenty times. Then, just as I stepped onto the stage there was this serene moment where all the nerves dropped away, I plugged my laptop in, took up the remote and started talking.</p>
<p>And everyone was awesome</p>
<p>I couldn't have wished for a better crowd - twangs of nostalgia for the brand, laughter in all of the right places, and people listening to the message, which was fantastic. I have no idea if it was even useful for people, but I am so pleased that I did it - and the buzz that goes with it is like nothing else.</p>
<p>So, I'm going to do it again. I've expanded the talk so that I can actually go into some detail, and I can't wait to give it again. I've got another date in my diary already which I'll share soon. Until then, the short version of the slides are embedded below.</p>
<script async="" class="speakerdeck-embed" data-id="ec86633cd1834117870a0966195ed9c7" data-ratio="1.33333333333333" src="https://speakerdeck.com/assets/embed.js"></script>
Data-Driven Performance Breakout at Edge Conference2015-06-29T00:00:00Zhttps://www.steveworkman.com/2015/data-driven-performance-breakout-at-edge-conference/<p>I was lucky enough to attend <a href="https://edgeconf.com/2015-london">Edge Conf</a> in London this year, a day that I always truly enjoy. The main sessions of the conference were streamed live and videos will be available later, but the break-outs weren't recorded. These were the sessions I enjoyed the most and it's a shame that people won't see them without being there - so here's my notes on what was said to the best of my ability (and with a big hat tip to <a href="https://twitter.com/georgeocrawford">George Crawford</a> for his <a href="https://docs.google.com/document/d/1xi8mC0YZr7T_UOOA7HAEAWXvSkD4FRRjum0H6EQ6mZU/edit#">notes</a>). <a href="https://twitter.com/patrickkettner">Patrick Kettner</a> was the moderator.</p>
<h3 id="q%3A-how-can-we-use-the-masses-of-data-that-rum-collects-to-get-businesses-to-care-about-performance%3F" tabindex="-1">Q: How can we use the masses of data that RUM collects to get businesses to care about performance?</h3>
<p>Business leaders like metrics from companies that they can relate to (i.e. Amazon, eBay) but these aren't very useful metrics as the scale is completely different. Finding stats from competing or relevant companies is hard, so how do you make them care?</p>
<p>Introducing artificial slowness is one way to convince people, but not good for business. There's also the risk that you may not see increase in conversion from speed improvements! Filmstrips are incredibly useful at this point to see what's going on and these are available in Chrome Dev tools in the <a href="https://www.reddit.com/r/webdev/comments/2wz7s4/the_secret_extra_tools_within_chromes_dev_tools/">super secret area</a>.</p>
<p>Showing videos to business people makes it really hit home - people hate it when they can visibly see their site suck. It’s like making people watch a user test for their site. Shout out to <a href="https://twitter.com/larahogan">Lara Hogan</a> at Etsy (<a href="https://codeascraft.com/">their engineering blog is awesome</a>) for their great work on this, something that Yell has copied.</p>
<p>Metrics that are useful: first render, SpeedIndex, aren’t available in the browser. Using SpeedCurve can really make business people sit up and take notice of performance because it’s a pretty interface to those things.</p>
<p>All-in-all, the standard metrics are unlikely to be the best for you, so add in user timing markings (and a <a href="https://gist.github.com/pmeenan/5902672">very simple polyfill</a>) and graph those, including sending them to WebPageTest so you can measure the things that are important to you over time. This was done very successfully by The Guardian (hat tip <a href="https://twitter.com/patrickhamann">Patrick Hamann</a>).</p>
<h3 id="q-from-ilya-grigorik%3A-the-browser-loading-bar-is-a-lie%2C-yet-users-wait-for-it.-what-metric-should-it-use%3F" tabindex="-1">Q from Ilya Grigorik: The browser loading bar is a lie, yet users wait for it. What metric should it use?</h3>
<p>Basically, developers can put their loading after the onLoad event to hack around the loading spinner. If we stop the spinner at first render, it's not usable. If we stop it at when the page can be interacted with when would that be? The browser runs the risk of "feeling slower" or "feeling faster" by just changing the progress bar. Apparently there's one browser that just shows the bar for three seconds, nothing more.</p>
<p>No real consensus was reached here, but it was a very interesting discussion</p>
<h3 id="q%3A-flaky-or-dropped-connections-are-important-to-know-about-for-performance-metrics---what-can-the-room-say-about-their-experiences-gathering-offline-metrics%3F" tabindex="-1">Q: Flaky or dropped connections are important to know about for performance metrics - what can the room say about their experiences gathering offline metrics?</h3>
<p>When the FT tried this with their web app they often exceeded localStorage sizes and sometimes POST sizes (25MB) as users could be offline for a week or more. The Guardian had good success with bundling beacons up into one big post to save money with Adobe Omniture/SiteCatalyst.</p>
<p>The best solution is the <a href="http://caniuse.com/#feat=beacon">Beacon API</a> (sendBeacon) which promises to deliver the payload at some point (which images/XHR don't right now). It's implemented in Google Analytics, <a href="https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#transport">you just have to enable it</a> in the config, other tracking providers don't have it right now.</p>
<h3 id="q%3A-what-metrics-apis-are-missing-in-browsers%3F" tabindex="-1">Q: What metrics APIs are missing in browsers?</h3>
<p><em>A unique opportunity to ask Ilya to add APIs into Chrome - not to be passed up</em></p>
<ul>
<li><a href="https://github.com/w3c/frame-timing">Frame Timing API</a> - requested as an ES7 observable (which is unlikely).</li>
<li><a href="http://w3c.github.io/performance-timeline/#the-performance-observer-interface">Performance Observer</a> - a subscribable stream of events that will need processing to be useful. This will give accurate frame-rate</li>
<li>Network error logging API - could work like an error reporter that posts to a configurable second origin (via a header like <a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP">CSP</a>)</li>
<li>JavaScript runtime errors without hacking window.onError</li>
<li>SpeedIndex, or a proxy for it. There's a <a href="https://github.com/WPO-Foundation/RUM-SpeedIndex">script for this already</a> but it's not massively accurate. Standardising SpeedIndex would be great.</li>
<li>First Paint - according to Ilya it's not possible and quite subjective browser-to-browser</li>
</ul>
<h3 id="wrap-up" tabindex="-1">Wrap-up</h3>
<p>I'd have loved to stay and chat more (nice to meet Tim Kadlec in person, shout out to the <a href="http://pathtoperf.com/">Path to Performance podcast</a> as well), it's rare to have a lot of the web performance community in the same room at the same time and should definitely happen more often.</p>
<p>If there's things I've missed, let me know in the comments or <a href="https://twitter.com/steveworkman">on twitter (@steveworkman)</a></p>
State of the Browser 52015-09-14T00:00:00Zhttps://www.steveworkman.com/2015/state-of-the-browser-5/<p><img src="https://lh3.googleusercontent.com/K7iaF4X7JgeAQ_pGSf7eH1M08hApRh0ALs4pcmulQFppkkCOELo=w1464-h972-no" alt="Dave Letorey at State of the Browser" loading="lazy" /> Dave Letorey at State of the Browser</p>
<h3 id="a-short-write-up-on-the-weekend" tabindex="-1">A short write up on the weekend</h3>
<p>Another year, another State of The Browser - now in its fifth year, it's a conference for the London Web development community. It's aimed at the masses, we want it to be accessible to all and have really great speakers, and this year was no exception to those rules.</p>
<p>In its inception, SOTB was a chance for the browser manufacturers to get together and talk about the latest and greatest things in their browsers to a wide audience. A lot of this mandate is being done (very, very well) by Edge conference, organised by our friends at London Web Performance. So, this year, we went back to our roots, the community that LWS is built upon, for talks about the browser, new browsers, new technology, and new ways of working. I'm really pleased with how it worked out, and we had a really high quality of submissions (my fellow organiser <a href="http://morenafiore.com/state-of-the-browser-5-what-ive-taken-away/">Morena Fiore-Kirby covers this really well in her write-up</a>) it's a shame we couldn't fit more in.</p>
<p>This also meant that we could feature more new speakers and I'm really happy that we did. LWS has a long history of being the place where great speakers have done their first gigs (Pete Gasston, Laura Kalbag, and apparently Jake Archibald did a talk in the very early days - to just name a few) and I hope this tradition will continue. We were very pleased to welcome Martin Jakl (<a href="https://twitter.com/JaklMartin">@JaklMartin</a>) and Laura Elizabeth (<a href="https://twitter.com/laurium">@laurium</a>) to the stage, mentored by Pete and Solé, they both did a great job with their talks. They've both got bright futures so watch out for them.</p>
<h3 id="my-highlight" tabindex="-1">My highlight</h3>
<p>I'm very happy to say that my surprise of the weekend was Chris Heilmann. Other than his incredible generosity in giving away 10 years worth of tech swag (see below) he gave the best talk that I've ever had the pleasure to hear him give. He seemed truly passionate about his new product, Edge, and the people that he works with to make the web better, fixing not just the web that you and I see, but also internal websites, massive SAP systems and changing web standards culture in huge corporations. If I hadn't already been standing, I'd have stood up to applaud him and what the Edge development team have done. Thank you.</p>
<p><a href="https://www.steveworkman.com/static/img/DSC_0010.jpg"><img src="https://www.steveworkman.com/static/img/DSC_0010.jpg" alt="Chris' Tech Swag (half of it)" loading="lazy" /></a> Chris' Tech Swag (half of it)</p>
<p><a href="https://www.steveworkman.com/static/img/DSC_0116.jpg"><img src="https://www.steveworkman.com/static/img/DSC_0116.jpg" alt="Chris Heilmann at State of the Browser 5" loading="lazy" /></a> Chris Heilmann at State of the Browser 5</p>
<h3 id="finally" tabindex="-1">Finally</h3>
<p>Thanks to everyone who came along and were such a friendly bunch of people. We got lots of great feedback, and I can't wait to do it again next year!</p>
<p>Check out the <a href="https://goo.gl/photos/Qf1VXQuD7pPMPD2f6">photo gallery for the event on Google Photos</a> For more on the event, check out these articles:</p>
<ul>
<li><a href="http://christianheilmann.com/2015/09/13/mind-the-gap-state-of-the-browser-5-was-a-blast/">Chris Heilmann - State of the Browser 5 was a blast</a></li>
<li><a href="http://morenafiore.com/state-of-the-browser-5-what-ive-taken-away/">Morena Fiore-Kirby - State of the Browser 5, what I've taken away</a></li>
<li><a href="http://www.brucelawson.co.uk/2015/state-of-the-browser-5/">Bruce Lawson - State of the Browser 5</a></li>
<li><a href="https://medium.com/@skycardboard/quick-summaries-the-talks-at-state-of-the-browser-5-6f4d6be81131">Jason Sackey - Quick Summaries on State of the Browser 5</a></li>
</ul>
<p>p.s. The whole event was live-streamed, and we have videos of the whole event too - the first half is already up on the <a href="https://vimeo.com/webstandards/videos/">@webstandards Vimeo page</a> with the rest to follow shortly. A massive thank you to our live events team <a href="https://twitter.com/phdw">Pete Wood</a> and company who always do an amazing job. Thank you!</p>
AMP - Long-term Harmful2015-10-07T00:00:00Zhttps://www.steveworkman.com/2015/amp-long-term-harmful/<p>You may have heard about a project that <a href="https://googleblog.blogspot.co.uk/2015/10/introducing-accelerated-mobile-pages.html">Google has just announced called AMP</a> (Accelerated Mobile Pages), which aims to speed up the mobile web.</p>
<blockquote>
<p>Publishers around the world use the mobile web to reach these readers, but the experience can often leave a lot to be desired. Every time a webpage takes too long to load, they lose a reader—and the opportunity to earn revenue through advertising or subscriptions. That's because advertisers on these websites have a hard time getting consumers to pay attention to their ads when the pages load so slowly that people abandon them entirely.</p>
</blockquote>
<p>I completely understand the need for this project - the web is slow and advertising is such a key revenue source for publishers that these adverts are ruining the experience. <a href="https://instantarticles.fb.com/">Facebook's Instant</a> project is designed to do much the same thing. AMP is not a new idea.</p>
<p>Technically, AMP builds on open standards and allows you to simply replace some parts of your build and some components of your system with AMP versions of those pages. What happens with these pages is the secret sauce - Google knows of these pages, and if they pass the AMP tests it caches versions of those sites <strong>on its own servers</strong>.</p>
<p>This isn't too scary - Google has committed to allow the <a href="https://github.com/ampproject/amphtml/blob/master/builtins/amp-ad.md">major advertising networks</a> and <a href="https://github.com/ampproject/amphtml/blob/master/builtins/amp-pixel.md">pixel tracking</a> so that businesses can maintain their precious statistics. AMP, in general, is a good idea.</p>
<p>Except for one thing.</p>
<p><strong>If you're not on it, you're screwed.</strong></p>
<p>Have a look at these two search pages. Both are searches for "Obama" on a Nexus 5 (emulated). The one on the right is the current search page, the one on the left is with AMP articles.</p>
<p><a href="https://www.steveworkman.com/static/img/AMP.jpg"><img src="https://www.steveworkman.com/static/img/AMP.jpg" alt="AMP search page comparison" loading="lazy" /></a></p>
<p>Notice where the first organic listing is in each page. Currently, it's just below the first page, but with AMP, it's over two screens of content away! That's absolutely massive, and for anyone not in the top 3 results, they may as well not be there.</p>
<p><strong>Basically, if you're not an AMP publisher, expect your traffic to drop, by double-digit percentages.</strong></p>
<h3 id="short-term-benefits%2C-long-term-harm" tabindex="-1">Short-term benefits, Long-term harm</h3>
<p>Short-term, AMP will make publishers sit up and take notice of web performance, it'll make websites faster across the board, and make more customers use Google. <strong>For users, this is a win/win situation.</strong></p>
<p>I've come to the conclusion that <strong>this project is harmful to the web in the long term</strong>. If a publisher isn't getting traffic because it's all going to AMP publishers, then the amount of content on Google drops, quality drops and is put into these large content producers. You end up with less diversity in the web, because small producers can't make money without using AMP. Even in the end when you've only got a few publishers who can survive, they will be encouraged to reduce adverts, or be limited to the subset that Google's DoubleClick deem performant enough to be included in the AMP-friendly set of advertisers. This may block the big-money adverts, which keep these sites going.</p>
<p>It also creates dependencies on Google, and whilst it's unlikely to go down any time soon, being cached on their servers and allowing for only the most basic tracking mechanism, and only for browsers that Google supports. It creates a two-tier system that the web is firmly against.</p>
<p>This project seems to polyfill a developer/organisation's lack of time to dedicate to performance. Many very clever people are working on this education problem (hello to <a href="https://pathtoperf.com/">Path to Perf</a>, <a href="http://designingforperformance.com/">Designing for Performance</a> and <a href="https://developers.google.com/speed/pagespeed/">PageSpeed</a>) though it will take time. Short-term fixes like AMP and Facebook Instant are encouraging developers to take shortcuts to performance, handing their problems off to Google. This does nothing for the underlying issues, but with Google giving AMP such prominence in its search results, how can publishers resist?</p>
<h3 id="or-is-it-a-temporary-solution" tabindex="-1">Or is it a temporary solution</h3>
<p>I hope that from all of this, developers sit up and take notice of web performance; improve their sites and provide a better experience for all. If we don't, Google will keep solutions like this around, leaving the only content that gets interaction as the content that Google approves of - and no one wants that.</p>
Reflections on "HTTPS is Hard"2016-03-30T00:00:00Zhttps://www.steveworkman.com/reflections-on-https-is-hard<p>Over the last few months I've been putting together my talk for the year, based on a blog post that is titled "HTTPS is Hard". <a href="https://blog.yell.com/2016/03/https-is-hard/">You can read the full article on the Yell blog</a> on which it is published. There's also an <a href="https://medium.com/@steveworkman/https-is-hard-377f2baf2580">abridged version on Medium</a>. It's been a very long time coming, and has changed over the time I've been writing it, so I thought I'd get down a few reflections on the article.</p>
<h4 id="it's-really-long%2C-and-took-a-long-time-to-write" tabindex="-1">It's really long, and took a long time to write</h4>
<p>This is firstly, the longest article I've written (at over four thousand words, it's a quarter of the length of my dissertation) and it's taken the longest time to be published. I had a 95% complete draft ready back in September, when I was supposed to be working on <a href="https://speakerdeck.com/steveworkman/adapting-for-the-times">my Velocity talk for October</a> but found myself much more interested in this article. Dan Applequist has repeatedly asked me to "put it in a blog post, the TAG would be very interested" - so finally, it's here.</p>
<p>The truth is that I'm constantly tweaking the post. Even the day before it goes live, I'm still making modifications as final comments and notes come in from friends that I've been working with on this. Also, it seems like every week the technology moves on and the landscape shifts: Adobe offers certs for free, Dreamhost gives away LetsEncrypt HTTPS certs through a one-click button, Netscaler supports HTTP/2, the Washington Post write an article, Google updates advice and documentation, and on and on and on... All through this evolution, new problems emerge and the situation morphs and I come up with new ways to fix things, and as I do, they get put into the blog post. Hence, it's almost a 20 minute read.</p>
<p>A special thank you to <a href="https://twitter.com/andydavies">Andy Davies</a>, <a href="https://twitter.com/stopsatgreen">Pete Gasston</a>, <a href="https://twitter.com/patrickhamann">Patrick Hamann</a> and the good people at Yell; <a href="https://twitter.com/jurga">Jurga</a>, <a href="https://twitter.com/Claireslobodian">Claire</a> and the UI team (Andrzej, Lee and <a href="https://twitter.com/SupaRawr93">Stevie</a>) for their feedback throughout this whole process. I'm sure they skipped to the new bits each time.</p>
<h4 id="is-https-really-neccessary%2C-for-everyone%3F" tabindex="-1">Is HTTPS really neccessary, for everyone?</h4>
<p>Yes.</p>
<p>Every day something silly happens. Today's was from generally-awesome tech-friendly company Mailchimp. They originally claimed that "Hosted forms are secure on our end, so we don't need to offer HTTPS. We get that some of our users would like this, though" (tweet has since been deleted). Thankfully, they owned up and showed CalEvans how to do secure forms.</p>
<blockquote class="twitter-tweet" data-lang="en"><p dir="ltr" lang="en"><a href="https://twitter.com/CalEvans">@CalEvans</a> We apologize for the inaccurate info from earlier, Cal. It is actually possible to use HTTPS with our hosted forms by grabbing the</p>— MailChimp (@MailChimp) <a href="https://twitter.com/MailChimp/status/714905486118793216">March 29, 2016</a></blockquote>
<script src="https://platform.twitter.com/widgets.js" async="" charset="utf-8"></script>
<p>Still, it's this kind of naivety that puts everyone's security at risk. A big thumbs up to Mailchimp for rectifying the situation.</p>
<h4 id="if-i-were-to-have-started-today%2C-would-https-still-be-hard%3F" tabindex="-1">If I were to have started today, would HTTPS still be hard?</h4>
<p>Yes, though nowhere near as hard. We'd still have gone through the whole process, but it wouldn't have taken as long (the Adobe and Netscaler bits were quite time-consuming) and the aftermath wouldn't have gone on for anywhere near as long if I'd have realised in advance about the referrer problem.</p>
<h4 id="if-you'd-have-known-about-the-referrer-issue%2C-would-you-have-made-the-switch-to-https%3F" tabindex="-1">If you'd have known about the referrer issue, would you have made the switch to HTTPS?</h4>
<p>Honestly, I'm not sure I would have pushed so hard for it. We don't have any solid evidence to say it's affecting any business metrics, but I personally wouldn't like the impression that traffic just dropped off a cliff, and it wouldn't make me sign up as an advertiser. Is this why Yelp, TripAdvisor and others haven't migrated over? Who can say...</p>
<p>This is why the education piece of HTTPS is so important, because developers can easily miss little details like referrers, and just see the goals of ranking and HTTP/2 and just go for it.</p>
<p>The point of the whole article is that there just isn't the huge incentive to move to HTTPS. Having a padlock doesn't make a difference to users unless they sign in or buy something. There needs to be something far more aggressive to convince your average developer to move their web site to HTTPS. I am fully in support of Chrome and Firefox's efforts to mark HTTP as insecure to the user. The only comments I get around the office about HTTPS happen when a Chrome extension causes a red line to go through the protocol in the address bar - setting a negative connotation around HTTP seems to be the only thing that gets people interested.</p>
<h4 id="what's-changed-since-you-wrote-the-article%3F" tabindex="-1">What's changed since you wrote the article?</h4>
<p>I am really pleased to see the <a href="https://www.google.com/transparencyreport/https">Google Transparency Report include a section on HTTPS</a> (<a href="https://security.googleblog.com/2016/03/securing-web-together_15.html">blog post</a>). An organisation with the might and engineering power of Google are still working towards HTTPS, overcoming technical boundaries that make HTTPS really quite hard. It's nice to know that it's not just you fighting against the technology.</p>
<h4 id="what-about-%22privileged-apps%22---you-don't-talk-about-that" tabindex="-1">What about "privileged apps" - you don't talk about that</h4>
<p>The <a href="https://www.w3.org/TR/powerful-features/">"Privileged Contexts" spec</a> AKA "Powerful Features" and how to manage them is a working draft and there's a lot of debate still to be had before they go near a browser. I like how the proposals work and how they've been implemented for Service Worker. I also appreciate why they're necessary, especially for Service Worker (the whole thread of "why" can be read <a href="https://github.com/slightlyoff/ServiceWorker/issues/199">on github</a>). I hope that Service Worker has an effect on HTTPS uptake, though this will only truly happen should Safari adopt the technology.</p>
<p>It looks like Chrome is going to turn off Geolocation from insecure origins very soon, as that part of the <a href="https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins">powerful features task list</a> has been marked as <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=561641">"fixed" as of March 3rd</a>. Give it a few months and geolocation will be the proving ground for the whole concept of powerful features - something that I'll be watching very closely.</p>
HSTS - a no-nonsense guide2016-07-06T00:00:00Zhttps://www.steveworkman.com/2016/hsts-a-no-nonsense-guide/<p>I've been playing with HTTP Strict Transport Security (HSTS, I'm late to the party as usual) and there's some misconceptions that I had going in that I didn't know about that threw me a bit. So, here's a no nonsense guide to HSTS.</p>
<h3 id="the-hsts-header-is-pretty-simple-to-implement" tabindex="-1">The HSTS Header is pretty simple to implement</h3>
<p>I actually thought that this would be the hard bit, but actually putting the header in is very simple. As it's domain specific you just need to set it at the web server or load balancer level. In Apache, it's pretty simple:</p>
<pre><code>Header always set Strict-Transport-Security "max-age=10886400;"
</code></pre>
<h3 id="you-can-also-upgrade-all-subdomains-using-this-header" tabindex="-1">You can also upgrade all subdomains using this header</h3>
<p>A small addition to the header auto-upgrades all subdomains to HTTPS, making it really simple to upgrade long-outdated content deep within databases or on static content domains without doing large-scale migrations.</p>
<pre><code>Header always set Strict-Transport-Security "max-age=
</code></pre>
<h3 id="having-a-short-max-age-is-good-when-you're-starting-out-with-subdomains" tabindex="-1">Having a short max-age is good when you're starting out with subdomains</h3>
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p dir="ltr" lang="en"><a href="https://twitter.com/steveworkman">@steveworkman</a> unless your env is so simple you can be *absolutely* sure there aren't HTTP only subdomains you forgot about.</p>— Eric Lawrence (@ericlaw) <a href="https://twitter.com/ericlaw/status/750686182435008512">July 6, 2016</a></blockquote>
<h3 id="having-a-short-max-age-is-bad-in-the-long-run" tabindex="-1">Having a short max-age is bad in the long-run</h3>
<p>If you have a max-age length shorter than 18 weeks then you are ineligible for the preload list.</p>
<p>Wait, what?</p>
<h3 id="there's-a-preload-list---browsers-know-about-hsts-supported-sites" tabindex="-1">There's a preload list - browsers know about HSTS-supported sites</h3>
<p>It turns out that all of the browsers include a "preload" list of websites that support HSTS, and will therefore always point the user to the HTTPS version of the website no matter what link they have come from to get there.</p>
<p>So, how does it work?</p>
<p>Well, you go to <a href="https://hstspreload.appspot.com/">https://hstspreload.appspot.com</a> and submit your website to the list. Chrome, Firefox, Opera, IE 11 (assuming you got a <a href="https://blogs.windows.com/msedgedev/2015/06/09/http-strict-transport-security-comes-to-internet-explorer-11-on-windows-8-1-and-windows-7/">patch after June 2015</a>), Edge and Safari pick it up and will add you to a list to always use HTTPS, which will take away a redirect for you. There are four other requirements to meet - have a valid cert (check), include subdomains, have a max-age of 18 weeks, add a preload directive and some redirection rules.</p>
<pre><code>Header always set
</code></pre>
<p>Here are the standard redirection scenarios for a non-HSTS site that uses a www subdomain (like most sites):</p>
<ol>
<li>User enters <a href="https://www.example.com/">https://www.example.com</a> - no HSTS. There are <strong>0 redirects</strong> in this scenario as the user has gone straight to the secure www domain.</li>
<li>User enters <a href="https://example.com/">https://example.com</a> - no HSTS. There is <strong>1 redirect</strong> as the web server adds the www subdomain</li>
<li>User enters <a href="http://example.com/">example.com</a> - no HSTS. There is <strong>1 redirect</strong> here as the web server redirects you to <a href="https://www.example.com/">https://www.example.com</a> in 1 hop, adding both HTTPS and the www subdomain</li>
</ol>
<p><img src="https://www.steveworkman.com/static/img/Screen-Shot-2016-07-06-at-09.17.47.png" alt="How to Redirect HTTP to HTTPS as described by Ilya Grigorik at Google I/O in 2014" loading="lazy" /> How to Redirect HTTP to HTTPS as described by Ilya Grigorik at Google I/O in 2014</p>
<p>This is the best-practice for standard HTTPS migrations as set out in <a href="https://docs.google.com/presentation/d/15H8Sj-Zol1tcum0CSylhmXns5r7cvNFtzYrcwAzkTjM/present?slide=id.g1856a5451_0228">HTTPS Everywhere</a> as Ilya Grigorik shows us that scenario 3 should only have 1 redirect, otherwise you get a performance penalty.</p>
<h3 id="hsts-goes-against-this-redirection-policy...-for-good-reason" tabindex="-1">HSTS goes against this redirection policy... for good reason</h3>
<p>To be included on the preload list you must first redirect to HTTPS, then to the www subdomain:</p>
<p><img src="https://www.steveworkman.com/static/img/Screen-Shot-2016-07-06-at-09.25.36.png" alt=" (HTTP) should immediately redirect to (HTTPS) before adding the www subdomain. Right now, the first redirect is to ." loading="lazy" /></p>
<p>This felt incredibly alien to me, so I started asking some questions on Twitter, and Ilya pointed me in <a href="https://twitter.com/lgarron">Lucas Garron</a>'s direction</p>
<blockquote class="twitter-tweet" data-conversation="none" data-cards="hidden" data-partner="tweetdeck"><p dir="ltr" lang="und"><a href="https://twitter.com/ericlaw">@ericlaw</a> <a href="https://twitter.com/steveworkman">@steveworkman</a> See <a href="https://t.co/jPMoYW9mpi">https://t.co/jPMoYW9mpi</a></p>— Lucas Garron (@lgarron) <a href="https://twitter.com/lgarron/status/750024459902300160">July 4, 2016</a></blockquote>Following that link I get a full explanation:
<blockquote>
<p>This order makes sure that the client receives a dynamic HSTS header from <code>example.com</code>, not just <code>www.example.com</code></p>
<p>http -> https -> <a href="https://www/">https://www</a> is is good enough to protect sites for the common use case (visiting links to the parent domain or typing them into the URL bar), and it is easy to understand and implement consistently. It's also simple for us and other folks to verify when scanning a site for HSTS.</p>
<p>This does impact the first page load, but will not affect subsequent visits. And once a site is actually preloaded, there will still be exactly one redirect for users.</p>
<p>If I understand correctly, using HTTP/2 you can also reuse the <code>https://example.com</code> connection for <code>https://www.example.com</code> (if both domains are on the same cert, which is usually the case).</p>
<p>Given the growth of the preload list, I think it's reasonable to expect sites to use strong HSTS practices if they want to take up space in the Chrome binary. This requirement is the safe choice for most sites.</p>
</blockquote>
<p>Let me try to visualise that in the scenarios:</p>
<ol>
<li>First visit, user types <a href="http://example.com/">example.com</a> into their browser. They get a 301 redirect to <a href="https://example.com/">https://example.com</a> and receive the HSTS header. They are then 301 redirected to <a href="https://www.example.com/">https://www.example.com</a>. <strong>2 redirects</strong></li>
<li>Second visit, the browser knows you're on HSTS and automatically upgrades you to HTTPS before the first redirect, so typing <a href="http://yell.com/">yell.com</a> into the browser performs <strong>1 redirect</strong> from <a href="https://example.com/">https://example.com</a> to <a href="https://www.example.com/">https://www.example.com</a></li>
<li>If you're in the preload list, the second visit scenario happens on the first visit. <strong>1 redirect</strong></li>
</ol>
<blockquote class="twitter-tweet" data-conversation="none" data-cards="hidden" data-partner="tweetdeck"><p dir="ltr" lang="en"><a href="https://twitter.com/davidben__">@davidben__</a> <a href="https://twitter.com/igrigorik">@igrigorik</a> <a href="https://twitter.com/steveworkman">@steveworkman</a> <a href="https://twitter.com/lgarron">@lgarron</a> You need to go to the bare domain on HTTPS 1st so it can set HSTS with includeSubdomains.</p>— Eric Lawrence (@ericlaw) <a href="https://twitter.com/ericlaw/status/749984605743173632">July 4, 2016</a></blockquote>So, that makes sense to me. In order to set the HSTS upgrade header for all subdomains, it needs to hit the naked domain, not the www subdomain. This appears to be a new requirement to be added to the preload list, as the Github issue was raised on May 19th this year, and Lucas has said that this new rule will not be applied to websites that are already on the list (like Google, Twitter etc).
<p>For me, this takes away much of the usefulness of HSTS, which is meant to save redirects to HTTPS by auto-upgrading connections. If I have to add another redirect in to get the header set on all subdomains, I'm not sure if it's really worth it.</p>
<p>So, I asked another question:</p>
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p dir="ltr" lang="en"><a href="https://twitter.com/lgarron">@lgarron</a> but we have 20 years worth of back links around the internet. Are there other benefits of the HSTS header + preload list?</p>— Steve Workman (@steveworkman) <a href="https://twitter.com/steveworkman/status/750039426798149633">July 4, 2016</a></blockquote>And this is the response I got from Lucas
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p dir="ltr" lang="en"><a href="https://twitter.com/steveworkman">@steveworkman</a> The banner use case is for people typing domains into the URL bar.</p>— Lucas Garron (@lgarron) <a href="https://twitter.com/lgarron/status/750043441610887168">July 4, 2016</a></blockquote>So it helps when people type in the URL, sending them to HTTPS first. This takes out the potential for any insecure traffic being sent. Thinking of the rest of the links on the internet, the vast majority of yell.com links will include the www subdomain, so HSTS and the preload list will take out that redirect, leaving zero redirects. That's a really good win, that Lucas confirmed.
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p dir="ltr" lang="en"><a href="https://twitter.com/lgarron">@lgarron</a> yes, and our sitemaps are correct with that link. What will happen to http versions of those (most common use case)?</p>— Steve Workman (@steveworkman) <a href="https://twitter.com/steveworkman/status/750054376757157888">July 4, 2016</a></blockquote>
<blockquote class="twitter-tweet" data-conversation="none" data-cards="hidden" data-partner="tweetdeck"><p dir="ltr" lang="en"><a href="https://twitter.com/steveworkman">@steveworkman</a> They will be redirected to HTTPS on the same host (if they've either visited <a href="https://t.co/L6pqB2Hw4E">https://t.co/L6pqB2Hw4E</a> or have preload).</p>— Lucas Garron (@lgarron) <a href="https://twitter.com/lgarron/status/750054698833502208">July 4, 2016</a></blockquote>
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p dir="ltr" lang="en"><a href="https://twitter.com/steveworkman">@steveworkman</a> Yeah, 1 redirect the first time if not preloaded, and "0" (HTTP->HTTPS on the client side) after that if the browser has HSTS.</p>— Lucas Garron (@lgarron) <a href="https://twitter.com/lgarron/status/750055476423905280">July 4, 2016</a></blockquote>
<script src="https://platform.twitter.com/widgets.js" async="" charset="utf-8"></script>
<h3 id="summary---hsts-will-likely-change-how-you-perform-redirects" tabindex="-1">Summary - HSTS will likely change how you perform redirects</h3>
<p>So, whilst this all feels very strange to me, and goes against the HTTPS Everywhere principles, it will eventually make things better in the long run. Getting subdomains for free is a great boost, though the preload list feels like a very exclusive club that you have to know about in order to make the best of HSTS. It's also quite difficult to get off the list, should you ever decided that HTTPS is not for you as you'll have the HSTS header for 18 weeks, and there is no guarantee that the preload list will be modified regularly. It's an experiment, but one that changes how you need to implement HSTS.</p>
<p>So, that's my guide. Comments, queries, things I've gotten wrong, leave a comment below or on Twitter: <a href="https://twitter.com/steveworkman">@steveworkman</a></p>
A Primer on Preconnect2018-01-08T00:00:00Zhttps://www.steveworkman.com/2018/a-primer-on-preconnect/<p>The best thing about technology, is that it's always changing. I learn new things every day, even in areas that I think I know a lot about, such as web performance.</p>
<p>See, when I was looking at performance optimisations for a project, I found a way to reduce connection times by getting the browser to speculatively perform DNS lookups for a list of third-party domains. This takes about 10-30ms off of the initial connection to a new domain. It may not sound like much, but it can make a big difference to how fast an image loads.</p>
<p>The last time I looked at this was before the internet went all-in on HTTPS, and so when I looked at the network timing of a new third-party HTTPS service, I was wondering if there was anything I could do to help the browser with the additional TLS negotiation and connection.</p>
<p><img src="https://www.steveworkman.com/static/img/image002.png" alt="Waterfall showing DNS prefetch on a HTTPS resource" loading="lazy" /></p>
<p>The affect shown here is achieved by adding a meta tag of <meta rel="dns-prefetch" href="//example.com" /> to the <head> of the HTML. You can also do this by adding it as a header to the response of the HTML document.</head></p>
<p>That fetches the DNS, but not the TLS negotiation or the connection setup. There is a different hint that you can give to the browser that will do all of those things, called preconnect. It works much in the same way as dns-prefetch but sets up the rest of the connection as well. When working, it looks like this</p>
<p><img src="https://www.steveworkman.com/static/img/Screen-Shot-2018-01-08-at-22.22.53.png" alt="" loading="lazy" /></p>
<p>The code here looks like this: <meta rel="preconnect" href="https://example.com" />. That looks nice and easy, and you've just saved another fifty milliseconds on the first connection to that domain over HTTPS.</p>
<p>However, this is a web standard, so it's not all that simple. Firstly, the <a href="https://caniuse.com/#feat=link-rel-preconnect">browser support for this hint is not brilliant</a> with no support in IE or Safari. The best thing to do for those browsers is to keep the dns-prefetch hint as well as the preconnect hint.</p>
<p>Secondly, there is a limit to how many you can use effectively, and that limit is 6 connections. The reasons for this go back into the aeons of ancient internet history (read: the 90s) where browsers and internet routers were most efficient with 6 open connections at any one time. With modern routers and browsers, this isn't true, but these limits aren't likely to be changed any time soon due to this enormous internet legacy.</p>
<p>Finally, there is an extra attribute that you can add to this <meta /> tag called "crossorigin" which changes how preconnect makes its connections. As <a href="https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/">Ilya Grigorik explains in his post:</a></p>
<blockquote>
<p>The <a href="http://www.w3.org/TR/css3-fonts/#font-fetching-requirements">font-face specification requires</a> that fonts are loaded in "anonymous mode", which is why we must provide the <code>crossorigin</code> attribute on the preconnect hint: the browser maintains a separate pool of sockets for this mode.</p>
</blockquote>
<p>What that means is that some resources, such as fonts, ES6 modules or XHR, need to be accessed in a "non-credentialed fetch", or crossorigin="anonymous". Otherwise, these resources won't load and you'll see a cancelled resource request in the network requests. the "anonymous" value is the default if just "crossorigin" is provided, so if you like shorthand, you don't need to add the ="anonymous" part to your code.</p>
<p>That's it. Preconnect is a really useful hint that can save milliseconds on those third-party requests. Give it a go.</p>
<p>For reference, my <a href="https://twitter.com/steveworkman/status/943441879332478976">conversation started on Twitter with this tweet</a> and ending with <a href="https://twitter.com/yoavweiss/status/943506955993255937">this tweet from Yoav Weiss</a></p>
7 Key take-aways from Chrome Dev Summit 20192019-11-13T00:00:00Zhttps://www.steveworkman.com/2019/7-key-take-aways-from-chrome-dev-summit-2019/<p>I was lucky enough to go to the Chrome Dev Summit in San Francisco this year. There were a thousand people in the venue, and seven thousand on the wait list, so I'm glad that I could attend in person.</p>
<p>You can see all the videos from the talks at CDS 2019 on this playlist</p>
<p>Here are my 7 key take-aways from the event</p>
<h3 id="the-web-must-get-to-parity-with-native" tabindex="-1">The web must get to parity with native</h3>
<p>Without saying so explicitly, the web must win and the Chrome team are working towards a future where the web is the go-to development platform for everything. It's going gangbusters on desktop, but on mobile, where the user population are moving towards, it's not the same story.</p>
<p>So, the team is investing heavily in things like project fugu, to create APIs for things like contacts, native file system interaction, bluetooth and NFC. This all has to be done through the standards process, which can be a long road, but it's necessary to ensure interoperability in the web.</p>
<h3 id="however%2C-there's-still-a-long-way-to-go-to-get-the-web-into-the-play%2Fapp-store" tabindex="-1">However, there's still a long way to go to get the web into the Play/App store</h3>
<p>The Chrome leadership panel session threw up a point that both Samsung and Microsoft treat PWAs as first-class citizens in their stores. Google has come out with TWAs - Trusted Web Apps. There is a build and submit step for the store as well, and the tooling provided only works on MacOS right now.</p>
<p>Take a step back from the specific problem and you can see that no one on the stage was happy with the outcome (note - the video of that session is not available online and the full live streams have been taken down). They all want the web to be available, and be discoverable. There is a lot more to be done and it's not perfect, but they have taken a big step forward with TWAs from having no PWAs in the store, to a pretty simple way to create them and deploy them.</p>
<figure>
<img src="https://www.steveworkman.com/static/img/cds-2019-panel.jpg" alt="Chrome leadership panel at Chrome Dev Summit 2019" />
<figcaption>Chrome Leadership Panel at CDS 2019</figcaption>
</figure>
<p>It is going to be OK everyone, it's just going to take some more time.</p>
<h3 id="there's-a-big-focus-on-making-the-web-faster" tabindex="-1">There's a big focus on making the web faster</h3>
<p>The speakers all talked about making the web faster, including how they measure this, with upcoming changes to how Lighthouse is going to incorporate new metrics such as Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). All these metrics are explained over at <a href="https://web.dev/metrics/">https://web.dev/metrics/</a>, and they are now being labelled in the performance tab of the web inspector.<br />
New metrics coming to Lighthouse in V6</p>
<p>They are also experimenting with slow and fast loading indicators and interstitials though they didn't make that much of this during the talk - expect this to change a lot.</p>
<h4 id="lighthouse-is-getting-a-ci-mode-and-a-server" tabindex="-1">Lighthouse is getting a CI mode and a server</h4>
<p><a href="https://github.com/GoogleChrome/lighthouse-ci">https://github.com/GoogleChrome/lighthouse-ci</a> - and I couldn't be happier.</p>
<figure>
<img src="https://www.steveworkman.com/static/img/lighthouse-v6-perf-changes.jpg" alt="Changes to Lighthouse's metrics in Version 6" />
<figcaption>Changes to Lighthouse's metrics in Version 6</figcaption>
</figure>
<h4 id="the-focus-on-a-faster-web-extended-to-making-react-faster" tabindex="-1">The focus on a faster web extended to making React faster</h4>
<p>I was surprised at how much focus there was on React, given that the Web Almanac also launched at this event and it showed that React has just a 4.6% share of the web - though it clearly has a much larger mindshare amongst developers.</p>
<p>During one talk the speakers seemed to recommend that you focus on "UI frameworks" not "view libraries", so Next.js over React. I don't really understand why Google would go all-out in saying do one over the other, and especially the one that needs the most effort to configure to get high performance.</p>
<h3 id="google-told-us-to-focus-on-those-less-privileged-than-ourselves" tabindex="-1">Google told us to focus on those less privileged than ourselves</h3>
<p>A lot of talks covered performance, security, and access to data and services for those that can't rely on it - for example, the developing world. They encouraged us to test on devices worse than ours, to look at our data, and to find out what the world is really like outside of our bubbles.</p>
<h3 id="chrome-is-secure-by-default" tabindex="-1">Chrome is secure by default</h3>
<p>We've moved on from the pre-HTTPS era where users had to be rewarded for being safe with green labels and checkboxes - we are now in to the part where that is taken for granted and you are warned when things might not be as they seem. The security team are gathering data and doing in-depth research to find out what signals users react to and take action when something is insecure.</p>
<p>Also in security, there was a great talk on WebAuthn, a way to authenticate your users with minimal or no passwords using the capabilities of your devices or things like Titan security keys.</p>
<h3 id="the-open-standards-process-is-important%2C-and-bringing-microsoft-in-to-chromium-is-good-for-the-web" tabindex="-1">The open standards process is important, and bringing Microsoft in to Chromium is good for the web</h3>
<figure>
<img src="https://www.steveworkman.com/static/img/open-source-standards.jpg" alt="Charts showing contributions to Chromium by different organisations" />
<figcaption>Charts showing contributions to Chromium by different organisations</figcaption>
</figure>
<p>It was fantastic to see the Edge team present, and show off all the things they were working on in collaboration with the Chrome team. Microsoft are bringing the best of what they know from accessibility, security and the Windows platform to the table, which will enhance the whole platform.<br />
Open source contributors to Chromium</p>
<p>I'm also quite confident that we can stop developing for IE very soon. Once Edge launches, businesses adopt it and the IE icon goes away, we'll see big drop-offs in IE usage.</p>
<p>And that's it - the event was great and excellently organised. Well done to the MC's as well and everyone behind the scenes. Roll on 2020!</p>
Changing how I interview engineers in 20202020-02-17T21:00:00Zhttps://www.steveworkman.com/2020/changing-how-i-interview-engineers-in-2020/<figure>
<img src="https://www.steveworkman.com/static/img/490x326_BadPhoneCall.jpg" alt="A woman who is having a bad phone call" />
</figure>
<p>I began interviewing people for jobs about three years in to my career. Over the past decade, I've run hundreds of phone interviews, Skype interviews and in-person interviews.<br />
Over time, my approach, and what I look for has changed. I've always relied a lot on gut feel, looking for people similar to those who already work for the company (safe bets) or looking for red flags if a candidate does not stand out, but recently my quesions have changed to focus more on how someone approaches their work, rather than what they know right now.</p>
<p>I can clearly see that the questions I'm asking lead to a narrow band of people being hired, and that needs to change. To try and diversify my questions, I'm going to write what my questions were, what they will be now, and what I'll be looking for (just in case I ever interview you). I'll update this post as I update the questions, and I'll give reasons as I go.</p>
<p>FYI, these are the questions I ask on the phone. There's more in the in-person interview that isn't covered here.</p>
<h3 id="introductions" tabindex="-1">Introductions</h3>
<p><strong>Question:</strong> <em>Tell me about yourself and the project you're working on right now</em></p>
<p><strong>Change to:</strong> <em>Tell me about you, and what drives you/gets you out of bed in the morning</em></p>
<p>I want you to talk to me. I like interviews to feel more like conversations, and talking about yourself is the easiest thing for many people. Beyond that, talking about what you do, and being able to explain how you made something happen is really important - I like chatty engineers, they work better in collaborative environments such as scrum teams.</p>
<p>The change in this question takes the emphasis from your work to you. Being passionate about your work is good, though it doesn't give me much insight in to your motivation. Whether it is money, status, pride or something else, I don't mind - it'll help me fit you in to a team later on.</p>
<h3 id="cognitive-reasoning" tabindex="-1">Cognitive reasoning</h3>
<p><strong>Question:</strong> <em>You mentioned you worked with [Technology X], what are the advantages of it over [Technology Y]</em></p>
<p><strong>Change to:</strong> <em>No change here</em></p>
<p>I'm listening to the answer for the first question or looking at your CV to ask this technology question; these days it's something like React or Angular, and I'll ask you to compare it to the other one.</p>
<p>I want to know how well you understand the technology, how it works and why we use it especially at more senior levels. I also want to know that your knowledge expands outside of your current technology bubble, as your current framework-of-the-month won't be around forever. I'm much more probing on this question with seniors rather than juniors.</p>
<p>In the future, I'd like a version of this question that tells me you can compare and contrast things from your experience.</p>
<p><strong>Question:</strong> <em>What is good code to you?</em></p>
<p><strong>Change to:</strong> <em>Scenario question - find a DatePicker component for your project</em></p>
<p>I was first asked this question by my prospective manager in 2013 when interviewing for Yell. I have gleefully modified it over the years, and it has become my most favourite and important question.</p>
<p>The above question is phrased as a task to find a new component for our project, and to go out on to the internet and find one. Can you tell that the code you're going to introduce into the codebase is any good? Will that code solve more problems than it causes? What processes do you go through (or should go through) to find a good component on the internet?</p>
<p>I want to know that you know what good looks like, because the amount of time that engineers spend working with other people's code these days is mind-blowing.</p>
<h3 id="teamwork" tabindex="-1">Teamwork</h3>
<p><strong>New question:</strong> <em>What do you do when you find a bug in some code? What about if it's a bug in an internal library? What about when it's open source?</em></p>
<p>At a high level, this is a "dealing with adversity" question, and it's also useful to know if the engineer knows how to file a good bug. How do you react when you can't fix a problem? This will tell me how you approach the open source nature of web work, and how you work with your team, peers and community. I also want to know how far you'll go to solve a problem.</p>
<p><strong>New question:</strong> <em>Tell me about a time when you disagreed with a colleague on how to do something. How did you resolve it?</em></p>
<p>I used to save this for the face-to-face interview, but teamwork is too important to wait until you meet to ask this question. It's a standard question, which many engineers will deny ever having a problem with their colleagues. Perhaps I'm not the agreeable type, but if I don't have a week when I disagree with someone then I've probably been on vacation.</p>
<p>Disagreements happen, it's how you handle it that matters.</p>
<hr />
<h3 id="questions-that-i'm-not-going-to-ask-any-more" tabindex="-1">Questions that I'm not going to ask any more</h3>
<h4 id="what's-your-favourite-feature-of-the-javascript-language---alternatively%2C-tell-me-about-a-js-feature-that-i-haven't-heard-of" tabindex="-1">What's your favourite feature of the JavaScript language - alternatively, tell me about a JS feature that I haven't heard of</h4>
<p>When I asked this question, I got a list of features. I got <code>let</code> and <code>const</code> were a dev's favourite features. Rarely did I get what I was looking for, like generators, optional chaining, Intl.</p>
<p>This question is also obsolete for some newer developers, who have never known ES5 - what they have now is just the language, and it evolved.</p>
<p>So, I'll replace it with a technical question that is still useful: <em>What do Promises do, and why do we need them?</em> - here I'm after knowledge of what <code>async</code> functions do and how they can make coding complex data requests easy</p>
<h4 id="what's-the-hardest-thing-to-do-in-css%3F" tabindex="-1">What's the hardest thing to do in CSS?</h4>
<p>All I get from this is X-browser compatibility, or people who still use floats for layout</p>
<h4 id="what-does-accessibility-mean-to-you%3F" tabindex="-1">What does accessibility mean to you?</h4>
<p>People's answers to this are binary - they know it, or they don't. The majority of engineers fall into the latter category. This question isn't useless, but it isn't a phone interview question.</p>
<h4 id="how-do-you-make-a-website-fast%3F" tabindex="-1">How do you make a website fast?</h4>
<p>Similar to the accessibility question, you get engineers who know it or they don't. This question can easily be saved for the face-to-face interview where we can go into more technical depth.</p>
<hr />
<p>I hope that explains a bit more about my thought process. If you have questions, send them over to me <a href="https://twitter.com/steveworkman">@steveworkman</a> and we'll chat there. I'll update this post as I add more questions</p>
Bundle analysis deep-dive - how to remove a megabyte of code from your app2020-05-07T15:00:00Zhttps://www.steveworkman.com/2020/bundle-analysis-deep-dive-how-to-remove-a-megabyte-of-code-from-your-app/<h2 id="summary" tabindex="-1">Summary</h2>
<p>In this post, I delve deep into:</p>
<ul>
<li>Library and bundle size, and output, using Rollup, and how tree-shaking doesn't always work</li>
<li>A discussion on dependencies, managing them in your library</li>
<li>Effectively analysis if the code you have is the right size</li>
<li>An aside on browserslist files and their effects</li>
<li>Using ES Module builds in webpack when appropriate</li>
</ul>
<h2 id="it-all-started-with-a-tweet" tabindex="-1">It all started with a tweet</h2>
<!-- Excerpt Start -->
<p>Part of my role at the office involves helping teams to code in a standardised way. We enforce this through a wide variety of tools that correct as you write (<a href="https://eslint.org/">ESlint</a>) and those that check your work (unit tests, <a href="https://www.sonarqube.org/">Sonar</a>).</p>
<p>To make life even easier we have a design system to standardise our HTML and CSS, and a common library of components that implement the basics of the design system in VueJS web components. This makes it hard to get the basics wrong.</p>
<p>Whilst making a large update to how this library is structured and compiled, I moved the library build process to <a href="https://rollupjs.org/guide/en/">Rollup</a>. We had previously been publishing untranspiled JavaScript to apps that then had to transpile them themselves to meet our target browser support. This keeps bundle size minimal but can cause interoperability and portability problems, for example, configuring <a href="https://jestjs.io/">Jest</a> is much harder.</p>
<p>On release day, I did a demo in front of the whole company's VueJS dev community - and the Vue build process reports that my bundle is 2MB for first load - up from 270KB!</p>
<p><img src="https://www.steveworkman.com/static/img/full-horror-bundle.jpg" alt="alt-text" title="Huge bundle, badly built" loading="lazy" /></p>
<p>💩</p>
<p>So, feeling bad that this has happened, and knowing that developers will start running into this on Monday morning, <a href="https://twitter.com/steveworkman/status/1251582993103233027">I start fixing it on Saturday night</a> - I mean, entertainment options are limited right now.</p>
<!-- Excerpt End -->
<p>My first stop is the <a href="https://www.npmjs.com/package/webpack-bundle-analyzer">webpack bundle analyser</a>, which gives a great overview of where the big bits of my bundle are. This is built in to the <a href="https://cli.vuejs.org/">Vue CLI</a> with the <code>--report</code> option, so that's nice and easy to get.</p>
<p>Then I see this:</p>
<p><img src="https://www.steveworkman.com/static/img/First-Bundle.jpg" alt="alt-text" title="Image of first bundle" loading="lazy" /></p>
<p>Since I wrote these libraries here, I know what they are and what they contain. I can confidently say that <code>vue-modal</code> contains <code>vue-core</code> and both contain <code>shared-js</code> and all of the <code>core-js</code> polyfills that they need.</p>
<p>I also built all of these libraries with rollup, so I can go and check what is going on. Rollup's documentation says that Rollup does tree-shaking with ES modules, which these all are. It also says that tree-shaking is hard and <a href="https://rollupjs.org/guide/en/#tree-shaking-doesnt-seem-to-be-working">"that's just JavaScript"</a>. Yeah... thanks.</p>
<p><img src="https://www.steveworkman.com/static/img/rollup.PNG" alt="alt-text" title="Rollup on why tree-shaking doesn't always work" loading="lazy" /></p>
<p>The sceptical part of me doesn't believe that, so starting with the biggest chunk of code, the modal. One of the suggestions in the Rollup docs is to use a lodash-es style library and only reference the files I need - effectively doing manual tree-shaking. So, I reference the file that I need, which I can do in this new app structure - very handy. It reduces the bundle size from <strong>200KB to 45KB</strong>.</p>
<p>75% code reduction - time to celebrate? Nope - 45KB is still huge for this component, so the next stop is the <a href="https://www.npmjs.com/package/rollup-plugin-analyzer">rollup bundle analyser</a>, which is a plugin to the rollup config.</p>
<p><img src="https://www.steveworkman.com/static/img/rollup-bundle-analyser.PNG" alt="alt-text" title="The Rollup Bundle Analyser package" loading="lazy" /></p>
<p>It says most of the code is core-js polyfills. That would be important if I wanted to let people load this directly in a browser from a CDN, but I don't. I'm only interested in using this as a library with other VueJS apps and webpack.</p>
<p>With these dependencies under my control in rollup, I turn off the <a href="https://www.npmjs.com/package/@rollup/plugin-node-resolve"><code>node-resolve</code></a> plugin and magically, 45KB is now 7KB!</p>
<p>However, there's a snag - I now have a dependency that won't exist when I publish this as I don't want to include the source code for the <abbr title="Single File Components">SFCs</abbr> when it is published. Therefore, as it's not tree-shaking well, I do some scripting with the rollup API to make a file for each component of <code>vue-core</code> that I can reference from <code>vue-modal</code>. These will be distributed as transpiled libraries along with the full library file.</p>
<p><em>Hindsight note here</em> - this isn't always going to be necessary, once the dependencies are sorted out - the right things resolved and the right ones marked as external, this all becomes moot and in some situations can increase bundle size - as I will find out later.</p>
<p><img src="https://www.steveworkman.com/static/img/3KB-icon.png" alt="alt-text" title="3KB Icon Component" loading="lazy" /></p>
<p>With these changes, the bundle size for the modal component is now 3KB! 🎉. All the components generated are between 3 and 9KB in size and simple to publish - or at least I thought so.</p>
<p><img src="https://www.steveworkman.com/static/img/library-build.png" alt="alt-text" title="3-9KB Library of Components" loading="lazy" /></p>
<p>I tried my code out in a test app, the same one that had the huge build earlier. I tried to link the two together with npm file paths, only to get build errors. It appears that the dependencies of the library aren't available because they're in a <a href="https://lerna.js.org/">Lerna</a> monorepo and my app can't resolve the hoisted modules - it's just not working.</p>
<p>Thankfully, like all good Super Villains, I have a plan B.</p>
<p><img src="https://www.steveworkman.com/static/img/verdaccio.png" alt="alt-text" title="Verdaccio" loading="lazy" /></p>
<p>I need somewhere to publish my unfinished node modules. I don't use github for this code, don't have private npm and the office one doesn't have a nice sandbox to use. So, I have a local docker solution called <a href="https://verdaccio.org/">Verdaccio</a>. I spin this up and can publish my unfinished modules there for this very occasion.</p>
<p>Pulling the code from there makes my build errors go away (after changing the reference in my modal component to use the new rolled up single file).</p>
<p><img src="https://www.steveworkman.com/static/img/down-to-118.jpg" alt="alt-text" title="Reduced the bundle size to 1.18MB" loading="lazy" /></p>
<p>This build above is a big improvement - <code>vue-core</code> also has its dependencies externalised and the result is great, 2.09MB stat down to 1.18MB - 910KB off every run of the app. Yay!</p>
<p>At this point, hindsight kicks in. Whilst looking for a solution to referencing this SFC from the dist folder with lerna (note - no good answers) I go back to the <code>import {} from ...</code> syntax and it saves another KB. Tree-shaking is now working again.</p>
<p>So, Saturday night has been saved, I have promising answers for the team on Monday, but there's still more to do. I've got the Vue component libraries under control, now to take on the <code>shared-js</code> library as that is far too big as well.</p>
<div style="display:flex; flex-direction: row;">
<div style="flex: 1; width: 50%; margin: 10px"><img src="https://www.steveworkman.com/static/img/shared-js-1.png" alt="Shared JS before externalising" loading="lazy" /></div>
<div style="flex: 1; width: 50%; margin: 10px"><img src="https://www.steveworkman.com/static/img/shared-js-2.png" alt="Shared JS after externalising" loading="lazy" /></div>
</div>
<p>The same trick works here as well, turning off <code>node-resolve</code> gives me a 5x size reduction, removing 278 modules in the process</p>
<p>Whilst I'm looking at this, my mind wandered and I looked at the cost of all of these polyfills - basically the cost of supporting older browsers whilst writing new code. These 278 modules are all <code>core-js</code>, the polyfill library, and they're only the files that are in use in my library here.</p>
<p>The default <code>browserslistrc</code> file, which allows me to control the polyfills that are added based on browsers we want to support and the features they're missing, has a setting of "last 2 versions and > 1% usage and IE 11 Only".</p>
<div style="display:flex; flex-direction: row;">
<div style="flex: 1; width: 50%; margin: 10px"><img src="https://www.steveworkman.com/static/img/over-5-percent.png" alt="Browsers with > 5% support bundle size" loading="lazy" /></div>
<div style="flex: 1; width: 50%; margin: 10px"><img src="https://www.steveworkman.com/static/img/only-chrome.png" alt="Only Chrome bundle size" loading="lazy" /></div>
</div>
<p>Taking out just IE11 from support does nothing, no bundle size change. It's not just IE that causes these issues. Going with just browsers with > 5% support (Chrome and iOS Safari) it still needs 100KB of polyfills. Chrome-only has a 4KB overhead.</p>
<p><strong>The cost of supporting other browsers, and ones that aren't that old either, is high.</strong></p>
<p><img src="https://www.steveworkman.com/static/img/977k.jpg" alt="alt-text" title="Down to 977KB" loading="lazy" /></p>
<p>Back to the topic, a bit more re-publishing and we are unsurprisingly 200KB lighter, with the vendors chunk weighting in at 977KB stat, 97KB gzipped (and about 87KB <a href="https://github.com/google/brotli">brotli'd</a>). This is all really good until I look at the pre-upgrade version and see that it's still <em>206KB lighter</em>.</p>
<p><img src="https://www.steveworkman.com/static/img/770k.jpg" alt="alt-text" title="Previously, the bundle was 771KB" loading="lazy" /></p>
<p>I'm not going to make all of that difference up. <a href="https://github.com/zloirock/core-js"><code>core-js</code></a> 3 has fixes, more polyfills and more patches and there are other upgrades too that could make this bigger. But still, 20% of the bundle size is significant.</p>
<p><img src="https://www.steveworkman.com/static/img/over-qualifying.png" alt="alt-text" title="This module is over-qualified and not optimised" loading="lazy" /></p>
<p>I've clearly forgotten my lesson of hindsight from earlier as I try to use the pre-built SFCs instead of the destructured library to get it down. That adds another 37KB stat instead of taking it away. Going in to the source code that rollup generates shows a lot of VueJS boilerplate, confirmed by gzip compression being a mere 1.1KB larger. Still, bigger is bigger and I take it out.</p>
<p>I come to the conclusion that my own libraries may not be the problem any more, which is good, so let's look at another bundle. It seems that core-js has some duplicates over in <code>@vue/cli-plugin-babel</code>.</p>
<p><img src="https://www.steveworkman.com/static/img/core-js-duplicates.jpg" alt="alt-text" title="Duplicate core-js code in plugin-babel-cli" loading="lazy" /></p>
<p>I'm gonna skip a bit of my analysis here as I did a bunch of wrong things with the babel config that were not necessary. My issue here was pretty simple - npm hadn't de-duped a module even though the package was identical.</p>
<p><img src="https://www.steveworkman.com/static/img/code-not-deduped.png" alt="alt-text" title="npm hasn't de-duped this code" loading="lazy" /><br />
<em>Note Jest 25 & 26 are still core-js 2 - the screenshot is wrong</em></p>
<p>Running the <code>npm dedupe</code> command fixes this and the bundle size drops 30KB stat - 4KB gzip.</p>
<p>Now that is de-duped, how much further can we go? Well, without ripping code/features out, not a lot. The core-js bundle is now 69KB bigger than before. A third of this is the new polyfills like <code>web.url</code>, and the rest is supporting implementation.</p>
<p><strong>So, was the old app broken without this code?</strong></p>
<p>Genuinely, it might have been. It may also be because the previous build used Babel's <code>useBuiltIns: "usage"</code> option that has gotten a lot more accurate with core-js 3. Both of these things are announced in the <a href="https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md">core-js 3 blog post</a>. It may also be other updates to use <code>URL</code> that weren't in earlier versions of our libraries. It may have been this strategy that this polyfill strategy has introduced compatibility bugs. I'm sad, though I am also more understanding of teams that resorted to throwing the whole <code>@babel/polyfill</code> library at the problem. I really don't know which of these the answer is, though our logs don't show anything bad happening here in production.</p>
<p>So, I stop arguing with core-js, and spend a few minutes on the next biggest chunk - <a href="https://moment.github.io/luxon/">Luxon</a>.</p>
<p>Luxon is a smaller date library (than Moment) with the timezone features a global logistics company needs (I can't wait to be able to use <a href="https://github.com/tc39/proposal-temporal">a native API for this</a>). It is not transpiled (as the website makes clear) and so this should be simple. However, Webpack is loading a version with all of the dependencies bundled.</p>
<p><img src="https://www.steveworkman.com/static/img/webpack-chain.png" alt="alt-text" title="Webpack chaining code for node resolve" loading="lazy" /></p>
<p>Webpack loads modules in a priority order of browser -> module -> main (these are named properties in the package.json file of each module) when building a browser-based target. However, for Luxon, it's more appropriate to select the ES module because of the way we're building and how Luxon is built.</p>
<p>A short change to the webpack config removes 24KB stat of code and overall it's down 4KB gzipped. I save another 5KB by not re-transpiling our own libraries - a hangover from the old version of the code that isn't necessary now. I run it in IE, get mad that I forgot to change the browserslist file back, and we are now at 92KB gzipped for the vendors chunk, 14KB up on last time.</p>
<p><img src="https://www.steveworkman.com/static/img/celebrate.gif" alt="alt-text" title="Time to Celebrate" loading="lazy" /></p>
<p>So, I've gone from megabytes over to 14K with a lot of fiddling with external dependencies, library build processes, and over-optimisation.</p>
<p>In summary, always check your bundle sizes, manage your dependencies well, and know your audience; give them what they need, and no more.</p>
<p>If you want to read more about JS framework sizes from the other end of this telescope, I highly recommend Tim Kadlec's article, <a href="https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/">The Cost of JavaScript frameworks</a>. Finally, I was super happy that <a href="https://twitter.com/beep">Ethan Marcotte</a> mentioned my tweet thread in his blog <a href="https://ethanmarcotte.com/wrote/gardened/">Gardened</a> - thanks Ethan!</p>
Web Reading List for May 20202020-05-23T15:00:00Zhttps://www.steveworkman.com/2020/web-reading-list-for-may-2020/<h3 id="i've-been-away-for-3-weeks-and-all-this-happened" tabindex="-1">I've been away for 3 weeks and all this happened</h3>
<!-- Excerpt Start -->
<p>It's a strange old time. In the middle of lockdown, my wife and I were expecting our second child, though we weren't quite expecting her this early. Two and a bit weeks before her due date, our littlest one arrives and I down tools to help. It's been a wonderful few weeks that I won't forget.</p>
<p>It did catch us all off guard though, as I'd been expecting to be part of a least another week's worth of the tech world, and then there was MS Build after that, and loads more. So, as I still scrolled through Twitter whilst seeing if she'll sleep, here's what I think I've missed in the last three weeks.</p>
<!-- Excerpt End -->
<h3 id="css-properties-might-be-viable-everywhere" tabindex="-1">CSS Properties might be viable everywhere</h3>
<p>In <a href="https://engineering.fb.com/web/facebook-redesign/">Rebuilding our Tech Stack</a> Facebook showed the world what a modern, non-IE version of Facebook looks like - and it's basically React and CSS Custom Properties. It's not revolutionary.</p>
<p>What is good though, is this tweet later that shows IE11 using custom properties!</p>
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">For CSS & browser nerds — this is a real screenshot of IE11 using Custom Properties. Notice how there are no extra class names or style attributes, and how these styles are actually coming from a file.<br /><br />Now imagine what is possible in modern browsers with a frontend CSS parser. <a href="https://t.co/vLIEgYAsYX">pic.twitter.com/vLIEgYAsYX</a></p>— Jonathan Neal (@jon_neal) <a href="https://twitter.com/jon_neal/status/1263071983811641345?ref_src=twsrc%5Etfw">May 20, 2020</a></blockquote>
<p>Apparently, it's inspired by this <a href="https://github.com/nuxodin/ie11CustomProperties">IE11 polyfill</a>. CSS custom properties have been around for ages and are really something that I've never been able to invest in because they have awful polyfills and work-arounds. This one looks like it could actually work - for those of us that still have to support IE at least!</p>
<h3 id="chrome-can-tell-if-you're-idle" tabindex="-1">Chrome can tell if you're Idle</h3>
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">📢 Detect inactive users with the Idle Detection API!<a href="https://t.co/Blriuygk8J">https://t.co/Blriuygk8J</a> by <a href="https://twitter.com/tomayac?ref_src=twsrc%5Etfw">@tomayac</a><br /><br />Use the Idle Detection API to find out when a user isn't actively using their device, e.g., to show reliable chat availability:<br /><br />🟢 @alice (active)<br />⚪️ @bob (away)<br />🟢 <a href="https://twitter.com/tomayac?ref_src=twsrc%5Etfw">@tomayac</a> (active)</p>— Chrome Developers (@ChromiumDev) <a href="https://twitter.com/ChromiumDev/status/1262330843961458688?ref_src=twsrc%5Etfw">May 18, 2020</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>The new idle detection API looks pretty cool - currently behind origin trial it has a lot of use cases for web-apps and brings it another step closer to parity</p>
<h3 id="gitflow-is-not-for-web-apps" tabindex="-1">Gitflow is not for web apps</h3>
<p><a href="https://nvie.com/posts/a-successful-git-branching-model/">Who knew</a></p>
<h3 id="lots-of-web-perf-goodness" tabindex="-1">Lots of web perf goodness</h3>
<ul>
<li><a href="https://simonhearne.com/2020/testing-behind-consent/">Simon Hearne looks in to performance behind cookie consent and those who opt-out</a></li>
<li><a href="https://www.snowpack.dev/">Snowpack v2</a> is about to drop. There's a few other new ES Module-only build tools happening right now (<a href="https://github.com/vitejs/vite">Vite</a> for VueJS) and it's nice to see this tooling get better</li>
<li>There's now a <a href="https://github.com/LarsDenBakker/rollup-plugin-dynamic-import-variables">Rollup plugin to do dynamic imports</a> - this would literally have saved me a day or two in the week before I went on leave, and now I have to re-write more code.</li>
<li><a href="https://web.dev/lighthouse-whats-new-6.0/">Lighthouse v6</a> is out and includes the new <a href="https://web.dev/vitals/">Web Vitals</a> metrics (LCP/FID/CLS, or Largest Contentful Paint, First Input Delay and Cumulative Layout Shift for those not familiar with days old acronyms)</li>
</ul>
<h3 id="miscellanous" tabindex="-1">Miscellanous</h3>
<ul>
<li>Microsoft released <a href="https://github.com/microsoft/playwright">Playwright</a> - Puppeteer automation for Chromium, Gecko and Webkit. Amazing for automation testing.</li>
<li>There's a thing called <a href="https://blog.hichroma.com/chromatic-2-0-code-review-but-for-ui-ddcebf0272b4">Chromatic v2</a> that aims to do visual regression testing in Storybook. Yay.</li>
<li><a href="https://github.com/11ty/eleventy/releases/tag/v0.11.0">11ty version 0.11</a> is out, with full support for VueJS components rendered at build time</li>
<li><a href="https://monzo.com/blog/how-weve-evolved-on-call-at-monzo">Monzo are re-thinking how they do on-call</a></li>
<li>The FT are <a href="https://medium.com/ft-product-technology/making-recruitment-fair-for-people-of-colour-66a3ad907a7d">changing their recruitment to make it fairer for people of colour</a></li>
<li><a href="https://www.youtube.com/watch?v=qC5KtatMcUw">Unreal Engine 5 is amazing</a>. Having studied 3D in the early 2000s I am in awe of this level of graphical fidlity.</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/qC5KtatMcUw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<h3 id="bonus-video" tabindex="-1">Bonus video</h3>
<p>A man solves an impossible Sudoku</p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/yKf9aUIxdb4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
Lessons from running an internal technology conference2021-04-13T21:00:00Zhttps://www.steveworkman.com/2021/lessons-from-running-an-internal-technology-conference/<p>Inside Maersk Technology, we have lots of communities of practice - like-minded individuals who solve problems with technologies. I run the front-end community and have done for about two years.<br />
Over time, we've run regular calls, demonstrations and tech talks to help educate the community and keep us up to date with the latest trends. This time, I wanted to go bigger - to run a half day event where we could get lots of people presenting on the same day.</p>
<p>The good news is that on March 19<sup>th</sup> we had a very successful conference, with nearly 100 people online at its peak, and consistently more than half that through the entire 4.5 hour run time!</p>
<p>I've learned a lot from doing this, and whilst I've organised conferences before (I helped to run <a href="https://londonwebstandards.org/">London Web Standards</a> for 6 years) this is the first time I've been the lead with no one else having done anything like this before.</p>
<p>So, here's what I've learnt.</p>
<h2 id="1.-give-yourself-enough-time-to-organise-it-all" tabindex="-1">1. Give yourself enough time to organise it all</h2>
<p>This should be obvious, but time goes faster than you'd think when you're busy. In January, I said "let's do this" thinking that we'd get it done "some time before April". It was only just enough time and I wish I'd had another two weeks. Here's why:</p>
<ul>
<li>The first week was taken up by meetings with my fellow coordinators, gathering ideas, getting everything down in a Miro board that we worked from</li>
<li>The second week was us deciding to do a CFP and sending that out to the community</li>
<li>Week three had us adding an extra week to the CFP to allow more submissions. Not because we didn't have enough, we had more than we thought and people wanted more time to submit!</li>
<li>Week four was us reviewing the submissions and organising an external speaker</li>
<li>Week five was selection and telling the speakers</li>
<li>Week six and seven were sorting out all the rest of the logisitics</li>
<li>Week eight was the week of the conference!</li>
</ul>
<p>I would have loved more time to do the conference logistics, and also to give our speakers more time to work on their presentations as well. Everyone involved has a day job, some of them more than one, and two and a half weeks probably isn't enough time for a great talk to come together. However, everyone did it and the event was great, so maybe we got lucky.</p>
<p>The last week felt rushed for me. Everyone stepped up to help but our surprise guest speaker (our CTO) recorded his bit with me <em>the night before</em> and the little details like the event coordinators running the links between the talks was OK, but could have been a lot better. Perhaps I'm being picky because I am fortunate enough to go to well-organised conferences and they all seem to get this right. They probably didn't start organising it 8 weeks before though...</p>
<h2 id="2.-you-can't-do-it-alone" tabindex="-1">2. You can't do it alone</h2>
<p>With all of the amazing tools we have at our fingertips, with bloggers livestreaming events all the time, you'd have thought that one person could put on a conference. You'd be right, but that's all that person would do for 8 weeks.</p>
<p>Thankfully, I've got 5 other people who help to organise the sub-communities in front-end dev, and they all stepped up to help. My biggest problem (and a lesson I re-learn every few years) is effective delegation of tasks. Making sure that whole areas are handed to people to run, not just little tasks. It doesn't matter that they've not done it before, you were there once yourself and it's important to remember how you learnt to do it.</p>
<h2 id="3.-prepare-for-good-and-bad-things-happening" tabindex="-1">3. Prepare for good and bad things happening</h2>
<p>In the planning stage I spend a lot of time thinking of all the things that can go wrong and how to put them right. What I don't think of much is what happens when things go too well? Like, when you get more proposals than you have time slots for.</p>
<p>This was an amazing problem to have. We had 28 submissions for 10 slots for the first time we're running this event. I was honestly blown away by it and if any of my colleagues are reading this, I hope I said that enough.</p>
<p>When it came to selection time, this was a problem, as we hadn't discussed selection criteria at the start. We also had a form submission that everyone in the coordinators could see which included everyone's names, so we couldn't do a truly blind selection process.</p>
<p>The end result was that people who had put minimal time into their proposal, or had picked something that we had a few different submissions for, didn't get selected. That sounds normal, but what we ended up with was a speaker list full of people who were strong voices in the community who had spoken before. They produced the best proposals and got selected. A meritocracy without enough diversity to make me satisfied.</p>
<p>We will do better at this next time.</p>
<h2 id="4.-rehearse" tabindex="-1">4. Rehearse</h2>
<p>We ran the event through a Teams Live Event, which is like Teams but everyone is on mute and there's a mini production stage and a Q&A box. None of the organisers had produced an event using this tech, so we found someone who had and got them to take us through it.</p>
<p>With that, we also had to make sure that the presenters knew what was going on, so we ran a rehearsal session for everyone and made sure their technology was working. This caused three people to find new laptops (Teams Live Events can only be presented from the desktop clients on Windows and Mac, not Linux or Web 🤦) and one to pre-record their talk and send us a video.</p>
<p>We also learnt that a live quiz wouldn't work here because there's a 20 second lag between live and the feed. The quiz was moved to a separate mini meeting during the event, which also served as a nice break from talking to what felt like an empty room as there's no presenter feedback in Teams whatsoever.</p>
<h2 id="5.-don't-introduce-new-technology-on-the-day" tabindex="-1">5. Don't introduce new technology on the day</h2>
<p>It started out bad...</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Starting the day right by spilling tea on my keyboard. <a href="https://t.co/EZAGGFw0VM">pic.twitter.com/EZAGGFw0VM</a></p>— Steve Workman (@steveworkman) <a href="https://twitter.com/steveworkman/status/1372827240359153664?ref_src=twsrc%5Etfw">March 19, 2021</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>Then it got worse...</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Let's just be clear, I am having a bad tech day <a href="https://t.co/zlOpj9vLC7">https://t.co/zlOpj9vLC7</a> <a href="https://t.co/1uSBbiCBcC">pic.twitter.com/1uSBbiCBcC</a></p>— Steve Workman (@steveworkman) <a href="https://twitter.com/steveworkman/status/1372830723481161729?ref_src=twsrc%5Etfw">March 19, 2021</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>Then it all just went to hell...</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Now what am I going to do? <a href="https://t.co/tqueekNAmX">pic.twitter.com/tqueekNAmX</a></p>— Steve Workman (@steveworkman) <a href="https://twitter.com/steveworkman/status/1372831482377539584?ref_src=twsrc%5Etfw">March 19, 2021</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>So, let me say it loud and clear.</p>
<p><strong>Don't mess with technology on the day of the conference</strong></p>
<p>My specific lesson is:</p>
<blockquote>
<p>Calm down, it'll all be fine. Don't rush around and spill your drink</p>
</blockquote>
<p>Combined with...</p>
<blockquote>
<p>To get that camera mount you moved the desk right a few inches, did you check that the monitor won't hit that shelf and fall over?</p>
</blockquote>
<p>and finally, finished off with...</p>
<blockquote>
<p>The monitor fell over once, are you sure it's balanced right now? Make sure if it does fall again it doesn't land on that microphone...</p>
</blockquote>
<h2 id="6.-enjoy-it" tabindex="-1">6. Enjoy it</h2>
<p>At the State of the Browser conferences, I love being in the crowd and taking pictures for social media and the website. I listen to the talks and take them all in. I didn't get to do that this time, and not just because I was researching how to fix all-in-one monitors.</p>
<p>Remember to enjoy it. Once the event is off and running there's not much more you can do, so take it all in and learn something new yourself.</p>
<hr />
<p>And that's it. If you want to know more about how we set things up - let me know on <a href="https://twitter.com/steveworkman">Twitter @steveworkman</a> and I'll write some more.</p>
How I Learn2022-01-30T21:00:00Zhttps://www.steveworkman.com/2022/how-i-learn/<p>People appear to be in two different camps on the question of "how hard is coding today?". There's a group who keep on the cutting edge of technology (the GraphQL-using, framework-switching bunch who are currently talking up <a href="https://astro.build/">Astro</a>) and those who don't, or cannot, for many, many different reasons.</p>
<p>Whilst I've not gotten around to trying Astro, or Svelte, or even GraphQL, I personally try to keep up with what's going on in the web. I like to learn about <a href="https://github.com/tc39/proposals">what's coming up in JavaScript</a> (hello <a href="https://github.com/tc39/proposal-temporal">Temporal API at Stage 3</a>) rather than the next framework, though you could say that I keep my ear to the ground on technology. So, how do I do it?</p>
<p>I would like to add that I consider myself as extremely "time poor" - with a lot on from my day job as the lead front-end engineer at a 100K+ person company, to two young children and attempting to exercise and run a household with my partner who also works a high-responsibility job in a large company. There's not a lot of free time in my life for just sitting and reading/writing. To demonstrate this, just have a look back other blog posts and see how many I writer per year. Can guess when my eldest was born?</p>
<h2 id="what's-the-secret-then%3F" tabindex="-1">What's the secret then?</h2>
<ul>
<li>Go to meetups</li>
<li>Curated lists of high quality feeds</li>
<li>Follow developer relations people on Twitter</li>
</ul>
<p>Sounds easy, right? I've been a professional software engineer for 15 years, and I spent the first 5 years immersed in the mid 00's tech culture of London. I went to, and helped to run, monthly events. I met the speakers, I sat and talked to them about (what I thought) were trivial little issues. But it turned out that I wasn't ever alone with these issues, and I got to understand how the web worked and how the web was made.</p>
<p>In going to these meetups, I found that I was basically hungry to know more. I liked to learn and understand what makes the web tick. The people who made the web became friends, and I learnt that I had also gone to university with some of them (though cannot remember them from then at all!). I found that through this and the connections that I made I could always ask these people that make the web a question, and most of the time I'd get an answer, or another link in the chain to the next person.</p>
<p>The problem is that in the lastt 2 years meetups have all but stopped. That in-person contact and connections are harder and harder to find. So, the next best place is Twitter.</p>
<p>Yeah, I know, Twitter isn't the paradise of tech enthusiasts that it once was, but hear me out. There's still a lot of great conversations that happen. There are ideas (admittedly, often very raw ideas) that can give you ideas about the next thing.</p>
<p>Importantly, it's also a news feed. You'll find blog posts, articles and videos shared by dev rel and by the accounts of a framework that you like. Say you want to learn more about CSS - follow <a href="https://twitter.com/csswizardry">Harry Roberts, (@CSSWizardry)</a> and <a href="https://twitter.com/css">CSS Tricks (@CSS)</a> and they'll give you lots of articles to read by a lot of authors.</p>
<p>Those feeds are great, but can be <em>a lot</em> of detail and even more noise. So, I genuinely find that RSS Feeds and an RSS reader such as Feedly are a great way to stay on top in a manageable way. These are just the articles that a site thinks are good to publish and don't havee any of the "what I had for breakfast" content.</p>
<p>The list of blogs and content that I read is varied, but it includes:</p>
<ul>
<li>Anandtech (for all hardware news)</li>
<li>Smashing Magazine</li>
<li>Etsy's Blog, Code as Craft</li>
<li>A List Apart</li>
<li>Engadget (for all other tech news)</li>
</ul>
<p>I've exported <a href="https://www.steveworkman.com/static/img/steve-workman-feeds.opml" download="">my list as an OPML</a> file that most RSS readers can read. I hope that this might help you learn too, or at least hear what I hear.</p>
<h2 id="in-summary" tabindex="-1">In summary</h2>
<p><strong>It's about developing a passion for learning</strong> and then finding the time to do it through curated feeds and dedicated time to learn.</p>
<p>If you want more advice, <a href="https://twitter.com/steveworkman">message me on Twitter, @steveworkman</a></p>