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

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

Ещё почитать? @htmlacademy
Download Telegram
Что такое и зачем нужны алгоритмы

Когда дело доходит до крупных задач, грейдов и зарплат, знание алгоритмов выходит на первое место.

Что такое алгоритмы?

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

Востребованы ли алгоритмы на рынке фронтенд-разработки?

Мы провели исследование и проверили, как часто упоминаются алгоритмы в вакансиях. Результаты:

— Лишь 2% вакансий с опытом до года требуют знания алгоритмов и структур данных.
— В вакансиях для разработчиков с опытом до шести лет этот навык упоминается в 10% случаев.
— Почти каждая третья вакансия для фронтендеров с опытом более 6 лет содержит этот навык в требованиях.

Типовые задачи, в которых используют алгоритмы:

Сортировка данных

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

Поиск в массиве

Найти что-то в массиве — распространённая задача. Это может быть поиск целого объекта по его признаку. Например, когда нам нужно найти объект банковской карточки по id.

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

Бинарный поиск — поиск, который можно вызывать только на отсортированных массивах данных. Он работает по методу indexOf: принимает элемент, который нужно найти в массиве, и возвращает либо его позицию, либо -1, либо null.

Оптимизация кода

В своей работе мы так или иначе работаем с DOM-деревом. Подбор правильных алгоритмов для работы с деревьями помогает ускорить работу страницы при обработке больших фрагментов дерева.
Переобходить DOM-дерево можно разными способами. Самый простой — поиск в ширину. Он хорошо подходит для поиска, если искомый элемент лежит «сверху» и дерево довольно широкое.

Начать изучение алгоритмов можно с книг
:

— Адитья Бхаргава «Грокаем алгоритмы»,
— Дональда Кнута «Искусство программирования».
👍4
Завтра в 13:00 пройдёт лайв «Как вырасти до мидл фронтенд-разработчика: гайд для джунов».

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

Лайв проведут:
Серёжа Попов — руководитель направления «Курсы для практикующих разработчиков» в HTML Academy
Рома Абдульманов — технический директор FaceMunch

Записывайтесь и мы напомним о старте лайва https://clck.ru/32AtyX
Как защитить приложение от хакеров

Задача разработчика — предусмотреть «дыры» в безопасности и написать код, устойчивый к большинству атак. Давайте посмотрим, как фронтендеру обезопасить веб-приложение.

Виды атак:

MITM — группа атак с участием посредника, когда киберпреступник тайно вмешивается в обмен данными, чтобы получить или изменить информацию. К таким атакам относятся XSS-атаки и SQL-инъекции.

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

SQL-атака — атака на базу данных веб-приложения. При работе с базой разработчики используют SQL-запрос.

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

Как оценить безопасность приложения

Это можно сделать с помощью специальных сервисов и программ: OWASP ZAP, Arachni, Burp Suite. Они проверяют приложение на все основные атаки: XSS, SQL-инъекции, CSRF и загрузку вредоносных файлов.

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

Способов защиты много. В посте коротко разберём основные.

Защита сайта на CMS:

– Обновляйте CMS.
– Обновляйте темы и плагины.
– Используйте как можно меньше плагинов.
– Скройте данные входа в админку, изменив стандартный URL входа.
– Ограничьте количество попыток входа в админку.
– Выберите собственный префикс таблицы. Например, в WordPress по умолчанию задан префикс wp_, а вы можете изменить его на academy_ или keks_. Задавать префикс нужно при установке CMS — в готовом проекте его нельзя менять, иначе вы потеряете доступ к базе данных.

Защита со стороны клиента.

Защищайте и валидируйте поля ввода. Поля ввода очень уязвимы, ведь злоумышленники могут отправлять через них вредоносный код. Поэтому не разрешайте пользователям вводить символы, которые запускают JavaScript или PHP: слэш, угловые скобки и знак вопроса.

Подключите WAF — брандмауэры веб-приложений.

Они защищают сайты, фильтруя входящий поток пользователей, и анализируют HTTP-трафик, блокируя ботов и выявляя аномалии трафика.

Защищайте cookies.

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

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

В прямом эфире обсудили:

– Что вас ждёт в роли мидл веб-разработчика: какие зарплаты и бонусы от работодателей.
– Как понять, что вы полноценный джун и пора двигаться дальше.
–Какие навыки нужны мидл фронтенд-разработчикам.
–Как продолжить развиваться в сфере IT.

Пропустили лайв? Не страшно!

Вы можете посмотреть запись по ссылке – https://clck.ru/32G8p2
2
3 способа развить критическое мышление

Несколько советов, как работать с информацией без вреда себе 💜
Как мы помогаем стать мидлом

Рынок фронтенд-разработки каждый год пополняется: выпускниками курсов, университетов или фронтендерами-самоучками. Но продуктовым компаниям нужны мидл-разработчики.

Что делать джуну и какие навыки развивать, чтобы стать мидлом?

Рассказываем дальше.

Какие навыки нужны

Чтобы узнать какими навыками должен обладать джунор, мидл и сеньор фронтендер, мы провели исследование: изучили 2391 вакансию на Хабр Карьере, HH и Geekjob, опросили тимлидов. По результатам составили карту компетенций — схему, которая показывает, что и в каком порядке учить.

