Большая подборка мини-проектов для начинающих веб-разрабов

Знаю, как вы любите подборки, поэтому несу для вас ещё одну. Нашёл её недавно и планирую использовать сам для практики.

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

#пет-проекты #подборка #веб

Как читать чужой код и понимать его: гайд, как не разбить экран компьютера

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

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

Область видимости в JavaScript

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

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

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

#javascript

Операционная система в 1 000 строк кода

Вы удивитесь, но разработка ОС довольно проста, если речь идёт о совсем базовых функциях. Например, Linux в версии 0.01 содержал всего 8 413 строк кода. Немного ведь, правда?

В этой серии статей вы сможете узнать, как создать свою простейшую ОС всего из 1 000 строк кода. Вы сможете реализовать:

— переключение контекста;
— страничное распределение памяти;
— режим пользователя;
— командную оболочку;
— драйвер дискового устройства;
— а также операции чтения/записи.

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

#clang #ос

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

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

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

#видео #советы #портфолио

Начинаем пересчёт фуллстэков. Ставьте ❤️, если узнали себя.

10 библиотек JavaScript, которые можно забыть в 2025 году

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

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

#javascript

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

Untools — это коллекция фреймворков и инструментов, которая поможет вам решать проблемы, принимать решения и прокачать системность.

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

Короче, кто думает, тот оценит лайком и заберёт в Избранное. Остальные просто пройдут мимо. 😏

#инструменты

Что такое асинхронность

Сперва немного терминологии. Асинхронность — это способность программы выполнять несколько задач одновременно, не дожидаясь завершения каждого шага. Это особенно полезно, когда программа выполняет долгие операции (например, загрузку данных из сети), но при этом не блокирует выполнение других задач.

Если код работает синхронно, каждая операция выполняется строго по порядку. Это может привести к задержкам:

import time

print("Загрузка данных...")
time.sleep(5)  # Программа засыпает на 5 секунд
print("Данные загружены!")

В примере выше всё остальное в программе «заморожено», пока выполняется sleep(). Если бы это была веб-страница, она зависла бы на несколько секунд.

Как работают async/await

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

Пример на Python с asyncio:

import asyncio

async def загрузка_данных():  
    print("Загрузка данных...")
    await asyncio.sleep(5)  # Не блокирует программу
    print("Данные загружены!")

async def main():
    await загрузка_данных()  

asyncio.run(main())

Давайте разберёмся, что здесь происходит:

1. async делает функцию асинхронной.
2. await говорит «подожди, но не блокируй остальную программу».
3. asyncio.run(main()) запускает асинхронную операцию.

Асинхронность делает код быстрее и эффективнее, особенно при работе с долго выполняющимися операциями!

#простымисловами #основы

Как работают очереди при обработки HTTP-запросов

Существует три основных типа очередей:

1. FIFO (First-In-First-Out): Обработка запросов в порядке их возникновения.
2. LIFO (Last-In-First-Out): Обработка последнего поступившего запроса в первую очередь.
3. Приоритетные очереди: Обработка запросов на основе их приоритета.

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

Переходим по ссылке и изучаем: https://encore.dev/blog/queueing

#http

Необычные приёмы отладки, которые браузер от вас скрывает

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

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

Бесплатный курс по фуллстэк-разработке

Автор этого курса потратил на его составление целый год и теперь вы можете пройти 143 урока и посмотреть 28 часов видео абсолютно бесплатно. Список технологий, которые вы сможете изучить на картинке.

Можно пройти на Stepik или посмотреть на YouTube.

#курс

Ну всё, ИИ научился придумывать шутки.

Как вам результат? Комики уже могут идти на завод или пока ещё рано?

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

Сегодня большинство продуктов создается на Python, C и C++, Java, JavaScript, PHP, но специалисты постоянно развивают другие инструменты. Мы решили собрать несколько малоизвестных и относительно новых языков, которые могут стать популярными в скором будущем.

Ознакомиться со всем списком можно в статье.

Писали на каком-нибудь из них?

С чего начать начинающему гейм-девелоперу

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

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

Так что переходите по ссылке и читайте.

#gamedev

Как правильно работать с DOM в JavaScript в 2025 году?

Работа с DOM (Document Object Model) — это основа веб-разработки. С каждым годом появляются новые, более эффективные способы манипуляции элементами страницы. Давайте разберём, как сегодня правильно работать с DOM в JavaScript, чтобы код был быстрым, удобным и безопасным.

