78 KiB

Raw Blame History Unescape Escape

Введение в языки программирования и современные инструменты разработчика

Привет, будущий разработчик! 👋 Могу я рассказать тебе кое-что, от чего у меня до сих пор мурашки по коже? Ты собираешься узнать, что программирование — это не просто работа с компьютерами, это настоящая суперсила, которая позволяет воплощать в жизнь самые смелые идеи!

Ты знаешь тот момент, когда пользуешься любимым приложением, и все работает идеально? Когда нажимаешь кнопку, и происходит что-то абсолютно волшебное, от чего ты думаешь: «Вау, как они ЭТО сделали?» Так вот, кто-то, такой же, как ты — возможно, сидя в любимой кофейне в 2 часа ночи с третьим эспрессо — написал код, который создал эту магию. И вот что тебя удивит: к концу этого урока ты не только поймешь, как они это сделали, но и сам захочешь попробовать!

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

Сегодня мы будем изучать невероятные инструменты, которые делают современную веб-разработку не просто возможной, но по-настоящему увлекательной. Я говорю о тех же редакторах, браузерах и рабочих процессах, которые разработчики Netflix, Spotify и твоей любимой студии приложений используют каждый день. И вот что заставит тебя пуститься в пляс от радости: большинство этих профессиональных инструментов, соответствующих отраслевым стандартам, абсолютно бесплатны!

Скетчноут от Tomomi Imura

Давайте узнаем, что вы уже знаете!

Прежде чем мы перейдем к интересному, мне любопытно — что вы уже знаете о мире программирования? И слушайте, если вы смотрите на эти вопросы и думаете: «Я вообще ничего об этом не знаю», — это не просто нормально, это идеально! Это значит, что вы находитесь в правильном месте. Подумайте об этом тесте как о разминке перед тренировкой — мы просто разогреваем ваши мозги!

Пройти предварительный тест перед уроком

Приключение, которое мы собираемся пережить вместе

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

Что такое программирование (и почему это самое крутое занятие!) — Мы узнаем, как код — это буквально невидимая магия, которая управляет всем вокруг вас, от будильника, который каким-то образом знает, что сегодня понедельник, до алгоритма, который идеально подбирает рекомендации на Netflix.
Языки программирования и их удивительные личности — Представьте, что вы пришли на вечеринку, где каждый человек обладает совершенно разными суперспособностями и подходами к решению задач. Именно так выглядит мир языков программирования, и вам понравится знакомиться с ними!
Основные строительные блоки, которые создают цифровую магию — Подумайте о них как о самом крутом наборе LEGO для творчества. Как только вы поймете, как эти элементы сочетаются друг с другом, вы осознаете, что можете создать буквально все, что только придет вам в голову.
Профессиональные инструменты, которые заставят вас почувствовать себя волшебником — Я не преувеличиваю — эти инструменты действительно заставят вас почувствовать себя обладателем суперсил, и самое лучшее? Это те же инструменты, которые используют профессионалы!

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

Вы можете пройти этот урок на Microsoft Learn!

Так что же такое программирование?

Хорошо, давайте разберемся с вопросом на миллион: что же такое программирование на самом деле?

Я расскажу вам историю, которая полностью изменила мое представление об этом. На прошлой неделе я пытался объяснить маме, как пользоваться новым пультом от нашего умного телевизора. Я поймал себя на том, что говорю что-то вроде: «Нажми красную кнопку, но не большую красную кнопку, а маленькую красную кнопку слева... нет, слева от тебя... хорошо, теперь держи ее две секунды, не одну, не три...» Знакомо? 😅

Это и есть программирование! Это искусство давать невероятно подробные, пошаговые инструкции чему-то очень мощному, но нуждающемуся в том, чтобы все было объяснено идеально. Только вместо объяснений маме (которая может спросить: «Какую красную кнопку?!»), вы объясняете компьютеру (который просто делает именно то, что вы сказали, даже если вы сказали не совсем то, что имели в виду).

Вот что меня поразило, когда я впервые узнал об этом: компьютеры на самом деле довольно просты в своей основе. Они буквально понимают только две вещи — 1 и 0, что по сути означает «да» и «нет» или «включено» и «выключено». И все! Но вот где начинается магия — нам не нужно говорить на языке 1 и 0, как будто мы в Матрице. Именно здесь на помощь приходят языки программирования. Они как лучшие переводчики в мире, которые берут ваши совершенно нормальные человеческие мысли и переводят их на язык компьютера.

И вот что до сих пор вызывает у меня мурашки каждое утро, когда я просыпаюсь: буквально все цифровое в вашей жизни началось с кого-то, такого же, как вы, вероятно, сидящего в пижаме с чашкой кофе, набирающего код на своем ноутбуке. Тот фильтр в Instagram, который делает вас безупречным? Кто-то закодировал его. Рекомендация, которая привела вас к вашей новой любимой песне? Разработчик создал этот алгоритм. Приложение, которое помогает вам делить счет за ужин с друзьями? Да, кто-то подумал: «Это неудобно, я могу это исправить», и затем... они сделали это!

