Skip to content

Instantly share code, notes, and snippets.

View sjockers's full-sized avatar

Simon Jockers sjockers

85 followers · 31 following
View GitHub Profile
@magnusjt
magnusjt / createWebComponent.js
Last active February 28, 2019 13:07
Create react app inside webcomponent (v1) with shadow dom fallback
const ReactDOM = require('react-dom')
const retargetEvents = require('react-shadow-dom-retarget-events')
function getStyleElementsFromReactWebComponentStyleLoader(){
try{
return require('react-web-component-style-loader/exports').styleElements
}catch(e){
return []
}
}
@shawnbot
shawnbot / README.md
Last active September 23, 2018 11:39
CSS bar charts in 2018

This is an example of what you should be able to do once the major browsers implement some seriously cool features in the CSS3 draft spec as of April, 2016:

  1. [CSS variables][vars], using the --name: value assignment and var(--name) accessor syntax. (Already implemented by Chrome, Firefox, and Webkit!)
  2. [CSS3 calc()][calc], which gives us calculated values between different units, e.g. subtracting a value in px or em from a percentage. (Partially implemented in Chrome, Firefox, and Safari.)
  3. [CSS3 attr()][attr], which grants the function the ability to parse values in specific units in the form attr(attr-name units). (Not yet implemented in any major browser.)

Together, these features would enable us to use HTML element attribute values as the basis for calculated values in CSS on a per-element basis, and define (then change) which property the values are applied to. This would open up possibilities for more data-driven design entirely in CSS, without the need for JavaScript.

Note: I've

@missinglink
missinglink / leaflet-foursquare.js
Last active November 29, 2016 14:59
Leaflet configuration which allows you to set map co-ordinates with a pixel offset (as per foursquare homepage). In this example I am using jQuery to find the width of `$('main.content')` and use that to offset the map.
var map = L.map( 'map' );
L.Map.prototype.panToOffset = function (latlng, offset, options) {
var x = this.latLngToContainerPoint(latlng).x - offset[0]
var y = this.latLngToContainerPoint(latlng).y - offset[1]
var point = this.containerPointToLatLng([x, y])
return this.setView(point, this._zoom, { pan: options })
}
function centerMap(){
@mourner
mourner / TileLayer.Common.js
Created February 11, 2012 23:11
Leaflet shortcuts for common tile providers
// Lefalet shortcuts for common tile providers - is it worth adding such 1.5kb to Leaflet core?
L.TileLayer.Common = L.TileLayer.extend({
initialize: function (options) {
L.TileLayer.prototype.initialize.call(this, this.url, options);
}
});
(function () {