Author Archives: Jesse Price

About Jesse Price

Hello and welcome to my personal blog and website. Here you can find all about my web development history, personal ventures, client portfolios, and much more. Words of Wisdom: "Programmers are in a race with the Universe to create bigger and better idiot-proof programs, while the Universe is trying to create bigger and better idiots. So far the Universe is winning." - Rich Cook

Developing Sites for the Absence of JavaScript

This is a topic that is highly debated in the web development industry. The transition of Web 1.0 to 2.0 has caused a lot of confusion in regards to developing websites for the absence of JavaScript. Most modern day websites will simply not work since JavaScript was highly depended on during the development life cycle. With that said, here are a list of pros and cons which can help you decide if JavaScript should be highly depended on.

Pros of JavaScript Dependency

  • JavaScript can help to increase RAD (Rapid Application Development).
  • 98% of visitors have JavaScript enabled according to http://developer.yahoo.com/blogs/ydn/many-users-javascript-disabled-14121.html
  • Frontend developers are able to contribute more to the project.
  • JavaScript hacks to fix things for CSS. Increased development. Kinda lazy, but it saves time so I have to put it down as a pro.
  • JavaScript might help reduce the bandwidth however those larger JS files must get downloaded anyway.

Cons of JavaScript Dependency

  • Most importantly, developers cannot control how browsers are evolving especially these days with so many flavors such as webkit, mozilla, msie, etc. When an update get’s pushed to the operating system and or the browser level, this increases the chances of bugs and JavaScript will not work as designed. Many ecommerce sites would lose thousands to millions of dollars in revenue depending on how quickly this can be fixed. Take a look at Amazon.com with JavaScript disabled. Going back to what I’ve mentioned in the pros list, those 98% of visitors will not have a working website if issues occurred. I’ve spent countless hours fixing JavaScript issues due to this exact reason.
  • Proxies are becoming more and more popular especially with the latest reports on the Government spying on internet activity and the increase of zero day exploits. Most web proxies disable JavaScript such as HideMyAss.com so the application will not work if you need to increase your browsing security by using a proxy. Again, proxies are becoming more and more popular due to all the attacks on the net.
  • Design that could be done with all CSS and HTML are being ignored and depended on with JavaScript to fix them.
  • A lot of applications floating on the net have vulnerabilities because JavaScript was the only sanitation and validation method. The backend developer must have been lazy and didn’t add in the necessary checks.

Personal Advice

Some may hate it, some may flame and some may cry about it, but… Let’s go back to the Web 1.0 days and start developing website without the dependency of JavaScript. It’s seriously not that hard. In fact, it should be easier! Removing a single technology like JavaScript can actually increase application development since it weeds out potential bugs and other issues that may be encountered. Create the application so it performs the normal HTTP requests, form posts, etc. Get rid of the AJAX as a dependency when developing new sites, add it in after the site works like a normal website should. This will assure that backend validation checks and loop holes are secure where it matters the most.

Redesigning the visual look and feel of the website has become much easier. Lets rip out all the JavaScript and change the visual effects. The client dislikes what he sees, well… at least we can continue to login, submit forms, and have a functional website still. Frontend development is extremely tedious especially when it’s the part of the application everyone is looking at. “Can you move that over 1 more pixel to the left?”… Well instead of worrying about this 1 damn pixel, at least the application is functional and working. stdin, stdout… Since the design level can be very tedious, this will save some time by slashing visual enhancements so the system by itself (without js) can get to market much quicker. Once the application is developed without JavaScript, the frontend developer has a much easier time planning on how the visual enhancements are to be made rather than stuck on that 1 pixel. Commonalities of the UI can be abstract etc.

Some developers may claim having to maintain more than 1 application. This is not necessarily true if JavaScript is added after the normal backend development. Some applications are written with the absence of JavaScript such as Amazon.com. Disable JavaScript, inspect the source, you will see that there’s JS included all over however the browser simply ignores them. This same concept may occur from a single error that caused all JavaScript to break… This error can be introduced by browser updates, operating system updates, or simply a bad push to production. Some companies force their backend developers to develop with JavaScript turned off to completely separate frontend from backend.

