Use LESS in JSFiddle, the easy way

If your like me then you love online ‘tinker tools’ like JSFiddle, they allow you to quickly prototype your ideas and to share them with the world. I have been using it for a while now but one of the things that always bugged me is the lack of LESS support in the panels 🙁

I decided to have a play and see if I can get LESS running but somehow still allow me to write my CSS in the correct panel. The quickest way I could think of doing this is with this one liner

1
2
3
<pre>
    (function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); })()
</pre>

It’s a really simple 2 step shim. First find the <Style> tag and change its type to ‘text/less’. Second tell less to refresh the styles on the page. You can see a working version here

Of course this may not be the best way of doing this but its the first thing that came into my head. Got any suggestions for an improvement?

I have emailed Piotr Zalewa to see if there are any plans to implement LESS in the future so I will update here if I get a reply.

Edit: JSFiddle have their docs on GitHub here.

An Issue has already been raised to add LESS support but it has been closed of saying it will be in the Beta release

https://github.com/jsfiddle/jsfiddle-docs-alpha/issues/168

Update: Piotr replied to my email and informed me they are planning on adding a few extra languages to support. Although they state in the above issue that LESS support will in bete he says it might be possible to add it before although there would be no ETA.

Thanks for the reply Piotr and looking forward to future updates ^_^

Move the web forward

I figure I don’t post enough around here so I’m just going to start writing about the things that interest me, hope you like them and follow along.

I have been trying to catch up with the Web Platform just lately and I gotta say, I’m excited!!! There are so many new things on the horizon, so many new things to learn, so many new things to try and wrap my head around. Lets take a look at some of them and how you can help.

Firstly let me just say I am in part writing this because of Move the web forward.

Publish what you learn and don’t be afraid to make mistakes. Publish to your personal blog and keep your posts updated. Be sure to speak with your own voice! Remember that it is okay to not be an absolute authority on a subject to author a post! Always ask questions and prompt conversations. There is seldom a wrong question or a wrong answer.

If you havn’t seen this site before then go take a look as it has a lot of like minded people and a lot of articles / projects to learn from.

New features

Web Components

These excite me the most (and Intents) as I can for see a lot of open source components being written and made into shared libraries. The new component model for the Web (aka Web Components) consists of four separate pieces designed to be used together to let application authors define widgets that are easy to reuse and share. The pieces are:

  • Templates, which define chunks of markup that are inert but can be activated for later use
  • Decorators, which apply templates to let CSS affect rich visual and behavioral changes to documents
  • Custom Elements, which let authors define their own elements, including new presentation and API, that can be used in HTML documents
  • Shadow DOM which defines how presentation and behavior of decorators and custom elements fit together in the DOM tree.

Note: Decorators and custom Elements are called components.

I can’t say I’m looking forward to custom elements though as I think this will cause chaos when trying to read through the HTML of a site. If everyone suddenly starts to create their own elements, and their own API for using them then this has the possibility of getting out of hand real fast.

Check the current status of Web Components

Web Intents

Wow, I’m so glad this is coming to the Web! Most modern web sites are inter-connected, for example logging into Facebook, sharing on Twitter, editing a photo with Picasa. Users expect popular sites to just work with their favorite service but the truth is these things take time to implement.

It is impossible for developers to anticipate every new service and to integrate with every existing service that the end user prefers. Instead most sites just stick to the most popular services and this integration still takes time to complete.

Web Intents to the rescue! Web Intents is a framework for client-side service discovery and inter-application communication. Services register their intention to be able to handle an action on the user’s behalf. Applications request to start an Action of a certain verb (share, edit, view, pick etc) and the system will find the appropriate Services for the user to use based on the user’s preference.

Web Intents puts the user in control of the service integration and makes the developer’s life simple. To read up on Web Intents head on over to http://webintents.org/ also make sure to check out their Demos.

Push Notifications

Another great feature that I think the Web could really do with. These notifications work the same as on iOS devices where you don’t need a website open to receive a notification.

