Bootstrap 3 released

Posted on by Posted in Bootstrap, Frameworks, Web Development Leave a comment

Back in June I wrote about the availability of Release Candidate 1 of Bootstrap 3. Today the finalized version have been released.

A sample site created with Bootstrap 3

 

If you are migrating from version 2 to version 3, here is a list of what changed.

Among the many changes is a modified grid system, using percent instead of pixel-based width, responsiveness built in to the code files, a new flatter/cleaner look, and a number of new elements. You can read more in Kathy Brown’s article at SocialBizUG.org.

You can read more at http://getbootstrap.com/, where you also can download it. If you prefer to use a CDN (Content Delivery Network), you can use BootstrapCDN at http://www.bootstrapcdn.com/

Also, if you are developing using XPages, don’t miss Philippe Riand’s latest amazing project, Bootstrap for XPages. It uses Bootstrap 2.3, as version 3.0 probably will not work correctly in XPiNC (XPage in Notes Client), due to the fact that support for IE 7 and Firefox 3.5 have been dropped in the latest version.

Steve Ballmer announcing he will resign – Microsoft stock up 7%

Posted on by Posted in Software, Technology Leave a comment

Microsofts CEO Steve Ballmer this morning announced that he will resign within the next 12 months. The 57 year old CEO will depart after a successor is choosen.

Directly after the announcement, Microsoft shares went up 7% in the first hour of trading. Microsoft under Steve Ballmer have been criticized for his directions by investerers and others.

Microsoft stock at 10am Friday August 23

Microsoft stock at 10am Friday August 23

Microsoft Store – #fail

Posted on by Posted in Computers, Tablets, Technology Leave a comment

I visited Houston this weekend, and we decided to go to the Microsoft Store in The Galleria. The plan was to look at the Surface devices for a project I am currently working on (I will blog about this later this year, when we are closer to release). The thought was to take a look at the application on the web, before decided which device(s) to get for further testing. We also went to the Sony Store (pretty much next-door to Microsoft) to look at some laptops and to the Apple Store on the level above to check out their devices.

At Sony there was no problem looking at their laptops and other devices. They did not really have any tablets we were interested in, but we were still able to look at our application on their laptops, using Windows 8. Same thing at Apple, I accessed the application on an iPad Mini, no problem.

image

Then we went to Microsoft, and I started playing with a Surface RT device. Nice small form factor and, and surprisingly nice keyboard. I entered the URL for my server and expected the login prompt to show up. Instead I was redirected to the Microsoft Store webpage. OK, perhaps I had typed something wrong in the URL. I tried one more time, making sure the address was correct. Same result. We then asked a girl working in the store what was wrong. She explained that most pages are blocked, only a small number of commonly accessed pages were avaliable to surf to. That was supposedly because people went to “inappropriate pages”.

So obviously Microsoft don’t have access to the blocking technology that most companies (including the one I work at) use to block online gaming, adult sites or other categories deemed not appropriate for work. Why even have a store, when Best Buy or similar places is a much better place to actually test the device? Total fail by Microsoft.

“Do again, do right”, as my instructors in the Swedish Army would have said.

 

Note: The picture was taken with my Samsung Galaxy S4, using the camera mode to erase moving objects. At least 3 people walked in front of me while I took the picture, but as you can see, the phone did a good job at erasing them!

Google Chromecast – First Impressions

Posted on by Posted in Gadgets, Reviews 2 Comments

This weekend I got hold of Google’s latest gadget, Chromecast. As you may know, it is a small device, the size or a large thumbdrive, but with an HDMI connector instead of a USB connector.

It allows you to stream video (currently from Youtube, Netflix and Google Play) to a TV, as well as mirror the screen of the Chrome browser on the TV. In the box, you get the device, a USB wall charger, a mini-USB cable and a short HDMI extension cable.
image

The installation is extremely simple. First of all, you need a wireless network, and a device running Android, iOS  or the a Windows/Mac computer running the Chrome browser.
Plug the Chromecast device into an available HDMI-port on the TV, connect the mini-USB power adapter and plug it into an outlet.
image

Power on the TV, and you are directed to download the app to your smartphone/tablet or a small program to your computer. On the computer you also download an extension to the Chrome browser that let you mirror the screen on the TV.

I downloaded the Android version of the app on my Samsung Galaxy S4, and it found the Chromecast device at once. I connected to the device, and was now able to start playing videos. The total time to hook everything up, installing the software and connecting my phone to it took no more than 3 minutes.

image

After playing a couple of Youtube videos and starting a movie on Netflix, I decided to test the screen mirroring. The browser extension simply adds a small icon in the browser, and when I click it, the contents of the browser (excluding the title bar, menus, status bar, etc) are displayed on the TV.
image

