FDCon2018 - 第三届中国前端开发者大会


Introducing Git protocol version 2
Git protocol version 2, a major update of Git’s wire protocol (how clones, fetches and pushes are communicated between clients and servers). This update removes one of the most inefficient parts of the Git protocol and fixes an extensibility bottleneck, unblocking the path to more wire protocol improvements in the future. The protocol version 2 spec can be found here . The main improvements are: Server-side filtering of references; Easy extensibility for new features like ref-in-want and fetching and pushing symrefs Simplified client handling of the http transport.

What if JavaScript wins?
JavaScript is now part of the toolkit of most working developers. What if network effects push it into being the first-ever truly dominant programming language?

Web performance made easy
The web has made great progress in enabling fast experiences, but building a fast site today isn’t trivial. At Google, we analyze a lot of sites and have learned what makes them load quickly and run smoothly. In this talk, Ewa Gasperowicz and Addy Osmani show you how to find and fix the most common web performance bottlenecks to improve your UX by using tools like Lighthouse and DevTools, and discover the latest browser APIs (e.g. Service Workers, Async Images, Fetch Priorities) to get more control over your loading experience. 另附:Using Lighthouse To Improve Page Load PerformanceFirst Input Delay: A New Web Interactivity Metric.

First Look: Angular Ivy - Angular’s new rendering pipeline and view engine
We’re going to take a look at what Ivy is, how it works, and how you can stay up to date on its progress. Just a caveat: Ivy is still in early stages of being actively developed, so this article is subject to change. Okay, let’s get to it!

Modern Web Stack—Rails 5 API + ActiveAdmin + Create React App on Heroku
Rails is an incredible framework, but modern web development has moved to the front-end, meaning sometimes you don’t need all the bulk of the asset pipeline and the templating system. In Rails 5 you can now create an API-only Rails app, meaning you can build your front-end however you like—using Create React App. 另附:Create React App Parcel

Debugging Modern Web Applications
Building and debugging modern JavaScript applications in Firefox DevTools just took a quantum leap forward. In collaboration with Logan Smyth, Tech Lead for Babel, we leveled up the debugger’s source map support to let you inspect the code that you actually wrote. Combined with the ongoing initiative to offer first-class JS framework support across all our devtools, this will boost productivity for modern web app developers. 另附:What’s new in Chrome DevTools.

Page Transitions for Everyone
Animation matters. It can be used to improve the user experience. On the web, most of the effort used to improve the experience is in structure, visual design, or even the performance of the site. There are some elements you can swipe around here and there, but that’s about it. A boring remnant of the time when the web was simply used to navigate through a bunch of text pages later upgraded with some sliding text.

A Strategy Guide To CSS Custom Properties
Custom properties have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components. I’m not going to focus on the syntax and how they work (for that I recommend you read “It’s Time To Start Using Custom Properties”). Instead, I want to take a deeper look at strategies for getting the most out of CSS Custom Properties.

Clean Node
This article is first of a three-part series discussing this exact topic and suggesting potential solutions. Each article will use a test-first approach, either unit or end-to-end: This first article will set a common ground: quick and dirty version with end to end tests and discussing common mistakes, general opinions and misconceptions; The second article will refactor the “quick and dirty” version with unit tests and a layered architecture; The fourth article will refactor the code using the Clean Architecture and unit tests.

The http headers we don’t want
Let’s look at the unnecessary headers and see why we don’t need them, and what we can do about it.

Building Services at Airbnb, Part 2
The second in a series on scaling service development, this article looks at some of the key tooling that supports the new Services Oriented Architecture at Airbnb.

Performance Impact of Removing OOBGC
GitHub used an Out of Band Garbage Collector (OOBGC) in production. Since removing it, we decreased CPU time across our production machines by 10%. Let’s talk about what an OOBGC is, when to use it, and when not to use it. Then follow up with some statistics about the impact of removing it from GitHub’s stack.

