Skip to content

Instantly share code, notes, and snippets.

View scriptex's full-sized avatar
🎨
Making email safer | Painting the pixels on your screen

Atanas Atanasov scriptex

🎨
Making email safer | Painting the pixels on your screen
View GitHub Profile
@scriptex
scriptex / hooks-tests.tsx
Created January 21, 2022 13:56
A helper to test custom hooks with react-testing-library
import * as React from 'react';
import thunk from 'redux-thunk';
import { render } from '@testing-library/react';
import { Router } from 'react-router';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
// remember to import your history object
// store is your redux store
@scriptex
scriptex / use-scroll-into-view.ts
Created October 25, 2021 11:03
React hook for smooth scrolling of an element into view
import { useMemo, useLayoutEffect } from 'react';
export const useScrollIntoView = (
selector: string,
options: ScrollIntoViewOptions,
): void => {
const opts: ScrollIntoViewOptions = useMemo(
() => ({
block: 'center',
inline: 'center',
@scriptex
scriptex / foldermoji.md
Last active July 16, 2024 04:54
Folder structure in Markdown using emoji
📦 package
┣ 📂 folder 1
┃ ┗ 📜 file.ts
┃ ┗ 📜 file.js
┃ ┗ 📜 file.css
┃ ┗ 📜 file.html
┣ 📂 folder 2
┃ ┗ 📜 file.mp4
┃ ┗ 📜 file.mp3
@scriptex
scriptex / csv-export.ts
Last active January 14, 2021 21:53
Export to CSV from JavaScript
type ValuesOf<T extends any[]> = T[number];
type IndexedList<T> = Record<string, T>;
const exportCSV = <T>(data: Array<IndexedList<ValuesOf<T[]>>>, keys: string[], columns: string[]): string => {
let csv = 'data:text/csv;charset=utf-8,';
columns.forEach((column: string) => {
csv += `${column},`;
});
@scriptex
scriptex / overwrite-fetch.ts
Last active January 14, 2021 21:53
Overwrite Swagger' fetch in React Native
type Constructor<T> = new (...args: any[]) => T;
function OverwriteFetch<T extends Constructor<{}>>(Base: T): Constructor<any> {
return class extends Base {
constructor(...args: any[]) {
super(...[...args, fetch]);
}
};
}
@scriptex
scriptex / jest-date-mock.ts
Last active February 1, 2021 13:37
Jest date mock (in Typescript)
/**
* Mock a date which is created with the `new Date()` constructor.
*
* Usage:
*
* import { onBeforeEach, onAfterEach } from 'FOLDER/jest-date-mock';
*
* describe('', () => {
* beforeEach(onBeforeEach);
* afterEach(onAfterEach);
@scriptex
scriptex / firebase.js
Last active February 1, 2021 13:36
Expo and Firebase integration in React Native
/**
* External dependencies
*/
import { auth } from 'react-native-twitter';
import * as firebase from 'firebase';
import Expo, { AuthSession } from 'expo';
/**
* Internal dependencies
*/
@scriptex
scriptex / hover.css
Last active April 5, 2021 09:40
Hover media query
/**
* Detailed info about the Hover CSS Media Feature can be found here:
* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
*
* This media query is implemented in almost all modern browsers and works as expected.
* The modern browsers include Chrome, Opera, Safari, Edge, Brave, Vivaldi, etc.
* Internet Explorer and Firefox do not understand this media feature and therefore will
* simply ignore all rules inside the query.
* Update: Firefox supports this media feature since version 64.
* A workaround can be found below.
@scriptex
scriptex / rename.js
Last active April 10, 2023 23:30
Rename all files in a folder with NodeJS
const { join } = require('path');
const { readdirSync, renameSync } = require('fs');
const [dir, search, replace] = process.argv.slice(2);
const match = RegExp(search, 'g');
const files = readdirSync(dir);
files
.filter(file => file.match(match))
.forEach(file => {
const filePath = join(dir, file);
@scriptex
scriptex / README.md
Last active February 1, 2021 13:35
create-svg-sprite usage

Как да използваме create-svg-sprite?

  1. Уверете се, че имате инсталиран node.js и npm. За целта, изпълнете следните команди в GitBash (или друг терминал): node -v npm -v

Ако резултата е цифри, значи всичко е наред и имате нужните зависимости инсталирани.

  1. Инсталирайте create-svg-sprite глобално: