@davidobryakov

30 January 2022 16:14

​Да кто такой этот ваш DDD?!

#подборка #программирование #ddd

То ли у меня поменялось инфополе, то ли я, что называется "дорос" до определённого уровня квалификации, но всё чаще и чаще я стал замечать разговоры о DDD, о котором я как-то слышал и в общих чертах знал, но детально никогда не разбирался. Решил устаканить для себя вопрос о DDD и понять, нужно ли агитировать за его применение в будущих проектах или пока рановато.

Если говорить кратко, DDD — это подход, который нацелен на изучение предметной области предприятия в целом или каких-то отдельных бизнес-процессов.

То есть, нам бы хорошо либо самим быть Domain Expert, либо иметь такого Domain Expert у себя в команде/в качестве приглашённого эксперта, чтобы лучше понимать бизнес-процессы в определённой предметной области и перекладывать их на конечную реализацию нашего проекта/продукта.

Ну а если хотите подробностей, то я собрал для вас несколько источников (я уже недавно такое делал и, кажется, вам зашло), изучив которые — вы сможете лучше понять DDD.

1) Ёмкая статья на хабре — "Что можно узнать о Domain Driven Design за 10 минут?" (https://habr.com/ru/company/dododev/blog/489352/)
2) Большой сборник различных полезностей на Github — "Awesome DDD" (https://github.com/heynickc/awesome-ddd)
3) Применение DDD в django — "Domain-driven design, Hexagonal architecture of ports and adapters, Dependency injection и Python" (https://habr.com/ru/post/559560/)

@davidobryakov

28 January 2022 18:16

И всё-таки, где интерфейсы лучше?

#интерфейсы #ux #фронтенд

Думаю, вы не единожды слышали, что в России самый крутой онлайн-банкинг в мире, но так ли это на самом деле?

Очень интересное исследование от Тинькофф на тему того, где всё-таки интерфейсы удобнее: у нас или за границей. Конечно, исследование на 39 людях — не то, что бы супер исследование, поскольку выборка довольно мала и данные могут не соответствовать действительности, но сами доводы в статье — интересные и правдивые, на мой взгляд.

В общем, для пятничного вечера вполне неплохо, но хотелось бы увидеть что-то более крупное и состоятельное. Может, у вас есть что-то по этой теме? Делитесь в комментариях, рад буду узнать что-то новое :)

Ссылка на статью: https://habr.com/ru/company/tinkoff/blog/645645/

@davidobryakov

23 January 2022 14:23

Как побороть тревожность в IT и не сгореть в погоне за знаниями и деньгами

Новый выпуск "Доктор Кот" с канала "Мы обречены" подсвечивает довольно важную проблему тревожности в IT (и не только). Евгений Кот объясняет в чём разница между тревогой и тревожностью, чем они обусловлены и как с ними справляться. Кроме этого, рассказываются так же и истории подписчиков по теме, что позволяет почувствовать некоторую причастность и понять, что ты не один такой. Для меня эта проблема не то, что бы очень актуальна, кроме тех моментов, когда проводишь какие-либо манипуляции на продакшн-сервере у многомиллионного бизнеса...

Сталкивались ли вы с подобными проблемами? Как вы боретесь с этим?

Смотреть: https://www.youtube.com/watch?v=8AlQ9OKatOk

@davidobryakov

19 January 2022 19:40

Джуниоры 2 года спустя

В 2019м году на канале Senior Software Vlogger вышел ролик, в котором 8 человек поделились историей своего старта в IT. И буквально на днях он выпустил продолжение к этому ролику, в котором они рассказывают, что изменилось в их жизни за 2 года, делятся опытом. На мой взгляд — интересный эксперимент. Если вдруг хотите узнать мою историю (или поделиться своей), пишите в комментах и я подумаю над роликом по теме :)

Смотреть: https://www.youtube.com/watch?v=z0akCxqPl_g
Прошлый ролик: https://www.youtube.com/watch?v=vovaUbBDunc

@davidobryakov

17 January 2022 14:07

Продолжение курса "Своя фриланс-биржа": быть или не быть?

