Tag Archives: web development

Executive Summary: Hybrid IT and Cloud Computing

cloud-computing

Overview

Cloud computing is simply the consolidation and abstraction of previous disparate computing infrastructure. In the past computing infrastructure and servers for web applications, web sites, databases, and more had to be purchased and managed in an in-house data center. This places a heavy burden the upfront cost of IT projects. Cloud computing changes this and puts the control back in the hands of creative innovators.

Positives

  • Agility
  • Scalability
  • Flexibility

Negatives

  • Cost surprises
  • Implementation complexity
  • Staff disruption

Business Impact

Cloud computing was initially pioneered by internet retailing giant Amazon.com. In 2006 they started selling spare computing cycles in their data-centers with the launch of Amazon Web Services. This innovation has allowed start-ups to rapidly prototype and deploy ideas to the web by essentially renting computing time in a cloud provider’s data-center. By only paying for what is needed new ideas and products could be quickly scaled if successful or abandoned if not. Managers may leverage iterative operational feedback without the upfront investment in costly IT infrastructure. Economies of scale is leverage on the energy consumption and sustainability front. As usage changes resources may be elastically scaled based on need. Applications based in India may use the same infrastructure used in America while the later sleeps, and vice versa.

Recommendation

There are many advantages to cloud computing, but it is no panacea. The overall complexity of an IT system needs to be taken into account before a decision is made to move it up to a cloud provider. Depending on the industry regulations may need to be considered with respect to IT infrastructure. To save money it’s important to ensure that you have done a complete total cost comparison. Cloud computing is not always cheaper. Consideration of in-house IT staff resources should be considered to avoid stress related to redundancies. An incremental or piece-meal migration strategy may be the best option for most to avoid costly implementation mistakes. Leveraging a competent IT department is the key to success when formulating and implementing a cloud strategy. Tread carefully and wisely to succeed.

Book Review – Clout: the Art and Science of Influential Web Content

As a web developer, I don’t get very close to the content. In fact, over the years, I’ve become blind to it when coding clients’ websites. It might as well be “lorum ipsum” gibberish like that found on Microsoft Word templates. Granted without this content there would be no websites for me to work on. Well…at least there shouldn't be. There are many sites out there that put the technical effort into the coding and treat the content as an afterthought. Content should in fact come first, before coding. This requires developing a proper content strategy and a plan to implement it.

In Clout, the author Colleen Jones concisely outlines the methods and techniques that will aid the development of a successful Content Strategy. There are numerous real-world examples that support the core principles of context, rhetoric and psychology. She advises content creators to turn off their fire hose of information, suggesting effective, proven tools to reach people. These techniques are proven to filter out the static.

This book is a top resource regarding the implementation of content strategy. Clients who are inexperienced or non-technical usually don’t understand why developers can’t make the gibberish better. Content just isn’t our forte. Clout is a well-researched and authoritative source for developers who want to help their clients make content work.

You can find out more about Colleen Jones at her blog, Winning Content. She also is runs a boutique consultancy, Content Science, that practices what she preaches for clients such as InterContinental Hotels Group, Centers for Disease Control and Prevention and Footsmart, among others.

ASP.NET and HTML5 Local Storage

I came across an informative blog post today by Stephen Walther that talks about ASP.NET and HTML5 local storage. It explains this exciting feature by discussing details relating to client/server concurrency, difference between local storage and cookies, intracting with WCF and more. If you are an ASP.NET developer who wants to stay on top of things go check it out.

Fun with CSS Sprites

Mario sprite from Super Mario Brothers

There's been a lot lately of talk in web development circles about CSS sprites lately. Using them dramatically increases the speed of downloading a webpage with several background images by reducing the amount of HTTP requests the client browser has to make. This is accomplished by consolidating each individual image into a single image. Once consolidated the background-position, height and width CSS properties are tweaked to show only the appropriate part of image. Check out articles from A List Apart and Smashing Magazine for more information and tutorials.

The fun was testing the before and after using YSlow in Firebug. The test subject was a client's website where there were four tabs with different images for three states. The CSS Sprite Generator from Project Fondue can help with the tedious task of making the sprite. The original cluster of transparent pings totaled 6.77 KB which consolidated to 3.83 KB. Combine that with the reduced HTTP requests and that's quite a savings.

Before making the sprite Yslow reports a score of 83. After making the sprite bumped that score up to 88. The total page size was reduced by 43K. This test seems to indicate it'll be worthwhile to make more sprites on this site.

Before

After

 

HTML5: Periodic Table of the Elements

There are a lot of new elements in HTML5 and it may be confusing what tags are included, added, or removed and what they are for. A coworker today found the Periodic Table of the Elements from Josh Duck. I like it because it groups the major elements making them easier to conceptualize. Each element contains a concise summary of the purpose of the tags and the colors are keys to the following categories:

  • Root elements
  • Metadata and scripting
  • Embedding content
  • Text-level semantics (Web 3.0, here we come)
  • Grouping Content
  • Forms
  • Document sections
  • Tabular data
  • Interactive elements

Periodic table of elements

Josh Duck is an Australian LAMP developer working in London. Nice work!

JavaScript and CSS Minification and Optimization with Visual Studio and YUI Compressor

