BlendConf 2014 Discount Code

BlendConf

In September I will be presenting a talk at BlendConf 2014 in Charlotte, North Carolina! I have never been there, so it will be quite the vacation for me. I’m super excited and humbled to be chosen to present among many talented people in the tech and design industry. I can’t wait to see what everyone will be presenting about!

If you are in the Charlotte area or are interested in making the trip to the conference, I have my personal discount code to share with you to receive 10% off the ticket price!

Use rachelisfabulous at checkout!

Register for BlendConf 2014 here and check out the list of amazing speakers at Lanyrd!

Today I Learned About Replaced Elements

There is a new feature I am working on at work that necessitates me to add a rotated element behind an image. I could easily just add another div to the DOM, but I wanted to do it with a CSS pseudo element to cut down on markup. Ideally, I would just add a class via JavaScript if a certain condition was met, and my special case would be “turned on.”

Example of Stackable Cards
We already use a similar technique that I wanted to achieve. The images have rotated boxes behind them to simulate “stacks.”

We have a lot of images on our site and make use of the img tag heavily to load up our assets instead of using divs and setting a background image. What I learned and didn’t realize about until today, is that image tags are something called “replaced elements.”

What is a replaced element?

A replaced element is something that has its appearance controlled by an external resource. So what does that mean? It could mean that its behavior and appearance is controlled by the browser itself. This is why other replaced elements like button, textarea, and input all look different depending on which browser you use because how those elements are displayed is up to the browser.

On these replaced elements, pseudo elements like :before and :after don’t work, and aren’t meant to work due to their inherent responsibility and purpose. This behavior is directly mentioned in the spec. Too bad I didn’t realize it until I had already spent a few days wondering why my style works on a div but I couldn’t find it when I tried swapping it to an img tag!

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

The workaround for to get my desired behavior is not difficult to achieve at all once you realize you can’t manipulate the img tag directly. All you need to do is wrap your image (or other replace element) in a block element like a div and then you can use the :before and :after pseudo elements to their full capacity.

I hope this information helps someone else out there who may not have known about this little piece of behavior in HTML!

References

StackOverflow: CSS :after not adding content to certain elements
W3C: Generated content, automatic numbering, and lists

An End to Front-end & Ruby on Rails Session 7

This past Saturday I had the pleasure of watching the culmination of 8 weeks worth of work that went into the final projects of the students who took my class over at General Assembly. I saw everything from an aggregator of fitness clubs in the greater New York City area to a social trip planning web app.

I am always amazed and inspired by the things people dream up, especially people who may not have programmed a day in their life. Often, programming novices see the “web” and have no idea what goes into it, just “magic.” By having introductory courses like the one I teach at General Assembly, we begin to demystify the web so that students can gain a better understanding of the time and energy that goes into making a website or a web app.

Not all of the students I have taught or met want to become developers. Some just wanted to have a better fluency in “developer speak” so that they can go on to hire someone to finish up their prototype. One student and his wife want to start a business and he constructed a web application for potential customers to order window blinds. Many found that they were able to solve problems that they were having in their personal lives. A student in the class felt that she and other parents had difficulties keeping track of their children’s school activities. She developed an application to keep track of the school’s functions and be edited by her and other parents in the school to keep these events up to date.

When we as teachers, mentors, and role-models have a better understanding of what a novice’s goals are, we can better target how to answer their questions and frame it in the context in which they want to apply it.

8 weeks is not a lot of time to complete a full-fledged web application—especially when you’re also dealing with a full-time job and 3 hours of class time twice a week. I hope I was able to convey to them that it was really an achievement to go from no knowledge of Ruby and Rails to presenting in front of their peers their idea—even if they didn’t get everything they imagined completed. If nothing, they all learned to better hone what it meant to reach a minimum viable product and concentrate on the most important features.

It was a pleasure teaching you, and good luck in your future programming adventures!

Photo1

Resources for Learning Ruby’s Pry

During my teaching, one obvious effective tool for learning Ruby is the Interactive Ruby Shell (IRB). It helps students figure out how to play with Ruby’s syntax before they go on to write their first script. I’d heard about Pry before, but it wasn’t until lately that it came up on my radar again. Here is a small collection of links to blogs, resources, and screencasts that I have found helpful in understanding how powerful it is in development.

I can’t see myself using it just for a plain Ruby program, but it definitely is better than the basic Rails console.

I just use it like this from within the base of my project:

$ bundle exec pry -r ./config/environment

Resources
http://pryrepl.org/

Blogs
http://www.philaquilina.com/2012/05/17/tossing-out-irb-for-pry/

Slides
https://speakerdeck.com/conradirwin/pry-the-good-parts