Некоторые из вас знают, что у меня на Youtube-канале есть курс "Своя фриланс-биржа" последний урок в нём выходил около года назад, а первый и вовсе — в мае 2020. Понятно, что с мая 2020, когда это всё начиналось — я успел выучить довольно много всего нового и хотел бы полностью переработать курс.

Всвязи с этим, у меня есть вопрос. Как лучше поступить — выпустить серию роликов по исправлению ошибок и рефакторингу, или сделать полностью новый курс? (голосуйте в опросе ниже, либо в посте на вкладке "сообщество")

UPD:

курс по стеку django + vue

@davidobryakov

12 January 2022 13:29

Какие инструменты для проверки сайта нужны, кроме Lighthouse?

#фронтенд #браузеры #оптимизация

Очень часто мы ограничиваемся метриками Lighthouse и забываем, что не только скорость загрузки страницы влияет на поисковую выдачу и пользовательский опыт. Наткнулся на статью, в которой собрано несколько сервисов для дополнительных проверок вашего сайта.

Безусловно, среди них есть и довольно странные (во времена SPA-фреймворков HTML Checker и CSS Validator — не то что бы очень полезны в разработке, поскольку тулинг фреймворка позволяет вам не думать об этом и очень часто сам говорит о возможных ошибках), но и они имеют место быть. В основном же, сервисы действительно полезные и, как минимум, про половину из них я и сам не слышал, но думаю — теперь буду пользоваться.

А вы какими сервисами пользуетесь для проверки ваших сайтов? Поделитесь в комментариях (можно и не только для проверки, но и в целом интересные инструменты), возможно, соберу подборку из комментов и запощу здесь :)

Читать статью: https://habr.com/ru/company/vdsina/blog/522932/

@davidobryakov

08 January 2022 13:43

​SVG-спрайт (+ кроссбраузерные картинки) — Фронтенд-разработка

#фронтенд #svg #кроссбраузерность

Привет, это 11й урок из моего курса по фронтенд-разработке в университете ИТМО и сегодня мы с вами поговорим про SVG-спрайт, разберёмся что это, как использовать и почему он лучше иконочных шрифтов. Так же, бонусом рассмотрим тег picture и создание кроссбраузерных картинок с его помощью.

Смотреть: https://youtu.be/2cNj9kcbIC8
Прошлый урок: https://youtu.be/HYc0xGTDFzI
Плейлист: https://www.youtube.com/playlist?list=PLAhg4XYCffEm0H8SQPtRTG38rbA6LIVzG

Полезные ссылки:

Репозиторий с примерами из этого курса: https://github.com/kantegory/mentoring/
Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Frontend-2021/
Простой гайд по составлению svg-спрайта: https://www.sitepoint.com/use-svg-image-sprites/
Видео-гайд по svg-спрайту: https://www.youtube.com/watch?v=dPoRsolsCjA
Статья на CSS-tricks по svg-спрайту: https://css-tricks.com/svg-sprites-use-better-icon-fonts/
Статья на Доке про тег picture: https://doka.guide/html/picture/
Статья на MDN про тег picture: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
Видео Вадима Макеева про тег picture: https://www.youtube.com/watch?v=gHLPBlzGRT8
Squoosh (приложение для удобного сжатия изображений): https://squoosh.app

@davidobryakov

03 January 2022 19:03

​Удалёнка — это новая реальность?

Увидел интересный перевод на хабре, в котором приводится статистика по результатам опросов различных IT-специалистов о предпочтительном формате работы:

"53% технарей считают, что одним из главных преимуществ работы из дома является увеличение продуктивности. 59% сочли серьёзным преимуществом возможность работать в более расслабленном режиме. 80% указали главным преимуществом экономию денег на дорогу. 47% согласны с Цукербергом в улучшении баланса жизни и работы."

Я и сам стал за собой замечать, что у меня не получается работать в офисе даже на 10% столь же эффективно, как из дома. Но у меня есть травматичный опыт неприятной работы в офисе на протяжении полугода и возможно, это он так сказывается, но думаю, что дело не только в нём, но и в том, что удалённый формат работы уже крепко вошёл в привычку и офисный гул просто не позволяет сосредоточиться на своих задачах и только мешает естественной концентрации. Что самое странное — работа в кофейнях воспринимается просто отлично, хотя по сути своей это ведь тот же офис/коворкинг (коворкинги я, кстати, тоже терпеть не могу), разве нет?

