10 Things I Learned about Ext JS After 1 Week

I recently had the opportunity to work on a project for a new web application on the Ext JS framework. I am a front-end developer (“UX Engineer” by title) so my background is primarily in HTML, CSS, and JavaScript. As such, my responsibility on this project was to implement the user interface design, which had previously been conceptualized in Abode Photoshop.

Starting off, I did have some understanding of the basic concepts, but almost no practical experience. A co-worker helped me install the necessary bits and get the project up and running. I completed my work in Aptana Studio 3, primarily because it provided an easy way to compile and run the project.

I worked on the project for about 5 days, which was just enough time to get a crash course in Ext JS and complete the tasks assigned to me. During the frenzy that ensued, I learned several things about the Ext JS framework that I felt were worth sharing.

  1. Ext JS takes a very modular view of, well, everything. Instead of working in a few massive documents, I found myself working in several small documents. In some ways, this was nice because the documents were easy to scan through and work with, but it also meant that I usually had a lot of documents open in Aptana. I had to develop a system for ordering the tabs so I could easily find the one I needed.
  2. Ext JS projects come with a pre-built interface that includes dozens of UI components that can be utilized at will. There are several themes to chose from that allow developers to create projects with little-to-no CSS required.
  3. If you need to implement a custom interface, it seems that creating a new theme is the best approach. Ext JS has a theming guide that provides a pretty good overview of how to set up a new theme.

  4. Even custom themes need to start with a base theme. This provides a basic set of styles for all of the UI components included in the project. The “ext-theme-base” includes the least amount of inherent styles and should be the easiest to override.
  5. Ext JS utilizes SASS, which allows you to use variables, math operators, and other functionality not available in regular CSS. This was also my first real foray with SASS, but I was already familiar with the core concepts. Although I looked to make use of the various benefits that SASS offers, I was working on a very small project and I found that I only feature I needed was variables. Unfortunately, in this case, I don’t think the 10 or so variables offset the extra overhead that came with compiling the project every time I needed to check my styles in a browser.
  6. Even the CSS is modularized in Ext JS. Ext JS has a separate SCSS file for each UI component (which I didn’t touch) and I had a separate SCSS file for each custom view. That provides some organizational benefit, but, in the end, Ext JS compiles all of them into one file when the project is built, which nullifies any speed optimization benefits that separating the code may have also provided. It also means that you need to have a good understanding of how the final CSS file will be compiled or your style updates may get overridden by other code that is inserted later in the document.
  7. Ext JS allows you to create a “universal” style sheet in your theme that will be included on all views of your application. Under /packages/{your-theme}/sass/etc create a file name “all.scss.” I used this file to hold the base styles for my application as well as my SASS variables and then had view-specific styles in separate files.
  8. Although Ext JS does allow you to create custom themes and override most default styles, there are still many instances where inline styles are inserted. In those cases, I found that I usually needed to apply the !important CSS snippet in my file.
  9. The generated HTML in Ext JS 4.x is massively bloated. Although there are ways to insert your own HTML, most of the time, I worked with Ext’s UI components. A simple button generated by Ext might include like 10 nested HTML elements. I believe that the main reason for this is that the default themes still support IE6 and they need a lot of elements to pull off gradients, borders, etc. in exactitude in all browsers. This might be my least favorite thing about Ext JS, because it creates a lot of unnecessary overhead for the browser and makes navigating the DOM through Chrome’s Dev Tools (or a similar tool) an essential step in styling anything.
  10. Ext JS has pretty good documentation. I found it to be a little cryptic until I had worked with the framework for a little while, but then it was quite helpful. However, if you do have a question that the document doesn’t answer, I found that there are not a lot of other resources available. Even stackoverflow is short on answers. I’m told, however, that the Sencha forum is quite good in a pinch, but I have yet to try that route.

By the end of the week, I felt pretty comfortable working with Ext JS. There was a bit of a learning curve, but, between my helpful co-workers and Ext’s documentation, I was able to overcome most issues with little trouble.

