I hereby decree
by David LeMieux
I hereby decree has successfully migrated to better versions of core technology.
Code libraries and frameworks are great. They provide so much of the heavy lifting that developing with them becomes easy and predictable. In most cases, code libraries are a perfect remedy.
In JavaScript, for example, jQuery not only provides a nice interface for dom manipulation, but also normalizes all the browser quirks so that, regardless of how a method is implemented, we know it will work. True encapsulation that benefits the developer. Unfortunately libraries like jQuery come at a cost, albeit an increasingly small one: Bandwidth.
There are things that can be done to offset this, like using a CDN hosted version of the file. There are also tools that can help you manage what features you need and only package those in. Modernizr has an excellent example of this on their download page. Still, there are cases like those I see at work where a 20Kb library takes up too much space.
At Flite I help develop our ad platform. Users can make ads for desktop and mobile web use and then traffic them via different channels. The IAB has numerous guidelines about Internet advertising, and one of them is about file size. Some ads, for example, have to be under 40Kb, images and all. Since we develop a platform that allows users to create ads in a drag-and-drop interface and customize it will different components and features we are, in effect, serving small web applications as ads. But for all the functionality we allow, we can't tap in to the features provided in a library like Angular JS, for example, because the minified file size is nearly 30K on its own, leaving very little room for other assets.
I understand this is a problem that is perhaps unique to our circumstances at Flite. It still holds true that if we can, in most cases, make our file sizes smaller then sites will load faster and faster load times mean more satisfied users. So my question is always this: At what point does using a library become useful?
If all I need to do is get an element on the page, there is no need to use jQuery with its selector interface when regular old Vanilla JavaScript can help:
var item = document.getElementById("theItemIWant");
But if I need to do something that becomes complex across multiple browsers and my own code would be bloated and inefficient, why not rely on a utility to do it for me?
Picking the right library or utility can also help when bandwidth is concerned.
There are resources out there to help find small libraries, like Micro JS, though not every library there has legacy browser support. It is also important to be aware that some libraries have dependencies on others - so a small MVC framework might actually depend on some other larger utility in order to function correctly.
Like I said before, maybe this is becoming less of an issue in the real world, but why not take a moment to consider how to make things more efficient and cleaner for our end users? Also, the exercise of solving code problems without a framework helps engender more respect for them and their utility.
There is a pattern in some JavaScript libraries in which methods called on an object return that same object so that more methods can be called. This is known as method chaining and it looks something like this:
$('#myDiv').show().addClass('foo').append("Hello"); //And so on
This code gets the #myDiv jQuery object, shows it, adds the class 'foo' to it, then appends some HTML. We could continue doing this for many more methods.
Unfortunately, not every method follows this pattern consistently. Setting dimensions, for example:
$('#myDiv').width(300).height(300);
works fine, but if we call either of those methods without the new dimension:
$('#myDiv').width() //Returns a number
what we are really asking for is the current width and so a number is returned. That means we have one method with different return types. The jQuery team have decided this is how they want their interface to work and that is fine but this is something to consider when designing your own library. You could easily imagine that the method should always return the current dimension, even if a new one is set. Perhaps a different method that always return self would then also provide the kind of usability that is desired for chaining (e.g. $().setDimension()).
Method chaining is useful, but so are well defined, consistent interfaces. Promises use this pattern to great effect which is a small part of what makes them so powerful. My own personal preference would be that if your interface method can consistently return self and it would be useful to do so, then make it happen. Otherwise, I fall slightly over the line of being more interested in a clean api.
I made some minor updates to please lately and I figured I could talk about them here.
First, I fixed some bugs around the token replacement and input for aliases that use them. I also made it so that the template values could be provided inline with the initial command so that what was once:
> please do something
> input: _
can now be:
> please do something -input 'foo'
Next, I made it so that when using --list you can provide a filter argument. please --list bar, for example, will list all aliases that contain the word "bar".
Finally, I added environment variable support to aliases so that $ENV_VARIABLE will correctly parse to the right value.
Just download the project or clone it from github then run the rake install task and it should be ready to use on your OS X terminal!
I am sure that no one else actually uses please, but I find it very useful. Since the please.yml file can be stored in any directory (based on environment variable), I have it stored in my Dropbox folder so that between computers I have the same list of aliases, automatically synchronized. If it were to ever get more popular, I could even see putting together a github repository or some other way for people to share their alias files. But maybe I need to make the code more robust before then.
A quick update to say that I put the bulk of the E.ggTimer code on Github as is. Mostly because it isn't doing much good just sitting there. Also, it will better coax me to make improvements and clean it up.
Check it out on Github
All the different layouts. 1) Large. 2) Medium Large (iPad Horizontal). 3) Medium Small (iPad Vertical) 4) Small (iPhone)
Continuing last years example I made another digital family Christmas card.
Last year I experimented with different HTML5 features including audio and canvas. That card was JavaScript heavy. This year I decided to try my hand at CSS and everyone's favorite buzz-work: Responsive Design. The result is a page with a lot of rectangles and images. Clicking (or tapping) each image will flip it over with CSS 3d transitions and show new content. The JavaScript used is minimal.
I had originally set out to use a framework or library like Twitter's Bootstrap. I found, however, that there was a certain amount of feature overkill for what I was trying to accomplish.
I also attempted to use CSS media queries to support Retina devices, but I failed miserably. Maybe next year?
I've made the code for both cards available at github. As usual, it only works in modern browsers, and even then only really in the webkit ones. I didn't want to take the time to make it compatible. Sorry.
2011
2012
Just a story I did on Twitter. Nothing important.
Back in my day we had books. You had to pick them up and open them and turn each page by hand.— David LeMieux (@lemieuxster) January 29, 2013
And if you wanted to know where something was you'd have to hope it was in the index or that there was even an index at all.— David LeMieux (@lemieuxster) January 29, 2013
And from time to time certain books would be enchanted. Opening them without first saying an incantation would release all of Hell's demons.— David LeMieux (@lemieuxster) January 29, 2013
Then you'd have to run to the warlock's house and ask him to help, but there was always a price. Your Uncle Jim gave his life for ours.— David LeMieux (@lemieuxster) January 29, 2013
Anyway, you kids don't know how good you have it, what with these AR Contacts and cranial implants.— David LeMieux (@lemieuxster) January 29, 2013
For nearly as long as I've worked at Flite I've done more or less the same thing. Not just "writing code" but "writing code to do the same thing." It has been a fun challenge and actually resulted in some work I am very proud of. Recently, however, I was assigned a new thing and it has been delightfully freeing.
I've worked on different projects in the past, but my main focus on all of those projects has been the ad runtime platform at Flite. Now I am working on something more front-end related and the change of pace has done two things: 1) It has given me a chance to stretch different coder muscles and 2) Taking a step back from platform work, I've actually begun to get lots of creative ideas about the platform again. Previously I was feeling somewhat stuck in a loop.
The stresses are different. In the platform code, I have to constantly make sure I'm not making the file size (for a file served thousands of times a minute) too large. I also have to make sure it is robust enough to work anywhere without breaking ad or webpage functionality. Not having that constant worry has been liberating. In its place are new worries - like am I writing code compatible with existing patterns and not breaking user experience - but they are new and fresh and welcome.
For the one or two people who will read this: Flite is Hiring
Just a thought:
Valve recently announced a beta release of Big Picture. Big Picture lets you access and play your Steam library of games (or at least the compatible portions) on a large screen or TV using a console controller. Valve's main selling points for doing this are that a player doesn't have to give up all the collateral - friends, games, and achievements - when he or she decides to play video games "in the living room." A very interesting idea, but I have been wondering lately if maybe something else is going on.
Valve developers seem to be upset about the horizon of PC gaming. With some open concern about Windows 8 and what seems like a continuous march towards limitation and control from OS makers (app stores, sandboxes, etc.) it makes sense that Valve would start to explore alternate means of distribution. If you take the recent Big Picture announcement and combine it with even more recent news about Steam for Linux and add a sprinkling of desire to be free of OS overlords, it seems to me, at least, that Valve might be thinking of a future in set top devices. Or, if nothing else, linux powered machines that can run Steam powered games and allow players to play them on a large machine. Add in a controller and you've essentially created a console.
If anyone is going to disrupt the console market, I suppose Valve is in a unique position to do so. They already have the distribution and game mechanics architecture and have been learning how to scale both. They have a nice library of games, many of which already have console counter parts. Valve also has a tremendous fan and user base that would be willing to give things a go. If Valve stays consistent with their other marketing strategies, they are poised to take on the larger players.
That said, this could also be seen as a sustaining innovation. Either way, if Valve is considering a move toward set top hardware or alternate means of distribution to get around what they feel are too many OS restrictions this Big Picture beta test will give them at least a glimpse in to how users might react.
Then again, this is pure speculation. I could be 100% incorrect. I like to hope that there is at least a smidgen of truth in this thinking though, because it would be cool.
Lately I have been experimenting with different phone ring sounds. Here are some I have found to be the most effective:
- Whip My Hair, by Willow Smith
- Circle of Life, by Lebo M.
- Rapper's Delight, by The Sugarhill Gang
I have been doing a lot of mobile testing lately (have you tried Adobe Shadow? It is handy) and I find myself wishing there were a super simple way to get whatever text or url I am looking at to my phone. I haven't taken the time to look for apps or other solutions, so I made a bookmarklet that turns selected text in to a QR code for easy mobile scanning.
Make QR
I have only tested it in Chrome, so forgive me if it doesn't work otherwise.
Update: Here is the Gist
E.ggTimer has a new options menu, safely guarded by the word "beta". It allows you to CHANGE THE SOUND, which has always been the number one request. Feel free to check it out, if you can find it.
A long while ago I decided to get my toes wet with Ruby, feel the waters and ease myself in to an ocean of new code. To do so I made a simple command line utility to help manage repeated tasks through aliases. I called it "please" because that way when you use the command it looks like you are asking the computer to do something for you and you are being polite. Technology and decency all wrapped up in one.
Please is available on github and works on Mac OS X. It is also available as a ruby gem:
$ gem install please-command-alias-manager
although there really isn't much reusable code and therefor breaks some of the gem mentality/pattern. Oops.
Lets say you have some long command you have to run regularly, like tail a specific log file. With please
$ tail -f /Users/username/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt
becomes
$ please tail flash log
Since you can define the aliases in natural language, you don't have to worry about remembering the one-word or oft-hyphenated command from ~/.bash_profile. Here is another example.
$ networksetup -setairportpower airport {on/off}
becomes
$ please toggle wifi
on/off _
This one demonstrates that aside from simple aliasing you can also use a replacement/template like syntax to natural language prompts for command line arguments. Here is one last example:
please --add "save clipboard as audio" "pbpaste | say -v {voice} -o ~/Desktop/{filename}"
This creates the command "please save clipboard as audio" and then prompts you for the voice and file name.
I've been using it regularly for over half a year now and I recently gem-ified it as well as added some nice new features. I figured I would let others have access to it if they wanted. Don't go looking in to it too deeply though, it is far from perfect. As always, feedback is welcome.
NASA Image -> HTML/JS -> Poster
Recently I used one of my JS/Canvas Experiments to make a real poster print (through Zazzle). I started with a public domain image from NASA of the STS-130 lifting off from the launch pad.
The Original
Next I ran it through my Qaudrant algorithm with a few tweaked settings, making the output five times as large as the original image. I did this because I wanted the print to be at least 350 ppi and the output is normally 72 ppi. 72 x 5 = 360. I also added extra width to the borders to make them more apparent in the print.
Normally the output looks like this:
Regular Output
But I changed the settings and removed the fills and got this:
Configured Output with Lines
The image processing recursively divides the image in to quadrants and if a given quadrant meets a certain color-similarity threshold it will make that quadrant the average or most common color within. The effect is that areas with more detail (defined by more color) get smaller, more details boxes. It is really effective at tracing clouds. You can watch it work in real time (modern browser recommended)
It turns out that Google Chrome has a hard time managing large image data url strings (the output from the manipulated canvas image) and so the 5x increase would often times crash my browser. To make it work I would output the data url string to the console (this, too, would tax the system, a 4.5Mb string is a beast to manage it would seem) and then I copied it in to a separate file. I then used the file contents and ran it through a PHP script which then rendered the final image as output.
A little cropping in photoshop and I uploaded the file, sent it to the printer, and got this:
Poster
Aside from cropping I did no re-touching in photoshop. When I do it again I might adjust the brightness/contrast for a better print. I might also try to calibrate my monitor so I get a better feel for it. I might also use glossy poster paper instead of matte.
Overall I am satisfied. There is something nice about having a physical object. I plan on trying more, perhaps with different printers or options and sizes.
UPDATE: Here is the final output (3.4Mb)
Merry Christmas!
Valerie and I don't often remember to send out holiday cards. You know the type, the ones with a picture of the family and sometimes a note recapping the year's activities. We always talk about doing it, but never do it.
This year on Christmas Eve I had an idea to make a digital card. The original idea was something like an 8-bit snow-globe but I knew the first thing Val would say would be "but our picture doesn't look very clear" (or something along those lines) so I came up with a little trick. The picture starts out clear, but then as the 8-bit carol plays and the holiday greeting appears from the bottom, the picture is blocked in to a more 8-bit-like image (not true 8-bit, of course). You can check it out here, make sure to have your speakers on.
I have been doing a lot of Flash programming at work so for this card I decided to use just HTML, Javascript and CSS. I took advantage of some of the code libraries I made this year, like Cigar and my previous canvas experiments as well as some third-party code libraries, mostly from Grant Skinner. I tested the card in Chrome, Safari, and Firefox (all the latest version) and I took a glance at it in IE. The only major difference was that I still haven't gotten the font-face to work in IE.
In theory it should work on mobile safari or any html5 compliant mobile browser but it doesn't because of restrictions in place by those browsers (e.g. no sound loading unless dictated by user action). I could have added more support for those devices, but I put this together in about three hours late Christmas Eve and any more time spent would have meant it wouldn't have been ready for Christmas Day. It almost wasn't as it is.
My favorite part is the snow, and my lovely family of course.
UPDATE: I added support for iOS devices now, too.
Sometimes you need an invalid feed or some random artifact crucial to helping you debug and test your web application. I hope to turn My Imaginary Site a resource for just that.
I've owned the domain for long enough now. I purchased it as a kind of personal inside joke. Now I want to make something useful of it. I have been ever-so-slowly filling it in, and it is still really sparse.
Please send any suggestions my way.
Keep in mind that this isn't meant to be some amazing end-all be-all resource. I just want a quick index of all those things you find yourself needing in application development. "Man, I really wish I had a way to load a feed url that timed out after 'n' number of seconds." - I will soon have a link for that up on the site. So that kind of thing.
It is with a little sadness that I admit that I did not participate in this years Trunk or Treat.
Sigh.
I had an awesome idea and about a month ago I got started on the beginning work for it. Somewhere along the way, though, it became apparent that I wouldn't be able to complete it and unfortunately after that I never switched to another, perhaps easier, idea.
The creative process is interesting. Not every idea takes off and of the ones that do not many are ever completed. I am not upset that I wasn't able to participate this year and protect my reign as King of the Trunk or Treat. In fact, it was relaxing to just take my kids and enjoy the evening. But when I am not making things I feel like I am just sitting around twiddling my thumbs. It isn't a feeling I like.
That is why I am such a proponent of just doing things. Have an idea? Work on it in some small way. A sketch. A list. Initial research.
This has been an off year. I have gotten a lot done, but not in the areas I expected.
A few weekends ago I got to participate in Node Knockout with some friends. It was a 48 hour contest to see who could come up with something great using Node.js. My team, myself and some coworkers, decided to try and make something like a multi-user game platform where you could use your computer screen as the output screen and a second device (mobile phone, for example) as the game controller. What we came up with was Fly By Wire (more info).
It was a lot of fun but there are some pretty bad bugs. We didn't win either. But I learned a lot about Node.js, CoffeeScript, and web sockets. I hope to do it again next year.
I've been doing some experiments with JavaScript and the Canvas tag. Here are some results:
Starry Blocks
Launch Pad Quads
The first just traverses an image and chunks it in to blocks of a configurable size and displays the average color for the block. The second recursively subdivides the image based on color threshold and size and then, again, displays the average color if the rules are met.
You can see them compute live here and here. (Google Chrome or a very modern browser recommended)
The code isn't completely optimized, and I have found some interesting irregularities while working with the Canvas Context object, but in all it seems like a straightforward piece of technology.
For more Canvas fun, check out EasleJS by Grant Skinner (not used here). He has essentially taken a lot of the vocabulary and paradigms from Flash and ported them over in to a performant Canvas render engine.
Part 1
So, its been a year and I would like to re-comment on the state of Flash. Flex/Flash consultant Jesse Warden put up a nice post today about some current Adobe news. One thing Warden mentions is the fact that the passion behind Flash is dying, not the technology itself. I would add my voice to that same sentiment.
In my own professional life (I am not a consultant) I have been using Flash less and less as time progresses. This has nothing to do with the platform or its capabilities. It has a lot to do with how my company values Flash and the time we decide to put behind it. Flash continues to be an important part of what we do, but many of our new projects are striving to be Flash-less. The reasons for this vary, but the biggest are these: 1) We are trying to be cross-device compatible, inclusing iOS. 2) We are a group of young, "hip" developers that often get caught up in the new coolness.
Lets talk about reason #2 for a moment. Things like Node.js and Ruby as well as the many GitHub projects are the cool thing at the moment and are proving to be fun to play with. In an effort to say ahead of the curve and also be a part of the "bleeding edge" we sometimes pick new technologies over old ones (it is also very educational). Bottom line, we never say "lets use Flash to implement this cool new idea."
So, it doesn't matter that in many cases Flash would be a great solution.
There are allegedly some cool technologies coming in newer versions of Flash, but I haven't felt the need to look in to them. If I am any indication (and I don't know that I am) I would say that the trend is similar elsewhere. (Also, I've seen demos of WebOS running Flash and yet it is still nowhere to be seen.)
There are a lot of cool new toys to play with, and whether because of marketing or timing or any other reason the new Flash toys just aren't as stand-out and amazing any more. It used to be that if a developer made a cool Flash library they could get some traction and some attention. Now the new hotness is putting up a new JavaScript or Ruby project on GitHub.
So Flash as a technology is still not going anywhere, but it may start to disappear if the community stops caring.
I've been working on a side project of sorts. What makes this one different is that I don't know where it will take me. I would like to introduce Cigar.js - a JavaScript dependency importer. Basically, it acts kind of like import does in Java, but it works client side and it is for adding JavaScript files to your runtime environment.
It works like this: After loading the Cigar.js file you can call _import and load javascript files from your own domain (for now, though I do hope to add the ability to do external files as well). You can chain the imports together, essentially creating a queue of files to load. At the end you can specify a callback that will be initialized once all the files have been loaded.
I've had this idea in the my head for a while now, but it wasn't until I saw a tweet from Jeff Remer that I thought "well, Groucho always has a cigar, so I should make a js library called 'cigar'."
Yeah, it was all based on a bad pun
What is emerging from this wandering idea of mine is that you could use this to structure your JavaScript files more like Java classes. This could be handing for creating reusable code snippets and have dependencies, but help remove all the circular references.
You could have a utility "class" called "AwesomeUtility" that is used in "Object1" and "Object2". Cigar would allow you to save those in separate js files and test them independently, then you can use Cigar to import them in to your main script file and the dependency will only be loaded once.
As it is, Cigar is no-where near production ready. There is still a lot to test out and play with. Also, I have know idea where this is going.
I sometimes get to work while I ride in to The City on BART and I am always a little disappointed that my coding/terminal skills don't seem more hackeresque, especially when someone is looking over my shoulder. Though I certainly don't want to have my computer taken away for looking suspicious I decided to make my onlooker's experience more fun.
Today while on BART I put together this little number:
I'm in your phones, hacking your numbers
What this really shows is a bash_profile alias that points to a Java thread I made that spits out a random quantity of random, not even valid, phone numbers at interchanging intervals with either a success or failed message. It then tallies the successes and outputs the success/total ratio at the end. What it looks like it is doing, though, is hacking all the nearby phones.
Why make this? So that the people sitting next to me get mildly freaked out. I mean, to start this baby up I have to type "hack_nearby_phones". Everything Hollywood teaches us about computers allows this to make sense, so it will surely fool everyone.
I hereby decree that the links section shall be restored. Just visit http://iherebydecree.com/links and see for yourself. I started this links section a long while ago and then stopped as I found that I was user Twitter and Facebook more for sharing. Time has passed and again I find myself wanting to consolidate.
For the three people that read this blog, I hope you enjoy.
Bow chicka bow wow
Err... wait, Inception. I really enjoyed the film. It was a great action movie; intelligent and original enough to be worth watching multiple times.
One aspect of the movie I really enjoyed was the musical score. In fact, I find myself keen on many of the movie soundtracks composed by Hans Zimmer (Batman Begins/Dark Knight, Pirates of the Caribbean, Sherlock Holmes, and more).
Anyway, if you've seen Inception you know that the protagonists do much of their deeds in a dream state. In fact, they induce dreams within dreams. For every level deeper they go in the dream worlds, time slows down. In other words, you have more perceived time in a second layer dream than you do in a first layer dream, even though the same real time is passing. Confused? Watch the movie.
Whenever they want to be awoken from their dream state, someone has to initiate a "kick" - or some kind of semi-violent wake up call, like the feeling of falling or being hit. To signal that said "kick" is coming, they use an audible hint: The song Non, Je Ne Regrette Rien by Edith Piaf. (Seriously, if you are totally not following me go watch the movie then come back.) So that is why when I found this YouTube clip:
Same music, just slowed down.
I was amazed. "What a clever trick," I thought to myself, "I wonder if it is on purpose. It has to be." It turns it was. In fact, Hans Zimmer has admitted that much of the soundtrack is based on that one song.
So, a clever movie with a subtly clever soundtrack. If you haven't seen it already, go see it. Now.
