Select Page

I'm a Developer and Photographer

in Conway, Arkansas. I write about things I find interesting.

Object Oriented SASS (OOSASS) with Inheritance

Mixins in SASS are great, however, there is a downside to using them for your OOSASS. Mixins bloat the output code. Every time you call a mixin it includes the output of the mixin in your final CSS.  The obvious solution is placeholders, but placeholders don’t work well with parameters or with BEM-style css class names.

I’ve come up with a solution that solves both problems. I lets you use a mixin for your OOSASS class, it lets you inherit from this OOSASS class and also produces efficient output using placeholders.

Say we are styling the following markup:

We might start by making a mixin for this component 

And then use it:

The problem here comes when we try to apply this mixin to another component.

This is going to output this, which duplicates our CSS:

What we want to do here is to create placeholders for every element in our mixin “class”, and use them with extend inside our mixin.

Now our previous code which did the @include article on the two components generates this:

Now I have a reusable mixin that produces optimized SASS!  But what if I want to override some style of an instance of a component? This is fine. Since we included @content in our mixin ‘class’ you can do this:

So what we have here is in essence OOSASS.  .another-article is an instance of article. And it add styling to the title to color it black.

But what if we want to make  a subclass of article? Say we want it to be a featured article and have larger bolder headlines?

We can do this:

featured-article inherits from article. It overrides font-size and adds font-weight.

Here’s an example of using two articles and two featured articles

And the CSS output it produces:

Because of the single level of specificity of BEM, the overrides work perfectly the and later rules for font-size win for featured articles.  It would be nice to properly override the font-size and get it to exclude the first font-size declaration automatically, but sass doesn’t really provide a mechanism to do this sort of thing.

Here’s a live example of the above on sassmeister if you want to play with it.

 

Using Choosy and Fluid to isolate websites on OS X

For a while now I’ve been struggling with keeping a browser for work stuff, and a browser for home stuff on my same user account in OS X. Luckily, I found a great piece of software that solves this problem perfectly (almost). The software is Choosy.  It costs $12 and perfectly solves most multiple web browser problems you come across on a Mac.

The way it works is, Choosy becomes your default browser, except it’s not a browser. Choosy is a browser launcher and pass through. So anytime you click a hyperlink on your mac , in any piece of software EXCEPT for browsers, Choosy launches and pops up a menu containing a list of all the browsers you added to the Choosy preferences.  For instance, if someone sends me a link in Messages, or in Mail, or even a link in iTerm, Choosy pops up and asks me to pick a browser.

BTW, if you are wondering how I got Internet Explorer in my list, that’s VMWare Fusion’s application shortcut to Internet Explorer.

So, I can keep Chrome for work stuff, and Safari for everything else. I also added Whitehat Aviator to the list, so if it’s just a “junk” link and I don’t want web bugs tracking me, I just open it in Aviator, and it’s like opening it directly into Chrome Incognito mode.

So far, so good.

But let’s make Choosy even more powerful.

Enter Fluid.

Fluid is a single web site browser. Fluid lets you create an “Application” that fits in your Applications folder that navigates only to a single website. This is handy, because, for instance I can isolate sites like Facebook into their own app. You can even set the Facebook fluid app to store cookies separately from Safari. This means that facebook’s cookies are only available inside the facebook fluid app, and I can keep Safari logged out of facebook.

But there’s a problem. What happens if you click on a link to facebook in email or messages? It’ll open Choosy, and sure I could add the Facebook app into Choosy and pick it, but there’s a better way.

In Choosy’s preferences you can setup Advanced Behavior Rules. So , I can make a rule like this:

So, now anytime I click a link for facebook.com, Choosy will automatically open the link in my isolated facebook fluid app.

I’ve setup several of these now, isolating a lot of services into their own applications that are in effect sandboxed from my regular web browsing activities.

