Understanding Font Rules in CSS

Quite often, developers or designers include a list of fonts within their CSS. As an example, one might define a CSS rule such as:

font-family: ‘Segoe UI’, Arial, Tahoma, Helvetica;

However, what some developers or designers may not realize is that the font, Tahoma, will never be reached. The reason for this is that Arial is much more prevalent than Tahoma. In fact, most Mac users would not see the site render using the Helvetica font as one may expect. This is because the Arial font has been included with Macs since OS X.

If your application targets the Windows platform primarily, you should be aware of when fonts have been introduced. For example, unless the client machine is Windows 8 or later, the ‘Segoe UI’ font will not be used. Rather, the ‘Arial’ font in our case would be used. In addition, Apple has started to introduce and license the more common Windows fonts in their operating systems. As an example, since OS X 10.4, Verdana has been included on Macs. It’s also included on iPads and in many Linux installations. Knowing this can help developers and designers include the right fonts for their situation.

Knowing this, we should probably define our rule, if this meets the styles we expect, such as:

font-family: ‘Segoe UI’, Helvetica, Tahoma, Arial;

In this case, the ‘Segoe UI’ font will be used on modern Windows machines, Helvetica will be used on any Macs, Tahoma will be used on most other machines, and Arial will fill in the gaps. The minute remainder of activity that doesn’t have one of these fonts will default to that machine’s default system font. In most of those cases, you are most likely not targeting those users for browsing activity.

If you’d like to ensure that everyone is receiving the same typeface experience, you may also want to consider using Web Fonts. Web fonts allow font files to be hosted external from your site. There are many resources for web fonts available across the web. To use the @font-face rule, be sure that the browser you are targeting support it. Most modern browsers do support this rule.

Detecting Caps Lock with JavaScript

Earlier today, I saw a user attempt to type his password in both Internet Explorer 9 and Chrome. In both browsers, he failed to successfully type it in. After 3 failed attempts, he realized it was due to his caps lock key being pressed. In some cases, a keyboard driver will inform you on screen when you press the caps lock button. If you are lucky enough to use Internet Explorer 10, you’ll notice that it is built into the browser as shown below:

image

However, not all users are using Internet Explorer 10 and some users have a tablet that doesn’t show that caps lock is on.

Implementing a little JavaScript, we can add functionality to our page. As a user types in a textbox, we can call an event that checks to see if the user has pressed the shift key and hit an upper case letter or we can check to see if the user has the caps lock on.

An example is shown below:

In most cases, we’ll likely want to apply this to all password fields, but not necessarily to all text fields.  While we can select only password fields in straight JavaScript, it’s much, much easier to use jQuery for that. Below is a sample jQuery script for this:

As you can see, we’re using the :password selector to only apply this to the password elements. However, because we left the isCapsLockOn method separate, we can always use this method on future elements.

Saving Design Changes from Internet Explorer to Visual Studio 2013

How many times as a web developer did you make a change to a web application in your browser and were disappointed when the changes didn’t update back within Visual Studio? With the recent updates to Mads Kristensen’s VS Web Essentials, you can. The Web Essentials download is a VSIX package (Visual Studio Extension).

To use it, open an existing project or create a new one. For purposes of this blog post, I created a new ASP.NET Web Application and used the MVC project template. The default project template has a master layout file that contains an ActionLink Html Helper with the first value being set as “Application name.”

   1: <body>
   2:     <div class="navbar navbar-inverse navbar-fixed-top">
   3:         <div class="container">
   4:             <div class="navbar-header">
   5:                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
   6:                     <span class="icon-bar"></span>
   7:                     <span class="icon-bar"></span>
   8:                     <span class="icon-bar"></span>
   9:                 </button>
  10:                 @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
  11:             </div>

This is the display text that will be shown in the upper, left-hand corner of the default template as shown in the image below:


image


However, we may not have known where that value had come from or may want to tweak it when running our application. When we press F5 in Visual Studio, our application will run in the browser. If we press the Ctrl key, we’ll notice a new toolbar appear like shown below:


image


You’ll notice that I have checked the box for F12 auto-sync. This means that if I make any changes within the design of the page, it will sync back to Visual Studio. If we enter the developer tools (F12 in Internet Explorer) and expand the DOM to this element, we’ll see the text in F12 will show ‘Application name’ as shown below:


image


