2010 Posts of Eric Rowel | Insights, Opinions, and Tutorials

Since his days in 2010 of offering insights, opinions, and tutorials on Webkrunk, Eric Rowell, a professional web developer and designer who is fascinated with everything related to the web, has moved on to new adventures. He is currently the Lead Data Visualization Engineer for Platfora, a self-service, iterative, and fast platform. But between the year, 2010 when Webkrunk was live and 2015, he has remained as Chief Editor of Html5CanvasTutorials, was a Senior II Web Developer at LinkedIn, founded MeteorCharts, Inc., founded KineticJS, was a Frontend Engineer at Yahoo!, .......and if you want to see more go to his linkin page.

Whoa, you say, this guy is a busy, prolific individual. And I thought I was busy. Between handling all janitorial supply procurement for a large manufacturer that is my bread and butter job, to building websites for friends and myself, having a small e-commerce site with my wife that sells custom spandex pants and shorts, being a member of a healthfood coop, and father to three kids, I thought I was taxed to the limit. I have lightened my load at my procurement position by finding a great online website CleanItSupply that offers a vast array of top quality, wholesale bulk paper towels + dispensers and other paper products from trusted name brands such as Cottonelle, Kleenex, Procter & Gamble, Boardwalk, Windsoft, San Jamar, Palmer, among others. They also sell every kind of high quality commercial janitorial cleaning supplies to janitorial equipment. I'm talking everyday cleaning essentials like all purpose cleaners to heavy-duty supplies like vacuums, janitorial carts, mops and buckets. What's great they sell wholesale to business and retail to individual customers. Believe me, they make my job so much easier. I also order all our paper goods which are available in eco friendly / green brands for my family from them. Thank you CleanItSupply. I don't know if Eric Rowell needs or even wants some slack in his busy lifestyle, but I sure do. Anyway...

When I discovered that the WebKrunk domain was available I immediately bought it with the goal of using its 2010 archive pages to post once again his amazing content. There are soooo many posts that I decided to just give a few archived examples from each month in 2010.

It’s been fun looking back at all his content. You might even learn a thing or two. A lot has changed on the web since 2010. Enjoy. And thank you Eric for all your observations and tutorials from your WebKrunk days.

January 2010

Didn’t Get Hired Because of Facebook? You’re Not Alone.

January 30th, 2010

According to recent surveys, 70% of HR workers in the U.S. admitted to rejecting a job applicant because of his or her internet behavior. For the most part, these “internet behaviors” refer to the posting of inappropriate photos and content on social networking sites like Facebook, Myspace, and Twitter. In addition to not getting the job, there are countless cases of employees who post content about their crappy bosses or how they wish a fellow coworker would drop dead in the office. Whether you’re job hunting or like the benefits of being employed, how should you handle social networking so that it doesn’t screw up your life?

If you were an employer, you would do it to!

Let’s not point fingers and label employers as “evil” for looking us up on the internet. The fact is, we live in a different age than people did just 15 years ago. Information about anything, or anyone, is readily available around the clock for anyone who wants to know, including your employers. Can you blame them? Let’s say that you’re in charge of hiring a new employee, and that you interview three applicants. You go home, jump on the computer to check what your friends have posted on Facebook. The temptation is irresistible. All you have to do is type in the applicants’ names and presto, you will get an instant perspective on how these people actually live, contrary to the way they presented themselves during the interview. And here’s the thing. During the interview process, all three applicants seemed very capable for the job, and all three seemed very professional. (It’s not that hard to act professional and responsible for a thirty minute interview). After looking up each of their profiles on facebook, you quickly learn that two of the applicants seem to party excessively and say very inappropriate things, while one of the applicants has a private profile. How will this affect your hiring decision?

How to handle social networking sites so that you don’t get screwed over

If you’re still in college and not yet seeking real job opportunities, then by all means, post all your drunk photos and scandalous comments. Who care’s? However, the moment you start looking for a real job, or even an internship, you need to start being responsible with your postings.

If you think you might have content online that could jeapordize getting hired, the very first thing you need to do is make all of your online profiles private, especially Facebook. Facebook is currently dominating the social networking scene with a whopping 300 million users. There’s a good chance that your potential employers will be savvy enough to dig up your dirt on Facebook. Once you’ve landed a new job, don’t ever post anything negative about the company you work for, your coworkers, or your bosses, period. All it takes is one negative comment to change how your coworkers and superiors think of you, which could definitely impact your career.

