Skip to content

Instantly share code, notes, and snippets.

Avatar

Ivan Kleshnin ivan-kleshnin

View GitHub Profile
@ivan-kleshnin
ivan-kleshnin / emotion-cache.ts
Last active Jul 26, 2022
Flex Start-End Emotion (Stylis) Plugin
View emotion-cache.ts
import type {StylisPlugin, StylisElement} from '@emotion/cache'
import createCache from "@emotion/cache"
// flexStartEndPlugin
const isFlex = (element: StylisElement): boolean => {
if (
element.parent && typeof element.parent == "object" &&
element.parent.children && typeof element.parent.children == "object"
) {
for (const child of element.parent.children) {
@ivan-kleshnin
ivan-kleshnin / chakra-color-mode.md
Last active Jul 21, 2022
Chakra-UI fixed color mode component. Assuming NextJS file structure...
View chakra-color-mode.md

components/ColorMode.tsx

import {Box, LightMode, DarkMode} from "@chakra-ui/react"

export type ColorModeProps = {
  mode: "light" | "dark"
  background?: string
  children: React.ReactNode
}
View good-ui-library-rules-draft.md

Quest for a good UI library

Quick notes for myself.

MUI

  • Emotion based 📝
  • Large ecosystem 👍
  • A lot of components 👍
  • Also hooks and utils 👍
@ivan-kleshnin
ivan-kleshnin / course.md
Last active Jul 21, 2022
Some courses I've finished (a sample of a full list, as of now)
View course.md

Courses

A list to track my progress because I tend to forget such things. Listing only useful ones here.

Design

UI Libs / Frameworks

View job-sorting.ts
const experiences = [
// all `nulls`s
{id: 1, name: "FOO", startDateYear: null, startDateMonth: null, endDateYear: null, endDateMonth: null},
// three `null`s
{id: 2, name: "FOO", startDateYear: 2022, startDateMonth: null, endDateYear: null, endDateMonth: null},
{id: 3, name: "FOO", startDateYear: null, startDateMonth: 2, endDateYear: null, endDateMonth: null},
{id: 4, name: "FOO", startDateYear: null, startDateMonth: null, endDateYear: 2022, endDateMonth: null},
{id: 5, name: "FOO", startDateYear: null, startDateMonth: null, endDateYear: null, endDateMonth: 2},
View react-query-checks.tsx
/*
Check this: https://tkdodo.eu/blog/status-checks-in-react-query
Check this: https://github.com/ivan-kleshnin/react-query-status-checks
*/
// TWO PARALLEL QUERIES, RESULTS ARE RENDERED SEPARATELY
export function Controller() : JSX.Element {
const query1 = useQuery("...first")
const query2 = useQuery("...second")
View telegram-post-antshater.md

paqmind

ФУЛЛСТЕК РАЗРАБОТКА для продвинутых

Утомили пересказы документации и Hello-World туториалы?

На Paqmind регулярно публикуем уникальный авторский контент по
веб-разработке и программированию для уровней Junior+, Middle и выше.

  • современные технологии и тренды
View .eslintrc.json
{
// An .eslintrc starter file with all rules (set to 0) and envs (set to false) listed.
// Other options (although by no means comprehensive) are either set to false or else commented out.
//
// ESLint docs -- Configuring ESLint: https://eslint.org/docs/user-guide/configuring
// ESLint docs -- List of available rules: https://eslint.org/docs/rules/
"parserOptions": {
// "ecmaVersion": 5, // set to 3, 5 (default), 6, 7, or 8 to specify the version of ECMAScript syntax you want to use.
// // You can also set to 2015 (same as 6), 2016 (same as 7), or 2017 (same as 8) to use the year-based naming.
@ivan-kleshnin
ivan-kleshnin / promise.js
Created Jun 19, 2019 — forked from vkarpov15/promise.js
Simple Promises/A+ Compliant Promise
View promise.js
const assert = (v, err) => {
if (!v) {
throw err;
}
};
let counter = 0;
class Promise {
constructor(executor) {
@ivan-kleshnin
ivan-kleshnin / design-for-non-designers.md
Last active May 20, 2019
Design resources for non-designers
View design-for-non-designers.md