Tuesday, February 17, 2015

CSS-only triangles

You can make a triangle with just CSS (just like the tiny triangle on Vimeo sidebar).

.triangle {

    width: 0;

    height: 0;

    border-top: 100px solid #0099ff;

    border-left: 100px dashed transparent;

    border-right: 100px dashed transparent;

    border-bottom: 0;

   display: block;

   overflow: hidden;

Demo: http://leplay.github.com/demo/tr...

View Source Code

Calculated values in modern browsers

This is one I came across recently, calc() allows you to do simple math and unit conversions in CSS.

background-position: calc(100% - 50px) calc(100% - 20px);

Browser support is quite good! Can I use... Support tables for HTML5, CSS3, etc

Using vw and vh Measurements In Modern Site Design

Some CSS properties and values don’t gain a lot of developer attention, either because a particular spec is not "sexy" enough or because use-cases don’t seem immediately obvious. Good examples of the latter include the vw, vh, vmax and vmin length measurements, which have been part of the CSS3 Values & Units Module for some time but are just now finding support in modern browsers.

As we’ll see in the next article, these new measuring systems are natural fits for creating adaptive and responsive site designs; for now, let’s take at the general idea of the new units.

Why Do We Need Another Way Of Measuring Things In CSS?

The principles behind vw, vh are simple: they represent percentages of the browser viewport’s width and height, respectively.

1vw = 1/100 of the current viewport width, i.e. 1% of the width

15vh = 15/100 of the viewport’s current height or 15% of the height

Both vw and vh can take any positive number: integers and floating point values are all valid.

At first glance, vw and vh would appear to be somewhat redundant, as we already have a measuring system that relates to the viewport width as a percentage. For example:

div { width: 50%; }

Applied to almost any element, a percentage width correlates the size of an element to the size of its container, which may include the browser window: indeed, the concept and practice of fluid images relies entirely on this fact. But a little consideration shows that percentage measurements have some significant limitations:

body width does not include the margin
viewport height has always been difficult to measure, as the height of the bodydepends on the amount of content on the page, not the dimensions of the browser window.
Most importantly, percentage width of the body cannot be applied to the size of text.font-size: 15% sizes the font relative to its native or natural proportions, not the dimensions of the viewport.

So the equivalent in vw units to the declaration above (ignoring any margin that may have influenced the div) would be:

div { width: 50vw; }

To scale a heading in relation to the width of the browser window, you could use:

h1 { font-size: 5vw; }

vmin & vmax

vmin is a measurement that relates directly to the width or height of the browser window in the same way that vwand vh do. The difference is that vminchooses which axis to measure itself against depending on whichever issmallest, while vmax relates to whichever is largest. So if a browser is opened to the aspect ratio shown in the figure to the right, 10vmin will be equivalent to 1/10^thof the viewport’s width, while 25vmax will be a quarter of the viewport’s height.

Current browser support for viewport units
IE 9+
Firefox 19+
Chrome 20+
Safari 6+
Opera 15+
Android 4.4+

It’s important to note that Safari support is not dynamic at the time of writing: resizing the browser window will not alter the size of elements measured in vw, vh, vmax or vmin. Instead, the elements will be scaled proportionally to the viewport’s initial size. In addition, IE does not currently recognize vmax.

Polyfills will gain you greater browser support: JavaScript code has been created by Lea Verou and Sebastian Ferreyra.

Conclusion

The vw and vh units have unique application to mobile development, and offer the only way to predictably scale text in response to viewport size.

Few usefull tricks

An HTML element with an ID creates a JavaScript global with the same name
Surprising but true, and it's done by modern browsers as a means of backwards compatibility:

HTML:

<div id="someInnocentDiv"></div>

JS:

console.log(someInnocentDiv);  // <div id="someInnocentDiv"></div>

You can read the text at any XY coordinate on a webpage

var x = 50, y = 100;

var range = document.caretRangeFromPoint(x, y);

if(range) {

    range.expand('word');

    var word = range.startContainer.textContent.substring(range.startOffset, range.endOffset);

    console.log(word);

A cross-browser compatible way of doing this: http://jsfiddle.net/heZ4z/

You can base64 encode files dropped onto the document from your desktop

document.ondrop = function (e) {

    e.preventDefault();  // prevent browser from trying to run/display the file

    var reader = new FileReader();

    reader.onload = function(e) {

      console.log(e.target.result);  // base64 encoded file data!

};

    reader.readAsDataURL(e.dataTransfer.files[0]);

This only works in recent browsers that support the new HTML5 File API:https://developer.mozilla.org/en...

You can quickly run HTML in the browser without creating a HTML file:
Enter this in the address bar:

data:text/html,<h1>Hello, world!</h1>

(This won't work in IE)

You can make a page's CSS editable in the browser without using JS:

<!DOCTYPE html>

<html>

<body>

<style style="display:block" contentEditable>

body { color: blue }

</style>

</body>

</html>

(This also won't work in IE)

You can have the browser parse a URL for you like this:

var a = document.createElement('a');

a.href = url;

// any property of window.location works here:

document.write('The hostname of ' + url + ' is ' + a.hostname);

(Works in all major browsers)

You can invalidate a URL in the browser's cache by sending a PUT method xmlhttprequest to it:

var xhr = window.XMLHttpRequest ?

    new XMLHttpRequest() :

    new ActiveXObject('Microsoft.XMLHTTP');

xhr.open('PUT', url);

xhr.send(null);

(Works in all major browsers)

You can put multiple statements in an

if

block without using curly brackets like this:

if (confirm("Do you wish to see two alerts?"))

  alert(1), alert(2);

(Works in all major browsers)

Constant aspect ratio element

You can create containers that maintain a constant aspect ratio by using padding-bottom as a percentage. The CSS spec says that padding-bottom is defined relative to the *width*, not height, so if you want a 5:1 aspect ratio container you can do something like this:

<div style="width: 100%; position: relative; padding-bottom: 20%;">

<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">

this content will have a constant aspect ratio that varies based on the width.

</div>

</div>

This is useful for responsive layouts where you want the width to adjust dynamically but want to keep, say, square photo thumbnails.

Visual events viewer

When working with events in Javascript, it is often easy to lose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. Javascript libraries also add another degree of complexity to listeners from a technical point of view, while from a developers point of view they of course can make life much easier! But when things go wrong it can be difficult to trace down why this might be.

It is due to this I've put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. This is primarily intended to assist debugging, but it can also be very interesting and informative to see the subscribed events on other pages.

Usage

Using Visual Event on any web-page is extremely simple:

Drag the Visual Event link below to your bookmark bar:
Load a web-page which uses one of the supported Javascript libraries
Click Visual Event in your bookmark bar
View the event handlers which are attached to the document elements.

You can see a demo of this in action showing the events attached by my own DataTables jQuery plugin.

Visual Event is currently beta level software and as such there are a few important notes to make. This first of these is that Visual Event will not currently work in Internet Explorer. IE has it's own events model and I've concentrated initially on the W3C model. The second point is that only events added by libraries which Visual Event recognises will actually be shown (see later for why). The currently supported libraries are:

DOM 0 events
jQuery 1.2.x +
YUI 2.6.x (2.x might work!)
MooTools 1.2.x
Prototype 1.6.x
JAK (Events 2.2)
Glow

When using Visual Event you will notice that I've used colour coding and icons to represent different actions in a concise and easy to view manner. The background colours which show that an element has an event attached to it follow the mapping shown below.

Colour	Meaning
Blue	Mouse event
Red	UI event (keys etc)
Yellow	HTML event (select etc)
Purple	Mouse + UI events
Orange	UI + HTML events
Green	Mouse + HTML events
Black	Mouse + UI + HTML events

The icons representing individual events also follow this colouring pattern, but also indicate what the attached event is pictorially. The follows the mapping shown below.

Icon	Event
	click
	dblclick
	mousedown
	mousemove
	mouseout
	mouseover
	mouseup
	change
	focus
	blur
	select
	submit
	keydown
	keypress
	keyup
	load
	unload
	custom / unknown

Technical information

It turns out that there is no standard method provided by the W3C recommended DOM interface to find out what event listeners are attached to a particular node. While this may appear to be an oversight, there was a proposal to include a property called 'eventListenerList' (reference) to the level 3 DOM specification, but this has unfortunately been removed in the latest drafts. As such we are forced to looked at the individual Javascript libraries, which typically maintain a cache of attached events (so they can later be removed and perform other useful abstractions).

In the current version of Visual Event I have included support for jQuery, YUI, MooTools, Prototype (many thanks to John Schulz for his advice in adding Prototype support) and JAK (with thanks to Michal Aichiner for providing an API function). I've investigated including information Dojo, however this library does not appear not to cache the information that is required by visual event. If anyone does know of a way - please get in touch!

I would strongly encourage developers who use some of the other libraries to get in touch with me, and submit a function which can be used by Visual Event to parse a specific library's cache. The following structure must be returned by the function:

// Return code from event cache parsing function

[

    {

        // Node which is in question

        "nNode": -,

        // The name of the library where the event comes from (e.g. 'YUI')

        "sSource": '',

        // Array of the listeners attached to this node

        "aListeners": [

            {

                // Type of event (e.g. 'click')

                "sType": '',

                // String of the function to run (from Function.toString())

                "sFunction": '',

                // Indicate if the event has been removed by the library - typically false

                "bRemoved": ''

            },

            ...

        ]

    },

    ...

]

Alternatively, you can make use of a global variable which Visual Event will recognise. This global variable is called VisualEvents which you can populate using either the structure given above, or the slightly simpler version below (ideal for putting into an event registration function) - or any combination of the two:

[

    {

        // Node which is in question

        "nNode": -,

        // The name of the library where the event comes from (e.g. 'YUI')

        "sSource": '',

        // Type of event (e.g. 'click')

        "sType": '',

        // String of the function to run (from Function.toString())

        "sFunction": '',

        // Indicate if the event has been removed by the library - typically false

        "bRemoved": ''

    },

    ...

]