一丝 yisibl

## webkit-pseudo-elements.md

      
              1 file
            
          
              76 forks
            
          
              24 comments
            
          
              390 stars
            
          
                leostratus
                / webkit-pseudo-elements.md
            
            
              Created
              September 21, 2012 01:44
            
              
                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:
-webkit-appearance:none;

  
## 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 http://devstreaming.apple.com/videos/wwdc/2013/.../101/ref.mov)
4) In this url replace "ref.mov" with "iphone_c.m3u8" (for 960x540 resolution) or "atp.m3u8" if you want more (probably 720p?)
5) Execute `ffmpeg -y -i http://devstreaming.apple.com/videos/wwdc/2013/.../101/iphone_c.m3u8 output.mp4`
6) There is your video :)

## 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);

## HTML-tags.md

      
              1 file
            
          
              55 forks
            
          
              5 comments
            
          
              121 stars
            
          
                yisibl
                / HTML-tags.md
            
            
              Last active
              January 26, 2024 06:58
            
              
                常用的 HTML 头部标签
              
          
    常用的 HTML 头部标签

详细介绍参见原文：yisibl/blog#1
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用 IE 最新版本和 Chrome -->

  
## ttf2woff2.md

      
              1 file
            
          
              33 forks
            
          
              35 comments
            
          
              409 stars
            
          
                sergejmueller
                / ttf2woff2.md
            
            
              Last active
              March 9, 2024 13:37
            
              
                WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
              
          
    Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2
TTF to WOFF2 converting


http://www.fontsquirrel.com/tools/webfont-generator


## gist:3f4851c7f3b3e209fcbb

      
              1 file
            
          
              23 forks
            
          
              24 comments
            
          
              161 stars
            
          
                kejun
                / gist:3f4851c7f3b3e209fcbb
            
            
              Last active
              July 9, 2019 15:23
            
              
                最近一次项目的总结
              
          
    mathclub是最近做的一个个人项目，帮助考SAT的同学通过在线做题、回顾、问答提高成绩。用户功能有：计次/计时做题、成绩单、错题分布、错题回顾、提问、汇总以及注册登录。管理后台主要是题库管理、学员管理、成绩单管理、问题回复。怎么看都像学校里的课设，的确项目本身并不出奇，开发上选用的一些方案或许更有意思。
整个项目一个人从产品需求、原型设计、前后端开发到部署历时2周左右。可以从截图上感受一下：

技术选型上服务端是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。我其实崇尚用最精简的工具组合开发，上述组合在我看来比较精简了。（帖纸留念）
![image](http://satexam.b0.upaiyu

  
## 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;

## 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',\

## Chrome headless Puppeteer- capture DOM element screenshot using
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('https://www.chromestatus.com/samples', {waitUntil: 'networkidle'});
	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 http://devstreaming.apple.com/videos/wwdc/2013/.../101/ref.mov)
	4) In this url replace "ref.mov" with "iphone_c.m3u8" (for 960x540 resolution) or "atp.m3u8" if you want more (probably 720p?)
	5) Execute `ffmpeg -y -i http://devstreaming.apple.com/videos/wwdc/2013/.../101/iphone_c.m3u8 output.mp4`
	6) There is your video :)
	@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);
	/* bling.js */

	window.$ = document.querySelectorAll.bind(document);

	Node.prototype.on = window.on = function (name, fn) {
	this.addEventListener(name, fn);
	}

	NodeList.prototype.__proto__ = Array.prototype;
	// Utils
	function trace() {
	$.writeln.apply($, arguments);
	}

	// Construct the dialog layout
	var layoutInfo = "dialog{\
	text: 'Save for Web in JPEG',\
	info: Panel {\
	orientation: 'column',\
	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('https://www.chromestatus.com/samples', {waitUntil: 'networkidle'});