*[Using Keras and Deep Q-Network to Play FlappyBird](https://yanpanlau.github.io/2016/07/10/FlappyBird-Keras.html)
-[Screenshot-to-code-in-Keras #Project#](https://github.com/emilwallner/Screenshot-to-code-in-Keras): A neural network that transforms a screenshot into a static website.
-[2018-How to build your own AlphaZero AI using Python and Keras](https://parg.co/UiX): Teach a machine to learn Connect4 strategy through self-play and deep learning.
-[You Don't Know JS: Meta Programming 翻译](https://github.com/lishengzxc/bblog/issues/4)
-[2015-Metaprogramming in ES6 #Series#](https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/): [Symbols and why they're awesome](https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/)>
*[You Don't Know JS: Meta Programming 翻译](https://github.com/lishengzxc/bblog/issues/4)
*[2015-Metaprogramming in ES6 #Series#](https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/): [Symbols and why they're awesome](https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/)>
# Proxy
-[2016-Introducing ES2015 Proxies](https://developers.google.com/web/updates/2016/02/es2015-proxies): ES2015 Proxies (in Chrome 49 and later) provide JavaScript with an intercession API, enabling us to trap or intercept all of the operations on a target object and modify how this target operates.
*[2016-Introducing ES2015 Proxies](https://developers.google.com/web/updates/2016/02/es2015-proxies): ES2015 Proxies (in Chrome 49 and later) provide JavaScript with an intercession API, enabling us to trap or intercept all of the operations on a target object and modify how this target operates.
*[2017-An Intro to Javascript Proxy Objects](https://parg.co/URf): Change the way you interact with Objects
-[2017-An Intro to Javascript Proxy Objects](https://parg.co/URf): Change the way you interact with Objects
-[How to use JavaScript Proxies for Fun and Profit](https://parg.co/Uie): There’s a very recent new feature of the JavaScript language that is still not being widely used: JavaScript proxies.
-[SPA, or not SPA, that is the question!](https://parg.co/UiI): In this article I will try to share my experience by listing my 10 reasons why you shouldn’t do a SPA website.
-[2017-React Performance Fixes on Airbnb Listing Pages](https://parg.co/UpT): There may be a lot of low-hanging fruit affecting performance in areas you might not track very closely but are still very important.
*[Creating more efficient React views with windowing](https://parg.co/UiL): In this presentation, the [bvaughn](https://github.com/bvaughn/) talks something abot performance, search, and app architecture in React development.
## OpenSource: 工具
*[High Performance React: 3 New Tools to Speed Up Your Apps](https://parg.co/b1v): In this post I’ll highlight tools and techniques for making React apps fast. Each section also has an interactive, and (hopefully) fun demo!
-[greenlet #Project#](https://github.com/developit/greenlet): Move an async function into its own thread, a simplified single-function version of workerize.
-[2018-How JavaScript works: The building blocks of Web Workers + 5 cases when you should use them](https://parg.co/Uig): We’ll offer an overview, discuss the different types of workers, how their building components come to play together, and what advantages and limitations they offer in different scenarios.
## ArrayBuffers & SharedArrayBuffers
*[A cartoon intro to ArrayBuffers and SharedArrayBuffers](https://parg.co/U83): In the last article, I explained how memory-managed languages like JavaScript work with memory. I also explained how manual memory management works in languages like C.
# Frontend+ Weekly: Try Webpack 4 Beta, React Windowing and setState, Building blocks of Web Workers
The best articles, links and news related to Frontend Development, and more, delivered once a week. All reference in this issue are gathered from [Medium](https://medium.com/@384924552), [Hacker News](https://news.ycombinator.com/news), [Reddit](reddit.com),[Twitter](twitter.com), [MyBridge](mybridge.co), etc.
...
...
@@ -8,24 +8,46 @@ More Issues can be found in [Frontend+ Weekly Repository](./README-en.md).
*[iOS 11.3 and macOS 10.13.4 include Service Workers](https://parg.co/Ui0): In this week, Safari Technology Preview 48 is available, it changes how Password AutoFill works, enable the Storage Access API, etc. More important, iOS 11.3 and macOS 10.13.4 include Service Workers, a powerful specification that allows background scripts to power offline web applications. iOS 11.3 also consults Web App Manifest when add web apps to the home screen.
*[Bootstrap 4](http://blog.getbootstrap.com/2018/01/18/bootstrap-4/): It’s literally taken us years to do it, but Bootstrap 4 has finally arrived! There are no breaking changes since our last beta, but we have made some key improvements and resolved some tricky bugs: print styles and utility classes have been updated, additive border utilities have been added, our `$spacers` and `$sizes` Sass maps have been updated, added documentation to our Theming docs, added responsive .order-0 and .order-last classes for more control over the flexbox grid.
*[Parcel v1.5.0 released](https://parg.co/Uiv)
*[Firefox 58: The Quantum Era Continues](https://parg.co/UiO): 2017 was a big year for Mozilla, culminating in the release of Firefox Quantum, a massive multi-year retooling of the browser focused on speed, and laying the groundwork for the years to come. Here are a few improvements that have landed in the latest Firefox, Off-Main-Thread Painting, Keeping Firefox Focused with Background Tab Throttling, WebAssembly Streaming Compiler, CSS Font Display, New Promise feature to reduce redundant code. These are also some [extension enhancement in Firefox 59](https://parg.co/Uis).
*[Expo SDK v25.0.0](https://parg.co/Ui9)
## Tutorial
*[Bootstrap 4](http://blog.getbootstrap.com/2018/01/18/bootstrap-4/): It’s literally taken us years to do it, but Bootstrap 4 has finally arrived! There are no breaking changes since our last beta, but we have made some key improvements and resolved some tricky bugs: print styles and utility classes have been updated, additive border utilities have been added, our `$spacers` and `$sizes` Sass maps have been updated, added documentation to our Theming docs, added responsive .order-0 and .order-last classes for more control over the flexbox grid.
*[Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver](https://parg.co/Uiu): In this article, we are going to go out of the scroll darkness and talk about the modern way of lazy-loading resources. Not just lazy-loading images, but loading any asset for that matter. More so, the technique we are going to talk about today is capable of much more than just lazy-loading assets: We will be able to provide any type of deferred functionality based on the elements’ visibility to users.
## Tutorial
*[webpack 4 beta — try it today!](https://parg.co/UiR): In this week,
-[How to use JavaScript Proxies for Fun and Profit](https://parg.co/Uie): There’s a very recent new feature of the JavaScript language that is still not being widely used: JavaScript proxies.
-[Interesting ECMAScript 2017 proposals that weren’t adopted](https://parg.co/UiW)
## Engineering Practices
*[why is `setState` asynchronous?](https://parg.co/Uid): mweststrate, the author of MobX, open this issue to wonder why setState is asynchronous. Reasons we often hear are that: async setState is required for async rendering, async setState is needed to know which state was rendered, etc. Gaearon clarify this confusion with different thought: guaranteeing internal consistency, enabling concurrent updates, etc. More reference for learning React can be found [here]().
*[Creating more efficient React views with windowing](https://parg.co/UiL): In this presentation, the [bvaughn](https://github.com/bvaughn/) talks something abot performance, search, and app architecture in React development. He focuses on what slows React applications down, how can we fix and shares some lessons-learned. It is worth mentioning that he discusses how does windowing work and how to only create elements the user can see.
-[SPA, or not SPA, that is the question!](https://parg.co/UiI): In this article I will try to share my experience by listing my 10 reasons why you shouldn’t do a SPA website.
*[Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver](https://parg.co/Uiu): In this article, we are going to go out of the scroll darkness and talk about the modern way of lazy-loading resources. Not just lazy-loading images, but loading any asset for that matter. More so, the technique we are going to talk about today is capable of much more than just lazy-loading assets: We will be able to provide any type of deferred functionality based on the elements’ visibility to users.
## Under the hood
*[why is `setState` asynchronous?](https://parg.co/Uid): mweststrate, the author of MobX, open this issue to wonder why setState is asynchronous. Reasons we often hear are that: async setState is required for async rendering, async setState is needed to know which state was rendered, etc. Gaearon clarify this confusion with different thought: guaranteeing internal consistency, enabling concurrent updates, etc. More reference for learning React can be found [here]().
-[How JavaScript works: The building blocks of Web Workers + 5 cases when you should use them](https://parg.co/Uig): This is post # 7 of the series dedicated to exploring JavaScript and its building components, we’ll offer an overview, discuss the different types of workers, how their building components come to play together, and what advantages and limitations they offer in different scenarios. Asynchronous functions solve only a small part of the single-thread limitations of the JavaScript language, on the other hand, Web Workers are lightweight, in-browser threads that can be used to execute JavaScript code without blocking the event loop.
*[Firefox 58: The Quantum Era Continues](https://parg.co/UiO): 2017 was a big year for Mozilla, culminating in the release of Firefox Quantum, a massive multi-year retooling of the browser focused on speed, and laying the groundwork for the years to come. Here are a few improvements that have landed in the latest Firefox, Off-Main-Thread Painting, Keeping Firefox Focused with Background Tab Throttling, WebAssembly Streaming Compiler, CSS Font Display, New Promise feature to reduce redundant code. These are also some [extension enhancement in Firefox 59](https://parg.co/Uis).
## OpenSource
*[Rejoiner](https://github.com/google/rejoiner): Rejoiner is opensourced by Google, to generate a unified GraphQL schema from gRPC microservices and other Protobuf sources. It allows the GraphQL schema to be flexibly defined and composed as shared components, populates request Proto based on GraphQL query parameters, supplies a DSL to modify the generated schema, joins data sources by annotating methods that fetch data
*[CSS Gridish](https://github.com/ibm/css-gridish): CSS Gridish takes design specs of your product’s grid and builds out several resources for your team to use: Sketch file with artboards and grid/layout settings for designers, CSS/SCSS code using CSS Grid with a CSS Flexbox fallback for developers, Google Chrome extension for anyone to check a webpage’s alignment. This tool is not a grid system with a grid already designed for you. Instead, CSS Gridish builds all of the resources for the grid your team designed. More information can be found in [this article](https://parg.co/Uim).
-[Greenlet](https://parg.co/Ui1): Greenlet can move an async function into its own thread, it can be treated as a simplified single-function version of workerize. The function you pass should be pure, since they get executed in an isolated scope.
-[Purgecss](https://parg.co/Uia): When you are building a website, chances are that you are using a css framework like Bootstrap, Materializecss, Foundation, etc... But you will only use a small set of the framework and a lot of unused css styles will be included. This is where Purgecss comes into play. Purgecss analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.
