Skip to content

Instantly share code, notes, and snippets.

View TaniaAlex's full-sized avatar

TaniaAlex TaniaAlex

3 followers · 10 following
View GitHub Profile
@TaniaAlex
TaniaAlex / util.js
Created June 16, 2022 18:28 — forked from gitdagray/util.js
Javascript Utility Functions
// Youtube tutorial here: https://youtu.be/LDgPTw6tePk
// These functions are designed to be exported, but you could create a class instead. See tutorial video.
// #1 proper case
export const properCase = (string) => {
return `${string[0].toUpperCase()}${string.slice(1).toLowerCase()}`;
};
@TaniaAlex
TaniaAlex / machine.js
Last active April 9, 2021 11:30
Generated by XState Viz: https://xstate.js.org/viz
const fetchMachine = Machine({
id: 'loadFile',
initial: 'idle',
context: {
file: null,
loadedDataBlobUrl: '',
zipFileName: null,
loadedData: { inputData: null, productsOptions: {} },
error: null,
},
@TaniaAlex
TaniaAlex / splitPath.js
Created March 2, 2021 18:21 — forked from nopjia/splitPath.js
The ultimate split path, with a single regex
/**
* The ultimate split path.
* Extracts dirname, filename, extension, and trailing URL params.
* Correct handles:
* empty dirname,
* empty extension,
* random input (extracts as filename),
* multiple extensions (only extracts the last one),
* dotfiles (however, will extract extension if there is one)
* @param {string} path
@TaniaAlex
TaniaAlex / ImageUploadComponent.jsx
Created January 13, 2021 11:03 — forked from hartzis/ImageUploadComponent.jsx
React Image Upload with Preview
// https://codepen.io/hartzis/pen/VvNGZP
class ImageUpload extends Component {
constructor(props) {
super(props);
this.state = {
file: '',
imagePreviewUrl: ''
};
this._handleImageChange = this._handleImageChange.bind(this);
this._handleSubmit = this._handleSubmit.bind(this);
@TaniaAlex
TaniaAlex / pseudo-classes-elements.html
Created December 28, 2020 16:55 — forked from prof3ssorSt3v3/pseudo-classes-elements.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Pseudo-class vs Pseudo-elements</title>
<meta name="viewport" content="width=device-width"/>
<style>
p{
color: cornflowerblue
}
@TaniaAlex
TaniaAlex / border-radius.html
Created December 28, 2020 16:36 — forked from prof3ssorSt3v3/border-radius.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS border-radius</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="main.css">
<style>
body{
background-color: #ddd;
@TaniaAlex
TaniaAlex / absolute-relative.html
Created December 28, 2020 16:17 — forked from prof3ssorSt3v3/absolute-relative.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Combining position relative and absolute</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="main.css"/>
<style>
#main{
background-color: hsl(120, 30%, 80%);
@TaniaAlex
TaniaAlex / sticky.html
Created December 28, 2020 15:56 — forked from prof3ssorSt3v3/sticky.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS position: sticky</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="main.css"/>
<style>
dl{
margin: 1rem;
@TaniaAlex
TaniaAlex / float-clear.html
Created December 27, 2020 12:40 — forked from prof3ssorSt3v3/float-clear.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Intro to CSS Float</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="main.css"/>
<style>
.one img{
float:left;
@TaniaAlex
TaniaAlex / ESLint-Prettier-for-React-TypeScript-Airbnb.md
Created December 16, 2020 18:45 — forked from EliEladElrom/ESLint-Prettier-for-React-TypeScript-Airbnb.md

Project root:

yarn add -D --save-exact eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier eslint-config-react-app eslint-import-resolver-typescript eslint-webpack-plugin eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks babel-eslint eslint-plugin-jest @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier prettier-eslint prettier-eslint-cli eslint-plugin-prettier

$ vim .eslintrc

{
  "plugins": ["prettier", "@typescript-eslint"],