A Better Way

Name: Jack

Web Site: http://www.thejacklawson.com

Bio: I'm a C# developer specializing in user interface engineering using jQuery, with a ferocity for learning. When I was 11, I was determined to make Tomb Raider 3 and saved up all of my allowance money for "Learn to Program BASIC". I didn't make it in the game industry, but I did find myself drawn to web development. By the time I was 16, I achieved my goal and began working at Xponex Media as an ASP developer. Throughout my career, I moved to ColdFusion, PHP, and finally ASP.NET with C#. All along the way, I've picked up new skills and techniques, and over the last two years I've found my niche- user interface engineering. I've always had a bit of a knack for design, and being torn between design and development found me knee-deep in CSS and Javascript. It's a place where I can still impact the overall architecture and write C#, but where I can let my inner designer run free.

Posts by Jack:

The Dark Side v2: Visual Studio 2010

August 20th, 2010

Update: I’ve fixed a few things that I missed in VS 2010 – 8/24/10

I’ve recently updated my post (/2008/07/the-dark-side/) with a VS 2010 Dark theme.

Settings File for Visual Studio 2008 /2010










No Comments "

HTML 5: Why and How

August 10th, 2010

HTML has been around for a while- since the original HTML spec designed by Tim Berners-Lee in 1990. In those 20 years, HTML has evolved to include new syntax, tags, and style, both in its original form as well as in branching to create the commonly-used xhtml format.

HTML 5 brings with it changes in syntax, loosens some of the tight restrictions of xhtml strict, and adds new tags, attributes, attribute values, and API methods. The goal of these changes is to make a more semantic, robust internet within which one may create web applications with a focus on accessibility and without the necessity to rely on third-party plugins for interactivity.

Benefits to Upgrading Existing Code

Existing code, written in xhtml transitional, or even HTML 4, works fine today just like any vetted code or framework. However, HTML 5 brings many benefits to both the developer as well as the end user.

• More semantic markup using  tags such as “section”, “aside”, “header”, “footer”, and “nav”
  • Developers can clearly see more clearly what different pieces of code are without having to fully understand a page or control within a website, and are thus less likely to make mistakes
  • Users’ browsing tools gain better ability to, based on content type, perform functions such as zooming or screen-reading, now that they have context
• New media tags such as “video”, “audio”
  • Developers can now assign captions, pictures, and other pieces of useful data to video and audio which helps accessibility as well as gives users more information about the multimedia
  • No more reliance on 3^rd party technologies like Flash and Silverlight for audio and video rendering
  • Support by popular mobile devices such as iPhones, iPads and Android devices
• Metadata
  • Metadata allows developers to classify blocks of markup as a data object. This allows users’ browsers and tools to parse this data; for example, classifying an event and adding that event to a Google calendar. Metadata also influences search results and provides additional information to users, where they can be parsed.
• Standards-setting body is not owned by a profit-driven corporation
  • Adobe could collapse, leaving us stuck with old, dead technology; the W3C is made of representatives from many organizations that acts as a governing body
• Offline storage database allows you to set your application to “offline mode” and work, and save changes later
• Browser-based drag-and-drop API, reducing need for a javascript-based solution
• Geolocation API
• New form input types: date, time, email, url, search, color
  • These will restrict and validate inputs for you (as implemented). Some will be new controls (date, time, and color) that will appear when you click on the input field; some do things like dynamically changing the keyboard layout, based on type, on input devices such as the iPhone and Android phones.
• HTML 5 is designed such that old controls (such as an input with type “color”) work with browsers without HTML 5 support
• HTML 5 is supported in Chrome, FireFox, Safari, Opera, and IE 9
• Some elements will be dropped from the HTML 5 spec. These elements are: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u

Potential Setbacks to Updating Code

• Time used in training developers and updating old code
• No browser support in IE 6-8
  • Can be mitigated by a piece of Javascript code that “creates” the elements within the browser
• Spec is not 100% locked down and may change during browser implementation
  • Browser differences can be mitigated by using a “reset stylesheet” that forces all elements to remain unstyled until specifically styled by the developer the same way differences are fixed in xhtml elements we use today in elements like “ul” and “body” which use padding or margin depending on browser
