FEX 技术周刊 - 2018/06/11
微信搜索『FEX』关注我们的公众号，及时获得最新资讯。
业界会议
WWDC 2018
https://developer.apple.com/wwdc/
附：MapKit JS brings Apple Maps to your website、Designing websites for the Apple WatchOS Breakpoint、SiriKit for iOS and watchOS、Apple Just Made Safari the Good Privacy Browser、开发者所需要知道的 WWDC 2018 新特性
深阅读
Microsoft + GitHub = Empowering Developers
https://blogs.microsoft.com/blog/2018/06/04/microsoft-github-empowering-developers/
We announced an agreement to acquire GitHub, the world’s leading software development platform. I want to share what this acquisition will mean for our industry and for developers. The era of the intelligent cloud and intelligent edge is upon us. Computing is becoming embedded in the world, with every part of our daily life and work and every aspect of our society and economy being transformed by digital technology. Developers are the builders of this new era, writing the world’s code. And GitHub is their home. 附：GitHub 创始人的 A bright future for GitHub、GitLab sees huge spike in project imports、GitLab Ultimate and Gold now free for education and open source、The Cost of Developers
You Probably Don’t Need Derived State
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
React 16.4 included a bugfix for getDerivedStateFromProps which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn’t work properly after the fix, we’re sorry for the churn. In this post, we will explain some common anti-patterns with derived state and our preferred alternatives.
10 Things I Regret About Node.js - Ryan Dahl - JSConf EU 2018
https://www.youtube.com/watch?v=M3BM9TB-8yA
It’s a great talk about Node and he also goes into some details about his new project Deno, a secure TypeScript runtime on V8. Here’s some of the things he regrets: dynamic languages are great for certain things. In a server though, you want things to be statically typed. (Probably why he wrote Deno in TypeScript and Go); design mistakes: didn’t stick with Promises in Node (in the beginning), keeping them could have sped up async/await development, security, Build system (GYP), package.json.
G6 2.0 开源发布
https://yuque.com/antv/blog/g6-2.0-release
G6 是 蚂蚁金服-AntV 旗下的针对关系数据的可视化引擎。从 2016 年 12 月，G6 立项至今，已经过去了 1 年半的时间。在过去的时光里，G6 直接或间接的支持了阿里经济体近一百个业务系统。期间获得过赞誉，也有吐槽，取得一定成就，也暴露过不少问题。半年前，我们结合真实业务需求和业内成熟框架的特点，以及自己内心的丁点不安分创新，开启了 G6 2.0 的开发工作，经过精心设计，以及与诸多业务方数月共同打磨。另附：数据可视化的1996-2018
宋小菜生鲜 B2B 的前端团队搭建
https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651228902&idx=1&sn=33543a06f136f15eb8f671dd4f3cbeb9
产品的移动化，这将是我们展开这篇文章的背景，我们会先了解小菜的产品托管在哪些端上，然后感受这些端带来的挑战，最后是我们面对这些挑战所采取的策略，以及整个小菜前端团队历练后的技术成长和沉淀，和我们对于自己的一个评估和对未来的展望，本文将采用最通俗易懂的方式陈述，会略有繁琐，但力求对技术新人也足够友好。
Vue技术内幕
http://hcysun.me/vue-design/
逐行级别的 Vue 源码分析
百度十年，我从技术走到管理
https://mp.weixin.qq.com/s?__biz=MjM5NTM0NDI3Mg==&mid=2650337543&idx=1&sn=eb9c6c036ae7750b6d9195e49e8bdad6
技术要不要转管理，我非常认同一种判断原则——看看你的成就感来源于什么。另附大漠的：我在阿里的三年
The definitive guide to React Material
https://blog.logrocket.com/the-definitive-guide-to-react-material-d730c8a3e8ba
In this article, we’ll explore how to create React apps with a Material Design theme. There are various libraries that help with this but for this article, the material-ui library will be used.
How to start with variable fonts on the web
https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html
This article will give you a primer on variable fonts on the web and guide you through your first steps by answering the following questions: What are variable fonts? What can you do with them? Isn’t stretching a font a bad thing to do? What advantages do variable fonts bring? How do you use them on the web? What are some potential pitfalls to look out for? When should you start using variable fonts?
Level up your CSS selector skills
https://blog.logrocket.com/level-up-your-css-selector-skills-5d7bb45ddd37
I invite you to join me as I take a look at various types of CSS selectors. How many of these are you already using in your day-to-day work? I’d be interested to know. Ready to level up your CSS selector skills? OK then, let’s go.
Combining the Powers of SEM and BIO for Improving CSS
https://css-tricks.com/combining-the-powers-of-sem-and-bio-for-improving-css/
If your Sass code looks like that, you can definitely improve your code with SEM & BIO, a CSS technique I’ll introduce you to now! In this article, I am going to use the code example below to explain how SEM and BIO works and how they can help enhance your CSS strategy.
Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers
https://www.smashingmagazine.com/2018/06/nodejs-tools-techniques-performance-servers/
If you’ve been building anything with Node.js for long enough, then you’ve no doubt experienced the pain of unexpected speed issues. JavaScript is an evented, asynchronous language. That can make reasoning about performance tricky, as will become apparent. The surging popularity of Node.js has exposed the need for tooling, techniques and thinking suited to the constraints of server-side JavaScript. When it comes to performance, what works in the browser doesn’t necessarily suit Node.js. So, how do we make sure a Node.js implementation is fast and fit for purpose? Let’s walk through a hands-on example.
Overscripted! Digging into JavaScript execution at scale
https://hacks.mozilla.org/2018/06/overscripted-digging-into-javascript-execution-at-scale/
we set out to explore the unseen or otherwise not obvious series of JavaScript execution events that are triggered once a user visits a webpage, and all the first- and third-party events that are set in motion when people retrieve content. To help enable more exploration and analysis, we are providing our full set of data about JavaScript executions open source. The following sections will introduce the data set, how it was collected and the decisions made along the way. We’ll share examples of insights we’ve discovered and we’ll provide information on how to participate in the associated “Overscripted Web: A Mozilla Data Analysis Challenge”, which we’ve launched today with Mozilla’s Open Innovation Team.
Intelligent Tracking Prevention 2.0
https://webkit.org/blog/8311/intelligent-tracking-prevention-2-0/
Today we’re happy to bring you Intelligent Tracking Prevention 2.0, or ITP 2.0. It builds upon ITP 1.0, which we released last year, and ITP 1.1, which was released in March, adding the Storage Access API. 另附：Chrome - Fresher service workers, by default
State of IPv6 Deployment 2018
https://www.internetsociety.org/resources/2018/state-of-ipv6-deployment-2018/
Over 25% of all Internet-connected networks advertise IPv6 connectivity. Google reports 49 countries deliver more than 5% of traffic over IPv6, with new countries joining all the time. Google reports 24 countries whose IPv6 traffic exceeds 15%. 另附：Facebook - How IPv6 deployment is growing in U.S. and other countries、Celebrating World IPv6 Launch Day (And Six Years of IPv6) at LinkedIn
AI at Google: our principles
https://blog.google/topics/ai/ai-principles/
We recognize that such powerful technology raises equally powerful questions about its use. How AI is developed and used will have a significant impact on society for many years to come. As a leader in AI, we feel a deep responsibility to get this right. So today, we’re announcing seven principles to guide our work going forward. These are not theoretical concepts; they are concrete standards that will actively govern our research and product development and will impact our business decisions. We acknowledge that this area is dynamic and evolving, and we will approach our work with humility, a commitment to internal and external engagement, and a willingness to adapt our approach as we learn over time. Everything You Need To Know About Google’s Deepmind AI Algorithm、Learn about AI with these books, videos, and tutorials
Lessons from Building Observability Tools at Netflix
https://medium.com/netflix-techblog/lessons-from-building-observability-tools-at-netflix-7cfafed6ab17
We tackle that challenge by developing observability tools and infrastructure to measure customers’ experiences and analyze those measurements to derive meaningful insights and higher-level conclusions from raw data. By observability, we mean analysis of logs, traces, and metrics. In this post, we share the following lessons we have learned.
StatePoint Liquid Cooling System: A new, more efficient way to cool a data center
https://code.facebook.com/posts/1221779261291831/statepoint-liquid-cooling-system-a-new-more-efficient-way-to-cool-a-data-center/
Facebook data centers are some of the most advanced energy- and water-efficient facilities in the world. By cooling our facilities with outdoor air and using efficient cooling strategies such as our direct evaporative cooling system, our data centers use 50 percent less water than a typical data center. To achieve these results, we employ a variety of cooling strategies tailored to the specific environmental considerations for each data center. 另附：Under the sea, Microsoft tests a datacenter that’s quick to deploy, could provide internet connectivity for years.
Food Discovery with Uber Eats: Building a Query Understanding Engine
https://eng.uber.com/uber-eats-query-understanding/
In this two-part article series, we will look under the hood of the Uber Eats app and walk through the efforts we take to aid eaters in their decision-making process. This first part of the series focuses on building a query understanding engine for Uber Eats through an in-house food knowledge graph, and the related work done to help understand explicit eater intent through representation learning-based query expansion.
Go for Industrial Programming
https://peter.bourgon.org/go-for-industrial-programming/
I’m speaking today about programming in an industrial context. By that I mean: in a startup or corporate environment; within a team where engineers come and go; on code that outlives any single engineer; and serving highly mutable business requirements. This describes my work environments for most recent memory. I suspect it does for a lot of you, too. And the best advice for Go in this context is sometimes different than for Go in personal projects, or large open-source libraries, and so on.
新鲜货
WCAG 2.1 is a W3C Recommendation
https://www.w3.org/blog/2018/06/wcag21-rec/
Web Content Accessibility Guidelines (WCAG) 2.1 is now a W3C Recommendation. This is an evolution of W3C’s accessibility guidance, including expansion of mobile, low vision, and cognitive and learning provisions. It maintains W3C’s accessibility guidance, while maintaining W3C’s standard of implementable, technology neutral, objectively testable and universally applicable accessibility guidance. 另附：WebDriver is now a W3C Recommendation
Lottie
https://github.com/airbnb/lottie-web
Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!
Paper.js
http://paperjs.org/
Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
JSUI
https://github.com/kitze/JSUI
A tool for visually organizing, creating, and managing JavaScript projects. It doesn’t matter if it’s frontend or a backend app, or what framework it’s using. If it has a package.json, it belongs here.
ml5js · Friendly Machine Learning For The Web
https://ml5js.org/
ml5.js aims to make machine learning accessible to a broad audience of artists, creative coders, and students. The library provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js with no other external dependencies.
LuminJS
https://lumin.rocks/
A JavaScript library to progressively highlight any text on a page. Great for when you want users to pay attention to some important text. It can also be used to show progress of a task − Read something while tasks are being completed.
react-typescript-cheatsheet
https://github.com/sw-yx/react-typescript-cheatsheet
a cheatsheet for react users using typescript with react for the first (or nth!) time
Yarn import now uses package-lock.json
https://yarnpkg.com/blog/2018/06/04/yarn-import-package-lock/
We are quite excited to announce that as of 1.7.0 yarn is able to import its dependency tree from npm’s package-lock.json natively, without external tools or clunky processes.
Verdaccio
https://www.verdaccio.org/
A lightweight private npm proxy registry
node-fetch
https://github.com/bitinn/node-fetch
A light-weight module that brings window.fetch to Node.js
Lemon
https://appalaszynski.github.io/lemon/#
Minimal and responsive CSS framework for fast building websites.
Pencil.js
https://github.com/GMartigny/pencil.js
Nice modular interactive 2D drawing library.
VJTools
https://github.com/vipshop/vjtools
The vip.com’s java coding standard, libraries and tools
Gource - a software version control visualization tool
http://gource.io/
Software projects are displayed by Gource as an animated tree with the root directory of the project at its centre. Directories appear as branches with files as leaves. Developers can be seen working on the tree at the times they contributed to the project. Gource includes built-in log generation support for Git, Mercurial, Bazaar and SVN. Gource can also parse logs produced by several third party tools for CVS repositories.
Puppeteer v1.5.0
https://pptr.dev/
Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.
WebRTC ipfs chat
https://ipfs.io/ipfs/QmNURh26yenpqK5hK3ahRZhQJsaUttumepjtRWiVZXhnN1/p/webrtc-ipfs-chat.html
WebRTC lets us do inter-browser real-time communication (with some small caveats) from JavaScript. By hosting a simple WebRTC application we should be able to make a “serverless” chatroom.
An overview of Visual Studio Code for front-end developers
https://medium.freecodecamp.org/an-overview-of-visual-studio-code-for-front-end-developers-49a4aa0771fb
The main purpose of this blog is not to compare different IDEs, but to discuss my experience with VSCode. So in this post, I will: show a brief introduction to VSCode; introduce the particular theme I’ve installed; discuss helpful extensions I use; show you how I leverage VSCode’s features to enhance my workflow. 另附：10 Must-have VS Code Extensions for JavaScript Developers
NGINX Unit 1.2 Available Now
https://www.nginx.com/blog/nginx-unit-1-2-release-available-now/
NGINX Unit 1.2 includes these new features: All types of applications can now be dynamically configured with their own environment variables. Configuration options for PHP applications can be defined in the php.ini file or directly with the NGINX Unit API. Go executables can now be configured with command‑line arguments. 另附：Three Ways NGINX Scales Applications Running in Docker Containers
SQLite Release 3.24
https://www.sqlite.org/releaselog/3_24_0.html
The popular embedded database library has added support for a Postgres-style UPSERT syntax for INSERT that allows changes to be made if records already exist. UPDATE queries have also been made more efficient.
A Course in Machine Learning
http://ciml.info/
CIML is a set of introductory materials that covers most major aspects of modern machine learning (supervised learning, unsupervised learning, large margin methods, probabilistic modeling, learning theory, etc.). It’s focus is on broad applications with a rigorous backbone. A subset can be used for an undergraduate course; a graduate course could probably cover the entire material and then some.
Phabricator
https://phabricator.wikimedia.org/
GitHub Alternative written in PHP used by the Wikimedia Foundation. Phabricator is a collaboration platform open to all Wikimedia contributors. It is mostly used for managing work related to software projects. Non-technical initiatives are welcome as well.
Remote only
https://www.remoteonly.org/
Remote Only work promotes: Hiring and working from all over the world instead of from a central location. Flexible working hours over set working hours. Writing down and recording knowledge over verbal explanations…
设计
Moving Design Beyond Pictures
https://blog.angular.io/moving-design-beyond-pictures-1509c315f94e
Quickly create real Angular prototypes without writing code. Designers put a lot of time into designing components and features for their products, however there often still remains a gap between a designer’s vision and a developer’s reality.
UX Your Life: Applying The User-Centered Process To Your Life (And Stuff)
https://www.smashingmagazine.com/2018/06/ux-your-life-user-centered-process/
Everything is designed, whether we make time for it or not. Our smartphones and TVs, our cars and houses, even our pets and our kids are the products of purposeful creativity. So why not our lives?
Introducing Sketch2React — Design with code inside of Sketch
https://medium.com/sketch-app-sources/introducing-sketch2react-design-with-code-inside-of-sketch-47cd90eab220
Sketch2React.io is a .sketchplugin, a framework and a React web app that converts Sketch design files into prototype React code. That spits out real HTML. Very super!
Bidirectional Scrolling is Here to Save Responsive Design
https://blog.marvelapp.com/bidirectional-scrolling-save-responsive-design/
This article is about a simple question with a surprisingly complex answer.
Master Hot Design Trends with These Photoshop Tutorials
https://www.toptal.com/designers/visual/hot-design-trends-photoshop-tutorials
Word of caution—designers should use graphic design trends in their work only when appropriate, and keeping branding in mind. For example, people expect stability and trust from banking, investing, insurance brands, and so on—so a subversive counter-culture effect like “glitch” may not be appropriate in these cases. Let’s look at a few of these hot graphic design trends, and share some of the top Photoshop tutorials on how to create them.
Your guide to space and layout in UI design
https://www.justinmind.com/blog/your-guide-to-space-and-layout-in-ui-design/
Discover why space is a fundamental building block of great UI layout design, plus get pro tips on jump starting your design process with Justinmind.
产品及其它
Chatbots were the next big thing
https://blog.growthbot.org/chatbots-were-the-next-big-thing-what-happened
At the Mobile World Congress 2017, chatbots were the main headliners. The conference organizers cited an ‘overwhelming acceptance at the event of the inevitable shift of focus for brands and corporates to chatbots’. In fact, the only significant question around chatbots was who would monopolize the field, not whether chatbots would take off in the first place: “Will a single platform emerge to dominate the chatbot and personal assistant ecosystem?” One year on, we have an answer to that question. No. Because there isn’t even an ecosystem for a platform to dominate.
How to Find Your Earliest Users
https://www.indiehackers.com/round-table/how-did-you-find-your-earliest-users
Not sure how to get that first trickle of customers to your business? Learn from dozens of entrepreneurs who share how they built up their audiences, leveraged existing platforms, scrapped and hustled, and drove initial traffic to their websites.
Artificial Intelligence for more human interfaces
https://christianheilmann.com/2018/06/10/artificial-intelligence-for-more-human-interfaces/
Artificial intelligence is the hype we’re knee-deep in at the moment. Everybody says they use it. Some says it will make the world a better place, others worry that it is the first sign of the end of the world. 另附：The impact of AI on UX design in 2018
互联网的下半场，拼的是协同效应
https://mp.weixin.qq.com/s?__biz=MzI0NzY3Mjc0Mw==&mid=2247484740&idx=1&sn=ecc949d1096bc8e939a1bf30c0dab09b
曾鸣教授在2018全球智慧物流峰会上提出了“协同效应”的全新概念，这是未来二十年，智能商业时代竞争最重要的标杆。协同效应打破了传统管理的规模不经济，在更大的范围去进行更深刻、更及时，更有效的合作。这是互联网下半场的全新游戏规则。
– THE END –