I tested some streaming video from Swedish TV, watching a news show. It worked perfectly, but there was a delay of between 2 and 3 seconds between the computer and the TV.

The sounds comes out of the TV speakers, and during my testing the sound and picture quality was good. I was not performing the test on my network at home, and because of a sometimes weak signal, one of the Youtube videos had to buffer a bit.

The Chromecast device works by running an embedded version of Chrome OS, which in turn is based on Linux. It then stream videos to the TV directly from the source. Netflix, Youtube and Google Play all have software in the device to handle their streaming content. The laptop, tablet or phone is just a remote control, starting/stopping/pausing the video (or in the case of Netflix, going back 10 seconds if you missed something). I am guessing that the screen mirroring works the same. I would imagine that the browser plugin is just sending commands to the embedded Chrome browser in the device, duplicating what happens on the screen.

So what is my verdict? Well, for $35, it is a great little gadget. For me personally it is perfect, I can now watch TV shows from Sweden even while in the US, without having to hook up a computer to the TV. I can use a laptop or smart phone as a remote. I have not been able to get Chrome on Android to mirror it’s screen, but I can see apps and hacks for Chromecast coming out very soon.
image

If you already have Youtube and Netflix in your TV or blu-ray player, then Chromecast might not be as interesting. But if you want to use the screen mirroring, it is great. That function would also be very good for presentations on a big screen TV. In short, a very cool and fun gadget, to a very reasonable price. It is not threatening Apple TV or Roku yet, but is a nice low-cost alternative.

Currently it is very hard to get hold of a Chromecast, they sold out within hours of becoming available. A big thanks to Chrissy Hull, who let me test the one she got, making this review possible.

Today I became the father of a teenager

Posted on by Posted in Generic, Personal Leave a comment

On August 2, 2000 at noon my son Erik was born, almost a month early, through emergency cesarean. His weight was just 4 lbs 6 oz, and he was tiny.

image

image

Today Erik turns 13, he is already taller than his mom and not that much shorter than me. That little thing that only slept, ate and produced dirty diapers is now playing soccer, building LEGO and even taking a shower occasionally when forced… :-)

Happy birthday, Erik! I am very proud of you. You are a great son.

image

Bootstrap 3 Release Candidate 1 available

Posted on by Posted in Bootstrap, Frameworks, Web Development 2 Comments

As of this last weekend, Release Candidate 1 (RC1) of the next major version of Bootstrap became available. You can also use the hosted version at BootstrapCDN.

There are many changes in this version, and among them I want to point out a few that I consider important:

  • No more support for old browsers like Internet Explorer 7 and earlier or Firefox 3.6 and earlier. This avoids many hacks, and makes the code faster.
  • Mobile first- Responsive CSS is no longer in a separate file, but included in the core CSS file.
  • Overhauled and simplified grid system, including more friendly to mobile devices where they scale up and down better. Grid system is using percentage instead of pixel, which helps in mobile websites.
  • Buttons – “fewer but better”, per the documentation. Buttons look simpler/flattened.
  • Moving Glyphicons to a separate repository, instead of integrating with Bootstrap. This should make it easier to use Font Awesome as replacement.
  • “Hero unit” renamed “jumbotron”.
  • Added new components: Panel, List group
  • Submenus have been dropped.
  • And many more changes…

There is no official release date yet, but I think we can expect the final version in a month or two.

Some useful jQuery plugins – Part 1

Posted on by Posted in Javascript, jQuery, Web Development 4 Comments

I often find cool and (sometimes) useful jQuery plugins, so I want to share a few that I like. I plan to share more in the future.

 

Adipoli jQuery Image Hover Plugin

Includes several different effects to highlight images as the mouse hovers over them.

Adipoli Hover jQuery

http://cube3x.com/demo/adipoli-jquery-image-hover-plugin/

 

jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bars and preview of images, audio and videoy. Supports cross-domain, chunked and resumable file uploads and client-side image resizing.

jquery-upload

https://github.com/blueimp/jQuery-File-Upload

 

iCheck

Customized checkboxes and radion buttons for your forms.

iCheck

http://damirfoy.com/iCheck/

 

Chosen

A plugin to make dropdown-boxes (especially long ones) easier to use. I looked at using this in a project, but ultimately opted to use another plugin, for different reasons. Chosen is still a good tool.

Chosen

http://harvesthq.github.io/chosen/

 

MagicSuggest

This is the plugin I selected over Chosen. The content of the dropdown can be supplied using an Ajax call, returning JSON, and there are a large number of configuartion options. The plugin support filtering and type-ahead, as well as many other useful functions.

MagicSuggest

http://nicolasbize.github.io/magicsuggest/

 

