An opinion on including multiple JS files in your project

There are many ways to solve an issue. Some work better than others though their pureness may be questionable. Getting many JS scripts and modules loaded is one such puzzle. I’m not a huge fan of require.js for a number of reasons that are already clearly, and eloquently, expressed by others. It is great at what it does, just not what I really want to use.What I do like is using a tool such as YUI compressor to facilitate delivering robust production code.

The following code is something I found on http://www.laurencegellert.com/ which I have since extended and included into my own projects.

#!/bin/bash

# This script generates the following:
# Combined and minified javascript file for use in the app

echo
"Combining JavaScript into temp files."

# temp.js is the uncompressed file with everything combined
cat
./app/js/jquery.js
./app/js/file1.js
./app/js/scriptX.js
./app/js/xyz.js
> ./app/js/temp.js

echo
"Compressing Combined JavaScript."
java
-jar yuicompressor-2.4.7.jar --type js -o ./app/js/temp.js --charset utf-8 ./app/js/combined.min.js

echo
"Cleaning up temporary files."

rm
./app/js/temp.js

And yes, I do work on OSX as well as Win8.

Google Web Designer

Google has released a new tool, named Google Web Designer, for creating interactive HTML5 sites and ads. It has a modern WYSIWYG where you don’t need to dive into the code but use the features to get the output and the tools are mostly design-oriented. However, the code generated is always there and it can be edited or tweaked and the result is displayed automatically.

The tool comes with ready-to-use settings for designing Google-powered ads (DocubleClick, AdMob) that will work on any device. There are built-in components like 360 or carousel galleries, YouTube video embedding and more. A timeline exists for animations and anything can be drawn with a pen tool (not limited to shapes).

Google Web Designer is currently in beta status and it is available for both Windows + Mac.

Google Web Designer

https://www.google.com/webdesigner/

CSS Preprocessors: getting started with LESS and Sass

You probably have heard of LESS, Sass, Stylus, and others but may not have had a chance yet to figure them out. Here’s a very brief overview…

Why should you be using one of these?
CSS Preprocessors exist to help make your CSS more dynamic. They use their own languages, albeit all rather similar, to do the same things. They make CSS better 

  • Retain browser compatibility
  • Allow for the creation of variables using reusable CSS properties
  • Allow for better code by making it more scalable and modular
  • Introduce parent references, math, mixins, nesting, and error reporting

Which one should you use?
There is no bad choice. Like with anything else in programming other factors are the drivers here. Do you use Ruby? Then you will probably gravitate towards Sass. Are you a heavy Bootstrap user? Then consider looking at LESS or Stylus… Research and see which works for you.

Useful links to get started

  • LESS
    • LESS extends CSS with dynamic behavior such asvariables, mixins, operations and functionsLESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

  • Sass
    • Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rulesvariables,mixinsselector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
  • Stylus
    • “Expressive, dynamic, robust CSS”
  • SimpLESS
    • “The most powerful thing SimpLESS does: Save your *.less file and, BOOOM, SimpLESS generates a 100% valid standard CSS document out of it. No further steps, it’s that simple.”
  • WinLESS
    • “WinLess is a Windows GUI for LESS.js. WinLess is a must-have for the webdeveloper who uses Windows.”
  • nib
    • Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier.

Tabbing web parts in a SharePoint web part page using jQuery and jQueryUI

Like many others I found EasyTabs to be a great fix. It has matured into something really great but that is not always the right tool for me so I went looking for a simpler solution. I wrote some jQuery that trawled the page and moved content around. It worked just fine but then I came across some very similar code but that used jqueryUI to create more elegant tabs.

The original source for this along with some good comments can be found here.

The final code I used is below.

< !– Reference the jQueryUI theme’s stylesheet on the Google CDN. Here we’re using the “Start” theme — > 
< link  type=”text/css” rel=”stylesheet” href=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css” / > 
< script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”>< /script>
< script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js”>< /script> 

