Всем привет! На этой неделе с вами будет Мышов Саша. Большинству я знаком как ведущий телеграм-канала Defront. Ещё… twitter.com/i/web/status/1…

Темы этой недели:

Сегодня хочу рассказать про Defront (t.me/defront). Это телеграм-канал про web и фронтенд-разработку.

Концепция канала — небольшие саммари и мысли по поводу прочитанных статей, просмотренных докладов, новости из мира… twitter.com/i/web/status/1…

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

Как создаётся типичный пост. Ищу интересные ссылки в твиттере или телеграм-каналах. Собираю заинтересовавшие ссылки… twitter.com/i/web/status/1…

Затем выбираю из вороха ссылок одну статью и начинаю читать. Если что-то непонятно, дополнительно ресёрчу. Рекорд н… twitter.com/i/web/status/1…

Это может выглядеть немного странно, так как саммари в канале обычно занимает два-три абзаца, которые можно прочитать за одну минуту.

Кто-то сказал такую фразу (это не точная цитата, пишу как помню): "Для подготовки часового выступления мне достаточ… twitter.com/i/web/status/1…

Эта фраза очень хорошо отражает мой творческий процесс. Пытаюсь оптимизировать весь процесс до часа — полчаса читаю… twitter.com/i/web/status/1…

Пишу посты так, чтобы даже в этом одном-двух абзацах была какая-то ценная мысль или информация, которая останется с… twitter.com/i/web/status/1…

Пару раз получалось забавно, когда всю статью умещал в два абзаца. И тут какое-то двоякое ощущение, так как в посте… twitter.com/i/web/status/1…

В итоге решил, что честнее всего оставить суждение по этому поводу читателям канала. Всё равно в каждом посте есть… twitter.com/i/web/status/1…

Главное, что в выигрыше остаются все: про статью оригинального автора узнают несколько тысяч человек, а читатели по… twitter.com/i/web/status/1…

И тут я подхожу к самому интересному моменту. Что считать самым важным контентом в статье? Я до сих пор не знаю. Об… twitter.com/i/web/status/1…

Ещё одна очень важная категория постов — новинки в браузерах, node.js и т.п. Тут иногда приходится зарываться с гол… twitter.com/i/web/status/1…

Иногда какая-то тема вызывает неподдельный интерес. Тогда начинаю экспериментировать, чтобы поделиться своим опытом с другими.

Иногда какая-то тема требует более глубокого копания (например, не работал ранее с какой-то технологией), чтобы пол… twitter.com/i/web/status/1…

Бывает так, что думаю: "Вот завтра напишу пост по этой статье". Завтра наступает. Читаю. Понимаю, что статья не ого… twitter.com/i/web/status/1…

Давайте перейдём к теме популяризации канала. Каких-то огромных сил и денег в продвижение я не вкладывал, считаю, ч… twitter.com/i/web/status/1…

Был забавный случай, когда я рассказывал про канал новому знакомому. А он, не думая, выпалил: "Да у тебя там одни б… twitter.com/i/web/status/1…

Очень много людей пришло в канал, когда про него рассказывали @Chaptykov, @stevep307, @chicoxyzzy, @xufocoder, мног… twitter.com/i/web/status/1…

@klimakov_me @jsunderhood @Chaptykov @stevep307 @xufocoder @andrey_sitnik @oleg_kovalov Александр его уже несколько… twitter.com/i/web/status/1…

"Passionate Programmer" переведён на русский язык piter.com/collection/all…

Не всё всегда получается так как мы планируем...
На этой неделе ожидался ломовейший спец гость, но с ней не получил… twitter.com/i/web/status/1…

Сегодня будет тред про мою любимую тему — историю JS и JS-экосистемы. Один лайк — один факт.

Начну с наиболее известного факта. JavaScript был разработан Бренданом Айком в течение 10 дней.

3. Брендан Айк изначально разрабатывал Scheme-like язык, но из-за маркетинговых соображений новый язык стал напоминать Java.

