Pandalion and the Guardians of Tyr

July 25, 2015, 9:05 p.m. in Netrunner

Loot that I.. didn't exactly win ;)

Hello, blog. It's been a while. What have I been up to, you ask? Well, for the past six months or so, Fentonizer and I have been spending time training ourselves as elite cyber-hackers, breaking into the servers of mega-corporations - in the dystopian, cyber-punk world of Android Netrunner. Netrunner is a card game with an excellent theme and fun gameplay, with lots of room for creativity in terms of the identities you play and the decks you can build.

If you know me, you'll know videogames are my thang, and perhaps that I've never been hugely competitive. More somebody who likes to sit in their room alone slaying dragons, or hunting vaults, finding loot and discovering secrets of lost civilizations. So it surprised me that I might get into a card game to the point where I actually wanted to enter tournaments and play games with random REAL LIFE people! I've tried my hand at Magic the Gathering in the past, but by that I mean one or two games.. nothing has really hooked me in as much as Netrunner has. I collected Pokemon cards for the art, but never got the desire to play the game. Four months ago was the first time I attempted to build my own "deck" (set of ~45-49 cards) to play with, and since then it's surprised me that I haven't got tired of this game, and I've only got increasingly interested in the possibilities, nuances, and creativity that a new matchup or a new deck brings.

My partner and I must have played each other like fifty times - I knew his ice too well, and he knew I was terrible at bluffing that Aggressive Secretary to be an agenda. I started going along to the Oxford Netrunners night a few times, since I live nearby, and whilst I met some great people and had some fun matches there, it felt a little like I was starting too late for the meta. So, realising we wanted to expand our horizons and spread the word of Netrunner, Fentonizer and I started a group in Milton Keynes with some friends who also just got into the game. Starting at the same kind of point was nice, as we learnt together, even restricting our cards to Core Set for a few weeks to let people catch up with buying datapacks.

The meets had been going well, and Fentonizer and I continued to try out different match-ups on each other, and watch TeamworkCast videos at most available opportunities. I found that I enjoyed getting better, and learning how to win, or at least how to do well in different situations. I had a few of those times - like the times that Leigh Alexander excellently wrote about - where I wanted to stomp out the room or cry because I'd done something stupid, or I just hadn't quite understood what was going on and felt like "I can't do this. I'm not competitive." Every time that happened, I found myself wanting to run again, wanting to come back another day, try that match-up I did badly with, learn how to improve.

The thought of entering a tournament still made me nervous, but when a nearby local store announced a friendly debut store tournament happening, Fentonizer signed up, and I thought "what the hell, I want to play too." That tournament was the Northampton Wargames Workshop debut tournament, Guardians of Tyr, and we attended today, along with other pals from our MK group.

So I guess the whole reason I made this post was to do a little tournament report to look back on and record how the games went for me, but before I detail them below, I just want to say that I had such a fun day today. I am really glad I went and took part. I still don't really feel like a "competitive" person, but.. I just feel like Android Netrunner is such an amazing world to be a part of, such a fun game, and the players of it - that I have met to date - have been such friendly people. It feels like everybody is having fun, enjoying the game for the brilliant design and theme, and that people commend each other when they do well. I mean.. I was a little salty when I got double-scorched, but who isn't? ;) Mostly I found myself proud and humble for the games I did win, and admirable of those I lost against.

So, I want to say thank you to the Netrunner community for being awesome and welcoming, thanks to Daniel for running the tournament today, thanks again to Cerberus/Dave who let me choose his deckbox prize and keep it, along with the alternate art Plascrete.. :3 and of course, thanks to Fantasy Flight Games for making such a brilliantly designed game that I want to just keep on playing.

Guardians of Tyr - the pandalion games!

Round one

Game 1: Whizzard [Panda] vs. HB. Cybernetics Division [Ben]
Score: [2] [0] Whizzard

Boy, did my hand size go down quickly in this game. XD HB's ID meant we both had a 4-card hand size, and after Ben scored two Self-Destruct Chips, I was down to a 2-card hand size. Luckily, the Snare I hit happened before those agendas were scored. I lived to tell the tale, but it made me play incredibly carefully for the rest of the game. I didn't get much in the way of ice-breakers out, thanks to a combination of the snare losing me some and just not drawing much economy to set up the rest. But, Whizzard likes to be aggressive [pah, who needs breakers!], and when he found he could get into HQ, albeit by costly clicks through an Eli, he did so. Trying to draw up to four to not get Snared, but also have enough clicks to break the Eli when having to start every turn with 2 cards was.. tricky, to say the least. I was lucky when Ben seemed to get a bit poor, and only have 2 or 3 credits on a few turns, I could run without fear of a Snare. I got a Legwork in at a good moment, and Same Old Thing'ed it out again a little later, sniping at least 3 agendas from HQ.

I was really happy with how this game went. Getting my hand-size lowered so quickly and knowing there were at least one or two snares about after that was scary. I think I did the best I could, tried to be careful but took my opportunities, and they paid off for the Master Gamer :)

Game 2: Kit [Ben] vs. HB. Engineering the Future [Panda]
Score: [1] [0] Kit

