фронт.ру

Apple сломала веб-анимации в Safari 17

Интересный баг сафари в актуальной ios (17.5.1) и как его чинить показал тимлид буквально вчера.

В чем суть: у элемента, у которого прописано несколько анимаций с одним и тем же именем keyframes происходит накладывание кадров друг на друга. Это прекрасно видно на гифке выше.

.cool-element{
  animation:
    bounce 0.5s 1s ease-out,
    bounce 0.5s 2s ease-out,
    bounce 0.5s 3s ease-out;
}

Apple так "оптимизирует" кадры анимации с одинаковым именем ключа 🤡

Ну раз не нравятся одинаковые имена, то сделаем разные!

.cool-element{
  animation:
    bounce-1 0.5s 1s ease-out,
    bounce-2 0.5s 2s ease-out,
    bounce-3 0.5s 3s ease-out;
}

Да, придется теперь вместо одного keyframes иметь три одинаковых! Но такова жизнь...

Ждем ios 18? Или не исправят?)

Ссылка на кодпен, чтобы проверить на своем айфоне – https://codepen.io/dnotrad/full/bGPVJPJ

@dlents

Спустя 3 года проверил инструменты из комментариев к посту и написал небольшой пост в своем блоге как обновлять кеш опенграф разметки для ВК, Телеграм и Фейсбук 👇🏼

https://t.me/dlents/113

Как побороть сдвиг сайта из-за появление скрола

Недавно увидел потрясающий CSS хак как компенсировать сдвиг сайта, когда у вас появляется скролл на странице. Вся верстка будто прыгает, появлется так называемый CLS – content layout shift. Нехорошо. Глаз раздражает и приводит к мискликам (смотри комментарии к посту).

А хак до жути простой:

padding-left: calc(100vw - 100%); // 15px 

100vw – ширина всей страницы с учетом скролбара
100% – ширина страницы без учета скролбара

Вычитаем и получаем заветные 15px, когда скролл есть и 0px, когда его нет. А дальше добавляем куда вам нужно – будь это padding, margin, top, left или еще чего. Просто и гениально.

А пост пишу, потому что удалось сразу проверить в проде как оно работает. Весь дифф до и после компенсации видно на видео.

Не забывайте про мелочи (а тем более про CLS) и тогда сайтом будет действительно приятно пользоваться.

@dlents

🚘 Как разогнаться до 300к cтрочек в секунду?

Ответ: выучить хоткеи!

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

Перечислю, что использую сам (на маке).

VsCode:

- открыть консоль => cmd + j
- открыть файловый проводник => cmd + b
- поиск по проекту => cmd + p
- поиск по файлу => cmd + f

Браузер:

- ласт закрытая вкладка => cmd + shift + t
- закрыть текущую вкладку => cmd + w

Системные:

- свернуть окно программы => cmd + h
- завершить процесс программы => cmd + q
- переключиться между окнами => cmd + tab

А еще давно поставил себе на мак утилиту RayCast - замена дефолтного спотлайт с кучей встроенных фич. Создал себе бинд cmd + t, который открывает переводчик.

Также можно забинднить какую-то ссылку на ключевое слово и быстро открывать ее, нажав cmd + space и написав это слово. Я так сделал с парочкой репозиториев в гитхаб. Сразу попадаю на пулл реквесты нужной репы буквально за мгновенье.

Мораль сей басни такова:
оптимизируйте все рутинные действия в работе за компом и со временем увидите, что пользуетесь им как джедай своим мечом ⚔️

Делитесь в комментариях хоткеями и программами, которые упрощают жизнь.

@front_ru

🤔 Что порешать перед собесом для проверки своих знаний?

Повторив много теоретической информации надо бы порешать тесты, чтобы проверить себя. Мало кто знает, что сделать это можно не отходя от кассы всеми любимого лерн-джаваскрипт.

