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 Web

Confusing Components

Do I need all four parts?

  • Custom Elements
  • Shadow DOM
  • HTML Imports
  • HTML Templates

I'm confused as to which bits I need supported. Do I need all of them to blindy create and use other components?

View ES2015 JavaScript

We're excited to have you attend one of our workshops! Here's a JavaScript (re)fresher to help you get up-to-speed on some features of the language we'll be using.

Let and Const

JavaScript has always had var:

var name = 'Ryan'
adactio / basicServiceWorker.js
Last active Apr 9, 2020
A basic Service Worker, for use on, say, a blog.
View basicServiceWorker.js
'use strict';
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
(function() {
// Update 'version' if you need to refresh the cache
var staticCacheName = 'static';
var version = 'v1::';
holman / emoji_test.rb
Last active Nov 18, 2018
A snapshot of the tests we use internally at GitHub to help edit our blog posts before they go out to everybody. For more information, take a peek at
View emoji_test.rb
require_relative "test_helper"
require "open-uri"
require "net/http"
class EmojiTest < Blog::Test
def test_no_emoji
posts.each do |post|
content =
refute_match /:[a-zA-Z0-9_]+:/, content,
domenic /
Last active Mar 17, 2020
Auto-deploying built products to gh-pages with Travis

Auto-deploying built products to gh-pages with Travis

This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.

Create a compile script

You want a script that does a local compile to e.g. an out/ directory. Let's call this for our purposes, but for your project it might be npm build or gulp make-docs or make or anything similar.

The out/ directory should contain everything you want deployed to gh-pages. That almost always includes an index.html.

View react-app-file-structure
├── actions
├── stores
├── views
│   ├── Anonymous
│   │   ├── __tests__
│   │   ├── views
│   │   │   ├── Home
│   │   │   │   ├── __tests__
│   │   │   │   └── Handler.js
kpdecker /
Last active Jun 2, 2016 #nodebf 2014

Mobile Server Side Rendering

This year marks the first year that we are doing full scale rendering of our SPA application on our Node.js tier, which has provided a number of challenges that are very different from the mostly IO-bound load of our prior #nodebf.

The infrastructure outlined for last year is the same but our Home, Item and a few other pages are prerendered on the server using fruit-loops and hula-hoop to execute an optimized version of our client-side JavaScript and provide a SEO and first-load friendly version of the site.

To support the additional CPU load concerns as peak, which we hope will be unfounded or mitigated by our work, we have also taken a variety of steps to increase cache lifetimes of the pages that are being served in this manner. In order of their impact:

Event Loop Management

View how to screencapture and make animated gifs or

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

screen shot 2014-10-22 at 11 16 23 am

codler / css-supports.js
Last active Mar 18, 2020
CSS.supports() Polyfill
View css-supports.js
/*! CSS.supports() Polyfill
* Copyright (c) 2014 Han Lin Yap; MIT license */
if (!('CSS' in window)) {
window.CSS = {};
if (!('supports' in window.CSS)) {
window.CSS._cacheSupports = {};
window.CSS.supports = function(propertyName, value) {
addyosmani /
Last active May 26, 2020 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

You can’t perform that action at this time.