• HTML 5 does not require the same strict markup that xhtml does, such as closing />, quotes around attributes, requiring attributes to have values, and requiring lower-case names and attributes. This can result in “ugly” code if standards are not followed.

HTML 5 Implementation

Implementing the technology can be boiled down to two steps:  installing the “shiv” and reset stylesheet for IE, and using the new tags. However, in order to take advantage of these new tags, existing code should be updated where appropriate to use them. Some divs may be renamed to “section”, “article”, or “aside” tags; heading levels may change based on their position within sections; input fields may be changed to specify input type such as “email”. This work may be done as areas of code are refactored, or it may be done as part of an overall initiative to update to html 5 at once.

The benefit of updating as refactoring occurs is that the developer is already in the code, causing changes and testing to happen regardless, and upgrading some elements to the latest could piggyback as part of the project. However, a partially-converted project results and it may not be able to take full advantage of the benefits provided by html 5. Converting an entire project at once allows all benefits to be had, but causes an additional time sink that may be unavailable.





No Comments "

ASP.NET 4.0 Changes tl;dr

June 25th, 2010

ASP.NET 4.0 Updates – http://www.asp.net/learn/whitepapers/aspnet4

tl;dr:

• Stuff moved from web.config to machine.config
• More robust XSS checking and form post validation
• More streamlined inclusion of Microsoft AJAX framework (UpdatePanels), and jQuery (which Microsoft officially includes now)
• More control over viewstate
• Built-in page routing for webforms (how MVC urls work, but now works with webforms. www.mem.com/contentdisplay/5123431 for example)
• Setting client IDs on controls instead of ASP.NET building it for you
• New Chart control
• Project templates slimmed down
• Better CSS styling on controls, option to not render tables around some controls (formview, login, stuff like that)
• ASP.NET MVC2
• Intellisense improvements

Tl;dr: tl;dr: Lots of little updates that will make asp.net better.

C# 4.0 Updates – http://code.msdn.microsoft.com/Project/Download/FileDownload.aspx?ProjectName=cs2010samples&DownloadId=10177

tl;dr:

• Dynamic binding; create objects and use methods and properties that may not exist yet on a “dynamic” typed object. This gets resolved at runtime. Upside: use non-type-safe languages and crazy voodoo magic where you don’t know the type. Downside: you only catch bugs at runtime. Use sparingly, but for awesome things. “dynamic” objects can literally do anything, as long as whatever it ends up as supports it. No lambdas on dynamic.
  • Tl;dr: magic, type safety is so 2009
  • Named and optional arguments; you don’t have to enter in your parameters in order, or even enter in all of them.
  • “string”- that’s lower-case, kids- is an object now.

Tl;dr: tl;dr: Dynamic programming is the key word. Also VB updates, but if a tree falls in the forest and nobody’s around to hear it, does anyone care?

ASP.NET 4.0 Breaking Changes – http://www.asp.net/learn/whitepapers/aspnet4/breaking-changes

tl;dr:

• A bunch of stuff you can do to revert changes, so I dunno why they’re in the “Breaking changes list”. Read for details, sorry.
• Stronger .aspx parsing, controls with random characters breaking stuff will break stuff. Our code should be clean, but needs to be looked at anyway.
• Stronger request validation, so errors may occur on posts that didn’t previously. To revert, we can add a line in the web.config if it gets crazy. Definitely check pages with rich text controls.
• Update your projects through visual studio to .net 4.0 so your web config doesn’t get borked. They support it, but it’ll make life easier.
• A bunch of troubleshooting options

tl;dr: tl;dr: More stuff, almost definitely won’t break existing code we have. Double-check pages submitting HTML (rich text areas.)

tl;dr: Better standards, MVC 2, Dynamic typing, stronger parsing and validation




3 Comments "

HTML5 Site – Waterford Family Bowl (Part 3 of n)

May 4th, 2010



Image via Wikipedia

(Back to beginning of series)

Part 3: Site Architecture Design

Now that I had the majority of the HTML and CSS down, I had more to figure out about how to implement the various features (like image gallery, news,and mailing list). Should I write my own, or should I use existing tools? What language should I use? What database system? Which pages should be static, which dynamic? The process of building he site was all about efficiency: getting the most done, using the best tools, in the least amount of time. That would allow me to focus as much time as possible in my before my deadline towards the things that will make a difference: site design, usability, and the the use of the features on the site.