1. Получение элементов

Вместо старых getElementById и getElementsByClassName сегодня лучше использовать querySelector и querySelectorAll. Они более универсальные и понятные.

const title = document.querySelector("#title"); // Получает 1 элемент (по id)
const buttons = document.querySelectorAll(".btn"); // Получает список всех кнопок с классом .btn

querySelector и querySelectorAll позволяют находить элементы так же, как в CSS (.класс, #id, input[type="text"] и т. д.). А также querySelectorAll возвращает не «живую» коллекцию, а обычный статичный список (NodeList), что логичнее при итерации.

2. Изменение текста и HTML

Всё зависит от того, что именно нужно поменять.

textContent — если надо изменить только текст (без HTML).

title.textContent = "Привет, мир!";

Не используйте innerHTML, если вставляете данные от пользователя — это дыра в безопасности (XSS-атаки). Если всё же используется innerHTML, убедитесь, что данные проверены.

title.innerHTML = "<strong>Важное сообщение!</strong>";

insertAdjacentHTML — отличная альтернатива innerHTML, если нужно добавить HTML в определённое место, не перезаписывая весь элемент.

title.insertAdjacentHTML("beforeend", "<span> 👋</span>");

3. Изменение классов

Правильный способ через classList, потому что `className`заменяет все классы сразу, из-за чего можно случайно удалить важные стили.

title.classList.add("highlight"); // Добавит класс
title.classList.remove("hidden"); // Удалит класс
title.classList.toggle("active"); // Переключит класс (если был — уберёт, если не было — добавит)

4. Изменение стилей

Не стоит вручную писать style.cssText, потому что он затирает всё, что было до этого. Используйте style для отдельных свойств.

title.style.color = "red";
title.style.fontSize = "24px";

Если нужно много стилей — лучше добавьте или измените класс. Так проще, централизованно и удобнее управлять дизайном.

title.classList.add("error"); // В CSS заранее определите .error { color: red; }

5. Создание и добавление новых элементов

Лучший способ — использовать createElement, а не innerHTML.

const newDiv = document.createElement("div"); // Создаём элемент <div>
newDiv.textContent = "Новый блок!";
newDiv.classList.add("box");  
document.body.appendChild(newDiv); // Добавляем в конец <body>

Если нужно добавлять элементы в разные места:

appendChild() — добавляет в конец родителя.

prepend() — добавляет в начало.

before() и after() — добавляют перед или после элемента.

title.after(newDiv); // Вставит newDiv сразу после title

// С помощью append() можно сразу добавлять текст и несколько элементов
const container = document.querySelector(".container");
container.append("Просто текст", document.createElement("span"));

6. Удаление элементов

Самый актуальный способ — remove().

newDiv.remove(); // Удалит элемент из DOM

Раньше приходилось делать так (и это было неудобно):

newDiv.parentNode.removeChild(newDiv); // Старый подход

7. Обработчики событий (современный подход)

Раньше часто использовали`onclick`, но перезаписывает предыдущие обработчики и плохо управляется. Лучше используйте addEventListener.

const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  alert("Кнопка нажата!");
});

Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.

#простымисловами #фронтенд

Программирование SDF-анимаций Рика и Морти

Для начала, что такое SDF-анимация. Простыми словами это математическое описание формы, которое можно изменять на лету. Вместо хранения кадров объект рисуется с нуля каждый раз, используя формулы. Такой подход применяется в шейдерах, процедурной анимации и так далее.

В этой статье вы увидите и сможет сами попробовать реализовать такую анимацию на примере Рика из «Рик и Морти».

#sdf

Своя игра после 15 лет в программировании

Автор этого видео пришёл в программирование, потому что хотел делать игры (чтобы «грабить корованы»), но в итоге стал разработчиком в другом направлении. И вот по прошествии 15 лет всё-таки дошёл до геймдева и создал свою первую игру.

Здесь не будет технических разборов или скриншотов из игры. Только личный опыт и ощущения от достигнутой цели. Ролик полезен всем, кто по какой-то причине шёл в IT за одним, а в итоге делает что-то другое. Он отлично демонстрирует, что мечту можно исполнить в любое время, было бы желание.

Посмотрите и, возможно, это вдохновит вас на конкретные действия.

#видео #gamedev