Refresh Oxford Hack Day 2012

Yesterday I attended the Refresh Oxford Hack Day held by Incuna in Oxford - and I am really glad I went!

I was kinda nervous because I haven't been to a public hack day before. We had one at work last year, but just an internal one, so whilst that was fun it was pretty much just working with people you worked with everyday. (A hack day, for anyone who may not know, is a day where designers and developers get together and work on "hacks", which could be little ideas for programs or extensions of existing code, useful apps, or just playing with technology in new and different ways.)

I've never been very forthcoming at going to events and meetups, even though I'd like to, I used to be really shy and sorta scared of meeting and talking to new people. :x However in the past year or so there have been times I've been nervous and gone ahead and done something anyway, then realised there was nothing to be nervous about - and that I got so much out of something, that I wouldn't have got if I'd just stayed at home. And yesterday was definately one of those times. :)

We kicked off about 10.30am where we all got name badges and had some hot drinks before discussing some project ideas. I was excited that I got the chance to team up with a couple of people who were into videogames and specifically RPGs, and we decided to experiment with the HTML5 canvas to make a simple browser based game. I actually experimented with canvas a bit at my company hackday, but focusing on the customising and saving your own images side of it. A game seemed more complicated and it was awesome to get the chance to collaborate with people who had some game programming experience and interest :D After a fusing of mutual interests and ideas, we decided to create a cat-based RPG, or as Jason (one of our team members) described it "An RPG, but with more cats". The name I came up with for this was "RPurrrG" (I know, I should totally go on the apprentice, right? Haha).

Jason, Ash, Perry and I get to coding and drawing RPurrG - photo belongs to Incuna

I was pretty much up for/in the mood for doing design or front end bits depending on what would be useful to the team on the day. Since a game needs graphics and on a whim I'd decided to take along my Wacom tablet, I decided to focus on drawing the background and character graphics as well as doing some quick logo & interface design. We were lucky to have Perry from Incuna in our team to build the front-end so I enjoyed the process of giving him my initial sketches and then PSD for him to make into some lovely solid front-end code :) Also, I'd never really drawn animals for any real purpose before so it seemed a fun chance to do my hobby and for it to be useful :D

I think the thing we were all most excited about (probably coming from a fondness of retro videogames) was making the parallax scrolling background, particularly on the canvas, and it was great to see people making that work with graphics I'd made. Also, it's kinda dumb but I almost always draw animals from the front, so having to draw a side on cat character that also looked somewhat like he was walking, was a fun challenge. (I only just noticed I forgot to erase some buttons on the second frame - OH WELL XD)

The main character (or one of the classes you could choose) ended up being a pirate, and ultimately ended up being called Catbrush Purrwood, blatantly heavily inspired by my love of Monkey Island ;)

Drawing cats and creating an interface!

As you can see the traditional magic user character choice was going to be based on Rincewind from the Discworld books, and there was going to be a third character called Robin Cat, the archer variation, based on Robin Hood, but I sorta ran out of time to draw him. XD The long term plan was that you'd get the usual variety of stats and that would make you stronger or weaker against certain characters, maybe in a simple Talisman way of fighters being a bit rubbish against magic based creatures, and so on. We didn't get chance to get all of this working, but maybe we'll carry on with it in future! (if the others aren't totally sick of cats by now.. haha).

Another great thing about the day - we ate soo much good food. Burritos for lunch, pizza for dinner, chocolate covered strawberries and fortune cookies in between. Geek fuel! :D

By the time we demoed the game, although there were lots of ideas and things left to do, indeed in terms of making it into a playable game, I think we achieved some great stuff in the time. Jason and Ash did a wonderful job on the parallax background and making the cat walk and jump :) 

It's traditional for the first level of any game to be blue sky and green fields, right? :D

Although I didn't do any coding on this project, I plan to have a better look at the code everyone did and understand how it's working, so it felt like a great chance for me to learn from more experienced coders than myself too :) 

As well as demoing our project it was great to see the projects others had been working on during the day. Some guys worked on a TLDW extension for Chrome, so that if you thought a youtube video for example was too long and just wanted to get the gist of the info, you could click this button to access a transcript of it. Another idea was around kinetic typography and being able to type in words and animate them with Javascript related to what sort of words they were. Another cool thing was the idea of using all the old versions of the Oxford English Dictionary and as well as accessing them online, being able to discuss and share words, such as having a "dead word of the day". Being rather into language stuff myself, I would love to see this site for real!!

