http://www.elfboy.com/ en info@elfboy.com Copyright 2012 2012-01-18T19:56:13+00:00 http://www.elfboy.com/site/frustrated_no/ http://www.elfboy.com/site/frustrated_no/#When:20:56:13Z A couple weeks ago Jeffrey Zeldman wrote an article about responsive design and where breakpoints can be set in the underlying media queries. The article discusses the difficulties with the fact that there are literally hundreds of screen resolutions across a myriad of iOS, Android, and Windows Phone devices. There isn’t a set group of width breakpoints to set your media queries at for altering your site or apps layout and design. 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! Business, Education, General 2012-01-18T20:56:13+00:00 http://www.elfboy.com/site/dumb_hackers/ http://www.elfboy.com/site/dumb_hackers/#When:18:25:07Z Aaanndd I’m finally back after being hacked. Hopefully you all can access those articles you were looking for and I can start writing some new ones! 2011-11-24T18:25:07+00:00 http://www.elfboy.com/site/typekit_goes_to_adobe/ http://www.elfboy.com/site/typekit_goes_to_adobe/#When:21:07:02Z Earlier today the web font service Typekit announced that it has been acquired by Adobe. Is it time to host your own fonts (again)? 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. Business 2011-10-03T21:07:02+00:00 http://www.elfboy.com/site/help_with_oauth_in_php/ http://www.elfboy.com/site/help_with_oauth_in_php/#When:02:16:55Z For the past week or so I’ve been learning OAuth to use as the login functionality and authorization for a personal app I’m making (shh, it’s a secret.). I’ve played with OAuth a little in the past while tinkering with another app to connect to Foamee via Twitter, but that was relatively easy as the library I used already did most of what I wanted. This time around it was much harder. Maybe it was difficult because I don’t come from any sort of deep programming background, or maybe because I approached it thinking it would be a cake-walk. In any case, I wanted to give a couple of thoughts about what I learned. They probably seem really silly and basic, but they were my mental hurdles and maybe they’ll be yours too). This won’t be a step-by-step how-to, but maybe it will help you wrap your head around somethings. These are somewhat disjointed thoughts, but afterward I will give a basic walk through that hopefully will flesh out some details too. I’m trying to hit on points that stumped me some in hopes that it will help you move forward and learn quicker than me. 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 send Education, Programming 2011-06-15T02:16:55+00:00 http://www.elfboy.com/site/making_css_drop_down_menus_work_on_the_iphone/ http://www.elfboy.com/site/making_css_drop_down_menus_work_on_the_iphone/#When:00:00:26Z Today I spent a while struggling to get a CSS drop down menu to work on the iPhone. The short of it is that you need to either explicitly set display: none; on the secondary list and change it to block or any visible setting on :hover or, I stumbled on this later, you need to specify a width on the drop down unordered list (and not it’s list item children). If you’re curious for more, keep reading. 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. CSS, Education, HTML 2011-03-24T00:00:26+00:00 http://www.elfboy.com/site/an_idea_to_help_christchurch/ http://www.elfboy.com/site/an_idea_to_help_christchurch/#When:08:53:14Z For the past day and a half I have been glued to my computer screen watching streaming news coverage of the tragic earthquake that devastated Christchurch, New Zealand. I want to help, but I’m living in America. Then I had an idea that maybe I could help people in the web industry so they could help themselves and others there on the ground. This is a letter to Christchurch web designers. 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 Business, Life, Personal, Travel 2011-02-23T08:53:14+00:00 http://www.elfboy.com/site/css3_multiple_background_images/ http://www.elfboy.com/site/css3_multiple_background_images/#When:20:15:44Z For the past several weeks, I’ve been working on an iPad project that makes copious use of buttons for navigation. These buttons consist of text, an icon, and a gradient. As my only browser is the iPad’s flavor of Safari, I can use a lot more fun CSS3. I decided to use multiple background images to display the gradient and icons, but have run into some issues that I would like some help with when it comes to the hover state. 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! 2011-02-01T20:15:44+00:00 http://www.elfboy.com/site/twenty-ten/ http://www.elfboy.com/site/twenty-ten/#When:22:26:12Z In 2010 I didn’t live in, or visit, New Zealand. Since my first trip in 2002, I have been there for a least part of the year five out of the last eight years. However, I did do a bit of traveling around to different places. And by those numbers, this was 2010: 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. Life, Personal, Travel 2011-01-02T22:26:12+00:00 http://www.elfboy.com/site/percentage_widths_flexbox_problem/ http://www.elfboy.com/site/percentage_widths_flexbox_problem/#When:23:36:02Z This question is too long to ask on Twitter, so I’ll ask here. I’m having a problem with CSS3’s new Flexible Box Layout Module (or Flexbox so it isn’t a mouthful). For the most part, I’ve figured out how to use this new layout technique and am loving it. However, I’m running into an issue when I try to specify the children of the box using percentages. Is this even possible? I’ve stripped down my code to the basics. If you have any knowledge of this, I’d really appreciate the help. Here’s the code: 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: <div id="box"> <div>one</div> <div>two</div> <div>three</div> </div> 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. CSS 2010-10-19T23:36:02+00:00 http://www.elfboy.com/site/monopoly/ http://www.elfboy.com/site/monopoly/#When:18:56:51Z A few weeks ago as I was browsing Dribbble I came across this shot (and the following) by Louie Mantia. It’s a pretty cool redesign of the classic Monopoly board game. It takes takes some elements of the original look and streamlines the space. In the comments, Meg Frisch playfully asked who was going to recreate the shot using HTML5. “Hey, that sounds like fun! I should do that.” And so, ladies and gentlemen, here is the HTML5 & CSS3 Monopoly board. Allow me to tell you about this project. Obviously, since it is using some of the newer tech, IE8 and below are going to have issues (I won’t be able to check IE9 until later this month when my new Windows 7 powered laptop arrives!). Firefox 3.6 and WebKit browsers render it correctly though. There are a few parts of this that I’m excited about. First, I was able to write, in the source HTML, each tile on the board following the order you would play. Even if something is just for visuals it doesn’t mean you shouldn’t do it right by writing good, semantic markup underneath. So if you turn off the styles in your browser you will see each property listed in order (as an added bonus the word Go at the start and the Go to Jail tile link you to the correct space). Through surprisingly little CSS I was able to flow the tiles visually in the correct order. CSS still amazes me. I was creating websites back when layout and design was hard-coded into your markup. The fact that there is nothing but very basic text with no styles and a full color board with shapes and layout with styles applied is really cool and makes me geek out! The markup is also very minimalistic. The angle arrows pointing to the next square and the icons on special tiles don’t exist in the markup. They are created with the pseudo element :after. The icons themselves are actually imageless. CSS creates the circles and a custom mini-font embedded with @font-face pulls in the actual icons (A big thank you to John Williams for helping me create the font file so quickly! Also, TypeKit is serving Museo Sans for the main text. TypeKit also pointed me to WebFont Loader which I use on the icons.) That brings me to something else I wanted to mention. You’ll notice the design is really wide, probably too wide for your screen. Well, the entire thing is em based (which is a big reason I wanted the icons to be font-based) so you can shrink or expand the entire design as needed. Having the entire board flex like this is pretty cool. There are some issues with it though, at least at the moment. Firefox will break the layout every other step or so. The math isn’t precise enough in the ems. This is something I could probably re-visit at some point to really fine tune. WebKit doesn’t break, but it isn’t perfect either. This was the first time I had the chance to use and learn CSS transforms. I like a project that forces me to learn a new skill. I have been toying with the idea of using transitions to animate the tiles so that when clicked, they would flip over and reveal the property information on the back. We’ll see if I get around to that, it’s a lot of data to type. A friend of mine also suggested I use HTML5’s local storage capabilities to turn this into a completely playable game! All in all it was a fun little side project. Take a look under the hood if you’re curious about how I did things, the source is right there for you. Enjoy! CSS, HTML 2010-10-18T18:56:51+00:00