www.angulartraining.com/daily-newsletter/date-pipe-default-format-and-timezone/
Angular – Date pipe default format and timezone | Angular Newsletter
www.angulartraining.com/daily-newsletter/date-pipe-default-format-and-timezone/
My bookmarks and blogposts regarding Software Development in .NET, C#, Angular, JavaScript, CSS, Html
During web application development, we create solutions that address the customers’ needs and solve problems of businesses and users. To achieve this, different architecture patterns and technologies are used. For many years, application designs have revolved around the In the meantime, there have been a series of advanced frameworks like Flux and Redux, in the same vein, which helps you deal with complex applications. We are aware of the increased complexity in apps that multiplies due to the absence of effective design patterns in place. Here we have compared MVC vs Flux vs Redux to help you create effective, sensible and scalable application architecture.
Continue reading “MVC vs Flux vs Redux: Key Differences Explained”
What is DeepWiki?DeepWiki provides up-to-date documentation you can talk to, for every repo in the world. Think Deep Research for GitHub.
Source: DeepWiki | AI documentation you can talk to, for every repo
I finally understood multithreading — and now my code runs 10x faster. Multithreading used to sound like magic. Or worse — a trap full of race conditions, deadlocks, and endless debugging. But once I broke it down, I realized: It’s just parallel thinking with safety checks. Here’s what helped it all click:
🔹 Threads = multiple tasks running in parallel
🔹 Mutex/locks = only one thread can access shared data at a time
🔹 Race Conditions = when threads clash over shared state
🔹 Deadlocks = when threads wait
When working on large Angular projqects, managing dependencies between files and modules can become a challenge.
Here are 2 tools to help you visualize dependencies in an Angular project.
npm install -g madge
npx madge src/main.ts --ts-config tsconfig.json --image ./deps.png
npx madge src/app/app.component.ts --ts-config tsconfig.json --image ./deps.png
Detect circular dependencies:
npx madge --circular src/main.ts
--ts-config tsconfig.json
Detect dead code (code that is never referred to anywhere in your app):
npx madge --orphans src/main.ts --ts-config tsconfig.json
Compodoc – “The missing documentation tool for Angular..”
# Install globally compodoc with npm npm install -g @compodoc/compodoc # Create a file named tsconfig.doc.json in project root, containing: { "include": ["src/**/*.ts"] } # Run compodoc in your project root and serve it on http://127.0.0.1:8080 (will output html based documentation in ./documentation path. npx compodoc -p tsconfig.doc.json -s
This dont always work but here is a simplistic approach:
npm install
Use the npm-check-updates command to get a list of recommended version updates for all npm packages in the project. (E.g. what is the latest available version number for all the packages)
In Angular project root (where the package.json file is) run:
npx npm-check-updates
(is just a dry run wont change anything)
npx npm-check-updates -u
(updates the package.jon file, follow up by npm install
to actually install the new versions)
More info: https://www.npmjs.com/package/npm-check-updates
A recommended approach is to update all “Angular” type of packages first and then any “non Angular packages”.
In Angular project root edit package.json:
Bump all packages with the word “angular” in them to the latest version number (see output from the npm-check-updates command). See this PR diff as an example:
https://dev.azure.com/who-umc/Products/_git/CAT/pullrequest/12413?_a=files&path=/Umc.Cat.Core/src/ClientSPA/package.json
Then run:
npm install
-> might get dependency errors, cant install
npm install --force
-> forces the install of angular packages
In the above mentioned scenario (just bump angular packages) this works.
As a second step; repeat this for all non-angular packages.
Whats the difference between ~ and ^ in the acceptable version “interval” value in package.json?
See:
https://stackoverflow.com/questions/22343224/whats-the-difference-between-tilde-and-caret-in-package-json
value | desc |
---|---|
~version |
Approximately equivalent to version, i.e., only accept new patch versions See npm semver – Tilde Ranges |
^version |
Compatible with version, i.e., accept new minor and patch versions See npm semver – Caret Ranges |
version |
Must match version exactly |
>version |
Must be greater than version |
>=version |
Must be equal or greater than version |
<version |
Must be lesser than version |
<=version |
Must be equal or lesser than version |
1.2.x |
1.2.0, 1.2.1, etc., but not 1.3.0 |
* |
Matches any version |
latest |
Obtains latest release |
The above list is not exhaustive. Other version specifiers include GitHub urls and GitHub user repo’s, local paths and packages with specific npm tags
More tips see this blobpost:
https://www.hostingadvice.com/how-to/update-npm-packages/
A useful npm command for showing peer dependencies of 1 level down:
npm ls --depth=1
(Vary the depth number to show deeper dependencies)
Here is an excellent blog post regarding Angular Error Handling:
Error handling is as much of an important topic as it is also hated, and even more so, overlooked. Of course, we all enjoy authoring cool features, fascinating animations and beautiful UIs, but not so much do we love writing a bunch of code whose only purpose is to save us when something goes wrong.
However, an important part of a developer’s journey to maturity is realizing that errors are inescapable. A third-party library might contain a bug; a network request might fail; something might be wrong with the end user’s machine. In all such scenarios – and more – we need to be able to meet these errors gracefully, and not allow our application to break because of simple scenarios that we are capable of anticipating.
Source: Angular Error Handling
How to move from from zone.js change detection into zoneless Angular summary.
Zoneless Angular marks a shift away from Zone.js toward a more modern and efficient approach. Let’s find out what it means and how to prepare your apps to be future-proof and ready for what’s next.