DEV Community: Nicola

Event-Driven Architecture for Clean React Component Communication

Nicola — Wed, 04 Dec 2024 12:46:40 +0000

Are you tired of the endless tangle of props drilling and callback chains in your React applications? Does managing state and communication between deeply nested components feel like wrestling with spaghetti code?

An event-driven architecture can simplify your component interactions, reduce complexity, and make your app more maintainable. In this article, I’ll show you how to use a custom useEvent hook to decouple components and improve communication across your React app.

Let me walk you through it, let's start from

Note: This mechanism is not intended as a replacement for a global state management system but an alternative approach to component communication flow.

The Problem: Props Drilling and Callback Chains

In modern application development, managing state and communication between components can quickly become cumbersome. This is especially true in scenarios involving props drilling—where data must be passed down through multiple levels of nested components—and callback chains, which can lead to tangled logic and make code harder to maintain or debug.

These challenges often create tightly coupled components, reduce flexibility, and increase the cognitive load for developers trying to trace how data flows through the application. Without a better approach, this complexity can significantly slow down development and lead to a brittle codebase.

The Traditional Flow: Props Down, Callbacks Up

In a typical React application, parent components pass props to their children, and children communicate back to the parent by triggering callbacks. This works fine for shallow component trees, but as the hierarchy deepens, things start to get messy:

Props Drilling: Data must be passed down manually through multiple levels of components, even if only the deepest component needs it.

Callback Chains: Similarly, child components must forward event handlers up the tree, creating tightly coupled and hard-to-maintain structures.

A Common Problem: Callback Complexity

Take this scenario, for example:

The Parent passes props to Children A.
From there, props are drilled down to GrandChildren A/B and eventually to SubChildren N.
If SubChildren N needs to notify the Parent of an event, it triggers a callback that travels back up through each intermediate component.

This setup becomes harder to manage as the application grows. Intermediate components often act as nothing more than middlemen, forwarding props and callbacks, which bloats the code and reduces maintainability.

To address props drilling, we often turn to solutions like global state management libraries (e.g., Zustand) to streamline data sharing. But what about managing callbacks?

This is where an event-driven approach can be a game-changer. By decoupling components and relying on events to handle interactions, we can significantly simplify callback management. Let’s explore how this approach works.

The Solution: Enter the Event-Driven Approach

Instead of relying on direct callbacks to communicate up the tree, an event-driven architecture decouples components and centralizes communication. Here’s how it works:

Event Dispatching

When SubChildren N triggers an event (e.g., onMyEvent), it doesn’t directly call a callback in the Parent.
Instead, it dispatches an event that is handled by a centralized Events Handler.

Centralized Handling

The Events Handler listens for the dispatched event and processes it.
It can notify the Parent (or any other interested component) or trigger additional actions as required.

Props Remain Downward

Props are still passed down the hierarchy, ensuring that components receive the data they need to function.

This can be solved with centralized state management tools like zustand, redux, but will not be covered in this article.

Implementation

But, how do we implement this architecture?

useEvent hook

Let's create a custom hook called useEvent, this hook will be responsible of handling event subscription and returning a dispatch function to trigger the target event.

As I am using typescript, I need to extend the window Event interface in order to create custom events:

interface AppEvent<PayloadType = unknown> extends Event {
  detail: PayloadType;
}

export const useEvent = <PayloadType = unknown>(
  eventName: keyof CustomWindowEventMap,
  callback?: Dispatch<PayloadType> | VoidFunction
) => {
  ...
};

By doing so, we can define custom events map and pass custom parameters:

interface AppEvent<PayloadType = unknown> extends Event {
  detail: PayloadType;
}

export interface CustomWindowEventMap extends WindowEventMap {
  /* Custom Event */
  onMyEvent: AppEvent<string>; // an event with a string payload
}

export const useEvent = <PayloadType = unknown>(
  eventName: keyof CustomWindowEventMap,
  callback?: Dispatch<PayloadType> | VoidFunction
) => {
  ...
};

Now that we defined needed interfaces, let's see the final hook code

import { useCallback, useEffect, type Dispatch } from "react";

interface AppEvent<PayloadType = unknown> extends Event {
  detail: PayloadType;
}

export interface CustomWindowEventMap extends WindowEventMap {
  /* Custom Event */
  onMyEvent: AppEvent<string>;
}

export const useEvent = <PayloadType = unknown>(
  eventName: keyof CustomWindowEventMap,
  callback?: Dispatch<PayloadType> | VoidFunction
) => {
  useEffect(() => {
    if (!callback) {
      return;
    }

    const listener = ((event: AppEvent<PayloadType>) => {
      callback(event.detail); // Use `event.detail` for custom payloads
    }) as EventListener;

    window.addEventListener(eventName, listener);
    return () => {
      window.removeEventListener(eventName, listener);
    };
  }, [callback, eventName]);

  const dispatch = useCallback(
    (detail: PayloadType) => {
      const event = new CustomEvent(eventName, { detail });
      window.dispatchEvent(event);
    },
    [eventName]
  );

  // Return a function to dispatch the event
  return { dispatch };
};

