Author Archives: m!les

jSimpleFader

TL;DR Intro­duc­ing jSim­ple­Fader, a jQuery plu­gin to sim­ply fade between images.

UPDATE You can now visit the jSim­ple­Fader Github Page for a live demo, since I know you’re lazy.

UPDATE Added a new option: ani­ma­tion­Style. Right now, the val­ues are fade or crossfade.

UPDATE Added a new option: links. Set this to an array of hyper­links you want to wrap around your images.

It’s some­thing I’d done a hun­dred times before. You have a folder of images,  num­bered in sequence, that you want to fade and rotate through on your web­page. It’s a sim­ple rota­tor (although, strictly speak­ing, noth­ing rotates) that I’ve copy and pasted from project to project with tweaks here and there. So when our designer asked if I knew of any good jQuery plu­g­ins that did that, I decided I should just make one myself. Intro­duc­ing: jSimpleFader.

jSim­ple­Fader is a jQuery plu­gin to sim­ply fade between images. All it really needs is the total num­ber of images you have, and it rotates through them. The code is straight­for­ward. Just call $('#fader1').simplefader( 10 ); That’s it.

The plu­gin tries to do a lot of fig­ur­ing out for you. Your images don’t need any par­tic­u­lar nam­ing con­ven­tion; they just need a num­ber in them. You don’t even need any par­tic­u­lar HTML struc­ture; there just needs to be an <img> some­where. The script has a sim­ple lim­i­ta­tion: your images should start num­ber­ing at 1, although the first image doesn’t have to be the one on your webpage.

After the num­ber of images, you can pass in an object of options. Here are the options you can set:

  • speed – the speed of rota­tion in ms (default: 5000)
  • ani­ma­tion­Speed – the speed of fad­ing ani­ma­tion in ms (default: 600)
  • ani­ma­tion­Style – the style of ani­ma­tion: fade, cross­fade (default: fade)
  • links – an array of hyperlinks

Like all jQuery plu­g­ins, you can have mul­ti­ple faders on one page, with their own options, and every­thing should work fine.

Check out the project on Github, and feel free to participate.

Mixin and Variable Cascading in LESS

TL;DR Vari­ables in LESS get over­writ­ten, but mix­ins get com­bined. To over­write a mixin, you’ll have to use CSS tech­niques or guard expressions.

LESS is a dynamic stylesheet lan­guage which adds a lot of fea­tures to CSS that are com­mon to most pro­gram­ming lan­guages. There’s a lot LESS can do, includ­ing adding vari­ables, mix­ins, and math. Yes, math. You then com­pile your LESS files into the CSS that our browsers know and love. Whether you hate CSS or love it (like I do), LESS is awesome.

I’ve only started using LESS, and I was curi­ous how it han­dles vari­ables and mix­ins that have the same name. In a lot of pro­gram­ming lan­guages, re-declaring a vari­able or func­tion has the effect of over­writ­ing the orig­i­nal. In CSS, the rules are cas­caded, newer ones hav­ing prece­dence over older ones, depend­ing on speci­ficity. How does it work in LESS?

Vari­ables get over­writ­ten. If you first write @value: #000; and later write @value: #999; the value of @value when your CSS is com­piled will be #999. This is true for @value every­where, includ­ing pre­vi­ously included files. (Of course, fol­lows the rules of scop­ing in LESS apply.)

Mix­ins, includ­ing para­met­ric mix­ins with the same sig­na­ture, get com­bined. Lit­er­ally iden­ti­cal dec­la­ra­tions will not be dupli­cated, but all other rules, even for the same prop­erty, just get con­cate­nated together in one large block. Rules are listed in the order that the mix­ins are declared. The excep­tion is iden­ti­cal rules, which are placed at their last declaration.

This behav­ior is prob­a­bly delib­er­ate, since it falls in line with CSS’s cas­cad­ing nature. It appears that if you want to over­write a mixin, you either have to rede­fine those prop­er­ties the same way you would in pure CSS, or you can write a series of para­met­ric mix­ins with guard expres­sions to ensure you get the mixin you want.

