Podcasts

I have been tuning in to a lot of podcasts as of late in order to aggregate a better knowledge about what is going on in the web development and design community. In my travels, I have run across a collections of excellent podcast series. In fact, my two favorites are The Web Ahead hosted by Jen Simmons, The Changelog hosted by Adam Stacoviak, and Up Up Down Down hosted by Allen Pike and Nigel Brooke. They have guests on weekly, and spend about an hour discussing a particular topic in in detail. The Web Ahead and The Changelog focus exclusively on web development, and open-source libraries and projects respectively, while Up Up Down Down focuses on video game trends as well as some other more technical aspects of the industry.

You can check them out on their web sites, or subscribe to them on iTunes in order to receive updates when new episodes come out. They also have individual RSS Feeds which will alert you when there is a new episode. Coincidentally, The Web Ahead and The Changelog are actually hosted on the same site, which is 5by5, They have a ton of other podcasts, but I have not checked the other ones out yet.

These podcasts have a plethora of relevant and interesting information, which I find to be not only entertaining but highly informative. For example, in Episode 67 of The Web Ahead, Jen invited Doug Schepers onto the show to discuss SVG, which I'm sure many of us in the web development/design field have heard of, but not necessarily looked into for one reason or another. After hearing Doug, who has been working with SVG for a decade or more, talk about it so passionately, and in such great detail, I am highly tempted to implement it into one of my personal side-projects in the very near future.

The Changelog is fascinating in it's own right, because although The Web Ahead focuses on free web technologies, the The Changelog sets its sights entirely on the open-source side of things, where users can contribute to the project on GitHub in many cases. Open-Source software of all types has always been an intriguing topic for me, so I find myself tuning into this podcast regularly.

Up Up Down Down is hosted by game developers who are currently working in the industry. They have a guest on, and all debate a topic together. For example, I recently listened to Episode 8, in which they invite Ken Wong, one of the designers of  the new Monument Valley, which is available on the Apple App Store. They discussed and debated the ways in which video games can or can not be considered art, and attempted to define how one thing can be considered art while another is not. Although I am not personally involved in the video game industry, I feel as though the host Allen Pike summed it up perfectly in one of their earlier episodes when he expressed his opinion that even people who do not work on video games can enjoy the show if they have any interest in programming in general.

There are a couple of other excellent podcasts, which I have tuned into for an episode or two and plan on going back to. I feel that one I should mention is CodePen Radio hosted by the founders of Codepen.io, Chris Coyier, Alex Vazquez, and Tim Sabat. I have only listened to one episode from these folks, however, I found it extremely entertaining and am going to download the rest of their episodes to listen to soon.

I would love to hear from anyone who may be reading this to find out what kind of podcasts you listen to. And if you don't listen to podcasts, what sort of content do you subscribe to in order to stay in the loop? For example, weekly shows, screencasts, YouTube channels, etc.

As always, feel free to comment about anything that may be on your mind after having read this. Even if you didn't read a word of this, and you just want to plug your favorite podcast, I would love to hear from you.

How To Write Basic Chrome Extensions

This may not be news to some people, but I was pleasantly surprised to discover recently that Chrome extensions are written primarily in JavaScript. This makes them incredibly easy to get into for someone like myself, and I'm sure for some of you folks who may be reading this.

There are some more complex things which can be done, which involve injecting CSS, and popping up background pages in response to specific browser events, and you can even configure a settings page, but for the purpose of this post, I we are just going to use simple JavaScript injection.

We are going to be creating a simple extension which will convert all images on a page into placehold.it images on the fly. If you haven't used placehold.it before, it is bascially a placeholder site where you supply you image dimensions in the URL, and it will generate a gray placeholder image. The dimensions of the placeholder images will be exactly equal to the original image's dimensions. So, without further ado, let's get started!

Getting Set Up

The first thing you will want to do is generate the extension's manifest file. We could write this out by hand, and generate the folder structure for our extension by ourselves, but we are not going to be doing that, because we will be used a service called Extensionizr to generate all of this for us!

When you visit Extensionizr, you will be greeted by a page whichs looks like this:

There are quite a few options on this page, but the first option we will click is Hidden Extension. This will set a radio button or two for us automatically. The settings we want can be seen in this image, however, I will go over each one which needs to be set for our basic extension.