On the flip side, your online presence can also help your career. If you’re actively involved with charities or non profit groups, or if you regularly blog about content relevant to your career, be sure to take the necessary steps to make those activities as visible and accessible as possible.

Good luck!

Sorry Apple, but the new Apple iPad won’t ever catch on

January 26th, 2010

The Apple Tablet release is expected to occur tomorrow, January 27, 2010, at Apple’s event in San Francisco, California. Seems like everyone is going nuts over it… but with time, I think people will begin to realize that it’s more of a toy than a technological revolution like the laptop, iPod, or iPhone.

So what is the Apple Tablet anyways?

The Apple Tablet is basically a really huge iTouch, or like a really small touch screen laptop without a keyboard. Definitely sounds cool, and would definitely be fun to play with… but so what? Sure, it would be fun to play a few games on it, or nice to let your kids play with it during a road trip, but is it really worth 500 bucks? Let’s get real, you need a keyboard and mouse to actually get some work done.

Laptops are apart of our everyday life because they are fully functional computers that are still reasonably portable. Smart phones like the iPhone are a part of our everyday life because they are jam packed with as much functionality as possible in a device small enough to fit in your pocket. That being said, where would the Apple Tablet fit in? It’s too large to fit inside your pocket or even a purse, and it lacks the functionality of a laptop.

Let’s say you go and buy one…

Image this. The Apple Tablet hits the stores, and you have a thousand bucks to spare. You think to yourself “man, that Apple Tablet seems pretty cool. Plus, since everything Apple makes is revolutionary, I should probably grab one up. I think I’ll go get one!” You drive to Best Buy, buy one, take it home, and take it out of the box. You power it up, play with it for about 30 minutes, and place it neatly on your desk. It will probably take you a day or two to realize that you will probably never really use again. Luckily for you, Best Buy has a great return policy!

If you’re thinking about getting one, I would at least wait a few months until they hit the stores to see if it’s really worth getting. My guess is, the new technology will make a lot of headlines at first, but will end being a huge bust for Apple. It’s okay Apple, No one’s perfect!

Are We Running Out of Web Addresses?

January 21st, 2010

That’s right, the number of web addresses are running out, and that’s a fact. How could this be possible?

The Problem with Web Addresses

All URLs (like www.adollo.com) are assigned to its own unique web address. Each of these web addresses are 32 bits, which means that there are 4.3 million possible internet web addresses. At the time this article was written, about 85% of all of the available addresses are already taken, and web experts predict that we will run out of them in about 2 years.

The Future of the Internet

So what’s going to happen? The next version of the internet (IPv6) will support 128 bit web addresses, which is astronomical. If web addresses became 128 bit, every single person on planet earth could own more a thousand websites! That’s alot of websites. It seems apparent that this is really the only solution to problem, but it’s going to come with a price.

Deja Vu

Remember when television went digital? Remember how everyone had to purchase analog to digital converters, buy new TVs, or upgrade their television services? Well, it’s going to be the same story for stakeholders in the web. Just like when television went digital, there will be a period of time when IPv4 and IPv6 coexist until the world is ready to fully commit to IPv6. During this time, networks will have to support both protocols, just like television stations had to support both analog broadcasts and digital broadcasts until the government stepped in and mandated that every television station only broadcast digital channels.

February 2010

Microsoft & Yahoo Team Up Against Google

February 19th, 2010

We all knew it was coming. It’s now official that Microsoft will power Yahoo Search and search ads. Today both European Union and US Department of Justice have both legally approved the alliance that will see the software giant acquire the internet search and search advertising businesses of Yahoo!.

Let’s look at the facts. The top three search engines are Google, Bing (Microsoft’s search engine), and Yahoo. According to alexa.com, about 43% of internet users use Google, 27% of internet users use Yahoo, and 22% of internet users use Bing (currently live.com has captured about 17% which redirects users to Bing, and users who access Bing directly make up 5%, adding up to 22% total). The remaining 8% of internet users either use another search engine or don’t use one at all.

King of the mountain

