Text on Facebook Gets Delightful

I noticed something unusual on Facebook the other day. My mom had posted some results from a dog show. Her dogs did well, and I love my mom, so, like a dutiful son, I “liked” her post. I soon endured a deluge of notifications as friends and family sent her good vibes and congratulations. I noticed something unusual: whenever someone wrote “Congrats”, the word was a different color. It was now an orange (#F1765E) instead of black. I clicked it, and a spray of confetti and balloons erupted across my screen.

What the what??

I dug into it. Thanks to Chrome DevTools and React DevTools I was able to narrow in on the “Congrats” snippet and learn some things. Facebook appears to be experimenting with something called “TextDelights.” My guess is that these are delightful little animations that can be triggered by certain text keywords left in a post or a comment (or other “surfaces”). Each TextDelight is called a campaign, and there are two campaigns were available to me: Congrats and xo. (I say “to me,” because Facebook practices A/B testing and staggered rollouts, and other Facebook users may see more or fewer campaigns than I.) Congrats is orange and launches confetti and balloons, whereas xo shows pink (#eb6575) and conjures floating trios of hearts.

Each campaign has an ID, an array of keywords, and (through more digging) an animation URI. The array of keywords allows for different languages and text variations (xo or xoxo or xoxoxo, for instance). Congrats has 57 keywords (including: “Congrats” and “Felicitaciones” but not “Congratulations”), and xo has 28 (including: “xo” and “Besos y abrazos” but not “hugs and kisses”). The campaigns are associated with an animation URI which appears to be a jpg but is actually a complex and obfuscated JSON object. I found an example for the Congrats animation, but I’ve had a hard time deciphering it.

If you want to see these delights, I created a public post showcasing them, just in case you don’t know anyone you want to kiss or congratulate. (If they don’t work for you, you’ll just have to imagine how beautiful it is.) Go forth and embrace the delight!

A Technique for Tracking Page Print Using CSS Background Images

Printing a web page is still one of the most popular ways that customers interact with a classifieds search engine. At AutoConX, we try to track that metric for our sellers, so they can see how frequently people print off their listings for safe keeping. Our legacy platform presents users a print-dedicated page to track such details. But what is a modern, responsive technique for tracking that kind of interaction? I wanted something that could target printing by any means possible: triggering a JavaScript print event, using browser keyboard shortcuts or menu items and even using the cloud printing capabilities on mobile devices. CSS’s print media seemed like the way to go.

First, how to handle the actual tracking. A common technique involves creating a “tracking pixel.” When an image tag is dropped into the page, it appears to load a small, transparent gif. What actually happens is that special code executes behind the scenes and just returns data in the form of a small, transparent pixel. I crafted a 1px by 1px transparent gif as the tracking pixel and created a handler event that would call a stored procedure that would track the print in the database. Then the handler would return the data from the transparent pixel to the browser to be rendered as any other image. The CFML code roughly looked like this:

Next, I needed to use that URL as the `src` for an image. I dropped an image tag into a section of code already setup to show only for print media. The section displays a QR code and canonical URL so people with the paper version can get back to the web version. It looked like this:

I opened Chrome Dev Tools, chose the Network panel and reloaded the page. A call to my tracking pixel was made even though the image was hidden from the screen. This is an age old situation that has made it necessary to create new tags like picture and attributes like srcset for displaying different images for different browser scenarios. It was worth a shot, but now I knew this wouldn’t be as easy as I’d hoped.

Let’s try the stylesheet instead. I created the selector `.detail--trackprint` and used my tracking pixel as a background image. It looked like this:

I reloaded the page and… oh, right. CSS URLs are relative to the CSS file. Another rookie mistake. What I needed is something that is relative to the executing page so that the CFML framework gets the appropriate listing information needed for tracking. I tried briefly to use data attributes to build my background image URL, but the `attr()` function is still only good for content. Inline styling would be my best bet. I modified my original view:

I reloaded the page and watched the Network. No call. I emulated print media and reloaded the page. CALL! Success! I deployed the code to our dev server and put some other team members on QA. They weren’t seeing tracking counts as high as they should be. I dug into it with my own testing and found that the browsers (I saw this behavior in several of them) were caching the print preview after the first print. It makes sense and saves the browser some work and data transfer. However, I need to get as close to accurate as possible. I added a cachebuster to the background image:

This proved to be the solution we needed. But it doesn’t track every print! I know. This technique is equivalent to what we have in our legacy system, so in that sense it is a responsive implementation of the same accuracy our sellers already have. I could add some long polling JavaScript to increment the cachebuster while the page is loaded. This would give us
stats on the same page without reloading, but that seems overkill for a secondary metric. That number still wouldn’t be entirely accurate, because users can print more than one copy at a time. In the end, this was just enough development to meet the needs of the sellers.

Building AVR, Part 4: CSS Architecture

Once AIM was built, we needed a product to display the inventory that had been managed. The AutoConX Vertical (Responsive), or AVR, is a white-label product that allows publishers (newspaper or magazine) list inventory from sellers in their area. It’s a digital classified system that offers a lot of customization and flexibility.

This project was trickier than AIM because AIM was a brand new product. AVR, however, had to be a modern and responsive site that met all the publishers’ expectations from the legacy product. Publishers wouldn’t switch unless they saw real value in the new system. We had to build a product that we would put our own products on.

This is the story of the CSS architecture for AVR.

Continue reading “Building AVR, Part 4: CSS Architecture”

Building AVR, Part 3: JavaScript Architecture

Once AIM was built, we needed a product to display the inventory that had been managed. The AutoConX Vertical (Responsive), or AVR, is a white-label product that allows publishers (newspaper or magazine) list inventory from sellers in their area. It’s a digital classified system that offers a lot of customization and flexibility.

This project was trickier than AIM because AIM was a brand new product. AVR, however, had to be a modern and responsive site that met all the publishers’ expectations from the legacy product. Publishers wouldn’t switch unless they saw real value in the new system. We had to build a product that we would put our own products on.

This is the story of the JavaScript architecture for AVR.

Continue reading “Building AVR, Part 3: JavaScript Architecture”

Building AVR, Part 2: CFML Architecture

Once AIM was built, we needed a product to display the inventory that had been managed. The AutoConX Vertical (Responsive), or AVR, is a white-label product that allows publishers (newspaper or magazine) list inventory from sellers in their area. It’s a digital classified system that offers a lot of customization and flexibility.

This project was trickier than AIM because AIM was a brand new product. AVR, however, had to be a modern and responsive site that met all the publishers’ expectations from the legacy product. Publishers wouldn’t switch unless they saw real value in the new system. We had to build a product that we would put our own products on.

This is the story of the CFML architecture for AVR.

Continue reading “Building AVR, Part 2: CFML Architecture”

Building AVR, Part 1: Project Architecture

Once AIM was built, we needed a product to display the inventory that had been managed. The AutoConX Vertical (Responsive), or AVR, is a white-label product that allows publishers (newspaper or magazine) list inventory from sellers in their area. It’s a digital classified system that offers a lot of customization and flexibility.

This project was trickier than AIM because AIM was a brand new product. AVR, however, had to be a modern and responsive site that met all the publishers’ expectations from the legacy product. Publishers wouldn’t switch unless they saw real value in the new system. We had to build a product that we would put our own products on.

This is the story of the project architecture for AVR.

Continue reading “Building AVR, Part 1: Project Architecture”

Building AIM, Part 4: CSS Architecture

We needed to build an inventory system, one that was free from the restrictions of our legacy system. We wanted to build a system that could describe any piece of inventory: from cars to carpets, from houses to job listings. We needed an interface for our sellers to actually manage that inventory. That interface is the AutoConX Inventory Manager, which we call AIM.

This is the story of the CSS architecture for AIM.

Continue reading “Building AIM, Part 4: CSS Architecture”

Building AIM, Part 3: JavaScript Architecture

We needed to build an inventory system, one that was free from the restrictions of our legacy system. We wanted to build a system that could describe any piece of inventory: from cars to carpets, from houses to job listings. We needed an interface for our sellers to actually manage that inventory. That interface is the AutoConX Inventory Manager, which we call AIM.

This is the story of the JavaScript architecture for AIM.

Continue reading “Building AIM, Part 3: JavaScript Architecture”

Building AIM, Part 2: CFML Architecture

We needed to build an inventory system, one that was free from the restrictions of our legacy system. We wanted to build a system that could describe any piece of inventory: from cars to carpets, from houses to job listings. We needed an interface for our sellers to actually manage that inventory. That interface is the AutoConX Inventory Manager, which we call AIM.

This is the story of the CFML architecture for AIM.

Continue reading “Building AIM, Part 2: CFML Architecture”

Building AIM, Part 1: Project Architecture

We needed to build an inventory system, one that was free from the restrictions of our legacy system which could only describe automotive, agricultural and recreational inventory for dealerships across the United States. We wanted to build a system that could describe any piece of inventory: from cars to carpets, from houses to job listings. The process started with our database structure and maintenance areas. Then came a REST API to give us a nice separation of concerns. Once that was in place, we needed an interface for our sellers to actually manage that inventory. That interface is the AutoConX Inventory Manager, which we call AIM.

This is the story of the project architecture for AIM.

Continue reading “Building AIM, Part 1: Project Architecture”

jSimpleFader

Introducing jSimpleFader, a jQuery plugin to simply fade between images.

TL;DR Introducing jSimpleFader, a jQuery plugin to simply fade between images.

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

UPDATE Added a new option: animationStyle. Right now, the values are fade or crossfade.

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

It’s something I’d done a hundred times before. You have a folder of images,  numbered in sequence, that you want to fade and rotate through on your webpage. It’s a simple rotator (although, strictly speaking, nothing 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 plugins that did that, I decided I should just make one myself. Introducing: jSimpleFader.

jSimpleFader is a jQuery plugin to simply fade between images. All it really needs is the total number of images you have, and it rotates through them. The code is straightforward. Just call $('#fader1').simplefader( 10 ); That’s it.

The plugin tries to do a lot of figuring out for you. Your images don’t need any particular naming convention; they just need a number in them. You don’t even need any particular HTML structure; there just needs to be an <img> somewhere. The script has a simple limitation: your images should start numbering at 1, although the first image doesn’t have to be the one on your webpage.

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

  • speed – the speed of rotation in ms (default: 5000)
  • animationSpeed – the speed of fading animation in ms (default: 600)
  • animationStyle – the style of animation: fade, crossfade (default: fade)
  • links – an array of hyperlinks

Like all jQuery plugins, you can have multiple faders on one page, with their own options, and everything should work fine.

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

Mixin and Variable Cascading in LESS

Variables get overwritten, but mixins get combined. To overwrite a mixin, you’ll have to use CSS techniques or guard expressions.

TL;DR Variables in LESS get overwritten, but mixins get combined. To overwrite a mixin, you’ll have to use CSS techniques or guard expressions.

LESS is a dynamic stylesheet language which adds a lot of features to CSS that are common to most programming languages. There’s a lot LESS can do, including adding variables, mixins, and math. Yes, math. You then compile 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 curious how it handles variables and mixins that have the same name. In a lot of programming languages, re-declaring a variable or function has the effect of overwriting the original. In CSS, the rules are cascaded, newer ones having precedence over older ones, depending on specificity. How does it work in LESS?

Variables get overwritten. If you first write @value: #000; and later write @value: #999; the value of @value when your CSS is compiled will be #999. This is true for @value everywhere, including previously included files. (Of course, follows the rules of scoping in LESS apply.)

Mixins, including parametric mixins with the same signature, get combined. Literally identical declarations will not be duplicated, but all other rules, even for the same property, just get concatenated together in one large block. Rules are listed in the order that the mixins are declared. The exception is identical rules, which are placed at their last declaration.

This behavior is probably deliberate, since it falls in line with CSS’s cascading nature. It appears that if you want to overwrite a mixin, you either have to redefine those properties the same way you would in pure CSS, or you can write a series of parametric mixins with guard expressions to ensure you get the mixin you want.

Here’s some code to illustrate the behavior I saw. There’s an included_file.less and styles.less which get compiled into the styles.css.

Shortcut Functions in CFML

Create shortcuts to long-named functions: variables.__ = intermediateFunction;

TL;DR Create shortcuts to long-named functions: variables.__ = intermediateFunction;

For a recent project at work, I found that a function I was going to be calling a lot had a very long name. The function was a translation look-up. I pass in a string which represents a language key, and the function returns a value for the target language.

Because our project is heavily translated, it meant I’d be calling the method many times per page. It would going to be a lot of extra typing. The solution we found, to reduce that typing to a minimum, is something I’m calling “shortcut functions”.

Shortcut functions take three parts: the original function, an intermediate function, and the assignment of the shortcut function. With a shortcut function, you can go from writing application.translations.getTranslation( string ) to __( string ).

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

  1. You should already have your original function. Chances are, it lives in another CFC somewhere, and that’s why you want to shortcut the name.
  2. Next you have to write your intermediate function. The goal of this function is to call your original function. We need this intermediate function to preserve the scoping of the original function. I like the pattern shortcutOriginalFunction. Your intermediate function can be an anonymous function, too, which might be less confusing for some people.
  3. Finally, you write your assignment. The assignment puts the intermediate function into the variables scope, so we can call it without an explicit scope. The assignment needs to go into the onRequest method of your Application.cfc and should not use parentheses. It should look something like this: variables.__ = intermediateFunction;

Let’s look at some code. Included is an index.cfm, a translation CFC (which contains our original function), and the Application.cfc that works our magic. This code has only been tested on Adobe ColdFusion 10.

.sosumi

“sosumi” lives on in Apple’s source code.

After heavily drooling over iPhone 5 and iOS 6, I was reading the HTML for Apple.com‘s homepage, and I came across something that made me smile.

Here’s the snippet:

The division of code that details their legal info has a class of “sosumi”, which intentionally sounds and looks Japanese but is really a reference to a famous Apple sound and trademark dispute.

The short story is that Apple Computer had been fighting against Apple Corps for the right to use the name “Apple”. Apple Corps (owned The Beatles) gave them that right if they stayed out of music. Things got tricky, however, when it came down to anything even slightly musical, including system alert sounds.

When Jim Reekes was designing sound for System 7, the now-famous sosumi alert was thought, by Apple’s legal team, to be too musical. “So sue me” was Jim’s reply, which he then used as the name for the sound. Written as “sosumi”, he convinced the lawyers that it was Japanese, and they allowed it.

It seems someone on Apple’s web team remembers that story and still has a sense of humor about it. You can read (slightly) more on the sosumi Wikipedia page.