My Enhanced Login Protocols were typically annoying in this game and I think I managed to tax Kit quite well. However Ben had some stealth breakers that made my usually scary Tollbooth not so bad to get through. In the end it was close, but as it often does, my HB deck felt a little slow, and Kit had the most points when we went to time. Money was great for me though, I had Adonis' tag-teaming in and out, and think I reached around 30 credits at one point. Kind of started wishing my whole deck was fast-advance, as the Biotics were great when I was seeing them.

Round two

Game 1: Whizzard [Panda] vs. Jinteki. Replicating Perfection [Jim]
Score: [2] [0] Whizzard

This was a very close game, as far as I remember. Whizzard loves RP because he loves to run a lot, and he uses Doppelganger so he can get into the remotes that bit easier. An Excalibur on R'n'D left him sad-faced. But he managed to bounce a successful run off Archives for a lot of the game and then get into assets and trash the Sundews, Jacksons and whatnot. RP's HQ must have had some kind of security breach at some point because it wasn't iced, and Whizzard ran and ran, trying to keep the corporation poor, whilst also stacking up a few Medium tokens running R'n'D also. Whizzard won in the end after some HQ sniping and a run with around 4 Medium accesses. Again, I was happy with how that game went, but I think Jim might be wishing he purged the Medium a little earlier!

Game 2: Quetzal [Jim] vs. HB. Engineering the Future [Panda]
Score: [2] [0] Quetzal

This was another close game with Jim. Again, I had ELPs and Adonis' for days, and start to mid-game I felt pretty strong. I had a lot of money, and built up a pretty good scoring server consisting of Tollbooth, Lotus Field, Ichi.. something else. I scored out of hand fairly early with Biotic, but by the time I was ready to score in my remote, Quetzal suddenly got her plan set up, with a Wyldside and Faust combo that really came together. Suddenly my massive scoring remote seemed much more penetrable, when Quetzal happily chucked away programs, resources and events, just to break through the ice. I think Jim had a good income set up too, with Daily Casts and whatnot, so I couldn't keep him poor. I did something I like to do every so often, and put a lowly PAD campaign in my big remote, only to see the runner's face when they have got all the way through four pieces of ice.. to see a PAD. That was worth it for the lols. XD It still wasn't enough though as his cards and economy seemed to recover to quickly, I couldn't score out the one more agenda that I needed before the time was up, and Quetzal walked (fausted?) away with the win.

Round three

Game 1: Quetzal [Dave/Cerberus] vs. HB. Engineering the Future [Panda]
Score: [2] [0] Quetzal

Oh man, this game. XD When Dave first sat down I was like.. "I'm sure I recognise you from YouTube. Are you famous?" I realised later he was.. a pretty high-class player, having come 8th in Worlds. WORLDS. Anyway.. I'm not making excuses, but I don't know what hit me. He had cute Pinkie Pie card sleeves as well! And a nice hat. And he wasn't a criminal. How bad could this be? And then.. the Account Siphon.. and the next Account Siphon.. and the next.. and the next... how.. HOOOOW.. but but you're Quetzal. Being Quetzal also meant that those nice cheap early barrier breakers were.. pretty useless. XD Each time Quetzal siphoned me, I struggled my way back up to 3 or 4 credits to try and protect HQ, until it was triple-iced, me with just enough credits to rez an Enigma. Dave trashed all my economy cards too - and I think some runners can underestimate how important it is to do that. Before I knew it, Dave had some kind of relentless rig out and was still Siphoning. Where did they all come from?? I don't know. I was barely paying enough attention as I frantically tried to keep HQ safe, drawing more agendas and having nowhere to score them. It started feeling so futile, I was almost ready to surrender, but I soldiered on. Finally, finally, Dave took the pressure away from HQ.. only to Clone Chip out 2 RnD interfaces (if I remember rightly), and make a last run on RnD to secure the win. I was.. sort of glad it was over. XD Luckily he was such a nice chap, I didn't feel too bad losing so horribly to him :D I'm not sure what I could have done differently here to be honest. Good deck, good player!

Game 2: Whizzard [Panda] vs. Jinteki. Replicating Perfection [Dave/Cerberus]
Score: [0] [2] Jinteki. RP

Whizzard put up a good fight in this game, I think. I can't remember it so well because I was still in a state of "wtf happened there" about the previous game. XD I got into HQ, and sometimes RnD. Mostly I saw giraffes. Giraffes all over the place! There was a psi game for a Future Perfect, which I lost and.. I think I managed to steal 1 Nisei before the game was out, maybe something else too, but it wasn't enough, and Jinteki took the win. I can't really think of anything I would have done differently here. Psi games are fun anyways. I definitely want to try a Jinteki deck again sometime soon.

Round four

Game 1: Whizzard [Panda] vs. Weyland. Blue Sun [Moody]
Score: [0] [2] Weyland. Blue Sun