Use feature detection such as Modernizr since browsers are evolving so much that simple browser and version checks are a thing of the past. No wonder why jQuery had deprecated the $.browser object. Really, do you really want to keep track of which browser at which version has a specific event such as mouseenter and mouseleave? Modernizr gets rid of all the browser and version confusion allowing features to degrade gracefully. It’s lead by Paul Irish a frontend guru who works at Google and a huge contributor to open source development, a highly respected person. I’ve been implementing this awesome software in many of my projects lately and have nothing but great things to say about it.

If you find that your application fully depends on JavaScript 100%, i.e. everything is AJAX and all the links are hashed (if there are even anchors or href’s), all stdout is JSON or XML, nothing works with the absence of JS. This means the backend system was designed and dictated by a frontend developer. Now, if you can right click and open in new tab… that’s harmony between the backend and frontend… increase the user experience by providing them additional ways to multitask! The very popular Twitter Bootstrap updated their design to allow href links and using JS to override the default behavior so it will work with JS disabled (data-target attribute)… this feature was highly requested and for a good reason… I could get into all sorts of user experience designs such as the back and forward buttons on the browser and using browser history push states etc. but that will be saved for another post. I think I’ve ranted enough…

Conclusion

JavaScript should not be used to “program” (script) your web application. It should be used as an enhancement to the application, not a dependency. Let the backend do the programming and the frontend do the visual enhancements. With this approach you may find that the application is a lot more modular and maintainable for the long term. The application will also serve to those 2% of visitors with JavaScript disabled as well as continue to serve to those 98% when JavaScript stops working from the problems as stated earlier in this post. If JavaScript is 100% a dependency for a specific part of the application that depends on visual click, drag, features, a nice noscript tag should be used to alert visitors that their experience will be enhanced with turning it on. At least they will not have a blank page or a infinite loader displayed. Increase your defensive coding by developing sites with the absence of JavaScript.

Sure, we’ve all developed applications without the absence of JS in mind… I don’t want to sound like a hypocrite just this is what I’ve found to be more elegant. Yes, I’ve developed with JavaScript highly depended on and I’ve learned from my mistakes. Anyway, my blog is functional without JS. If you disable it, you won’t see the AJAX cube feature, the homepage slider, however you will still be able to read my blog. That is the entire point of this post after all.

We can’t control how and when browsers are updated.

5307769459_e95f7cdc0b_b

My Ultimate Workstation and Gaming PC Build

I have finally completed my workstation / gaming pc build… …at least for the moment as technology is constantly changing.  I’ve always assembled my own custom builds since I hate having manufacturer specific software that comes bloated with pre-installed software.

Computer Specs

  • ASUS M4A89GTD PRO/USB3 Extreme Mobo (first usb3 mobo!)
  • AMD Phenom 1090T Black Hex Core OC 3.8 ghz Turbo Unlocker @ 4.0 ghz
  • 8 GB DDR3 Corsair XMS3 1600 RAM
  • EVGA NVIDIA GeForce GTX 470 Superclocked
  • EK-FC470 GTX Water Block
  • Primoflex Red UV 7/16″ Tubing
  • Raidmax 950 Watt PSU
  • 1 tb Western Digital Caviar Black SATA II 6gb
  • 500 gb Western Digital Caviar Black SATA II 3gb
  • 64 gb ADATA Solid State Drive (system)
  • XSPC Rasa 750 Water Cooling System
  • Black Ice GT Stealth Dual 140mm Radiator
  • Mobile Disk 3.5″ Hot Swap External Hard Disk Drive 320 gb
  • Corsair CMXAF2 RAM Cooler
  • Cooler Master Centurion Mid ATX Case
  • NMedia PC LCD Fan Controller / Card Reader
  • Dual Boot Windows 7 Professional and Ubuntu 10.10 Maverick 11.04 Natty Narwhal
  • 2 x 22″ LCD Monitors