If we press the Web Essentials Design link, and click on that text, we can change it to something such as ‘Web Essentials ‘. Notice that while we are editing the text, the F12 screen changes the value as we are typing.


image


Back in Visual Studio, we’ll see the change in the layout file as such:


image


Notice how the tool is intelligent enough to make the change to the HTML Helper and not replace the code with a value.


This tool works for more than text changes. It also works for styles, classes, and other markup within the page.

Moving On… To Guard Insurance Group

After over 10 years of dedication to United One Resources, I’ve decided that it’s time for my next life challenge. Later today, I’ll walk out the doors of the office on Sherman St in Wilkes-Barre for the last time as a United One team member. I will never forget the past 10 years of my life and what this company has meant to me both personally and professionally. I have some fond memories and new found friends. Below are a few specific people that I felt I needed to mention:


  • Lou and Sean: Thanks for the opportunity that you’ve been able to provide me. Hopefully I’ve made you proud over the 10+ years of dedication.
  • Mike: You’ve been the longest tenured developer, besides me (of course). That means something. Keep up the good work!
  • Dan: Even though you moved on several years ago, I’ll always remember our first days at UOR. Go State (Ohio that is)!
  • Jeff: Over the past several years you’ve helped ease the burden of day to day operations to allow me to focus on strategy and project management.
  • Dave, Jim, and Mark: Although we were a small team, we always persisted through the tough times. Thanks for your help through the years.
  • Senior Leadership/Strategy Team (Lori, Miriam, Frank, Julie, Mike, and Ashley): The direction and vision that you’ve set forth for the company is exciting. Keep pushing the limits and you’ll be rewarded.
  • Jim S.: I still think it was weird coming into a Jim-less office. You’ll forever be known to the team at Zones as ‘Big Jim.’ Thanks for the guidance and support especially early on.

This list would be never ending if I listed everyone who had impacted me there. While I’m moving on, United One Resources will continue to prosper and make great strides to becoming a market leader. I’d like to thank all of the team members at United One and wish you all success in the future.


On November 25th, I’ll be joining the Guard Insurance team as the Director of Software Development Resources. This position will bring new challenges and will allow me to grow personally and professionally. I am humbled and excited by this opportunity. I don’t have much to add regarding the specifics at this time.


Again, thanks to everyone for your support!

Review: New Developer Tools in Internet Explorer 11

Windows 8.1 has been out for a few weeks now. Along with Windows 8.1, Internet Explorer 11 was released. IE11 offers the best web standard support of any Internet Explorer browser. This means that the latest finalized specifications for HTML5 and CSS3 features have been implemented within the browser. In addition, the IE team revamped the developer tools (F12 tools).

When you press F12 in the new IE, the first thing you’ll notice is that IE11 is bringing forward the modern Windows style.

image

The options, in order from top to bottom, are DOM Explorer, Console, Debugger, Network, UI Responsiveness, Profiler, Memory, and Emulator. Below, I’ll try my best to touch upon each of these options.

DOM Explorer

The DOM Explorer option has several enhancements. One of the areas that I particularly like are the improvements to “Inspect Element.” For instance, my current web theme needs to be updated so my Twitter bird is properly positioned. I’ll fix this in the upcoming weeks as I tweak my website theme for even better HTML5 support. However, for the purpose of this article, let’s assume it’s still broken. Here’s an example of what it looks like if you right-click the image, and choose to Inspect Element:

dom-explorer-1

As you can see, it’s off to the right. It’s not positioned correctly. You can easily see that one of my style elements is causing some of the offset. From within IE, you can alter this by deselecting that style to see it’s immediate impact.

dom-explorer-2

You can also click on the same line as the closing curly brace to add new styles:

image

As in above under the Styles sub-item, you can also manipulate the container size, padding, border, and margins by clicking on the Layout sub-item. If you click the item, the image below will appear. From this, you can click any of the values to edit them:

image

Finally, the DOM explorer was updated to show a bread crumb trail of nested elements. This allows you to jump to an up-level element to update the style or see the element selected.

image

Console

The console option allows you to access elements using JavaScript. Even if you are unaware of methods or elements, the JavaScript console will provide hints by using Intellisense as shown below:

image

Debugger

The debugger provides more options than the console. As one of the most powerful debugger’s yet, this debugger allows you to place breakpoints within scripts or to watch variables defined within your scripts. One of the biggest enhancements to this version of the debugger is that this debugger finally stays within the browser window. Previous IE debugger’s would detach from the browser window and open within a new window. If you had a breakpoint set, the window with the web page would “lock up” causing an unpleasant experience. With the IE11 developer tools, when a breakpoint is hit, the page informs you properly as shown below:

image

Network

The network option provides the network traffic that takes place for your site. It breaks down each round trip to the server or other network resource including content delivery network (CDN) assets. As you can see from the image below, certain resources can really take some time to return a response. I can improve my responsiveness by updating those elements.

image

Besides viewing the overall responsiveness, I can dive further into the individual elements to see the request and response information to get a better understanding of what is going on. As you can see from the image above, there’s some code pulling from Amazon, which is an Amazon advertisement, that is causing some slowness on my site. I can see this in greater detail by choosing the details:

image

While the network data provides a great overview on the traffic, it doesn’t solve the responsiveness issues solely.

UI Responsiveness

To complement the network option, you can start a performance profile by using the UI Responsiveness option. From this option, you can get a better understanding of the resources needed during a browsing session. You can start a profile session and stop it whenever. As an example, the image below shows a lengthy session that was zoomed in.

image

From this image, you can see that you can zoom in further to get a better understanding of the cost that style or scripts have on the overall performance for your UI. As I scroll down to the timeline graph, I can choose an item, such as my base.js file, to see the overall load time.

image

Profiler

The profiler option allows a profiler to be initiated and captured. When you stop the profiler, it allows you to review the items that were loaded and see the amount of time spent in the area. As an example, the Google Analytics script took some time in certain areas.

image

So, I can double-click a line to jump into the location in debugger.

image

Memory

The memory option will capture the overall memory spent within a page. If there are memory leaks on your site, you can take a baseline snapshot and additional snapshots to see any potential memory issues.

image

Emulation

The emulation option allows developers to emulate beyond just a version of Internet Explorer. Previous versions of IE would allow you to change the version and jump into quirks mode. This version offers something similar, but by default, runs in “edge” mode. Edge mode is the latest version of web standards running in IE. You can also change to a Windows Phone mode instead of Desktop. While it’s not a best practice to detect a browser based on user agent string, you can change the user agent string that’s being relayed to the web server in the emulation screen. Additional options allow you to specify the orientation and geolocation information. These two settings allow developers to simulate the most common tablet functionality. The emulation tab looks similar to the following:

image

Wrap-Up

Hopefully this post provided some insight into the new developer tools provided in Internet Explorer 11.

Upgraded My Hosting Provider and Website

This was long overdue. For quite some time now, I was running a very old version of Orchard CMS. I was also using a low-cost shared hosting provider. My site was sluggish and would time out… often. I decided it was time to switch to Orcsweb shared hosting. I spoke with Brad Kingsley who recommended that I make the switch. Since jumping to Orcsweb, I’ve been happy with the extremely efficient service and the response time of my site. However, I wasn’t done. I spoke with Abhishek KumarLuv regarding my Orchard instance. We’ve chatted in the past via Twitter and I know that he has had experience upgrading. He offered his services to convert my site to Orchard 1.7.1. Kudos to him. Although the site was already running extremely efficient over at Orcsweb, he made it run even better.

I have nothing but thanks and praise for both Abhishek and Orcsweb. Hopefully you consider Orcsweb to host your site and be sure to visit Abhishek’s website www.codeabstract.com.

Solving TFS400018: The local version table for the local workspace…

Today I hopped back into Visual Studio 2012 to update a project from TFS. To my surprise, I was greeted with the following error:

clip_image002

After some unsuccessful online searching, I used a snippet I had found within an MSDN forum post. It mentioned to delete the workspace cache from the machine at C:\ProgramData\Microsoft\Team Foundation\… As I navigated through, I noticed the C:\ProgramData\Microsoft Team Foundation Local Workspaces folder instead. After exiting Visual Studio, removing the folder, and trying it again, it worked.

T-SQL Count of Tables, Views, Stored Procedures and Functions

Have you ever needed to obtain a list or count of all tables, views, stored procedures, and functions in a database? It’s quite easy. Simply copy the T-SQL from below to a query window, set the desired database and execute.

SELECT * FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE='BASE TABLE'
SELECT * FROM INFORMATION_SCHEMA.VIEWS
SELECT * FROM INFORMATION_SCHEMA.ROUTINES WHERE ROUTINE_TYPE = 'PROCEDURE'
SELECT * FROM INFORMATION_SCHEMA.ROUTINES WHERE ROUTINE_TYPE = 'FUNCTION'

