A Web App for Converting CSS to LESS/Sass

Attending events like Web Directions Code give you a lot of food for thought. Nicole Sullivan’s advice to “grep your styles” has spurred some healthy discussion, and more than one web app. I think the biggest take-away from that is, much like jQuery and JavaScript, CSS pre-processors add enormous value and they’re here to stay. 

I made this little open source experiment to see how difficult it would be to programatically parse a CSS file and find the colours used. From here you could sort by count or hue. Rename what you felt mattered on the fly. Download your output. Whatever.

It turns out I wasn’t the only one to be inspired by Nicole’s talk, and Tom Genomi went on to produce CSSDig (albeit in python). It parses files and identifies redundancy. 

A colleague also put me on to CSS2Compass, which takes what I was trying to achieve to the extreme. And while it may lack some interactivity, it certainly makes up for it in features. 

Building my experiment was relatively simple. Open source scripts and libraries greatly accelerated the process, so the time I spent tying the loose threads together was minimal.

  • Flat UI dictates the look and feel (Bootstrap dependent)
  • Dropzone handles the file drop
  • Filesaver produces the downloadable blobs
  • The colour match RegExp and array magic come from Stack Overflow
  • Eventually I’ll port the code to Knockout or Angular

Basically, don’t write code that’s already been written.

All things said and done, there are still a few bugs and edge cases. I really don’t want to spend much time fixing them if this script isn’t particularly of value, so I’ll wait and see how it’s received.

image  image

User Styles: The Age

Alternate title: "The day I took Occam’s razor to The Age"

I really dislike visiting theage.com.au. It’s ridden with click-bait articles, annoying advertising and shameless cross promotion, but for some reason we can’t seem to shake it as a local news source. What else are we going to read, the Hun? I’m not alone in expressing these sentiments, and this is a post I could have composed almost entirely from tweets. 

I’ve highlighted all ‘news’ on The Age homepage (i.e., not entertainment, sport, editorial, lifestyle, etc) dl.dropbox.com/u/128401/Scree…

March 18, 2013

This got a few people discussing custom user styles for The Age, and I decided to have a dabble. 

Are you left wondering why I hid certain features? Particular “news” streams, comments, author bios et cetera? Let’s focus on the news, and nothing but the news. Reading the comments of any Australian news website, generally comprised of deliberate trolling or plain good old fashioned stupidity, is a pain I wouldn’t wish upon anyone.

*passes thru suburbs* roll up ur window, son. this is a bad neighborhood. this is where ppl who comment on newspaper articles live

January 17, 2013

You can try my user styles on for size by installing something like Stylish (Chrome Firefox) and copying the styles across from the GitHub repository. I attempted to make the upgrade process as seamless as possible by referencing the raw CSS with an import tag but GitHub prevents this by serving up a different content-type. That would have meant any improvements I made would have reflected immediately. I’ll think of something else.

image

image

iosOverlay.js — iOS Overlay/Notification Plugin

Here’s a plugin that allows you to place iOS-style notifications over your web app. It’s useful for showing short succinct messages, or notifying the user of what action is being performed. It’s great for the same reason that the native iOS overlays are too; it’s intrusive enough to grab your attention, but doesn’t steal focus entirely. 

This plugin works equally well on desktop, mobile and tablet.

image

Given the trend towards micro js libraries and removing dependencies, this plugin can stand alone or work nicely with other frameworks.

Features and details:

  • Uses CSS3 transitions for smooth animation
  • Plays nicely with spin.js for sweet spinners
  • Notifications can show for a duration or be manually closed
  • Notifications can be updated on the fly (icon/text)
  • Framework agnostic (but you can degrade to jQuery animation if CSS animation is not supported)
  • IE7+ support (minus rounded corners) and all the usual suspects
  • Fully documented
  • MIT/GPL/Who gives a shit just don’t be a nozzle about it license

