Разработка веб-сайтов *

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

Так же будет немного практики. Настоятельно рекомендую самостоятельно опробовать технологию чтобы материал хорошо закрепился в памяти. Практика наше все!

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

Тема с одной стороны в общем-то простая, а с другой - многогранная. Можно сделать “на коленке”, а можно и “по-взрослому” -  зависит от знаний конкретного девелопера и технического задания. Ну и не привязывается к конкретному языку. Что nodejs, что .net, что PHP - на ответы это не влияет. Ну и отлично же! Давайте попробуем.

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

Как бы вы ответили на конкретный вопрос? Попробуйте проверить себя и потратить пару минут на обдумывание прежде чем читать ответ.

Восклицательным знаком ⚠ помечены вопросы, на которых можно "засыпаться" и оставить плохое впечатление о себе у интервьюера. Так же я позволил себе добавить еще пункты, которые подразумевают "Регистрацию", но по касательной. Многие ответы обрамил ссылками, которые помогут разобраться чуть глубже в конкретном вопросе, думаю будет полезно.

И так, за вёсла!

В какой-то момент своей карьеры вы, возможно, просматривали вкладку «Производительность» в инструментах разработки вашего любимого браузера. В конце концов вы попытались создать profile, но, вероятно, быстро разочаровались. Высокая плотность отображаемой информации делает ее немного подавляющей и несколько пугающей. Я был там, я понимаю тебя!

Хорошая новость: кривая обучения на самом деле не такая крутая!
Как только вы усвоите несколько концепций, он внезапно станет вашим самым ценным инструментом для устранения узких мест в производительности.

Эта статья даст вам несколько ключей к пониманию того, как работает профайлер и как правильно его использовать.
Давайте полностью забудем о console.log и console.time, сегодня мы погрузимся в профилировщик производительности!

Все мы знаем про, или слышали про практики и паттерны проектирования SOLID, GRASP, MVC, MV** и даже применяем их с переменным успехом, стараясь нащупать эффективный подход к построению приложений. Но это лишь приводит к разнообразию реализаций наших приложений и частей функционала. Уже долгое время пытаюсь понять по каким правилам должно строиться фронтенд приложение чтобы оно удовлетворяло следующим критериям:

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

Какие у нас есть варианты?

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

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

Я всегда хотел, чтобы CSS умел обрезать изображение и размещать его в любом нужном мне направлении. Это стало возможным благодаря использованию дополнительного элемента HTML в сочетании с различными свойствами CSS, которые я объясню позже.

В этой статье я познакомлю вас с новым свойством CSS object-view-box, предложенным Джейком Арчибальдом в начале этого года. Это позволяет нам обрезать или изменять размер замененных HTML-элементов, таких как <img> или <video>.

Дайджест новостей и интересных статей из мира фронтенд-разработки за 16—22 мая.

Как отключить запрос favicon.ico, если это нужно. Вы же знали ,что ваш браузер всегда запрашивает favicon.ico?

Теперь фраза «поиграться шрифтами» усложняет задачу, так как грядёт COLRv1

Как работают :where(), :is() :has() и какой из селекторов упрощает жизнь

Playwright теперь готов тестировать ваши компоненты на React, Vue и Svelter

Большое обновление Figma

Недавно мы рассказывали Хабру про поддержку в Яндекс Браузере тех сайтов, которые перешли на использование национальных TLS-сертификатов. Если вы пропустили, то рекомендуем прочитать пост, он содержит ответы на популярные вопросы.  

Сегодня мы расскажем про следующий большой шаг в этом направлении — про обещанную поддержку публичных логов, созданных на базе открытого стандарта Certificate Transparency.

Если вам нужен SSL-сертификат, но вы не являетесь специалистом в веб-технологиях, то эта заметка для вас. Описан простой способ выпуска базового SSL-сертификата Let’s Encrypt в ручном режиме, на локальном компьютере с Windows, с помощью приложения Certbot. Этот способ позволяет получить файлы SSL-сертификата в папку на своём локальном компьютере, после чего можно установить сертификат на свой хостинг.

Потребность в SSL-сертификатах возникла у меня в связи с тем, что срок старых истёк, а создать новые оказалось невозможным из-за возникших ограничений на доменные зоны RU и РФ. Если у вас такая же проблема или вам просто надоело искать веб-сервис для выпуска SSL-сертификатов, то эта заметка вам поможет.

Поскольку я пока не знаю наилучшего пути, то ниже просто опишу ту последовательность действий, которую сам выполнил и которая позволила мне создать SSL-сертификаты для десяти своих доменов (в том числе в зонах RU и РФ), а значит и вам этот способ может помочь.

Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой статье мы рассмотрим SVG-анимации с разных сторон, посмотрим на актуальное состояние дел, возможности и сопутствующие инструменты. Мы не будем разбирать каждое свойство и каждый хак. Слишком большой объем материала получится. Для этого есть MDN и ему подобные сайты. Задача текущей статьи — дать общее представление о том, что бывает, и от чего можно оттолкнуться, если вы решили изучать эту тему, а у вас полная каша в голове.

В далеком 2016 году я твердо решил осуществить свою мечту – делать игры, несмотря ни на что. Было много всего, но пока самой успешной является викторина по фильмам со своеобразным юмором – УГАДАЙ по БУГУРТУ. 

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

Что написать на кнопке: “с вас тысяча рублей” или “подайте на хлебушек”? Влияют ли мемасы на продажу платных сервисов? Какую таблетку пользователи предпочитают чаще – красную или синюю? А если предложить им зелёную, то поползут ли метрики вверх? На эти вопросы можно получить ответ, если проводить А/В-эксперименты и growth hack-сессии.

