📄 3/3 100+ FREE Resources Every Web Developer Must Try

#frontend #info

FREE Sites for HTML/CSS Templates 🔥

HTML5UP, HTMLRev, Free-CSS, Templated, FreeHTML5, Start, Bootstrap, Bootswatch, BootstrapTaste, Cruip, Tooplate, HTML5xCSS3

Learn CSS by Playing Games 🔥

CSS Diner: Practice CSS selectors with a fun game.
Flexbox Froggy: Learn CSS Flexbox by playing this game.
Grid Garden: Master CSS Grid layout by playing this game.
Flexbox Defense: A game to learn CSS Flexbox.
CSSBattle: Compete against others by writing CSS code.
Flexbox Zombies: Learn CSS Flexbox by playing this game.

FREE Code Editors 🔥

— Visual Studio Code (VS Code)
— Sublime Text
— Brackets
— Vim

JavaScript Animation Libraries 🔥

— Anime.js: Lightweight JavaScript animation library.
— ScrollReveal.js: Easily reveal elements as they enter the viewport.
— Popmotion: A functional, flexible JavaScript motion library.
— AniJS: Declarative handling library for CSS animations.
— Wow.js: Reveal CSS animation as you scroll down a page.
— Typed.js: A JavaScript library that types.
— Velocity.js: Accelerated JavaScript animation.
— GSAP: Professional-grade animation for the modern web.

📄 Customizable Angular animations

#angular #animations #ui_element

...A component with customizable animations might look like this...

// collapse.ts

const closedStyle = style({ 
  height: 0 
});

const openStyle = style({ 
  height: '*' 
});

const timings = '{{duration}}ms linear';

const defOptions: AnimationOptions = { 
  params: { 
   duration: 300 
  } 
};

export const collapse = trigger('collapse', [
  transition(
    ':enter',
    animation([closedStyle, animate(animateTimings, openStyle)]),
    defaultOptions
  ),
  transition(
    ':leave',
    animation([openStyle, animate(animateTimings, closedStyle)]),
    defaultOptions
  ),
]);

// bonus.component.ts

@Component({
  animations: [collapse],
  host: {
    '[@collapse]': 'animationOptions',
  },
})
export class BonusComponent implements OnInit {
  @Input() public duration = 300;
  public options!: IAnimationOptions<string>

  public ngOnInit(): void {
    this.options = {
      value: '_',
      params: { 
         duration: this.duration 
      },
    };
  }
}

✅ Article link

📄 Angular Named Router Outlets

#angular #router #outlets

<!-- wrapper-layout.component.html -->

 <div class="container">
    <div class="row">
        <div>
            <left-side></left-side>
        </div>
        <div>
            <router-outlet 
                name="showright"
            ></router-outlet>
        </div>
    </div>
</div>

/** routing.module.ts */

{
    path: 'connect',
    component: WrapperLayoutComponent,
    children: [
       { 
           path: '', 
           component: RightSideComponent,
           outlet: 'showright'
       },
    ]
 },

// component navigation action

this.router.navigate([
    '/connect', 
    { outlets: { showright: ['user-info'] } }
]);

✅ Article link

📄 1/8 JS Reactive Patterns: PubSub or Publish-Subscribe

#js #patterns #pubsub

PubSub is one of the most commonly used and fundamental reactivity patterns. The Publisher is responsible for notifying Subscribers about the updates and the Subscriber receives those updates and can react in response.

One popular example of its usage is Redux. This popular state management library is based on this pattern (or more specifically, the Flux architecture). Things work pretty simple in the context of Redux:

— Publisher: The store acts as the publisher. When an action is dispatched, the store notifies all the subscribed components about the state change.

— Subscriber: UI Components in the application are the subscribers. They subscribe to the Redux store and receive updates whenever the state changes.

📄 2/8 JS Reactive Patterns: Custom Event Targets

#js #patterns #customEvent

If you prefer not to dispatch events globally on the window object, you can create your own event target.

By extending the native EventTarget class, you can dispatch events to a new instance of it. This ensures that your events are triggered only on the new class itself, avoiding global propagation. Moreover, you have the flexibility to attach handlers directly to this specific instance.

📄 3/8 JS Reactive Patterns: Observer

#js #patterns #observer

The Observer pattern is really similar to PubSub. You subscribe to the Subject and then it notifies its subscribers (Observers) about changes, allowing them to react accordingly. This pattern plays a significant role in building decoupled and flexible architecture.

📄 4/8 JS Reactive Patterns: Reactive Properties With Proxy

#js #patterns #proxy

If you want to react to changes in objects, Proxy is the way to go. It lets us achieve reactivity when setting or getting values of object fields.

📄 5/8 JS Reactive Patterns: Individual Object Properties and Reactivity

#js #patterns #defineProperty

If you don’t need to track all the fields in the objects, you can choose the specific one using Object.defineProperty or group of them with Object.defineProperties.

📄 6/8 JS Reactive Patterns: Reactive HTML Attributes With MutationObserver

#js #patterns #MutationObserver

One way to achieve reactivity in the DOM is by using MutationObserver. Its API allows us to observe changes in attributes and also in the text content of the target element and its children.

📄 7/8 JS Reactive Patterns: Custom Events as a Browser Version Of PubSub

#js #patterns #CustomEvent

The browser offers an API for triggering and subscribing to custom events through the CustomEvent class and the dispatchEvent method. The latter provides us with the ability not only to trigger an event but also to attach any desired data to it.