Nilesh Patel NileshPatel17

Credit Card Payment Form

Wanted to work with some masking so made a payment form so, using vanilla JS and the imask.js library, made a fairly simply payment form that uses regex patterns to detect the credit card type as the user is inputting values and properly applies the relevant spacing associated with that brand. Also wanted to do a smidge of style flair so made a simple SVG card that changes as the user fills out the form.

A Pen by Adam Quinlan on CodePen.

License.

Vs Code Settings

Configure native bracket pair colourization

Make sure to remove the Bracket Pair Colorizer extension. Update VS Code
Open your user settings via CMD (CTRL for non-Mac users) + Shift + P and type settings. The settings JSON file will open. Add the following:

"editor.bracketPairColorization.enabled": true

git-multiple-accounts

step 1:

edit ~/.gitconfig

cat ~/.gitconfig

[user]
   name = Nilesh Patel

import React from 'react';
import { View, Button, Text, Animated, StyleSheet, Easing } from 'react-native';
import Svg, { Circle } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export function Box() {
  const animationController = React.useRef(new Animated.Value(0)).current;
  React.useEffect(() => {

Docker commands:

kill all running containers

docker kill $(docker ps -q)

delete all stopped containers

docker rm $(docker ps -a -q)

delete all images

	const fetch = (...args) => console.log(...args) // mock
	function httpRequest(url, method, data) {
	const init = { method }
	switch (method) {
	case 'GET':
	if (data) url = `${url}?${new URLSearchParams(data)}`
	break
	case 'POST':
	case 'PUT':
	case 'PATCH':

	import { useEffect, useRef } from "react";
	import { AppState, AppStateStatus } from "react-native";

	export const useFetchOnAppForeground = () => {
	const listener = useRef(null);

	function fetchOnAppForeground(params) {
	if (AppState.currentState === "active") {
	return fetch(params);
	} else {


	function App() {
	const data = Array(10).fill(0);
	const GAP = 5;
	const numColumns = 3;
	const { width } = Dimensions.get("window");
	// Reduce the size to accomodate margin space by items
	const ITEM_SIZE = width / numColumns - ((numColumns - 1) * GAP) / numColumns;

	const renderItem = ({ index }) => {

	import React, { useMemo, useState } from "react";
	import { LayoutChangeEvent, StyleSheet } from "react-native";
	import {
	PinchGestureHandler,
	PinchGestureHandlerGestureEvent,
	} from "react-native-gesture-handler";
	import Animated, {
	useAnimatedGestureHandler,
	useAnimatedStyle,
	useSharedValue,

	// VSCode Settings (hit `Cmd + ,` to open settings)

	{
	"editor.smoothScrolling": true,
	"editor.fontSize": 16,
	"editor.fontFamily": "Fira Mono, Consolas, 'Courier New', monospace",
	"editor.wordWrap": "on",
	"editor.tabCompletion": "on",
	"explorer.openEditors.visible": 0,
	"explorer.autoReveal": false,