HansKre

gimp how-to

make background transparent

shift + O: select by color optional: cmd+I to invert selection click on color Edit > clear selection becomes transparent cmd+shift+A: unselect by selecting all

HansKre

asyncThunk

https://redux-toolkit.js.org/usage/usage-with-typescript

https://redux-toolkit.js.org/usage/usage-with-typescript#typing-async-thunks-inside-createslice

A type for state and/or dispatch cannot be provided as part of the ThunkApiConfig, as this would cause circular types.

const state = thunkApi.getState() as RootState;

HansKre

Setup ESLint, Prettier and Husky

1. Execute following commands

   npm install --save-dev eslint-config-prettier eslint-plugin-prettier eslint-plugin-md prettier

2. Add following scripts to your package.json

HansKre

VSCode Shortcuts

Daily Shortcuts

Name	Windows	Mac
View: Move Editor into Previous Group	ctrl+alt+LeftArrow
View: Move Editor into Next Group	ctrl+alt+RightArrow
Git: Open Changes	ctrl+alt+d
Git: Stage Changes	ctrl+alt+g

HansKre

NPM

Regular tasks

npm audit npm audit fix

Unused dependencies

npm i -g depcheck

HansKre

CODEREVIEWERS

• create new team
  • go to Org: /orgs//teams
  • note: team must be visible
  • add people to the team
• add team to repo & give WRITE-permissions
  • go to repo: ///settings/access
  • add the group to repo, e.g. with Maintain-role
• Enable branch protection rules

HansKre

jss class name compilation

Motivation: classNames-concept on prod & dev should not deviate from local development

• MUIv4 forcefully removes all meaningful CSS-classnames during build process by compiling all jss-classnames to jss<id>
• Not only is this a big deviation from what the developer, unit tests and CI/CD-pipeline see, it can also highly impact CSS-behavior if CSS-selectors are used.
• This makes styling of 3rd-party components e.g. FOSS-plugins but even Backstage itself very hard or at least instable and brittle.
• This PR disables jss-className compilation by re-implementing the name-generation algorithm in createGenerateClassName.ts which then enables styling the dark themed version of CatalogReactUserListPicker.

Implementation

HansKre

import styled from 'styled-components';

const CenteringContainer = styled.div<{ upDesktop: boolean }>`
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  background-color: white;
  border: solid;
  border-radius: 10px;

HansKre

import { ReactNode } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import Head from 'next/head';
// import Footer from '../footer/Footer';
import WithFadeInAnimation from '../WithFadeInAnimation';
import useWindowResize from '../../hooks/useWindowResize';
// import Navbar from '../navbar/Navbar';
import mainTheme from '../../styles/mainTheme';

/* Full height container with 44px for

HansKre

const http = require('https');

const PAT = '';
const ORG_NAME = 'vpp';

const makeRequest = (path, method, cb, data) => {
  const options = {
    method: method,
    hostname: 'github.com',
    port: null,