🖥 Как я создал клон Pinterest с использованием Vue 3 и FastAPI

Автор делится историей создания собственного Pinterest-клона с нуля: полный real-time, современный стек и UX почти как у оригинала. Всё в одиночку за 4 месяца. Почти production, но pet-проект

🔗 Ссылка

CodeBase | Frontend | #article

⚙️ Что такое свойство opacity в CSS и зачем оно используется?

opacity — это CSS-свойство, которое задаёт степень прозрачности элемента. Значение opacity может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это полезно для создания визуальных эффектов, таких как затемнение или появление элементов.

➡️ Пример:

<div class="opaque-box">Прозрачный текст</div>

<style>
  .opaque-box {
    background-color: lightblue;
    opacity: 0.5; /* Устанавливаем 50% прозрачности */
    padding: 20px;
    text-align: center;
  }
</style>

🗣 В этом примере свойство opacity делает элемент .opaque-box полупрозрачным, что особенно полезно для наложений и визуального выделения интерфейсов.

CodeBase | Frontend | #CSS

👩‍💻 Proxy в JavaScript

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

🔍 Как это работает? Proxy создаёт «обёртку» вокруг объекта, которая перехватывает любые обращения к нему через специальные «ловушки» (traps). Это позволяет реализовывать различные сценарии: от валидации данных до логирования.

➡️ Пример:

let target = {};
let proxy = new Proxy(target, {
  set(obj, prop, value) {
    if (typeof value === 'number') {
      obj[prop] = value;
    } else {
      console.log(`Значение ${prop} должно быть числом!`);
    }
  }
});

proxy.age = 30; // работает
proxy.age = "не число"; // ошибка

Здесь мы создали прокси для объекта target, который разрешает устанавливать только числовые значения. В случае ошибки выводится сообщение.

⚙️ Примеры использования Proxy:

• Валидация данных в объектах.
• Логирование действий.
• Защита от случайного изменения данных.

CodeBase | Frontend | #js

🎬Практика применения C++ в играх и игровых движках

Пожалуй, игры известны тем, что они всегда на переднем краю как современного железа, так и программных возможностей. Как же обстоят дела с C++ в этой области?

На примере трех сравнительно легких для восприятия сюжетов посмотрим, как так складывается, что стиль имеет тенденцию к C99 с классами. Сюжеты: взаимодействие с другими языками (interop w/scripts), многоплатформенность (compiler zoo, determinism, float) и многопоточность (pthread into OOP vs DOD, ECS, etc.)

▶️ Плейлист YouTube ©

🔻Канал: CppRussiaConf
🔴#cpp

👩‍💻 Что такое тег <section>

Тег <section> создаёт независимый блок — например, блок новостей, блок с контактами или просто абзац с заголовком.

<section>
  <h1>Заголовок первого блока</h1>
  <p>Съешь ещё этих мягких французских булок, да выпей чаю.</p>
</section>

<section>
  <h1>Заголовок второго блока</h1>
  <p>Съешь ещё этих мягких французских булок, да выпей же чаю.</p>
</section>

• Тег <section> всегда закрывается при помощи парного тега </section>.
• Внутри <section> обязательно должен быть заголовок <h1>...<h6>.
• Контейнеры <section> можно вкладывать друг в друга, как матрёшку.

💡 Если вы хотите просто объединить и стилизовать второстепенные элементы, которые не так важны для поисковика, лучше использовать <div>.

Некоторые начинающие разработчики неверно понимают семантику этого тега и заменяют им большую часть дивов на странице. Так делать не стоит.

Тегом <section> стоит оборачивать большие логические блоки на странице.

🛠 По спецификации допустимо размещать в каждом <section> заголовок первого уровня (<h1>). Несмотря на это, не стоит размещать на странице больше одного заголовка первого уровня. Это важно для правильной индексации сайта поисковыми роботами.

CodeBase | Frontend | #html

🖥 Основы SQL за час - бесплатно и проще некуда

Содержание:
00:00 - подготавливаем базу
04:36 - выбираем данные SELECT
08:30 - указываем текущую базу данных
09:58 - чувствительность к регистру
12:14 - выбор определенных колонок
15:28 - фильтрация с помощью WHERE
20:59 - фильтрация с И и ИЛИ
26:38 - поиск строки по шаблону
29:18 - свой среди чужих
31:26 - NULL когда данные отсутствуют
34:27 - сортировка данных в SQL
38:37 - добавление записей с помощью SQL запроса
45:36 - обновление данных с помощью SQL
52:32 - удаляем данные из базы с помощью SQL

#SQL

✅Программирование ©