Life is a journey, not a destination

by Stephanie Rewis on November 16, 2014

I’ve been quiet lately. Startup life is busy… and exhausting. Blogging for me has pretty much gone the way of the Dodo. I’m planning to change that.

Since technology is increasingly involved in a modern company’s marketing department, it’s become quite common for those of us who are developers to find ourselves deeply involved with our marketing team. Almost two years ago, I took on the role of “Director, Web Strategy and Marketing Technologies” at Contatta. As a small startup, it means I personally handle a whole host of technology decisions and implementations — and I do it within a limited budget. Sometimes that requires me to get creative instead of going for a big all-in-one solution.

Though early in my career (building small business web sites) I regularly provided clients with organic SEO and analytics, the techniques I knew have changed. We now use schema and OG markup. Google Analytics has been upgraded to Universal analytics. There are additional analytics tools available like Mixpanel and Kissmetrics. There are also a whole host of things that I didn’t regularly offer back then — like A/B testing, heat mapping, multiple landing pages, and very few clients used email marketing. Through a lot of trial, and some error too, I’ve been creating a system that gives us the ability to test, analyze and iterate quickly.

I still do all the front-end development for Contatta’s website and blog — and I’ll continue to blog about web techniques and technology. But I’ll also start sharing posts with marketing technology-related information. Tips and techniques, and creative ways I’ve found to make things work on a budget. (I’m probably posting these as much for me as for you. More than once, I’ve done a search for how to do something and found the answer in one of my own, older blog posts. It’s one of the best reasons to blog—I can’t remember everything—even when I once figured it out.)

I’m enjoying this journey. I hope you’ll share things you’ve learned with me as well. Cheers.

{ 0 comments }

Font Smoothing — It’s not just for Webkit anymore

by Stephanie Rewis on April 24, 2014

I ran into a very frustrating bug while using icon fonts on our site at Contatta. A bug I filed last April, and nurtured through the process of getting fixed, didn’t make the Mozilla release notes (though it was included in Firefox 28). Because I feel it’s a very useful solution, I wanted to bring some attention to it.

Font Smoothing for [most] Everyone

In a nutshell, if you’re using antialiasing for icon fonts and headings using -webkit-font-smoothing, you’ll want to be aware of -moz-osx-font-smoothing. I won’t take the time to go into the finer details of sub-pixel or grayscale antialiasing. If you’re interested, you can read this article about type rendering on different operating systems for more info. And though I initially filed the bug on Firefox, the issue is actually OSX. Here’s a summary from Jonathan Kew (a Mozilla engineer):

The “problem” in Firefox is simply how OS X renders the font when “LCD font smoothing” is enabled (which I think is the default). AIUI, it’s widely known among the font-design community that OS X tends to fatten glyphs somewhat compared to other rasterizers. For the usual case of black-on-white text, this works OK (though some people like it more than others); however, for white-on-black, the effect can be much too heavy-handed.

Aral Balkan posted an excellent example of light icon fonts on a dark background — one with -webkit-font-smoothing, one on Firefox. The web has been full of people trying to come up with creative ideas for making their fonts render consistently — opacity tricks, text-shadow tricks, etc. But those only work in some situations. In the end, many people have simply thrown their hands up in frustration—and changed to a different heading font/color scheme or moved away from icon fonts and back to sprites.

A while back, the Webkit team gave us a way to counteract the issue — -webkit-font-smoothing. It should be used responsibly and shouldn’t be used on everything. Certain fonts become too thin and less legible when it’s applied. But when needed, it’s a fontsaver (yeah, yeah, I know). This non-standard property got a lot of attention and caused many of us to accuse Firefox of being fat. I was one of them.

Jump forward to the bug I filed. After much passionate discussion, the exceptional Mozilla engineer David Baron agreed to grant us a property that provides a similar fix — -moz-osx-font-smoothing. While it has the similar effect of slimming fonts, instead of using the “antialiased” value Webkit uses, FFOX has chosen to use “grayscale”. (You can read the bug for the reasons why and the methods used.) It also appears from viewing in the FFOX Inspector that you can use the inherit | unset | auto values as well. (Though I haven’t experimented with those.) So far, anywhere I need the -webkit-font-smoothing:antialiased I now use -moz-osx-font-smoothing:grayscale with great results.

