🔩 Снова про алгоритмы, структуры данных и их визуализацию

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

И вижу по просторам интернета снова пошла волна перечислений ресурсов, где эти алгоритмы можно изучать визуально. И это просто офигенная вещь, которая помогает нашему воображению и памяти. 100% алгоритмы/СД лучше воспринимают именно визуально

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

Ну а дальше:

➡️ Начать стоит с Visualgo - это шикарный ресурс, где вы выбираете нужную вам тему, а он вам даст краткий бриф, наглядно покажет как это работает шаг за шагом, даст код для этого, а еще и проведет для вас квиз, если нажать кнопку "Training"

Очень залипательная штука для всех уровней, рекомендую

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

Особенно мне тут нравится "Comparison sorting" + есть раздел рекурсии

➡️ Еще советуют прочитать вот эту статью с наглядными примерами. Но оставляйте её на конец. Этот материал больше как дополнительный и развивающий. Прокачать он вам что-то особо не даст, но зато интересно

#полезности

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

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

Так что подписывайтесь ✔

🔩 Немного про безопасность кода (и вашего и вашего клиента)
Или как не получить по голове

В один прекрасный день я решал бюрократические дела на местном государственном сайте, отвлекся, и залез к ним в код. Ну и обнаружил там не только jquery/bootstrap 3й версии, но и парочку API ключей 🙂

Что это значит?

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

А значит можете что-то сломать, заддосить, исчерпать лимиты и еще кучу всего неприятного === нарушение безопасности

Поэтому никогда не оставляйте приватные API-ключи, пароли и логины в вашем коде. Даже если по ним пройдется webpack - то они все равно останутся доступны любому пользователю на сайте, если он откроет код. Так можно делать только на этапе обучения👨‍💻

А вот дальше есть более безопасные методы, которые хорошо описаны в этой небольшой статье

Если коротко:

⏺Использование .env файлов удобно, но тоже не безопасно. Код все равно после компиляции вывалится в браузер со всеми данными

⏺Использование backend-proxy сервера уже обезопасит чувствительные данные. Вам просто нужно создать мини-сервер, а в статье есть инструкция. Логика простая, вместо:

ваш клиент[ + API key] => API

Выполняется цепочка:

ваш клиент => proxy-server [ + API key] => API

Ключи лежат на сервере, просто запросами или просмотром кода в браузере их не достать

⏺Использование специальных сервисов. Больше возможностей, часто платно, но не нужно поднимать свой сервер

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

#полезности #инструменты

Принес вам сайт-шпаргалку, по которому сам очень давно быстро повторял сложность структур данных и базовых алгоритмов: https://www.bigocheatsheet.com/

Полезно для тех, кто готовится к интервью, студентам вузов и просто для общего развития

P.S. Хоть сайту и уже 11 лет, но база остается базой. Хорошо хоть тут не выходит куча обновлений каждый год 🤣

#полезности

Если я шучу, что вижу фронтовые и забавные баги на многих сайтах, то я не шучу. Это главная страница, если что

Смотреть на темный фон 👨‍💻

Будь как Даша 👨‍💻

А я напомню, что я организовал отдельную школу Campfire school, где можно прокачать свои навыки или освоить что-то новое. И теперь вам не нужно ждать скидок на Udemy, на стандартные курсы цена всегда зафиксирована на платформе

Главное, на что я опираюсь при работе со студентами:

📌 Адекватность: мы даже на самые тупые вопросы найдем ответы и все разберем. Все были новичками, без исключений. И я храню в своей памяти каково это

📌 Равенство: общение на равных, хоть с суперсиньором, хоть с новичком

📌 Реальная презентация разработки: как в проблемах, так и в тех же версиях инструментов в реальных проектах (привет Вадим и 10я нода в бигтехе 🤣)

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

Только я, парочка людей, с которыми уже работаю больше 1.5 года и желание адекватно помогать людям

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

P.S. Всем, кто присылал мне письма для переноса курсов, открыл их на новой платформе. Исключение - курс по верстке. Он откроется для вас уже обновленным

⚡️Открытая лекция про структуры данных в JS и нужно ли их вообще знать

В эту субботу 23го числа в 18-00 +2 часовой пояс, я буду проводить первую лекцию из небольшого цикла для ребят из нашей школы. Они подтвердили, что не против, чтобы она была доступна для всех

