Archive for General
Shizzle Gridizle
September 19th, 2007 • General
Or, to convert the title to English, The Blueprint Grid Builder.
Three days ago, I learned jQuery (in just about an hour, because it’s so damn easy). I knew about Blueprint for quite a while, but never used in production, and probably never will. I’ll leave Blueprint’s limitations for another post.
Let’s agree on a few things. Blueprint claims to aid grid-based design. That’s not entirely accurate. Yes, really. Columns aren’t grids, and the Web will probably never see true, “gridesigns”. Regardless, Blueprint is great for quick prototypes.
Gridizle, a.k.a. The Blueprint Grid Builder, a.k.a. my idea of a hacked-up, patched-up, single-page program, uses Blueprint to build a layout, and it assumes you know what class="span-8 prepend-1 border" means. If you don’t, please read a the Blueprint tutorial.
How It Works
Blueprint’s layout is split into 24 columns, each is 30px wide with a 10px right margin. You can customize these numbers with the Grid Generator, but for now, Gridizle assume Blueprint’s defaults.
Click “Add column” button and choose the number of spans for your column. A new column will be added to the main layout. Columns are distinguished with a top and bottom border.
You can add more columns to the main layout, or inside other columns. Clicking any column will highlight it in Blinding Yellow, and will allow you to add new columns inside it. Click anywhere outside the main layout to deselect all columns. New columns will be added to the main layout now.
<hr /> acts as a row separator. When your columns span less than 24, you can insert a separator to start a new row. Double-click the separator to remove it.
“Column border” adds a border class to the column. A Blueprint’s column border appears in the middle of the gutter on the right of that column.
“Column last” adds the last class to the column. Suppose you have a row split into four columns. Your columns will have span-6, which adds up to 24. However, the last column will jump to the next row because it has an extra margin on the right, making it 10px wider than what it’s supposed to be. Blueprint’s last class removes this margin, which aligns the last column properly.
You can increase or decrease prepend and append values by clicking the corresponding +/- buttons. These values are useful when you want to adjust the columns positioning.
Play with interface for a while, I’m sure you’ll get the hang of it.
Limitations
- Gridizle doesn’t calculate the maximum allowed number of spans in nested columns.
- Adding a full border around columns, instead of a top and bottom border, messes Blueprint’s layout. So for now, Gridizle’s columns look funny.
- Showing and hiding HTML code should be done in a popup window, instead of using the ugly
$('.container').append()hack. class="last"could, and should be calculated automatically.- Appending and prepending don’t know when to stop. So don’t over do it.
- Column spans can’t be changed, for now. When adding columns, try to pay attention to the span number you choose.
- This is a pre-pre-alpha software. I’ll try to improve it whenever I have a chance. However, since I’m licensing it under GPL, you’re free to hack on it.
Slashdot-esque on Twitter
September 18th, 2007 • General
I have a love/hate relationship with Twitter. I see how it can be useful, but can’t stand how noisy it gets.
Those attending TechCrunch40 (a 2-day, 40-company, Web 2.0 conference) are following it up on Twitter.
Feels like a 21st century Slashdot.
The Five JavaScript Libraries
September 15th, 2007 • 1 comment General
It’s been a while since I wrote any JavaScript. It’s one of those languages that I love, would love to love, and hate. How’s that for a developer’s complex?
It’s not that there’s anything wrong with the language, but until recently, browser support has been a nightmare. I’m sure you, especially front-end developers, have had your share of hair-pulling sessions, when something perfectly legitimate works on one browser, then cracks on another. They would claim they follow standards, yet none did.
These days, browsers ironed out most quirks, they’re all mostly compatible, they all implement the Document Object Model, where each mark up element maps to an object. Only you have to be comfortable with writing recursive functions and dealing with complex trees. Personally, I’m not. I can deal with trees, I just don’t want to. Not when I’m trying to get some work done.
I knew these five libraries should simplify JavaScript work, and ensure my programming sessions don’t cause casualties.
Prototype: Being hyped by Rails and all, Prototype was my initial choice for a JavaScript library. It’s well documented, It’s been beaten into shape by many, and overall a solid piece of work. It feels like lax DOM with chained method calls, and it’s obvious how Ruby affected its design philosophy.
script.aculo.us: is the effect library built on top of Prototype. Thing like fade in, fade out, dragging and dropping. It also integrates into many frameworks. The only problem is it’s bound to Prototype.
YUI: Well, YUI isn’t a JavaScript framework, it’s a complete UI framework, as the name makes it obvious. Ironically, the most notable feature is implemented in CSS rather than JavaScript. When you need tree views, tabs, and sortable tables, this is where you go.
Ext: As its homepage says, it started out as an extension to YUI. However its massive 3mb download made me hesitate. Ext has some big names on its list like Adobe, Cisco and IBM, probably because there’s a commercial license offering. It’s quite hefty for everyday’s work, but might add it to your list of potential usages.
jQuery: This is the gem I was sold on. jQuery’s philosophy is pragmatic, and its strict about its download size. The minified and gzip’ed version is about 14kb, that’s smaller than you average PNG image. To be honest, I was sold after reading a comparison with Prototype. But then I found out that Prototype isn’t so bad either, it just feels a bit more formal.
The best thing about jQuery is that it can be used with RJS templates, since it also has Prototype’s $() function. The second best thing is Visual jQuery.
Print Isn’t Dying Soon
September 12th, 2007 • 5 comments General
I’ve been hearing this print-is-dead meme ever since the term “blog” was mentioned on TV.
To set the record straight: No print isn’t dead. It won’t die anytime soon. Go do your homework.
One cannot unite a community without a newspaper or journal of some kind.
— Mahatma Ghandi
Print’s been the tool to reach the masses, judging by the sheer number of newspapers and journals of every kind. Mostly because advances in technology have minimalized production costs; the internet, then, nullified them.
Print is going through a phase now, a shift in focus, if you will, just like it did when TVs started to become mainstream, causing unnecessary worries to newspaper publishers. With more people reading news online, and real damage happening the newspaper and magazine businesses, the worries aren’t completely unjustified. It doesn’t mean print is going to die yet, only that certain businesses are replaced overtime, but that’s how the business world works.
Print has certain advantages of any other medium. It’s unobtrusive, it’s non-hyper, and it can be taken offline. So I can read without IM and email distractions, without slashing through a jungle of links, even when I’m waiting for the bus. Also, the nature of the medium itself forces authors to think differently, to rephrase their sentences, to be unambiguous, to make sure that you can read without resorting to Wikipedia.
Veerle wrote a great follow-up on this topic with emphasis on design. Tim O’reilly discusses how their book sales surged after Barnes & Nobles set all computer books on sale. It seems that newspaper publishing is the only area in print being affected. After all, people rarely keeps newspapers.
So buck-up little print designer, I seriously doubt your medium will go Dodo in my lifetime or yours. Get back to Quark and keep on keepin’ on, my wallet is at that ready.
— Greg Storey, Pulp
This e-age has provided alternatives to the print medium. eBooks tried to replace regular books. Blogs tried to replace news, while news tried to replace itself. Youtube tried to replace TV. But at the end of the day, these are different sides of the same Rubik’s cube.
Komodo Snapdragon
September 9th, 2007 • 2 comments General
The Open Komodo Project is a new initiative from ActiveState to create an open source platform that promotes open standards. The Open Komodo Project will fill a need for developer tools in the open web technology stack, furthering web innovation and freedom of choice for developers and end-users.
— ActiveState, The Open Komodo Project
I had to hack my through marketing talk to realize this: Snapdragon wants to be Eclipse built with XUL and JavaScript, and ActiveState emphasizes it.
Open Komodo is not a product, but rather a code base upon which Integrated Development Environments (IDEs) can be developed.
Sounds awfully familiar, doesn’t it?
The interesting thing is, Komodo is a monster (a lizard, if we’re nitpicking) developed using the same technologies that power Firefox. This could potentially lift Komodo’s spirits, and build a community around it. XUL and JavaScript are proven, open, and extensible, although they are yet to mature in terms of performance.
What surprises me is that ActiveState decided to release a whole new product instead of open-sourcing their free editor Komodo Edit. I know they’re extracting the code and not working from scratch. They want Snapdragon to be the editor of client-side languages, like HTML, CSS and JavaScript, but not of Perl, Python and Ruby. But still, why not go for a whole product? When you need community’s support, why not show good intentions? Be sure the Komodo community will appreciate it, and such an effort will eventually pay off.