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.
News
Webpack 4.0.0 Release: This week, Webpack 4 (Legato) is available; There are so many new things in webpack 4, and it is fast(up to 98% faster). Webpack 4 have deprecated and removed CommonsChunkPlugin, and have replaced it with a set of defaults and easily overridable API called optimize.splitChunks. It also introduce a new property for your config called mode, for either build size (production) optimization, or build time (development) optimization. More changelogs can be found in this.
Parcel v1.6.0 Release: Parcel v1.6.0 is a huge release that comes just 3 weeks after v1.5.0, with over 15 new features and lots of bugfixes and improvements. The highlights include: Zero config ES6+ transpilation with Babel, Automatic JSX support for React and Preact, Node and Electron targets, Production bundle statistics, Node 6 support, W3C WebManifest support.
npm v5.7.0 Release: This release brings a bunch of exciting new features and bug fixes. Package-lock git merge conflict resolution allows npm install to fix package-lock.json and npm-shrinkwrap.json files that have merge conflicts in them without your having to edit them. The new npm ci command installs from your lock-file ONLY. If your package.json and your lock-file are out of sync then it will report an error, it’s also much faster (2x-10x!) than npm install when you don’t start with a node_modules. It works by throwing away your node_modules and recreating it from scratch.
Tutorial
Everything you need to know about CSS Variables: Most programming languages have support for variables. But sadly, CSS has lacked support for native variables from the very beginning. Well the web is moving fast. And I’m glad to report that CSS now finally supports variables. In this guide, I’ll show you how variables work natively in CSS, and how you can use them to make your life a lot easier. I’ll wrap things up by showing you how to build 3 projects that show off CSS variables and their ease of use: Creating Component Variations using CSS Variables, Theme Styles with CSS Variables, Building the CSS Variable Booth. More links about this can be found in Awesome Web Reference.
An Overview of JavaScript Testing in 2018: This guide is intended to catch you up with the most important reasoning, terms, tools, and approaches to JavaScript testing in 2018. It combines information from many great articles, that are linked at the bottom, and adds from our own experience in Welldone Software Solutions where we implemented different testing solutions for different products for years. He uses Jest for unit and integration tests and TestCafe for UI tests. More links about this can be found in Awesome JavaScript Reference.
Facial-Recognition: Using React-Redux and Kairos to Identify Yourself: We are in the era where Face ID and Facial Recognition is no longer a maybe or simply good-to-have feature. It has become rather the talk of the town. So as a developer, my curiosity was heightened by the prospect of trying to create a face recognition based application and testing out this awesome feature which has been apparently bestowed to mankind. More links about this can be found in DataScienceAI MindMap.
Engineering Practices
Streaming Server-Side Rendering and Caching at Spectrum: React 16 introduced streaming server-side rendering, which allows you to send down HTML in chunks in parallel to rendering it. This enables a faster time to first byte and first meaningful paint for your users since the initial markup arrives in the browser sooner. In this guest post he describes the journey to high performance server-rendering of their React application with streaming responses and distributed caching. More links about this can be found in React Reference.
Securing Your GraphQL API from Malicious Queries: With GraphQL you can query exactly what you want whenever you want. That is amazing for working with an API, but also has complex security implications. Instead of asking for legitimate, useful data, a malicious actor could submit an expensive, nested query to overload your server, database, network, or all of these. In this guest post he describes how they secured their GraphQL API from attackers. More links about this can be found in GraphQL Reference.
Event sourcing vs CRUD: In many cases event sourcing is combined with domain-driven design (DDD) and the design pattern CQRS, but it is only partly related to the two concepts. Event sourcing is a specific procedure for storing data. Unlike the traditional approach with a relational database, event sourcing does not persist the current state of a record, but instead stores the individual changes as a series of deltas that led to the current state over time. More links about this can be found in Awesome SoftwareArchitecture Reference.
Under the hood
Promises are not neutral enough: Promises in JavaScript create problems which affect the entire ecosystem. In this blog post I’ll explain some of those problems. The basic purpose of Promises is to represent a value that will be eventually available. It could become available in the next event loop or in the next minutes. Basically Promises are not neutral enough because they introduce 4 opinions: Eager, not lazy; No cancellation; Never synchronous; then() is a mix of map() and flatMap(). More links about this can be found in Awesome JavaScript Reference.
CSS Keylogging: CSS Keylogging contains a chrome extension and Express server that exploits keylogging abilities of CSS. This attack is really simple. Utilizing CSS attribute selectors, one can request resources from an external server under the premise of loading a background-image. Using a simple script one can create a css file that will send a custom request for every ASCII character. More links about this can be found in Awesome Web Reference.
Why Decentralization Matters: During the first era of the internet — from the 1980s through the early 2000s — internet services were built on open protocols that were controlled by the internet community. During the second era of the internet, from the mid 2000s to the present, for-profit tech companies — most notably Google, Apple, Facebook, and Amazon (GAFA) — built software and services that rapidly outpaced the capabilities of open protocols. Decentralized platforms, by contrast, often launch half-baked and without clear use cases. Cryptonetworks are a powerful way to develop community-owned networks and provide a level playing field for 3rd-party developers, creators, and businesses. More links about this can be found in Awesome Reference.
OpenSource
GhostText: Use your text editor to write in your browser. Everything you type in the editor will be instantly updated in the browser (and vice versa).
Proton Native: On mobile, the React Native gives us a seamless way to build user interfaces and manage state in code, all while doing it cross platform. Proton Native does the same to desktop that React Native did to mobile. Build cross-platform apps for the desktop, all while never leaving the React eco-system. Popular React packages such as Redux still work.
vue-ethereum-ipfs: It is a distributed application starter wih Vue, Ethereum and IPFS. Ethereum is a distributed virtual machine that pays eth in return for miners running your smart contracts. IPFS is a kind of distributed content distribution network. Vue is a javascript framework for building client-side webapps. By keeping state inside ethereum and using IPFS to deliver HTML, webapps can become nearly indestructable!
basicScroll: Standalone parallax scrolling for mobile and desktop with CSS variables. basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. Highly inspired by skrollr and Reactive Animations with CSS Variables.
Top comments (0)