Angular is a framework that extends html and allows you to create your own reusable web components (called directives). Recently I have been learning Angular, it's taken a little bit of time to understand as the documentation is not very good, but at last I think I have it.
I have created this one page application using Angular, HTML5, CSS3 3D transforms and GSAP-js.
Skill set: HTML5, Javascript: AngularJS / GSAP-js, CSS3: 3D Transforms
I am not ashamed to say that I'm incredibly excited about the GreenSocks move into Javascript with the GreenSock Animation Platform GSAP-js. The GSAP Javascript libraries are almost identical to their Actionscript counterparts, making Javascript animation (almost) the same as Flash/Actionscript animation.
Expect to see lots of cool, exciting experiments and tutorials soon. In the the mean time, check out some initial experiments and the funky controls below :)
I wanted to familarize myself with the SoundCloud API. My first impression is that it is well written and intuitive.
I look forward to learning more and seeing what can be done.
Skill set: HTML5, Javascript: Soundcloud API / handlebars.js / GSAP-js / Jquery, css
A page to contain my experiments using CreateJS. The first of which can be seen above in the header and is explained here.
Skill set: Photoshop, Javascript: CreateJS / GSAP-js / modernizr, html, canvas, css
In this series of tutorials I shall show how to build and control a custom youtube player and video site using the developer API from Youtube.
I'll start off with a few embedding techniques - including adding an html5 video fall back for browsers without flash; creating a responsive player using css; adding controls using javascript and later jquery; tracking user interaction using Google Analytics; and then creating a fully functioning responsive video site which pulls its information from a youtube channel or playlist.
Read more
Skill set: Responsive web design, css3, Javascript: Youtube API / Jquery, PHP, html5
Possibly not, but I have just discovered this great resource of clearly written, easily digestible, yet thorough tutorials javascriptissexy.com
I shall find the time to follow all the tutorials in this site regardless of the level as they provide a complete understanding of subjects I thought I already understood.
For example after reading the 'This' and Apply, Call and Bind tutorials, I realise my original understanding of these concepts and methods was quite patchy. Fortunately it is not anymore :)
Learn Backbone-js Completely - that's the plan, and this seems like an excellent place to do it. Bring it on!
With the demise of Flash as the preferred method of creating rich interactive websites, animations or web application, you would be forgiven for thinking Adobe might of lost their edge.
However, when I attended the 'Create the Web' conference in London, I discovered that far from falling behind, Adobe have been steaming ahead building a suite of FREE web development tools for us to use.
With the wealth of information out there and the constantly evolving world of web development it's often hard to know where to begin. It's even harder to know if the information you are reading is current and comes from an informed sources. Fortunately I have recently stumbled upon a fantastic resource called the html5 bolierplate which was put together by a team of excellent developers including Paul Irish, and Divya Manian.
As Paul Irish describes it, "It's essentially a good starting template of html and css and a folder structure that works[...] but baked into it is years of best practices from front-end development professionals."
Years of best practices from front-end development professionals, nicely packaged up and explained in depth for the likes of me to eat up. Thanks guys :)
With CSS3 is now possible to create multi column layouts like you have in newspapers, without adding extra markup to your HTML.
Skill set: Responsive web design, css3
Inspired by Nicolas Gallagher, I have redesigned this website to use pure css and no images to create the shadow effect under each article. In addition I've added CSS3 box shadows and rounded corners for supporting browsers
Skill set: css, html
Google have created a new page speed analysis tool to help developers optimise websites for desktop and mobile. This very web page, currently scores 96% for desktop, a score which includes points being deducted from external scripts I have no control over such as Google's own for google-analytics script. The mobile score is 86% for mobile. Not as good but as desktop but still good. :)