7. Было выбрано такое название, потому что торговая марка "JavaScript" принадлежала Sun.

8. Чтобы не допустить фрагментацию web'а, был сформирован комитет TC-39, который начал работать над спецификацией JavaScript.

9. Из-за проблем с торговой маркой для спецификации был выбрано новое название — ECMAScript.

13. Все эти фичи были стандартизированы в третьей версии ECMAScript в декабре 1999 года.

14. В 2000 году вышел первый браузер Netscape Communicator 6 с поддержкой третьей версии стандарта.

16. Для воплощения этих планов была учреждена организация Mozilla, в которой по факту работали инженеры компании Netscape.

22. На тот момент комитет поделился на две части. Одни хотели революционного развития JS, другие эволюционного.

24. Тем самым доминирующий на рынке браузер (Internet Explorer) отказывался поддерживать фичи из нового стандарта.

27. Прошло 8 лет, в комитете до сих пор не было консенсуса. Было решено, что так продолжаться не может.

28. Дуглас Крокфорд призвал остановить споры и исправить проблемы в существующей версии стандарта.

35. Harmony стал идейным продолжением изменений, которые должны были появиться в четвёртой версии.

37. Работа над ECMAScript 6 продолжалась 6 лет.

38. К моменту, когда стандарт был закончен, браузеры уже начинали реализовывать новые фичи.

39. ECMAScript 6 в итоге был переименован в ECMAScript 2015. Использование года ознамевало переход к новому процессу стандартизации фич.

41. После того как набирается достаточный набор фич в stage 4, формируется новый стандарт, который обозначается текущим годом.

42. На данный момент вышли версии 2016, 2017, 2018 и 2019.

44. Фича смогла попасть в браузер только благодаря тому, что в её названии была горячая на тот момент технология — XML.

52. В конце 2004 года Тим О'Рейли популяризирует термин "Web 2.0", которыми стали называть современные web-приложения.

55. Как говорил Дуглас: "JavaScript — это наиболее неправильно понимаемый язык".

@jsunderhood Как же сендбокс табов? Это позволило не убивать весь браузер, но года одна из вкладок повисла. Это был… twitter.com/i/web/status/1…

68. Одной из проблем было отсутствие модульной системы, это было критичной проблемой для создания больших серверных приложений.

75. В 2012 году Райан оставляет разработку Node.js и передаёт все права компании работодателю Joyent и Айзеку Шлютеру в частности.

78. Спустя всего полгода стало очевидно, что у Node.js проблемы — фокус коммьюнити переключился на io.js.

Остановитесь! 😅 pic.twitter.com/FWpOyYFVeK

90. С 2012 года начали появляться изоморфные фреймворки. Первопроходцем стал Meteor, который был выпущен в январе 2012 года.

@jsunderhood @Semenov @anrublev А что изоморфного в nest? Для изоморфного рендера к нему нужно прикручивать изоморф… twitter.com/i/web/status/1…

усталь

Сегодняшний тред будет про инструменты работы с AST. AST (abstract syntax tree) — это представление исходного текст… twitter.com/i/web/status/1…

Чем AST может помочь в повседневной работе? Например, для сбора статистики о кодовой базе: какое количество раз и г… twitter.com/i/web/status/1…

Причём можно правильно обработать нетривиальные случаи, например, когда библиотека импортируется под неканоничным н… twitter.com/i/web/status/1…

AST используют бандлеры, для построения графа зависимостей между модулями и правильной сборки большого количество модулей в один бандл.

Есть инструменты, которые анализируют граф зависимостей. С их помощью можно находить модули, которые не используютс… twitter.com/i/web/status/1…

Dependency Cruiser поддерживает JavaScript (ESM), TypeScript, CoffeeScript, CommonJS, AMD. Для визуализации исполь… twitter.com/i/web/status/1…

Madge поддерживает только JavaScript (AMD, CommonJS, and ES6 modules), помоимо GraphViz может визуализировать граф… twitter.com/i/web/status/1…

