Forem: Freddy Montes

How to manage Angular state in your components

Freddy Montes — Mon, 30 Nov 2020 00:22:22 +0000

Thanks @AlexOkrushko and @Nartc1410 for the great feedback.

Managing the state of your Angular application has always been a challenge.

In this tutorial, I will explain how to manage your components' state with @ngrx/component-store. You will be able to do it in a more organized way and minimizing bugs and UI inconsistencies.

Table of content

Prerequisites
What are we going to build?
What is the "state"?
Not all Angular apps need NgRx or NGSX
The problem
The solution: @ngrx/component-store
- When to use an @ngrx/store or @ngrx/component-store?
- My recommendation
- @ngrx/component-store concepts
Getting started
- Initializing the application
- Creating utilities
- Defining the state
- Install @ngrx/component-store
- Creating the store service
- Creating the car-list component
- Adding the FormModule
- Consuming the store service
- That's it
- Summary
- Conclusion

Prerequisites

Basic knowledge of Angular
Basic knowledge of RXJS
angular-cli installed or Stackblitz account

What are we going to build?

An application to manage car parking and will have the following parts:

store.service: Where we will manage all our state and all the logic of the UI
parking-lot.service: To communicate with the backend (for the demo)
app.component: Parent component. We consume the state and add cars to the parking lot
car-list.component: To show the list of parked cars

If you wish, you can jump to source code, without obligation 🤓 or directly to the tutorial.

What is the "state"?

It is the representation of your UI using an object, and we could change it in different ways, for example:

Networks request
User events
Changes in the router
Among others

Example:

state = {
    cars: [],
    loading: true,
    error: '',
}

List of cars in the parking lot: cars: []
To change the UI of our app while doing an operation that takes time to resolve, for example, a network request: loading: true
To show errors that may occur during the execution of the application: error: ''

Almost all components have a state. We handle them indirectly by using properties and changing them during their life cycle.

In short a state is:

It is an object that represents the view of your component
It is not the data that comes from the server, in fact, this may be part of it
It can have as many levels as you need
It is immutable. When you need to update a property, you don’t change it directly but create a new object with the modified property.

Not all Angular apps need NgRx or NGSX

Most Angular applications do not need a full-blown state management system. It is best to manage the state at the component level before implementing a more complex app-level solution like NgRx or NGSX.

Tweet Link

The problem

If you have a smart component with several child components, you probably have many properties in your parent component that you need to pass to the child components.

For sure, your child’s components emit events that will change the properties in its parent.

Keep all these changes in order and under control can become a tedious task because the properties change in many places that can be hard to track, especially in async tasks.

The solution: @ngrx/component-store

The same NgRx team developed @ngrx/component-store. A service based on ReplaySubject can extend to a service and be consumed by a component.

It allows you to keep all the business logic outside the component (or components) and only subscribes to the state and updates the UI when it changes.

The service you create by extending ComponentStore is unique to a particular component and its children and should be injected directly into the component’s providers property.

When to use an @ngrx/store or @ngrx/component-store?

In your application, you can use both. Both libraries complement each other.

If the state needs to persist when you change the URL, that state goes in your global state
If the state needs to be clean up when you change the URL that goes in your component store

More information in Comparison of ComponentStore and Store.

My recommendation

If you don't have any state management in your app and want to start with one, I recommend starting with @ngrx/component-store and evaluating if you need something more complicated in the future.

In this way, you can start implementing state management in parts of your app and scale efficiently.

@ngrx/component-store concepts

It has only three very simple concepts that you have to learn:

Selectors: You select and subscribe to the state, either all or parts of it
Updater: To update the state. It can be parts or in whole
Effects: It is also to update the state but do some other necessary task beforehand. For example, an HTTP request to an API

Getting started

The application will have a UI with three sections:

Form to add the cart
Table with parked cars
Error messages

Initializing the application

The first step is to create a new Angular application. With angular-cli. Open a terminal, run the command:

ng new parking-lot-app

We start the application that we created:

cd parking-lot-app
ng serve

Then point your browser to http://localhost:4200/, and you will see your Angular application running with all the information by default.

Creating utilities

The first thing you are going to create is the "Car" interface. You run the command:

ng g interface models/car

Open the file app/models/car.ts and add:

export interface Car {
    plate: string
    brand: string
    model: string
    color: string
}

The above is the very basic model of the car.

Then you create a service that will communicate with the "backend" (only for the demo). You run the command:

ng g service services/parking-lot

Open the file app/services/parking-lot.service.ts and add:

import { Injectable } from '@angular/core'
import { Observable, of, throwError } from 'rxjs'
import { delay } from 'rxjs/operators'
import { Car } from '../models/car'

const data: Car[] = [
    {
        plate: '2FMDK3',
        brand: 'Volvo',
        model: '960',
        color: 'Violet',
    },
    {
        plate: '1GYS4C',
        brand: 'Saab',
        model: '9-3',
        color: 'Purple',
    },
    {
        plate: '1GKS1E',
        brand: 'Ford',
        model: 'Ranger',
        color: 'Indigo',
    },
    {
        plate: '1G6AS5',
        brand: 'Volkswagen',
        model: 'Golf',
        color: 'Aquamarine',
    },
]

const FAKE_DELAY = 600

@Injectable({
    providedIn: 'root',
})
export class ParkingLotService {
    private cars: Car[] = []

    constructor() {}

    add(plate: string): Observable<Car> {
        try {
            const existingCar = this.cars.find((eCar: Car) => eCar.plate === plate)

            if (existingCar) {
                throw `This car with plate ${plate} is already parked`
            }

            const car = this.getCarByPlate(plate)
            this.cars = [...this.cars, car]

            return of(car).pipe(delay(FAKE_DELAY))
        } catch (error) {
            return throwError(error)
        }
    }

    private getCarByPlate(plate: string): Car {
        const car = data.find((item: Car) => item.plate === plate)

        if (car) {
            return car
        }

        throw `The car with plate ${plate} is not register`
    }
}

data: A list of the cars registered in our system. It will act as your car database for the demo.

FAKE_DELAY: To simulate a small delay to the API request using thedelay operator from rxjs

Methods:

add: which receives the vehicle license plate and if it exists adds it to the list of parked cars and if it does not return an error.

getCarByPlate: this private method only searches our "database" (data) for the car using the plate, and if it does not exist, it throws an error.

Properties:

car: To keep track of the cars parked in the "backend".

Defining the state

To define the state, let’s see the application requirements:

User will add cars by license plate (a request to an API)
You must indicate to the user the errors:
- The vehicle plate does not exist in the API
- The vehicle is already parked
You must show indicators in the UI when a request is happening
- Loading: change the button text while the request happening
- Disable: the button and the text field while the request happening
- Show the error when it occurs

Based on these requirements, the state of your UI would be as follows:

interface State {
    cars: Car[]
    loading: boolean
    error: string
}

A list of parked cars
A boolean for when the app is making a request
A string for error messages

Install @ngrx/component-store

To add @ngrx/component-store to your app use npm:

npm install @ngrx/component-store --save

Creating the store service

Create the file: app/store.service.ts and add the following code:

import { Injectable } from '@angular/core'
import { ComponentStore } from '@ngrx/component-store'
import { Car } from './models/car'

// The state model
interface ParkingState {
    cars: Car[] // render the table with cars
    error: string // show the error when try to add cars
    loading: boolean // used to enable/disable elements in the UI while fetching data
}

@Injectable()
export class StoreService extends ComponentStore<ParkingState> {
    constructor() {
        super({
            cars: [],
            error: '',
            loading: false,
        })
    }
}

This code is the base of your StoreService:

You imported Injectable (like any other service) and ComponentStore
You created a ParkingState interface that defines the state of your component
You created the StoreService class that extends from ComponentStore and pass the interface
You initialized the UI state through the constructor makes the state immediately available to the ComponentStore consumers.

Now you are going to add the rest of the code, selects, updaters and effects. Your service code would be:

import { Injectable } from '@angular/core'

import { ComponentStore } from '@ngrx/component-store'
import { EMPTY, Observable } from 'rxjs'
import { catchError, concatMap, finalize, tap } from 'rxjs/operators'
import { Car } from './models/car'
import { ParkingLotService } from './services/parking-lot.service'

// The state model
interface ParkingState {
    cars: Car[] // render the table with cars
    error: string // show the error when try to add cars
    loading: boolean // used to enable/disable elements in the UI while fetching data
}

@Injectable()
export class StoreService extends ComponentStore<ParkingState> {
    constructor(private parkingLotService: ParkingLotService) {
        super({
            cars: [],
            error: '',
            loading: false,
        })
    }

    // SELECTORS
    readonly vm$: Observable<ParkingState> = this.select((state) => state)

    // UPDATERS
    readonly updateError = this.updater((state: ParkingState, error: string) => {
        return {
            ...state,
            error,
        }
    })

    readonly setLoading = this.updater((state: ParkingState, loading: boolean) => {
        return {
            ...state,
            loading,
        }
    })

