ivan-kleshnin

TailwindCSS UI kits

Look for more options here: https://www.tailwindawesome.com

TODO

• Radix

https://tailwindui.com/

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)
• [+] Adam Wathan, Steve Schoger: Refactoring UI (very good)
• [~] Erik Kennedy: Learn UI Design
• [~] Gary Simon: DesignCourse channel

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

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

ivan-kleshnin

function swap(i1, i2, xs) {
  if (i1 == i2) return xs
  return xs.reduce((z, x, i) => {
    return i == i1 ? z :
           i == i2 ? (i1 > i2 ? [...z, xs[i1], x] : [...z, x, xs[i1]]) :
                     [...z, x]
  }, [])
}

// Например, переставить 'B' с i1 = 1 на i2 = 4

ivan-kleshnin

A tale of SSR

Attempts to recover our SSR functionality.

1. After.js [-]

• Semi-dead project. Suggest to switch to Razzle (its core)

2. Razzle [-]