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.

New Year's Swag (a typical pandalion shopping trip)

Today my boyfriend and I went for a little shopping trip to see if we could pick up any sale bargains ^^ I really needed to buy some new trousers but I struggle buying trousers (I'm pear shaped or something :P) and I also don't enjoy shopping for them D: So kinda ended up buying stuff I didn't intend to buy. XD But hey, it's good to have some New Year treats!

1 - A cute soft sweater from Next. I think these days, for buying any clothes other than shirts (which I buy all over the internet), Next is almost the only clothes shop I actually enjoy going to and find stuff I like in. No doubt the next couple of months will still be pretty cold so I need more things with long sleeves :D

2 - Doggy purse/wallet also from Next. It was just too adorable really. Animal faces on things generally always make them better.

3 - Various hot chocolates from Whittard, and a cute handpainted mug reduced in the sale :D Before my mum says anything, yes I have LOADS of mugs for tea, but this one was the perfect size for drinking hot chocolate :3 As for flavours, they had lots of fun kinds! We went for cinnamon, cherry and mint.

4 - Hazelnut coffee and chocolate covered espresso beans, also from Whittard. I'm generally a tea drinker and only drink coffee on occasion, but I've had this flavoured one in the past and it's *lovely*. Something for Saturday mornings :) And chocolate espresso beans are just quite yum. XD

5 - 2012 planner for the Creative Procrastinator - in the Calendar Club sale. (word of advice - just wait till January 1st to buy diaries or calendars, so much cheaper XD) Anyway, I had to get this as it's just too perfect for me. I think "creative procrastinator" is my middle name(s). The middle is filled with handy boxes for writing what you have to do, such as "Things I need to do but that can wait a day, or two, or three.." and "Things I absolutely have to do unless I absolutely don't want to do them". Each week also has a Procrastinator tip, or bit of wisdom. My favourites include: "Better to do nothing and avoid looking bad than to proceed and look like a total idiot", and "Some people say nothing is the worst thing you can do. I challenge them to tell me the last time a war broke out over nothing." XD

6 - Christmassy chocolates in the sale at Hotel Chocolat - Hotel Chocolat is one of those shops I love to look in but have never bought anything from before. The sale seemed a good excuse to :D I always think I'd rather have a very small amount of high quality chocolate than a big bar of something cheap and rubbish ;)

So yeah, that's some typical pandalion swag, would often include games but I'm intent on finishing fallout: new vegas without getting distracted! Bye for now!

Django from a Web Designer's point of view

I've just made my first Django webpage live. It just has some text, shows the date/time and has an admin interface that I can log into. Looking at it, it really doesn't look like much, but today, I got over a hurdle with the framework I've been getting to know for the past few months, and it feels pretty good. I decided to make a post about my experience and what I've learnt of using Django so far.

What the heck is Django?

According to djangoproject.com:

"Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design."

Sounds quite lovely, doesn't it? A year ago I probably didn't even know what Python was. I'm a Web Designer/Front End Developer, who spent most of the past few years as an all-round Graphic Designer before itching to get back to writing code as well as (and probably more so than) designing things.

HTML and CSS, along with simple, clean, user-focused design are my specialities, and I'm pretty good but still improving with Javascript/Jquery, but I have had some experience with back-end languages. In the past I've dabbled in asp and php along with mysql to do some database-y things, and Visual Basic lessons at college introduced me to some basic programming principles (unintended pun there ;)

So yeah, it's been a long time since I've done much other than HTML/CSS, and when I joined the team I work with currently and found out that our site was built on Django, I really had no idea what that was. But after working closely with back-end developers in recent months, I've got to know Django a lot better.

I work with some really talented people, who all seem to share the opinion "eww php",  and promote the DRY (don't repeat yourself ;) philosophy of the Python programming language and Django framework. I'm not getting into a debate about it because I know when it comes to web development there are TONS of different views, but in my opinion, DRY couldn't be a bad thing. Design is great and all, and designs can be beautiful, but code can be equally beautiful. One of the reasons I never tire of writing html and CSS is because I think there's always a challenge there to create beautiful, readable code that makes sense to other people and that is crafted and constructed in the nicest possible way (yes I know HTML & CSS aren't technically code, because people seem to get pedantic about that on the internet, but you know what I mean).

So the whole DRY thing sounded really appealing to me. As an FE developer working in a team using Django, the first part I had to get to know was the template system. I think this alone pretty much made me fall in love with Django :D It feels incredibly simple and nice, the way in which you create base templates and various pages based on them. Previously, in asp/php, I would have used include files for this, which I guess is a similar concept, but I don't know, the Django template system just feels nicer.

(I'm not going to explain exactly how it all works at this point, but if you are interested you can learn loads at the official documentation at https://docs.djangoproject.com/en/1.3/ and djangobook.com :).

Choosing Django for my site

I've needed to set up my own personal site for a good while now, having put most of my effort into work projects lately. As I want to dabble more in back-end stuff as well as front-end, I was wondering which language I should choose. I *could* brush up on php again, after all it's a pretty popular and widely used language. But that didn't seem like a good reason to use it to me, Django seemed more elegant somehow, and I really wanted to use the template system, as well as the nice built-in admin it comes with, which allows you to update the content on your site without having to spend time building a bespoke interface just to do that.

I guess the hardest thing to me was setting up a Django site on my own (not just the templates, while the programmers do the rest). The template code is described as "designer friendly" but the majority of Django is aimed at programmers, as it involves editing/writing Python and using the command line to do most things. I must admit I'm used to installing something by downloading some sort of zipped file and double clicking an "install" icon ;) 

So, installing Python and Django with the command line was a challenge on it's own for me. I followed lots of tutorials on the net, but I think that especially with something like this, there is a big gap between copying code that someone is telling you to write and seeing it do something, to *understanding* what the code is doing, why it works, and how you can use it to make your bespoke project. And sure, the command line basics aren't by nature that difficult but you I'd had my head in Photoshop and InDesign for years, and I didn't even know how to navigate my way around files in the terminal.

After installing Django locally, I had a lot of fun trying to get a simple app or page working :) I wouldn't say that it's difficult as such, just.. Python-y, and I guess for me there was a lot of new stuff to understand. I tried a lot of tutorials online, but generally they'd be making sense and then I'd get to one point and go "WTF?" or just suddenly lose the flow and be really confused. You really only need to edit a few Python files to set up a django site, so it is a fairly simple process, but not understanding the lines of Python and being confused about certain things made it all seem very tricky at times.

After getting something straight forward working locally, I decided to just go ahead and get some hosting so I could get something running there and get on and make my site. I went with webfaction.com for my hosting, as I heard they had a simple one-click installer for setting up a Django site. This did really make it a lot simpler than when I tried to set it up locally even, but I'm glad I had a go at doing that too.

Even after getting the basic app set up, I got confused about making a view and setting up my templates. If you look at the Django documentation it runs through models, the API and views before even getting to templates, so yeah, there was still stuff to get a hold on before I could really dive into the template fun. x_x 

What I've learnt so far

So yeah, finally I have a basic page set up, and as I said at the beginning - it doesn't look like much, but I think (for a web designer ;) I've learnt a lot so far!

- I can now use the command line to ssh into my web hosting, navigate folders, create folders and files and edit them (I've been using nano which was installed by default on my mac), as well as restart the apache server, and sync the database.

- I understand the main Python files that you need to edit to use Django, a lot better. (settings.py, urls.py and views.py). I know what settings to edit in order to make the site work, look at the database and enable the admin.

- I understand how to configure a URL for a view

- I've set up some database fields, displayed the values from these on a page, and managed them using admin (I did this in an earlier tutorial, so I need to revisit it, but again, I think I have a good understanding of how to).

Most of all, I think I have a pretty good idea now of what to do to set up my own blog for example, and I feel pretty proud of that, and also excited to use Django more. I haven't spent long on the design/actual site yet because.. well I know how to do all that pretty much, but my aim was to understand how I could use Django to do it, and I think I've got over my "stuck" hurdles now ;)

To summarise, I think that Django is a bit trickier to get into for a web designer, than say PHP, but so far it seems a really elegant and nice framework, and I would really recommend the template system to web designers. I'm looking forward to developing my site now, and I'll probably update more about how it goes.

Thanks for reading! :)

The week I fell in love with Skyrim

Skyrim makes you stop and enjoy the view

So, I forgot to finish or post this at the time I wrote it, about a week after Skyrim's release in November. I wrote a bit about Skyrim in my "videogames of 2011" post buut, I realised when writing it I kinda forgot some of the things I loved when I first started playing it so.. I wanted to post this even though it's late and record the fun I had (or have had so far) with Skyrim! Some of it touches on things I wrote in my other post but whatev'! I included screenshots from my own games :)

=====================================================================

I hadn't been playing videogames hugely for a while, but on Friday 11/11/11, for some reason I remembered that Bethesda Studios' open-world epic RPG Skyrim was coming out. I blame my boyfriend for assuring me that I'd done enough hard work around the house and that it would be okay if I got the game.

He may not have realised what a mistake that would be at the time, considering how addicted I've been to it since last Friday. XD As you may know (duh), I love videogames, but especially RPGs, and most of all those that allow depth of character customisation (because that's what roleplaying is all about, right?). As much as I used to love the Final Fantasy series, since playing RPGs that allow you to do so much more than follow a generally fairly linear path playing a spikey haired emo teenager (sorry FF), I don't think I could go back.

My first taste of the Elder Scrolls

Okay so horse armor might have been my favourite thing in Oblivion *cough*

Shortly after getting my Xbox last year and whilst researching RPGs to try out I found Oblivion, the fourth Elder Scrolls game. My boyfriend was familiar with the Elder Scrolls games as well as some friends I play Dungeons & Dragons with, so I decided to give it a try. I was *quite* hooked on it for a while, but I got tired of it quicker than I would have liked. I liked the open-world, my first taste of archery in a videogame (Me - "this comment surely must be wrong, but maybe archery in 3D? XD"), and the dungeons, but there never really seemed to be the sort of rewards worth playing for. The dungeons got too samey, the townspeople got annoying, the "enemies levelling up with you" was PRETTY annoying, and I didn't like the way the main quest and side quests interacted, made it feel like you had to be "careful" which order you did things in as they effected the world so much.

I don't want to set the world on fire (much)

Someone said I look like Batman.

After getting bored of Oblivion, I looked into another RPG, Fallout 3. I'd never actually heard of an RPG with guns before, RPG always meant swords and magic to me. I was also rather used to playing games with "blue skies". So I was unsure I'd like it but had heard really good things about it (and found out that Bethesda, who developed Oblivion, developed it) so I picked it up.

Well, that game surprised me. After initial thoughts of "this is like Oblivion in a wasteland", it quickly began to feel like an entirely different game and I felt it was stronger than Oblivion. I felt more attached to my character, I feel like the game lead you through both main quests and side quests in a good way, and there was always loads to do but it didn't get "samey". It felt like there was always a purpose for exploring and collecting things and loads to do in terms of weapons - finding, repairing and building your own. The atmosphere always had me sucked in too. After 80 odd hours I completed the main game and the majority of sidequests as well as played some of the expansion sets, so I decided it was time for a break.

Then came dragons

I don't have any screenshots of dragons so here's a horse.

Don't get me wrong, I didn't entirely stop playing games after Fallout 3. :P I played some of Borderlands on the Xbox, which was enjoyable, but then I got a bit of a "hack and slash" urge and played Deathspank from XBLA. That's a really fun game I might talk about another time, but anyway what with moving house and packing the Xbox away, I hadn't played anything in a little while..

So yeah, SKYRIM. It's strange for me because this might be the first time I ever bought a game on release date. (or at least one of very few that I don't even remember). The problem with when I played Fallout 3 was, I was talking about everything I loved about the game, but noone else was really talking about it much anymore, since it had been out so long. Well, I guess that wasn't a problem as such, but the nice thing about Skyrim has been seeing everyone else's thoughts at the same time, watching other gamers uncovering the game and knowing you're not the only one completely taken in by this world.