    readonly updateCars = this.updater((state: ParkingState, car: Car) => {
        return {
            ...state,
            error: '',
            cars: [...state.cars, car],
        }
    })

    // EFFECTS
    readonly  = this.effect((plate$: Observable<string>) => {
        return plate$.pipe(
            concatMap((plate: string) => {
                this.setLoading(true)
                return this.parkingLotService.add(plate).pipe(
                    tap({
                        next: (car) => this.updateCars(car),
                        error: (e) => this.updateError(e),
                    }),
                    finalize(() => {
                        this.setLoading(false)
                    }),
                    catchError(() => EMPTY)
                )
            })
        )
    })
}

It’s quite a bit of code, so I will explain it to you in parts and start with the selectors.

Selectors

To create a selector, the select method is used as follows:

readonly vm$: Observable<ParkingState> = this.select(state => state);

The select method expects a function that receives the full state. With this state, we can return to the components what is needed; in this case, it returns the entire state.

In this app, you need a selector, but you can have more than one.

Updaters

To update the state, you will need three updaters:

To add or remove the error message
To update the loading
To add cars to the parking lot

To create updaters, use the update method provided by the ComponentStore class.

The method receives a function with two parameters, the first is the current state, and the second is the payload the component sent to update the state. This method only has to return the new state.

Error y loading

readonly updateError = this.updater((state: ParkingState, error: string) => {
    return {
        ...state,
        error
    };
});

readonly setLoading = this.updater(
    (state: ParkingState, loading: boolean) => {
        return {
            ...state,
            loading
        };
    }
);

The updateError receives the error message and use the spread operator to combine with the old state and return the new state.

The setLoading works the same as the previous one but with the loading property.

Add cars to parking

This updater receives a car and just adds it to the cars array using the spread operator.

readonly updateCars = this.updater((state: ParkingState, car: Car) => {
    return {
        ...state,
        error: '',
        cars: [...state.cars, car],
    };
});

IMPORTANT: When you update the state, you don't mutate the object (changing some property directly) but return a new object always.

Effects

To add a car to the parking lot, you have to create an effect because you have to make a request to an API with the car’s license plate, and when it responds, the state is updated.

We use the effect method that receives a callback with the value that we pass as an Observable to create effects. Keep in mind that each new call of the effect would push the value into that Observable.

readonly addCarToParkingLot = this.effect((plate$: Observable<string>) => {
    return plate$.pipe(
        concatMap((plate: string) => {
            this.setLoading(true);
            return this.parkingLotService.add(plate).pipe(
                tap({
                    next: car => this.updateCars(car),
                    error: e => this.updateError(e)
                }),
                finalize(() => {
                    this.setLoading(false);
                }),
                catchError(() => EMPTY)
            );
        })
    );
});

In this code, you can see that the effect:

Receive the car license plate as an Observable
Update the state of loading
Request the API to add the car to the parking lot using the ParkingLotService.
When the request is successful, update the state again: remove the loading and add the cart to the state.
If it fails: remove the loading and update the state with the error coming from the “backend”

Using concatMap so that if the effect gets called multiple times before the call ends, it will resolve all the calls. This RxJS operator will wait until the previous request completes to do the next one.

The tap operator to handle the case of success and error.

And the catchError to handle potential errors within the internal pipe.

Creating the `<car-list>` component

Run the following command to generate the component.

ng g component components/car-list

In the components/car-list.component.ts file, add the following code:

import { Component, Input } from '@angular/core'
import { Car } from '../../models/car'

@Component({
    selector: 'app-car-list',
    templateUrl: './car-list.component.html',
    styleUrls: ['./car-list.component.css'],
    providers: [],
})
export class CarListComponent {
    @Input() cars: Car[] = []

    constructor() {}
}

In the components/car-list.component.html file, add the following code:

<table *ngIf="cars.length; else noCars">
    <tr>
        <th>Plate</th>
        <th>Brand</th>
        <th>Model</th>
        <th>Color</th>
    </tr>
    <ng-template ngFor let-car [ngForOf]="cars" let-i="index">
        <tr>
            <td>{{car.plate}}</td>
            <td>{{car.brand}}</td>
            <td>{{car.model}}</td>
            <td>{{car.color}}</td>
        </tr>
    </ng-template>
</table>

<ng-template #noCars>
    <p>No cars in the parking lot</p>
</ng-template>

In the components/car-list.component.css we make the table looks fancy:

table {
    width: 100%;
    border-collapse: collapse;
}