I got the AMD brand processor since I figured that 3 out of the 5 fastest super computers in the world run AMD, they must be doing something right.  As much as I favor Intel chipsets, AMD shaved off a nice $700 bones from the best i7 extreme hex core processor. The 1090T Black is comparable to the i7 extreme in many benchmark tests where the AMD had surprisingly stomped the Intel in a few tests such as 3D.  The insane overclocking from 3.2ghz to 4.0 ghz makes this CPU perform better than the i7 extreme.  The CPU and Mobo combo deal from Newegg was also a killer deal that I could not pass up.  Having one of the first USB3 supporting boards made the overall deal look very juicy. So here it is!

Here are some of the few pictures I have. More to come.
[flickr album=72157625710459996 num=20 size=Square]

OSX Navigation Style for Ubuntu

Mac OSX Style Navigation Task Bar for Ubuntu Using Avant Window Navigator

Ok, I got fed up with the standard gnome task bar and decided to give the Mac OSX style task bar a try.  Linux can handle a ton of running processes and applications (I mean a SH!T load) .  So with more applications running, I needed more real estate for my task bar.  Yeah, yeah, I know, this hardcore Linux fanboy decides to use the Mac OSX look and feel?!  I’ll say it again, “I hate Macs and Windows”.  BUT, I do love the simplicity of the icon style task bar that both Windows and Mac have incorporated with the recent desktop GUI’s rather than trying to hunt the 50 pixel wide task bar text buttons.  I decided that I will download the “Avant Window Navigator” and alter some settings.  There are other articles out there on how to configure this application however I was unable to find documentation to create my own custom setting with the gnome panel on the top and the OSX style task bar on the bottom.  So away we go…

Screen shot of the expected outcome.
Mac OSX Navigation for Ubuntu

Adding the OSX Style Navigation Task Bar

First go to Application->Ubuntu Software Center and search for “Avant Window Manager”, click the install button.  After install, I recommend also downloading the “Ubuntu Tweak” application as well (it will make things much easier to manage).

After both applications are installed, open up your terminal and type in:

This will bring up the configuration editor for gnome. In the left hand pane, you will now want to navigate to the desktop->gnome->session->required_components. Now, in the right hand pane you will notice there are a few records. Click on the “panel” record’s value and replace “gnome-panel” with “avant-window-navigator” (don’t add the quotes).

With the previous steps completed, you will now want to go to applications->system tools->ubuntu tweak.  In the left hand pane, you will now see there are groups, find the “Startup” group and click “session control” sub category.  Make sure the panel setting contains the value “avant-window-navigator” (without quotes).  This will ensure that AWN will automatically start when a user logs in.

In order to remove the bottom task bar of gnome panel, I would right click on the bar and click delete from the context menu.  Now click on the “Auto Start Programs” from the left pane in ubuntu tweak and click the “Add” button located in the top right corner of the window.  Another window will open to add the new entry.  I named mine “GNOME Panel *Custom” so I remember that I added that entry.  In the command field, add “gnome-panel” so we can almost lazy load this application on startup to preserve the top gnome panel navigation.  I also added a comment in regards to what I did so I can revert changes with ease.

Now, moment of truth… Log out of your session and log back in.  Your top gnome panel should remain untouched and intact while the bottom panel has been replaced by the Avant Window Navigator!  You can now customize the look and feel of AWN.  I decided to go with the 3d style at 24 pixels.  I also added a bunch of cool widgets to my bottom panel and the workspaces to the top panel, center aligned… The rest is now all up to you.

Enjoy!

jQuery Slide to Plugin

jQuery Slide To Plugin

The slide to jQuery plugin makes it so your web pages slide to the anchor rather than the traditional “page jump” to a specific anchor.  I wrote a very light weight plugin which is very easy to install and configure.

*Disclaimer, this plugin has been designed for HTML5 doctypes. I don’t want an earful from you saying how you got yelled at by the w3c validator!

The Plugin

Slide to Example 1!

