Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 07 2014

11:00

Responsive Images: Still Waiting for a Standard? Try Rwd.Images.Js Instead!


  

Responsive Images is a topic far from resolved. Will it be the picture element as proposed by the W3C or will it be the srcset attribute as proposed by WHATWG in the end? No matter what time will bring, responsive images are a problem that needs to be solved today and not sometime in the future. No wonder that JavaScript is the remedy of choice. There are quite a few scripts targeting responsive imaging, quality varies though. A brand-new script by Matt Stow from Australia shows the potential to become the best available client-side interim solution…

June 12 2013

06:30

Webdesigner’s Basics: 10 Questions You Need To Be Able To Answer


  
diaper-w550 Wouldn't it be fun to let our readers test their knowledge through a quiz once in a while, we thought over here at Noupe HQ. As we like to play these kinds of games, we assume you might too. Our first quiz covers some of the basics of HTML from past to present. Don't expect full coverage, we only got 10 questions to go. Have a try!

March 16 2013

13:00

CSS3 Introduction – New Features, What it Can Do, and Resources

A short time ago I posted an introduction article about HTML5 and I promised you a CSS3 introduction and what new things it brings to the industry, although it’s been some time since it was officially released. If you didn’t read the article on HTML5 yet, I strongly advise you do so, as CSS3 works better with the latest markup language from the World Wide Web Consortium.

CSS2 appeared back in 1998 and since then a lot has happened on the internet. Its only revision was made in 2011, CSS2.1, but experts in the industry say it was only a matter of time until CSS3 should have been released, as the features it comes with are entirely necessary and were missed during the past years. What many people didn’t know about CSS3 was that its development started only one year after the submission of its previous version. So the W3C has been working on this improved version since 1999, for more than 12 years until the first CSS3 stable version was released.

Although it sounds like there is a big difference between CSS2 and CSS3 (which is quite true), all modern browsers were quite quick to adopt the new addition to the W3C family. All major browsers support most CSS3 features that are currently available. As with HTML5, the Consortium still considers CSS3 to be under continuous development and it is very unlikely for it to get a final version, for the same reasons HTML5 will probably not. With the web requirements, and the industry in general, changing so fast, coding needs to move forward at the same pace.

Main differences

Maybe the biggest difference between CSS2 and CSS3 is the separation of modules. While in the previous version everything was a large single specification defining different features, CSS3 is divided into several documents which are called modules. Every single module has new capabilities, without hurting the compatibility of the previous stable release. When we talk about modules, we can name more than fifty of them, however four of these have been published as formal recommendations. The big four is comprised of the following:

  • Media Queries (published in 2012)
  • Namespaces (published in 2011)
  • Selectors Level 3 (published in 2011)
  • Color (published in 2011)

The media queries might well be the most important addition to CSS. What it does is simple: it allows certain conditions to be applied to different stylesheets, making websites fluid and fit all kinds of screen sizes. Media queries allow developers to tailor to different resolutions without having to change or remove content.

media queries

Example of a responsive grid built with media queries

Media queries work very easily and once you have used them once you are pretty much set. Let’s look below at some lines of code.

@media screen and (max-width: 600px) {
    background: #FFF;
}

By starting to style in the media query above, you will only style for screens with a maximum width of 600 pixels. In the example above, all screens with a maximum width of 600 pixels will show you a white background. However, the max-width is not the only condition you can apply to a stylesheet. You can use max-device-width too (which is the screen resolution, unlike max-width which is the viewing area), you can use min instead of max, but you can also combine two conditions, such as in the example below, which will only apply for screens with a viewing area between 600 and 900 pixels.

@media screen and (min-width: 600px) and (max-width: 900px) {
    background: #FFF;
}

CSS3 has some pre-defined stylesheets for portable devices, such as iPhone or iPad, which you can see below:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

and

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/>
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/>

As you can see above, the media queries can come in quite handy when developers need to make fluid grids work on different devices with different screen sizes.

Some other important design considerations of CSS3 are, for example, the borders, which now can be made rounded without hacks. CSS3 has actually introduced rounder borders, which is a huge help for designers and developers. However, many of these features do not work in older versions of Internet Explorer , but this is not something new for us, we’ve heard it before. The only code you need to add in the stylesheet (in the specific class) is something similar to:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;

As you can see, it is much easier than before. Gradients are also available in CSS3, another cool addition that we have wanted to see for some time, as well as box/text shadows and border images. In order to add text shadow to content without any hacks, CSS3 simply requires something similar to the following line of code:

text-shadow: 2px 2px 2px #ddccb5;

Creating columns for content has never been easier than with CSS3, as now you have four lines of code you can use at any time. These are:

  • column-count
  • column-width
  • column-gap
  • column-rule

