Web Development

A tags component Last year, Lucidchart added many new features that enable users to attach metadata to their Lucidchart documents. One of the new types of document metadata is called custom tags. Custom tags functionality allows Lucidchart users to add arbitrary tag strings to their documents and to sort and…

If you ever need to write some code to read a source map, then you should probably start by trying to find a good library to do it for you. If for some reason you still need to write your own source map reader, then at some point you will…

Why Turning on HTTP/2 Was a Mistake. HTTP/2 is a great leap forward for HTTP. It increases bandwidth efficiency by using a binary compressed format for headers, decreases latency by multiplexing requests on the same TCP connection, and allows the client to specify priorities for requests. In many cases moving…

What you should know before making a service worker thumbnail

Service workers have arrived and they are awesome. They let you create excellent fallback behavior to provide users with seamless offline experiences. With service workers, websites are a step closer to giving users a native app experience in the web browser. With the help of service workers, Lucidchart can save…

ZoneTracker: Tracking JavaScript Performance with Zone.js thumbnail

Lucidchart is a highly performant web application. When editing a Lucidchart document, users expect a high frame rate and a responsive UI. To ensure a great experience, we track frame rate and UI stalls. This article describes how we leverage an existing library, Zone.js, to accomplish this. Prereq: The JavaScript…

Idiomatic JavaScript: Boolean Expression Tricks thumbnail

If you’re new to JavaScript, you’ll come across various keywords, syntax sugar, and shorthands that make you scratch your head. This article introduces a few of the most common boolean expression tricks I encountered when I began coding in JavaScript. Truthy and falsy Chances are, you’ve seen something like this…

How to Actually Improve Type Safety with the TypeScript Strict Flags thumbnail

Last summer a team of engineers converted our front-end code from Closure-annotated JavaScript to TypeScript, you can read about it here. It has been a long journey to take that converted code that was smattered with anys and turn it into idiomatic and type-safe TypeScript. The strict compiler flags have…

Live Editing HTML and CSS with Chrome DevTools thumbnail

Chrome DevTools is a powerful suite of web development tools built right into the Chrome browser. One of the most useful features of DevTools for web developers is the ability to live edit the HTML and CSS on a page. This functionality allows any developer, even those with weaker HTML…

Time-saving Chrome DevTools Shortcuts thumbnail

It is impossible to imagine modern web development without the use of Chrome DevTools. Thanks to a clean UI and continuous improvements to meet real-world needs, the tool has  become the go-to live development environment that surpasses many contemporary IDEs in both functionality and performance. But how productive are you…