Bennett Adelson Technical Blog

Posts from the consultants at Bennett Adelson

JavaScript & CSS – Lessons Learned from the Field


In the past year, I’ve been able to work primarily on SharePoint intranet projects – both from the perspective of re-branding an existing site, as well as creating new, branded sites from scratch. These efforts were made much easier through the power of JavaScript and CSS, and they continue to be essential tools for any modern web development project. Here are some of the lessons I learned (sometimes the hard way) while working on projects in the past year:

Use the Right Tool for the Job

My three primary tools were Visual Studio, SharePoint Designer, and Internet Explorer’s F12 Developer Tools. Each has some unique advantages over the others, especially as code editors for viewing CSS and HTML. But I found that for the most part the Internet Explorer Developer Tools were the most indispensable of the three, mainly for its ability to inspect and modify CSS and HTML on the fly. Here, for instance, we can see & modify all the properties in effect on the highlighted section of text:

01

JavaScript & CSS Can Do Anything

While ‘anything’ might be an exaggeration, I did learn that more often than not, there was a solution for even the most complex problems when JavaScript & CSS were used effectively. Both have a large framework of methods and features that seem to meet any need, including dynamic run-time HTML changes. For instance,

· the function setTimeout() can delay the execution of your JavaScript (which can be useful if you’re waiting for something else to load), and

· the jQuery function addClass() can dynamically add a class to an element programmatically at runtime – this is useful if the element you’re referencing doesn’t get generated until runtime.

Internet Explorer 8 is a Pain

Many of my clients have some small subset of users who still need to use Internet Explorer 8, and from a JavaScript/CSS perspective, this continues to be challenge to my intranet projects. Fortunately, there always seems to be a IE8-specific fix that can be applied, and to ease the pain of integrating these one-off fixes, we can use features like conditional CSSRegistration:

https://tommdaly.files.wordpress.com/2012/05/2012-05-01_2256.png

or in-line CSS tags that target certain browsers:

03

The JavaScript & CSS Community is awesome

There are so many bloggers and developers who are actively sharing their expertise, tips, and tricks regarding JavaScript & CSS that, with a quick internet search, you always seem to be able to find the answer you need. And the people behind the frameworks are continuing to build on it, producing libraries like jQuery and others.

Leave a Reply or Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: