Skip to content

Instantly share code, notes, and snippets.

@xgqfrms-GitHub

xgqfrms-GitHub/syntax-high-lighter-copy-paste.md Secret

Last active June 5, 2017 06:59
Show Gist options
  • Save xgqfrms-GitHub/cc23c2cacbeb21bd6ccf36b1c6a5bf39 to your computer and use it in GitHub Desktop.
Save xgqfrms-GitHub/cc23c2cacbeb21bd6ccf36b1c6a5bf39 to your computer and use it in GitHub Desktop.
Download ZIP
Syntax Highlighter & copy paste & webgl & three.js & Low Poly & CSS变量 `currentColor`
Raw
syntax-high-lighter-copy-paste.md

Syntax Highlighter & copy paste

SyntaxHighlighter

https://alexgorbatchev.com/SyntaxHighlighter/

copy & paste

https://tutorialzine.com/2016/10/quick-tip-accessing-the-clipboard-with-javascript

https://clipboardjs.com/

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes

webgl & three.js

http://ife.baidu.com/college/detail/id/6

https://github.com/Ovilia

http://www.ituring.com.cn/book/miniarticle/58552

https://www.w3.org/TR/webaudio/

https://www.zhihu.com/question/29856775/answer/57668656

Low Poly

https://en.wikipedia.org/wiki/Low_poly

https://www.youtube.com/watch?v=4rIEUv_Tiv4

https://soundcloud.com/low-polyy

http://alssndro.github.io/trianglify-background-generator/

https://snorpey.github.io/triangulation/

https://qrohlf.com/trianglify-generator/

https://digital.com/blog/best-low-poly-generators/

http://ieeexplore.ieee.org/document/7314186/

https://github.com/baidu-ife/ife/tree/master/2015_spring/task#

https://github.com/baidu-ife/ife/tree/master/2015_summer

http://www.cnblogs.com/Wayou/p/how-to-make-a-simple-html5-canvas-game.html

http://www.wizardslizard.com/

http://www.lostdecadegames.com/demos/simple_canvas_game/

http://www.lostdecadegames.com/demos/simple_canvas_game/js/game.js

http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

https://wayou.github.io/

https://wayou.github.io/2016/06/26/mail-dev/

http://mewbies.com/how_to_easily_create_ascii_art_qr_codes.htm

https://wayou.github.io/2015/01/18/all-this/

CSS变量 currentColor

currentColor

https://wayou.github.io/2014/12/07/css-currentColor/

<div class="container">
    好好说话，有话好好说
</div>
.container{
    color: #3CAADB;
    border: 4px solid currentColor;
}
@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jun 3, 2017 •
edited
Loading

https://github.com/baidu-ife/ife/blob/master/2015_summer/task/vis_qihang_01.md

https://github.com/baidu-ife/ife/blob/master/2015_summer/task/ria_qihang_01.md

https://github.com/baidu-ife/ife/blob/master/2015_summer/task/mob_yangfan_01.md

mobile first rem & em

http://junmer.github.io/mobile-dev-get-started/#/

// 橫屏/竖屏
// http://junmer.github.io/mobile-dev-get-started/#/4/5

window.addEventListener('orientationchange', function() {
   // rerender something
});

console.log(window.orientation); // 0, 90, 180, -90 顺时针角度
<style media="all and (orientation:portrait)" type="text/css">
    /* 竖屏 */
</style>

<style media="all and (orientation:landscape)" type="text/css">
    /* 横屏 */
</style>

flexbox & flex

http://css-tricks.com/using-flexbox/

http://junmer.github.io/mobile-dev-get-started/#/4/8

http://www.w3.org/TR/css3-mediaqueries/

http://www.w3.org/TR/CSS2/media.html#media-types

https://github.com/lolmaus/breakpoint-slicer

软键盘 : 打开数字键盘 ???

<input type="tel">

隐藏地址栏

setTimeout(function(){ window.scrollTo(0, 1); }, 0);

添加到主屏按钮

将网站icon添加到主屏幕上

http://junmer.github.io/mobile-dev-get-started/#/4/12

chrome

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

TOUCH

TAP

click 有 300± ms 延迟

https://github.com/ftlabs/fastclick

SCROLL

区域滚动 overflow:auto 不靠谱

iscroll : http://iscrolljs.com/

saber-scroll : https://github.com/ecomfe/saber-scroll

GESTURES

A javascript library for multi-touch gestures

http://static.lukew.com/TouchGestureCards.pdf

http://www.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/

block 食指点击目标尺寸是44 x 44像素，拇指是72 x72像素 finger friendly design

tel: / sms:

HTML5 APIS (W3C)
刮一刮 (canvas)
摇一摇 (Device Orientation API)
咻咻咻 (audio)
啪啪啪 (getUserMedia)