To do:
If there’s a bit of interest in this project then there’s more I’d like to do.

  • Add fancy CSS 3D transitions (drop, 3D drop etc)
  • Use fader.js for cleaner animation syntax (one less optional dependency) 
  • Add a fallback IE rounded corners PNG
  • Option to dismiss with ‘Esc’ keypress
  • Add some retina icons

image image

Repository Updates (iOS Theme + jQuery.Gantt + Aristo)

Hey guys, not much has happening on the design/development front while I’ve been away on leave. Today I’ve landed some fairly big pull requests and bug fixes to what are probably my three biggest repos.

jQuery.Gantt

This is the big one. I made some pretty major changes before I went away but wanted a few more people to test it before I did the writeup.

I received a fairly major (and necessary) rewrite from Leo Pfeifenberger who sped up this project like you wouldn’t believe. It wasn’t a simple matter of landing the pull request, as the performance changes did come at the cost of coding standards and consistency. Some parts had been buggered by what looked like Visual Studio auto formatting, but they could have been hand-coded that way too.

For future reference, here are my own personal front end dev guidelines that have been received well by the community. They’ve changed in some regards based on feedback from individuals and organisations and represent how you should aim to format your code.

  • Major performance increases.
    A before and after IE9 test shows performance going from 20 seconds to 400ms.
    That’s 2% of the previous run time.
  • All new click events - fired when clicking an item or when clicking the empty space. Use this to edit events or create new events at certain points.
  • State persistance - requires cookie.js to work.
  • Scroll to today on load
  • Extensive documentation
  • Defined a license (MIT)
  • Removing $.ajaxSetup, which was corrupting other scripts in the page.
    According to this stackoverflow answer it was only there to ensure it worked in ASP.NET situations. If you’re using it there, consider setting $.ajaxSetup externally.

Unfortunately that means there are some new issues:

  • Code standards - I spent a considerable amount of time running the code through JSHint and fixing issues. I got most, but that included setting a few ignores.
  • Eval - yep, as above, you’ll notice that there’s an eval in the code. Yuck.
  • Holiday and “Today” highlighting are not occurring on the cell, only the header.

Two steps forward one step back. No biggie.

image image

iOS jQuery Mobile Theme

I realised there was a big difference between what I was seeing in Chrome, the iOS simulator and my iPhone running iOS 5.1. Turns out the iOS simulator was only running 4.3.1, so I’ve now got the 5.1 simulator and that’s helped me resolve some visual quirks.

  • Fixed: header bars had black top border
  • Fixed: Vertical centring of header buttons was off (related to above, layout woes)
  • Fixed: Black buttons had blue text shadow
  • Fixed: Footer icons had crept to the right with last update (jQuery Mobile styles took precedence)
  • Pull Request: <label> styles coming from poorly scoped selector
  • Pull Request: Demo page typo
  • Set demo page transitions to “slide” by default
  • Set all demo page toolbars to be position=”fixed” by default
  • Decided on licensing (MIT)

image image

Aristo jQuery UI Theme
  • Fixed: Cross browser CSS3 animations appear to have been re-instated.
  • Pull Request: Added a non-prefixed value that I missed.
  • Pull Request: Widget nesting issue fixed.


image
 image

jQuery Mobile 1.0.1 - iOS Theme Compatible

I haven’t touched the iOS inspired jQuery Mobile theme in quite a while, but a few of you have been messaging, mailing at tweeting at me asking if I’ll support the jQuery Mobile 1.0 build. And….. it’s done. Here’s the list of changes:

  • Updated to jQuery Mobile 1.0.1 build
  • Fixed graphical issues stemming from this: #23, #24 and #25
  • Page buttons now take on gradient-less style (previously only <a> tags)
  • Merged a pull request related to a button icon bug fix

As always, the demo is up to date and available.

image image

HTML iOS Notifications - UX Lab 007

I thought I’d build a facsimile iOS notification plugin for shits and giggles. It’s pretty much the exact opposite of a good UX, but it’s more of a proof of concept than anything else.

