Какое самое длинное название города?
Крун Тхеп Маханахон Амон Ратанакосин Махинтараютхая Махадлок Пхоп Нопарат Рачатани Буриром Удомратчаниве Махасатан Амон Пиман Авата Сати Сакатхаттийя Витсанукам Прасит
Да, это Бангкок.
Но почему это важно знать верстальщику? Потому что если кто-то решит вместо привычного нам сокращённого названия ввести полное - ваш инпут может быть для этого не приспособлен. У российского города Александровск-Сахалинский нет сокращённого названия. Зато, есть аж 25 символов, что может само по себе составлять пикселей 250-300, в зависимости от настроек шрифта. Это нужно учитывать, чтобы не получилось неожиданностей.
Помните, что если что-то можно сломать - это будет сломано в ходе использования всеми доступными способами.
На скрине краш-тест одной из форм на сайте компании для регистрации на обучение для топ-менеджмента, которое навевает грусть у Александра Васильевича Уткина-Задунайского.

Бесплатный марафон по HTML/CSS верстке сайтов!

👥 Для кого: Для новичков +

⏰Когда: с 15 по 17 апреля 3 дня, начало в 18:00

🎥Формат: прямой эфир

Бесплатный марафон для тех, кто хочет:
попробовать себя в верстке сайтов
1⃣ понять “Твое это или не твоё”
2⃣ увидеть и попробовать своими руками верстку 2020 года
3⃣ получить инфу БЕЗ ВОДЫ

Участники марафона получат:
✅Самое понятное объяснение всех основ и тонкостей при верстке сайтов
✅навык верстать подобные проекты
✅ответы на все вопросы в прямом эфире
✅основы работы с Figma для верстальщика
✅заряд мотивации не сдаваться, идти дальше и развиваться

🎁 БОНУС: Расскажу, какими минимальными знаниями должен владеть верстальщик, чтобы устроиться на работу в современную web студию. Поговорим о том, как проходят собеседования и что на них спрашивают.

👱 Автор марафона: Вадим Прокопчук - frontend разработчик, преподаватель, freelancer. Выпустил более 500 учеников online и offline. Автор youtube канала “от 0 до 1”.
Опыт работы в сфере web разработки 5 лет.

🎬 Видео о марафоне, и канал автора:
https://youtu.be/xjXweB4uZJA

​Новая версия PageSpeed Insights

В середине марта команда Google Chrome выпустила бета-версию Lighthouse 6, финальная версия которого ляжет в основу замеров в новом PageSpeed Insights. Это в свою очередь начнёт влиять на поисковую выдачу.

Для оценки производительности сайтов будут добавлены новые метрики, например:

— TBT (Total Blocking Time): время, в течение которого пользователь не может взаимодействовать с сайтом после его отображения. Например, из-за парсинга большого объёма js-кода.

— LCP (Largest Contentful Paint): время до отрисовки самого большого фрагмента контента на странице.

— CLS (Cumulative Layout Shift): метрика, показывающая насколько сильно происходит сдвиг контента при загрузке сайта.

Здесь (или на картинке в посте) можно изучить вес новых показателей в оценке: https://tprg.ru/0VEk

А здесь почитать подробнее про новые метрики: https://tprg.ru/KcXy

#фронтенд #производительность

Шпаргалка по БЭМ. Нильс Биндер собирает популярные в вёрстке компоненты и раскладывает элементы внутри них по БЭМ — https://9elements.com/bem-cheat-sheet/

Ребятки!
Никогда, никогда, никогда не берите в поддержку готовые, а тем более полуготовые проекты, если у вас нет времени детально их изучить и полностью разобраться в коде. Осторожно относитесь к таким словам в заказе как "слегка подправить", "чуть-чуть изменить", "реализовать адаптив" и тому подобным. Иногда это может означать, что проект в полной заднице и проще сделать его с нуля чем вносить требуемые заказчиком изменения.
И всегда выясняйте, куда делся предыдущий верстальщик. Может он сбежал с проекта, потому что заказчик дотошный до икотки.
В общем, вот они грабли, товарищи! Обходите!

MeiliSearch — поисковой движок, который можно прикрутить к своему приложению. Чем он крут:

— мгновенный отклик (< 50 мс);
— полнотекстовый поиск;
— понимает опечатки и неправильное написание;
— поддерживает синонимы;
— хорошо задокументированный;
— кастомизируемый;
— RESTful API.

Вся документация по его использованию здесь:

https://tprg.ru/MiqW

#api

​​С сегодняшнего дня приблизительно по пятницам-субботам буду публиковать #хабробзор - список статей на Хабре за неделю, которые мне показались интересными.
Это не ТОП-10, здесь может быть и одна статья, и сотня, в зависимости от того, что удалось найти и прочитать. И так, начнём.
1. https://habr.com/ru/post/496348/ - довольно неплохой разбор того, как можно (и как нельзя) использовать Web Storage API.
2. https://habr.com/ru/post/495800/ - "Если бы я учил фронтенд сегодня". Думаю, названием статьи всё сказано. Роадмап присутствует. Новичкам пригодится.

Ну и вдогонку к предыдущему посту на канале - кидайте ссылки на свои сайты, которые хотите чтобы я просмотрел. Принимаю ссылки на гитхаб в личку @Serdyuk либо в чат канала.

Самые большие ошибки в веб-разработке — опыт экспертов

«Тот, кто всем говорит, что не ошибается, делает это в 2 раза чаще остальных». Примерно так звучит народная мудрость.

Мы поговорили с веб-разработчиками, которые не боятся признавать свои ошибки. Они рассказали нам про свои самые крупные косяки:

https://tprg.ru/qnXO

#эксперты

​Как заполнить профайл

И найти работу, если ты уже все изучил. Карантин - отличное время для поиска новых возможностей.

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

Самое важное на начальном этапе - полностью заполненный профайл и портфолио. Я говорю как о регулярной работе, так и о фрилансе. Заполняйте его на все 100%. Если вас просят описать каждый сделанный проект - не ленитесь и пишите по всем 1-2 абзаца текста. Если сервис позволяет сделать видео-обращение - не уходите от этой возможности.

Во-первых, вас приметят как качественно сотрудника, выкладывающегося на все 100% (не зря вы так старались над профайлом?). А, во-вторых, хедхантеры или заказчики быстрее поймут, что вы собою представляете.

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

Также не забудьте опубликовать проекты и описания к ним. Даже если вы их сделали и придумали сами. Желательно со ссылками. Собственноручно сделанный проект говорит о самостоятельности разработчика и возможности быстро разобраться в предмете. Даже если у вас не было ни одного заказчика, описывайте учебные проекты, желательно со ссылками. Конечно же, главное - чтобы они были сделаны качественно.

Опыт, не относящийся к программированию, стоит упустить. Не нужно забивать голову людям лишней информацией. Обязательно укажите уровень английского хотя бы на level “читаю техническую документацию”. Ниже уже недостаточно для быстро развивающегося рынка ИТ.

Если вы хотите стать фрилансером, то опишите конкретнее вашу специализацию. Профайл из разряда “делаю все за любые деньги” вызывает скорее недоумение, чем желание работать. Сфокусируйтесь на своих сильных технических сторонах (верстка, настройка серверов, написание SPA с нуля, рефакторинг кода и др.) и опишите их. Часто заказчик имеет точечный запрос, и ему нужен специалист под конкретную задачу.

Ну что, погнали заполнять профайлы?

Как правильно написать alt-текст. Николай Шабалин рассматривает примеры, когда альтернативный текст нужен, когда не нужен и как сделать его полезным — https://htmlacademy.ru/blog/boost/frontend/alt-text?utm_source=tg_web_standards&utm_medium=special&utm_campaign=alt_text_16042020

Очень интересная статья о том, какие лайфхаки используются при вёрстке facebook.

Интересные CSS-находки в новом дизайне Facebook. Ахмад Шадид делится необычными приёмами, которые он нашёл при помощи DevTools в коде редизайна социальной сети, в переводе на Хабре — https://habr.com/p/496958/

Поддержка Touch в JavaScript

https://habr.com/ru/company/tensor/blog/497416/

Вышла Node.js 14 — релиз, который после стабилизации станет LTS осенью 2020. Среди новинок: обновление V8 до версии 8.1, экспериментальный асинхронный Local Storage API, улучшенный API стримов, системный интерфейс Web Assembly и другие — https://medium.com/p/8170d384567e