Top Angular blog posts from July 2020
There’s so much great Angular content we discover each month that it’s often hard to pick our favorites - so, we try to diversify both the authors and the topics in each month’s recap to cover as many as possible. Here’s our recap for July - check it out!
A documentation site with Angular and Scully
We’re kicking off July’s recap with a post by Natalia Venditto on the Dev blog which is kind of meta-Angular: it’s a blog post about using the Angular Static Site Generator Scully to host the documentation for Natalia’s presentation on Angular Schematics. So, using Angular to better teach people how to use Angular!
As Natalia states, having a dynamic Angular app for the simple purpose of hosting docs would probably be unnecessary, so a site that serves static files is the best way to go, especially since Scully is able to meet all of her requirements. She describes step-by-step the proof of concept website, and also includes a video of a talk she gave on the topic.
In-Depth guide into animations in Angular
We continue with a very detailed and comprehensive post on animations in Angular, published by William Tjondrosuharto on inDepth.dev. He begins with an overview of animations, then continues with the setup and some basic use cases, e.g. enter and exit animations and how they behave.
William also covers some more advanced cases, such as disabling or staggering animations, before proceeding with some tips on implementation, performance and debugging.
He finishes the post with some other options for implementing animations besides the Angular Animation module, e.g. using inline animations and web animation APIs. If you’re currently working with animations in Angular, we highly recommend you check out the whole post, as there’s a lot more that William includes in it.
Angular Language Service for Visual Studio
In contrast to the previous in-depth post, this next one by Gabrielle Crevecoeur is short and sweet, announcing the release of Angular Language Service for Visual Studio. The service eases the editing experience in Angular with features such as auto-complete, and now it’s also in Visual Studio, which has its own editor features, but did not have more Angular-specific support before.
The extension is easy to set up and start using; simply download it on Visual Studio’s marketplace, open an Angular project and start working. The features were developed on the basis of customer feedback, so the extension is bound to prove useful.
How to migrate WordPress to Scully
For the fourth post this time, we have another one on the Scully static site generator, more specifically on migrating a WordPress blog to Scully (something we’re likely to see more and more of, now that Angular has its own SSG!).
As the post’s author Stepan Suvorov points out, while migrating WordPress posts to Scully is pretty straightforward, Scully doesn’t know how to handle images out of the box. To this end, Stepan has created an image plugin, but you can just as easily use the preRender router option with a dummy plugin.
Lastly, Stepan covers the migration/implementation of the most typical blog features, e.g. tags and search. He concludes with a section on deploying the Scully site, and some additional resources.
Copying Slack's Brilliant Virtual Scrollbar And Overflow Container In Angular 9.1.12
Another blog post that we enjoyed from last month is this one by InVision’s Ben Nadel on recreating Slack’s virtual scrollbar and overflow container in Angular 9. Indeed, Slack has a great user experience, and Ben is especially fascinated by this functionality, as it is implemented in a very smooth and user-friendly way, with the hidden native scrollbar’s behaviors mirrored in a virtual scrollbar.
Ben recreates the feature with Angular: a list of mock Slack channels is rendered with content projection, and a native scrollbar that’s hidden with CSS is replaced by a virtual scrollbar which retains the native behavior. He also includes the code of the implementation, complete with frequent comments.
Introducing (Angular Reactive) Forms with Benefits ?
We couldn’t really have a recap without at least one blog post by Netanel Basal! This one introduces the Reactive Forms library, which adds extra features such as control types, reactive queries and helper methods to every AbstractControl. It’s easy to get started using it, as you only need one schematics command.
Netanel presents the different types, queries and methods provided in the library, as well as Control Errors and ControlValueAccessor. The Reactive Forms library also includes a typed version of FormBuilder, as well as a special ESLint rule which prevents the input of any exposed token from @angular/forms.
Building A Plugin-based Workflow Designer With Angular and Module Federation
The Microfrontend Revolution, Part 4
Near the end of July’s list we have part 4 of Manfred Steyer’s series of posts on micro frontends and module federation, this one about creating a plugin-based workflow designer.
Manfred shows how to build the plugins used and load them into the workflow designer with loadRemoteModule (described in part 3 of the series). You also need to provide the plugins’ metadata and dynamically create the plugin component.
Lastly, you need to connect all the things just built in order to start using the workflow designer. Manfred also includes a disclaimer that module federation is slated for Webpack 5, which is currently still in beta, so a lot of these workarounds won’t be needed once it’s stable and supported by Angular’s CLI.
Useful Tips for Debugging with Scully
We’re finishing this month’s recap with a third post about Scully for Angular. In this one posted on the Dev blog, Jennifer Wadella presents some useful tips and tricks for debugging Scully.
She starts off with the basic tips: join the Scully Gitter channel, follow its repo for updates and resolved issues, and attend the Scully office hours which take place every Tuesday.
Besides these, she also includes 5 more advanced tips issuing from her conversations with Sander Elias, one of Scully’s creators: clone the Scully repo; test only specific routes by doing incremental renders; understand how the pages are rendered with Scully; use ShowBrowser to see how they are rendered; and debug any issues with the Angular router code.
This concludes our recap of July’s top Angular posts. We hope you enjoyed revisiting them and maybe even discovered something very helpful that you didn’t know about.
