React JS

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

29 июля в 20:00 МСК на открытом вебинаре OTUS соберём трекер привычек на чистом JavaScript — без библиотек и фреймворков. За 90 минут пройдём полный цикл фронтенд-задачи: создадим разметку, опишем данные массивом объектов, отрисуем список привычек из кода, обработаем клики, добавим растущий прогресс-бар и анимацию конфетти.

Отдельно разберём localStorage: как сохранить прогресс после перезагрузки страницы и почему этот же подход используется в реальных продуктах. По ходу занятия будет видно, как связаны HTML, CSS и JavaScript.

Урок проходит в преддверии старта курса «JavaScript-разработчик. Базовый уровень».

👉 Регистрируйтесь: https://otus.pw/1nZr/?erid=2W5zFKA4ykV

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

❤2🖕2

2.37K views08:30

React JS

Совет по HTML 💡

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

👍9🔥5💋1

2.62K views09:45

React JS

Rust, который наконец становится понятным 🦀

Давно хочешь выучить Rust, но ownership, borrowing и lifetimes выглядят как отдельный вид боли?

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

Ты разберёшь:
Ownership → Borrowing → ошибки → коллекции → Generics → Traits → модули → тесты → сетевой код

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

🔥 Rust с нуля
🔥 5–6 часов в неделю
🔥 Практика после каждого урока
🔥 Подойдёт после Python, JavaScript, Java и других языков
🔥 Можно начать сразу

В конце у тебя будет понимание Rust, с которым уже можно писать быстрые backend-сервисы, сетевые приложения и системные утилиты, а не смотреть на borrow checker как на врага.

Пора добавить Rust в свой стек. Начинай курс и пиши первый код уже сегодня: https://stepik.org/a/294885/

👍4❤1🔥1

2.29K views10:26

React JS

Совет по JavaScript 💡

Используйте параметр rest вместо объекта arguments для приема переменного количества аргументов ✅

👍3❤2

2.44K views12:26

React JS

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

Передаёт файлы между двумя устройствами, используя только экран и камеру. Использует Fountain Codes (LT Codes).

Вместо разделения файла на последовательные фрагменты, каждый QR-код содержит математическую комбинацию (XOR) блоков файла.

Разработчик достиг скорости до 129 КБ/с. Всё работает в браузере с WebAssembly, без установки каких-либо приложений.

https://github.com/bashalarmistalt/decimen-optical-transfer

🔥16❤4👍3

5.82K views14:04

React JS

🎯 CSS @scope: способ ограничить область действия стилей

До сих пор в CSS не было простого и надёжного способа ограничить действие стилей внутри конкретного контейнера. Мы полагались на такие приёмы, как уникальные классы, переопределение селекторов или CSS-in-JS. Но теперь у нас есть @scope.

Что такое @scope?

@scope — это новая директива в CSS, которая позволяет задать область применения стилей. Она похожа на @media, но вместо условий она ограничивает, где стили будут применяться в DOM.


@scope (.card) {
  h2 {
    color: red;
  }
}

Этот код применит красный цвет только к h2, находящимся внутри .card. Всё просто.

Почему это важно?

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

Более сложный пример


@scope (.card) to (.card-footer) {
  a {
    text-decoration: none;
  }
}

Здесь мы ограничиваем действие от .card до .card-footer. Стили будут применяться только к a, находящимся между этими двумя элементами в иерархии.

Итого

@scope — это шаг вперёд для масштабируемого CSS. Больше не нужно изобретать велосипеды с уникальными классами и перегрузками. Пишите локализованные стили — просто и прозрачно.

https://12daysofweb.dev/2023/css-scope/

❤13🔥6👍4

2.06K views13:49

React JS

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️ Rainbow cloud trail — переливающееся облако, следующее за курсором. Реализована с помощью CSS и JavaScript

https://codepen.io/creativeocean/pen/LYMmbvZ

👍3

1.3K views09:04

React JS

25 августа встречаемся на Agentic Coding Meetup в Сбер.Среде и в онлайне⚡️

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

🔥 Поговорим о том, как agentic coding выглядит на практике: новые инженерные роли и модели команд, SDD и трансформация процессов, coding-агенты и инструменты, подходы к постановке задач и управлению контекстом, а также опыт внедрения AI в разработку больших технологических компаний.

⏳ Начало в 17:00, встреча очных гостей — в 16:00.

Количество очных мест ограничено — успейте зарегистрироваться!

👍3🖕1

1.25K views14:34

React JS

JavaScript. Что будет выведено в консоль?

Ответ

👍4🌚1

1.27K views16:35

React JS

Совет по JavaScript 💡

Одна строка кода, чтобы определить, есть ли в массиве дубликаты 🤩

👍6❤1🔥1

965 views13:55

React JS