After a week of total immersion, I don’t feel like I can fully endorse Ext JS. I can see how it would be a good tool for development teams that don’t have any front-end developers, but it certainly didn’t make my tasks any easier. In general, I prefer to work with lightweight frameworks that provide more control over the HTML and CSS.

What has your experience with Ext JS been like?

Advertisements

Are Smartphones Becoming Stale? The Rise of Wearable Technology

Many folks will say that smartphones are in their prime however, 2007, when Apple first introduced the iPhone that changed the smartphone world, seems like ages ago. Certainly, the battle to be the best in the smartphone industry is still going strong, but with new technologies like wearable electronics, the smartphone might be on its last legs as the “thing to have.”

It seems as if the innovation in the smartphone industry has nearly disappeared and with companies like Samsung and Apple fighting for basics like screen size and resolution, there really isn’t much left that excites consumers. Enter the wearable gear.

Samsung’s Galaxy Gear uses their Galaxy line of smartphones to interact with the user on an entirely different level. Samsung claims that it’s easier than ever to answer a hands-free phone call, take a quick snapshot, or even find your favorite local coffee shop – all without ever reaching for your phone.

Google has their own piece of wearable gear with Google Glass. Google says Glass helps integrate its technology into everyday life, switching the user’s focus back up to eye level, by removing the need to constantly look down at a hand-held phone.

Google Glass

Apple has plans to introduce their own wearable technology sometime this summer and I’m sure many others will follow suit.

android refrigeratorAndroid is also working its way into household appliances like refrigerators, coffee makers, dishwashers, and the latest breakthrough of having “Android in your Audi,” showing us that there are many areas of our lives that have yet to be infiltrated with technology, but I can guarantee you all of the major players in the industry will be trying to change that soon enough. Android Refrigerator Screen

I certainly consider myself an early adopter of new technology, mostly due to all of the testing I perform in my every day job here at Algonquin Studios. However, I can’t see myself being an early adopter to these new wearable technologies. I’ve never owned a watch, simply because I’m not comfortable wearing one, so I don’t see myself wearing a “Smart Watch” anytime soon.

samsung smart watch

And, while I know my wife would tell you I have too many tablets and smartphones lying around at any given time, I think I’ll also be hard-pressed to purchase an Android-powered refrigerator due to price point. This doesn’t, however, stop me from spending hours every day researching what’s next in the industry.

All of these new technologies might seem pretty silly now, but how many of us thought that having a small super computer in our back pockets would ever be a great idea? What do you think will be the next viral technology? I would love to hear everyone’s feedback!

Managing Expectations: The Myth of the Non-Existent Timeline

If you live and work on planet Earth then you’ve experienced something like this:

Joe: Hey Suzie, can you get me X.

Suzie: You betcha’, but I’m pretty swamped right now. When do you need it?

Joe: No rush… whenever you get to it.

managing expectations

Joe and Suzie think they’re on the same page. Solid.

It seems like a harmless exchange so far. Unfortunately, there’s a decent chance this relationship is about to take a nasty hit. Remember, Suzie said she was busy. What happens to a task that doesn’t have a defined timeline when you’re busy? Usually, nothing. Fast forward 3 weeks…Suzie’s been tied up with “high priority” tasks, some of them were even items for Joe:

Joe (now frustrated): Hey Suzie, where is X?

Suzie (sensing Joe’s frustration and getting defensive): I just haven’t been able to get to it. I thought you needed it “whenever…”

Joe: Well yeah, but that was like 3 weeks ago. What have you been doing all this time? This is a small task!

Suzie: Fine! I’ll drop everything and have it for you tomorrow.

Joe: Fine!

Suzie: Yeah, fine!

miscommunication leads to anger

Turns out, Joe and Suzie weren’t even reading the same book.

