ivan-kleshnin

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

components/ColorMode.tsx

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

export type ColorModeProps = {
  mode: "light" | "dark"
  background?: string
  children: React.ReactNode
}

ivan-kleshnin

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

Courses

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

Design

• [+] John McWade: update which courses exactly (Lynda -> Linkedin)
• [~] Erik Kennedy: Learn UI Design

UI Libs / Frameworks

ivan-kleshnin

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},

ivan-kleshnin

/*
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")

ivan-kleshnin

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

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

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

• современные технологии и тренды

ivan-kleshnin

{
  // 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

const assert = (v, err) => {
  if (!v) {
    throw err;
  }
};

let counter = 0;

class Promise {
  constructor(executor) {

ivan-kleshnin

Basics

• "The Non-Designer's Design Book", Robin Williams (book)
• "Don't Make Me Think", Steve Krug (book)

Typography

• Practical Typography (site)

Mixed