Skip to content

Instantly share code, notes, and snippets.


一丝 yisibl

View GitHub Profile
afabbro /
Created Sep 21, 2012
Webkit Pseudo-Element Selectors (Shadow DOM Elements)

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:


View gist:5760217
In order for this to work you need ffmpeg. I tried with version 1.2.1.
1) Play the video you want to download in the browser
2) Inspect the video element on the page
3) Copy the video url from the page source (something like
4) In this url replace "" with "iphone_c.m3u8" (for 960x540 resolution) or "atp.m3u8" if you want more (probably 720p?)
5) Execute `ffmpeg -y -i output.mp4`
6) There is your video :)
ambar / mac-arabic-fix.css
Last active Dec 22, 2015
Mac/iOS arabic crash bug
View mac-arabic-fix.css
@font-face {
font-family: 'Helvetica Neue';
unicode-range: U+0600—06FF, U+0750—077F, U+08A0—08FF, U+FB50—FDFF, U+FE70—FEFF, U+10E60—10E7F, U+1EE00—1EEFF;
src: local(Arial);
@font-face {
font-family: 'Helvetica Neue';
font-weight: bold;
unicode-range: U+0600—06FF, U+0750—077F, U+08A0—08FF, U+FB50—FDFF, U+FE70—FEFF, U+10E60—10E7F, U+1EE00—1EEFF;
src: local(Arial);
yisibl /
Last active Dec 19, 2019
常用的 HTML 头部标签

常用的 HTML 头部标签


<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 -->
    <meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用 IE 最新版本和 Chrome -->
sergejmueller /
Last active Apr 4, 2021
WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
kejun / gist:3f4851c7f3b3e209fcbb
Last active Jul 9, 2019
View gist:3f4851c7f3b3e209fcbb




技术选型上服务端是Node.js,应用框架选了老牌的Express(4.x变化挺大不少中间件都废了),数据服务用的是MongoLab(MongoDB的云服务平台),图片上传用的是又拍云,程序部署在Nodejitsu上。模板引擎没选主流的Jade或ejs,而是用Express React Views它实现了在服务端渲染React组件。前端框架是用React,这次有意想追求前后端全部组件化的组织。之前是用Webpack实现CommonJS模块打包,这次用Browserify配置更简单,它有丰富的transform很赞,其中的reactify转换React的JSX很完美。CSS用Sass+autoprefixer让人省心。将这一切串起来的自动构建工具是Gulp。我其实崇尚用最精简的工具组合开发,上述组合在我看来比较精简了。(帖纸留念)


View bling.js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
NodeList.prototype.__proto__ = Array.prototype;
kfitfk / ps_save_jpeg.jsx
Created Jul 23, 2015
A Photoshop script to automate save for web as JPEG. Save the file as using jsx extenstion. Then in Photoshop go to "File-Scripts-Browse..." to load the file. This script will overwrite the existing output file if it already exists.
View ps_save_jpeg.jsx
// Utils
function trace() {
$.writeln.apply($, arguments);
// Construct the dialog layout
var layoutInfo = "dialog{\
text: 'Save for Web in JPEG',\
info: Panel {\
orientation: 'column',\
malyw / index.js
Last active Mar 31, 2021
Capture DOM element screenshot using Chrome headless
View index.js
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Adjustments particular to this page to ensure we hit desktop breakpoint.
page.setViewport({width: 1000, height: 600, deviceScaleFactor: 1});
await page.goto('', {waitUntil: 'networkidle'});