Когда вы учитесь программировать, вы не просто осваиваете новый навык — вы становитесь частью этого невероятного сообщества решателей проблем, которые проводят свои дни, думая: «А что, если я смогу создать что-то, что сделает чей-то день немного лучше?» Честно, есть ли что-то круче этого?

✅ Охота за интересными фактами: Вот что действительно круто — найдите время, чтобы узнать, кто был первым программистом в мире? Я дам вам подсказку: это может быть не тот, кого вы ожидаете! История этого человека абсолютно увлекательна и показывает, что программирование всегда было связано с творческим решением задач и нестандартным мышлением.

Языки программирования — как разные вкусы магии

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

Языки программирования работают точно так же! Вы не будете использовать один и тот же язык для создания веселой мобильной игры и для обработки огромных объемов климатических данных, так же как вы не будете играть дэт-метал на занятии йогой (ну, на большинстве занятий йогой! 😄).

Но вот что меня поражает каждый раз, когда я думаю об этом: эти языки — как самый терпеливый и умный переводчик в мире, который сидит рядом с вами. Вы можете выражать свои идеи так, как это естественно для вашего человеческого мозга, а они берут на себя всю невероятно сложную работу по переводу этого на язык 1 и 0, который понимают компьютеры. Это как иметь друга, который идеально владеет и «человеческим творчеством», и «компьютерной логикой» — и он никогда не устает, не нуждается в перерывах на кофе и не осуждает вас за то, что вы задаете один и тот же вопрос дважды!

Язык	Лучше всего подходит для	Почему он популярен
JavaScript	Веб-разработка, пользовательские интерфейсы	Работает в браузерах и обеспечивает интерактивность веб-сайтов
Python	Анализ данных, автоматизация, ИИ	Легкий для изучения и чтения, мощные библиотеки
Java	Корпоративные приложения, Android-приложения	Независимость от платформы, надежность для крупных систем
C#	Приложения для Windows, разработка игр	Сильная поддержка экосистемы Microsoft
Go	Облачные сервисы, серверные системы	Быстрый, простой, создан для современных вычислений

Высокоуровневые и низкоуровневые языки

Окей, это была концепция, которая сломала мой мозг, когда я только начинал учиться, поэтому я поделюсь аналогией, которая наконец помогла мне понять это — и я очень надеюсь, что она поможет и вам!

Представьте, что вы приехали в страну, язык которой вы не знаете, и вам срочно нужно найти ближайший туалет (с этим сталкивались все, правда? 😅):

Низкоуровневое программирование — это как изучение местного диалекта настолько хорошо, что вы можете разговаривать с бабушкой, продающей фрукты на углу, используя культурные отсылки, местный сленг и внутренние шутки, которые понимают только те, кто вырос там. Очень впечатляюще и невероятно эффективно... если вы случайно владеете языком! Но довольно сложно, если вы просто пытаетесь найти туалет.
Высокоуровневое программирование — это как иметь того удивительного местного друга, который вас понимает. Вы можете сказать: «Мне действительно нужно найти туалет» на обычном английском, и он переведет это и даст вам понятные указания.

В терминах программирования:

