Lately

Hello! I haven’t been keeping up with this blog much, but I figured I’d leave a quick update, especially since it’s 2012 now.

Winter Break

Over the break I’ve just been dabbling with learning some new stuff and working on a couple of things, and I’m apparently meeting with someone tomorrow to do their portfolio! I decided to finally learn JavaScript more seriously and have been reading books like Javascript: The Good Parts and jQuery in Action, and I’m relieved to say it’s all finally making sense. JavaScript threw me off with its prototypal design pattern, something I was previously unfamiliar with (I just finished a course on OOP and Java). The DOM is still somewhat mysterious, but luckily jQuery makes things so much simpler. Might read up on that anyway.

WREK Contest Book

At WREK I’ve been working on something called an online contest book. See, since we give out tickets to listeners on air, we need to keep all that stored somewhere. We currently have a binder where we put in all the contests for the week, but we have to manually e-mail and fax these in. That’s a problem during breaks and in the summer, when fewer people are at the station. We used to have an old online contest book made with CakePHP, but apparently nobody really liked using it and it was still buggy. I decided to give it a shot and simultaneously try some new stuff out: Twitter Bootstrap for the front-end, Slim Framework for a simple PHP framework/router, and Paris for a sweet and simple ORM. It’s mostly finished at the moment; I just can’t get the faxing commands to execute from PHP, and HylaFAX isn’t telling me why nothing’s actually faxing. I also haven’t set up the cronjob management, but that should be simple.

Contest Book ScreenshotI tried to make it as simple as possible and as analogous to the real contest book. Tabs on the front page show the days of the week with each one containing the contests that should be submitted that day. Some venues want to receive tickets a day early or so, so if the concert is on Friday, it’ll be listed under Thursday. The board operator just clicks on the name of the contest they want to give away, and there’s a form for them to add the names of any winners. If it’s all filled out, they can go ahead and send it. Everyone can also easily take a look at upcoming concerts that aren’t within the week, and I might add the ability for people to sign up for tickets. There’s a few more minor details, but I won’t go into those right now.

More WREK stuff: we have an intranet system that was written in the early 2000′s in PHP 3. It’s awful. So I’m getting people together to rewrite it. Right now I’m considering either FuelPHP or Django for the framework. FuelPHP looks like a really nice and efficient PHP 5.3 framework, and Django would finally give me an opportunity to do a project in Python. But it’s also about what everyone is comfortable with, and it’s looking like PHP might be the way we have to go. I would also like to make this intranet open source for other stations to use, but I’m not sure how viable that is.

Other Stuff

I’ve also done some tiny modifications on my site trying to improve the feel of it. The best fix was adding the jQuery imagesLoaded plugin to the portfolio section. Now the project doesn’t open up until all the images have loaded! It makes things a lot more fluid.

That’s about it for now. Going back to school in a week. Gotta go find an internship for the summer.

Version One Point Oh

And here’s the announcement for the first version of my site! Kate helped with some ideas and made the nifty shirt and glasses motif. I’ve spent a good amount of work trying to get this done as quickly as possible (got it down to 10 days?) since I need a personal site if I’m going to go around touting myself as a “web developer,” and I’m pleased with the results.

Responsive design remains one of my top concepts to tinker with, and unfortunately I haven’t gotten around to making a mobile version of this design, but I’ll be cranking out the smaller-width version in the coming weeks. At least it’s somewhat fluid!

Better CSS with LESS and the Semantic Grid System

Do you ever find yourself writing up the CSS for a new design only to quickly find yourself lost in loosely organized blocks of code? And what was that damn hex code again for that special shade of mustard yellow? There it is! Wait, wrong color.

How about a better option?

Don’t get me wrong, I love CSS… It can just get tediously inefficient and unorganized. Recently I found LESS, a dynamic stylesheet language that compiles to CSS on the client-side with some Javascript, and I’m not turning back. Now I can assign each color to a variable (e.g. @color: #fff), apply mixins (functions that can take in parameters and produce a common bit of code, such as CSS3 round borders), nest elements in a more logical way without writing long selector names, and even use math and Javascript evaluations!

It’s really simple, and LESS is designed so that it still feels like natural CSS, just with more functionality. All you have to do is include your LESS stylesheet and the less.js compiler in the <head> of your page and it’ll turn into CSS on the fly. Of course, you only want to do this for development, but you can always just grab the output and use it as your final CSS file.

The Semantic Grid System

What I perhaps love most about LESS is the extensible nature. Not only have I found a selection of CSS3 mixins called LESS Elements, I’ve found an entire grid system based on it: the Semantic Grid System. I wasn’t really a huge fan of any of the grid systems previously available: they weren’t made for dynamic and/or custom grid widths and columns, they weren’t suited for responsive design (except the 1140 Grid, but that can only collapse into one column), and the width of an element had to be defined in the HTML using an unsemantic class name like grid_x.

The Semantic Grid System solves all of those problems. You can easily specify the column and gutter widths in addition to the number of columns as variables at the top of your LESS file, and these can also be changed for different resolutions using CSS3′s media queries. Controlling the width of an element is done completely within the LESS stylesheet; you just have to declare the mixin, like below:

header { .column(12) }
article { .column(9) }
aside { .column(3) }

It’s as easy as that, and there are plenty more features where that came from, including nested columns and column offsets. This is by far my favorite grid system, and I don’t plan on moving away from this flexible combination of tools.

Lastly, there are indeed alternatives to LESS, and the Semantic Grid System has recently been updated to work with them. You’ve got SASS (with a new CSS3-based syntax) and Stylus (uses a very DRY-based approach). It’s all up to the syntax you prefer, and LESS feels like the closest thing to writing natural CSS.

If you haven’t tried out any of these tools and you’re fed up with that convoluted mass of CSS, treat yourself to a better way of writing CSS!