Node 地下铁沙龙 - 12.03 广州


Keyframes: Delivering scalable, high-quality animations to mobile clients
Keyframes, a library that is able to export and play back After Effects animations while addressing the specific set of constraints we faced. Since the first iteration, we’ve learned more about developing animations, worked to improve the library, and applied it to other products at Facebook. Today, we’re excited to open-source and share this library more broadly, so that others can work together to build more delightful products.

Open Source Week at SitePoint
It’s Open Source Week at SitePoint! All week we’re publishing articles focused on everything Open Source, Free Software and Community, so keep checking the OSW tag for the latest updates.

Why I’m Thankful for JS Fatigue. I know you’re sick of those words, but this is different
这位大侠近期还有另一篇关于 Native App 的未来的文章 Why Native Apps Really are Doomed: Native Apps are Doomed pt 2

How we switched our template rendering engine to React
In 2015, we made the decision to migrate our legacy web experience to React to keep up with our fast growth and perform better with increased developer velocity. Ultimately, we found React rendered faster than our previous template engine, had fewer obstacles to iterating on features and had a large developer community. Expanding on a previous post which covered migrating Pinner profiles to React, here we’ll dive deeper into migrating the web infrastructure to serve React pages, which required moving a huge amount of code without breaking the site.

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends
From CSS methodologies such as BEM and Atomic CSS through to programmatically encapsulated CSS modules, many are doing their best to sidestep or otherwise suppress these features. This gives developers more control over their CSS, but only an autocratic sort of control based on frequent intervention. I’m going to revisit inheritance, the cascade and scope here with respect to modular interface design. I aim to show you how to leverage these features so that your CSS code becomes more concise and self-regulating, and your interface more easily extensible.

Insisting on Core Development Principles
The web community talks a lot about best practices in design and development: methodologies that are key to reaching and retaining users, considerate design habits, and areas that we as a community should focus on. But let’s be honest—there are a lot of areas to focus on. We need to put users first, content first, and mobile first. We need to design for accessibility, performance, and empathy. We need to tune and test our work across many devices and browsers.

Weblit - Introducing Custom Elements
We’re happy to announce the addition of the Custom Elements API to WebKit. With this API, authors can create usable components by defining their own HTML elements without relying on a JS framework. 看来各大浏览器内核均开始支持自定义元素了。

GitLab 8.14 Released with Time Tracking Beta and Chat Commands
You’re doing code review of a new feature and wonder how it’ll actually feel, look and work when it’s live. Yesterday, you had to sacrifice your local development environment’s state, checkout the remote branch, run migrations, and then spin up the entire development environment. Today, you can just go to GitLab and click the link in the merge request to play with a fully functional, live environment.

Vuex 2.0 源码分析
当我们用 Vue.js 开发一个中到大型的单页应用时,经常会遇到如下问题:如何让多个 Vue 组件共享状态;Vue 组件间如何通讯,通常,在项目不是很复杂的时候,我们会利用全局事件总线 (global event bus)解决,但是随着复杂度的提升,这些代码将变的难以维护。因此,我们需要一种更加好用的解决方案,于是,Vuex 诞生了。本文并不打算讲官网已有的内容,而会通过源码分析的方式,让同学们从另外一个角度认识和理解 Vuex 2.0。Vuex 的设计思想受到了 Flux,Redux 和 The Elm Architecture 的启发,它的实现又十分巧妙,和 Vue.js 配合相得益彰,下面就让我们一起来看它的实现吧。

最近因为业务需要需要尽快做一个系统并部署上线。作为前端负责人虽然时间很赶,但是也只好硬着头皮上了。考虑到项目健壮性、紧急性以及后期维护,最后的选择是用dva-cli做手脚架,antd作为UI库来做这个系统。 并且,由于考虑到按照当前情况,前期后端接口不太可能跟得上前端进度,所以此时数据mock就显得非常重要了。并且作为一个前后端彻底分离的项目,rap在这里可以充分发挥其作用——数据mock、接口协定、文档生成。

