Blog

Mobile Safari Crashes with CSS Transition and Calc()

2013-03-08T21:10:22Z

Speaking Out

2013-02-07T07:36:13Z

You may not know me. I’m not an internet celebrity, a conference speaker, or a book author. I don’t have a large web presence. Posts on this blog are few and far between (though like most, I wish I wrote more). To use a term I first learned back in the day on bulletin boards, I’m a bit of a lurker. I read and watch, only occasionally commenting. And it’s exactly that, the never speaking out, that needs to change.

So as not to make any assumptions on what you know and read, I’ll start by saying there has been more and more talk lately about diversity and equality in our web industry. This week that has specifically focused on women who have been abused (in a broad sense) in some way. Sometimes the abuse is private, sometimes public. The abuse covers a wide range from the seemingly small offenses to the horribly gross. Several incredible, brave women have spoken up about their mistreatment in an effort to shine a light on the issue (as well, I would guess, to strengthen and encourage themselves and others in similar situations). Sarah Parmenter, Leslie Jensen-Inman, and Relly Annett-Baker to name a few whose stories impacted me. Some I know of through Twitter and the industry, some I don’t.

But they aren’t the only ones who need to speak up. Others need to speak out too: the men. Relly’s last paragraph rang in my ears as I read it:

“Chaps: All the time women are ‘others’ in this industry, we need you, as a representative of the legion of smart, not-sexist guys, to call out the one or two guys who think you are actually like them. These guys think you too are okay with ‘lighthearted’ rape jokes, misogyny, veiled threats and nudge-nudge references about the women in your midst. Show them *they* are actually the minority.”

It is time (way over due) that we men vocally stand up for the women in our industry. We need to shut down the sexist, threatening comments and the abusive actions. It falls at our feet because it is generally in our little all-male groups at conferences, restaurants, parties, that these misogynistic patterns take root. Forget “nipping it in the bud,” pull it out by the root! When someone says an inappropriate comment, don’t allow it. Call him out, say it isn’t okay, disagree.

It’s definitely not easy, both to recognize and to do. Especially as the guys doing this are usually your friends or coworkers. I recently experienced this at a conference and shamefully did nothing. Someone I know made a handful of remarks about some of the women there. They were not horrible, but off-color enough that I wasn’t sure how to respond… so I didn’t. But those small remarks are what can lead to further and worse remarks. Saying something as simple as “don’t be a creeper” or “that’s a little inappropriate” would have gone a long way, and maybe brought up a deeper conversation about what is okay and what isn’t. I still feel bad about not saying anything, especially in light of these previously mentioned ladies speaking up.

If we good men (I work hard to include myself in that group), don’t stand up and speak out I fear nothing will change. The bad apples in the bunch won’t listen to their victims. They don’t believe in them, don’t like them, and don’t think they are important, so they won’t listen to them. They won’t stop, not unless we, who they seem to have more respect for (as they should for the women), condemn what they are doing. These women, these people, are to believed in, liked and respected. They are important and should be heard.

I hope by writing this I am helping to do just that. I’m also learning from my mistake of lack of action at the recent conference to be sure to speak out vocally in the moment against sleazy comments and actions.

This isn’t just an industry issue, it’s a human one. It needs to be stopped wherever we find it. Yet, as most of us are in this industry because we love it and want to see it flourish, we have a special responsibility to stop the abuse here.

Men, speak out. Support the ladies in our industry. Fight against and condemn the abuse they are receiving.

The Future

2012-09-02T19:35:50Z

This morning I worked from the living room of my brother’s house, over 100 miles away from my office. I remotely connected to my desk computer and met with my coworkers via a conference call. While this was going on I chatted with a friend who works in Cambodia and snuggled with my youngest niece. Now, this evening, I’m typing this on a glowing screen at 30,000 feet as I head out on vacation.

Ladies and gentlemen, the Future.

Transitioning to In-House

2012-03-22T17:50:26Z

A few weeks ago an industry peer of mine that I’ve met once here in Portland contacted me to tell me that the company he works for is hiring. I wasn’t really interested. I’m a freelancer running my own business. Between international travel and a one-year stint with another company, it’s been that way for 12 years. I love it: the flexibility, the diversity, working with clients. And yet my friend kept encouraging me to look into it, so I sent in an application and my resume (which took a little dusting).

Here I am now, a few weeks later, finishing up the major work on my last freelance job before my full time in-house one begins.

After going through interviews and meeting with several people in the company, I decided to accept their offer of employment. WebTrends really seems to be a fantastic place to work. When I hear employees say that what draws them back is the people they work with and the culture of the company, it makes me stop and consider. That’s a place I want to work: not only where the company takes care of its employees, but where the employees build real friendships with each other and are more than coworkers.

I’m not finished with freelance though. Of course I’ll always have my own little projects going on behind the scenes. In addition, I plan on taking a few select clients. Sure, time will be limited, but because of that and the fact that I’ll have a steady paycheck I can be very selective with the projects I choose. This means I can work only on jobs I really believe in which means I’ll be motivated to put in my best work which in turn means the client gets the best results as well! (So hey, if you have a rockin’ project, let me know and maybe we can work together).

So Monday things will be quite different, and I’m excited for that change!

Random PHP Password Generator

2012-02-21T07:05:39Z

Code:

Random Password:

Output example:

W?7;q,%R

The characters it uses are pulled from the ASCII table (values 33 through 126, inclusive).

Just save that on your server and pull it up. Add a ?len=N query string in there were N is a number for the desired non-default length.

Caveat: All of that said, don’t forget that there are better choices than randomized passwords.

Thanks TravInSF for idiot-checking me

Making Repeatable Background Stripes

2012-02-15T06:26:15Z

SVG is a graphic made out of XML style code. I won’t go into a full blown tutorial, as I’m not familiar enough with SVG and I’m sure there are many fantastic resources out there if you just Google. Basically, what I was able to do was to create, using XML-based SVG code, an image that is 1 pixel wide by 100 pixels tall. The top 50 pixels are one color, the bottom, another. Here’s an example of the code:

(Note the comment in there, I used that editor to generate the code. It looks like a great learning tool! Check it out.)

Here’s a live version of that code.

This is what you should see if your browser can display SVG.

Shush. Don’t judge my color choices.

Now, since that’s just code it’s really easy to swap out of the colors depending on your needs. Especially with a little bit of PHP in there. I grab my colors out of a database, but they could just as easily be in an array. For example:

Save that as a .php file and you’re good to go. It’s important to notice the content-type being set by the header() function. This makes sure the browser treats the output as SVG.

Lastly, in my CSS file I simply set the above PHP file as the source for my background: url().

.stripes {
    background: url(your-php-generated-svg.php);
}

That will repeat across the x- and y-axes. You could also use background-size to change the size since it’s a scalable vector.

Don’t forget to know when you can use it!

Update 22-Feb-2012:
I just stumbled across this CSS declaration today: repeating-linear-gradient Looks like that might be problem solved!

Frustrated? No.

2012-01-19T03:56:13Z

If you haven’t read it yet, take a few minutes today to do so. It’s a really useful article. (And let me quickly say I’m not harshing on Zeldman in this article. I love and respect what he has done for the industry. I’m making a bit of a side point in part to remind and excite myself.)

At one point in the article Zeldman says, “This is a frustrating time to be a web designer, but it’s also the most exciting time in ten years.” and earlier “In the short run it’s going to be hell…But it is the short run.”

While he does give the caveats of it being the short run and the most exciting time, I have to ask, is this really a frustrating time to be a web designer? I think it’s just a time to be a web designer. Because it’s always been like this: the browser wars, poorly supported CSS, poorly supported media, bandwidth holding us back, tables and floats fighting an inefficient battle to accomplish our layout desires, Flash, and a lot of little bugs and quirks along the way (actually, things are so quirky out here that there’s an industry term around it!).

So is it really frustrating? Isn’t it just what it means to be a web designer? I’m not saying there isn’t room for improvement. We should always be trying to better ourselves and the industry. But it’s what we do! We live out here, on the edge, pushing technology forward and making it better. For those of us who thrive on that and want to keep making things better, there will never be a time where it all makes sense and is easy. But I don’t think we want that. We’re striving for perfection and there’s a lot of philosophical debate on whether the attainment of that is possible, but the fight for it is worthwhile.

In the end, I’d like to just make a minor modification to Zeldman’s words: This is the time to be a web designer, it’s the most exciting time in ten years. And you know what, we’re constantly getting better so it will continue to be the most exciting time to be a web designer!

Dumb Hackers

2011-11-25T01:25:07Z

Typekit Goes to Adobe

2011-10-04T03:07:02Z

There has been quite the mixed reaction to this. Not only people completely against it and those totally for it, but most comments and tweets I’ve seen in reaction to the announcement show most people (myself included) both happy for those currently working for Typekit and worried about the future.

It seems that a lot of people in the web industry have a love/hate relationship with Adobe. While they make the best design products out there, they aren’t particularly loved for all the flaws software of that size comes often has. They’ve been known to not manage new acquisitions the best. Hello Macromedia. And honestly, how often does a big company snapping up an innovative small one end well for said innovation? It seems that the large corporations can’t innovate on their own so they just make a business of buying up other people’s brilliant work and calling it their own.

But what I’m really worried about is the future. I use Typekit on a handful of sites. I would like to continue doing so. But this is a hosted service. And just like Delicious and relics of the past like GeoCities, we’ve seen that if you don’t have the data on your own server, you cannot be sure it will always be there for you. Fonts are hardly your own content, but the idea is the same. If you don’t “own” it, you could lose it. If things go south, I’m going to really wish I just purchased the font licensing and hosted them myself. Yeah, it’s a bit more of a hassle for sure, and with all the little adjustments in rendering Typekit does to help, it isn’t quite the same as hosting your own email. Nevertheless, this just seems to add to the argument to host your own stuff so you can keep it around. Like everyone else, I really hope Adobe proves us all wrong and continues to supply a fantastic font embedding service at a reasonable price.

Help with OAuth (in PHP)

2011-06-15T08:16:55Z

One.
While I don’t want to reveal too much of what I am working on quite yet, it does use Google’s API (hence the need for OAuth). Google has extensive documentation, but it isn’t always up to date. With such a wide range of technologies and versions, just be prepared to do a little sleuthing and trial and error to find which version of an API you need to use. In addition to that, the discussion lists are great resources. Search them. Not only are others possibly dealing with similar issues, but Google employees and programmers are helping and posting answers there.

Two.
Code libraries are not silver bullets. I’m writing my app in PHP. A library can save you from writing a lot of code, but you still need to have a bit of a grasp behind the technology. I found that the libraries I looked at were either bloated, trying to do everything (which complicates the issue if you don’t completely understand the technology), or they were so basic that some core functionality, it would seem, wasn’t there. I ended up writing in some modifications to one of the libraries I used. Understand that a code library is not plug-and-play. You still need to learn its functions and how to use it. Hopefully it has good documentation, but that’s not always true. Read through the code and comments. Read discussion boards.

Three.
Because of what I’m doing, OAuth in the Google API wasn’t enough. I needed to also use OpenID to connect. So I switched from OAuth doing both authentication (logging in) and authorization (allowing me access to user data) to just the latter. So I had to figure out how to use OpenID for authentication and make it play nice with OAuth. Yes, dancing between multiple APIs and similar words was confusing. The PHP libraries for these are written in classes (object orientated programming -> OOP). I learned PHP before it did OOP well so that was a little added learning too. I knew the idea behind the practice, but I recommend if you don’t already have a handle on classes that you learn that before jumping in. Just get a basic understanding, nothing major. Learn about private, public, protected and how the general concept works.

Four.
The last thing I learned, and probably what should have been the simplest, but I struggled with, is how to implement the GET and POST requests from the Google API. I’ll claim that my brain was fried after a week of pouring through API docs, multiple libraries, official specs, and new programming methods. For example, this is what Google tells you to do to find a users recent public activity in Google Buzz:
“GET https://www.googleapis.com/buzz/v1/activities/googlebuzz/@public”
I wasn’t sure what to do with that at first, especially when it came to POST methods. Is that some sort of command line thing? Or is it just a cryptic generic command? I’ve found that it’s never really explained with these things. When you go to get a code base from Google Code the first way they provide it is using SubVersion through a command line:
“svn checkout http://gdata-samples.googlecode.com/svn/trunk/ gdata-samples-read-only”
Yeah, I’m sorry, this is 2011, and I use a GUI operating system. Can’t you just give me a ZIP? Yes, they link to client programs that can access the SVN, but it’s an afterthought.

The whole thing is really not set up in a manner that makes for an easy entry point. Which I think is the whole problem. You are told what to do, but not how to do it. Nothing I learned this week was exceptionally difficult, but it was poorly explained which steepened the learning curve.

To get back to the API commands, figure out how to do a GET or POST in whatever language you are using. For me with GETs that meant I had to use OAuth to create a URL to access with file_get_contents() or cURL. I believe there are other options as well. The OAuth library builds the URL for you as you need to have your special parameters attached to it that give authorization to the data. It isn’t needed to create this URL, but it’s easier than doing it yourself (though, it is like doing it yourself, just with pre-fabricated code).

When it came to POST, I stuttered for a while. You have to send data, but not as normal query string parameters (those are GET variables). The data is part of the “body” of the request. Really, my best advice here is to read and use this. Be sure to read a few comments too. Your web server may not allow the PHP function fopen() and you may need to use cURL. cURL is very common so you should be able to find a lot of help on it.

Five.
Lastly, just keep trying and pushing. Take it in little pieces. Each step of the OAuth or OpenID connection at a time. I wish I could give easy step by step instructions, but there are resources out there for that. Google does a decent job explaining the OAuth flow. The harder part is keeping it all in your head and using it for your specific project. And since each project is unique, it’s not easy to give a list of what you should do to achieve your goals.

OAuth Walk-through.
Okay, with those thoughts there, here is a small explanation of how OAuth happens. Read a few of these articles, it will make things clearer.

OAuth is a way for your application to access the user’s data within another application. Your application needs to send the user to the site with data you want to access to have them log in and approve your application. (The point of this is to keep your app from ever needing to see their login credentials) So, in your application, you give the user a way to start the process: a link or button for example. When this is clicked, your app needs a Request Token to give to the user when they go to authenticate. So the click loads a script on your app which builds a URL (given by the API). This is where the OAuth library is helpful – in building these URLs. Then the app performs a GET of that URL. In PHP I used file_get_contents() to do this. At this point, the user is technically still on your website loading data on your files. Your file has gone and retrieved data from another site, but the user has not left. The returned data includes the Request Token and Secret. Attach these items to another API supplied URL and then sendread this article.

By the end of this dance, your script has accessed the API twice through the GET method and sent the user over to the API site to log in and approve your app one time in between those GETs.

If you’ve made it all the way to the end of this, I’m very impressed. I feel like everything I just wrote makes this whole concept as clear as mud. I found OAuth to be the type of thing where if I could have asked someone small specific questions during the process I would have moved much quicker and grokked the concept in a day or two, not a week. If something in here doesn’t make sense, or you are stuck in your process, feel free to email me or hit me up on Twitter @philiprenich.

Good luck!

Making CSS Drop Down Menus Work on the iPhone

2011-03-24T06:00:26Z

