How to create your own FontAwesome. Ship SVG icons optimized for tree shakers and splittable across multiple bundles.
Don’t let the title fool you; building an icon library in a tree-shakable way is hard, very hard. If you make it from scratch, it’s impossible to do it in the mentioned time. But, here’s the good news. We already did the hard work for you.
I took everything I learned while building icon libraries for big companies and wrote a whole open-source tool suite so that you, with the help of this blog post, can build your own performant SVG icon library in less than 30 minutes. Sounds good? Let’s get started.
Let’s learn from the best — How does FontAwesome deliver SVG icons? 🤔
FontAwesome is probably one of the most…
How to generate a frontend and backend application with 5 commands
Offering many out of the box solutions for complex use-cases, Angular is one of the best frameworks for developing single-page applications. Another great thing about Angular is that it’s very opinionated about architecture. This is especially important for bigger development teams since it facilitates the on-boarding of new members and communication between different teams throughout an organization.
The Angular CLI (command line interface) is another amazing tool. It allows us to scaffold an entire Angular application with one command and perform common tasks such as extending, linting, testing, and building our application.
Nest JS, on the other hand, is a…
How to bridge the gap between the timing of function calls and Observables
Asynchronous code is hard! It’s hard to write and to test.
RxJs has changed the way we think about asynchrony. Instead of using Promises, we nowadays deal with streams in the form of Observables or Subjects. RxJs provides us with many out of the box operators to create, merge, or transform streams.
But we do not only get great tools for runtime code, but we also get amazing tools to test streams.
Marble diagrams are a great way of modeling streams. They are used throughout many tutorials and can now also be used in tests to assert streams.
In case…
Get an overview of all the essentials required to be productive in a modern front-end-end stack. Find the correct path and kickstart your career!
Front-end-end development is booming! Nowadays, almost every business owns a web application. Web applications ease continuous delivery and support multiple devices, an important aspect of IoT (Internet of things).
For a long, JavaScript was not considered a serious programming language by many enterprise developers. Often it was seen as a “script kiddy” language. With the new requirements, JavaScript has evolved a lot. Modern front-end development contains much more than classic web development with just HTML, CSS, and JavaScript.
In the past, we were building rich servers with thin clients. …
Angular schematics to split your library into multiple chunks with ng-packagr’s subentries
Angular libraries are a great way for open source projects or companies to share code across multiple applications.
Thanks to the Angular CLI, creating a library is easy. However, by default, your library may not be as tree shakable as you might think. In most cases, this is not a big deal, but sometimes, it can have a considerable impact on consumer’s performance. In other words, your library can slow the (initial load) of an application.
This happens mainly when your library includes third party libraries packaged in another format then ESModules like moment for example.
If you are not…
How to setup automated accessibility tests for your Angular application
explore the most common cause of memory leaks in Angular apps — learn how to fix them and to avoid them in the future
How and why to use Angular materials component harness to write reliable, stable and readable component tests
Simultaneously to the Angular 9 release, a new version of the Material component library was released. This release includes an absolute highlight feature, Angular Material test harnesses.
Testing in Angular
Good tests are the backbone of every application. They ensure that our app runs the way we expect it. Moreover, a robust test suite facilitates refactorings. Reliable tests allow us to change things under the hood without affecting the behavior.
In Angular, we distinguish between different types of tests; unit tests, component tests (integration tests) and end to end tests.
An overview of the features Ivy brings us today, and a look at possible features Ivy enables in future versions of Angular.
Recently, during coffee, I had a chat with a developer about Angular 9. I told him how excited I am for the upcoming release. In particular, because of Ivy.
Even though he already played around with Ivy in version 8, he couldn’t understand my excitement.
“All that hype for a bit smaller bundles!”
Well, there’s a lot more to it. Let’s explore why I am excited about Ivy and why you should be too?
Yes, we get smaller bundles
Let’s start with the feature most developers are aware of. With Ivy, we get smaller bundles. …
Kevin Kreuzer
Passionate freelance frontend engineer. ❤️ Always eager to learn, share and expand knowledge.
