Заметки фронтендера
20 subscribers
11 photos
11 files
55 links
Инструкции и советы по react, typescript, webpack
Download Telegram
➜ code
zsh: command not found: code
Знакомо? Можно не гуглить.
Открываем vscode, жмем Shift+Cmd+P, пишем shell, выбираем install.
Готово!
Теперь открываем vscod прямо из консольки с проектом:
code .

#vsc
ode #macos #terminal #shell
Аналог библиотеки Parsec для Haskell теперь и для JavaScript - Parsimmon!

Это полноценные комбинаторные парсеры, совместимые с FantasyLand. Для тех кто не в курсе - эта штука позволяет компактно описывать сложные грамматики, например синтаксический анализатор JSON будет состоять примерно из 100 строк.

Из минусов - скорость работы. Но там где скорость не критична, а важна выразительность, комбинаторные парсеры решают.

Линк: https://github.com/jneen/parsimmon

#parsing #parser #parsec #парсер
This media is not supported in your browser
VIEW IN TELEGRAM
Иструкция как написать красивый dropdown по наведению на табы, как в меню сайта stripe.com

Очень актуально для многих сайтов.

https://lokeshdhakar.com/dev-201-stripe.coms-main-navigation/

#css #design #stripe #dropdown
Interactive React Lifecycle Methods diagram

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Только вот устарела уже. Надо форкнуть и дописать.
Неинтереактивная, но зато актуальная версия: https://github.com/dluc/react-components-lifecycle

#react #lifecycle #diagram
Гайд от автора typesafe-actions по использованию TypeScript с React/Redux.

Cheatsheet по типам в React’е, типы для типичных React/Redux паттернов вроде render props, шпаргалки по конфигам и прочие FAQ.

Обязателен к изучению всем, кто пишет на React+TS.

Link: https://github.com/piotrwitek/react-redux-typescript-guide

#react #redux #typescript #guide #faq
Использование Babel совместно с Typescript.

TS занимается проверкой типов в фоне, Babel же выпиливает все типы из кода и собирает проект, словно это JS. Очень удобно и быстро.

https://iamturns.com/typescript-babel/

#typescrpt #babel
Не используйте древний и костыльный window.isNaN, в ES6 завезли Number.isNaN, ибо см. приложенную картинку. Даже isNaN(0/0) возвращает false : ^)

#es6 #isNaN #javascript #ecmascript
Проверить package.json на наличие обновлений:
> npx npm-check-updates
npx: установлен 260 в 22.36s
Checking ~/project/package.json
[====================] 88/88 100%

arui-feather ^13.11.0 → ^15.6.0
arui-logger ^3.2.1 → ^3.3.3
arui-private ^8.0.8 → ^13.7.1
boom ^5.1.0 → ^7.3.0
cloud-config-client ^1.4.2 → ^1.5.0
config ^1.26.1 → ^3.2.4
connected-react-router ^4.3.0 → ^6.6.1
core-js ^2.6.1 → ^3.4.7

Run ncu -u to upgrade package.json


#npm #node
Вон Вернон - Реализация методов предметно-ориентированного проектирования

https://disk.yandex.ru/d/V_UFKwfrDBPYMA

#ddd #book #architecture
You don’t know JS 1ed. Книга с подробным разбором тонкостей работы жаба-скрипта, написанная простым языком с иллюстрациями
[eng] Читать онлайн без смс и регистрации: https://github.com/getify/You-Dont-Know-JS/tree/1st-ed
[rus] Глава про this и прототипы
[eng] Остальные файлы

#book #перевод #eng #javascript