I mean, I've kinda been talking about it to anyone else who would listen anyway but still, it's nice to find other people who appreciate the art, music, love, and work that goes into a videogame, (or a great deal of them anyway ;) Hurray for the internet I guess :)

Things I love so far

I love wandering around doing silly things like this.

I won't go into loadsa detail in case of spoilers I guess (Me - "unlikely now.."). But..

The massive world
It looks even more beautiful than Oblivion did, tall snowy mountains, trees and plants, wildlife (rabbits and stags, as well as mammoths which are pretty awesome). It's an icy fantasy world (suiting for the time of year too :) and there's just so much to explore.

Character options
Skyrim introduces perks, similar to those in Fallout, but more of a Diablo-ish skill tree really, and this gives you a lot more options than Oblivion did for how to shape your character. I feel like I have reasons to want to level up my character, for example aiming to get shield skills. At the same time whatever skills you use will level up so you get rewarded for playing however you want to, which is cool.

Dungeons
The dungeons so far are varied and interesting providing various fun scenarios for sneak attacking bad guys :)

Little extra things to do
Apart from following a main quest, side quests and fighting, I love when RPGs give you the chance to do more, well, "mundane" things. Those little things in real life that can be satisfying, like cooking, picking flowers, fishing and decorating a house.

The score
Skyrim has a beautiful, atmospheric soundtrack - I'm still waiting for my CD to be delivered :(