Screencasts
http://railscasts.com/episodes/280-pry-with-rails
http://vimeo.com/26391171

Uninstall Engine Yard’s OS X RailsInstaller

I’m in the midst of teaching an introductory 8-weeks course on Ruby and Ruby on Rails over at General Assembly in Manhattan. Per the course material, we have them install RailsInstaller, an “all-in-one” kit that is meant to get a novice developer up and running in a development environment as quickly as possible.

Acting as teacher, I felt it was good to lead by example and go through an installation of RailsInstaller. After I clicked the install button though, I immediately had flashes before my eyes of this tool over writing many hours of work of painstakingly pruning and preening my dot files, configs and preferences for RVM and git. I pretty much regretted that I did that, thinking it may compromise many of my personal and volunteer projects dependent on having a flawless development environment. (If you’re familiar at all with my Github profile, you’ll know that I have a few projects devoted to my obsessive collection of laptop configuration scripts and dot files.)

Honestly, I have been using my personal MacBook Air for a week now and haven’t noticed any issues in my development environment using the incorrect versions of Ruby, Git or RVM, but I still have this paranoid suspicion that I may have done something by installing RailsInstaller over everything I’ve curated. (Yes, very paranoid.)

Which led me to try to research on where RailsInstaller actually installed these files and how in the world I could remove them!

After a cursory search, I came up pretty empty-handed because on the RailsInstaller main page, it doesn’t give you any information on how to uninstall it! (Maybe a ploy for you to never uninstall it?? cue evil laugher!)

It seems Google Groups is the place to be for me in finding necessary information lately, so I came upon this thread asking about a “clean uninstall” for Mac OS X. (Finally!)

Two things:

If you have an old version of RailsInstaller, you can run this simple command:

/opt/rix/uninstall.app

If you have a recent version like mine, that App doesn’t actually exist in that path and is actually within the ~/Applications folder. D’oh! (Now you know how often I actually peek into that folder versus using Spotlight.)

open /Applications/RailsInstallerOSX-Uninstaller.app

And there you go, it runs through a similar process that you ran when installing, except this time removing the files you previously installed and you can happily watch as all that extraneous overhead is removed over a cup of tea!

Enjoy!

Growl 2.0 — Some Headaches, Some Workarounds

Like a lot of people I know who are on Macs, I use Growl for the different alerts I have set up on the different applications I use. For my IM client, Adium, I want to know when I get a new message and maybe know when my husband signs on or off. On Twitter, I want to see when I get a new private message and I use Propane to access my job’s Campfire and want to know when someone has mentioned something like my name or the work “Thai.” Growl recently updated to version 2.0 and I have encountered a couple of nagging problems.

The Headaches

Over the years, this functionality has become indispensable. I, like many people I know, either donated to the Growl project when it was free, or decided to purchase it on the Mac App Store whenever its newest version moved over to that platform.

That being said, I was really disappointed with some of the issues I have been having with Growl’s recent point release at 2.0 that came out a few days ago. All of a sudden, I noticed that I couldn’t click on the notifications anymore and have it open the appropriate application. When I see a new Adium message, I expect it to open Adium and show me that message. Instead, the notification pop-up would disappear into the GUI ether.

I insisted to myself that the problem just HAD to be user error and tried mercilessly to watch what it was that I was doing so I could debug. When that didn’t work, I then began to pour over the Growl preference panel to see if I may have accidentally unchecked/checked a box I didn’t mean to. No dice! There is no setting there that mentions any type of click behavior that could be modified.

My last stop was opening up the Mac App Store and looking at user feedback, I couldn’t possibly the only person experiencing this problem, right? Right. When I looked at the most recent reviews, ‘lo and behold, other users were having the same problem. A little more digging brought me to the Growl Google Group and latest gripes from the most passionate of users.

Another issue I encountered this morning was that roll-up and/or limits to how many Growl notifications appear at once also seems to be broken. As an example, when I logged into my account, Twitter was still running and was racking up notifications. I had to wait about a minute for the log to cycle through before I had access to my screen again, I’ve never had this problem before! Again, I don’t see a preference option for this, and it seems other people are experiencing the same issues. I don’t have “roll-up” enabled, because frankly, I only want those notifications if I am actually sitting at my desk, not later, but this could potentially resolve this issue. I’ll try again tomorrow morning to see if I encounter it again!

On Mountain Lion, I have the option of turning on Notification Center to handle my Growl notifications, but it gets grouped as a Growl application notification. That kind of sucks and defeats the purpose of quickly knowing which application is notifying me in the first place. I quickly turned this option off.

The Workarounds

As a preface, I use Mac OS X Version 10.7 (Lion) at work and Version 10.8 (Mountain Lion) at home. Both had issues.