I came with the conclusion that I could, and should, develop most of the data management using external tools. Spending time re-inventing the wheel and rebuilding tools that already have dedicated teams would be wasteful, especially when they all had some sort of hook (mostly RSS feeds) that I could just pull into the site. I was familiar with all the 3rd party tools I needed, so I was already comfortable with using them and knew they had the features that I needed. I came up with:

• Google Apps for email and calendar
  • Here’s a good tutorial. It was a little messy at first, but it gives you an iframe (the only standards-breaking thing on the site… thanks, Goog) that you can just drop in.
• Picasa for photo gallery
  • I chose Picasa for a few reasons, the largest of which was the integration of the Google Apps account. While there’s no “Picasa” section of Google Apps, I could use the account I set up to minimize the logins I’m using, now that I’m using four tools. I used the RSS feed to export to the image gallery and to make an image gallery  RSS link on the home page.
• WordPress for dynamic pages and news
  • The reason I used WordPress, and I didn’t just slap together my own editor, was the WCM Page Feeder plugin. It allows you to serve individual WordPress pages as an RSS feed. This means that I could use WP’s superior news-serving tools along with their page editing tools with very simple integration. I also added an RSS link to the home page, for news.
• Pommo for mailing list management
  • I tried out a few tools, and found this to be the easiest to set up. Makes adding an email form pretty simple, manages everything for me. Another several hours saved to these guys. Here’s some credit

I also used a couple 3rd party PHP Libraries so that I could hook all of this lovliness together:

• Simplepie RSS Reader
  • Note: I had to switch my WordPress RSS feeds over to Atom, even though SP claims it can read the RSS 2.0 standard. This was a simple checkbox in the “Writing” section of the WordPress settings.
• phpmailer for mail functions
  • A little messy to set up to go through Google Apps mail. I had to set these settings in class.phpmailer.php in order to connect without errors. Once you have this part right, though, you’re good to go. I’ll go into more detail about this in the next article.

Once all of these tools were in place, it was a simple matter of dumping their content, using Simplepie, into my template. I’ll talk about the actual hooking up of everything, and setting up the custom code I did write, in the next article.





3 Comments "

HTML5 Site – WFB Site UI Design / HTML Structure (Part 2 of n)

April 29th, 2010

(Back to beginning of series)

Part 2: Site UI Design / HTML Structure

When I first picked up the project, I had a few things to consider: what requirements do I have, and once I had those, how would I display these feature in a neat manner, and what technologies would I use to implement them. The requirements part came out pretty easily, after a couple of phone conversations:

• Calendar of events
• Photo Gallery
• News section
• A few generic pages
• Email mailing list
• Misc. vital information (times open, address, that sort of thing)

And now I needed to put together some kind of design. I had recently finished reading a few usability books, so I was feeling pretty good about putting some of these ideas to work. I knew that people coming to the website were probably going for directions, a phone number, or hours of operation, so I put high priority on these being visible and easy to use (such as a Google Maps link for the address). I also wanted to entice people to explore other areas, so I added some photos from the photo gallery towards the top of the page. Finally, I included elements from all the page- just little teasers- across the front page, such as a small calendar of events, news block, and a blurb and picture about their restaurant. Now, I had a home page with all the information a user needs, quickly and at the top, while encouraging visitors to browse a little and check out the gallery and other pages for even more information.

With this sketched out on paper, it was time to actually write out the HTML. I came up with a structure similar to my HTML5 Template (and in fact, it’s what I based my template off of.) I wanted to use the new semantic HTML5 elements and attributes, such as example text on textboxes:

<input type="text" name="Email" id="email" maxlength="60" placeholder="email@youraddress.com" />

I used the help of a jQuery Watermark plugin to help style the textboxes as well, since few browsers actually pay attention to the placeholder attribute yet. Further HTML5 inclusions were sections for the individual blocks of text, an aside for the side column, header, footer, and nav elements. Besides the HTML5, I also implemented a link tag for the news RSS feed:

<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.waterfordfamilybowl.com/wordpress/index.php/feed/" />

This allows browsers and whatever happens to crawl your site to say “hey, there’s an RSS feed here” and allow users to easily pick up the news RSS feed. You’ll notice it in FireFox, IE, and Chrome if you have an extension installed.





No Comments "