Boy…That escalated quickly. The problem all started when Suzie and Joe decided to move forward without agreeing on a delivery date.

Every request comes with an expectation of when it will be delivered, even if the requester can’t or won’t identify it. When someone says “Whenever you get to it” they really mean “This is a really easy task and surely you’ll get it before the next board meeting in 3 weeks, so I’m not going to be pushy and set a date.” Or even “I know when I need it, but I’m not going to tell you because maybe then I’ll get it early.” Or maybe they just haven’t consciously acknowledged that there is a date they need it by. Whatever the case, it’s trouble.

Here’s a personal experience: A few years ago I decided to lease my first brand new car. Upon closing the deal I told my dealer that I was in no rush and that it was ok if it took a week or two to get the car delivered. And I wasn’t lying, it really didn’t matter to me. However, the dealer insisted he was getting me into my new car by the end of the week. It was important to him! With his assurances in mind, every day that week I got a little more excited about my new car and by Friday, I was stoked to go pick up my new ride. So, when I found out my car wasn’t ready, I was pretty annoyed. I grew increasingly annoyed and ended up flat out mad as more days went by. Finally, the car arrived about a week later. It didn’t matter that I’d started out with no firm delivery date in mind, the dealer set a date of his choosing and then missed it, turning a win into a loss by mismanaging my expectations.

So, what should you do when a client asks you to accomplish something but doesn’t give you a deadline or timeframe?

Look at your workload, identify a place where the task fits, add some buffer, and provide a delivery date to the client. If they accept your date, great! Now, you can focus on delivery. If they reject your suggestion, you’ve just uncovered the hidden time constraint. Now, you’ll be in a position to negotiate and agree upon an acceptable date.

Congratulations, you’ve just averted a crisis by successfully managing your client’s expectations! This is easily one of the most important factors for providing great customer service, keeping your client happy, and maintaining a positive relationship during your work together.

Side note: If there really is no due date, then, in my opinion, there shouldn’t be a task. If something is so unimportant that it doesn’t matter when it gets done, why on earth would you ever spend time doing it?

Connecting Business Applications with Mobile Customers via Twilio’s SMS Service

In the constantly changing and ever-growing market of mobile technology, businesses face the challenge of finding methods to effectively communicate and connect with their target customers who are always on the move.

In this post, I’ll outline how you can integrate Twilio’s SMS service into a .NET web application in a few simple steps. We’ve recently integrated Twilio into a client’s web application as a means to communicate with employees after-hours, when employees have left for the day but a situation arises that needs further attention.

Before we get into the coding, let’s take a quick look at other methods that are used to send SMS messages from applications.

Email-to-SMS Gateway functionality has existed for a while and offers some of the same benefits, but with a few caveats.

  1. What if you don’t know the customer’s carrier? You need this in order to utilize it (for example, if your customer’s number is 555-777-8888 and is a Verizon customer, you can text them by sending an email to 5557778888@vtext.com)
  2. You cannot control who the message is sent from, for some carriers is the email address of the send, for some it’s the email address of the server
  3. You cannot control what number delivers the message, so the customer may not be able to respond back to the message

Twilio’s SMS service overcomes these hurdles in simplistic fashion. Twilio’s SMS service allows web applications to communicate with mobile customers with a few simple lines of code.

Let’s get started. First, you’ll need to add the Twilio service into your project by following these steps (note that this is for .NET 4.0 application). The installation process can be found here: https://www.twilio.com/docs/csharp/install

Once you’ve installed the service, you’re ready to add your SMS code.

In this case, our function is setup to receive a Phone Number that we are going to send a message and the Body of that message.

Public Sub SendSMS(ByVal receivePhoneNumber As String, ByVal messageBody As String)

Dim accountSID As String = ""
Dim authToken As String = ""
Dim objTwilio As Twilio.TwilioRestClient = Nothing
Dim objMessage As Twilio.Message = Nothing
Dim sendPhoneNumber As String = ""