I feel a little disappointed about this game, because I did a silly thing. I was on 5 points, Blue Sun hadn't managed to get anything massive like a Curtain Wall out.. I was getting in pretty consistently, and remembering to keep my hand size at 5, too. I KNEW Moody had Scorched, not only from him scorching me just a few days ago, but seeing it in HQ during this game also. And yet, FOR SOME REASON, when I had an "I've had worse" in my hand, I decide to play it and draw 3 cards. Whhhhy.. Why did I play it! D: I got sea sourced, and Whizzard the poor student gamer is never gonna plan to pay that trace off, so the double scorched happened. Had I kept hold of the IHW, and he'd grabbed it.. I should have still been alive. Well, shoulda woulda coulda, as I say to any player. I didn't, and that was my bad. If it wasn't a lesson enough Wednesday, then this hopefully was. All I can say is, at least the fact that I keep getting scorched is going to drill it into me to KEEP THAT I'VE HAD WORSE DEAR GOD.

Game 2: Andromeda [Moody] vs. HB. Engineering the Future [Panda]
Score: [2] [0] Andromeda

My last game of the day. The only benefit of being scorched on the previous game within the first 15 minutes, was that I had a bit longer to play my Corp game. I felt fairly confident about this one for quite a while. Stealth Andy took a while for Moody to get set up, and whilst I bioticed one agenda, and scored another, getting that last one or two out was just too slow for me again. Suddenly I had a big server and couldn't get something scored in it. May have played my "pad campaign in a massive scoring remote" trick again. Not sure.. anyway a last minute RnD run with some multi-access, and the runner stole the game. Good job, Moody. :)

As mentioned above, I was slightly disappointed after those four losses in a row, though looking back at them, my biggest mistake was losing the I've had worse. I was never confident that my corp deck would do as well as Whizzard, and though it managed to prove taxing for the runner, and very rich for me at times, it never quite managed to get the agendas scored to win before the runner trounced through all the ice. Hey, maybe *I* should consider a scorching deck... ;)

Oh and, as shown above, the Silhouette deck box, and beautiful alternative art Plascrete and Aesops softened the blow. :) Whilst I still don't think I'll make competitive Netrunning a day job, I definitely want to attend more tournaments in the future. :D Till then, jacking out!

Edit: I forgot to publish my decklists, so here they are. :)

Fronteers 2014 - part 2

Oct. 23, 2014, 8:41 p.m. in Web Design


Hello! Welcome to the second part of my blog posts about Fronteers 2014 - a front-end web development conference held in Amsterdam at the start of October.

My last entry focused on some of the user experience and user consideration talks that really resonated with me. For this entry I want to talk about some of the other cool stuff I learnt at Fronteers, with an emphasis on web animation, and I want to begin with one very awesome lady!

me and rachel nabors
Rachel and I in Rotterdam! I'm the slightly shorter nerd. XD

If there's anyone in the web development world I've always been a bit of a fangirl of, it's Rachel Nabors, an awesome lady who started her career as a comic book artist, before becoming a front-end web developer. I find it's somewhat more common these days to find front-end web developers who come from a programming led background, or are heavily interested in Javascript as their main "thing", but less common to find those of us who maybe come from more visual/designery/arty backgrounds. Even though there is so much new and awesome Javascript stuff (uhh, "stuff" is a technical term :P), MVC frameworks and whatnot these days, I still personally believe that there's a lot of room in front-end development for the more visual-led of us.

As doodling is one of my favourite hobbies, I love when I can find ways to incorporate art or cute character designs into web development. With my affinity to visual media on the web, I've always been a fan of the idea of CSS animation - not least because I love how lightweight, maintainable, and device-agnostic it is, but also because of how it's a lovely way to combine art and code, and a new way to provide more visual goodness to our websites and applications.

Anyway, I was super happy that as well as getting the chance to meet and hang out with Rachel during my Amsterdam trip, I also got to attend her CSS animation workshop, and hear her speak at Fronteers. As I say - I have always been a fan of CSS animation, and this little codepen - Mr. CSS lion - is so far one of the few things I've played around with that combines my drawing style with CSS (worth mentioning because Rachel's work heavily inspired this!).

That was a while ago, and there haven't been too many animation challenges for me at work recently, even though we do get the opportunity when working on interactive ipad edetails to use animation to liven up an otherwise static presentation. Rachel's talk reignited my hope that some more of those challenges come along in the future! These are a couple of my favourite things that she talked about to help us with CSS animation:

  • Steps! - Even though I've done CSS animation quite a bit, I didn't know about these for some reason. Steps are a cool way to split up stages of an animation without having to add loads of extra points to your keyframes. One super cool use for this, is if you have a sprite of various images that may make up an animation (eg a walking animation or maybe a logo animation or whatnot), you can use steps to tell the animation how many states to have without manually setting all of those states. Say you have 5 sprite images in a file, you could set the starting background position, and the end background position and tell the animation via steps, how many in between states there are. Rachel demonstrates this better than I can explain here. But anyway, I wasn't aware of this previously and would have previously added more percentage values for different states, so this seems like a really handy way to handle certain animations, especially if you want to animate sprites.
  • animationend - and other handy javascript events that get fired through CSS animation (there is also animationstart and animationiteration). These events give us a nice way to control and also link our CSS animations to each other, for example firing one when another has finished. We could also trigger the animationstart event when hovering over a logo for example. One of my main issues with CSS animation in the past has been controlling a large number of them and keeping them maintainable and not too dependant on every other part of the animation. I've often tended to string delays together (for example the first part starts at 0.5s, the second animation starts at 1.5s), but this means that making changes somewhere in the middle of the chain can really confuse things. I like the idea of combining these animation events, along with some simple jQuery, perhaps manipulating classes too, to make animations more modular and able to be amended at different points more easily.

