Web Development

Compile-time Dependency Injection With Play thumbnail

The Play Framework provides a lot of features, which makes it incredibly easy to scale infrastructure. However, scaling a codebase is more difficult. As developers create new components and more complex relationships, the codebase can become unruly for all. To help with this problem, one can use a dependency injection…

How to handle folder uploads in Angular 2+ thumbnail

At Lucidpress, we recently decided to revamp our image manager experience by creating a completely new image manager written in Angular 2 and Typescript. One of the key new features we wanted to add was bulk image upload, which is the ability to upload a folder with all of its…

5 Angular directives you can use in your project thumbnail

In a recent blog, we showed off some examples of Angular pipes we use in our code base. Now, we’d like to talk about directives. Angular directives allow you to attach behavior to elements in the DOM and reuse it across your project. The framework already comes with a number…

Converting 600k lines to TypeScript in 72 hours thumbnail

Background Users have been using Lucidchart for a long time to make their diagrams, since 2010 and IE6. And for nearly that long, Lucid has used Google’s Closure Compiler to manage its increasingly sophisticated code base. Closure Compiler is a typechecker and minifier that uses JSDoc annotations in comments to…

5 usage ideas for Angular pipes thumbnail

Pipes are a useful feature in Angular. They are a simple way to transform values in an Angular template. There are some built in pipes, but you can also build your own pipes. A pipe takes in a value or values and then returns a value. This is great for…

Tips & Tricks for Reducing Server Load thumbnail

At Lucid, we have a service-oriented architecture. One of these services is a font service that is responsible for serving font data based on family and unicode range and checking permissions for user-uploaded fonts. We didn’t expect the font service to have particularly high load1 (load is the average number…

WebAssembly Overview: So Fast! So Fun! Sorta Difficult! thumbnail

WebAssembly was first described to me as “a way to run C++ on the web,” which was technically vague enough to ignore, despite my love of both C++ and the web. I heard about it again later at the 2016 Chrome Dev Tools Summit, and I decided to check it…

Removing Roadblocks in the Move to Angular 4 thumbnail

Angular has become the de facto front-end MVC framework of the Web. We had been slowly adopting Angular 1 here at Lucidchart, but the vast majority of our crucial components were built in jQuery and vanilla JavaScript. We were one of the early pioneers of Angular 2. We found Angular…

Using Angular 2 Components In a Non-Angular App thumbnail

Lucidpress is a large application—hundreds of thousands of lines of handwritten JavaScript. After seeing the success Lucidchart had in modernizing its UI with Angular, we wanted to follow suit, but we didn’t have the resources to do a wholesale rewrite all at once. We wanted to write some new Angular…