I even use this for some of my work stuff. We use podio for task management, and now I have a podio app. Pinterest has it’s own app. Google Plus has it’s own app. The possibilities are endless.

 

 

My Resume, in JSON, Markdown and HTML with Javascript Promises

As an exercise in programming and learning some new javascript features, I’ve written my resume as JSON. The JSON gets loaded and turned into Markdown via handlebars.js, which then gets converted into HTML by marked.js. The page also uses require.js for module loading and highlight.js for syntax highlighting of the code blocks. You can see all of the code that makes the page run on bitbucket.

One of the interesting features I learned while building this is the idea of Javascript “Promises”.   Often, when dealing with the asynchronous nature of javascript you end up having to nest calls, much like I have to do when rendering the different sections of the resume.

At first, I was doing something like this with nested closures and callbacks that get the processed markdown as an incoming parameter.  As you can see, this isn’t very readable and would get worse and worse as you add more and more sections of the resume to parse.

By using jQuery’s “Deferred” functionality, each of my toMarkdown functions return an object known as a “promise”. Basically my asynchronous code goes off into a queue inside the Deferred object, and posts it’s results to it using a method called “resolve”.  Here’s what that looks like inside of one of the toMarkdown() functions.

It creates a promise, and then immediately called “renderTemplate”, which is an asynchronous function that goes off and makes an ajax call to get a Handlebars template and render the markdown. Of course, before that even gets to happen, this function ends and returns the “promise” to what called it.

Later on, I can call “done” on the promise object,  and pass it a callback and when the render is actually finished, I’ll get the markdown passed to my callback. That would look something like this:

Of course, this is only one call. What happens when I want to do all of them? Aren’t we in the same exact boat of nesting asynchronous callbacks? After all I need to combine all the output from all of the toMarkdown() functions.

Well, jQuery has a solution for that. It is the $.when function.

So now, I create the three calls to toMarkdown() right inline in a row, much like you do in synchronous programming.  However, I don’t get back the markdown, I instead get back a promise object (a jQuery.Deferred in this case).

The $.when method takes promises as arguments and returns another promise.  I call .done on that promise and when it’s finished, I get all three rendered markdowns passed to my callback function.

Then I can concatenate them together and I’m off to the races, and I have some code that is really easy to read (Assuming you know how promises work)

jQuery’s Deferred object isn’t the only way to do promises, but I was already using jQuery and it was convenient. There actually is a sort of a standard forming around javascript promises. If you are interested, you can read more about that at promisesjs.org.

Oh, and if you are looking to hire a javascript developer, don’t forget to check out the resume itself here.

Happy 30th Anniversary Macintosh

Apple is celebrating 30 Years of the Macintosh today. They’ve put up a website celebrating it.

My first Macintosh that I owned was an iBook G4. At the time I was mostly a Linux user, waiting patiently for Linux on the Desktop to take off. I had bought a $400 used ASUS laptop from a guy in our Linux User’s Group at the time and the screen had just died and was going to cost almost $400 to replace. So on a whim while I was in Texas visiting relatives I went to a Fry’s Electronics and after looking at the PC laptops and the iBooks, I decided to get a 12″ iBook G4. Suddenly I realized I could have an excellent desktop OS with with my old Unix bash shell and utilities underneath. A couple of years later when it came time to replace my aging Linux tower computer, I opted for the first Intel 24″ iMac. I’ve pretty much had Macs ever since.

Using 1Password Anywhere with a USB Key and Safari

After listening to Mac Power Users #173 I decided to repurpose a USB key I had on my keychain into a 1password emergency data store.

There’s only one problem with this. Browsers have recently been locking down “local” file access, so the normal method of opening up the 1password.html file in Safari doesn’t work. You’ll know it doesn’t work when you get this screen

This is happening because Safari can’t read the encryptionKeys.js file from the local disk.

However, this is easily fixed by turning on the Develop menu in Safari

And then checking off “Disable Local File Restrictions” in the Develop menu.

Tada.