фронт.ру

2022-12-31 14:20:33 Друзья, всех с наступающим!

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

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

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

@front_ru Открыть/Комментировать

2022-12-30 17:40:24 О работе браузеров при автозаполнении

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

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

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

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

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

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

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

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

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

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



(неоднозначность: то ли это мыло юзера, то ли его физический адрес)

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

.

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

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

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

@front_ru

697 viewsDaniel, edited  14:40

Открыть/Комментировать

2022-12-28 12:38:36 База, как слышно? На проводе реакт разработчик..

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

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

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

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

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

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

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

@front_ru Открыть/Комментировать

2022-12-26 09:45:59 На чем написаны Хабр, Кинопоиск и другие сайты?

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

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

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

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

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

@front_ru Открыть/Комментировать

2022-12-24 12:43:57 Лучшая документация для фронтендеров?

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

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

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

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

Резюмируя:

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

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

@front_ru Открыть/Комментировать

2022-12-23 10:58:13 Как быстрее всего попасть на собеседование?

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

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

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

@front_ru Открыть/Комментировать

2022-02-19 20:55:27 ​#ликбез #интересное

Что такое localhost?

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

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

Ссылка на статью про локалхост - читать Открыть/Комментировать

2022-02-12 23:49:46 ​#javascript

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

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

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

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

2021-12-01 14:55:52 ​#сервис

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

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

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

ссылка на мой сервис Открыть/Комментировать

2021-11-08 19:37:46 ​#лайфхак

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

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

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

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