Перейти к содержанию
  • HTML, CSS, JavaScript, React, Vue, Angular, Svelte, UI фреймворки! Адаптивная верстка, оптимизация, Webpack/Vite, SSR. Помощь новичкам, экспертные кейсы, тренды (PWA, JAMstack).

    16 38
    16 Темы
    38 Сообщения
    kirilljsK
    Продолжаю делиться своими находками из React 19, про три важных нововведения: работу с ref, метаданными и обработку ошибок. Эти изменения существенно упрощают разработку и делают код более чистым. Упрощённая передача ref Раньше, чтобы передать ref в компонент, нужно было оборачивать его в forwardRef. Это создавало дополнительный уровень сложности и увеличивало объём кода. В React 19 всё стало гораздо проще — теперь можно передавать ref как обычное свойство! Пример: function CustomButton({ ref }) { return <button ref={ref}>Нажми меня</button>; } // Использование: <CustomButton ref={myButtonRef} />; Теперь не нужно думать о том, как правильно обернуть компонент или следить за тем, чтобы ref был корректно передан. Код стал понятнее и короче. Особенно это полезно для небольших компонентов, где использование forwardRef раньше казалось избыточным. Поддержка метаданных Ещё одно долгожданное изменение — возможность напрямую управлять метатегами (<title>, <meta>, <link>) прямо внутри компонентов. Раньше для этого приходилось использовать сторонние библиотеки, такие как react-helmet. Теперь всё это доступно “из коробки”. Пример: function BlogPost({ post }) { return ( <article> <h1>{post.title}</h1> <title>{post.title}</title> <meta name="description" content={post.summary} /> <meta name="keywords" content={post.tags.join(', ')} /> <p>{post.content}</p> </article> ); } Это особенно удобно для управления SEO-данными. Например, если вы пишете блог или новостной сайт, теперь можно легко динамически обновлять заголовки и метатеги на основе данных, полученных от сервера. Плюс ко всему, это работает быстрее, чем через сторонние решения. Оптимизированная обработка ошибок Ошибки — это неизбежная часть разработки, но React 19 сделал их обработку намного удобнее. Теперь сообщения об ошибках стали более информативными и компактными. Система отображает только одно четкое сообщение, что помогает быстрее находить и исправлять проблемы. Например, раньше при возникновении ошибки могла появиться целая куча текста с трейсами, которые были трудно интерпретировать. Сейчас же вы видите только самое важное: Error: Cannot read properties of undefined (reading 'map') Component: BlogPost Location: src/components/BlogPost.js:25 Это значительно ускоряет процесс отладки, особенно в больших проектах, где раньше приходилось тратить время на анализ огромных логов. Личные впечатления Поработав с этими нововведениями, могу сказать, что они действительно делают жизнь разработчика проще. Вот что мне особенно понравилось: Упрощённая работа с ref: больше никаких лишних обёрток, всё просто и интуитивно. Метаданные: теперь можно забыть про react-helmet и подобные библиотеки. Всё необходимое есть в React. Обработка ошибок: более чёткие сообщения помогают быстрее находить проблемы, а это экономит кучу времени. Если у вас есть опыт использования этих фич или вопросы по ним — пишите в комментариях! Интересно узнать, как эти изменения повлияли на ваши проекты.
  • Cоветы по работе с Node.js, Express, Nest.js, Fastify, Rust, Go, Spring. RESTful и GraphQL API, реализации микросервисной архитектуры, оптимизации с помощью кэширования, очередей и асинхронной обработки. Вопросы безопасности, аутентификация, авторизация, CI/CD, контейнеризация с Docker, облачные технологии AWS, Azure, GCP.

    9 19
    9 Темы
    19 Сообщения
    D
    Ссылка не работает
  • WordPress, Joomla, MODX, Headelss CMS, Payload CMS, NodeBB! Создание сайтов, темы, плагины, SEO-оптимизация, безопасность, интеграция с API. Решайте ошибки, делитесь лайфхаками, изучайте обновления. Помощь новичкам и экспертные кейсы.

    1 1
    1 Темы
    1 Сообщения
    kirilljsK
    Чтобы создать хлебные крошки в MODX, вам нужно создать отдельный чанк breadcrumbs и использовать pdoCrumbs из плагина pdoTools. Подробнее о параметрах pdoCrumbs можно почитать в документации - ссылка. Вот пример кода для ваших хлебных крошек: <div class="container breadcrumbContainer"> <nav aria-label="breadcrumb"> [[!pdoCrumbs? &showHome=`1` &tplWrapper=`@INLINE <ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb listStyleNone pt15 pb15">[[+output]]</ol>` &tpl=`@INLINE <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumbItem breadcrumbItemHome"><a itemprop="item" href="[[+link]]"><span itemprop="name">[[+menutitle]]</span></a><meta itemprop="position" content="[[+idx]]"></li>` &tplCurrent=`@INLINE <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumbItem breadcrumbItemActive br-new active"><span itemprop="name">[[+menutitle]]</span><meta itemprop="position" content="[[+idx]]"></li>` &tplHome=`@INLINE <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumbItem"><a itemprop="item" href="[[+link]]"><span itemprop="name">[[+menutitle]]</span></a><meta itemprop="position" content="[[+idx]]"></li>` ]] </nav> </div> В этом примере применяются schema.org для улучшения SEO. Вы можете использовать мои наработки и адаптировать их под свои сайты. [image: 1736855428315-%D1%81%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA-%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0-2025-01-14-%D0%B2-14.49.43-resized.png] Теперь вставьте созданный чанк в нужный шаблон, и вы готовы к работе. Я использовал эти хлебные крошки для шаблона страниц статей. Посмотреть, как выглядит готовый вариант, можно здесь. [image: 1736855452356-%D1%81%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA-%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0-2025-01-14-%D0%B2-14.49.56-resized.png]
  • iOS (Swift, Objective C), Android (Kotlin), Flutter, React Native! Создание UI/UX, тестирование, интеграция API, публикация в магазины. Решайте ошибки, делитесь лайфхаками, изучайте тренды (AR, IoT). Помощь новичкам и экспертные кейсы.

    0 0
    0 Темы
    0 Сообщения
    Нет новых сообщений
  • 2D/3D, движки (Unity, Unreal, Godot), геймдизайн, анимация! Создавайте проекты под PC, мобильные, консоли. Решайте ошибки, делитесь лайфхаками, изучайте тренды (VR, мультиплеер). Помощь новичкам и экспертные кейсы

    0 0
    0 Темы
    0 Сообщения
    Нет новых сообщений
  • Синтаксис, библиотеки, фреймворки, алгоритмы, ООП, функциональное, асинхронное, многопоточное программирование. Помощь новичкам, советы экспертов, тренды и кейсы. Решайте задачи, делитесь кодом.

    26 46
    26 Темы
    46 Сообщения
    kirilljsK
    [image: 1742381713640-qwe.webp] Roblox — одна из самых популярных платформ для создания игр, где Lua используется для написания игровой логики. В этой статье мы разберем, как создать вашу первую программу: от настройки среды до написания скрипта, который оживит объект в игре. Почему Lua в Roblox? Roblox Studio использует Lua как основной язык для скриптов по нескольким причинам: Простота: Минималистичный синтаксис Lua идеален для новичков. Интеграция: Lua-скрипты управляют объектами, физикой, событиями и интерфейсами в Roblox. Кроссплатформенность: Код работает одинаково на всех устройствах, поддерживаемых Roblox. Шаг 1: Установка Roblox Studio Перейдите на официальный сайт Roblox и зарегистрируйтесь. Скачайте Roblox Studio (бесплатно). Запустите программу и создайте новое место (Create → New Place). Шаг 2: Создание первого скрипта В Roblox Studio добавьте объект: Нажмите + в панели Workspace. Выберите Part (куб) или Model (например, персонажа). Добавьте скрипт: Щелкните правой кнопкой мыши на объекте в Explorer (окно слева). Выберите Insert Object → Script. Шаг 3: Напишите код на Lua Вставьте в скрипт следующий код: local part = script.Parent -- Ссылка на объект, к которому прикреплен скрипт part.Touched:Connect(function(hit) local player = game.Players:GetPlayerFromCharacter(hit.Parent) if player then part.BrickColor = BrickColor.Random() -- Изменение цвета при касании print(player.Name .. " коснулся объекта!") end end) Что делает этот код? При касании объекта (Touched) проверяет, принадлежит ли касание игроку. Меняет цвет объекта на случайный. Выводит сообщение в консоль. Шаг 4: Тестирование скрипта Нажмите Play (зеленая кнопка) в Roblox Studio. Перейдите в режим тестирования и подойдите к объекту. Убедитесь, что цвет изменился, а в консоли (Output ) появилось сообщение. Основы Roblox API: что нужно знать Чтобы писать сложные скрипты, изучите ключевые компоненты: Объекты и свойства Workspace: Корневая папка для всех объектов в игре. Players: Управление игроками и их данными. Properties: Например, Part.Position, Part.Size. События (Events) Touched — срабатывает при касании объекта. MouseButton1Click — клик по GUI-элементу. PlayerAdded — когда игрок заходит в игру. Службы (Services) RunService: Управление игровым циклом (рендеринг, физика). MarketplaceService: Работа с покупками внутри игры. Пример: Движущийся объект Добавьте скрипт, который заставит объект перемещаться: local part = script.Parent while true do part.Position = part.Position + Vector3.new(0, 0.5, 0) -- Движение вверх wait(0.1) -- Пауза в 0.1 секунды end Важно: wait() — обязательная функция для задержки, иначе цикл перегрузит игру. Vector3.new(x, y, z) — задает координаты в 3D-пространстве. Советы для новичков Используйте документацию: Roblox Developer Hub содержит примеры и описание API. Изучайте чужой код: Загляните в скрипты популярных игр Roblox. Пробуйте шаблоны: Roblox Studio предоставляет готовые шаблоны для изучения. Что дальше? Создайте простую игру: лабиринт, кликер или платформер. Добавьте GUI-интерфейс с помощью ScreenGui и TextButton. Изучите работу с DataStore для сохранения прогресса игроков. Первая программа на Lua в Roblox — это всегда эксперимент. Начните с простых скриптов, постепенно осваивая события, физику и многопользовательские функции. Помните: даже популярные игры вроде Adopt Me! или Brookhaven начинались с малого. Удачи в создании вашей первой игры!
  • обсуждение CI/CD, автоматизации, облаков (AWS, Azure), Docker, Kubernetes, мониторинга и IaC. Обмен опытом, решение задач, лучшие практики. Советы по инструментам (Ansible, Terraform), кейсы, оптимизация workflows

    0 0
    0 Темы
    0 Сообщения
    Нет новых сообщений
  • обсуждение SQL, NoSQL (MySQL, PostgreSQL, MongoDB), Redis, проектирования БД, оптимизации запросов, администрирования. Решение проблем, бэкапы, репликация, безопасность данных. Советы по настройке, кейсы, обмен опытом.

    2 3
    2 Темы
    3 Сообщения
    kirilljsK
    @Jspi а как связать две таблицы? К примеру таблицу городов к пользователю ?
  • Операционные системы, кроссплатформенные программы, системы. Unix, Linux, Windows, MacOS и т д.

    2 3
    2 Темы
    3 Сообщения
    kirilljsK
    Я уже довольно давно интересуюсь Linux, и за это время успел попробовать несколько дистрибутивов. Некоторые из них мне понравились, с другими возникли сложности, а про остальные я только читал или слышал от других пользователей. В этой теме я поделюсь своим опытом работы с Ubuntu, Fedora и Kali Linux, а также расскажу о других популярных дистрибутивах, которые пока не пробовал, но планирую. 1. Ubuntu [image: 1740126730830-screenshot-from-2022-04-18-13-05-17-min-min-resized.png] Мой опыт: Ubuntu был первым дистрибутивом, который я установил на свой компьютер. Мне он показался очень удобным для новичков, особенно благодаря простоте установки и большому количеству документации. Я использовал его как основную систему около года, и за это время разобрался с базовыми вещами в Linux. На текущий момент Ubuntu использую под Windows WSL Что понравилось: Простой и понятный интерфейс. Даже если ты раньше никогда не работал с Linux, Ubuntu покажется тебе интуитивным. Большое сообщество. Если что-то не получается, всегда можно найти решение в интернете. Snap-пакеты упрощают установку программ, хотя иногда они работают медленнее, чем традиционные пакеты. Долгосрочные версии (LTS) действительно стабильны. Я использовал LTS-версию, и она отлично работала. Что не понравилось: Иногда обновления могут сломать систему, особенно если ты используешь не-LTS версии. Snap-пакеты иногда занимают много места и работают медленно. Где скачать: https://ubuntu.com/download 2. Fedora [image: 1740126770450-captura_fedora_21_-gnome_shell-min.png] Мой опыт: После Ubuntu я решил попробовать Fedora. Мне было интересно посмотреть, чем она отличается, ведь многие говорят, что это один из самых современных дистрибутивов. Я установил Fedora Workstation с рабочим столом GNOME. Что понравилось: Свежие версии программ. Fedora всегда предлагает последние версии ПО, что мне очень понравилось. Интерфейс GNOME выглядит красиво и современно. Хотя вначале было немного непривычно, но потом я привык. Хорошая производительность. Система работает быстро, даже на не самом мощном железе. Открытость и приверженность свободному ПО. Это вызывает уважение. Что не понравилось: Иногда программы из репозитория могут быть нестабильными, так как они новые. Не все проприетарные драйверы работают “из коробки”. Например, с NVIDIA пришлось повозиться. Где скачать: https://getfedora.org/ 3. Kali Linux [image: 1740126887194-qwe-min.png] Мой опыт: Kali Linux я пробовал исключительно для учебных целей. Я интересуюсь информационной безопасностью, и мне хотелось посмотреть, какие инструменты доступны в этом дистрибутиве. Устанавливал его в VirtualBox, чтобы не трогать основную систему. Что понравилось: Огромное количество предустановленных инструментов для тестирования безопасности. Это действительно удобно, если ты занимаешься этическим хакингом. Частые обновления. Разработчики следят за актуальностью программ. Поддержка различных сред выполнения (Live USB, VirtualBox, VMware). Это позволяет легко экспериментировать. Что не понравилось: Для новичков может быть сложно. Без базовых знаний в области безопасности и Linux здесь делать нечего. Не подходит для повседневного использования. Это специализированный дистрибутив, и использовать его как основную систему нецелесообразно. Где скачать: https://www.kali.org/get-kali/ 4. Debian [image: 1740126905747-74e3ddb8-499e-42ef-8862-eb1493308bb3-image.png] Про Debian я много читал и слышал от других пользователей. Многие говорят, что это один из самых стабильных дистрибутивов, который часто используется на серверах. Также я знаю, что Ubuntu основан на Debian, поэтому они во многом похожи. Особенности: Высокая стабильность. Пакеты тщательно тестируются перед выпуском. Минималистичный подход. Здесь нет лишних “наворотов”, только самое необходимое. Большой выбор пакетов через APT. Можно установить практически любую программу. Подходит для работы как на домашнем компьютере, так и на сервере. Где скачать: https://www.debian.org/distrib/ 5. Linux Mint [image: 1740126945892-0e6425f0-f846-4111-bb3a-702f82e1ee1a-image.png] Linux Mint — это еще один популярный дистрибутив, который часто рекомендуют новичкам. Я читал, что он основан на Ubuntu и предлагает удобный интерфейс, похожий на Windows. Многие пользователи хвалят его за простоту и стабильность. Особенности: Удобный интерфейс Cinnamon, MATE или XFCE. Особенно популярен Cinnamon. Встроенные мультимедийные кодеки и поддержка проприетарного ПО. Не нужно ничего дополнительно устанавливать. Простота установки и настройки. Даже если ты никогда не работал с Linux, разберешься быстро. Хорошо работает даже на старых компьютерах. Где скачать: https://linuxmint.com/download.php 6. Manjaro [image: 1740126979540-mang-min.png] Manjaro — это дистрибутив, основанный на Arch Linux. Я слышал, что он сочетает в себе гибкость Arch и простоту Ubuntu. Многие пользователи хвалят его за удобство и возможность легко настраивать систему. Особенности: Автоматическое обновление ядра и пакетов. Не нужно беспокоиться о совместимости. Есть варианты с разными рабочими столами: XFCE, KDE, GNOME. Большой выбор программ через AUR (Arch User Repository). Простота установки и настройки. Для новичков есть графический установщик. Где скачать: https://manjaro.org/download/ 7. Arch Linux [image: 1740126995895-5f870613-e1db-41cc-bd8b-64bba5d933ed-image.png] Arch Linux — это минималистичный дистрибутив, который предоставляет полный контроль над системой. Я читал, что он больше подходит для опытных пользователей, которые хотят настроить свою систему “под себя”. Пока я не готов к нему, но планирую попробовать позже. Особенности: Rolling-release модель. Обновления выходят постоянно, и тебе не нужно ждать новых версий. Большое сообщество и подробная документация (Arch Wiki). Гибкость и свобода в настройке. Требует ручной установки и конфигурации. Где скачать: https://archlinux.org/download/ Заключение За время работы с Linux я успел попробовать Ubuntu, Fedora и Kali Linux. Каждый из них оставил свои впечатления, и я понял, что выбор дистрибутива зависит от задач, которые ты хочешь решать. Про остальные дистрибутивы я пока только читал или слышал от других пользователей, но планирую их попробовать в будущем. Если ты тоже интересуешься Linux, надеюсь, мой опыт и информация будут полезными. Если у тебя есть вопросы или ты знаешь что-то интересное, пиши в комментариях!
  • Актуальные IT-новости: обзоры технологий, релизы ПО, события индустрии (искусственный интеллект, кибербезопасность, стартапы). Аналитика рынка, тренды, кейсы компаний. Экспертные мнения, прогнозы, дискуссии о будущем IT. Следите за обновлениями Apple, Google, Microsoft и других гигантов.

    11 21
    11 Темы
    21 Сообщения
    kirilljsK
    [image: 1741849897969-clon-min-1-resized.png] Когда нужно скопировать сайт, но не хочется тратить неделю на ручную работу Привет, коллеги! Сегодня расскажу о крутой новинке — инструменте Same.dev, который умеет клонировать сайты практически “под корень”. Если вы веб-разработчик, дизайнер или просто любите эксперименты, эта штука точно зацепит. Как это работает? Логика простая: Вбиваете ссылку на нужный сайт. Идёте пить кофе (или даже обедать). Возвращаетесь — клон готов! Но есть нюанс: агент немного переписывает код, чтобы избежать проблем с авторскими правами. То есть, сайт будет похож на оригинал, но не идентичен.
  • IT-приколы, мемы про разработчиков, программистские баги и гифки. Обсуждаем смешные кейсы, шутки про искусственный интеллект, криптовалюты, GitHub и Reddit. Делитесь своими мемами, находите единомышленников, отдыхайте с пользой

    5 27
    5 Темы
    27 Сообщения
    kirilljsK
    [image: 1740550471843-4b3907df-83e5-4870-867a-6457dc6857ec-image.png]