Ситуация #5. Заключительная
Я посещаю все презентации продуктов, которые выпускает наша компания и публичные собрания. Для меня важно знать, какие цели у нашего бизнеса, я слежу за показателями поведения наших клиентов. Эту информацию я использую в своей работе.

Если понравился формат, поставьте любую реакцию на это сообщение 👽

Жадные алгоритмы. Задачи о размене, рюкзаке и о задачах.
Мы добавили задачу в вашу задачу о задачах, чтобы вы решали задачу, пока решаете задачу.

Читать.

«Окей, ChatGPT, сделай мне кнопку»

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

Результат вышел, мягко говоря, неоднозначный. Смотрите сами:

🤖 https://tml.io/ef1c26

На какие курсы можно записаться со скидкой на этой неделе:


📍Пакет курсов «Работа с данными» за 23 900 16 730 ₽ или в рассрочку на 12 месяцев за 1990 1390 ₽/месяц до 27 июня.

Курсы в этом пакете прокачивают навыки по эффективной обработке данных и построению архитектуры

Включает 3 курса:

- TypeScript
- Алгоритмы и структуры данных
- Протоколы и сети
+ курс «Протоколы и сети: веб-безопасность» в подарок.

Начать обучение.

📍Алгоритмы и структуры данных за 14 700 10 290₽ или в рассрочку на 6 месяцев за 2 450 1 710₽/месяц до 25 июня.

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

Начать обучение.

#пятничная_скидка

В нашем подкасте «Про код» уже 12 выпусков, слушать можно на любимых площадках, лайки и обратную связью приветствуем 🐈

🎙 Подкаст «Про код», эпизод 7. WebGPU в Chrome 113, борьба с большим DOM и канареечный React

Коротко: разобрали Chrome 113, посчитали, сколько узлов в DOM у Академии, поругались на перекраску полос прокрутки и ужаснулись консольным приложениям на React. Классика!

00:00:00 Начало
00:00:26 Chrome 113 — что нового?
00:17:01 Большой DOM не всегда к добру
00:35:02 Канареечный React
00:46:57 Почему перекраска полос прокрутки — это плохо
00:54:39 Консольные приложения на React

💫️️️️Слушайте «Про код» на любимой площадке и подписывайтесь на «Доктайп»

Почему 8px сетка — стандарт индустрии?

При работе с сайтами вы могли заметить, что многие элементы имеют размеры или отступы, кратные восьми: кнопка высотой 40px, отступ между карточками каталога 32px, несколько иконок, стоящих в ряд с отступом в 8px и так далее. Что же происходит? Это совпадение или какой-то дизайнерский заговор?

Это не заговор: в таких отступах есть смысл и практическая польза.

Подробнее в статье.

Какие вопросы задают на собеседованиях.

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

Чтобы хоть как-то помочь вам, мы поговорили с коллегами из компаний Affinage и Takeoff-staff, компании Pitch, студии Лепёхина и веб-студии Thmoon. Они рассказали, что спрашивают на собеседованиях, как у них проходит тестовое задание и нужно ли фронтендеру уметь вообще всё, чтобы найти работу.

Посмотреть вопросы.

На какие курсы можно записаться со скидкой на этой неделе 👇

Пакет курсов «Креативный» за 15 610₽ или в рассрочку за 1300₽.

Пакет навыков, которые позволят разработчикам эффективно решать типовые задачи, связанные с дизайном.

Включает 3 курса:

- Дизайн для фронтендеров

- Дизайн-системы

- Мастер анимаций: CSS- и JS-анимации

🔗 Начать обучение

Курс «Паттерны проектирования» за 9 900₽ или в рассрочку за 1150₽.

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

🔗 Начать обучение

Скидки будут действовать до 9 июля.

🗂️ Как сверстать доступный сайт.

Что важно учесть, чтобы сайтом смогли пользоваться все — https://tml.io/e262cc

⚙️ Что такое алгоритмы и зачем нужны.

Алгоритм — это набор инструкций для решения какой-то задачи. Всё, что мы делаем: готовим утром кофе, идём на работу, пишем код — это исполнение определённых алгоритмов. У каждого алгоритма есть исполнитель. Например, код, который мы пишем — это набор инструкций, а исполняет его компьютер. Быть исполнителем можете и вы сами, когда занимаетесь любыми повседневными задачами. Например, когда собираетесь на работу.

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

Перечислим часть задач, которые можно решать с помощью алгоритмов (на самом деле их возможности гораздо шире).

Сортировка данных.
Зная алгоритмы, можно выбрать наиболее оптимальный по времени и производительности метод сортировки. Например, если нам нужно вывести десять пользователей с наиболее высоким рейтингом, нет смысла упорядочивать всю многомиллионную базу: это загрузит сервер и займёт немало времени. Достаточно выбрать подходящий метод и, не прибегая к полной сортировке, получить нужные данные.

