Технологии TypeScript и Redux не входят в программу буткемпа. Но преподаватели могут объяснить основы и показать, как это работает — если ты быстро справляешься с задачами и хочешь получить от обучения больше пользы 💪

⭐️ TypeScript — надстройка над JavaScript, которая добавляет статическую типизацию данных в твой код. Это помогает избежать ошибок при компиляции в классическом JS — ведь в нём динамическая типизация и бывает так, что в переменную для числового значения вдруг попадает строка, а результат получается некорректный. С TypeScript ты на этапе объявления переменной задаёшь ей нужный тип (например, только булевый или только числовой), никакие другие значения туда просто не попадут.

⭐️ Redux — небольшая библиотека JS, менеджер состояний для удобной работы с React, Angular и Vue. Обычно Redux нужен на средних и больших проектах, где много данных и их нужно передавать, хранить и обновлять. С помощью библиотеки ты добавляешь понятие состояния и можешь контролировать данные — например, избежать ошибки, при которой функция получает старую версию данных, хотя они уже обновились.

Как ты можешь познакомиться с этими технологиями у нас в буткемпе? 🤔

Среди учебных проектов есть базовый таск-трекер (планировщик задач, todo-лист, тудушник) который ты сперва пишешь на React и передаешь данные между компонентами обычными пропсами. Если получилось быстро — тебе показывают, как создать хранилище состояний в Redux и почему это удобнее. Библиотека избавляет тебя от от так называемого пропс-дриллинга, прокидывания кучи пропсов между компонентами.

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

Сегодня проверим, как ты понимаешь деструктуризацию в JavaScript 🤓

Какое значение ты получишь в консоли, если запустишь этот код? Если не знаешь — листай ниже, там будет объяснение задачки 😉

👌 Объяснение задачи:

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

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

Сначала мы задаём переменную str в виде строки “ABC”. Затем производим деструктуризацию str по знакам — как бы представляем нашу строку в виде массива. В этом массиве у нас всего две переменные, которые идут по порядку. Получается, что переменной x будет присвоено значение “A”. Переменная y получит значение “B”. А для “C” мы просто не задали переменную — поэтому значение в нашей деструктуризации не участвует.

Думаешь, что без технического бэкграунда не попасть в IT?

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

👉 Гость — Женя Некипелов, выпускник SaintCode Bootcamp. Раньше преподавал русский язык и литературу в школе, но не видел себя проверяющим тетрадки через 10 лет и решил перейти во фронтенд-разработку. Женя закончил буткемп в 2022 году, недавно устроился фулстек-разработчиком в международную компанию со сложными проектами и расскажет о своём пути в IT.

👉 Вебинар проводит Женя Гриценко, основатель SaintCode Bootcamp, карьерный консультант и руководитель студии веб-разработки KoJo. Он расскажет про ошибки новичков, востребованные технологии на рынке и трудности при поиске первой работы.

🕖 Начало в 19:00 (МСК), вторник, 25 апреля. Каждому участнику подарим дорожную карту для изучения фронтенда. Запишись — https://saintcode.ru/webinar_one?utm_source=telegram_nondirect&utm_medium=post&utm_campaign=organic_social&utm_content=webinar2504

Вёрстка бывает жестока к новичкам 😈

Знакомо? Вроде сделано правильно, а посмотришь в браузере — всё слетело и разъехалось в разные стороны 😭

👋 Вебинар стартует через 15 минут, подключайся в Zoom по этой ссылке — https://zoom.us/j/95699528230?pwd=cjZtSVBBendUUlhPV3RNWlhWU2IwUT09

Новая задачка на проверку базовых знаний JavaScript 😉

Взгляни на картинку и ответь: что мы увидим в консоли, если запустим такой код?

👌 Объяснение задачи:

Свойство innerHTML подразумевает только содержимое элемента, к которому мы обращаемся через переменную list и метод document.querySelector. Поэтому именно в этой задаче в консоли мы не увидим сам div с классом outer — только вложенный в него элемент.

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

Свойство outerHTML подразумевает элемент целиком — если мы применим его к нашей переменной list, то получим весь div с классом outer.

Наконец, innerText позволяет обратиться только к текстовому содержимому. Причём это будет любой текст на любом уровне вложенности внутри элемента. То есть в нашем случае можно применить innerText как к классу outer, так и к inner — результат будет одинаковый, в консоль вернется строка Example Text.

Как гуманитарию стать программистом? Никак 😂

Шутка, на самом деле всё возможно. Поговорили об этом на вебинаре 25 апреля с нашим выпускником Женей Некипеловым, который работал учителем русского языка, закончил буткемп и (не быстро, зато с умом) нашёл работу фулстек-разработчиком.

Смотри запись — https://www.youtube.com/watch?v=8LWnn1ksaqU

А мы расскажем, почему это крутая и полезная штука:

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

👋 Если ты новичок во фронтенд-разработке. Сможешь получить основы вёрстки HTML/CSS, разобраться в Figma на минимальном уровне и освоить базовые инструменты JavaScript.

👋 Если ты хочешь учиться в буткемпе. Ты познакомишься с одним из наших преподавателей, поймёшь как мы объясняем материал и даём обратную связь. Да, к нам можно зайти в гости или подключиться онлайн — но здесь ты погружаешься глубже и без особых затрат.

У нас дешевле, чем на рынке частных уроков по программированию. Например, на Авито менторы обычно просят от 500–1000 руб. за час. В SaintCode Bootcamp час занятий с преподавателем стоит всего 200 руб 😇

Сами занятия не привязаны к локации, решай как тебе удобнее — прийти в буткемп в Петербурге или подключиться онлайн через Discord 🤙

Хочешь попробовать? Оставь заявку на сайте, расскажем подробнее и выберем подходящее для тебя время — https://saintcode.ru/discount?utm_source=telegram_direct&utm_medium=post&utm_campaign=organic_social&utm_content=3for600

Новая задачка по JS — всего одна строка кода, но с подвохом 😉

Посмотри на этот код и укажи, что появится в консоли при выполнении. Ниже будет объяснение задачи под спойлером.

Объяснение задачи:

Почему конкатенация, а не сложение? Если любой из операндов в выражении оказывается объектом (а массив — это особый вид объекта), то интерпретатор преобразует его в элементарное значение. После этого проверяется тип значений — и если какой-то из аргументов окажется строкой, то другой тоже преобразовывается в строку, происходит конкатенация.

Почему массив преобразуется в строку? При преобразовании в элементарное значение к объектам применяется встроенный алгоритм no-preference, который в зависимости от класса будет использовать либо алгоритм prefer-string (для Date), либо prefer-number (для всех остальных). Prefer-number сперва попробует valueOf(), затем toString().

Но valueOf() не возвращает элементарное значение для объекта. Поэтому пытаясь преобразовать массив, мы получаем метод toString() как следующий по порядку. И массив с единственным элементом преобразуется в ту же строку, что и элемент. В нашем случае — пустой массив станет пустой строкой.

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

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

Важно, чтобы рядом был опытный наставник — у нас в буткемпе ты выполнишь командный проект с другими студентами, а преподаватель поможет разобраться во всех этих fetch, blame, merge, branch, checkout и diff 🤯