Announcing TypeScript 3.6
Hooks are coming to Vue.js version 3.0
Vue Hooks are basically an enhanced version of mixins, if you do not know what mixins are, they are a platform in Vue used to re-use logic between components (you will see a quick demo of mixins in this post). Vue Hooks lets you pass logic from one Hook to another and you can also use state in a Hook from another Hook. So just like in React, Hooks in Vue are defined in functions which can be a cleaner and more flexible way to define and share logic and can return state.
Introducing the optional chaining operator
Surely you don’t want to write code like that, so having some alternative is desirable. Some other languages offer an elegant solution to this problem with using a feature called “optional chaining”. According to a recent spec proposal, “an optional chain is a chain of one or more property accesses and function calls, the first of which begins with the token ?.”.
Using the new optional chaining operator, we can rewrite the above example as follows:
The nullish coalescing proposal (??) adds a new short-circuiting operator meant to handle default values.
The nullish coalescing operator (??) acts very similar to the || operator, except that we don’t use “truthy” when evaluating the operator. Instead we use the definition of “nullish”, meaning “is the value strictly equal to null or undefined”. So imagine the expression lhs ?? rhs: if lhs is not nullish, it evaluates to lhs. Otherwise, it evaluates to rhs.
Explicitly, that means the values false, 0, NaN, and the empty string '' are all falsy values that are not nullish. When such falsy-but-not-nullish values are the left-hand side of a lhs ?? rhs, the expression evaluates to them instead of the right-hand side. Bugs begone!
Package Viewer — Browse package files at any version.
Package Diff — Compare packages across versions.
Deep Links — Link to specific lines in files and diffs.
Published packages don't always include a link to their source on GitHub.
The linked repository is not necessarily representative of published package.
This repository hosts explorations for a new web platform feature, a virtual scroller control. The idea of a virtual scroller is to provide a scrolling "viewport" onto some content, allow extremely large numbers of elements to exist, but maintain high performance by only paying the cost for those that are currently visible. Traditionally, we say that the non-visible content is virtualized.
Checks import from declarations, import and require calls then updates or removes package.json dependencies (if update option described below is set to true, otherwise you only get informed) from package.json files. Works great with single-package modules as well as with big projects with multiple package.json files (for example if you have a monorepo powered by lerna).
//Browsers - Web
69.0 - Firefox Release - September 3, 2019
Enhanced Tracking Protection (ETP) rolls out stronger privacy protections:
The default standard setting for this feature now blocks third-party tracking cookies and cryptominers.
The optional strict setting blocks fingerprinters as well as the items blocked in the standard setting.
The Block Autoplay feature is enhanced to give users the option to block any video that automatically starts playing, not just those that automatically play with sound.
For our users in the US or using the en-US browser, we are shipping a new “New Tab” page experience that connects you to the best of Pocket’s content.
Support for the Web Authentication HmacSecret extension via Windows Hello now comes with this release, for versions of Windows 10 May 2019 or newer, enabling more passwordless experiences on the web.
Support for receiving multiple video codecs with this release makes it easier for WebRTC conferencing services to mix video from different clients.
Experimenting with same-provider DNS-over-HTTPS upgrade
As part of long standing commitment to making the web safer to use, we will be conducting an experiment to validate our implementation of DNS-over-HTTPS (aka DoH) in Chrome 78. As the name implies, the idea is to bring the key security and privacy benefits of HTTPS to DNS, which is how your browser is able to determine which server is hosting a given website. For example, when connected on a public WiFi, DoH would prevent other WiFi users from seeing which websites you visit, as well as prevent potential spoofing or pharming attacks.
WebGPU and WSL in Safari
WebGPU is a new API being developed by Apple and others in the W3C which enables high-performance 3D graphics and data-parallel computation on the Web. This API represents a significant improvement over the existing WebGL API in both performance and ease of use. Starting in Safari Technology Preview release 91, beta support is available for WebGPU API and WSL, our proposal for the WebGPU shading language.
Using rel=”preconnect” to establish network connections early and increase performance
Adding rel=preconnect to a <link> informs the browser that your page intends to establish a connection to another domain, and that you'd like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser requests them.
The graphic in the post does a good job of making this an obviously good choice for performance:
Using requestAnimationFrame with React Hooks
Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way.
TLDR: Pass an empty array as a second parameter for useEffect to avoid it running more than once and pass a function to your state’s setter function to make sure you always have the correct state. Also, use useRef for storing things like the timestamp and the request’s ID.
This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.
Text to speech in the browser with the Web Speech API
The Web Speech API has two functions, speech synthesis, otherwise known as text to speech, and speech recognition. With the SpeechSynthesis API we can command the browser to read out any text in a number of different voices.
From a vocal alerts in an application to bringing an Autopilot powered chatbot to life on your website, the Web Speech API has a lot of potential for web interfaces. Follow on to find out how to get your web application speaking back to you.
Document and preview ReactJS components with JSDoc
Minimal Webpack 4 boilerplate with Babel, Sass, ESLint, Hot Module Replacement, and development/production optimization.
Package Diff displays a diff between two versions of the same npm package.
It aims at supporting various kinds of graphs with the same unified interface.
A graphology graph can therefore be directed, undirected or mixed and can be simple or support parallel edges.
Along with those specifications, one will also find a standard library full of graph theory algorithms and common utilities such as graph generators, layouts etc.
Automatically compress images on Pull Requests
Calibre’s new GitHub Action allows you to compress raster images with minimal setup automatically. Never ship unoptimised graphics again.
Design system of state sites of Ukraine
This design system helps to create accessible and simple government web services.
Here you will find practical guidelines that remain with our designers, developers and testers, content editors, managers and website owners.
Caniuse and MDN compatibility data collaboration
npm bans terminal ads
This article talks about two important techniques, Debouncing and Throttling, to enhance your website performance. Learn about both concepts with the help of real-life examples and see how you can implement them yourself.
Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative?
As our phones are getting bigger, we need to adjust how we build and design our websites. Is there something to learn from app design and tap bars? Can we fix the mobile navigation of our websites to have a lower interaction cost?
Can I email … ?
Hello darkness, my old friend
Overhyped or necessity? Learn everything about dark mode and how to support it to the benefit of your users!
How we learned to stop worrying and love GraphQL
This is the first part of the story of GraphQL experiment at Revolut.
This part will explain:
- Why started using GraphQL
- How hacked the proof of concept phase of the adoption
- How you can do the same in your project