Google Chrome already supports desktop notifications which is a great start and I’m sure they will keep the same design. You can only receive these notifications while you are on the website in question though. Imagine just browsing the web and then a push notification coming through saying that an order has been dispatched?!!

There is still a lot of work that needs to go into Push Notifications as there isn’t any standardization and the only browser support is through a Chrome extension API. This doesn’t mean we can’t be brushing up on it now though 😉

There are loads of other great features coming soon (some are already here). Here is a list of the general Web Platform features:

  • Styling Block elements with CSS filters and 3D transforms
  • Debugging on Mobile devices
  • Awesome developer tools
  • CSS Regions,new tools for text layout (think magazine layouts). Demos
  • Payments API
  • WebCam access through Javascript
  • Web Audio
  • WebGL
  • NaCI and GamePads

I would suggest heading over to http://movethewebforward.org/ and having a read through some of the articles and do like what I did and just write about them. The Web is what we make of it and it’s will get better with out help.

You can make the web as awesome as you want it to be. Browser vendors, standards editors and library creators actively seek your voice and your contribution.
Together we can move the web forward.

Is there anything I have left out? Got anything to add? Leave a comment 😉

1 Like no Other Launched

Remember how I posted that Sneak Peek back in September? Well it was for our latest launched website 1 Like no Other! Why not check it out and then come back and read the rest of this article?

I don’t usually do write-ups on the sites that I have worked on but I enjoyed this project so why not.

The homepage for this site has gone through 4 different version that include a CSS3 animated intro, a HTML5 Book where you can click through each page and even a Flash version of the above in hopes that it would be faster to download on slower connections.

1LNO Homepage

The end version the client went for was a subtle parallax effect which works great! It gives you the ability to see all of graphics and illustrations for this seasons clothing. It went through many different revisions and many different layers (9 layers at one point) just goes to show that more is not always better.

1LNO Listing page

The product listing page was also fun to create for this project. The main filter system is pulled in through Ajax to reduce page load and to provide a nicer experience when navigating, who wants a page refresh anyway?

Once an Ajax request is finished all of the products animate to their new locations. This is a great effect and I hadn’t done anything like this before so it was great to learn something new at the same time. Most of the text that is on and around the site in a custom font called Paulson which works really well and is placed on with Cufon.

1LNO Product page

The product page was another nice one to do. I added some subtle animations to the alternate images and to the add to basket just to catch the users eye when they first navigate to it.

We went through a few versions of the carousel at the bottom of the page aswell. This went from a simple left and right carousel, to just one large image in the middle that was more like a zoom of item underneath it. The end version is definitely better and uses the jQuery easing plugin to give the animations a smoother transition.

When the product page was first made we just had a standard zoom on hover effect so that a potential customer could see the detail of the shirts. We found that this didn’t show enough though, instead I created a custom full page zoom to really show them off.

Custom product zoom

Well that’s the main pages of this ecommerce build but I have included more images below for you to look at. Let you know what you think in the comments or even go check out the website for youself and have a look around 😉

CSS Off 2011