---------------

Well, that's all I wrote, but to summarise - I think Skyrim was a massive improvement on Oblivion, and I would like to get back to it after I finish Fallout: New Vegas, I think, because I *do* need to finish the main quest! Though I still think playing Skyrim properly requires quitting your job, and not doing anything else ever, it's so massive! But that's not a bad thing, and I think Skyrim did something great for videogames last year - showing how popular a SINGLE-PLAYER game played with a normal controller by people sitting in their armchairs can be (yes I'm looking at you kinect, and to an extent wii), and that a videogame CAN be as popular as a movie too.

I also think Skyrim has something to give everyone, whatever type of character you want to play, how much time you want to spend, what kinda things you want to do in a game. So yeah, if you haven't given it a chance, you should ;) It's a wonderful fantasy world to become a part of, and to me, it's really redefined the level of detail, quality and depth I expect from all games now.

Looking at my screenshots has made me miss Skyrim - I look forward to getting back there!

I love inventory screens (thoughts on a personal project)

A bit of a random sketch after the subject of inventory/equipment screens popped into my head again tonight. I've been wanting to do a project for a while now that combines some of my biggest loves - front end coding, cute art, and RPGs! More for personal reasons than anything else, and to learn new stuff along the way (database integration using django for example, which I'm *still* trying to get my head around!).