Anyway, my attempt to explain the coolness of CSS animation in text may not make a huge amount of sense, but make sure to check out some of Rachel's codepens for more examples - this walking cat one combines steps and animation events and is a simple but cool example of some of the possibilities we have with CSS animation now.

Is this useful for my client?

Obviously animating drawings is cool and fun, but does CSS animation have a place in our day-to-day jobs and client work in various industries? I think it absolutely does, and Rachel actually drew a lot of attention to the benefits of CSS animation when it comes to improving how users interact with our interfaces. I liked this quote below that she included, alongside an example of a typical dropdown menu, and how the shift in states, whilst obvious to some of us (the younger or more tech-savvy), it can be harder for other users to make that connection, and small animations and transitions can really help with that.

“By offloading interpretation of changes to the perceptual system, animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chance that the user is surprised.” E. Hudson and John T. Stasko (1993)

I know that Rachel sees the web as much more than static documents - as a canvas with so many possibilities! I think CSS animation and transitions can be used subtly to bring static things to life, or can be used to guide our users around certain bits of our interface and help them see what's going on. And even if some of our users are on old versions of Internet Explorer - we can make these animations more of an enhancement for the users with modern browsers, and degrade gracefully for others.

Rachel rightfully pointed out that CSS animation and transitions shouldn't be something we attempt to tack on at the end of a project, as an afterthought, but rather that we should think about how we design our sites with these possibilities in mind. I definitely would like to see interaction design making more use of CSS animation because I think it gives us some great new options for interface design.

The Google Material Design documentation has some great responsive interaction examples of how animation can help our users.

SMIL-e... more animation! :)

Going nicely hand in hand with Rachel's workshop and talk, Sara Soueidan gave a wonderfully information-packed talk on animating SVGs using CSS and SMIL (Synchronized Multimedia Integration Language if you want to know!). SVG animation gives us a few extra nice options for more advanced animation with SVG shapes, for example if we want to animate more advanced graphics, have them scalable and still be able to use CSS on them. One thing that's cool alone is that:

"Basically, any transformation or transition animation that can be applied to an HTML element can also be applied to an SVG element." Sara Soueidan

But not only that, SVG animation gives us even more options than CSS animation in some cases! Using the <animate> element within an SVG, we can tell it things like how to animate, and even how to start animating (e.g. "begin = click"). I especially like that you can do things like "begin=click + 1s" to start an animation a certain time after an element is clicked.

Another really nice thing is that you can chain animations by doing things like setting one element to start animating a certain amount of time after another has started (or stopped). SMIL has many more properties that let us do some really cool animation functions without much code, and I think the possibilities for these on scalable graphics is awesome. Animations along SVG paths are another cool thing. There are so many cool things to know about these, and Sara is an incredible font of knowledge, which her talk showed! I recommend reading her guide on CSS Tricks to learn more, and there are some great examples in her fronteers slides also.

As for support, SMIL is widely supported - well... with the exception of all Internet Explorer browsers. :P But since we could use modernizr to check for SMIL support and provide fallbacks, or have this as an enhancement for all the other browsers that DO support it, it still seems like a pretty good time to think about trying some of this stuff out!

Infrastructure FTW

I realise I've written quite a lot about animation alone.. you can probably tell that it's one of my favourite areas of front-end development! I'm going to more briefly mention the other talks purely because this entry could go on forever.. (you can have a cookie if you're still reading :)

Daniel Espeset talked about the role of frontend infrastructure at Etsy, with a focus on the importance of having continuous deployment and letting "anybody touch anything", which I liked. At Incuna we generally have front-end as well as back-end developers being able to deploy sites to staging after they've worked on them and it's super useful I think to have all developers being able to do that. Daniel talked about tools like "Ranger" and "Builda" that Etsy built themselves for tracking deploys and code, and also discussed how the team had moved to using Scss for more maintainable CSS. At Incuna we use Sass and I would never go back now - the usefulness of CSS preprocessors such as these is amazing. Read Daniel's slides.

Nicolas Gallagher from Twitter gave a somewhat similar talk, about Twitter UI infrastructure. I liked that his talk focused on making the infrastructure as reusable as possible, allowing people to "spend time on creative things" instead of having to spend a lot of time on infrastructure everytime they work on a new project. This is something we've worked on a lot in the past couple of years at Incuna (and I have to give Perry Roper a mention for initiating a lot of those changes such as incuna-sass). We factored all of the CSS that we kept reusing in projects into our own Sass component library so that we can use it on projects every time and not spend time rewriting things. It's super useful!