Here’s some code to illus­trate the behav­ior I saw. There’s an included_file.less and styles.less which get com­piled into the styles.css.

Shortcut Functions in CFML

TL;DR Cre­ate short­cuts to long-named func­tions: variables.__ = intermediateFunction;

For a recent project at work, I found that a func­tion I was going to be call­ing a lot had a very long name. The func­tion was a trans­la­tion look-up. I pass in a string which rep­re­sents a lan­guage key, and the func­tion returns a value for the tar­get language.

Because our project is heav­ily trans­lated, it meant I’d be call­ing the method many times per page. It would going to be a lot of extra typ­ing. The solu­tion we found, to reduce that typ­ing to a min­i­mum, is some­thing I’m call­ing “short­cut functions”.

Short­cut func­tions take three parts: the orig­i­nal func­tion, an inter­me­di­ate func­tion, and the assign­ment of the short­cut func­tion. With a short­cut func­tion, you can go from writ­ing application.translations.getTranslation( string ) to __( string ).

Don’t give me that look. That’s pretty cool.

  1. You should already have your orig­i­nal func­tion. Chances are, it lives in another CFC some­where, and that’s why you want to short­cut the name.
  2. Next you have to write your inter­me­di­ate func­tion. The goal of this func­tion is to call your orig­i­nal func­tion. We need this inter­me­di­ate func­tion to pre­serve the scop­ing of the orig­i­nal func­tion. I like the pat­tern shortcutOriginalFunction. Your inter­me­di­ate func­tion can be an anony­mous func­tion, too, which might be less con­fus­ing for some people.
  3. Finally, you write your assign­ment. The assign­ment puts the inter­me­di­ate func­tion into the vari­ables scope, so we can call it with­out an explicit scope. The assign­ment needs to go into the onRe­quest method of your Application.cfc and should not use paren­the­ses. It should look some­thing like this: variables.__ = intermediateFunction;

Let’s look at some code. Included is an index.cfm, a trans­la­tion CFC (which con­tains our orig­i­nal func­tion), and the Application.cfc that works our magic. This code has only been tested on Adobe Cold­Fu­sion 10.

Well, the Miles Rausch fam­ily wel­comed its newest mem­ber this week: Ains­ley Ann.

Her stats:

  • Born Sep­tem­ber 23, 2012
  • At 5:59 pm
  • Weigh­ing 7 pounds & 3 ounces
  • Mea­sur­ing 19 inches & ½ of another inch
  • Tends to sound like a pterodactyl

Every­one is doing well. Older brother, Ian, is absolutely obsessed with baby sis­ter, which is a mixed bless­ing that will even­tu­ally get better.

Friday Fun: Yelp Review

Update: Bryce won. Read his entry.

Have a Yelp account, plan on eat­ing out today, and want to have some fun? Well, you’re uniquely suited to play Fri­day Fun: Yelp Review!

The rules:

  1. Have a lovely meal out, but it must hap­pen today
  2. Make or sign in to your Yelp account
  3. Write the fun­ni­est or most cre­ative review you can before mid­night in your timezone
  4. Leave a com­ment on this blog post with a link to your review some­time this weekend
  5. Repeat 1 — 4, if you want
  6. Come back on Mon­day to vote
If you win:
  • FAME
  • FORTUNE (in the form of ADDITONAL FAME)
  • A whole bunch of losers will post links to your review (see FAME and FORTUNE above)
If you lose:
  • NO FAME
  • ALSO NO FORTUNE
  • You must post a link to the win­ning review on your social media with the expla­na­tion, “My Yelp review wasn’t as funny as this!”

I’ll put up a Poll­Daddy poll by Mon­day morn­ing, I’ll leave it open for a cou­ple days, and then announce the win­ner NEXT FRIDAY! Want an exam­ple? Check out Christo­pher Miles’s review of The Patriot Saloon.

And, have fun!