Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Konrad Fedorczyk fedek6

🎯
Focusing
View GitHub Profile
@fedek6
fedek6 / .editorconfig
Created May 24, 2022
Two spaces for everything
View .editorconfig
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
@fedek6
fedek6 / convetions.md
Created May 13, 2022
React props naming conventions
View convetions.md

Props naming

  • Array – use plural nouns. e.g. items
  • Number – use prefix num or postfix count, index etc that can imply a number. e.g. numItems, itemCount, itemIndex
  • Bool – use prefix is, can, has
    • is: for visual/behavior variations. e.g. isVisible, isEnable, isActive
    • can: fore behavior variations or conditional visual variations. e.g. canToggle, canExpand, canHaveCancelButton
    • has: for toggling UI elements. e.g. hasCancelButton, hasHeader
  • Object – use noun. e.g. item
  • Node – use prefix node. containerNode
@fedek6
fedek6 / auth-worker.js
Created Apr 21, 2022
Clooudflare worker for basic auth
View auth-worker.js
/**
* @param {string} USERNAME User name to access the page
* @param {string} PASSWORD Password to access the page
* @param {string} REALM A name of an area (a page or a group of pages) to protect.
* Some browsers may show "Enter user name and password to access REALM"
*/
const USERNAME = 'demouser'
const PASSWORD = 'demopassword'
const REALM = 'Secure Area'
@fedek6
fedek6 / gatsby-node.js
Created Apr 7, 2022
Better cache busting for Gatsby (using date hash)
View gatsby-node.js
const fs = require("fs");
const path = require("path");
const md5 = require("md5");
const util = require("util");
const glob = require("glob");
/**
* Cache busting
*/
const hash = md5(`${new Date().getTime()}`);
@fedek6
fedek6 / .htaccess
Created Apr 5, 2022
Rewrite everything to maintenance page when IP does not equal
View .htaccess
RewriteCond %{REMOTE_ADDR} !=95.160.157.10
RewriteCond %{REQUEST_URI} !=/maintenance.html
RewriteRule ^(.*)$ /maintenance.html [L]
@fedek6
fedek6 / .htaccess
Created Apr 5, 2022
Rewrite WordPress assets from develop to production
View .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/wp-content/uploads/[^\/]*/.*$
RewriteRule ^(.*)$ https://producion.com/$1 [QSA,L]
</IfModule>
@fedek6
fedek6 / rollup.config.js
Created Mar 22, 2022
Disable SVGR (SVGO) prefixes in Rollup
View rollup.config.js
import ts from "rollup-plugin-ts";
import { nodeResolve } from "@rollup/plugin-node-resolve";
// import peerDepsExternal from "rollup-plugin-peer-deps-external";
import svgr from "@svgr/rollup";
import { terser } from "rollup-plugin-terser";
import commonjs from "@rollup/plugin-commonjs";
import externals from "rollup-plugin-node-externals";
// import postcss from "rollup-plugin-postcss";
// import autoprefixer from "autoprefixer";
@fedek6
fedek6 / main.js
Created Mar 22, 2022
Disable SVGR (SVGO) prefixes in Storybook
View main.js
const path = require("path");
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
@fedek6
fedek6 / DocsContainer.js
Created Mar 17, 2022
Sorybook with dark mode support for docs (using stitches, but this can be edited)
View DocsContainer.js
import React from "react";
import { DocsContainer as BaseContainer } from "@storybook/addon-docs/blocks";
import { useDarkMode } from "storybook-dark-mode";
import { themes } from "@storybook/theming";
export const DocsContainer = ({ children, context }) => {
const dark = useDarkMode();
return (
<BaseContainer
@fedek6
fedek6 / .md
Created Mar 9, 2022
Aspect ratio padding bottom (for CSS usage)
View .md
Aspect Ratio Padding-Bottom
1:1 100%
16:9 56.25%
4:3 75%
3:2 66.66%
8:5 62.5%