Menu

JavaScript News

Prototyping with Angular

June 26th, 2019

Since joining Google a year ago, I’ve been using Angular every day to build realistic, front-end prototypes. I’ve used these prototypes to quickly validate ideas with real users. This has helped my team iterate cheaply and minimize the amount of engineering rework. I wanted to share my experience in hopes of encouraging more designers and…

Getting to Know the useReducer React Hook

June 26th, 2019

useReducer is one of a handful of React hooks that shipped in React 16.7.0. It accepts a reducer function with the application initial state, returns the current application state, then dispatches a function. Here is an example of how it is used; const [state, dispatch] = useReducer(reducer, initialState); What’s the good for? Well, think about…

Try Bazel’s opt-in preview in Angular CLI

June 21st, 2019

In Google we build all our software with a tool called Bazel. We’ve been using it for the past over 12 years to build projects with any size — from small internal apps, to large applications such as Gmail, Google Drive, and Google Cloud Console. Thanks to its properties — hermeticity, parallelism, and incrementality, Bazel enables fast builds, which are…

Managing State in React using Unstated-Next

June 17th, 2019

In a previous post, we saw how to manage state using Unstated. As you might recall, Unstated uses React’s built-in setState to allow you create components that can consume state by subscribing to a provider — like the React’s Context API. Well, we’re going to build off that last post by looking at Unstated Next,…

Using Cypress to Write Tests for a React Application

June 12th, 2019

End-to-end tests are written to assert the flow of an application from start to finish. Instead of handling the tests yourself — you know, manually clicking all over the application — you can write a test that runs as you build the application. That’s what we call continuous integration and it’s a beautiful thing. Write…

Everything You Need to Know About Date in JavaScript

June 11th, 2019

Date is weird in JavaScript. It gets on our nerves so much that we reach for libraries (like Date-fns and Moment) the moment (ha!) we need to work with date and time. But we don’t always need to use libraries. Date can actually be quite simple if you know what to watch out for. In…

It’s time for the compatibility opt-in preview of Ivy!

June 7th, 2019

We’re looking for developers willing to give new things a try (with a few rough edges) and who want to share their experiences with us. If you are interested, you should follow the steps below and let us know what issues you run into. This preview is primarily intended to validate backward compatibility, as performance and…

Creating Animations Using React Spring

June 4th, 2019

Have you ever needed animation in your React application? Traditionally, implementing animation has not an easy feat to accomplish. But now, thanks to Paul Henschel, we there’s a new React tool just for that. react-spring inherits from animated and react-motion for interpolations, optimized performance, and a clean API. In this tutorial, we will be looking…

Implementing Private Variables In JavaScript

May 31st, 2019

JavaScript (or ECMAScript) is the programming language that powers the web. Created in May 1995 by Brendan Eich, it’s found its place as a widely-used and versatile technology. Despite its success, it’s been met with its fair share of criticism, especially for idiosyncrasies. Things like objects being casted to string form when used as indices,…

A Practical Use Case for Vue Render Functions: Building a Design System Typography Grid

May 30th, 2019

This post covers how I built a typography grid for a design system using Vue render functions. Here’s the demo and the code. I used render functions because they allow you to create HTML with a greater level of control than regular Vue templates, yet surprisingly I couldn’t find very much when I web searched…