Как стать мидлом
1.58K subscribers
516 photos
28 videos
283 links
Помогаем фронтенд-разработчикам прокачать навыки и получить повышение → https://htmlacademy.ru/frontend-engineering

Смотреть шоу «Фронтенд-инженерия» → https://youtube.com/playlist?list=PLQJNT2fdCJnjUCLyAnX8nkxLxWHNSuMDo

Ещё почитать? @htmlacademy
Download Telegram
Жадные алгоритмы — это подход к решению задач оптимизации, в котором мы делаем лучший выбор на каждом шаге, надеясь, что это приведёт к лучшему решению в итоге. Это простые для понимания алгоритмы, которые ещё и быстро работают.

Проблема в том, что иногда этот подход срабатывает, а иногда нет.

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

Читать статью.
👍2
На каких курсах можно начать обучение со скидкой на этой неделе:

Vue.js 3. Разработка клиентских приложений за 19 900 13 930 ₽ или в рассрочку 3 310 2 320 ₽/месяц.
Вы научитесь с нуля создавать и стилизовать проект на Vue.js 3 версии, добавлять анимации в веб-приложение и проводить тестирование.

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

Алгоритмы и структуры данных за 21 100 14 700 ₽ или в рассрочку 3 500 2 450₽/мес

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

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

«Мастхэв для фронтендера» за 29 400 20 580 ₽ или в рассрочку 2 450 1 710₽/мес
Набор курсов по навыкам для эффективной работы с данными и выстраивания архитектуры.

Включает 4 курса:
- TypeScript.
- Алгоритмы и структуры данных.
- Протоколы и сети.
- Регулярные выражения.

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

Всем хороших выходных 🌿

#пятничная_скидка
5
This media is not supported in your browser
VIEW IN TELEGRAM
В новой статье собрали вдохновляющие примеры анимации на сайте и разобрались, зачем разработчику вообще уметь их создавать.

____

Делать такие анимации мы учим на курсах «CSS и JS-анимации» и «SVG-анимации», вы можете приобрести оба курса в составе пакета «Мастер анимаций» за 18 300 ₽ или в рассрочку за 1 520 ₽/мес

Недавно на курсе «SVG-анимации» вышли обновления:
- В раздел 6 «Дополнительные возможности SVG» добавили блок про анимацию диаграмм.
- В раздел 2 «Анимирование SVG с помощью CSS» материалы про свойство transform-box.
🔥3👍2
На этой неделе вместе с карьерным консультантом Венерой Мещеровой @vmeshcherova предлагаем вам проанализировать вакансию и составить портерт идеального кандидата для неё.

Умение проводить такой анализ, поможет вам сделать ваше резюме заметнее и с большим успехом проходить отбор на должность.

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

#карьерные_советы
👍4
Как анимация портит ваш сайт.

Вообще-то, анимация на сайте — это хорошо. Даже в 2002 году на сайте башкирской федерации настольного тенниса уже была анимированная бегущая строка.

Но иногда анимация делает только хуже. Смотрите, когда это происходит — https://tml.io/3o2fb
👍4
На какие курсы можно записаться со скидкой на этой неделе:

Vue.js 3 за 19 900 13 930 ₽ или в рассрочку на 6 месяцев за 3 310 2 320 ₽/месяц до 14 мая.

Вы научитесь с нуля создавать и стилизовать проект на Vue.js 3 версии, добавлять анимации в веб-приложение и проводить тестирование.

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

Пакет «Мастер анимаций» 18 300 12 810 ₽ или в рассрочку на 12 месяцев за 1 520 1 060 ₽/месяц до 21 мая.

Пакет курсов учит создавать анимации с помощью CSS и JavaScript. Вы узнаете, как анимировать аккордеоны, слайдеры, кнопки и другие элементы сайта. Научитесь работать с векторной графикой, добавлять маски и фильтры, а также сможете создавать для них сложные эффекты. На курсах разбираются JS-библиотеки: KUTE.js, Anime.js, Snap.svg и GSAP.

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