Низкоуровневые языки (например, Assembly или C) позволяют вести невероятно детализированные разговоры с аппаратной частью компьютера, но для этого нужно думать как машина, что... ну, скажем так, требует значительного изменения мышления!
Высокоуровневые языки (например, JavaScript, Python или C#) позволяют вам думать как человек, пока они берут на себя всю машинную речь. Кроме того, у них есть невероятно дружелюбные сообщества, полные людей, которые помнят, каково это быть новичком, и искренне хотят помочь!

Угадайте, с каких языков я предложу вам начать? 😉 Высокоуровневые языки — это как тренировочные колеса, которые вы никогда не захотите снимать, потому что они делают весь процесс намного приятнее!

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

Хорошо, я собираюсь показать вам кое-что, что идеально демонстрирует, почему я влюбился в высокоуровневые языки, но сначала — мне нужно, чтобы вы кое-что пообещали. Когда вы увидите первый пример кода, не паникуйте! Он должен выглядеть пугающе. Именно это я хочу вам показать!

Мы посмотрим на одну и ту же задачу, написанную в двух совершенно разных стилях. Оба создают так называемую последовательность Фибоначчи — это красивый математический узор, где каждое число является суммой двух предыдущих: 0, 1, 1, 2, 3, 5, 8, 13... (Интересный факт: этот узор можно найти буквально везде в природе — спирали семян подсолнуха, узоры шишек, даже в том, как формируются галактики!)

Готовы увидеть разницу? Поехали!

Высокоуровневый язык (JavaScript) — дружелюбный для человека:

// Step 1: Basic Fibonacci setup
const fibonacciCount = 10;
let current = 0;
let next = 1;

console.log('Fibonacci sequence:');

Что делает этот код:

Объявляет константу для указания, сколько чисел Фибоначчи мы хотим сгенерировать
Инициализирует две переменные для отслеживания текущего и следующего чисел в последовательности
Устанавливает начальные значения (0 и 1), которые определяют узор Фибоначчи
Отображает заголовок для идентификации нашего вывода

// Step 2: Generate the sequence with a loop
for (let i = 0; i < fibonacciCount; i++) {
  console.log(`Position ${i + 1}: ${current}`);
  
  // Calculate next number in sequence
  const sum = current + next;
  current = next;
  next = sum;
}

Разбор происходящего:

Цикл через каждую позицию в нашей последовательности с помощью for
Отображение каждого числа с его позицией, используя форматирование шаблонных строк
Вычисление следующего числа Фибоначчи путем сложения текущего и следующего значений
Обновление переменных для перехода к следующей итерации

// Step 3: Modern functional approach
const generateFibonacci = (count) => {
  const sequence = [0, 1];
  
  for (let i = 2; i < count; i++) {
    sequence[i] = sequence[i - 1] + sequence[i - 2];
  }
  
  return sequence;
};

// Usage example
const fibSequence = generateFibonacci(10);
console.log(fibSequence);

В этом коде мы:

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

Низкоуровневый язык (ARM Assembly) — дружелюбный для компьютера:

 area ascen,code,readonly
 entry
 code32
 adr r0,thumb+1
 bx r0
 code16
thumb
 mov r0,#00
 sub r0,r0,#01
 mov r1,#01
 mov r4,#10
 ldr r2,=0x40000000
back add r0,r1
 str r0,[r2]
 add r2,#04
 mov r3,r0
 mov r0,r1
 mov r1,r3
 sub r4,#01
 cmp r4,#00
 bne back
 end

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

Основные различия, которые вы заметите:

Читаемость: JavaScript использует описательные названия, такие как fibonacciCount, в то время как Assembly использует загадочные метки, такие как r0, r1
Комментарии: Высокоуровневые языки поощряют пояснительные комментарии, которые делают код самодокументируемым
Структура: Логика JavaScript соответствует тому, как люди думают о задачах шаг за шагом
Поддержка: Обновление версии на JavaScript для различных требований — это просто и понятно ✅ О последовательности Фибоначчи: Этот невероятно красивый числовой ряд (где каждое число равно сумме двух предыдущих: 0, 1, 1, 2, 3, 5, 8...) встречается буквально везде в природе! Вы найдете его в спиралях подсолнухов, узорах на шишках, изгибах раковин наутилуса и даже в том, как растут ветви деревьев. Просто поражает, как математика и программирование помогают нам понять и воссоздать узоры, которые природа использует для создания красоты!

Основы, которые создают магию

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

Это похоже на изучение грамматики программирования. Помните, как в школе вы изучали существительные, глаголы и то, как составлять предложения? У программирования есть своя версия грамматики, и, честно говоря, она намного логичнее и проще, чем грамматика английского языка! 😄

Операторы: Пошаговые инструкции

Начнем с операторов – это как отдельные предложения в разговоре с вашим компьютером. Каждый оператор говорит компьютеру сделать что-то конкретное, как будто вы даете указания: "Поверни налево здесь", "Остановись на красный свет", "Припаркуйся на этом месте".

Мне нравится, что операторы обычно легко читаются. Смотрите:

// Basic statements that perform single actions
const userName = "Alex";                    
console.log("Hello, world!");              
const sum = 5 + 3;

Что делает этот код:

Объявляет постоянную переменную для хранения имени пользователя
Отображает приветственное сообщение в консоли
Вычисляет и сохраняет результат математической операции

// Statements that interact with web pages
document.title = "My Awesome Website";      
document.body.style.backgroundColor = "lightblue";

Пошагово, что происходит:

Изменяет заголовок веб-страницы, который отображается на вкладке браузера
Меняет цвет фона всего тела страницы

Переменные: Система памяти вашей программы

Хорошо, переменные – это, честно говоря, одна из моих самых любимых концепций для объяснения, потому что они так похожи на вещи, которые вы уже используете каждый день!

Подумайте о списке контактов в вашем телефоне. Вы не запоминаете номера всех – вместо этого вы сохраняете "Мама", "Лучший друг" или "Пиццерия, которая доставляет до 2 ночи" и позволяете телефону запомнить сами номера. Переменные работают точно так же! Они как подписанные контейнеры, где ваша программа может хранить информацию и извлекать ее позже, используя понятное имя.

Вот что действительно круто: переменные могут изменяться по мере выполнения вашей программы (отсюда и название "переменная" – хитро придумано, правда?). Точно так же, как вы можете обновить контакт пиццерии, когда найдете место получше, переменные могут обновляться, когда ваша программа узнает новую информацию или когда ситуация меняется!

Позвольте мне показать, как это просто и красиво:

// Step 1: Creating basic variables
const siteName = "Weather Dashboard";        
let currentWeather = "sunny";               
let temperature = 75;                       
let isRaining = false;

Понимание этих концепций:

Храните неизменные значения в переменных const (например, название сайта)
Используйте let для значений, которые могут изменяться в ходе программы
Присваивайте разные типы данных: строки (текст), числа и логические значения (истина/ложь)
Выбирайте описательные имена, которые объясняют, что содержит каждая переменная

// Step 2: Working with objects to group related data
const weatherData = {                       
  location: "San Francisco",
  humidity: 65,
  windSpeed: 12
};

В приведенном выше примере мы:

Создали объект для группировки связанных данных о погоде
Организовали несколько частей данных под одним именем переменной
Использовали пары ключ-значение для четкой маркировки каждой части информации

// Step 3: Using and updating variables
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
console.log(`Wind speed: ${weatherData.windSpeed} mph`);

// Updating changeable variables
currentWeather = "cloudy";                  
temperature = 68;

Давайте разберем каждую часть:

Отображение информации с использованием шаблонных литералов с синтаксисом ${}
Доступ к свойствам объекта с помощью точечной нотации (weatherData.windSpeed)
Обновление переменных, объявленных с помощью let, чтобы отразить изменения условий
Комбинирование нескольких переменных для создания значимых сообщений

// Step 4: Modern destructuring for cleaner code
const { location, humidity } = weatherData; 
console.log(`${location} humidity: ${humidity}%`);

Что нужно знать:

Извлечение конкретных свойств из объектов с помощью деструктурирующего присваивания
Создание новых переменных автоматически с теми же именами, что и ключи объекта
Упрощение кода, избегая повторяющейся точечной нотации

Управление потоком: Научите свою программу думать

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

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

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

Хотите увидеть, как это работает? Давайте покажу:

// Step 1: Basic conditional logic
const userAge = 17;

if (userAge >= 18) {
  console.log("You can vote!");
} else {
  const yearsToWait = 18 - userAge;
  console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
}

Что делает этот код:

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

// Step 2: Multiple conditions with logical operators
const userAge = 17;
const hasPermission = true;

if (userAge >= 18 && hasPermission) {
  console.log("Access granted: You can enter the venue.");
} else if (userAge >= 16) {
  console.log("You need parent permission to enter.");
} else {
  console.log("Sorry, you must be at least 16 years old.");
}

Разберем, что здесь происходит:

Комбинирует несколько условий с помощью оператора && (и)
Создает иерархию условий с помощью else if для нескольких сценариев
Обрабатывает все возможные случаи с помощью финального оператора else
Предоставляет четкую, действенную обратную связь для каждой ситуации

// Step 3: Concise conditional with ternary operator
const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
console.log(`Status: ${votingStatus}`);

Что нужно запомнить:

Используйте тернарный оператор (? :) для простых условий с двумя вариантами
Пишите условие сначала, затем ?, потом результат для true, затем :, потом результат для false
Применяйте этот шаблон, когда нужно присвоить значения на основе условий

// Step 4: Handling multiple specific cases
const dayOfWeek = "Tuesday";

switch (dayOfWeek) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("It's a weekday - time to work!");
    break;
  case "Saturday":
  case "Sunday":
    console.log("It's the weekend - time to relax!");
    break;
  default:
    console.log("Invalid day of the week");
}

