Frontender's notes [ru]
33K subscribers
649 photos
49 videos
3.47K links
Ведущий канал о современном фронтенде: статьи, новости, практики, вайбкодинг и автоматизация фронта ИИ-агентами.

Личный блог автора - @just_genych
По вопросам рекламы или разработки - @g_abashkin
Download Telegram
​​Велосипедим Promise на TypeScript

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

Читать статью...
Исходный код...

#longread
👍12🔥2🎉2
​​Web Dev [world] - англоязычный канал со статьями и новостями о веб разработке.

Вам сюда: 👉 @frontend_international

В общем добро пожаловать!
👍17🔥1110🙏1
​​Как написать кроссбраузерное расширение в 2022 году

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

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

Читать...

#longread
👍54
​​Кто-нибудь, объясните мне прелесть tailwind

Интересное мнение на тему tailwind css. Рекомендую так же посмотреть комментарии в статье.

Читать...

#longread #tailwind
👍16
Frontender's notes [ru] pinned «​​Web Dev [world] - англоязычный канал со статьями и новостями о веб разработке. Вам сюда: 👉 @frontend_international В общем добро пожаловать!»
​​TypeScript: разбираем исходный код Radash

Radash — это современная альтернатива Lodash, библиотека, предоставляющая набор часто используемых утилит (вспомогательных функций), реализованных на TypeScript. В данной статье мы вместе с вами разберем исходный код нескольких наиболее интересных утилит.

Репозиторий с кодом библиотеки находится здесь.

Читать статью...

#longread #ts
👍5
​​10 задач с JavaScript Promise для подготовки к собеседованиям

Promise — это отличительная особенность JavaScript как асинхронного языка программирования. Нравится вам это или нет, понять его в любом случае придется.
В этой статье автор приводит 10 примеров кода с Promise, начиная от базового уровня заканчивая продвинутым. Готовы? Начнем!

Приступить к задачкам...

#longread #tasks
👍34
​​Обязан ли разработчик развиваться?

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

Но действительно ли всё это надо? Разработчик в самом деле обязан проводить всё своё свободное время за написанием кода? А обязан ли разработчик постоянно развиваться?

Читать...

#career
👍26
​​Продвинутые хуки в React: всё о UseEffect

В этой статье рассмотрим советы и приёмы, которые помогут более профессионально написать код на React.

Читать...

#react
👍1
​​Долги, рекомендации и социальные сети: как нас проверяют при приёме на работу

С проверками службы безопасности при трудоустройстве сталкивались 72% жителей России, а в ИТ-сфере — 74% кандидатов на вакансии. Это распространённая практика, но не все соискатели понимают, что конкретно ищут работодатели и зачем. Об этом мы расскажем в нашей статье.

https://habr.com/en/company/netologyru/blog/687256/

#career
👍4
Новая фича при использовании форм в JS или submit() vs. requestSubmit()

Алоха товарищи фронты! Недавно в недрах интернетов я случайно нарыл инфу о таком событии в JS как requestSubmit(). Отличий не так что бы совсем много но они довольно интересны.

Допустим у нас есть такая форма:

<form action="/changename">
<label for="name">Name</label>
<input type="text" id="name" required>
</form>

<button>Change name</button>

const btn = document.querySelector('button');
const form = document.querySelector('form');

btn.addEventListener('click', function () {
form.submit();
})

Мы видим что у поля name есть аттрибут required.

Как сработал бы обычный .submit() в том случае если значение name отсутствует. Он подстветит нам ошибку но при этом отправит форму так как его не совсем волнует валидна форма или нет.

Как сработает .requestSubmit(). Он подсветит нам ошибку и форму не отправит до тех пор пока форма не будет валидна.

В общем вот, удачных экспериментов!

#shortread #js
👍986
Ребятки, небольшое дополнение к предыдущему посту.

.requestSubmit() это довольно свежий метод, и хоть он работает почти везде но тем не менее нужно иметь ввиду что где-то может не работать.

