У программистов много созвонов, на которых они обсуждают, как будут писать код. При этом созвоны никто не любит, потому что они редко заканчиваются вовремя. Некоторые коллеги умеют захватывать внимание — говорят полчаса, а ощущается это как 5 минут. Но у кого-то и две минуты монолога растягиваются на целую вечность, после которой хочется отключиться и больше никогда не быть онлайн.
Вместе с BEsmart разработали памятку, как стать самым приятным коллегой на встречах.
Вместе с BEsmart разработали памятку, как стать самым приятным коллегой на встречах.
Для чего фронтендерам разбираться в дизайн-системах
С помощью дизайн-систем можно улучшить качество кода и уменьшить количество ошибок на этапе тестирования.
Что такое дизайн-система?
Дизайн-система — набор инструментов и правил, упрощающих проектирование на всех этапах: от идеи до реализации.
Почему дизайн-системы стоит использовать
– Снижается уровень хаоса в продукте. Один и тот же элемент можно нарисовать множеством разных способов: варьировать цвет фона и границ, тень, скругления, отступы и другие свойства.
– Дизайн-система сокращает количество доступных вариантов, позволяет сохранить консистентность продукта и переиспользовать параметры в дизайне и коде. Это упрощает дальнейшую поддержку.
– Появляется общий язык для коммуникации дизайнеров и разработчиков. Команда тратит меньше времени на объяснения.
– Команда думает о продуктовых задачах, а не об интерфейсе. Работа над новыми задачами идёт быстрее там, где макеты можно собрать из готовых компонентов в устоявшемся стиле.
Задачи, в которых помогает дизайн-система:
– Ускорить разработку по макетам, собранным на той же системе, за счёт готовых компонентов.
– Сократить время, которое команда тратит на поддержку продукта.
– Улучшить качество кода за счёт его переиспользования. – Чем меньше кода, тем проще за ним следить.
– Сократить количество доработок после тестирования. Если базовые компоненты уже готовы и протестированы, ошибок будет меньше.
– Обеспечить доступность интерфейсов.
Почему дизайн-системы популярны?
Летом 2021 года мы провели исследование (подробнее здесь: https://htmlacademy.ru/blog/job/skill-map) и узнали, какие навыки нужны фронтендерам для повышения грейда. Оказалось, что в список наиболее востребованных качеств входит понимание архитектуры ПО и интерфейсов. При этом если от джунов работодатели ждут понимания методологии БЭМ, Атомик, фреймворков и Bootstrap, то от мидлов требуют ещё и опыт построения дизайн-систем.
Как создать дизайн-систему?
1. Формализуйте и систематизируйте принципы, на которых строится продукт.
2. Выпишите все используемые вариации шрифтов и сократите их количество там, где это не играет роли. Затем вынесите цвета, отступы, скругления и другие свойства. Чем больше визуальных параметров получится стандартизировать, тем проще будет дальше.
3. Соберите UI Kit c компонентами, которые уже используются. При необходимости дополните и расширьте их.
4. Реализуйте компоненты в коде. Создайте витрину, где можно познакомиться с компонентом вне продуктового контекста, «в вакууме». Для этого можно использовать готовые решения или создать своё.
5. Сформируйте документацию с используемыми паттернами: указания по раскладке элементов, правила использования отдельных компонентов, tone of voice и другие особенности. Любое решение должно опираться на какой-то принцип или приводить к формулировке нового принципа и дополнению документации.
6. Документация дизайн-системы Consta
Организуйте прозрачный процесс работы над дизайн-системой. Определите, где будет находиться план и бэклог задач, где точка входа по доработкам, где пользователи смогут узнавать про обновления.
С помощью дизайн-систем можно улучшить качество кода и уменьшить количество ошибок на этапе тестирования.
Что такое дизайн-система?
Дизайн-система — набор инструментов и правил, упрощающих проектирование на всех этапах: от идеи до реализации.
Почему дизайн-системы стоит использовать
– Снижается уровень хаоса в продукте. Один и тот же элемент можно нарисовать множеством разных способов: варьировать цвет фона и границ, тень, скругления, отступы и другие свойства.
– Дизайн-система сокращает количество доступных вариантов, позволяет сохранить консистентность продукта и переиспользовать параметры в дизайне и коде. Это упрощает дальнейшую поддержку.
– Появляется общий язык для коммуникации дизайнеров и разработчиков. Команда тратит меньше времени на объяснения.
– Команда думает о продуктовых задачах, а не об интерфейсе. Работа над новыми задачами идёт быстрее там, где макеты можно собрать из готовых компонентов в устоявшемся стиле.
Задачи, в которых помогает дизайн-система:
– Ускорить разработку по макетам, собранным на той же системе, за счёт готовых компонентов.
– Сократить время, которое команда тратит на поддержку продукта.
– Улучшить качество кода за счёт его переиспользования. – Чем меньше кода, тем проще за ним следить.
– Сократить количество доработок после тестирования. Если базовые компоненты уже готовы и протестированы, ошибок будет меньше.
– Обеспечить доступность интерфейсов.
Почему дизайн-системы популярны?
Летом 2021 года мы провели исследование (подробнее здесь: https://htmlacademy.ru/blog/job/skill-map) и узнали, какие навыки нужны фронтендерам для повышения грейда. Оказалось, что в список наиболее востребованных качеств входит понимание архитектуры ПО и интерфейсов. При этом если от джунов работодатели ждут понимания методологии БЭМ, Атомик, фреймворков и Bootstrap, то от мидлов требуют ещё и опыт построения дизайн-систем.
Как создать дизайн-систему?
1. Формализуйте и систематизируйте принципы, на которых строится продукт.
2. Выпишите все используемые вариации шрифтов и сократите их количество там, где это не играет роли. Затем вынесите цвета, отступы, скругления и другие свойства. Чем больше визуальных параметров получится стандартизировать, тем проще будет дальше.
3. Соберите UI Kit c компонентами, которые уже используются. При необходимости дополните и расширьте их.
4. Реализуйте компоненты в коде. Создайте витрину, где можно познакомиться с компонентом вне продуктового контекста, «в вакууме». Для этого можно использовать готовые решения или создать своё.
5. Сформируйте документацию с используемыми паттернами: указания по раскладке элементов, правила использования отдельных компонентов, tone of voice и другие особенности. Любое решение должно опираться на какой-то принцип или приводить к формулировке нового принципа и дополнению документации.
6. Документация дизайн-системы Consta
Организуйте прозрачный процесс работы над дизайн-системой. Определите, где будет находиться план и бэклог задач, где точка входа по доработкам, где пользователи смогут узнавать про обновления.
HTML Academy
Фронтенд-разработчики. Сколько им платят и что нужно уметь
Большое исследование HTML Academy.
«Хочу стать мидлом за полгода». Выпускник Академии участвует в гранте.
В сентябре мы проводили интервью с начинающими разработчиками — выбирали трёх счастливчиков для участия в программе роста. Каждый из участников программы должен был бесплатно пройти оценку софт- и хард-скиллов, получить план развития, а затем обучиться у нас нужным навыкам.
Егор Дюков оказался в нашей программе из-за большой любви к разработке и жажде знаний. После первого этапа — оценки уровня — мы узнали у него, как всё прошло. Маленький спойлер: настолько хорошо, что его чуть не схантили в другую компанию.
Все интересные интересности уже в статье, скорее читайте: https://tml.io/wrewt
В сентябре мы проводили интервью с начинающими разработчиками — выбирали трёх счастливчиков для участия в программе роста. Каждый из участников программы должен был бесплатно пройти оценку софт- и хард-скиллов, получить план развития, а затем обучиться у нас нужным навыкам.
Егор Дюков оказался в нашей программе из-за большой любви к разработке и жажде знаний. После первого этапа — оценки уровня — мы узнали у него, как всё прошло. Маленький спойлер: настолько хорошо, что его чуть не схантили в другую компанию.
Все интересные интересности уже в статье, скорее читайте: https://tml.io/wrewt
HTML Academy
«Хочу стать мидлом за полгода»
Выпускник Академии участвует в гранте и поделился своей историей.
Как регулярные выражения помогают сократить время на разработку
Регулярные выражения — это инструмент, который позволяет фронтендеру быстрее находить и анализировать информацию. Благодаря ему можно не только эффективнее решать задачи, но и писать код, который будет лучше работать.
Наше недавнее исследование вакансий показало: знание регулярных выражений и навык работы с ними требуется в 24% вакансий продуктовых компаний для фронтенд-разработчиков с опытом больше двух лет.
Давайте разберёмся, что такое регулярные выражения и как грамотно их применять.
Зачем нужны регулярные выражения?
Регулярные выражения — это формальный язык поиска подстроки в строке. Они поддерживаются многими программами: редакторами, системными утилитами, базами данных. Но особенно хорошо возможности этого инструмента раскрываются в языках программирования, в том числе в JavaScript.
Когда можно использовать регулярные выражения?
Типовые задачи в которых регулярные выражения действительно могут пригодиться, не так много. Среди них:
1. Поиск или замена подстроки в строке с «плавающими» (неизвестными) данными. Самая распространённая задача — найти в тексте ссылки и адреса электронной почты и сделать их кликабельными.
2. Валидация данных формы и ограничение ввода. Например, валидация номера телефона, электронной почты, данных паспорта гражданина РФ и другой информации.
3. Получение части строки или формирование новых структур данных из строк. Например, нужно найти количество вхождений ключевых слов в тексте без учёта падежных окончаний, составить из них массив с данными для дальнейшего использования.
Какие типовые задачи решаются регулярными выражениями:
1. Поиск и гибкая замена в коде.
2. Подготовка и обработка данных. Когда вы выносите предварительные данные в текстовый редактор и готовите их для следующих операций.
3. Написание кода с большим количеством одинаковых конструкций.
Регулярные выражения справляются с задачами, которые сложно решить с помощью нативных методов языка, упрощает работу с кодом и даже его написание.
Регулярные выражения — это инструмент, который позволяет фронтендеру быстрее находить и анализировать информацию. Благодаря ему можно не только эффективнее решать задачи, но и писать код, который будет лучше работать.
Наше недавнее исследование вакансий показало: знание регулярных выражений и навык работы с ними требуется в 24% вакансий продуктовых компаний для фронтенд-разработчиков с опытом больше двух лет.
Давайте разберёмся, что такое регулярные выражения и как грамотно их применять.
Зачем нужны регулярные выражения?
Регулярные выражения — это формальный язык поиска подстроки в строке. Они поддерживаются многими программами: редакторами, системными утилитами, базами данных. Но особенно хорошо возможности этого инструмента раскрываются в языках программирования, в том числе в JavaScript.
Когда можно использовать регулярные выражения?
Типовые задачи в которых регулярные выражения действительно могут пригодиться, не так много. Среди них:
1. Поиск или замена подстроки в строке с «плавающими» (неизвестными) данными. Самая распространённая задача — найти в тексте ссылки и адреса электронной почты и сделать их кликабельными.
2. Валидация данных формы и ограничение ввода. Например, валидация номера телефона, электронной почты, данных паспорта гражданина РФ и другой информации.
3. Получение части строки или формирование новых структур данных из строк. Например, нужно найти количество вхождений ключевых слов в тексте без учёта падежных окончаний, составить из них массив с данными для дальнейшего использования.
Какие типовые задачи решаются регулярными выражениями:
1. Поиск и гибкая замена в коде.
2. Подготовка и обработка данных. Когда вы выносите предварительные данные в текстовый редактор и готовите их для следующих операций.
3. Написание кода с большим количеством одинаковых конструкций.
Регулярные выражения справляются с задачами, которые сложно решить с помощью нативных методов языка, упрощает работу с кодом и даже его написание.
🔥1
5 лайфхаков, как впечатлить рекрутера и не провалиться на собеседовании
Наши друзья из IT-компании Outlines Tech поделились советами, как разработчикам подготовиться к собеседованиям. Лайфхаки составили исходя из личного опыта рекрутеров. Сохраните пост, чтобы не потерять.
🧑💻Больше карьерных лайфаков найдёте в тг-канале Outlines Tech. Здесь эксперты рассказывают, как построить карьеру в IT, прокачать скиллы и не выгореть. А еще публикуют вакансии.
👉Переходите по ссылке и подписывайтесь.
Наши друзья из IT-компании Outlines Tech поделились советами, как разработчикам подготовиться к собеседованиям. Лайфхаки составили исходя из личного опыта рекрутеров. Сохраните пост, чтобы не потерять.
🧑💻Больше карьерных лайфаков найдёте в тг-канале Outlines Tech. Здесь эксперты рассказывают, как построить карьеру в IT, прокачать скиллы и не выгореть. А еще публикуют вакансии.
👉Переходите по ссылке и подписывайтесь.
👍2❤1🙏1
🌻 Зачем на сайтах анимация?
Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию. Но анимации могут и отталкивать посетителей, если они замедляют загрузку страниц.
Поэтому у разработчиков есть выбор — можно использовать CSS, SVG или JavaScript-анимации. Главное выбрать правильный тип анимации для каждого случая и хорошо её оптимизировать, чтобы она плавно работала у всех пользователей.
Как раз об этом статья. А ещё покажем, как сделать простую анимацию с помощью свойства animation: https://tml.io/ggsgh
Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию. Но анимации могут и отталкивать посетителей, если они замедляют загрузку страниц.
Поэтому у разработчиков есть выбор — можно использовать CSS, SVG или JavaScript-анимации. Главное выбрать правильный тип анимации для каждого случая и хорошо её оптимизировать, чтобы она плавно работала у всех пользователей.
Как раз об этом статья. А ещё покажем, как сделать простую анимацию с помощью свойства animation: https://tml.io/ggsgh
HTML Academy
Зачем нужны анимации в вебе и как их создавать
Плавно, красиво, на чистом CSS.
Разработка сайтов — это не только работа в больших компаниях и легендарных проектах. Иногда это магазины, заводы или веб-студии, которые делают «интернет-магазины под ключ» на Вордпрессе и Битриксе. И с этим тоже нужно работать, а значит, пора научиться верстать под CMS.
В статье рассказываем, что такое CMS и как под них верстать: https://tml.io/bbhdg
В статье рассказываем, что такое CMS и как под них верстать: https://tml.io/bbhdg
HTML Academy
Что такое CMS и как под них верстать
И что это вообще за системы управления контентом?
Из пяти фронтендеров — только трое знают, как можно передавать токены CSRF и для чего чего создана Privacy Sandbox.
Пройдите тест и проверьте в какую группу входите вы — https://tml.io/mmjhy
Пройдите тест и проверьте в какую группу входите вы — https://tml.io/mmjhy
🔥2
Зачем разработчику знать протоколы?
Протоколы в интернете — это связующие нити между разными устройствами. Если вы начинаете работать с пользовательскими интерфейсами, то без знания протоколов никуда.
Мы в Академии это понимаем, поэтому всё необходимое обучение собрали в один пакет «Протоколы и сети».
Курсы внутри и сам пакет сейчас можно взять со скидкой 30% до 13 ноября включительно.
Протоколы в интернете — это связующие нити между разными устройствами. Если вы начинаете работать с пользовательскими интерфейсами, то без знания протоколов никуда.
Мы в Академии это понимаем, поэтому всё необходимое обучение собрали в один пакет «Протоколы и сети».
Курсы внутри и сам пакет сейчас можно взять со скидкой 30% до 13 ноября включительно.
👍3
Зачем фронтендеру разбираться в дизайне?
Разработчик и дизайнер решают общую задачу — создают простой и понятный интерфейс. Чтобы научиться взаимопониманию, нужно погрузиться в предметную область друг друга: дизайнерам нужно понимать HTML и CSS, а разработчикам — знать основы дизайна.
В статье разобрали конкретные кейсы, как разработчику помогает в работе знание дизайна, а ещё немного рассказали про типографику, теорию цвета и редакторы.
Разработчик и дизайнер решают общую задачу — создают простой и понятный интерфейс. Чтобы научиться взаимопониманию, нужно погрузиться в предметную область друг друга: дизайнерам нужно понимать HTML и CSS, а разработчикам — знать основы дизайна.
В статье разобрали конкретные кейсы, как разработчику помогает в работе знание дизайна, а ещё немного рассказали про типографику, теорию цвета и редакторы.
HTML Academy
Зачем фронтендеру разбираться в дизайне
Сейчас выясним.
👍4
Вышел новый выпуск подкаста Frontend Weekend
В этот раз в гости к Андрею Смирнову пришла Александра Ларионова — IT-рекрутер в кадровом агентстве SymbioWay. Саша рассказала, на что обратить внимание при смене работы, как развиваться, если достиг «стеклянного потолка», а ещё ищут ли рекрутеры разработчиков на Тиндере и OnlyFans.
Выпуск получился максимально полезным, так что, если вы в поиске работы или планируете устроиться на новую, то вам сюда.
Слушать на всех площадках
В этот раз в гости к Андрею Смирнову пришла Александра Ларионова — IT-рекрутер в кадровом агентстве SymbioWay. Саша рассказала, на что обратить внимание при смене работы, как развиваться, если достиг «стеклянного потолка», а ещё ищут ли рекрутеры разработчиков на Тиндере и OnlyFans.
Выпуск получился максимально полезным, так что, если вы в поиске работы или планируете устроиться на новую, то вам сюда.
Слушать на всех площадках
levelup.htmlacademy.ru
Специальный сезон подкаста Frontend Weekend
В этом специальном сезоне мы попросили Андрея, не отходя от его легендарного формата, чуть больше поспрашивать фронтендеров про развитие и как оно повлияло на их карьеру. Каждую неделю Андрей будет общаться с одним фронтендером, а мы рассказывать чуть больше…
👍4
Есть много способов сэкономить время и упростить жизнь разработчика. Но они кажутся такими сложными и непонятными, что знакомство с ними постоянно откладывается. И зря: сегодня мы расскажем, как автоматизировать работу, используя вспомогательные инструменты.
Шаблонизаторы для HTML — один из таких способов.
Читать статью
Шаблонизаторы для HTML — один из таких способов.
Читать статью
HTML Academy
HTML-шаблонизаторы
Есть много способов сэкономить время и упростить жизнь разработчика. Шаблонизаторы это один из них.