The useEvent hook is a custom React hook for subscribing to and dispatching custom window events. It allows you to listen for custom events and trigger them with a specific payload.

What we are doing here is pretty simple, we are using the standard event management system and extending it in order to accommodate our custom events.

Parameters:

eventName (string): The name of the event to listen for.
callback (optional): A function to call when the event is triggered, receiving the payload as an argument.

Features:

Event Listener: It listens for the specified event and calls the provided callback with the event's detail (custom payload).
Dispatching Events: The hook provides a dispatch function to trigger the event with a custom payload.

Example:

const { dispatch } = useEvent("onMyEvent", (data) => console.log(data));

// To dispatch an event
dispatch("Hello, World!");

// when dispatched, the event will trigger the callback

Ok cool but, what about a

Real World Example?

Check out this StackBlitz (if it does not load, please check it here)

This simple example showcases the purpose of the useEvent hook, basically the body's button is dispatching an event that is intercepted from Sidebar, Header and Footer components, that updates accordingly.

This let us define cause/effect reactions without the need to propagate a callback to many components.

Note
As pointed out in the comments remember to memoize the callback function using useCallback in order to avoid continous event removal and creation, as the callback itself will be a dependency of the useEvent internal useEffect.

Real-World Use Cases for `useEvent`

Here are some real-world use cases where the useEvent hook can simplify communication and decouple components in a React application:

1. Notifications System

A notification system often requires global communication.

Scenario:
- When an API call succeeds, a "success" notification needs to be displayed across the app.
- Components like a "Notifications Badge" in the header need to update as well.
Solution: Use the useEvent hook to dispatch an onNotification event with the notification details. Components like the NotificationBanner and Header can listen to this event and update independently.

2. Theme Switching

When a user toggles the theme (e.g., light/dark mode), multiple components may need to respond.

Scenario:
- A ThemeToggle component dispatches a custom onThemeChange event.
- Components like the Sidebar and Header listen for this event and update their styles accordingly.
Benefits: No need to pass the theme state or callback functions through props across the entire component tree.

3. Global Key Bindings

Implement global shortcuts, such as pressing "Ctrl+S" to save a draft or "Escape" to close a modal.

Scenario:
- A global keydown listener dispatches an onShortcutPressed event with the pressed key details.
- Modal components or other UI elements respond to specific shortcuts without relying on parent components to forward the key event.

4. Real-Time Updates

Applications like chat apps or live dashboards require multiple components to react to real-time updates.

Scenario:
- A WebSocket connection dispatches onNewMessage or onDataUpdate events when new data arrives.
- Components such as a chat window, notifications, and unread message counters can independently handle updates.

5. Form Validation Across Components

For complex forms with multiple sections, validation events can be centralized.

Scenario:
- A form component dispatches onFormValidate events as users fill out fields.
- A summary component listens for these events to display validation errors without tightly coupling with form logic.

6. Analytics Tracking

Track user interactions (e.g., button clicks, navigation events) and send them to an analytics service.

Scenario:
- Dispatch onUserInteraction events with relevant details (e.g., the clicked button’s label).
- A central analytics handler listens for these events and sends them to an analytics API.

7. Collaboration Tools

For collaborative tools like shared whiteboards or document editors, events can manage multi-user interactions.

Scenario:
- Dispatch onUserAction events whenever a user draws, types, or moves an object.
- Other clients and UI components listen for these events to reflect the changes in real time.

By leveraging the useEvent hook in these scenarios, you can create modular, maintainable, and scalable applications without relying on deeply nested props or callback chains.

Conclusions

Events can transform the way you build React applications by reducing complexity and improving modularity. Start small—identify a few components in your app that would benefit from decoupled communication and implement the useEvent hook.

With this approach, you’ll not only simplify your code but also make it easier to maintain and scale in the future.

Why Use Events?
Events shine when you need your components to react to something that happened elsewhere in your application, without introducing unnecessary dependencies or convoluted callback chains. This approach reduces the cognitive load and avoids the pitfalls of tightly coupling components.

My Recommendation
Use events for inter-component communication—when one component needs to notify others about an action or state change, regardless of their location in the component tree.
Avoid using events for intra-component communication, especially for components that are closely related or directly connected. For these scenarios, rely on React's built-in mechanisms like props, state, or context.

A Balanced Approach
While events are powerful, overusing them can lead to chaos. Use them judiciously to simplify communication across loosely connected components, but don’t let them replace React’s standard tools for managing local interactions.

Simple alert styling using SASS MAPS

Nicola — Tue, 04 Aug 2020 14:06:15 +0000

Hi folks! 🖖

In this little tutorial, we'll learn how to use sass maps to create some simple variants to a custom alert component.

The idea is to use sass maps to define a complex set of CSS variables. These variables will be cycled using @each mixin to create the final set of classes for our alert.

Note: I'll use SCSS syntax instead of pure SASS. I prefer this syntax, but you can use what you like.

SASS MAPS?

