Day 15 of the 30 Day Writing Challenge. Halfway there!

I’m busting my ass to get this post in. I hate just throwing “anything” up, so I took some time to research something I’ve never messed with: getUserMedia.

Let me preface this by giving you some requirements. Your computer needs a camera on it. You also need Chrome Canary, or Opera Next. If you chose to use Opera Next, you don’t have to enable any extra settings. If you decided to get Chrome Canary, you will have to enable one option. To do so, go to chrome://flags/ and look for “Enable MediaStream”. Make sure this is enabled. Now time for the fun.

Take Picture

Day 14 of the 30 Day Writing Challenge

As a designer, there is nothing more frustrating then opening up another designers working files and discovering that in the process of creating an effect they destroyed the original image. And now you, the person charged with making an edit to that image, has to recreate the entire thing from scratch. There are a lot of different ways to do non destructive editing, so today I thought I would show example of one of the easiest and most useful ones that I have found, the clipping mask. Clipping masks are a super easy way that you as a designer can crop photos in Photoshop without actually deleting any portion of the photo. Here is how it works:

Step 1: Open Photoshop and create a new document. For this example I’ve opened up an 1140 grid template.

Day 13 of the 30 Day Writing Challenge

The idea for this post all started with a friend of mine, Connor McSheffrey (@mcsheffrey). I don’t normally see a whole lot of activity from Connor on github. This morning, he posted a short gist:

I took a look at noticed something I didn’t understand. The ~~ operator. So, I had to start researching. For whatever reason, Google doesn’t recognize ~~ in the search engine. I tried surrounding it with quotes etc and nothing relavent came up (please let me know why)! I knew this was an operator, so I started searching for operators. Sure enough, I found the ~ operator. I didn’t even know this one existed. Do you know what this does? Let’s break it down:

Day 12 of the 30 Day Writing Challenge:

Hello, I’m Truett Kueck and you’re not. Today I am going to expand on what I wrote about last week. It is amazingly common to forget to add urls to links. This is completely understandable. You are developing the page in sprints, and sometimes the page you need to link to does not exist yet. Multiple sprints later when that page exists it slips your mind and then BAM! a site is live with scores of non-functioning. It is also possible, and very common, that the actual requirements for links are unclear or completely non-existent.

To solve this problem I have developed a simple Ruby application that parses a page for any links and then generates a Selenium script that clicks through the links on the page. You will still need to make a few modifications, but you are 95% of the way there. It uses the mechanize gem, another of many web automation gems, so we will need to install that first.

1

sudo gem install mechanize

Mechanize is actually completely capable of performing the functionality of the Selenium script, but it has one major disadvantage. The Selenium script can be run against Saucelab’s OnDemandService which gives you access to most every major OS/Browser combination. That might not matter to you as a developer, but Compatibility Testing is the bread and butter of QA. Now onto the code:

Day 11 of the 30 Day Writing Challenge: A look at why I use 35 year old software

Why Emacs?

Let me just start off by saying that this is by no means an intent to disuade you from using your editor of choice. That being said, stop using your bloated GUI IDEs. Okay, maybe that was a bit harsh, but do you remember when your teachers in school would say, “keep it simple?” It’s true and I’m sure if you are slightly familiar with Emacs you are saying to yourself, “but emacs isn’t simple, I couldn’t even figure out how to get out of the program!”

Note If you are on linux or Mac you should know these commands:

vi: Save [ESC] w [Enter]
    Quit [Esc] q [Enter]

emacs: Save [CTRL]-x s
       Quit [CTRL]-x c

I will fully admit there is a learning curve to Emacs, it’s the biggest draw back of any of the terminal editors. When I first started using Emacs it took me around 2 months to be able to use it exclusively. Up until that point I was augmenting my development with the GUI editor I was using prior. My point though is, stick with it, make a cheat sheet, keep a page open of common commands, so on and so on. Your hard work will be rewarded with efficient, clean and simple development.

Day 10 of the 30 Day Writing Challenge

I love, and I mean LOVE TextMate. It was my baby up until this year. TextMate did some amazing things, but their lack of updates started to wear on me. I had seen a few friends starting to use Sublime Text 2 and, at first, totally ignored their praise of the product. I thought, there’s NOTHING Sublime is doing that TextMate (TM) isn’t. So, it took about a month from the time I saw Sublime, to the time I gave it a try. I wish I would have done it earlier. I’ve seen the screen shots of TM2 and can’t form a REAL opinion of it without using it. So the cries of “TextMate 2 is going to be better” mean nothing to me right now. I have gone through, and compared the tool based on what I am doing day to day. I’m purely a front-ender. And my day to day, may be completely different than yours. Just roll with it.

Day 9 of the 30 Day Writing Challenge

The HTML5 Boilerplate project was one of the first github projects that I REALLY started to use when it first came out. Sure, there were some libraries, plugins, or whatever that I had used before the HTML5 BP, but this is the first I used on a regular basis. After watching the repo and using the code base for a while, I would try and help out the project here and there. Most time, nothing major, but hey… better than nothing:

Day 8 of the 30 Day Writing Challenge

How to Avoid Pitfalls When Creating Custom Illustrations for Clients.

One of the first things I learned after I graduated from college is as a designer you should never become emotionally attached to your designs. It’s a lesson that has served me well during my career. Don’t get me wrong, when a client really likes something I have done, I’m happy and I feel good about my work, but I don’t jump up on my chair and crown myself God of design, or Lord of the Office. On the flip side if a client doesn’t like what I have done, I’m not happy, but I don’t go into the bathroom and cry about it. It’s all part of the business and I accept that. Unfortunately, this principle was recently put to the test when I was assigned to create three custom illustrations for a clients website.

Day 7 of the 30 Day Writing Challenge

CSS Animations have been around for a few years now but when they were first introduced you could only use them in Safari (well webkit technically, although they ran at like 9 fps in Chrome in the early days). That didn’t stop me from making these sumo wrestlers but it did make them a novelty that most people couldn’t see. Fast forward to today - Chrome, Firefox, and the IE10pp4 all support hardware accelerated CSS animations. Browser support is already today, especially on mobile, and it will only get better. So why not start using them now? Declaring animations in CSS requires a lot of code, and supporting multiple browsers means repeating a lot of this lengthy code many times over. Here’s how to cope:

Dealing w/ Prefix Hell

Using CSS animations can be a nightmare. Browser prefixes on properties is one thing, but with CSS animations we’re talking about entire prefixed blocks of code containing prefixed properties. No big deal right? Take a look at how much code it took to setup the ‘rocking’ animation I applied to some of my sumo wrestlers:

Day 6 of the 30 Day Writing Challenge

I, unlike most of the Tag Soup group, am not a developer. I’m currently a Web Tester at melt media and have held other QA titles at other organizations. QA is here to help you make better and higher quality products. This is usually accomplished through two methods: manual testing and automated testing. This post will concentrate on providing an introduction to automated testing using Selenium and Ruby. Foreword before we get to any code: I’m still new to writing Ruby code.

First you’re going to need to have Ruby installed. If you don’t already, follow this guide. Once that is accomplished you’ll need to install the Selenium webdriver gem.

1

Sudo gem install selenium-webdriver

One more note before we get further into the code. Automation is not a replacement for manual testing. Anyone that tells you this is lying. This post is going to cover using Selenium to automate link verification on marketing sites. This seemingly innocuous test is very critical, and often overlooked in manual testing.