Some of the other advice I found useful from Nicolas:

  • Have a shared language between design and engineering teams.
    I think this is something we can get better at!
  • Design for adaptability, not perfection.
    Use components to help people work on different parts of a larger app without effecting others.
  • Consistency is the best option.
    Make it so that anybody in a team can pick something up and work on it.
  • Make skilful use of what is at hand.
  • Documentation and ownership over institutional knowledge.
  • Hide complexity of infrastructure from developers
    and allow the infrastructure code to be changeable without effecting the dev's existing work. (This is another thing we're doing quite successfully with an edetail library that we use as a base for interactive ipad edetails)
  • Create habits among engineering teams

A round up of the rest

Dave Olsen gave a great talk on optimising web performance. He pointed out some of the perils of responsive web design that only considers layout - where we end up downloading too many elements on mobile by over-using "display: none". He recommended some useful tools, such as:

and of course if you're not already using chrome dev tools, the network and timeline are always super useful!

I also like that Dave Olsen discussed how you would get performance measuring into a client's budget or into your project workflow. He recommended having a "performance budget" and aiming to beat a baseline - for example, decide that your page speed score will be 25 percent lower than your nearest competitor. I think this was an interesting way to try and justify why it's worth spending time on webpage performance and also have something to aim for rather than a hard to measure goal like "make it perform better".

Fronteers featured some cool mini sessions on gaming in the browser. Being a massive videogame fan I always think I should try and make a game and never get round to it. Phaser sounds like a very interesting framework for HTML5 games.. if i can ever get round to stop playing them to make one! ;)

Forgive me if I've not mentioned all of the Fronteers speakers in my blogs, I've focused on those that are most relatable to my personal interests and role in front-end development. There were some talks on WebRTC, but they were a bit more technical and went over my head a little. XD (or was it that big lunch...? ^_^) I'm sure they were very useful for some other attendees! Anyway, here are all the slides from the conference if you would like to catch up more on anything I've mentioned or some of the other talks!

Collection of Fronteers slides

All in all, Fronteers was a wonderful conference to attend (not least because I love the city of Amsterdam!) - it reignited my enthusiasm for CSS animation (and grew it for SVGs!), it reminded me that Incuna are on a pretty good track with our increasingly modular and consistent codebase, and it also made me see the areas we can improve on when it comes to user needs and really merging our design and front-end practises more which is something I really hope we might be able to do more in future.

A more fluid, dynamic web

I've written before about how closely I see the link between web design and development, and how the canvas should be the browser, and I think it's true more than ever these days. With the different devices we are working with, and the animation and interface possibilities - the pure fluidity and changeability of the web, design isn't the static thing it may have once been. Some of us still have fairly waterfall processes in our companies, but I really hope we can all try and combine our design and front-end development processes much more closely because I really think that we are working towards the same important goal - what the user sees, uses, and interacts with, and making that a more useful, easy, and pleasurable experience.

Thanks for reading! :)

Fronteers 2014 - part 1

Oct. 14, 2014, 9:17 p.m. in Web Design


Last week I attended Fronteers 2014, one of Europe's largest front-end web development conferences, in Amsterdam. It is the third web conference I have ever attended and my first time attending Fronteers, and it was a great experience!

Before I talk about what I got out of the conference, I just want to say that I was really impressed with the organisation of Fronteers, the atmosphere, and approachability of the staff in particular. I was pleased to read and hear that they had a code of conduct, and thought the way that the staff drew attention to it, and were always on hand to talk to at any time during the event, made it feel like a safe and inclusive environment, which is super important! :)

This is going to be a two-part blog entry, focusing on the main learnings I took from the conference. For the second part, I'll talk about some of the more technical talks (including CSS animation and game making, yay!) but for this first part, I'm going to focus on one the over-arching messages from the conference, which I think one of the speakers, Petro Salema, summed up best:

"The goal of technical innovation is user experience" Petro Salema - #fronteers14

Web development has really come on in recent years, and being a front-end developer these days encompasses a lot more than it used to. From designing layouts, creating html, adding a bit of Javascript, and uploading our code via FTP, these days front-end development involves much more. Knowing version control such as git, CSS frameworks like Sass, as well as all manner of Javascript frameworks and libraries for all sorts of things that they web gives us power to do. New libraries are cropping up all the time, and technically - we're doing great! We're in a more knowledgable, powerful place than ever with all manner of tools to help us out. But in this transition, in this "best practise" focused environment that we're currently in, have we forgotten some of the basics of the days when we called ourselves "web designers", and coding was a smaller part of what we did?

Heydon Pickering kicked off Fronteers with a talk that discussed just this, questioning how much our obsession with "best practise" is actually relevant to the user, and whether it improves the product as a whole, or how much of it we are doing to maintain our own developer standards - are we sometimes obsessing over the wrong things for the wrong reasons?

"A front-end developer asks 'How should I do this?'. A designer asks 'Should I do this?'" Heydon Pickering - #fronteers14

So often we focus on "best practises", but UX - "user experience" - is still an afterthought. UX is the kind of thing we want to pay somebody to come in afterwards and check, or that we think about at the end. Maybe we see it as a separate role.