А вам легко возвращаться в офис, после 1.5 лет ремоута? Пишите в комментарии, рад буду пообщаться :)

Перевод на хабре: https://habr.com/ru/post/598669/

@davidobryakov

05 December 2021 17:13

​Веб-доступность (a11y) — Фронтенд-разработка

Привет, это 9й урок из моего курса по фронтенд-разработке в университете ИТМО. Сегодня поговорим про доступность (accessebility) в вебе: для чего это нужно, как сделать сайт доступным, рассмотрим чек-лист для проверки доступен ли наш сайт или нет.

Смотреть: https://youtu.be/HYc0xGTDFzI
Прошлый урок: https://youtu.be/_3YLqewhII0
Плейлист: https://www.youtube.com/playlist?list=PLAhg4XYCffEm0H8SQPtRTG38rbA6LIVzG

Полезные ссылки:

1) Репозиторий с примерами из этого курса: https://github.com/kantegory/mentoring/
2) Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Frontend-2021/
3) Статья на developers.google: https://developers.google.com/web/fundamentals/accessibility?hl=ru
4) Большой раздел на MDN: https://developer.mozilla.org/ru/docs/Learn/Accessibility/HTML
5) Примеры того, как делать не надо: https://www.htmhell.dev/

@davidobryakov

17 November 2021 16:11

​Взаимодействие с внешним API — Фронтенд-разработка

Привет, это 7й урок из моего курса по фронтенд-разработке в Университете ИТМО. Сегодня поговорим о том, как работать с внешним API, вскользь упомянем формат данных JSON, разберём основные HTTP-методы и инструменты для работы с внешним API средствами JavaScript.

Смотреть: https://youtu.be/G6C6xMWrjS4

Прошлый урок: https://youtu.be/qo8RUL1_pF8
Плейлист: https://www.youtube.com/playlist?list=PLAhg4XYCffEm0H8SQPtRTG38rbA6LIVzG

Полезные ссылки:

1) Репозиторий с примерами из этого курса: https://github.com/kantegory/mentoring/
2) Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Frontend-2021/
3) Презентация: https://docs.google.com/presentation/d/14YKxXcBNEOTzlg5r4BsX9xg4zW1BWFWW7prudZq9_hg/edit?usp=sharing
4) Подробнее про формат JSON: https://youtu.be/sxdPf3z6Uw8
5) Ролик о работе HTTP-методов: https://youtu.be/59RbVXzJMnw
6) Библиотека axios: https://npmjs.org/axios
7) Fetch API на Learn Javascript: https://learn.javascript.ru/fetch
8) XHR на Learn Javascript: https://learn.javascript.ru/xmlhttprequest
9) Подробнее про сетевые запросы на JS: https://learn.javascript.ru/network

@davidobryakov

09 November 2021 13:17

День перед дедлайном

Думаю, многим знакомо это ужасное ощущение, когда дедлайн буквально завтра, а у вас нет никаких моральных сил, чтобы что-то сделать. Осталась только отрешённость и ничего больше, хотя вы понимаете, что проект практически доделан и осталось всего-ничего, дошлифовать все шероховатые моменты и безбоязненно сдать заказчику.

Почему-то я умудрился в нескольких проектах остаться тем человеком, который в одиночку всё доделывает и как будто самолично отвечает за весь проект (больше я так никогда не хочу делать, но из этой ситуации выбираться приходится самому), а когда в дополнении к этому ощущаешь какую-то странную апатичность и полное безразличие к результату твоей работы — хочется только бесконечно лежать и пялиться в ролики на ютубе, ничего не делая. Понимаю, что это что-то остаточное от выгорания и чтобы оно больше не проявлялось нужно только наладить пресловутый work-life balance, но от осознания ситуация не разрешается сама собой.