Another great time saver is the option of inserting multiple background directly from CSS, instead of using all kinds of hacks as we used to do before. The code is simple to write and to remember, and I am sure you will use it at some point in time.

.multiplebackgrounds {
height: 100px;
width: 200px;
padding: 20px;
background: url(top.gif) top right no-repeat,
url(bottom.gif) top left repeat-y,
url(middle.gif) bottom repeat-z;
}

Vendor prefixes

Back when CSS3 was newly released, vendor prefixes were used all the time, as they helped browsers interpret the code. Sometimes you still need to use them today, in case the browser you are testing in doesn’t read the code. So below is a short list with all the vendor prefixes for major browsers:

  • -moz- : Firefox
  • -webkit- : Webkit browsers such as Safari and Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Note that, according to an official press release from a few weeks ago, Opera will soon build their new desktop and mobile browser on webkit too, instead of their current Presto rendering engine. This means that the -o- vendor prefix will disappear at some point in time, leaving us with only three major ones.

Browser logos

Vendor prefixes are used in order to make CSS3 compatible with all major browsers

New pseudo-classes

The arrival of CSS3 brings us a bunch of new pseudo-classes, including structural ones, that target elements based on their position in the document and relation to different other elements.

  • :only-child – in case you have an element in the document tree that is the only child of its parent, it can be targeted by this pseudo-class.
  • :empty – targets elements that don’t have any children or any text, for example an empty element such as <p></p>.
  • :nth-child(n) – it takes advantage of numeric (n) values and targets child elements in relation to their position within the parent. To give you a precise example, a list of blog comments would probably look more appealing with alternating background colors – this can be done using this pseudo-class.
  • :first-of-type – this targets the first of a specific type of element within a parent, and is the opposite of :last-of-type.
  • :first-child – targets the first child element in a parent, regardless of its type. It is the opposite of :last-child.
  • :not(s) – this one targets elements that are not matched by the specified selector (s).
  • :root – this one targets the root element of a document.

There are more pseudo-classes added to the new CSS3, but as this is basically an article for beginners, it is not really worth mentioning them.

Examples

There are not many examples of CSS3 that I can show you, as it usually is used in collaboration with HTML5 or jQuery. CSS is for styling and enhancement, not for creating applications. Therefore there are only two interesting links I want to share with you.

1. Rotating Multiple Images

rotating multiple images

2. Robot Animation

Robot Animation

Where to learn?

As I advised you in the HTML5 article (and even much more now), CSS3 is impossible to master unless you have prior CSS knowledge. I assume, since you’ve read this article, that you have prior CSS experience, so you just have to build on that. Otherwise you need to take it from the top. In order to ease you into the CSS3 learning process, I will recommend several sources below:

Conclusion

HTML5 and CSS3 are here to stay, and in combination these two tools are very powerful and can create beautiful, high-quality solutions. Therefore you need to learn them and start using them today, otherwise you will fall behind your competitors.

As promised before, I will start working on putting together several HTML5/CSS3 tutorials so that you will be able to learn even more from 1WD. However, until that comes, please make sure you have at least some basic knowledge of HTML5 and CSS3, so that we are all on the same page when we start. See you next time!

January 21 2011

07:34

The Hotlist – Edition 3

NEWS

W3C Rocks a new logo

Screen shot 2011-01-21 at 12.32.05 AMThe W3C hopes to rally HTML5 & CSS3 and other things behind the new HTML5 shield.

GEAR

Neve Inspired

Screen shot 2011-01-21 at 12.50.32 AM

Neve Inspired, an online boutique for innovative children’s clothing by Charleston, S.C. based design team Kris and Bob Galmarini. Each piece is born from their passion to create, do what they love, while working together, and dressing their kids and yours in clothes as fun and hip as they are.

STYLE

On the Scene… Military Shirts, Florence & Milano

11311MilitaryS_0391Web

Military shirts are in this year. An awesome photo from The Sartorialist. This guys glasses rock.

FROM GITHUB

The Personal Page

188

This simple one-page website from Naz Hamid (weightshift)is a way for people to have a very quick and easy personable website that aggregates your activity and positions a simple logo, a portrait and some description text in a nicely-formatted manner. This is licensed under the MIT and GPL licenses.

WORKSPACE

The Heads of State – From the desk of…

hos_backview

An awesome inside look a the workspace of The Heads of State. “Our office is on the second floor of an old storefront building in the Old City neighborhood of Philadelphia. We’re surrounded by Ben Franklin impersonators giving walking tours of the Betsy Ross house and Independence Hall. The studio is pretty jammed packed with our books and paper scraps and ephemera. We have all sorts of design objects around including presidential busts, globes, old books, and a vintage blue collar thermos collection. We also run our online store from this space so our poster and print archive is stored here as well as our mail room. It gets pretty chaotic at times but it has the great organized chaos of a workshop.”