Heydon's message was one I feel strongly about myself - that as developers, we all need to start thinking more in terms of design. About why we're doing things, if we should be doing them, and realising that user experience should fall into our role as much as knowing technologies should. It's great to be striving for good code practises, but maybe we should be striving to get a user experience focus higher on our radar again.

Heydon's slides - "Getting nowhere with CSS best practices"

"We are all web designers because
we are all contributing" Somebody at #fronteers14.. sorry, my notes failed me

Design products for less than perfect situations

This was another strong message coming from the conference, which goes hand in hand with a larger consideration of user experience. Alex Feyerke's talk, Offline first drew attention to just how many apps are treating offline as an error, rather than the default state being that the user may have no (or no decent) connection. He talked about how his library Hoodie treats offline as a default and strives to ensure that a user can get to their data when they need it, and not just when they happened to have a connection. Personally I have experience of both being annoyed that I can't use an app offline, and also developing an app where we think "oh yeah, we should put in an error if the user has no connection", so it was useful to shift our thinking back to a user's default state being less than perfect.

Alex's slides - "Offline first"

Walk in somebody else's shoes

" stopped asking what departments want to say, and instead asked what citizens want to know." Meri Williams - #fronteers14

Meri Williams talked about the importance of accessibility and how we need to try and "bake it in" to our workflow, so that it doesn't get forgotten. We may often think that somebody with a disability or accessibility challenges is a minority, but just by talking to your family or somebody you know, we can find out that the use case for our product goes way beyond us, in our offices with our large mac screens and fast connections. It was interesting to be reminded that around 8% of users have difficulty lifting or grasping a mouse for example, a percentage that is almost equal to or higher than some of the percentages we try and include when we schedule in Internet Explorer development. Too often accessibility is an afterthought, or an "extra cost" but Meri rightly pointed out how vital it is to start considering how different people in different situations are using our products and how integral this should be to our process.

Meri's slides - "Baking in accessibility"

"We need to find a way to walk in somebody else's shoes, & see what's different for them." Meri Williams - #fronteers14

Know your accessibility bias

To finish off this first part, I'll return to Petro Salema, whose quote I used earlier. His closing talk "Dream big, think small" on day 2 of Fronteers, opened in a rather harrowing, post-apocalyptic way. He told us a story of planes returning from war, with bullet holes in the wings. The engineers would take that to mean that those parts of the plane needed more work on protecting them from the bullets, and would focus on fixing that area of the plane. What they failed to realise, and what one person eventually realised, is that the opposite was actually true. The planes that returned could withhold the bullets, and so they came back - the ones that couldn't, never came back.

" You can't get a better answer than the question you can ask, limited by your experience" Petro Salema - #fronteers14

Petro's tale, and the rest of his talk, was an eye-opener on how much our own "accessiblity bias" dictates the questions we ask, and the problems we solve. We want to think big, and solve big problems, but we need to remember to "think small", to not simply design ideal solutions to ideal problems, but to increasingly consider the smaller things that take place, the things users may be doing that we haven't even thought about - simply because of our own bias. As he discussed - we can't help our experiences, and we can't help that they naturally effect the questions we ask and answers we come up with, but it shows the need, ever more, to try and find the smaller questions, so we don't miss out on solving the smaller problems that we're not even looking at.

Panda thoughts

I think that, as resonating as these talks were, and as important as the messages were, it's often going to be a challenge in a commercial client world to get some of these considerations to the forefront. Many of us still work in "waterfall" type processes, and don't always have access or resources to get as much user feedback as we would like. Following the conference, I returned to work, feeling like it was wrong that we're all developing in Chrome, seeing our websites 90% of the time in their "best case scenario". However, I then tried to do some development in an Internet Explorer virtual machine again and.. I remembered why we don't develop there by default. XD Even so, I really do think it's time to get user experience back into the limelight again, as much as coding practises are to front-end developers, and find ways to put ourselves in other situations more when we're using the products we develop. I think UX is the responsibility of everybody, and it's going to take some thinking to see how we can get this into our workflow. Thoughts, or comments, or anything I have got incorrect above, appreciated. :)

Part two, where I will talk about some exciting web animation stuff, and some bits and pieces from the other talks at Fronteers, coming soon!

176 doodles and the importance of joy

Aug. 17, 2014, 11:38 a.m. in Art

It's a joke about pencils... Never mind.