td,
th {
    border: solid 1px lightgray;
    padding: 0.5rem;
    text-align: left;
    width: 25%;
}

th {
    border-bottom-width: 3px;
}

p {
    text-align: center;
}

Finally, make sure that the car-list component is added to the module.

Open the app/app.module.ts file, look into the declarations array, and if it is not there, you can add the CarListComponent class manually.

Adding the `FormModule`

As you are going to have a small form with [(ngModel)] in the app.component, you must add the FormModule to the app.module

Open the app/app.module.ts file and add theFormsModule to the imports array. The final code looks like this:

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

import { AppComponent } from './app.component'
import { CarListComponent } from './components/car-list/car-list.component'
import { FormsModule } from '@angular/forms'

@NgModule({
    declarations: [AppComponent, CarListComponent],
    imports: [BrowserModule, FormsModule],
    bootstrap: [AppComponent],
})
export class AppModule {}

Consuming the store service

You created the service specifically for the app.component and its children.

`app/app.component.ts`

Add replace all the code with:

import { Component } from '@angular/core'
import { StoreService } from './store.service'

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [StoreService],
})
export class AppComponent {
    plate = ''
    vm$ = this.store.vm$

    constructor(private store: StoreService) {}

    onSubmit($event: Event) {
        $event.preventDefault()
        this.store.addCarToParkingLot(this.plate)
    }

    addPlate($event: Event) {
        const target = $event.target as HTMLButtonElement

        if (target.nodeName === 'BUTTON') {
            this.plate = target.innerHTML
        }
    }
}

StoreService handles all the business logic, which results in a tiny component. Let’s see the code part by part:

Providers

providers: [StoreService]: You inject the service at the component level so that this instance only has this component and its children.

Properties

plate: For the form model, the user will enter the car plate to add to the parking lot.

vm$ It is the observable state from our StoreService and is updated every time the state changes. We will subscribe to this in the HTML in the next step.

Methods

constructor(private store: StoreService) {}: You inject the StoreService into the constructor, just like a regular service.

onSubmit(): You call it when the form is submitted, and the only thing it does is call the store method addCarToParkingLot (effect) with the car plate entered by the user in the form.

addPlate(): This method is not necessary, but for demo purposes, I added it to enter some plates by clicking on some buttons.

`app/app.component.html`

Add replace all the code with:

<header>
    <h1>Parking Lot Control</h1>
</header>

<ng-container *ngIf="vm$ | async as vm">
    <div class="messages">
        <p class="error" *ngIf="vm.error">{{vm.error}}</p>
    </div>

    <div class="box">
        <form (submit)="onSubmit($event)">
            <input
                type="text"
                [(ngModel)]="plate"
                [ngModelOptions]="{standalone: true}"
                placeholder="Ex: 2FMDK3, 1GYS4C, 1GKS1E,1G6AS5"
                [disabled]="vm.loading"
            />
            <button type="submit" [disabled]="vm.loading || !plate.length">
                <ng-container *ngIf="vm.loading; else NotLoading">
                    Loading...
                </ng-container>
                <ng-template #NotLoading>
                    Add Car
                </ng-template>
            </button>
        </form>
        <div class="shortcuts">
            <h5>Shortcuts</h5>
            <p (click)="addPlate($event)" class="examples">
                <button>2FMDK3</button>
                <button>1GYS4C</button>
                <button>1GKS1E</button>
                <button>1G6AS5</button>
            </p>
        </div>
    </div>

    <app-car-list [cars]="vm.cars"></app-car-list>
</ng-container>

<ng-container *ngIf="vm$ | async as vm">: The first thing is to obtain the ViewModel of the vm$ property that we created in the component class, we use async pipe to subscribe, and we make a static variable vm that the rest of our HTML will be able to use.

Error message

The error is a string, so we just have to show it in the HTML and using interpolation:

<p class="error" *ngIf="vm.error">{{vm.error}}</p>

Form

We create a form for the user to enter the car's plate that they want to add to the parking lot, and we bind the onSubmit event.

<form (submit)="onSubmit()">

It is a small form with a textfield for the user to enter the plate and a button to execute the add action.

<input>: Enable/disable based on the state's loading property.

<button>: It is enabled/disabled with the loading property of the state but also if the plate property of the component is empty (it prevents an empty string from being sent to the store service)

In the onSubmit method of the component, we call the effect with the plate number entered by the user, and this is where our ComponentStore service does everything.

`app/app.component.css`

We add some styles to make our app very good-looking:

h1 {
    margin-bottom: 0;
}

