70-480 – Wyszukiwanie elementów przy użyciu selektorów arkusza CSS i kwerendy jQuery

70-480

Wybór odpowiedniego selektora w celu odwołania do elementu; definiowanie selektorów elementu, stylu i atrybutu; wyszukiwanie elementów przy użyciu pseudo-elementów i pseudo-klas (np. :before, :first-line, :first-letter, :target, :lang, :checked, :first-child).



Przedostatnim tematem dotyczącym egzaminu 70-480 będzie biblioteka jQuery. Nakłada ona na czysty język JavaScript (Vanilla) pewną warstwę abstrakcji oraz udostępnia API, które nie dość tego, że jest znacznie bogatsze i prostsze niż standardowe metody dostępu do elementów DOM, to wspiera wiele różnych wersji przeglądarek. Każdy kto zetknął się z pisaniem kodu JavaScript z pewnością słyszał o jQuery, więc dzisiejszy wpis będzie krótki, lecz treściwy.

Selektory CSS

Wyszukiwanie elementów jQuery jest bardzo podobne do nakładania styli poprzez stosowanie selektorów dostępnych w CSS. Spójrzmy na te podstawowe:

  • * – pobranie wszystkich elementów
  • #id – id elementu (pamiętajmy, że tylko jeden element na stronie może posiadać takie samo id)
  • .class – wszystkie elementy, które posiadają klasę class
  • .class1, .class2 – wszystkie elementy, które  mają ustawioną klasę class1 lub class2

Dzięki selektorom zależnym jesteśmy w stanie odwoływać się do poszczególnych elementów, które znajdują się w pewnej hierarchii względem innych elementów:

  • parent child – wszystkie elementy child, które są potomkami elementu parent, bez względu na stopień pokrewieństwa
  • parent > child – to samo co wyżej, ale w tym wypadku elementy child muszą być bezpośrednimi potomkami parent
  • element + next-element – wybranie elementu next-element, który występuje zaraz za elementem element
  • element ~ siblings – wszystkie elementy siblings, które są rodzeństwem dla element

Możemy również odwoływać się do poszczególnych atrybutów, a nawet ich wartości:

  • [attr=] – znak równości, więc wartość atrybutu musi równać się podanemu wyrażeniu
  • [attr!=…] – wartość atrybutu różna od podanego wyrażenia
  • [attr$=…] – wartość atrybutu kończyć się musi według podanego wyrażenia
  • [attr^=…] – wartość atrybutu zaczynać się musi według podanego wyrażenia
  • [attr~=…] – wartość atrybutu zawierać musi podane słowo
  • [attr*=…] – wartość atrybutu zawierać musi podane znaki

Mamy poza tym szereg pseudo-selektorów. Najpopularniejsze z nich to:

  • :hover – element wskazywany właśnie przez wskaźnik myszy
  • :focus – element, który aktualnie jest aktywny
  • :first-child – pierwsze dziecko danego elementu
  • :odd – wszystkie nieparzyste elementy w liście
  • :even – wszystkie parzyste elementy w liście
  • :disabled – wyłączonynieaktywny element

Pełna lista selektorow CSS na stronie w3schools.com – http://www.w3schools.com/cssref/css_selectors.asp

Wyszukiwanie elementów DOM przy pomocy jQuery

Podobnie sprawa wygląda w jQuery. Mają co dyspozycji utworzony obiekt jQuery / $ jesteśmy w stanie bardzo szybko wyłuskiwać poszczególne elementy ze struktury HTML.

// id
$('#myId');

// klasa
$('.myClass');

// atrybut
$('input[name="first_name"]');

// zagnieżdżone elementy
$('#contents ul.people li');

// pseudo - selektory
$('a.external:first');
$('tr:odd');
$('#myForm:input');
$('div:visible');
$('div:gt(2)');
$('div:animated');

Pełna lista dostępnych selektorów jQuery: http://api.jquery.com/category/selectors/

Na w3schools.com znajdziemy też ciekawe demo, które w interaktywny sposób unaoczni nam możliwości jQuery jeśli chodzi o znajdowanie elementów w strukturze HTML: http://www.w3schools.com/jquery/trysel.asp

