diff --git a/_config.yml b/_config.yml index fc24e7a..3397c9a 100644 --- a/_config.yml +++ b/_config.yml @@ -1 +1 @@ -theme: jekyll-theme-hacker \ No newline at end of file +theme: jekyll-theme-architect \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..f773a8c --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + {{ site.title | default: site.github.repository_name }} by {{ site.github.owner_name }} + + + +

+ +

+ {% if site.github.is_project_page %} + View project on GitHub + {% endif %} + {% if site.github.is_user_page %} + Follow me on GitHub + {% endif %} +

+ +

+ {{ content }} +

+ + + + \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..0329383 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,203 @@ +--- +--- + +@import "{{ site.theme }}"; + +/* LAYOUT STYLES */ +body { font-family: 'Helvetica Neue', Helvetica, Arial, serif; font-size: 15px; font-weight: 400; line-height: 1.5; color: #666; background: #fafafa url(../images/body-bg.jpg) 0 0 repeat; } + +p { margin-top: 0; } + +a { color: #2879d0; } + +a:hover { color: #2268b2; } + +header { padding-top: 40px; padding-bottom: 40px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; background: #2e7bcf url(../images/header-bg.jpg) 0 0 repeat-x; border-bottom: solid 1px #275da1; } + +header h1 { width: 540px; margin-top: 0; margin-bottom: 0.2em; font-size: 72px; font-weight: normal; line-height: 1; color: #fff; letter-spacing: -1px; } + +header h2 { width: 540px; margin-top: 0; margin-bottom: 0; font-size: 26px; font-weight: normal; line-height: 1.3; color: rgb(102, 204, 197); letter-spacing: 0; } + +.inner { position: relative; width: 940px; margin: 0 auto; } + +#content-wrapper { padding-top: 30px; border-top: solid 1px #fff; } + +#main-content { float: left; width: 690px; } + +#main-content img { max-width: 100%; } + +aside#sidebar { float: right; width: 200px; min-height: 504px; padding-left: 20px; font-size: 12px; line-height: 1.3; background: transparent url(../images/sidebar-bg.jpg) 0 0 no-repeat; } + +aside#sidebar p.repo-owner, aside#sidebar p.repo-owner a { font-weight: bold; } + +#downloads { margin-bottom: 40px; } + +a.button { width: 134px; height: 58px; padding-top: 22px; padding-left: 68px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 23px; line-height: 1.2; color: #fff; } + +a.button small { display: block; font-size: 11px; } + +header a.button { position: absolute; top: 0; right: 0; background: transparent url(../images/github-button.png) 0 0 no-repeat; } + +aside a.button { display: block; width: 138px; padding-left: 64px; margin-bottom: 20px; font-size: 21px; background: transparent url(../images/download-button.png) 0 0 no-repeat; } + +code, pre { margin-bottom: 30px; font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; font-size: 13px; color: #222; } + +code { padding: 0 3px; background-color: #f2f8fc; border: solid 1px #dbe7f3; } + +pre { padding: 20px; overflow: auto; text-shadow: none; background: #fff; border: solid 1px #f2f2f2; } + +pre code { padding: 0; color: #2879d0; background-color: #fff; border: none; } + +ul, ol, dl { margin-bottom: 20px; } + +/* COMMON STYLES */ +hr { height: 0; margin-top: 1em; margin-bottom: 1em; border: 0; border-top: solid 1px #ddd; } + +table { width: 100%; border: 1px solid #ebebeb; } + +th { font-weight: 500; } + +td { font-weight: 300; text-align: center; border: 1px solid #ebebeb; } + +form { padding: 20px; background: #f2f2f2; } + +/* GENERAL ELEMENT TYPE STYLES */ +#main-content h1 { margin-top: 0; margin-bottom: 0; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 2.8em; font-weight: normal; color: #474747; text-indent: 6px; letter-spacing: -1px; } + +#main-content h1:before { padding-right: 0.3em; margin-left: -0.9em; color: rgb(102, 204, 197); content: "/"; } + +#main-content h2 { margin-bottom: 8px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 22px; font-weight: bold; color: #474747; text-indent: 4px; } + +#main-content h2:before { padding-right: 0.3em; margin-left: -1.5em; content: "//"; color: rgb(102, 204, 197); } + +#main-content h3 { margin-top: 24px; margin-bottom: 8px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 18px; font-weight: bold; color: #474747; text-indent: 3px; } + +#main-content h3:before { padding-right: 0.3em; margin-left: -2em; content: "///"; color: rgb(102, 204, 197); } + +#main-content h4 { margin-bottom: 8px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 15px; font-weight: bold; color: #474747; text-indent: 3px; } + +h4:before { padding-right: 0.3em; margin-left: -2.8em; content: "////"; color: rgb(102, 204, 197); } + +#main-content h5 { margin-bottom: 8px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 14px; color: #474747; text-indent: 3px; } + +h5:before { padding-right: 0.3em; margin-left: -3.2em; content: "/////"; color: rgb(102, 204, 197); } + +#main-content h6 { margin-bottom: 8px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: .8em; color: #474747; text-indent: 3px; } + +h6:before { padding-right: 0.3em; margin-left: -3.7em; content: "//////"; color: rgb(102, 204, 197); } + +p { margin-bottom: 20px; } + +a { text-decoration: none; } + +p a { font-weight: 400; } + +blockquote { padding: 0 0 0 30px; margin-bottom: 20px; font-size: 1.6em; border-left: 10px solid #e9e9e9; } + +ul { list-style-position: inside; list-style: disc; padding-left: 20px; } + +ol { list-style-position: inside; list-style: decimal; padding-left: 3px; } + +dl dd { font-style: italic; font-weight: 100; } + +footer { padding-top: 20px; padding-bottom: 30px; margin-top: 40px; font-size: 13px; color: #aaa; background: transparent url("../images/hr.png") 0 0 no-repeat; } + +footer a { color: #666; } + +footer a:hover { color: #444; } + +/* MISC */ +.clearfix:after { display: block; height: 0; clear: both; visibility: hidden; content: '.'; } + +.clearfix { display: inline-block; } + +* html .clearfix { height: 1%; } + +.clearfix { display: block; } + +/* #Media Queries +================================================== */ +/* Smaller than standard 960 (devices and browsers) */ +/* Tablet Portrait size to standard 960 (devices and browsers) */ +@media only screen and (min-width: 768px) and (max-width: 959px) { .inner { width: 740px; } + header h1, header h2 { width: 340px; } + header h1 { font-size: 60px; } + header h2 { font-size: 30px; } + #main-content { width: 490px; } + #main-content h1:before, #main-content h2:before, #main-content h3:before, #main-content h4:before, #main-content h5:before, #main-content h6:before { padding-right: 0; margin-left: 0; content: none; } } +/* All Mobile Sizes (devices and browser) */ +@media only screen and (max-width: 767px) { .inner { width: 93%; } + header { padding: 20px 0; } + header .inner { position: relative; } + header h1, header h2 { width: 100%; } + header h1 { font-size: 48px; } + header h2 { font-size: 24px; } + header a.button { position: relative; display: inline-block; width: auto; height: auto; padding: 5px 10px; margin-top: 15px; font-size: 13px; line-height: 1; color: #2879d0; text-align: center; background-color: rgb(102, 204, 197); background-image: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } + header a.button small { display: inline; font-size: 13px; } + #main-content, aside#sidebar { float: none; width: 100% !important; } + aside#sidebar { min-height: 0; padding: 20px 0; margin-top: 20px; background-image: none; border-top: solid 1px #ddd; } + aside#sidebar a.button { display: none; } + #main-content h1:before, #main-content h2:before, #main-content h3:before, #main-content h4:before, #main-content h5:before, #main-content h6:before { padding-right: 0; margin-left: 0; content: none; } } +/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ +/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ +#main-content { width: auto; } + +#sidebar { display: none; } + +body header { background: #333; } +body header .inner h2 { color: #fff; font-size: 18px; } + +@media only screen and (max-width: 767px) { header a.button { background: #ffffff; color: #333; } + header a.button:hover { color: #111111; } } + +#main-content { + width: auto; +} + +#sidebar { + display: none; +} + +body { + font-family: Helvetica Neue,Helvetica,Tahoma,Arial,STXihei,Microsoft YaHei,微软雅黑,sans-serif; + a:link { + color: #009999; + } + + a:hover { + color: #00c4a7; + } + + a:visited { + color: #009999; + } + + header { + a.button { + color: #fff; + + &:hover { + color: #eee; + }; + } + } +} + +body header { + background: rgb(102, 204, 197); + border-bottom: none; + + .inner { + h2 { + color: #fff; + font-size: 18px; + } + } +} + +@media only screen and (max-width: 767px) { + body header a.button { + background: #ffffff; + color: #666; + } +} diff --git a/index.md b/index.md index 5af3c23..25042b6 100644 --- a/index.md +++ b/index.md @@ -2,21 +2,14 @@ ## navigator -### [挨踢路透社前端半月刊](./papers/paper.md) +### [挨踢路透社前端月刊](./papers/paper.md) ### [挨踢路透社前端 wiki](./wiki/index.md) ### [挨踢路透社知乎专栏](https://zhuanlan.zhihu.com/future-fe) +## 热门资源 +* [vue 系列资源](./wiki/vue/index.md) - diff --git a/papers/2017/fe-paper-01.md b/papers/2017/fe-paper-01.md index 1c26083..129463c 100644 --- a/papers/2017/fe-paper-01.md +++ b/papers/2017/fe-paper-01.md @@ -15,8 +15,10 @@ ### 开源 * [slim.js](https://github.com/eavichay/slim.js) + Slim.js is a lightning fast library for development of native web-components. No black magic. It uses javascript’s inheritance mechanism to boost up HTML elements with superpowers. * [axios](https://github.com/mzabriskie/axios) + Promise based HTTP client for the browser and node.js ### 社区热点 diff --git a/papers/paper.md b/papers/paper.md index 010124e..84c9b5f 100644 --- a/papers/paper.md +++ b/papers/paper.md @@ -1,4 +1,4 @@ -## 挨踢路透社前端半月刊 +## 挨踢路透社前端月刊 ### 2017 索引 -* [第一期(2017-03-06~2017-03-16)](./2017/fe-paper-01.md) \ No newline at end of file +* [第一期（3月）](./2017/fe-paper-01.md) \ No newline at end of file diff --git a/readme.md b/readme.md index 434f216..954d096 100644 --- a/readme.md +++ b/readme.md @@ -2,7 +2,7 @@ 你是否每天都会读几篇技术文章，每天关注大牛的微博，在 github 上 fork/star 了许多的项目，混迹于各社区论坛，但依然感觉空荡荡的。 -在这里我们希望能够给你提供精简必要的资源，避免无意义的学习。与其盲目阅读，不如来看挨踢路透社前端半月刊。 +在这里我们希望能够给你提供精简必要的资源，避免无意义的学习。与其盲目阅读，不如来看挨踢路透社前端月刊。我们希望在此你能看到： @@ -23,6 +23,19 @@ wiki 将作为资源整理以及收集的栏目. +#### wiki待完善 + +* git/github 资源 +* webpack 资源 +* fuse-box +* rollup +* next.js +* nuxt.js +* Nodejs +* 在线工具 +* 开发必备库系列 +* more and more + ### 如何投稿 * 通过 Issue diff --git a/_layout/paper-layout.md b/source/paper-layout.md similarity index 100% rename from _layout/paper-layout.md rename to source/paper-layout.md diff --git a/wiki/css/index.md b/wiki/css/index.md new file mode 100644 index 0000000..e69de29 diff --git a/wiki/dictionary/job.md b/wiki/dictionary/job.md new file mode 100644 index 0000000..92e95a1 --- /dev/null +++ b/wiki/dictionary/job.md @@ -0,0 +1,57 @@ +## 挨踢词典-职位 + +按字母先后顺序排序 + +* 前端开发工程师 - (FE) + * Front End Engineer + * Front-end Web developer + * Front-end developer + +现在大多数的公司都简称前端工程师为 fe, 少数的公司会将 php 也划分在内（如百度金融). + +

+ +* ios/android 开发工程师 - [NA/native] + * Mobile App Development Engineer + * native developer + +

+ +* 运维工程师、运维开发工程师 - [OP] + * Operation Developer + +主要负责上线系统及服务器的管理、维护。 + +

+ +* 产品经理 - [PM] + * Product Manager + +

+ +* 后端开发工程师 - [RD] + * Research Developer + +许多公司称后端开发工程师为 RD，一般情况是暗指编写数据接口的开发者，虽然其实际含义可代表所有类型的开发者。 + +

+ +* 测试开发工程师 - [SDET/QA] + * Test Development Engineer + * Quality Assurance + +大多数情况下都会直接以 '测试' 或是 QA 称呼测试开发工程师，SDET 实在不好读。 + +

+ +* 视觉设计师 - [UI] + * user interface + +视觉设计师的工作主要是在 PM 产出的原型图给出设计稿，设计稿基本确定了产品的最终呈现效果。 + +

+ +* 交互设计师/用户体验设计师 - [UX/UE] + * Users Experience Design + +负责交互界面的设计，确认产品的交互模型、细节等。 \ No newline at end of file diff --git a/wiki/html/index.md b/wiki/html/index.md new file mode 100644 index 0000000..e69de29 diff --git a/wiki/index.md b/wiki/index.md index c0a8901..685478b 100644 --- a/wiki/index.md +++ b/wiki/index.md @@ -1,3 +1,18 @@ ## wiki -### [vue](./vue/index.md) \ No newline at end of file +### 语法系列教程 + +* [CSS 篇](./css/index.md) +* [HTML 篇](./html/index.md) +* [Javascript 篇](./javascript/index.md) + +### 前端框架 + +* [vue系列](./vue/index.md) +* [react系列](./react/index.md) + +

+ +## 挨踢词典 + +### [职位名词解释](./dictionary/job.md) \ No newline at end of file diff --git "a/wiki/javascript/WebAssembly\347\232\204\344\273\212\347\224\237\346\235\245\344\270\226.md" "b/wiki/javascript/WebAssembly\347\232\204\344\273\212\347\224\237\346\235\245\344\270\226.md" new file mode 100644 index 0000000..bef09b9 --- /dev/null +++ "b/wiki/javascript/WebAssembly\347\232\204\344\273\212\347\224\237\346\235\245\344\270\226.md" @@ -0,0 +1,95 @@ +# WebAssembly的今世来生 + +> 作者：[Lin Clark](http://code-cartoons.com/) +> 英文原文：[Where is WebAssembly now and what’s next?](https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/) + +本文是WebAssembly系列的第六篇文章，如果你没有阅读过之前的文章，建议先从[这里开始阅读](https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/) + +在2月28日，四大主流浏览器厂商宣布[WebAssembly的核心已经完成](https://lists.w3.org/Archives/Public/public-webassembly/2017Feb/0002.html)，并提供一个浏览器已经开始装载的稳定的初始版本。 + +![enter image description here](http://7xqj3u.com1.z0.glb.clouddn.com/webassembly601500.png) + +它提供了一个浏览器可以运行的稳定的内核。这个内核并不包括社区计划的所有的功能，但它足以使WebAssembly快速和可用。 + +有了这个，开发者可以开始发布WebAssembly代码了。对于早期的浏览器版本，开发者可以上传一个asm.js版本的代码。因为asm.js是JavaScript的一个子集，任何JS引擎都可以运行它。通过Emscripten，你可以将同一个应用编译为WebAssembly和asm.js。 + +即使在最初的版本中，WebAssembly也可以运行很快。但是，通过修复和增加新功能可以使WebAssembly变得更快。 + +## 提升WebAssembly在浏览器中的性能 + +一些速度上的提升讲来自于浏览器引擎对于WebAssembly支持上的提升。浏览器厂商在独立处理这些问题。 + +### JS和WebAssembly之间更快的函数调用 + +目前，在JS代码中调用WebAssembly函数比它需要的要慢，那是因为，它必须做一些所谓的“蹦床”。JIT不知道如何直接处理WebAssembly，所以它必须通过WebAssembly路由到某处。这个引擎本身是一小段代码，它设置为运行优化后的WebAssembly代码。 + +![enter image description here](http://7xqj3u.com1.z0.glb.clouddn.com/webassembly602500.png) + +这可能比如果JIT知道如何直接处理它的速度慢100倍。 + +如果你将一个独立的大任务传递到WebAssembly模块，你不会注意到这个性能消耗。但是如果你在WebAssembly与JS之间反复调用（就像你处理小任务似的），那么，这个性能消耗是显而易见的。 + +### 更快的加载时间 + +JIT必须在更快的加载时间和更快的执行时间之间进行权衡。如果你在编译和提前优化上花费很多时间，这加快了执行速度，但它减慢了启动速度。 + +有很多正在进行的工作去平衡前期的编译工作（确保在代码执行的时候没有Jank）。事实上，绝大部分代码并不值得花足够的时间去优化它。 + +由于WebAssembly不需要推测将要使用的类型，因此引擎不必担心在运行时监听类型。这为它们提供了更多的选项，例如将编译与执行并行。 + +此外，近期添加的JavaScript API将允许WebAssembly的流式编译。这意味着引擎在字节仍在加载的时候就开始编译。 + +在火狐浏览器中，我们正在开发一个双编译系统。一个编译器将提前运行，并在代码优化方面做的相当不错。当运行代码时，另一个编译器将在后台进行优化，完全优化后的代码版本将在准备就绪时进行交换。 + +## 在规范中添加post-MVP功能 + +WebAssembly的目标之一就是制定小代码块和测试方式，而不是设计前面的一切。 + +这意味着有很多期望的功能，但并不是100%都经过深思熟虑。它们将必须通过规范的流程，所有的浏览器厂商都已经积极参与了。 + +这些功能称为未来功能。我将介绍其中一小部分。 + +### 直接使用DOM + +目前，没有办法与DOM交互。这意味着你不能像element.innerHTML那样在WebAssembly中更新一个节点。 + +相反，你必须通过JS去设置值，并将值传递回JavaScript的调用者。另一方面，可以在WebAssembly内调用JavaScript函数——JavaScript和WebAssembly函数都可以在WebAssembly模块中的引入。 + +![enter image description here](http://7xqj3u.com1.z0.glb.clouddn.com/webassembly603500.png) + +无论哪种形式，通过JavaScript访问可能会比直接访问要慢。 WebAssembly的某些应用程序可能会被阻止，直到被解决。 + +### 共享内存并发 + +加速代码运行的一种方法是使代码的不同部分同时运行。这有时可能会造成Backfire，虽然由于线程之间通信的消耗要比一开始的任务进程更占用时间。 + +但是如果你可以在线程之间共享内存，它将会降低性能消耗。为此WebAssembly将使用JavaScript的新SharedFrayBuffer。一旦在浏览器中就位，工作组可以开始指定WebAssembly如何使用它们。 + +### 单指令、多数据（SIMD） + +如果你阅读其他帖子或观看有关WebAssembly的讲座，您可能会听到SIMD支持。它代表单指令，多数据。这是并行运行的另一种方式。 + +SIMD的使用可以获取大的数据结构，例如不同数目的向量，并且同时将相同的指令应用于不同的部分。这样，它可以大大加快各种复杂计算的游戏或VR的运行速度。 + +这对于一般的网络应用开发者来说并不是特别重要。但对于使用多媒体的开发人员来说非常重要，例如游戏开发者。 + +### 异常处理 + +许多语言像C++一样使用异常处理。但是，异常尚未指定为WebAssembly的一部分。 + +如果你使用Emscripten编译代码，它将模拟一些编译优化级别的异常处理。这是很慢，但你可以使用[DISABLE_EXCEPTION_CATCHING](https://kripken.github.io/emscripten-site/docs/optimizing/Optimizing-Code.html#c-exceptions)标记来关闭它。 + +一旦在WebAssembly本地处理了异常，这种仿真就不是必需的。 + +### 其他改进 + +未来的某些功能不会影响性能，但会使开发人员更容易使用WebAssembly。 + +* **源码开发工具**：目前，在浏览器中调试WebAssembly就像调试原始汇编。很少有开发人员可以将其源码映射到程序集。我们正在研究如何改进支持工具，以便开发人员可以调试其源码。 +* **垃圾回收**：如果您可以提前定义类型，那么您应该可以将代码转换为WebAssembly。所以使用类似TypeScript的代码应该可以编译到WebAssembly。目前唯一的困扰是，WebAssembly不知道如何与现有的垃圾收集器（如JS引擎中内置的垃圾收集器）进行交互。这个未来功能的想法是让WebAssembly使用一组低级GC类型和操作对内置GC进行访问。 +* **ES6模块集成**：浏览器目前正在添加对使用script标签加载JavaScript模块的支持。添加此功能后，即使URL指向WebAssembly模块，