.box {
    border: solid 1px lightgrey;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.box p {
    margin: 0;
}

.box form {
    display: flex;
}

.box form input {
    margin-right: 0.5rem;
}

.box form button {
    width: 80px;
}

.messages {
    height: 2.4rem;
    margin: 1rem 0;
}

.messages p {
    border: solid 1px transparent;
    margin: 0;
    padding: 0.5rem;
}

.messages .error {
    background-color: lightyellow;
    border: solid 1px red;
    color: red;
    text-align: center;
}

.examples button {
    border: 0;
    background: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    margin: 0 0.5rem 0 0;
}

.examples button:last-child {
    margin: 0;
}

.shortcuts h5 {
    margin: 0;
}

.code {
    margin-top: 3rem;
    border: solid 1px lightgray;
    padding: 1rem;
}

.code h4 {
    margin: 0 0 1rem;
}

.code pre {
    margin: 0;
}

And in the global style file src/styles.css:

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
        sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    margin: 3rem;
}

That's it

Go to your browser: https://localhost:4200 and see your app working.

Summary

You created a service that communicates with the API: ParkingLotService
You created a service that handles all the logic and state of the StoreService component that extends ComponentStore
Your UI subscribes to the state of StoreService, and every time it changes, your UI is updated.

Using this approach, you will end up with a single “source of truth” for your UI, easy to use without having to change code in many places to update or improve.

Conclusion

As you could see, it is better to start managing the state at the component level before jumping to a complete architecture.

A state is simply an object representing how your interface looks like, and using @ngrx/component-store and its three basic concepts: select,update and effect, you can handle it in a simple, direct, and more painless way test.

I hope this tutorial has been beneficial for you, and if you have any questions, you can write to me on Twitter by @fmontes.

How to add Instagram Photos to NextJS website

Freddy Montes — Mon, 05 Oct 2020 22:57:27 +0000

Showing your Instagram Photos in your website (or your client's) allows your to funnel some traffic from your webapp to your Instagram Account and visa versa. Instagram is a great way to connect with your audience and build up your online brand.

In this post I will show you an example on how to show your last Instagram Posts in your NextJS webapp.

Start a Next.JS project

Let's start code, first let's initialize a NextJS project. Using create-next-app, which sets up everything automatically for you. Open your Terminal and run:

npx create-next-app
# or
yarn create next-app

After the installation is complete, run the app in development mode. Just need to cd into the folder and run:

yarn dev

This will start your development server in http://localhost:3000, open the browser:

Add Instagram Web API Package

To fetch the Instagram Post we are going to use the an npm package named: instagram-web-api. We need to install the package:

npm install instagram-web-api --save
# or
yarn add instagram-web-api

Updaye your home page

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript.

Open the file pages/index.js and replace all the code with:

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
    return (
        <div className={styles.container}>
            <Head>
                <title>Instagram Posts</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <h1>Instagram Posts</h1>
        </div>
    );
}

Now your page should look like this:

Fetching and rendering Instagram Posts

To obtain better performance and SEO we are going to use Static Generated Pages: The HTML is generated at build time and will be reused on each request.

To fetch data at build time we need to export a function getStaticProps in our pages/index.js

 import Head from 'next/head';
 import styles from '../styles/Home.module.css';
+import Instagram from 'instagram-web-api';