This will produce four result sets that will list the tables, views, stored procedures and functions. You can simply update the select statements with the keyword count to grab the count of each object if that’s all you are looking for.

Converting Unix Epoch to Date in Excel

I ran into an interesting problem earlier today. I was using a CDR dump from our Cisco system. However, all of the datetime fields were represented as seconds. I knew right away that it used an epoch value. What I didn’t know is what the originating date was. Apparently, I was correct at my first guess. I guessed that it was using the standard Unix epoch value of 1/1/1970. Many applications, such as Microsoft Excel, use 1/1/1900.

Since I wanted to represent the correct date and time in Excel, I began looking around for a formula. To my surprise, nothing exists out of the box (unless my eyes are failing me). So, I had two options. The first option I headed down had me save my spreadsheet as a macro-enabled workbook. From there, I added a formula to an empty module.

   1: Public Function EpochConversion(timeZoneOffset As Long, myNumber As Long, myDate As Date) As Date
   2:     EpochConversion = DateAdd("s", myNumber + (timeZoneOffset * 3600), myDate)
   3: End Function

The function accepts 3 parameters: timeZoneOffset which is the offset from GMT (for example, New York City is in the Eastern Time Zone which is –5), the number of seconds, and the base date (in the event I need to use 1/1/1900 instead). So, an example use would look like this:

image

That works, but it requires that my spreadsheet is a macro-enabled workbook. I can accomplish something similar by using the following formula. This is my second option for handling the conversion.

=(((G2-(5*3600))/86400)+25569)

In this formula, the following values are used:


G2 The cell containing the number of seconds from epoch.
- If you are in the western hemisphere, this would be negative. Otherwise, change this to a plus sign. This handles the offset from GMT.
5 The is the value of the timezone from GMT. It’s combined with the minus sign above.
3600 The number of seconds in an hour used to assist with the timezone offset.
86400 The number of seconds in a day.
25569 The number of days since 1/1/1900 to assist Excel in the proper epoch conversion of 1/1/1970.

In either case, I’ll obtain the same result.


One thing is for sure, I’m hoping that I’m retired by January 19th, 2038 so that we don’t have another Y2K crisis when the 32-bit versions of epoch have overflows: http://2038bug.com/.

Office Ergonomics – Carrying Laptops and Work

Last night, August 7th, on World News with Diane Sawyer, their research team collected evidence to show how carrying purses and other items can cause harm if too heavy. According to their research, a single shoulder strap bag, such as a purse, messenger bag, duffle bag, should not weigh more than 5% of your body weight on a consistent basis. So, if you’re a male weighing in at 200lbs, your bag shouldn’t be more than 10lbs. I wanted to see what that meant for me. I currently carry a 17” Dell Precision M6700 that weighs in at 7.76lbs. That’s hefty, but it’s something that I feel is needed for the line of work I use. I’ve been using a backpack, but I’ll cover that in a bit. For this example, I’ll use the weight of the new messenger bag that I purchased for me and my team. Over on Amazon, we had purchased the 17.3” Microsoft Impact Messenger Bag for $43. Amazon states that the shipping weight is 2.9lbs. I didn’t weigh it, but the bags I purchased with shipping packaging weighed on average 3.5lbs. So, I’ll assume this bag weighs in at 2.9lbs. That’s already 10.66lbs before adding pens, paper, tablets, and anything else I may normally carry in my bag.

The more I thought about this, the more I started to think that I was an exception, right? So I looked around the office at some others that have laptops. Let’s assume another office worker has an ultra-light 13” Lenovo Yoga. According to their site, this comes in at 3.3lbs. Again, visiting Amazon, I came across a $17 Case Logic laptop bag/sleeve that weighs in at 14.4 ounces. So, at this point, we’re up to 4.2lbs. If that was all we were carrying, we’d likely be fine unless we weighed in less than 84lbs. However, once we start adding in a notebook, writing utensils, and a few other items, you’ll soon find that even going ultra-light, we can push the weight of our bag to the limit.

To solve this problem, we can always look to use lighter equipment or rolling bags minimizing the amount of carrying we do. We can also switch over to backpacks which are recommended for heavier equipment. Patch.com estimates that back packs should not exceed 10% to 15% of your body weight. For the office crowd, a 17” SwissGear ScanSmart Backpack is ideal.