2018.03.12

Title: 2018.03.12

Deep Reading

Node v8.10.0 (LTS) https://nodejs.org/en/blog/release/v8.10.0/ This release comes with a lot of big changes. There are updates to V8, libuv, and ICU, a bugfix in npm, and support for building with OpenSSL 1.1.0. Also see: Introducing npm ci for faster, more reliable builds, Strategic Initiatives from the Node.js Project.

What I Talk About When I Talk About Platforms https://martinfowler.com/articles/talk-about-platforms.html Why an effective digital platform can help you scale delivery, what it should have in it, and how to get started building one. These days everyone is building a “platform” to speed up delivery of digital products at scale. But what makes an effective digital platform? Some organisations stumble when they attempt to build on top of their existing shared services without first addressing their organisational structure and operating model. Also see: The Agile Fluency Model

Data visualization with react-vis https://medium.com/@shyianovska/data-visualization-with-react-vis-bd2587fe1660 React‑vis is a React visualization library created by Uber. With it you can easily create common charts, such as line, area, bar charts, pie and donut charts, tree maps and many more. React‑vis is a good option because it is: Simple, Flexible, Integrated with React. In this article I want to show how to build a simple line chart using react‑vis.

Server Rendering with React and React Router https://tylermcginnis.com/react-router-server-rendering/ Server‑side rendering a React app can provide a few different benefits including performance and SEO. The problem is that those benefits come at the cost of additional complexity to your application. In this post, we’ll start from scratch and slowly build a server‑side rendered React (with React Router) while breaking down some of the complexity as we go.

How I built super fast JS framework https://medium.com/@marcisbee/how-i-built-super-fast-js-framework-faster-than-react-ea99f0d03150 First of all I want to address the elephant in the room—that one question you might be asking: “Why the heck another JavaScript framework?” My answer is that I noticed a pattern in all the frameworks I recently examined: they all get stuck creating a Virtual DOM and then running a diffing algorithm over it, which led to “diffing algorithm wars.” I thought there had to be a better way (sneaking around this war), so I created a tiny JS framework called Radi.js.

The danger of target="_blank" and “opener” https://knownsec-fed.com/2018-03-01-wei-xian-de-targetblank-yu-opener/ When using links on a web page, the usual way to make the browser open the target address in a new tab is to add target="_blank" to the <a> tag. However, this attribute gives phishing attackers an exploitable opening.

Data‑Oriented Design and C++ https://zhuanlan.zhihu.com/p/34425262 A look at practices from game development.

TypeScript practice https://juejin.im/post/5a9c004a6fb9a028b92c9e91 This article records the concrete value TypeScript has brought to our real‑world projects. Our project is based on the React ecosystem, so the focus is on experiences combining React and TypeScript. Also see: Typescript in Egg + Vue applications

We Write CSS Like We Did in the ’90s, and Yes, It’s Silly http://alistapart.com/article/we-write-css-like-we-did-in-the-90s-and-yes-its-silly As web developers, we marvel at technology. We enjoy the many tools that help with our work: multipurpose editors, frameworks, libraries, polyfills and shims, content management systems, preprocessors, build and deployment tools, development consoles, production monitors—the list goes on.

CSS in the Age of React: How We Traded the Cascade for Consistency https://engineeringblog.yelp.com/2018/03/css-in-the-age-of-react.html In a React world, we can package JSX together with the styling it requires. Our React components explicitly declare dependencies on the CSS they need, which means we can statically extract all the styles needed on a page so developers no longer have to manually ensure that the CSS their components need is included!

How to Write CSS That Works in Every Browser, Even the Old Ones https://hacks.mozilla.org/2018/03/how-to-write-css-that-works-in-every-browser-even-the-old-ones/ Let me walk you through how exactly to write CSS that works in every browser at the same time, even the old ones. By using these techniques, you can start using the latest and greatest CSS today—including CSS Grid—without leaving any of your users behind. Along the way you’ll learn the advanced features of “Can I Use,” how to do vertical centering in two lines of code, the secrets to mastering Feature Queries, and much more. Also see: Lesser known CSS quirks & advanced tips

Using srcset and sizes to make responsive HTML5 images https://engineering.tumblr.com/post/171593053597/using-srcset-and-sizes-to-make-responsive-html5 If you’ve tried to implement responsive retina images on the web, you’ve probably come across one of the many informative articles on the subject. Many of the posts I found are really great, but they downplay or overlook a point that I think is crucial: if you set up srcset and sizes, the browser will automatically download higher‑density images on retina devices, if they are available. Let’s investigate how to do that.

CSS Techniques and Effects for Knockout Text https://css-tricks.com/css-techniques-and-effects-for-knockout-text/ Knockout text is a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It’s appealing because it opens up typographic styles that we don’t get from traditional CSS properties, like color. Also see: What Houdini Means for Animating Transforms, Is Houdini Ready Yet

Reflected XSS explained: how to prevent reflected XSS in your app https://blog.sqreen.io/reflected-xss/ A reflected XSS (also called a non‑persistent XSS attack) is a specific type of XSS whose malicious script bounces off another website to the victim’s browser. It is passed in the query, typically in the URL, making exploitation as easy as tricking a user into clicking a link.

Loading Third‑Party JavaScript https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/ Ideally, you’ll want to ensure third‑party scripts do not impact the critical rendering path.

---

Originally written by Ping Xia (平侠) and published in Chinese on Web技术周刊 (Web Tech Weekly). Translated and adapted for DriftSeas with permission.