Серый взрыв

Этот код использует HTML, CSS и JavaScript для создания анимированного графического эффекта. Он не использует никаких фреймворков, только чистый ванильный код. Вот что он делает:

Определяет функцию getRandomInt, которая возвращает случайное целое число в заданном диапазоне.
Определяет константу NUM_LINES, которая равна 69 и означает количество линий, которые будут нарисованы на SVG-элементе.
Получает ссылку на SVG-элемент с помощью document.querySelector и сохраняет ее в переменной svg.

Определяет функцию doArt, которая делает следующее:
Удаляет все старые линии с SVG-элемента, если они есть.

Создает новые линии с помощью цикла for и шаблонной строки. Каждая линия имеет атрибуты x1, y1, x2, y2, stroke, stroke-linecap и stroke-width. Значения этих атрибутов генерируются случайным образом с помощью функции getRandomInt. Например, x2 и y2 определяют конечную точку линии в процентах от ширины и высоты SVG-элемента. Stroke определяет цвет линии в формате RGBA, где последний компонент - это прозрачность. Stroke-width определяет толщину линии в пикселях.

Добавляет новые линии в начало SVG-элемента с помощью метода insertAdjacentHTML.

Вызывает функцию doArt один раз при загрузке страницы.

Добавляет обработчик события click на window, который вызывает функцию doArt каждый раз, когда пользователь кликает по экрану.

Определяет стили для SVG-элемента, body и line с помощью CSS. Например, он задает ширину и высоту SVG-элемента в 100%, фоновый цвет в #eee, отступ body в 0 и высоту body в 100vh (100% от высоты окна). Он также добавляет анимацию для line с помощью ключевых кадров и свойства transform. Анимация состоит из изменения масштаба линии от 1 до 0.69 за 4 секунды в бесконечном цикле с чередованием направления. Анимация также имеет разные задержки для разных линий с помощью псевдокласса nth-child.

🌐Ссылка на код

CSS Совет 💡

Возможно, ты не знал об этом более удобном и понятном синтаксисе для диапазонов в медиазапросах 🤩

Cовет💡

Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы.

Аутрич — это спам? Разрушаем главный миф о поиске работы

Многие уверены: писать незнакомым людям в LinkedIn — это навязчивость и бесполезное занятие, которое только раздражает рекрутеров. Поэтому обычно сценарий такой: вы массово откликаетесь на вакансии, неделями ждете ответов, но получаете только автоотказы. Конкуренция кажется бесконечной, а мотивации искать работу остается все меньше.

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

Если продолжать искать работу только привычным способом, можно просто не увидеть лучшие возможности.

📅 28 июля в 19:00 приглашаем на бесплатный вебинар: «Как сделать так, чтобы рекрутеры писали первыми: всё про LinkedIn и нетворкинг на международке»

Спикер — Даша Шульгина, фаундер AgileFluent.

На вебинаре вы узнаете:
— почему откликов много, а интервью нет;
— что такое «теневой рынок» и при чем тут аутрич;
— как оформить LinkedIn, чтобы ваши сообщения были прочитаны;
— как просить реферал у незнакомых людей — и почему это работает, а не выглядит как навязчивость.

За время работы AgileFluent уже помогли 800+ специалистам из IT и Digital найти работу в России и за рубежом.
После вебинара у вас будет не очередная порция теории, а понятный план действий, который можно начать применять сразу.

Регистрируйтесь по ссылке 👉 [ссылка]

Реклама. ООО «Эджайл», ИНН 7810964334, erid: 2VtzquoFeKC

Multi Colored Text with CSS

Раскраска текста диагональными цветными полосами. На чистом CSS.

https://codepen.io/TajShireen/pen/YzZmbep

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/

Goey footer

Футер с анимацией стекающих капель. Реализован с помощью CSS.

#css

💡 Совет по JavaScript — Используй reduce для группировки элементов 🔴

⚡️ Opus 5 за два часа превратила абзац из «Властелина колец» в интерактивный 3D-мир

Андрей Карпати дал модели первый абзац книги, бюджет в 1 млн токенов - около $10 - и попросил создать сцену на Three.js.

Результат: 5500 строк кода, процедурная генерация объектов, расстановка моделей по координатам и анимация событий.

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

Следующий шаг - временные игры по запросу, где пользователь может стать наблюдателем, NPC или героем истории.

Пока слабое место моделей - проверка результата. Они не умеют полноценно смотреть видео и играть в собственные игры, поэтому анализируют скриншоты и пропускают ошибки.

https://x.com/Machinelearrn/status/2083859736387035332

@data_analysis_ml

PerfectPixel — плагин для браузеров, позволяющий верстать сайты «пиксель в пиксель»

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

Интересной особенностью инструмента является возможность работы как с локальными сайтам, так и с теми, что уже размещены в Интернете

5 платформ, где можно бесплатно задеплоить свой проект

Необязательно сразу арендовать сервер и настраивать инфраструктуру. Для портфолио, MVP и небольших pet-проектов можно начать с бесплатных тарифов.

1. GitHub Pages - для статических сайтов

Подходит для портфолио, документации, лендингов и проектов на HTML, CSS и JavaScript.

Загружаете код в репозиторий — GitHub публикует сайт и выдаёт готовый адрес.

🔗 https://pages.github.com

2. Cloudflare Workers - для API и серверной логики

Позволяет запускать JavaScript и TypeScript на серверах Cloudflare рядом с пользователем.

Бесплатный тариф включает до 100 000 запросов в день. Хороший вариант для API, вебхуков, прокси и небольших backend-сервисов.

🔗 https://workers.cloudflare.com

3. Vercel - для Next.js и современного frontend

Подключаете GitHub, делаете push — Vercel автоматически собирает и публикует проект.

Для каждой ветки создаётся отдельная preview-ссылка. Бесплатный Hobby-тариф предназначен для личных и некоммерческих проектов.

🔗 https://vercel.com

4. Google Cloud Run - для Docker-контейнеров

Загружаете контейнер, а Google самостоятельно запускает и масштабирует приложение.

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

🔗 https://cloud.google.com/run

5. AWS Amplify - для full-stack приложений

Amplify объединяет хостинг, автоматическую сборку, CI/CD и сервисы AWS.

Подходит для React, Next.js, Vue и мобильных приложений. У новых аккаунтов доступ зависит от программы AWS Free Tier и предоставленных кредитов.

🔗 https://aws.amazon.com/amplify/

Важно: «бесплатно» не означает «без ограничений». Проверяйте лимиты, правила коммерческого использования и условия оплаты сверх бесплатной квоты.

Но для запуска первого проекта этих платформ более чем достаточно.

Совет по HTML 💡

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