Pep Locanto peplocanto

Browser Cache Api

interface CacheConfig {
  name: string;
  validTime: number;
  endpoints: string[];
  options?: CacheOptions;
  clearOnHide?: boolean;
}

Click & Drag Scroll in Vanilla JS

const DELTA = 6;
const CONTAINER_CLASS = 'drag-to-scroll__container';

const sliders = document.querySelectorAll('[data-drag-to-scroll]');

let isDown = false;
let isMoving = false;

Angular Carousel with SwiperJS

Intro

An Angular carousel created with SwiperJs.
Carousel component is programmed to accept every kind of template passed as carouselItem and return data passed as carouselData to the template.
This "short circuit" allows the Carousel component to stay transparent and agnostic, delegating the logic and design to the component that uses the Carousel.

Carousel Component

Html

Custom ngIf directive

Intro

Setup for a custom ngIf directive.

Arch

 app
 L common
   L directives
     L <name>.directive.ts

Angular Akita Store

Intro

Akita is a fantastic and lightweight library for state management.

Arch

<namespace>
  L <namespace>.store.ts
  L <namespace>.service.ts
  L <namespace>.query.ts

	// core.providers.ts
	import { APP_INITIALIZER } from '@angular/core';

	export const load<domain>ServiceFnFactory = (<domain>Service: <domain>Service): (() => Promise<any>) => () => {
	<domain>Service.init();
	return Promise.resolve();
	};

	export const APP_INITIALIZER_PROVIDERS: Provider[] = [
	{

	// best practice arch
	// app
	// L hooks
	// L useIsSsr.hook.ts

	// useIsSsr.hook.ts
	import { useState, useEffect } from "react";

	const useIsSsr = () => {
	const [isSsr, setIsSsr] = useState(true);

	// best practice arch
	// app
	// L core
	// L core.module.ts
	// L core.providers.ts
	// L core.model.ts

	// core.module.ts

	import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';