Меня зовут Денис, я бэкенд-разработчик в hh.ru. Эта статья о том, как мы проводим и анализируем различные эксперименты. Дам немного теории, слегка обрисую внутреннюю кухню и расскажу с какими проблемами могут столкнуться команды, которые только внедряют у себя А/В-эксперименты. 

Pinia vs Vuex: Ананасовый экспресс сижу код пишу!

Pinia, легковесная библиотека управления состояниями для Vue.js, приобрела популярность в последнее время. Она использует новую систему реактивности во Vue 3 для создания интуитивно понятной и полностью типизированной библиотеки управления состояниями.

4 года назад я решила уйти из маркетинга и начать работать фронтенд-разработчиком. Расскажу о том, как искала первую работу, как жила на 30 тысяч в Москве, как обучалась, как устроилась фронтом в Prequel и что сделала бы иначе, окажись в той же ситуации. Также всем желающим могу рассказать, как выровнять блок по вертикали))

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

Как все начиналось

В далеком 2007 году я заканчивала экономический факультет Тверского университета, у нас был курс информатики на семестр, где 3-4 занятия были посвящены html и css. Преподаватель объяснила основы табличной верстки, без адаптива, на уровне “Цвет текста можно поменять вот так, а картинку вставить вот так”. Далее в голодные студенческие годы я начала заниматься фотографией и для поиска клиентов сделала свой первый сайт на Joomla. Отсутствие способностей к дизайну, несколько лекций по табличной верстке и случайно купленная книжка с маркетинговым названием “Как сделать сайт, продвинуть его и начать зарабатывать” дали свой ужасающий по стилю, но вполне работающий результат.

Вычитанные в этой книге советы по SEO сработали, удалось продвинуться по некоторым средне- и низкочастотным запросам, например, “деловая фотосессия”, помогло еще и то, что я жила в городе на 400 тысяч человек с умеренной конкуренцией в фотографии. Однако после универа и переезда в Москву заниматься фотографией стало сложнее – отработать полную неделю в Москве, а на выходных встать в 5 утра на съемку свадьбы было тяжеловато физически. В одну из суббот, отсняв армянскую свадьбу на 200 человек, я осознала, что с фото пора завязывать.

Дальше была попытка работать по специальности, однако я снова пришла к SEO и 2,5 года отработала в агентстве SEO-шником, но со временем меня перестало устраивать, что в оптимизации сложно отследить точное влияние своих действий на результат. Одновременно вокруг росло количество курсов, обещающих, что ты станешь Senior Java Developer за 2 недели (нет) и друзей-программистов, обещающих 150к уже через полгода (нет, нет, нет).

Я самоуверенно решила, что верстку и так знаю, купила книгу по JavaScript и начала читать и делать упражнения. Дополнительно посмотрела пару уроков на Youtube “Как сделать сайт за 2 часа”, повторила за авторами, получила несколько лендингов. Через пару месяцев отправилась на поиски работы, сайтики с видео-уроков представила как свое портфолио, но не скрывала, что сделаны по обучающим видосам.

Технология WebAssembly появилась относительно недавно (в 2015 году) и позиционировалась как альтернатива JavaScript для выполнения в среде браузера с максимально достижимой производительностью. Приложение на WebAssembly может использовать все возможности, доступные в "песочнице" браузера для JS (доступ к Document Object Model, дополнительным классам HTML5), но при этом может быть изначально написано на других технологиях разработки и скомпилировано в формат байт-кода WASM, предоставляя свои интерфейсы сценариям на JavaScript.

Наиболее известным набором инструментов для компиляции в wasm32 является emscripten, с его помощью можно скомпилировать приложение, написанное на C/C++ или на любом языке, имеющим frontend-компилятор для LLVM. При этом компилятор подменяет вызовы OpenGL и POSIX на соответствующие аналоги в браузере, что например используется при компиляции библиотеки skia для браузера (canvaskit) из исходного кода на C++, а также портирование существующих библиотек (например, ffmpeg или opencv). Но некоторые языки программирования поддерживают wasm32 как одну из целевых платформ, среди которых можно выделить Kotlin (Native) и Go. В этой статье мы обсудим общие вопросы о запуске приложений Go в среде браузера и использование библиотеки Vecty для создания веб-приложений на основе переиспользуемых компонентов.

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 9–15 мая.

Тени помогают сделать визуальную составляющую сайта интересной и эстетичной. В посте рассмотрим свойство CSS box-shadow и то, как его можно стилизовать.

Академия началась 10 лет назад с интерактивных тренажёров по вёрстке, которые сделал Саша Першин. Через год появились полноценные интенсивные курсы для верстальщиков, а чуть позже добавились курсы по JavaScript, React и PHP. 

Всё это добро нужно было кому-то вести — сначала всё делали Саша и Лёша Симоненко, а потом их сменили другие авторы. Некоторых вы и без меня хорошо знаете — например, Вадима Макеева, который несколько лет вёл в Академии курсы по HTML и CSS. А всего за 10 лет у курсов Академии было 14 авторов. При этом автор — не наставник и не преподаватель в привычном смысле. Он не занимается отдельно с каждым студентом и не проверяет домашние задания и итоговые проекты. 

Чтобы узнать, чем на самом деле занимаются авторы, я подловил их в тёмном коридоре и задал кучу неудобных вопросов. Поговорили о работе авторов, секретах профессии, бесящих студентах, революциях в вебе, HTML 6, замене JavaScript и ответственности за судьбы людей.