In this thread, someone complains about the Growl notification clicking not working. One of the fixes, or “workarounds,” is to download the Growl Version Detective and analyzing the different registered apps utilizing the Growl framework — I didn’t know this tool existed!

If you download the application, you’ll get a great bird’s-eye view of how each of your Growl-enabled application is using the Growl framework.

When you click on an Application name, you’ll either see an option to “Upgrade FW” (upgrade the framework,) “Revert FW” (revert to the original framework,) or a message stating that it can’t be upgraded because Growl doesn’t have permission to upgrade the framework because the application was downloaded via the Mac App Store. In that instance, the application developers will need to update their application to work with the latest version of the Growl framework and release that update in the Mac App Store.

Can't Upgrade Growl Framework VersionI Can Upgrade the Growl Framework Version

An important change from version 1.3 to 2.0 was that Growl is now sandboxed. What does that mean?

In the Apple Sandbox Design Guide it goes over the importance of using sandboxing in your Mac apps. The idea is that you want to add additional protection to your apps and how user data is accessed. When Apple rolled out the Mac App Store, one of the biggest gripes from developers and users alike was the ability for low-level access to system functions to control more minute behavior and preferences. As designed, apps available through the Mac App Store can’t access root level privileges, nor should they as a safety concern! Apps that need that kind of access won’t find themselves in the App Store any time soon. That being said, Growl decided to trade off certain niceties and features so that they could offer their product in the App Store as well as having the additional pluses of having a sandbox.

That said, because of the sandboxing, it adds additional problems that haven’t been figured out quite yet, like the notifications not always opening the application after being clicked:

The old method for click feedback was using NSDistributedNotifications, which we could fire at any time, but these are not allowed under sandboxing with a payload (the context that we send back to the app would know what the click was in relation to).  The new system uses GNTP networking, and eventually we have to close that socket, or we run into the problems that 1.3.x and 1.4 had with running out of socket slots and pegging a CPU, we do this after the display times out or 15 seconds, whichever comes first.  We have plans on improving this, but we haven’t gotten that far yet. – Daniel Siemer

I will have to check back tomorrow to see if the “roll-up” option will fix the issue I was having with Twitter flooding my screen when I logged in this morning. I don’t have the option of upgrading the version of Growl framework for Twitter, so I’m hoping roll-up will work.

If you want to be able to use Notification Center with Growl in Mountain Lion, I would suggest you use a free product like Bark which will take the pain out of all the notifications getting grouped under the generic Growl App notification.

The Take-Away

I have to wonder, now that Growl is a pay product, if enough due-diligence was taken to bug test this latest version. I can excuse these types of issues if it’s a free product because, hey — it’s a great tool and it’s free. But if I am paying for it, AND it’s available in the Mac App Store, isn’t that supposed to convey an additional expectation of quality?

If you’re upgrading your framework drastically between 1.3 and 2.0, shouldn’t there be some sort of notification to all developers out there to prepare for framework 2.0? I shouldn’t expect my users to dig through Google Groups (which by the way is apparently favored over filing a bug ticket in the first place!) to look for workarounds to upgrade something that developers should be responsible for.

These issues aren’t going to prevent me from using Growl, but it does make my experience less enjoyable and less useful. I would really hope to see that in the long-run that the Growl team take some precautions when making large changes like this and give users/developers more of a heads up or at least delineate known issues within the upgrade description on the Mac App Store.

Help Me Design My Home Office

Help. I can’t stand it anymore and now that I am starting a new full-time job, I will have even less time to sit around and brainstorm ideas on how to fit my creative world into a small second bedroom of our condo in Brooklyn.

We’ve lived in this space for almost 2 years now, and I would really like to get this fixed before our second anniversary of living here rolls around.

This where you, my friends and stalkers, come in. I need ideas. And most importantly, even though my husband doesn’t use the space very often, he needs to be on board as well. I fought so hard for a second bedroom whenever we were looking for houses 2 years ago, and I’m glad I did. I don’t know how we would fit all of my crap into a one bedroom flat considering my varied and shifting interests and his technical and architectural pursuits.

That being said, it’s a pretty small room, has a huge glass sliding door out into a balcony currently occupied with storage and our newly installed central air conditioning unit, and NO CLOSET space. The room is 8’x10’11”. What do I do?

What I am looking for:

  1. No knocking down walls (as much as the hubby would probably have fun doing that.)
  2. Separate “his” and “hers” working desk space.
  3. I do scrapbooking, various crafts, and of course the occasional programming (grin.)
  4. Adam likes to program and I’m trying to get him to do his photography again.
  5. We have various programming books and I need separate storage for my crafting projects from his photography needs.
  6. I’d also like a place to have a nice printer/scanner station.
  7. We probably have to fit a dog kennel in there somewhere.

