Portfolio 3.0

It's been around 12 months or so since I finished the last time I updated this site. While there was nothing wrong with it, I always like a change and as you may well guess seeing 3.0 I've fallen for Windows Metro Design.

I've also taken the opportunity to take the lessons in optimising I'd learned over the past year in my other projects, and to relearn some old skills - I've not touched rails in nearly a year! As such I hope this site runs super speedy, there's only a single sprite sheet and very little in the way of Javascript or heavy DOM manipulation.

In addition to this, I have stripped down the blog to its core elements. I figured 3rd party commenting solutions could easily take the place of my own solution - one less thing to worry about. I also removed several of the more personal blog posts. It's a cycle of blogging for me - start businesslike, end up baring all. Not from this point onwards - strictly work now.

I shall be finishing and tweaking the site over the next few days. As always, it's entirely open source and available from Github.

Social Media and Me

The internet has changed rapidly in the past few years. Data has progressed slowly to smaller and smaller forms. The impact of a hard hitting article has the same potency as ever, but at the same time a well timed tweet can shatter the world. Impressive for 140 characters or less. Amidst this whirling, swirly incessant buzzing world of tweets, statuses, check ins and notifications sits me. Lost.

I don't misunderstand it on a technical level. Indeed, I work for a company pursuing the channeling of social media good will into the local fresh food businesses around the user, and have had to spend many an hour pulling out my hair writing the features for it. No, it's far more fundamental than that. Before I begin the descriptions of my character that make social media ill fitting, I suppose I had best prevent any misconceptions forming in your heads about my past. I've grown up in a liberal, tolerant and accepting family - with supportive parents, grandparents, aunts, uncles and others. At school I was never bullied, well more than the norm you'd expect for an academically minded student. I am not an incapable public speaker - I enjoy presentations, a surprise considering my quiet nature. Thus - nothing in my past has lead me to feeling I can't express myself. It seems I can only blame (if that is the correct word for the situation) myself. So why when it comes to the internet - surely the perfect place to express oneself in anonymity - am I constricted by my mind?

Quite honestly I don't know. I have the tweeting equivalent of two left feet. The ins and outs swoosh over my head leaving me like the runt pathetically crying outside the main circle. Much of it may stem from the emphasis on what I am doing at the current moment. What I think. I, I, I. Me, me, me. Talking about me is just not me (ironically he says writing on a blog about himself). Do people really want to hear what I think? Surely there are far more qualified people to talk on a subject? Maybe it is interesting, in my head it is inane dribble. My primary habits on Facebook are posting amusing videos, news articles and other things that I find interesting or provoke an emotional response. But amid the clamour of "My latest party photos", "Summer 11 at the beach" albums and the gooey "I love you" statuses (rest assured they get blocked pretty fast) it seems somehow ill fitting to the audience my Facebook has. It seems a hopeless middle man which could be avoided and simply talk to my close friends about said video, article, editorial. Losing the six words at the beginning of a conversation: "Hey, did you see my status…" I doubt will be missed by either party. When I do join in the crowd I find that statuses come out in a sort of self mocking irony. Short and blunt, devoid of any real enthusiasm bar what typically is a sugar driven euphoria which soon crashes out. My media teacher often says they make her laugh. Oddly enough this actually made me happy, they weren't being taken seriously!

Don't get my wrong however. It seems from the paragraph above I have a massive downer on social media. I think it's a pretty fantastic evolution of the web. After the recent riots the sudden flurry of activity - live from the people at the scene, commentators, the #riotwombles and the sharing of interesting articles regarding the reasons - kept me up until stupid o'clock in the morning. Again however, aside from the odd tweet in agreement I felt like what I am. A lurker. Terminology usually seen on Reddit or Forum boards, lurking is what I do best. Gripped by fear of disapproval of my fellow internet goers I tend to operate a read only policy. Harking back to the hectics days as Management of a busy forum, I remember the mental effort it took to post outside of my usual duties replying to "feedback" (read abuse, nit picking and a general sense of entitlement on a free-to-use board). I managed it for the sake of my role, but upon resignation it didn't take long to cease and return to lurking. The mental process seems to be concerned mainly with "what will I add to the discussion?". Typically the reply from my skull is "Not a lot". I've had an account on a large and very active board since 2006. I managed to get about 1000 posts, before archiving reduced that now to 60 or so. In five years, 1060 posts. Hardly the chatterbox am I?

Maybe my problem is the written word? I disagree since I am enjoying writing this immensely, but lets press on. Audioboo and such others do hold a fascination for me. Especially with the android app opening up possibilities lost to me when it was iPhone only. Indeed as I mentioned above, I do enjoy speaking aloud and I do eagerly listen out for my good friend's self therapy Boo's. His tangential way of speaking is refreshing in such a controlled world. Could I join in? Again the problem resurfaces: What do I have to say? Evidently by my inaction in signing up: nothing. Don't even get me started on Vlogging - my ugly mug spouting something inane? Fat chance!

I think the above issues show a massive lack of self confidence. Perhaps this is the root of why social media goes over my head; it requires a bare minimum level of self confidence to rise to the podium and shout out to the unknown masses. A room fool of like minded students listening to a presentation on a subject we are all studying is one thing - but to find a topic alone and speak it is a whole other kettle of fish. Another short-coming of mine has been an asset so far in my academic life. I've never rebelled, never really been on the receiving end of punishment. Mistakes made have very rarely been from a lack of active engagement, but stupid overlooking errors which have always caused me a deep burning embarrassment. My friend group comprises of several incredibly gifted individuals. Maths, english, philosophy, physics. After exams would come the dreaded discussion afterwards. The burning sensation as they explain a question that suddenly sounds so simple. The dreaded teacher picking someone to speak who normally doesn't, as I fumble my answer I never intended to give still sends shivers down my spine. So the idea of stumbling onto some platform and making a cock up is instantly suppressed by a brain that has a very hard time dealing with errors. "Best leave it, someone else will have a much better reply than me".

Google+ is the latest shiny new social toy, and I am struggling to find my place on it. Is it for links? For articles? For extended writing pieces? I've seen all posted and I've been commenting but this is between friends. The similarities in terms of interface to Facebook quite often throw me off. I don't want to post statuses, yet this box is positioned exactly to do so. Tech blog articles saying the end of Facebook is nigh, and vice versa. Where is my place on it? I've posted a few links around - and I am trying to use the +1 button a lot more than I have ever used the "like" button but it still feels like I'm jumping around the outside of a circle made up of vastly taller beings like a little lost puppy.

Or, quite possibly this long analysis of my short comings is needless. Perhaps my struggle to find a topic, to speak my mind or speak with passion about my life is that quite simply, I'm rather dull. The conclusion to this is either a complicated mix of personality, lack of confidence and fear of making a silly mistake, or the simple fact above. I'm not sure, all I know is writing this was a great deal easier than condensing it into 140 meaningful characters.

SASS, well - SCSS

One of the things I've been meaning to do for a while is learn to use SASS. The problem being that I've never had an opportunity, usually I am developing new features for Lovefresh and the primary focus then is getting them working. The CSS files have been built up since before I began majorly working on them, and despite there being converters built into the Gem, the idea of redoing all that CSS never appealed to me. 

My mother has asked me to do her a site for her new cake business plans. Finally having a fresh slate, I gave it a go. My god! It's like the coding mental revolution that was HAML. Nesting code to avoid the mindless repetition, using Mixins to produce decent CSS3 without copying and pasting webkit, moz and sometimes is just damn awesome. Here are some examples:


@mixin border-radius ($radii) {
              	-webkit-border-radius: $radii;
              	-moz-border-radius: $radii;
              	-ms-border-radius: $radii;
              	-o-border-radius: $radii;
              	border-radius: $radii;
              }
              
              @mixin box-shadow($x, $y, $s: 0, $c: rgba(255,255,255,0.35)) {
              	-webkit-box-shadow: $x $y $s $c;
              	-moz-box-shadow: $x $y $s $c;
              	-ms-box-shadow: $x $y $s $c;
              	-o-box-shadow: $x $y $s $c;
              	box-shadow: $x $y $s $c;
              }

I'll get round to converting everything else eventually. As well as uploading all my Scotland photos and writing that up. Time is going a million miles an hour, predictably when heading towards exam results day...

