Forem: Diogo Machado

How to sincronize data with the localStorage using Signals

Diogo Machado — Wed, 31 Jul 2024 00:40:36 +0000

Signals introduced new possibilities for Angular developers, personally I've been using a lot and exploring these possibilities, one of them is the straightforward way to sync data with localStorage (or sessionStorage).

It is amazing because sometimes we want to save the progress of some form or data in the browser, so lets see how to do it.

Create some interfaces

These interfaces are only there to define the shape of the state.

export interface Item {
  id: string;
  name: string;
}

export interface StateInterface {
  items: Item[] | null;
}

Create a new service

@Injectable({
  providedIn: 'root',
})
export class StateService {
  state = signal<StateInterface>(
    JSON.parse(localStorage.getItem('todo-data')!) as StateInterface
  );

  syncStorage = effect(() => {
    localStorage.setItem('todo-data', JSON.stringify(this.state()));
  });
}

Yes, its only it! Always the signals receive a modification, your localStorage will update! Amazing!

Demo

https://stackblitz.com/edit/stackblitz-starters-xa5w9r?file=src%2Fmain.ts

Creating a Snackbar using Signals and Tailwind CSS generated with V0

Diogo Machado — Mon, 10 Jun 2024 13:49:21 +0000

Recently I discovered how easy it is to create a component that serves the whole application using signals to manage the state, without needing to include a complex library like NgRx.

For this experiment, I also use the power of V0.dev, which provides an artificial intelligence to create components React or pure HTML with Tailwind CSS.

Creating the UI using V0

Enter in the v0.dev and put a prompt with the idea of the UI you want, in this case, I put:

A clean snackbar com title, description and a button in the right side

Step 1

Step 2

Step 3

That's it, thanks v0 and Tailwind CSS 🥰

Structure used to organize

You are free to organize your own idea, but in my experience, I use:

/components

Seems obvious, but this is where I store my components.

/components/models

The file snackbar.ts is used to export the interface used on the component.

export interface SnackbarOptions {
  visible: boolean;
  title?: string;
  description?: string;
}

Often when we create a new component with the Angular CLI, we have these files:

snackbar.component.html
snackbar.component.ts
snackbar.component.spec.ts
snackbar.component.scss

To create the state of the component, I included a new file called snackbar.state.ts, which contains the initialization of the signal.

import { signal } from '@angular/core';
import { SnackbarOptions } from './models/snackbar';

export const InitialState: SnackbarOptions = {
  visible: false,
};

export const SnackbarState = signal(InitialState);

Now we need to put the template of the component in the place of the application (generally where we have the <ng-outlet> if you work with routes), this strategy with Signals is possibly due to the nature of Signal, we can easily listen to the changes of a signal using effect() inside the constructor().

In this example, I used the main.ts file:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SnackbarComponent],
  template: `
    <main>
      @if(snackbar) {
        <snackbar
          [title]="snackbar.title"
          [description]="snackbar.description"
          [visible]="snackbar.visible"
        ></snackbar>
      }
    </main>
  `
})

This is where the magic happens, using the special method effect, Angular can identify and update the value of a signal:

export class App {
  snackbar: SnackbarOptions | undefined;

  constructor() {
    effect(() => {
      this.snackbar = SnackbarState();
    });
  }
}

To test the Snackbar, we are going to include a method to update the signal, the interest is you are free to update the Snackbar in any place of the application, you should only import the snackbar.state.ts, and the Snackbar effect() placed in the app will happen, nice isn't it?

handleOpen() {

    SnackbarState.update((currentSnackbar) => {

      return {

        ...currentSnackbar,

        visible: true,

        title: 'LinkedIn',

        description: 'Amazing, it works fine!',

      };

    });

}

Demo

References:
https://angular.dev/guide/signals

How to create an input search with debounce using Rxjs on Angular

Diogo Machado — Sun, 28 Jan 2024 16:17:57 +0000

Sometimes we need to create features like a search component that calls the API to return a search based on a string typed. The problem is we should prevent the application from calling the API many times because the user can type a lot fast and it is a problem.

Many developers would solve it with a library like Lodash, forgetting that it is super easy to solve it with Rxjs, the library included on the framework Angular.

In this example, I will focus on resolution with debounce using a simple component and input.

<input 
 type="text" 
 [ngModel]="search" 
 (ngModelChange)="handleSearch($event)" 
 placeholder="Quick Search">

