Skip to content

Instantly share code, notes, and snippets.

View pankajparkar's full-sized avatar
👨‍💻
Coding

Pankaj Parkar pankajparkar

👨‍💻
Coding
View GitHub Profile
@lacolaco
lacolaco / 1.ngx-reactify.tsx
Last active February 26, 2024 08:13
A React component to render a standalone Angular component (Angular v14.2 is required)
import { ApplicationRef, ComponentRef, createComponent, Type } from "@angular/core";
import { createApplication } from "@angular/platform-browser";
import React, { useEffect, useRef, useState } from "react";
type AnyComponentRef = ComponentRef<unknown>;
export type ReactifyProps = {
component: Type<unknown>;
inputs?: Record<string, unknown>;
};
@Dhaneshmonds
Dhaneshmonds / IndianStatesDistricts.json
Last active November 9, 2023 22:22
Indian states, capitals and districts
{
"states": [
{
"id": "1",
"type": "Union Territory",
"capital": "Port Blair",
"code": "AN",
"name": "Andaman and Nicobar Islands",
"districts": [
{
@wottpal
wottpal / date-formats.ts
Created April 18, 2019 15:10
Custom DateFormats & DateAdapter for Angular Material MatDatepicker using Day.js
import { Platform } from '@angular/cdk/platform';
import { NativeDateAdapter } from '@angular/material';
import * as dayjs from 'dayjs';
import 'dayjs/locale/de';
import * as customParseFormat from 'dayjs/plugin/customParseFormat';
import * as localizedFormat from 'dayjs/plugin/localizedFormat';
/**
* Custom Date-Formats and Adapter (using https://github.com/iamkun/dayjs)
@tkrotoff
tkrotoff / FrontendFrameworksPopularity.md
Last active May 2, 2024 03:18
Front-end frameworks popularity (React, Vue, Angular and Svelte)
@kentcdodds
kentcdodds / use-deep-compare-effect.js
Created November 9, 2018 16:10
a custom react hook that I want feedback on because it feels like a lot of work and maybe I'm missing something...
// Feedback requested on the useDeepCompareEffect
// it just feels like a bit of work...
// HERE'S THE REASON I NEED THIS:
// when people use the useQuery hook, they'll typically
// do so like this: `useQuery(myQuery, {var1: props.value})`
// which means that passing `variables` to `useEffect` will
// trigger a rerun of the callback even if they didn't
// actually change (referrential equality)
function useQuery({query, variables}) {
@bragma
bragma / ApiClient.js
Last active December 12, 2023 07:59
My take on 401/token refresh axios interceptor - use promises' implicit queue to retry all pending requests awaiting on a shared promise
import axios from 'axios'
export default class ApiClient {
constructor(baseUrl, tokenStorage) {
this.http = axios.create({
baseURL: baseUrl
})
this.tokenStorage = tokenStorage
this.setupTokenInterceptors()
@praveenpuglia
praveenpuglia / same-effect-multiple-actions.ts
Created April 25, 2018 19:04
Same effect for multiple actions - ngrx effects
@Effect({dispatch: false})
entityCreationSuccess$: Observable<Action> = this.actions$.pipe(
ofType(UserActions.CREATE_USER_SUCCESS, PostActions.CREATE_POST_SUCCESS),
tap(action => {
this.router.navigate(['../'], {relativeTo: this.route})
})
);
@praveenpuglia
praveenpuglia / multiple-actions.ts
Created April 25, 2018 18:24
Dispatch multiple actions from ngrx effect
@Effect()
search$: Observable<Action> = this.actions$.pipe(
ofType(SearchActions.SEARCH),
switchMap(action => {
const query = action.payload;
return [new FetchPanel1Data(query), new FetchPanel2Data(query)];
})
);
@joseluisq
joseluisq / currencies.json
Created April 3, 2018 08:39
JSON list of all currency symbols available from the Open Exchange Rates API - https://docs.openexchangerates.org/docs/currencies-json
{
"AED": "United Arab Emirates Dirham",
"AFN": "Afghan Afghani",
"ALL": "Albanian Lek",
"AMD": "Armenian Dram",
"ANG": "Netherlands Antillean Guilder",
"AOA": "Angolan Kwanza",
"ARS": "Argentine Peso",
"AUD": "Australian Dollar",
"AWG": "Aruban Florin",
@ritwickdey
ritwickdey / face-detection-chrome-api.js
Last active December 1, 2023 12:27
Face Detection using Google Chrome API (Experimental)
const detectFace = () => {
if(!window.FaceDetector) return console.log('Unsupported Version or Feature is not enabled')
const img = document.querySelector('#targetImg');
const faceDetector = new FaceDetector();
const scale = img.width / img.naturalWidth;
faceDetector
.detect(img)
.then(faces =>
faces.map(face => face.boundingBox)
)