image

  • It’s 100% wide on standard and retina iPhones and 60% on desktop and iPad resolutions. 
  • It has built in retina icon handling.
  • Doesn’t break middle mouse clicks when using a URL.
  • Passes JSHint.
  • It works with Chrome, Safari, Firefox and I believe Opera, but I haven’t tested.

Documentation and options are available on the demo page.

It also has its own GitHub repository.

image image

3D Accordion Effect - UX Lab 006

I posted the following experiment as a way of demonstrating just how far the line has blurred between web based animation and OS based animation. I saw Dribbble shots (one and two) by Indian designer Pranav Pramod and was inspired to replicate the effect in CSS3.

image

Unfortunately nothing is ever as easy as it seems. If it was, someone else would have already posted a similar effect. The problem is that when animating something with a 3D transform with a forced perspective, there is no way to measure or mirror the actual height represented in the browser using CSS. If you animate the parent element from 0px in height to 30px, it’s a straightforward linear animation. The 3D transform, on the other hand, changes on a non-linear scale because of the perspective.

There are two solutions, neither of which are desirable.

The first involves JavaScript, which frankly I had tried to avoid. In this example, the animation is triggered by the addition of a CSS class via JavaScript - but could just as easily be bound to an :active:target CSS event. The only way to get the actual browser rendered height of the element is to get it via JavaScript with the obj.clientHeight getter. While discussion pointed to wrapping the object in a parent element and not needing JavaScript at all, this does not work in all browsers.

Instead the JavaScript method involves binding a function with requestAnimationFrame which sets the parent objects height to mirror the calculated height of the transformed object. Accurate, but if we wanted to perform calculations many times per second, why did we bother animating with CSS at all?

The other method, considerably less accurate and very fiddly, is to match the easing or timing of the two animations. It may be possible to create a custom timing function using cubic-bezier which matches the rate of easing of a 30px tall object, rotating from -90deg to 0deg, with a perspective of 400 units. But why would you? That’s shit house.

Maybe in this instance a flat out Canvas animation would have been much more sensible. You’re still performing a function every ‘x’ milliseconds, but at least the canvas itself may be hardware accelerated. Until CSS animation matures, we will most likely have to abuse the JavaScript add-ons such as the one described earlier. Or even better yet, sever the ties with HTML and CSS and - get this right - use graphical languages for what they’re intended.

Ninja Edit: Also, you can’t yet animate background gradients so the whole 3D effect on the depth of the flaps is kind of impossible for now.

Sad-face Edit: The second I posted this, someone posted pretty much the exact same thing to Hacker News in a much more polished way. Check out Paperfold CSS.

image image

My new personal site is live!
It&#8217;s just a little micro-site tying together a range of social media websites. There&#8217;s some fancy coding behind the scenes that predicts where I&#8217;m going to be at any given time, because we&#8217;re all a walking bell curve. It&#8217;s good to get it out the door, because designers are notorious for over-designing and iterating their personal sites.
Enjoy,taitbrown.com 

My new personal site is live!

It’s just a little micro-site tying together a range of social media websites. There’s some fancy coding behind the scenes that predicts where I’m going to be at any given time, because we’re all a walking bell curve. It’s good to get it out the door, because designers are notorious for over-designing and iterating their personal sites.

Enjoy,
taitbrown.com 

I&#8217;ve just pushed some pretty hefty changes to the jQuery.Gantt project I&#8217;ve been developing with lately. I tried some other Gantt libraries, but they were either dependant upon ExtJS, no longer maintained or just didn&#8217;t play nicely with my pre-existing code. 
I settled on jQuery.Gantt, but there were a few things I found that really kept it from being an accessible, front-end developer friendly resource. For instance, you could previously only specify a URL as a data source, and not a local object. I needed to pre-parse another JSON feed before plugging it into the chart. There were also some conflicts when using the Twitter bootstrap, and the inability to place attributes on the Gantt bars meant no sexy popovers like below.