I recently had a client ask if I could get the drop down menus on his website to work on the iPhone. We hadn’t done anything special for mobile devices on this project, but basic navigational functionality is of course very important. I was surprised at the request because sites I’ve done before have used drop downs that worked. What was different here? If you’ve used a drop down menu on the iPhone before you know what to expect. On the first tap of the top level navigational item the second level list appears (and the link you clicked on seems to show it’s activated state >—not tested). You can then select a secondary item or tap again on the main link to follow it. However, on this particular site, when the top item was tapped the drop down would display, but before anything could be done the link would be followed and you would be taken to that page. Good luck trying to stop the browser load or selecting a sub-link first!

After a long and fruitless search on the web I started asking some friends of mine for help and looking at sites they had developed. I noticed all the sites with correctly functioning iPhone friendly drop down menus use JavaScript.

Meh.

I’ve used SuckerFish before and it is a great script, but I’m more happy with a pure CSS solution (and I’m not supporting dead versions of IE). So I did a little sleuthing and discovered that all of these JS enabled websites toggle the display CSS rule of the sub-menu between none and block. My CSS code was toggling the left rule from -999em to auto alone. So I did some testing of different combinations and discovered that the display rule is the only one that matters. No JavaScript is required as long as you explicitly set display: none; as the initial rule for the sub-menu. And then on :hover you just change display to any visible option you want.

Try it out for yourself. Below are two CSS only drop down menus. Both will work in a desktop browser, but only the second will work correctly on an iPhone. Here are the two declarations that are added for the working drop down:

#ios ul { display: none; }
#ios li:hover ul { display: block; }

Update: As I’ve been testing this out, I just realize that setting a width on the drop down secondary list will also make it work. It doesn’t need to be on hover of course then, just on the initial declaration.

This will reload the page on first tap
- Now you see me...
- And I'm gone!
- Home page

This will reveal on first tap and load on second tap
- Now you see me...
- Hey, I'm still here!
- Home page

An Idea to Help Christchurch

2011-02-23T15:53:14Z

Dear Web Designers & Developers in Christchurch,

The first thing that needs to be said is to all Canterburians and Kiwis at large and is that my heart goes out to you all affected by the tragedy of the earthquake. My prayers are for you and your loved ones, and my thoughts are with you all. I lived in Christchurch for a short time, but even being only a temporary resident it is heartbreaking to watch the news coverage. I’m still waiting to hear about the safety of a couple of friends. I can’t imagine the strength it takes to walk through what you are experiencing.

I want to help, but what can I do some 12,000km away? I can’t move rubble, I can’t offer housing, I can’t make you a hot meal, or even give you a comforting hug and shoulder to lean on. I’m not really even in a position to help much financially, though I am going to try to see if I can give to the Red Cross.

So what can I do? I don’t know, but here’s an idea. I’m just going to throw it out there and we can work out the “how.” I’m a web designer and developer. I don’t have a huge workload currently. Last I heard 50% of Christchurch was out of power and of course the CBD is closed down. Maybe I can help out those of you who are in the web industry by helping you complete your projects. Maybe you had client work that was supposed to be done in the next couple of weeks. Even if you have your laptop out to an Internet connection, my guess is work will not be full steam ahead for a while, and probably shouldn’t.

That’s my idea then. Can I help any Christchurch web agencies or freelancers with immediate needs? Maybe just taking some of the workload will give you the chance to go spend time with your mum or help your neighbors. Some of my friends in the New Brighton area were asking for help getting their house and yard in order. I’ll handle some of your web projects, you take care of yourself and neighbors. Who knows, maybe others in the industry around the world will step forward too.

Details? I don’t know, let’s not worry about that. This is about how I can help the country and city I consider my second home while I’m still in America. I’ll be over for a visit in a few weeks and hopefully I can help in other ways then. For now, this is all I’ve been able to come up with.

There’s a contact form here you can reach me at or on Twitter @philiprenich

With lots of love,
Philip

CSS3 Multiple Background Images

2011-02-02T03:15:44Z