-WEBKIT-TAP-HIGHLIGHT-COLOR: RGBA(255,255,255,0)
可以屏蔽点击元素时出现的阴影, 常用于有事件代理的父元素

IMG
@2x, @3x

感谢apple一次又次一次 重新发明像素

font icon

矢量图标, 自由变化大小, 颜色; 妈妈再也不用担心我的切图

IMG
base64

减少一个请求, 首屏图片无延迟; 图片没法gzip，而css可以
lazyload

有流量就会放肆，没流量就会克制

CSS3
合理使用渐变/圆角/阴影

别太多, 低端机 hold 不住
代替js动画

性能好, 兼容好, why not?
translate3d

开启GPU硬件加速, 提升动画渲染性能

LOCALSTORAGE
tpl
data
js
img
每个域的最大长度为5MB

避免
iframe

卡 cry, viewport 失效, iOS 宽高失效, fixed定位错误
fixed + input

什么仇什么怨
移动商桥 ios/android 分版本 hack

SPA OR MULTI PAGE
Multi Page (AJAX) SPA Isomorphic
模板 1+ 1 1
首屏数据 同步 异步 both
渲染 both client both
转场 差 优 优
SEO 优 差 优
路由 多个 多个 一致

CAN I USE
feature can i use
es5 那些年，每个库都有一个 each
JSON parsing 别了, JSON2
localstorage 存、存、存，有存，任性
canvas 和 Echarts 愉快的玩耍
GeoLocation 周围有啥好吃的

压缩合并 GZIP 14K
初始拥塞窗口数 initcwnd = 10
最大传输单元 MTU = 1500Bytes

首次传输大小 10 * 1500 ~ 14.5Kb

返回头 Response Header ~ 0.5Kb

内容 Body ~ 14Kb

http://www.smashingmagazine.com/2013/08/12/creating-high-performance-mobile-websites/

2G/3G 下建立连接时间

二维码

REMOTE DEBUGGING WITH CHROME FOR ANDROID(4.4+)

chrome://inspect/#devices

IOS (6.0.1+) + OS X (MOUNTAIN LION+) + SAFARI
IOS端:

设置 → Safari → 高级 → Web 检查器 → 开
OS X:

Safari → 偏好设置 → 高级 → 在菜单栏中显示开发菜单 Safari → 开发 → XXX's Phone → xxx.com

WEINRE

$ npm install -g weinre

weinre --boundHost -all- --httpPort 8081

打开 weinre 服务页面 http://localhost:8081

在需要调试页面嵌入 target script, 注意 localhost 要替换成手机可访问的 IP, 打开调试地址, 启动开发者工具, 开始调试吧

http://people.apache.org/~pmuellr/weinre/docs/latest/

http://people.apache.org/~pmuellr/weinre/docs/latest/ChangeLog.html

https://github.com/ftlabs/fastclick

browser-sync is much better!

https://www.npmjs.com/package/browser-sync

https://www.browsersync

? edpm start

https://highlightjs.org/
https://github.com/isagalaev/highlight.js

https://github.com/hakimel/reveal.js
http://lab.hakim.se/reveal-js/

https://github.com/baidu-ife/ife/blob/master/2015_summer/task/mob_yangfan_02.md

https://github.com/baidu-ife/ife/blob/master/2015_summer/task/mob_yangfan_02.md#移动

移动WEB开发入门
移动开发资源集合
The Mobile Web Handbook
MobileWeb 适配总结
移动前端不得不了解的html5 head 头标签
浅谈移动前端的最佳实践
touch系事件

移动端真机调试终极利器-BrowserSync

https://w3ctech.com/topic/979

MobileWeb 适配总结

https://github.com/Gaohaoyang/baidu-ife-practice

https://github.com/brianway/baidu-ife

https://zhuanlan.zhihu.com/p/25353670

https://github.com/ecomfe/echarts-liquidfill
https://ecomfe.github.io/echarts-liquidfill/example/

@xgqfrms-GitHub
Copy link
Author

html-tooltip-after-selecting-text

https://stackoverflow.com/questions/27414639/html-tooltip-after-selecting-text-in-an-input-or-in-a-textarea

https://stevenbenner.github.io/jquery-powertip/

https://github.com/stevenbenner/jquery-powertip

http://jsfiddle.net/wa83ro37/

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jun 3, 2017 •
edited
Loading

https://developer.mozilla.org/zh-CN/docs/Web/API/Selection

https://caniuse.com/#search=selection-api

@xgqfrms-GitHub
Copy link
Author

http://caniuse.com/#feat=document-execcommand

@xgqfrms-GitHub
Copy link
Author

http://caniuse.com/#feat=clipboard

@xgqfrms-GitHub
Copy link
Author

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