Этот код выполняет следующее:

Сопоставляет значение переменной с несколькими конкретными случаями
Группирует похожие случаи вместе (будние дни против выходных)
Выполняет соответствующий блок кода, когда найдено совпадение
Включает случай default для обработки неожиданных значений
Использует операторы break, чтобы предотвратить выполнение кода в следующем случае

💡 Аналогия из реальной жизни: Представьте управление потоком как самый терпеливый GPS, который дает вам указания. Он может сказать: "Если на главной улице пробка, поезжайте по шоссе. Если на шоссе ремонт, попробуйте живописный маршрут". Программы используют точно такую же условную логику, чтобы разумно реагировать на разные ситуации и всегда предоставлять пользователям лучший возможный опыт.

✅ Что будет дальше: Мы будем с огромным удовольствием углубляться в эти концепции, продолжая наше невероятное путешествие вместе! Сейчас просто сосредоточьтесь на том, чтобы почувствовать волнение от всех удивительных возможностей, которые вас ждут впереди. Конкретные навыки и техники запомнятся естественным образом, когда мы будем практиковаться вместе – обещаю, это будет намного веселее, чем вы могли ожидать!

Инструменты для работы

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

Знаете, как у шеф-повара есть идеально сбалансированные ножи, которые ощущаются как продолжение его рук? Или как у музыканта есть та самая гитара, которая начинает "петь", как только он касается ее? Так вот, у разработчиков есть свои магические инструменты, и вот что вас абсолютно поразит – большинство из них совершенно бесплатны!

