FEX 技术周刊 - 2019/07/22
深阅读
frontend design, react, and a bridge over the great divide
http://bradfrost.com/blog/post/frontend-design-react-and-a-bridge-over-the-great-divide/
“Frontend development” is now so loaded that I quipped that as a frontend designer I live on the “front of the frontend”, while there are plenty of other developers living on the “back of the frontend”. I’d like to lean into that distinction because this great divide is played out in a very real way in JavaScript frameworks like React.
Quark: A Software ‘Sketchbook’ for Node, HTML and CSS Experiments
https://quarkjs.io/
Quark is a general purpose software tool specifically designed to help you create projects written in HTML, CSS and JavaScript with native desktop app like capabilities.
Redux with Code-Splitting and Type Checking
https://blogs.dropbox.com/tech/2019/07/redux-with-code-splitting-and-type-checking/
What happens when you only need a few reducers on each page, but it could be any permutation of the total number of reducers you support? How do you code-split your store so you’re not serving unnecessary JavaScript on a single page? And while you’re working on code splitting, how do you get it to play nicely with TypeScript so that you can trust what’s going in and coming out of the store?
How I ruined my application performances by using React context instead of Redux
https://blog.theodo.com/2019/07/how-i-ruined-my-application-performances-by-using-react-context-instead-of-redux/
I used React contexts instead of Redux for centralized states; Without a selector system, my components where getting lots of data as props, some of them were often changing and not necessary to build the view; Any changes in these contexts objects caused almost all my components to rerender; I had thousands of useless rerenders at every user interaction; Refactor all the application to use Redux and use wisely the selector system to give each components strictly what it needed solved the problem; Before choosing between contexts or redux, think about the optimizations the selector system can bring you.
HTML静态页面原型交付工具“魔卡”简介
https://www.zhangxinxu.com/wordpress/2019/07/html-mockup/
目前还有很多团队还是传统后端开发套页面方式，即使前端工程化开发成熟大厂也会有类似需求。矛盾就出现了：交接方希望得到的是干净的HTML原型，不是和前端工程化耦合在一起的HTML页面；而前端同学希望开发时候可以借助前端工程化，以快速便捷开发同时易于维护。那有没有什么办法同时兼顾呢，处理好这种矛盾呢？这样的痛点促使了“魔卡”的出现。免安装，直击静态页面开发痛点，提高开发效率降低维护成本。
比Hadoop快至少10倍的物联网大数据平台，我把它开源了
https://mp.weixin.qq.com/s?__biz=MzIzNzg5MTcxNA==&mid=2247483940&idx=1&sn=94dd582d6d4f2f927b0e7e4f183be97c
https://mp.weixin.qq.com/s?__biz=MzIzNzg5MTcxNA==&mid=2247483946&idx=1&sn=903e985dc37b3799e8d254578b396234
写了35年的程序，终于把自己的看家本领晒了出来，共享出来。两年多的时间，近二十万行代码，放在了GitHub上。好多朋友关切的问我，开源怎么赢利？抛开开源的商业模式不提，我想，只要我们开源的代码真正创造了价值，有人用，那我和团队就是最大的赢家。如果30年后，还有人在用TDengine,哪怕只是其中一个模块，其中一个函数，那就是对我们两年多日夜奋战的最大肯定，就是给我这个程序员的最大回报。更希望30年后，我还能对TDengine继续贡献代码，那将是我还未老去的最好证明。钱再多，也难让人在历史上留下痕迹，但一幅好的作品却可以传承，让后人好好的品味。愿我领头开发的TDengine成为传世之作，Leave a dent in the world!
Everything You Need To Know About CSS Margins
https://www.smashingmagazine.com/2019/07/margins-in-css/
Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, there is more to a margin than you might think.
Node.js 12: The future of server-side JavaScript
https://blog.logrocket.com/node-js-12/
Node.js has been a game-changing technology since its initial release back in 2009. In a nutshell, it lets developers use JavaScript to run scripts on the server side producing dynamic web content before the page is sent to the user’s web browser. Consequently, Node.js represents a “JavaScript everywhere” paradigm, unifying web application development around a single programming language, rather than needing different languages for server-side and client-side scripts. If you’re a fan of JavaScript and Node.js, like I am, you’ll be excited to know it’s about to get a whole lot better.
Introducing Osgood: A New V8-Based Platform for Building HTTP Servers
https://dev.to/tlhunter/introducing-osgood-4k1m
Osgood became our attempt to build such a platform. However, we didn’t want such a tool to be completely unfamiliar to developers. So, we reached for a pile of technology already familiar to many. The platform is built using Rust, a language heralded for its safety, and JavaScript is run in V8, a ridiculously fast JavaScript engine.
HTTP Security Headers - A Complete Guide
https://nullsweep.com/http-security-headers-a-complete-guide/
In this article, I will walk through the commonly evaluated headers, recommend security values for each, and give a sample header setting. At the end of the article, I will include sample setups for common applications and web servers.
Think in Math. Write in Code
https://justinmeiners.github.io/think-in-math/
Programmers love to discuss programming languages. Besides debating their own merits, we integrate them into our identities and even infer things about others who use them. Some even defend a form of Linguistic Determinism that thinking is limited to what is typable. Since we spend so much time using languages, an interest in making them better is justified. However, the character of these debates suggests that we think of them as something more. Perhaps we have forgotten their primary role. Programming languages are implementation tools, not thinking tools. They are strict formal languages invented to instruct machines in a human-friendly way. In contrast, thoughts are best expressed through a medium which is free and flexible.
Operating a Large, Distributed System in a Reliable Way: Practices I Learned
https://blog.pragmaticengineer.com/operating-a-high-scale-distributed-system/
For the past few years, I’ve been building and operating a large distributed system: the payments system at Uber. I’ve learned a lot about distributed architecture concepts during this time and seen first-hand how high-load and high-availability systems are challenging not just to build, but to operate as well. Building the system itself is a fun job. Planning how the system will handle 10x/100x traffic increase, ensuring data is durable, regardless of hardware failures is intellectually rewarding. However, operating a large, distributed system has been an eye-opening experience for myself.
Open Sourcing Brooklin: Near Real-Time Data Streaming at Scale
https://engineering.linkedin.com/blog/2019/brooklin-open-source
Brooklin is a distributed system intended for streaming data across multiple different data stores and messaging systems with high reliability at scale. It exposes a set of abstractions that make it possible to extend its capabilities to support consuming and producing data to and from new systems by writing new Brooklin consumers and producers. At LinkedIn, we use Brooklin as the primary solution for streaming data across various stores (e.g., Espresso and Oracle) and messaging systems (e.g., Kafka, Azure Event Hubs, and AWS Kinesis).
Presto at Pinterest
https://medium.com/@Pinterest_Engineering/presto-at-pinterest-a8bda7515e52
To provide employees with the critical need of interactive querying, we’ve worked with Presto, an open-source distributed SQL query engine, over the years. Operating Presto at Pinterest’s scale has involved resolving quite a few challenges. In this post, we share our journey.
Introducing the Plato Research Dialogue System: A Flexible Conversational AI Platform
https://eng.uber.com/plato-research-dialogue-system/
Plato was designed to address these needs and can be used to create, train, and evaluate conversational AI agents for a variety of use cases. It supports interactions through speech, text, or structured information (in other words, dialogue acts), and each conversational agent can interact with human users, other conversational agents (in a multi-agent setting), or data. Perhaps most significantly, Plato can wrap around existing pre-trained models for every component of a conversational agent, and each component can be trained online (during the interaction) or offline (from data).
Big Data Is Still Hard. Here’s Why
https://www.datanami.com/2019/07/15/big-data-is-still-hard-heres-why/
We’re over a decade into the big data era that emerged from the tectonic collision of mobile, Web 2.0, and cloud forces. Bolstered by progress in machine learning, we stand at the cusp of a new AI era that promises even greater automation of rudimentary tasks. But despite the progress in AI, big data remains a major challenge for many enterprises. 另附：Google got Looker. Salesforce bought Tableau. But open source tools are rising in popularity across the world of business intelligence and data analysis.
Let’s Build a Compiler
https://generalproblem.net/
Compilers, interpreters, runtimes, and the like can sometimes feel vaguely magical. They take your code, perform complex transformations that you only partially understand, and spit out an executable binary. Clearly, the inner workings of such a beast must contain arcane secrets, not meant for the minds of mortals. Of course, even if it feels that way sometimes, that doesn’t make it true. As with everything else in software, there’s no magic. You can understand it, with a little research and experimentation. There’s plenty of resources out there to understand how compilers work. I haven’t found anything that takes you from zero to a fully usable compiler, though, so I figured I’d try to write something that fits the bill. I’ve always found that the best way to learn how a system works is to build one yourself, so let’s do that. In short, this series will walk you through building an optimizing compiler from scratch. Hopefully we’ll both learn something along the way.
History and effective use of Vim
https://begriffs.com/posts/2019-07-19-history-use-vim.html
This article is based on historical research and on simply reading the Vim user manual cover to cover. Hopefully these notes will help you (re?)discover core functionality of the editor, so you can abandon pre-packaged vimrc files and use plugins more thoughtfully.
Parrotron: New Research into Improving Verbal Communication for People with Speech Impairments
https://ai.googleblog.com/2019/07/parrotron-new-research-into-improving.html
Project Euphonia has demonstrated that speech recognition models can be significantly improved to better transcribe a variety of atypical and dysarthric speech. Today, we are presenting Parrotron, an ongoing research project that continues and extends our effort to build speech technologies to help those with impaired or atypical speech to be understood by both people and devices. Parrotron consists of a single end-to-end deep neural network trained to convert speech from a speaker with atypical speech patterns directly into fluent synthesized speech, without an intermediate step of generating text—skipping speech recognition altogether.
新鲜货
The Web Can’t Survive a Monoculture
http://mikepennisi.com/blog/2019/the-web-cant-survive-a-monoculture/
Believe it or not, I convinced myself that a Chromium monoculture could actually be acceptable. For a minute. In this post, I’ll discuss that thought process and explain why I’m still optimistic about the web’s future.
Announcing NativeScript 6.0
https://www.nativescript.org/blog/announcing-nativescript-6.0—webpack-all-the-way-seamless-app-updates-new-core-theme-and-a-lot-more
This is a huge milestone for the framework and the common theme behind the release is “Productivity”. For the past months, we have worked on several features that aim to improve developer productivity in many aspects: Faster delivery of patches using NativeScript AppSync; The NativeScript Core Theme now works out of the box for all NativeScript components; A new and improved TabView which enables common scenarios without custom development; Webpack is now the driver of the development experience, and HMR is on by default.
Dash 2019: Guide to Datadog’s newest announcements
https://www.datadoghq.com/blog/dash-2019-new-feature-roundup/
At Dash 2019, we are excited to share a number of new products and features on the Datadog platform. With the addition of Network Performance Monitoring, Real User Monitoring, support for collecting browser logs, and single-pane-of-glass visibility for serverless environments, Datadog now provides even broader coverage of the modern application stack, from frontend to backend. Read on for details about those releases, as well as numerous other features for monitoring your metrics, traces, logs, synthetic tests, and more.
CKEditor 5 v12.3.0 with word count, autocorrect, link attributes and new upload adapter
https://ckeditor.com/blog/CKEditor-5-v12.3.0-with-word-count-autocorrect-link-attributes-and-new-upload-adapter-released/
We are happy to announce the release of CKEditor 5 v12.3.0. This editor version contains some exciting new features that were at the top of the wishlist for our community and customers alike, like word and character count, automatic text transformations, link attributes, text block and list indentation, or the Base64 image upload adapter. Typing on Android got significantly improved and a new watchdog functionality will be helpful in recovering from editor crashes.
The MDN Web Docs Have a New React-Powered Homepage
https://beta.developer.mozilla.org/en-US/
It’s in beta now but the popular frontend developer resource site is trying a React-driven front-end.
Airtable.js
https://github.com/Airtable/airtable.js
The Airtable API provides a simple way of accessing your data. Whether it’s contacts, sales leads, inventory, applicant information or todo items, the vocabulary of the interactions closely matches your data structure. You will use your table names to address tables, column names to access data stored in those columns. In other words, the Airtable API is your own RESTful API for your base.
Color Thief
https://lokeshdhakar.com/projects/color-thief/
Grab the color palette from an image. Uses Javascript and the canvas tag to make it happen.
jest-puppeteer
https://github.com/smooth-code/jest-puppeteer
Run your tests using Jest & Puppeteer.
Smashtest • Test 10x Faster
https://smashtest.io/
Smashtest is a language for rapidly describing and deploying test cases. Greatly speed up your automated testing by writing tests in a tree-like format. Trees represent how we think when we’re testing. They allow us to list all the permutations that branch off from any given point.
Polly.JS
https://netflix.github.io/pollyjs/
Polly.JS is a standalone, framework-agnostic JavaScript library that enables recording, replaying, and stubbing of HTTP interactions. By tapping into multiple request APIs across both Node & the browser, Polly.JS is able to mock requests and responses with little to no configuration while giving you the ability to take full control of each request with a simple, powerful, and intuitive API.
OctoSQL
https://github.com/cube2222/octosql
OctoSQL is a query tool that allows you to join, analyse and transform data from multiple databases and file formats using SQL.
.NET Reunified: Microsoft’s Plans for .NET 5
https://msdn.microsoft.com/en-us/magazine/mt833477.aspx
When Microsoft announced .NET 5 at Microsoft Build 2019 in May, it marked an important step forward for developers working across desktop, Web, mobile, cloud and device platforms. In fact, .NET 5 is that rare platform update that unifies divergent frameworks, reduces code complexity and significantly advances cross-platform reach. This is no small task. Microsoft is proposing to merge the source code streams of several key frameworks—.NET Framework, .NET Core and Xamarin/Mono. The effort will even unify threads that separated at inception at the turn of the century, and provide developers one target framework for their work.
What’s coming in Python 3.8
https://lwn.net/SubscriberLink/793818/0c6f9dd271021cd4/
The walrus operator; Debug support for f-strings; Positional-only parameters; A movable __pycache__.
Announcing The New Go Store
https://blog.golang.org/store
We are excited to launch the new Go official swag and merch store shipping worldwide. We are even more excited to announce that 100% of the proceeds from the Go store go directly to GoBridge. GoBridge is a non-profit organization focused on building bridges to educate underrepresented groups by teaching technical skills and fostering diversity in the Go community. 另附：Proposal: A built-in Go error check function, “try”.
TinyGo - Go on Microcontrollers and WASM
https://tinygo.org/
TinyGo is a project to bring the Go programming language to microcontrollers and modern web browsers by creating a new compiler based on LLVM. You can compile and run TinyGo programs on several different microcontroller boards such as the BBC micro:bit and the Arduino Uno. TinyGo can also be used to produce WebAssembly (WASM) code which is very compact in size.
At what time of day do famous programmers work?
https://ivan.bessarabov.com/blog/famous-programmers-work-time
I was curious when the famous programmers do their work. And it is quite easy to find. The result of programmers work is a code. Code is stored in version control systems (VCS). When you put code in VCS the time is record.
Argdown
https://argdown.org/
A simple syntax for complex argumentation. Writing pro & contra lists in Argdown is as simple as writing a Twitter message. You don’t have to learn anything new, except a few simple rules that will feel very natural. Your document is transformed into an argument map while you are typing. You can export your analysis as HTML, SVG, PDF, PNG or JSON. If that is not enough, you can easily extend Argdown with your own plugin.
org-web - org mode on the web
https://github.com/DanielDe/org-web
org-web lets you directly edit your org files online. It syncs with Dropbox and Google Drive and is optimized for mobile use.
设计
Framer Motion
https://www.framer.com/motion/
An open source React library to power production-ready animations. Design fluid animations for the web, across desktop and mobile.
How to Structure an Effective Typographic Hierarchy
https://www.toptal.com/designers/typography/typographic-hierarchy
While practicing and experimenting with creating an effective hierarchy is the best way to really master the skill, there are a number of guidelines designers should learn first, before setting out on their own. After all, it’s impossible to break the rules effectively without first knowing what they are.
Cognitive Maps, Mind Maps, and Concept Maps: Definitions
https://www.nngroup.com/articles/cognitive-mind-concept/
Cognitive maps, concept maps, and mind maps are diagramming techniques that can be utilized throughout the UX process to visualize knowledge and surface relationships among concepts.
Inside the Microsoft Emoji Design Studio
https://medium.com/microsoft-design/inside-the-microsoft-emoji-design-studio-b150813839f5
Discover the hidden complexity behind your favorite emoji.
阅读体验重塑 | Webnovel 阅读页改版
https://mp.weixin.qq.com/s/ctUmvi3UUKPgbmwrARH_rw
作为阅文集团的出海阅读产品，Webnovel 上线两年以来，随着用户量的不断增长以及产品功能的持续迭代，原先的阅读页体验已然滞后。今年五月初，我们对 Webnovel 的阅读页进行了一次改版优化，以下是此次改版的经验总结。
产品及其它
The future of productivity: People and tools that grow together
https://www.microsoft.com/en-us/research/blog/the-future-of-productivity-people-and-tools-that-grow-together/
Computers are disappearing. This doesn’t mean they’re actually going away, though. In fact, every day more and more of how we live, work, and interact is transformed by computers. But it does mean that technology has become so ubiquitous in recent years that our focus can now shift from our computers to what they enable us to do.
阿波罗11号代码仓库被灌水，仓库作者正式回应
https://mp.weixin.qq.com/s/lO1gGWLPZTpkNCJjwTfzKQ
正好是到了登月 50 周年的纪念日。阿波罗 11 号的开源代码仓库，这几天也在 GitHub 上连续占据着趋势榜头条。不过出现了尴尬的一幕，这个仓库这几天被大量灌水，里面的中文 issue 占绝大多数。仓库作者 chrislgarry 终于发声回应了。还是耗子哥的这个实在：闲话登月程序和程序员。另附：中文仓库在 GitHub 屠榜！国外开发者不开心了.
支付服务商从入门到精通（一） —— 牌照
https://mp.weixin.qq.com/s?__biz=Mzg4NzE4MDQ0OQ==&mid=2247483760&idx=1&sn=8526dd92dd81866b1003269be270dbbb
服务商不是你想做想做就能做，看完这篇文章，小编估计绝大部分想做（但还没有做）服务商的读者小伙伴们会选择放弃了（毕竟，小编写得都想放弃了），所以，中国出海的支付服务商们真的是太不容易了，这里值得给他们掌声和致敬。想成为微信、支付宝的海外机构服务商，首先要拿到入场券——牌照。
稻盛和夫告别演讲：人生因思维方式而改变
https://mp.weixin.qq.com/s/HHOq6X4cRQBXWLjoQn6V_Q
为度过美好的人生，纯粹的思维方式具有强大的力量，从而带来美好的命运。在20世纪初，英国伟大的心灵导师詹姆斯·艾伦说：不论是眼前的目标还是人生目的，心灵纯洁者更容易成功。为什么美好心灵的哲学能有这样的力量？因为这个世界上流淌着宇宙的意志，引导一切事物向着美好的方向前行。只要与宇宙潮流相一致，就能成长和发展。或者也可以做这样的比喻：人生在大海上航行，首先要依靠自己的力量拼命划船，同时还需要伙伴的帮助，但仅仅这些还是不够。只有靠“他利之风”，才能到彼岸。破洞的船帆，无论风力如何强劲，也无法获得动力。与此相反，纯粹美好的风帆，就能乘风破浪。理解哲学，就是扬帆起航。目的是为了接受在世界流淌的他利之风。就是磨砺自己的心灵，让它变得美丽和纯粹。
对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2019-07-22·大规模时空数据分析 IEEE VIS 2018最佳论文解读、帮助视障用户、机器人理解可视化
– THE END –