Поиск в массиве.
Разработчикам часто приходится искать в массиве целый объект по его признаку или запускать проверку на вхождение. Для таких задач нужно правильно выбирать алгоритм поиска.

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

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

💼 Как попасть в компанию мечты, если там закрыты все вакансии. Советует HR.

☞ Проверьте вакансии на альтернативных площадках.
LinkedIn, GitHub, телеграм-каналах, соцсетях и сайте компании.

☞ Поищите стажировку.

Многие крупные компании предлагают стажировку для новичков, например, «Яндекс», «Тинькофф», «Сбер», «ВК» или «Авито». Где-то такая работа оплачивается, где-то нет. Отличаются и вступительные условия. Однако каждая из этих компаний заявляет, что если стажёр успешно пройдёт обучение, то при наличии вакантных мест сможет попасть в штат.

☞ Познакомьтесь с рекрутёром и расскажите о своём желании работать в компании.

Напишите прямо, что вы хотите работать в компании, объясните причину и коротко расскажите о себе. К сообщению приложите резюме и добавьте ссылку на портфолио. Обязательно укажите контакты и в письме, и в резюме.

Вот один из хороших примеров письма:

✉️ Здравствуйте, Елена! Меня зовут Алексей, я фронтенд-разработчик.

Я не нашёл открытых вакансий в SuperMegaCompany, но очень хочу работать у вас. Я большой фанат продуктов компании: уже 10 лет пользуюсь вашими приложениями и теперь хочу поработать над ними. Особенно интересны сервис подбора игр SuperMegaGames и онлайн-кинотеатр SuperMegaCinema.

У меня есть опыт командной разработки: я создавал новые интерфейсы и дорабатывал уже готовые. Пишу на React и TypeScript. Знаком с библиотекой Redux. Пишу регрессионные и юнит-тесты на Jest.

Ссылка на портфолио. Резюме.

Я готов созвониться с вами, даже если сейчас в компании нет открытых вакансий — возможно, вам понадобятся разработчики в будущем. Если у вас есть вопросы, с удовольствием на них отвечу.

Мои контакты: @alexfrontender 8 911-000-00-00

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

На какие курсы можно записаться со скидкой на этой неделе 👇

Пакет курсов «Креативный» за 15 610₽ или в рассрочку за 1300₽.

Пакет навыков, которые позволят разработчикам эффективно решать типовые задачи, связанные с дизайном.

Включает 3 курса:

- Дизайн для фронтендеров

- Дизайн-системы

- Мастер анимаций: CSS- и JS-анимации

🔗 Начать обучение

Курс «Паттерны проектирования» за 9 900₽ или в рассрочку за 1150₽.

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

🔗 Начать обучение

Скидки будут действовать до 9 июля.

🗂️ Зачем нужен CSS-in-JS.

Новая технология для верстальщиков — https://tml.io/a981df

⚙️ Точность регулярных выражений.
Существуют такие текстовые конструкции, для которых нельзя однозначно составить правило, например, теги или электронная почта.

Стоит ли проводить оптимизацию выражения, чтобы оно совпадало точно? И насколько точно?

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

Разберём на примере адреса электронной почты: какова может быть цена точности.

const checkEmail = (email) => /^[a-z0-9_.-]+@[a-z0-9-]+\\.[a-z0-9-.]+$/i.test(email);


Давайте проговорим правило:

^[a-z0-9_.-]+ — это имя, где от начала строки встречаются латинские буквы, цифры и некоторые знаки;затем символ @ или в простонародье «собака»;дальше идёт доменная часть, которая разбита на доменное имя [a-z0-9-]+ и доменную зону [a-z0-9-.]+. С одной стороны, это необходимый минимум для валидации. Но всегда найдутся перфекционисты, которые скажут, что правило не покрывает абсолютно все варианты адресов по стандарту RFC.

Вот пример корректного адреса электронной почты !#$%&'*+-/=?^_{}|~@example.com

Готовы ли вы в своих проектах поддерживать подобное — решать вам. Стоит лишь помнить, что любое усложнение правил создаёт дополнительные варианты возвратов, и, как следствие, потерю в скорости работы скрипта и излишний расход памяти.

Неплохой обзор проблемы можно прочитать в статье «Никогда не проверяйте e-mail адреса по стандартам RFC».

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

const checkEmail = (email) => /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])/i.test(email);


Так выглядит боль. Попробуйте проговорить правило самостоятельно 🤪

Кроме боли должно быть что-то необычное, и вот вам экзотический вариант:

const checkEmail = (email) => {
let input = document.createElement(`INPUT`);
input.type = `email`
input.value = email;

return input.checkValidity();
};

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

Точность — не всегда хорошо. Если вы не валидируете счёт, на который вам поступает зарплата, то смело можно писать более простые правила. Перфекционизм — всегда затратно.