70-480 – Wdrażanie wywołania zwrotnego

70-480

Odbieranie wiadomości z HTML5 WebSocket API; stosowanie kwerendy jQuery w celu realizacji wywołania AJAX; podłączanie zdarzenia; wdrażanie wywołania zwrotnego przy użyciu funkcji anonimowych; obsługa wskaźnika „this”.



Opis zagadnienia zawiera wiele elementów, które na pierwszy rzut oka mogą wydawać się zupełnie różne, ale to co ich łączy, to mechanizm callback. Jest to tak zwana funkcja zwrotna, która rejestrowana jest przez autora kodu do wykonania przez bibliotekę, której używa. Callback wykonywany jest w odpowiednim czasie przez bibliotekę, która nie wie nic o tym co się wydarzy. Wszystko zależy od ciała zarejestrowanej funkcji.

HTML5 WebSocket API

Egzamin 70-480 wymaga od nas znajomości API WebSocket, które pojawiło się wraz z HTML5. Specyfikacja definiuje założenia komunikacji full-duplex, czyli w dwie strony serwer <-> przeglądarka <-> serwer.

Zakładane są cztery typy obsługiwanych callback:

  • onopen – połączenie jest gotowe i można wysyłać wiadomości
  • onmessage – w momencie otrzymania wiadomości z serwera
  • onclose – w momencie zamknięcia połączenia
  • onerror – w momencie wystąpienia błędu

Pierwszym krokiem jest oczywiście utworzenie połączenia:

var connection = new WebSocket('ws://localhost/');

Następnie możemy zdefiniować odpowiednie callback:

connection.onopen = function () {
  connection.send('Ping');
};

connection.onmessage = function (e) {
  console.log('Server: ' + e.data);
};

connection.onclose = function(e) {
  console.log('Closed!');
};

connection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};

Każdy z callbacków wykona się w ściśle zdefiniowanym momencie. Decyduje o tym API WebSocket oraz komunikacja z serwerem.

Staram się skupiać na podstawach, a zarazem materiale, który w pełni pokrywa założenia egzaminu 70-480. Jeżeli ktoś chce dowiedzieć się nieco więcej na temat HTML5 WebSocket API, to odsyłam do artykułu na html5rocks.com.

jQuery – get, post, ajax

Biblioteki jQuery przedstawiać nikomu nie trzeba. Zyskała ona ogromną popularność społeczności, a to za sprawą wielu ułatwień i funkcji, które zwyczajnie ułatwiają życie. jQuery również świetnie radzi sobie z asynchronicznością oraz obsługą requestów typu AJAX.

Polegają one na wykonywaniu operacji komunikacji z serwerem w tle. Tym samym możemy pobierać dane oraz zmieniać interfejs strony bez przeładowania okna przeglądarki.

Przedstawię niżej trzy najbardziej popularne metody do zapytań typu AJAX, które znajdziemy w bibliotece jQuery.

$.get

Pozwala wykonywać asynchroniczne zapytania typu GET. Sygnatura metody wygląda następująco:

$.get(url [,data] [,success] [,dataType])

, gdzie poszczególne parametry to:

  • url – [String] – url pod jaki ma zostać wysłane zapytanie typu GET
  • data – [PlainObject | String] – obiekt lub string, które wysłane zostają razem z zapytaniem do serwera
  • success – [Function(data, textStatus, jqXHR)] – funkcja i zarazem nasz callback, który wykonany zostanie w momencie poprawnego obsłużenia odpowiedzi. Parametry, które zostaną przekazane do wywołania funkcji to:
    • data – [PlainObject] – zwrócone dane
    • textStatus – [String] – status odpowiedzi
    • jqXHR – [jqXHR] – odpowiednik XMLHTTPRequest
  • dataType – [String] – typ zwracanych danych – xml, json, script, html. Domyślnie ustalany na podstawie zwróconych danych.

Funkcja $.get jest odpowiednikiem (skrótem) dla funkcji $.ajax:

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.post

