Newsletter #13 - Nrwl Nx 11 and Prime NG 11
Welcome to the 13th edition of DeveloPassion's newsletter.
Before we start, I'd like to ask all of you to help me out a bit. If you find this newsletter interesting, then please do take a bit of time to share this link to others on social media: https://mailchi.mp/fb661753d54a/developassion-newsletter
With your help, others will also get a chance to discover and enjoy reading it. As an added benefit, it'll also motivate me to continue the experience! Don't forget that you can also follow me on Twitter and Medium where i publish my articles.
Upcoming book - News
As I've announced in the previous edition, I'm working on a new book about software development concepts.
As usual, I'm spending an insane amount of time working on tiny details (oh my, isn't that icon 2px too far right?), but the project is moving forward.
I've finished the book's plan, created and published the table of contents, and adapted the pricing based on my page count estimates, devising the product in multiple "packs", depending on what readers might be interested in.
The "bad" news is that since I've estimated the page count to ~1200, I'll need quite a bit of time to write the book :)
Nrwl NX 11
This release includes many automated migrations to easily upgrade your projects from Angular 10 to 11, which makes it a breeze.
I think there are other cool features in this release (like the new workspace format), but I haven't had time to dive into the details yet. Curious to see if they publish a blog post about it...
Prime NG 11
The other interesting news of the week for me is the release of Prime NG 11, which I'm using to build my upcoming SaaS product.Prime NG is a really nice component library, which I've started using a few months back. I knew their work from a distant past in the Java universe, with PrimeFaces, a Java/JSF component library.
Prime NG is quite nice in the Angular world and, since version 10, their components finally use the OnPush strategy (better late than never, right?).
So, release 11 of Prime NG is interesting because:
- It supports Angular 11 (so the last roadblock for my project is gone, yay!)
- It finally provides a simple solution for internationalization (e.g., easily integrating with ngx-translate and the like
- It now makes it easier to bind complex objects to dropdown elements: https://primefaces.org/primeng/showcase/#/dropdown
- It has a new ConfirmPopup component to display a confirmation dialog close to the target: https://primefaces.org/primeng/showcase/#/confirmpopup
- Its VirtualScroller has been revamped
I'm curious to see what the next releases will bring, but so far, combined with Tailwind, it is really really nice to use.
Mock Service Worker (MSW)
Last week, I finally gave a try to Mock Service Worker on a side project and I must say that I was really glad I did.
So, for those who haven't hear about it yet, Mock Service Worker (MSW for friends) is a tool that makes it a breeze to intercept requests and provide mock data for testing, without having to change the target URL of the requests; thus it is an API mocking library/tool.
The way it works is (as hinted by the name) that it registers a service worker, intercepting requests and replying with test data. This is an interesting idea because it requires less jumping through hoops to provide test data.
In the past, for instance with the Stark project, I've used json-server, which is also a nice API mocking solution, but is a tad mode complicated to integrate. For one, json-server usually requires running a separate server and using different request URLs (even though there are alternatives to that).
I've read a few articles about it in the past, in particular one by Tim Deschryver, explaining how to integrate MSW into an Angular application and thus I really wanted to try it out for myself. The opportunity appeared so I jumped on it. Fortunately, Tim has contributed some examples to the MSW repository, so the steps to integrate MSW in an Angular application are really straightforward now (note that there are also samples for other stacks like React, Storybook, GraphQL/Apollo, etc).
Basically, you "just" need to:
- Add the dependency: https://github.com/mswjs/examples/blob/master/examples/rest-angular/package.json
- Create a mockServiceWorker script: https://github.com/mswjs/examples/blob/master/examples/rest-angular/src/mockServiceWorker.js
- Adapt your angular.json file to include the mock service worker in the application assets: https://github.com/mswjs/examples/blob/master/examples/rest-angular/angular.json
- Create handlers to define what test data to return to requests: https://github.com/mswjs/examples/tree/master/examples/rest-angular/src/mocks
- Create a browser-based worker (for development mode): https://github.com/mswjs/examples/blob/master/examples/rest-angular/src/environments/environment.ts (note that you can actually do that in main.ts instead; that's a matter of taste, but the idea is to only load it during development
- Load the browser-based worker in development mode
- Create a node-based worker (for tests): https://github.com/mswjs/examples/blob/master/examples/rest-angular/src/mocks/server.ts
- Adapt your jest test setup file to start the node-based worker for tests: https://github.com/mswjs/examples/blob/master/examples/rest-angular/src/setup-jest.ts
Check out Tim's article and the official docs if you're curious.
Creating a table of contents using HTML and CSS
This is the solution I've used for the following page: https://dev-concepts.dev/table-of-contents. Simple, but effective :)
Accessibility: Contrast checker
Accessibility is not that hard, but requires attention to things that we might not always realize are actual WALLS for some users. For instance, color contrast is an important barrier for people with visual "deficiencies" (I don't like the term all the much..).
I often use the following site to check whether a combination of foreground & background color is readable for everyone: https://webaim.org/resources/contrastchecker/. There's also the following site: https://coolors.co/contrast-checker/112a46-acc8e5
Check out the following pages for more info about this:
A call for help
You might not know this about me, but I was probably one of the shyest persons on earth a few years back. I'm almost healed now, but it is still hard to call for help. Even though it ain't easy for me, I'm asking all ~40 of you to help me. Digital marketing is still new for me, and driving attention towards my book project ain't easy at all.
That project is near and dear to my heart because it's my passion for IT and software development that I want to share with the world. I strongly believe that this book will bring a lot of value for its readers, just like my explanations enlighten the people I coach, but the only way for them to know is to help them discover that it exists.
So please go ahead and help me to share the word about the project!
That's all folks!
I'm really interested to hear about what you think of this newsletter. If you have remarks/ideas/articles to share, then please don't hesitate to contact me through Twitter (https://twitter.com/dSebastien). My DMs are open.
If you find this newsletter interesting, then please share the link around: https://mailchi.mp/fb661753d54a/developassion-newsletter
Don't forget that you can also follow me on Medium where I currently publish my articles.
See you next time!