Skip to content

Instantly share code, notes, and snippets.

Razvan Caliman oslego

Block or report user

Report or block oslego

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View sm-annotated.html
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
@oslego
oslego / chrome.runtime.js
Created Jul 6, 2014
Mock impl of chrome.runtime for static development
View chrome.runtime.js
/*
Mock-implementation of chrome.runtime messaging API
*/
var Messager = (function (){
var _listeners = [];
return {
onMessage: {
addListener: function(cb){
_listeners.push(cb);
@oslego
oslego / ajax-jsonp-promise.js
Last active Aug 29, 2015
Cycle through data request strategies (ajax, jsonp) within a Promise.
View ajax-jsonp-promise.js
function get(url){
return new Promise(function(resolve, reject){
// request strategies: ajax, jsonp
var types = ['json', 'jsonp'];
function call(){
// try data type strategies one-by-one; mutates the array
var type = types.shift();
@oslego
oslego / cssToDOM.js
Last active Aug 29, 2015
Converts a CSS property name to its DOM form. Removes dashes and upperacases the char following the dash.
View cssToDOM.js
/*
Takes a CSS property name string and returns its DOM notation.
@example: shape-inside -> shapeInside
@example: -webkit-shape-inside -> webkitShapeInside
@param {String} str CSS property name, possibly hyphenated.
@return {String}
*/
function getDOMCSSProperty(str){
View regions-helper.md

JavaScript library to help working with CSS Regions. Handles prefixes internally.

API

flow = Flow('flow-name') Get the NamedFlow by name.

flow.fitWith('<div class="region">') Make the flow fit by adding elements to the region chain

View elementsFromPoint.js
//
// returns a list of all elements under the cursor
//
function elementsFromPoint(x,y) {
var elements = [], previousPointerEvents = [], current, i, d;
// get all elements via elementFromPoint, and remove them from hit-testing in order
while ((current = document.elementFromPoint(x,y)) && elements.indexOf(current)===-1 && current != null) {
// push the element and its current style
View regions-good-practices.md

[Draft] Working with CSS Regions, Good Practices

CSS Regions are now enabled by default in a widely used browser - Safari on iOS 7. This makes it easier for developers to experiment and use the feature in their projects.

Perhaps this is a good time to share some of the lessons we learned at Adobe while using CSS Regions in demos. Take this article as a recommendation of good practices, not by any means a comprehensive list. CSS Regions is still an evolving feature.

Use columns sensibly

@oslego
oslego / css-feature-detect.js
Last active Dec 23, 2015
Feather-weight CSS feature detect script that adds class names to the <body> element to signal support.
View css-feature-detect.js
(function(){
// feather-weight Modernizr-like CSS feature check
['shape-inside','flow-into','shiny-new-feature'].forEach(function(property){
// check if any variant exists, prefixed or not
var isCapable = ['-webkit-','-ms-','-moz-',''].some(function(prefix){
return prefix + property in document.body.style
})
property = isCapable ? property : 'no-' + property;
@oslego
oslego / detective.md
Created Sep 18, 2013
Outline for 'Detective' web service
View detective.md

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
oslego / devtools-selected-element.md
Last active Dec 19, 2015
How to build a Google Chrome DevTools extension where content scripts can access the node selected in the 'Elements' panel.
View devtools-selected-element.md

[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.

You can’t perform that action at this time.