bits and bytes

clone all the things

Thu, 15 Nov 2012 22:00:00 -0500

Today, my IT guy told me that I had to move my machine from one AD domain to another. Nothing could go wrong.

Well, that’s the furthest thing from what happened. Everything melted. Luckily, I had everything backed up via Crashplan. Most of everything that I needed, I was able to retrieve instantly. I had put all of my SSH keys on flash already and all the rest was backed up via Crashplan. Except for my “mysrc” repo, where I keep all the stuff that I’m working on. Most of this is on my public github or private, internal gitolite installation. That’s fine and all but I don’t want to have to go and rip all of those repos again.

So I wrote this little Node.js script to clone all my repos from Github. Run it in your ~/mysrc folder or where ever you want them. Oh, and if you use this, please change the username in the path.

grok this

Thu, 11 Oct 2012 23:22:00 -0400

For the last year or so, I’ve been working on reading through Secrets of the JavaScript Ninja by John Resig and Bear Bibeault. The book isn’t published just yet, it’s going through the MEAP process over at Manning.

While you may think that taking a year to read a book is a little wrong, it’s been well worth it. Every few paragraphs, I discover something completely amazing. Also, I’m not just reading, I’m working along with the book. I’m trying to immediately apply the concept before moving on to make sure I understand what’s going on. I’ve put a copy of all the samples up on a Git repo.

Tonight, while working through the chapter on Regular Expressions, I saw that you could define a repetition on a set of characters. My gears started turning and I thought about a common issue which is rational number representation. Often times, when representing a rational number in some system, such as decimal or even binary, you can not represent it completely. For example, 1/3 = 0.3333333333…

All of a sudden, I thought of a solution to check for rational numbers that can not be represented finitely. I don’t think I’ve ever needed this, however, I got a complete rush out of it. Check it out:

Update: My good friend, Lex, mentioned that I should leave the regex boundless. I used to have `var pntdrrn = /\d{5,9999}/;` and now I have `var pntdrrn = /\d{5,}/;`

Simple, helpful CORS bypass via Node.js

Mon, 08 Oct 2012 17:33:39 -0400

Simple, helpful CORS bypass via Node.js

Underscorify

Tue, 11 Sep 2012 14:33:54 -0400

Occasionally, I need to use jQuery on a page that I’m browsing. To do that, I use Karl Swedberg’s awesome jQuerify Bookmarklet.

Today, I needed to Underscore.JS. So, I took his and extended it to work with Underscore.

Behold, Underscorify.

Launching PhoneGap project into an iPad with ios-sim

Thu, 02 Aug 2012 15:15:00 -0400

PhoneGap 2.0 has a lot of awesome improvements, especially the command line tools for building and launching.

I wasn’t able to figure out how to use their “emulate” script to trigger into an iPad, however, looking inside of the “emulate” script they give you, I saw that they’re just using the ios-sim project ( which you had to install during setup ). The PhoneGap has a tool called ios-sim which is a fork from the (defunct?) iphonesim project

You can spawn the emulator directly into iPad mode like such :

ios-sim launch ../build/{{ your_app_name }}.app/ --family ipad

XCode-free, the way to be.

Good Morning, JavaScript!

Thu, 12 Jul 2012 08:31:29 -0400

Last night, I watched a video called “JavaScript: Enter the Dragon” by Dmitry Baranovskiy. In the video, he spends some time discussing the concept of bodybuilding and compares it to JavaScript development: many think they look like an “Arnold” but, compared to the true form of beauty, the Greek “ideal”, they are truly wimps. Being an art history nerd, I really liked the analogy.

He then went on to discuss some important concepts of JavaScript development, such as the number of types in the language, closures, type coersion, prototypal inheritance chains and what happens when you begin to manipulate the prototype of ancestors, etc.

Some of the stuff that I saw I knew. I could teach someone else. But a few things I completely failed on. While some would say “you never have to know such things”, I would say that you’re wrong. The reason that I say this is because while learning some more last night, I saw tons of stuff in some of my code that is absolutely worthless.