По этим навыкам мы подготовили курсы, с которых стоит начать:

TypeScript. Теория типов

TypeScript — технологию указывают в 59–63% вакансий. А по данным npmtrends.com, он в 1,5 раза популярнее React, Vue и Angular вместе взятых. Мы помогаем освоить фундамент языка — систему статического анализа типов данных. Учим применять на практике аннотацию типов и обобщённое программирование, управлять условными типами.

Регулярные выражения

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

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

Учим оценивать сложность алгоритмов, оптимизировать код и правильно выстраивать архитектуру проекта и отдельных модулей.

CSS-анимации

Для повышения грейда полезно освоить создание 3D-эффектов, параллакса и сложных анимаций при пользовательском взаимодействии.
Рассказываем, как создавать CSS-анимации, объясняем, как оптимизировать и отключать анимации на сайте.

Вёрстка React-компонентов

React встречается в 60% вакансий. Помогаем познакомиться с библиотекой и разобраться с её возможностями. После обучения вы сможете создать собственное приложение.

Как учить

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

Особенности обучения

Комьюнити разработчиков

Бывает так, что сидишь и гуглишь над задачей несколько дней, а потом обращаешься за помощью к коллеге тимлиду и за пару минут её решаешь. Поэтому мы создаём комьюнити из авторы курса, кураторов, студентов и выпускников. Студенты общаются с коллегами, получают ответы на вопросы или помощь с заданиями.

Поддержка

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

Асинхронный формат

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

С чего начать

Ещё одна проблема, с которой сталкиваются джуны: не знаю что учить и с чего начать. Даже если опираться на нашу карту компетенций, непросто понять, какие из 50 навыков осваивать в первую очередь, а с какими можно повременить.

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

Если вы хотите вырасти до мидла, узнать подробности или задать вопрос жмите на закреплённое сообщение☝🏼
Откуда появляется прокрастинация?

🟣 Усталость

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

🟣 Перфекционизм

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

🟣 Много работы

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

🟣 Нет мотивации

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

Причин откладывания дел может быть много. Важно честно ответить себе на вопрос «почему я сейчас не хочу это делать?».

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

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

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

Перейти к статье: https://tml.io/asdfg
Где-то в мире живёт фронтенд-разработчик Серёжа, работает на аутсорсе и пишет программы на заказ. Сделал продукт Серёжа, сдал и забыл о нём. И даже не представляет, какую пользу принёс людям.

Серёжа может сменить работу и устроиться в продуктовую компанию: Яндекс, Тинькофф, X5 Group. Тогда он сможет увидеть, как своей работой приносит пользу. Ещё в продуктовой компании платят больше денег. А строчка в резюме о работе в X5 Group поднимет Серёжу в глазах эйчаров, если он решит сменить работу.

Приходите на бесплатный лайв от HTML Aсademy. Андрей Смирнов из X5 Group, расскажет:

– Что нужно, чтобы работать в X5 Group. Берут ли джунов?
– Какие скиллы нужны фронтенд-разработчику, чтобы работать в продуктовой компании.
– Как подготовиться и пройти собеседование.
–Какие плюсы и минусы быть мидл фронтенд-разработчиком.

Лайв стартует 19 октября в 13.00.
Записаться по ссылке: https://tml.io/ytuiy
Новый выпуск подкаста Frontend Weekend

В гостях у Андрея Смирнова побывала Александра Прокшина — руководитель отдела разработки в ARTW.

Саша рассказала, как из бэкендера выросла в классного руководителя и как в этом ей помогла игра «Мафия». Сталкивалась ли она на своём пути с сексизмом. Какие навыки нужно развивать и причём здесь актёрское и ораторское мастерство.

Слушать на всех площадках: https://tml.io/xxsfg
🔥2👍1
TypeScript, алгоритмы и структуры данных, CSS-анимации — три курса, с которых начинается путь роста до мидла

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

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

На каждый курс действует скидка 30% до 23 октября включительно. А ещё мы собрали курсы в пакет «Золотой» — так учиться ещё выгоднее.

Записаться и начать программировать: https://tml.io/iiuru
👍1🔥1
Идеи для анимаций по ховеру: подборка с CodePen

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

Танец клавиш
автор: @Numb boi Nate

Анимация изображения
автор: @RomainJeff

Анимация кнопок
автор: @webcrafterscz

Touch ID анимация
автор: @ctcworksg

Анимация логотипа
автор: @Joseph Victory

А чтобы научиться делать также — приходите на курс «CSS-анимации», сейчас его можно пройти со скидкой 30%.

Ещё есть пакет «Золотой», в котором три курса: «CSS-анимации», «Алгоритмы и структуры данных» и TypeScript. На этот пакет тоже действует скидка. Вы сможете научиться делать не только анимации, но и полноценно встраивать их в любой пользовательский интерфейс, самостоятельно продумывать логику, чтобы всё работало как надо.

Забрать весь пакет или необходимый курс: https://tml.io/nlgfd
🔥2