Full Cycle Developers at Netflix — Operate What You Build
Fast forward to 2018. Netflix has grown to 125M global members enjoying 140M+ hours of viewing per day. We’ve invested significantly in improving the development and operations story for our engineering teams. Along the way we’ve experimented with many approaches to building and operating our services. We’d like to share one approach, including its pros and cons, that is relatively common within Netflix. We hope that sharing our experiences inspires others to debate the alternatives and learn from our journey.

AI and Compute
Three factors drive the advance of AI: algorithmic innovation, data (which can be either supervised data or interactive environments), and the amount of compute available for training. Algorithmic innovation and data are difficult to track, but compute is unusually quantifiable, providing an opportunity to measure one input to AI progress.

Algorithms Behind Modern Storage Systems
This article takes a closer look at two storage system design approaches used in a majority of modern databases—read-optimized B-trees1 and write-optimized LSM (log-structured merge)-trees5—and describes their use cases and tradeoffs.

Big Data File Formats Demystified
The big data community has basically settled on three optimized file formats for use in Hadoop clusters: Optimized Row Columnar (ORC), Avro, and Parquet. While these file formats share some similarities, each of them are unique and bring their own relative advantages and disadvantages.

Dynamic Programming – 7 Steps to Solve any DP Interview Problem
Many tech companies like to ask DP questions in their interviews. While we can debate whether they’re effective in evaluating someone’s ability to perform in an engineering role, DP continues to be an area that engineers trip on their way to finding a job that they love.

Docker is the dangerous gamble which we will regret
Every time I criticize Docker I get angry responses. When I wrote Why would anyone choose Docker over fat binaries? 6 months ago I saw some very intelligent responses on Hacker News, but also some angry ones. So in writing this current essay, I am trying to answer some of the criticism I expect to get in the future.

Tarballs, the ultimate container image format
On your Guix machine, you run: guix pack -S /opt/gnu/bin=bin guile gnutls guile-json , and you get a tarball containing your favorite programming language implementation and a couple of libraries, where /opt/gnu/bin is a symlink to the bin directory containing, in this case, the guile command. Add -f docker and, instead of a tarball, you get an image in the Docker format that you can pass to docker load on any machine where Docker is installed. Overall that’s a relatively easy way to share software stacks with machines that do not run Guix.

Safe ways to do things in bash
Bash has arrays and a safe mode, which may make it just about acceptable under safe coding practices, when used correctly.
另附:Shell Style Guide

The Zen of Erlang
语言爱好者可以学习:That’s the Zen of Erlang: building interactions first, making sure the worst that can happen is still okay. Then there will be few faults or failures in your system to make you nervous (and when it happens, you can introspect everything at run time!) You can sit back and relax.


Open Data Charter Principles – The Measurement Guide is out now!
We are pleased to announce the launch of our Open Data Charter Measurement Guide. The guide is a collaborative effort of the Charter’s Measurement and Accountability Working Group (MAWG). It analyses the Open Data Charter principles and how they are assessed based on current open government data measurement tools. Governments, civil society, journalists, and researchers may use it to better understand how they can measure open data activities according to the Charter principles.

Polymer 3.0
在 Google/IO 上正式发布,另附:Google力推的那些前端技术,最近都有哪些进展

The Front-End Tooling Survey 2018 - Results
Over 5,000 frontend developers took part in this survey we linked a few months ago. Here are the results on what tools and techniques devs are using right now.

TypeScript 2.9 RC
Support for symbols and numeric literals in keyof and mapped object types; import() types; Unconstrained type parameters are no longer assignable to object in strictNullChecks; keyof types include symbolic/numeric properties.

Nest 5: The official release 🚀 Node.js in 2018
Nest 5: A progressive Node.js framework for building efficient and scalable server-side applications. After a long road, the new major release is finally here and brings tons of improvements, new features, and several bug fixes. However, before diving into new things that have been shipped by this release, I would like to share my individual thoughts with you.

Hackable and configurable to the core, signale can be used for logging purposes, status reporting, as well as for handling the output rendering process of other node modules and applications.

The JavaScript data transformation and analysis toolkit inspired by Pandas and LINQ. Implemented in TypeScript, used in JavaScript ES5+ or TypeScript.