Dmitry also mentioned the fact that most people suck at JavaScript. His slang reference to the concept known more technically as the Dunning-Kruger effect wasn’t lost on me and I saw how once again, I thought I was smarter than I actually was. The code examples that followed for the next few minutes demonstrated to me that I don’t really know JavaScript.

Now, to be fair, we need to verify terms here: I’m not saying that I can’t make web applications using the language called JavaScript. I definitely can. What I’m not very good at is language syntax and concepts.

Here’s a little question that he posted this morning:

JS quiz:1 + - + - + - + - + - + 1
— Dmitry Baranovskiy (@DmitryBaranovsk) July 12, 2012

Well, it equals 0, and I have no idea why that’s the case…

But I’m on a mission to change that.

Calling "shenanigans" on MemSQL

Thu, 28 Jun 2012 19:31:07 -0400

If you haven’t heard of MemSQL yet, this post won’t really matter to you…

MemSQL is claiming to be “wire-compatible” with MySQL (bottom paragraph on http://memsql.com/). I have no idea what MemSQL means by that, but as I understand their demo / getting started pages to be written, it seems that they are saying that you can drop in MemSQL, load up your schemas, load up your data and point your MySQL client to connect to MemSQL and no one will be the wiser.

Having a number of applications at work that I’m supporting and developing that use MySQL and MySQL connectors, this seemed like a holy grail.

I was extremely skeptical but I decided to spin up an Ubuntu 12.04 LTS install with 8Gb of memory. I installed mysql-client and mysql-server. I loaded up the MySQL sample Sakila schema and then loaded the data. Great, mysql is ready to roll.

I downloaded and setup memsql and attempted to load up Sakila and got this issue:

memsql> source ./sakila-schema.sql;
Query OK, 0 rows affected, 1 warning (0.00 sec)

Query OK, 0 rows affected, 1 warning (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK (0.00 sec)

Query OK, 0 rows affected (0.07 sec)

Database changed
ERROR 1286 (42000): Unknown storage engine 'InnoDB'
ERROR 1706 (HY000): Feature 'REFERENTIAL ACTIONS' is not supported by MemSQL.
ERROR 1286 (42000): Unknown storage engine 'InnoDB'
ERROR 1706 (HY000): Feature 'REFERENTIAL ACTIONS' is not supported by MemSQL.
ERROR 1286 (42000): Unknown storage engine 'InnoDB'
ERROR 1706 (HY000): Feature 'REFERENTIAL ACTIONS' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'REFERENTIAL ACTIONS' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'REFERENTIAL ACTIONS' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'REFERENTIAL ACTIONS' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'Fulltext indexes' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE TRIGGER' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE TRIGGER' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE TRIGGER' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'REFERENTIAL ACTIONS' is not supported by MemSQL.
ERROR 1286 (42000): Unknown storage engine 'InnoDB'
ERROR 1706 (HY000): Feature 'REFERENTIAL ACTIONS' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'REFERENTIAL ACTIONS' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'REFERENTIAL ACTIONS' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'REFERENTIAL ACTIONS' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE VIEW' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE VIEW' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE VIEW' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE VIEW' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE VIEW' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE VIEW' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE VIEW' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'TEMPORARY tables' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE PROCEDURE' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE PROCEDURE' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE PROCEDURE' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE PROCEDURE' is not supported by MemSQL.
ERROR 1706 (HY000): Feature 'CREATE PROCEDURE' is not supported by MemSQL.
Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected, 1 warning (0.00 sec)

Query OK, 0 rows affected, 1 warning (0.00 sec)

Apparently, the MemSQL team and I have completely different understandings of what “wire-compatibility” means. Here’s the list of things that aren’t supported:

Views
Prepared Queries
Stored procedures
User Defined Functions
Triggers
Foreign keys
Charsets other than utf8

One would think that the MemSQL team would disclose that they didn’t support InnoDB tables. Doing a search on their developer site for the term “InnoDB” doesn’t reveal any such information.

Also, it is clear that they believe that MemSQL will be a drop-in replacement for MySQL, as the MemSQL developer guide says to transition over to MemSQL is as simple as this:

To transition your application, simply change the connection credentials to point to MemSQL.

Unless I’m missing something huge, “shenanigans”, I say. The MemSQL team should publicly clarify what they mean by “wire-compatible”.

High-resolution anti-aliasing enhancement for RWD

Mon, 27 Feb 2012 19:20:00 -0500

While working on a few responsive web design implementations, I found a really interesting bug:

Let’s say you use the same image for “normal” displays and Retina displays and down-sample (set it’s width / height to be .5x of actual image), during DOM reflows / paints, certain browsers (Chrome, et al.) won’t anti-alias the image until the animation / reflow has stopped. This leaves the image looking “artifacty”, even thought it’s extremely resolute.

If you want the browser to aggressively anti-alias the image, just write a rule such as

.retina { transform: translateZ(0); -webkit-transform: translateZ(0); }

And then add the “retina” class to every image that is high resolution.

Oh, and for the love of everything, DON’T use “*” as your selector for that translation hack. You’ll absolutely destroy rendering performance.

Build Responsively - Development Tools

Thu, 16 Feb 2012 22:59:00 -0500

Rob Tarr kicked off the next session with an introduction with some development tools:

A browser
Sparkbox’s MQ Bookmarklet
Sparkbox’s fork of HTML5 Boilerplate.
Sass - (a CSS compiler that is awesome)
Compass - (a tool which uses Sass)
Codekit
320 and up - Andy Clark’s mobile-first mobile boilerplate.

Ben Callahan spent some time talking about the implementation process:

Write the Markup:

fluid presentation makes the separation of style from content critical
he highlighted semantic.gs over against getskeleton.com
take the design and sketch-up / annotate the design choosing which tags communicate the semantic understanding of that part of the design

Base Styles and MQs:

make some base styles for the mobile-first
start considering how to restyle the content as we expand

Lots of code was written. And it was golden.

They didn’t really dive into images or assets, as today was primarily concerned with front-end issues.

Ben wrapped up with the whole idea of the Responsive Mindset. Maybe the techniques are important but what’s really important is the mindset behind the techniques. Maybe it’s not so important to do it in the “responsive” way, but rather, we need to have everything in perspective to support all the devices.

There was an after party and it was, apart from some really weird chick, really chill and awesome. Major props to the Sparkbox Crew!

More @brworkshop branding… Love this stuff. #brworkshop

Thu, 16 Feb 2012 12:58:17 -0500

More @brworkshop branding… Love this stuff. #brworkshop

Build Responsively - Panel

Thu, 16 Feb 2012 12:57:00 -0500

Panel Members:

Ben Callahan
Dan Rosenthall
Drew Clemens
Mark Wells

Some highlights

Sparkbox doesn’t even build in a non-responsive way
Fixed-width sites are going to be a thing of the past before you know it
Don’t design 3 separate designs, just one and give the designer / developer pair a bit of
Collaboration is super important.
Responsive Web Design is always the “right decision” but it’s not the only decision.
Do you have the data to understand the context?
It’s really not about HTML + CSS, it’s about usability.
Don’t limit your mobile users by hiding things from them.
Although not every site will be RWD, how many people are doing table-based layouts these days?
Depending on the complexity of the design, you may be tempted to only prototype in the browser and never
Contrasts are easier to understand when attempting to get buy-in
Most people already want a solution to the mobile problem. It’s not hard to get buy-in from clients.

Build Responsively - Process

Thu, 16 Feb 2012 11:33:00 -0500

Drew Clemens kicked off the second session talking about the design and ideation process.

We started with a print-out of looking at the 960px-based design and were told to design a mobile wireframe based on that.

While we were sketching out the design, Drew provided some questions to think:

What is the hierarchy of content?
Should we hide and show elements at different sizes?
Which things are links?
Are the buttons/links large enough for a touch device>
How will the navigation respond?
How much content do we need to allow for?
Will it work in IE?

After using this tool called a pencil, we looked at the downfalls of some new attempts at process:

960-fixed to mobile - puts to much design pain on developers
starting on mobile and working up - tends to create a pretty simple design at the larger screen resolutions
“book ends” - designing a 960px and a mobile-first as an attempt to “divide and conquer” - this still isn’t the final solution
“book ends plus” - designing a desktop, tablet, and mobile version - IMO this is THE worst possible mistake you can make in attempting to do an RWD execution

Drew then went on to describe Sparkbox’s process: “We are attempting to optimize content, design, and development time, finding a balance of appropriate direction from all disciplines without destroying budgets… while delivering on mobile-first, responsive designs where content is valued and considered.”

A Mobile-Sized Content Prototype Wireframe Thingy
Design the site at a lare screen size in Photoshop
Begin development equipped with a mobile-sized wireframe and a large scree-sized full design
We can’t “throw it over the wall” anymore… at least not if we want our sites to be excellent. There are too many moving targets. People have to work together.

Jeremy Lyod took over for a while, discussing the advantages / disadvantages of their process

Disadvantages of desktop-width wireframes:

too much focus on layout
designer may not feel freedom to interpret layout
leaves an extra step for the designer/developer to figur out translation

Advantages to a mobile wireframe approach:

Wireframes focus more on hierarchy and less on layout.
Cuts out a step of designer sketching/designing for mobile first.
Dev gets direction on both desktop and smallest mobiel widths.
Answer some of the questions

Client Deliverables:

Though we may educate our clients, some will inevitably want to see more and more versions of wireframes and layouts which cover multiple screen sizes… perhaps due to the project scope, or simply a lack of vision.
If extra wireframes are required to get more buy-in from the client, then you should request more money
Don’t show the clients any “bad” designs.

Miscellaneous topics during Q&A in there:

collaboration & back-and-forth is important, it helps everyone learn
developer/designer hybrid - I call this “the rule of two”: developers and designers MUST work back and forth
you must educate the clients on the new challenges / opportunities
touch UX concerns - buttons are a hack
Responsive infiltrates the entire process - pitch, planning, etc.
stats help - go find @lukew and mine his data

Loving the branding of the swag.

Thu, 16 Feb 2012 10:39:54 -0500

Loving the branding of the swag.

Build Responsively - Intro to RWD

Thu, 16 Feb 2012 09:47:00 -0500

Here’s my notes from the first session of the Build Responsively Workshop put on by the wizards from Sparkbox.

Mark Wells from Antistatic Design brought us Bill’s Donuts… Amazing.

Ben Callahan kicked things off giving an overview of what Responsive Web Design is. Big take aways from his portion:

The web is not fixed-width
RWD is a paradigm shift
Semantic.gs which requires Sass

Andy Rossi continued and gave us an introduction of what Responsive Web Design is:

Fluid Foundation
Fluid Assets
Media Queries

If you don’t know what those things are, you can take a look at my (shameless plug) slides. (just hit the right arrow to learn more)

Andy mentioned FitVid.js but it’s way more important to understand intrinsic ratios for media.

Ben followed covered up some examples from mediaqueri.es. Ben also opened up some other ideas:

don’t designing for specific devices
don’t assume the context

Test Driven Development with Jasmine at Dayton Clean Coders

Wed, 18 Jan 2012 11:52:00 -0500

So the other day at the inaugural meeting of the Dayton Clean Coders, I tried out a some pair-programming test driven development. It was pretty fun.

We used a tool called Jasmine to write the tests. Jasmine is a very good unit testing framework for JavaScript. It doesn’t require a DOM, so you can run your tests on the server or your dev machine. It’s primarily for BDD / TDD, but you could implement the tests afterwards. Jasmine creates extremely helpful error messages that aid the developer in understanding how the tests failed, not just which test failed.

A few things I noticed:

Every single time we moved to a new piece of functionality, I instinctively attempted to implement the function first before writing the test.
By the end of the coding session, I felt like I almost hit flow. I’ve never done that so quickly.
While writing the test before implementing a function, my mind was sort of thinking about the function that I would eventually implement. By the time I got finished with implementing the test, I had most of the function pretty much “written” and I could just type it out.
When we got to the more difficult areas of the code they required a particular subtle change in one line or two. Because we had so thoroughly executed the tests and implementation I knew exactly what place to make a surgical refactor instead of large restructures of the way the functions were called.

The kata (challenge) that we worked on was a simple triangle classifier and here’s a gist of our solution. A few hours after the event, I was talking with a friend and I realized there was something that I learned but hadn’t fully understood yet: you should write your tests as if you will never get to look at the code of that function / class.

django south is pretty cool... just sayin'

Thu, 05 Jan 2012 17:50:29 -0500

django south is pretty cool... just sayin'

sqljdbc4.jar can't connect in Java 1.6.29 (Java for Mac 10.6 Update 6)

Mon, 05 Dec 2011 18:58:00 -0500

So, I love my Macbook. I really do. But every once in a while, something that shouldn’t be painful is. And it’s usually really painful…

About one month ago, I was working on getting some Android emulators up and running in Eclipse. I was learning how to use Dalvik Debug Monitor to grab screen captures from my emulators to automate testing for some of my responsive designs. It was grand.

And then I got screwed over: The next day, I opened up Eclipse to find out that I lost my JVM. Knowing that I was just fooling around with the Android SDK, I thought it was my fault for being nosy. This was all a red herring.

It turns out that my JDK disappeared because of a failed auto-update. Weeks later, I would learn that tons of other people experienced the same thing.

I thought that I should just re-install Java. To my surprise, not only did my JVM magically disappear, but the update that was to replace it wouldn’t let sqljdbc4.jar connect to any servers.

Eventually, I found out that I could install Oracle’s JDK 1.7.0 Developer Preview. Magic.

Disclaimer: I already hate Java. I hate it more now.

tl;dr - move over to Oracle’s JDK project because Apple won’t be shipping Java packages and apparently won’t care about the quality of the updates until then anyways.

simple XSS prevention with jQuery

Wed, 26 Oct 2011 00:41:00 -0400

So, let’s say that you’re getting some data from a user or calling a JSON data service somewhere… Even if you’re in control of your data service, you should never assume that the service will provide you will clean data that you can simply insert into your page. If you do, a user could inject text into the webpage and do mean things (redirect to their own site, steal other’s data, steal your data, etc.) If you need to, go learn about it.

Knowing is half the battle. But it’s only half. You also have to test every app that you write. You might have even read every single article on ha.ckers.org and almost cried when @RSnake stopped writing. But that doesn’t mean that you won’t ever introduce an XSS into your application… I know because I could probably give a 30 minute talk on different methods of sanitizing web applications and I introduced one into my code for three days without even noticing.

If you’re consuming a JSON service, there’s a good chance that you’re going to want to clean it up before just dumping it on the page. JavaScript doesn’t have a great way to do this very effectively, but there’s a really easy way to do this with jQuery.

$(function() {
  
 var untrusted = "<script>alert('xss');</script>";
  
 $("#jaquery").html(
   $("<div/>").text(untrusted).html()
 );

});

We’ve got an untrusted value. This could be any element inside of a AJAX callback… We’re setting the HTML contents of the element with the id of “jaquery” to be the results of the sanitization. The sanitization is the convenience part. We create a <div> on the fly with the $(“<div/>”) portion. We then set it’s text to the value of “untrusted”. We then retrieve it’s HTML contents via the .html() getter. Voila.

NOTE: This is not exhaustive, as dealing with XSS is almost never dealt with so easily like this.

If you’d like to, go see this in action.

Tumbeasts are gone… :(

Tue, 18 Oct 2011 15:16:23 -0400

Tumbeasts are gone… :(

Spread Firefox | The Home of Firefox Community Marketing

Tue, 26 Aug 2008 14:20:33 -0400

Spread Firefox | The Home of Firefox Community Marketing