< script type=”text/javascript”>
    jQuery(document).ready(function($) {
// Visible title of each web part goes here.
        liTargetForTabs([“Web Part Title 1″,”Web Part Title 2”]);
    });

    function liTargetForTabs(TitlesOfWebParts)
    {
        for(index in TitlesOfWebParts)
        {
            var titlePassed = TitlesOfWebParts[index];
            $(“#liTargetForTabs”).append(‘< li>< a href=”#Tab’+index+'”>’+titlePassed+'< /a>< /li>’).after(‘< div id=”Tab’+index+'”>< /div>’);
            $(“span:contains(‘”+titlePassed+”‘)”).each(function(){
                if ($(this).text() == titlePassed){
                    $(this).closest(“span”).hide().closest(“[id^=’MSOZoneCell_WebPart’]”).appendTo($(“#Tab” + index));  }
            });
        }
        $(“#targetForTabs”).tabs();
}
< /script>
< div id=”targetForTabs”>
< ul id=”liTargetForTabs”>< /ul>
< /div>


IE10 Preview

Microsoft today has announced the availability of the second platform preview for its upcoming browser, Internet Explorer 10. The first platform preview was released in April. This new platform preview contains the same HTML5 engine seen in the recent public Windows 8 demos!

IE10 continues IE9’s precedent of enabling Web applications to do more in the browser without plug-ins. It also continues the pattern of offloading work to the parts of a PC that are best suited for them, like the GPU for graphics, and different processor cores for background compilation of JavaScript. Microsoft has been working on tying together Internet Explorer 10’s Trident rendering engine with Windows 8. Microsoft is expecting developers to use HTML5, Javascript, and CSS to build new immersive apps for Windows 8 and this new browser is yet another tool in doing so. Keep in mind that this platform preview has no toolbar, no address bar, and none of the regular menus.

You can read the full change list in the IE10 developer guide: here

Download Internet Explorer 10 Platform Preview 2: Internet Explorer 10 Platform Preview 2

SharePoint 2010 and JQuery

Recently somebody wanted to know how they could streamline activity on a site starting with reducing the overall page refresh count. Put simply, jQuery really is a lifesaver for this stuff. Combined with SharePoints web services and SPServices there is a huge amount that you can do without having to resort to writing any C#. The challenge, as with most things, is how to get started. Below are some simple examples of functional code that will work if you copy and paste correctly.

Example 1: Getting items from a list, in this case called “TestList1”, and output the raw response into a div tag called “demodiv1”
$(document).ready(function() {
$().SPServices({
debug: true,
operation: “GetList”,
listName: “TestList1”,
completefunc: function (xData, Status) {
var out = $().SPServices.SPDebugXMLHttpResult({
node: xData.responseXML
});
$(“#demodiv1”).html(“”).append(“This is the output from the GetList operation:” + out);
}
});
});

Example 2:  Getting all sub sites from a URL, in this case called “http://testserver/webapp1”, and output the raw response into a div tag called “demodiv2”
NOTE: The URL for the site can be defined in two ways, both shown. The one that is not commented is persistent – therefore rather useful!

$(document).ready(function() {
$().SPServices.defaults.webURL = “http://testserver/webapp1”;
$().SPServices({
debug: true,
operation: “GetWebCollection”,
//webUrl: “http://testserver/webapp1”,
completefunc: function (xData, Status) {
var out = $().SPServices.SPDebugXMLHttpResult({
node: xData.responseXML
});
$(“#demodiv2“).html(“”).append(“This is the output from the GetList operation:” + out);
}
});
});

Example 3: What kind of data exactly is being returned? Okay so if you have tried the first two examples you will have noted that the data really is kind of raw. Let’s see it in a popup. In this case the same code as above with a difference… Instead of updating a DIV tag we just populate a popup by using an alert.
Note: Play around with alert(“XML=” + xData.responseXML.xml); and alert(“xData: ” + xData.responseText);

$(document).ready(function() {
$().SPServices.defaults.webURL = “http://testserver/webapp1”;
$().SPServices({
debug: true,
operation: “GetWebCollection”,
completefunc: function (xData, Status) {
alert(“Status=” + Status + ” XML=” + xData.responseXML.xml);
});
}
});
});

Example 4: Okay, so now lets take the same data and wrap the title of each returned site in its respective URL inside of a DIV called tasksUL.

$(document).ready(function() {
$().SPServices.defaults.webURL = “http://testserver/webapp1”;
$().SPServices({
debug: true,
operation: “GetWebCollection”,
completefunc: function(xData, Status) {
// now iterate through the results
$(xData.responseXML).find(“[nodeName=Web]”).each(function () {
// for each one found get the title and wrap it with the respective Url
$(“” + $(this).attr(“Title”) + ““).appendTo(“#tasksUL”);
                });
}
});
});

Creating a site tour with jQuery

Sometimes when you build a custom solution end users need a little bit of help, or time, in order to determine where everything is. Grounding them within the actual environment rather than within help pages is the fastest way in my opinion to get them up to speed. A great option is jQuery site tour.

Working either manually or in a timed fashion it highlights predetermined classes with text and images. Tooltips on steroids in a way… To use it, you simply have to add certain class to any elements that you want to describe in the walk-through. E.g. “tour_1″, “tour_2″ would look like:

1 <div class="box left">
2     <h2 class="tour_1">Create a tour>
3     <p>Far far away, behind the word mountains, ...p>
4 >

The following parameters can be set:

  • name: the class given to the element where you want the tooltip to appear
  • bgcolor: the background color of the tooltip
  • color: the color of the tooltip text
  • text: the text inside of the tooltip
  • time: if automatic tour, then this is the time in ms for this step
  • position: the position of the tip

Resources
There is a full article with a functional demo here: http://tympanus.net/codrops/2010/12/21/website-tour/

Browser detection: solving the quandary with a bit of PHP

The browser and its specific version can tell you a lot about your visitors. Not just that they are running OpenSolaris, Windows 7, or Chrome OS but much, much more. It also can help you enable, or more likely disable, certain features of your site, content, or application. Therefore it is more than critical to determine it correctly. It is/should be mandatory.

So what are your options. Precisely three.

  1. Do nothing
  2. Go client side
  3. Go server side

1 is not worth mentioning, 2 is typically performed by JavaScript which leaves 3.

Now leaving aside the potential impact on your caching mechanism/plans/shenanigans option 3 can bring some great benefits without sending the client browser any payload. But if you have to do it yourself it can be a royal pain as browser versions and new products are like beer. Everybody will try a new one but usually not for long. (that may need work.) So what to do? Cue Browser.php


Browser.php is a PHP class that helps this process by collecting data about a visitor’s browser such as:

  • platform used
  • browser
  • browser version

It is very easy to implement.

Typical usage

$browser = new Browser();
if( $browser->getBrowser() == Browser::BROWSER_FIREFOX && $browser->getVersion() >= 2 ) {
echo 'You have FireFox version 2 or greater';
}

Needless to say you must do the usual beforehand such as:
require_once(‘Browser.php’);
and
$browser = new Browser();

Resources: http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/

PHP: Finding the binary

The other day I was stumped, albeit rather briefly, by something I should not have been. I was scripting out some CRON jobs for a CRM system when I found out I could not locate where the hosting company had put the PHP binary. Now that is something you usually do not have to think about so it can easily fall into the ‘been a while’ category.

So if you ever find yourself asking, where is the PHP binary? or just where is PHP? Here are some steps to follow.

Telnet/Shell
If you have shell access via telnet, log in, and type “which php” and you should be given the location to use.

If you don’t have shell, try one of the following:

Create a php page with just the following: and then call the page, this should tell you the location of PHP.

echo system('which php');

If that does not work, though it should, try checking one of the paths listed under path in the ENVIRONMENT section of the output with this.Take note though that this will give you the environment path so you will still need to add /php to it…

echo phpinfo();

Smartupdater: A JQuery periodical updating mechanism

I often need to implement some kind of periodical updating functionality from client to server and vice versa. Aka a classic polling mechanism. Smartupdater is a jQuery plugin which simplifies the process of sending regular requests to a server (polling) and handling the responses. I have found it very useful, and easy to work with. It can be started or stopped on any event and the interval of the polling periods can be redefined as well as controlled remotely.

A simple example would be how to display the remote time on a server with a polling interval of 5 seconds. Note that the remote script is returning a JSON format like this: “{“servertime”:”hh:mm:ss”}”

$("#example1").smartupdater({
  url : 'gettime_json.php',
  dataType:'json',
  minTimeout: 5000 // 5 seconds
  }, function (data) {
    $("#example1").html(data.servertime);
  }
);

The returned results can then be displayed in a div tag…

    
      Time on server: hh:mm:ss

Download link: https://code.google.com/p/smartupdater/