@xgqfrms-GitHub
Copy link
Author

http://primercss.io/

@xgqfrms-GitHub
Copy link
Author

http://www.inversoft.org/prime.js/
https://github.com/inversoft/2016-security-scripts
https://github.com/inversoft

@xgqfrms-GitHub
Copy link
Author

i18n & L10n

https://github.com/ufo-github/globalize

https://www.sitepoint.com/how-to-implement-internationalization-i18n-in-javascript

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jun 3, 2017 •
edited
Loading

prismjs

4K +

http://prismjs.com/

<footer data-src="templates/footer.html" data-type="text/html">

<span id="logo"></span>

<p>Handcrafted with ♥, by 
<a href="http://lea.verou.me" target="_blank">Lea Verou</a>, 
<a href="https://github.com/Golmote" target="_blank">Golmote</a> 
&amp; 
<a href="https://github.com/LeaVerou/prism/contributors" target="_blank">all these awesome people</a>
</p>

<nav>
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="download.html">Download</a></li>
		<li><a href="faq.html">FAQ</a></li>
		<li><a href="test.html">Test drive</a></li>
		<li><a href="extending.html">API docs</a></li>
		<li><a href="https://github.com/LeaVerou/prism/">Fork Prism on Github</a></li>
		<li><a href="http://twitter.com/prismjs">Follow Prism on Twitter</a></li>
	</ul>
</nav>
</footer>

Lea Verou

https://github.com/LeaVerou

http://lea.verou.me/

通过编写HTML和CSS来完全创建Web应用程序！

https://github.com/mavoweb/mavo.io

http://mavo.io/

#logo:before {
    content: '☠';
    float: right;
    font: 100px/1.6 LeaVerou;
}

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jun 3, 2017 •
edited
Loading

svg base64

data:image/svg+xml,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20version%3D"1.1"%20viewBox%3D"0%200%20100%20125"%20fill%3D"rgb%28200%2C0%2C0%29">\a <path%20d%3D"M65%2C15.437V8c0-3.86-3.141-7-7-7H42c-3.86%2C0-7%2C3.14-7%2C7v7.437C14.017%2C16.816%2C14%2C21%2C14%2C21v10h72V21%20C86%2C21%2C85.982%2C16.816%2C65%2C15.437z%20M43%2C9h14v6.086C54.828%2C15.032%2C52.51%2C15%2C50%2C15c-2.51%2C0-4.828%2C0.032-7%2C0.086V9z"%2F>\a <path%20d%3D"M19%2C37l6%2C62h50l6-62H19z%20M35.167%2C88.995C35.11%2C88.998%2C35.053%2C89%2C34.998%2C89c-1.581%2C0-2.904-1.236-2.993-2.834l-2-36%20%20c-0.092-1.654%2C1.175-3.07%2C2.829-3.162c1.663-0.089%2C3.07%2C1.175%2C3.162%2C2.829l2%2C36C38.087%2C87.488%2C36.821%2C88.903%2C35.167%2C88.995z%20M53%2C86\a %20c0%2C1.657-1.343%2C3-3%2C3c-1.657%2C0-3-1.343-3-3V50c0-1.657%2C1.343-3%2C3-3c1.657%2C0%2C3%2C1.343%2C3%2C3V86z%20M67.995%2C86.166%20%20C67.906%2C87.764%2C66.583%2C89%2C65.003%2C89c-0.057%2C0-0.112-0.002-0.169-0.005c-1.654-0.092-2.921-1.507-2.829-3.161l2-36\a %20c0.093-1.655%2C1.533-2.906%2C3.161-2.829c1.654%2C0.092%2C2.921%2C1.508%2C2.829%2C3.162L67.995%2C86.166z"%2F>\a <%2Fsvg>

@xgqfrms-GitHub
Copy link
Author

https://craig.is/making/rainbows

https://github.com/ccampbell/rainbow

2K+

@xgqfrms-GitHub
Copy link
Author

https://highlightjs.org/

https://github.com/isagalaev/highlight.js

9K +

@xgqfrms-GitHub
Copy link
Author

https://alexgorbatchev.com/SyntaxHighlighter/

https://github.com/syntaxhighlighter/syntaxhighlighter

4K +

@xgqfrms-GitHub
Copy link
Author

25 Syntax Highlighters: Tried and Tested

25语法荧光笔：经过测试

https://webdesign.tutsplus.com/articles/25-syntax-highlighters-tried-and-tested--cms-23931

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jun 3, 2017 •
edited
Loading

https://github.com/xgqfrms-GitHub/highlight.js

highlight js

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jun 5, 2017 •
edited
Loading

codemirror

https://codemirror.net/

CodeMirror是用于浏览器的JavaScript实现的多功能文本编辑器。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment