Sticky Note with CSS and JavaScript

December 29, 2010

I wanted to se how easy it was to make one of those yellow sticky notes with CSS and a little bit of bonus javasrcipt. Current version is a bit flawed – but works, is easily modded, and shows the idea.

To see the demo, click here

This can be made more simple by removing some JavaScript functionality. For instance, It’s really an overload to include jQuery and jQueryUI for the small stuff it adds, when it can be done in some simple lines of good old JavaScript – but if you have included the libraries already, then use them. This should work cross browser as well.

Features:
– Hidden by default, opens by click
– Different styles to different points
– Lines made in CSS
– Linetrough points by click
– Gap at top and bottom + close button at top
– Draggable

Lacks:
– Toggle on/off by click not implemented
– Some smaller bugs
– No real modifying functionality (like adding/removing/editing)

Advertisements

So, how do a programmer learn CSS?

November 7, 2010

I’m a programmer. I like to design stuff too, so I have a fair amount of knowledge about CSS. But how do I learn CSS even better?

Well, I stumbled upon this article about css minifier comparison: phpied.com – CSS minifiers comparison

CSS Tidy seemed to be the obvious best choice, so I thought I’d take up the challenge and make my own CSS minifier – based on the Ideas I had when I started to think about the logic behind. That’s where the fun began.

After some hours of work I managed to create a simple CSS minifier with PHP, that still is a way to go to match the capabilities of CSS Tidy, but where I even managed to be better in some cases. I still see a lot of improvement potential on my small script (~13 kb and counting – CSS Tidy is ~100kb), so hopefully the improvements can make my css files even smaller and crush the competition :-p

There is still a long way to alpha version(probably tons of bugs to fix before it’s stable), but when I come to it I’m probably going to put it out there as a web service.

What did I learn so far?
– A lot of CSS tricks!
– How to write CSS with more confidence.
– When shorthand css is favorable (“always” is the wrong answer).
– CSS never really stops being a mess :-p
– You can write very simple css, creating huge css files, and then easily minify and optimize size when in production.
– That the effort of creating very small css from scratch become somewhat pointless.
– How to write CSS the best for optimized minification.


960 gridder and jQueryUI

March 17, 2010

When I coded today I did not understand why jQuery UI elements did not work. I tried everything, and I was sure my code was right. So, finally I began to systematically make the file I was editing as simple as possible to get to the bottom of the error.

Guess what? jQuery UI function worked when I disabled the 960 Gridder I’m using on my current project. Bummer. That was 4 hours of debugging right there. But I learn.

Did I find out exactly what caused the bug? No, I didn’t want to try to do that. And, tho worst thing, I did not have the use of the jQuery UI function after all.

Well, Thats it. If you have the same problem, remember: 960 may be the cause.