Я буквально подпрыгиваю на стуле, думая о том, чтобы поделиться этим с вами, потому что они полностью изменили то, как мы создаем программное обеспечение. Мы говорим о помощниках по кодированию на основе ИИ, которые могут помочь написать ваш код (я не шучу!), облачных средах, где вы можете создавать целые приложения буквально из любой точки мира с Wi-Fi, и инструментах отладки, настолько сложных, что они похожи на рентгеновское зрение для ваших программ.

И вот часть, которая до сих пор вызывает у меня мурашки: это не "инструменты для новичков", которые вы перерастете. Это те же самые профессиональные инструменты, которые разработчики в Google, Netflix и той инди-студии приложений, которую вы любите, используют прямо сейчас. Вы будете чувствовать себя настоящим профессионалом, используя их!

Редакторы кода и IDE: Ваши новые цифровые лучшие друзья

Давайте поговорим о редакторах кода – они действительно станут вашими новыми любимыми местами для работы! Представьте их как ваше личное кодовое убежище, где вы будете проводить большую часть времени, создавая и совершенствуя свои цифровые творения.

Но вот что абсолютно волшебно в современных редакторах: это не просто красивые текстовые редакторы. Это как если бы рядом с вами 24/7 сидел самый умный и поддерживающий наставник по программированию. Они исправляют ваши опечатки, прежде чем вы их заметите, предлагают улучшения, которые заставляют вас выглядеть гением, помогают понять, что делает каждый кусочек кода, и некоторые из них даже предсказывают, что вы собираетесь написать, и предлагают закончить ваши мысли!

Я помню, когда впервые открыл автодополнение – я буквально почувствовал, что живу в будущем. Вы начинаете что-то писать, и ваш редактор говорит: "Эй, вы, наверное, имели в виду эту функцию, которая делает именно то, что вам нужно?" Это как если бы у вас был телепатический друг-программист!

Что делает эти редакторы такими невероятными?

Современные редакторы кода предлагают впечатляющий набор функций, предназначенных для повышения вашей продуктивности:

Функция	Что она делает	Почему это помогает
Подсветка синтаксиса	Раскрашивает разные части вашего кода	Упрощает чтение кода и поиск ошибок
Автодополнение	Предлагает код во время набора	Ускоряет написание кода и уменьшает количество опечаток
Инструменты отладки	Помогают находить и исправлять ошибки	Экономят часы времени на устранение неполадок
Расширения	Добавляют специализированные функции	Настраивают редактор для любой технологии
Помощники на основе ИИ	Предлагают код и объяснения	Ускоряют обучение и продуктивность

🎥 Видео-ресурс: Хотите увидеть эти инструменты в действии? Посмотрите видео о инструментах для работы для подробного обзора.

Веб-браузеры: Ваш секретный лабораторный инструмент для разработки

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

Каждый раз, когда вы нажимаете правой кнопкой мыши на веб-странице и выбираете "Просмотреть элемент", вы открываете скрытый мир инструментов разработчика, которые на самом деле мощнее, чем некоторые дорогие программы, за которые я раньше платил сотни долларов. Это как обнаружить, что ваша обычная кухня скрывает профессиональную лабораторию шеф-повара за секретной панелью!

Когда мне впервые показали инструменты разработчика в браузере, я провел около трех часов, просто нажимая на все подряд и восклицая: "ПОДОЖДИТЕ, ОНО МОЖЕТ ДЕЛАТЬ И ЭТО?!" Вы можете буквально редактировать любой сайт в реальном времени, видеть, как быстро все загружается, тестировать, как ваш сайт выглядит на разных устройствах, и даже отлаживать JavaScript, как настоящий профессионал. Это просто невероятно!

Почему браузеры – ваш секретный инструмент:

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

Инструменты разработчика в браузерах (DevTools)

Современные браузеры включают в себя комплексные наборы инструментов для разработки:

Категория инструментов	Что делает	Пример использования
Инспектор элементов	Просмотр и редактирование HTML/CSS в реальном времени	Настройка стилей с мгновенным результатом
Консоль	Просмотр сообщений об ошибках и тестирование JavaScript	Отладка проблем и эксперименты с кодом
Монитор сети	Отслеживание загрузки ресурсов	Оптимизация производительности и времени загрузки
Проверка доступности	Тестирование инклюзивного дизайна	Убедитесь, что ваш сайт подходит для всех пользователей
Симулятор устройств	Просмотр на экранах разных размеров	Тестирование адаптивного дизайна без множества устройств

