A rather geeky/technical weblog, est. 2001, by Bramus
var handlers = { 'overlay' : function(e) { // This function is executed on click of any element with // 'overlay' in its data-handler attribute. // The click event is in 'e', $(this).attr('data-foo') holds the // value of data-foo of the element the user clicked on }, 'another-function-name' : function(e) {} …
Continue reading “Progressive enhancement with handlers and enhancers”
For our messages to communicate across efficiently, we need to create a powerful connection between the user and our medium. Today we are going to explore a new way of presenting stories on the web. And for this I’ve created an open-source and free to use JavaScript library i call space.js. It’s basically parallax technologies …
Continue reading “Space.js – HTML-driven narrative 3D-scrolling”
navigator.serviceWorker.register(‘serviceworker.js’).then( function(serviceWorkerRegistration) { serviceWorkerRegistration.geofencing.add( new CircularGeofenceRegion({ name: “myfence”, latitude: 37.421999, longitude: -122.084015, radius: 1000 }), {includePosition: true}).then( function(geofence) { console.log(geofence.id); // If more than just a name needs to be stored with a geofence, now // would be the time to store this in some storage. }, function(error) { // During development it often helps …
self.addEventListener(‘push’, function(event) { // Since there is no payload data with the first version // of push messages, we’ll grab some data from // an API and use it to populate a notification event.waitUntil( fetch(SOME_API_ENDPOINT).then(function(response) { if (response.status !== 200) { // Either show a message to the user explaining the error // or enter …
Styling elements based on the “more than one” and “fewer than two” thresholds is a neat trick, but a flexible “quantity query” interface would accept any quantity. That is, I should be able to style “more than or equal to n” for any value of n. Then I can style “more than or equal to …
Great piece by Frank Chimero. Starts with that nostalgic nineties feel and finds it way to photography, responsive design, and the fact that some websites try to blow you away with their design/technological advancements. “Listen bub,” I say, “it is very impressive that you can teach a bear to ride a bicycle, and it is …
Social share scripts are convenient and easy to copy & paste but rely on JavaScript and add additional overhead to your site, which means more HTTP requests and slower load times. Instead, use share links that don’t require you to load scripts for each social site. Back to the basics: URLs and plain HTML (with …
HTTPie (pronounced aych-tee-tee-pie) is a command line HTTP client. Its goal is to make CLI interaction with web services as human-friendly as possible. It provides a simple http command that allows for sending arbitrary HTTP requests using a simple and natural syntax, and displays colorized output. HTTPie can be used for testing, debugging, and generally …
<picture> <!–[if IE 9]><video style="display: none;"><![endif]–> <source type="image/svg+xml" srcset="path/to/header–full.svg"> <source type="image/svg+xml" srcset="path/to/header–medium.svg" media="(max-width: 1024px)"> <source type="image/svg+xml" srcset="path/to/header–small.svg" media="(max-width: 640px)"> <!–[if IE 9]></video><![endif]–> <img src="path/to/header-1x.png" srcset="path/to/header-2x.png 2x, path/to/header-3x.png 3x" alt="Header description"> </picture> Besides using an SVG as a background image in CSS, you can serve SVG foreground images in HTML using one of several embedding techniques, …
Using a tad of JavaScript it iterates all <polygon> elements of the SVG and animates them using TimelineMax. It’s also possible without TimelineMax, by using a CSS animation, and by changing animation-delay per <polygon>. // SCSS @keyframes polyonlion-animation { to { transform: scale(1); opacity: 1; } } .polyonlion > g polygon { transform: scale(0); transform-origin: …