And now I will hereby embarrass myself by posting some crappy pictures of the room:

 

 

 

 

Oh My Zsh and Mountain Lion

Quick post on something I noticed when I upgraded to Mountain Lion this evening. When I started up my shell I got this error:

git_compare_version:4: command not found: git

I thought maybe I had to reinstall git on my MacBook Air, but after a quick Google I found this ticket on github: https://github.com/robbyrussell/oh-my-zsh/issues/1070

All you need to do is launch Xcode, go to Preferences > Downloads and in the Components menu just install command line tools.

I can confirm that this workaround fixed it for me.

Problems Sending/Receiving Messages with iMessage

I generally love my iPhone and my life has forever changed since being introduced to the device when it first grace the world with its appearance. That being said, there are a few things that piss me off about a near-perfect smart phone.

One if them is that a few months ago, my husband and I noticed that our iMessages were not getting delivered to each other and when the iPhone said “Sent as Text Message” that actually meant “Didn’t fucking send it at all.” Because of this problem, my husband and I had a few arguments over alerting each other to certain things until we realized that our messages were not getting sent/received.

Last week, I happened to notice a post from Brian X. Chen over at the New York Times Personal Tech blog. He discusses how he lost an entire day of messages and missed an event put together by his friends. His problem seemed to be delayed messages instead of never receiving them. He complained to his followers on Twitter and one of them suggested to uninstall Messages Beta. He says that since he and his friends have done that, they haven’t experienced a problem since.

I do recall installing Messages Beta on my MacBook Air with Lion at home, but I can’t remember if it was before or after I started noticing these message hiccups. After last weekend, I received about a dozen or so messages from my family that were sent back in January. January! I was willing to try just about anything to remedy this issue and happened upon this possible fix. For about a week now, I haven’t noticed any problems and it seems my messages have been sent and I haven’t seen the dreaded “Sent as Text Message” popping up on my phone anymore.

I hope this fixes the problem for good because for something touted as the replacement for text messages, I would expect it to be more reliable!

How Do You Manage Your Responsive Design Code Base?

I recently sold Responsive Design to management at work and, excitedly, we will begin working on transitioning one of our sites within the coming weeks. As I read more and more into the responsive design process and bring developers up to speed with the new user interface, I began to pose some questions to myself. I feel it just resulted in even more questions but perhaps some other people in the great Internet universe may have some answers for me.

How do you maintain a DRY code base?

After I tried a couple different approaches to a responsive design, I finally landed on Twitter’s Bootstrap to putter around with. While it’s great to *cough* bootstrap with, it’s in no fashion to be the be-all end-all user interface CSS — you will end up hijacking the code and inserting crazy stuff in it and you would be much better off just starting from scratch for your own web-app.

But how do you maintain DRY code? There are more way to skin a cat, and even more to accomplish the same thing in CSS and JavaScript. How can you prevent other designers and front-end developers from re-inventing the wheel over and over again whenever they make one small edit to the UI?

We did a huge overhaul to just one section of our website, and when the project started I wrote a clean piece of Sass for the developers to use, and by the time the project was done, it was cluttered with repeated and unnecessary styles. I can only imagine it will be 10x worse with a responsive designed website.

How do you organize your code for the multiple experiences?

That being said, how ARE you supposed to organize your code then for these multiple experiences? As far as IDEs go, there are not many (if any) options for CSS out there that can deconstruct your CSS and find duplicated styles and tell you where you can optimizer your code. (If there are, I haven’t used any.)

How to debug with multiple experiences?

We only have 2 people in our QA department and it already sucks time away from them when they need to test features in all the major web browsers and their major versions. Which devices should they be testing on? How much complexity is added with each new screen resolution that you add to the code base?

When I developed my proof of concept, I developed on a Mac with Chrome, Firefox and Safari. I never even took a look at it in Internet Explorer. When do you say “I am only going to support until version X?” You could easily dismiss browser eccentricities and say you should only design for resolutions, but that’s hard to explain to a client when they go to use the website on their respective computer/mobile device and finds out it doesn’t work.

How do you instruct developers not as familiar with front-end development?

As stated above, we had a fairly small development team and after a couple of months of development, even though I had instructed my teammates that they didn’t need to condense the styles into one-liners because we had the Sass compiler do it for us, I was still finding unreadable code in the code base. How do you bring everyone up to speed? It seems with responsive design and more complicated design methodologies, it’s harder for the everyday “coder” to be up-to-speed on all the new jazz with front-end development too.

 

So those are my current gripes. It’s not going to prevent me from using responsive mobile design at all, but I imagine it will cause some headaches down the road while everyone is still trying to figure out exactly the definition of what responsive design really means.