Forwarded from Веб-страница
Несколько годных советов по оптимизации веба. Несмотря на то, что статья от 2018 года, она всё ещё актуальна:
https://tprg.ru/yGtf
#оптимизация
https://tprg.ru/yGtf
#оптимизация
Этот канал я завёл больше для себя, чем для кого-то. В период карантина очень сложно в раз обрезать все свои контакты и ни с кем не общаться. Буду общаться с тобой, мой виртуальный друг, читатель. Независимо от того, есть ты или нет.
Какое самое длинное название города?
Крун Тхеп Маханахон Амон Ратанакосин Махинтараютхая Махадлок Пхоп Нопарат Рачатани Буриром Удомратчаниве Махасатан Амон Пиман Авата Сати Сакатхаттийя Витсанукам Прасит
Да, это Бангкок.
Но почему это важно знать верстальщику? Потому что если кто-то решит вместо привычного нам сокращённого названия ввести полное - ваш инпут может быть для этого не приспособлен. У российского города Александровск-Сахалинский нет сокращённого названия. Зато, есть аж 25 символов, что может само по себе составлять пикселей 250-300, в зависимости от настроек шрифта. Это нужно учитывать, чтобы не получилось неожиданностей.
Помните, что если что-то можно сломать - это будет сломано в ходе использования всеми доступными способами.
На скрине краш-тест одной из форм на сайте компании для регистрации на обучение для топ-менеджмента, которое навевает грусть у Александра Васильевича Уткина-Задунайского.
Крун Тхеп Маханахон Амон Ратанакосин Махинтараютхая Махадлок Пхоп Нопарат Рачатани Буриром Удомратчаниве Махасатан Амон Пиман Авата Сати Сакатхаттийя Витсанукам Прасит
Да, это Бангкок.
Но почему это важно знать верстальщику? Потому что если кто-то решит вместо привычного нам сокращённого названия ввести полное - ваш инпут может быть для этого не приспособлен. У российского города Александровск-Сахалинский нет сокращённого названия. Зато, есть аж 25 символов, что может само по себе составлять пикселей 250-300, в зависимости от настроек шрифта. Это нужно учитывать, чтобы не получилось неожиданностей.
Помните, что если что-то можно сломать - это будет сломано в ходе использования всеми доступными способами.
На скрине краш-тест одной из форм на сайте компании для регистрации на обучение для топ-менеджмента, которое навевает грусть у Александра Васильевича Уткина-Задунайского.
Forwarded from Марафон по верстке
Бесплатный марафон по 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
👥 Для кого: Для новичков +
⏰Когда: с 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
Forwarded from Веб-страница
Новая версия 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
#фронтенд #производительность
В середине марта команда 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
#фронтенд #производительность
CSS-заметки pinned «Этот канал я завёл больше для себя, чем для кого-то. В период карантина очень сложно в раз обрезать все свои контакты и ни с кем не общаться. Буду общаться с тобой, мой виртуальный друг, читатель. Независимо от того, есть ты или нет.»
Forwarded from Веб-стандарты (Веб-стандарты)
Шпаргалка по БЭМ. Нильс Биндер собирает популярные в вёрстке компоненты и раскладывает элементы внутри них по БЭМ — https://9elements.com/bem-cheat-sheet/
Ребятки!
Никогда, никогда, никогда не берите в поддержку готовые, а тем более полуготовые проекты, если у вас нет времени детально их изучить и полностью разобраться в коде. Осторожно относитесь к таким словам в заказе как "слегка подправить", "чуть-чуть изменить", "реализовать адаптив" и тому подобным. Иногда это может означать, что проект в полной заднице и проще сделать его с нуля чем вносить требуемые заказчиком изменения.
И всегда выясняйте, куда делся предыдущий верстальщик. Может он сбежал с проекта, потому что заказчик дотошный до икотки.
В общем, вот они грабли, товарищи! Обходите!
Никогда, никогда, никогда не берите в поддержку готовые, а тем более полуготовые проекты, если у вас нет времени детально их изучить и полностью разобраться в коде. Осторожно относитесь к таким словам в заказе как "слегка подправить", "чуть-чуть изменить", "реализовать адаптив" и тому подобным. Иногда это может означать, что проект в полной заднице и проще сделать его с нуля чем вносить требуемые заказчиком изменения.
И всегда выясняйте, куда делся предыдущий верстальщик. Может он сбежал с проекта, потому что заказчик дотошный до икотки.
В общем, вот они грабли, товарищи! Обходите!
Forwarded from Веб-страница
This media is not supported in your browser
VIEW IN TELEGRAM
MeiliSearch — поисковой движок, который можно прикрутить к своему приложению. Чем он крут:
— мгновенный отклик (< 50 мс);
— полнотекстовый поиск;
— понимает опечатки и неправильное написание;
— поддерживает синонимы;
— хорошо задокументированный;
— кастомизируемый;
— RESTful API.
Вся документация по его использованию здесь:
https://tprg.ru/MiqW
#api
— мгновенный отклик (< 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/ - "Если бы я учил фронтенд сегодня". Думаю, названием статьи всё сказано. Роадмап присутствует. Новичкам пригодится.
Это не ТОП-10, здесь может быть и одна статья, и сотня, в зависимости от того, что удалось найти и прочитать. И так, начнём.
1. https://habr.com/ru/post/496348/ - довольно неплохой разбор того, как можно (и как нельзя) использовать Web Storage API.
2. https://habr.com/ru/post/495800/ - "Если бы я учил фронтенд сегодня". Думаю, названием статьи всё сказано. Роадмап присутствует. Новичкам пригодится.