В дни перед дедлайном я готов быть самым ответственным домочадцем: помыть всю посуду и полы, перестирать все вещи, даже протереть пыль с книжек, лишь бы не работа, лишь бы не поймать себя на мысли, что что-то может пойти не так. Желание прокрастинировать и только. В такие моменты действительно помогает только одно: сесть и выписать весь список дел на сегодня, рассортировать по приоритетам и сесть их делать, несмотря ни на что. Через полчаса-час отступают все тревожные мысли и удаётся взять себя в руки и продолжить работать.

А как вы справляетесь с подобными ощущениями? Знакомо ли вам такое?

@davidobryakov

07 November 2021 13:00

​Изоляция стилей (веб-компоненты, БЭМ) — Фронтенд-разработка

Привет, это 4й урок из моего курса по фронтенд-разработке в Университете ИТМО. Сегодня поговорим об изоляции стилей и разберёмся в том, какие подходы для изоляции стилей существуют.

Смотреть: https://youtu.be/xtC6l5-q4yU

Прошлый урок: https://youtu.be/EZhU1VidGVY
Плейлист: https://www.youtube.com/playlist?list=PLAhg4XYCffEm0H8SQPtRTG38rbA6LIVzG

___

Полезные ссылки:

1) Репозиторий с примерами из этого курса: https://github.com/kantegory/mentoring/
2) Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Frontend-2021/
3) Методология БЭМ: https://ru.bem.info
4) Видео про веб-компоненты от Вадима Макеева: https://www.youtube.com/watch?v=_FRIRJZYlxU

@davidobryakov

30 October 2021 09:51

​​CORS

Каждый уважающий себя программист, имеющий свой блог обязан написать про CORS.

Наверняка, вы хотя бы раз встречали подобную ошибку при разработке фронтенда:

Access to fetch at ‘https://example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy.

ну или такую:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

а может и эту видели:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/

Это наш любимый CORS. Можете ли вы объяснить принцип его работы, а главное — зачем он вообще нужен? Он же только всё усложняет, разве нет?

Недавно объяснял студентам о том, как работает CORS. Нарисовал схемку в зуме и вроде все всё поняли, но для многих это довольно непонятная тема и объяснения, вроде: «CORS — это такая браузерная штука, которая запрещает вам, по умолчанию, слать запросы с одного домена на другой. Но если у вас на бэкенде есть список разрешённых доменов, то такой запрос пройдёт (конечно, есть ещё заголовки запроса и методы, которые так же могут разрешены только в ограниченном режиме)», будет недостаточно.

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