If you use Sass, you’re in luck. Maximilliano Firtman has created a [Sass mixin to turn the font-smoothing property on and off] (http://maximilianhoffmann.com/posts/better-font-rendering-on-osx).

So spread the news — FFOX is thin again!

A Sidenote on Bug Filing

Maybe it’s all the beta testing I’ve done over the years, but I come from the “don’t accept sub-optimal behavior” camp. If something in a browser doesn’t behave as expected, I believe it’s more productive for the Web and my end result to file a bug and help get it fixed.

For those of you that haven’t yet filed a bug or made a feature request for a browser, I’d like to offer a few suggestions I’ve found helpful:

  1. Be very clear in your initial report. Use the most accurate terms you can to illustrate what causes the bug (does it have a trigger, can it be affected by other interactions, etc). Create one or two simple demos that illustrate the bug so the engineers can test it more easily.
  2. Remember that you’re dealing with people—engineers have feelings (I swear, they do!). Yelling at them, in general, gets you no where fast. Clarity and politeness are the order of the day.
  3. Engineers are dealing with massive amounts of work and they have to prioritize. If they feel your bug is a small edge case, it will receive a lower priority. If your bug is one that affects a myriad of people, but the engineers don’t understand that, rally the troops to come vote for it and comment on it. Have them show more examples. It really makes a difference in helping them prioritize.
  4. Stay with your bug. Keep an eye on it. Provide more examples where needed. This is your baby, it’s your responsibility to see it delivered to the masses. It’s easy for it to accidentally get stuck in limbo where one engineer has worked on it and is waiting for another engineer to weigh in. But he’s working on other things and doesn’t know the first engineer is waiting, and — well, you get the picture. The occasional little ping or tickle doesn’t hurt.
  5. Once the bug is fixed, you may be the one that has to let people know. Don’t count on release notes and the browser’s dev center. It can be missed in the mass of things that occur in a release.

BTW, I have this other outline bug I’d love to see fixed. It’s been around for over three years. It could sure use your votes. ;)

{ 0 comments }

New Directions

by Stephanie Rewis on March 2, 2012

In 1999, when I started my journey through the interwebs, I had no real idea where it would take me. I barely knew what was possible. I only knew that my brain loved puzzle-type thinking, detective work, research and figuring things out. And I suspected code would access the parts of my mind that love a work out—and so I pursued it. Vehemently. For the first 12 months, I did tutorials for 15 hours a day and got any friend that might possibly need a website to let me create theirs. (And for the very first customers, may I apologize for the frame and table-based layouts.)

And as I learned, I had questions—lots of them—and I inflicted every one of them on the unsuspecting, and gracious souls on a couple of web design lists. (The only stupid question is the one you don’t ask!) As my skills grew, I began answering the questions of people who knew less than I and continued to pick the brains of those who knew more. Within a couple of years, I had accidentally created a business via business owners who had planned to build their own web site only to find it wasn’t as easy as they expected. Due to the number of questions I answered on the list, they wrote me offlist for a quote to, “Please, just do it for me”.

It didn’t take me long to figure out that there’s a whole lot to this web design business. And some portions I enjoyed more than the others. In looking at where I thought the puck was going, I ventured into the world of CSS—that marriage of code and design—and I loved it. I gleaned great enjoyment from changing a designer’s beautiful comp into light-weight, web-ready markup (I’m too much of a tweak-a-holic to design). And so I moved into specialization in the portion of the industry we now call front-end development.

My desire to give back led me to accept requests to write articles and books (even though I really dislike writing). Writing led to speaking at industry events. Speaking led to doing training in corporations. Filing zillions of bugs to make Dreamweaver move into the realm of Web Standards led to my work with the Web Standards Project (WaSP) as well as working as a contractor for Adobe to create the CSS Layouts contained in Dreamweaver. And writing a book teaching both CSS and Dreamweaver while using those layouts as a base for each project led to discovering the other half of my brain—my co-author Greg Rewis. Now my husband, soul mate, and co-captain on Geeks4Sail. Every choice I’ve made to give—even when there wasn’t a guaranteed return—has come back from the universe in amazing ways I hadn’t envisioned. It’s been a great ride.

And even though I’ve loved every minute of sharing, learning and teaching others, and of working with awesome agencies, companies and start-ups—I still leave them with the code and walk away to start the next contract. I rarely get to see a product through to fruition or have any further affect on its development. I can’t continually help the code evolve as the web changes. I just hand it off and move to the “next thing”.

But all that’s gonna change…

