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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

​​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)

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

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

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

___

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

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

Привет, это 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

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

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

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

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

___

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

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

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

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

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

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

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

​Язык 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

​Взаимодействие с внешним 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

​Тестирование фронтенда, иммитация внешнего 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

​Веб-доступность (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/

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.

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

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

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

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

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

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

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

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

#подборка #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/)

​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

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

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

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

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

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

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

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

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

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

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

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

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

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

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