cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

... so there was this pen on the front page today in the morning ... and seemed like an opportunity for me to do what i like doing so much and quote Cosmo Brown announcing very seriously just to annoy my girlfriend's mother:

i'm just about to be brilliant!

... or otherwise annoying ... you have been warned ...

one lecture by an over blown ego coming your way at high speed!

take cover!

so here's the pen:

See the Pen Turtle Lost by Ahmad Shadeed (@shadeed) on CodePen.

this is one seriously chilled out dude this turtle isn't he!?

doesn't seem lost to me at all ... or even if he is lost ... hell, even if the whole world around him is falling apart ... and everything is absolutely shit ... and the shit is running really really deep, one thing is very clear and obvious ...

this little guy does not give a single fuck about it.

full stop.

i love it!

but for the moment let's leave him be in this relaxed state of his and take a look at the original graphic by @jeroenvaneerden:

Turtle Lost 404

... hmmm ...

... is this the same turtle?

... maybe it's his brother?

... or sister?

... or something?

... they do look very similar that's true but ...

... but maybe @shadeed who committed the html and css made a mistake with referencing ... i don't mean he did this on purpose or anything

... but it could happen, right?

i'm only going through this because there is something markedly different about these two turtles isn't there?

for the start you might say

well the dude turtle is moving while the less than dude turtle is not duh!

and then you might be excused for quoting Lina Lamont asking

what's the big idea anyway?

to which i would say

well there isn't any duh!

and add as explanation that i simply wanted to join in the fun by getting the dude turtle react to the position of the device, started to contemplate how different these two turtles are even though they are exactly the same, and how silly blink can turn chilled out element of a turtle into not so chilled out element of a turtle which in turn led me to contemplate how web is like a turtle ... at which point i realised it's sunday morning and i might really need some caffeine.

full stop.

<!--20 minutes and one cup of coffee later.-->

okay, so where were we? oh yeah the web is like a turtle and what i really have in mind here is only UI elements and i dare not going into other areas concerned but i would suppose they might be like turtles as well.

however we would look at this it translates into one simple to remember rule that could be applicable to all web creations:

micro-interactions are the name of the game... so i better change the color of these buttons ...

i can just imagine how whole army of highly trained ux experts working tirelessly on the usability of a button could be tripped over in a blink by a blink. rendering their whole expertise, work, time and resources that were poured into the web app they worked on ... well let's just say making it something you would not be chilled out about.

full stop.

i might need another coffee and i'm more than happy to leave this grim subject and go on to my fork of the initial pen and learn something about DeviceOrientation Event which i just discovered i know very little about with intention to disturb the peace of the dude turtle and also planning another rant on the issues surrounding authorship and referencing in the context of co-operative yet independent creative activity.

in the meantime though big kudos to @shadeed for his blink and to @jeroenvaneerden for his not so dude turtle

Quick practise on animating this cute turtle. Design source: http://drbl.in/oQWG

Forked from Ahmad Shadeed's Pen Turtle Lost.

This Pen is a fork of Ahmad Shadeed's Pen Turtle Lost.


Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.