This example will make all anchor links that contain the leading #hash style linking.  Normally, the links would jump to another anchor pairing the #name to name attribute of the target anchor.  My script takes this single page linking and adds a very neat web 2.0 style sliding scroll effect.

Slide to Example 2!

This example demonstrates how you can use jQuery selectors and simply add a target to the selected elements by the target option.

The target option changes how fast the page slides. You can user ‘fast’, ‘slow’, ‘medium’, or microseconds.

Slide Back to Top

I added a target element to the top of the document.

It’s very easy to invoke.  Feel free to leave feedback.

Download “jQuery Slide To” Plugin

Download jquery.slideto.js Version: 1.1 Size: (1.4 kB)

 

Money Online

Back to Generating Income Online

It has been quite a few years since I was making some extra cash from displaying advertisements on my websites.  My first few websites that had introduced me to making some solid cash online were msmods.com, iconscripts.com and plusfriends.net.  These websites were related to the whole MySpace niche and helped generate over 160 dollars per week in advertisements alone. Msmods.com was my best traffic generating website that had earned over 20,000 impressions per day which was equivalent to 20 – 30 dollars per day.  The money was awesome especially being a poor college student having to pay for education out of pocket.  I remember not having enough money to buy a math book and I received an adsense direct deposit one day that made it possible to purchase the book I needed for class (thank you Google!).  I reminiscence the good old days and wished I had the web development knowledge I possess now back then.

Changes I Have Noticed Over the Years

Adsense payouts and CPM earnings have decreased dramatically.  It has become almost impossible right now to make a solid earning from this advertisement network just because the depreciated value of CPM and CPC.  I remember earning over $3.50 cents from a single click 3 years ago and now I would be lucky to earn only a few cents.  I keep telling myself that it is the economy that had depreciated the value however understanding there are over millions of websites now than there had been 3 years ago could make a huge impact on the pay outs meaning there are more web spaces that are marketing versus websites that are paying for marketing.  I remember having CPX Interactive as an advertisement network and they only excepted websites that had a lot of unique visitors.  I had earned over 50 dollars from CPM in a single week from this publishing network.  It’s amazing how only a few years can have a great impact on the value of advertisements.

My Battle Getting Back In

I’ve always dreamed about being my own boss, working from home (in my pajamas :) ) and having a website that could help me retire early.  It’s motivation that keeps my spirits up and force me to keep up the hard work.  I don’t mind working extra hard hours each day since it keeps me up to date with the latest web technologies.  I love learning about web development.  It is my pride therefore I will use it to my advantage in creating my new successful ventures.  I have promised myself to stop worrying about the potential monetary earnings from displaying ads, rather focus on creating some usable applications that are more powerful and have an impact on certain niches.  I have also decided to work on smaller niches rather than the “go big or go home” attitude that will simply be overwhelming and too much work to keep up with.  I’m a married man now and do not have the time that I use to in creating sites that only generate over 160 dollars per week.  I’d rather create an application that becomes viral in hopes to generate over thousands per week.

My business plan is to create small niche websites such as CRM (customer relationship management systems) that actually have a recurring payments system rather than hoping for visitors to click on google links.  My most successful website that had the highest income rate was Plusfriends.net where I had sold an actual service through a paypal checkout which in return had earned over 50 dollars per week as a steady income.  Through trial and error, I have experienced that selling a service will be more rewarding in the long haul.

My Plans for a Successful Website Business Model

I have learned that websites that auto generate unique content such as community sites like a forum or blog can generate the most income.  Elegant web applications that incorporate a recurring service fee can also be very successful. I have plans to create some new web application that hopefully become viral and an overall success.  It’s a risk that every entrepreneur makes, investing time and energy in “chasing the dollar”.  I have also planned to work even harder and crank out some awesome code to finally find homes on the web for all my domains I have lingering in my godaddy domain manager (and there are over 21 domains).  If I create some usable small niche websites that can generate over 5,000 unique visitors each, that is as good as having one website that generates over 100,000 unique visitors per day.