Инструменты командной строки: ваш путь к суперспособностям разработчика

Давайте будем честными: когда я впервые увидел командную строку – этот пугающий черный экран с мигающим текстом – я подумал: «Нет, точно нет! Это выглядит как что-то из фильма про хакеров 80-х, и я точно недостаточно умён для этого!» 😅

Но вот что я хотел бы знать тогда, и что я говорю вам сейчас: командная строка не страшная – это на самом деле как прямой разговор с вашим компьютером. Представьте, что это как разница между заказом еды через красивое приложение с картинками и меню (что, конечно, удобно) и походом в любимый местный ресторан, где шеф-повар знает, что вам нравится, и может приготовить что-то идеальное, просто услышав: «Удивите меня чем-то потрясающим».

Командная строка – это место, где разработчики чувствуют себя настоящими волшебниками. Вы вводите несколько, казалось бы, магических слов (хорошо, это просто команды, но они ощущаются магическими!), нажимаете Enter, и БАЦ – вы создаёте целые структуры проектов, устанавливаете мощные инструменты со всего мира или размещаете своё приложение в интернете для миллионов людей. Как только вы почувствуете эту силу, это становится довольно увлекательным!

Почему командная строка станет вашим любимым инструментом:

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

# Step 1: Create and navigate to project directory
mkdir my-awesome-website
cd my-awesome-website

Что делает этот код:

Создаёт новую директорию под названием "my-awesome-website" для вашего проекта
Переходит в только что созданную директорию, чтобы начать работу

# Step 2: Initialize project with package.json
npm init -y

# Install modern development tools
npm install --save-dev vite prettier eslint
npm install --save-dev @eslint/js

Пошагово, что происходит:

Инициализирует новый проект Node.js с настройками по умолчанию с помощью npm init -y
Устанавливает Vite как современный инструмент сборки для быстрой разработки и сборки для продакшена
Добавляет Prettier для автоматического форматирования кода и ESLint для проверки качества кода
Использует флаг --save-dev, чтобы отметить их как зависимости только для разработки

# Step 3: Create project structure and files
mkdir src assets
echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello World</h1></body></html>' > index.html

# Start development server
npx vite

В приведённом выше коде мы:

Организовали наш проект, создав отдельные папки для исходного кода и ресурсов
Сгенерировали базовый HTML-файл с правильной структурой документа
Запустили сервер разработки Vite для живой перезагрузки и горячей замены модулей

Основные инструменты командной строки для веб-разработки

Инструмент	Назначение	Зачем он нужен
Git	Контроль версий	Отслеживание изменений, совместная работа, резервное копирование
Node.js & npm	Среда выполнения JavaScript и управление пакетами	Запуск JavaScript вне браузеров, установка современных инструментов разработки
Vite	Инструмент сборки и сервер разработки	Молниеносная разработка с горячей заменой модулей
ESLint	Качество кода	Автоматический поиск и исправление проблем в вашем JavaScript
Prettier	Форматирование кода	Поддержание кода в consistently formatted и читаемом виде

Платформенно-специфические варианты

Windows:

Windows Terminal - Современный, функционально богатый терминал
PowerShell 💻 - Мощная среда для скриптов
Command Prompt 💻 - Традиционная командная строка Windows

macOS:

Terminal 💻 - Встроенное приложение терминала
iTerm2 - Улучшенный терминал с расширенными функциями

Linux:

Bash 💻 - Стандартная оболочка Linux
KDE Konsole - Продвинутый эмулятор терминала

💻 = Предустановлено в операционной системе

🎯 Путь обучения: Начните с базовых команд, таких как cd (смена директории), ls или dir (список файлов) и mkdir (создание папки). Практикуйтесь с командами современного рабочего процесса, такими как npm install, git status и code . (открывает текущую директорию в VS Code). По мере того, как вы будете чувствовать себя более уверенно, вы естественным образом освоите более сложные команды и техники автоматизации.

Документация: ваш всегда доступный наставник

Позвольте мне поделиться небольшим секретом, который заставит вас почувствовать себя намного лучше в роли новичка: даже самые опытные разработчики проводят огромное количество времени, читая документацию. И это не потому, что они не знают, что делают – это на самом деле признак мудрости!

Думайте о документации как о доступе к самым терпеливым и знающим учителям в мире, которые доступны 24/7. Застряли на проблеме в 2 часа ночи? Документация всегда рядом с теплым виртуальным объятием и точным ответом, который вам нужен. Хотите узнать о какой-то крутой новой функции, о которой все говорят? Документация поможет вам с пошаговыми примерами. Пытаетесь понять, почему что-то работает именно так? Угадайте, что – документация готова объяснить это так, чтобы вы наконец-то поняли!

