Is it possible to relearn coding skills 15 years out, in a world where a developer’s skills can become obsolete in a year? In this blog, I will discuss my seemingly backwards career journey.
Angular Universal with Dynamic Metadata hosted on AWS Elastic Beanstalk, for Google SEO and for Link Preview to work for sub-pages
In this article I will show you how to convert an Angular SPA application to an Angular Universal application so that you may render your application on the server instead of the normal client-side rendering. Then I will show you how to add dynamic metadata for your routes to help the Google crawlers and enable different link previews for each route, and finally, how to host your Angular Universal application in AWS Elastic Beanstalk.
In this blog, I will go over how you can get API data in advance so that when the user gets to the page that needs the data, it will be there. This is useful when you have a potentially long-running API call and do not want to start the retrieval when the user arrives at the page because they will have to wait. Getting the data in advance will make the user experience more pleasant.
In this blog, we will
- Set up a MongoDB Atlas Account and database with credentials and connectivity
- Code a schema using Mongoose in Node.js
- Code a route and controller to add a database and document to MongoDB Atlas
- Test the route using Postman to create the document
- Code a route and controller to get documents from our database in MongoDB Atlas
- Test the route using Postman to get the data
In this blog, I will show you three ways to pass data between components in Angular using a real-world example.
In this blog, I will who show six examples of practical, real-world animations using Angular’s animation capability, and will explain in detail how they work. Here are the animations we will cover:
- A slide-down animation exposing an Add Post component’s template
- A fade in for the new post applied
- A thumbnail photo that will expand smoothly to full-size when clicked and shrink back down when clicked again
- An animation that will draw attention to an element
- Two variations of animation when adding to a dynamic list. One will fade in. The other will slide in from the left.
- Fade animation when changing routes, configured in one place
Use ng-content (content projection), ng-template, ngTemplateOutlet and ng-container for a reusable component in a real-world use case with nice example code
In this blog, I will define a use case where it makes sense to employ content projection using ng-content as well as ng-template with ngTemplateOutlet and ng-container. I will explain what these directives are and why we are using them.
In this blog, I will explain the different types of data binding that Angular supports and show examples of each in a simple app.
Create a custom attribute directive in Angular to enforce consistency, reduce duplication and simplify your templates
In this blog, I explain the different types of directives in Angular, create a custom attribute directive and use it in a template.
Add an http-interceptor service in Angular to modify outgoing requests and handle incoming responses
In this blog, I will show you how you can add an http-interceptor service to your Angular project to intercept outgoing requests to simplify and make your http requests consistent, as well as intercept incoming responses to handle a
504 Gateway Timeout situation by retrying automatically.
In this blog, I will show you how you can add Service Worker to an Angular application and then configure it to work offline, including chaching some remote data. I will also show you how to do testing in your development environment and how to detect new versions of the service worker and notify the user that an update is available.
In this blog, I will show you how you can add a link preview to any application, such as a forum, where you want the user to be able to add links and see the link preview.
In this blog, we will create from scratch a navigation scheme suitable for a progressive web app that includes a fixed footer and header as well as a slide-out side-nav.
Learn how to add a Page Not Found component you can redirect users to for invalid routes, and then automatically redirect them to your home page after several seconds.