Так что всех, кто хочет с пользой провести 70-90 минут, приглашаю тоже присоединится. Как обычно, постараюсь рассказать так, чтобы было интересно и начинающим, и тем, кто уже давно в этом варится 🙂

Поговорим про следующее:

📌 Что вообще такое структуры данных, зачем они вам и почему они вас окружают
📌 Разберем стэк и очередь. Больше в практическую сторону, а не как в универе
📌 Посмотрим где они есть в JS и как правильно отвечать на собеседовании про них
📌 Сделаем вывод, насколько важно знать и уметь их реализовывать

Ссылка на стрим +еще раз закину сюда же, в канал в субботу

⚡️ Через пару минут начнем, залетайте

🔥 Запись будет

👨‍💻 Ресурс, который стоит занести в закладки каждому: https://10015.io/

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

Думаю, что самое полезное для нас - это:
CSS Clip Path Generator
Base64 Encoder/Decoder
SVG Blob Generator

Да и остальные все полезны в разных ситуациях. Идеальный пет-проект вышел, я считаю 👍

#полезности

Тут вышло несколько обновлений, которые вы могли не заметить!
У меня аж олдскулы свело 🤯

jQuery 4.0.0 Вышла в бету и можно потестировать ☕️

gulp 5.0.0 Тоже появился на свет 🥺

Сколько бы мы не шутили/говорили что все мертво, но 9.206.150 и 1.248.620 скачиваний в неделю говорят об обратном

Шутки про "jQuery.ajax has added support for binary data, including FormData" и тп в 2024м году можете шутить в комментариях

❓ Про версионирование инструментов

У новичков и не очень часто бывает вопрос: а что вообще значат вот эти цифры?

gulp 4.0.0 / uikit 3.19.2 / webpack 5.91.0

Кто придумывает эти цифры? Что они значат? Почему не просто 1, 2, 3 - 999 ?

Ответы на них можно найти в спецификациях по версионированию, например, в вот этой:
https://semver.org/

Советую ознакомится. Закрывает многие неочевидные вопросы

Новая версия ESLint и ключевое изменение названия файла конфига

Обратите внимание, что в новой версии файл теперь будет называться не .eslintrc, а eslint.config.js + понадобится нода не менее 18.18 версии

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

В курсах и в уроках, где мы устанавливаем ESLint тоже обновлю скоро информацию, чтобы не было расхождения по названию файлов + вопросы чуть изменили при первоначальной настройке 🤓

В начале и середине своего пути я часто смотрел и копировал чужие решения в коде. Так я прокачивал свои навыки и насмотренность.

Так что, если вы еще не смотрите чужие фичи, ошибки в коде, разные подходы — настойчиво советую это делать 🙂

⚠️ Для развития насмотренности раньше я рекомендовал один сайт, который уже умер. Но теперь есть специальный канал для этого: @code_ready

У вас будет все под рукой, с оформленным кодом, примерами и без занудства

➡️ Так что подписываемся

Что же писать в сообщениях к коммитам в Git?

За последние дни уже несколько раз отвечал на этот вопрос студентам, так что пора вынести его за пределы лички 👨‍💻

ГЛАВНОЕ, что вы должны запомнить: универсально правильного рецепта и жестких правил для всех случаев не существует.

КАК и ЧТО писать определяется в основном:

📌 Здравым смыслом и логикой
📌 Стайлгайдом вашей компании и/или проекта
📌 Пожеланиями вышестоящих разработиков/всей команды
📌 Тем, что вы сделали

Можно лишь почитать "best practice", которые в целом подготовят вас к правильным действиям. Например, вот очень хорошая статья, не без доли рекламы самого инструмента. Но все четко и по делу
И вот еще один правильный перечень нужных моментов: линк

Кто хочет закрыть этот пробел знаний - рекомендую потратить 5-7 минут на прочтение

P.S. конечно же, в каких-то набросках и своих проектах мы постоянно пишем фигню в сообщениях, но постарайтесь так не делать 😬

P.P.S. Там еще упоминаются размеры коммитов и как часто делать. Просто помните, что если это важное изменение, то коммит может содержать и изменение 4х символов. Вот пример

#полезности