⚙️ Что такое алгоритмы и зачем нужны.
Алгоритм — это набор инструкций для решения какой-то задачи. Всё, что мы делаем: готовим утром кофе, идём на работу, пишем код — это исполнение определённых алгоритмов. У каждого алгоритма есть исполнитель. Например, код, который мы пишем — это набор инструкций, а исполняет его компьютер. Быть исполнителем можете и вы сами, когда занимаетесь любыми повседневными задачами. Например, когда собираетесь на работу.
Знание алгоритмов помогает писать более эффективный код, правильно выстраивать архитектуру проекта и отдельных модулей, а также отсеивать операции, ненужные для решения задачи.
Перечислим часть задач, которые можно решать с помощью алгоритмов (на самом деле их возможности гораздо шире).
Сортировка данных.
Зная алгоритмы, можно выбрать наиболее оптимальный по времени и производительности метод сортировки. Например, если нам нужно вывести десять пользователей с наиболее высоким рейтингом, нет смысла упорядочивать всю многомиллионную базу: это загрузит сервер и займёт немало времени. Достаточно выбрать подходящий метод и, не прибегая к полной сортировке, получить нужные данные.
Поиск в массиве.
Разработчикам часто приходится искать в массиве целый объект по его признаку или запускать проверку на вхождение. Для таких задач нужно правильно выбирать алгоритм поиска.
Отрисовка динамических списков и парсинг.
Иногда разработчикам приходится отрисовывать динамические вложенные списки — чаще всего это подобие директорий, в которых хранятся другие директории или файлы. На решение такой задачи уходит немало времени. Но процесс можно ускорить с помощью такого алгоритмического концепта, как рекурсия — вызова функции внутри самой функции.
Оптимизация кода.
Подбор правильных алгоритмов для работы с деревьями помогает ускорить работу страницы при обработке больших фрагментов дерева. Остановимся чуть подробнее на оптимизации кода и поговорим, зачем фронтендерам оптимизировать алгоритмы.
Алгоритм — это набор инструкций для решения какой-то задачи. Всё, что мы делаем: готовим утром кофе, идём на работу, пишем код — это исполнение определённых алгоритмов. У каждого алгоритма есть исполнитель. Например, код, который мы пишем — это набор инструкций, а исполняет его компьютер. Быть исполнителем можете и вы сами, когда занимаетесь любыми повседневными задачами. Например, когда собираетесь на работу.
Знание алгоритмов помогает писать более эффективный код, правильно выстраивать архитектуру проекта и отдельных модулей, а также отсеивать операции, ненужные для решения задачи.
Перечислим часть задач, которые можно решать с помощью алгоритмов (на самом деле их возможности гораздо шире).
Сортировка данных.
Зная алгоритмы, можно выбрать наиболее оптимальный по времени и производительности метод сортировки. Например, если нам нужно вывести десять пользователей с наиболее высоким рейтингом, нет смысла упорядочивать всю многомиллионную базу: это загрузит сервер и займёт немало времени. Достаточно выбрать подходящий метод и, не прибегая к полной сортировке, получить нужные данные.
Поиск в массиве.
Разработчикам часто приходится искать в массиве целый объект по его признаку или запускать проверку на вхождение. Для таких задач нужно правильно выбирать алгоритм поиска.
Отрисовка динамических списков и парсинг.
Иногда разработчикам приходится отрисовывать динамические вложенные списки — чаще всего это подобие директорий, в которых хранятся другие директории или файлы. На решение такой задачи уходит немало времени. Но процесс можно ускорить с помощью такого алгоритмического концепта, как рекурсия — вызова функции внутри самой функции.
Оптимизация кода.
Подбор правильных алгоритмов для работы с деревьями помогает ускорить работу страницы при обработке больших фрагментов дерева. Остановимся чуть подробнее на оптимизации кода и поговорим, зачем фронтендерам оптимизировать алгоритмы.
👍1
💼 Как попасть в компанию мечты, если там закрыты все вакансии. Советует HR.
☞ Проверьте вакансии на альтернативных площадках.
LinkedIn, GitHub, телеграм-каналах, соцсетях и сайте компании.
☞ Поищите стажировку.
Многие крупные компании предлагают стажировку для новичков, например, «Яндекс», «Тинькофф», «Сбер», «ВК» или «Авито». Где-то такая работа оплачивается, где-то нет. Отличаются и вступительные условия. Однако каждая из этих компаний заявляет, что если стажёр успешно пройдёт обучение, то при наличии вакантных мест сможет попасть в штат.
☞ Познакомьтесь с рекрутёром и расскажите о своём желании работать в компании.
Напишите прямо, что вы хотите работать в компании, объясните причину и коротко расскажите о себе. К сообщению приложите резюме и добавьте ссылку на портфолио. Обязательно укажите контакты и в письме, и в резюме.
Вот один из хороших примеров письма:
✉️ Здравствуйте, Елена! Меня зовут Алексей, я фронтенд-разработчик.
Я не нашёл открытых вакансий в SuperMegaCompany, но очень хочу работать у вас. Я большой фанат продуктов компании: уже 10 лет пользуюсь вашими приложениями и теперь хочу поработать над ними. Особенно интересны сервис подбора игр SuperMegaGames и онлайн-кинотеатр SuperMegaCinema.
У меня есть опыт командной разработки: я создавал новые интерфейсы и дорабатывал уже готовые. Пишу на React и TypeScript. Знаком с библиотекой Redux. Пишу регрессионные и юнит-тесты на Jest.
Ссылка на портфолио. Резюме.
Я готов созвониться с вами, даже если сейчас в компании нет открытых вакансий — возможно, вам понадобятся разработчики в будущем. Если у вас есть вопросы, с удовольствием на них отвечу.
Мои контакты: @alexfrontender 8 911-000-00-00
☞ Проверьте вакансии на альтернативных площадках.
LinkedIn, GitHub, телеграм-каналах, соцсетях и сайте компании.
☞ Поищите стажировку.
Многие крупные компании предлагают стажировку для новичков, например, «Яндекс», «Тинькофф», «Сбер», «ВК» или «Авито». Где-то такая работа оплачивается, где-то нет. Отличаются и вступительные условия. Однако каждая из этих компаний заявляет, что если стажёр успешно пройдёт обучение, то при наличии вакантных мест сможет попасть в штат.
☞ Познакомьтесь с рекрутёром и расскажите о своём желании работать в компании.
Напишите прямо, что вы хотите работать в компании, объясните причину и коротко расскажите о себе. К сообщению приложите резюме и добавьте ссылку на портфолио. Обязательно укажите контакты и в письме, и в резюме.
Вот один из хороших примеров письма:
✉️ Здравствуйте, Елена! Меня зовут Алексей, я фронтенд-разработчик.
Я не нашёл открытых вакансий в SuperMegaCompany, но очень хочу работать у вас. Я большой фанат продуктов компании: уже 10 лет пользуюсь вашими приложениями и теперь хочу поработать над ними. Особенно интересны сервис подбора игр SuperMegaGames и онлайн-кинотеатр SuperMegaCinema.
У меня есть опыт командной разработки: я создавал новые интерфейсы и дорабатывал уже готовые. Пишу на React и TypeScript. Знаком с библиотекой Redux. Пишу регрессионные и юнит-тесты на Jest.
Ссылка на портфолио. Резюме.
Я готов созвониться с вами, даже если сейчас в компании нет открытых вакансий — возможно, вам понадобятся разработчики в будущем. Если у вас есть вопросы, с удовольствием на них отвечу.
Мои контакты: @alexfrontender 8 911-000-00-00
👍8
Какой из протоколов вероятнее всего Протокол 1 и Протокол 2?
Anonymous Quiz
39%
Протокол 1 — это UDP, Протокол 2 — это TCP.
34%
Протокол 1 — это TCP, Протокол 2 — это UDP.
20%
Протокол 1 — это IP, Протокол 2 — это TCP.
6%
Протокол 1 — это UDP, Протокол 2 — это IP.
На какие курсы можно записаться со скидкой на этой неделе 👇
Пакет курсов «Креативный» за 15 610₽ или в рассрочку за 1300₽.
Пакет навыков, которые позволят разработчикам эффективно решать типовые задачи, связанные с дизайном.
Включает 3 курса:
- Дизайн для фронтендеров
- Дизайн-системы
- Мастер анимаций: CSS- и JS-анимации
🔗 Начать обучение
Курс «Паттерны проектирования» за 9 900₽ или в рассрочку за 1150₽.
Паттерны помогут вам быстрее и эффективнее проектировать, писать и заниматься отладкой программного кода. А значит, и возможности масштабирования ваших алгоритмов значительно повысятся.
🔗 Начать обучение
Скидки будут действовать до 9 июля.
Пакет курсов «Креативный» за 15 610₽ или в рассрочку за 1300₽.
Пакет навыков, которые позволят разработчикам эффективно решать типовые задачи, связанные с дизайном.
Включает 3 курса:
- Дизайн для фронтендеров
- Дизайн-системы
- Мастер анимаций: CSS- и JS-анимации
🔗 Начать обучение
Курс «Паттерны проектирования» за 9 900₽ или в рассрочку за 1150₽.
Паттерны помогут вам быстрее и эффективнее проектировать, писать и заниматься отладкой программного кода. А значит, и возможности масштабирования ваших алгоритмов значительно повысятся.
🔗 Начать обучение
Скидки будут действовать до 9 июля.
⚙️ Точность регулярных выражений.
Существуют такие текстовые конструкции, для которых нельзя однозначно составить правило, например, теги или электронная почта.
Стоит ли проводить оптимизацию выражения, чтобы оно совпадало точно? И насколько точно?
Это сложный вопрос, который каждый для себя должен решить сам. С одной стороны, на кону будут скорость и расход памяти, с другой, точность.
Разберём на примере адреса электронной почты: какова может быть цена точности.
Давайте проговорим правило:
^[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-]+\\.[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();
};
Вам может показаться, что здесь нет регулярных выражений, и это правда. В коде явно нет. Но вы запрашиваете валидацию через поле формы, которое по умолчанию обращается к регулярному выражению в самом браузере.
Точность — не всегда хорошо. Если вы не валидируете счёт, на который вам поступает зарплата, то смело можно писать более простые правила. Перфекционизм — всегда затратно.
👍4🔥1
💼 Как стать мидлом.
Всё самые важные ссылки, докуметация, тренажёры и подборки книг — https://tml.io/d0f849
Всё самые важные ссылки, докуметация, тренажёры и подборки книг — https://tml.io/d0f849
🔥6
Какие новые примитивные типы добавляет TypeScript?
Anonymous Poll
7%
Тип undefined
6%
Тип null
56%
Тип never
56%
Тип unknown
56%
Тип void
64%
Тип any
👍1
Правильный ответ 🤖
Тип never — с его помощью можно указать, что вызов функции никогда не завершится (из-за бесконечного цикла или ошибки).
Тип unknown — это безопасный аналог типа any. Прежде чем производить какие-либо операции со значением типа unknown, необходимо выполнить дополнительные проверки.
Тип void — с его помощью можно указать, что функция в результате вызова ничего не возвращает.
Тип any — аннотация этого типа заставляет компилятор TypeScript «отойти в сторону» и отключить все проверки.
Тип unknown — это безопасный аналог типа any. Прежде чем производить какие-либо операции со значением типа unknown, необходимо выполнить дополнительные проверки.
Тип void — с его помощью можно указать, что функция в результате вызова ничего не возвращает.
Тип any — аннотация этого типа заставляет компилятор TypeScript «отойти в сторону» и отключить все проверки.
👍7
На какие курсы можно записаться со скидкой 30% на этой неделе 👇
Пакет курсов «Золотой».
Набор популярных и востребованных курсов для роста до разработчика мидл-уровня.
Включает 3 курса:
- Алгоритмы и структуры данных
- TypeScript
- Мастер анимаций: CSS- и JS-анимации
🔗 Начать обучение
Курс «Git и GitHub».
Для разработчиков, которые хотят научиться работать с самой распространённой системой управления версиями — Git.
🔗 Начать обучение
Скидки будут действовать до 23 июля.
Пакет курсов «Золотой».
Набор популярных и востребованных курсов для роста до разработчика мидл-уровня.
Включает 3 курса:
- Алгоритмы и структуры данных
- TypeScript
- Мастер анимаций: CSS- и JS-анимации
🔗 Начать обучение
Курс «Git и GitHub».
Для разработчиков, которые хотят научиться работать с самой распространённой системой управления версиями — Git.
🔗 Начать обучение
Скидки будут действовать до 23 июля.
⚙️ С чего начать делать анимацию.
Давайте рассмотрим порядок действий для создания простой анимации при взаимодействии пользователя с элементами — https://tml.io/d15bb9
Давайте рассмотрим порядок действий для создания простой анимации при взаимодействии пользователя с элементами — https://tml.io/d15bb9
Telegraph
С чего начать делать анимацию
Давайте рассмотрим порядок действий для создания простой анимации при взаимодействии пользователя с элементами. Шаг 1. Найти все элементы для анимации Сначала найдём все HTML-элементы, внешний вид которых будет меняться при взаимодействии с пользователем —…
На какие курсы можно записаться со скидкой 30% на этой неделе 👇
Пакет курсов «Золотой».
Набор популярных и востребованных курсов для роста до разработчика мидл-уровня.
Включает 3 курса:
- Алгоритмы и структуры данных
- TypeScript
- Мастер анимаций: CSS- и JS-анимации
🔗 Начать обучение
Курс «Git и GitHub».
Для разработчиков, которые хотят научиться работать с самой распространённой системой управления версиями — Git.
🔗 Начать обучение
Скидки будут действовать до 23 июля.
Пакет курсов «Золотой».
Набор популярных и востребованных курсов для роста до разработчика мидл-уровня.
Включает 3 курса:
- Алгоритмы и структуры данных
- TypeScript
- Мастер анимаций: CSS- и JS-анимации
🔗 Начать обучение
Курс «Git и GitHub».
Для разработчиков, которые хотят научиться работать с самой распространённой системой управления версиями — Git.
🔗 Начать обучение
Скидки будут действовать до 23 июля.
🗂️ Зачем нужны анимации в вебе и как их создавать.
Плавно, красиво, на чистом CSS — https://tml.io/0aa457
Плавно, красиво, на чистом CSS — https://tml.io/0aa457
Продолжаем рубрику #пятничнаяскидка, где рассказываем о самых выгодных предложениях для обучения. Все скидки действительны до 6 августа, так что не упустите момент 👇
📍Пакет курсов «Протоколы и сети» за12 900₽ 9030₽ или в рассрочку на 6 месяцев за 2150₽ 1550₽/месяц. Подойдёт всем, кто хочет познакомиться с протоколами передачи данных и защищать свой код от атак.
Пакет включает два курса:
- Протоколы и сети: основы;
- Протоколы и сети: веб-безопасность.
👉 Записаться на курс
📍Вёрстка React-компонентов за8900₽ 6230₽ или в рассрочку на 6 месяцев за 1480₽ 1030₽/месяц. На этом курсе вы научитесь с нуля собирать интерфейсы в экосистеме React, создавать интерактивные React-компоненты, а также освоите роутинг и Storybook.
👉 Записаться на курс
📍Пакет курсов «Протоколы и сети» за
Пакет включает два курса:
- Протоколы и сети: основы;
- Протоколы и сети: веб-безопасность.
👉 Записаться на курс
📍Вёрстка React-компонентов за
👉 Записаться на курс
👍1🔥1
⚙️ Тестируем вёрстку в 2023
Mozilla Firefox 115 стала последней версией поддерживающей Windows 7, 8, и 8.1, а также macOS 10.12, macOS 10.13 и macOS 10.14. С Google Chrome, начиная с версии 110, аналогичная история, и на поддержку старых систем в будущем рассчитывать не приходится. Но, с другой стороны, теперь можно почти не оглядываться на прошлые версии ОС и идти вперёд. В статье разберём, как и где лучше тестировать вёрстку, чтобы сайт хорошо выглядел и корректно работал.
👉 https://tml.io/layouttesting98
Mozilla Firefox 115 стала последней версией поддерживающей Windows 7, 8, и 8.1, а также macOS 10.12, macOS 10.13 и macOS 10.14. С Google Chrome, начиная с версии 110, аналогичная история, и на поддержку старых систем в будущем рассчитывать не приходится. Но, с другой стороны, теперь можно почти не оглядываться на прошлые версии ОС и идти вперёд. В статье разберём, как и где лучше тестировать вёрстку, чтобы сайт хорошо выглядел и корректно работал.
👉 https://tml.io/layouttesting98
👍2🔥1
🖌 Для чего фронтендерам разбираться в дизайн-системах
Дизайн-система — набор инструментов и правил, упрощающих проектирование на всех этапах: от идеи до реализации.
Умение выделять систему из дизайна и переносить её в код — полезный навык, который экономит ваше время на разработку и поддержку крупных продуктов. С его помощью можно улучшить качество кода и уменьшить количество ошибок на этапе тестирования.
В статье мы разберёмся, какие ещё преимущества дают дизайн-системы и как эти системы создавать.
👉 https://tml.io/designsystems108t
Дизайн-система — набор инструментов и правил, упрощающих проектирование на всех этапах: от идеи до реализации.
Умение выделять систему из дизайна и переносить её в код — полезный навык, который экономит ваше время на разработку и поддержку крупных продуктов. С его помощью можно улучшить качество кода и уменьшить количество ошибок на этапе тестирования.
В статье мы разберёмся, какие ещё преимущества дают дизайн-системы и как эти системы создавать.
👉 https://tml.io/designsystems108t
🔤 Как подключить и оптимизировать нестандартные шрифты
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. Но ведь бывает такое, что сторонний шрифт отказывается корректно работать? Можно поступить радикально — вообще не подключать сторонние и пользоваться стандартными. Но, согласитесь, это же скучно? Мы скучать не любим и подготовили для вас статью, которая всегда выручит при попытке подключить шрифты, которые вечно не грузятся.
👉 https://tml.io/fontsloading118
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. Но ведь бывает такое, что сторонний шрифт отказывается корректно работать? Можно поступить радикально — вообще не подключать сторонние и пользоваться стандартными. Но, согласитесь, это же скучно? Мы скучать не любим и подготовили для вас статью, которая всегда выручит при попытке подключить шрифты, которые вечно не грузятся.
👉 https://tml.io/fontsloading118
👍1