Anyway, here's what nesting and parent selectors look like:


#actions {
              	width:320px;
              	margin-left:14px;
              	float:left;
              	a {
              		width:320px;
              		overflow:hidden;
              		text-indent:999px;
              		margin-bottom:15px;
              	}
              	#order-now {
              		background-position:-320px 0;
              		&:hover {
              			background-position:-320px -50px;
              		}
              		&:active {
              			background-position:-320px -100px;
              		}
              	}
              	#contact {
              		background-position:0 0;
              		&:hover {
              			background-position:0 -50px;
              		}
              		&:active {
              			background-position:0 -100px;
              		}
              	}
              }

And with that done I'm going to go sweat some more in the sudden humidity spike.

New Product of the 21th Century

Aha a wild grammar error appears. Fortunately this was intentional, although my inner Nazi did have a mild aneurysm. On sunday I shall be heading off to Scotland for a week and a half for a lovely walking holiday away from electronic stimulation, background noise and just to get away from it all. Over the past couple of weeks, as I've never been anywhere near a camp site I've had to get everything from scratch.

Except for today when my friend gave us all some washing bags. Written in Engrish it was quite fun to try and work out.

Washing Bag - Suit Clothes Trousers Socks & Stocking Underwears

Usage Direction

Choose suitable bag before washing. When filling clothes, make it less than 2/3 of the bag's subage. Put it into washing machine after drawing zipper

Characteristics

Protect clothes, reduce rolling and distortion in maching and make clothes in previous state.

Mesh disperse running water. Bag surface cooperate with washing machine and makes washing easier and quiklier. 

Protect crock of washing machine and lengthen the usage of washing machine

Made of quilified material and being durable, it is the perfect washing article of modern family.

With a product made of such quilified material I am proud to consider my clothes will be reverted to their previous state.

MySQL Rage.

So today has been productive. You may possibly have picked up on my sarcasm there. Over the past couple of days I've noticed my sites getting progressively slower, especially when writing to their databases. Checked out the rails logs and its taking 50 seconds plus to run the "Commit" command when creating content. Considering I'm trying to build sites that need to write the the database, and thus I need to test them having to wait 2 minutes only to have a 504 pop up in my face is a fast way to make me a grumpy bastard.

Unfortunately I don't know much about the back end of server administration. I know enough to get set up and running, albeit with a little help from google, but if things go wrong I'm pretty much floundering. It seems like the queries are queueing up. Long after the site has stopped responding I noticed the logs suddenly spring into life finishing the job. I guess this means some config value or buffer isn't right. Ugh. 

It could be the VPS itself though. I've not changed anything to make this come about. I've noticed anything that involves writing to the HDD takes its sweet time (the MySQL reinstall took about 30 minutes to complete). Hopefully I can get it working, I've sent a ticket in anyway.

In more positive news my antispam measures have worked lovely. No more spam!

Update: Got a reply to my support ticket. Apparently other VPSs on the node have been causing high loads and have been suspended. Happy bunny today :)

Spambots

Jeez those annoying little bastards work fast. I was hoping I could get away with little to no anti-spam for a brief period of time but apparently not, any my similarities on blog comment forms to Wordpress means they managed to get into there too. Fortunately it wasn't an unmanageable amount, around nine comments and 6 emails - though still enough bad spelling and grammar to make a cheap Chinese manufactured instruction manual seem perfectly understandable.

Spammmm!

At anyrate I didn't fancy using any Captcha systems, since that would add bulk to the site, and to avoid bulk make it complex plus I read this rather interesting article here with a few alternatives: http://webdesignledger.com/tips/why-you-should-stop-using-captchas. I went with the Javascript one. It's incredibly simple; all it does is hide the form for the antispam question (a simple maths problem) and fills it in for you. If the user doesn't have JS enabled, the form stays visible and can be filled in manually. Perfect.

As of yet I've had no emails, so it seems to be working. For now, until the bots become self aware and we are faced with a terminator-esque future except with more viagra and penis pumps.

I think tomorrow, well today now, I'll add a JS fallback to the placeholder attribute used on all my text inputs. Handy dandy site here: http://diveintohtml5.org/detect.html#input-placeholder.

