Coding
248 subscribers
5.87K photos
1.47K videos
34 files
5.91K links
Статьи и ссылки с разных ресурсов, для начинающих программистов.
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Делаешь сайты? Теперь весь процесс: от создания проекта до общения с клиентом и сдачи результата можно вести на одной платформе

Poehali.dev превращает описание в готовый продукт: сайт, лендинг или приложение с бэкендом и публикацией на домен. Верстку, создание картинок, настройку и деплой берёт на себя ИИ-агент, а вы контролируете результат и правите, где нужно. Типовой лендинг сдаётся за вечер, освободившееся время — на новые заказы или сложные проекты с высоким чеком.

Внутри:
фичи для фрилансеров — свои шаблоны, передача проекта и чат с заказчиком
шаблоны и расширения — чтобы создавать быстро, а не с нуля
хостинг — встроенные бэкенд и база данных создают не просто картинку, а рабочий сайт с мгновенной публикацией на твой домен
ИИ-агент — сам планирует, пишет и запускает, а не просто даёт ответ

👉 Попробуйте бесплатно — и получите первый лендинг по промокоду [ LAND9T ] до 31.07.


Сервис работает на русском языке и без VPN. Подходит для лендингов курсов,...

Перейти на оригинальный пост
🐙 Front End Web Development Resources – полезный репозиторий с материалами для обучения фронтенду. Тут есть карта развития (roadmap) разработчика, описание инструментов и редакторов кода, ссылки на блоги, каналы и подкасты.

Сайтодел | #репозиторий #github
Вы никогда не увидете меня в бою вот так 👆
Ведь я стал профи с курсами Академии Selectel

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

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

Эксперты регулярно делятся полезными материалами, новостями и задачами в канале Академии Selectel. Подпишитесь: https://t.me/+TKIujF7d4hoyYzRi

Реклама. АО "Селектел". erid:2W5zFFw7TZB
💻 WhatsMyName — крутой, бесплатный инструмент разведки, который проверяет сотни сайтов и ищет цифровые следы по username агрегируя данные из открытых источников.

Возможности
🟢Проверяет более 600 популярных сервисов: Telegram, YouTube, нельзяграм, форумы, игровые платформы, маркетплейсы, соцсети, GitHub и многие другие.
🟢Автоматически определяет, существует ли пользователь с указанным никнеймом.
🟢Позволяет быстро находить связанные аккаунты на разных площадках.
🟢Помогает обнаружить старые или забытые профили, которые могут содержать личную информацию.
🟢Работает прямо в браузере — ничего устанавливать или регистрироваться не нужно.

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

Где пригодится?
🔣Проверить собственный цифровой...

Перейти на оригинальный пост
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Blob – фоторамка с подвижными границами. Область фотографии отталкивается от курсора и почти сразу возвращается на свое место.

Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Mouse Balls Animation – эффект для курсора в виде разноцветных кругов. Каждый элемент со временем тускнеет и уменьшается в размере.

Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
😎 Что такое полное погружение

🔫 Китайский геймер в Танки с ником «Blyat» показал свой сетап

У парней целый экипаж — и мехвод, и заряжающий и наводчик 😨

#cyberpunk
This media is not supported in your browser
VIEW IN TELEGRAM
💾 X-Ray Text Hover Effect – эффект "рентгена" для текста. При наведении курсора он показывает только обводку букв и убирает их заливку.

Сайтодел | #сниппет #css
🎙 CosyVoice 3 — открытая нейросеть, которая умеет озвучивать текст, клонировать голос по короткому примеру и говорить сразу на нескольких языках — включая русский. Причем всё это можно запускать локально.

Возможности:
🎤 Клонирование голоса по короткому аудиофрагменту (Zero-Shot Voice Cloning).

🌍 Поддержка различных языков, включая русский, английский, немецкий, французский, испанский, японский и другие.

🗣 Генерация речи с управлением:
* эмоциями;
* скоростью;
* громкостью;
* стилем;
* акцентом;
* языком.

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

🧠 Корректно читает:
* числа;
* даты;
* валюты;
* специальные символы;
* сложные текстовые конструкции без дополнительных модулей нормализации текста. ([GitHub][1])

🎧 Поддерживает кросс-языковое клонирование — например, можно использовать образец голоса на одном языке и синтезировать ре...

Перейти на оригинальный пост
✍️ Anton – адаптация традиционного рекламного шрифта без засечек для экранов цифровых устройств. Пример можно увидеть в сниппете Template Plants Animated

Сайтодел | #шрифт
Сайтодел | GitHub, Верстка, Сайты, FullStack pinned a GIF
✍️ EB Garamond – классический шрифт с засечками, вдохновленный шрифтами 1500-х годов. Подходит для небольших надписей. Шрифт можно увидеть в заголовках однотонных карточек в макете Colour Palettes/Moodboards

Сайтодел | #шрифт
This media is not supported in your browser
VIEW IN TELEGRAM
💀— 2026: Роботы будут лечить людей, летать в космос и помогать нам развиваться!
😂 — Роботы в 2026: ...
🎨 Цветовая палитра макета "Beauty And Skincare Landing Page"