Under Extension Type, we will want to choose Hidden extension. It should already be set to this.
Under Background Page, choose No Background.
Under Options Page, we will choose No options page.
Under Override, we will be choosing No Override.
Under Content Scripts, we will be selecting Inject js.
We do not need any Misc Addons, so leave this blank.

Now, we will skip over URL permissions and permissions, and click Download It.

You will receive a zip file with the skeleton of your extension in it. Extract this somewhere where you can find it later and maybe rename it to something more descriptive. I placed mine into a ChromeExtensions folder in my root directory, and called it SampleExtension.

Modifying the Manifest File

Now that we have our skeleton extension, we will start filling it out. Go into the extension which you extracted to your computer, and open the manifest.json file in your favorite text editor. I will be using NotePad++, but you can use anything from NotePad to Visual Studio Professional Edition. It doesn't matter as long as you are comfortable with it and it can open Json files.

The manifest.json file should look like this:

We are going to change the name, description, and matches. The name should be something like Imageify or just Sample Extension or something. The description can be anything you please. The matches field will be the sites on which your extension will inject the JavaScript code. We will just set it as <all_urls>. This will make the extension work on all sites.

Save this file and open up the inject.js file which is located in the src/inject/ folder. This is where we will write our actual code.

The JavaScript Injection

Our inject.js file will look like this to begin with.

We will want to place our code for our extension within the area where the console.log now resides. So get rid of the console.log line, and replace it with the following:

var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
    var width = images[i].width,
        height = images[i].height;
    images[i].src="http://placehold.it/"+width+"x"+height;
};

Basically, all that this does is grab all of the image tags on the page and put them into an array. Then it loops through the array replacing the image's src attribute with "http://placehold.it/widthxheight". That's all.

Save this file and go back to your Chrome browser.

Installing Your Extension

In your URL bar type about://extensions. This will take you to Chrome's extensions manager. You will get a tab like this:

These are you extensions if you are unfamiliar with them. You will want to tick the little box in the upper right hand corner that says Developer mode. Click Load Unpacked Extension... and navigate to your extension's folder in the window that pops up. Click Ok, and if no problems occurred, your extension should appear at the top of the list.

Testing Your Extension

Now that your extension has been installed, point your browser to a site which has images, such as Google.com. If everything worked right, the images on the page should be replaced a split second after the page loads with placehold.it images.

I'm sure there are ways to speed this process up and make it so the human eye can not tell that the images are loading and then being replaced, however, for the purpose of this tutorial, this is fine.

Packing Your Extension

If at some point you are planning on sharing your extension with anybody, the best way would be to pack it up. To do this, go back to about://extensions in your Chrome browser. Make sure Developer mode is on, and click on Pack extension... Navigate to your extension folder again, and then click on Pack Extension. It will take just a moment, and then alert you that a *.crx file was generated. This is your extension. People just need to drag this file onto their Chrome browser in order to install it. A key file was also generated which is necessary to update your extension. Do not share this with other people.

Bonus Information

Chrome Extensions do not directly have access to a page's JavaScript variables and functions, presumably for security and general accident avoidance reasons. However, that does not mean that it isn't possible to modify page variables or call page functions from your extension. Just don't use it for evil. In order to access the page's 'view' of the code, you need to wrap your code in the following:

location.assign( "javascript:TYPECODEHERE;void(0)" );

As always, thanks for reading. I hope that this tutorial made sense and was easy to follow. Feel free to leave comments of all types! If you have made any Chrome extensions I would love to hear about them and check them out myself.

Heartbleed Bug

For those who have not yet heard the buzz around the internet, there was a very dangerous bug discovered on some websites which may allow your personal information such as usernames and passwords to be compromised. The websites which are vulnerable to this bug, which has been dubbed the Heartbleed Bug, are those which employ certain compromised versions of OpenSSL. OpenSSL has released a short statement on the matter, in which they stated:

A missing bounds check in the handling of the TLS heartbeat extension can be
used to reveal up to 64k of memory to a connected client or server.

Only 1.0.1 and 1.0.2-beta releases of OpenSSL are affected including
1.0.1f and 1.0.2-beta1. 

Affected users should upgrade to OpenSSL 1.0.1g. Users unable to immediately

upgrade can alternatively recompile OpenSSL with -DOPENSSL_NO_HEARTBEATS.