SuperScrollorama

A jQuery plugin for scroll animations.

scrollorama

http://johnpolacek.github.io/superscrollorama/

 

Sticky

Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.

sticky

http://stickyjs.com/

 

jQuery – An Overview

Posted on by Posted in Frameworks, Javascript, jQuery, Notes/Domino, Programming, Web Development 1 Comment

Yesterday my boss asked me about a simple overview/tutorial explaining jQuery, Bootstrap and some other web technologies, and how they work together. I decided to also post the result on my blog, so here is the first part. You may recognize some code from a previous blog entry.

jQuery is a currently very popular Javascript framework/library. There are other ones, like Dojo (used by IBM in XPages) and YUI (originally developed by Yahoo), but jQuery is right now at the top when it comes to usage.
jQuery contains the plumbing behind the scene, it contains functions to let the different elements on the page talk to each other and interact, for example trigger events on click or change. It also have functions to hide and show elements (either directly or fade in or out).

One of the big benefits with jQuery is that many functions are much easier to do than in traditional Javascript. It also addresses browser inconsistency, so you don’t have to write different code for Firefox and Internet Explorer. jQuery is Javascript, just packaged in a nice library and simplified. There are also UI components and mobile components, found in jQuery UI and jQuery Mobile. Here are a couple of examples, comparing plain Javascript with jQuery: http://blog.jbstrickler.com/2010/06/vanilla-javascript-vs-jquery/.

jQuery ties into the DOM (Document Object model) of the browser/webpage in a very easy-to-use way. The way elements are addressed is identical to how you do it in CSS, using . (dot) for classes and # for individual elements.

It is not hard to start with jQuery. You do not even have to host the library on your own server, several companies (including Microsoft and Google) host jQuery (as well as other libraries and frameworks) in what is called a CDN (Content Delivery Network). You simply include a line of code in the head section of your HTML, telling the browser to load jQuery from a specified location, and you are all set:

<head>
    <title>Hello, jQuery</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>

Notice that you don’t use http: or https: at the start of the URL. This is a trick that makes it work both on a http or a https site. However, if you have the code locally in the file system on your computer (like many do before uploading the html file to a server), you must add http: at the beginning for it to load.

Let take a look at our first jQuery example. Below we have a very simple piece of HTML code:

<body>
    <button id="btnSave">Save</button>
    <div id="messageBox"></div>
</body>

What we want to do is that when the button is clicked, a message should be displayed in the div with ID messageBox. That is done with the following piece of jQuery:

$("#btnSave").click( function() { 
    $("#messageBox").html("You clicked the Save button."); 
});

What this do is to replace everything inside the div with the text/HTML code we specify. The second line is the code to execute when the event specified triggers/fires. You can put triggers on almost any element, and depending on the element type, you have different triggers.

The code between the first and last curly brackets { } is being executed when the event is triggered. As you can see, I have the code I showed earlier nested inside this code. What all this does is to wait until the page is loaded, then start creating event triggers.

There are two schools when it comes to where you put the jQuery code. Soem developers prefer to put the code inside <script> tags at the end of the page, after all HTML code and right before </body>. That is is so that the code is not executed until the page (and all the elements on it) have been loaded.

There is another way to do it, as well. This one allows you to put the code in the <script> section of the header section, but it us using jQuery to not load any code until the page has finished loading:

$(document).ready(function () {
    // Setup the element with id "btnSave" to react on click
    $("#btnSave").click( function() {
        // When clicked, set the innerHTML of the element with
        // id "messageBox" to the specified html string.
        $("#messageBox").html("You clicked the Save button.");
    });
});

The important thing is that you can not start put events on elements until they have been created on the page, or nothing will work.

One of the really cool features with jQuery is how easy it is to call another page/url and get something back. This is commonly called Ajax (Asynchronous Javascript and XML), even if it these days more often than not involves getting JSON back instead of XML.
JSON stands for Javascript Object Notation and is a way to package data in the same way you would do if you created a Javascript object. A simple example would look like this:

{
    "FirstName":"Karl-Henry",
    "LastName":"Martinsson",
    "Department:"IT"
}

I can now assign the object to a variable (let’s call it employee) and I can then access the values using regular Javascript:

alert(employee.FirstName + " " + employee.LastName + " works in " + employee.Department);

This ease of parsing makes JSON ideal to use to retrieve values from a data source and display them on a webpage, using Javascript.

Let’s look at a more complicated example. I will call a URL on a server, which will trigger an agent to run to retrieve data from a database and return it in HTML format. This particular URL points to a Domino agent written in Lotusscript, but it could be written in any language supported by the server, like php. For a Domino server, you could also use an XPages agent.