TYPE

Should I Work For Free? Jessica Hische

Screen shot 2011-01-21 at 2.10.19 AM

An awesome little way to know if you should work for free or not on your next project from the wonderful Jessica Hische.

SITE REDESIGN

IWC Schaffhausen

Screen shot 2011-01-21 at 2.14.07 AM

The site marks another excellent partnership with our friends at Undercurrent and has resulted in a beautiful experience that aims to set a new standard for luxury online. With rich interactive features, editorial content presented in clean, concise layouts and extraordinary attention to each watch, IWC.com offers fans everything they expect from the brand. Further details on the project are available on odopod.com here.

HAVE A TIP?

Feel free to send us a tip if you think you’ve got the hot stuff. ‘hotlist@fuelyourcreativity.com

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



The Hotlist – Edition 3

July 13 2010

13:00

An alternative way to addEventListener

I can't believe none of us knew DOM2

This is how a tweet from @SubtleGradient, re-tweeted by @jdalton, has been able to steal my rest tonight ... and this post is the consequence ...

What's new in a nutshell

There is a W3C Recommendation about addEventListener behavior, which clearly specify the second argument as an EventListener.
The new part is that no library I know has ever used a proper EventListener interface, preferring the classic attached callback instead.

JAVASCRIPT:

// this is how it is
document.addEventListener(
    "click",
    function (evt) { /* stuff */ },
    false
);
 
// this is how it could be as well
var listener = {
    handleEvent: function (evt) {

        this === listener; // true

        // and evt === classic event object

    }
};
 
document.addEventListener("click", listener, false);

Benefits

The most common case that may disappear is well explained in this MDC addEventListener page.
Rather than bind inline or add anonymous functions to make our object call context preserved, we can simply add an handleEvent method to whatever object and pass it as EventListener.
Moreover, being close to full ES5 support and "use strict" directive where arguments.callee disappears, it may be more than handy to be able to perform such operation:

JAVASCRIPT:
document.addEventListener("click", {
    handleEvent: function (evt) {
        // 1 shot callback event example
        switch (evt.target.nodeType) {
            case 1:
            case 9:
                evt.target.removeEventListener(
                    evt.type,
                    this, // here we are!
                    false
                );
                break;
        }
    }
}, false);
 

An opened door for custom listeners

As I have recently posted, custom listeners implementation can be truly handy when we are dealing with events driven applications, but as soon as I have read the tweet, I had to rewrite a fresh new way to create a listener. Please note that following code is assuming that the browser supports both DOM Level 2 and Array extras, which is true for all modern browsers, mobile oriented included.

JAVASCRIPT:
function createEventListener() {

    /*! Andrea Giammarchi for Ajaxian - Mit Style */

    // a function declaration reused internally
    function notifyEvent(callback, i, stack) {
        // use DOM Level 0 events strategy
        //  to stop the loop if necessary
        // checking if the result is exactly false
        if (callback.call(
            // the curent object as context
            this,
            // the classic event as first argument
            event,
            // the called callback (life easier)
            callback,
            // again the current context
            // if the callback has been bound
            this
        ) === false) {
            // if false, reassign the current stack ...
            eventListener["@"+event.type] = stack.slice();
            // ... and break the current forEach loop
            // (or, for the record, whatever Array.extras)
            stack.length = 0;
        }
    }

    var
        // local scoped object, reachable internally
        // usable as mixin so instances won't be polluted
        // with all possible event types
        // the type is prefixed in any case
        // so that name clashes should be
        // really rare however we use the object
        eventListener = {

            // we attach to a proper stack
            addEvent: function (type, callback) {
                var
                    // try to retrieve the stack ...
                    stack = (
                        // if already there ...
                        eventListener["@" + type] ||
                        // otherwise we create it once
                        (eventListener["@" + type] = [])
                    ),
                    // as addEventListener, don't attach
                    // the same event twice
                    i = stack.indexOf(callback)
                ;
                // so if it was not there ...
                if (-1 === i) {
                    // FIFO order via stack
                    stack.push(callback);
                }
            },

            // called via addEventListener
            // the "this" reference will be
            // the eventListener object,
            // or the current instance
            // if used as "class" mixin
            // or via Object.create / clone / merge
            handleEvent: function (e) {
                // retrieve the stack
                var stack = eventListener["@" + e.type];
                // and if present ...
                if (stack) {
                    // set temporarily the local event var
                    event = e;
                    // notify all registered callbacks
                    // using current this reference
                    // as forEach context
                    stack.forEach(notifyEvent, this);
                    // let the GC handle the memory later
                    event = null;
                }
            },

            // how we remove the event, if any ...
            removeEvent: function (type, callback) {
                var
                    // try to retrieve the stack ...
                    stack = eventListener["@" + type],
                    // find the index ...
                    i
                ;
                // if the stack is present
                if (stack && ~(
                    i = stack.indexOf(callback)
                )) {
                    // remove it
                    stack.splice(i, 1);
                }
            }
        },

        // I could have called this variable tmp
        // but it's actually the current event
        // once assigned ... so ...
        event
    ;

    // ready to go!
    return eventListener;

}

