jonathantneal

Fetching Web Platform Data in NodeJS

Should there be a need to fetch web platform data in NodeJS, here are some dependency-less functions that will return feature data from W3C, CanIUse, and MDN Browser Compatibility Data.

Dependency-Free Fetching in NodeJS

NodeJS includes an http and https library which can perform network requests.

const https = require('https')

necolas

/**
 * OnLayout is built upon: View (and ResizeObserver), StyleSheet
 */
 
const elementBreakpoints = {
  small: { minWidth: 200 },
  medium: { minWidth: 300 }
  large: { minWidth: 500 }
};
 

Heydon

// Elements with `data-observe` toggle `data-visible`
// between `true` and `false`

if ('IntersectionObserver' in window) {
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      entry.target.setAttribute('data-visible', entry.isIntersecting)
    })
  }
  

markteater

Scrolleo

Apple has been creating some amazing scrolling video sites lately and I've been trying to create a simplified plugin to recreate this effect. This is the alpha version of this plugin. You can see an example of the effect I'm recreating here: http://www.apple.com/macbook/

This uses requestAnimationFrame and allows you to create multiple custom scrolling videos easily.

A Pen by Mark Teater on CodePen.

License.

rsms

Font "package manager"

I've been thinking about creating a font management service similar to traditional software package managers (e.g. Debian Aptitude, NPM, etc.)

The basic idea is this:

1. There's a main repository of fonts that are free (as in free to distribute) that the working group hosts
2. There's a small program that serves as the "manager", to be used or installed on client systems
3. The "manager" can be configured to operate with multiple repositories

defunkt

• Rails: https://github.com/rails/pjax_rails
• Django: https://github.com/jacobian/django-pjax
• Asp.Net MVC3: http://biasecurities.com/blog/2011/using-pjax-with-asp-net-mvc3/
• FuelPHP: https://github.com/rcrowe/fuel-pjax
• Grails: http://www.bobbywarner.com/2012/04/23/add-some-pjax-to-grails/
• Express: https://github.com/abdelsaid/express-pjax-demo

dtrce

var http = require('http'),
    fileSystem = require('fs'),
    path = require('path')
    util = require('util');

http.createServer(function(request, response) {
    var filePath = 'path_to_file.mp3';
    var stat = fileSystem.statSync(filePath);

    response.writeHead(200, {

addyosmani

Ember.js currently doesn't have baked in support for Service Worker. They want this and there's an ember-cli RFCS thread discussing strategies however a number of tooling efforts exist to help fill in this gap today.

Note: you can of course just write vanilla Service Worker code for your Ember.js apps and that will work just fine. This doc tracks tooling and libraries that lower the friction for getting this setup

Service Worker Libraries

• sw-precache
• sw-toolbox

These static resource precaching and runtime caching libraries are lower-level than Broccoli, but can be used directly

scottjehl

/*
  * anchor-include pattern for already-functional links that work as a client-side include
  * Copyright 2011, Scott Jehl, scottjehl.com
  * Dual licensed under the MIT
  * Idea from Scott Gonzalez
  * to use, place attributes on an already-functional anchor pointing to content
    * that should either replace, or insert before or after that anchor
    * after the page has loaded
    * Replace:	<a href="..." data-replace="articles/latest/fragment">Latest Articles</a>
    * Before:	<a href="..." data-before="articles/latest/fragment">Latest Articles</a>

rwjblue

• Data Down / Actions Up

  • http://emberjs.jsbin.com/nayaho/edit?html,js - Interdependent select boxes. No observers.
  • http://ember-twiddle.com/2d7246875098d0dbb4a4 - One Way Input

• Plain JSBin's

  • http://rwjblue.jsbin.com/pixeki/edit?html,js,output

• Ember Version Base JSBin's

  • 1.0 - http://emberjs.jsbin.com/juluje/edit?html,js,output

• 1.1 - http://emberjs.jsbin.com/cofufo/edit?html,js,output