— CSS и JS-анимации

— SVG-анимации

Начать обучение.
👍1
Из angular в react: Карина Королёва рассказывает о программе роста до мидла.

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

Читать статью.
Как сверстать доступный сайт.

Чтобы сделать сайт доступным, необходимо следовать ряду правил и критериев, установленных организацией W3C. Она создала стандарт доступности сайтов, его актуальная версия — WCAG 2.1.

В каждой категории есть ряд рекомендаций, которые и являются критериями доступности. Рассмотрим несколько важных критериев в статье.

Читать статью.
👍9
Задача по доступности интерфейса.

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

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

Правильный ответ опубликуем завтра.
👍6
Это второй пост из серии «Как откликаться на вакансии» от карьерного консультанта Венеры Мещеровой @vmeshcherova.

В прошлом посте мы выяснили, как по описанию вакансии понять, кого именно ищет компания.

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

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

Если вам понравилась статья, поставьте реакцию на пост, так мы поймём, что двигаемся в нужном направлении. А если хотите поднять свой грейд как можно быстрее, приходите на программу развития. Мы оценим ваши хард и софт-скилы, обучим недостающим навыкам и поможем получить повышение или найти новую работу в крупной IT-компании.
👍13🔥53🙏2
Что почитать для роста до мидла в блоге
Собрали статьи вышедшие за последнее время и отсортировали по технологиям и инструментам.

Vue 3

Почему разработчики выбирают vue.

Как работать с vue 3 router.

Быстро про ECMAScript 2022.


Анимации

Подборка микроанимаций для фронтенда с codepen в 2023.

Как сделать параллакс.

10 библиотек для css и js анимации.

Как сделать интерактивную svg-диаграмму.

Простой пример анимации контуров в svg.


Паттерны проектирования

Что такое и зачем нужны.

5 книг по паттернам проектирования, которые улучшат ваш код.

Протоколы и сети

Основные протоколы передачи данных.

Как работает протокол http.

Как защитить приложение от хакеров.

TypeScript

Зачем он нужен и почему так популярен.

В чём разница между интерфейсами и типами в typescript.

Типы данных в typescript: короткое руководство для начинающих.

Для чего использовать дженерики в typescript.

Webpack

Что это такое.

Сборка проекта на webpack. простой гайд для новичков.

Как с помощью webpack копировать статические файлы.
👍5
#пятничная_скидка 
На какие курсы можно записаться со скидкой на этой неделе:

Пакет «Мастер анимаций» 18 300 12 810 ₽ или в рассрочку на 12 месяцев за 1 520 1 060 ₽/месяц до 21 мая.

Пакет курсов учит создавать анимации с помощью CSS и JavaScript. Вы узнаете, как анимировать аккордеоны, слайдеры, кнопки и другие элементы сайта. Научитесь работать с векторной графикой, добавлять маски и фильтры, а также сможете создавать для них сложные эффекты. На курсах разбираются JS-библиотеки: KUTE.js, Anime.js, Snap.svg и GSAP.

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

— CSS и JS-анимации

— SVG-анимации

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

Курс «Доступность веб-интерфейсов» 13 973 9 781₽ или в рассрочку на 6 месяцев за 2 320 1 630₽/месяц

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

Начать обучение.
2
10 советов как обезопасить свои npm-пакеты от Open Web Application Security Project (OWASP).

🔐 Избегайте публикации секретов в реестре npm, используя .gitignore, .npmignore и свойство files в package.json.

🔐 Обеспечьте блокировку файлов, используя опцию --frozen-lockfile для Yarn или npm ci для npm.

🔐 Минимизируйте поверхности атак, игнорируя run-скрипты, проверяя сторонние модули и используя суффикс --ignore-scripts при установке пакетов.

🔐 Оцените состояние проекта npm, используя команды npm outdated и npm doctor для диагностики вашего окружения.

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

🔐 Используйте локальный прокси-сервер npm, например Verdaccio, для повышения безопасности, развертывания и производительности.

