├── .github └── ISSUE_TEMPLATE.md ├── .gitignore ├── CNAME ├── README.md ├── _config.yml ├── _layouts ├── default.html └── page.html ├── contribution.md ├── favicon.ico ├── index.html ├── public ├── css │ └── main.css ├── fonts │ ├── iconfont.eot │ ├── iconfont.svg │ ├── iconfont.ttf │ └── iconfont.woff └── js │ ├── hl.js │ ├── main.js │ └── markd.js ├── robots.txt ├── sitemap.xml └── snippets ├── article ├── async-sync.md └── why-not-pure-websoket.md ├── css ├── all-stylesheet-media-types.md ├── another-robbin.md ├── basics-of-google-font-api.md ├── blockquote.md ├── blurry-text.md ├── book-article-css.md ├── bouncy-animated-loading-animation.md ├── browser-hack.md ├── browser-specific-hacks.md ├── clearfix.md ├── common-unicode-icons.md ├── corner-ribbon.md ├── css-diagnostics.md ├── css-triangle.md ├── fancy-ampersand.md ├── flip-an-image.md ├── font-stacks.md ├── forcing-grayscale-printing.md ├── gradient-text.md ├── gradient-underlines.md ├── hexagon-with-shadow.md ├── hide-scrollbar-in-IE10-plus.md ├── ipad-orientation.md ├── opacity.md ├── placeholder-center-text.md ├── reset-css.md ├── shake-css-keyframe-animation.md ├── style-tech.md └── webkit-file-input.md ├── htaccess ├── 301-redirects.md ├── append-prepend-files.md ├── custom-error-pages.md ├── denying-allowing-access.md ├── different-directory-index-page.md ├── force-correct-content-type-for-xhtml-document.md ├── force-favicon-requests-to-correct-location.md ├── force-files-to-download-not-open-in-browser.md ├── force-https.md ├── gizp-compression.md ├── password-protect-folders.md ├── set-expires.md └── www-no-www.md ├── html ├── add-body-class-just-for-ie.md ├── autocomplete-off.md ├── base64-encode-of-1x1px-transparent-gif.md ├── button-with-line-breaks.md ├── embedding-flash.md ├── embedding-quicktime.md ├── embedding-windows-media.md ├── example-form-markup.md ├── glyphs.md ├── html-generator.md ├── iphone-calling-and-texting-links.md ├── keep-flash-behind-other-elements.md ├── meta-refresh.md ├── meta-tag-for-forcing-ie-8-to-behave-like-ie-7.md ├── meta-tag-to-prevent-search-engine-bots.md ├── meta-tag.md ├── multiple-file-input.md ├── responsive-meta-tag.md ├── set-iphone-bookmark-icon.md ├── the-common-doctypes.md ├── tooltips-for-acronyms.md └── video-for-everbody.md ├── javascript ├── add-to-favorites-ie.md ├── async-script-loader-with-callback.md ├── async-sharing-buttons-g-facebook-twitter.md ├── auto-select-textarea-text.md ├── check-font-family-honored.md ├── check-if-in-viewport.md ├── cookie-gettersette.md ├── cross-browser-dependency-free-dom-ready.md ├── detect-ie.md ├── dispatchEvent.md ├── fix-ie-10-on-windows-phone-8-viewport.md ├── get-global-var.md ├── get-url-param.md ├── highstock-range-selector.md ├── htmlentities-for-javascript.md ├── htmltag-shiv.md ├── image-lazyload.md ├── javascript-detect-installed-flash.md ├── javascript-keycodes.md ├── javascript-md5.md ├── jf-transfer.md ├── lightten-darker-color.md ├── move-cursor-to-end-of-input.md ├── pagevisibility-api.md ├── prevent-background-image-flickering-in-ie.md ├── promise-loop.md ├── support-tabs-in-textareas.md ├── timer-polyfill.md ├── touch-without-move.md ├── use-firebug-in-any-browser.md ├── validate-html-bookmarklet.md ├── zhongwen-to-pinyin.md └── 按字节截取字符串.md ├── less ├── center-img.md └── less-mixin.md ├── mac └── all-cmd-in-mac.md ├── nginx ├── get-server-time.md ├── iconfont-origin.md ├── param-proxy.md └── pass_proxy.md ├── nodejs ├── cluster-nodejs-spider.md ├── express-generator-with-ejs-layout.md ├── github-API.md ├── request-images.md ├── send-email.md └── travel.md └── sass ├── advanced-type-checking.md ├── bem-mixin.md ├── black-white-opacity-mixins.md ├── extend-wrapper-aka-mixtend.md ├── functional-programming-function.md ├── getter-mixin.md ├── mixin-manage-breakpoints.md ├── preffix.md ├── scrollbar-mixin.md ├── setter-mixin.md ├── simple-asset-helper-functions.md └── triangle-mixin.md /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Type 2 | 3 | - [] article 4 | - [] css 5 | - [] htaccess 6 | - [] html 7 | - [x] javascript 8 | - [] less 9 | - [] mac 10 | - [] nginx 11 | - [] nodejs 12 | - [] sass 13 | 14 | ### Title 15 | 16 | - Your Snippet Name 17 | - Your Snippet Description 18 | 19 | ### Content 20 | 21 | ```javascript 22 | 23 | // code here. 24 | 25 | ``` 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _drafts/ 2 | _site/ 3 | node_modules/ 4 | *.un~ 5 | push.sh 6 | push.bat 7 | .jekyll-metadata 8 | del.js 9 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | snippets.barretlee.com -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Snippets 2 | 3 | 很多语言、很多配置、很多语法，太多太多东西，不能单靠大脑来记忆。[本应用](http://snippets.barretlee.com) 收集了一些平时常用以及网上寻觅的代码片段，并且在页面中提供了搜索功能，可以快速找到我们平时记下的代码，这里保存的部分片段还是十分有价值的。 4 | 5 | 本应用对应的网址为: 6 | 7 | ![snippet](http://www.barretlee.com/blogimgs/2015/09/20150902_2774c376.jpg) 8 | 9 | ### 贡献代码 10 | 11 | 如果你希望帮助丰富代码片段库，可以操作如下流程： 12 | 13 | - fork [barretlee/snippets](https://github.com/barretlee/snippets.git) 仓库 14 | - 然后执行如下命令 15 | ``` 16 | git clone https://github.com/{YOUR_GITHUB_NAME}/snippets.git 17 | cd snippets 18 | git checkout -b gh-pages 19 | cd snippets 20 | # 选择你想提交的文件类型，比如 html 21 | cd html 22 | touch {YOUR_CONTRIBUTE_FILE_NAME}.snippet 23 | ``` 24 | 其中，`{YOUR_CONTRIBUTE_FILE_NAME}.snippet` 的格式为： 25 | ``` 26 | --- 27 | title: {NAME} 28 | --- 29 | 30 | {CONTENT} 31 | ``` 32 | 可以使用 markdown 语法。 33 | - 提交代码 34 | ``` 35 | git add --all 36 | git commit -m "add file html/{YOUR_CONTRIBUTE_FILE_NAME}.snippet" 37 | git push origin gh-pages 38 | ``` 39 | - 然后在你的 [PR](https://github.com/{YOUR_GITHUB_NAME}/snippets/pulls) 页面提交一个 PR 到 `barretlee/snippets` 的仓库 40 | 41 | ### 关于 42 | 43 | ![小胡子哥](http://www.barretlee.com/avatar150.png) 44 | 45 | [小胡子哥的联系方式](http://www.barretlee.com/about/) 46 | 47 | ### LISCENSE 48 | 49 | MIT LISCENSE. 50 | 51 | 自由分享使用，注意保留署名。 -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | baseurl: / 2 | markdown: kramdown 3 | permalink: /:year/:month/:day/:title/ 4 | timezone: Asia/Shanghai 5 | 6 | home: http://www.barretlee.com/ 7 | demo: http://demo.barretlee.com/ 8 | base: http://snippets.barretlee.com 9 | weibo: http://weibo.com/173248656 10 | edit_path: https://github.com/barretlee/snippets/edit/gh-pages 11 | new_path: https://github.com/barretlee/snippets/new/gh-pages/snippets 12 | author: 小胡子哥 13 | author_en: Barret Lee 14 | email: barret.china@gmail.com 15 | author_info: 小胡子哥 16 | 17 | webrick: 18 | headers: 19 | Author: Barret Lee 20 | About: http://barretlee.com/about/ 21 | 22 | gems: 23 | - jekyll-seo-tag 24 | # - jekyll-feed 25 | 26 | # seo 27 | twitter: 28 | username: barret_china 29 | logo: http://www.barretlee.com/avatar150.png 30 | 31 | # feed 32 | # feed: 33 | # path: atom.xml 34 | # name: Snippets 35 | # description: 小胡子哥的代码收藏夹，Snippets 管理工具 36 | # url: http://snippets.barretlee.com 37 | # author: 小胡子哥 38 | 39 | defaults: 40 | - 41 | scope: 42 | path: "snippets" 43 | type: "posts" 44 | values: 45 | layout: nil 46 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ page.title }} | 小胡子哥的 snippet 分享 7 | 8 | 9 | 10 | 11 | 12 | 13 | {% seo title=false %} 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |

Snippets

 22 | 代码片段收集板 23 | 28 |
29 |
30 | {{ content }} 31 | 32 |
33 |
34 | loading... 35 |

这网速真是弱爆了...客官稍等,评论还在加载~

36 |
37 |
38 |
39 |
40 |

Copyright© {{ 'now' | date: "%Y" }} Designed By {{site.author}} Build with jekyll

41 |
42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |

{{ page.title }}edit

5 |
6 |

日期：{{page.date|date:"%Y-%m-%d"}}

7 |

作者: {{site.author_info}}