Here is the Javascript code to call a URL and put the content returned into a element on the web page:

function loadProgressNotes(clientunid) {
    $.ajax({
        url: "/mydatabase.nsf/GetProgressNotes?OpenAgent",
        data: {"ClientUNID":clientunid,"Start":"1","Count":"10"},
        cache: false
    }).done(function(returndata) {
        $("#progressNotes").html(returndata);
    });
}

I broke this code out as a separate function, as I need/want to call it in several places. The function just contains one single jQuery function call, .ajax(). I pass a Javascript object to the function, containing the data needed by the function. Many jQuery functions works like this, you pass a Javascript object with arguments instead of passing a large number of individual arguments. You can do the same in Lotusscript, by passing an object or a custom data type to a function instead of numerous arguments.

In this particular case, I am calling .ajax() with 3 arguments. The first one is the URL to go to, the second one is the data to send to that URL, and the last one is a flag telling jQuery to add a cache buster to the end of the URL it constructs. If I would not add that, and I had recently made the same call, I would get old data, as web servers and browsers cache data for performance reasons.
The interesting thing in the code above is perhaps that the data I pass to the URL are itself a Javascript object, so we have a Javascript object where one of the elements is another object.

So what happens is that jQuery performs a call to www.domain.com/mydatabase.nsf/GetProgressNotes?OpenAgent&ClientUNID=something&Start=1&Count=10&_15614312653

The last number is the cache buster, simply a timestamp (milliseconds since midnight, Jan 1, 1970).
The program/agent on the server reads the arguments, performs whatever database lookup it needs, and generates HTML based on that. This HTML is returned by the .ajax() call in data above. The jQuery call is sitting in the background and waiting for the agent to return the data. When this is done, the .done() event is triggered.
In that event, I have written some jQuery code to update the contents of the element called “progressNotes” with whatever the AJAX call returns, in this case some HTML.

It may be more common to have the agent return JSON and parse it, putting different values into different elements on the page. Here is an example, where I go through all the input fields and text area fields on a HTML form and collect the field values/contents for any of the fields having the custom attribute called notesfield. The value of the attribute is the field name in the Domino database, making it very easy to send the data to the correct place on the server.  A typical input field could look like this:

<input notesfield="FirstName" type="text" value="" placeholder="First Name">

Below is the Javascript code, using jQuery to update the record in the Domino database and return JSON that will indicate success or failure, as well as a custom message that will either explain the reason for failure or a message that the document was updated.

var json = new Object();

myjson["ClientUNID"] = "E7A2D820EE10123C86257BAD0056A5F4";

$('input[notesfield]').each(function() {
    fieldname = $(this).attr("notesfield");
    fieldvalue = $(this).val();
    myjson[fieldname] = fieldvalue;
});

$('textarea[notesfield]').each(function() {
    fieldname = $(this).attr("notesfield");
    fieldvalue = $(this).val();
    myjson[fieldname] = fieldvalue;
});

$.ajax({
    url: "/mydatabase.nsf/UpdateClient?OpenAgent", 
    data: myjson,
    cache: false
}).done(function(returndata) {
    if (returndata.status=="Error") {
        $(".errorMessageClient").html("Error! " + returndata.msg).show();
    } else if (returndata.status=="Success") {
        $(".successMessageClient").html("Success! " + returndata.msg).show();
    });
});

As you can see, it is easy to retrieve values from the JSON you get back.

That’s all for now. Next time I will talk about Bootstrap.

Free Bootstrap tools

Posted on by Posted in Frameworks, HTML/CSS, Javascript, Web Development Leave a comment

I started using Bootstrap a while back, and really enjoy the fact that I quickly can build a website/application using the framework. But there is always room for improvement. I found some useful tools that will help you, if you are using Bootstrap, to build your pages even quicker.

The first resource is Divshot, a online tool/interface builder where you can design your pages, then get the HTML code and insert it into your page. I just started using it this weekend, but it is a brilliant tool, easy to use and very helpful. It’s currently in free beta, you just need to register.

DivShot editor

DivShot editor

Update: DivShot is now a commercial product, but you can use it for free if you just have one single project.

Bootbox.js is a Javascript library that help you create programatic dialog boxes.

prettyCheckable replaces the standard checkboxes with nicer looking ones.

Datepicker for Bootstrap is (as the name indicates) a datepicker, made to match the Bootstrap look.

jQuery Form Validation is using the Bootstrap stylesshet to make it match the rest of the framework. I haven’t tried this one yet, but it looks very useful.

Fuel UX is another way to extend Bootstrap with additional controls. Very nice looking!

Lavish is a cool online tool that takes an image and creates a color scheme based on it for use in Bootstrap.

 

You can find these tools and more here.