Skip to content

Instantly share code, notes, and snippets.

Avatar

一丝 yisibl

View GitHub Profile
@malyw
malyw / index.js
Last active Jul 29, 2020
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('https://www.chromestatus.com/samples', {waitUntil: 'networkidle'});
@kfitfk
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',\
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;
@kejun
kejun / gist:3f4851c7f3b3e209fcbb
Last active Jul 9, 2019
最近一次项目的总结
View gist:3f4851c7f3b3e209fcbb

mathclub是最近做的一个个人项目,帮助考SAT的同学通过在线做题、回顾、问答提高成绩。用户功能有:计次/计时做题、成绩单、错题分布、错题回顾、提问、汇总以及注册登录。管理后台主要是题库管理、学员管理、成绩单管理、问题回复。怎么看都像学校里的课设,的确项目本身并不出奇,开发上选用的一些方案或许更有意思。

整个项目一个人从产品需求、原型设计、前后端开发到部署历时2周左右。可以从截图上感受一下:

image

技术选型上服务端是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

@sergejmueller
sergejmueller / ttf2woff2.md
Last active Jul 7, 2020
WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
View ttf2woff2.md
@yisibl
yisibl / HTML-tags.md
Last active Dec 19, 2019
常用的 HTML 头部标签
View HTML-tags.md

常用的 HTML 头部标签

详细介绍参见原文:https://github.com/yisibl/blog/issues/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 -->
@ambar
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);
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 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 :)
@afabbro
afabbro / webkit-pseudo-elements.md
Created Sep 21, 2012
Webkit Pseudo-Element Selectors (Shadow DOM Elements)
View webkit-pseudo-elements.md

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;

You can’t perform that action at this time.