W zasadzie od funkcji $.get różni się tym, że tym razem wysyła na serwer asynchroniczne żądanie typu POST. Zestaw parametrów jest tutaj identyczny, a odpowiednikiem funkcji $.ajax jest:

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.ajax

Funkcja, która zawsze wywoływana jest pod spodem. Jest to najbardziej ogólna funkcja pozwalająca na definiowanie asynchronicznych zapytań. Jej pełna specyfikacja znajduje się na stronie jQuery. Posiada pokaźną liczbę parametrów i opisywanie ich wszystkich tutaj byłoby sporym nadmiarem materiału do przyswojenia.

callback i słowo kluczowe this

W zasadzie o czymś podobnym pisałem już we wpisie o wywoływaniu i obsłudze zdarzeń. Chodzi mianowicie o dostęp do kontekstu this wywołanej funkcji. Spójrzmy na przykład funkcji, która wykonuje callback na sam koniec swojego działania:

function callbackFn() {
  console.log(this);
}

function invoke(x, y, callback) {
  var xy = x + y;
  callback();  
}

invoke(1, 2, callbackFn);

Co będzie wynikiem console.log(this)? Na konsoli otrzymamy obiekt window. Jak przekazać kontekst funkcji wywołującej callback? No to kolejny przykład:

function callbackFn() {
  console.log(this);
}

function invoke(x, y, callback) {
  var xy = x + y;
  callback.call(xy);  
}

invoke(1, 2, callbackFn);

Zmiana nastąpiła w linii 6 poprzez użycie call. Tym razem wyliczona wartość xy została przekazana do funkcji callbackFn i stanowi jej kontekst (this).

Pobranie treści strony niczym Facebook – PHP / jQuery

pobranie-tresci-strony-niczym-facebook-php-jquery

Z pewnością wszyscy widzieli i znają sposób dodawania adresów URL do naszych statusów na Facebooku lub Google+. Mam oczywiście na myśli sytuację, gdy po chwili od wklejenia adresu URL w okno, gdzie tworzymy nasz status sprarsowana zostaje i pobrana treść ze strony, której adresu użyliśmy. Jest to zarazem efektowne i bardzo użyteczne, bo od razu widzimy zajawkę informacji, która kryje się pod danym URL. Pokażę Wam dzisiaj prosty sposób, który wykorzystuje język PHP i bibliotekę  jQuery wraz z zapytaniem Ajax. Już dawno przymierzałem się do podobnego wpisu i wreszcie finalnie mogę go Wam przedstawić.

Zacznijmy od obsługi pola, gdzie użytkownik podaje swój adres URL. Obsługiwać będzie je oczywiście kilka linijek kodu w jQuery, gdzie w pierwszej kolejności sparsować musimy wprowadzoną treść oraz sprawdzić istnienie w niej poprawnego adresu URL, a następnie wykonać zapytanie Ajax do skryptu w języku PHP.

Pobieramy treść