1) Джейк Арчибальд — как победить CORS (https://jakearchibald.com/2021/cors/)
2) CORS для чайников: история возникновения, как устроен и оптимальные методы работы (https://habr.com/en/company/macloud/blog/553826/)
3) Статья на MDN (https://developer.mozilla.org/ru/docs/Web/HTTP/CORS)
4) CORS для простых запросов (https://learn.javascript.ru/fetch-crossorigin)
5) Сценарии атак с использованием технологии CORS (https://www.securitylab.ru/analytics/498754.php)

@davidobryakov

25 October 2021 15:53

Как создают и поддерживают веб-страницы в Тинькофф

Довольно интересная статейка на хабре, в которой лид группы дизайна привлечения рассказывает, как они попытались оптимизировать процессы создания продающих лендингов внутри компании, сделав шаблонизатор страниц, которые строятся на готовых блоках.

Идея, конечно, не нова, но от этого она не становится менее интересной. В общем, рекомендую почитать статью и подумать о том, как вы могли бы оптимизировать подобный процесс. Думаю, я попробую найти свободное время и попробовать сделать свой подобный конструктор, потому что это не то, что бы очень сложно, зато действительно интересно и заставляет подумать. Возможно, будет даже ролик на эту тему, если вам, конечно, будет это интересно (можете написать в комментариях).

Ссылка на статью: https://habr.com/ru/company/tinkoff/blog/553748/

@davidobryakov

24 October 2021 10:07

Табы или пробелы?

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

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

А что вам больше по душе, а главное — почему?

https://www.youtube.com/watch?v=k-fwgO6m-9M

@davidobryakov

29 January 2022 17:14

Надёжный CSS

#css #фронтенд #best_practices

Надёжный (или устойчивый, вопрос локализации) — это коллекция сниппетов, позволяющая писать CSS-код надёжно и не испытывать проблем в будущем. Иными словами — набор хороших практик для часто встречающихся проблем, собранный Ахмадом Шадидом в одной статье "Defensive CSS".

Тут есть и про long content о котором я писал почти год назад (до сих пор постоянно возвращаюсь к этой статье, чтобы вспомнить решение той или иной проблемы). И про текст поверх картинок и много чего ещё полезного. По сути, это краткая выжимка из нескольких статей Шадида без лишних подробностей. В общем, крайне рекомендую. Эта статья попала в мою небольшую коллекцию важных ресурсов, к которым я периодически обращаюсь при работе.

Ссылка на статью: https://ishadeed.com/article/defensive-css

UPD:

Появился перевод на Хабре (если кому-то так удобнее): https://habr.com/ru/post/648537/

@davidobryakov

27 January 2022 13:00

Как ВКонтакте ускоряли

#оптимизация #браузеры #фронтенд

Люблю подобные статьи от крупных игроков, поскольку это позволяет узнать, каким образом инженеры той или иной компании подошли к решению проблемы перформанса. Помню, читал нечто на схожую тему от одноклассников, они занимались server-side рендерингом реакт-компонентов так ещё и через GraalVM на Java.

Почему подобные статьи — это круто? Потому, что позволяют посмотреть на ситуацию с другой стороны и задуматься о том же MessagePack вместо JSON (теперь захотелось попробовать) и увидеть, что на самом деле оптимизации перформанса куда более обширные, чем те, которыми мы привыкли ограничиваться (lazy-load, эффективные форматы изображений).

Читать: https://habr.com/ru/company/vk/blog/594633/

Про опыт одноклассников: https://habr.com/ru/company/odnoklassniki/blog/480808/

@davidobryakov

20 January 2022 16:16

Делаем UI-компоненты с помощью CSS и SVG

#фронтенд #svg #css

Крутая статья от Ахмада Шадида с большим количеством примеров применения CSS и SVG для создания сложных UI-компонентов, например, маска для аватарки, в которой предусмотрена выемка под индикатор онлайн/оффлайн.

Так же сильно удивило насколько простым может быть решение для создания ломанной линии под заголовком, которые довольно эффектно смотрятся но довольно сложно делаются на практике (я всегда делал кучу всяких перевёрнутых рамочек в CSS, но использовав в этом месте не только CSS, но и SVG — я бы мог гораздо проще решить свою проблему).

Есть ролик по схожей теме от Вадима Макеева, в котором он с помощью CSS и SVG делает диалоговое облачко (имею ввиду "Speech balloon" как в комиксах...), его тоже рекомендую к просмотру.

Использовали ли вы SVG для таких кейсов? Поделитесь в комментариях своими примерами, если не жалко :)

Читать: https://ishadeed.com/article/building-components-svg-css/

@davidobryakov

18 January 2022 16:52

Firefox остался один?

#браузеры #фронтенд

Интересная рефлексия по поводу того, что Firefox остался единственной альтернативой Chromium-based браузерам. Но на мой взгляд, не то, что бы сильно оправданная. Ведь существует ещё и тот же Safari, отличие правда в том лишь, что он доступен исключительно на устройствах компании Apple. Видимо, именно поэтому автор статьи и не включил его в свои рассуждения.

Мне, как фанату Firefox — довольно грустно, что он вот уже больше 10 лет теряет пользователей. Хотя, в нём есть всё, что вам нужно и, — даже немного больше. На мой взгляд, как фронтендера, именно в Firefox самые удобные DevTools и их фича с контейнерами (читайте: мультиаккаунтинг) — тоже супер крутая, я пользуюсь ей каждый день и на постоянной основе.

А каким браузером пользуетесь вы и почему? Голосуйте в опросе ниже и пишите в комментах, интересно узнать :)

Ссылка на статью: https://habr.com/ru/company/mvideo/blog/646137/

UPD:

Если кому-то интересно, я начал пользоваться Firefox ещё 11.12.2019, хотел просто месяц попробовать, но в итоге перешёл с концами :)

@davidobryakov

15 January 2022 14:35

Кастомизация тега select

#фронтенд #браузеры #нововведение