If you’re Google, you’re feeling pretty good right now because you’re at the top of the mountain. Your two closest competitors, Yahoo! and Microsoft, don’t have a chance to catch up to you. If you’re Yahoo! or Microsoft, it’s easy to see that you have no chance to rival the almighty Google unless of course you join forces. While Google will still have 43% of internet users, the new Microsoft Yahoo! alliance will now have 49% of internet users.

May the best search engine win.

Why Twitter is the Holy Grail of Blog Marketing

February 17th, 2010

If you have a blog, and you’re not using Twitter, where have you been? Twitter is the key ingredient to getting your new blog (or your existing sluggish blog) off the ground and soaring.

Why Twitter is so important for bloggers

Before we get started, it’s important to understand how Twitter works and why people use it. Twitter is a social networking site that essentially allows people to follow other people’s posts. Some people use Twitter as a mechanism to keep up with friends and familyby posting their daily activities while others use Twitter as an RSS feed replacement. For the purpose of blogging, we are most interested in the latter audience. The key ingredient to the value of Twitter for bloggers is the retweet feature, which allows tweets to propagate the Twitter network, creating a ripple of new visitors to your blog.

The Twitter effect

Let’s say that you’ve just created a new blog, and are using Twitter to help bring in more traffic. Each time you make a post, you make a tweet about it followed by a link (you’ll want to use a URL shortener like www.bit.lyso that the url isn’t too long). Also imagine that you have a mere ten followers, but one of those followers has a hundred followers. After you made your post on Twitter, that user sees your post, and retweets it so that he can share it with his friends. That single action has suddenly put a link to your blog in front of a hundred people. From there, if a few of those hundred people like what they read, they may retweet it to their friends also. See where this is going?

I call this the Twitter effect, and in my experience it’s the most valuable tool any blogger could have to bring in more traffic. Although here’s a lot of strategies that people use to get more followers and retweets, at the end of the day people are drawn to quality content and naturally like to share it (this is the foundation of viral marketing). If you can produce quality content with a unique perspective, and you tweet every single one of your posts, you’ll be amazed at how your Twitter audience grows.

Tips to help maximize your Twitter effect

Blog everyday and tweet every post on Twitter

Retweet other user’s tweets that you find interesting (not only will you be sharing interesting content with your friends, but the user that you retweeted might check out your tweets in return)

Use “#” to denote topics in your tweets (e.g. #googlebuzz online privacy out the window).& This will make your posts more searchable in Twitter’s search engine

Good Luck!​

March 2010

How to Choose a Good Domain Name

March 23rd, 2010

Starting a new website or online business can be an exciting venture, but coming up with a domain name can often times be very challenging. Since most of the good domains are already taken, you will need to be very creative when searching for an available domain name, while also taking into consideration the five golden rules of domain naming. These five rules are based on two major principles. First, your domain name needs to be as easy to remember as possible so that visitors are more likely to return, and second, your domain name needs to create an image for your site, like the title of a novel, which is important for name branding.

1) Don’t use hyphens

This one is simple.& Resist the temptation to include hyphens in your domain name if the domain you’re hoping for is taken. It will end up hurting you in the long run because hyphenated domains are commonly mistyped, resulting in lost visitors. Returning visitors is something you definitely can’t afford when you’re first starting out.

2) Only use nouns and verbs if your domain is more than two syllables

Remember www.thefacebook.com? If you do, you’ll probably understand why they went through so much trouble to acquire www.facebook.com instead. The problem that Facebook was having was that visitors were repeatedly returning to www.facebook.com instead of www.thefacebook.com simply because the plural “the” isn’t something that people particularly remember about a name. People usually remember words or phrases that contain nouns and verbs. www.facebook.com, for example, is composed of two nouns, “face”, and “book” It’s easy to remember because people can visualize the domain name as a book of faces, like a photo album.

3) Stick with the .com extension

A lot of people will say that the .net extension is just as acceptable as the .com extension, but I completely disagree. I personally have experience with this one. I’ve created one and only one website with a .net extension, and I was repeatedly faced with the problem of visitors going to the .com version by mistake. When people hear about a website, they subconsciously filter out the extension because they just assume it’s a .com. This can be a major problem when trying to drive traffic to your site virally. Unless your website is a non-profit organization (in which case use .org) it’s definitely best to stick with the .com extension.

4) Use the least amount of syllables as possible

