Beginning Laravel PHP Framework

Hey, folks!

It's been quite a while since my last post, but I am planning on getting back on here regularly to post more regular content. I have transferred this blog to my main email address, so there will be one less barrier to entry, hopefully.

Today, I would like to briefly touch on a PHP Framework called Laravel. Now, anyone who has been even kind of active in the PHP community has likely heard of this one, as it is perhaps one of the most popular frameworks for PHP at the present moment.

I have been looking into this framework, and learning a little bit about it in preparation for development of a side project of mine. First of all -- why Laravel? Why not CodeIgniter, or Yii, or one of the many other frameworks out there? Well, I actually did check out CodeIgniter a little bit the other day before coming across Laravel. It seemed very versatile and useful, however, it had a couple of issues which made it difficult for me to get started, and upon a little bit of searching, it looks like Laravel may be the more promising choice for potential job availability in the future.

I have begun reading through a couple learning resources regarding Laravel, and am really liking what I have seen thus far. From my brief flirtation with CodeIgniter, it seems as though routes are a common framework feature, however, I really like how clean and simple it really is to implement in Laravel. To implement a simple route, you need very little code:

Route::get('/about', function()  // When the user visits the about directory of your website...
{
 return View::make('about'); // Serve them the about page.
});

I am also very impressed with the ease in which you can pull in assets. Recently I have been using the method of declaring a BASE_URL constant:

define('ROOT_PATH', $_SERVER['DOCUMENT_ROOT'] . '/SomeDevelopmentFolder/');

And declaring it contstantly:

<a href="<?php echo BASE_URL;?>folder/someresource.php">Link</a>
<a href="<?php echo BASE_URL;?>folder/anotherresource.php">Link</a>
<a href="<?php echo BASE_URL;?>folder/evenonemore.php">Link</a>

 While I enjoy it's benefits, it gets a bit old. Laravel allows you to simply use:

<a href="{{ asset('images/image1.jpg') }}">Link</a>
<a href="{{ asset('images/image2.jpg') }}">Link</a>
<a href="{{ asset('images/image3.jpg') }}">Link</a>

While this may seem like a slight difference in terms of length, it sure is quite different in terms of finger movements! I am sure that I have only scratched the surface of the value of this feature of Laravel, and apologize if I have not done it justice!

On top of it all, it also comes with a very useful templating language called Blade. My experience with Blade and Laravel in general so far have been very pleasant.

