Пробуем использовать cross-fade() в CSS
Функция CSS
Как этим пользоваться рассказали в статье.
#css #фронтенд
Функция CSS
cross-fade() смешивает фоновое изображение и маску с заданным значением прозрачности. То есть вы можете сделать плавный переход между слоями изображений, расположенных друг над другом. Для каждого слоя можно использовать свой уровень прозрачности и это даёт возможность создавать сложные переходы и даже анимации.Как этим пользоваться рассказали в статье.
#css #фронтенд
❤4👍1
Forwarded from Инструменты программиста
This media is not supported in your browser
VIEW IN TELEGRAM
Google представил CodeMender — ИИ, который самостоятельно исправляет уязвимости в коде
Техногигант представил инструмент, способный автоматически обнаруживать и исправлять дефекты безопасности в коде. Под капотом — BigSleep (генерация изображений) и OSS-Fuzz (инструмент для fuzz-тестирования — скармливания большого количества неупорядоченных данных). Ключевой компонент системы — Gemini, применяемая для корневого анализа причин ошибок.
Процесс устроен так: ИИ генерирует патчи, затем они проходят проверку другими ИИ — агентами-критиками, которые оценивают безопасность и качество исправлений. Только после этого результат отправляется на утверждение человеку.
Платформа предлагает также новую программу вознаграждений за найденные баги (до $20 000).
@prog_tools
Техногигант представил инструмент, способный автоматически обнаруживать и исправлять дефекты безопасности в коде. Под капотом — BigSleep (генерация изображений) и OSS-Fuzz (инструмент для fuzz-тестирования — скармливания большого количества неупорядоченных данных). Ключевой компонент системы — Gemini, применяемая для корневого анализа причин ошибок.
Процесс устроен так: ИИ генерирует патчи, затем они проходят проверку другими ИИ — агентами-критиками, которые оценивают безопасность и качество исправлений. Только после этого результат отправляется на утверждение человеку.
Платформа предлагает также новую программу вознаграждений за найденные баги (до $20 000).
@prog_tools
🔥4
Что такое миксины?
Миксины — это способ повторно использовать общий функционал в разных частях приложения без наследования.
Если объяснять простыми словами, это как «набор инструментов», который можно «примешать» к разным компонентам или классам.
В контексте веб-разработки термин чаще всего встречается в двух случаях:
1️⃣ CSS / препроцессоры (Sass, Less):
🔘 Миксин — это блок стилей, который можно вызывать повторно в разных селекторах.
🔘 Он позволяет не дублировать одинаковый CSS.
🔘 В отличие от обычного класса, миксин не привязан к конкретному селектору — он просто вставляет набор правил туда, где его вызвали.
2️⃣ JavaScript (особенно до появления современных паттернов)
🔘 Миксин — объект или функция с методами, которые можно добавить к другим классам или объектам, не меняя их иерархию.
🔘 Это альтернатива множественному наследованию, которого в JS нет.
Пример: если разным компонентам нужна одинаковая логика — например, логирование или валидация — её можно вынести в миксин и «примешать» туда, где нужно.
В современных фреймворках миксины часто заменяют другими подходами — например, хуками в React или композицией во Vue 3. Но идея остаётся та же — разделение общей логики и повторное использование.
#вопросответ
Если объяснять простыми словами, это как «набор инструментов», который можно «примешать» к разным компонентам или классам.
В контексте веб-разработки термин чаще всего встречается в двух случаях:
Пример: если разным компонентам нужна одинаковая логика — например, логирование или валидация — её можно вынести в миксин и «примешать» туда, где нужно.
В современных фреймворках миксины часто заменяют другими подходами — например, хуками в React или композицией во Vue 3. Но идея остаётся та же — разделение общей логики и повторное использование.
#вопросответ
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍3❤1
Media is too big
VIEW IN TELEGRAM
Полезная краткая лекция о прохождении IP-пакетов между сетями
Чтобы глубже понять технологию и использовать её максимально эффективно, важно разобраться в её внутреннем устройстве. Эта лекция как раз для таких случаев.
Идеально подойдёт сетевым инженерам, системным администраторам и разработчикам, работающим с сетями.
#general #hardware #ru
Чтобы глубже понять технологию и использовать её максимально эффективно, важно разобраться в её внутреннем устройстве. Эта лекция как раз для таких случаев.
Идеально подойдёт сетевым инженерам, системным администраторам и разработчикам, работающим с сетями.
#general #hardware #ru
👍12🔥3❤1
5 шагов для защиты бэкенда: чек-лист от уязвимостей
В мире, где киберугрозы становятся всё более изощрёнными, защита бэкенда от уязвимостей становится ключевым элементом безопасности. Здесь мы вместе с Семёнов Шаплыгиным, Senior Software Developer в Yandex и экспертом Эйч, рассказали пять основных шагов, которые помогут вам минимизировать риски и сделать серверную часть более защищённой.
#бэкенд #безопасность
В мире, где киберугрозы становятся всё более изощрёнными, защита бэкенда от уязвимостей становится ключевым элементом безопасности. Здесь мы вместе с Семёнов Шаплыгиным, Senior Software Developer в Yandex и экспертом Эйч, рассказали пять основных шагов, которые помогут вам минимизировать риски и сделать серверную часть более защищённой.
#бэкенд #безопасность
🔥3
Упаковка проекта с большой анимацией в один HTML файл или как кодировка Windows-1251 избавила от лишних 52МБ
Необычный опыт разработки упаковщика проекта с большой анимационной сценой в один независимый HTML-файл, который может воспроизводиться в любом браузере без интернета и веб-сервера.
Смогли бы повторить?
#html
Необычный опыт разработки упаковщика проекта с большой анимационной сценой в один независимый HTML-файл, который может воспроизводиться в любом браузере без интернета и веб-сервера.
Смогли бы повторить?
#html
🔥7
А вот давайте будем честными и ответим сами себе на вопрос «Почему я (хочу) в IT?»
Anonymous Poll
52%
Из-за денег
36%
Из-за удалёнки
8%
Чтоб оправдать свою любовь к аниме
6%
Ради служебного макбука
7%
Чтобы понимать айтишные мемы
51%
Я просто люблю программировать
11%
Чтобы сделать игру, где можно грабить корованы
9%
Чтобы полюбить Linux и всем его советовать
17%
Сделать свою программу и стать новым Дуровым
3%
Свой вариант в комментариях
😁14🤣4💩3
Forwarded from MaaS — meme as a service (ex. Представляешь, )
Bun 1.3 заказывали? Мы тут вам не фуллстек шутки шутим
Команда Oven выпустила крупнейшее обновление Bun в истории. Теперь это не просто быстрый рантайм, а полноценная платформа для фронтенда и бэкенда — с роутингом, cookies, WebSocket-ами и сборкой в один исполняемый файл.
Bun 1.3 добавил встроенные клиенты для Redis и популярных СУБД, переработал тест-раннер и ускорил криптографию до 400х. SQL API теперь работает единообразно с MySQL, PostgreSQL, SQLite и MariaDB.
По сути, Bun становится заменой сразу для Node.js, Vite и Redis-CLI — и делает это с прицелом на продакшен. Разработчики называют релиз «началом новой эпохи».
Теперь булочка ещё вкуснее..
@your_tech
Команда Oven выпустила крупнейшее обновление Bun в истории. Теперь это не просто быстрый рантайм, а полноценная платформа для фронтенда и бэкенда — с роутингом, cookies, WebSocket-ами и сборкой в один исполняемый файл.
Bun 1.3 добавил встроенные клиенты для Redis и популярных СУБД, переработал тест-раннер и ускорил криптографию до 400х. SQL API теперь работает единообразно с MySQL, PostgreSQL, SQLite и MariaDB.
По сути, Bun становится заменой сразу для Node.js, Vite и Redis-CLI — и делает это с прицелом на продакшен. Разработчики называют релиз «началом новой эпохи».
Теперь булочка ещё вкуснее..
@your_tech
Tproger
Вышел Bun 1.3: full-stack рантайм, поддержка Redis и новый SQL API. Разобрались, что еще нового — Tproger
Bun 1.3 стал full-stack рантаймом с Redis, SQL API, поддержкой MySQL и PostgreSQL, новым тест-раннером и ускорением сборки до 2,5 раз
🔥11❤2👍1
Как устроены массивы в PHP и как код влияет на скорость работы с ними
Массив — один из самых часто используемых типов в PHP. Понимание его внутренностей помогает:
🔘 избегать лишних аллокаций и пересчетов хэшей;
🔘 проектировать структуры данных;
🔘 прогнозировать пиковое потребление памяти;
🔘 не наступать на «микро‑грабли» производительности.
В PHP есть ряд важных особенностей, которые отличают массивы в нём от их собратьев в других языках. Подробнее обо всех особенностях можно узнать в материале.
#php
Массив — один из самых часто используемых типов в PHP. Понимание его внутренностей помогает:
В PHP есть ряд важных особенностей, которые отличают массивы в нём от их собратьев в других языках. Подробнее обо всех особенностях можно узнать в материале.
#php
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4🤔4🫡2👍1
Кто есть кто: Обратные вызовы, промисы и асинхронные функции
В JavaScript есть темы, которые могут сложно поддаваться пониманию. В этой статье речь как раз пойдёт о таких.
Что это вообще такое? В каких случаях используются? Как работают? Каков их внутренний механизм? В этой статье вы раз и навсегда разберёте суть этих процессов.
#javascript
В JavaScript есть темы, которые могут сложно поддаваться пониманию. В этой статье речь как раз пойдёт о таких.
Что это вообще такое? В каких случаях используются? Как работают? Каков их внутренний механизм? В этой статье вы раз и навсегда разберёте суть этих процессов.
#javascript
🔥4❤2
Почему не рекомендуется использовать innerHTML в JavaScript?
Присылайте свои варианты в комментарии. А правильный ответ ниже.
innerHTML — это свойство, которое позволяет получить или установить HTML-содержимое элемента в виде строки.
На первый взгляд оно удобное: можно быстро отрисовать кусок разметки без лишнего кода. Но именно это удобство часто и становится источником серьёзных проблем, особенно с точки зрения безопасности и производительности.
0️⃣ Главная опасность — XSS-уязвимости (межсайтовый скриптинг)
Когда вы вставляете в innerHTML строку, браузер интерпретирует её как HTML и сразу выполняет. Если в эту строку случайно попадёт вредоносный код — например, <script> — он выполнится от имени вашего сайта.
В реальных атаках это может быть:
🔘 кража cookie и токенов сессии,
🔘 выполнение произвольных запросов от лица пользователя,
🔘 внедрение вредоносных форм.
Даже если вы «фильтруете» данные, полностью защититься вручную сложно — лучше вообще не давать пользовательским данным превращаться в HTML без надёжной очистки.
1️⃣ Потеря обработчиков событий
Если вы перезаписываете innerHTML, весь существующий DOM внутри этого элемента пересоздаётся. Это значит:
🔘 все ранее навешанные слушатели событий (addEventListener) на дочерние элементы исчезают,
🔘 состояние вложенных компонентов или пользовательского интерфейса теряется,
🔘 производительность падает, если DOM-узлов много.
2️⃣ Проблемы с производительностью
Каждое изменение innerHTML заставляет браузер:
🔘 полностью заново распарсить HTML,
🔘 пересоздать вложенные узлы,
🔘 перерисовать их.
Если обновлять интерфейс часто, это может привести к заметным тормозам, особенно на слабых устройствах.
3️⃣ Отсутствие типизации и контроля структуры
Когда вы вставляете данные через innerHTML, вы работаете со строкой, а не с реальными DOM-элементами. Это значит, что:
🔘 легко сделать синтаксическую ошибку в HTML и получить некорректную верстку,
🔘 сложнее проверять и валидировать содержимое,
🔘 невозможно удобно навешивать поведение на элементы без дополнительных обходов DOM.
#вопросответ
Присылайте свои варианты в комментарии. А правильный ответ ниже.
На первый взгляд оно удобное: можно быстро отрисовать кусок разметки без лишнего кода. Но именно это удобство часто и становится источником серьёзных проблем, особенно с точки зрения безопасности и производительности.
Когда вы вставляете в innerHTML строку, браузер интерпретирует её как HTML и сразу выполняет. Если в эту строку случайно попадёт вредоносный код — например, <script> — он выполнится от имени вашего сайта.
В реальных атаках это может быть:
Даже если вы «фильтруете» данные, полностью защититься вручную сложно — лучше вообще не давать пользовательским данным превращаться в HTML без надёжной очистки.
Если вы перезаписываете innerHTML, весь существующий DOM внутри этого элемента пересоздаётся. Это значит:
Каждое изменение innerHTML заставляет браузер:
Если обновлять интерфейс часто, это может привести к заметным тормозам, особенно на слабых устройствах.
Когда вы вставляете данные через innerHTML, вы работаете со строкой, а не с реальными DOM-элементами. Это значит, что:
#вопросответ
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔5👍3❤1
SQL-оптимизация: 5 запросов, которые ломают базу
Оптимизация SQL-запросов — это база, без которой можно положить базу. Ba-dum-tss.
Мы собрали типовые запросы, которые чаще всего убивают производительность, объяснили, почему они опасны, и показали, как переписать их правильно. Ждём вас по ссылке, чтобы поделиться.
#sql
Оптимизация SQL-запросов — это база, без которой можно положить базу. Ba-dum-tss.
Мы собрали типовые запросы, которые чаще всего убивают производительность, объяснили, почему они опасны, и показали, как переписать их правильно. Ждём вас по ссылке, чтобы поделиться.
#sql
👍2🔥2
Forwarded from Точка входа в программирование
This media is not supported in your browser
VIEW IN TELEGRAM
Дружеское напоминание всем пользователям VS Code
Вы можете создать свой шорткат для любых часто используемых команд и строк кода. Вот, например, как создать сниппет для
Сохраняйте и пользуйтесь!
#совет #vscode
Вы можете создать свой шорткат для любых часто используемых команд и строк кода. Вот, например, как создать сниппет для
console.log(), заменив его на cc.Сохраняйте и пользуйтесь!
#совет #vscode
👍38🔥9❤1
Деплоим своё фронтенд-приложение
Стоппер многих новичков, окунувшихся во фронтенд — «а что делать дальше»? Действительно, и так нужно изучить кучу всего, но даже после готового проекта, ещё надо разобраться, как его задеплоить, чтобы пользоваться могли не только вы.
В этом ролике вы научитесь размещать приложение на React на облачном сервере, настраивать Nginx, подключать домен, настраивать https, gzip, а ещё посмотрите на конфигурацию докера.
#видео #фронтенд #бэкенд
Стоппер многих новичков, окунувшихся во фронтенд — «а что делать дальше»? Действительно, и так нужно изучить кучу всего, но даже после готового проекта, ещё надо разобраться, как его задеплоить, чтобы пользоваться могли не только вы.
В этом ролике вы научитесь размещать приложение на React на облачном сервере, настраивать Nginx, подключать домен, настраивать https, gzip, а ещё посмотрите на конфигурацию докера.
#видео #фронтенд #бэкенд
YouTube
Деплой Frontend приложения. Настройка nginx. Подключаем домен, настраиваем HTTPS, gzip, docker
В этом ролике мы задеплоим frontend приложение на React на облачный сервер, настроим Nginx, подключим домен, настроим https, gzip, посмотрим на конфигурацию докера.
Текстовая версия видео (Статья с инструкцией): https://slc.tl/7njx9
Гибкие облачные серверы…
Текстовая версия видео (Статья с инструкцией): https://slc.tl/7njx9
Гибкие облачные серверы…
👍10❤2🔥2😁1
Контейнеры после Docker: куда движется мир с Podman и что нас ждет в 2026
Мы привыкли упаковывать приложения в контейнеры, а слово «Docker» уже стало нарицательным. Но монополия разрушена — из тени вышел Podman. Он предлагает много того, чего не хватает Docker — улучшенная безопасность и иная архетиктура.
Мы решили разобраться подробнее в отличиях и в том, что предлагают оба инструмента, где они находятся в 2025 году и что нас ждёт дальше.
#docker #podman
Мы привыкли упаковывать приложения в контейнеры, а слово «Docker» уже стало нарицательным. Но монополия разрушена — из тени вышел Podman. Он предлагает много того, чего не хватает Docker — улучшенная безопасность и иная архетиктура.
Мы решили разобраться подробнее в отличиях и в том, что предлагают оба инструмента, где они находятся в 2025 году и что нас ждёт дальше.
#docker #podman
🤩2👍1
CENTI CONF: Frontend Day — уже скоро!
Centicore Group — IT-компания, которая больше 12 лет разрабатывает комплексные решения для бизнеса проводит конференцию, полностью посвящённую frontend-разработке.
21 ноября присоединяйтесь к CENTI CONF: Frontend Day, где можно будет открыто поговорить о фронтенде, поделиться опытом, обсудить последние тренды и вдохновиться новыми идеями.
Вы услышите доклады признанных экспертов:
• Глеба Михеева, Уставший техдир (CPO платформы агентов, Сбер);
• Ивана Чернякова, Lead Frontend Developer, Centicore Group;
• Олега Щеголева, Lead Frontend Developer
и других профессионалов и практиков отрасли.
Фронтенд — именно то, что видит и чувствует каждый пользователь. Здесь рождается цифровой опыт и создаются продукты, которыми хочется пользоваться.
Поэтому CENTI CONF: Frontend Day будет полезна не только фронтенд-разработчикам, но и тестировщикам, аналитикам, DevOps- и Java-инженерам.
Переходите на сайт конференции, чтобы узнать все подробности!
Это #партнёрский пост
Centicore Group — IT-компания, которая больше 12 лет разрабатывает комплексные решения для бизнеса проводит конференцию, полностью посвящённую frontend-разработке.
21 ноября присоединяйтесь к CENTI CONF: Frontend Day, где можно будет открыто поговорить о фронтенде, поделиться опытом, обсудить последние тренды и вдохновиться новыми идеями.
Вы услышите доклады признанных экспертов:
• Глеба Михеева, Уставший техдир (CPO платформы агентов, Сбер);
• Ивана Чернякова, Lead Frontend Developer, Centicore Group;
• Олега Щеголева, Lead Frontend Developer
и других профессионалов и практиков отрасли.
Фронтенд — именно то, что видит и чувствует каждый пользователь. Здесь рождается цифровой опыт и создаются продукты, которыми хочется пользоваться.
Поэтому CENTI CONF: Frontend Day будет полезна не только фронтенд-разработчикам, но и тестировщикам, аналитикам, DevOps- и Java-инженерам.
Переходите на сайт конференции, чтобы узнать все подробности!
Это #партнёрский пост
🔥2👍1
JavaScript-разработчик набирает
npm install:This media is not supported in your browser
VIEW IN TELEGRAM
😁36❤1