Speeeeeed!

The past couple of days I've spent getting the v2.0.3 release of my portfolio to be as fast as I can make it. Quite often the applications I make for myself are abandoned at about 90% completion through either external circumstances such as exams, work or the like getting in the way or because I feel I am going in the wrong direction. As this app is not like my other projects I really wanted to learn optimisation techniques to get it speedy.

SpritesFirstly I converted all the icons to CSS sprites. Loading one image saves on HTTP requests, I think most browsers are limited to around 4 simultaneous downloads. So this is time wasted on icons that serve really only a superficial purpose rather than any core functionality. As well as this I used 2 spritesheets, one for normal displays and one for high DPI displays such as those on the iPhone 4. In version 2.0.2 and below I simply used icons twice the size needed and shrank them using CSS. On a normal display this is downloading 50% more pixels than needed.

Secondly I compressed my CSS using the only YUI compressor here: http://www.refresh-sf.com/yui/. This is handy for both CSS and Javascript. The difference in size between the minified and non minified is: about 5KB. Hey ho, every little helps.

Finally I moved all my JS into seperate files and placed them at the bottom of the page. Especially on the blog pages where it has to load the twitter stream and my code hacky fixy bit as outlined in the previous post. 

The results were impressive. Production environment rails is usually fast, but after my update it was lightening quick. On my mobile using the data connection it took 8.8 seconds to fully load the front page, my iPod using WIFI took 3.7 seconds and Chrome on my iMac took about half a second. Baring in mind that the sites list does contain relatively large images as the screenshots. Overall I'd say a lovely success.

Oh, and if you are wondering what server I am hosted on - its a VPS from http://fanaticalvps.com/. I highly recommend them!


Syntax Highlighting

Yesterday I updated the portfolio app to v2.0.2. This release focused on the blog posting UI, since I'd initially set it up with only the bare minimum features. Not wanting to go with the bloat of wordpress (as well as designing and skinning two applications) I'd set out to make this blog very very simple, however I really wanted a syntax highlighter.

After wrestling with Niceditor for quite a bit I got it sorted - but there was a problem. For some reason it was placing in on every line bar the first about 20 spaces. Came up with quite a hacky solution but hey it works, and I can always improve it later with further releases :). Here is the highlighter at work, with my hacky fix.


        function fixSyntax()
                      {
                      	hljs.initHighlightingOnLoad();
                      	
                      	$('pre code').each(function(i){
                      		var text = $(this).text().replace(/ {2,}/g, '').replace(/\t/g, ' ');
                      		$(this).text(text);
                      		console.log(text);
                      	});
                      }

Incase you're wondering, the highlighter I am using is: http://softwaremaniacs.org/soft/highlight/en/

Today's Progress

Today I've spent the morning fixing little bugs I noticed after I deployed this live yesterday, as well as adding a couple of features I'd wanted from the start.

The most noticable change is the list view option. Since the grid view only shows the title I thought it was a good idea to have a more detailed view - which also helps if say you're on a mobile device thats not particularly powerful, which struggles with the slide in detail panel on the grid view.

It still needs some tidying up style wise but its pretty much all there. There is supposed to be a screenshot to go with this post, but it looks like I've found another task to complete in the next release - improving the Editor in the blog posting UI.

And we're back!

It's been a tough first half of the month. As I eluded to in my previous post my A2 exams have just passed and I am breathing the fresh air of freedom. 

One thing I wanted to get sorted straight away was this site to actually look decent. Don't get me wrong I was pleased with my old one, as a design experiment it worked well - however I don't really think it reflected me as a person. What I was trying to aim for was to represent me as not a designer. Unfortunately it kind of lacked any subtlety (really? With a pink and blue colour scheme? Surely not!).

A while back one of my colleagues who is insanely good at this whole design thing sent me the Less Framework - which his site, and mine now runs on. It makes designing for multiple devices an absolutely breeze which if you browse this on a pc, tablet or phone you will notice all of them work perfectly (or as near as). So having ditched the, er, bold colour scheme for a nice white and blue one I am thoroughly pleased with my work!

As with the last one, my source code is open to anyone: https://github.com/Jamesyps/Portfolio-2.0