Archive for the ‘Web Development’ Category

Introduction to Haml For HTML Layouts for Newbs – Part 2: Writing Haml

Thursday, September 8th, 2011
Introduction to Haml For HTML Layouts for Newbs – Part 2: Writing Haml

The difference between structure and content

Haml is great! But for what, is the real question. According to Haml’s website, “Markup should be beautiful.” It definitely does make things look clean and easy to read, but there seems to be a catch. Chris Eppstein (creator of Compass) wrote an article that basically says don’t use Haml for content, and I suggest reading it when you are done reading this. Looking at his first example, which I won’t duplicate here, you see what he is driving at right away. For the actual content of the site, Haml starts to look like garbage. What it IS good for though, is the actual structure of the template. Template, file, whatever. The stuff you write in HTML, like this:

<div id="luckDragon"></div>

Haml can do better:

#luckDragon

The lesson to be learned here is that, for the main layout of your site use Haml. For the fluff we’ll use something called Markdown, which I’ll talk about in Part 3 of this series. In this post, we are going to deal with the basics of Haml though.

(more…)

Introduction to Haml For HTML Layouts For Newbs – Part 1: Installing Stasis

Friday, September 2nd, 2011
Introduction to Haml For HTML Layouts For Newbs – Part 1: Installing Stasis

Part one of four

Learning something new is awesome, and writing about what I am learning helps me get it into my head a lot more. Yesterday I started learning how to use Haml, and once I started, I thought I would pass on this newly acquired knowledge on to you. This series is for NON programmers. You might know javascript/jQuery, but the people I am writing this for are not really going to have any real knowledge of programming. If you have just gotten into using Sass, then this is a perfect next step for you. Here are the topics in this four part series:

Haml logoSo what the hell is Haml anyway? Well, imagine taking out the syntax of an HTML document, and replacing it with a cleaner syntax. It also adds a ton of other functionality, but what I’m going to be talking about in this series is just basic HTML layout writing. Mainly because I just got started with it myself, so the other stuff will have to wait.
(more…)

Adobe Muse – A Threat To Web Development? Probably Not

Tuesday, August 23rd, 2011
Adobe Muse – A Threat To Web Development? Probably Not

They took our jerbs!

If you haven’t heard of Adobe’s latest offering, Muse, then you probably don’t read any web development blogs, including this one. If you do read them, and still haven’t heard of it, well, you have now! You may thank me for your enlightenment later. Anyway, there are a LOT of comments from web developers bashing the hell out of this product. I have not seen many (I can’t even recall one actually) comments praising it for what it does. What does it do? Write serious crappy code. I mean divititus to the umpteenth degree.

This product isn’t meant for my people though. Who do I mean by “my people”? I’m talking about those who hand code their sites and left software like Dreamweaver in the dust years back. Muse is meant for graphic designers, or web designers that don’t actually know how to create a site but design them anyway. They create a design, and then use Muse (which has tools like other Adobe products – think Photoshop) to make a nice little layout. Hit a button and BAM! Here is your website.

I think many of the people doing this for a living though feel a slight twinge of fear, thinking this might cut into our freelance projects, or possibly worse…our jobs.

Damn…that went all serious, didn’t it?

(more…)

jQuery Mobile Review

Thursday, July 28th, 2011
jQuery Mobile Review

Great things come in small packages

A project I’m working on had me looking into how to create a nice looking mobile site. Two very popular frameworks came to mind: jQuery Mobile, and Sencha Touch. The back-end guy I’m working with on this project recommended Sencha Touch, so I took a look at that first. Let me just say that if you haven’t worked with Ext.js and it’s panel component, or are not even familiar with that library, you are going to have one hell of a time. It is not all that easy to use, and the limited amount of tutorials on how to use it suck beyond belief. After a couple of hours fiddling with it, I decided to say screw it, and went over to jQuery Mobile. The difference? I got a site up and running in roughly a half hour with no problems themeing. jQuery Mobile wins in ease of use hands down.

This isn’t to say that Sencha Touch is bad, because it sure looks good, but it isn’t as intuitive as Mobile. This isn’t really about Touch though…it’s about Mobile. So let’s get into it!

jQuery Mobile logo

(more…)

How to Build a Horizontal jQuery Accordion

Thursday, July 21st, 2011
How to Build a Horizontal jQuery Accordion

Sliders, accordions oh my!

If you search for jQuery slider, you will find tons of posts and articles on how to do so. There are plenty of ways of building one, and I haven’t really seen any two that were exactly the same. Hell, even I wrote on how to build a jQuery slider, using the slider on this blog as an example. You know what is quite difficult to find though? Tutorials on horizontal accordions. I had a hell of a time figuring out how, because most of the articles are about using a plugin. Which, if you have read any of my posts in the past, you will know that I like to do things myself most of the time. I only found one that was super helpful, and it was buried a few pages in. The only problem is that it was using an unordered list, and I needed it to use divs. Luckily for me it was easy to change, and if you care to view the original tutorial over at Design Chemical (written by a guy named Lee I believe), please do so and tell him he rocks. Take a look at the demo first so you can see what the end result looks like.

View Demo

(more…)