Category: Design

Things related to design

That annoying moment in a project when you discover you underestimated the complexity of a task

It happens. Hopefully less often as you get more experience under your belt. You take a quick look at a task on a project and based on previous experience with “similar” tasks, you give what you think is a fairly accurate estimate of how much time and effort it will take. And then you start into the task. Two hours in and you start rethinking that estimate because you’re learning that the task/project/problem is a bit more complex than you originally believed. The key here is not to freak out and try to rush and finish the task – that generally never ends well. The best option is to communicate – inform and educate the stakeholders on whats happening and provide a new estimate based on the reality of what you’re experiencing. Communicate early and often, but don’t overdo it or your communication will just become noise (or worse). This will help everyone stay on the same page.

And next time, your estimate will be even more accurate (and reality-based) because of this experience.

CSS classes based on page location

When styling SharePoint sites, it can be very useful to add specific styles to specific “pages” or views. Here’s a bit of jQuery/javascript code to make that possible. It works by grabbing the page location turning it into classes that are added to the body tag.


jQuery(document).ready(function($){
//use a javascript variable to hold the results of jQuery's "find the body tag" call
var $body = $('body');
//use a variable to capture and store the page url, also removing the 'http(s)://'
var url = window.location.href.replace(/http[s]?:\/\//, '');
//replace any .html, .asp(x), .php or .jsp file extensions
url = url.replace(/\.(htm[l]?|asp[x]?|php|jsp)$/,'');
//replace any '.' with '_' - ie. 'example.com' will become 'example_com'
url = url.replace(/[.]/g, "_");
//Wherever there is a '/', split url into a segment
var segments = url.split('/');
//Take these segments and add them as classes to the body
for (var i = 0; i < segments.length; i++) { $body.addClass(segments[i]); } });

For servers that prefer case sensitivity but allow either case to work (like SharePoint), and where that may cause unwanted headaches you can replace the line where we first define 'var url' with this:

var url = window.location.href.toLowerCase().replace(/http[s]?:\/\//, '');

Nearly automatic breadcrumbs

Breadcrumbs

var here = location.href.replace(/(\?.*)$/,'').split('/').slice(3);

var parts = [{ "text": 'Home', "link": '/' }];

for( var i = 0; i < here.length; i++ ) {
var part = here[i];
var pageName = part.toLowerCase();
pageName = part.charAt(0).toUpperCase() + part.slice(1);
var link = '/' + here.slice( 0, i + 1 ).join('/');
$('#siteBreadcrumb ol.breadcrumb').append('<li><a href="' + link +'">' + pageName.replace(/\.(htm[l]?|asp[x]?|php|jsp)$/,'') + '</a></li>');
parts.push({ "text": pageName, "link": link });
}

Generates breadcrumb links based on the URL/path of the document.