Bazel is an open-source build and test tool similar to Make, Maven, and Gradle. It uses a human-readable, high-level build language. Bazel supports projects in multiple languages and builds outputs for multiple platforms. Bazel supports large codebases across multiple repositories, and large numbers of users.

A robust Javascript library for capturing keyboard input. It has no dependencies.

A blazing fast deep object copier

A zero config JavaScript linter with support for Typescript, Flow, and React.

A rich interaction, lightweight, high performance UI library.

Vuestic Admin Dashboard
Responsive admin dashboard template built with Vue.js and Bootstrap 4.

Making Fuse free and Open Source
Fuse is a cross-platform mobile app development tool suite, supporting building Android and iOS applications. With Fuse you can build native mobile user interfaces using the easy to learn UX Markup language, and use JavaScript to add business logic.

Build your own (insert technology here)

Awesome Scalability
High Scalability, High Availability, High Stability, High Performance, and High Intelligence Back-End Design Patterns

Make Frontend Shit Again
We used to make websites because it was fun and at a point we lost the way. We need to make dumb shit! Make useless stuff; make the web fun again!

Flopstarter - A platform for bad ideas
Flopstarter is a real crowdfunding site. A platform for bad ideas. So far we have had hundreds of submissions to the site, all of them useless. All projects will be completed if funded.


We Are Designers By Nature
Our planet natural is rich with millions of samples of design, if you break it down into smaller components you will figure out more an of micro-designs. For me, that’s why I fall in love with the design, it’s the way of universe creation. Design principles are many, for example, Golden ratio. you can view the next video to learn more about golden ratio implementation in the universe around you.

Landing The Concept: Movie High-Concept Theory And UX Design
Steven Spielberg once famously said, “If a person can tell me the idea in 25 words or less, it’s going to make a pretty good movie.” What if the same were true for websites? Do sites that explain their ‘concept’ in a simple way have a better shot at mass-appeal with users? If we look at the super simple layout of Google’s homepage, for example, it gives users a single clear message about its concept equally as well as the Jaws movie poster: Being aware of the importance of ‘high-concept’ allows us — as designers — to really focus on user’s initial impressions.

Apple News — a usability case study
As a frequent user of the Apple News app, I liked it for a whole year. It wasn’t amazing, but it got the job done, and I was too lazy to download a new app. But then suddenly, two months ago, it just became too much. Waking up every day and seeing those sad and negative headlines, it wasn’t the best way to start the day. Then, I decided not to check the news in the morning and do it around noon, but sometimes it would just ruin my lunch. Later, I changed it for the nighttime, and I couldn’t sleep because I felt like the world was going to end.

Design for Humans Or 14 Principles of Good Design
Principles of Good Design has been taken from the book Hackers and Painters. The essay inspired me to explore about Design and look around to understand how things work. This article is a result of the ideas I gathered over the last one year.

Exploring the Gestalt Principles of Design
There are six individual principles commonly associated with gestalt theory: similarity, continuation, closure, proximity, figure/ground, and symmetry & order (also called prägnanz). There are also some additional, newer principles sometimes associated with gestalt, such as common fate.

Investigating User Experience with Natural Language Analysis
User experience and customer support are integral to every company’s success. But it’s not easy to understand what users are thinking or how they are feeling, even when you read every single user message that comes in through feedback forms or customer support software. With Natural Language Processing and Machine Learning techniques it becomes somewhat easier to understand trends in user sentiment, main topics discussed, and detect anomalies in user message data. 另附:Smart Compose: Using Neural Networks to Help Write Emails



Introducing Surface Hub 2
Turn any space into a teamwork space. Move beyond meetings, to true teaming. Teams come in all shapes and sizes. They can be local or spread across the globe. People are your biggest investment – and your most valuable asset. To transform from collaboration to true teamwork, you need to invest in tools that bring out their best in the conference room, in a team space, in any space.

Helping Teams Get Started
Two weeks ago, we released Stack Overflow for Teams—a way for teams to share information privately. A ton of work over the last year has been done to release this exciting new product. This post goes into how we designed the custom Team onboarding experience and how we see this feature possibly expanding in the future.

另附:做了 3 年企业级 SaaS,我收获的 10 点心得