В разделе тесты знаний есть 2 вида теста: на базу по js и на работу с DOM и страницей. В тесте содержится 20 вопросов, от легких до замудренных на глубокое понимание языка. Есть и каверзные вопросы из рубрики "Оно никогда не понадобится, но знать надо".

Короче советую, сам всегда прохожу там тестики при подготовке к собесам.

Еще как вариант можно соревноваться с друзьями / коллегами кто наберет больше верных ответов. А еще лучше делать это на тимбилдинге команды фронтов в баре (проверено 😄).

А как вы проверяете себя перед собесами?

@front_ru

😳 Задача с невозможным условием

Сегодня на работе была сходка фронтов, где мы вместе обсуждали и решали задачи (не из жиры).

Помимо известных всем рядов Фибоначчи и строк палиндромов скинули вот такую необычную задачку, которая на первый взгляд кажется невыполнимой.

Нужно описать obj, чтобы выполнилось условие:

if(obj < 10 && obj > 10) {
console.log('Hello');
}

Подумайте и поломайте голову, а после тыкайте спойлеры ниже

Подсказка:

Вспоминаем про метод valueOf у объектов

Решение задачи:

const obj = {
checked: false,
valueOf () {
if( !this.checked ) {
this.checked = true;
return 9;
} else {
return 11;
}
}
};

Почему так происходит:

Как многие могли догадаться JavaScript вызывает метод valueOf у объектов, когда речь заходит о математических операциях. Мы просто переопределяем метод, чтобы сначала он вернул меньшее число, а потом большее.

Ну и ссылочка на почитать поподробнее:

https://learn.javascript.ru/object-toprimitive

Делись постом с коллегами фронтами, посмотрите кто в команде лучше знает базовый JS 😁

@front_ru

🦾 Автоматизируй это с GitHub Actions

Расскажу сегодня на примере своей истории почему GitHub Actions это клево и что с ними можно делать. Спойлер: все, что душе угодно.

Был у нас чатик в телеграм с 3 фронтами, которые пилили один проект. Ревью происходило в формате "все всех". И вот на каждый pull_request мы копировали ссылку, шли в чатик и тегали друг друга. И так каждый раз. В какой-то момент я вспомнил, что хотел погрузиться в GitHub Actions и решил совместить приятное с полезным.

Итого на выходе получил такой сценарий ->

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

Выводы, которые я сделал:

Гитхаб экшены очень мощная штука. У них есть ивенты буквально на любой чих. А то, что будет происходить при запуске этих ивентов ограничивается лишь вашей фантазией. Один из самых популярных примеров использования это запуск тестов после пуша в ветку.

Какого-то классного материала для вкатывания в гитхаб экшены я не нашел, поэтому брал инфу отовсюду по чуть-чуть. В качестве примера делюсь ссылкой на свой экшен (про который шла речь в посте). Можете подключить его на своем проекте.

P.S работая на том проекте хотел сделать экшен, который сам двигает карточку в жире в статус DONE после мержа в девелоп, но руки не дошли ☕️

P.P.S Делись идеями для экшенов в комментариях

@front_ru

👨‍💻 Апплеты Лафоре

Сегодня начал читать Роберта Лафоре "Алгоритмы и структуры данных". К каждой главе приводится воркшоп - интерактивный пример того как работает обсуждаемая в главе структура данных. Только вот примеры эти написаны на джава апплетах. Начав искать эти волшебные джава файлы для данной книги наткнулся на сайт, который реализовал все это дело на JavaScript и засунул в веб, сохранив при этом изначальный UI/UX автора.

В итоге 2 зайца 1 выстрелом: не пришлось продолжать искать апплеты и после мучаться с их запуском.

А вы читали Лафоре?

@front_ru

🎄 Друзья, всех с наступающим!

Желаю всем очень хорошо отдохнуть, а после очень продуктивно провести 2023 год!

Поставленные цели должны и будут реализованы на 100 процентов 🥳

Следите за здоровьем, не болейте, будьте счастливы 😉

@front_ru

🤔 О работе браузеров при автозаполнении </>

