Latest Postings
July 18 2024
New Visual Studio Workload Highlights Microsoft’s ‘Renewed Focus’ on WinUI
Developers doing Windows apps have a confusing arsenal of tools and frameworks to work with, but Microsoft is simplifying things a bit with a new Visual Studio workload that highlights the company’s “renewed focus” on the Windows UI Library (WinUI). Read the full article here.
If you or your team are looking for training to build apps, give us a call! Our expert instructors have been providing Visual Studio training for over 20 years! Let us tailor a class for your team to focus on what they need to accomplish. We have helped many organizations develop their own applications in-house instead of hiring expensive consultants, saving them time and money!
November 7 2008
If you spend any time coding CSS from scratch or debugging existing stylesheets, you know how tricky it can be to find that pesky error! Whether it is getting IE6 to play nice or just understanding where all that white space is coming from, these Firefox add-ons should help you do the job better and faster. I’ve only chosen a couple of my favorite add-ons and my favorite features of each. Feel free to include your favorite features or add-ons in the comments as this list is anything but exhaustive.
The Web Developer Toolbar by Chris Pederick has many useful features like an easy-access javascript disabler, a simple window resize to test 800×600 screen resolution, and an option to view all of the stylesheets associated with a page (easily searchable!).
One of my favorite features, however, is surprisingly simple and incredibly useful. Using the Outline menu, you can outline any block level element on the page with just two clicks of the mouse. Personally, I can end up spending minutes of wasted time adding borders to elements here and there trying to figure out why I am seeing too much or too little space in a certain area. No need to do that anymore with this feature. It outlines your div tags for you, making spatial debugging a much simpler and faster process.
My other favorite feature in the web developer toolbar is the quick access to the W3C XHTML validator. It will upload your local file and display your pass/fail status quickly and efficiently!
Next on my list is the Firebug add-on which again, has a wealth of useful and time-saving debugging tools. My favorite, by far, is what I’ve coined as their CSS specificity revealer. Ok, you got me, I just made that up. The feature I’m referring to goes something like this:
1. You add some CSS rule
2. Your CSS rule doesn’t work
3. You can’t figure out why it doesn’t work
4. You wish to yourself there was some tool out there that could tell you if someone wrote a rule that is somehow overriding your own
5. You realize that firebug has that very feature and you’re going to use it now!
Launch firebug after you’ve installed it and click the “Inspect” button at the top of the console. Now, watch the Style panel on the right hand side. As you mouse over different elements on the page, you will see which rules apply to which elements. You will also see which rules are being overridden by others as evidenced by the line through.
For instance, in the above example, the #description rule is overriding our normal <p> tag line height of 1.4em because #description is an ID (which will always have a higher specificity than a non-ID rule).
Personally, I think this feature of firebug makes it one of the best CSS debugging tools out there.
And remember, feel free to leave me some tips and tricks in the comments section if you have any!
October 3 2008
As I’ve learned to build website layouts purely in CSS, I have come across many hacks or workarounds for debugging browser inconsistencies. One that I never quite understood was the declaration
zoom: 1;
I knew that if I applied zoom: 1 to certain elements, a layout that once looked like the elephant man in Internet Explorer 6 would miraculously turn into prince charming. But what is zoom: 1? And why does it fix my broken layouts? This post is meant to shed some light on these issues without getting into the nitty gritty details.
To understand zoom: 1, we must understand the proprietary property hasLayout, courtesy of Internet Explorer (IE). The hasLayout property is an internal flag in IE that tells the browser whether or not a particular element is a “layout” element. IE makes a distinction between a layout element and a non-layout element in more ways than I can enumerate here. Suffice it to say that layout elements and non-layout elements are treated differently when IE renders the page. I have found that layout elements will interact differently with their floated and positioned neighbors. This usually manifests in strange vertical and horizontal spacing between the elements.
The hasLayout property cannot be altered by the style sheet author. It is internal. It is flagged as true by default for certain elements (like <table>, <body>, and <img>). It can also be triggered by the style sheet author by changing certain properties (like width, height, float, and zoom).
The zoom property is one of Internet Explorer’s proprietary CSS properties that allows the style sheet author to enlarge something.
zoom: 2;
The above zoom declaration does as you would expect, it makes something twice as big. So since the zoom property will trigger hasLayout, we can use it to force IE into giving certain elements “layout” which can help us with spacing issues between elements. In order to add zoom but avoid any detrimental effects, we just use
zoom: 1;
This keeps the element at the same size while still triggering hasLayout behind the scenes.
To use zoom: 1 to my advantage, my general rule of thumb has been to code my layouts by testing primarily in Firefox (or another standards compliant browser like Safari or Chrome). During the process of coding it, I will periodically test it in IE7 to make sure there are no major hiccups. Usually, I can get the layout working in both browsers without too many hacks. Once the layout is finalized in Firefox and IE7, I test in IE6. If the layout is way off in IE6, I immediately apply the declaration:
* { zoom: 1; }
which gives “layout” to all elements. This will often fix the major issues in IE6, and the rest is just pixel tweaking with conditional comments.
For a complete reference of hasLayout (much more complete than I have attempted here), read this article on having layout.
September 25 2008
Have you ever linked to another web page using the phrase “click here“?
If you are a webmaster, a web author, or a web content editor and you answered yes to that question, keep reading because this blog post is for you.
Why is “click here” the enemy? Let me start with a little anecdote about a phenomenon known as Google bombing.
One of the methods that Google uses to determine what your page is all about is to look at the link text (or anchor text) that others have used to link to your website. So, if there are a million links that say Amazon and link to Amazon.com, there is a good chance that a Google search on the word Amazon will return a first hit to Amazon.com. Seems logical, right?
Google also has a button called “I’m feeling lucky” that is often overlooked. Try it out. Go to Google and search on “Innovative Solutions Inc.” Instead of clicking the “Google Search” button, click the button to the right that says “I’m feeling lucky.” This will take you straight to our home page. Why? Because the “I’m feeling lucky” button takes you to the first search result that you would have seen if you had done a regular Google search.
How does this relate to Google bombing? Once upon a time, somebody decided to use their knowledge of Google’s indexing system to further their own political objectives. In particular, I remember being introduced to the George Bush Google bomb when I was in college. What happens is, a particular blogger, website, or internet community puts out a request to their readers to create a link to George Bush’s bio on the white house website with the link text of “miserable failure.” Eventually, as the scheme gains momentum, there are so many “miserable failure” links to the president’s bio that the Google bots integrate those links into their knowledge base. Eventually, you could type “miserable failure” into Google, click “I’m feeling lucky,” and there was George Bush’s smiling face on your computer screen. Pretty knifing, yes?
The point of this anecdote is to teach you that link text matters. If Google uses your link text to determine what a website is about, why not provide more useful information than a generic “click here”?
This is a helpful link to our website:
Our favorite technical training center in Sacramento, CA – Innovative Solutions Inc.
This is not as helpful:
Click here to go to our favorite technical training center in Sacramento, CA – Innovative Solutions Inc.
That is why I call it altruistic linking. You are doing your neighbor a favor, you are going to help their search ranking by linking to them with appropriate keywords. And hopefully, in turn, they will do the same for you.
September 10 2008
Learning web design can be easy with a WYSIWYG (what you see is what you get) editor, like Dreamweaver or Microsoft’s Expression Web. You create a new document and edit it like a PowerPoint slide or a new file in Microsoft Word. You add text, tables, and pictures. Voila, you have a web page.
More »