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, Hacker News, Reddit,Twitter, MyBridge, etc.
More Issues can be found in Frontend+ Weekly Repository.
By the way, sorry for my poor English.
News
D3 5.0: D3 5.0 introduces only a few non-backwards-compatible changes. D3 now uses Promises instead of asynchronous callbacks to load data. Promises simplify the structure of asynchronous code, especially in modern browsers that support async and await. With the adoption of promises, D3 now uses the Fetch API instead of XMLHttpRequest, the d3-request module has been replaced by d3-fetch. More links about this can be found in Awesome Links
Java 10 Release: JDK 10, an implementation of Java Standard Edition 10, was released on March 20, 2018. Key improvements include local variable types as well as enhancements for garbage collection and compilation. JDK 10 is scheduled to be just a short-term release, and public updates for JDK 10 are slated to end in six months. The upcoming JDK 11, due in September, will be a long-term support (LTS) version of Java. LTS releases are due every three years. More links about this can be found in Awesome Links
Tutorial
How to build a Cryptocurrency price list app using Flutter SDK: Flutter is Google’s new open-source toolkit for helping developers build iOS and Android apps with just one codebase. Flutter apps are written in the Dart programming language and compile to native code, so the performance is really, really great. In this tutorial, I will show you how to use Flutter to build an app that shows the current price of different cryptocurrencies. I will walk you through the fundamentals of Flutter and Dart. More links about this can be found in Awesome Links
A Comprehensive Guide to React.js in 2018: This article was originally published in January of 2015, but was recently updated to React 16.3 and all the goodness it contains. The topics below are what I believe to be the fundamental aspects of React. If you understand all of them and their purposes, you’ll be at a very good spot after reading this tutorial: JSX, Virtual DOM, React.Component, state, Component LifeCycle, Events. More links about this can be found in Awesome Links
Introducing React Apollo 2.1: Recently, React Apollo 2.1 was announced, a huge step forward in improving how you develop React applications with GraphQL. It features a new render prop API and much stronger TypeScript support, along with upgraded docs. In this blog post, we will look through the following features: Data fetching with Query, Updating data with Mutation, Simplifying local state with ApolloConsumer, etc. More links about this can be found in Awesome Links
Engineering Practices
Comparing the top JS animation libraries for use in React apps: You may have noticed that animation is pretty popular on the web. There’s no shortage of tutorials, case studies, and libraries targeting motion lovers. It’s a facet of development that can intrigue, enhance, delight, motivate, and impress users. In this article, I’ve chosen five JavaScript animation libraries and dissected their abilities to perform from both a business and a development perspective. Instead of asking “what do I use to build X?”, I explore concerns like: How well is this project maintained? Is it easy for a team to pick up? What’s the syntax like? More links about this can be found in Awesome Links
How We Adopted CSS Grid at Scale: Last month we launched the redesign of Thomasnet.com, From team buy-in to fallbacks, here’s the approach we took at Thomas with the implementation of CSS Grid. This blog post contains following contents: A quick primer on CSS Grid, Our Grid “aha” moment, Resolving the CSS Grid vs. Flexbox argument, Laying the Grid foundation, Fallbacks for browsers without support. More links about this can be found in Awesome Links
Ultimate React Component Patterns with Typescript 2.8: Stateful, Stateless, Default Props, Render Callbacks, Component Injection, Generic Components, High Order Components, Controlled Components. More links about this can be found in React DevPractices Links.
Under the hood
Compressive Images Revisited: The compressive images technique relies on you sizing a JPG image to be larger than the size it ultimately is displayed at and then compressing it to an incredibly low-quality setting. This cuts the image weight dramatically, but also makes the image look absolutely terrible. The benefit in weight can be substantial. In the Filament Group’s article, the example image was a whopping 53% lighter (from 95kb to 44kb). The trade-off for compressive images is primarily the memory cost (there used to be scaling and decoding risks, but browsers have improved in that area). More links about this can be found in Awesome Links
Automated front-end development using deep learning: At Insight, he developed a model that allows users to create working HTML websites from hand-drawn wireframes, significantly accelerating the design process. He is now a Deep Learning Scientist at Mythic. More links about this can be found in Awesome Links
The React and React Native Event System Explained: A Harmonious Coexistence: There are an awful lot of posts explaining how to use React’s event handling system, but not many that explain how it works. I have been working on React Native lately, and my struggles with event handling acted as a reminder of how important it was to understand precisely what’s going on. I thus decided to gather as much info as possible regarding event handling in React: the following is a report of what I found looking around the source code. More links about this can be found in Awesome Links
OpenSource
Driver.js: Driver.js is a powerful yet light-weight, vanilla JavaScript engine to drive the user's focus across the page. Driver.js is not only another tour library, Tours are just one of the many use-cases. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: e.g. dimming the background when user is interacting with some component.
brain.js: brain.js is a library of Neural Networks written in JavaScript.
dejavu: dejavu is the missing web UI for Elasticsearch. Existing web UIs leave much to be desired or are built with server side page rendering techniques that make it less responsive and bulkier to run (I am looking at you, Kibana).Starting v1.0, dejavu is the only Elasticsearch web UI that supports importing data via JSON and CSV files, as well as defining field mappings from the GUI.
Top comments (0)