07 May

Line Clampin’ | CSS-Tricks

You want X lines of text. Anything after that, gracefully cut off. That’s “line clamping” and it is a perfectly legit desire. When you can count on text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that text, as well as achieve some symmetric aesthetic harmony.

There are a couple of ways to get it done, none of them spectacular.

If you are doing Web Design/Development as a full-time and aren’t reading CSS-Tricks, you really should be. Awesome little tricks like this one..

07 Sep

GitHub – davatron5000/FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

via GitHub – davatron5000/FitVids.js. Pretty cool, not something I personally would need often but still useful.

06 Mar

Encoded Records – Get your own #dickbar

Inspired by the Twitter iPhone app’s brand new #dickbar, you too can monetize feature Twitter’s trending topics on your website!

Simply insert this Javascript at the end of your page, and you too can see a constant display of #inanehashtags, this week’s terrible movie release, and random jabberings of popular culture that don’t interest you or your users in the least:

via Encoded Records – Get your own #dickbar. For those not in know, the #dickbar is part of a recent update to Twitter’s iPhone app, which displays an annoying bar that lists both promoted tweets and the latest hottest hashtags. The worst part is that it sits on-top of your normal listing of tweets in the app, ie dick-ish move Twitter, very dick-ish. So want to be labeled a dick like Twitter, go right ahead.

13 Feb

Alfa Jango Blog – The Difference Between jQuery’s .bind(), .live(), and .delegate()

The difference between .bind(), .live(), and .delegate() is not always apparent. Having a clear understanding of all the differences, though, will help us write more concise code and prevent bugs from popping up in our interactive applications.

via Alfa Jango Blog – The Difference Between jQuery’s .bind(), .live(), and .delegate(). I was pretty well versed in the differences between bind and live, but delegate I was mostly unfamiliar with, it sounds like a useful tool.

16 Nov

Codrops – Hover Slide Effect with jQuery

Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out.

The idea is based on the beautiful Flash based animation on the Yumaki website.

So, let’s start.

via Codrops – Hover Slide Effect with jQuery. This is a really neat effect, not sure when I’ll have a site that has that many images to rotate through but useful tool in case.

18 Jul

CakeFest

CakeFest is the official conference for CakePHP. Thanks to my work with Smartfield in building and launching CropInsight I’ll be attending CakeFest this year in Chicago from September 2nd through the 5th.

CakePHP is a fantastic web development framework that I absolutely love working with every single day. CropInsight is a web application built using CakePHP, jQuery and a whole lot of sweat and time. Not only do I work with CakePHP for my full-time job, I also use it for personal projects, it’s a great tool for PHP developers. Trey Reynolds and I will get to spend time learning more about the inner magic of Cake and hopefully helping the core developers of Cake learn more about one of their users.

Photo Credit from Flickr user: koyhoge.

30 May

Now you see me… show/hide performance – Learning jQuery

Also note that for the majority of use cases, all of these methods are plenty fast to use. When you start having to manipulate large jQuery collections, .show() and .hide() might become too slow in IE, and you might need to bump up to .addClass() or .removeClass(). Enabling/disabling of stylesheets would only be necessary in the most extreme cases, but if things are hiding to slowly for you, you might want to give it a try.

via Now you see me… show/hide performance – Learning jQuery. Personally I like using the add/remove class the advantage of it already being slightly faster for IE makes it even nicer.

22 May

HoverAttribute jQuery plugin – afEkenholm Web Design

HoverAttribute is a jQuery plugin that allows you to make (link-)elements more dynamic by making an attribute of that element show up on hovering. This is foremost intended for <a> tags residing within full-width elements, such as headings or list entries. Amongst several options, it is possible to choose any attribute (href by default, see Usage) of a given tag.

via HoverAttribute jQuery plugin – afEkenholm Web Design. Really cool jQuery plugin, used it for a project at work where a tooltip was not the desired tool to show additional data. It works on any jQuery object and let’s display any attribute.