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.

Many of the stickers I see are from conferences they recently attended, like postage stamps of where your luggage has been. I’ll see stickers of Octo-cat or for programming languages that they are currently evangelizing. You can tell a lot about a person by the stickers they have on their laptop!

Aetna has sent us 6 benefits cards in the past 3 days. Whyyy?

January 22, 2012 17:51 via Twitter for MacReplyRetweetFavorite

@rachelober

Rachel Ober

It was really weird and awkward whenever my husband then texted me later and said, “Aetna called, they saw your Twitter post and want you to call them back.”

Initially I thought to myself, “Uh oh, they must be pissed I said something? What did I say?? Am I going to get sued?”

When I got back in contact with them, a friendly lady answered and said that Aetna had noticed my Tweet, researched why I had received so many ID cards and wanted to let me know why.

Isn’t that freaking cool that companies out there are actively looking at their customers feedback and want to help you versus just trying to shut you up? Kudos, Aetna!

These commands will either show/hide the hidden files and then relaunch Finder.app to show the changes.

alias show_hidden='defaults write com.apple.Finder AppleShowAllFiles YES && killall Finder && open /System/Library/CoreServices/Finder.app'
alias hide_hidden='defaults write com.apple.Finder AppleShowAllFiles NO && killall Finder && open /System/Library/CoreServices/Finder.app'

Open an eBook in Dropbox

So sue me, I like reading books on my iPad and I like using iBooks. Not the Kindle App, not the Nook App and heaven forbid you make me read a book in any of the dozen or so other third-party Apps available in the App Store or make me use Adobe Digital Editions on a desktop.

Another thing I hate to do is tethering my iPad/iPhone to my decrepit MacBook (circa 2007) when I buy an eBook online just so I can load it into iTunes and then sync it to my iPad/iPhone. I try to buy ePubs when I can and I usually do it on a desktop computer (maybe another Mac — like my work machine — quite a few miles away from my home computer.)

In the past I tried uploading the files to a server and downloading it to the iPad (doesn’t work) and even e-mailing it to myself (also doesn’t work, damnit!)

After using Dropbox to transfer the bought books to my home computer where I would then transfer it to iTunes, I then realized “You know what, Self? Maybe can I try to open these books on the Dropbox App on my iPad and read them there!” I attempted a quick drag-and-drop of the file into my Dropbox on my computer which quickly synced over to my iPad and ta-da — eBook goodness!

When you get to Dropbox on your iPad, just click on it and wait for it to download. You can’t view the book in Dropbox itself, but if you click the arrow in the top-right corner of the App screen, you can “Open In…” iBooks (or your choice of third-party App that can read the book’s format.)

However, the book will not automatically transfer itself to other iDevices or iTunes, but you can just do the same trick again to get the book on the device you want. The nice thing is that when you do get around to tethering and syncing your iPad to your computer, you will have no problem transferring the book back to iTunes.

You will run into problems if the eBook has DRM but there are ways around these things.

To keep a swf from overlapping html, set the wmode parameter to “transparent”.

 

 

Example:   recipe-widget at http://www.foodandwine.com/holiday-guide

 

<param name=”wmode” value=”transparent”>

 

See how the New Year’s dropdown overlays the widget.

Other examples and discussion:

http://www.aleosoft.com/flashtutorial_menuoverlap.html

http://www.codingforums.com/showthread.php?t=156189

This wouldn’t be something we could easily fix as the advertisements are served from an advertising partner and we would have to have the partners contact the advertisers to fix their flash advertisements. We were about to give up and deploy without a fix, as the advertisement only showed up very ocassionally on a few pages, when someone from the marketing side sent an email asking us to bump up the z-index even higher and see how that worked.

I bumped them up to about z-index: 9999; but no dice. Finally, I did what I probably should have done at the beginning and just did into the gabillion lines of code of the offending advertisement and look for z-indexes being specified. And ‘lo and behold, they were setting their ad to 1000000. Hmm. Thanks, guys!

Obviously, they wanted their advertisement to show up above anything else on the page, but that becomes a problem for us when our users wouldn’t be able to navigate the site.

I decided that so this doesn’t happen again, why not just set the z-index to the largest z-index possible? After playing with Firebug in Firefox, I found that yes, indeed there is a maximum z-index and Firefox will automatically truncate the value if the maximum is exceeded. After a little more research, the maxmum is different and what happens when you exceed the maximum depends on which browser you use.

It seems Eric Puidokas did all of the research for us and came up with this nice table explaining the maxmum values and what happens if you exceed those values.

I made a simple test page to find these limits and figure out what happens when you exceed them.

Browser	Max z-index value	When exceeded, value changes to:
Internet Explorer 6	2147483647	2147483647
Internet Explorer 7	2147483647	2147483647
Internet Explorer 8	2147483647	2147483647
Firefox 2	2147483647	*element disappears*
Firefox 3	2147483647	0
Safari 3	16777271	16777271
Safari 4	2147483647	2147483647
Opera 9	2147483647	2147483647

The “lowest” maximum value is “16777271″ but as it’s a outdated browser, I went with the common value of “2147483647″ and then “2147483646″ for the child element per my previous post.

I’m not sure if there is etiquette when it comes to using z-indexes on a page, and that’s why I was originally hesitant to make the z-index some outrageous number like “1000″ (only to find out other people seem to yawn at “1000000″) but I hope with this change, we won’t have to deal with drop-down menu z-index problems ever again.

I’m updating one of our brand websites to include a hover-over drop-down menu to its navigation. I was really proud of myself yesterday for doing this simply without the aid of any JavaScript or jQuery but our QA engineer discovered that the menus were getting covered by other elements lower down on the page in IE 6 and IE 7.

Urgh.

After fiddling with the z-index of the menu element itself, I finally did a cursory search on Google and found quite the peculiar fix for this problem. I’m sure this is old news to the web gurus out there but I’ve been out of the loop for a few years on recent IE hacks and workarounds since I’ve mostly dove into Ruby on Rails coding full-time.

The trick to this fix is to make the parent element’s z-index higher than the child element that is having the problem. And not just the immediate parent of the child element, but the closest parent that has the relative positioning attribute defined. For me, this was 3 or 4 levels higher than my absolutely positioned child element.

Can I stop supporting IE 6 & 7 yet?

More information on the fix: Relative, z-index, and IE

However, this time it didn’t work, 1Password would not even save the log in information for me ever again!

Having better things to do with my time, I dealt with the minor inconvenience for months but after having some annoying down-time at work to kill, I flexed my Google-fu and found a quick work-around for troublesome form fields that don’t want to auto-save and don’t want to auto-submit.

There is a feature that I had forgotten about, after you fill in a form, you can right-click on the form and a menu will pop-up with the option for “1Password” and under that menu will be “Save Login…” Select that option and your friendly “Save Login in 1Password” dialog will pop-up. Here, you can save your log in normally. If you’re lucky, you will be able to auto-submit again. If not, you will at least be able to have the form auto-fill and you’ll have to do the heavy lifting of just clicking the submit button.

Here is 1Password’s guide to “Website Login Issues” that may be able to help you further if you’re still having problems.

rachel theme for oh-my-zsh

This morning I got a note saying it was accepted into the main branch and is publicly available when you pull it down. If you’re using oh-my-zsh or interested in trying it out, check out my theme!

Unbelievable, coming from a network of nerds and geeks who have posted articles in the past about password management. And here the CEO uses short, easily guessable and repeated passwords for everything from the company’s Google Apps account to his personal Twitter account.

Ironically, any of the commenters that login via Facebook Connect were not affected!

Just one more reminder to change your passwords every few months and make them as secure as possible!