http://www.elfboy.com/ en info@elfboy.com Copyright 2013 2013-03-08T21:10:22+00:00 http://www.elfboy.com/site/mobile_safari_crashes_with_css_transition_and_calc http://www.elfboy.com/site/mobile_safari_crashes_with_css_transition_and_calc#When:21:10:22Z While working on browser compatibility for a web app my company develops, I discovered that one area consistently crashed mobile Safari on our iPad. At first I figured it must be a JavaScript issue as we’d added some significant code for a new feature. But where even to start with that? The crash log for the iOS simulator in xCode revealed that the crash was happening around animations. So I went to see what CSS animations we had in our code and discovered a handful of transitions. All of these had been in the previous working version though. Through a lot of commenting out of pieces I discovered that the addition of height: -webkit-calc(100% + 15px) was the culprit. Certain combinations of transitions and calc() will cause iOS browsers to crash. I put together a Codepen to explain these situations. CSS, 2013-03-08T21:10:22+00:00 http://www.elfboy.com/site/speaking_out http://www.elfboy.com/site/speaking_out#When:07:36:13Z The web industry is going through a painful time - not in technological growth, programming language arguments, framework choices, or ugly design patterns, but in a raft of abusive behaviors towards the women in the industry. This cannot continue. 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. General, Life, Personal, 2013-02-07T07:36:13+00:00 http://www.elfboy.com/site/the_future http://www.elfboy.com/site/the_future#When:19: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. Life, Personal, Travel, 2012-09-02T19:35:50+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