When January arrives it's always time for New Year's resolutions - you know, those ones about quitting chocolate or taking up running that you realise a week later were not really a fun idea at all. I often hear people say things like: "Oh I don't make new year's resolutions because people just break them" or "I could do that anytime of year, January is a bad excuse!". Whilst I agree that if you want to do something, you should just start anytime, sometimes we need to help ourselves with a bit of a motivational kick and January - being a nice clean start to a new year, or at least feeling like one (even if it's technically just another day) can help.

I've seen "365" projects a few times before, sometimes photography, sometimes drawings, where you set yourself the challenge to create a little something on every day of the year. I generally don't like to dictate when or what I draw, as I find that never works out, maybe because I find it difficult to draw on demand and I just have to be in the right mood for creative pursuits. The typical pandalion thrives when enjoying a varied lifestyle with multiple hobbies, flitting between coding, doodling, and other creative or geeky pursuits, as well as playing far too many different videogames and not finishing many of them. I've always felt both in my personal and professional life, that I've never been quite content or good at focusing on just one "skill tree". There's just so many different fun things to do in the world! However sometimes the fact that there's so much I want to do and never enough time for it all, means that stuff I would like to do more of can fall by the wayside, purely from there not being enough hours in the day.

So, I decided to start a 365 doodles project in January of this year, with the aim of doodling something - anything - every day of the year. My hope was that I would motivate myself to exercise that drawing muscle more, giving myself smaller goals that would be easier to meet (it doesn't have to be a masterpiece! Just get something on paper). The main reason being that creating and putting something out into the world, as well as observing, consuming and passively taking things in, always feels like a great thing, regardless of what you create. Perfectionism is one of my most annoying traits and actually holds me back from creating things sometimes because of the fear that it might not be that good anyway, so again, this felt like a way to draw but say "hey, it doesn't have to be great."

If I'm not trying to catch them all, I'm trying to draw them all

I love videogames (what do you mean you didn't realise?? ;), and as a 29 year old woman, when I talk about this, I still often get reactions like "videogames are a waste of time", "I'm too busy for games now I'm older", "I create things these days, I can't just sit and play games". As I've said above, putting things out into the world is great, no matter how small that thing is, but I think it's missing the point if you don't appreciate the merit of enjoying the things that have already been created.

I've already written in some detail about how videogames are a fantastic blend of the creations of artists, artists in all kinds of fields - visuals, programming, storytelling, and music to name just a few. I really believe that inspiration is the beginning of all creativity. If you haven't experienced things that you enjoy, that have invoked emotion in you, how can you hope to invoke the same feeling in others through the things you create?

Sonic - inspiring me since 1991
Doodle for @nicollhunt, creator of awesome indie game We Fight Bears

I don't have any technical training in drawing, and I don't see myself as a "serious artist", because for me it's really just something that comes from my heart. Everything I draw just comes from a picture in my mind that I think could be pretty cute, how it looks is some combination of the things that have inspired me over the years, the things I've seen and thought "ahhh that's adorable".

During my personal challenge to doodle daily, if I hadn't been doing much outside of doodling, if I hadn't experienced something recently that had brought me joy, it would be much more difficult for me to know what to draw, and I certainly had those days. But other days, I will have just been to see a superhero movie, or just played Borderlands for several hours and I would want to get those experiences on paper in my own little way.

If I ever stopped playing Borderlands 2, I had to carry it on in my doodles
One of my favourites of a foxy Black Widow, drawn after seeing Winter Soldier.

I didn't get to doodle #365. I got to #176, and then stopped. I had a lot going on with work and moving house, but those weren't really the reasons, I guess I just wasn't enjoying it anymore, and it was feeling too forced. I felt like I was ready to stop, and wanted to go back to it not being a "chore", but picking up a pencil at random moments when I felt like it. And I'm glad I stopped when I felt like that too. It's part of the reason for me making this blog post - to explain the personal benefits of giving myself the project but also that not "meeting the goal" doesn't feel like a failure to me.

176 drawings is way more than I would have created had I not done this project. I feel like I exercised my "drawing muscle" and I helped myself create time in the day to not leave my hobby behind despite the other busy goings-on and responsibilities of life. I experimented over that time, tried different styles for drawing people, tried different characters or animals I had maybe not drawn before. I tried slightly different paper or techniques, I found what I liked or didn't like.

I don't really blend markers much so this was a kind of attempt at that
Trying out a "no lines" style

After that many drawings, I still don't feel like I "know" what I'm doing. I still feel like art comes to me on a whim, when I wake up on a Sunday morning with a picture of something cute in my mind and want to get it on paper. But, after I stopped drawing daily, I noticed that ideas would come to me, ways of drawing things would appear in my mind - inspiration from games or people or characters or situations - and my drawing muscle felt on better form.

Achievement unlocked?

So, what was the goal of 365 doodles? Obviously three hundred and sixty-five doodles, on one hand. But reaching that number for the very sake of it, I believe would have stopped me making some of what I think are "better" pieces later on, through letting that muscle have a rest. Though it helped and was nice to have friends watching my progress and cheering me on, the project was for my personal benefit - and do I feel like I've benefited? Yes, hugely. I'm happy that the project helped me devote time to this hobby, to try a lot of different little things and break out of my comfort zone a bit.

I'm happy that it resulted in being able to make a lot of my friends happy too, with doodles of their pets, favourite characters, or anthropomorphised versions of themselves. And when something like this happens - a photo of my friends beloved cats, which I turned to doodle form, and somebody else turned to a sculpture.. that for me just sums up how the joy of the things we love is the very thing that can spark inspiration, that carries on over different mediums, different people, and even generations.

My friend @EmzvasNormandy's beautiful cats
My drawing of Emma's cats, and the sculpture she had it turned into
Pokemon "art cards" drawn a few weeks after I finished my project

So, to summarise - I didn't reach 365 doodles. But I don't feel like I've failed either. I got so much out of this personal project and to have been able to see others get some joy out of it too, that was awesome. Creation should be about enjoyment, as much as playing games or anything else we do should be, and it shouldn't be a chore.

So go forth, play games, read books, listen to music, watch shows, do whatever the heck brings you joy, and I'm pretty sure that joy might make you want to spread more of it in your own little way :)

Incuna at jQuery UK 2013 - part 2

April 23, 2013, 1:15 p.m. in Web Design

White October cupcake
Amazing cupcakes from White October

This continues on from my first post - Incuna at jQuery UK 2013 - part 1, I wanted to finish up discussing a few of the other talks from the day and what I took away from them. :)

Following on from where I left off, the final talk before lunch was Douglas Neiner talking about Machina.js, a framework for Finite State Machines in Javascript. I’ll be honest, I’d never heard of a “Finite State Machine” before, so at first I was worried it was going to be something over my head. But not at all, and this was one of my favourite talks because of the clear and concise way it was presented. The basic idea was that Machina.js provides a cleaner way to deal with situations where your code may otherwise end up with a nest of if/else statements. I’m quite a visual person, and I think I find it easier to understand certain bits of code or concepts if I can see how they would be applied to a real situation. So, I definitely felt engaged in the talk when Doug provided some interesting, visual, real-world demos, the main example being a router. As well as being a great, simple example of what Machina.js was actually doing and how it can help you manage those different states, it was also a great example of some lovely CSS transitions/animations and attractive front-end work (something I’m a big fan of :) I’m not sure of any exact situations we may want to use this right now at Incuna, but it’s definitely something I’ll remember thanks to the excellent talk and demo.

After lunch (which included the delicious cupcake above!), Garann Means gave a talk on using events to glue full-stack frameworks together. Unfortunately I didn’t have a good view for this talk and couldn’t see the code examples very well and the rest went over my head a little :( Following her talk, my Incunauts and I did take a look at Marionette, the library she was using for Backbone, as we use Backbone in our projects at Incuna. So I’m interested to learn about that a bit more, also because the website is so pretty.. (there I go with the visual stuff again! :)

The next talk was Ilya Grigorik and was entitled “Wait, Chrome Devtools can do that?”. This was probably the most useful of the talks for me in terms of concrete information that I knew I could go away and look into, and hopefully use to improve some of our workflow processes and testing/debugging. The main thing to take from the talk is download Chrome Canary now! I hadn’t realised how far ahead Chrome Canary was in terms of the devtools, so that was useful to know. He also talked about some really useful and interesting features such as:

  • Better use of the timeline, including saving timeline traces as HAR files so others can recreate it, to see where something is loading slowly for example.
  • How frames per second apply to webpages as well as games, and how slow paints or costly CSS effects can affect this and cause (as Chrome puts it) “jank”, and how you can use the devtools to diagnose this.
  • How if you change CSS in devtools, Canary can actually give you a diff of your changes (yay)
  • How you can add custom panels to Devtools, the ones that sounded particularly interesting of these were jQuery Debugger and PageSpeed Insights. One of the coolest things mentioned about PageSpeed Insights was that it would suggest compressing an image for further reduction and at the same time offer you a download of that image at the reduced size! Oooh..

Finally, it was very useful to hear that Canary has remote debugging, for Android at least, with the ability to use all the same DevTools features whilst debugging on the device. Remote debugging is something we sometimes still have issues with at Incuna, so anything we can do to improve this process is great. There was a lot more useful information, you can read it in Ilya’s slides, there’s also a super useful Chrome Devtools course on Code School and it was interesting to hear about a weekly Chrome Youtube show The Breakpoint.

After Ilya, John Bender gave a talk about faster DOM manipulation with category theory, and he had some great slides, but it was admittedly a little maths-heavy for me. So, uh, moving on..!

I enjoyed the final two talks - it was interesting to hear Joe Petterson talking about his experience of still having to develop for older versions of IE, also as it the talk was around a pharmaceutical site, similar to the things we work on at Incuna. He gave some good thoughts on using IE VMs for testing (which we currently do), but also how you might use Selenium or an external service like Saucelabs to be able to test accurately on the VMs. Front-end testing is still something we need to do more of and look into more at Incuna, so this felt pretty relevant to recent work conversations.

Finally Jason Scott from Blackberry talked about building “an experience, not just another framework”. I was interested to hear a talk from this perspective, as ultimately, the reason we’re all writing jQuery, and the end point of all of our sites and apps is the user. He talked about using jQuery Mobile and customising the theme for your user. This was quite familiar to me, having used jQuery Mobile a few times at Incuna when working on Phonegap mobile applications, and I found myself agreeing when he pointed out how it doesn’t make sense to try and replicate all native functionality with things that just don’t work as well in a webview - for example transitions that require a a heavy amount of rendering. He also mentioned Grunt JS as a build tool for minifying and uglifying files. We have scripts for doing this on our projects at Incuna but it still sounds like it could be a useful thing to look into.

Overall, it was a great day with a really interesting range of content and it was nice to meet some new people in the jQuery community. It definitely left me feeling inspired. Yay!