DEV Community: Thomas Coucke

Consumer tech problem, developer's solution: A new smartphone, an old bug

Thomas Coucke — Tue, 19 Nov 2024 05:14:00 +0000

I received my new smartphone Today. My current one is running on Android 10 (Q). Dev hive mind first step: before transferring old to new, make a backup.

That _should _ be straightforward:

Settings > Google > Backup now

But straightforward tutorials where steps yield the expected result only exist in fairy tails... . Backup now was greyed out and thus not an option. After some research I found 2 possible fixes: the UI-based one of disabling all security locks temporarily or the more technical nerdy but structural way. Guess which one I chose... .

I'm using Windows here but you will get the gist for other operating systems.

1. Developer options menu
The first thing a developer does when setting up a new Android device is enabling the developer options menu. Just for the sake of it:

go to Settings _> _About device or phone > tap Build number 7 times

2. USB debugging
Turn on USB debugging in the developer options menu and connect the smartphone to your pc.

3. Android SDK platform tools

Download the tools here (if you haven't got them already).
Unzip to a folder.
Open command prompt and navigate to the above folder.

4. Do your magic

Run adb shell to get a cli prompt.
Start the backup manager with with bmgr run
Execute bmgr backupnow -–all to begin the backup.
Restart your phone

That's it! The Backup Now button should be enabled again. All thanks and credit go out to the XDA Developers community. If error messages turn up be sure to check out this thread on their Forum.

I take my morning coffee with a hint of Angular: Quick Tip #1 - Shortened import paths in TSConfig

Thomas Coucke — Fri, 15 Nov 2024 06:00:00 +0000

In Angular development, long import paths can slow down large projects in the long run. TypeScript allows you to configure shortened import paths through the compilerOptions in your tsconfig.json file. It not only makes your code cleaner but also easier to maintain. When starting a project this is something you want to implement from the start. Projects get too big too fast with little time to refactor. This will save some time further on... .

Open your tsconfig.json file

The tsconfig.json file is usually located at the root of your Angular project. This is where you'll add the path mappings. If you have multiple apps, you can use the project-specific tsconfig-file like tsconfig.app.json

Add path mappings

Inside the compilerOptions section, add a paths property. This property is an object where the keys are the alias you want to use, and the values are arrays containing the actual paths.

{
   "compilerOptions":{
      "baseUrl":"./",
      "paths":{
         "@vinyl/*":["src/app/modules/music/collection/records/vinyl/*"]
      }
   }
}

In this example, @vinyl/* will now refer to any file under the src/app/modules/music/collection/records/vinyl directory.

Using the aliases

With the aliases configured, you can now use them in your import statements. For instance, instead of using:

import { VinylRecordBuilder } from '../../../app/modules/music/collection/records/vinyl/vinyl-record.builder';

you can use

import { VinylRecordBuilder } from '@vinyl/vinyl-record.builder';

✅ Pros	⛔ Cons
Cleaner Code: Import statements are shorter and more readable. Maintainability: Easier to refactor paths if your project structure changes. Consistency: Enforces a standardized way of importing modules across your project.	No intellisense support

Angular resources I often return to

Thomas Coucke — Sun, 10 Nov 2024 11:18:56 +0000

Angular is known for having a high learning curve. But once you get the hang of it, it's a fantastic tool. I've been working with it for over a year now and have built up my knowledge on my own. I consider myself to be at an intermediate level now. Along the way, I've found a few resources that I return to. To help beginners get started or intermediate skills grow, I'd like to recommend a few.

Official
Angular.dev
The place to start and return to. Beginners will value the docs' in-depth guides and best practices. More intermediate developers like myself have the api reference bookmarked.

Angular blog
Resource for the latest official news. I do not use this one very often, I prefer setting notifications on the Github repo and start from there.

Angular Material
If your aim is Material Design then the official library and guides are invaluable resources.

Material symbols
When using Material Icon Component this one comes in handy if you need specific icons.

Beginner
Angular University Blog
When starting with Angular I found myself visiting this blog very often. It is very detailed and clear in explaining concepts.

Learn RxJs
Reactive programming can be overwhelming. The official RxJs API isn't really targeted at new developers. Although this wasn't my first encounter with reactive programming, Learn RxJs is more manageable for understanding its concepts. The pitch on in the operators section says it all.

A complete list of RxJS operators with clear explanations, relevant resources, and executable examples.

Tek Tutorials Hub
Another great resource aimed at beginners. More to the point and less overhead than Angular University Blog (at least in my opinion). But as your your skills evolve in Angular, you will find this one more rewarding.

Intermediate
Angular.love
Angular.love has recently joined forces with Angular In Depth. I loved Angular in Depth for more intermediate explanation and andvanced topic handling.

Official github repo
Sometimes, if it has never been done before or you doubt the quality of the code a resource is presenting, the best thing you can do is dive in the official code. As with other frameworks, it is the place I learn the most, especially in tests.

Pictogrammers Material Design Icons
When your design requires icons not available in the official font this is the place to start before creating them yourself. Note that you will need to incorporate custom icons, but I'll lay out the specifics in another post.

Refactor Guru
Not an Angular resource per se, but very helpful for starting on a project that will scale up in time. Especially the typescript examples on design patterns come in handy from time to time.

Stackblitz
Again, not an Angular resource but this tool is used even by the Angular developers. You can set up an instant dev environment for angular. Most official Material examples have a Stackblitz link like Highlighting the first autocomplete function. Besides creating a new environment, you can fork existing ones, test your customizations and eventually implement the results in your own code. I like it very much.

People I follow
Sometimes you get to know developers and trust the quality of their output. These are people I regularly check in with to learn new concepts or keep up to date with Angular news.

Netanel Basal
Explains new and more intermediate concepts hands-on.

Tim Deschryver
Microsoft MVP but also an Angular enthusiast at enterprise level. I swear I did not know he was a fellow Belgian at first. Really, we Belgians often assume most professionals are Dutch when deducing nationality by name only.