Посмотрел сегодня доклад от одного из разработчиков Яндекса про то, как браузер решает, что подсказать юзеру при заполнении инпута. Выжимка из доклада ниже.

Для формирования нужной подсказки браузер:

1) Ищет у инпута атрибут autocomplete
2) если не нашел, пытается самостоятельно понять тип инпута
3) если не вышло выяснить тип - обращается к своей истории

(о каждом этапе подробнее смотрите в докладе)

Рекомендации для фронтов:

1) Используйте атрибут autocomplete согласно логике сайта.

Серьезно, самое просто и лучшее, что можно сделать это просто по логике указать нужно значение для этого атрибута

2) Проверяйте как автозаполняются ваши инпуты на этапе разработки.

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

3) Заполняйте атрибуты полей осмысленными названиями и не допускайте неоднозначности.

<input id="first_name" /> 👍
<input name="dfs324" /> 👎
<input id="email" placeholder="Адрес" /> 👎 (неоднозначность: то ли это мыло юзера, то ли его физический адрес)

4) Старайтесь, чтобы ваша форма сабмитилась именно через событие submit тега <form />.

Это помогает браузеру проще сохранить данные юзера для последующих обработок.

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

P.S. А еще в докладе о том почему autocomplete="off" не всегда работает.

@front_ru

😮 База, как слышно? На проводе реакт разработчик.. </>

Развитие современных языков программирования уводит недавно пришедших ребят в профессию от понимания основных, БАЗОВЫХ вещей в этой сфере.

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

Но зачем мне это нужно, если я прекрасно делаю классные сервисы без этих знаний?

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

Поэтому сегодня принес ссылку на плейлист (который на скрине выше).

Буквально на днях нашел этот кладезь на ютубе и сам еще не все посмотрел. По ссылке найдете хорошо сделанные ролики на многие базовые темы: устройство памяти компьютера, процессора, история развития кодировок, систем счисления и др.
Подача несложная, информация интересная, монтаж шикарный - грех не посмотреть. Я планирую пересмотреть вообще все, что есть на данном канале. Кстати автор канала набрал 100k+ аудитории всего за 20 роликов.

Да пребудет с вами база! передаю привет Андрею Кобезе 😎

@front_ru

⌨️ На чем написаны Хабр, Кинопоиск и другие сайты? </>

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

Заходишь почитать статью на хабр и заодно узнаешь на чем он сделан (на Vue). Library Detector при посещении сам в фоне запускается и в попапе показывает библиотеки сайта. Вообщем расширение прикольное. Советую поставить, забыть и в какой-то момент случайно удивиться, что твой любимый сервис полностью на JQuery.

Также полезно, если занимаетесь реверс инжинирингом. Так что кроме прикольного есть и полезная сторона.

Кстати, это расширение под капотом использует небезызвестный Lighthouse.

Делись в комментариях какими расширениями ты пользуешься.

@front_ru

🤔 Лучшая документация для фронтендеров?

Все привыкли к лернджс - сайт с которого большинство начинают изучение JavaScript.
Все во время работы обращаются к MDN - получение технической инфы по каким-то апишкам браузера или возможностям языка.
Но не все знают про относительно недавно появившийся портал "Дока" - doka.guide.

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

«Дока» полностью на русском, с классными иллюстрациями, актуальна, написана легко и просто. А еще мне очень нравится UI и UX этого сайта. Дизайнерам респект.

Например вот статья на Доке о том, что такое Skip Link. Если не знакомы с этим понятием - милости прошу!

Резюмируя:

нужна исключительно техническая информация о технологии? - идем на MDN

что-то повторить или изучить? - теперь к всеми известному лернжс добавляем doka.guide

@front_ru

🆘 Как быстрее всего попасть на собеседование?