All in all it was a great day, I feel like I met lots of talented people and made some new friends, and also collaborating with new people was something I've never really done before - and now I really want to do more of! I'm going to make sure to go to as many events and meetups as I can in future because it's great to be around people who share my love of making nice and useful things for the web. (perhaps more of the nice and less of the useful when it comes to RPurrG.. ;)

Check out RPurrG so far..

You can try the game so far here - http://refreshoxford.co.uk/RPurrG/ (click a cat, enter your name, and go). You can pretty much only walk and jump (with spacebar) so far but.. hey! We're very proud :) And I just pretty much love all the cool stuff you can do with canvas. ^^

If you're interested you can also view the RPurrG code on Github here - https://github.com/refreshoxford/RPurrG

And lastly thanks Incuna for the fantastic day and food, and thank you Ash, Jason and Perry for making RPurrG possible!

A friday afternoon with HTML5, Sass and jQuery

A peek at my Friday afternoon mini-project

Sometimes I like when I get a really small project to do, so that I can focus on using it to try out a few new things, or doing things I do now a little bit better.

We're currently working on a site refresh at my company, rolling out some new styles on the website. One thing I think is always super useful to have is a style guide, for your brand generally of course, but also for the "web assets" side of it. This might include things like the main colours (hex codes) and when they are used on the site, text styles, heading styles, button styles etc. It serves not just as a good reminder and document of the new colours/styles but also something so that if anyone new is working on the site, they have something to refer to.

As someone who tends to straddle the design/development fence, I think this is useful for people working on both aspects of the site. Our new brand style/colours are currently in the form of some PSDs from a designer, but that's not particularly clear on it's own of how to carry that style across other pages of the site. Our site has been pretty inconsistent in the past because of a result of people (including myself when I worked on the design side), designing "new pages" for the site and not basing this on using existing elements. Years worth of massive CSS files worked on by many multiple developers also mean that our CSS isn't in the best state and using this for base styles is pretty impossible right now - there's never really been strict consistency.

And that consistency is something I want to get better at retaining from a CSS and page design point of view, particularly as we clean up a lot of the pages on our site and bring them into the new style.

Everything's better with html

During my Graphic Designer days, I generally created style guide PDFs for sites or mini-sites I designed on using Photoshop or InDesign, but this time I thought, surely the best medium for a web style guide, is a html document? ;)

I decided it would also be another great chance to practice some Sass and get back to playing with some jQuery. I've not had to do any jQuery at work in the past couple of months and I really need to keep doing it regularly so I don't get rusty! It seemed like a useful little Friday afternoon project.

I started with a nice, semantic html document, using some of the new HTML5 tags. I'm still getting used to the best times to use each HTML5 tag. I currently have this format:

I would call it Yaytch-tml personally..

Looking at it now, I'm not sure <article> is the right tag. I was going to have "Colours" as an article, "Font Styles", "Button Styles" as an article, etc. So, the definition of the article tag is, a piece of content that would make sense if you took it out of this document and placed it somewhere else. If that is the case, I think the entire document is more of the article, because if you don't know what the "colours" refer to, does it still make sense?

First of all I thought maybe a <section> tag would make more sense for each type of element group on the site. But then I wanted to split them into sections, for each colour as you can see.

Anyway, I'm not sure! I think when I've done more of the guide, it might make sense to me which tags to use. Or I should probably go back and read the specs more ;) I find that often articles or books explaining how to use HTML5 tags use a blog as an example, and that's fairly easy to understand how a blog post would be an article, and so on, but I think when working with other types of webpage it can still be a bit fuzzy.

I also just started using the "role" attribute, after reading about it in Dan Cederholm's "Bulletproof Web Design" book, and also reading an article by Jeremy Keith about it. As Jeremy said, when using multiple headers/sections in a document, we still need unique styling hooks for those, and ID doesn't really feel quite right. Role on the other hand, has semantic meaning, is good for accessibility, and generally feels much better! It's saying that the role of this particular section is to describe the colours - and well, that makes sense to me :)

Sexy awesome stylesheets

So, back to Sass. If you haven't heard of it, Sass stands for "syntactically awesome stylesheets" (not sexy awesome stylesheets, though I quite like my version..) and is in their own words:

"...a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets."

I'd been hearing of it through a few colleagues and acquaintances lately and finally got round to trying it out. At first I was unsure because I was worried of sort of "giving up control" of how my CSS is written and letting something generate code because y'know, frontpage express and dreamweaver.. ;)