A lengthy list of changes follows:
Reduced conflicts with Twitter Bootstrap by name-spacing styles
Source now accepts data from a local object, not just a JSON call  
Can now extend data properties on to bars for use with Bootstrap popovers etc.
Code is now &#8220;use strict&#8221;
Fixed a couple of errors resulting from &#8220;use strict&#8221;
Various English translations: renamed months and days to english, hollydays/holidays
Redesigned buttons and slider with CSS3 and an image sprite
Modified category colours and styles
Made chart 100% width so it responds to parent container width
Began enforcing front end dev guidelines such as double quotations (but singles on HTML strings), triple equals comparison and using spans instead of hyperlinks for JavaScript interactivity
Updated demo page doctype to HTML5
Moved body styles from stylesheet to page to reduce style conflicts
 

I’ve just pushed some pretty hefty changes to the jQuery.Gantt project I’ve been developing with lately. I tried some other Gantt libraries, but they were either dependant upon ExtJS, no longer maintained or just didn’t play nicely with my pre-existing code. 

I settled on jQuery.Gantt, but there were a few things I found that really kept it from being an accessible, front-end developer friendly resource. For instance, you could previously only specify a URL as a data source, and not a local object. I needed to pre-parse another JSON feed before plugging it into the chart. There were also some conflicts when using the Twitter bootstrap, and the inability to place attributes on the Gantt bars meant no sexy popovers like below.

image

A lengthy list of changes follows:

  • Reduced conflicts with Twitter Bootstrap by name-spacing styles
  • Source now accepts data from a local object, not just a JSON call  
  • Can now extend data properties on to bars for use with Bootstrap popovers etc.
  • Code is now “use strict”
  • Fixed a couple of errors resulting from “use strict”
  • Various English translations: renamed months and days to english, hollydays/holidays
  • Redesigned buttons and slider with CSS3 and an image sprite
  • Modified category colours and styles
  • Made chart 100% width so it responds to parent container width
  • Began enforcing front end dev guidelines such as double quotations (but singles on HTML strings), triple equals comparison and using spans instead of hyperlinks for JavaScript interactivity
  • Updated demo page doctype to HTML5
  • Moved body styles from stylesheet to page to reduce style conflicts

image image

Flash-free Google Analytics with Highcharts - UX Lab 002
The reliance upon Flash to produce the charting on Google Analytics has frustrated myself and other web devs for a while now. When Google announced a new premium package it appeared that they had spent some time overhauling their product. I was genuinely curious, as it&#8217;s impossible to view your analytics on an iOS device without using a third party application. I was, of course, disappointed. I made what I thought was a valid comment on Hacker News and entered into a bit of a debate.
Regardless of Android vs. iOS motives, regardless of internal politics, what I said still holds true. A front end dev could pump out a proof of concept with a jQuery UI datepicker and the amazing Highcharts in a matter of minutes. I decided to go the other way and produce a facsimile product that took just over an hour.
Highcharts is an absolutely amazing product. You might catch me harping on about it on Twitter every so often, but it&#8217;s because I think it&#8217;s that damn good. It&#8217;s a mature product, well supported by the creators on it&#8217;s support forum.
There was little I wasn&#8217;t able to visually match between the libraries. The remaining gaps such as the microcharts could probably just be patched with jQuery sparklines or something similar.

Put simply, there is no technological reason Google couldn&#8217;t release a non-Flash version of Analytics tomorrow. They probably already have one in their own labs. Why has it taken so long? I can&#8217;t answer that. But I&#8217;m not sure I can wait much longer either.
 

Flash-free Google Analytics with Highcharts - UX Lab 002

The reliance upon Flash to produce the charting on Google Analytics has frustrated myself and other web devs for a while now. When Google announced a new premium package it appeared that they had spent some time overhauling their product. I was genuinely curious, as it’s impossible to view your analytics on an iOS device without using a third party application. I was, of course, disappointed. I made what I thought was a valid comment on Hacker News and entered into a bit of a debate.

Regardless of Android vs. iOS motives, regardless of internal politics, what I said still holds true. A front end dev could pump out a proof of concept with a jQuery UI datepicker and the amazing Highcharts in a matter of minutes. I decided to go the other way and produce a facsimile product that took just over an hour.