Here a usage example:

JAVASCRIPT:
var lst = createEventListener();

/** mixin example (add a slash before this line to test)

function MyEventListener() {}
MyEventListener.prototype.addEvent = lst.addEvent;
MyEventListener.prototype.handleEvent = lst.handleEvent;
MyEventListener.prototype.removeEvent = lst.removeEvent;

lst = new MyEventListener;

// */

document.addEventListener("click", lst, false);

lst.addEvent("click", function click(e, callback, object){

    alert([
        callback === click, // true
        this === lst,       // true
        this === object,    // true
        e.type === "click"  // true
    ]);

    // test that furthermore this
    // callback won't be fired again
    this.removeEvent("click", callback);

    // add delayed a callback
    // without any valid reason :-)
    setTimeout(function (self) {
        // test addEvent again
        self.addEvent("click", function () {
            alert(2);
        });
    }, 0, this);

    // block the current notification
    return false;
});

// the event fired only the second click
lst.addEvent("click", function () {
    alert(1);
});

/** de-comment the mixin example to test
//   that no @click is attached ;-)
for (var key in lst) {
    alert(key);
}
// */

 

Advantages

  • both evt.stopPropagation() and evt.preventDefault() are not able to break the current notification of all attached listeners, if added to the same node, and while the FIFO order gives to the node "owner" or creator the ability to pollute the event object with some flag such evt.pleaseDontDoAnyOtherActionHere = true, not every library, script, or framework, may respect or understand this flag. With custom events we can adopt better strategies to actually avoid any other operation if this is what we meant, because we arrived before over the node and we may like to be that privileged
  • being custom, we can also decide which argument should be passed for each callback, simplifying most common problems we may have when dealing with listeners
  • we can better decouple DOM and listeners, being able to remove whatever amount of callbacks simply calling once node.removeEventListener(evt.type, this, false); inside any kind of notification
  • being based on standard and modern browsers, we can use native power, in this case provided by forEach and indexOf operations, so that performances will be best possible
  • thanks to automatic context injection, we can still reuse callbacks for different listeners, through bind, or simply considering the current context once called (or in this case the third argument by reference, if the context is different)

Last but not least, if we would like to fire an event we can bypass DOM initialization using handleEvent directly, e.g.

JAVASCRIPT:
lst.handleEvent({
    target: document.querySelector("#myid"),
    type: "click",
 
    // custom properties
    pageX: 0,
    pageY: 0,
 
    // stubbed methods
    preventDefault: function () {},
    stopPropagation: function () {}
});
 

Compatibility ?

Apparently both W3C behavior and provided examples are compatible with every modern browser with DOM Level 2 support, and I believe this is great.
The only one behind here is IE9 pre 3, but again @jdalton has acted at speed light, thanks!

December 09 2009

17:43

W3C Capture API our in draft

A draft of the W3C Capture API has been put out there by the editors.

The Capture API defines a JavaScript API for accessing the microphone and camera of a hosting device.

When I look at the API for getting pictures from a camera I got a little scared at the amount of DOM fluff around the edges:

JAVASCRIPT:
  1.  
  2. // Create a container div element and append it to the document body.
  3. var container = document.createElement("div");
  4. document.body.appendChild(container);
  5.  
  6. // The browser viewport width in pixels.
  7. var screenWidth = window.innerWidth;
  8.  
  9. function successCallback(data) {
  10.   for (var i in data) {
  11.   var img = document.createElement("img");
  12.   img.src = data[i].uri;
  13.   // If the image width exceeds that of the browser viewport, the image
  14.   // is scaled to fit the screen keeping the aspect ratio intact.
  15.     if (data[i].format.width> screenWidth) {
  16.       img.style.width = screenWidth + "px";
  17.       img.style.height = (data[i].format.height/data[i].format.width)*screenWidth + "px";
  18.     }
  19.     container.appendChild(img);
  20.   }
  21. }
  22.  
  23. function errorCallback(err) {
  24.   alert(err.message + " (" + err.code + ")");
  25. }
  26.  
  27. // Launch the device camera application and invoke the callback once
  28. // the user exits the camera application.
  29. transactionId = navigator.device.captureImage(successCallback, 1, errorCallback);
  30.  

A lot of fluff for the transactionId = navigator.device.captureImage(successCallback, 1, errorCallback); meat.

What do you think of the API proposed?

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl