Заметки фронтендера
20 subscribers
11 photos
11 files
55 links
Инструкции и советы по react, typescript, webpack
Download Telegram
Самый функциональный шелл для консоли это, несомненно, zsh и легендарный конфиг для него: https://github.com/robbyrussell/oh-my-zsh
Тут есть всё: плагины, и мощное автодополнение всего и вся, алиасы для git, npm, yarn... а так же огромный набор темок.
1. Устанавливаем сам zsh
sudo apt-get install zsh
или
brew install zsh
2. Затем oh-my-zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
Во время установки будет запрошен пароль - для установки zsh как шелл по-умолчанию, затем перезагружаем компьютер или делаем логаут и заходим в систему заново для применения изменений.
3. Мой список используем плагинов, оставляем по желанию:
plugins=(git node emacs python cp command-not-found colorize fzf brew cabal docker docker-compose dotenv gitignore iterm2 npm perl vscode ufw sudo stack screen zsh-autosuggestions)
Ищем соответствующую строчку в ~/.zshrc и обновляем.
3.1. Чтобы заработал zsh-autosuggestions, устанавливаем его отдельно:
git clone https://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions
3.2. Чтобы заработал fzf, далем как здесь:
https://t.me/node_modules/56

#terminal #console #macos #mac #iterm #zsh #ohmyzsh #fzf #shell #zsh #bash
zsh-autosuggestion, по нажатию на Ctrl+E вбивает всю строку
Мощная темка под oh-my-zsh и iterm для настоящих космонавтов https://github.com/denysdovhan/spaceship-prompt 🌚🌚💫

0. А ЗАЧКМ? Умеет подсвечивать текущий статус git репозитория, версию node, docker и еще кучу всякого интересного.

1. Сперва инсталлим powerline шрифт https://github.com/powerline/fonts например любимый мною Fira Code https://t.me/node_modules/53 :
brew tap homebrew/cask-fonts
brew cask install font-fira-code


2. Настраиваем iterm для работы с новым шрифтом:
Жмем Cmd+, → Вкладка Profiles → Слева в списке Default → Вкладка Text → Выбираем для Font и Non-ASCII Font Fira Code → Чекаем галочки Use ligatures.

3. Ставим темку:
git clone https://github.com/denysdovhan/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt"
ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"

4. Обновляем конфиг ~/.oh-my-zsh:
ZSH_THEME="spaceship"

#terminal #console #macos #fonts #iterm #ohmyzsh
Вот так выглядит spaceship темка в репозитории с проектом на ноде.
➜ 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