Уверен, многие фронтендеры сталкивались с задачей кастомизации тега select, потому что дизайнеры постоянно придумывают что-то новое. А что, если эту кастомизацию добавят в браузеры?

В своём ролике "Попап вместо селекта", Вадим Макеев показывает новый экспериментальный элемент selectmenu, призванный решить проблему кастомизации селекта.

Смотреть: https://www.youtube.com/watch?v=mG0VFWCTnZI

Как вы думаете, решит ли новый элемент старую проблему? Делитесь своим мнением в комментариях, давайте пообщаемся :)

@davidobryakov

09 January 2022 16:46

Свой браузер на основе движка Chromium это сложно?

#chromium #браузеры #electron

Короткий ответ: нет.

Длинный ответ:

Ещё в начале лета 2021го, меня звали работать в команду браузера на основе Chromium и я даже прошёл два собеседования (и даже неплохо прошёл), но меня не взяли, потому что был кандидат с более релевантным опытом, чем я (UI писался на svelte, с которым я никогда не работал). Но сейчас не об этом. Беседуя с CTO, я много нового узнал про то, каково это делать свой браузер и по сути они немного схитрили, потому что весь их основной функционал достигался собственным плагином (который не был обычным браузерным плагином, конечно, но тем не менее).

После этого опыта я неоднократно возвращался к теме и ресёрчил по этому поводу, искал и статьи/гайды по Electron (думаю, некоторые люди знают моё отношение к этой платформе и оно, мягко говоря, неоднозначное). Сегодня листая хабр в перерывах между попытками поработать и поучиться, я наткнулся на интересную статью, где пошагово меняют исходный код Chromium, а затем подключают этот изменённый код в Electron, подменяя тот Chromium, что был изначально. Таким образом, достигается возможность вносить некоторые важные изменения в платформу, избавляя её от ненужных частей, что делает саму платформу более легковесной да и вообще — кастомизируемой.

Думаю, немногие из вас хотя бы раз пытались поменять что-то в исходном коде браузера, но теперь можете пошагово пройтись по статье и попробовать. Не знаю, сможете ли вы сделать свой браузер на основе Chromium, но общий уровень знаний и навыков — точно поднимите.

Ссылка на статью: https://habr.com/ru/post/599679/

@davidobryakov

04 January 2022 19:08

​Где лучше рендерить? На клиенте или на сервере?

#подборка #ssr #vue

Простого ответа на этот вопрос нет, потому что нужно рассматривать каждую частную ситуацию отдельно. У меня был опыт настройки пререндера для поисковиков, чтобы повысить позиции сайта в поисковиках и улучшить SEO. Это не всегда работает так хорошо, как хотелось бы, потому что довольно часто, если у вас небольшой проект — нет достаточного количества данных, по которым можно было бы определить нужен ли SSR и где конкретно.

Чтобы лучше самому разобраться в теме, я прочитал несколько статей и сделал небольшую подборку по теме:

- Как мы ускоряли комментарии Хабра (https://habr.com/ru/company/habr/blog/590111/)
- SSR: когда, зачем и для чего. На примере Vue (https://habr.com/ru/company/umbrellaitcom/blog/425053/)
- Серверный или клиентский рендеринг на вебе: что лучше использовать у себя в проекте и почему (https://tproger.ru/translations/rendering-on-the-web/)
- Руководство по серверному рендерингу Vue.js (https://ssr.vuejs.org/ru/)

@davidobryakov

03 January 2022 15:27

CSS-переменные, темизация сайта — Фронтенд-разработка

Привет, это 10й урок из моего курса по фронтенд-разработке в университете ИТМО. Сегодня поговорим про CSS-переменные и темизацию сайта с их помощью.

Смотреть: https://youtu.be/aKeJuUKTWPI
Прошлый урок: https://youtu.be/HYc0xGTDFzI
Плейлист: https://www.youtube.com/playlist?list=PLAhg4XYCffEm0H8SQPtRTG38rbA6LIVzG

Полезные ссылки:

1) Репозиторий с примерами из этого курса: https://github.com/kantegory/mentoring/
2) Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Frontend-2021/
3) Отличные ролики от Вадима Макеева по этой теме:
- https://www.youtube.com/watch?v=Qwuyeo7iuNY
- https://www.youtube.com/watch?v=8LFbS78a4Rw


P. S.

Потихоньку налаживаю выход постов и роликов, надеюсь, в этом году их будет гораздо больше, чем в прошлом

@davidobryakov

17 November 2021 18:16

​Тестирование фронтенда, иммитация внешнего API, JSON-сервер — Фронтенд-разработка

Привет, это 8й урок из моего курса по фронтенд-разработке в Университете ИТМО. Сегодня поговорим о работе с JSON-сервером для решения разных задач: тестирование фронтенда, иммитация внешнего API.

Смотреть: https://youtu.be/_3YLqewhII0

Прошлый урок: https://youtu.be/G6C6xMWrjS4
Плейлист: https://www.youtube.com/playlist?list=PLAhg4XYCffEm0H8SQPtRTG38rbA6LIVzG

Полезные ссылки:

1) Репозиторий с примерами из этого курса: https://github.com/kantegory/mentoring/
2) Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Frontend-2021/
3) Репозиторий JSON-сервер: https://github.com/typicode/json-server
4) Установка node.js для linux: https://github.com/nodesource/distributions
5) Установка node.js для windows: https://docs.microsoft.com/ru-ru/windows/dev-environment/javascript/nodejs-on-windows

@davidobryakov

16 November 2021 12:40

​Язык JS: основы, события, DOM — Фронтенд-разработка

Привет, это 6й урок из моего курса по фронтенд-разработке в Университете ИТМО. Сегодня поговорим об основах JS, разберём разницу между let, var и const. Поговорим о функциях, циклах, условиях и даже классах. А так же разберём обработку пользовательских событий и DOM-хранилища.

Смотреть: https://youtu.be/qo8RUL1_pF8

Прошлый урок: https://www.youtube.com/watch?v=J1bMExplCAw
Плейлист: https://www.youtube.com/playlist?list=PLAhg4XYCffEm0H8SQPtRTG38rbA6LIVzG

Полезные ссылки:

1) Репозиторий с примерами из этого курса: https://github.com/kantegory/mentoring/
2) Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Frontend-2021/
3) Презентация: https://docs.google.com/presentation/d/10ufmbkCdVgwzMUw-zAHfsJdEgE4VFj68W7L3FcP8aMo/edit?usp=sharing
4) Статейка на хабре про историю JS: https://habr.com/ru/company/livetyping/blog/324196/
5) DOM-дерево: https://learn.javascript.ru/dom-nodes
6) В чём разница между let, var и const: https://medium.com/nuances-of-programming/%D0%B2-%D1%87%D1%91%D0%BC-%D1%80%D0%B0%D0%B7%D0%BD%D0%B8%D1%86%D0%B0-%D0%BC%D0%B5%D0%B6%D0%B4%D1%83-var-let-%D0%B8-const-%D0%B2-javascript-3084bfe9f7a3
7) IIFE: https://learn.javascript.ru/closure#bloki-koda-i-tsikly-iife

@davidobryakov

07 November 2021 17:16

​UI-фреймворк Bootstrap (+ верстаем котиков адаптивно) — Фронтенд-разработка

Привет, это 5й урок из моего курса по фронтенд-разработке в Университете ИТМО. Сегодня поговорим о UI-фреймворках и попрактикуемся в работе с Bootstrap, попробовав сверстать коттиков адаптивно.

Смотреть: https://youtu.be/J1bMExplCAw

Прошлый урок: https://youtu.be/xtC6l5-q4yU
Плейлист: https://www.youtube.com/playlist?list=PLAhg4XYCffEm0H8SQPtRTG38rbA6LIVzG

___

Полезные ссылки:

1) Мой телеграм-канал: /channel/davidobryakov
2) Репозиторий с примерами из этого курса: https://github.com/kantegory/mentoring/
3) Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Frontend-2021/
4) Документация Bootstrap: https://getbootstrap.com/

@davidobryakov

04 November 2021 19:29

​Браузерные анимации с точки зрения перфоманса

Тут у Уфокодера (@ufostation) вышел просто замечательный тред про браузерные анимации и то, как они влияют на перфоманс. А главное, — почему анимации правильно делать через transform, а не как-либо иначе. Честно признаюсь, я не разбирался в этом до такой степени, просто всегда лепил transform (при необходимости), просто потому что однажды где-то вычитал, что так правильно. А теперь с уверенностью могу ответить, почему так правильно.

Ссылочка на тред: https://mobile.twitter.com/xufocoder/status/1455963090550411270

___

p. s. если вдруг вы есть в твиттере и вам интересно почитать мои редкие твиты, то присоединяйтесь, всем буду рад: https://twitter.com/kantegory

@davidobryakov

26 October 2021 20:34

Посмотрю в Доке

Новый удобный русскоязычный сервис со всем, что нужно современному веб-разработчику — Дока. Всё, что вам нужно и даже немного больше. Я полистал Доку и могу с полной уверенностью сказать, что это то, чего не хватало, хотя раньше я об этом и не задумывался.

Буду посылать своих студентов теперь по всем вопросам именно на этот ресурс, потому что всё объяснено доступным и понятным языком. Рекомендую от души и сердца. Для затравочки загляните на эту страницу: https://doka.guide/js/how-the-browser-creates-pages/.

А если вам кажется, что в Доке чего-то не хватает, то вот вам ролик от Вадима Макеева про то, как можно добавить свою статью в Доку: https://www.youtube.com/watch?v=y-_nXfKkI3w

Как вам Дока? Будете пользоваться? Поделитесь мнением в комментариях, мне реально интересно :)

Ссылка на Доку: https://doka.guide

@davidobryakov

24 October 2021 20:24

Github Actions

Решили на проекте опробовать Github Actions, потому что рабочий репозиторий размещён на github. Если у вас есть с ним какой-то приятный/неприятный опыт, пишите в комментарии.

Мне кажется, что Github Actions вполне неплохое решение для автоматизации развёртывания вашего проекта. Сам я пользовался только Gitlab CI, но уже второй день читаю разные статейки про Github Actions, поэтому решил собрать для вас небольшую подборку по теме. Думаю, через пару дней оформлю небольшую статейку у себя в блоге с развёртыванием проекта на Django (всё внутри docker).

А теперь подборочка:

1) Обзорная статейка про Github Actions — https://nuancesprog.ru/p/10681/
2) Ролик Вадима Макеева про Github Actions с деплоем фронтенд-проекта — https://www.youtube.com/watch?v=hevU4NdIsoU
3) Статья на хабре с гайдом — https://habr.com/ru/post/474668/
4) Сборка релиза проекта на Electron — https://habr.com/ru/post/466501/
5) Лендинг от самого Github — https://github.com/features/actions

P. S.

если знаете ещё какие-то толковые статейки, пишите в комментарии, буду рад и возможно, даже выкачу дополнение к посту с вашей подборкой :)

@davidobryakov

23 October 2021 20:03

​Динамические настройки в Django

Полагаю, вы не раз сталкивались с тем, что вам необходимо поменять какое-то значение из файла settings.py в Django и ради этого приходится пересобирать проект на сервере, что отбирает иногда значительную часть времени (у нас на одном из проектов пайплайн по CI/CD проходил в среднем 30-40 минут), а иногда это нужно сделать прямо здесь и сейчас, потому что на продакшн пробралась какая-то критическая ошибка и каждая минута простоя стоит бизнесу огромных денег.

Так вот, для решения этой проблемы есть бибилотека Django Constance, которая позволяет выносить различные параметры в Redis и обеспечивает их удобное и быстрое редактирование прямо из админ-панели Django, что позволяет не дожидаться окончания пайплайна, а на живом проде быстренько переключить любую настройку. Например, мы как-то добавляли настройку для автоматической проверки качества загружаемых пользователями фотографий и при выключении параметра проверка просто не проводилась. То есть, в любой момент можно отключить эту фичу, если мы поймём, что что-то идёт не по плану.

Конфигурируется библиотека очень просто, поэтому вам не понадобится много времени, чтобы с ней разобраться. Документация, на мой взгляд, тоже довольно понятная. В общем, рекомендую обратить внимание и пополнить свой арсенал используемых инструментов этим решением.