Skip to content

Instantly share code, notes, and snippets.

View inorganik's full-sized avatar
🛠️
building

Jamie Perkins inorganik

🛠️
building
View GitHub Profile
@inorganik
inorganik / 00-tailwind-v4-with-angular.sh
Last active May 3, 2024 17:51
Tailwind v4 in Angular 17
# STEP 1
#
# Install tailwind. We need the force flag because the angular builder
# has a peer dependency on tailwind ^2.0.0 || ^3.0.0
# Issue to address this: https://github.com/angular/angular-cli/issues/27585
#
$ npm i -D tailwindcss@next @tailwindcss/postcss@next --force
# STEP 2
#
@inorganik
inorganik / app.svelte
Last active August 19, 2023 13:23
CountUp.js with Svelte!
<script>
/**
* You can use CountUp directly like this:
*/
import { onMount } from 'svelte';
import { CountUp } from 'countup.js';
let targetEl, countUpAnim
onMount(() => {
@inorganik
inorganik / app.js
Last active July 15, 2024 02:07
Using CountUp.js in React
import { useEffect, useRef } from 'react'
// playground: https://stackblitz.com/edit/react-ts-nv5fxe?file=App.tsx
export default function App() {
// create a ref and declare an instance for each countUp animation
const countupRef = useRef(null);
let countUpAnim;
@inorganik
inorganik / angular-validators.ts
Created April 30, 2021 22:17
Angular validators
import {
AbstractControl,
AsyncValidatorFn,
ValidationErrors,
ValidatorFn,
Validators,
} from '@angular/forms';
export class CustomValidators {
@inorganik
inorganik / calculateObjectSize.js
Created February 26, 2020 17:47
Calculate the size of a js object in bytes
export function roughSizeOfObject(object) {
const objectList = [];
const stack = [object];
let bytes = 0;
while (stack.length) {
const value = stack.pop();
if (typeof value === 'boolean') {
bytes += 4;
} else if (typeof value === 'string') {
bytes += value.length * 2;
@inorganik
inorganik / auth-interceptor.ts
Created December 13, 2019 20:17
Example of an angular auth interceptor
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthContextManagerService } from './some/where/authContextService.ts';
@Injectable()
export class AuthorizationInterceptor implements HttpInterceptor {
constructor(private authContextService: AuthContextManagerService) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
@inorganik
inorganik / scroll-spy.directive.ts
Created November 26, 2019 17:06
Angular scroll spy directive
import { Directive, Inject, Input, Output, EventEmitter, OnInit, ElementRef } from '@angular/core';
import { WINDOW } from '../../services/window.service';
import { Router, NavigationEnd } from '@angular/router';
import { fromEvent, Subject, Observable } from 'rxjs';
import { map, distinctUntilChanged, filter, takeUntil, debounceTime } from 'rxjs/operators';
/*
* Emits boolean event when element passes
* threshold of either fromBottom or fromTop,
* or emits when element is in view
@inorganik
inorganik / getUsersLocale.ts
Created August 26, 2019 18:24
Angular: get user's language and locale
getUsersLocale(defaultValue: string): string {
if (typeof window === 'undefined' || typeof window.navigator === 'undefined') {
return defaultValue;
}
const wn = window.navigator as any;
let lang = wn.languages ? wn.languages[0] : defaultValue;
lang = lang || wn.language || wn.browserLanguage || wn.userLanguage;
return lang;
}
@inorganik
inorganik / WebSocketMock.ts
Created July 12, 2019 17:13
An abstract websocket endpoint class for node express
import * as expressWs from 'express-ws';
import * as WebSocket from 'ws';
/**
* Extend this class to make a new WebSocket endpoint.
*
* Derived classes should pass an Express app object and the
* string endpoint, and must implement handleMessage()
*/
export abstract class WebSocketMock {
@inorganik
inorganik / cloudSettings
Last active July 17, 2020 20:24
Visual Studio Code Settings Sync Gist
{"lastUpload":"2020-07-17T20:23:56.317Z","extensionVersion":"v3.4.3"}