I finally got around to uploading my submission for CSSOff 2011 (http://www.unmatchedstyle.com/cssoff/).

I gotta say I’m not happy with it though. It started off really good, but then I got lazy and started putting it off. Next thing I knew I was coding away while Andrew was playing the Rocky theme tune on his phone. The design was really good and everything was meant to be responsive but the bottom half of the site just went wrong. Not through lack of skill, but lack of time.

Have a look for yourself here http://www.validatethis.co.uk/cssoff-2011/

I don’t think the submissions have been marked yet so I don’t know where I came but I will update this when I find out. I’m also going to enter into any other competitions like this so if you know of any then post them in the comments 😉

New Twitter background

I had never really been one for Twitter, maybe because I just didn’t give it enough time but over the last few days I have been trying to be a little more active and engaging. I still only have 33 follows and I thank them all for adding me, I just need to get a few more.

To make my page seem a little more inviting I decided to design my own background. I love the way it has turned out and I think it perfectly compliments me and my style. Let me know what you think to it.

HelloWorld – three.js edition

I decided that it’s time I learnt HTML5 Canvas!

The idea has been swirling around my head for a while, but I didn’t have anything I would want to do with it? I started looking around and eventually settled on three.js. If you havn’t already seen it then go ahead and take a look, there are loads of cool examples.

OK plenty of examples, jsFiddle open… Go…. 2 hours later, 55 saves (or commits which ever what you look at it) and this is what I have come up with.

Just a quick cube, the stats counter, a quick debug logger for me and the awesome dat.GUI for some quick controls. Next I will try some keyboard controls 😀

Sneak Peak

A sneak peak of what I’m working on here at work. I’m having to animate everything but as you can see this has rotations, which are always fun to try and implement into older browsers.



Luckily I found some great plugins for jQuery that make the job a lot easier.

jQuery Transform
https://github.com/heygrady/transform/
This plugin uses CSS3 transforms if they are supported and if not then relies on the matrix filter for IE8 and below meaning it allows you to transform layers all the way down to IE6 and gives you loads of options like


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Go Crazydd
$('#example').transform({
    matrix: [1, 0, 0, 1, 0, 0], //applies a matrix
    reflect: true, //same as rotate(180deg)
    reflectX: true, //mirrored upside down
    reflectXY: true, //same as reflectX + rotate(-90deg)
    reflectY: true, //mirrored
    rotate: '45deg', //rotates 45 degrees
    skew: ['10deg', '10deg'], //skews 10 degrees on the x and y axis
    skewX: '10deg', //skews 10 degrees on the x axis
    skewY: '10deg', //skews 10 degrees on the y axis
    scale: [1.5, 1.5], //scales by 1.5 on the x and y axis
    scaleX: 1.5, //scales by 1.5 on the x axis
    scaleY: 1.5, //scales by 1.5 on the y axis
    translate: ['20px', '20px'], //moves the transformation 20px on the x and y axis
    translateX: '20px', //moves the transformation 20px on the x axis
    translateY: '20px', //moves the transformation 20px on the y axis
    origin: ['20%', '20%'] //changes the transformation origin
});

jQuery Easing
http://gsgd.co.uk/sandbox/jquery/easing/
When animating things its always nice to have more easing options that the standard ‘linear’ or ‘swing’. jQuery Easing gives you around 32 extra easing’s to make your job easier. It also allows you to setup your own custom easings.

PHP MVC Framework? Easy!!

OK been working on a project for work with +Andrew Beniston and it seems to be coming along quite nicely. We have done all the design work for the web pages and were just re-coding the back-end so that things should be a lot easier to manager.

We decided to make a PHP MVC framework as our workplace are currently using an ASP.NET MVC backend and it will help us to get our head around things more.

We started following a tutorial but quickly had to move away from it as our needs were a lot different. Were about 40% through at the moment, but not sure what pics if any to post on here (if any)? let me know…

Aaron Layton – Google+.

Touch it 1 World Plays

I decided to take a night off coding Touch It 2 tonight and instead I tried to experiment with some of the data collected with Touch It 1.

I decided it would be good to visualize where all the players are coming from as this may help when making Touch It 2.

I wanted to be able to see the plays being added to a drawing in realtime so I had a quick search around the net and came across this script.

http://www.patrick-wied.at/static/heatmapjs/

 

Heatmap.js was exactly what I was looking for, it even provided a nice way to draw at certain x y locations. After I had got a quick test knocked together the rest just fell into place.

I used PHP+MySQL to generate a Javascript array which I then looped through with a delay so I could see each dot being added. The end animation is quite good even if I do say so.

I didn’t spend much time trying to tweak the results as I feel the saved PNG shows me what I wanted to know.

Touch It World Plays

That’s it really nothing else special about it… Just a heatmap, move along, nothing more to see here…..