Highcharts is an absolutely amazing product. You might catch me harping on about it on Twitter every so often, but it’s because I think it’s that damn good. It’s a mature product, well supported by the creators on it’s support forum.

There was little I wasn’t able to visually match between the libraries. The remaining gaps such as the microcharts could probably just be patched with jQuery sparklines or something similar.

image

Put simply, there is no technological reason Google couldn’t release a non-Flash version of Analytics tomorrow. They probably already have one in their own labs. Why has it taken so long? I can’t answer that. But I’m not sure I can wait much longer either.

image image

Duck Hunt - UX Lab 001
I made this little experiment about 6 months ago. It was a chance to play with CSS3 perspective transforms and a new JavaScript pattern I had been playing with at work. I never hosted it anywhere and in turn never really showed it to anyone, so here it is. The code is horrendously overwritten, and the visuals are over-designed, but it&#8217;s just a bit of fun.
 

Duck Hunt - UX Lab 001

I made this little experiment about 6 months ago. It was a chance to play with CSS3 perspective transforms and a new JavaScript pattern I had been playing with at work. I never hosted it anywhere and in turn never really showed it to anyone, so here it is. The code is horrendously overwritten, and the visuals are over-designed, but it’s just a bit of fun.

image image

Introducing the UX Lab
The lab is a place for me to share my thoughts and experiments with the web development community. While the name indicates a user interaction and user experience focus - I&#8217;ll also be sharing CSS3, JS and HTML5 tidbits. My aim is to make the web a better, more consistent place. And what better way to achieve that than by leading by example.
The experiments will be hosted as one main repo on GitHub. That way you can easily view the code, download any resources, as well as forking or branching it for your own purposes.
Some of the cool things to come:
Credit Card Type - Passive Selection
jQuery UI Slider Toggle Switches
Mac vs. Windows Close Buttons
Flash-free Google Analytics 
and more&#8230;
 

Introducing the UX Lab

The lab is a place for me to share my thoughts and experiments with the web development community. While the name indicates a user interaction and user experience focus - I’ll also be sharing CSS3, JS and HTML5 tidbits. My aim is to make the web a better, more consistent place. And what better way to achieve that than by leading by example.

The experiments will be hosted as one main repo on GitHub. That way you can easily view the code, download any resources, as well as forking or branching it for your own purposes.

Some of the cool things to come:

  • Credit Card Type - Passive Selection
  • jQuery UI Slider Toggle Switches
  • Mac vs. Windows Close Buttons
  • Flash-free Google Analytics 
  • and more…

image image

jessedodds

I’ve been using the Select Menu plugin by Filament Group, but this looks like it’s possibly better. The reason I like the Filament Group one so much is it’s adherence to jQuery UI practices in classing etc and it’s full ARIA compliance.

jessedodds:

Chosen is a javsacript plug-in makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

Project page on GitHub
iOS Inspired jQuery Mobile Theme
jQuery Mobile doesn&#8217;t deviate far from the pattern established by its sibling libraries: provide something that normalises functionality and/or design across browsers and operating systems. 
The work by the Filament Group has been vital for standardising the look and feel of jQuery Mobile, especially when dealing with incredibly dated or under-featured mobile browsers. Borrowing upon conventions established by both the iOS and Android operating systems, they created something that is palatable across a range of devices.
There will be odd instances when you need an application to look as close to native as possible. I completely agree with the Filament Group&#8217;s arguments against this, but currently designers are forced to roll their own solution. What I have created is the beta framework for an iOS-inspired theme that attempts to bring jQuery inline with the native iOS UI elements. I actually began this project when the first alpha was released, but with taking on a new job and other responsibilities, I found myself lagging behind the release schedule. I&#8217;m not sure of the response this will get, so hopefully I can gauge how much time I should spend on this in future.