Think about the most popular websites you know of. They probably include Google, Yahoo, Facebook, YouTube, Twitter, Blogger, (maybe WebKrunk?). There seems to be a recurring trend here. It’s no coincidence that all of these websites have two syllables. The fact is, it’s easier to remember a word with less syllables than it is a longer one. Notice that I’m focusing on the number of syllables and not the length of the whole domain name. If your website name is www.ghyyk.com, it will do you no good because it’s simply too hard to remember, despite its short length.& If you’re savvy, and I’m sure you are, you might be saying “hey wait a minute. Didn’t you say earlier to never use non nouns and verbs? What about MySpace and YouTube?” Quite simply, the number of syllables that a domain name has is more important than its word usage.

5) Remember that your domain name is a face for your website

Finally, the most critical part of choosing a good domain name is to pick something that represents a face for your website. You want to pick something that puts an image into people’s minds, or stirs some sort of feeling or memory in people, so that it sticks. YouTube.com is great because it’s a website about “you” creating your own online television “tube”. WordPress.com is a very smart domain name because it makes you think about the printing press and the mass distribution of news, opinions, and ideas (the essence of blogging).

Good luck!

April 2010

HTML5 Web Sockets Example

April 30th, 2010 by Eric Rowell

HTML5 Web Sockets will single handedly revolutionize web technologies as we know it. The purpose of this post is to explain what techniques have been used to simulate server push until now, define HTML5 web sockets, and then give an example of how to use it in your HTML5 application

What is polling?

Until now, the web has been one directional. In other words, web pages could only send a request to a web server, and not the other way around. Once AJAX came along in 2005, web developers quickly adopted techniques to simulate a request from server to client known as polling. There are two types of polling, short polling and long polling.

Short polling is implemented by making a request to the web server every few seconds or so to see if data has changed. If it has, the web server will respond with the new data. Otherwise, it will respond with a blank message. The drawback to this technique, however, is a higher rate of server requests and an overhead in CPU usage on the web server (which is constantly checking if an update to the data has been made).

Long polling is implemented by making a single request to the web server and keeping the connection open until the data has changed, at which point the web server sends back a response. The drawback to this technique, like short polling, is that the web server still has to check if the data has changed every few seconds or so, creating an overhead in CPU usage. In addition, long polling creates a scenario in which thousands or even hundreds of thousands of open connections must be handled simultaneously by the web server.

When a new WebSocket connection is established the browser opens an HTTP connection to the server first and then negotiates with the server to upgrade the connection to a dedicated and persistent WebSocket connection. This process automatically sets up a tunnel through to the server – passing through all network agents (proxies, routers, and firewalls) in the middle (very much like HTTPS establishing a secure, endtoend connection) , solving numerous issues that the various Comet programming techniques encountered. Once established the WebSocket is a fullduplex channel between the client and the server

May 2010

Slideshow: Galleriffic

May 3rd, 2010 by Eric Rowell

This weekend, I wanted to find an open source jQuery photo gallery and slideshow script that looked great and was easy to implement. After doing a lot of research and trying out different scripts, I discovered that Galleriffic is the best open source photo gallery and slideshow available by a long shot. I’ve been really impressed with Galleriffic and wanted to share this wonderful resource for today’s post.

What is Galleriffic?

Galleriffic is an open source script that’s built with jQuery and is free to use. jQuery has a lot of built in functionality to handle Flash-like transitions and fade effects.

Features

The Galleriffic script provides paginated thumbnails on the left side of the gallery, and a large image of the current thumb on the right. To view each image, users can click on the individual thumbnails, click on “Next Photo” or “Previous Photo”, click on “Play Slideshow”, click on the main image, or even use the arrow keys to jump between thumbnails. The size of the thumbnails is completely configurable. Gallerrific’s demo includes a set of 15 thumbnails for each thumbnail set. Users can page to each set of thumbnails with the pagination control above and below the thumbnail section. A title and description can also be accompanied with each photo

Implementation

Implementing Galleriffic was a breeze. When you download the source code, you’ll get a folder of CSS files, a folder of Javascript files, and five example Galleriffic HTML files. The images, titles, and descriptions for your photo gallery and slideshow are stored in an unordered list with the class name “thumbs”. After moving the files to my web server and creating a PHP service to dynamically generate the unordered list code, I suddenly had a very rich, professional looking photo gallery and slideshow within about 15 minutes,