According to the official documentation:

Maps in Sass hold pairs of keys and values, and make it easy to look up a value by its corresponding key. They’re written (: , : ). The expression before the : is the key, and the expression after is the value associated with that key. The keys must be unique, but the values may be duplicated. Unlike lists, maps must be written with parentheses around them. A map with no pairs is written ().

sass maps are complex variables (we can define them as an object variable).

We will use the following methods:

map-get: returns an object value by key
map-keys: returns a list of object keys

The final result will be something like that:

Note - this tutorial will cover only the map management and loop part, any other CSS styles and HTML / Javascript code is included in the pen, but not necessary.

Defining the map

First of all, we need to define the map variable in our scss file:

// maps of maps, used to define different alert type properties
$alerts: (
  "default": (
    "backgroundColor": #12cbc4,
    "titleColor": #833471,
    "messageColor": #4a4a4a
  ),
  "info": (
    "backgroundColor": #7ed6df,
    "titleColor": #30336b,
    "messageColor": #4a4a4a
  ),
  "warning": (
    "backgroundColor": #f0932b,
    "titleColor": #2c2c54,
    "messageColor": #4a4a4a
  ),
  "error": (
    "backgroundColor": #ee5253,
    "titleColor": #ff9f43,
    "messageColor": #4a4a4a
  )
);

As you can see this map is an object composed by:

key: the name of the class modifier
value: a scss map used to define some properties like:
- backgroundColor
- titleColor
- messageColor

Creating the loop for the class definitions

We can now use the @each mixin to loop through our $alerts map keys. This will let us define the properties for each alert type:

.alert {
  @each $alertType in map-keys($alerts) {
     // define the props here     
  }
}

next we use $alertType var as a selector:

.alert {
  @each $alertType in map-keys($alerts) {
     &-#{$alertType} {
        // .alert-default compiled (for example)
     } 
  }
}

This mixin will generate the following css:

.alert.alert-default { ... }
.alert.alert-info { ... }
.alert.alert-warning { ... }
.alert.alert-error { ... }

Next, we define the custom properties based on current class.

Using map-get to retrieve class related properties

We can use the map-get method to get the backgroundColor property for a specific class:

.alert {
  @each $alertType in map-keys($alerts) {
     &-#{$alertType} {
        background-color: map-get(
          map-get($alerts, $alertType),
          backgroundColor
        );
     } 
  }
}

This will generate the following css:

.alert.alert-default { 
  background-color: #12cbc4;
}
.alert.alert-info { 
  background-color: #7ed6df;
}
.alert.alert-warning { 
  background-color: #f0932b;
}
.alert.alert-error { 
  background-color: #ee5253;
}

Nested classes properties

I don't want to go too far or bore you with unnecessary concepts, so I will give you the complete styling for nested classes as follow:

.alert {
  @each $alertType in map-keys($alerts) {
     &-#{$alertType} {
        background-color: map-get(
          map-get($alerts, $alertType),
          backgroundColor
        );

        .alert-title {
          color: map-get(map-get($alerts, $alertType), titleColor);
          font-weight: bold;
        }

        .alert-message {
          color: map-get(map-get($alerts, $alertType), messageColor);
          font-weight: light;
        }

        .alert-close {
          border-color: map-get(
            map-get($alerts, $alertType),
            backgroundColor
          );
        }
     } 
  }
}

Of course this is only an example, you can use your custom selectors and HTML structure.

Conclusions

This little tutorial shows how you can handle different type of modifiers/classes with a little bit of scss code. Instead of defining the same properties N times (with N = number of variations we want to handle), we can use sass maps to handle them smartly.

What do you think? Do you agree with this method? Do you have any advice?

Thanks for reading and good coding 🐱‍👤

How to become a Game Developer?

Nicola — Mon, 27 Jul 2020 10:02:09 +0000

Hi folks!😍

Today I want to start a discussion about how to become a game developer.

But first a little bit of

premises ❗

I'm a full-stack web developer, I've worked on the web since 7 years ago, for different customers.

During this time I've worked a lot on Unity in my free time, because of the complexity and different skills to handle while working on a game, I've fallen in love with game development.

I'm a creative developer, I love to develop, but also to design, create music and storylines, but I work mainly with banks, insurances and pharma agencies. So my work is not as creative as I want.

After these years, I'm so sick and tired working on the web, and frontend development in general. That's because it seems than every day I do the same things, in an infinite loop.

I want to change.

The game development idea

So, what can fit my needs, to code and design at the same time?

Of course, game development!

Every time I work on a game idea, I spent a lot of hours per day, and I stop working on it only for physical needs (like, of course, sleeping 🤣).

The next day, I wake up with a lot of ideas in mind, I feel really happy to work on a personal game. And this changes completely my lifecycle.

So I've decided to become a game developer! 👨‍💻

Problems

There are 2 big problems I've found looking for a game developer job:

I live in Italy, where there aren't a lot of possibilities in this industry.
Experience, I've worked on Unity for a lot of time, but I'm still a junior dev, and here is hard to find a job as a junior unity developer (2 years of working experience at least needed).

