Frontend+ Weekly No.2: Puppeteer 1.0 Released, Keep webpack Fast from Slack, Prisma

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

• Speedometer 2.0 Released: In 2014, the WebKit team at Apple released Speedometer 1.0, a benchmark for web app responsiveness. Last week, Speedometer 2.0 is released, their benchmark tool for modern web app responsiveness, revamped and improved to match today’s standards.

• Puppeteer 1.0 Released: Chromium 65, JS/CSS code coverage API, PDF customization, XPath support, raw devtools protocol access.

• jQuery 3.3.0 Released: It’s been a while since the last jQuery release, but the Core team hasn’t been idle, they focus more on what can be removed rather than can be added. In new version, The .addClass(), .removeClass(), and .toggleClass() methods now accept an array of classes.

• Angular 5.2 Now Available: Angular version 5.2.0 has been released. This is a minor release that is a drop-in replacement for 5.1 containing many bugfixes. In this version, they improve type checking for templates, add support for TypeScript 2.6, and improve Router Param & Data Inheritance.

Tutorial

• What’s new in Vue Devtools 4.0: A big update was released to the Vue devtools just a few days ago, in this article we will dive into the new features and improvements. Changes include Editable component data, Open component in editor, Show the original component names, Inspecting components just got easier, Filter events by component, Collapsible inspectors, etc.

• CSS Naming Conventions that Will Save You Hours of Debugging: It is darn difficult to maintain CSS, poorly written CSS will quickly turn into a nightmare. Here are a few naming conventions that will save you a bit of stress and countless hours down the line.

• Webpage tracking only using CSS (and no JS): This article is proof of concept for website tracking/analytics using only CSS and without Javascript. We can gather some basic information about the user, using this method, it’s possible to track when a user visits a link the first time or hovers over a field the first time.

• Upgrading a create-react-app project to a SSR + code splitting setup: Since its inception, create-react-app is a great tool for rapidly prototyping React apps, demos and testing different features or techniques. Luckily, we can improve things, even without ejecting. Let’s try to do this step by step. This is what we’ll cover: Server-side rendering, Code splitting with react-loadable, Code splitting on the server, Taking benefit of webpack’s chunkNames.

Engineering Practices

• Keep webpack Fast: A Field Guide for Better Build Performance: Webpack is a brilliant tool for bundling frontend assets, but its batteries-included nature and the ocean of third-party tooling can make it difficult to optimize. This post is a field guide offering up what we learned on our path towards a faster build. Slack guys share their experience on measuring the build cost, parallelizing the build process, reducing the wordload, using cache, investing the hardware, etc.

• CSS Grid + Flexbox Solving Real-world Problems: Recently I had been given a responsive design that looked complex in the way items changed order and layouts changed at different viewports. This new design looked complex, until we thought of it in terms of CSS Grid and FlexBox. The challenge for this would be supporting Internet Explorer 11 and Safari 9+. After highlighting the design complexities, we will show the CSS needed to support modern browsers, then we’ll add IE support and finally get it to work in Safari 9 + 10.0.

• Five Traps to Avoid While Unit Testing Vue.js: Unit testing is a skill on its own, and it may not be your priority while you are learning a new language or a new framework. In the blog, the author will show you concrete steps you can use in your day-to-day work, walking through Vue.js examples, and help you to avoid five traps: waiting until the end, testing the wrong things, test doubles, structural coupling, testing everything.

Under the hood

• Understanding The React Source Code: React offers a straightforward and intuitive way to program front-end Apps with all the moving parts converged in the form of states. This series is focused on how React works internally. First article will start walking through one of the critical paths of React by rendering a simple component, and followed by a class component.

• How does Node load built-in modules: In the previous blog, the author started looking at how the Node main process was initialized. There was quite a lot going on in there, One of the things that caught my eye in particular was the reference to a function that seemed to be loading built-in modules during the initialization phase of the Node main process.

• JS things I never knew existed: I was reading through the MDN docs the other day and found these JS features and APIs I never knew existed. So here is a short list of those things, useful or not - learning JS seemingly never ends. There are Label Statements, “void” Operator, Comma Operator, With Conditional Operator, Internationalization API, Pipeline Operator, setTimeout() Parameters, etc.

OpenSource

• After.js: Next.js-like framework for server-rendered React apps built with React Router 4. Next.js is awesome, but its routing system isn’t satisfied for the author, so he build After.js, whose goals are routes are just components and don’t / should not have anything to do with folder structure.

• dialog-polyfill: dialog-polyfill.js is a polyfill for <dialog> and <form method="dialog">. <dialog> is an element for a popup box in a web page, including a modal option which will make the rest of the page inert during use. This could be useful to block a user’s interaction until they give you a response, or to confirm an action. See the HTML spec.

• Scrollama: Scrollama is a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.

• JARVIS: J.A.R.V.I.S. (Just A Rather Very Intelligent System) will put in your browser all the relevant information you need from your webpack build whether in dev or in prod. It is hugely inspired by other webpack dashboards and the core idea is not original, but here are some features: shows you the count of ES Harmony module imports which can be treeshakable and the CJS ones which are not, shows you how well your assets perform in 12 different connection types.

• 1Backend: 1Backend is a platform designed to make deploying, running and maintaining lambda functions/microservices easy. It enables you to launch a new live app in seconds - after choosing your tech stack (e.g. Go with access to an SQL database) you get an empty app which is already live and callable from the outside (through HTTP). At that moment, it supports Go, JavaScript, TypeScript and MySQL.

• Prisma: Prisma can turn your database into a GraphQL API. Prisma lets you design your data model and have a production ready GraphQL API online in minutes. The Prisma GraphQL API provides powerful abstractions and building blocks to develop flexible, scalable GraphQL backends: type-safe api, data modeling with declarative sdl, realtime api, advanced API composition and works with all frontend frameworks.