September 2010

HTML5 3D Modeling with ​Pre3d

Posted on September 28th, 2010 by Eric Rowell

A new era in web visualizations is just over the horizon. HTML5 Canvas has endless potential, including the ability to render 3-d models. To demonstrate this, I’ve used the Pre3d engine by Dean McNamee to create a 3-d model of a simple house which can be rotated on the screen.

****

HTML5 Canvas 3D Rotating Cube Example

Posted on September 26th, 2010 by Eric Rowell

After seeing some pretty incredible HTML5 Canvas 3-d visualizations, I wanted to try creating one for myself to see how it’s done. After doing a little research, I realized that the HTML5 canvas API only supports 2-d renderings. In other words, in order to create 3-d visualizations, I would need to either create my own 3-d JavaScript engine which leverages the HTML5 canvas API, or I’d need to find a pre-existing JavaScript library. After doing a little more research, I found that there are already people out there creating 3-d JavaScript engines. In particular, Pre3d is one such library that’s very simple, intuitive, and easy to use.

***

10 Awesome HTML5 Canvas 3D Examples

Posted on September 24th, 2010 by Eric Rowell

What’s HTML5 Canvas? HTML5 Canvas allows developers to create rich, interactive visualizations with JavaScript very similar to Adobe Flash visualizations created with ActionScript. Although HTML5 Canvas is currently only supported by a 2-d rendering API, many developers have leveraged the API to create their own 3-d JavaScript engines. The purpose of this post is to show the awesome potential that HTML5 Canvas has in store for the web, while also providing a dose of inspiration for the developers out there adventurous enough to create their own. Here we go!

October 2010

HTML5 3D Modeler

Posted on October 10th, 2010 by Eric Rowell

Welcome to the WebKrunk HTML5 3D Modeler v 1.0. With this application, you can create your very own 3-d models right in the browser! This modeling software is powered by pre3d, an open source 3-d JavaScript engine. Instructions 3-d models are created by assembling 4-sided quadrilaterals and 3-sided triangles together to form polygons. The default [...]

****

JavaScript Object Inheritance Using Prototypes

Posted on October 10th, 2010 by Eric Rowell

As web applications become increasingly more complex and interactive, it’s not unusual for developers to push JavaScript – the only available option for browser side scripting – to its limits. In other words, OOP (Object Oriented Programming) patterns are become much more popular these days in the world of JavaScript. As with any OOP language, there comes a time when it’s super handy to leverage object inhertiance – a way for children objects to inherit parent object’s methods and members. In this article, I’m going to discuss the importance of inheritance patterns, explain how it can be implemented using JavaScript, and provide some working code to get you started.

****

JavaScript Table Traversal Example

Posted on October 5th, 2010 by Eric Rowell

As web applications become more and more interactive, it’s sometimes handy to traverse an HTML table in order to extract data, update cells, or manipulate the table itself – i.e. add, remove, or insert rows and cells. In doing so, we need a way to access each row inside the table, and also each cell inside each row. It would be quite cumbersome to generate sequential ids – like cell_0, cell_1, cell_2 etc. – and then access each of these elements by id from a JavaScript loop. Wouldn’t it be nice if we could somehow access the DOM objects that make up the table directly, without using ids? Luck for us, we can! The purpose of this post is to explain how it can be done, provide some working code to illustrate the procedure, and also demo an example algorithm that leverages table traversal. Let’s get started!

****

HTML5 Canvas Arc Example

Posted on October 2nd, 2010 by Eric Rowell

The HTML5 Canvas API provides a means for JavaScript programmers to draw and move shapes on the screen. The major primitive drawing components are lines and arcs. The purpose of this post is to clearly define the arc drawing API in HTML5 canvas, provide some working code to get you started with arc drawing, and showcase an interactive demo. Let’s get started!

****

HTML5 Clear Canvas

Posted on October 2nd, 2010 by Eric Rowell

Today I was creating an HTML5 Canvas demo and needed a way to clear the canvas. To my surprise, it appears that the HTML5 canvas API does not currently support a clearCanvas() method. So how can we do it? After doing a little research, I learned that when the canvas element is resized, it’s automatically cleared – in other words, we can make our own custom clearCanvas() function by resizing the canvas by one pixel, and then restoring it back to its original width.