🔐 Ответственно раскрывайте уязвимости безопасности, следуя программе ответственного раскрытия информации.

🔐 Включите 2FA для обеспечения дополнительного уровня безопасности вашей учетной записи npm.

🔐 Защищайте токены npm, создавая токены только для чтения, ограничивая их определенными диапазонами IP-адресов и отзывая их при необходимости.

🔐 Изучайте соглашения об именовании модулей и атак typosquatting, чтобы избежать потенциальных рисков безопасности.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Это третий пост из серии «Как откликаться на вакансии» от карьерного консультанта Венеры Мещеровой @vmeshcherova.

В первой публикации выяснили, как по описанию вакансии понять, кого ищет компания.

Во второй учились составлять резюме на основе анализа.

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

Читать статью.
🔥2
Коды статусов HTTP и что с ними делать.
Фронтенд-разработчики работают с данными, которые путешествуют по сетям и передаются разыми протоколами. Понимать как всё это устроено необходимо, чтобы лучше решать типовые задачи. Одна из тем, которую стоит изучить — коды статусов HTTP.

Знать все не нужно, достаточно запомнить только самые распространённые статусы.

В статье вы найдёте памятку с наиболее распространёнными кодами статуса HTTP, с которыми сталкиваются разработчики.

Читать статью.
👍21🔥1
На какие курсы можно записаться со скидкой на этой неделе:

Курс «Доступность веб-интерфейсов» 13 973 9 781₽ или в рассрочку на 6 месяцев за 2 320 1 630₽/месяц до 28 мая.

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

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

Пакет курсов Computer science 29 000 20 300 ₽ или в рассрочку на 12 месяцев за 2 410 1 690 ₽/месяцев до 4 июня.

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

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

— Алгоритмы и структуры данных

— Паттерны проектирования

— Протоколы и сети: основы

— Протоколы и сети: веб-безопасность

Начать обучение.
👍1
Линейный поиск.
Найти что-то в массиве — довольно частая задача. Это может быть поиск целого объекта по его признаку: например, найти полный объект банковской карточки из списка сохранённых, зная только её id/номер. Или просто проверка на вхождение: к примеру, чтобы узнать, можно ли показывать определённый контент пользователю, можно проверять его права в системе в массиве разрешающих просмотр прав.

Самый простой и распространённый способ поиска в массивах и других коллекциях — линейный поиск.

Посмотрим, как он работает в статье.
Мы постоянно обновляем курсы для роста, чтобы навыки и знаниях в них оставались актуальными. Одно из последних обновлений затронуло курс по TypeScript.

Мы добавили примечания по TypeScript v5.0, обновления затронули 1,2 и 6 разделы.

Что изменилось 👇

В главе #1 «Введение. Для чего нужен TypeScript» добавили примечания про:
- Поддержку нескольких файлов конфигурации в extends.
- Оптимизацию сборки.
- Новые флаги.

В главе #2 «Эквивалентность типов» про:
- Новый модификатор const.
- Перечисления и особенности в TypeScript v5.0.

В главе #3 «Подведение итогов» про:
- Оптимизацию скорости, памяти и размера пакета.
- Ссылку на новые декораторы.

Узнать больше про курс и программу можно на сайте.
👍4
Проверка типа интерфейса в TypeScript.
Это одна из ключевых возможностей TypeScript. Она помогает убедиться, что объект или класс содержат необходимый набор свойств и методов, указанных в интерфейсе. Благодаря проверке типов вы можете писать более надёжный код, ведь часть ошибок будет найдена ещё на этапе компиляции.

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

Пакет курсов Computer science 29 000 20 300 ₽ или в рассрочку на 12 месяцев за 2 410 1 690 ₽/месяц до 4 июня.

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

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

— Алгоритмы и структуры данных

— Паттерны проектирования

— Протоколы и сети: основы

— Протоколы и сети: веб-безопасность

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

TypeScript: Теория типов 15 750 11 025₽ или в рассрочку на 6 месяцев за 2 620 1 830₽/месяц до 11 июня.

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

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