Topic: Development
Some Lesser Known Features of LESS
For the last year or so, LESS has gained a lot of traction in the front-end development community, particularly among designers. LESS extends CSS with dynamic functionality and organizational features, which provide a lot of power and efficiency to designers and developers. However, it's not the only CSS pre-processor player out there. The other major one is Sass, which is very similar, and both are solid options to consider.
Many of the review articles out there do a good job of providing an in-depth look at syntax and general usage, but I'd like to take a different angle—highlight one difference that isn't written about all that much, and present a few features of LESS that have have proved very valuable on recent projects.
CSS Strategy Square-off
It’s an exciting time for CSS. On top of the advances being made both in what to write (CSS3) and what to write with (SASS+Compass, Less), CSS is enjoying a spate of serious discussion over how it should be written.
This might come as a suprise to some (and did to me). After all, CSS seems pretty straightforward — without many of the complexities of programming, CSS has long been seen as something you just write. After all, it’s not particularly hard to write good CSS and markup; so long as your definition of “good” means “looks right, seems consistent, has semantic value”, you’ve generally gotten a pass.
The question recently posed is: is this definition of good, originating from the dark ages of table layouts, good enough to deal with the problems CSS encounters in 2011?
The answer might depend on a few things: first, whether you observe such problems, and second, whether you see them as sufficiently difficult to work with. As I see them:
Adding Delight to Your Design with CSS3 and Webkit Keyframe Animation
It should come as no surprise that we at Viget love having fun with design. We doubly enjoy working with clients who let us have an appropriate amount of fun with the design of their website or web product. On a recent project, Blair and I had the opportunity to do just that.
Continue reading "Adding Delight to Your Design with CSS3 and Webkit Keyframe Animation"
Docs That Work (Everyday Techniques No. 2)
Any degree of design or development requires some level of documentation — documents that aren’t the work itself, but are either requirements or helpful aids in the process. Documentation builds project value as a handoff, a sales tool, a client satisfaction point, and as a simple internal tool: It's a key part of web design and a key expectation clients should have when they approach you for work.
My problem with it? It sucks. Documentation is a snore: painful to create, painful to read, and (more often than not) it goes obsolete and unappreciated once you’ve finished.
But documents can work well with your project, if you keep two goals in mind:
- Do as little work as you can
- Make docs that do as much work as they can
I divide design/front-end documents into three categories, each of which have opportunities for maximum laziness and high ROI:
Continue reading "Docs That Work (Everyday Techniques No. 2)"
Extending Paul Irish’s comprehensive DOM-ready execution
Way back in March of '09, the intelligent (and dashing!) Paul Irish laid forth a markup-based means of executing JavaScript on page load. If you're unfamiliar with the technique, the basics are:
- Use class and id attributes on your document's body element that map to keys in an object literal.
- Create initializing and executing functions in your JavaScript that parse those classes and ids and call the appropriate functions.
The method is noteworthy in that it enforces a sense of organization in both your JavaScript and your HTML. For sufficiently large web applications, using a system like Paul's can make JavaScript integration a snap. The added benefit of having a structured object containing all your application's functionality is icing on the cake.
On a recent Ruby on Rails project, I iterated on Paul's method (dubbed the Garber-Irish Implementation by some), adding a touch of HTML5 and making use of some built-in Rails magic. Let's take a look.
Continue reading "Extending Paul Irish’s comprehensive DOM-ready execution"
Boss Your Segments Around: Freebie, an ExpressionEngine Addon
I love how flexible ExpressionEngine URLs are — by not strictly parsing URLs, EE lets us send users to /whatever/long/url/we/want/ and find our own clever uses for the URL segments. We use this technique a lot at Viget for returning entries or specific templates, but it’s also great for setting page states, like showing unpublished entries by tacking a /preview/ segment onto a link or using /success/ to throw a "Form submitted!" message.
I recently wrote about Structure and how it gives clients more power and designers more freedom by directly assigning templates to pages. I also mentioned that it parses URLs strictly, which makes a lot of our old tricks much, well, trickier. In 1.6, we used NSM Safe Segments to 'hide' some segments from Structure and get around this issue, but the solution was less than ideal, and the upgrade to 2.0 found us searching for a new method.
Announcing Freebie
We made a wishlist of features we always wanted to see in Safe Segments, and the result is Freebie. Freebie prevents EE from parsing particular segments of your choosing, allowing you to use much more complex URLs without the risk of Structure choking on them.
Continue reading "Boss Your Segments Around: Freebie, an ExpressionEngine Addon"
A Whole New Wooooorld: Structure + ExpressionEngine
Even with the EE 2.0 release in December, I think the best ExpressionEngine event in 2009 was the rise of Travis Schmeisser's Structure. While 2.0 lays the groundwork for a bright future, in the short run it's more of a step backwards because so few of EE's amazing community-built addons have been ported so far - even with new functionality, a 2.0 upgrade takes away far more than it gives at the moment.
In contrast, the Structure module immediately makes major improvements to your site's UI, construction, and template codebase, and it also plays nice with other addons, creating a faster, smarter EE experience. No software I installed last year saved me as much time and effort as Structure did, and Travis deserves all the credit for that (and he got quite a bit, including Devot:ee's Module Of The Year award)
So what is Structure, and what about it makes EE so much better?
Structure is a module that overrides EE's URL/template setup and creates its own hierarchy of pages and "Listing" pages, along with a new interface that's meant to handle most user needs. Why is this such a big deal?
- A page is the basic unit of most websites, but in EE, there's no great way to handle them. EE developers spend a lot of time trying to simulate a page structure using templates, categories, and weblogs - which tends to make bulky, finicky sites that can be hard to extend and update. Structure brings the page concept into EE beautifully, and adds breadcrumbs, navs, and a host of other traditionally hard-to-develop features.
- Entries are now linked to templates, and not vice versa. This might not seem like such a big deal unless you've made a big EE site without it - large EE sites rely on a large number of repetitive templates, which are especially difficult to handle. With Structure, you can run a big site with hundreds of top-level pages off a handful of templates - a huge time-saver.
We had a few false starts with Structure - mostly because we were trying to bring it into existing EE sites (recommendation: don't) or use it to do the wrong things, but we eventually got the hang of it. A few pointers:
Continue reading "A Whole New Wooooorld: Structure + ExpressionEngine"
2011