I've not got far yet (I'm a panda, we don't rush these things..) but, I have a lot of ideas and one is that it must include levelling up because - I love levelling up! :D And also, as the title of this post says - I love inventory screens. XD One of my very favourite things about RPGs is acquiring new equipment, heading to the inventory screen and seeing what the effects of equipping it will be, and how it might power you up :D Not all games allow you to see your stuff on the character right then, but I quite like when they do, especially cos I like to see the effects of how stuff looks together, etc. (yeah, girly ;)

My vague coding related RPG idea is something to do with wanting to level up my skills myself, and maybe because I just want to make everything more like a videogame! I also like the idea of something humorous, cute and fun, hence my "geeky joke shirt". Deathspank on XBLA is a bit of an inspiration for this particular sketch too, it's a funny action RPG created by Ron Gilbert who also worked on the Monkey Island games, and it's just all very silly. On a sidenote, I miss Monkey Island style humour in videogames! It feels harder to come by a funny game these days.. :)

Deathspank Equipment Screen

So yeah anyway, I think I'd like to work more on lots of different parts of this, besides how it might all work on the back-end (how you level up, and collect items etc), I think designing various items and the effects of them would be pretty damn fun too. XD And then drawing the graphics! As usual, I'm being way too ambitious at this point but, it's fun to think about anyway and we'll see how far I get next year..

Oh, on another note, something I think also fueled my equipment/inventory love is Ragnarok Online, a very cute Korean MMORPG, that I used to play for the SOLE reason of acquiring more hats. XD Here's a little shot of one of my characters, with a friend I used to play online with. HOW cute are those hats?

Ragnarok Online - more like Cute Hats Online

Bye for now, and happy equipment hunting!