Вот ссылочка на caniuse ресурс.

Ну и вот полифил:

const form = document.querySelector("form");

if (form.requestSubmit) {
form.requestSubmit();
} else {
form.submit();
}

#shortread #js
👍28🔥3
Алоха, товарищи фронты! 

Тут AvitoTech запустил проект «По домам», в котором frontend-разработчики рассказывают о работе в компании и о профессии.

В этом проекте техлиды и обычные разработчики дали небольшие интервью, которые будут интересны спецам из сферы frontend, а также тем, кто хочет узнать, как это — работать в IT-гиганте и как туда попасть. 

Смотрите первое интервью с ведущим инженером команды Frontend Architecture по ссылке: clc.to/Y8jx3w
👍11🔥3
​​Яндекс опубликовал единый календарь найма разработчиков

В чем я вижу профит этой новости – у Яндекса есть несколько типов специальных мероприятий, благодаря которым в компанию можно попасть максимально быстро: Weekend Offer, Intern Week Offer и Fast Track. Раньше новости о старте мероприятий публиковались хаотично и в разных местах. Желающим поучаствовать нужно было отслеживать их специально. А это, мягко говоря, неудобно.

Теперь собрали в одном месте все “шорткаты”, обещают обновлять регулярно с перспективой на 3 месяца, так что будет время подготовиться и спланировать свое время. Сейчас там опубликовано расписание ивентов для мобилки, фронтэндеров, бекэндеров и SRE-инженеров в разные команды вплоть до конца октября.
13👍12🤩1
​​6 типов собеседований. Как айтишнику не провалить отбор в иностранную компанию

Существует 6 разных типов собеседований на английском языке со специфическими вопросами – что только эйчары не намудрят. Но у каждого job interview есть своя цель, и понимание этой цели поможет вам правильно подготовиться. Обсуждаем все этапы отбора: от первичного звонка с рекрутером – до финального технического интервью.

Читать...

#longread #career
👍9🔥1
Немного мотивации
​​Клуб использованных техлидов

Меня зовут Сергей. Я – использованный техлид. Долго думал, что я такой один – невезучий, потерявший всякий интерес к любимому делу, работающий от звонка до звонка. Оказалось, нет.

Читать далее...
👍3
​​Как повысить скорость разработки с помощью общедоступных функций JavaScript

Практическое руководство по написанию лаконичного кода и повторному использованию вспомогательных функций JS в проектах.

Читать...

#longread #js
👍6
​​Как стать разработчиком React в 2022 году?

React — это ведущая технология для разработки первоклассных пользовательских интерфейсов, быстрых, масштабируемых и, главное, многократно используемых. По данным опроса, проведенного StackOverFlow в 2021 году, React является самым востребованным веб-фреймворком. В 2022 году в React-разработчиках будет нуждаться больше компаний, чем когда-либо.

Читать...
​​Ребята из Яндекса расписали свой путь на Хабр, как они перестали смотреть на метрики и наконец решили улучшать поиск для самих себя
🔥2👍1
​​Под капотом у Mobx. Пишем свою реактивную библиотеку с нуля

Первое мое знакомство с Mobx началось с удивления. Я не понимал всю магию библиотеки и задавал себе вопрос: “А как это возможно?”. Кажется, в ней используются какие-то подкапотные возможности JS или Mobx вообще написан на другом языке. 

И вот, потратив 3 месяца в исходниках, я развеял для себя магию. Mobx все таки написан на JS и даже имеет множественные ограничения, которые нужно соблюдать, чтобы ваш браузер не взорвался.

В этой статье мы создадим свой Mobx с нуля, а так же свяжем его с React, через собственно написанный HOC observer. В конце у вас будет общее понимание реактивности, которое поможет в самостоятельном осмыслении не только Mobx, но и других реактивных библиотек и фреймворков.

Читать...
👍8