According to the CSS3 spec for backgrounds and borders module, the allowed values for background-image are a color, an image, none (the default), or inherit. Now the way multiple backgrounds work is that you list each one in the background-image property in a comma separated list which appear in a descending order of top to bottom visually. You then can use the other background properties to manipulate each one, using the same comma style.

Here’s my problem. When the user hovers (or touches in the iPad case) the button I am changing the color of the gradient. I have a lot of these buttons, each with a unique icon but the same gradients. I would like to declare only once in my CSS what the hover state does. However, it seems that it is impossible to change only the gradient without mentioning the icon as well, as there are two backgrounds per button. By not declaring the icon it is removed on hover. This means that for every unique button, I must have a unique hover rule as well. (As an aside it also means that every button declaration in the CSS requires me to not only specify the unique icon, but to repeat the gradient code as well)

I would like to try to find a way, if possible, to only have to declare the hover state one time for all buttons so that the icon would remain declared automatically from the normal state. I’ve tried “inherit” and that just breaks the rule completely. Has anyone ever tried this and found a method?

Here’s a quick little page to demonstrate what I am talking about (WebKit or Firefox). Please leave any ideas or thoughts in the comments. Thank you!

Twenty-Ten

2011-01-03T05:26:12Z

Countries: Four
(United States, Canada, Mongolia, Philippines)

States: Six
(Oregon, Washington, Colorado, Utah, Idaho, Nevada)

Cities: Twelve
(Only visits where I stayed all day or slept there)

Lived: Six
(Places I lived one month or longer)

Beds: Twenty
(Including one under the stars)

Planes: Fifteen
(Counting connections)

Airports: Twelve
(Unique ones)

Airlines: Six

I lived out of a suitcase quite a lot this past year. I don’t expect that to change much this year.

And you know what the best part of all of that was? It wasn’t seeing the piece of land my brother is working to preserve while simultaneously develop education in Mongolia, it wasn’t the mango smoothies in a marketplace in the Philippines while our military escort filtered through the crowd. Nor was it the beauty of Estes Park in Colorado or morning runs and swims in the lake in the Central Oregon wilderness.

It was the people all along the way.

It’s my friends and teammates from Ultimate Frisbee who, only knowing me for a short while, are sad to see me go.
It’s the random man who paid for my taxi in Manila, the friendly lady who passed the time with me in the airport in Ulaanbataar.
The nuns who showed boundless hospitality.
The people who held long conversations with me to challenge my attitudes, thoughts, and beliefs.

And suddenly I’m stuck because of the overwhelming amount of incredible people I know and met this year. It’s painfully beautiful.

The best thing for me in traveling is the awesome people I meet: be it in transit at the airport or welcoming me into their homes and life at the destination. It’s also the hardest part because I’m always picking up and leaving again.

My friends complain about me traveling because they are afraid I won’t come back. It’s love. What I’m not sure they understand is that it’s not just I who am gone from their lives for that time, but they who are gone from my life.

Sometimes I half-seriously joke about there being too many awesome people in this world. You can’t know or be with them all. But you want to, because they are incredible and have an amazing story. I want to know what makes everyone tick: what makes them love and hurt. But that’s not really possible, there isn’t time or space with so many people.

I haven’t come to terms with that yet; I’m not sure I want to.

Percentage Widths Flexbox Problem

2010-10-20T05:36:02Z

The CSS:

#box {
	display: -moz-box;
	-moz-box-orient: horizontal;
	width: 1000px;
	background-color: #ccc;
}
#box div {
	margin: 10px;
	padding: 10px;
	width: 20%;
	background-color: cyan;
	border: 1px solid #000;
}

And the HTML:


	one
	two
	three

And this is an image of what I’m getting in Firefox 3.6

Maybe using percentages for the children of a box is not allowed, but that seems really silly to me. Am I doing it wrong? Has Firefox not yet implemented flexbox completely (or accurately?)

Thanks for the help!

Update:
@TravInSF noted that I hadn’t tested in WebKit browsers. Upon doing so I found that it works as expected. Perhaps this is a Firefox bug / non-implementation.