When you sign up for your Twilio account, you’ll receive the following credentials within their application.
authToken = "111111"
accountSID = "222222"
sendPhoneNumber = "5553211212"

Instantiate your Twilio object
objTwilio = New TwilioRestClient(accountSID, authToken)

And send!
objMessage = twTwilio.SendMessage(sendPhoneNumber, receivePhoneNumber, messageBody, "")

End Sub

So now we’ve sent our message. It’s sent to the end user via a telephone number, just as if you were sending a text message from your phone. What if the end user wants to respond back? They can, with no additional effort on their end. The message will be sent back to the Twilio number, and Twilio will redirect the response to your web application.

Within the Twilio client, you can setup a Messaging URL, which will define where Twilio POSTs the response to (for example , http://www.yoursite.com/receiveTwilioResponse.aspx). Let’s setup that page.

When we setup receiveTwilioResponse.aspx, we’ll need to capture the Page Request and parse out the response message.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim fromPhoneNumber As String = ""
Dim messageBody As String = ""

First, we’ll get the Phone Number of the end user who is responding back to us
If Not Request.Form("From") Is Nothing Then

fromPhoneNumber = Request.Form(“From”)

End If

Next, we’ll get the Message Body from the page request
If Not Request.Form("Body") Is Nothing Then

messageBody = Request.Form("Body")

End If

And that’s it! From here, we can handle this data how we see fit.
Call LogDataToDatabase(fromPhoneNumber,messageBody)

End Sub

This is simplified for example purposes. You will want to setup error handling and logging in conjunction with sending the message, and will need to clearly define the business logic of when and who to send messages to.

Learn more about the service here : https://www.twilio.com/sms

Things I Wish I’d Known Preparing for Ground Truth – Part 2

Ok, in Part 1 of this post, we covered a good chunk of the lessons my team learned during our trip to China with the Executive MBA program at the University at Buffalo.

But, there’s more to earning solid feedback on your product from prospective customers than just delivering a sound demo. If you think there’s a different culture on the west coast of the US relative to the east coast, try meeting your customers in China! Before we grew comfortable listening, watching, and adapting in our new environment, my team risked coming back with nothing or missing the point, several times.

Get local through your errors. Before we departed, every book and coach told us not to drink the tap water. There’s not enough time to adjust on a short trip. Yet, one morning I slurped some while brushing my teeth, and didn’t realize it for several hours. When you adjust, you’ll probably do it by letting go. Just embrace it.

The Bottled Water Acid Test. Yup, we drank a lot of bottled water, and everywhere we went our hosts offered it to us. They watched as we drank it. Over time I thought this must be a stereotype of westerners. Or did it reveal how much I trusted the host? We were sensitive too, after hearing about refilled and resealed bottles. Rituals come in all forms.

Start early and make it easy. We scored seven meetings for two days. To do this, we started reaching out two months earlier. We avoided loading our hosts with any onerous work, especially reading long text blocks or keeping track. We reminded them of our meetings before we left the US. A couple of days before each meeting, we confirmed. One firm still moved a meeting from 10:30am to 8:00am, giving us just enough time to drop breakfast and run.

Forge a connection. To get those meetings, we tried a few strategies. Personal connections worked best, where someone had a cousin in-country and made introductions for us. Shared history scored too: did one of us go to the same school as a prospect? We got a 15% response rate from a targeted email blast to association members. To increase that rate, we could have adapted the request to be more relevant to each recipient. After meeting, most hosts shared a list of people we should speak to next, both inside their firm and at others. How kind!

Who are you talking to? On some of our tours, our hosts clearly spoke to the perceived leader of our crew first, and then to everyone else. It was striking. We soon tried it, using the business cards we received as strong hints about seniority. Would we have given them a disrespectful impression otherwise?

Help me save face! Once, we met with an operator and a manager and asked them to fill out a five minute survey for us. The manager sighed, rubbed his eyes, and said that he couldn’t complete it because he’d forgotten his reading glasses. Being super helpful, we offered to walk him through it. Much later, we realized our big mistake: perhaps his English wasn’t as good as his protégé’s, and he’d offered us a card to help him save face? We’d taken the card and burned it. Ach!

How close is too close? In a giant unfamiliar city, how much time should you place between meetings? In Beijing and Shanghai, one hour worked just fine for taxi travel. They were clean and quick (and almost always Volkswagen Foxes), and we asked our hotel concierge to write out directions in Chinese and English to give to our taxi driver. We brought the hotel card to get home again. We tried hard to keep our meetings to one hour, too.

Localization Details Matter. Localization is more than just translation. Our prospects remarked that they would consider us if we certified compliance with China’s legal framework. English is acceptable, but adding an interface in the legal form of Chinese would be better since it’s more widely understood than a particular dialect. Showing culturally appropriate use cases in our demo would have helped too. For example, Chinese occupants keep their rooms in the mid 70’s F. Who knew that detail beforehand? Our hosts might have wondered, “Why do these people always want me to freeze?”

Challenge or Business Opportunity? The list goes on. For example, there is wide variation between coastal and inland China, and rural and urban China, even more than in the US. At the time, there were no carriers able to deliver packages everywhere in China, and few fulfillment houses distributing for US firms. Each carrier had regional or urban-only coverage. Experience with computers and English varied inland, too.

Needless to say, the next time we collect on-the-ground feedback in China, we’ll be much better prepared. If you’re planning a project like this, consider doing it in stages, with time re-factor your approach each round. Everyone we met with was so helpful that I’d expect improvement to come quickly for you.

Things I Wish I’d Known Preparing for Ground Truth – Part 1

Since our founding in 1998, Algonquin Studios has acted as a trusted ally for several startups and has even launched a few businesses ourselves. By March, 2010, several Algonquin Studios team members had built a robust hardware prototype: a mesh network of sensors, controllers, and management software. It personalized the environment and access within commercial buildings and hotels. But the team had limited sales and installation experience.

Coincidentally, I had a trip to Beijing and Shanghai forming, as my team needed a capstone project in the University at Buffalo’s Executive MBA program. What a lucky match! Beijing and Shanghai were saddled with surplus real estate following the Olympics and investment booms and firms were hungry for smart competitive advantages. Why wouldn’t this solution work in China? My team set up in-person demonstrations and feedback sessions with hotel and property managers while we were in China, and brought back a trove of on-the-ground observations.

We were surprised at what we learned and the ways that were identified for doing things better the next time around. I’m sure you would be too:

Is that a prototype or a bomb? We brought several black plastic boxes as functional prototypes. Each was the size of a juice box and had LED lights and wires hanging out the side to batteries. Frankly, they looked like bombs to our American eyes. How would we get them through customs in China? It turns out they didn’t care.

Demos will break. How many ways can you give your demo? It had better be a bunch. At our first meeting we fried the Radio Shack step-down transformer we brought with us. But we had rehearsed in the hotel – how unfair! So what? We couldn’t find another transformer in any store. We would have been stuck giving vaporware demos, and our surveys would have just measured the dream in someone’s head. But, we found a way out – powering up with batteries or laptop USB ports. In fact, laptop wall power supplies adjusted to every location with just a reliable plug adapter and laptops could be recharged, unlike plain batteries.

Tricky Demos = No Demos. The developers warned us that the devices would jump to a different port every time we started a demo. My background is development, so I could resolve the problem without anyone noticing. But the rest of my team struggled when we split the team up to do two meetings at the same time. Remember, your goal on the ground is to get feedback and the talent you’ll have won’t necessarily be technical.

What does ‘done’ mean? Following that thought, we realized our demos could have been more polished. We built our demo around what the developers showed us. Why not build it around what evokes meaningful feedback? For that matter, make it look good so you’re not distracting prospects with a bomb, highlighting how far you are from done, and maybe getting them to feel like they should work with a cool outfit like yours.

How will you pay for that? Business credit was new in China in 2010; most paid by bank transfer or online services like AliPay and TenPay. Not one of our prospects chose credit cards as a possible payment method. One kind soul wrote, “There are no credit cards in China.” We could have figured that out from a few web searches, but we didn’t do the due diligence. So, did we miss a chance to get better feedback?

Integration and Management Services. Don’t forget that a hardware solution lives in an existing context. Every one of our prospects asked how we would work with their existing systems and offer administrative tools. If you can’t do this yourself, it’s smart to partner with a firm such as Algonquin Studios.

Sales Channels. Who will your prospects buy from? Our prospects suggested that we partner with a US firm already established in China, increasing trust, avoiding intellectual property theft, and offering integration options. Even a two-person local sales team with an engineer would be better than selling from outside China. You might need local help to get products out of customs delays in port.

Each building is an island. Treat each prospect as a unique case. We met with hotels and property managers, very concrete examples. We were surprised to find that each hotel provided its own utilities and services, including massive electric, water purifying, and emergency outfits. Less literally, don’t make assumptions about the rules. Listen first.

Even if you’ll open your business in your home market, or your foreign market is in the west, there’s more to ground research than just product demos. In fact, we wouldn’t have gotten any feedback without adapting on the fly. How thrilling!

Stayed tuned for Part 2 of this post, which will cover our take-aways on the more “personal” aspects of cross-cultural market research.

Related links that rang true to me:

Tips for On-the-Ground Market Research
Global Health at MIT

Ground Truth and the Importance of Market Research
Karyn Greenstreet

Ground Truth
NASA

Print Styles Talk from WordCamp Buffalo 2013

Back in October I had the pleasure of speaking at Buffalo’s second WordCamp. Unlike the talk I gave at least year’s event, I opted to go for something a bit more technical, something we build into every site we develop at Algonquin Studios and that I have been promoting for years now.

So I crafted a presentation on how to use print styles on a web site. At Algonquin Studios we support many platforms, including our own homegrown content management system (CMS), QuantumCMS. I have also learned that many WordPress developers also work on other platforms, so I opted to discuss print styles independent of the CMS used to power the site.

I focused on the background of print styles and related them to responsive design, I covered best practices and techniques, demonstrated how you can use Google Analytics to track what pages are printed from a site, and touched on the future of print styles.

All of my slides are here along with a video from my talk. Below the embedded content are links to other articles and posts I have written about print styles for those who want to get a deeper dive into some of the aspects.

The Slides

The Video

The video gets cut off before the end, but the key information is still in the slides.

Further Reading

You Should Be Using Two-Factor Authentication. Everywhere.

We’re not very good with passwords, although we think we are. According to a recent study by security company CSID, 89% of us think we practice safe password routines. Unfortunately, 1 in 5 of us have had an online account compromised and yet only about half of us change our passwords more frequently than once per year. The best passwords typically utilize a combination of letters, numbers, and punctuation, and the longer they are the better (at least 8 characters). Only 6% of users have passwords that meet these criteria. Even worse, 60% of us reuse the same password for multiple sites. This is a recipe for disaster.

Here’s a quick scenario: Tommy has a forum account on a fan-made music site. The music forum that he visits regularly doesn’t maintain their security patches regularly, and a random hacker manages to hack into the site and steal his password. A simple web search reveals that Tommy works for Company X. Company X uses the Outlook web app, and wouldn’t you know it, Tommy uses the same password everywhere. Through a little trial and error, the hacker discovers that tommy@companyx.com is his work email, and boom, the hacker now has access to Tommy’s work email.

So what is two-factor authentication, and how does it solve this problem? Well, two-factor authentication (2FA) is a multi-stage method of verifying that you are who you say you are. Typically it’s a combination of something you know (a password), and something you have access to (a phone). Most commonly, the second factor of authentication will be a code that you will be sent through a text message or an automated phone call, and it’s only valid for a short period of time. This code will be entered on a secondary screen before you can have access to your account.

Unfortunately a lot of people don’t know what 2FA is – roughly 75% of people surveyed didn’t have a clue. It has also garnered a reputation for being a hassle, which is simply not the case. Most two-factor implementations will allow you to “register” a device as a “trusted device” for a period of time (typically ranging from a day to a month). I know what you’re probably thinking – what if I lose my phone? Then what? Well, the answer to that is “it depends.” Every two-factor implementation has different ways to handle account recovery in the event of a lost device, but this shouldn’t deter you from using 2FA – the benefits outweigh the risks by far.

So where are some common places you should start using two-factor authentication to protect your online accounts? Here’s a list:

  1. Google: Sends a 6 digit text message when you attempt to login from a new device. They also provide a Google Authenticator app for Android, iOS, and BlackBerry that can be used to obtain the second factor authentication codes.
  2. Apple: Sends you a 4-digit code via text message or Find My iPhone notifications when you attempt to log in from a new machine.
  3. Facebook: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  4. Twitter: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  5. PayPal: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  6. Microsoft Accounts: Sends you a 7-digit code via text message or email when you attempt to log in from a new machine.
  7. Yahoo! Mail: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  8. LinkedIn: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  9. WordPress: Utilizes the Google 2FA app.

For a more complete list of companies and products that support two-factor authentication, please review Evan Hahn’s list. Ask your local security or IT professional if your organization could benefit from using 2FA for email or work accounts. There are also ways to implement two-factor authentication into your own custom applications and web sites.

Passwords are becoming less secure all the time, and hackers are getting better at cracking them (check out the strength of your password). Enabling two-factor authentication provides an extra layer of security at a negligible cost. Protect your financial accounts, identity, and your career by using it wherever you can.

Styling Tabular Data with CSS3

In my career as a web developer, I’ve helped build many web applications that require the display of tabular data in a clean and simple fashion. Over time, I’ve developed a few techniques for doing so that are effective and easy to implement.

But before I go into that, let me quickly remind my fellow web developers that tables are not, in fact, the enemy. Although the days of using tables for layout are long past, tables are still a perfectly appropriate method for displaying tabular data on the web.

However, I must also acknowledge that there are some disadvantages to working with tables to be aware of, including:

  1. Tables don’t always scale down well and may display poorly when space is limited, like on mobile devices. If your primary audience is viewing your web site on mobile devices, it may be better to use lists or other markup that’s better suited for vertical display.
  2. Tables are not as adaptable as other elements, especially in older versions of Internet Explorer, and that can limit your options when developing a responsive web site.
  3. Display tends to vary slightly across different browsers. This is particularly true with column widths. I’ve encountered many situations where the text in one column wraps to two lines while there is clearly ample space to accommodate for it in another cell. There are ways to get around that of course, but the solution is generally specific to the situation.

So after much preamble, here are four simple examples that I’ve created to demonstrate different ways you can work with tables to display data cleanly:

  1. Basic Grid with Alternating Row Colors
  2. Basic Grid with Alternating Row and Column Colors
  3. Basic Grid with Rounded Corners
  4. Simplified Grid with Generated Content

Error Messages Visible During Site Upgrade

During the course of a client web site upgrade today, one of the site’s visitors informed us that the web site was displaying an error and was exposing passwords in the error message.

While a password was in the error message, that password was only valid for the session state database and does not expose any other databases to access, including those with client data.

For those who would like a little more technical detail, the targetFramework error is expected while the site and applications are in transition across the .NET framework boundaries as the site is updated. The presence of the session state password and machine keys was not intended but was a side effect of an issue that has already been addressed. Some of the values are not in use and were commented out, but still displayed in the XML exposed in the error message.

As a result of this exposure, we removed existing accounts and set up new accounts and passwords.