oslego

Detective

No user left in the dark!

The 'Detective' web service provides a simple way for web developers to add feature detection to their demos that use cutting edge features. It the user's browser does not support a feature, a custom-defined message will inform the user what is to be done.

API

oslego

[Writting in progress] Chrome Developer Tools extensions and The Selected Element

This article is about building extensions for Google Chrome Developer Tools, also known as Chrome DevTools. Specifically, you'll learn how to work with element that is currently selected in the 'Elements' panel. Prior knowledge about DevTools extensions is required. Check out Boris Smus's Extending Chrome Developer Tools for an introduction and read through Google's own documentation on Chrome Extensions.

Chrome Extensions and Chrome DevTools Extensions

You can build extensions for the Google Chrome browser itself, which are targeted at regular users, as well as extensions for Chrome DevTools - the set of panels that developers use to inspect and audit content on web pages.

oslego

function convertPixelPathToEm(path){
  return path.trim().split(/,\s?/).map(function(pair){
    return pair.trim().split(/\s+/).map(function(value){ 
      value = parseInt(value, 10);
      value = (value === 0) ? 0 : (value / 16).toFixed(2)
      return value + 'em'
    }).join(' ')
  }).join(', ')
}

oslego

    /*
      Make sure the input element is the highest one in the page by z-index
      @param {DOM Element} el Element to stack at the top
      @param {DOM Element} ref BoundingClientRect reference of where to compare topl-left corner
    */    
    function stackOnTop(el, ref){

      // elementFromPoint returns null if element is outside visible viewport
      // scroll the page so the element comes into view
      if (window.innerHeight < ref.top){

oslego

Guide to CSS Regions

Introduction

CSS Regions are a mechanism used in web pages to separate content from its layout. Regions can be used to visually flow content from one element to another regardless of the content's original location in the DOM tree.

Concepts

oslego

/**
 * border-radius example
 */

.box{
	background: lime;
	border-radius: 20px;
}

oslego

#!/bin/bash

osascript -e 'quit app "safari.app"'
export DYLD_FRAMEWORK_PATH="/path/to/Release/"  
export WEBKIT_UNSET_DYLD_FRAMEWORK_PATH="YES"
osascript -e 'activate app "safari.app"'

oslego

var Supports = (function(){
    // all spaces are important!
    var prefixes = ' -webkit- -moz- -o- -ms- ';
    
    function getPrefixedProperties(property, prefixes) {
        var properties = prefixes.join(property + " ").split(' ');
        
        // ignore the last string which is empty.
        return properties.slice(0, properties.length-1);
    }

oslego

var $ = function(){

    function noQuery() {
        var args = Array.prototype.slice.call(arguments, 0)[0],
            query = args[0]
            qsa = function(q){ 
                return Array.prototype.slice.call(document.querySelectorAll(q), 0)
            }     
            
        this.el = []     

oslego

Introducing CSS FilterLab.docx