Вот что полностью изменило мой взгляд: мир веб-разработки движется невероятно быстро, и никто (я имею в виду абсолютно никто!) не держит всё в памяти. Я видел, как опытные разработчики с более чем 15-летним стажем искали базовый синтаксис, и знаете что? Это не стыдно – это умно! Дело не в идеальной памяти, а в умении быстро находить надёжные ответы и понимать, как их применять.

Вот где происходит настоящая магия:

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

Основные ресурсы документации

Mozilla Developer Network (MDN)

Золотой стандарт документации по веб-технологиям
Полные руководства по HTML, CSS и JavaScript
Включает информацию о совместимости браузеров
Содержит практические примеры и интерактивные демонстрации

Web.dev (от Google)

Лучшие практики современной веб-разработки
Руководства по оптимизации производительности
Принципы доступности и инклюзивного дизайна
Кейсы из реальных проектов

Microsoft Developer Documentation

Ресурсы для разработки под браузер Edge
Руководства по прогрессивным веб-приложениям
Инсайты по кроссплатформенной разработке

Frontend Masters Learning Paths

Структурированные учебные программы
Видеокурсы от экспертов индустрии
Практические упражнения по кодированию

📚 Стратегия изучения: Не пытайтесь запомнить документацию – вместо этого научитесь эффективно её использовать. Закладками отмечайте часто используемые ссылки и практикуйтесь в использовании функций поиска для быстрого нахождения нужной информации.

✅ Пища для размышлений: Вот что интересно – как вы думаете, чем инструменты для создания сайтов (разработка) отличаются от инструментов для проектирования их внешнего вида (дизайн)? Это как разница между архитектором, который проектирует красивый дом, и подрядчиком, который его строит. Оба важны, но им нужны разные наборы инструментов! Такое мышление действительно поможет вам увидеть общую картину того, как создаются сайты.

Вызов GitHub Copilot Agent 🚀

Используйте режим Agent, чтобы выполнить следующий вызов:

Описание: Исследуйте функции современного редактора кода или IDE и покажите, как он может улучшить ваш рабочий процесс как веб-разработчика.

Задание: Выберите редактор кода или IDE (например, Visual Studio Code, WebStorm или облачный IDE). Перечислите три функции или расширения, которые помогают вам писать, отлаживать или поддерживать код более эффективно. Для каждого из них кратко объясните, как оно улучшает ваш рабочий процесс.

🚀 Вызов

Ну что, детектив, готов к первому делу?

Теперь, когда у вас есть эта потрясающая база, у меня есть для вас задание, которое поможет вам увидеть, насколько разнообразен и увлекателен мир программирования. И послушайте – это пока не про написание кода, так что не переживайте! Представьте, что вы детектив, исследующий языки программирования, на своём первом захватывающем деле!

Ваша миссия, если вы решите её принять:

Станьте исследователем языков: Выберите три языка программирования из совершенно разных областей – возможно, один для создания сайтов, другой для разработки мобильных приложений и третий для анализа данных учёными. Найдите примеры выполнения одной и той же простой задачи на каждом языке. Обещаю, вы будете поражены, насколько они могут отличаться, выполняя одну и ту же задачу!
Раскройте их истории происхождения: Что делает каждый язык особенным? Вот интересный факт – каждый язык программирования был создан, потому что кто-то подумал: «Знаете, что? Должен быть лучший способ решить эту конкретную проблему». Можете ли вы выяснить, какие это были проблемы? Некоторые из этих историй действительно увлекательны!
Познакомьтесь с сообществами: Узнайте, насколько приветливы и увлечены сообщества каждого языка. У некоторых миллионы разработчиков делятся знаниями и помогают друг другу, другие меньше, но невероятно сплочённые и поддерживающие. Вам понравится видеть разные «личности» этих сообществ!
Прислушайтесь к своим ощущениям: Какой язык кажется вам наиболее доступным на данный момент? Не переживайте о том, чтобы сделать «идеальный» выбор – просто доверьтесь своим инстинктам! Здесь нет неправильных ответов, и вы всегда можете изучить другие позже.

Бонусное задание для детектива: Попробуйте узнать, какие крупные сайты или приложения созданы на каждом языке. Уверен, вы будете удивлены, узнав, что стоит за Instagram, Netflix или той мобильной игрой, от которой вы не можете оторваться!

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

Давайте отпразднуем ваши открытия!

Ничего себе, сколько невероятной информации вы сегодня усвоили! Я искренне рад видеть, сколько из этого удивительного путешествия осталось с вами. И помните – это не тест, где нужно всё сделать идеально. Это скорее праздник всего того, что вы узнали о захватывающем мире, в который вы собираетесь погрузиться!

Пройдите итоговый тест

Обзор и самостоятельное изучение

Не торопитесь, исследуйте и получайте удовольствие!

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

Углубитесь в то, что вас вдохновляет:

Практикуйтесь с языками программирования:

Посетите официальные сайты 2-3 языков, которые привлекли ваше внимание. У каждого из них есть свой характер и история!
Попробуйте онлайн-площадки для кодирования, такие как CodePen, JSFiddle или Replit. Не бойтесь экспериментировать – вы ничего не сломаете!
Узнайте, как появился ваш любимый язык. Серьёзно, некоторые из этих историй увлекательны и помогут вам понять, почему языки работают именно так.

Освойте новые инструменты:

Скачайте Visual Studio Code, если ещё не сделали этого – он бесплатный, и вам точно понравится!
Потратьте несколько минут на изучение рынка расширений. Это как магазин приложений для вашего редактора кода!
Откройте инструменты разработчика в вашем браузере и просто изучите их. Не переживайте, если что-то непонятно – просто привыкните к тому, что там есть.

Присоединяйтесь к сообществу:

Подпишитесь на сообщества разработчиков на Dev.to, Stack Overflow или GitHub. Сообщество программистов невероятно приветливо к новичкам!
Посмотрите видео для начинающих по программированию на YouTube. Там так много замечательных авторов, которые помнят, каково это — начинать с нуля.
Подумайте о том, чтобы присоединиться к местным встречам или онлайн-сообществам. Поверьте, разработчики обожают помогать новичкам!

🎯 Слушайте, вот что я хочу, чтобы вы запомнили: От вас не ожидают, что вы станете мастером программирования за одну ночь! Сейчас вы просто знакомитесь с этим удивительным новым миром, частью которого вы скоро станете. Не торопитесь, наслаждайтесь процессом и помните — каждый разработчик, которым вы восхищаетесь, когда-то сидел точно на вашем месте, испытывая волнение и, возможно, немного растерянность. Это абсолютно нормально, и это значит, что вы на правильном пути!

Задание

Чтение документации

💡 Небольшой намек для вашего задания: Мне бы очень хотелось, чтобы вы исследовали некоторые инструменты, которые мы еще не обсуждали! Пропустите редакторы, браузеры и инструменты командной строки, о которых мы уже говорили — существует целая невероятная вселенная удивительных инструментов для разработки, которые только и ждут, чтобы их открыли. Ищите те, которые активно поддерживаются и имеют живые, дружелюбные сообщества (у таких обычно лучшие учебные материалы и самые отзывчивые люди, которые помогут вам, когда вы неизбежно столкнетесь с трудностями и вам понадобится дружеская поддержка).

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.

78 KiB

Raw Blame History Unescape Escape

Введение в языки программирования и современные инструменты разработчика

Давайте узнаем, что вы уже знаете!

Приключение, которое мы собираемся пережить вместе

Так что же такое программирование?

Языки программирования — как разные вкусы магии

Популярные языки программирования и их применение

Высокоуровневые и низкоуровневые языки

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

Основы, которые создают магию

Операторы: Пошаговые инструкции

Переменные: Система памяти вашей программы

Управление потоком: Научите свою программу думать

Инструменты для работы

Редакторы кода и IDE: Ваши новые цифровые лучшие друзья

Рекомендуемые редакторы для веб-разработки

Веб-браузеры: Ваш секретный лабораторный инструмент для разработки

Инструменты разработчика в браузерах (DevTools)

Рекомендуемые браузеры для разработки

Инструменты командной строки: ваш путь к суперспособностям разработчика

Основные инструменты командной строки для веб-разработки

Платформенно-специфические варианты

Документация: ваш всегда доступный наставник

Основные ресурсы документации

Вызов GitHub Copilot Agent 🚀

🚀 Вызов

Давайте отпразднуем ваши открытия!

Обзор и самостоятельное изучение

Задание

78 KiB Raw Blame History Unescape Escape

Введение в языки программирования и современные инструменты разработчика

Давайте узнаем, что вы уже знаете!

Приключение, которое мы собираемся пережить вместе

Так что же такое программирование?

Языки программирования — как разные вкусы магии

Популярные языки программирования и их применение

Высокоуровневые и низкоуровневые языки

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

Основы, которые создают магию

Операторы: Пошаговые инструкции

Переменные: Система памяти вашей программы

Управление потоком: Научите свою программу думать

Инструменты для работы

Редакторы кода и IDE: Ваши новые цифровые лучшие друзья

Рекомендуемые редакторы для веб-разработки

Веб-браузеры: Ваш секретный лабораторный инструмент для разработки

Инструменты разработчика в браузерах (DevTools)

Рекомендуемые браузеры для разработки

Инструменты командной строки: ваш путь к суперспособностям разработчика

Основные инструменты командной строки для веб-разработки

Платформенно-специфические варианты

Документация: ваш всегда доступный наставник

Основные ресурсы документации

Вызов GitHub Copilot Agent 🚀

🚀 Вызов

Давайте отпразднуем ваши открытия!

Обзор и самостоятельное изучение

Задание

78 KiB

Raw Blame History Unescape Escape