This bug was largely fixed a week ago, when it was originally made public by CloudFlare, after being discovered by a few folks over at Codenomicon.

For users who are worried about their personal information, the best practice is to change your passwords. However, before running off and changing all of your passwords, make sure that the site in question has patched the issue, or else you are just changing your password on a system which is still vulnerable. Instead, I suggest heading over to Mashable's article, where they list the systems which are affected, and if you should change your password or not. They also leave a little note, so you can better understand the state of that particular site.

New HTML5 Attributes

HTML5 introduced tons of new features and simplified things which needed to be simplified. The first thing that might pop to mind is the doctype declaration. The XHTML1.0 Transitional doctype was monstrous. It was time for a change. However, there are a lot of features which went right under my radar, and I'm sure that there are quite a few which went unnoticed by even the most informed developers. In this post, I am only going to focus on the attributes which were added.

The first attribute which I feel many people have already been exposed to but may not be 100% clear on is the data attribute. This allows you to apply metadata-type attributes to elements. For example, you can attach additional information to an item which does not would otherwise have to be referenced elsewhere or with arbitrary classes. I feel as though HTML5 Doctor explained the data attribute expertly by using it in reference to keeping track of the amount of fruit available:

<div id='strawberry-plant' data-fruit='12'></div>

 The data attribute is used to refer to the amount of strawberries available from the strawberry plant. It can then be accessed by getting the id of the element with JavaScript, then using the getAttribute and setAttribute methods in order to get and set it's values. Hopefully in the future, the "proper" method of using the new dataset method.

The next attribute which has been made available by HTML5 is the contenteditable attribute. This allows otherwise static content to be user-editable. An excellent example of this was hosted online by HTML5 Demos. This could be used for a variety of applications. One such application I can think of would be hooking it up do a database to store this data per user or the like. With proper sanitation of the data of course.

The next attribute, which is actually not supported by any major browser yet, is the contextmenu attribute. This will be a nice one. It allows you to apply custom right-click actions to items on a page. The example provided by the W3 Schools is a right click menu for a paragraph. Each item in the menu will execute a particular JavaScript function. Very very cool stuff.

The new draggable attribute does what one would expect. It makes objects in the DOM draggable and -- with a little bit of JavaScript -- droppable. It is nice to see something like this being done without jQuery. An example can be found, once again, on the HTML5 Demos site.

Hidden is the next attribute in the list. This is another one which takes functionality that used to be available only within other languages and makes it an HTML5 attribute. This one, unsurprisingly, accomplishes the same thing as using CSS to set something's display to none. An example is graciously provided by W3 Schools.

One final new attribute which was added was the item attribute. I do not want to put out false or incorrect information, so I am going to have to do more research about this one, and maybe make an entirely new post about it, since it looks quite interesting. Sorry folks!

I am sure there are a ton of new features and maybe even a few dozen attributes which I missed in this post, however, I feel as though this is a good primer on some of the attributes which were added in HTML5 that many people may not have noticed.

HTML5 is truly an advancement, and as browsers become more accepting of these new features, and people migrate towards HTML5, I have a feeling we will be seeing quite a few beautiful websites pop up out of the woodworks, which will redefine interactive.

As always, thanks for reading! If you have any suggestions, corrections or general information, feel free to post a comment! Even if you have nothing to say, go ahead and leave your mark on this blog post! Why not?

Mobile First Design vs Desktop Design

Mobile design has been a hotly debated subject for the last couple years, and finally, I feel as though we have come to a point where making our desktop sites more mobile friendly isn't the daunting and confusing task it once was. In fact, most sites that I personally end up on have some sort of mobile optimization. Be it the removal of processor-heavy objects or the reorganization of content to accommodate for the smaller screen real-estate. We have come to the point where redesigning your site for mobile is kind of a piece of cake. Just make your site as you always have, then use CSS media queries to remove the features that would bother mobile users. Right?

However, I was shocked to find a study by PhoCusWright Inc., which investigated the statistics of how users react to slow loading times on mobile adapted sites. All of that content which is loaded for desktop versions of your site, and then hidden away on mobile versions may slow your site's loading time down to the point where your users will go elsewhere. A quote from Akamai.com stated:

• Three second rule - 57 percent of online shoppers will wait three seconds or less before abandoning the site
• Younger travelers are less patient – Generation Y and younger travelers are less patient than older travelers when it comes to page load times. 65 percent of 18-24 year olds expect a site to load in two seconds or less
• Prevention is key - A third of travelers would be less likely to visit a site after experiencing technical problems like slowness or errors on the page. Business travelers are slightly more likely to have a negative reaction
• Loyalty is not forgiveness - Active loyalty program members are more likely than other travelers to indicate that they would not likely be influenced at all by technical glitches at 34 percent. However, the remaining 66 percent are actually more likely than others to have strong negative reactions.
• Travelers tend to be multi-taskers - 59 percent of consumers do something else when waiting for a travel website to load. Nearly one in five (19 percent) open another travel site in a new window when made to wait.
• Hidden fees may cost you - 43 percent of online shoppers have abandoned a booking because the final product price and/or fees were higher than they were willing to pay

Some of these findings should not be very surprising, but the exact statistics are a little bit staggering. If you site is loading videos and flash animations and jQuery galleries, loads of text, and CSS effects, then hiding them on mobile platforms, your users could be leaving faster than they came.

So many people access the web from their mobile devices these days. In fact, the Pew Research Internet Project web site has published that 63% of adults who own cell phones use those cell phones to access the web. Presumably on a semi-regular basis.

This information may be a bit sobering for some. I know it certainly is for me. For me, these statistics are enough to start really getting hard-nosed about mobile-first development. Making sure that the site works completely without flashy effects and the like is already a best-practice standard which I adhere to as best I can, so mobile first development should not be too much of a change in the work-flow.

What do you all think about mobile-first development? Are these statistics enough to sway you in your work-flow, or do you think that if someone wants a real web experience, they should just go on a desktop PC? What are your thoughts about sites linking to a mobile version of the site, instead of using media queries? Do the excess HTTP requests justify the better adaptation of your site for your mobile users?

Interop 2014

Well, Interop is now officially over. For me, anyway. I believe they have some events lined up for tomorrow, however, I am excluded from due to having only an Expo pass. The event was very exciting, and it was a real treat to get such a candid view into the current state of the IT industry. As a developer, I often forget that it is the IT guys who keep the lights on, and the servers running when it comes to the web and other networking technologies.

I spoke with many of the booth representatives who were on-site over the last 3 days, obtaining business cards, catalogs, free trials, promotional items, and of course -- information. Without further ado, I will give a couple details about some of the technologies which impressed me. Keep in mind that this is based on my understanding of the IT industry, so some of these things went right over my head, and as such might not have impressed me as much as they otherwise would have. Here goes!

The first company which really caught my eye was NEC. Their technologies ranged from manual network routing application to face scanning technology. A couple of their representatives were kind enough to show me demos and refer me to their other exhibits and technologies after they had explained the one which they were presiding over. The first technology which was demoed for me was one which uses Software Defined Networking to allow human manipulation of network traffic, to avoid broken links and so on. The next demo which was shown to me was for a facial scanning display which will look for people who are within a pre-defined database. It was explained to me that they are using this at a Universal Studios in Europe to allow easier access to the park by scanning faces instead of making people wait in a line. The final piece of technology which NEC showed me was a similar technology, which scans faces and estimates age and gender for demographic and marketing purposes.

Another booth which I feel like I learned a lot from was the Dreamhost booth. This one landed a little bit closer to my area of knowledge, so I was better able to ask the questions which would get me the most practical information about it. I was shocked to be told that some other hosting companies out there control multiple hosting sites, and you may switch from one hosting company only to end up back in their grasp on a different hosting site. Dreamhost will be a definite consideration when I begin looking for a shared hosting provider in the coming months.

Of course, being that I am a student, I visited several booths relating to learning and classes. Of those, I was very impressed by IEEE Computer Society and Pluralsight. IEEE is a paid training service which provides training in the form of documents and publications. Pluralsight, which is apparently running a 10 day trial for new users trains jQuery, PHP, and Java, of which I am very interested and may check out.

In the spirit of keeping this post from getting out of hand, I will end it here. I collected business cards from Peer 1 Hosting, Netreo, SanDisk, Zenimax, Server Monkey, Cormant, KnowledgeNet, Altima Technologies Inc, Giglinx Global, and Intersog as well as flyers from the University of Denver, ProfitBricks, Solarwinds, Rose Electronics, and Newegg.