I was recently approached by a start-up (oddly enough, right here in the Phoenix area). We initially discussed their need for a top notch front-end developer to build their web app—probably a six month contract. We discussed what they were building for about an hour—and I got this feeling in my gut. You know the one that hits you in the pit of your stomach and says, “I really, really feel like this is a thing“? That one. But having been taught by my parents never to trust my gut—always use your head—I did the obedient thing and went to the web for some Google research. As you do… That research made the feeling in my gut even stronger. And a series of meetings with the CEO, CTO and team over the past couple weeks has evolved into my decision to make a full-time commitment—forsaking all others. This is a big step for me after 12 years of independence. I should feel a twinge of sorrow. But I don’t! I’m as excited as I’ve been about anything in years.

I am now officially the VP of Interface Architecture for Contatta (Italian for “be in contact with”), helping to create a new era in Contact Management. And while a product related to CRM may not sound like a sexy start up to you, Pat Sullivan, the co-creator of ACT!, and founder of SalesLogix is a founder of this company. Along with Sunil Padiyar who was a founding member of SalesLogix as well. When the man that helped create an industry 25 years ago says he thinks it could be in a better place—and in fact has ideas about changing a currently stagnant industry—I listened. And in listening, I was impressed enough to get on board.

Not only am I excited about the product, I’m super excited about the team they’ve already assembled. I’m going to have the opportunity to work with some amazingly top-notch devs and we’ve already been exchanging ideas. I’m literally chomping at the bit to get started!

Lest any clients (or prospective clients) are concerned, I’ve got great back-up with good friends and co-contractors like Emily Lewis (of “Microformats Made Simple” and “HTML5 Cookbook” fame), Leslie Flinger (front-end developer and former Director of Marketing at EllisLab) and others. You’ll be in great hands!

A recommendation on Contatta’s Facebook wall says – “With Pat behind it … here’s hoping for a real game changer for the industry!” I agree with that and I’ll take it a step further and say, “With the team behind Pat, we’re gonna work to make awesomeness—and maybe a ding in the Universe.”

EDIT 3/7: Some have emailed to ask whether I’ll still be speaking. Yes, on a more limited basis—but not once a month as I have been. Feel free to send requests. :)

{ 21 comments }

CSS3: spread value and box-shadow on one side only

September 8, 2011

This morning I awakened with a question in my twitter stream from @deebeefunky. He was frustrated by the fact that when he sets a blur on box-shadow, it shows on two sides of the box. He wants it to show on only one side. Of course, that got me thinking. I did come up with [...]

Read the full article →

Firefox multi-column layout bug… and a unicorn

May 4, 2011

Last night, I was getting a file ready to share with Estelle Weyl, one of my co-presenters for our CSS3 workshop at SXSW11. The page was a silly little demo that used media queries, multiple backgrounds, transitions, generated content, multi-column layout and, well, a unicorn. I had only viewed the file in Chrome since that’s [...]

Read the full article →

Changing a Background-image with CSS3 Transitions

March 1, 2011

As you may have read, outside of gradients, you can’t change a background-image with CSS transitions. Or can you? At InControl Conference last week, Greg Rewis spoke about Transitions, Transforms and Animations. A question was asked about showing one background-image on load and transitioning to another in a subsequent pseudo-state. You can always change the [...]

Read the full article →

CSS3 Flexible Box Model…Layout Coolness…also Oddities & Confusion

February 25, 2011

In August, due to a twitter discussion with Molly, and of course while partying on a Saturday night, Dave Gregory and I were looking at whether the Flexible box layout module (still a working draft) is getting close to ready for prime time yet. Our hope was that it will solve some of the frustrations [...]

Read the full article →

HTML5 and Video: 4 part video series

January 10, 2011

I’ve had a couple people ask me to link on my blog to my four part video series on HTML5 and video. Currently, it’s a feature on the AdobeTV home page, but I reckon that will be for just a little while. After that, you can link directly to Part 1 (7:18), Part 2 (10:31), [...]

Read the full article →

Mangled smiley in @font-face

January 5, 2011

Recently, I noticed that sometimes, when uploading a stylesheet using @font-face, my cute little smiley (thank you Paul Irish!) gets turned into some kind of garbledygook instead of the smile character. Last week, I decided to try an experiment. It cleared it right up. To the top of your stylesheet, add this: @charset “UTF-8″; Be [...]

Read the full article →

HTML5: Native Video, DRM and Plugins

October 13, 2010

I was reading a discussion on the W3C Bug tracker about native video and whether it should, or should not, provide DRM to protect video content. In the process, the point was made by John Foliot that Apple is presenting their own answers in their browsers and devices to the DRM issue (emphasis mine): > [...]

Read the full article →