FEX 技术周刊 - 2017/06/26
Google’s Flutter = React + Java Swing
Google has recently announced its new mobile UI framework called Flutter. It allows you to create native-ish mobile apps that run on Android, iOS and Google’s new Fuchsia operating system.
Techniques for decomposing React components
React components have a lot of power and flexibility. With so many tools at your disposal, it is incredibly easy for components to grow over time, become bloated and do too much. As with any other kind of programming, adhering to the single responsibility principle not only makes your components easier to maintain, but also allows for greater reuse. However, identifying how to separate the responsibilities of a large React component is not always easy. Here are three techniques to get you started, from the simplest to most advanced.
webpack 3: Official Release!!
虽然号称 98% 的用户不受影响，但实际上…
San - 一个传统的MVVM组件框架
百度推出的 MVVM 框架，甚至兼容 IE6. 如果拿车来比喻，我们想造的是一台陆巡。相比轿车甚至多数SUV，它没有那么好开，看不到很多 2.0T 的车尾灯；相比牧马人和 benz G，他越野能力和通过性也没那么强。但是它很可靠，能稳稳当当、舒适地带你到任何想去的地方。
12 原则由公有云 PaaS 的先驱 Heroku 于 2012 年提出（[原文参见 ），目的是告诉开发者如何利用云平台提供的便利来开发更具可靠性和扩展性、更加易于维护的云原生应用。距离 12 原则的提出已有五年之久，12 原则的有些细节可能已经不那么跟得上时代，也有人批评 12 原则的提出从一开始就有过于依赖 Heroku 自身特性的倾向，不过不管怎么说，12 原则依旧是业界最为系统的云原生应用开发指南，我们可以把它作为一个非常有力的参考，但是也千万不要教条。
随着移动化联网浪潮的汹涌而来与浏览器性能的提升，iOS、Android、Web 等前端开发技术各领风骚，大前端的概念也日渐成为某种共识。虽然具体的代码实现、使用的技术不同，但是 Android、iOS 以及 Web 乃至于 React Native 等开发中，我们需要解决的问题、能够用到的架构设计模式都是可以相互借鉴的。 在我们从某个领域迁移到其他领域时，我们能很方便地知道应该学习些什么，不同的技术、工具他们的职责是什么，应该选择怎样的架构或者设计模式。
榜单排序依据：1.项目开源 2.github上该项目的star个数 3.开发团队、作者的实力
An inside look at Quantum DOM Scheduling
Quantum DOM: Scheduling is a significant piece of Project Quantum, which focuses on making Firefox more responsive, especially when lots of tabs are open. In this article, we’ll describe problems we identified in multi-tab browsing, the solutions we figured out, the current status of Quantum DOM, and opportunities for contribution to the project. 另附：Powerful New Additions to the CSS Grid Inspector in Firefox Nightly
A new approach to text rendering
In Atom 1.19, we’re landing a complete rewrite of the text editor’s DOM interaction layer that improves rendering performance and simplifies the code. Prompted by the availability of some valuable new DOM APIs with the upgrade to Electron 1.6, we decided to start over from the beginning and take a critical look at the structure and performance every aspect of our DOM interaction.
Connect: behind the front-end experience
In this blog post, we’ll describe how we used several next-generation web technologies to bring Connect to life, and walk through some of the finer technical details (and excitement!) on our front-end journey.
Eventually I began understanding the idea of functions as values, that could be written inline, and passed to other functions as options. A callback was essentially a ‘what to do next’ action. I understood callbacks, and learned common async patterns. I liked learning a lot about functions, scope, and closures. I used, but never liked callbacks: a nagging doubt said this is the VMs job, not the programmers.
What Does a Well-Documented CSS Codebase Look Like?
A well-documented CSS codebase enforces consistency, boosts maintainability, and helps the team to build a shared vocabulary. So, here we go! Let’s examine the 4 big signs of a well-documented CSS codebase: CSS Tech Stack & Toolchain; CSS Conventions; CSS Architecture; CSS Component Descriptions and Examples.
The State of Angular and the Due Date of Version 5
In this article, we will take a high level overview of the 4.x.x versions, see the scheduling of the upcoming versions, discover the due date of the new Angular baby — Version 5, and we will review on two more surprises that are provided by Angular.
Site Speed Monitoring in A/B Testing and Feature Ramp-up
Predicting site speed impact of a feature rollout is a difficult engineering problem, particularly at scale. We are ramping hundreds of changes simultaneously through A/B testing. When ramping a feature into production, how can developers gain visibility into the site speed impact? Likewise, when a performance optimization is enabled in production, how can the developer quantify the benefit? In addition, how can performance degradation be detected at an early stage of feature ramp-up, before the impact spreads out to a larger audience? In this blog, we share our experiences and solutions here at LinkedIn.
Evolution of Dropbox’s Edge Network
Since launching Magic Pocket last year, we’ve been storing and serving more than 90 percent of our users’ data on our own custom-built infrastructure, which has helped us to be more efficient and improved performance for our users globally.
Content Popularity for Open Connect
There are many reasons why Netflix cares about the popularity of our TV shows and movies. On the Open Connect Content Delivery team, we predict content popularity to maximize our infrastructure efficiency. From the Content Delivery perspective, we view popularity as the number of times a piece of content is watched. We compute it by dividing total bytes streamed from this asset by the size in bytes of the asset.
Designing The Perfect Accordion
Design patterns can be extremely helpful, mostly because they save time and get us better results, faster. This series of articles is a summary of observations and experiments made throughout the time. Tighten up your seat belts: in this new series of articles on SmashingMag, we’ll look into examples of everything from carousels to filters, calculators, charts, timelines, maps, multi-column tables, almighty pricing plans all the way to seating selection in airline and cinema websites. But before we head off to complex interface problems, let’s start with something seemingly simple and obvious: an accordion.
10 Tips On Typography in Web Design
More than 95% percent of information on the web is in the form of written language. Good typography makes the act of reading effortless, while poor typography turns users off. Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance. In this article, I will provide a set of rules that help you improve readability and legibility of your text content.
Tabs, spaces and your salary - how is it really?
This blog post is my attempt to shed some light into the issue. The original article encouraged people to explore the data for themselves and this is precisely what I did. So I’d like to invite you to follow me through a little data science detective story and a deep dive into the data from the Stack Overflow survey. You’ll see that tabs and spaces are not what they seem. Spoiler: your salary has more to do with the type of company and the environment you work in rather than what type of indentation you use.
Why use SemVer?
npm’s documentation recommends that you use semantic versioning, which we also call semver, but it doesn’t explain why you’d use SemVer in the first place. This post is a quick overview of SemVer and why it’s a good idea.
Mikeal Rogers: Node.js Will Overtake Java Within a Year
Mikeal Rogers has been with the Node.js Foundation since day one. Rogers’ main contribution, though, is organization and coordination within the Node.js open source community — particularly in scaling governance and processes as the project has accelerated from a dozen early contributors to many hundreds. Rogers spoke with The New Stack to talk about his experience getting started in the open source world, working at the Node.js Foundation and becoming an open source governance principals guru.
A self-constructing web app framework powered by a self-driving DOM. Cell has one and only one design goal: Easy.
Spected is a low level validation library for validating objects against defined validation rules. Framework specific validation libraries can be built upon spected, leveraging the spected appraoch of separating the speciific input from any validation. Furthermore it can be used to verify the validity deeply nested objects, f.e. server side validation of data or client side validation of JSON objects. Spected can also be used to validate Form inputs etc.
Flight - The best way to build animation compositions for React
Design and compose a component to start with, a component to end with, and Flight will take it from there. Flight tries to be for React what Principle is for Sketch compositions - the fastest, most friction free way to compose and an effortless way to animate an idea, an interaction, or a short movie-like composition in a self-contained widget (a React component after all).
Flexible date picker for React
no dependencies – fully customizable – ARIA support – localizable – less than 10KB
Responsive React grid system built with styled-components.
Stardust: GPU-based Visualization Library
Stardust is a library for rendering information visualizations with GPU (WebGL). Stardust provides an easy-to-use and familiar API for defining marks and binding data to them. With Stardust, you can render tens of thousands of markers and animate them in real time without the hassle of managing WebGL shaders and buffers.
Visual and textual functional programming language with a focus on productivity, collaboration and development ergonomics.
Just-add-water CSS animations. 另附：Gallery Animate CSS.
mini.css is a lightweight CSS framework (under 7KB gzipped) designed with mobile devices and modern browsers in mind. Responsiveness, ease of use and customization are some of the main features of the framework, while accessibility and extensive documentation are some of the secondary focuses of the project. The framework is written using Sass, while most of its components are based on Flexbox.
Pasition - Path Transition with little JS code, render to anywhere. 类似的库 https://github.com/veltman/flubber
Redbird Reverse Proxy
Handling dynamic virtual hosts, load balancing, proxying web sockets and SSL encryption should be easy and robust. With redbird you get a complete library to build dynamic reverse proxies with the speed and robustness of http-proxy. This light-weight package includes everything you need for easy reverse routing of your applications. Great for routing many applications from different domains in one single host, handling SSL with ease, etc.
Get a full fake REST API with zero coding in less than 30 seconds (seriously). Created with <3 for front-end developers who need a quick back-end for prototyping and mocking.
Syntax Highlighting as a Service
Photon is a powerful, multiplatform, highly customizable and free syntax highlighter for the modern web.
Get Ready for Web Bluetooth!
With the new Web Bluetooth API now available in Chrome Browsers 56+ and Opera 44+, as well as more recent Android browsers, the world of connected devices just got a little closer to realizing the promise of the Physical Web: “Walk up and use anything”.
Easy Machine Learning
New algorithm generates practical paper-folding patterns to produce any 3-D structure.
Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention. Codemod was developed at Facebook and released as open source. 附介绍：Refactor Code in Your Lunch Break: Getting Started with Codemods.
A Vue component that can render a filterable and sortable table. It aims to be very lightweight and easy to use.
Practical Node.js Book, 2nd Edition, Open-Sourced on GitHub
Making Practical Node.js current is a worthwhile aim but it’s not enough. The plan is to write it on GitHub, where you can follow along, comment, give me feedback, and through this collaboration I can ensure that the 2nd edition of Practical Node.js is even better than the first.
Why we’re betting against real-time team messaging
This post is the story of why we stopped using Slack. It’s also the story of how we had the (possibly) crazy idea that we could contribute something fundamentally different to an already cluttered team communication market - Twist. Something for teams like ours with the audacity to think that maybe there’s more to work than keeping up with group chat…
– THE END –