$(document).ready(function() {
    var getUrl = $('#get_url') // url to extract from text field
        match_url = /\b(https?):\/\/([\-A-Z0-9.]+)(\/[\-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?/i // url to match in the text field
    ;

    getUrl.keyup(function() { // user types url in text field        
        // continue if matched url is found in text field
        if (match_url.test(getUrl.val())) {
            $("#results").hide();
            $("#loading_indicator").show(); // show loading indicator image

            var extracted_url = getUrl.val().match(match_url)[0]; // extracted first url from text filed

            // ajax request to be sent to extract-process.php
            $.post('extract-process.php', {'url': extracted_url}, function(data) {
                extracted_images = data.images;
                total_images = parseInt(data.images.length - 1);
                img_arr_pos = total_images;

                if (total_images > 0) {
                    inc_image = '<div class="extracted_thumb" id="extracted_thumb"><img src="' + data.images[img_arr_pos] + '" width="100" height="100"></div>';
                } else {
                    inc_image = '';
                }
                // content to be loaded in #results element
                var content = '<div class="extracted_url">' + inc_image + '<div class="extracted_content"><h4><a href="' + extracted_url + '" target="_blank">' + data.title + '</a></h4><p>' + data.content + '</p><div class="thumb_sel"><span class="prev_thumb" id="thumb_prev"> </span><span class="next_thumb" id="thumb_next"> </span> </div><span class="small_text" id="total_imgs">' + img_arr_pos + ' of ' + total_images + '</span><span class="small_text">  Choose a Thumbnail</span></div></div>';

                // load results in the element
                $("#results").html(content); // append received data into the element
                $("#results").slideDown(); // show results with slide down effect
                $("#loading_indicator").hide(); // hide loading indicator image
            }, 'json');
        }
    });
});

Wybieramy miniaturę

Skrypt w PHP “wypluje” nam takie dane jak tytuł, zajawkę oraz zdjęcie(-a) w formacie JSON. Jeżeli zdjęć jest kilka, to byłoby dobrze dać użytkownikowi wybór konkretnej miniatury.  Zróbmy to.

$(document).ready(function() {
    // user clicks previous thumbail
    $("body").on("click", "#thumb_prev", function(e) {
        if (img_arr_pos > 0)
        {
            img_arr_pos--; // thmubnail array position decrement

            // replace with new thumbnail
            $("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="100" height="100">');

            // replace thmubnail position text
            $("#total_imgs").html((img_arr_pos)+' of '+total_images);
        }
    });

    // user clicks next thumbail
    $("body").on("click", "#thumb_next", function(e) {
        if (img_arr_pos < total_images)
        {
            img_arr_pos++; // thmubnail array position increment

            // replace with new thumbnail
            $("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="100" height="100">');

            // replace thmubnail position text
            $("#total_imgs").html((img_arr_pos)+' of '+total_images);
        }
    });
});

HTML

Poniżej dosłownie 5 linijek HTML, który pozwoli użytkownikowi na wklejenie swojego aresu URL.

<div class="extract_url">
    <img id="loading_indicator" src="images/ajax-loader.gif" />
    <textarea id="get_url" placeholder="Enter Your URL here" class="get_url_input" spellcheck="false"></textarea>
    <div id="results"></div>
</div>

Czas na skrypt w PHP

Do pobrania treści z innej strony w naszym skrypcie PHP wykorzystamy PHP Simple HTML DOM Parser, który w niezwykle łatwy sposób pozwala sparsować drzewo DOM na podstawie przekazanego URL. Trzeba nadmienić, że wymaga on PHP w wersji 5+, ale chyba nie powinno być to dla nikogo problemem. Wszystkie zebrane dane są oczywiście zwracane w formacie JSON.

<?php
if (isset($_POST["url"])) {
    $get_url = $_POST["url"];

    // include PHP HTML DOM parser (requires PHP 5 +)
    include_once("include/simple_html_dom.inc.php");

    // get URL content
    $get_content = file_get_html($get_url);

    // get page title 
    foreach ($get_content->find('title') as $element) {
        $page_title = $element->plaintext;
    }

    // get body text
    foreach ($get_content->find('body') as $element) {
        $page_body = trim($element->plaintext);
        $pos = strpos($page_body, ' ', 200); // find the numeric position to substract
        $page_body = substr($page_body, 0, $pos); // shorten text to 200 chars
    }

    $image_urls = array();

    // get all images URLs in the content
    foreach ($get_content->find('img') as $element) {
        // validate image name
        if (!preg_match('/blank.(.*)/i', $element->src) && filter_var($element->src, FILTER_VALIDATE_URL)) {
            $image_urls[] = $element->src;
        }
    }

    // prepare for JSON 
    $output = array('title' => $page_title, 'images' => $image_urls, 'content' => $page_body);
    echo json_encode($output); // output JSON data
}
?>

Tym oto sposobem mamy gotowe rozwiązanie! Poniżej link do pobrania całości.

Pobranie treści strony niczym Facebook – PHP / jQuery

Roundup #15 – Clearless, Stick‘em, Cycle2, Impromptu, Lenticular

Roundup #15 - Clearless, Stick‘em, Cycle2, Impromptu, Lenticular

Clearless

A reuseable collection of carefully-considered Less mixins, or YALML (Yet Another Less Mixin Library).

The core tenets of this mixin library are to avoid output bloat wherever possible (via duplicated properties etc) and to provide flexibile, configurable solutions to the problems that are addressed by the library (i.e. by using Modernizr classes, browser hacks or not, etc). The aim is to give the author the benefits of reusable shortcuts without obliterating personal style and generating bloated stylesheets.

Clearless – A reuseable collection of carefully-considered Less mixins


Stick‘em

jQuery Stick ‘em makes Content Sticky on Scroll, to a Point. Sometimes, we have some of those images were very tall. So by the time you scrolled down to the bottom of the images, you would have to scroll back up just to read the text to give you context about the images you had just viewed.

Make Content Sticky on Scroll, to a Point with jQuery


Cycle2

Cycle2 is a versitile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest.

Cycle2 – The Popular jQuery Slideshow Plugin Got Better


Impromptu

jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.

jQuery Impromptu – A nice replacement for an alert, prompt, and confirm


Lenticular

Lenticular.js is a jQuery plugin for creating image animations that response to tilting or mouse events.

Tilt-Controlled Images – Lenticular.js


[1], [2], [3]

Roundup #14 – RSlider, Kube, Grunt, FlexiNavCalc, Codiad

Roundup #14 - RSlider, Kube, Grunt, FlexiNavCalc, Codiad

RSlider

Image sliders add life and interactivity to your web contents. But creating an image slider from scratch is not that easy. You need some good programming skills to create your own slider. If you are not the programmer or you just don’t want to re-invent the wheel, RSlider is for you. Its a full screen responsive image and content slider powered by the fantastic javascript library jQuery. With a nice and simple design it adjusted automatically to the width of your browser screen.

RSlider – A full screen responsive jQuery image & content slider


Kube

Minimal and enough. Adaptive and responsive. Revolution grid and beautiful typography. No imposed styles and freedom.

Kube Framework – A Minimal Responsive CSS Framework


Grunt

Grunt is a task-based command line build tool for JavaScript projects. It has the following predefined tasks that you can use in your project: Concatenate files, Validate files with JSHint, Minify files with UglifyJS, Run unit tests with nodeunit and etc. In addition to the built-in tasks, you can create your own tasks.

A Task-based Command Line Build Tool for JS Projects


FlexiNavCalc

FlexiNavCalc is a calculator for use in determining percentage widths of navigation items in responsive layouts. The aim of creating FlexiNavCalc is to avoid certain responsive navigation issues and to give the developer more control over navigation layout, especially full width navigation elements.

FlexiNavCalc – A calculator for determining % widths of navigation items in a responsive layout


Codiad

Codiad is a web-based IDE framework with a small footprint and minimal requirements. The system is still early in development, and while it has been proven extremely stable please be sure to backup regularly if you use it in any production work.

Open Source And Web-Based IDE For Coding Remotely – Codiad


[1], [2], [3]

Roundup #13 – VintageJS, Bonsai, Bourbon, ImageMapster, Base, responsive-carousel, Jarallax

Roundup #13 - VintageJS, Bonsai, Bourbon, ImageMapster, Base, responsive-carousel, Jarallax

VintageJS

vintageJS is a tool where you can upload your images and apply a custom retro, vintage look to them for free. Just try it out: upload your photo, apply the vintage effect and share the retro image it with your friends via Facebook or Twitter.

Vintage Effect for Photos with VintageJS jQuery Plugin


Bonsai

Bonsai is a JavaScript graphics library.
Bonsai’s main features include:

  • Architecturally separated runner and renderer
  • iFrame, Worker and Node running contexts
  • Paths
  • Assets (Videos, Images, Fonts, SubMovies)
  • Keyframe and time based animations (easing functions too)
  • Path morphing
  • and much more…
Bonsai – A Powerful JavaScript Graphics Library

Bourbon

Bourbon is a comprehensive library of sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.
The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.

Bourbon – A comprehensive library of sass mixins


ImageMapster

ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids.

ImageMapster – A jQuery plugin that activates HTML imagemaps


Base

A super simple, responsive framework built to work on mobile devices, tablets, netbooks and desktop computers.

A Simple, Responsive CSS Framework – Base


responsive-carousel

A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard.

responsive-carousel – A jQuery-based script for responsive carousels


Jarallax

Jarallax is an open-source JavaScript library which makes adjusting css based on interaction easy. With Jarallax it’s easy to create a parallax scrolling website.

Parallax Scrolling Made Easy – Jarallax


[1], [2], [3]

Roundup #12 – Mobiscroll, TideSDK, Terrific Composer, iView Slider, Tooltipster, Yeoman, Neat, Prefix free, This Is Responsive

Roundup #12 - Mobiscroll, TideSDK, Terrific Composer, iView Slider, Tooltipster, Yeoman, Neat, Prefix free, This Is Responsive

Mobiscroll

Mobiscroll is a powerful, easy to set-up HTML5 control, that makes selecting values for your smartphone & tablet users a breeze. It is an Open Source control built on solid ground with jQuery. It is your one-stop solution for everything scrollable list. Its customizable and modular nature provides a great foundation you can build on.

Mobiscroll – The customizable HTML5 spinner control for touch devices


TideSDK

Create multi-platform desktop apps with HTML5, CSS3 and JavaScript TideSDK formerly known as Titanium Desktop is the best way to create beautiful, unique desktop apps using your web development skills.

Create Desktop Apps With HTML5, CSS3 And JavaScript With TideSDK


Terrific Composer

Terrific Composer is a Frontend Development Framework specifically designed for building deluxe frontends based on the Terrific concept

Terrific Composer – A framework designed for building deluxe frontends


iView Slider

iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

iView Slider – A responsive slider with animated captions


Tooltipster

Tooltipster is a lightweight (4,813 bytes minified) jQuery plugin that enables you to easily create clean, HTML5 validated tooltips.

  • Supports HTML tags inside the tooltip
  • Lightweight and degradable
  • Extremely flexible & fast to set up
  • Easily styled with 100% CSS – no images needed
  • Plays nicely with IE
Good-Looking & Lightweight Tooltips: Tooltipster

Yeoman

Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.


Neat

Neat is a simple grid framework built on top of Sass and Bourbon using em units and golden ratios. Using Sass 3.2 block mixins, this framework makes it extremely easy to build responsive layouts. Using the breakpoint() mixin, you can change the number of columns in the grid for each media query and store these values in project-wide variables to DRY up your code.

Bourbon Neat – A simple responsive grid framework built on top of Sass and Bourbon


Prefix free

-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

Break Free From CSS Prefix with -Prefix-free JS Plugin


This Is Responsive

This Is Responsive. Patterns, resources and news for creating responsive web experiences.

A Place To Find Any Information On Responsive Layouts: This Is Responsive


[1], [2], [3]

Roundup #11 – Mobify, Freetile, TiltShift, Enquire, jsPDF

Roundup #11 - Mobify, Freetile, TiltShift, Enquire, jsPDF

Mobify

Mobify.js is an open source client-side web framework that helps you adapt any website to support any device. Powering millions of daily mobile visits to your favourite websites.


Freetile

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement. Freetile has been the layout engine behind Assemblage and Assemblage Plus for almost two years, and now it becomes available as an independent Open Source project.

Pinterest-like Layout Plugin without Fixed Column Width


TiltShift

A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.

CSS3 Tilt-Shift Effect jQuery Plugin


Enquire

A lightweight JavaScript library for handling CSS media queries.

  • Deal with your media queries being matched (and even unmatched!)
  • Respond to browser events with aplomb
  • And if you want to get really fancy, run one-time setup routines
Handle CSS Media Queries With JS – Enquire.js

jsPDF

PDF files that are created online usually make use of the server-side languages (and their extensions/libraries for PDF).

jsPDF, a free JavaScript library, doesn’t need any server-side script and can create PDF files on the client-side.

Create PDF Files With JavaScript – jsPDF


[1], [2], [3]