@davidobryakov

Продолжение курса "Своя фриланс-биржа": быть или не быть? Некоторые из вас знают, что у меня на Youtube-канале есть курс "Своя фриланс-биржа" последний урок в нём выходил около года назад, а первый и вовсе — в мае 2020. Понятно, что с мая 2020, когда это всё начиналось — я успел выучить довольно много всего нового и хотел бы полностью переработать курс. Всвязи с этим, у меня есть вопрос. Как лучше поступить — выпустить серию роликов по исправлению ошибок и рефакторингу, или сделать полностью новый курс? (голосуйте в опросе ниже, либо в посте на вкладке "сообщество") UPD: курс по стеку django + vue

Кастомизация тега select #фронтенд #браузеры #нововведение Уверен, многие фронтендеры сталкивались с задачей кастомизации тега select, потому что дизайнеры постоянно придумывают что-то новое. А что, если эту кастомизацию добавят в браузеры? В своём ролике "Попап вместо селекта", Вадим Макеев показывает новый экспериментальный элемент selectmenu, призванный решить проблему кастомизации селекта. Смотреть: https://www.youtube.com/watch?v=mG0VFWCTnZI Как вы думаете, решит ли новый элемент старую проблему? Делитесь своим мнением в комментариях, давайте пообщаемся :)

Какие инструменты для проверки сайта нужны, кроме Lighthouse? #фронтенд #браузеры #оптимизация Очень часто мы ограничиваемся метриками Lighthouse и забываем, что не только скорость загрузки страницы влияет на поисковую выдачу и пользовательский опыт. Наткнулся на статью, в которой собрано несколько сервисов для дополнительных проверок вашего сайта. Безусловно, среди них есть и довольно странные (во времена SPA-фреймворков HTML Checker и CSS Validator — не то что бы очень полезны в разработке, поскольку тулинг фреймворка позволяет вам не думать об этом и очень часто сам говорит о возможных ошибках), но и они имеют место быть. В основном же, сервисы действительно полезные и, как минимум, про половину из них я и сам не слышал, но думаю — теперь буду пользоваться. А вы какими сервисами пользуетесь для проверки ваших сайтов? Поделитесь в комментариях (можно и не только для проверки, но и в целом интересные инструменты), возможно, соберу подборку из комментов и запощу здесь :) Читать статью: https://habr.com/ru/company/vdsina/blog/522932/

Свой браузер на основе движка Chromium это сложно? #chromium #браузеры #electron Короткий ответ: нет. Длинный ответ: Ещё в начале лета 2021го, меня звали работать в команду браузера на основе Chromium и я даже прошёл два собеседования (и даже неплохо прошёл), но меня не взяли, потому что был кандидат с более релевантным опытом, чем я (UI писался на svelte, с которым я никогда не работал). Но сейчас не об этом. Беседуя с CTO, я много нового узнал про то, каково это делать свой браузер и по сути они немного схитрили, потому что весь их основной функционал достигался собственным плагином (который не был обычным браузерным плагином, конечно, но тем не менее). После этого опыта я неоднократно возвращался к теме и ресёрчил по этому поводу, искал и статьи/гайды по Electron (думаю, некоторые люди знают моё отношение к этой платформе и оно, мягко говоря, неоднозначное). Сегодня листая хабр в перерывах между попытками поработать и поучиться, я наткнулся на интересную статью, где пошагово меняют исходный код Chromium, а затем подключают этот изменённый код в Electron, подменяя тот Chromium, что был изначально. Таким образом, достигается возможность вносить некоторые важные изменения в платформу, избавляя её от ненужных частей, что делает саму платформу более легковесной да и вообще — кастомизируемой. Думаю, немногие из вас хотя бы раз пытались поменять что-то в исходном коде браузера, но теперь можете пошагово пройтись по статье и попробовать. Не знаю, сможете ли вы сделать свой браузер на основе Chromium, но общий уровень знаний и навыков — точно поднимите. Ссылка на статью: https://habr.com/ru/post/599679/

​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

​Где лучше рендерить? На клиенте или на сервере? #подборка #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/)

​Удалёнка — это новая реальность? Увидел интересный перевод на хабре, в котором приводится статистика по результатам опросов различных IT-специалистов о предпочтительном формате работы: "53% технарей считают, что одним из главных преимуществ работы из дома является увеличение продуктивности. 59% сочли серьёзным преимуществом возможность работать в более расслабленном режиме. 80% указали главным преимуществом экономию денег на дорогу. 47% согласны с Цукербергом в улучшении баланса жизни и работы." Я и сам стал за собой замечать, что у меня не получается работать в офисе даже на 10% столь же эффективно, как из дома. Но у меня есть травматичный опыт неприятной работы в офисе на протяжении полугода и возможно, это он так сказывается, но думаю, что дело не только в нём, но и в том, что удалённый формат работы уже крепко вошёл в привычку и офисный гул просто не позволяет сосредоточиться на своих задачах и только мешает естественной концентрации. Что самое странное — работа в кофейнях воспринимается просто отлично, хотя по сути своей это ведь тот же офис/коворкинг (коворкинги я, кстати, тоже терпеть не могу), разве нет? А вам легко возвращаться в офис, после 1.5 лет ремоута? Пишите в комментарии, рад буду пообщаться :) Перевод на хабре: https://habr.com/ru/post/598669/

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. Потихоньку налаживаю выход постов и роликов, надеюсь, в этом году их будет гораздо больше, чем в прошлом

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

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

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

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

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

​UI-фреймворк Bootstrap (+ верстаем котиков адаптивно) — Фронтенд-разработка Привет, это 5й урок из моего курса по фронтенд-разработке в Университете ИТМО. Сегодня поговорим о UI-фреймворках и попрактикуемся в работе с Bootstrap, попробовав сверстать коттиков адаптивно. Смотреть: https://youtu.be/J1bMExplCAw Прошлый урок: https://youtu.be/xtC6l5-q4yU Плейлист: https://www.youtube.com/playlist?list=PLAhg4XYCffEm0H8SQPtRTG38rbA6LIVzG ___ Полезные ссылки: 1) Мой телеграм-канал: https://t.me/davidobryakov 2) Репозиторий с примерами из этого курса: https://github.com/kantegory/mentoring/ 3) Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT-Frontend-2021/ 4) Документация Bootstrap: https://getbootstrap.com/

​Изоляция стилей (веб-компоненты, БЭМ) — Фронтенд-разработка Привет, это 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

​Браузерные анимации с точки зрения перфоманса Тут у Уфокодера (@ufostation) вышел просто замечательный тред про браузерные анимации и то, как они влияют на перфоманс. А главное, — почему анимации правильно делать через transform, а не как-либо иначе. Честно признаюсь, я не разбирался в этом до такой степени, просто всегда лепил transform (при необходимости), просто потому что однажды где-то вычитал, что так правильно. А теперь с уверенностью могу ответить, почему так правильно. Ссылочка на тред: https://mobile.twitter.com/xufocoder/status/1455963090550411270 ___ p. s. если вдруг вы есть в твиттере и вам интересно почитать мои редкие твиты, то присоединяйтесь, всем буду рад: https://twitter.com/kantegory

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

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