I am roughly half way through a wonderful book by Jack Vo called Learning Laravel: The Easiest Way (http://learninglaravel.net/), which easily explains many of the concepts of Laravel. I actually highly recommend it, though I am not very far into it yet. It will also give you a primer on Bootstrap and a couple of other web development tools if you have not yet dabbled with them.

I plan to post again about Laravel when I have a more complete knowledge of the features and uses that it has, however, right now I do not know much more than these basic things.

Please, please, please feel free to correct me or call me on anything if it doesn't sound right, as once again I am a newbie at this big bad Laravel business. These are all of my observations while learning what I have learned, and some of them are bound to be formed in part by my relative ignorance of the true capabilities of this framework.

Again, I thank all of you who are reading this, and plan on keeping it more up to date. I plan to post at least once a week, but I want to shoot for twice. We shall see how it goes, as things have been pretty busy lately, but I will fit it in where I can, as long as I feel like I have something of relative value to post.

SASS and Compass

You may have heard the terms Sass or Compass being thrown around recently. Or perhaps you haven't. But regardless of if you've heard about it or not, Sass is something that any Front End Web Developer should have tucked in their tool belt. Basically, Sass is a simpler way of writing CSS. You might ask yourself: "Why would I want to write Sass when I am already proficient in CSS?". Well the answer to that varies depending on who you are.

For me, the feature that really draws me into Sass is cross-browser support. Have you ever wanted to use, for example, a linear gradient, but end up having to find a gradient generator, or check CanIUse(caniuse.com) or similar sites so that you know which vendor prefixes to use? That might be fun and exciting the first dozen or so times, but eventually it gets a bit old. One nice thing about Sass is that you can just type:

.some-class {
  @include background(linear-gradient(top left, #fff, #eee 50%, #000 100%));
}

into your CSS, and it will automagically spit out:

.some-class {
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffffff), color-stop(50%, #eeeeee), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top left, #ffffff, #eeeeee 50%, #000000 100%);
  background: -moz-linear-gradient(top left, #ffffff, #eeeeee 50%, #000000 100%);
  background: -o-linear-gradient(top left, #ffffff, #eeeeee 50%, #000000 100%);
  background: linear-gradient(top left, #ffffff, #eeeeee 50%, #000000 100%);
}

There is a bit more to it than that, as you need to get Compass, which is basically the Sass compiler and then compile your Sass. But it really is a pleasurable workflow once you have it all set up.

Some other things that Sass can do is have variables, so you don't have to jump into Photoshop and grab your logo's color every single time you want to use it in your stylesheet, resulting in tons of different colors being declared throughout the file. Sass also greatly simplifies nesting. For example:

#someId {
  @include transition(all 0.3s ease);
  .someClass {
     .someDeeperClass {
       @include background-clip(rect(0px,50px,200px,0px));
       @include rotate(-25deg);
     }
  }
}

Would result in:

#someId {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#someId .someClass .someDeeperClass {
  -webkit-background-clip: rect(0px, 50px, 200px, 0px);
  -moz-background-clip: rect(0px, 50px, 200px, 0px);
  background-clip: rect(0px, 50px, 200px, 0px);
  -webkit-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

It really is very simple once you have messed around with it for an hour or so, and the code that comes out of it feels refreshingly clean!

If any of this Sass stuff sounds like fun, I suggest checking out the following article by Adam Stacoviak on The Sass Way, and checking out Chris Coyier's Screencast on the topic.

Learning Resources

Hello again, everybody! It's been a while, but I hope this post will make up for the hiatus. Work has been busy, and the Summer semester just started back up after a one-week break. I've been around, though!

I felt that it would be beneficial to everyone if I could share some resources for developers like myself. I've begun collecting quite a few resources which I feel would be useful to folks who are trying to keep current in this fast-moving profession that we have found ourselves attracted to.

They will be organized into categories, and I will have the free services up top, and the paid ones down below the free ones. I will move this to its own page soon and keep it updated there to the best of my ability. Enjoy! Let me know if you have anything that should be added to this list.

Interactive Learning

Codecademy

This is the classic that has to be on here. I personally got started here with the basic JavaScript and PHP tutorials. It is a bit limited in it's selection, however, it is a very valuable resource for new programmers, or those who are interested in a new language.

NodeSchool

This is a wonderful site for learning Node JS. I haven't made it very far in, however, I really like the way it is presented, and definitely recommend it. You can download a lesson, and it will be added to your Path, so you can play it using your command line. Also provides lessons for Functional JavaScript programming, and Git basics.

CheckIO

This is a fancy little site where one can learn or polish their Python skills in exercises set in a virtual world. You can compete with others, and categorize your solutions so that others can check them out. The sign-up includes a brief JavaScript -> Python comparison for those who are proficient in JavaScript but do not know Python. I believe they plan to add more comparison guides in the future.

SQLZOO

Learn SQL with short interactive lessons. A concept will be explained, then shown to you, and then you will be asked to modify the pre-written statement to retrieve a different result. Simple, yet good if you need to brush up on your SQL.

CodeCombat

Learn general programming ideas and constructs through an interactive game. I have not proceeded far in this game, nor have I tried the multiplayer, so I do not have much else to say. Give it a shot!

Link Hubs

Become A Programmer, Motherf@#$er

A Samuel L. Jackson inspired hub of links relating to programming. From Languages, to Frameworks, to Tools, to language-agnostic information about programming, this sure if a motherload of good links. 

Bentobox.io

Another excellent link hub with sites that will dive into programming languages. This is a great one. Has information on many topics from the entire stack. 

Teach Yourself To Code
This is a great site which links to several sources on how to program in specific languages or frameworks. Some of these are paid, however, the paid ones are denoted by a dollar sign.

Frontend Feeds

This GitHub repo holds links to tons of RSS and Podcast feeds which are targeted towards Front-end developers. Worth a good check-out. I follow quite a few of these with my RSS and Podcast aggregators.

GitBook

A collection of free books which explore various programming topics. I haven't extensively looked into this one, but it seems like a valuable resource.

Free Programming Books

This is another one which is hosted on GitHub. Quite a few books are on here. Once, again, this is getting into territory that I simply haven't had time to extensively test, however, I am sure that these books are wonderful.

Learn Programming The Hard Way

This is a wonderful site which is dedicated to teaching you to code 'the hard way'. It's not really that hard. In fact, it guides you just enough while making you do the exercises. Definitely check it out. The books are paid books, but there is a free alternative if you do not wish to purchase the books.

Free Internet Services

Not so much specifically about programming (there are quite a few useful programming links), but a good resource nonetheless. 

Weekly E-mail Newsletters

JavaScript Weekly

To say that this is just a JavaScript publication would be severely understating it. There are also Ruby, Postgres, Bitcoin, and more! Right to your inbox each week.

Web Design Weekly

Very similar to JavaScript Weekly, but curated by different folks. Also worth a subscription!

Useful Tools

TLDR Legal

Legal licenses dumbed down so they can easily be understood. I still recommend reading the licenses, but this is a good start if you are not fluent in Legalese.

Icon Finder

This is a good resource for free icons. 

Interesting Articles

Programming Sucks

A very true and satirical look at programming. Well worth the read.

Good Paid Services

Pluralsight

I had the pleasure of checking this site out a while back and loved it a lot. They have a ton of video content. I consider this one to be well worth a check out. They offer a free trial before you buy if you are unsure about the content.

Lynda

A well known video site where one can learn anything from Photoshop to PHP. Check this one out if you have a few bucks to drop for a subscription. 

CodeSchool

This is another video site in a similar vein to Pluralsight and Lynda, however, this one has interactive sections between videos, which I found to really help in hammering the knowledge into your memory. 

Web 3.0 And Standards

I'm sure that most of us remember the marketing storm that was Web 2.0, and I think that just about everyone can agree that we have reached the point in time where some sites take user input and output it as content in some way or another, and some sites just don't. And that is fine. Not every site needs 'Web 2.0'. So after hearing the term Web 3.0 tossed around here and there, I was prompted to look into what exactly it even means.

Web 3.0 isn't here yet, but it has been loosely defined as the point in time which the web has become so semantic that humans and computers can both read the same code and make quick and complete sense of it. This would include the wide-spread acceptance and usage of a solid standard. Although we have web standards bodies such as the W3C, and communities such as GitHub who get together and work in a similar standard way, we still haven't quite reached the point at which everyone is operating in the same basic way.

By this definition, marketing companies will weep, because Web 3.0 will not be the marketing phenomenon that Web 2.0 was. There are several people and articles which suggest different things about what Web 3.0 is, but I feel as though this definition is concise, and doesn't hinge on first having a definition of Web 2.0, which is good because many people still cannot agree upon what Web 2.0 even is. So after hearing the term Web 3.0 tossed around here and there, I was prompted to look into what exactly it even means.

I personally think it would be wonderful if we could reach this point. Education on topics would be much easier to obtain without the arguments about whether element X belongs above or below element Y, and why employing method Z makes you [insert insulting name here]. There is a wide array of arguments like this, and it seems as though any sort of tutorial or video about 'cutting-edge' topics (and I use that term lightly, because what is cutting-edge anyway?) has the potential to turn into an abstract standards debate at the drop of a hat. And to be quite honest, I kind of enjoy these debates, because it is an opportunity to hear opposing points of view, and to truly understand what other folks are thinking about these topics. But at the same time, I feel like debates like this can be compared to debates about support for Internet Explorer. We can stay at the point where we are not quite sure what we are going to do about it for a while, but eventually we are just going to have to make a decision about the TRUE right way to do things, or nothing will ever get done. If the right way is to put that element X below element Y, and everyone can get behind that, then that is the way it will be done.

And that is my understanding of what Web 3.0 will be. I think that we are slowly making our way towards that point, but there are just so many standards out there. Progressive enhancement, mobile first, offline first, open-source only, responsive; And those are just the ones that I can think of in less than 15 seconds. Granted, the majority of those play well together. For example, you can have a mobile-first web application which employs progressive enhancement. That is just the way it all works. But there is a certain point where people don't quite agree on the 'right' way, and that is where we are at this point in time.

With so many standards, which ones will it boil down to? Who will be the last standard standing, so to speak? Maybe it doesn't have to be just one. The important thing is that there ARE standards. That we aren't just jumping head-first into something, with every individual developer writing code completely different at a fundamental level. By no means do I discourage people from jumping into a new programming language, library, framework, and so on. I just want to express the importance of accepting some sort of standard before getting too far into these things. Of course you don't need to sit down and study these standards for a week or two, and them employ them militantly (although I'm sure some people would love it if this was a requirement), but at least be familiar with the common standards, and be prepared to change your ways if a job requires it.

When it all comes down to it, we as developers, are a community. At some point someone will likely have to read your code. We go to English classes (or Spanish, or Italian, or...) to learn the current standards for communication in our language. That doesn't mean that everyone has to speak in the same exact manner, and read through hundreds of pages of language constructs in order to have a conversation. We all take it and adapt it a little bit differently than each other, and that is beautiful. That is the way programming should be. Everyone knows the basic idea and the basic standards, and can make tiny tweaks to it in order to make it work better for them, but fundamentally changing the way the code it written does nothing but make other developers unhappy.

This isn't meant to sound preachy, because I myself am quite guilty of misusing language constructs, or making up my own "awesome" way to write some language. But when it all comes down to it, it is just confusing, and you will either leave a big mess for someone else, or end up having to rewrite or heavily comment your code. To bring a little bit of anecdotal evidence into this, I decided it would be really cool if I did a bunch of complex Ajax calls and pulled data from different locations, and used functions in PHP which match functions in JavaScript in order to make a class page for one of my JavaScript programming classes a little bit 'better'. This is all fine and dandy, until my Professor approached me after class one evening and explained to me that he had no idea what I was doing with my site, because it was so non-standard and uncommented that it is just a slew of needlessly complex JavaScript. Thankfully my Professor was a very nice fellow, and told me that if I comment it well, and he can make sense of it, he would still grade it. So by no means am I exempt from this, and I feel as though a lot of us go through this stage of their early development years where they think it would be really cool if their code was completely different from everyone else's.

All I have to say is this: Standards are standard for a reason.

I would love to hear comments or stories from anyone who might be reading this! I know it go a little bit long-winded and off-topic, and if anyone actually read through all of this -- kudos to you! I hope it didn't sound 'preachy' at any point.

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.

Javascript Shorthand Method Usage

Hello, everybody;

This is not entirely new information, however, it was new to myself and many others. I recently discovered that in JavaScript, one can call methods on items from the DOM without first declaring them as a variable with the standard

'var varName = document.getElementById("someElement");'

.

For example assuming you had a paragraph tag with the id of 'someElement', the following JavaScript code:

someElement.innerHTML="I am some new text";

Accomplishes the same result as:

var someElement = document.getElementById("someElement");
someElement.innerHTML="I am some new text";

However, as with many things, just because it works doesn't mean it should be done. The small amount of information I was able to acquire about this strange occurrence stated that it is bad practice, and should be avoided, and relying on the browser to create your variables is never a good idea. I have verified that this works on Internet Explorer and Chrome, but have not checked Firefox/Safari/Opera etc.

So don't try this at home, folks. (Or do; just not in a live/professional setting)

My Plans for This Blog

Hello to everyone who may be reading this! What I plan to use this blog for is checking out new web technologies as giving my opinion on its strengths, weaknesses, and so on. In a way, it is as much of a sly way to motivate myself to investigate these budding technologies as it is to share my thoughts about them.

I have recently been overloaded with course work, primarily because I let myself get a bit behind in my textbook in one of my courses. Because of this, as well as other life changes, I have not actually had time to relax and read my library books ("Ajax Bible" by Steven Holzner, and "PHP & MySQL: The Missing Manual" by Brett McLaughlin), let alone come on here to post. On top of everything, I was recently hired as a web development intern, which is exciting, but also sure to be time consuming. All in all I am stoked to begin work there, though.

I will be attending Inter-Op 2014 during the first week of April, and I am sure I will have plenty to report about after having attended that.

Due to all of this, I hate to disappoint anyone, but this blog is still not quite officially 'started'. However, I will do my best to check out at least one technology the next time I have a chance!

Please bear with me and stay tuned! I hope to have plenty of interesting things to see here soon.

Starting Things Off...

Hello, and welcome to anyone who may be reading this. You might be here because you are interested in the same things I am, or you may be here because you randomly stumbled across this blog while browsing the depths of the net. Regardless of how you landed in this particular part of the internet; Welcome!

I suppose I should begin with a little bit of background about myself. I am an aspiring web developer with my sights set on doing freelance web programming jobs for clients. I have been working with languages such as PHP and JavaScript for roughly 2 years now, and I enjoy it to a great degree. I used to have a web site (one of those free sites you get from your ISP, hah) and write some blog content when I was a youngster. None of that ever got anywhere and it lacked any sort of visual or functional spark that would draw anyone in. I would mostly just go on sites to get free JavaScript snippets and paste them into my site to see what would happen.

Fast forward by a little less than a decade, and I had forgotten I even enjoyed web things. I went into college with no particular direction, knowing only that I didn't want to live the rest of my life on minimum wage. I took a music class my first semester, thinking that I wanted to be a music producer, but ended up not enjoying it at all. Next semester, I took a few classes in the Graphics program, because I thought I wanted to be a 3D Artist. Long story short; I didn't want to be one after all.

However, one of the requirements to become a 3D Artist was a Web Design class, which I soon discovered that I had an actual interest in, and now here I am today. I spend a good part of my spare time learning and expanding my knowledge with these programming languages and techniques, and when I run into a problem, I gravitate toward writing a program to accomplish the task. I consider PHP to be my "language of choice", because that is what I would call the first real programming language I learned; after HTML and CSS of course, but those are required to do anything on the web anyway, so I don't count them in this situation. 

But anyway, this has gone on long enough. I hope that this blog can get off the ground, or at least function as a place where I can keep a running log of things that I learn, or technologies I find interesting, and so on. 

After writing that out, I am actually quite curious to hear how other folks in the industry found out that they were interested in working with web. Regardless of if it is web programming, or design or UX, or anything else, I would love to hear it. 

Even if you are not interested in any of this stuff, and you somehow stumbled upon this by accident, I would love to hear how you got your start in whatever it is that you do!