More Issues can be found in Frontend+ Weekly Repository.
iOS 11.3 and macOS 10.13.4 include Service Workers: 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. More reference about PWA can be found here.
Expo SDK v25.0.0 released: Expo SDK v25.0.0 is based off the recently released React Native 0.52. In this release, it supports for fonts, videos, and audio assets in standalone apps; make release channels get more powerful; out-of-the-box support for AWS Cognito; improve APIs and additions.
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
$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.
webpack 4 beta — try it today!: In this week, webpack 4.0.0-beta.0 is released. This post states what’s new in webpack 4: Performance will be significantly enhanced in multiple scenarios, Better Defaults, support for sideEffects: false in package.json, JSON Support & Tree Shaking, Upgrade to UglifyJS2, Module Type’s Introduced + .mjs support, WebAssembly Support, Goodbye CommonsChunkPlugin, etc. More reference about Webpack can be found here.
Creating more efficient React views with windowing: In this presentation, the 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. More reference for learning React can be found here.
SPA, or not SPA, that is the question!: In this article I will try to share my experience by listing my 10 reasons why you shouldn’t do a SPA website: Speed and Performance, High Development Costs, Fragility, Hard Long term Maintainability, Poor Security, Reinventing the wheel, Social media and meta attributes, Poor Accessibility, Waste of memory and energy. More reference about web architecture can be found here.
Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver: 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. More Reference About Web Optimization can be found Here.
setState asynchronous?: 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.
Firefox 58: The Quantum Era Continues: 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.
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: 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.
Greenlet: 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: 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.