HEX | RGB
#D1E3E3 | rgb(209,227,227)
#93CCDF
| rgb(147,204,223)
#2B6477 | rgb(43,100,119)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра
🐙 Front End Web Development Resources – репозиторий с полезными материалами для разработчиков. Здесь есть ссылки на полезные статьи, блоги, Youtube-каналы, фреймворки и библиотеки иконок.

Сайтодел | #репозиторий #github
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Создание реалистичных AI-видео постепенно становится доступным каждому.

LongCat-Video — открытая нейросеть с 13,6 млрд параметров, которая умеет не только генерировать видео по тексту, но и создавать говорящих аватаров, анимировать фотографии, продолжать существующие ролики и синхронизировать речь с движением губ. Всё это можно запускать локально.

Возможности:
🔣Text-to-Video — создание видео по текстовому описанию.
🔣Image-to-Video — оживляет обычные изображения.
🔣AI-аватары — создание говорящих персонажей по фотографии и аудио.
🔣Липсинк высокого качества — синхронизация речи и движения губ с использованием Whisper Large в новой версии Avatar 1.5.
🔣Поддержка нескольких персонажей и нескольких аудиодорожек одновременно.
🔣Работает не только с людьми, но и с аниме, животными и стилизованными персонажами.
🔣Генерирует длинные ролики без заметной деградации качества и «дрейфа» цветов — одна из ключевых особенностей проекта.
🔣Генерация видео 720p, 30 FPS с...

Перейти на оригинальный пост
This media is not supported in your browser
VIEW IN TELEGRAM
0nix — Новая экосистема для профи.

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

🛡Для кибербезопасников: Threat Intelligence, Осинтеров , Геоинтеров, Red Team, разработчиков инструментов. Ваша аудитория ждет ваши услуги.

💻 Для разработчиков и дизайнеров: Отдельные разделы с заказами на разработку, дизайн и графику. Портфолио — в топ!

Условия для первых участников: Минимальные комиссии на сделки, быстрый арбитраж и модерация.

Регистрируйся и забирай свою скидку на привилегии уже сегодня → 0nix.cc , 0nix.top
Почему чтение offsetHeight иногда тормозит интерфейс?

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

Например:
const box = document.querySelector('.box');

box.style.width = '500px';

console.log(box.offsetHeight);

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

Упрощённо это выглядит так:
box.style.width = '500px';

// браузер пока просто запомнил изменение

console.log(box.offsetHeight);

// здесь уже нужны реальные размеры,
// поэтому приходится пересчитать layout

Именно поэтому чтение некоторых свойств может заставить браузер синхронно обновить style и layout, если после изменений они ещё не актуальны.

Например:
element.offsetWidth;
element.offsetHeight;
element.clientWidth;
element.clientHeight;
element.scrollHeight;

element.getBoundingClientRect();

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

Проблемы обычно начинаются, когда чтение размеров смешивают с изменением стилей внутри цикла:
const items = document.querySelectorAll('.item');

items.forEach(item => {
item.style.height = '100px';

console.log(item.offsetHeight);
});

На десяти элементах ты, скорее всего, ничего не заметишь. Но если их сотни или тысячи, можно получить forced synchronous layout — ситуацию, когда JavaScript заставляет браузер выполнять дорогие вычисления прямо во время выполнения скрипта.

Особенно неприятно это становится в анимациях:
function animate(elements) {
elements.forEach(element => {
element.style.width = '200px';

const height = element.offsetHeight;

element.style.height = `${height}px`;
});
}

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

Поэтому один из самых простых приёмов — разделять запись и чтение. Вот так плохо:
items.forEach(item => {
item.style.width = '200px';
console.log(item.offsetHeight);
});

Лучше будет так:
items.forEach(item => {
item.style.width = '200px';
});

items.forEach(item => {
console.log(item.offsetHeight);
});

Так браузер сможет объединить изменения и выполнить один пересчёт вместо множества лишних. Для визуальных изменений также часто используют requestAnimationFrame, потому что он запускает код перед следующим циклом отрисовки браузера. Но сам по себе requestAnimationFrame не избавляет от layout thrashing. Если внутри его callback продолжать чередовать изменения DOM и чтение размеров, синхронные перерасчёты всё равно останутся.

🔥 Если коротко: проблема не в offsetHeight, а в том, когда ты его читаешь. После изменений DOM или CSS он может заставить браузер синхронно пересчитать layout. Именно чередование записей и чтений чаще всего становится причиной лишних тормозов.

📣 Code Ready | #практика
This media is not supported in your browser
VIEW IN TELEGRAM
💾 X-Ray Text Hover Effect – эффект "рентгена" для текста. При наведении курсора он показывает только обводку букв и убирает их заливку.

Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Bouncy Star Rating – прыгающие звездочки для рейтинга. Если между двумя нажатыми элементами есть другие, то анимируются сразу все последние звездочки.

Сайтодел | #сниппет #css