http://www.elfboy.com/ en info@elfboy.com Copyright 2012 2012-03-22T17:50:26+00:00 http://www.elfboy.com/site/transitioning_to_in_house http://www.elfboy.com/site/transitioning_to_in_house#When:17: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! Business, Life, 2012-03-22T17:50:26+00:00 http://www.elfboy.com/site/random_php_password_generator http://www.elfboy.com/site/random_php_password_generator#When:07:05:39Z A project I was working on the other day needed an automatically generated password. I had an old script that spat out a really basic alphanumeric 6-character password, but I wanted something a bit stronger and more versatile. I thought I’d share. This code will give you a default of 8 characters, alphanumeric plus special characters, with flexibility for whatever length you want. The implementation is nothing fancy.Code: Random Password: <br /> <?php $len = isset($_GET['len']) ? $_GET['len'] : 8; $pw = ''; for($i=0; $i Programming, 2012-02-21T07:05:39+00:00 http://www.elfboy.com/site/making_repeatable_background_stripes http://www.elfboy.com/site/making_repeatable_background_stripes#When:06:26:15Z Last week I was looking for a way to create a background of alternating colored stripes for an entire web page or element. I needed to be able to easily change the colors so I wanted to do it with CSS and not images, but without adding a bunch of extra DIVs (which wouldn’t have worked anyway). I looked into gradients, but without knowing how tall the display area was, that wouldn’t work either. Plus, a gradient of that size would be hugely resource intensive. That’s when I remembered SVG.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: <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <rect id="svg_1" height="50" width="100" y="0" x="0" fill="#FF0000"/> <rect fill="#00FF00" x="0" y="50" width="100" height="50" id="svg_2"/> </g> </svg> (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. Layer 1 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: <?php header("Content-type: image/svg+xml"); $colors = array('#ff0000', '#00ff00'); ?> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <rect id="svg_1" height="50" width="100" y="0" x="0" fill="<?php echo $colors[0] ?>"/> <rect fill="<?php echo $colors[1] ?>" x="0" y="50" width="100" height="50" id="svg_2"/> </g> </svg> 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! Education, Programming, 2012-02-15T06:26:15+00:00 http://www.elfboy.com/site/frustrated_no http://www.elfboy.com/site/frustrated_no#When:03: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-19T03:56:13+00:00 http://www.elfboy.com/site/dumb_hackers http://www.elfboy.com/site/dumb_hackers#When:01: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-25T01:25:07+00:00 http://www.elfboy.com/site/typekit_goes_to_adobe http://www.elfboy.com/site/typekit_goes_to_adobe#When:03: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-04T03: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:08: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-15T08: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:06: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-24T06: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:15: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-23T15:53:14+00:00 http://www.elfboy.com/site/css3_multiple_background_images http://www.elfboy.com/site/css3_multiple_background_images#When:03: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-02T03:15:44+00:00