-export default function Home() {
+export default function Home({ posts }) {
     return (
         <div className={styles.container}>
             <Head>
@@ -10,6 +11,31 @@ export default function Home() {
             </Head>

             <h1>Instagram Posts</h1>
+            <ul className={styles.list}>
+                {posts.map(({ node }, i) => {
+                    return (
+                        <li key={i}>
+                            <img src={node.display_resources[0].src} />
+                            <p>{node.edge_media_to_caption.edges[0]?.node.text}</p>
+                        </li>
+                    );
+                })}
+            </ul>
         </div>
     );
 }
+
+export async function getStaticProps(context) {
+    const client = new Instagram({ username: 'INSTAGRAM_USERNAME', password: 'INSTAGRAM_PASSWORD' });
+    await client.login();
+
+    const response = await client.getPhotosByUsername({
+        username: 'INSTAGRAM_USERNAME',
+    });
+
+    return {
+        props: {
+            posts: response.user.edge_owner_to_timeline_media.edges,
+        }, // will be passed to the page component as props
+    };
+}

To fetch the post from Instagram we have need 3 steps:

Create the Instagram client
Login to Instagram
Fetch the data by username.

After we just need to return the posts as props and we receive them in the Home React component and we jusr render it.

Add Styles

Edit your styles/Home.module.css and the following code:

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
}

.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list li {
    margin-bottom: 4rem;
    border-bottom: solid 1px lightgray;
    padding-bottom: 2.5rem;
}

.list img {
    max-width: 100%;
}

Result

More information:

Questions?

If you liked this post help me by sharing it and if you have any questions you can write to me on Twitter at @fmontes.

How I handoff designs to developers with Sketch y Zeplin

Freddy Montes — Sat, 19 Sep 2020 22:17:32 +0000

Delivering interface designs to developers is not an easy task, many designers try to create guidelines manually where they show font sizes, colors, components, space, margins etc ... but this takes a lot of work and keeping it updated is a nightmare.

There are several applications that serve to do this work in a more orderly and efficient way: Invision, Avocado and Zeplin to name a few. In this post I will explain how I use Zeplin to handle this important task.

Table of content

Why Zeplin?
Connecting Zeplin and Sketch
- Create a Zeplin Proyect
- Installing the Sketch plugin
What do developers expect from the designer?
Five things that cannot be missing in your Sketch file
- Consistent color palette
- Use Text Styles
- Consistent space
- Use Symbols
- Make the assets exportable
Setting up the project in Zeplin
- Export from Sketch
- Adding and organizing content to Zeplin
- Color Palette
- Text Style Catalog
- Spacing and Layout
- Components
Sharing
Conclusion
Questions?

Why Zeplin?

Automatically generate styleguides
You can organize your components in sections and groups
Synchronize directly with Sketch through an official plugin
Download assets, images in 1x, 2x and 3x also optimized svg
Good CSS code with variables and relative units
Webapp available
Can be shared with the whole team
Has a free version

Connecting Zeplin and Sketch

After you create your account in Zeplin the next step is to create a project.

Create a Zeplin Proyect

You can do it from the Mac or Windows app:

Installing the Sketch plugin

Once you install Zeplin the Sketch plugin should install automatically but if you have any problems download the plugin and just click double click. Once you have done this you should have it available under the plugins menu in Sketch:

What do developers expect from the designer?

Typeface: family, size, weight, space between characters and line spacing
Spaces: margins, padding and distance between elements
Colors
Symbols or components
Assets: images, photos etc

Zeplin gives you all this and also generates very good CSS code for this.

Five things that cannot be missing in your Sketch file

To demonstrate how to use Zeplin I made a small design in Sketch, you can download here.

Consistent color palette

Zeplin automatically creates a color list of all the colors used in the Sketch document so it is very important to be consistent with the use of colors in Sketch.

Create your color palette, add them to the document, and make sure to always pick colors from that palette.

Use Text Styles

It allows you to store a set of styles and reuse them in different text layers within your designs and thus maintain consistency in your UI, more information on how to use it in the Sketch documentation.

You can use any name in your Text Styles I personally separate them by where I use them, for example:

Form / Label
Button / Primary / Label o Button / Secondary / Label
Typography / H1
Typography / Body

Consistent space

In my case, I like to use 8px as a base, which means, all the space (margins and paddings) between the elements in my UI is based on multiples of 8 (8, 16, 24, 32, 40, 48 and so on).

Using an even number like 8 in space and size elements in your design makes scaling for a wide variety of devices much easier and more consistent. If you want to know more about this technique, I recommend this post: How to create stronger layouts with the 8pt Grid.

Use Symbols

The symbols in Sketch is a way to save and reuse common elements in your designs and I consider it to be the most powerful tool in Sketch, all the information about symbols can be found in Sketch's documentation.

Make the assets exportable

By doing this you will allow developers to download assets from Zeplin and even in different resolutions such as 1x, 2x and 3x:

Then in Zeplin the developer will be able not only to inspect the image but also to download the png or jpg files for 1x, 2x and 3x and also HTML code for responsive image:

Setting up the project in Zeplin

Export from Sketch

Once you export all the artboards and pages from ** Sketch **:

Plugins > Zeplin > Export All > Artboards from all pages

and then go to yout Symbol page, select all of them and

Plugins > Zeplin > Export Selected

With this you make sure to export absolutely the entire Sketch document to Zeplin.

Adding and organizing content to Zeplin

Now if you open your project in Zeplin you will see that in the "Styleguide" tab there is an indicator, that means that Zeplin found colors and text styles to add to your project.

Color Palette

With a single click you add all the colors that Zeplin found in your document:

And it not only adds the colors, it also generates the necessary CSS code, so the developer only has to copy and paste the code in his project:

You can also change the names and the order of the colors if you wish.

Text Style Catalog

As with colors, Zeplin detects the ** Text Styles ** that your Sketch document has and suggests adding them with a single click:

As with colors, it generates the CSS code so that developers only have to copy and paste:

By default it uses the names that come from Sketch but you can change them if you wish.

Spacing and Layout

In this section you can create "tokens" with the spaces that you use in your design. Since my design uses spaces of multiples of 8px I must create: 8, 16, 24, 32 and so on and I make sure to mark the checkbox to use measures rem:

Using relative measures (rems) not only generates the CSS code with those measures, but when the developer is inspecting the design, he can see the name of the generated CSS variables, which will allow him to develop the page and the responsive and accessible components:

Components

In this section the developer will be able to see all the Symbols that you created in your design in Sketch which serves as a guide for the reusable components that the developer needs to create and as a bonus CSS code with the color and space variables:

By default they are all grouped in the same section but you can group them by section, select multiple components and then: Right click> New Section From Selection

You can also organize it by groups, select multiple components in a section Right Click> New Group from Selection

And you can also drag and drop components, groups and sections to organize better. By doing this you can have a list of components organized by Sections and Groups that are automatically updated from Sketch.

Sharing

Everything is ready to send it to your developer or development team. In Zeplin's project dashboard you just click on the "Share" button:

In the popup you can invite the developers by email (the email with which they registered in Zeplin) or you can send them the link for both the web and the app, both links are private and can only be seen by people who are invited to the project.

Finally, Zeplin has the concept of "Scene" which is a public page where you can share your design with everyone, this is 100% public but you only activate it if you wish, here is the link of this project: https://scene.zeplin.io/project/5f663baa271b6a1b54aba890

Conclusion

As you could see, Sketch and Zeplin allows you to pass in an orderly way and always in sync handoff the designs to the developers, including colors, fonts, sizes, spaces, etc.

There are still more things that can be done with Zeplin, the developer can link the code of its components, its repository, snippets and even StoryBook with the Zeplin project, in the next post I will do that process.

Questions?

If you liked this post help me by sharing it and if you have any questions you can write to me on Twitter at @fmontes.

Working with more capable people does not mean that you get stuck

Freddy Montes — Sat, 05 Sep 2020 16:31:31 +0000

This week a friend called me concerned because his company was going to hire a new developer to work on a new project.

They need to make deep changes in the architecture that he has never been able to do because of his daily work and because he has not dedicated himself to researching how to do it.

His concern was because he thinks that this new developer was going to get to work full time on new technology, improve the application and he would be stuck as a developer and would not allow him to grow and learn new things.

Slapping reality into him

You have been in the company for 5 years and you have never made the required architecture change, you have your reasons but you are already stuck.
Your professional stagnation depends only on you and no one else.
The new developer is going to need as much from you as you from him and that's what it's all about, giving and receiving knowledge.

It worked?

The next day my friend sends me a Slack and tells me he wants to show me something. He had set up for the architecture change they need, among other things he told me that it was much easier than he thought and that he saw a lot of benefit.

On the call you could hear in his voice that he was enthusiastic and eager to work on the project, it was like talking to a completely different person.

The smartest in the room

The worst thing that can happen to you is being the smartest in the room (or believe you are) because that does stagnate you, you have no one to learn from and human beings learn from others and create incredible things together.

In my career I have been fortunate to work with people much more capable and intelligent than me and the only thing I have received from all of them is knowledge and help.

"We are the average of the five people we spend the most time with." - Jim Rohn

Dealing with dynamic images in Gatsby

Freddy Montes — Tue, 05 May 2020 16:38:39 +0000

Showing images from Gatsby file system is very easy with a combination of GraphQL and gatsby-image, but... there is a catch.

The problem is when you get the image names dynamically from a data source or CMS and you can't know in advance (build time) the name to do the queries in GraphQL because you can't use interpolate variables in GraphQL queries in Gatsby right now.

I've seen some solutions which basically consist in query ALL the files and then inside the component match the name of the one you want to show.

This approach works like a charm when you don’t have many images but, in my case, there was ~800. Since Gatsby save the all the GraphQL queries result in a page-data.json file which can get really big really fast. For example, here is a comparison of a file with ~800 images and no images:

Gatsby JSON file with ~800 images

No Images

My solution

Even though I tried anything I can think of using local images on Gatsby I wasn't able to get an acceptable solution for my case so I decided to go another route, an image hosting service and I picked Cloudinary.

Cloudinary is a service to host media but you can't apply transformations like resize, crop and even change the format when you serve them, all this by building a URL with parameters.

I uploaded all the images to Cloudinary using their Web UI, just drag and drop and I was up and running with my custom folder structure.

After that I created a simple React component which takes: name, category and image size and it built Cloudinary URL and the last touch: LazyLoad, never forget to LazyLoad your images, for this I just used react-lazy-load-image-component, the final code:

import React from 'react'
import { LazyLoadImage } from 'react-lazy-load-image-component'

const getCloudinaryImageUrl = ({ category, name, size }) =>
    `https://res.cloudinary.com/CLOUDINARY_CLOUD/image/upload/f_auto,q_auto,c_pad,w_${size},h_${size}/lapulpe/${category}/${name}`

const CloudinaryImage = ({ category, name, size }) => {
    const url = getCloudinaryImageUrl({ category, name, size })
    return (
        <LazyLoadImage
            style={{ marginBottom: '0' }}
            alt={name}
            height={size}
            src={url}
            width={size}
        />
    )
}

export default CloudinaryImage

The result

Less build time since Gatsby doesn't have to process the images
Much smaller JSON bundle
No extra GraphQL queries
Being able to publish new images without having to rebuild

How to track your online learning with GitHub

Freddy Montes — Fri, 19 Jul 2019 03:50:08 +0000

I bet that a lot of times you have to solve something and you think: "I read some that will help me with this problem" but you can't remember where you saw it and have no way to find it.

GitHub to the rescue

What? GitHub? and the answer is big YES. You can create a GitHub Repo and use the issues to track what you read, watch, listen online.

So I started to use GitHub issues, which according to the official information are:

Use issues to track ideas, enhancements, tasks, or bugs for work on GitHub.

How to do it?

Create a GitHub account (but I bet you already have one). Mine is: fmontes
Create a repo, mine I called: learning-tracking.
For every piece of content, you want to save create an issue.
And that's pretty much it.

What to add to the issues?

When I consume some content online I always want to remember certain parts so in my issues I normally add:

Code snippets with comments about it
Quotes of the article
Notes with conclusions
Links of course
Source

GitHub issues support Markdown

This will allow you to add:

Code snippets
Comments
Quotes
Links
Images
Tables
And so much more.

Use tags

You can create and assign to issues as many tags you want, you should use tags in your issues so you can filter them later.

Search

Not only you'll be able to filter by tags, GitHub has a really powerful search feature, that will find keywords in the title, tags and even content of your issues. You can't lose anything again!

Conclusion

I tried any notes app you can think of but none of those work for me. With this approach I've seen good results:

Haven't lost content anymore
Snippets with notes are really helpful
Being public (you can make it private) allow your peers to see what your up to
Improve your developer brand, people can see what you're up to 😉

This post was originally published on my blog.

Forem: Freddy Montes

How to manage Angular state in your components

Table of content

Prerequisites

What are we going to build?

What is the "state"?

Example:

In short a state is:

Not all Angular apps need NgRx or NGSX

The problem

The solution: @ngrx/component-store

When to use an @ngrx/store or @ngrx/component-store?

My recommendation

@ngrx/component-store concepts

Getting started

Initializing the application

Creating utilities

Defining the state

Install @ngrx/component-store

Creating the store service

Selectors

Updaters

Error y loading

Add cars to parking

Effects

Creating the <car-list> component

Adding the FormModule

Consuming the store service

app/app.component.ts

Providers

Properties

Methods

app/app.component.html

Error message

Form

app/app.component.css

That's it

Summary

Conclusion

How to add Instagram Photos to NextJS website

Start a Next.JS project

Add Instagram Web API Package

Updaye your home page

Fetching and rendering Instagram Posts

Add Styles

Result

More information:

Questions?

How I handoff designs to developers with Sketch y Zeplin

Table of content

Why Zeplin?

Connecting Zeplin and Sketch

Create a Zeplin Proyect

Installing the Sketch plugin

What do developers expect from the designer?

Five things that cannot be missing in your Sketch file

Consistent color palette

Use Text Styles

Consistent space

Use Symbols

Make the assets exportable

Setting up the project in Zeplin

Export from Sketch

Adding and organizing content to Zeplin

Color Palette

Text Style Catalog

Spacing and Layout

Components

Sharing

Conclusion

Questions?

Working with more capable people does not mean that you get stuck

Slapping reality into him

It worked?

The smartest in the room

Dealing with dynamic images in Gatsby

Gatsby JSON file with ~800 images

No Images

My solution

The result

Creating the `<car-list>` component

Adding the `FormModule`

`app/app.component.ts`

`app/app.component.html`

`app/app.component.css`