Около месяца назад я начал искать работу. Базово я обновил резюме на hh и дополнительно завёл страницу на хабре. Если с Хабра был какой-то выхлоп, то на hh все было грустно. Никто даже не читал мои отклики, несмотря на то что под каждую компанию я писал индивидуальное сопроводительное, а не спамил шаблонами. И тут мне подсказали «трюк» - стучаться рекрутерам в личку. И это помогло! Крупная российская компания позвала на технический собес уже на следующий день. При этом на hh эта же компания все еще не прочитала мой отклик. Так что, если вас не замечают на «работных» сайтах - попробуйте проявить инициативу. Да, это не гарант, что вас тут же позовут на собес, но это уже показывает вашу заинтересованность в вакансии и выделяет среди сотни других резюме.

Важно!
Не забывайте, что у рекрутеров, как и у вас, есть рабочий график - не пишите ранним утром или поздним вечером. Пишите четко и по делу - привет, я Ваня Иванов, фронтендер, заинтересован в этой <ссылка> вакансии. Вот мое резюме <ссылка и/или файл>

А как вы ищете работу?

@front_ru

​#ликбез #интересное

Что такое localhost?

Думаю каждый из вас включал localhost:3000 при разработке сайта. Но знаете ли вы, что скрывается за этим названием? У меня как раз есть небольшая статья (5 минут чтения), в которой доступно рассказывается, что такое хост в сети, что такое локалхост, что такое порт, зачем нужен файл hosts на вашем компьютере и тд.

А еще в инсте вышел пост как подключиться к локалхосту с телефона или другого устройства.

Ссылка на статью про локалхост - читать

​#javascript

Сложные вещи — проще с Intersection Observer

Intersection Observer API - позволяет отслеживать, когда элемент на странице пересёк наш вьюпорт. Иными словами мы можем отследить момент появления блока в видимой части страницы. Это позволяет делать следующее:

ленивая загрузка картинок или другого контента
анимация по скроллу
индикатор просмотра страницы или активной вкладки якорного меню
запуск и остановка видео при скролле
бесконечная прокрутка

Это простая и крутая апишка нативного JavaScript.
И вот хороший обзор на нее! В видео обозревается технология и реализовано многое из перечисленного выше!

​#сервис

Сервис для создания необычных форм DIV

Наш дизайнер на работе любит делать необычные формы для блоков. Для этого мы юзаем свойство clip-path, чтобы повторить как это сделано в макете. И для этого есть хороший сервис clip-path-generator. Но в этом сервисе вы сами должны на глаз расставлять все точки, чтобы повторить форму. По причине, что иногда это довольно муторно и долго я сделал свой небольшой сервис для создания форм.

Вы просто вставляете исходный код svg, который можно скопировать прямо с фигмы и получаете нужные координаты для clip-path. Также работает и для форм, которые используют кривые, закругленные края и тп.

ссылка на мой сервис

​#лайфхак

Обновляем за 2 секунды метаданные сайта

Было такое, что вы настроили все теги meta, поставили заголовок, описание, настроили og-разметку, но при репосте вашей ссылки все равно данные не подтягиваются? Все потому, что на это нужно время. Однако для площадки Телеграм есть хак - @WebpageBot.

Закидываете в бота вашу ссылку, жмете обновить и все! При "шеринге" ссылки в телеграм подтянется самая актуальная разметка.

P.s если знаете таких ботов или сервисы для других платформ - поделитесь в комменатриях

​#css

Функции min(), max() и clamp() в CSS

Вы знаете, что математика в CSS не ограничивается только свойством calc()?
Кроме него есть аж целых 3 крутых свойства, которые могут очень сильно изменить подход к адаптивной вёрстке! Посмотрите небольшое видео об этом. Кстати, у автора крутая подача материала.

​React 18 - новая версия, новые фичи

В начале лета в официальном блоге React вышла новость о планах на 18 версию библиотеки. Команда разработчиков рассказала о новых фичах и API, которые планируется зарелизить в обновлении.
Статья подробно рассказывает, что нового завезут нам разработчики всеми любимой библиотеки.

https://habr.com/ru/post/577168/