But without further ado: here is the iOS-inspired theme for jQuery Mobile. It works great in Chrome, Safari, iPhone and iPad mobile Safaris.
  
Some Caveats
To achieve the look of the iOS style back button with CSS3, the HTML is customised and therefore must be copied and pasted manually. The back button template can be found in the GitHub readme file.
The CSS3 back button isn&#8217;t perfect, there are some jaggedness and shadow issues.
Plenty of elements still remain unstyled, or are missing hit state styling.
Cross browser compliance is a low priority.
This is an add-on theming layer. It was impossible to fork the actual jQuery Mobile theme and attempt to keep up with their changes, so this just sits as a skinning layer on top.
Some Issues This Exposes in jQuery Mobile
Dialogs need some serious work. I could have spent a lot of time and made my dialogs look exactly like the iOS ones, but this would have involved some pretty hectic CSS and JavaScript. As is I had to do a bit of a work around to get them to dock to the bottom and not the top. Most notably broken, the inability for these dialogs to behave like modals - showing the background as obscured.
Back button syntax. They&#8217;re are definitely some cleaner ways to create the iOS style back buttons. I was keen to avoid images, but an image mask might have done really well in this situation. Regardless of that, you will probably find yourself plugging in custom HTML when working with jQuery mobile, and not just the buttons.
It&#8217;s bloody hard to keep up with the release cycle. This is not a bad thing ;)
I am, as always, open to merging pull requests and suggestions to help improve this project. I must also stress that it is important that truly innovative changes best be held off until jQuery Mobile makes it out of beta. ■

iOS Inspired jQuery Mobile Theme

jQuery Mobile doesn’t deviate far from the pattern established by its sibling libraries: provide something that normalises functionality and/or design across browsers and operating systems. 

The work by the Filament Group has been vital for standardising the look and feel of jQuery Mobile, especially when dealing with incredibly dated or under-featured mobile browsers. Borrowing upon conventions established by both the iOS and Android operating systems, they created something that is palatable across a range of devices.

There will be odd instances when you need an application to look as close to native as possible. I completely agree with the Filament Group’s arguments against this, but currently designers are forced to roll their own solution. What I have created is the beta framework for an iOS-inspired theme that attempts to bring jQuery inline with the native iOS UI elements. I actually began this project when the first alpha was released, but with taking on a new job and other responsibilities, I found myself lagging behind the release schedule. I’m not sure of the response this will get, so hopefully I can gauge how much time I should spend on this in future.

image


But without further ado: here is the iOS-inspired theme for jQuery Mobile. It works great in Chrome, Safari, iPhone and iPad mobile Safaris.

image  image

Some Caveats

  • To achieve the look of the iOS style back button with CSS3, the HTML is customised and therefore must be copied and pasted manually. The back button template can be found in the GitHub readme file.
  • The CSS3 back button isn’t perfect, there are some jaggedness and shadow issues.
  • Plenty of elements still remain unstyled, or are missing hit state styling.
  • Cross browser compliance is a low priority.
  • This is an add-on theming layer. It was impossible to fork the actual jQuery Mobile theme and attempt to keep up with their changes, so this just sits as a skinning layer on top.

Some Issues This Exposes in jQuery Mobile

  • Dialogs need some serious work. I could have spent a lot of time and made my dialogs look exactly like the iOS ones, but this would have involved some pretty hectic CSS and JavaScript. As is I had to do a bit of a work around to get them to dock to the bottom and not the top. Most notably broken, the inability for these dialogs to behave like modals - showing the background as obscured.
  • Back button syntax. They’re are definitely some cleaner ways to create the iOS style back buttons. I was keen to avoid images, but an image mask might have done really well in this situation. Regardless of that, you will probably find yourself plugging in custom HTML when working with jQuery mobile, and not just the buttons.
  • It’s bloody hard to keep up with the release cycle. This is not a bad thing ;)

I am, as always, open to merging pull requests and suggestions to help improve this project. I must also stress that it is important that truly innovative changes best be held off until jQuery Mobile makes it out of beta. ■