8 |
9 | 10 | {{ content }} 11 | 12 |
13 | 标签： 14 | {% for tag in page.tags %} 15 | {{ tag }} 16 | {% endfor %} 17 |
18 | 19 |
20 | 21 | {% if page.previous.url %} 22 | 上一篇：{{page.previous.title}} 23 | {% endif %} 24 |
25 | 26 | {% if page.next.url %} 27 | 下一篇：{{page.next.title}} 28 | {% endif %} 29 | 30 |
31 | 32 |
33 | 34 | 35 | 54 | -------------------------------------------------------------------------------- /contribution.md: -------------------------------------------------------------------------------- 1 | ## 贡献代码 2 | 3 | 很多语言、很多配置、很多语法，太多太多东西，不能单靠大脑来记忆。[本应用](http://snippets.barretlee.com) 收集了一些平时常用以及网上寻觅的代码片段，并且在页面中提供了搜索功能，可以快速找到我们平时记下的代码，这里保存的部分片段还是十分有价值的。 4 | 5 | 如果你希望帮助丰富代码片段库，可以操作如下流程： 6 | 7 | - fork [barretlee/snippets](https://github.com/barretlee/snippets.git) 仓库 8 | - 然后执行如下命令 9 | ``` 10 | git clone https://github.com/{YOUR_GITHUB_NAME}/snippets.git 11 | cd snippets 12 | git chechout -b gh-pages 13 | cd snippets 14 | # 选择你想提交的文件类型，比如 html 15 | cd html 16 | touch {YOUR_CONTRIBUTE_FILE_NAME}.snippet 17 | ``` 18 | 其中，`{YOUR_CONTRIBUTE_FILE_NAME}.snippet` 的格式为： 19 | ``` 20 | --- 21 | title: {NAME} 22 | --- 23 | 24 | {CONTENT} 25 | ``` 26 | 可以使用 markdown 语法。 27 | - 提交代码 28 | ``` 29 | git add --all 30 | git commit -m "add file html/{YOUR_CONTRIBUTE_FILE_NAME}.snippet" 31 | git push origin gh-pages 32 | ``` 33 | - 然后在你的 [PR](https://github.com/{YOUR_GITHUB_NAME}/snippets/pulls) 页面提交一个 PR 到 `barretlee/snippets` 的仓库 34 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barretlee/snippets/95effa464db2edf92872affad950874407873057/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Snippets 4 | --- 5 | 6 | 11 | 12 | +添加 Snippet 13 |
14 |
15 |
16 |
17 | 18 | 19 |
20 |
21 |
22 | 23 | 24 | 25 |
26 | 27 |
28 |
29 |
30 |
31 | 73 | 74 | 79 | -------------------------------------------------------------------------------- /public/css/main.css: -------------------------------------------------------------------------------- 1 | body,div,h1,h2,h3,h4,ul,li,p { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | @font-face { 6 | font-family: "iconfont"; 7 | src: url("../fonts/iconfont.eot"); 8 | src: url("../fonts/iconfont.eot?#iefix") format('embedded-opentype'), url("../fonts/iconfont.woff") format('woff'), url("../fonts/iconfont.ttf") format('truetype'), url("../fonts/iconfont.svg#iconfont") format('svg'); 9 | } 10 | .icon { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -webkit-text-stroke-width: 0.2px; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | * { 19 | transition: all 0.3s; 20 | } 21 | ::selection { 22 | background: #fde6ba; 23 | color: #000; 24 | } 25 | html, body { 26 | height: 100%; 27 | overflow-x: hidden; 28 | } 29 | body, form, input, select, option { 30 | background: #FFF; 31 | font-family: "lucida grande", "lucida sans unicode", lucida, "Helvetica Neue", helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 32 | font-size: 14px; 33 | line-height: 1.2; 34 | } 35 | a[target='_blank'] { 36 | cursor: alias; 37 | } 38 | a { 39 | color: #4a75b5; 40 | text-decoration: none; 41 | } 42 | a:hover { 43 | display: inline-block; 44 | color: #e58c7c; 45 | } 46 | ul,li { 47 | list-style-type: none; 48 | } 49 | code { 50 | background-color: #FAFAFA; 51 | display: inline-block; 52 | padding: 2px 4px; 53 | border: 1px solid #CCC; 54 | border-radius: 4px; 55 | color: #555; 56 | } 57 | 58 | table { 59 | font-family: verdana,arial,sans-serif; 60 | font-size:11px; 61 | color:#333333; 62 | border-width: 1px; 63 | border-color: #666666; 64 | border-collapse: collapse; 65 | margin-bottom: 20px; 66 | } 67 | table th { 68 | border-width: 1px; 69 | padding: 8px; 70 | border-style: solid; 71 | border-color: #666666; 72 | background-color: #dedede; 73 | } 74 | table td { 75 | border-width: 1px; 76 | padding: 8px; 77 | border-style: solid; 78 | border-color: #666666; 79 | background-color: #ffffff; 80 | } 81 | .progress { 82 | position: fixed; 83 | width: 100%; 84 | left: 0; 85 | top: 0; 86 | height: 5px; 87 | opacity: 0; 88 | z-index: 50; 89 | } 90 | .progress div { 91 | height: 100%; 92 | background: #e58c7c; 93 | transition: width 0.1s; 94 | } 95 | .header { 96 | overflow: hidden; 97 | -webkit-user-select: none; 98 | height: 64px; 99 | padding: 0 20px; 100 | position: relative; 101 | background: #499bea; 102 | background: -moz-linear-gradient(left,#e5e5be 0,#003973 100%); 103 | background: -webkit-gradient(linear,left,right,color-sleft(0%,#e5e5be),color-sleft(100%,#003973)); 104 | background: -webkit-linear-gradient(left,#e5e5be 0,#003973 100%); 105 | background: -o-linear-gradient(left,#e5e5be 0,#003973 100%); 106 | background: -ms-linear-gradient(left,#e5e5be 0,#003973 100%); 107 | background: linear-gradient(to left,#e5e5be 0,#003973 100%); 108 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5be', endColorstr='#003973', GradientType=1); 109 | } 110 | .header h1 { 111 | font-size: 30px; 112 | line-height: 64px; 113 | color: #FFF; 114 | font-family: fantasy,cursive,consolas; 115 | text-shadow: 1px 1px 1px #000, 1px 1px 3px #CCC; 116 | display: inline-block; 117 | } 118 | .header span { 119 | font-size: 13px; 120 | display: inline-block; 121 | margin-left: 0px; 122 | color: #E4E4E4; 123 | position: relative; 124 | top: 10px; 125 | } 126 | .header span a { 127 | color: #E4E4E4; 128 | } 129 | .header a:hover { 130 | color: #e58c7c; 131 | } 132 | .header ul { 133 | position: absolute; 134 | right: 20px; 135 | top: 0; 136 | list-style-type: none; 137 | height: 64px; 138 | line-height: 64px; 139 | } 140 | .header ul li { 141 | float: left; 142 | margin-left: 20px; 143 | } 144 | .header ul li a { 145 | color: #555; 146 | display: inline-block; 147 | height: 100%; 148 | line-height: 64px; 149 | } 150 | .header ul li a { 151 | color: #555; 152 | } 153 | .header ul li a:hover { 154 | color: #000; 155 | text-decoration: underline; 156 | } 157 | .header ul li .icon { 158 | margin-right: 4px; 159 | vertical-align: middle; 160 | transition: none; 161 | } 162 | .add-snippet { 163 | position: absolute; 164 | left: -120px; 165 | font-size: 40px; 166 | font-weight: bold; 167 | color: #EAEAEA; 168 | cursor: pointer; 169 | } 170 | .add-snippet b { 171 | display: block; 172 | font-size: 12px; 173 | margin-left: -25px; 174 | opacity: 0; 175 | color: #E58C7C; 176 | } 177 | .add-snippet:hover b { 178 | opacity: 1; 179 | } 180 | .add-snippet:hover { 181 | color: #e58c7c; 182 | } 183 | .container { 184 | width: 700px; 185 | position: relative; 186 | margin: 90px auto 40px; 187 | min-height: 500px; 188 | } 189 | .search { 190 | text-align: right; 191 | position: absolute; 192 | right: 0; 193 | top: -52px; 194 | } 195 | .search-mask { 196 | position: fixed; 197 | left: 0; 198 | right: 0; 199 | bottom: 0; 200 | top: 0; 201 | background: rgba(0,0,0,0.6); 202 | height: 100%; 203 | width: 100%; 204 | opacity: 0; 205 | z-index: -1; 206 | } 207 | .search-mask .icon { 208 | position: fixed; 209 | right: 50px; 210 | top: 50px; 211 | color: #6F6F6F; 212 | font-size: 30px; 213 | font-weight: normal; 214 | border-radius: 100%; 215 | background-color: rgb(255, 255, 255); 216 | width: 50px; 217 | height: 50px; 218 | text-align: center; 219 | line-height: 50px; 220 | box-shadow: 1px 1px 3px #6F6F6F; 221 | cursor: pointer; 222 | } 223 | .search-mask .icon:hover { 224 | box-shadow: none; 225 | color: #404040; 226 | background: #E0E0E0; 227 | transform: rotateZ(-360deg); 228 | } 229 | .search_on .search-mask { 230 | opacity: 1; 231 | z-index: 50; 232 | } 233 | .search-null { 234 | line-height: 50px; 235 | text-align: center; 236 | } 237 | .search_on .codePreview { 238 | position: relative; 239 | z-index: 51; 240 | } 241 | .search-info { 242 | display: inline-block; 243 | margin-right: 10px; 244 | background-color: #FAFAFA; 245 | padding: 0px 10px; 246 | line-height: 24px; 247 | border: 1px dashed #CCC; 248 | color: #E58C7C; 249 | border-radius: 4px; 250 | vertical-align: middle; 251 | opacity: 0; 252 | } 253 | .search-ret { 254 | line-height: 40px; 255 | text-align: center; 256 | color: #E68C83; 257 | font-size: 18px; 258 | } 259 | .search input { 260 | border: 1px solid #CCC; 261 | border-radius: 2px; 262 | height: 24px; 263 | line-height: 20px; 264 | padding: 2px; 265 | text-indent: 6px; 266 | outline: none; 267 | color: #555; 268 | width: 208px; 269 | } 270 | .codeTypes { 271 | position: absolute; 272 | width: 120px; 273 | left: -150px; 274 | top: 82px; 275 | } 276 | .codeTypes li { 277 | color: #555; 278 | border: 1px solid #F5F5F5; 279 | margin-bottom: -1px; 280 | cursor: pointer; 281 | /*list-style-type: square; 282 | list-style-position: inside;*/ 283 | } 284 | .codeTypes li span:hover { 285 | background: #FFF8EA; 286 | } 287 | .codeTypes li span { 288 | line-height: 40px; 289 | display: block; 290 | padding: 0 15px; 291 | text-transform: uppercase; 292 | } 293 | .codeTypes li.on span { 294 | background: #499bea; 295 | color: #FFF; 296 | margin-left: -50px; 297 | border-radius: 20px 0px 0px 20px; 298 | padding-left: 35px; 299 | background: -moz-linear-gradient(left,#e5e5be 0,#003973 100%); 300 | background: -webkit-gradient(linear,left,right,color-sleft(0%,#e5e5be),color-sleft(100%,#003973)); 301 | background: -webkit-linear-gradient(left,#e5e5be 0,#003973 100%); 302 | background: -o-linear-gradient(left,#e5e5be 0,#003973 100%); 303 | background: -ms-linear-gradient(left,#e5e5be 0,#003973 100%); 304 | background: linear-gradient(to left,#e5e5be 0,#003973 100%); 305 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5be', endColorstr='#003973', GradientType=1); 306 | } 307 | .typeList { 308 | border: 4px solid transparent; 309 | border-left-color: #e5e5be; 310 | min-height: 500px; 311 | margin-left: -31px; 312 | position: relative; 313 | width: 731px; 314 | z-index: 10; 315 | float: left; 316 | background: #FFF; 317 | } 318 | .typeList li a { 319 | display: block; 320 | padding: 0 20px; 321 | line-height: 40px; 322 | background: #F7F7F7; 323 | white-space: nowrap; 324 | overflow: hidden; 325 | margin-bottom: 1px; 326 | text-overflow: ellipsis; 327 | position: relative; 328 | } 329 | .typeList li a span { 330 | color: #555; 331 | font-weight: bold; 332 | } 333 | .typeList li a:hover { 334 | background: #FFF8EA !important; 335 | } 336 | .typeList li.odd a { 337 | background: #FFF; 338 | } 339 | .typeList li a.on::after { 340 | content: " "; 341 | border: 4px solid #e58c7c; 342 | position: absolute; 343 | right: 10px; 344 | top: 16px; 345 | border-radius: 100%; 346 | } 347 | .codePreview { 348 | position: relative; 349 | } 350 | .codePreview.on { 351 | margin-right: -150px; 352 | } 353 | .codePreview.on .typeList { 354 | width: 200px; 355 | border: 4px solid #e5e5be; 356 | max-height: 600px; 357 | overflow-y: scroll; 358 | } 359 | .codebox { 360 | float: left; 361 | opacity: 0; 362 | border: 1px dashed #e5e5be; 363 | min-height: 506px; 364 | width: 100px; 365 | position: relative; 366 | margin-left: -100%; 367 | background: #FFF; 368 | } 369 | .codebox h2, h3, h4 { 370 | margin-bottom: 20px; 371 | } 372 | .codebox p { 373 | margin: 8px 0; 374 | } 375 | .codebox .icon.close, .codebox .icon.pen, .codebox .icon.share { 376 | position: absolute; 377 | right: 10px; 378 | top: 10px; 379 | height: 20px; 380 | width: 20px; 381 | line-height: 21px; 382 | font-size: 14px; 383 | text-align: center; 384 | background: #F5F5F5; 385 | cursor: pointer; 386 | border-radius: 100%; 387 | color: #999; 388 | } 389 | .codebox .icon.pen { 390 | right: 40px; 391 | background: none; 392 | } 393 | .codebox .icon.share { 394 | right: 70px; 395 | color: #E58C7C; 396 | background: none; 397 | } 398 | .codebox .icon.pen:hover { 399 | color: #E58C7C; 400 | } 401 | .codebox .icon.close:hover { 402 | transform: rotateZ(360deg); 403 | color: #555; 404 | background: #F0F0F0; 405 | } 406 | .codePreview.on .codebox { 407 | opacity: 1; 408 | width: 630px; 409 | margin-left: -1px; 410 | padding: 20px; 411 | } 412 | .codePreview::after { 413 | content: " "; 414 | height: 0; 415 | clear: both; 416 | display: block; 417 | line-height: 0; 418 | } 419 | .code { 420 | max-height: 400px; 421 | overflow: hidden; 422 | } 423 | .codePreview.on .code { 424 | max-height: none; 425 | overflow: auto; 426 | } 427 | 428 | .codectt { 429 | line-height: 24px; 430 | } 431 | .codectt p { 432 | margin: 8px 0; 433 | } 434 | .codectt ul { 435 | list-style-type: square; 436 | margin-left: 25px; 437 | } 438 | .codectt ul li { 439 | list-style-type: square; 440 | margin-bottom: 10px; 441 | } 442 | 443 | .footer { 444 | width: 800px; 445 | margin: 0 auto; 446 | text-align: right; 447 | border-top: 1px solid #CCC; 448 | color: #666; 449 | padding: 10px 0; 450 | } 451 | 452 | .ds-loading { 453 | margin-top: 20px; 454 | padding: 20px 0; 455 | text-align: center; 456 | color: #AFAFAF; 457 | background-color: #EFEFEF; 458 | border-radius: 2px; 459 | line-height: 30px; 460 | clear: both; 461 | } 462 | .ds-thread { 463 | padding-top: 30px; 464 | } 465 | #ds-thread .ds-loading { 466 | display: none; 467 | height: 0; 468 | visibility: hidden; 469 | } 470 | 471 | .commitCode { 472 | opacity: 0; 473 | position: absolute; 474 | z-index: -1; 475 | width: 100%; 476 | top: 0; 477 | margin-left: -45px; 478 | margin-top: -50px; 479 | background-color: #FFF; 480 | padding: 30px; 481 | border-radius: 10px; 482 | box-shadow: 3px 3px 5px #999; 483 | } 484 | .commitForm p { 485 | line-height: 40px; 486 | } 487 | .commitForm p span { 488 | display: inline-block; 489 | width: 300px; 490 | } 491 | .commitForm .fselect input { 492 | opacity: 0; 493 | width: 125px; 494 | } 495 | .commitForm input { 496 | outline: none; 497 | border:none; 498 | border-bottom: 1px solid #CCC; 499 | margin-left: 5px; 500 | line-height: 20px; 501 | height: 20px; 502 | width: 210px; 503 | } 504 | .commitForm label { 505 | display: inline-block; 506 | width: 40px; 507 | } 508 | .commitForm .info { 509 | margin-left: 10px; 510 | font-weight: normal; 511 | opacity: 0; 512 | color: #e58c7c; 513 | } 514 | .commitForm textarea { 515 | display: block; 516 | border: 1px solid #CCC; 517 | padding: 10px; 518 | width: 680px; 519 | min-height: 300px; 520 | margin: 20px 0; 521 | font-size: 14px; 522 | outline: none; 523 | resize: vertical; 524 | font-family: consolas; 525 | line-height: 1.5; 526 | } 527 | #f_submit { 528 | line-height: 30px; 529 | height: 30px; 530 | border-radius: 3px; 531 | background-color: #F5F5F5; 532 | border: 1px solid #CCC; 533 | padding: 0; 534 | cursor: pointer; 535 | } 536 | 537 | 538 | /* hljs */ 539 | /* 540 | github.com style (c) Vasily Polovnyov 541 | */ 542 | 543 | .hljs { 544 | display: block; 545 | overflow-x: auto; 546 | padding: 0.5em; 547 | color: #333; 548 | background: #f8f8f8; 549 | -webkit-text-size-adjust: none; 550 | font-family: Menlo,Monaco,Consolas,"Courier New",monospace; 551 | line-height: 24px; 552 | padding: 20px; 553 | border: none; 554 | } 555 | 556 | .hljs-comment, 557 | .diff .hljs-header { 558 | color: #998; 559 | font-style: italic; 560 | } 561 | 562 | .hljs-keyword, 563 | .css .rule .hljs-keyword, 564 | .hljs-winutils, 565 | .nginx .hljs-title, 566 | .hljs-subst, 567 | .hljs-request, 568 | .hljs-status { 569 | color: #333; 570 | font-weight: bold; 571 | } 572 | 573 | .hljs-number, 574 | .hljs-hexcolor, 575 | .ruby .hljs-constant { 576 | color: #008080; 577 | } 578 | 579 | .hljs-string, 580 | .hljs-tag .hljs-value, 581 | .hljs-doctag, 582 | .tex .hljs-formula { 583 | color: #d14; 584 | } 585 | 586 | .hljs-title, 587 | .hljs-id, 588 | .scss .hljs-preprocessor { 589 | color: #900; 590 | font-weight: bold; 591 | } 592 | 593 | .hljs-list .hljs-keyword, 594 | .hljs-subst { 595 | font-weight: normal; 596 | } 597 | 598 | .hljs-class .hljs-title, 599 | .hljs-type, 600 | .vhdl .hljs-literal, 601 | .tex .hljs-command { 602 | color: #458; 603 | font-weight: bold; 604 | } 605 | 606 | .hljs-tag, 607 | .hljs-tag .hljs-title, 608 | .hljs-rule .hljs-property, 609 | .django .hljs-tag .hljs-keyword { 610 | color: #000080; 611 | font-weight: normal; 612 | } 613 | 614 | .hljs-attribute, 615 | .hljs-variable, 616 | .lisp .hljs-body, 617 | .hljs-name { 618 | color: #008080; 619 | } 620 | 621 | .hljs-regexp { 622 | color: #009926; 623 | } 624 | 625 | .hljs-symbol, 626 | .ruby .hljs-symbol .hljs-string, 627 | .lisp .hljs-keyword, 628 | .clojure .hljs-keyword, 629 | .scheme .hljs-keyword, 630 | .tex .hljs-special, 631 | .hljs-prompt { 632 | color: #990073; 633 | } 634 | 635 | .hljs-built_in { 636 | color: #0086b3; 637 | } 638 | 639 | .hljs-preprocessor, 640 | .hljs-pragma, 641 | .hljs-pi, 642 | .hljs-doctype, 643 | .hljs-shebang, 644 | .hljs-cdata { 645 | color: #999; 646 | font-weight: bold; 647 | } 648 | 649 | .hljs-deletion { 650 | background: #fdd; 651 | } 652 | 653 | .hljs-addition { 654 | background: #dfd; 655 | } 656 | 657 | .diff .hljs-change { 658 | background: #0086b3; 659 | } 660 | 661 | .hljs-chunk { 662 | color: #aaa; 663 | } 664 | 665 | 666 | @media screen and (max-width: 990px) { 667 | .container { 668 | width: auto; 669 | margin-left: 5%; 670 | margin-right: 5%; 671 | } 672 | .codebox { 673 | min-height: auto; 674 | transition: none; 675 | display: none; 676 | float: none; 677 | opacity: 1; 678 | } 679 | .codePreview.on .codebox { 680 | margin-right: 0; 681 | width: auto; 682 | display: block; 683 | transition: none; 684 | padding-top: 35px; 685 | } 686 | .codeTypes { 687 | position: static; 688 | width: auto; 689 | margin-bottom: 20px; 690 | } 691 | .codeTypes li { 692 | display: inline-block; 693 | } 694 | .codePreview.on { 695 | margin-right: 0; 696 | } 697 | .typeList { 698 | max-height: 220px; 699 | min-height: 0 !important; 700 | float: none; 701 | width: auto; 702 | margin-left: 0; 703 | margin-right: 0; 704 | transition: none; 705 | overflow: hidden; 706 | border: 4px solid #e5e5be; 707 | overflow-y: scroll; 708 | } 709 | .codePreview { 710 | position: static; 711 | } 712 | .typeList ul { 713 | display: block; 714 | transition: none; 715 | } 716 | .codePreview.on .typeList { 717 | max-height: 220px; 718 | margin-bottom: 30px; 719 | width: auto; 720 | transition: none; 721 | } 722 | .codeTypes li.on span { 723 | margin-left: 0; 724 | padding-left: 15px; 725 | border-radius: 0; 726 | background: -moz-linear-gradient(top,#e5e5be 0,#003973 100%); 727 | background: -webkit-gradient(linear,top,bottom,color-stop(0%,#e5e5be),color-stop(100%,#003973)); 728 | background: -webkit-linear-gradient(top,#e5e5be 0,#003973 100%); 729 | background: -o-linear-gradient(top,#e5e5be 0,#003973 100%); 730 | background: -ms-linear-gradient(top,#e5e5be 0,#003973 100%); 731 | background: linear-gradient(to top,#e5e5be 0,#003973 100%); 732 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5be', endColorstr='#003973', GradientType=1); 733 | } 734 | .search { 735 | top: -60px; 736 | right: 30px; 737 | } 738 | } 739 | 740 | 741 | @media screen and (max-width: 741px) { 742 | * { 743 | transition: all 0.3s; 744 | } 745 | } 746 | @media screen and (max-width: 540px) { 747 | .header span { 748 | display: none; 749 | } 750 | .header ul li { 751 | display: none; 752 | } 753 | .header ul li.forkbtn { 754 | display: inline-block; 755 | } 756 | } 757 | 758 | div#ds-thread #ds-reset a.ds-like-thread-button { 759 | position: relative; 760 | z-index: 3; 761 | line-height: 16px; 762 | height: 16px; 763 | margin: 0; 764 | padding: 4px 8px !important; 765 | margin-right: 10px; 766 | overflow: hidden; 767 | height: 18px; 768 | width: 72px; 769 | display: inline-block; 770 | vertical-align: middle; 771 | text-align: center; 772 | } 773 | .github-star { 774 | position: relative; 775 | top: 5px; 776 | } -------------------------------------------------------------------------------- /public/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barretlee/snippets/95effa464db2edf92872affad950874407873057/public/fonts/iconfont.eot -------------------------------------------------------------------------------- /public/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barretlee/snippets/95effa464db2edf92872affad950874407873057/public/fonts/iconfont.ttf -------------------------------------------------------------------------------- /public/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/barretlee/snippets/95effa464db2edf92872affad950874407873057/public/fonts/iconfont.woff -------------------------------------------------------------------------------- /public/js/main.js: -------------------------------------------------------------------------------- 1 | var close = document.querySelector("#close"); 2 | var sclose = document.querySelector(".search-close"); 3 | var codePreview = document.querySelector("#codePreview"); 4 | var codeTypes = document.querySelector("#codeTypes"); 5 | var codebox = document.querySelector("#codebox"); 6 | var codectt = document.querySelector("#codectt"); 7 | var typeList = document.querySelector("#typeList"); 8 | var code = document.querySelector("#code"); 9 | var progress = document.querySelector("#progress"); 10 | var q = document.querySelector("#q"); 11 | var qinfo = document.querySelector(".search-info"); 12 | // var form = document.querySelector("#commitCode"); 13 | // var forminfo = document.querySelector("#commitCode .info"); 14 | // var mask = document.querySelector(".search-mask"); 15 | var addSnippet = document.querySelector(".add-snippet"); 16 | // var otherType = document.querySelector("#f_type_other"); 17 | // var fsubmit = document.querySelector("#f_submit"); 18 | 19 | var Snippet = { 20 | cache: {}, 21 | init: function(){ 22 | this.storeData(); 23 | this.bind(); 24 | this.duoshuo(); 25 | this.tongji(); 26 | }, 27 | storeData: function(){ 28 | var store = {}; 29 | for(var i = 0; i < snippets.length; i++) { 30 | if(store[snippets[i].type]) { 31 | store[snippets[i].type].push(snippets[i]); 32 | } else { 33 | store[snippets[i].type] = [snippets[i]]; 34 | } 35 | } 36 | this.store = store; 37 | this.initNav(); 38 | }, 39 | initNav: function(){ 40 | var dom = ""; 49 | codeTypes.innerHTML = dom; 50 | this.renderList(type); 51 | }, 52 | bind: function(){ 53 | var self = this; 54 | codeTypes.addEventListener("click", function(evt){ 55 | if(evt.target.nodeName.toLowerCase() == 'span') { 56 | var p = evt.target.parentNode; 57 | if(p.getAttribute("class") == "on") { 58 | return; 59 | } 60 | var lis = p.parentNode.getElementsByTagName("li"); 61 | for(var i = 0; i < lis.length; i++) { 62 | if(lis[i].hasAttribute("class")) { 63 | lis[i].removeAttribute("class"); 64 | } 65 | } 66 | p.setAttribute("class", "on"); 67 | self.renderList(evt.target.textContent); 68 | window.location.hash = "#!/snippets/" + evt.target.getAttribute("data-type"); 69 | close.click(); 70 | } 71 | }); 72 | typeList.addEventListener("click", function(evt){ 73 | evt.preventDefault(); 74 | if(evt.target.nodeName.toLowerCase() == 'a') { 75 | var lis = evt.target.parentNode.parentNode.getElementsByTagName("a"); 76 | for(var i = 0; i < lis.length; i++) { 77 | if(lis[i].hasAttribute("class")) { 78 | lis[i].removeAttribute("class"); 79 | } 80 | } 81 | evt.target.setAttribute("class", "on"); 82 | codePreview.setAttribute("class", "codePreview on"); 83 | var url = evt.target.getAttribute("data-url"); 84 | var title = evt.target.textContent; 85 | self.showCode(url, title); 86 | window.location.hash = "#!" + url; 87 | var baseUrl = codebox.getAttribute("data-baseurl"); 88 | document.querySelector(".codebox .pen").setAttribute("href", (baseUrl + url).replace(/\/$/, '.md')); 89 | } 90 | }); 91 | codebox.addEventListener("click", function(evt){ 92 | if(evt.target.getAttribute("id") == "close") { 93 | close.click(); 94 | } 95 | }); 96 | close.addEventListener("click", function(){ 97 | codePreview.setAttribute("class", "codePreview"); 98 | }); 99 | sclose.addEventListener("click", function(){ 100 | document.onkeydown({ 101 | keyCode: 27 102 | }); 103 | document.querySelector("body").removeAttribute("class"); 104 | q.value = ""; 105 | qinfo.style.opacity = 0; 106 | var type = document.querySelector(".codeTypes li.on span").textContent.toLowerCase(); 107 | self.renderList(type); 108 | }); 109 | addSnippet.addEventListener("click", function(evt){ 110 | // https://github.com/barretlee/snippets/issues/new 111 | window.open('https://github.com/barretlee/snippets/issues/new'); 112 | return; 113 | if(evt.metaKey) { 114 | window.open(evt.target.getAttribute("href")); 115 | return; 116 | } 117 | if(evt.target.nodeName.toLowerCase() != "a") { 118 | fsubmit.removeAttribute("disabled"); 119 | // document.querySelector("body").setAttribute("class", "form_on"); 120 | evt.preventDefault(); 121 | // form.style.opacity = 1; 122 | // form.style.zIndex = 52; 123 | // mask.style.opacity = 1; 124 | // mask.style.zIndex = 51; 125 | if(document.querySelectorAll("#f_type option").length == 1) { 126 | var spans = document.querySelectorAll(".codeTypes span"); 127 | var types = []; 128 | for(var i = 0; i < spans.length; i++ ) { 129 | var text = spans[i].textContent.toLowerCase(); 130 | types.push("") 131 | } 132 | types.push(""); 133 | var f_type = document.querySelector("#f_type") 134 | f_type.innerHTML = types.join("\n"); 135 | f_type.value = f_type.querySelector("option").value; 136 | } 137 | } 138 | }); 139 | // form.onsubmit = function(){ 140 | // fsubmit.setAttribute("disabled", "disabled"); 141 | // }; 142 | // document.querySelector("#f_type").addEventListener("change", function(){ 143 | // if(this.value == -1) { 144 | // this.name = ""; 145 | // this.removeAttribute("required"); 146 | // otherType.style.opacity = 1; 147 | // otherType.name = "type"; 148 | // otherType.setAttribute("required", "required"); 149 | // } else { 150 | // this.name = "type"; 151 | // this.setAttribute("required", "required"); 152 | // otherType.style.opacity = 0; 153 | // otherType.name = ""; 154 | // otherType.removeAttribute("required"); 155 | // } 156 | // }); 157 | q.onkeypress = q.onkeyup = q.onkeydown = q.onfocus = function(evt) { 158 | var val = q.value; 159 | if( !val ) { 160 | qinfo.style.opacity = 0; 161 | return; 162 | } 163 | if(evt.keyCode == 27) { 164 | return; 165 | } 166 | document.querySelector("body").setAttribute("class", "search_on"); 167 | close.click(); 168 | var ret = []; 169 | for(var i = 0; i < snippets.length; i++) { 170 | if(snippets[i].title.indexOf(val) > -1) { 171 | ret.push(snippets[i]); 172 | } 173 | } 174 | qinfo.style.opacity = 1; 175 | if(ret.length) { 176 | qinfo.textContent = "找到了" + ret.length + "个结果，按 Enter 键展示。"; 177 | } else { 178 | qinfo.textContent = "没有找到相关内容~"; 179 | } 180 | if(evt.keyCode == 13) { 181 | close.click(); 182 | self.renderList("SEARCH", ret); 183 | } 184 | }; 185 | document.onkeydown = function(evt){ 186 | var body = document.querySelector("body"); 187 | if(evt.keyCode == 27) { 188 | if(body.hasAttribute("class")) { 189 | body.removeAttribute("class"); 190 | } 191 | close.click(); 192 | // if(form.style.opacity == 1) { 193 | // form.style.opacity = 0; 194 | // form.style.zIndex = -1; 195 | // mask.style.opacity = 0; 196 | // mask.style.zIndex = -1; 197 | // } 198 | } 199 | }; 200 | window.onhashchange = window.onload = function() { 201 | var hash = window.location.hash; 202 | if(hash){ 203 | var url = hash.slice(2); 204 | hash = hash.split("/"); 205 | if(hash[1] == 'snippets' && hash[2]) { 206 | var dom = document.querySelector('span[data-type="' + hash[2] + '"]'); 207 | if(dom) { 208 | setTimeout(function(){ 209 | dom.click(); 210 | }, 200); 211 | } 212 | hash[3] && setTimeout(function(){ 213 | var link = document.querySelector('a[data-url="' + url + '"]'); 214 | if(link) { 215 | link.click(); 216 | } 217 | }, 300); 218 | } 219 | } 220 | }; 221 | }, 222 | renderList: function(type, input) { 223 | var data = input || Snippet.store[type.toLowerCase()] || {}; 224 | var dom = "'; 236 | typeList.innerHTML = dom; 237 | }, 238 | showCode: function(url, title){ 239 | var self = this; 240 | var oldUrl = codebox.getAttribute("data-url"); 241 | if(oldUrl == url) return; 242 | codebox.setAttribute("data-url", url); 243 | codebox.setAttribute("data-title", title); 244 | if(self.cache[url]) { 245 | codectt.innerHTML = self.cache[url]; 246 | var codes = codectt.querySelectorAll('pre code'); 247 | for(var i = 0; i < codes.length; i++){ 248 | hljs.highlightBlock(codes[i]); 249 | } 250 | return; 251 | } 252 | // codebox.style.background = "url(http://www.barretlee.com/blogimgs/loading.gif) no-repeat center center"; 253 | self.updateProgress(Math.floor(Math.random() * 20) + 10); 254 | with(new XMLHttpRequest) { 255 | open("GET", url + "?_t=" + new Date()*1); 256 | onreadystatechange = function(){ 257 | if(readyState == 4) { 258 | self.updateProgress(Math.floor(Math.random() * 30) + 40); 259 | self.cache[url] = "

" + title + "

" + responseText; 260 | codectt.innerHTML = self.cache[url]; 261 | var codes = codectt.querySelectorAll('pre code'); 262 | for(var i = 0; i < codes.length; i++){ 263 | hljs.highlightBlock(codes[i]); 264 | } 265 | self.updateProgress(Math.floor(Math.random() * 20) + 80); 266 | // codebox.style.background = ""; 267 | } 268 | }; 269 | send(); 270 | } 271 | }, 272 | updateProgress: function(percentage){ 273 | progress.getElementsByTagName("div")[0].style.width = percentage + "%"; 274 | if(percentage >= 80) { 275 | progress.getElementsByTagName("div")[0].style.width = "100%"; 276 | this.timer && clearTimeout(this.timer); 277 | setTimeout(function(){ 278 | progress.style.opacity = "0"; 279 | progress.getElementsByTagName("div")[0].style.width = 0; 280 | }, 100); 281 | } else { 282 | progress.style.opacity = "1"; 283 | } 284 | }, 285 | tongji: function(){ 286 | var _hmt = _hmt || []; 287 | (function() { 288 | var hm = document.createElement("script"); 289 | hm.src = "//hm.baidu.com/hm.js?58aefbf3de3372645a3e8796d7601fee"; 290 | var s = document.getElementsByTagName("script")[0]; 291 | s.parentNode.insertBefore(hm, s); 292 | })(); 293 | }, 294 | duoshuo: function(){ 295 | window.duoshuoQuery = {short_name:"barretlee"}; 296 | (function() { 297 | var ds = document.createElement('script'); 298 | ds.type = 'text/javascript';ds.async = true; 299 | ds.src = 'http://static.duoshuo.com/embed.js'; 300 | ds.charset = 'UTF-8'; 301 | (document.getElementsByTagName('head')[0] 302 | || document.getElementsByTagName('body')[0]).appendChild(ds); 303 | })(); 304 | } 305 | }; 306 | 307 | Snippet.init(); 308 | 309 | // window.onmessage = function(evt) { 310 | // if(/^http:\/\/(snippet-be\.coding\.io|0\.0\.0\.0|localhost)/.test(evt.origin)) { 311 | // var data = evt.data; 312 | // if(data.code == 200) { 313 | // forminfo.innerHTML = data.msg; 314 | // forminfo.style.opacity = 1; 315 | // setTimeout(function(){ 316 | // forminfo.style.opacity = 0; 317 | // form.style.opacity = 0; 318 | // mask.style.opacity = 0; 319 | // mask.style.zIndex = -1; 320 | // fsubmit.removeAttribute("disabled"); 321 | // }, 800); 322 | // } 323 | // } 324 | // }; 325 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | Sitemap: http://snippets.barretlee.com/sitemap.xml 2 | User-agent: * 3 | Allow: / -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: nil 3 | --- 4 | 5 | 6 | 7 | {{ site.base }}/ 8 | {{ site.time | date: "%FT%T.000Z" }} 9 | 10 | {% for page in site.pages %} 11 | 12 | {{ site.base }}/#!{{ page.url }} 13 | {{ site.time | date: "%FT%T.000Z" }} 14 | 15 | {% endfor %} 16 | {% for page in site.pages %} 17 | 18 | {{ site.base }}{{ page.url }} 19 | {{ site.time | date: "%FT%T.000Z" }} 20 | 21 | {% endfor %} 22 | 23 | -------------------------------------------------------------------------------- /snippets/article/async-sync.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 同步异步/阻塞非阻塞 3 | --- 4 | 5 | **同步/异步（synchronization/asynchronization）** 6 | 7 | - 同步，就是在产生一个 调用 时，在没有得到结果之前，该 调用 就不会返回，一旦 调用 返回，就得到返回值了，是 调用者 主动等待这个 调用 的结果。 8 | - 异步，则是在 调用 发出后，这个 调用 就直接返回了，所以没有返回结果。之后， 被调用者 通过状态、通知等来通知 调用者 ，或者通过回调函数处理这个 调用 。 9 | 10 | **阻塞/非阻塞（blocking/non-blocking）** 11 | 12 | - 阻塞调用是指调用结果返回之前，当前线程会被挂起。调用线程只有在得到结果之后才会返回。 13 | - 非阻塞调用指在不能立刻得到结果之前，该调用不会阻塞当前线程。 14 | 15 | 虽然，看起来同步/异步和阻塞/非阻塞看起来有些相似，但是前者关注的是一种 消息通知机制 ，后者关注的是 程序在等待调用结果（消息、返回值）时的状态 ，所以两者没有必然联系。 16 | 17 | 18 | -------------------------------------------------------------------------------- /snippets/article/why-not-pure-websoket.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 为什么纯粹的socket服务器还不够好？ 3 | --- 4 | 5 | 很多web应用不会基于原生的http服务器搭建，一般都会基于某类应用服务器（如tomcat）搭建，而且还会利用一些开发框架来简化web开发。 同样，一般游戏服务器的开发都会在socket服务器上封装出一套框架或类似的应用服务器。为什么使用原生的socket接口开发不够好呢? 6 | 7 | - 抽象程度。原生的socket抽象程度过低，接口过于底层，很多机制都需要自己封装，如Session、filter、请求抽象、广播等机制都要自已实现，工作量很大，容易出错，且有很多的重复劳动。 8 | - 可伸缩性。高可伸缩性需考虑很多问题，消息密度、存储策略、进程架构等因素都需要考虑。用原生的socket要达到高可伸缩性，需要在架构上花费大量的功夫，而且效果也未必能达到开源框架的水准。 9 | - 服务端的监控、管理。很多服务器的数据需要监控，例如消息密度、在线人数、机器压力、网络压力等，如果采用原生socket，所有这些都要自己开发，代价很大。 10 | 11 | 文摘地址： 12 | -------------------------------------------------------------------------------- /snippets/css/all-stylesheet-media-types.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: css所有的媒体类型 3 | --- 4 | 5 | ``` 6 | 7 | ``` 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
allUsed for all media type devices
auralUsed for speech and sound synthesizers
brailleUsed for braille tactile feedback devices
embossedUsed for paged braille printers
handheldUsed for small or handheld devices
printUsed for printers
projectionUsed for projected presentations, like slides
screenUsed for computer screens
ttyUsed for media using a fixed-pitch character grid, like teletypes and terminals
tvUsed for television-type devices
-------------------------------------------------------------------------------- /snippets/css/another-robbin.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: another ribbon 3 | --- 4 | 5 | 6 | 演示： 7 |

8 | Everybody loves ribbons 9 |

10 | 59 | 60 | ``` 61 | .ribbon { 62 | font-size: 16px !important; 63 | /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */ 64 | 65 | width: 50%; 66 | 67 | position: relative; 68 | background: #ba89b6; 69 | color: #fff; 70 | text-align: center; 71 | padding: 1em 2em; /* Adjust to suit */ 72 | margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */ 73 | } 74 | .ribbon:before, .ribbon:after { 75 | content: ""; 76 | position: absolute; 77 | display: block; 78 | bottom: -1em; 79 | border: 1.5em solid #986794; 80 | z-index: -1; 81 | } 82 | .ribbon:before { 83 | left: -2em; 84 | border-right-width: 1.5em; 85 | border-left-color: transparent; 86 | } 87 | .ribbon:after { 88 | right: -2em; 89 | border-left-width: 1.5em; 90 | border-right-color: transparent; 91 | } 92 | .ribbon .ribbon-content:before, .ribbon .ribbon-content:after { 93 | content: ""; 94 | position: absolute; 95 | display: block; 96 | border-style: solid; 97 | border-color: #804f7c transparent transparent transparent; 98 | bottom: -1em; 99 | } 100 | .ribbon .ribbon-content:before { 101 | left: 0; 102 | border-width: 1em 0 0 1em; 103 | } 104 | .ribbon .ribbon-content:after { 105 | right: 0; 106 | border-width: 1em 1em 0 0; 107 | } 108 | ``` -------------------------------------------------------------------------------- /snippets/css/basics-of-google-font-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Google Font加载 3 | --- 4 | 5 | ``` 6 | 7 | ... 8 | 9 | 10 | ``` 11 | 12 | ``` 13 | 14 | 21 | 27 | ``` -------------------------------------------------------------------------------- /snippets/css/blockquote.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: blockquote 样式 3 | --- 4 | 5 | 演示： 6 | 7 |

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

8 | 9 | 31 | 32 | ``` 33 | blockquote { 34 | background: #f9f9f9; 35 | border-left: 10px solid #ccc; 36 | margin: 1.5em 10px; 37 | padding: 0.5em 10px; 38 | quotes: "\201C""\201D""\2018""\2019"; 39 | } 40 | blockquote:before { 41 | color: #ccc; 42 | content: open-quote; 43 | font-size: 4em; 44 | line-height: 0.1em; 45 | margin-right: 0.25em; 46 | vertical-align: -0.4em; 47 | } 48 | blockquote p { 49 | display: inline; 50 | } 51 | ``` -------------------------------------------------------------------------------- /snippets/css/blurry-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: blurry 文字 3 | --- 4 | 5 | 演示： 6 |
7 | 小胡子哥 8 |
9 | 16 | 17 | ``` 18 | .blur { 19 | color: transparent; 20 | text-shadow: 0 0 5px rgba(0,0,0,0.5); 21 | } 22 | ``` -------------------------------------------------------------------------------- /snippets/css/book-article-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 十分不错的书籍格式化css样式 3 | --- 4 | 5 | ``` 6 | /* screen.css -- screen stylesheet for jblevins.org 7 | * 8 | * Copyright (C) 2002-2010 Jason R. Blevins 9 | */ 10 | 11 | html { 12 | margin: 0; 13 | padding: 0; 14 | height: 100%; /* force scrollbar */ 15 | margin-bottom: 1px; 16 | } 17 | 18 | body { 19 | margin: 0 auto; 20 | padding: 0; 21 | font-size: 1em; 22 | line-height: 1.6; 23 | font-family: Georgia, serif; 24 | color: #222; 25 | } 26 | 27 | h1, 28 | h2, 29 | h3, 30 | h4, 31 | h5, 32 | h6 { 33 | font-family: Palatino, Garamond, Times, Georgia, serif; 34 | font-weight: normal; 35 | font-style: normal; 36 | font-size: 1em; 37 | line-height: 1.2; 38 | } 39 | 40 | h1 { 41 | font-size: 2.4em; 42 | clear: left; 43 | text-align: left; 44 | } 45 | 46 | h1 a, 47 | h2 a { 48 | text-decoration: none; 49 | color: inherit; 50 | } 51 | 52 | h1 a:hover, 53 | h2 a:hover { 54 | color: #555; 55 | text-decoration: underline; 56 | } 57 | 58 | h2 { 59 | font-size: 1.6em; 60 | clear: left; 61 | } 62 | 63 | h1[id]:hover:after, 64 | h2[id]:hover:after { 65 | content: " #" attr(id); 66 | color: #777; 67 | } 68 | 69 | h3 { 70 | font-size: 1.2em; 71 | clear: left; 72 | } 73 | 74 | /* pre, code, kbd, and blockquote */ 75 | pre, 76 | code, 77 | kbd, 78 | blockquote { 79 | background-color: #eee; 80 | border: 1px solid #ccc; 81 | font-size: 0.9em; 82 | } 83 | 84 | pre, 85 | code, 86 | kbd { 87 | font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace; 88 | } 89 | 90 | pre { 91 | padding: 0.5em; 92 | overflow: auto; 93 | } 94 | 95 | code, 96 | kbd { 97 | padding: 0 0.3ex; 98 | } 99 | 100 | pre > code { 101 | border: none; 102 | padding: 0; 103 | } 104 | 105 | blockquote { 106 | border-left: thick solid #ccc; 107 | padding: 0 1em; 108 | } 109 | 110 | hr { 111 | border: none; 112 | border-top: thin solid #ccc; 113 | } 114 | 115 | table { 116 | border-top: double black; 117 | border-bottom: thin solid black; 118 | border-spacing: 0; 119 | margin: 0 auto; 120 | } 121 | 122 | th { 123 | border-bottom: thin solid black; 124 | } 125 | 126 | td { 127 | padding: 0 0.5em; 128 | } 129 | 130 | table.plain { 131 | border-top: none; 132 | border-bottom: none; 133 | } 134 | 135 | table.plain th { 136 | border-bottom: none; 137 | } 138 | 139 | dd { 140 | margin-left: 1.5em; 141 | } 142 | 143 | merror { 144 | display: inline; 145 | font-size: 1em; 146 | } 147 | 148 | math[display=block] { 149 | overflow: auto; 150 | margin: 0.75em 0; 151 | } 152 | 153 | math { 154 | white-space: nowrap; 155 | } 156 | 157 | .eq-number { 158 | float: right; 159 | } 160 | 161 | /* footnotes */ 162 | a.noteref { 163 | font-size: 0.7333em; 164 | vertical-align: super; 165 | } 166 | 167 | #notes > li > p { 168 | display: inline; 169 | } 170 | 171 | /* images */ 172 | p img { 173 | float: right; 174 | padding-left: 1em; 175 | } 176 | 177 | div.image { 178 | text-align: center; 179 | margin: 2em; 180 | } 181 | 182 | div.image img { 183 | border: thin solid #ccc; 184 | padding: 2px; 185 | } 186 | 187 | div.image p { 188 | margin:0; 189 | } 190 | 191 | div.image p strong { 192 | display: block; 193 | } 194 | 195 | /* meta content */ 196 | .meta { 197 | font-family: sans; 198 | font-size: 0.875em; 199 | } 200 | 201 | .meta, 202 | .meta a:link, 203 | .meta a:visited { 204 | color: #888; 205 | } 206 | 207 | .meta a:hover { 208 | color: #444; 209 | } 210 | 211 | h1 + div.dateline { 212 | position: relative; 213 | top: -1.5em; 214 | text-transform: uppercase; 215 | } 216 | 217 | #mathml-notice { 218 | float: right; 219 | width: 11em; 220 | border: thin solid #ccc; 221 | margin-left: 1.0em; 222 | font-size: 0.8em; 223 | padding: 0.5em; 224 | } 225 | 226 | #mathml-notice img { 227 | float: left; 228 | margin: 0; 229 | padding: 0; 230 | margin-right: 0.5em; 231 | } 232 | 233 | /* error pages */ 234 | .error .icon { 235 | float: left; 236 | font-size: 4em; 237 | line-height: 1em; 238 | margin-right: 0.2em; 239 | color: #900; 240 | } 241 | 242 | /* code */ 243 | code .selector, 244 | code .difflines, 245 | code .function, 246 | code .bold, 247 | code .keyword { 248 | font-weight: bold; 249 | } 250 | 251 | code .comment, 252 | code .preproc, 253 | code .italics, 254 | code .value { 255 | font-style: italic; 256 | } 257 | 258 | code .string, 259 | code .regexp, 260 | code .character, 261 | code .number { 262 | color: #444; 263 | } 264 | 265 | code .math, 266 | code .comment, 267 | code .preproc { 268 | color: #666; 269 | } 270 | 271 | code .oldfile { 272 | color: #600; 273 | } 274 | 275 | code .newfile { 276 | color: #060; 277 | } 278 | 279 | /* named divs */ 280 | #wrap { 281 | width: 40em; 282 | height: auto; 283 | margin: 0 auto; 284 | padding: 0; 285 | } 286 | 287 | #header { 288 | width: 100%; 289 | height: 2em; 290 | float: left; 291 | margin-top: 0.25em; 292 | } 293 | 294 | #header #path { 295 | width: 60%; 296 | float: left; 297 | } 298 | 299 | #header #nav { 300 | width: 40%; 301 | float: right; 302 | text-align: right; 303 | } 304 | 305 | #content { 306 | width: 100%; 307 | float: left; 308 | text-align: justify; 309 | } 310 | 311 | #footer { 312 | width: 100%; 313 | float: left; 314 | padding: 2em 0; 315 | } 316 | ``` 317 | -------------------------------------------------------------------------------- /snippets/css/bouncy-animated-loading-animation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bouncy 动画 3 | --- 4 | 5 | 6 | 演示： 7 | 8 |
9 | 10 | 11 | 12 |
13 | 66 | 67 | ``` 68 |
69 | 70 | 71 | 72 |
73 | ``` 74 | 75 | ``` 76 | .loader { 77 | text-align: center; 78 | } 79 | .loader span { 80 | display: inline-block; 81 | vertical-align: middle; 82 | width: 10px; 83 | height: 10px; 84 | margin: 50px auto; 85 | background: black; 86 | border-radius: 50px; 87 | -webkit-animation: loader 0.9s infinite alternate; 88 | -moz-animation: loader 0.9s infinite alternate; 89 | } 90 | .loader span:nth-of-type(2) { 91 | -webkit-animation-delay: 0.3s; 92 | -moz-animation-delay: 0.3s; 93 | } 94 | .loader span:nth-of-type(3) { 95 | -webkit-animation-delay: 0.6s; 96 | -moz-animation-delay: 0.6s; 97 | } 98 | @-webkit-keyframes loader { 99 | 0% { 100 | width: 10px; 101 | height: 10px; 102 | opacity: 0.9; 103 | -webkit-transform: translateY(0); 104 | } 105 | 100% { 106 | width: 24px; 107 | height: 24px; 108 | opacity: 0.1; 109 | -webkit-transform: translateY(-21px); 110 | } 111 | } 112 | @-moz-keyframes loader { 113 | 0% { 114 | width: 10px; 115 | height: 10px; 116 | opacity: 0.9; 117 | -moz-transform: translateY(0); 118 | } 119 | 100% { 120 | width: 24px; 121 | height: 24px; 122 | opacity: 0.1; 123 | -moz-transform: translateY(-21px); 124 | } 125 | } 126 | ``` -------------------------------------------------------------------------------- /snippets/css/browser-hack.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 不同浏览器的 hack 3 | --- 4 | 5 | ``` 6 | /***** Selector Hacks ******/ 7 | 8 | /* IE6 and below */ 9 | * html #uno { color: red } 10 | 11 | /* IE7 */ 12 | *:first-child+html #dos { color: red } 13 | 14 | /* IE7, FF, Saf, Opera */ 15 | html>body #tres { color: red } 16 | 17 | /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 18 | html>/**/body #cuatro { color: red } 19 | 20 | /* Opera 9.27 and below, safari 2 */ 21 | html:first-child #cinco { color: red } 22 | 23 | /* Safari 2-3 */ 24 | html[xmlns*=""] body:last-child #seis { color: red } 25 | 26 | /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 27 | body:nth-of-type(1) #siete { color: red } 28 | 29 | /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 30 | body:first-of-type #ocho { color: red } 31 | 32 | /* saf3+, chrome1+ */ 33 | @media screen and (-webkit-min-device-pixel-ratio:0) { 34 | #diez { color: red } 35 | } 36 | 37 | /* iPhone / mobile webkit */ 38 | @media screen and (max-device-width: 480px) { 39 | #veintiseis { color: red } 40 | } 41 | 42 | /* Safari 2 - 3.1 */ 43 | html[xmlns*=""]:root #trece { color: red } 44 | 45 | /* Safari 2 - 3.1, Opera 9.25 */ 46 | *|html[xmlns*=""] #catorce { color: red } 47 | 48 | /* Everything but IE6-8 */ 49 | :root *> #quince { color: red } 50 | 51 | /* IE7 */ 52 | *+html #dieciocho { color: red } 53 | 54 | /* Firefox only. 1+ */ 55 | #veinticuatro, x:-moz-any-link { color: red } 56 | 57 | /* Firefox 3.0+ */ 58 | #veinticinco, x:-moz-any-link, x:default { color: red } 59 | 60 | 61 | 62 | /***** Attribute Hacks ******/ 63 | 64 | /* IE6 */ 65 | #once { _color: blue } 66 | 67 | /* IE6, IE7 */ 68 | #doce { *color: blue; /* or #color: blue */ } 69 | 70 | /* Everything but IE6 */ 71 | #diecisiete { color/**/: blue } 72 | 73 | /* IE6, IE7, IE8 */ 74 | #diecinueve { color: blue\9; } 75 | 76 | /* IE7, IE8 */ 77 | #veinte { color/*\**/: blue\9; } 78 | 79 | /* IE6, IE7 -- acts as an !important */ 80 | #veintesiete { color: blue !ie; } /* string after ! can be anything */ 81 | ``` 82 | -------------------------------------------------------------------------------- /snippets/css/browser-specific-hacks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 浏览器特殊的 css hack 3 | --- 4 | 5 | ``` 6 | /***** Selector Hacks ******/ 7 | 8 | /* IE6 and below */ 9 | * html #uno { color: red } 10 | 11 | /* IE7 */ 12 | *:first-child+html #dos { color: red } 13 | 14 | /* IE7, FF, Saf, Opera */ 15 | html>body #tres { color: red } 16 | 17 | /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 18 | html>/**/body #cuatro { color: red } 19 | 20 | /* Opera 9.27 and below, safari 2 */ 21 | html:first-child #cinco { color: red } 22 | 23 | /* Safari 2-3 */ 24 | html[xmlns*=""] body:last-child #seis { color: red } 25 | 26 | /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 27 | body:nth-of-type(1) #siete { color: red } 28 | 29 | /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 30 | body:first-of-type #ocho { color: red } 31 | 32 | /* saf3+, chrome1+ */ 33 | @media screen and (-webkit-min-device-pixel-ratio:0) { 34 | #diez { color: red } 35 | } 36 | 37 | /* iPhone / mobile webkit */ 38 | @media screen and (max-device-width: 480px) { 39 | #veintiseis { color: red } 40 | } 41 | 42 | /* Safari 2 - 3.1 */ 43 | html[xmlns*=""]:root #trece { color: red } 44 | 45 | /* Safari 2 - 3.1, Opera 9.25 */ 46 | *|html[xmlns*=""] #catorce { color: red } 47 | 48 | /* Everything but IE6-8 */ 49 | :root *> #quince { color: red } 50 | 51 | /* IE7 */ 52 | *+html #dieciocho { color: red } 53 | 54 | /* Firefox only. 1+ */ 55 | #veinticuatro, x:-moz-any-link { color: red } 56 | 57 | /* Firefox 3.0+ */ 58 | #veinticinco, x:-moz-any-link, x:default { color: red } 59 | 60 | 61 | 62 | /***** Attribute Hacks ******/ 63 | 64 | /* IE6 */ 65 | #once { _color: blue } 66 | 67 | /* IE6, IE7 */ 68 | #doce { *color: blue; /* or #color: blue */ } 69 | 70 | /* Everything but IE6 */ 71 | #diecisiete { color/**/: blue } 72 | 73 | /* IE6, IE7, IE8 */ 74 | #diecinueve { color: blue\9; } 75 | 76 | /* IE7, IE8 */ 77 | #veinte { color/*\**/: blue\9; } 78 | 79 | /* IE6, IE7 -- acts as an !important */ 80 | #veintesiete { color: blue !ie; } /* string after ! can be anything */ 81 | 82 | ``` 83 | 84 | 85 | -------------------------------------------------------------------------------- /snippets/css/clearfix.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 清除浮动 3 | --- 4 | 5 | ``` 6 | .clearfix:after { 7 | visibility: hidden; 8 | display: block; 9 | font-size: 0; 10 | content: " "; 11 | clear: both; 12 | height: 0; 13 | } 14 | .clearfix { display: inline-block; } 15 | /* start commented backslash hack \*/ 16 | * html .clearfix { height: 1%; } 17 | .clearfix { display: block; } 18 | /* close commented backslash hack */ 19 | ``` 20 | 21 | ``` 22 | .clearfix:after { 23 | visibility: hidden; 24 | display: block; 25 | font-size: 0; 26 | content: " "; 27 | clear: both; 28 | height: 0; 29 | } 30 | * html .clearfix { zoom: 1; } /* IE6 */ 31 | *:first-child+html .clearfix { zoom: 1; } /* IE7 */ 32 | ``` 33 | -------------------------------------------------------------------------------- /snippets/css/common-unicode-icons.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Unicode icon 3 | --- 4 | 5 | 演示： 6 | 7 |
8 |

9 | 10 | chriscoyier@gmail.com 11 | 12 |

13 | 14 |

15 | 555-555-5555 16 |

17 | 18 |

19 | REMEMBER: drink slushies too fast. 20 |

21 | 22 |
23 | Designers tend to whisper, ad agencies tend to shout. 24 |
25 | 26 |

27 | Stranger Danger! 28 |

29 |

30 | 31 | 39 | 40 | ``` 41 | a[href^="mailto:"]:before { content: "\2709"; } 42 | .phone:before { content: "\2706"; } 43 | .important:before { content: "\27BD"; } 44 | blockquote:before { content: "\275D"; } 45 | blockquote:after { content: "\275E"; } 46 | .alert:before { content: "\26A0"; } 47 | ``` -------------------------------------------------------------------------------- /snippets/css/corner-ribbon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 封页角 3 | --- 4 | 5 | 演示： 6 |
7 |
ON SALE
8 |
​ 9 | 74 | 75 | ``` 76 |
77 |
NEWS
78 |
​ 79 | ``` 80 | 81 | ``` 82 | .wrapper { 83 | margin: 50px auto; 84 | width: 280px; 85 | height: 370px; 86 | background: white; 87 | border-radius: 10px; 88 | -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 89 | -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 90 | box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 91 | position: relative; 92 | z-index: 90; 93 | } 94 | 95 | .ribbon-wrapper-green { 96 | width: 85px; 97 | height: 88px; 98 | overflow: hidden; 99 | position: absolute; 100 | top: -3px; 101 | right: -3px; 102 | } 103 | 104 | .ribbon-green { 105 | font: bold 15px Sans-Serif; 106 | color: #333; 107 | text-align: center; 108 | text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; 109 | -webkit-transform: rotate(45deg); 110 | -moz-transform: rotate(45deg); 111 | -ms-transform: rotate(45deg); 112 | -o-transform: rotate(45deg); 113 | position: relative; 114 | padding: 7px 0; 115 | left: -5px; 116 | top: 15px; 117 | width: 120px; 118 | background-color: #BFDC7A; 119 | background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 120 | background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 121 | background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); 122 | background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); 123 | background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); 124 | color: #6a6340; 125 | -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); 126 | -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); 127 | box-shadow: 0px 0px 3px rgba(0,0,0,0.3); 128 | } 129 | 130 | .ribbon-green:before, .ribbon-green:after { 131 | content: ""; 132 | border-top: 3px solid #6e8900; 133 | border-left: 3px solid transparent; 134 | border-right: 3px solid transparent; 135 | position:absolute; 136 | bottom: -3px; 137 | } 138 | 139 | .ribbon-green:before { 140 | left: 0; 141 | } 142 | .ribbon-green:after { 143 | right: 0; 144 | }​ 145 | ``` -------------------------------------------------------------------------------- /snippets/css/css-diagnostics.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 标签监控度检测 3 | --- 4 | 5 | ``` 6 | /* Empty Elements */ 7 | div:empty, span:empty, li:empty, p:empty, td:empty, th:empty 8 | { padding: 20px; border: 5px dotted yellow !important; } 9 | 10 | /* Empty Attributes */ 11 | *[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"] 12 | { border: 5px solid yellow !important; } 13 | 14 | /* Deprecated Elements */ 15 | applet, basefont, center, dir, font, isindex, menu, s, strike, u 16 | { border: 5px dotted red !important; } 17 | 18 | /* Deprecated Attributes */ 19 | *[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start], 20 | *[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink], 21 | *[align], *[valign], 22 | *[hspace], *[vspace], 23 | *[height], *[width], 24 | ul[type], ol[type], li[type] 25 | { border: 5px solid red !important; } 26 | 27 | /* Proposed Deprecated Elements */ 28 | input[type="button"], big, tt 29 | { border: 5px dotted #33FF00 !important; } 30 | 31 | /* Proposed Deprecated Attributes */ 32 | *[border], a[target], table[cellpadding], table[cellspacing], *[name] 33 | { border: 5px solid #33FF00 !important; } 34 | ``` 35 | 36 | ``` 37 | div:empty, span:empty, 38 | li:empty, p:empty, 39 | td:empty, th:empty {padding: 0.5em; background: yellow;} 40 | 41 | *[style], font, center {outline: 5px solid red;} 42 | *[class=""], *[id=""] {outline: 5px dotted red;} 43 | 44 | img[alt=""] {border: 3px dotted red;} 45 | img:not([alt]) {border: 5px solid red;} 46 | img[title=""] {outline: 3px dotted fuchsia;} 47 | img:not([title]) {outline: 5px solid fuchsia;} 48 | 49 | table:not([summary]) {outline: 5px solid red;} 50 | table[summary=""] {outline: 3px dotted red;} 51 | th {border: 2px solid red;} 52 | th[scope="col"], th[scope="row"] {border: none;} 53 | 54 | a[href]:not([title]) {border: 5px solid red;} 55 | a[title=""] {outline: 3px dotted red;} 56 | a[href="#"] {background: lime;} 57 | a[href=""] {background: fuchsia;} 58 | ``` -------------------------------------------------------------------------------- /snippets/css/css-triangle.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: css triangle 3 | --- 4 | 5 | 演示: 6 | 7 |
8 |
9 |
10 |
11 | 12 | 49 | 50 | ``` 51 | .arrow-up { 52 | width: 0; 53 | height: 0; 54 | border-left: 5px solid transparent; 55 | border-right: 5px solid transparent; 56 | 57 | border-bottom: 5px solid black; 58 | } 59 | 60 | .arrow-down { 61 | width: 0; 62 | height: 0; 63 | border-left: 20px solid transparent; 64 | border-right: 20px solid transparent; 65 | 66 | border-top: 20px solid #f00; 67 | } 68 | 69 | .arrow-right { 70 | width: 0; 71 | height: 0; 72 | border-top: 60px solid transparent; 73 | border-bottom: 60px solid transparent; 74 | ss 75 | border-left: 60px solid green; 76 | } 77 | 78 | .arrow-left { 79 | width: 0; 80 | height: 0; 81 | border-top: 10px solid transparent; 82 | border-bottom: 10px solid transparent; 83 | 84 | border-right:10px solid blue; 85 | } 86 | ``` -------------------------------------------------------------------------------- /snippets/css/fancy-ampersand.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: fancy ampersans 3 | --- 4 | 5 | 演示： 6 | 7 | Script & Style 8 | 9 | 16 | 17 | ``` 18 | .amp { 19 | font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; 20 | font-style: italic; 21 | font-weight: normal; 22 | } 23 | ``` -------------------------------------------------------------------------------- /snippets/css/flip-an-image.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 翻转图片 3 | --- 4 | 5 | 演示： 6 | 7 | 8 | 9 | 20 | 21 | ``` 22 | img { 23 | -moz-transform: scaleX(-1); 24 | -o-transform: scaleX(-1); 25 | -webkit-transform: scaleX(-1); 26 | transform: scaleX(-1); 27 | filter: FlipH; 28 | -ms-filter: "FlipH"; 29 | } 30 | ``` -------------------------------------------------------------------------------- /snippets/css/font-stacks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: font stacks 3 | --- 4 | 5 | ``` 6 | /* Times New Roman-based stack */ 7 | font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 8 | 9 | /* Modern Georgia-based serif stack */ 10 | font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 11 | 12 | /* Traditional Garamond-based serif stack */ 13 | font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 14 | 15 | /* Helvetica/Arial-based sans serif stack */ 16 | font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 17 | 18 | /* Verdana-based sans serif stack */ 19 | font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; 20 | 21 | /* Trebuchet-based sans serif stack */ 22 | font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 23 | 24 | /* Impact-based sans serif stack */ 25 | font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; 26 | 27 | /* Monospace stack */ 28 | font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; 29 | ``` -------------------------------------------------------------------------------- /snippets/css/forcing-grayscale-printing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 打印强制灰色 3 | --- 4 | 5 | ``` 6 | @media print { 7 | body { 8 | /* IE4-8 and 9 (deprecated). */ 9 | filter: Gray(); 10 | /* SVG version for IE10, Chrome 17, FF3.5, 11 | Safari 5.2 and Opera 11.6 */ 12 | filter: url('#grayscale'); 13 | /* CSS3 filter, at the moment Webkit only. Prefix it for 14 | future implementations */ 15 | -webkit-filter: grayscale(100%); 16 | filter: grayscale(100%); /* future-proof */ 17 | } 18 | } 19 | ``` -------------------------------------------------------------------------------- /snippets/css/gradient-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 渐变文字 3 | --- 4 | 5 | 演示： 6 | 7 |
小胡子哥
8 | 16 | 17 | ``` 18 | h1 { 19 | font-size: 72px; 20 | background: -webkit-linear-gradient(#eee, #333); 21 | -webkit-background-clip: text; 22 | -webkit-text-fill-color: transparent; 23 | } 24 | ``` -------------------------------------------------------------------------------- /snippets/css/gradient-underlines.md: -------------------------------------------------------------------------------- 1 | --- 2 | titile: 渐变底线 3 | --- 4 | 5 | 6 | 演示： 7 | 小胡子哥的个人网站 8 | 26 | 27 | 28 | ``` 29 | a { 30 | position: relative; 31 | padding-bottom: 2px; 32 | text-decoration: none; 33 | } 34 | 35 | a:hover::after { 36 | content: ""; 37 | position: absolute; 38 | bottom: 2px; 39 | left: 0; 40 | height: 1px; 41 | width: 100%; 42 | background: #444; 43 | background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%); 44 | } 45 | ``` -------------------------------------------------------------------------------- /snippets/css/hexagon-with-shadow.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 带阴影的六边形 3 | --- 4 | 演示： 5 | 6 |
7 | 8 | 47 | 48 | ``` 49 | .hexagon { 50 | width: 100px; 51 | height: 55px; 52 | position: relative; 53 | } 54 | .hexagon, .hexagon:before, .hexagon:after { 55 | background: red; 56 | -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8); 57 | -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8); 58 | box-shadow: 0 0 10px rgba(0,0,0,0.8); 59 | } 60 | .hexagon:before, .hexagon:after { 61 | content: ""; 62 | position: absolute; 63 | left: 22px; 64 | width: 57px; 65 | height: 57px; 66 | -moz-transform: rotate(145deg) skew(22.5deg); 67 | -webkit-transform: rotate(145deg) skew(22.5deg); 68 | transform: rotate(145deg) skew(22.5deg); 69 | } 70 | .hexagon:before { 71 | top: -29px; 72 | } 73 | .hexagon:after { 74 | top: 27px; 75 | } 76 | .hexagon span { 77 | position: absolute; 78 | top: 0; 79 | left: 0; 80 | width: 100px; 81 | height: 55px; 82 | background:red; 83 | z-index: 1; 84 | } 85 | ``` -------------------------------------------------------------------------------- /snippets/css/hide-scrollbar-in-IE10-plus.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: IE10+隐藏滚动条 3 | --- 4 | 5 | ``` 6 | html { 7 | -ms-overflow-style: -ms-autohiding-scrollbar; 8 | } 9 | ``` -------------------------------------------------------------------------------- /snippets/css/ipad-orientation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 转屏media 3 | --- 4 | 5 | ``` 6 | 7 | 8 | ``` -------------------------------------------------------------------------------- /snippets/css/opacity.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 透明度 3 | --- 4 | 5 | ``` 6 | .transparent_class { 7 | /* IE 8 */ 8 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 9 | 10 | /* IE 5-7 */ 11 | filter: alpha(opacity=50); 12 | 13 | /* Netscape */ 14 | -moz-opacity: 0.5; 15 | 16 | /* Safari 1.x */ 17 | -khtml-opacity: 0.5; 18 | 19 | /* Good browsers */ 20 | opacity: 0.5; 21 | } 22 | ``` -------------------------------------------------------------------------------- /snippets/css/placeholder-center-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: placeholder文字居中 3 | --- 4 | Author: 吕大豹 5 | 6 | Email: 670818517(at)qq.com 7 | 8 | 让placeholder居中的兼容写法： 9 | 10 | ``` 11 | input::input-placeholder { text-align: center } 12 | input::-ms-input-placeholder{text-align: center;} 13 | input::-webkit-input-placeholder{text-align: center;} 14 | ``` 15 | 16 | 如果是 textarea 也同理：`textarea::input-placeholder`，同时配合line-height，还能实现文字的垂直居中 17 | -------------------------------------------------------------------------------- /snippets/css/reset-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: reset.css 3 | --- 4 | 5 | ``` 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, font, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | dl, dt, dd, ol, ul, li, 12 | fieldset, form, label, legend, 13 | table, caption, tbody, tfoot, thead, tr, th, td { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | outline: 0; 18 | font-weight: inherit; 19 | font-style: inherit; 20 | font-size: 100%; 21 | font-family: inherit; 22 | vertical-align: baseline; 23 | } 24 | /* remember to define focus styles! */ 25 | :focus { 26 | outline: 0; 27 | } 28 | body { 29 | line-height: 1; 30 | color: black; 31 | background: white; 32 | } 33 | ol, ul { 34 | list-style: none; 35 | } 36 | /* tables still need 'cellspacing="0"' in the markup */ 37 | table { 38 | border-collapse: separate; 39 | border-spacing: 0; 40 | } 41 | caption, th, td { 42 | text-align: left; 43 | font-weight: normal; 44 | } 45 | blockquote:before, blockquote:after, 46 | q:before, q:after { 47 | content: ""; 48 | } 49 | blockquote, q { 50 | quotes: "" ""; 51 | } 52 | ``` -------------------------------------------------------------------------------- /snippets/css/shake-css-keyframe-animation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: css颤动效果 3 | --- 4 | 演示： 5 | Hover Me 6 | 41 | 42 | 43 | ``` 44 | .face:hover { 45 | animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; 46 | transform: translate3d(0, 0, 0); 47 | backface-visibility: hidden; 48 | perspective: 1000px; 49 | } 50 | 51 | @keyframes shake { 52 | 10%, 90% { 53 | transform: translate3d(-1px, 0, 0); 54 | } 55 | 56 | 20%, 80% { 57 | transform: translate3d(2px, 0, 0); 58 | } 59 | 60 | 30%, 50%, 70% { 61 | transform: translate3d(-4px, 0, 0); 62 | } 63 | 64 | 40%, 60% { 65 | transform: translate3d(4px, 0, 0); 66 | } 67 | } 68 | ``` 69 | -------------------------------------------------------------------------------- /snippets/css/style-tech.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS样式技巧 3 | --- 4 | 5 | 1、禁止ios和android用户选中文字 6 | 7 | ``` 8 | .css{-webkit-user-select:none} 9 | ``` 10 | 11 | 2、禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片 12 | 13 | ``` 14 | .css{-webkit-touch-callout: none} 15 | ``` 16 | 17 | 3、webkit去除表单元素的默认样式 18 | 19 | ``` 20 | .css{-webkit-appearance:none;} 21 | ``` 22 | 23 | 4、修改webkit表单输入框placeholder的样式 24 | 25 | ``` 26 | input::-webkit-input-placeholder{color:#AAAAAA;} 27 | input:focus::-webkit-input-placeholder{color:#EEEEEE;} 28 | ``` 29 | 30 | 5、去除android a/button/input标签被点击时产生的边框 & 去除ios a标签被点击时产生的半透明灰色背景 31 | 32 | ``` 33 | a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);} 34 | ``` 35 | 36 | 6、ios使用-webkit-text-size-adjust禁止调整字体大小 37 | 38 | ``` 39 | body{-webkit-text-size-adjust: 100%!important;} 40 | ``` 41 | 42 | 7、android 上去掉语音输入按钮 43 | 44 | ``` 45 | input::-webkit-input-speech-button {display: none} 46 | ``` 47 | 48 | 8、移动端定义字体，移动端没有微软雅黑字体 49 | 50 | ``` 51 | /* 移动端定义字体的代码 */ 52 | body{font-family:Helvetica;} 53 | ``` 54 | 55 | 转自： 56 | -------------------------------------------------------------------------------- /snippets/css/webkit-file-input.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 重写 file 控件样式 3 | --- 4 | 5 | 演示： 6 | 7 | 8 | 24 | 25 | ``` 26 | input[type="file"]{ 27 | -webkit-appearance: none; 28 | text-align: left; 29 | -webkit-rtl-ordering: left; 30 | } 31 | input[type="file"]::-webkit-file-upload-button{ 32 | -webkit-appearance: none; 33 | float: right; 34 | margin: 0 0 0 10px; 35 | border: 1px solid #aaaaaa; 36 | border-radius: 4px; 37 | background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0)); 38 | background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%); 39 | } 40 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/301-redirects.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 301跳转 3 | --- 4 | 5 | 单页面： 6 | 7 | ``` 8 | Redirect 301 /oldpage.html http://www.yoursite.com/newpage.html 9 | Redirect 301 /oldpage2.html http://www.yoursite.com/folder/ 10 | ``` 11 | 12 | 整站： 13 | 14 | ``` 15 | Redirect 301 / http://newsite.com/ 16 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/append-prepend-files.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 自动添加文件 3 | --- 4 | 5 | ``` 6 | php_value auto_prepend_file "/real/path/to/file/functions.php" 7 | php_value auto_append_file "/real/path/to/file/footer.php" 8 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/custom-error-pages.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 自定义错误页面 3 | --- 4 | 5 | ``` 6 | ErrorDocument 400 /400.html 7 | ErrorDocument 401 /401.html 8 | ErrorDocument 403 /403.html 9 | ErrorDocument 404 /404.html 10 | ErrorDocument 405 /405.html 11 | ErrorDocument 408 /408.html 12 | ErrorDocument 414 /414.html 13 | ErrorDocument 500 /500.html 14 | ErrorDocument 502 /502.html 15 | ErrorDocument 504 /504.html 16 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/denying-allowing-access.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 允许或者禁止访问 3 | --- 4 | 5 | 允许某 IP 访问 6 | 7 | ``` 8 | Order deny,allow 9 | Deny from All 10 | Allow from xxx.xxx.xxx.xxx 11 | Allow from xxx.xxx.xxx.xxy 12 | ``` 13 | 14 | 禁止某特定 IP 访问 15 | 16 | ``` 17 | Order deny,allow 18 | Allow from All 19 | Deny from xxx.xxx.xxx.xxx 20 | Deny from xxx.xxx.xxx.xxy 21 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/different-directory-index-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 设置 index 页面 3 | --- 4 | 5 | ``` 6 | DirectoryIndex index2.html 7 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/force-correct-content-type-for-xhtml-document.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 强制为 XHTML 类型 3 | --- 4 | 5 | ``` 6 | RewriteEngine On 7 | RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml 8 | RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0 9 | RewriteCond %{REQUEST_URI} \.html$ 10 | RewriteCond %{THE_REQUEST} HTTP/1\.1 11 | RewriteRule .* - "[T=application/xhtml+xml; charset=ISO-8859-1]" 12 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/force-favicon-requests-to-correct-location.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 让 favicon 走正确路线 3 | --- 4 | 5 | ``` 6 | # REDIRECT FAVICON.ICO 7 | 8 | RewriteCond %{REQUEST_URI} !^/favicon\.ico [NC] 9 | RewriteCond %{REQUEST_URI} favicon\.ico [NC] 10 | RewriteRule (.*) http://css-tricks.com/favicon.ico [R=301,L] 11 | 12 | ``` 13 | 14 | ``` 15 | # REDIRECT AJAX-LOADER 16 | 17 | RewriteCond %{REQUEST_URI} !^/images/ajax\-loader\.gif [NC] 18 | RewriteCond %{REQUEST_URI} ajax\-loader\.gif [NC] 19 | RewriteRule (.*) http://css-tricks.com/images/ajax-loader.gif [R=301,L] 20 | 21 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/force-files-to-download-not-open-in-browser.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 强制让文件打开时下载 3 | --- 4 | 5 | ``` 6 | AddType application/octet-stream .csv 7 | AddType application/octet-stream .xls 8 | AddType application/octet-stream .doc 9 | AddType application/octet-stream .avi 10 | AddType application/octet-stream .mpg 11 | AddType application/octet-stream .mov 12 | AddType application/octet-stream .pdf 13 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/force-https.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 强制 https 3 | --- 4 | 5 | ``` 6 | RewriteEngine on 7 | RewriteCond %{HTTPS} !on 8 | RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} 9 | ``` 10 | 11 | ``` 12 | RewriteCond %{HTTP:X-Forwarded-Proto} !https 13 | RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} 14 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/gizp-compression.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Gzip 压缩 3 | --- 4 | 5 | ``` 6 | # BEGIN GZIP 7 | 8 | AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript 9 | 10 | # END GZIP 11 | ``` 12 | 13 | ``` 14 | 15 | AddOutputFilterByType DEFLATE "application/atom+xml" \ 16 | "application/javascript" \ 17 | "application/json" \ 18 | "application/ld+json" \ 19 | "application/manifest+json" \ 20 | "application/rdf+xml" \ 21 | "application/rss+xml" \ 22 | "application/schema+json" \ 23 | "application/vnd.geo+json" \ 24 | "application/vnd.ms-fontobject" \ 25 | "application/x-font-ttf" \ 26 | "application/x-javascript" \ 27 | "application/x-web-app-manifest+json" \ 28 | "application/xhtml+xml" \ 29 | "application/xml" \ 30 | "font/eot" \ 31 | "font/opentype" \ 32 | "image/bmp" \ 33 | "image/svg+xml" \ 34 | "image/vnd.microsoft.icon" \ 35 | "image/x-icon" \ 36 | "text/cache-manifest" \ 37 | "text/css" \ 38 | "text/html" \ 39 | "text/javascript" \ 40 | "text/plain" \ 41 | "text/vcard" \ 42 | "text/vnd.rim.location.xloc" \ 43 | "text/vtt" \ 44 | "text/x-component" \ 45 | "text/x-cross-domain-policy" \ 46 | "text/xml" 47 | 48 | 49 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/password-protect-folders.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 文件夹密码访问 3 | --- 4 | 5 | ``` 6 | AuthType Basic 7 | AuthName "This Area is Password Protected" 8 | AuthUserFile /full/path/to/.htpasswd 9 | Require valid-user 10 | ``` 11 | 12 | [Reference](https://css-tricks.com/snippets/htaccess/password-protect-folders/) -------------------------------------------------------------------------------- /snippets/htaccess/set-expires.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 设置过期时间 3 | --- 4 | 5 | ``` 6 | # BEGIN EXPIRES 7 | 8 | ExpiresActive On 9 | ExpiresDefault "access plus 10 days" 10 | ExpiresByType text/css "access plus 1 week" 11 | ExpiresByType text/plain "access plus 1 month" 12 | ExpiresByType image/gif "access plus 1 month" 13 | ExpiresByType image/png "access plus 1 month" 14 | ExpiresByType image/jpeg "access plus 1 month" 15 | ExpiresByType application/x-javascript "access plus 1 month" 16 | ExpiresByType application/javascript "access plus 1 week" 17 | ExpiresByType application/x-icon "access plus 1 year" 18 | 19 | # END EXPIRES 20 | ``` -------------------------------------------------------------------------------- /snippets/htaccess/www-no-www.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 网址添加 www 或者删除 www 3 | --- 4 | 5 | 强制添加 www： 6 | 7 | ``` 8 | RewriteEngine On 9 | RewriteCond %{HTTP_HOST} ^your-site.com [NC] 10 | RewriteRule ^(.*)$ http://www.your-site.com/$1 [L,R=301] 11 | ``` 12 | 13 | 强制去除 www： 14 | 15 | ``` 16 | RewriteEngine On 17 | RewriteCond %{HTTP_HOST} !^your-site.com$ [NC] 18 | RewriteRule ^(.*)$ http://your-site.com/$1 [L,R=301] 19 | ``` 20 | -------------------------------------------------------------------------------- /snippets/html/add-body-class-just-for-ie.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: IE条件注释，为IE单独写js 3 | --- 4 | 5 | ```html 6 | 9 | 10 | 11 | 12 | ``` 13 | 14 | 15 | ```html 16 | 17 | 20 | 23 | 26 | 29 | 30 | 31 | 32 | ``` 33 | -------------------------------------------------------------------------------- /snippets/html/autocomplete-off.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 关闭表单的自动补全 3 | --- 4 | 5 | ``` 6 | 7 | ``` -------------------------------------------------------------------------------- /snippets/html/base64-encode-of-1x1px-transparent-gif.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 1x1px 透明 gif 的 base64 代码 3 | --- 4 | 5 | ``` 6 | 7 | 8 | ``` -------------------------------------------------------------------------------- /snippets/html/button-with-line-breaks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 有文字换行的按钮 3 | --- 4 | 5 | ``` 6 | 7 | ``` 8 | 9 | 演示： -------------------------------------------------------------------------------- /snippets/html/embedding-flash.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 嵌入一个 flash 3 | --- 4 | 5 | ```html 6 | 9 | 10 | 11 | 12 | ``` 13 | 14 | `` 标签不是标准的 XHTML，不建议使用，并且它在 IE 下还有一些可怕的 bug。 -------------------------------------------------------------------------------- /snippets/html/embedding-quicktime.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 嵌入一个 quicktime 播放器 3 | --- 4 | 5 | ```html 6 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ``` -------------------------------------------------------------------------------- /snippets/html/embedding-windows-media.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 嵌入一个 windows media 媒体 3 | --- 4 | 5 | ``` 6 | 9 | 11 | 12 | 13 | 14 | ``` -------------------------------------------------------------------------------- /snippets/html/example-form-markup.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 插入一个表单 3 | --- 4 | 5 | ``` 6 |
7 |
8 | 9 | 10 |
11 |
12 |

单项选择

13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 |
37 |
38 | ``` 39 | 40 |
41 | 42 |
43 | 44 | 45 |
46 | 47 |
48 |

单项选择

49 | 50 | 51 | 52 | 53 | 54 | 55 |
56 | 57 |
58 | 59 | 64 |
65 | 66 |
67 | 68 | 69 |
70 | 71 |
72 | 73 | 74 |
75 | 76 |
77 | 78 |
79 | 80 |
-------------------------------------------------------------------------------- /snippets/html/html-generator.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTML脚手架 3 | --- 4 | 5 | ```html 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | DEMO 16 | 17 | 18 | 19 | 20 | 21 | 22 | ``` 23 | -------------------------------------------------------------------------------- /snippets/html/iphone-calling-and-texting-links.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 让 iphone 打电话发短信 3 | --- 4 | 5 | ``` 6 | 1-408-555-5555 7 | New SMS Message 8 | ``` 9 | 10 | 原理跟 schema 唤醒 app 差不多。 -------------------------------------------------------------------------------- /snippets/html/keep-flash-behind-other-elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 让 flash 跑到下层 3 | --- 4 | 5 | ``` 6 | 7 | ``` -------------------------------------------------------------------------------- /snippets/html/meta-refresh.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: meta 刷新 3 | --- 4 | 5 | ``` 6 | 7 | ``` 8 | 9 | 5s 之后跳转页面到 `http://barretlee.com`，设置为 0，则会立即跳转。 -------------------------------------------------------------------------------- /snippets/html/meta-tag-for-forcing-ie-8-to-behave-like-ie-7.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 强制IE8按照IE7解析 3 | --- 4 | 5 | ``` 6 | 7 | ``` -------------------------------------------------------------------------------- /snippets/html/meta-tag-to-prevent-search-engine-bots.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 让搜索引擎不要跟踪爬虫 3 | --- 4 | 5 | 所有的爬虫走开： 6 | 7 | ``` 8 | 9 | ``` 10 | 11 | Google 爬虫走开： 12 | 13 | ``` 14 | 15 | ``` 16 | 17 | 不要爬这个链接： 18 | 19 | ``` 20 | 私有链接 21 | ``` 22 | -------------------------------------------------------------------------------- /snippets/html/multiple-file-input.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 上传多个文件 3 | --- 4 | 5 | ```html 6 |
7 | 8 | 9 |
10 | ``` 11 | 12 | 后端 php 处理，可以这样： 13 | 14 | ```php 15 | foreach ($_FILES['uploads']['name'] as $filename) { 16 | echo '
  • ' . $filename . '
    • '; 17 | } 18 | ``` -------------------------------------------------------------------------------- /snippets/html/responsive-meta-tag.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 响应式 meta 标签 3 | --- 4 | 5 | ```html 6 | 7 | 8 | ``` 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
    PropertyDescription
    widthThe width of the virtual viewport of the device.
    device-widthThe physical width of the device's screen.
    heightThe height of the "virtual viewport" of the device.
    device-heightThe physical height of the device's screen.
    initial-scaleThe initial zoom when visiting the page. 1.0 does not zoom.
    minimum-scaleThe minimum amount the visitor can zoom on the page. 1.0 does not zoom.
    maximum-scaleThe maximum amount the visitor can zoom on the page. 1.0 does not zoom.
    user-scalableAllows the device to zoom in and out. Values are yes or no.
    49 | ```css 50 | @-ms-viewport{ 51 | width: device-width; 52 | } 53 | ``` -------------------------------------------------------------------------------- /snippets/html/set-iphone-bookmark-icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 设置 iphone 书签 icon 3 | --- 4 | 5 | ``` 6 | 7 | 8 | ``` 9 | 10 | 尺寸为：57x57 -------------------------------------------------------------------------------- /snippets/html/the-common-doctypes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 文档类型 3 | --- 4 | 5 | HTML 4.01 Strict 6 | 7 | ``` 8 | 10 | ``` 11 | 12 | XHTML 1.0 Strict 13 | 14 | ``` 15 | 17 | ``` 18 | 19 | XHTML 1.0 Transitional 20 | 21 | ``` 22 | 24 | ``` 25 | 26 | XHTML 1.1 27 | 28 | ``` 29 | 31 | ``` 32 | 33 | HTML 5 34 | 35 | ``` 36 | 37 | ``` -------------------------------------------------------------------------------- /snippets/html/tooltips-for-acronyms.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 缩写词 3 | --- 4 | 5 | ``` 6 | I love CSS. 7 | ``` 8 | 9 | 10 | 演示：I love CSS. -------------------------------------------------------------------------------- /snippets/html/video-for-everbody.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: html5 兼容版本 video 3 | --- 4 | 5 | ``` 6 | 7 | 8 | 22 | 23 |

    Download Video: 24 | Closed Format: "MP4" 25 | Open Format: "Ogg" 26 |

    27 | ``` -------------------------------------------------------------------------------- /snippets/javascript/add-to-favorites-ie.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 添加到收藏夹(IE Only) 3 | --- 4 | 5 | ``` 6 | 添加到收藏夹 7 | ``` 8 | 9 | js代码： 10 | 11 | ``` 12 | window.external.AddFavorite(url, text); 13 | ``` -------------------------------------------------------------------------------- /snippets/javascript/async-script-loader-with-callback.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: nil 3 | title: 异步js加载器 4 | --- 5 | 6 | ``` 7 | var Loader = function () { } 8 | Loader.prototype = { 9 | require: function (scripts, callback) { 10 | this.loadCount = 0; 11 | this.totalRequired = scripts.length; 12 | this.callback = callback; 13 | 14 | for (var i = 0; i < scripts.length; i++) { 15 | this.writeScript(scripts[i]); 16 | } 17 | }, 18 | loaded: function (evt) { 19 | this.loadCount++; 20 | 21 | if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call(); 22 | }, 23 | writeScript: function (src) { 24 | var self = this; 25 | var s = document.createElement('script'); 26 | s.type = "text/javascript"; 27 | s.async = true; 28 | s.src = src; 29 | s.addEventListener('load', function (e) { self.loaded(e); }, false); 30 | var head = document.getElementsByTagName('head')[0]; 31 | head.appendChild(s); 32 | } 33 | } 34 | ``` 35 | 36 | 使用： 37 | 38 | ``` 39 | var l = new Loader(); 40 | l.require([ 41 | "example-script-1.js", 42 | "example-script-2.js"], 43 | function() { 44 | // Callback 45 | console.log('All Scripts Loaded'); 46 | }); 47 | ``` 48 | -------------------------------------------------------------------------------- /snippets/javascript/async-sharing-buttons-g-facebook-twitter.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 分享到社交网站 3 | --- 4 | 5 | ``` 6 | (function(doc, script) { 7 | var js, 8 | fjs = doc.getElementsByTagName(script)[0], 9 | frag = doc.createDocumentFragment(), 10 | add = function(url, id) { 11 | if (doc.getElementById(id)) {return;} 12 | js = doc.createElement(script); 13 | js.src = url; 14 | id && (js.id = id); 15 | frag.appendChild( js ); 16 | }; 17 | 18 | // Google+ button 19 | add('https://apis.google.com/js/plusone.js'); 20 | // Facebook SDK 21 | add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk'); 22 | // Twitter SDK 23 | add('//platform.twitter.com/widgets.js'); 24 | 25 | fjs.parentNode.insertBefore(frag, fjs); 26 | }(document, 'script')); 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /snippets/javascript/auto-select-textarea-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 自动复制文本 3 | --- 4 | 5 | ``` 6 | 9 | ``` -------------------------------------------------------------------------------- /snippets/javascript/check-font-family-honored.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 检测字体是否加载 3 | --- 4 | 5 | ``` 6 | function checkFont(strFamily) { 7 | var objDiv = document.createElement('div'); 8 | 9 | objDiv.style.fontFamily = strFamily; 10 | objDiv.appendChild(document.createTextNode('FONT TEST')); 11 | 12 | if (window.getComputedStyle) { 13 | return window.getComputedStyle(objDiv, null).getPropertyValue('font-family') === strFamily; 14 | } 15 | 16 | return objDiv.currentStyle.fontFamily === strFamily; 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /snippets/javascript/check-if-in-viewport.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 检查元素是否位于当前视窗(可用于lazyload, infinite scroll等常见功能) 3 | --- 4 | 5 | ``` 6 | function isInViewport(el) { 7 | var rect = el.getBoundingClientRect(); 8 | 9 | return rect.bottom > 0 && 10 | rect.right > 0 && 11 | rect.left < (window.innerWidth || document. documentElement.clientWidth) && 12 | rect.top < (window.innerHeight || document. documentElement.clientHeight); 13 | } 14 | 15 | ``` 16 | ### Example Usage: 17 | 18 | ``` 19 | window.addEventListener('scroll', function() { 20 | isInViewport(el); 21 | }) 22 | 23 | ``` -------------------------------------------------------------------------------- /snippets/javascript/cookie-gettersette.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: cookie工具 3 | --- 4 | 5 | 6 | ``` 7 | _.cookie = function(name, value, options) { 8 | if (typeof value === "undefined") { 9 | var n, v, 10 | cookies = document.cookie.split(";"); 11 | for (var i = 0; i < cookies.length; i++) { 12 | n = $.trim(cookies[i].substr(0,cookies[i].indexOf("="))); 13 | v = cookies[i].substr(cookies[i].indexOf("=")+1); 14 | if (n === name){ 15 | return unescape(v); 16 | } 17 | } 18 | } else { 19 | options = options || {}; 20 | if (!value) { 21 | value = ""; 22 | options.expires = -365; 23 | } else { 24 | value = escape(value); 25 | } 26 | if (options.expires) { 27 | var d = new Date(); 28 | d.setDate(d.getDate() + options.expires); 29 | value += "; expires=" + d.toUTCString(); 30 | } 31 | if (options.domain) { 32 | value += "; domain=" + options.domain; 33 | } 34 | if (options.path) { 35 | value += "; path=" + options.path; 36 | } 37 | document.cookie = name + "=" + value; 38 | } 39 | }; 40 | ``` -------------------------------------------------------------------------------- /snippets/javascript/cross-browser-dependency-free-dom-ready.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOMReady函数 3 | --- 4 | 5 | ``` 6 | var DOMReady = function(a, b, c) { 7 | b = document 8 | c = 'addEventListener' 9 | b[c] ? b[c]('DocumentContentLoaded', a) : window.attachEvent('onload', a) 10 | } 11 | 12 | DOMReady(function () { 13 | alert('The DOM is Ready!'); 14 | }); 15 | ``` -------------------------------------------------------------------------------- /snippets/javascript/detect-ie.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 判断 IE 的一点奇技淫巧 3 | --- 4 | 5 | 不需要插入 DOM，也可以通过 getElementsByTagName 访问 DOM 的内容。 6 | 7 | ``` 8 | var isIE = function(){ 9 | var b = document.createElement('b') 10 | b.innerHTML = '' 11 | return b.getElementsByTagName('i').length === 1 12 | }; 13 | ``` 14 | -------------------------------------------------------------------------------- /snippets/javascript/dispatchEvent.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: dispatchEvent模拟事件 3 | --- 4 | 5 | Author: Hawk 6 | 7 | Email: whktk(at)qq.com 8 | 9 | ``` 10 | if ("createEvent" in document) { 11 | var evt = document.createEvent("HTMLEvents"); 12 | evt.initEvent("change", false, true); 13 | element.dispatchEvent(evt); 14 | } 15 | else 16 | element.fireEvent("onchange"); 17 | ``` 18 | 19 | 用JS手动修改input的值后，可以手动促发事件 20 | -------------------------------------------------------------------------------- /snippets/javascript/fix-ie-10-on-windows-phone-8-viewport.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 修复 winPhone8 的 IE10 viewport 问题 3 | --- 4 | 5 | ``` 6 | (function() { 7 | if (navigator.userAgent.match(/IEMobile\/10\.0/)) { 8 | var msViewportStyle = document.createElement("style"); 9 | msViewportStyle.appendChild( 10 | document.createTextNode("@-ms-viewport{width:auto!important}") 11 | ); 12 | document.getElementsByTagName("head")[0].appendChild(msViewportStyle); 13 | } 14 | })(); 15 | ``` 16 | 17 | ### Refer 18 | 19 | Matt Stow: [Responsive Design in IE10 on Windows Phone 8](http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html) 20 | 21 | Tim Kadlec: [Windows Phone 8 and Device-Width](http://timkadlec.com/2013/01/windows-phone-8-and-device-width/) -------------------------------------------------------------------------------- /snippets/javascript/get-global-var.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 获取全局产生的变量 3 | --- 4 | 5 | ```javascript 6 | ;(function(){ 7 | var ifr = document.createElement('iframe'); 8 | document.body.appendChild(ifr); 9 | var pure = Object.getOwnPropertyNames(ifr.contentWindow); 10 | document.body.removeChild(ifr); 11 | var cur = Object.getOwnPropertyNames(window); 12 | var diff = cur.filter(function(item){ 13 | return pure.indexOf(item) == -1 && item !== '__commandLineAPI'; 14 | }); 15 | console.log(diff, diff.length); 16 | })(); 17 | ``` 18 | -------------------------------------------------------------------------------- /snippets/javascript/get-url-param.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 获取 url 的 param 3 | -- 4 | 5 | ``` 6 | function getQueryVariable(variable) { 7 | var query = window.location.search.substring(1); 8 | var vars = query.split("&"); 9 | for (var i=0;i