Why I think CSSDeck.com is good for the web.

So a friend sent me a quick link to a neat JavaScript CSS3 game. It was built in CSSDeck.com. My first thoughts were “Cute game” but when I investigated the website I learned how important it could be for new web developers learning new frameworks and in turn make the web better.

CSSDeck allows you to write up a website in seconds similar to JSfiddle and have it visible to the world. It allows you to write in popular CSS preprocessors like  LESS and SASS as well as Javascript frameworks like Coffeescript. The Snippets are voted on and comments can be made.

The real genius thing about it is anyone can then edit your code. So we now have collaboration for these little titbits of CSS/HTML. Other dev’s come in and add there little magic and Boom! we have a hiving developer network.

After signing up to the service, I saw a calendar of all things and started adding my Front end dev love to it. Showing the user the best possible method for creating a Calendar with CSS/HTML. Now its not just limited to small little things like that. There are full blown web applications in this place using 3D and webGL that I have no doubt a number of users have contributed too.

Below is a link to the popular items on the site: http://cssdeck.com/popular

 

Bourbon SASS

CSS frameworks tend to be very large and bloated. They can be very handy and if the performance downside wasn’t an issue id think they would be more popular on the web today.

Bourbon a SASS CSS framework has taken this problem and put it on its head. They are loading a comprehensive and very handy CSS framework as a SASS file. This include browser vendors prefixes, CSS Animations, Button styles and many other current CSS techniques. Normally you wouldn’t dare to add these CSS rules as your CSS would bloat to the size of a chocolate happy hippo. But with SASS these won’t be included and will only end up in your final CSS if used. Genius. I am now expecting a lot more of the these SASS frameworks to pop up as it solves a lot of CSS framework issues at present. Maybe even a CSS Preprocessor specifically designed for CSS frameworks might be present in the near future.

Button Example
To include a button style simple add the following line of code:

button { @include button; }

Facebook releases instagram killer

So Facebook has finally played its cards in regards to it’s acquisitions of instagram, The mobile photo sharing site which boasts a user base of 40 million users.

Facebook has released its Facebook Camera app on the Apple App store, which is a hybrid of instagram and Facebook. The UI screams Facebook but the filter effects we love about instagram have been ported across to the app.

I must admit the App is very solid and has great integration into Facebook. The filters have sensible names like “Bright” and “Contrast” compared to instagram’s “Brannan” or “Inkwell”, they also appear to be weaker effects compared to instagram. This could be because the majority of Facebook photos are of friends and family who don’t seek the more artistic filters on instagram.

I personally think this app will be a hit however only time will tell. Will it kill instagram? No. I think the loyal users of instagram will continue to use instagram. 

A simple javascript HTML5 link replacement function.

A client needed an alternate way of creating links due to a translating tool breaking all links it translated. I suggested a solution using HTML5 custom data attributes with JavaScript. Basically what i’m doing is adding a new data-href attribute to hyperlinks that need to be ignored by the translation system. I am then triggering the link with a jQuery bind event then stopping the original link from triggering with javascript. I’ve tested the code and it should work in IE7.

A normal link

This is a normal link. The markup looks like this:

<a href="https://www.google.com.au/">Google</a>

Here is a normal functioning link using a traditional href attribute: Google

Alternate link

This is the alternate link using custom data attributes which the translation system should ignore.

The mark up looks like this:

<a href="# "data-href="https://www.google.com.au/">Google</a>

This is the new link using the new custom attribute tag: Google

Mark up:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		alternateLink.init();
	});
	var alternateLink = {
		init: function(){
			$('a[data-href]').bind('click', function(){
				var a = $(this).attr('data-href');
				window.location.href=a;
				return false;
			});
		}
	}
</script>

Swiffy converts Flash to HTML5

Google has made Swiffy a neat tool which converts Flash SWF files to native HTML5. At first I was a bit sceptical. So naturally I uploaded a fairly heavy vector world map SWF I had created for a client. True to its word it converted the SWF to HTML5. There were noticeable performance issues with the HTML5 output. So much so I would stick to flash for this current implementation.

The source code is pretty much unreadable, so updating the HTML5 output might be a painful task. Some other limitations are Swiffy only supports SWF version 8 running Action Script 2. You will need to refer to the website on what actions it supports as it does have limitations. I would like to see some Action Script 3 supported in the future which I think will happen as it regularly gets updated by Google.

I uploaded a SWF that had a AS3 property. Surprisingly it ran. However when the script got to the AS3 it stopped.

Right now Swiffy is in Beta. It also has a Adobe Flash Professional CS4 extension allowing you export from flash which is quite handy. It also has a log showing the errors it encounters during export which I feel is essential.

If you would like to view a website built with Swiffy. Visit onehourpersecond.com which used Swiffy. Swiffy also offer a gallery of examples.