But I've found that it's really not giving up control at all. I read somewhere (maybe today actually), that you should be writing Sass in the way you want your CSS to be generated. I think that's very true, and it's not too hard to understand what Sass is doing. I found today that just having my Sass file and the generated css file side by side in my text editor, I could easily keep flicking between them and looking at how Sass outputs things.

And when you start writing it, it's really nice, and very familiar if you've ever used things like variables in programming languages such as Javascript. Being able to use variables in CSS is pretty awesome. And it seemed particularly suitable for something like this style guide because the colours and fonts are the sort of consistent variables we want to have control over. You can read more and start using Sass at http://sass-lang.com.

Here's an example of some of the variables I created with Sass, in order to define these styles.

How very sassy

I can then refer to these anywhere in the CSS, but know that they're always in that useful place at the top of my file if we decide to change that site-wide colour, or decide not to have headings in uppercase anymore.

As well as variables, Sass has things called mixins, allowing you to define a style for something like rounded corners once, and then just import that style into a bunch of places.

Mixin it up baby

You'll see we can also use variables in this, making the CSS yet more manageable. Now if I want to use rounded corners on an element, I just have to "import" the rounded statement, like so:

No more typing "border-radius" with various browser extensions over and over! Yay!!

The other thing I'm finding super lovely so far is NESTING. No, not sitting on eggs, but writing CSS like this (yes there is a reason I'm a web developer not a comedian..):

It makes the CSS much more readable, and lets you write less! W00t. You'll notice I've used another variation of the rounded corners mixin, this one lets you define which corners you want, if you're only using it for some. My paragraph only needed a rounded corner on the bottom left to fit in nicely with my swatch. Yet again - no repeated writing of "border-radius" properties :D (btw, I realise I'm still mixing pixels and ems here with the font properties. I'm slowly trying to stop clinging to pixel values, but I have to get used to it, hehe).

I still have more to experiment with the advanced features of Sass but far from taking any control out of your hands it simply helps you to not repeat stuff (very DRY :), making your stylesheets way more manageable and letting you get on with writing nice CSS.

The jQuery icing on the web cake

Anyway, so far I'd just added some of the main colours to the guide, in nice little divs with CSS rounded corners, the hex code displayed on top of them. But if you're like me, you don't memorise many hex codes (I pretty much only remember shades of grey xD), so how could I ensure that the right hex code was being displayed on the style guide? There's nothing worse than having to wait for Photoshop to load in order to pick that colour and make sure I'm actually writing down the right one again. I like to use Photoshop as little as possible these days (yay for designing in the browser). Bit of a sidenote, but these days I love this eye-dropper extension for Chrome, as it allows me to use Photoshop even less! Although I believe it doesn't work on local files, like most extensions.

So, what would be cool in the style guide is if I could update that value shown every time the CSS was changed, to ensure that it definately showed the right hex code of the colour shown. Okay so, the colours might not change much right now but - I thought it would be a fun little thing to do anyway ;)

I started off by checking if you could grab a CSS property via jQuery, something I've not done before. You could - yay! Is there anything jQuery can't do? ;) I grabbed the background-color property from one of my swatches and alerted it to check what it was picking up. The first thing I noticed was that it indeed gave me the background colour, but it gave me the RGB value. That's pretty nice, but I really want the hex code so the designer or developer can paste it into their Photoshop doc/CSS.

So I googled it.

Sidenote - Google has to be the most powerful tool we have as web developers, and I think a lot of other professions could learn from how we utilise it. If you get stuck or you have a problem - surely someone else has had that problem before? Google = access to the world's problems and very likely solutions! Really, it seems obvious to developers but I think it's useful whatever you are stuck on. Imo, there's not really a need to sit down and learn every single aspect and property of jQuery in one go, just check what you need when you need it. Easy.

Anyway, I found that indeed - others before me have asked this question! And http://wowmotty.blogspot.com had written a nice little function to convert the RGB value to hex. Yay!

Now I had this, I knew that I just had to grab the background-color for each swatch (using the each function which I had used previously - that looks at each div on the page with the swatch class and runs the function on it). Putting the grabbed css into a variable wasn't *essential* but it's always easier to manage code, by using one and then referring to it in the next part. It makes it easy to see where we've stored that hex code.

What lovely coloured icing. Yay for Cobalt

So for each swatch div, we can just grab the paragraph that's within it and append the paragraph to have the value of our bgcolor variable. Nice! With jQuery I still tend to get a little confused over when to use .text , .html .append to insert dynamic text but I think in some cases more than one of them will work.

If someone chooses this lovely yellow, at least we'll all know.

html + css + jquery + pretty = nice web things

