Skip to content

Instantly share code, notes, and snippets.

View iffa's full-sized avatar
☀️
Sun is shining and so are you

Santeri Elo iffa

☀️
Sun is shining and so are you
View GitHub Profile
background: linear-gradient(180deg, #fbd3e9, #bb377d, #00c9ff, #92fe9d);
background-size: 800% 800%;
-webkit-animation: mellow-bg 59s ease infinite;
-moz-animation: mellow-bg 59s ease infinite;
-o-animation: mellow-bg 59s ease infinite;
animation: mellow-bg 59s ease infinite;
@-webkit-keyframes mellow-bg {
0%{background-position:50% 0%}
@iffa
iffa / NewTabRouterLinkDirective.ts
Last active July 11, 2019 11:55
Modified RouterLinkWithHref directive for Angular, that triggers normally for new tab/window but emits an event for normal left click. For cases where you need custom logic only when staying on the current open tab. Tested with Angular 6+
import { ActivatedRoute, NavigationEnd, Router, RouterEvent, RouterLinkWithHref, UrlTree } from '@angular/router';
import {
Directive,
EventEmitter,
HostBinding,
HostListener,
Input,
isDevMode,
OnChanges,
OnDestroy,
@iffa
iffa / osrm-backend.json
Last active May 10, 2020 11:37
CapRover template for the OSRM backend
{
"captainVersion": "2",
"documentation": "https://hub.docker.com/r/peterevans/osrm-backend/",
"displayName": "Open Source Routing Machine",
"description": "The Open Source Routing Machine in a box! This is the routing engine backend.",
"dockerCompose": {
"version": "3.3",
"services": {
"$$cap_appname": {
"image": "peterevans/osrm-backend:$$cap_osrm_version",
@iffa
iffa / BetterAccountManager.java
Last active May 12, 2020 09:03
AccountManager wrapper with an easier API and RxJava support
/**
* Wrapper for {@link AccountManager} with improved functionality and RxJava support.
*
* Originally found from <a href="https://github.com/novoda/spikes/tree/master/gertherb/android/src/main/java/com/gertherb/authentication">github.com/spikes/gertherb</a>,
* and modified to work with a newer RxJava version, using {@link Single} instead of {@link rx.Observable}.
*
* @author Ataul Munim
* @author Santeri Elo
*/
public class BetterAccountManager {
@iffa
iffa / filterDistinct.ts
Last active April 16, 2021 13:11
TypeScript function that takes an array of any type (object or primitive) and filters it distinctively, returning an array of unique values.
/**
* Takes an array of any type (object or primitive) and filters it distinctively.
* Duplicate values are removed, determined by the compare function.
*
* @param array Array to filter
* @param compare Compare function to compare objects for equality
* @returns Filtered array with distinct values
*/
export function filterDistinct<T>(
array: T[],
@iffa
iffa / useUnauthenticatedRedirect.tsx
Created September 10, 2021 12:05
Hook for redirecting when user is not logged in (React Router v6)
import { useNavigate } from "react-router-dom";
import useAuth from "./AuthContext";
import React, { useEffect } from "react";
/**
* Redirects user to another page if not authenticated.
* @param redirectTo Path to redirect to
*/
export function useUnauthenticatedRedirect(redirectTo: string = "/") {
const navigate = useNavigate();
@iffa
iffa / MotionBox.tsx
Last active January 11, 2022 16:25
Extended Chakra UI Flex-component with support for Framer Motion animations. (with TypeScript typings!)
export type MotionBoxProps = Omit<FlexProps, keyof MotionProps> &
MotionProps & {
as?: React.ElementType;
};
export const MotionBox = motion.custom(
forwardRef<MotionBoxProps, 'div'>((props, ref) => {
const chakraProps = Object.fromEntries(
// do not pass framer props to DOM element
Object.entries(props).filter(([key]) => !isValidMotionProp(key))
@iffa
iffa / cypress-visit-with-matcher.ts
Created March 3, 2022 09:06
Custom Cypress command for visiting a page with custom media matcher stubs & locale support
export interface MatcherOptions {
darkMode: boolean;
prefersReducedMotion?: boolean;
overrideLocale?: string;
}
declare global {
namespace Cypress {
interface Chainable {
/**
{
"xo": {
"extends": "xo-react",
"prettier": true,
"space": true,
"rules": {
"import/extensions": [
2,
{
"js": "never",
@iffa
iffa / html-lang-provider.tsx
Created September 1, 2022 07:25
Utility component for keeping the "lang" attribute of the document up to date with current user locale (Next.js/React)
import { useLocale } from "next-intl";
import { useEffect } from "react";
/**
* Utility component for keeping the lang-attribute of the document up to date.
* For Next.js, include this in e.g. custom App component.
*/
export const HtmlLangProvider = () => {
// Using next-intl here but realistically can be anything
const locale = useLocale();