Web Dev
http://www.developer.nokia.com/Community/Blogs/blog/web-dev
<p>The Nokia Web Dev Blog is here to highlight some of the most interesting and most useful techniques, tools and toys on the web.</p>
simonmadine2013-05-22T03:46:58ZDynamic backgrounds without artifacts
http://www.developer.nokia.com/Community/Blogs/blog/web-dev/2012/05/03/dynamic-backgrounds-without-artifacts
<p>
<em>This is the second part of <a href="http://www.developer.nokia.com/Community/Blogs/blog/web-dev/2012/03/16/background-size-cover">the post on the City Pages header images</a>. If you want to read more about <code>background-size:cover</code>, start there.</em>
</p>
<p>
Now you have your large, dynamically scaling image, it's time to make it better. You might have noticed that when you scale an image up, it can appear low quality. When images are 'upscaled', it can have a bad effect on your users' perception of your page. Even if the effect is subtle, it can detract from any benefits gained in using <code>background-size: cover</code>. Fortunately, there are a couple of techniques we employ to lessen this problem.
</p>
<h2>Image rendering algorithm</h2>
<p>
It is possible to specify the algorithm the browser uses when it scales your image. The <code>image-rendering</code> attribute lets you choose, amongst other options, between 'faster, lower quality' and 'slower, higher quality'. In this use-case, we have only a single header image so there won't be a performance hit if we specified the higher quality option. Even though this isn't available in IE, we can use the IE-specific property <code>-ms-interpolation-mode</code> to achieve something similar.
</p>
<ul class="example-pair">
<li>
<h3>With:</h3>
<div class="scale-example-box" id="example-with-oq" style="width: 180px; height: 180px">
<img src="http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/example-icon.png" />
</div>
</li>
<li>
<h3>Without:</h3>
<div class="scale-example-box" id="example-with-os" style="width: 180px; height: 180px">
<img src="http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/example-icon.png" />
</div>
</li>
</ul>
<pre>
<code>
div {
width: 180px;
height: 180px;
background-size: cover;
image-rendering: optimizeQuality;
-ms-interpolation-mode: bicubic;
}
</code>
</pre>
<h2>Pattern overlay</h2>
<p>
Another possible way to minimise problems with upscaling is to add a subtle checkerboard effect on top of the image so it breaks up the artifacts and makes the image look better. When we first implemented this, we built it using a checkerboard pattern background-gradient (similar to <a href="http://lea.verou.me/css3patterns/#checkerboard">this one</a> but much, much smaller). This worked well in WebKit-based browsers but slowed down terribly in Firefox. On top of that, the CSS required to specify the gradient pattern was actually larger than the image itself would be. We decided in the end to use a transparent PNG included in our main sprite. It turns out that the clever answer is not always the best answer.
</p>
<p>
We add the pattern to the page by setting it as the background of the <code>:after</code> <a href="http://css-tricks.com/pseudo-element-roundup/">pseudo element</a>
</p>
<ul class="example-pair">
<li>
<h3>Example:</h3>
<div class="scale-example-box" id="example-with-after" style="width: 100px; height: 100px">
<img src="http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/example-icon.png" />
</div>
</li>
<li>
<h3>What it should look like:</h3>
<img src="http://www.developer.nokia.com/Community/Blogs//data/blogs/resources/300144/check-example.png" alt="Upscaling Example " />
</li>
</ul>
<pre>
<code>
div:after {
display: block;
background: transparent url(check.png) 0 0 repeat;
width: 100%;
height: 100%;
margin: 0;
position: absolute;
content: "";
</code>
</pre>
<h3>Selective solution</h3>
<p>
Adding a pattern like this can be a good solution when the image is upscaled but we don't want it to happen all the time. When the image isn't upscaled or when it is only minimally larger than the original size, it can be distracting. To avoid this, we specify these styles in a media-query block. We'll go into them in more detail in a future article.
</p>
<style>
.example-pair {overflow:hidden;margin:0 auto !important; width:400px;}
.example-pair li {float:right;list-style:none;}
.example-pair li:first-child {float:left;}
.scale-example-box {margin: 0px;border-width: 1px; border-color: #444444; border-style: solid;}
.scale-example-box img {width:100%;height:100%;}
p code {padding:0 !important;border:none !important;}
#example-with-oq img {
image-rendering: optimizeQuality;
-ms-interpolation-mode: bicubic;
}
#example-with-os img {
image-rendering: optimizeSpeed;
-ms-interpolation-mode: nearest-neighbor;
}
#example-with-after {
position:relative;
}
#example-with-after:after {
display: block;
background: transparent url('http://www.developer.nokia.com/Community/Blogs//data/blogs/resources/300144/check.png') 0 0 repeat;
width: 100%;
height: 100%;
margin: 0;
position: absolute;
top:0;
content: "";
}
pre code {border:none !important;padding:0 !important;}
pre {position: relative;}
pre:before {content: attr(data-syntax);position: absolute;right: 15px;font-weight: bold;font-size: 1.5em;}
</style>UIWeb TechnologyWeb2012-05-03T09:00:38ZsimonmadineSearch-based Deep-link Formats: Places and Routes
http://www.developer.nokia.com/Community/Blogs/blog/web-dev/2012/04/19/new-nokia-maps-api-url-creation
<p>
<a href="http://maps.nokia.com/">Nokia Maps</a> allows “deep links” to be created externally from the application which link to specific places, routes, addresses, etc. These deep links can be created by any other service and link directly into our application.
</p>
<h2>Where is this place?</h2>
<p>
This URL format will open maps.nokia.com and show a single address result directly on the map with a nice little bubble and everything.
</p>
<p>
<img src="http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/addressPreview.png" />
</p>
<p>
The address is formed by concatenating the various parameters of the address.
</p>
<code>http://maps.nokia.com/whereis/address</code>
<h3>Example</h3>
<p>
<a href="http://maps.nokia.com/whereis/unter%20den%20linden,%2021,%20berlin,%2010117,%20germany">http://maps.nokia.com/whereis/unter den linden, 21, berlin, 10117, germany</a>
</p>
<h2>Getting from A to B</h2>
<p>
This URL format will open maps.nokia.com and show a route and maneuvers on the map, and a detailed maneuver list on the left-hand panel.
</p>
<p>
<img src="http://www.developer.nokia.com/Community/Blogs//data/blogs/resources/300144/routePreview.png" />
</p>
<h3>URL Format</h3>
<p>
The address is formed by concatenating the various parameters of the address. We support up to 6 waypoints.
</p>
<pre>
http://maps.nokia.com/drive/address(start)/ address(waypoint1)/.../address(waypoint2)/address(destination)
</pre>
<h3>Example</h3>
<p>
<a href="http://maps.nokia.com/drive/unter%20den%20linden,21,berlin,10117,germany/invalidenstr,117,berlin,10115,germany">http://maps.nokia.com/drive/unter den linden,21,berlin,10117,germany/invalidenstr,117,berlin,10115,germany</a>
</p>
<h2>Summary</h2>
<p>
We strongly believe that this new API will make our users very happy. You only need one link to create route or to show the location. We hope you will have a lot of fun with it!
</p>
<style>
img {max-width:100%;}</style>Web2012-04-19T14:25:27Zw.weglinskaLittle Touches - Left Click
http://www.developer.nokia.com/Community/Blogs/blog/web-dev/2012/04/12/left-click-handler
<p>
One of the most fulfilling aspects of web development is being able to add nice little touches that most people wouldn't even notice. These are the kind of things that web devs put in for professional pride and knowledge of a job well done.
</p>
<p>
One of my favourite minor additions that we've sprinkled liberally around <a href="http://maps.nokia.com/uk/edinburgh">City Pages</a> and <a href="http://maps.nokia.com">Nokia Maps</a> is the 'Left Click Handler'.
</p>
<h2>Background</h2>
<p>
When you're attaching events to elements, whether using standard JS or jQuery, the standard technique is to attach to 'click'.
</p>
<pre>
<code>jQuery:
$(element).on('click', function() {
doSomething();
}
);</code>
</pre>
<p>
By default, this attaches to every variation of the click event – left-click, right-click, middle-click, click while holding shift, while holding control, while holding command – everything. From the developer point-of-view, this might be the easiest solution but from the user point-of-view, this isn't necessarily what you'd expect. The standard browser behaviour on right-click is to show the context menu while the standard shift-click is to open a new window or tab. There are several different kinds of clicks that all fire that same event and you need to figure out which one the user actually did. Middle-click? They want the current content or application state to stay in whatever form it is in the current tab and they want whatever your handler does to happen in a new tab in the background. Are they holding down control? Alt? Command? They could be intending to do any of the above things or a number of other things. Can you guarantee you want your event handler to run for all of them?
</p>
<p>
</p>
<p>
jQuery has handy normalisation for events. You can use this to make a simple little check for the probable intention of the user and be a bit smart about how you handle your handlers.
</p>
<h2>Solution</h2>
<p>
As good, conscientious developers (as I know you all are), the 'right thing to do' is to allow the user to maintain control over their actions. Whenever a click event is detected, the first thing the code should do is check whether it was a simple left-click or something more complicated. If it was a left-click, handle it they way you always intended to, if it was anything else, handle it the way the user expects – if they are trying to open the link in a new background window, let the link open in a new background window. If they want to see the right-click context menu, show them the right-click context menu. The jQuery snippet below will only call the attached event if it is a standard left-click event. Anything else will proceed according to the standard browser behaviour.
</p>
<pre>
<code>/** Attach event to element */
$('a').on('click', function(evt) {
handleLeftClick(evt,function(evt){ // our new call
alert('left-click')
}); // closing our call
});</code>
</pre>
<pre>
<code>
/** Wrap call to click handler to filter out non-left clicks */
handleLeftClick = function (evt, func, context) {
// Normalize Event - ensure the event is the same in all browsers
evt = $.event.fix(evt);
// Only show overlay on left click so middle click/shift-click/etc can open new tab
if (evt.which !== 2 && !evt.metaKey && !evt.shiftKey) {
evt.preventDefault();
func.call(context);
}
};</code><style>
p code {padding:0 !important;border:none !important;}
pre code {border:none !important;padding:0 !important;line-height:1.6;}
pre {position: relative;}
pre:before {content: attr(data-syntax);position: absolute;right: 15px;font-weight: bold;font-size: 1.5em;}</style>
</pre>Web TechnologyWebWeb Apps2012-04-12T13:55:12ZsimonmadineReliable Image Replacement
http://www.developer.nokia.com/Community/Blogs/blog/web-dev/2012/04/05/reliable-image-replacement
<p class="p1">
Web developers hardly have to deal with network-related issues. Most of the time the resources they have to deal with are completely under their control: images are served from a directory in the web server where the web site is hosted and perhaps cached by a content delivery network; CSS files and sprites are where they expect them to be, as well as all the other resources that contribute to the smooth functioning and good looks of their application.
</p>
<p class="p1">
Unfortunately, this is not necessarily the case when scaling up to big and complex systems. At Nokia maps we have a number of non-homogeneus systems and API that we use to retrieve the data to generate maps, routes and city and place pages. Moreover, we often deal with user-generated and 3rd-party-generated content such as reviews and photos. This normally leads to two types of issues: data consistency across different domain and missing resources. In this post I will be focusing on this last problem. More specifically I will describe how we deal with missing recommendation images in <a href="http://maps.nokia.com/city/spain/barcelona" title="Barcelona City Page on Nokia Maps">City Pages</a>.
</p>
<p class="p1">
When a City Page for a city is generated, one important piece of information that we show to our users is a number of recommended places to visit in such city. Recommendations are then presented in a grid with name, category and a picture of the place, as shown in the picture below.
</p>
<p class="p1 image">
<img src="http://www.developer.nokia.com/Community/Blogs//data/blogs/resources/300144/recommendation-grid-small.png" />
</p>
<p class="p1">
One problem that we have seen every now and then is that some of these pictures are missing. The complication is that we don't have any control on those resources: when the API we rely on tells us there is a picture for a place, we cannot do anything else but trust it. Unfortunately, sometimes the picture is simply no longer there: either the user that posted it decided to remove it, or the 3rd party provider deleted it or moved it somewhere else. Checking picture by picture in the back-end would slow down the page load quite a bit so for this reason we decided to tackle the problem on the front-end side.
</p>
<p class="p1">
Our template delivered by the server normally contains a list of places, each of them with the related picture or a placeholder for the place category in case there are no picture for that place. The URLs to photo and placeholders are normally inserted into the DOM as <a href="http://dev.w3.org/html5/spec/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes" title="Embedding custom non-visible data with the data-* attributes">data-* attributes</a> and displayed with a simple CSS rule for browsers that support <a href="http://www.developer.nokia.com/Community/Blogs/blog/web-dev/2012/03/16/background-size-cover">background-size: cover</a> and as an img element for non-modern browsers. This means that if the photo does not exist the user sees an empty grayish box in the best case and the little "missing image icon" in the worst case. This conveys a bad user experience.
</p>
<p class="p1">
The solution is very simple, but at the same time very effective. We basically rely on the browser to determine whether or not an image can be loaded. If the browser can't load it, then it probably does not exist, therefore we show the placeholder. In terms of code, we have the following.
</p>
<h3>
HTML
</h3>
<pre>
<code>
<ul>
<li data-image="http://lorempixel.com/120/100/sports"
data-placeholder="http://placehold.it/120x100"><h3>Sport</h3></li>
<li data-image="http://lorempixel.com/120/100/food"
data-placeholder="http://placehold.it/120x100"><h3>Food</h3></li>
<li data-image="http://lorempixel.com/120/100/people"
data-placeholder="http://placehold.it/120x100"><h3>People</h3></li>
</ul>
</code>
</pre>
<h3>
CSS
</h3>
<pre>
<code>
ul {
overflow: hidden;
width: 260px;
margin: 20px auto;
}
li {
width: 120px;
height: 100px;
float: left;
background-color: #ccc;
position: relative;
border: 1px solid #999;
margin: 2px;
}
li h3 {
font-family: 'Oleo Script', cursive;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 32px;
font-size: 24px;
line-height: 32px;
background-color: rgba(0,0,0,0.7);
color: #fff;
text-align: center;
}
</code>
</pre>
<h3>
JavaScript
</h3>
<p class="p1">
Again I used jQuery to simplify, but it easy very easy to do this without relying on frameworks.
</p>
<pre>
<code>
$(function() {
//Go through all the elements that should have a background
$('li').each(function() {
var $this = $(this),
img = $this.data('image'),
ph = $this.data('placeholder'),
imgObject;
//First of all, by default assign the placeholder image to all of them
//This way if an image fails to load the UI is not affected
$this.css('background-image', 'url(' + ph + ')');
//Now create an empty Image object
imgObject = new Image();
//Should an image fail to load (e.g. 404), replace the image data with the placeholder
//in case we need to use it later
imgObject.onerror = function() {
$this.data('image', ph);
};
//When the image finally loads, replace the background with the final one
imgObject.onload = function() {
$this.css('background-image', 'url(' + img + ')');
};
//Assign the src property: this forces the browser to preload and
//possibly cache the image and eventually either the onload or the onerror
//event will be triggered.
imgObject.src = img;
});
});
</code>
</pre>
<p class="p1">
The JavaScript code as I said is very simple and it is pretty well commented, so I believe it does not need any further explanation. If you have any questions though, feel free to ask in the comments section.
</p>
<p class="p1">
In the <a href="http://jsfiddle.net/mmarcon/PRFS7/show/" title="Reliable Image Replacement Demo">full demo</a> I included an additional list element in the HTML that points to an image with invalid URL. The bottom-right element will therefore show the placeholder. All the code is available as a <a href="http://jsfiddle.net/mmarcon/PRFS7/" title="Reliable Image Replacement JSFiddle">JSFiddle</a>.
</p>
<style>
.example-pair {overflow:hidden;margin:0 auto !important; width:400px;}
.example-pair li {float:right;list-style:none;}
.example-pair li:first-child {float:left;}
.example-box {margin: 0px;background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-color: black; border-width: 1px; border-color: #444444; border-style: solid; background-image: url('http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/example-icon.png'); }
p code {padding:0 !important;border:none !important;}
pre code {border:none !important;padding:0 !important;}
pre {position: relative;}
pre:before {content: attr(data-syntax);position: absolute;right: 15px;font-weight: bold;font-size: 1.5em;}
p.image{text-align: center;}
</style>UIWeb TechnologyWeb2012-04-05T00:13:22ZmmarconBuild your own carousel
http://www.developer.nokia.com/Community/Blogs/blog/web-dev/2012/03/29/carousel
<p>
Nowadays, whatever effect or component a developer may need for a website or web application is available in the form of a jQuery plugin. Every other day I see a blog post with a title like "The best 25 jQuery carousels" or "The best 50 photo gallery plugins for jQuery".
Alright, I get it, one should not reinvent the wheel: if somebody builds a plugin that suits your needs it makes sense to use it rather than spending time reimplementing the whole thing from scratch by yourself.
Unfortunately too many times developers are willing to adapt their markup or even their layout to accommodate the requirements of the plugin they use. Often plugins expose several features and support endless options for customization: while this may result very convenient, the price is a quite large amount of code that in most cases is unnecessary. This translates to more bytes (or kilobytes) delivered to the user's browser and possibly an increased perceived loading time for the web page containing the widget.
</p>
<p>
In situations where keeping the codebase small and efficient is crucial, it is probably worth to invest a little time and write a completely customized component from scratch, strictly based on the needs. Eventually with a few bytes more the widget can be converted to a simple plugin in case it has to be used in other pages or application components.
In the last few weeks at <a href="http://maps.nokia.com/city/germany/berlin" title="Berlin City Page">City Pages</a> we have been working on a new feature that required a carousel to nicely display some information to the user. After a quick analysis of the problem we chose to implement our own little carousel instead of relying on any of the thousands of plugins out there: this way we could quickly come up with a completely customized carousel component with only a few lines of JavaScript and some small changes to our CSS file.
In this post I am going to explain how to build a carousel using jQuery and some CSS tricks, following the steps we took when developing the one for City Pages.
</p>
<h3>The idea</h3>
<p>
Here is what the final carousel will look like.
</p>
<p class="image">
<img src="http://www.developer.nokia.com/Community/Blogs//data/blogs/resources/300144/shot.png" alt="Carousel Screenshot" align="middle" />
</p>
<p>
The carousel will slide horizontally with a nice sliding animation and will be a circular carousel in the sense that after the last item the first one is shown. In order to obtain this circular effect the carousel items will be arranged by the script as follows:
</p>
<p class="image">
<img src="http://www.developer.nokia.com/Community/Blogs//data/blogs/resources/300144/CarouselDiagram.png" alt="Carousel Diagram" />
</p>
<p>
The last item is cloned and placed before all the other items and the first item is cloned and appended at the end. When the viewport is showing number 1, sliding backwards animates to the cloned version of number 3 and then seamlessly changes the viewport to the actual number 3.
The next sections describe in details the markup and CSS for the carousel and the JavaScript code that creates the interaction.
</p>
<h3>The markup</h3>
<p>
First of all we need some markup. It can be either generated on the server side - good for SEO purpose - or dynamically created front-end side, but here is what it should look like:
</p>
<pre>
<code>
<!-- A container for the carousel -->
<div class="carousel-wrapper"> <!-- The actual carousel -->
<ul class="carousel">
<li class="item">
<img src="some/image/here.png" alt=""/>
<p class="text"><!-- Item text here --></p>
</li>
<li class="item">
<img src="some/image/here.png
<p class="text"><!-- Item text here --></p>
</li>
<li class="item">
<img src="some/image/here.png
<p class="text"><!-- Item text here --></p>
</li>
<li class="item">
<img src="some/image/here.png
<p class="text"><!-- Item text here --></p>
</li>
</ul>
<!-- The prev/next controls -->
<div class="carousel-nav">
<a href="" class="prev">&lt;</a>
<a href="" class="next">&gt;</a>
</div>
</div>
</code>
</pre>
<p>
There is not much to say here: we have a wrapper block that contains the carousel itself and the navigation controls. The carousel is a ul element and the carousel items as expected are li elements in a perfectly semantic and SEO friendly fashion.
</p>
<h3>The CSS</h3>
<p>
As shown in the diagram above, the idea is to place the items horizontally, and set the viewport size so only one of them at the time is visible. In our case the viewport is the wrapper element, and what we want to obtain is a wide ul that slides left and right within the wrapper to show the active item and hide all the others. The images will always represent the background of the carousel items and the text will be displayed on the right. We also want the carousel controls to be always shown on the left and on the right of the wrapper horizontally centered. Additionally we will add some rules to make it beautiful.
</p>
<p>
In order to accomplish that we'll add the following CSS rules:
</p>
<pre>
<code>
.carousel-wrapper { position: relative; /*Reference for absolutely positioned descendants*/
width: 800px; /*Actual width each item should have*/
height: 240px; /*Actual height each item should have*/
overflow: hidden; /*So only one item is visible*/
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
margin: 20px 0;
}
.carousel {
position: absolute; /*This way we can dynamically "move" the ul from the JavaScript by changing the left*/
}
.carousel li {
display: block;
float: left; /*Place items horizontally*/
width: 800px;
height: 240px;
position: relative; /*Reset the reference to absolutely position children*/
}
.carousel img {
position: absolute; /*Goes top-left (note that we work under the assumption that the image is the right size)*/
z-index: 0; /*Goes below everything*/
}
.carousel p.text {
position: absolute;
z-index: 1;
font-size: 24px;
width: 340px;
right: 80px;
top: 10px;
color: #ff6347;
background-color: #111111; /*IE tolerant*/
background-color: rgba(0,0,0,0.7);
padding: 5px;
}
.carousel-nav a {
display: block;
height: 40px;
width: 30px;
font-size: 24px;
line-height: 1.6;
font-weight: 800;
color: #222222;
background-color: rgb(255,99,71); /*IE tolerant*/
background-color: rgba(255,99,71,0.7);
text-decoration: none;
padding: 0 4px;
position: absolute;
top: 50%;
margin-top: -20px;
text-align: center;
z-index: 10; /*Always on top*/
}
.carousel-nav a.prev {
left: 0; /*Prev goes on the left*/
-webkit-border-top-right-radius: 4px; /*Some rounded corners fanciness*/
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.carousel-nav a.next {
right: 0; /*Next goes on the right*/
-webkit-border-top-left-radius: 4px; /*Some rounded corners fanciness*/
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
</code>
</pre>
<h3>The JavaScript</h3>
<p>
We will use jQuery for simplicity. The following code registers event handlers for the carousel controls, handles sliding animation and repositions the ul element when necessary.
</p>
<pre>
<code>
//We don't want to poison the global scope
//therefore we wrap everything into an anonymous self-executing function
(function() {
var first = $('.item').first(),
last = $('.item').last(),
itemWidth = first.width(),
carousel = $('.carousel');
//Adds the clones of the first and last items, as shown in reddish in the picture above
carousel.prepend(last.clone()).append(first.clone());
//Determine the width the carousel ul should have
carousel.width(itemWidth * $('.item').length);
//Scroll to the right position to show the first element
carousel.css({left: -itemWidth});
//Setup handlers...
$('.prev').on('click', function(e){
e.preventDefault();
//Some nice sliding animation
carousel.animate({left: '+=' + itemWidth}, 300, function(){
if(Math.abs(carousel.position().left) < 2) { //See Note below
//Handles circular carousel when we get to the left as much as possible
carousel.css({left: -itemWidth * (carousel.children().length - 2)});
}
});
return false;
});
$('.next').on('click', function(e){
e.preventDefault();
carousel.animate({left: '-=' + itemWidth}, 300, function(){
if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) { //See Note below
//Handles circular carousel when we get to the right as much as possible
carousel.css({left: -itemWidth});
}
});
return false;
});
})();
</code>
</pre>
<p>
<strong>
Note:</strong> instead of comparing the current position with 0 in the <em>previous </em>case and to itemWidth * (carousel.children().length - 1) in the <em>next </em>case we compare the absolute value and the absolute value of the difference with 2 (2px) respectively. The reason for this is that we noticed older versions of IE do some sort of approximation and the value was never 0 as one would expect. This way the code is more tolerant to this sort of browser weirdnesses.
</p>
<p>
And finally the <a href="http://jsfiddle.net/mmarcon/UWbrQ/show/" title="Carousel Demo">working demo</a> and <a href="http://jsfiddle.net/mmarcon/UWbrQ/" title="jQuery Carousel JSFiddle">all the code</a>. The page was tested with Chrome, Firefox 9+, Safari, IE8 and IE9.
</p>
<p>
<strong>Update:</strong> we just released an updated version of City Pages, where you can see the carousel in action for displaying <a href="http://maps.nokia.com/city/italy/rome" title="Rome City Page with City Facts">City Facts</a>.
</p>
<style>
.example-pair {overflow:hidden;margin:0 auto !important; width:400px;}
.example-pair li {float:right;list-style:none;}
.example-pair li:first-child {float:left;}
.example-box {margin: 0px;background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-color: black; border-width: 1px; border-color: #444444; border-style: solid; background-image: url('http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/example-icon.png'); }
p code {padding:0 !important;border:none !important;}
pre code {border:none !important;padding:0 !important;}
pre {position: relative;}
pre:before {content: attr(data-syntax);position: absolute;right: 15px;font-weight: bold;font-size: 1.5em;}
p.image{text-align: center}
</style>UIWeb TechnologyWebWeb Apps2012-03-29T09:00:28ZmmarconQuick Tip: Simple Servers
http://www.developer.nokia.com/Community/Blogs/blog/web-dev/2012/03/23/simple-servers
<p>
Often, when hacking around with various APIs, you'll find yourself needing to load in some data via <acronym title="Asynchronous JavaScript And XML">AJAX</acronym> or load a script from another domain. Depending on which technique or library you're using at the time, this can cause a security error. This error is due to the fact that the file you're hacking away at comes direct from the local file system (<code>file://</code>) while the data or external library you're loading comes from somewhere out there on the internet (<code>http://</code>). Browsers, quite sensibly, prevent local JS files from pulling in remote ones to avoid all manner of potential security issues. If you've ever seen an error in the console about <code>access-control-allow-origin</code> or '<code>Cross-origin requests are only supported for HTTP</code>', you now know why.
</p>
<p>
The simplest way to avoid this is to access your files via a web server running on your own machine and there are many ways to do this - <a href="http://www.apachefriends.org/en/xampp.html">XAMPP</a>, <a href="https://gist.github.com/701407">node.js</a>, etc. Apache is even built into OS X and can be enabled under System Preferences > Sharing > Web Sharing. For the absolute simplest method on OS X, however, I find nothing can beat python. Just open Terminal, cd to the directory you're developing in and run:
</p>
<pre>
<code>python -m SimpleHTTPServer</code>
</pre>
<p>
This starts the Python interpreter with the <a href="http://docs.python.org/library/simplehttpserver.html">SimpleHTTPServer module</a> - an extremely simple web server - running on port 8000 by default. You can now access your project at:
</p>
<pre>
<code>http://localhost:8000/filename.html</code>
</pre>
<p>
The benefit of this technique over using OS X's built-in Apache Server is that you don't need to worry about moving files around or creating local host aliases or anything like that.
</p>
<p>
A cross-platform alternative to this is <a href="http://code.google.com/p/mongoose/">Mongoose</a> which functions in much the same way but also runs on Windows and Linux as well as OS X.
</p>
<p>
Learn more about <a href="https://developer.mozilla.org/en/http_access_control">HTTP access control</a> and <a href="https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript">cross-origin errors</a> on the MDN site.
</p>
<style>
.example-pair {overflow:hidden;margin:0 auto !important; width:400px;}
.example-pair li {float:right;list-style:none;}
.example-pair li:first-child {float:left;}
.example-box {margin: 0px;background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-color: black; border-width: 1px; border-color: #444444; border-style: solid; background-image: url('http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/example-icon.png'); }
p code {padding:0 !important;border:none !important;}
pre code {border:none !important;padding:0 !important;}
pre {position: relative;}
pre:before {content: attr(data-syntax);position: absolute;right: 15px;font-weight: bold;font-size: 1.5em;}
</style>Web TechnologyWebWeb Apps2012-03-23T08:00:32ZsimonmadineDynamic backgrounds with background-size: cover
http://www.developer.nokia.com/Community/Blogs/blog/web-dev/2012/03/16/background-size-cover
<p>
<em>This is a two-part article. The second part will be covered in a future post.</em>
</p>
<p>
There are some fantastic styles available now in CSS3. Apart from anything else, border-radius and box-shadow alone are the greatest tools to be added to the web developer's toolbox since <code>float:left</code>. Alongside these highly important and commonly used attributes, there are also some new values for existing rules like background-size:cover.
</p>
<p>
When we started developing the <a href="http://maps.nokia.com/city/germany/berlin">City pages</a>, The large header image lent itself perfectly to using background cover. What this attribute does is tell the browser to scale the background image proportionally so that it is always <em>at least</em> covers the entire area. This usually means that in one dimension (horizontal, for example), the left edge of the image will be at the left edge of the box and the right will be at the right. The top and bottom of the image will most likely disappear off the top and bottom of the area as it is scaled up:
</p>
<ul class="example-pair">
<li>
<h3>Example:</h3>
<div class="example-box" style="width: 180px; height: 100px; background-size: cover">
</div>
</li>
<li>
<h3>What it should look like:</h3>
<img src="http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/bg-cover-1.png" alt="Background Cover Example 1" />
</li>
</ul>
<pre>
<code>
div {
width: 180px;
height: 100px;
background-size: cover;
}
</code>
</pre>
<p>
However, if the box were to be narrower, the cropped bits would come back:
</p>
<ul class="example-pair">
<li>
<h3>Example:</h3>
<div class="example-box" style="width: 100px; height: 100px; background-size: cover">
</div>
</li>
<li>
<h3>What it should look like:</h3>
<img src="http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/bg-cover-2.png" alt="Background Cover Example 2" />
</li>
</ul>
<pre>
<code>
div {
width: 100px;
height: 100px;
background-size: cover;
}
</code>
</pre>
<p>
Narrower still and the left and right would disappear while the top and bottom remained:
</p>
<ul class="example-pair">
<li>
<h3>Example:</h3>
<div class="example-box" style="width: 75px; height: 100px; background-size: cover">
</div>
</li>
<li>
<h3>What it should look like:</h3>
<img src="http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/bg-cover-3.png" alt="Background Cover Example 3" />
</li>
</ul>
<pre>
<code>
div {
width: 75px;
height: 100px;
background-size: cover;
}
</code>
</pre>
<p>
The opposite of background-size: cover is background-size: contain. This makes the 'longest' edge stay inside the box meaning that nothing is clipped:
</p>
<ul class="example-pair">
<li>
<h3>Example:</h3>
<div class="example-box" style="width: 75px; height: 100px; background-size: contain">
</div>
</li>
<li>
<h3>What it should look like:</h3>
<img src="http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/bg-cover-4.png" alt="Background Cover Example 4" />
</li>
</ul>
<pre>
<code>
div {
width: 75px;
height: 100px;
background-size: contain;
}
</code>
</pre>
<h3>Fallback</h3>
<p>
Obviously, when you're using new features of CSS3, you've got to make sure browsers which don't support those features don't end up being ignored. In most cases, little touches like a subtle border-radius won't degrade the experience but for larger effects like the behaviour of our main header image, we drop in some JS-powered alternatives.
</p>
<p>
If the browser doesn't support background-size:cover, we create a new image element, set its src attribute to the same as the normal background-image url and insert it into the document. By setting its width to be 100%, it will scale correctly, pretty much matching the original intended behaviour.
</p>
<p>
This can be accomplished various ways but you can do it simply with jQuery along these lines:
</p>
<pre>
<code>
if ($.browser.msie && $.browser.version < 10) {
var $backgroundReplacement = $('<img class="background-replacement" />'),
$header = $('div.header'),
imgURL = $header.css('background-image');
$header.css('background-image', 'none');
imgURL = imgURL.substring(5, imgURL.length - 2);
$backgroundReplacement.attr('src', imgURL);
$header.append($backgroundReplacement);
}
</code>
</pre>
<p>
While the CSS is like this:
</p>
<pre>
<code>.background-replacement {
width: 100%;
display: block;
position: absolute;
min-width: 1280px;
min-height: 390px;
}</code>
</pre>
<p>
Where <code>min-width</code> and <code>min-height</code> are the dimensions of your container. Handily, there's a jQuery plugin which can also do this for you: <a href="https://github.com/danmillar/jquery-anystretch">jQuery Anystretch</a>.
</p>
<p>
Of course, once you start scaling images up, things can start to get a little messy. Having a low-resolution image stretched across your page can end up looking quite bad so the second part of this article will cover a technique you can use to get around this.
</p>
<style>
.example-pair {overflow:hidden;margin:0 auto !important; width:400px;}
.example-pair li {float:right;list-style:none;}
.example-pair li:first-child {float:left;}
.example-box {margin: 0px;background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-color: black; border-width: 1px; border-color: #444444; border-style: solid; background-image: url('http://www.developer.nokia.com/Community/Blogs/data/blogs/resources/300144/example-icon.png'); }
p code {padding:0 !important;border:none !important;}
pre code {border:none !important;padding:0 !important;}
pre {position: relative;}
pre:before {content: attr(data-syntax);position: absolute;right: 15px;font-weight: bold;font-size: 1.5em;}
</style>Web2012-03-16T09:00:54ZsimonmadineWeb Development at Nokia
http://www.developer.nokia.com/Community/Blogs/blog/web-dev/2012/03/14/web-development-nokia
<p>
<em>"Prevention is imperfect. Even the most disciplined development team, knowing the best principles, using the best patterns, and following the best practices will create messes from time to time."</em> [Robert C. Martin]
</p>
<p>
In Nokia, in our teams we are consantly looking for improvement. Improvement of knowledge, work process and ourselves. We decided to start this blog because we want to share our experiences with others. We want to write about difficulties we face and the solutions to them. We want to discuss problems, show best practices and the way we work every day. We are not always perfect in what we do but we want to be as close to perfection as we can. This involves the fact that we really care about what we are doing - the applications we create, how we write the code and how we test it.
</p>
<p>
We put a lot of effort in improving our application and developing new cool features to make <a href="http://maps.nokia.com/">Nokia Maps</a>, <a href="http://pulse.nokia.com/">Nokia Pulse</a> and the <a href="http://api.maps.nokia.com/">Nokia Maps API</a> the best experience for our users. We deal on a daily basis with problems that are familiar to all web developers: we want our code to be fast and small in size, we strive to provide a great user experience in any browser that is out there and at the same time we try to be innovative and take advantage as much as possible of the most recent technologies and techniques. The fact that we have to design our code to be deployed in large scale makes everything even more interesting.
</p>
<p>
With this blog we want to discuss with the web development community problems and solutions that we see on a daily basis. We want to spread our knowledge and expertise as a contribution for a better web. We want to share with you the journey we experience every day at Nokia.
</p>
<p>
</p>Web TechnologyWebWeb Apps2012-03-14T12:20:44Zw.weglinska