So the first bit of my style guide is done, and I think it's a nice little example at how you can combine some nice simple design, with clean semantic html, easily managable CSS, and jQuery for some useful and nice dynamic functions. If somebody decides to change the main colour, then can just change the "main-color" variable we created in Sass, which will then change that value wherever we might use it in the stylesheet, and at the same time update the swatch - and the hex code shown to the viewer. Simple, but nice.

Well, that's about it for now, but I hope that some of this was useful and/or interesting! Apologies for all my code samples being screenshots, I'm 100% sure there's a better way of showing my code but I haven't googled that yet ;)

Thanks for reading!

On personal projects, and overcoming fear

I'm currently working on creating my personal site, and wanted to write a bit about what I'm trying to do and why it's taken me so long ;)

A Web Designer, with no website?

Uhh, I'm working on it...

Firstly, I'll get the thing I feel sort of embarrassed about out of the way - and that's the fact that I don't currently have "my own website". Despite being a professional web designer, and writing html & css (on and off) for something like 10 years now. I guess one reason for that is, I've been working in-house at a company for a long time, and before that, at an agency, so I've never been freelance and needed a website for marketing purposes or anything.

Maybe it even sounds like I'm not creative, or "into coding" enough, by not producing my own website yet. I mean, I used to have my own site a long time ago - but to be honest that was before I did web design for a living and more importantly, before the perfectionist in me really came out.

Truth is, although I focus on front-end development as opposed to design in my day-to-day job these days (though I love both, and to me they go hand in hand when it comes to websites), I am a very creative person. And I also love coding/html/css. So why aren't I making my own stuff more?

Well, I've been trying to figure that out a lot lately, and explored a lot about myself in the process, and I think I'm getting to understand the hurdles I face and work to overcome them. Truth is, I'm 99.9% a perfectionist. In reality, I'd like to be about 80% a perfectionist. Sure, perfectionism is a good thing in some ways, I take absolute pride and care for everything I work on, no matter who it's for, or how minute or big the task. I'm a sucker for detail, typos, a pixel being out here, the grey not being the right shade. And I'm glad. But, on the other hand, it's given me this attitude that if I create stuff, it needs to be amazing. If not, what's the point?

As well as webby stuff, I enjoy drawing a lot too, and I go through a very similar thing with my art. I might make a picture I'm happy with, but if the next one isn't quite as good, I feel like I've just wasted time, and/or it ends up making me feel sad. When that happens I feel like I sort of "rebel" from my creativity and end up thinking I'm not good enough and I should just not bother drawing really.

So back to the subject of website making. I don't really suffer the worries or being held back when I'm designing or coding at work. It's a LOT easier with client work. I have a deadline, therefore I do the best I can in that time, and if things can be improved, well it's easier to rest with that knowledge. Another of my traits is I will absolutely never miss a deadline, and I will never let people down. I once opened a fortune cookie that said "the greatest inspiration is the deadline". I don't see how that's actually a fortune but.. XD I kept that on my desk for a while, it is absolutely true for me.

And, I absolutely love what I do, completely. One of my biggest aims in life, if not my biggest, is becoming better at using web technologies and design to create awesome user experiences. To become really really REALLY good.

And the issue right now, the thing that's been holding me back on personal projects and making a site that represents ME, is, I know I'm not as good as I want to be. And, it can be scary, and disappointing. I've never had it summed up better, than when I watched this clip of Ira Glass talking about creativity.

"All of us who do creative work, we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying to be good, it has potential, but it’s not. But your taste, the thing that got you into the game, is still killer. And your taste is why your work disappoints you."

When I first heard this, it was like something became completely clear for me. I'm not disappointed because I suck. I'm disappointed because my work isn't killer.

A small fish in a big pond

Photo by protographer23

I compare myself way too much, in life in general, to others, and judge my achievements by the achievements of others. Again, I don't think this is terrible - all humans have amazing potential, and it's really up to us how we use it and hone it. I'm glad I want to aim high. But, it feels hard sometimes when the internet is this big pond of people who you can compare yourself against. I'm a fairly quiet/not particularly confident or social person, who likes peace and quiet, cups of tea and the countryside, and detests the idea of things like parties or going out or having to speak to random people. When I lived and worked where I grew up, I thought I was pretty good, y'know? When I was at college, compared to others, I was pretty damn good at html and css, and making sites. And also at having a decent design taste, and to be honest, I didn't see a lot of good design when I was at college. That's nothing against others, I wasn't doing a design course as such at the time, so I didn't really expect to.