About a year and a half ago I got very interested in JavaScript optimization. This interest was born after playing with YSlow for Firebug (Firefox). I noticed that my customer’s homepage was requiring my browser to download 2 megabytes of Images, HTML, CSS, and JavaScript. Having gotten my start in the days of modems I was aghast at the bandwidth requirements of this huge site. At the time this customer was receiving millions of hits a day due to a recent influenza outbreak. Do the math, that’s a lot of data.

YSlow recommended that the JavaScript and CSS be minified. I’d see this before with jQuery and other open source JavaScript examples. Minification is essentially a way to remove unnecessary characters and white space from the code with the goal of serving the smallest possible file over the wire to the client browser. The problem is this renders code unreadable to developers. I wondered if there was a way Visual Studio could handle this during deployment. Turns out that there is a free add-in for Visual Studio from Microsoft, Visual Studio Web Deployment Projects, which provides more advanced compilation options. The next step was to find code that Web Deployment Projects could use to perform the minification.

The “Y” in YSlow stands first for Yahoo so I went to see what they had to offer. They have open source code know as the YUI Compressor Library available for download that performs JavaScript and CSS minification. The problem for me was the code I needed was written in Java which is not simple to integrate into a Visual Studio build process. Fortunately someone had ported it to C# and thrown it up on CodePlex. It’s currently stable at version 1.4.1.0 and based on version 2.4.2 of the YUI Compressor.

The mix of Web Deployment Projects and YUI Compressor is the most efficient method for me. I don’t have to think about it because it’s integrated to my deployment build process. It provides the flexibility to either minify the files individually or merge them into one large file that my visitors only have to download one.

The customer mentioned at the beginning of this post was able to reduce the size of their JavaScript and CSS by almost 50% (1MB per unique request). This is a simple way to help your servers handle their own pandemic flu outbreak, or “slashdotting”, as efficiently as possible. Your sites will also be much more snappy as browsers are not having to parse unnecessary whitespace, comments, etc. It’s the closest you’ll get to compiling JavaScript and CSS, all for free.

Resources

Example of JavaScript Minification

Before
Javascript before minification

After
Javascript after minification

Example of CSS Minification

Before
CSS before minification

After
CSS after minification

T4 templates Intellisense support in Visual Studio 2010

A couple years ago I started using T4 templates in my Visual Studio projects. They provided me with a quick and efficient way to generate source files (C# and SQL in my case) based on the application’s database schema. T4 is also extremely useful for generating code for ASP.NET MVC (more information below). The problem only problem is that Visual Studio 2010 by default applies no Intellisense or code coloring. This makes it difficult to edit resulting in a wall of code.

T4 code in Visual Studio 2010 without Tangible Engineering extension

This problem was originally solved for me in Visual Studio 2008 in 2009  when I downloaded and eventually purchased the Clarius Visual T4 editor per recommendation by Microsoft.  Clarius stopped developing their T4 Editor plug-in in late 2009 and there is no support for Visual Studio 2010. Last Winter the lack of development made me optimistic that T4 Intellisense would be in Visual Studio 2010. Usually canceling development by a plug-in vendor Clarius indicates that Microsoft is about to make them redundant. Unfortunately this was not the case and I was left without this handy feature in Visual Studio 2010. Fortunately I can across a post today on stackoverflow that offered a FREE solution from Tangible Engineering. I downloaded and installed this software today and Intellisense was back (on most things).

T4 code in Visual Studio 2010 with Tangible Engineering extension

It appears Tangible Engineering (@tangibleeng) has adopted a crack-dealer business model like other plug-in vendors. The FREE version doesn’t support all of the C# language. It does provide enough though for developers to decide if they need to to pay 99.98 USD for the PRO edition. If you use T4 often it’s worth it, I just don’t know if I want to spend $100 again just to have the vendor flake out on the next version of Visual Studio. My hope is that the Visual Studio team bakes this feature into the next version.

Update – 8/26/2010

I appears that Clarius posted some news regarding a Visual Studio 2010 version shortly after this original post.  Read about it over at the Visual T4 blog.

More Information

T4 templates in Visual Studio 2010 require the “T4 Toolbox” available FREE on Codeplex.

HTML5 – Part I of ∞

 

HTML5 code sample

I’ve been reading HTML5: Designing Rich Internet Applications and have been thinking.  Never a good thing in my case.  HTML5 has a lot of potential because it exposes new functionality currently being handled by Javascript.  You loose tags that we all been fond of: <font> **, <b>, <marquee>**, <big>, <center>, <etc>* **.  On the other hand you have gained <datagrid>, <input type=”url”>, <input type=”email”>, <div class=”etc”>.  You should have gotten used to using <strong> in lieu of <b>, but we’ll talk about that one-on-one.

This reading has set me on the mission to discuss the strengths and weaknesses of the version incremented standard (with no space).  These standards have been shaped by the market forces that make up the governing body of the World Wide Web known as the W3C.  The market reality of these corporations have shaped and guided the development of industry standards for years1.  These corporations are responsible for developing software, lower-level coding standards, and training to build webpages, mobile apps, and other software and hardware that interfacing the public with the World Wide Web.

These standards are the bedrock of the what some term “Web 3.0” or “The Semantic Web”.  On this bedrock developers are creating the platforms and applications enabling humanity to consume information that influences society.  I will be discussing this in the coming weeks, months, and years as developers write code taking advantage of HTML5. All you have to do sit back, grab a frosty beverage and tune in after the break.

* Non-standard
** LOLz
1 World Wide Web Consortium (W3C)