Using the (ngModelChange) we are able to listen to any change on the model and get the last value, using standalone components we need to import FormsModuleas well.

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<input type="text" [ngModel]="search" (ngModelChange)="handleSearch($event)" placeholder="Quick Search">`,
  imports: [FormsModule],
})

Now all you need is a bit of code:

1) Declare the search variable:

search = '';

2) Initialize a BehavierSubject:

 searchSubject = new BehaviorSubject<string>('');

3) Sends the value to the Subject using ngModelChange:

handleSearch(search: string) {
  this.searchSubject.next(search);
}

4) Subscribe the Subject:

constructor() {
    this.searchSubject
    .pipe(debounceTime(550))
    .subscribe((search) => {
      console.log('Searching', search);
    });
}

Final results 🙌

Demo application

Using the View Transition API on Angular Framework

Diogo Machado — Sun, 21 Jan 2024 18:54:42 +0000

Recently the framework Angular launched exiciting features in the V17 version, in this article we will learn how to start using the View Transition API. This feature does not have good documentation, the idea here is to explain in practice.

In the demo project, we simulate a list of products, and when the user selects one, the application opens a new route with a smooth transition.

The View Transitions API is still experimental in both (browsers and Angular), you can check the actual support here https://caniuse.com/view-transitions.

Without View Transition enabled

Enabling View Transition with Angular

The first thing you need to do is to include the withViewTransitions() along with the proviceRouter.



const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'product/:id', component: ProductComponent },
];

bootstrapApplication(App, {
  providers: [provideRouter(routes, withViewTransitions())],
});

With default View Transition effect

Customizing the default animation



@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
}

::view-transition-new(root) {
  animation: 2s cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
}

Animating isolated elements

Is important that each element have a unique name, in a @for example, if you set the same name for each element in the loop, the view transition will not work.


 html
<h1>Products</h1>
<div class="grid">
  @for(product of products; track product.id) {
  <a
    routerLink="product/coffee-65324"
    (mouseenter)="setCurrentId(product.id)"
    class="card"
  >
    <header>
      <img
        [style.view-transition-name]="returnViewTransition(product.id)"
        src="https://picsum.photos/id/63/367/267"
      />
    </header>

    <div class="content">
      <h2 class="card__title">{{ product.name }}</h2>
      <p class="card__price">$3</p>
    </div>
  </a>
  }
</div>

In the path "/", our list have a loop of products, in each item, we will add:


 html
 <img
   [style.view-transition-name]="returnViewTransition(product.id)"
   src="https://picsum.photos/id/63/367/267"
 />

As mentioned, we need to respect that only one element will have the property view-transition-name: banner, this little method will ensure to return it at the right moment. My strategy here was:

Create a small service inject root with a parameter signal to store the current id that the user is navigating with the cursor.
returnViewTransition will return dinamic based on the comparison of the product id in the loop and the current id in the signal.

Inside the /product/:id route, we have this block:


 html
<header class="hero">
  <img src="https://picsum.photos/id/63/1280/720" />
  <button class="close-btn" routerLink="/">Back</button>
</header>

Now we need to tell the browser the view-transition-name associated with the home image:



 css

.hero img {

  width: 100%;

  view-transition-name: banner;

}

Final result

Demo project

https://stackblitz.com/edit/stackblitz-starters-ba6uus?file=src%2Fpages%2Fhome%2Fhome.component.html

References

How to understand the CSS specificity with the help of Visual Studio Code

Diogo Machado — Sun, 16 Feb 2020 15:20:01 +0000

Most people start writing CSS code without know correctly what is the concept called specificity in the CSS language.

First, we should understand what is specificity. When the browser renders the elements on the screen, he has a logic for prioritizing styled elements of DOM.

For calc the specificity number, the browser considerer the list selectors type:

Type elements: a, h1, p
Class elements: .wrapper
ID elements: #example

To better understand how the calc works, go to know what is the number and what they represent for us.

X-0-0

Consider that X is the number of ID selectors in the selector

0-Y-0

Y represents the number of class selectors, attribute selectors, and pseudo-classes

0-0-Z

Z represents the number of type selectors and pseudo-elements

*, +, >, ~ not increasing specificity

Is important to remember that of force is more powerful of left to right, so, X > Y > Z

Example 1: specificity 0-0-1

div{

}

Example 2: specificity 0-0-2

div p{

}

Example 3: specificity 0-0-5

div p a ul li{

}

Example 4: specificity 0-1-0

.wrapper{

}

Example 5: specificity 0-1-1

.wrapper p{

}

Example 6: specificity 1-0-0

#user{

}

The most powerful elements in the browser, that may destroy all specificity in your stylesheet is the inline styles, in the next example does not matter what is determinate in the class selector .link, the style is more powerful in the specificity.

<a class="link" style="color: black;">Read more</a>

Another way is the !important, it can destroy all your specificity because he is the strongest.

Using the VS Code for visualizing the specificity

Maybe you don't know that if you point your mouse of the selector CSS, the VS Code let show you the calc of specificity, is super simple, try it.

I hope you liked this, share with your friends.

Amazing examples of this:
https://specifishity.com/

Tips for new Angular developer

Diogo Machado — Wed, 25 Dec 2019 00:58:25 +0000

When working with Angular know that isn't always the somethings make how you think. After along time you learning tips that can help you going the work more productive.

Use environments for the control you build

In Angular can be not so explicit but you can have more of two environments, for example, if you need an environment-specific for docker-machine, just you create a new file environment.docker.ts, you than need change angular.json for add the new file in the configuration build and serve.

"docker": {
 "fileReplacements": [
   {
     "replace": "src/environments/environment.ts",
     "with": "src/environments/environment.docker.ts"
   }
  ]
 }

If you need to use ng-serve, add line forward:

"docker": {
   "browserTarget": "app:build:docker"
}

Pipes are the power of Angular

The big think about Angular into your organization and big possibles, of course, is the Pipes. They can be a superpower to process anything you need showing for your user.

Components are your friend

Another think of the power of framework Angular is the components, they can be re-used so this opens a large opportunity for your application.

Create services, primarily to connect APIs

Angular has a good structure for dividing your application, this is awesome because of stay easy for support in the future, services are special to connect with APIs and consume data.

It is just this, a hope that tips can help you in your code work.

Tips ORM Laravel that can help you

Diogo Machado — Wed, 18 Dec 2019 01:50:10 +0000

The Eloquent ORM Laravel is too difference ORM that all others Framework that I used, he really help us are productive work, let's go around a somethings tips that I separated for you.

1. Order by

$items = Item->orderBy('created_at', DESC)->get();

2. Where

$items = Item->where('category_id', $id)->orderBy('created_at', DESC)->get();

3. Where month (Ex.: January)

$items = Item->whereMonth('created_at', '1')->get();

4. Where year

$items = Item->whereYear('created_at', '1999')->get();

5. Where between

$users = DB::table('users')->whereBetween('votes', [1, 100])->get();

You can also use aggregate, sum, max, min, count, avg, for example

6. Aggregate

$users = DB::table('users')->count();

Sometimes, you may not want to select all columns, so, using select method, you can specify the columns you need

7. Select specify columns

$users = DB::table('users')->select('name', 'email as user_email')->get();

8. Select random row

$randomUser = DB::table('users')
                ->inRandomOrder()
                ->first();

9. Union querys

$first = DB::table('users')
            ->whereNull('first_name');

$users = DB::table('users')
            ->whereNull('last_name')
            ->union($first)
            ->get();

10. Join tables

DB::table('users')
        ->join('contacts', function ($join) {
            $join->on('users.id', '=', 'contacts.user_id');
        })
        ->get();

It`s, I hope you like ten tips of Eloquent Power, if you need read more about this topic, check out the documentation of Laravel:

See you later!

How build amazing touchscreen applications

Diogo Machado — Sat, 14 Dec 2019 14:09:35 +0000

In the last year I'm have opportunity work with a project different, was requested build a system for reception people here I work, that is a somewhere where people going to make exams medics.

The primary requisite of system are that work good in touchscreen, but I had not experience with this type layout. The primary think that you have when you want make system for touchscreen is the components, in my case, buttons ands cards having big for confortably touch users, another motive is that screen is too large and the design need ocuppated all the screen.

I working in this solution since 2018, and now we going a good experience, we think in encapsulate the keyboard developed in the Github for another people use.

I want write more details this project in the future, for now, my tip is that you need differenciete your thinking when you build applications touch, is important remember that users not use your solution with mouse our keyboard, and the components need otimizate for the touch.

Exist a book amazing that I reading now called "Designing For Touch – Josh Clark", I recommend read this book if you need undertand the enviroment around touchscreen development.

This is my first post here, I hope you like!