Then I worked in London, and when I was working as a Graphic Designer I went through a lot of times when I thought, wow I probably suck compared to the amount of "proper graphic design students" in London. In all honesty, although I worked as a Graphic Designer (web and print) for four years, I don't have a design qualification as such, I've just always had an eye for it. There was a time when the company I worked at was trying to hire another designer to work alongside me, and we got so many amazing sounding CVs handed in, I was actually nervous that these people would show me up for the "unqualified" designer I was. But, in a lot of these cases, the work these people did, didn't live up to the sound of those qualifications. Again I'm not trying to put other people down, but I'm just saying, when you're comparing yourself based on things like this - things aren't always as you might imagine. And when I did work alongside other designers, I found that we both had our own techniques and tips, and could learn things from each other.

But my point is, whilst I still find London a little bit scary, it's nothing compared to THE ENTIRE INTERNET. Making my website means I'm defining myself on the internet. I'm saying "This is me and these are my design and website making abilities". And, I have to live with that they are how they are right now, and there are going to be sites I think are way more amazing, but, that's OKAY. I'm sure there's a lot of sites not as well coded or nice looking as mine - everyone has their place in the pond, but, I'm always focusing on "better" things, because I want to be that good. Again, it's a good and bad thing.

Maybe it's odd that while I'm trying to focus on front end development in my career, I really can't stop thinking about design. As I said earlier on, they really go hand in hand to me. If you design something for the web, you need to understand how that will work, how it will be built. When you get to thinking about interactions and fancy jquery stuff, well you're often thinking of how it might appear, where it would go, but how you would write that too. I know design and development are often split, particularly at bigger organisations, but I guess personally, I like being able to do a bit of both - they both go into crafting a great user experience.

So I guess the main problem I have when attempting to start my own website is designing it, and deciding on a design that I like and am still happy with two days later. Too often I've spent a few days in Photoshop trying to make it look *just* how I want and then shoehorning some content in later and finding out it doesn't work that well. That's also a problem from me not thinking of my "brief" or at least plan for what I'm actually trying to do with my site before just jumping in and designing it.

Other than design, there's the problem that I want to make every bit of this site better than I've done before - the html, the css, the design, implementing some djangoness.

So, this time I have a plan, and I'm also aiming for an 80% good website, not 99.9%. Here's my plan, not just for my website, but for how I'm going to fight that "personal creative block/scaredycatness".

The plan

No more Scaredy cat!! Photo by rockbandit

Start with the content.
I failed on this last time by jumping into Photoshop right away. Focusing on content first, will not only make it easier to get the design to work with it, having real stuff to style etc, but also, I can't get held up being perfectionistic over some design, content, I can just WRITE. Plus it means there's something there, and once you've made a start with *something* it's easier than a blank canvas.

Focus on making each small chunk amazing.
The good thing about this site is - I don't have a deadline! But I do want to make consistent progress, and I want to make sure I'm not just coding "how I know now" but I'm coding better, using more aspects of HTML5 that I maybe haven't used yet, making my site more responsive or bulletproof. So, I'm choosing to spend a couple of days on a chunk, like, coding the entire markup with HTML5 tags, and not just using them but understanding when and why to use them, using some I've maybe not used yet.

Create *something* and move on.
No deadline means I'm likely to get caught up on details. I've already spent ages trying to choose the perfect font before putting the rest of my content in, I can't help it in a way. But I need to do something, accept it, and move on, remembering I can always improve it later. Again, improving something is easier if you have something there to improve.

Don't compare to others, learn from them.
There are various talented web designers and developers I admire, and being scared or sad due to me not being as good as them is just stupid, and a waste of time. It's a great thing I have people to admire and inspire me, if I didn't, what would I aspire to? I have the benefit of seeing their work, reading their books, and learning from them, and that's a great thing.

Some of the books I'm enjoying, and learning from right now

Relax, and enjoy it.
I pressure myself sometimes, but at the end of the day, I'm doing this because I love it and because of the "killer taste" that Ira Glass spoke of. There's no point to any of it, if it makes me feel bad, so I need to keep having fun and remembering why I'm doing it :)

So that's about it. And so far, it's going quite well. I've spent a good chunk of time focusing on HTML5 for my markup, then moved to learning Sass as I write my CSS, and also focusing on small things I want to improve, like using relative font sizing. I want to do this well, but I also want to get my site DONE, so I can just use it as a playground, improve it, and make more projects. So I probably need to set myself more deadlines but.. we'll see how it goes. ;) Thanks for reading.