Working with My Wife to Create a Family Business

My wife hates the fact that I am so motivated and the fact that I’m constantly in front my monitors each day.  I seriously work well over 12 hours per day (yes per day) combining my full time job at BookIt.com and my personal projects.  Don’t get me wrong, I love my wife to no end and always find time to spend with her.  With all that said, we have decided to create a website business together in a niche she knows extremely well.  With her efforts in helping to create and maintain a new usable web application online, we can earn extra income from that niche even if it generates only 5 – 10 thousand dollars annually.  That is 5 – 10 thousand dollars extra we could be earning each year.

My Conclusion

Website businesses are great entities used to bring in extra income (even if it’s an additional several thousand dollars) especially since the only investment would be time rather than shelling over hundred thousands of dollars to start up a franchise.  It is definitely the true limited liability way to start any business.  Also, being a professional web applications developer makes it much easier to work with :) (you don’t have to pay someone to create your online software)… Any business man will tell you to use the resources you have and with that said, I am motivated in creating my new ventures!  Wish me luck!

Website Scraping

Site Scrapping Does Not Work

I’ve been receiving a lot of ping backs from other sites out there and most of them are scrapper sites.  I took a look at these websites and realized they have stolen over hundreds of pages and posts that other people have taken the time to write and publish.  With that said, I took a look at these site’s Google PageRank and found them all to be nice fat 0′s.  This is why duplicate content will not make your website do well in Google’s eyes.  Several years ago when the internet was young, site scrapping did work since search engines didn’t have the algorithm to check and see if the content could be flagged as duplicate.  Search engines and directories have come a long way and with millions more sites on the internet it is important that clean, original, and quality content is showcased more than already showcased content.  If you scrap content, all that content you scrap will be added to the “back burner”…

I Thought Content is King?

The phrase “Content is King” seems to be interpreted incorrectly by many “money chasers” on the internet.   I use the term “money chaser” since there are a lot of bloggers with the main focus of generating content for income where they are willing to set up some unethical system or approach to automatically generate content without writing their own.  This is definitely the incorrect approach.  If you want to gain traffic, add a little more TLC to your posts and articles.  I’ve experienced “Unique Quality Content is King” where quality will do greater than quantity in the long run.  Always remember, clean quality content will do much greater than stolen content, it’s common sense…

The Truth to Generating Quality Traffic

Quality traffic is as good as quality content.  If you want to target your visitors to a certain topic, then you need quality content to target them with or else your bounce rate will increase.  All these factors are important especially since it is used to weight your ranking on different search terms.  Another great way to generate quality traffic is by small niche.  If you have a website that focuses in on a certain topic rather than the broader approach, you will have higher rankings than other sites that use the all or nothing approach.  A website that specializes in backgrounds for mobile phones will do better in that area rather than a site that is simply backgrounds.  Or, even a recipe site that specializes in Indian food recipes rather than all recipes.  I’ve seen plenty of small niche websites that do amazing and convert a lot better.  Why go small niche?  The more narrow you niche out, the easier it is to create the quality content.  Imagine having over hundreds of categories versus having only 10 categories to work with.  As a solo editor, it is much easier to start off small rather than growing to big quick.  My recommendation for those looking into creating a new website is to go the small niche route, you will convert hell of a lot easier than trying to dominate an entire market.

“Do what you love and you will never work another day in your life.”

Tag Links

Creating Tag Links from a Comma Delimited String

In this code snippet you will learn how to create tag links in PHP. Many websites or let’s say Web 2.0 sites use a lot of so called “tags” to create a relevant search based on keywords. I find the most efficient way to do this is to store the tags as a simple comma delimited string in a Varchar field of a database table per record / row. In this example I assume you already know how to query a database to return a simple result set. This example simply provides the string manipulation in PHP…

The above should output your comma delimited string into clickable tag links. If you want to get more creative, you can create a styled out tag cloud that alters the font size based on keyword density. Hopefully I can find some extra time to create a tutorial extending this one.

Enjoy!