Вот так выглядит часть графа зависимостей Rollup: pic.twitter.com/5HDLml403b

У себя под капотом AST используют линтеры. В eslint есть возможность создавать новые правила с помощью специальных… twitter.com/i/web/status/1…

Тут немного неправильно. Поддерживает D3 другой Dependo, но он уже не поддерживается 2 года npmjs.com/package/dependo

На базе Babel можно создавать собственные инструменты. Например, в Яндекс Маркете при написании e2e-тестов для поис… twitter.com/i/web/status/1…

Reselector позволяет использовать компоненты в css-селекторах без добавления служебных классов, всё благодаря парси… twitter.com/i/web/status/1…

Парсер Babel используется в очень многих проектах. Все их можно посмотреть на вкладке "Dependents" на npm npmjs.com/package/@babel…

До монорепизации парсер Babel жил как отдельный проект — "Babylon" npmjs.com/package/babylon

Помимо @babel/parser есть и другие. Один из самых популярных — acorn.js, который тоже используется как основа многи… twitter.com/i/web/status/1…

У него интересная история появления. Его разработал Marijn Haverbeke, как часть проекта по созданию инструмента для… twitter.com/i/web/status/1…

Tern.js был зарелижен, но не выдержал конкуренцию с TypeScript и Flow. Кроме статической типизации они предоставляю… twitter.com/i/web/status/1…

Ещё один популярный парсер — Esprima, разработанный Ariya Hidayat. Он лежал в основе первых версий eslint npmjs.com/package/esprima

С появлением разных парсеров встал вопрос того, чтобы проекты имели возможность без проблем менять парсер, работающ… twitter.com/i/web/status/1…

Ещё одна категория инструментов — инструменты для написания кодмодов (codemodes). Кодмод — это скрипт, в котором оп… twitter.com/i/web/status/1…

Наиболее популярный кейс использования кодмодов — перевод проекта на новую версию библиотеки, которая обновила свой интерфейс.

Написать кодмод можно, используя любой парсер, например, @babel/parser sitepen.com/blog/codemods-…

Но в Babel есть поддержка для написания кодомодов с помощью специального API. Вот пример такого кодмода, который сд… twitter.com/i/web/status/1…

Наибольшей популярностью пользуются специальные инструменты для написания кодмодов: Schematics, jscodeshift.

Schematics — это инструмент экосистемы Angular. Помогает при изменении структуры проекта в том числе на уровне тран… twitter.com/i/web/status/1…

Но наиболее популярен инструмент от Facebook — jscodeshift. Он поддерживает flow, typescript, jsx. github.com/facebook/jscod…

Вот моя подборка кодмодов для jscodeshift. Заглядывайте, если будете писать свой кодмод, чтобы посмотреть на примеры github.com/myshov/codemod…

Самый интересный кодмод — экспериментальный конвертор функциональных React-компонентов в функциональные Vue-компоне… twitter.com/i/web/status/1…

При написании кодмодов очень помогает astexplorer — веб-приложение, с помощью которого можно проинспектировать AST-… twitter.com/i/web/status/1…

Ещё парсеры используются инструментами для анализа кода. Например, для "разминификации" кода github.com/shapesecurity/…

Ещё стоит упомянуть recast — библиотека для недеструктивного изменения исходного кода и генерации сорс мапов. Испол… twitter.com/i/web/status/1…

Если хотите поподробнее узнать про AST, рекомендую интересный доклад Кирилла Черкашина из Google "Working with Java… twitter.com/i/web/status/1…

Если вас заинтересовала тема кодмодов, рекомендую посмотреть мой доклад, где я в подробностях рассказываю, что это… twitter.com/i/web/status/1…

На этом тред хочу закончить. Надеюсь, что этот тред вам был полезен и интересен. Спасибо за внимание :)

game developer: rendering grass took an entire frame
me: rendering this React component killed the browser

Давайте поговорим про разработку без бандлеров.

Было время, когда можно было начать разработку без настройки бандлеров, транспиляторов и т.п. Просто подключаешь ск… twitter.com/i/web/status/1…

В этом была какая-то магия, которую современная web-разработка потеряла. Хотя и были проблемы с тем, что ручное упр… twitter.com/i/web/status/1…

Какие рекомендации даёт сейчас, например, современный фреймворк: React, Angular, Vue и т.п. Скачайте cli-инструмент… twitter.com/i/web/status/1…

И это понятно — TypeScript без транспиляции не заработает в браузере, надо сконвертировать JSX в нативный JS, собра… twitter.com/i/web/status/1…

То что было раньше, и то что есть сейчас — небо и земля.

Но если не требуется делать большое приложение и просто иногда хочется поэксперементировать. Это всё начинает встав… twitter.com/i/web/status/1…

Вы можете сказать про codesandbox.io (очень клёвая штука), но именно в моём случае он не подходил из-за то… twitter.com/i/web/status/1…

Итого иногда хочется использовать старые добрые подходы при работе с современными фреймворками. Поэтому хочу подели… twitter.com/i/web/status/1…

Конечно, разработчики давно об этом задумывались. При разработке и популяризации формата AMD возможность разработки… twitter.com/i/web/status/1…

Сейчас, когда все современные браузеры поддерживают нативную модульную систему и фичи ES2015 у нас так-то нет очень… twitter.com/i/web/status/1…

Для того, чтобы забустрапить приложение с использованием ESM-модулей без бандлера, надо добавить type=module в тег скрипт.

Если у вас не бизнес-критичные задачи, то тогда вполне можно жить без бандлера с приложением, состоящим из 100 моду… twitter.com/i/web/status/1…

Окей. Загружать можем. Но куча библиотек написана с использованием CommonJS. Вот тут на подмогу приходит snowpack.dev

Snowpack преобразовывает зависимости из node_modules в esm-совместимые ресурсы и кладёт их в web_modules, вот их мо… twitter.com/i/web/status/1…

Можно забыть про долгие пересборки проекта — snowpack надо запускать только тогда, когда в проекте появляются новые зависимости.

Окей, а что делать c jsx? Этому посвящена статья в доках реакта reactjs.org/docs/react-wit…

Как альтернативу прямого использования React.createElement можно использовать специальные библиотеки, облегчающие о… twitter.com/i/web/status/1…

Ещё есть другой интересный проект — htm. Он использует template strings github.com/developit/htm

Как эксперимент полтора года назад пробовал сконвертировать TODO-приложение Redux в bundler-free приложение. С проб… twitter.com/i/web/status/1…

Do you use @typescript on a project and its composite projects? Please DM me - I just want to test one little thing… twitter.com/i/web/status/1…

Сегодня будет тред про vim и консоль. Сразу хочу сказать, что у меня нет цели похоливорить и vim — это не идеальный… twitter.com/i/web/status/1…

Очень интересно узнать предпочтения сообщества по поводу редакторов/IDE, но твиттер не позволяет делать голосование… twitter.com/i/web/status/1…

У каждого своя история того, как он перешёл на Vim. Моё первое знакомство с ним было в 2005 году, когда установил A… twitter.com/i/web/status/1…

Я его открыл, не читая манов, ничего не понял, не понял даже как выйти. Прибил его с помощью команды kill. Потом не… twitter.com/i/web/status/1…

Потом наткнулся на статью на хабре, где автор писал про то, как он настроил среду для разработки под ассемблер для… twitter.com/i/web/status/1…

Он рассказал как сделал удобные хоткеи, кастомную подсветку синтаксиса, поддержку компиляции с переходами к ошибкам… twitter.com/i/web/status/1…

У меня на работе в то время, намечалась задача по доработке большой кодовой базы на PL/SQL (это язык похожий на Pas… twitter.com/i/web/status/1…

Поэтому вдохновился статьёй и решил изучить vim. Нашёл очень клёвую книгу "Practical Vim Edit Text at the Speed of… twitter.com/i/web/status/1…

Нашёл очень мощный плагин для Oracle-разработки vorax. В нём было сделано очень много специфических вещей вплоть до… twitter.com/i/web/status/1…

Вот так выглядела моя среда разработки pic.twitter.com/q51w5ozlQD

Кроме разработки под Oracle я ещё занимался фронтендом — делал интерфейсы на ExtJS. И вот так решил юзать vim и для js.

Потом делал маленькие проекты на C, Haskell, ReasonML и тоже использовал для написания кода vim, так как я его уже… twitter.com/i/web/status/1…

Потом в 2ГИСе юзал vim для разработки e2e-тестов на python. На тот момент работать с python было удобно, поддержива… twitter.com/i/web/status/1…

Потом вышел многопточный NeoVim, вскоре после этого вышел многопоточный Vim 8 и один из самых недостатков редактора исчез.

Сейчас Vim поддерживает Language Server Protocol, поэтому можно без плясок с бубном, настроить фичи традиционных ID… twitter.com/i/web/status/1…

Но остался ещё один недостаток, про который стоит сказать. Подсветка синтаксиса в Vim'е сделана на базе регулярных… twitter.com/i/web/status/1…

Но надеюсь и он скоро исчезнет — разработчики NeoVim работают над тем, чтобы добавить подсветку синтаксиса на базе… twitter.com/i/web/status/1…

Для парсинга исходного кода они используют систему инкрементального парсинга tree-sitter, которая используется Gith… twitter.com/i/web/status/1…

В общем, не смотря на то что Vim'у уже очень много лет, идёт постоянная активная разработка. В первую очередь благо… twitter.com/i/web/status/1…

Вот известные программисты, которые используют Vim как основной инструмент для кодинга:
Linus Torwalds (создатель L… twitter.com/i/web/status/1…

После того, как перешёл на Mac OS X, для постоянной работы стал использовать консольную версию vim, потому что он о… twitter.com/i/web/status/1…

Благодаря vim'у стал больше времени проводить в консоли и для меня сейчас самая удобная комбинация: vim + bash.

Для удобной работы с большим количеством shell'ов стал использовать терминальный мультиплексор tmux. С его помощью… twitter.com/i/web/status/1…

Обычно моя рабочая среда выглядит примерно так pic.twitter.com/lkoX1GceeE

На скриншоте слева находится Vim с плагином NERDTree (для навигации по файловой системе). Справа находится обычная… twitter.com/i/web/status/1…

Для бесшовного перехода между панелями tmux и панелями vim настроил горячие клавиши: Ctrl+H, Ctrl+J, Ctrl+K, Ctrl+L… twitter.com/i/web/status/1…

Вся работа вокруг редактора строится вокруг эргономики работы с клавиатуры, поэтому от него можно получить максимум… twitter.com/i/web/status/1…

Начинаешь ловить фан от редактирования кода. Мне нравится вот это высказывание со Stack Overflow: "Editing text is… twitter.com/i/web/status/1…

Для быстрого поиска по файлам использую silversearcher (github.com/ggreer/the_sil…), ещё слышал очень хорошие отзывы п… twitter.com/i/web/status/1…

Если работаю на сервере, то для поиска по содержимому файлов использую обычный grep (grep "something" -ri .), для п… twitter.com/i/web/status/1…

Я не считаю себя спецом по консоли, но мне удобнее с ней работать по сравнению с GUI. Мой топ самых полезных команд… twitter.com/i/web/status/1…

Если открываю новую сессию, то для старта tmux'а с настроенными окнами и панелями использую специальный скрипт gist.github.com/myshov/1564474…

Можно организовать среду с быстрым фидбеком (playground). В левой панели tmux открыть vim somefile.js, в правой nod… twitter.com/i/web/status/1…

На небольшом экране ноута удобно использовать возможности macOS для разбиения экрана на панели. На скриншоте слева… twitter.com/i/web/status/1…

Эта фича в macOS называется "Split View" (support.apple.com/en-us/HT204948). Скорее всего что-то подобное есть в Windows и оконных менеджерах Linux.

Для vim есть много плагинов, но я предпочитаю изучать нативные возможности редактора, они могут покрыть многие плаг… twitter.com/i/web/status/1…

Тем не менее совсем без плагинов пока не могу обойтись. Вот мой текущий список github.com/myshov/dotfile…

Кстати ссылка из предыдущего твита, это кусок моих dotfiles — скриптов для быстрого разворачивания окружения. Вот т… twitter.com/i/web/status/1…

У вим богатая история. Про него я как-то готовил доклад для внутреннего митапа 2GIS myshov.github.io/story_of_vim/

Vim'у и его экосистеме посвящена международная конференция vimconf.org. Проводятся митапы в разных уголках мира.

Если хотите использовать один мощный редактор на сервере и при локальной разработке на разных языках программирован… twitter.com/i/web/status/1…

Для изучения Vim'а могу порекомендовать начать с команды редактора :vimtutor (встроен в vim), книгу "Edit Text at t… twitter.com/i/web/status/1…

И очень рекомендую посмотреть серию скринкастов Дерека Уайата (derekwyatt.org/vim/tutorials/). Особенно самое первое виде… twitter.com/i/web/status/1…

На этом хочу тред закончить. Happy Vimming!

@jsunderhood Для тех, кто не хочет особо глубоко погружаться в заточку vim под себя - есть плагин для vscode, эмули… twitter.com/i/web/status/1…

Давайте поговорим про мотивацию. Имхо, это очень важная тема.

Так получилось, что решил публиковать посты в Defront каждый день. И вот на протяжении года делаю это без пропусков… twitter.com/i/web/status/1…

На самой первой работе я спросил своего коллегу, в чём его мотивация, он ответил: "Саша, представь, что тебе жрать нечего".

"Норм", — подумал я, и больше не стал его донимать его вопросами. Но в голове иногда мелькала мысль, что я занимаюс… twitter.com/i/web/status/1…

Потом пару лет спустя, другой мой руководитель порекомендовал книгу "7 навыков высокоэффективных людей" С.Кови.

Сначала я скептически отнёсся к этой книге, так как там было написано что это какой-то бестселлер по менеджменту, к… twitter.com/i/web/status/1…

Но мне книга очень понравилась с первой главы — автор там делился своими личными историями, которые очень вдохнови… twitter.com/i/web/status/1…

В ней затрагиваются многие темы: отношения с другими людьми, тайм-менеджмент, цели. В ней ещё была незнакомая для м… twitter.com/i/web/status/1…

Личная цель — это некая абстрактная цель, которая по сути формирует все будущие ваши цели. Как пример у Стива Джобс… twitter.com/i/web/status/1…

Появление личной цели мне дало много сил что-то придумывать, делать, постоянно развиваться.

Ещё одной вехой могу назвать "Совершенный код" Макконелла. В одной из глав было написано: "Во что бы то ни стало пр… twitter.com/i/web/status/1…

Это заставило сильно задуматься, а реально ли программирование для меня.

После этого попалась в руки книга Чада Фаулера "Passionate Programmer" (pragprog.com/book/cfcar2/th…). Там чувак бывший… twitter.com/i/web/status/1…

Эта книга очень сильно замотивировала заниматься своими проектами, самообразованием и т.п.

Наверное, благодаря этому импульсу я могу читать много статей и писать посты в канал. Мне это просто очень интересн… twitter.com/i/web/status/1…

Какие тут можно сделать выводы? Ищите свою личную цель, ищите то, что вас может вдохновить на новые свершения. Врод… twitter.com/i/web/status/1…

Не могу утверждать, что эти советы будут работать для всех, всё-таки все мы разные. Но главное не останавливаться и… twitter.com/i/web/status/1…

Всем спасибо за внимание :) Очень интересно почитать ваши истории

На этой неделе с вами был Мышов Саша @myshov. Если у вас возникли какие-то вопросы по темам недели, пишите в твитте… twitter.com/i/web/status/1…