More Issues can be found in Frontend+ Weekly Repository.
Chrome will mark all HTTP sites as “not secure: Google Chrome now announced that starting in Chrome 68 (to be releaded in July 2018) the browser will mark non-secure sites (HTTP) as “not secure”, marking the end of non-HTTPS websites. Developers can use latest Node CLI version of Lighthouse, an automated tool for improving web pages, to find which resources a site loads using HTTP, and which of those are ready to be upgraded to HTTPS simply by changing the subresource reference to the HTTPS version.
Welcoming Progressive Web Apps to Microsoft Edge and Windows 10: Edge 17 will come with Service Workers and Push Notifications, and the Microsoft Store will start listing Progressive Web Apps by manual submission which is a big step ahead for making web apps as usable as native apps. In this post, we’ll give a quick introduction to Progressive Web Apps – what they are, the problems they solve, and how we’ll be enabling them across Windows 10.
What’s new in React 16.3: React 16.3-alpha just hit npmjs and can be downloaded and added to your project, this post will make some observation about new features in this version. New context API, The new API is accessible as React.createContext() and creates two components for us; New life-cycle methods, componentWillMount, componentWillUpdate, componentWillReceiveProps get removed and getDerivedStateFromProps is introduced; StrictMode to make sure your code is following the best practices, New version of React Developer Tools. More reference about this can be found React Reference.
Service workers: the little heroes behind Progressive Web Apps: Service workers are at the core of Progressive Web Apps. They allow caching of resources and push notifications, which are two of the main distinguishing features that have set native apps apart up to this point. This post will cover Background Processing, Offline Support, Precache assets during installation, Caching network requests, Installation and Basic Usage, etc. More reference about this can be found PWA Reference.
React’s ⚛️ new Context API: This post will introduce the new Conext API in React, it consists of thress main parts: React.createContext which is passed the initial value, returns an object with a Provider and a Consumer. The Provider component is used higher in the tree and accepts a prop called value (which can be anything). The Consumer component is used anywhere below the provider in the tree and accepts a prop called “children” which must be a function that accepts the value and must return a react element (JSX). More reference about this can be found React Reference.
Five Common Problems in GraphQL Apps (And How to Fix Them): In this article, we will learn to unlock the power of GraphQL without suffering its drawbacks. The author talks about problems such as: Schema duplication, Server/client data mismatch, Superfluous database calls, Poor performance and Boilerplate overdose. For each issue, I’ll describe the problem, and then explain how I’m addressing it inside Vulcan, a React/GraphQL open-source framework I’ve been working on over the past year. More reference about this can be found in GraphQL Reference.
Redux modules and code-splitting: Twitter Lite uses Redux for state management and relies on code-splitting. However, Redux’s default API is not designed for applications that are incrementally-loaded during a user session. This post describes how I added support for incrementally loading the Redux modules in Twitter Lite. It’s relatively straight-forward and proven in production over several years. More reference about this can be found in Redux Reference.
Web Performance Optimization with Webpack by Addy Osmani: Modern web applications often use a bundling tool to create a production “bundle” of files (scripts, stylesheets, etc.) that is optimized, minified and can be downloaded in less time by your users. In Web Performance Optimization with webpack, we will walk through how to effectively optimize site resources using webpack. This can help users load and interact with your sites more quickly. Webpack is one of the most popular bundling tools in use today. Taking advantage of its features for optimizing modern code, code-splitting scripts into critical and non-critical pieces and stripping out unused code (to name but a few optimizations) can ensure your app has a minimal network and processing cost. More reference about this can be found in Webpack Reference.
Evolving Patterns in React: Let’s take a closer look at some of the patterns that are emerging in the React ecosystem. These patterns improve readability, code clarity, and push your code towards composition and reusability. This post will cover Conditional Render, Passing Down Props, Destructuring Props, Provider Pattern, High Order Components, Render Props, etc. More reference about this can be found React Reference.
How you can train an AI to convert your design mockups into HTML and CSS: Within three years, deep learning will change front-end development. It will increase prototyping speed and lower the barrier for building software. The field took off last year when Tony Beltramelli introduced the pix2code paper and Airbnb launched sketch2code. Currently, the largest barrier to automating front-end development is computing power. However, we can use current deep learning algorithms, along with synthesized training data, to start exploring artificial front-end automation right now. In this post, we’ll teach a neural network how to code a basic a HTML and CSS website based on a picture of a design mockup. More reference about this can be found Awesome Web Reference.
WebAssemblyStudio: Onine studio to learn, teach, work and play WebAssembly, it supports C++ and Rust. User can build and run wasm projects in the browser, also can run a local copy, which need to install node.js and webpack on your computer.