So basically it's hard to find a job as unity developer here, and I have 2 solutions ahead:

1. Working abroad 🐱‍🏍

This is a big challenge, working abroad, starting a new career as a junior developer, could be an amazing challenge, but also stressy.

2. Create a game software house 🐱‍🐉

The other solution is to create a software house here in Italy. This is a great challenge but could be my real mission.
The pros of this choice are:

Create something unique and personal
Give others the possibility I didn't have in the future
Be part of the rise of the gaming industry in Italy, and one of the pioneers in this sector.

I'm choosing what to do in the next year, which will be the most important in my career to choose my future life.

What do you think? Do you have any advice? Have you ever had a similar choice to do?

Let me know, I will be more than happy to hear tips from you all!

Cheers 🐱‍👤

GSAP Animated Select

Nicola — Mon, 29 Jun 2020 09:06:25 +0000

Hi to all!

I want to show you all a cool example of an animated select I've made using GreenSock.

As we know the select HTML component is one of the hardest HTML element to customize. It's hard to create a unique styled select component using the native select HTML tag.

So often we need to create a custom HTML template to handle custom styled selects.

In this example, I've wanted to create a cool animation (still basic btw) on my custom select using GreenSock and CSS transitions, here there is the final result:

What do you think about it? Do you have any suggestion? Let me know in the comments 😎😎

GSAP Animations in Angular - Handle animateOut

Nicola — Wed, 17 Jun 2020 14:53:41 +0000

Handle the out animation of our components

Now that we have done the animationIn of our components, we want to handle also the animationOut.

For example, we want to hide our HTML element with a fancy fade out animation, but if we use the structural directive *ngIf of angular the animation will not work, because angular will remove physically the element from the view.

So how can we do it? Let's start with the classic *ngIf directive.

Toggle HTML elements

Let's proceed with the logic to toggle our HTML elements, in our app.component.ts we need to add this code:

export class AppComponent {
  title = 'my-app-title';
  showP = true;
  toggleP() {
    this.showP = !this.showP;
  }
}

The method toggleP will toggle the boolean showP, which will be used in our app.component.html to show/hide our elements:

<p
  fadeInAnimation
  [duration]="1"
  [delay]="1"
  *ngIf="showP"
>
  That's a cool effect, or not?
</p>
<p
  fadeInAnimation
  [duration]="1"
  [delay]="2"
  *ngIf="showP"
>
  This too, but a little bit delayed
</p>

Let's add a button to call toggleP method (animated too 😎):

<p
  fadeInAnimation
  [duration]="1"
  [delay]="1"
  *ngIf="showP"
>
  That's a cool effect, or not?
</p>
<p
  fadeInAnimation
  [duration]="1"
  [delay]="2"
  *ngIf="showP"
>
  This too, but a little bit delayed
</p>
<button
  fadeInAnimation
  [duration]="1"
  [delay]="3"
  (click)="toggleP()"
>{{showP ? "Hide P" : "Show P"}}
</button>

And run the application, as you will see the animationOut will not be triggered:

As you can see the directive removes directly the HTML element, so how can we handle it without deleting the HTML element?

The ngIfAnimated directive

We can create a custom structural directive, create a directory inside directives/ folder, called structural, and a file named ngIf-animated.directive.ts:

import {Directive, ElementRef, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '@angular/core';
import {CoreAnimationDirective} from '../gsap/core-animation.directive';

@Directive({
  selector: '[ngIfAnimated]'
})
export class NgIfAnimatedDirective {
  childViewRef: EmbeddedViewRef<CoreAnimationDirective> = null;

  constructor(
    private element: ElementRef,
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input()
  set ngIfAnimated(show) {
    if(show) {
      this.childViewRef = this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      if(this.childViewRef) {
        const node = this.childViewRef.rootNodes[0];
        if(node) {
          node.dispatchEvent(new CustomEvent('animate-out', {detail: {parentViewRef: this.viewContainer}}));
        }
      }
    }
  }
}

This directive will show and hide an embedded viewRef using an @Input parameter called ngIfAnimated.

If passed show boolean is true, then it will create and embeddedView, else it will dispatch a CustomEvent on the first rootNode, passing the viewContainer reference. We will see why in a moment.

We need to handle the event trigger inside our CoreAnimationDirective, the component will receive the event, run the animation out and clear the parent view:

export class CoreAnimationDirective {
  @Input() duration = 1;
  @Input() delay = 0;

  @Output() complete: EventEmitter<null> = new EventEmitter();
  @Output() reverseComplete: EventEmitter<null> = new EventEmitter();
  protected timeline: TimelineMax;

  constructor(protected element: ElementRef) {
    // handle animate-out event
    this.element.nativeElement.addEventListener('animate-out', ({detail}) => {
      this.animateOut(detail.parentViewRef);
    })
    this.timeline = new TimelineMax({
      onComplete: _ => this.complete.emit(),
      onReverseComplete: _ => this.reverseComplete.emit(),
      paused:true,
      reversed:true
    });
  }

  protected animateIn() {
    if(this.timeline.isActive()) {
      this.timeline.kill();
    }
    this.timeline.play();
  }

  protected animateOut(parentViewRef: ViewContainerRef) {
    if(this.timeline.isActive()) {
      this.timeline.kill();
    }
    setTimeout(() => {
      this.timeline.timeScale(this.duration).delay(0).reverse();
      setTimeout(_ => {
        if (parentViewRef) {
          parentViewRef.clear();
        }
      }, this.duration * 1000);
    }, this.delay * 1000);
  }
}

As you can see we have added 2 new thing to our CoreAnimationDirective:

animate-out event handler - handle the event on HTML element and call the method animateOut
animateOut method - this method play the animation of the directive, but reversed. It kills the timeline if is running, and set a timeout to clear the parentViewRef, according to the animation duration and delay.

Now we have only to declare our ngIfAnimated inside the app.module and replace the previous *ngIf with *ngIfAnimated on our html elements:

@NgModule({
  declarations: [
    AppComponent,
    FadeInAnimationDirective,
    NgIfAnimatedDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<p
  fadeInAnimation
  [duration]="1"
  [delay]="1"
  *ngIfAnimated="showP"
>
  That's a cool effect, or not?
</p>
<p
  fadeInAnimation
  [duration]="1"
  [delay]="2"
  *ngIfAnimated="showP"
>
  This too, but a little bit delayed
</p>
<button
  fadeInAnimation
  [duration]="1"
  [delay]="3"
  (click)="toggleP()"
>{{showP ? "Hide P" : "Show P"}}
</button>

The result should look like this:

What will come next

In the next parts of this series we will take a look on how to:

Handle animations with MouseEvent, for example to scale up a button.
How to keep all stateless, using ngrx, to handle complex animations while routing.

GSAP Animations in Angular - Apply directive to html

Nicola — Wed, 17 Jun 2020 14:53:36 +0000

Let's apply the directive to our HTML elements!

Now we can apply the directive to our HTMLElements. First of all we need to declare the FadeInDirective inside the AppModule:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FadeInAnimationDirective} from './directives/gsap/fade-in-animation.directive';

@NgModule({
  declarations: [
    AppComponent,
    FadeInAnimationDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And in your app.component.html add this HTML:

<p
  fadeInAnimation
  [duration]="1"
  [delay]="1"
>
  That's a cool effect, or not?
</p>

We are creating a paragraph animated with a fadeIn animation using our directive, with a duration of 1 second and a delay of 1 second too! This should be the result:

As you can see, the animation is working! You can also combine different animations using different delays:

<p
  fadeInAnimation
  [duration]="1"
  [delay]="1"
>
  That's a cool effect, or not?
</p>
<p
  fadeInAnimation
  [duration]="1"
  [delay]="2"
>
  This too, but a little bit delayed
</p>

GSAP Animations in Angular - Animation Directives

Nicola — Wed, 17 Jun 2020 14:53:31 +0000

Create a directive for animation

As the second part of this tutorial we will create an attribute-directive, which will define a specific animation and its attributes.

We will start with a simple FadeIn animation.

But before starting with the real directive, we are going to create a generic class which will be extended by arbitrary directives, called CoreAnimationDirective.

The goal of this directive is to define the standard methods and attributes for our future animation directives, to prevent a lot of repeats and hard-to-mantain directives.

The CoreAnimationDirective class

Let's create! Before doing anything, let's create a specific folder for gsap directive.

From 'src/app' run in terminal mkdir directives\gsap.

Note: use \ or / directory separator according to your system.

Your project should look like this:

Let's create the class, move to the gsap directory cd directives\gsap & echo > core-animation.directive.ts.

Open the file and write the following:

import {ElementRef, EventEmitter, Input, Output} from '@angular/core';
import {TimelineMax} from 'gsap';

export class CoreAnimationDirective {
  @Input() duration = 1;
  @Input() delay = 0;

  @Output() complete: EventEmitter<null> = new EventEmitter();
  @Output() reverseComplete: EventEmitter<null> = new EventEmitter();
  protected timeline: TimelineMax;

  constructor(protected element: ElementRef) {}
}

A little bit of explanation:

@Input() duration - the duration of the animation
@Input() delay - the delay of the animation
@Output() complete - event emitter for the animation complete callback
@Output() reverseComplete - event emitter for the animation reverseComplete callback
protected timeline: TimelineMax - the timeline for animation

Check the docs about TimelineMax and eventCallbacks here.

The constructor have only 1 param, the element (ElementRef), it's the ref to the native element which uses the directive.

We need to instantiate our timeline before animating it inside the constructor:

constructor(protected element: ElementRef) {
  this.timeline = new TimelineMax({
    onComplete: _ => this.complete.emit(),
    onReverseComplete: _ => this.reverseComplete.emit(),
    paused:true,
    reversed:true
  });
}

This piece of code will create a new timeline, paused and not reversed, with a onComplete and onReverseComplete callback.

Let's create the animateIn method:

protected animateIn() {
  if(this.timeline.isActive()) {
    this.timeline.kill();
  }
  this.timeline.play();
}

This method will kill the animation if in progress (you can return if is active so it will not stop), and play the current animation.

The FadeInDirective class

Let's proceed with the next class, this class will perform the real animation.

It will extend the CoreAnimationClass, as we don't need to repeat some portions of code.

Inside the gsap folder we've created previously, run echo > fade-in-animation.directive.ts and write the following code inside:

import { Directive, OnInit, OnDestroy, ViewContainerRef, ElementRef, Input, EventEmitter } from '@angular/core';
import { TimelineMax } from 'gsap';
import { CoreAnimationDirective } from './core-animation.directive';

@Directive({
  selector: '[fadeInAnimation]'
})
export class FadeInAnimationDirective extends CoreAnimationDirective implements OnInit {
  constructor(protected element: ElementRef) {
    super(element);
  }

  ngOnInit() {
    // perform animation
    this.animateIn();
  }

  protected animateIn() {
    this.timeline.from(this.element.nativeElement, this.duration, {opacity:'0', ease:"Expo.easeInOut"}, this.delay);
    super.animateIn();
  }
}

This component extends the CoreAnimationDirective, so we don't need to define the @Input, @Output and other properties twice.

We need to create the opacity animation using this.timeline.from as follow:

this.timeline.from(this.element.nativeElement, this.duration, {opacity:'0', ease:"Expo.easeInOut"}, this.delay);

This will perform an animation on element opacity, from 0 to 1 (or to element opacity current value).

GSAP Animations in Angular - Getting Started

Nicola — Wed, 17 Jun 2020 14:53:14 +0000

What is GSAP and what will we learn in this tutorial

Greensock Animation API GSAP is an animation library written in JavaScript. It works with ES6 and above javascript environments, and lets you create animations without struggles. It's the most used animation library in the world, and for specific reasons, it is:

Performant
Easy to use
Easy to understand
Handle SVG animations seamlessly

In this tutorial series we will learn how to use GSAP in Angular, using attribute and structural directives.

This is what we will create:

NOTE: This tutorial will cover only a 1% of GSAP functionalities, for more visit the library website.

Prerequisites

Angular base knowledge
npm basic knowledge
GSAP basic knowledge
Angular and Node installed

Part 1. Install GSAP

Create a new angular app with the following command: ng new myApp, choose the name you want for the app, angular routing and SCSS as the main style preprocessor (or what you prefer).

Installing GSAP in Angular is pretty simple using npm, from the root of your angular app type npm install --save gsap @types/gsap.

If the installations are successful you will get a message in the terminal as follow:

This will install GSAP and its types as a dependency of your project.

Note: you could get different packages version, these are the latest versions nowadays.

In the next episode we will create the core directive and our first animation!

Thanks to

clideo.com - an amazing tool to edit videos online (you can also make memes 😎)
onlineconverter.com - an online tool to convert video (and other files)
TabNine - a plugin for a lot of IDEs which uses deep learning to perform code completion - see the article here

TabNine - Put your coding speed to the next level

Nicola — Wed, 10 Jun 2020 16:17:48 +0000

Deep learning at the rescue! 👨‍💻👩‍💻

In this article I'll talk about TabNine, an AI Code Completion system for all languages, with a focus on JavaScript.

TabNine is a plugin owned and operated by Codota, who offers also a plugin for Java Code Completions.

What is TabNine?

TabNine helps developers writing code with some magics. It's based on a system of deep learning to help you writing code:

FASTER
EASIER
CLEANER

It's a free (yes, free) plugin for major IDEs like:

IntelliJ PyCharm
VS Code
Sublime
IntelliJ PhpStorm
VIM
Atom

and many others:

How does it works?

TabNine indexes your code and finds statistical patterns to create customized suggestions based on how you write your own code.

Take the following example:

As shown TabNine learns automatically my variable declaration pattern while writing it, and suggest me the best match for the code I'll write after. By this way you can speed up variable declarations, if you use a well defined naming convention.

TabNine offers different solutions while writing, and displays a percentage value based on the best match he find:

This is a simple example to show how TabNine helps you write your code, the next examples will show more complex and ordinary-like use cases of this amazing tool!

Note: This article is written in MarkDown and TabNine is helping me writing it! That's pretty cool! 😎

Install

TabNine is an IDE plugin, so the installation process depends on which IDE you are using. I'll show the installation process for some of the most used IDEs:

Visual Studio Code

Press CTRL + P to open the command prompt.
Run the following command:

  ext install TabNine.tabnine-vscode

Reload VS Code manually or by after-install prompt.

IntelliJ Idea

Press CTRL + Alt + S to open the settings popup
Go under Plugins/Marketplace
Search TabNine and install
Manually reload the IDE

Atom

Under packages you can simply search and install TabNine

You can check installation process for other IDE here.

Examples

Let's go deep on how to use TabNine and why. There are a lot of examples I could show you but I'll focus on some specific use cases.

Example 1. Comment-Driven code completition

With TabNine we can use jsdoc to generate functions and complex objects dinamically. This could be useful by defining the interface first and then the implementation.

Take this example, we want to define a sum function:

/**
 * @description return a sum between a and b
 * @name        sumBy
 * @param       {number} a
 * @param       {number} b
 * @return      {number} the sum between a and b
 */

TabNine will read the jsdoc params and suggest you the correct code definition.
I can just type Alt + Space (or Tab) to write the function:

Classes development and extension

You can also use this tool with class definition. Take this example:


/**
 * @description Animal class
 */
class Animal {
  /**
   * @constructor
   * @param {string} name - name of the animal
   * @param {boolean} quadruped
   */
  constructor(name, quadruped) {
    this.name = name;
    this.quadruped = quadruped;
  }

  /**
   * @description returns the name of the animal
   * @returns {string} - name of the animal
   */
  get name() {
    return this.name;
  }

  /**
   * @description sets the name of the animal
   * @param {string} name - name of the animal
   */
  set name(name) {
    this.name = name;
  }
}

We want to extend this basic class with a Cat class, TabNine will learn about the Animal class and suggest the method implementation and comments:

Example 2. Function parameters auto completition

Often in Javascript it's hard to complete the function parameters without typings. TabNine is useful in this case because it learns from your code and suggests the method implementation:

The parameters of methods sumBy and diffBy are displayed automatically by TabNine, so you don't have to check the method implementation directly to check what kind of parameters the methods accepts.

TabNine and Typescript

There aren't a lot of differences for TabNine behaviours between JavaScript and TypeScript. TabNine will give you more precise suggestions because of Typings, so will get all the advantages types gives to your code:

As you can see, I've defined param1, param2 and param3 in different orders and types compared to the foo function.
TabNine is recognizing the variable types and suggest to you the correct order.

Thanks to:

Codota for letting me writing this article and be part of they're amazing project
clideo.com, an amazing online tool for video editing (you can also make memes with it 😎)
onlineconverter.com, to convert video to GIF, and much more!

I'm creating an entire web OS as my personal website for 2021

Nicola — Mon, 25 May 2020 08:04:52 +0000

Hi to all!

About every 2 years I go to work to create an updated version of my website. Every time I try to focus on my skills and apply them to the project itself.

This year I found myself faced with the need to create a single site that would show all my skills in the web and 3D fields.

Creating a website capable of combining everything is a very difficult undertaking, above all because it could be too large or difficult to understand.

The solution? Create an entire web operating system, where the applications are personal projects and the images and/or links are related to the projects themselves.

This solution allows me not only to incorporate many different things in the same site but also to manage its contents in a more immediate and immersive way for the user.

So NICAOS was born, the first entirely online operating system! Created using Angular 9 with a stateless pattern in mind. All the stiles and assets are created by myself! At the moment it is still in its first steps, and it will never be comparable to a real operating system since it would take years to set it up.

Give it a look, and if you have any suggestions don't hesitate to share them!

Take a look here:

This is still a WIP obviously, the project will end by December 2020.

If you have any suggestions, or just want to know how I'm creating this web application, just let me know in the comments! 😎

Project repo: https://github.com/NicolaLC/nica-os
Live demo: https://nicolalc.github.io/nicolalc/

A cool way to handle scss color variables

Nicola — Mon, 27 Apr 2020 13:05:35 +0000

In my career, I've tried a lot of different ways to handle colours variables in SCSS (or CSS of course).

Every time I try different approaches to handle them, but finally, I've found a cool way to.

The problem

The issue with different theme colours management was the naming convention. Basically I was using something like that:

$background: white;
$primary: magenta;
$secondary: lawngreen;

$light: #FFF;
$dark: #000;

[...]

html {
  background-color: $background;
  color: $dark; /** white on black */
}

This method has some limitations especially while using different themes palettes. Sometimes switching between dark and light themes doesn't mean than the light colour or the background one might be in contrast with the opposite themes, for example:

/** LIGHT THEME */
$background: black;
$primary: magenta;
$secondary: lawngreen;

$light: #FFF;
$dark: #000;

/** DARK THEME */
$background: white;
$primary: magenta;
$secondary: lawngreen;

$light: #FFF;
$dark: #000;
[...]
html {
  background-color: $background;
  color: $dark; /** black on black with dark theme */
}

As you can see, you will get unexpected behaviours if you don't set variables and/or CSS properties properly.

The solution

I've tried a lot of different solutions during my career to handle these issues with theming. The best one I've found so far is the following:

/** CONTRAST VARIABLES */
$<variable-name>: black;
$on-<variable-name>: white;

This method allows you to define a colour variable and a contrast colour variable for it.

So if we define two different themes it comes easier to understand and to write:

/** LIGHT THEME */
$background: black;
$on-background: white;
$primary: lawngreen;
$on-primary: black;

/** DARK THEME */
$background: white;
$on-background: black;
$primary: lawngreen;
$on-primary: black;

[...]
html {
  background-color: $background;
  color: $on-background; /** black on white with dark theme */
}

This system lets you define each variable with its contrast colour, which lets you organize better your themes and styles.

Another cool advantage with this system is the reverse state, for example:

[...]
pre {
  background-color: $primary;
  color: $on-primary;

  &.reversed {
    background-color: $on-primary;
    color: $primary;
  }
}

Easy! That's all!

Conclusions

This is a cool way to define SCSS (and CSS) variables, I'm using this system in different projects in production and create a new theme is really easy to do.

What do you think about that? Do you know a better method to handle this case? If yes let me know in the comments section!

Bootstrap Layout with CSS Grid? It's possible, but with some limitations.

Nicola — Wed, 19 Feb 2020 17:19:58 +0000

Hello developers!

Preface

Bootstrap is an amazing tool, this article isn't indented as a negative idea about Bootstrap. This article does not want to denigrate or diminish the library. It's just an experiment.

This is a WIP so there might be other limitations I've not found during this experiment.

Feel free to collaborate 🐱‍👤

In my freelance career, I've found a lot of projects with Bootstrap library (at least about a 80% of the projects I've seen).

The reasons behind its use was different between projects, but I've defined 2 common cases:

"We use Bootstrap because we want to prototype fast a web application/website and we need its responsive behaviours".
"We use Bootstrap because it helps us with responsive issues, but we don't need its components (only container/row/col classes)".

The first case is good because using a big library like Bootstrap could be a big time saver.

But the second one isn't good in my opinion nowadays, maybe it was 5/6 years ago, but now you don't need to download an entire library to make your applications responsive (thanks to flex and grid layout).

I'm teaching to my collaborators how to use flex/grid layout to make their applications responsive, without any library and any third-party code.

If they don't need IE support, I teach them how to use grid layout, and why.
If they need IE support, we make some polyfill or we use flex layout.

But one day I've found this article, which explains why Bootstrap is still better than grid layout for creating layouts.

I think this article is right, sometimes using CSS grids could be a waste of time if you don't really know it or you need to create complex layouts, and it could be not so clear to read.

So, what now? Turn back to Bootstrap for large projects?

No, of course, I love CSS grids and I think they could help me and my customers to create cool layouts without any library.

So I've tried to learn deeply Bootstrap and to replicate its layout and responsive behaviours using CSS grid layout.

Here there is the result:

Basically I've tried to replicate Bootstrap layout using only grid properties.

There are some issues (especially with variable width content), but it seems to work pretty good.

Limitations

Equal width multi-line

Isn't possible with CSS grids and auto flows - you need to split the line.

Aligment

I didn't develop the align-{alignProp} classes, so I don't think they will work.

Conclusions

What do you think about this experiment? Do you have any advice or just some tips to help me converting Bootstrap using css grids?

Let me know!

DEV Community: Nicola

Event-Driven Architecture for Clean React Component Communication

The Problem: Props Drilling and Callback Chains

The Traditional Flow: Props Down, Callbacks Up

A Common Problem: Callback Complexity

The Solution: Enter the Event-Driven Approach

Event Dispatching

Centralized Handling

Props Remain Downward

Implementation

useEvent hook

Parameters:

Features:

Example:

Real World Example?

Real-World Use Cases for useEvent

1. Notifications System

2. Theme Switching

3. Global Key Bindings

4. Real-Time Updates

5. Form Validation Across Components

6. Analytics Tracking

7. Collaboration Tools

Conclusions

Simple alert styling using SASS MAPS

SASS MAPS?

Defining the map

Creating the loop for the class definitions

Using map-get to retrieve class related properties

Nested classes properties

Conclusions

How to become a Game Developer?

premises ❗

The game development idea

Problems

1. Working abroad 🐱‍🏍

2. Create a game software house 🐱‍🐉

GSAP Animated Select

GSAP Animations in Angular - Handle animateOut

Handle the out animation of our components

Toggle HTML elements

The ngIfAnimated directive

What will come next

GSAP Animations in Angular - Apply directive to html

Let's apply the directive to our HTML elements!

GSAP Animations in Angular - Animation Directives

Create a directive for animation

The CoreAnimationDirective class

The FadeInDirective class

GSAP Animations in Angular - Getting Started

What is GSAP and what will we learn in this tutorial

Prerequisites

Part 1. Install GSAP

Thanks to

TabNine - Put your coding speed to the next level

Deep learning at the rescue! 👨‍💻👩‍💻

What is TabNine?

How does it works?

Install

Visual Studio Code

IntelliJ Idea

Atom

Examples

Example 1. Comment-Driven code completition

Classes development and extension

Example 2. Function parameters auto completition

TabNine and Typescript

Thanks to:

I'm creating an entire web OS as my personal website for 2021

A cool way to handle scss color variables

The problem

The solution

Conclusions

Bootstrap Layout with CSS Grid? It's possible, but with some limitations.

Preface

So, what now? Turn back to Bootstrap for large projects?

Limitations

Equal width multi-line

Aligment

Conclusions

Real-World Use Cases for `useEvent`