SAM建议将图形用户界面底层的业务逻辑分为三个概念:操作(Action)、模型(Model)和状态(State)。操作向模型供值,仅模型可以接受这样的值。一旦接受,将通过状态验证所有订阅方,尤其是视图(视图可看作“状态的具体呈现”)已经获得通知。每个事件可作为“步骤”进行处理,步骤可由提议/接受/学习流所组成。这种概念为事件排序和效果(如后端API调用)的处理提供了一个坚实的基础。SAM的使用不依赖具体框架,共同打造这一模式的很多社区成员也陆续开发了一系列开发者工具,并通过不同框架编写了大量范例代码,所用框架涵盖了从Vanilla JavaScript到AWS Lambda等诸多类型。本文将介绍我们在实现SAM模式的过程中学到的经验,专注于在前端架构中,能对最终交付成果与现代化最终用户应用程序的可维护性产生直接影响的。



Debugging The Web - Chrome Dev Summit 2016
Learn the state of the art in debugging using Chrome dev tools with Paul Irish - all you need to know to expand your toolbox.

How Passwordless Authentication Works
Security is a key aspect of software development. Securing your authentication and authorization process can’t be overemphasized. Over the years, developers have come up with different strategies for handling authentication in a way that provides maximum security for the user. One of the latest strategies is authenticating without passwords. Popular applications like Medium, Slack, and WhatsApp widely support and encourage passwordless authentication. In this article, you’ll get to understand the nitty-gritty of passwordless authentication. 另附:Build and Authenticate a Node Js App with JSON Web Tokens

Writing efficient JavaScript
This entry describes simple techniques to fulfill the JavaScript compiler optimization process which results in faster running code. Especially in games you immediately notice frame drops and when the garbage collector has to hit in with a big stack of work to do.

Polyfill JavaScript Only When You Need To
Write future-proof and efficient JavaScript for modern browsers. Let Polyfill.io handle older browsers. Don’t do the extra HTTP Request if you don’t have to.

From Raw Data to Data Science: Adding Structure to Unstructured Data to Support Product Development
Data science is fast becoming a critical skill for developers and managers across industries, and it looks like a lot of fun as well. But it’s pretty complicated - there are a lot of engineering and analytical options to navigate, and it’s hard to know if you’re doing it right or where the bear traps lie. In this series we explore ways of making sense of data science - understanding where it’s needed and where it’s not, and how to make it an asset for you, from people who’ve been there and done it.

Nginx 配置简述
来自小胡子哥的 Nginx 配置科普

Disque 是 Redis 之父 Salvatore Sanfilippo 新开源的一个分布式内存消息队列。本文是作者编写的该软件设计和使用的说明。Disque 是一个正在进行的实验性的,分布式内存消息代理。 它的目标是捕获“ Redis 作为消息队列”的用例,通常使用阻塞列表操作来实现。将其移植到 adhoc,自包含的,可扩展的,容错的设计,但在简单性,性能和实现方面仍然类似于 Redis, 并使用 C 语言实现非阻塞服务器。


Java EE即将死去,毫无疑问
应用开发的风格这几年一直在变化,而微服务变得越来越流行。大公司把大型应用拆分成可以单独部署的小型应用,这些小型应用被部署在云端的容器里。开源微服务框架Light Java为这些运行在容器里的微服务提供了很多特性,它支持设计驱动,开发者只需要把注意力专注在业务逻辑上,剩下的事情可以由框架和DevOps流程来处理。


Riot.js — Simple and elegant component-based UI library
Riot is supported by all modern browsers and it does not require any additional polyfill. Riot brings custom tags to all modern browsers. Think React + Polymer but with enjoyable syntax and a small learning curve.

The XSS Game by Google
In this training program, you will learn to find and exploit XSS bugs. You’ll use this knowledge to confuse and infuriate your adversaries by preventing such bugs from happening in your applications.

Vue 2.1.0
还有一个 Vue 相关的框架 https://github.com/nuxt/nuxt.js A minimalistic framework for server-rendered Vue.js applications

The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests.

新书-深入 React 技术栈
本书除了详细阐述基本概念外,还会帮助你从了解 React 到熟悉其原理,从探索 Flux 应用架构的思想到精通 Redux 应用架构,帮助你思考 React 给前端界带来的价值,React 今天是一种思想,希望通过解读它,能够让读者有自学的能力。