🚀 ScreenCoder — Новый уровень магии для фронтендеров и дизайнеров.

Загружаете скриншот или макет, а нейросеть превращает его в чистый, готовый к продакшену HTML/CSS-код 🤯

Больше не нужно вручную верстать кнопки и блоки — ScreenCoder понимает визуал, сам планирует layout и пишет код, который можно сразу редактировать и использовать.

Что умеет:
🟢Превращает любой дизайн в HTML/CSS;
🟢Генерирует чистую и читаемую верстку;
🟢Позволяет менять стили и структуру под себя;
🟢Подходит и для быстрых прототипов, и для пиксель-перфект интерфейсов.

Просто — загрузил, скопировал, подправил, развернул.

Design → Code за пару секунд.

♎️ GitHub/Инструкция по установке

#python

💾 Turnable Cards – трехмерная анимация карточек. При наведении курсора карточка просто двигается, а при нажатии - переворачивается.

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

👩‍💻 Стилизуют элементы формы по валидности!

:user-valid и :user-invalid — псевдоклассы, которые совпадают с элементами форм по их валидности, но только после того, как пользователь изменил значение поля (элемент стал «грязным»). Это позволяет показывать обратную связь не сразу при загрузке страницы, а лишь после действия пользователя.

Как они работают:
• :user-valid — пользователь ввёл корректное значение;
• :user-invalid — введённые данные не прошли валидацию.

Главное преимущество — форма не показывает ошибку сразу при загрузке страницы. Это удобно для более аккуратной UX-валидации без JavaScript.

📣 Code Ready | #свойство

🖥 School App – дизайн приложения для школьников, который включает сочетания разных геометрических фигур и контрастные цвета.

Сайтодел | #макет #figma

💾 Donuts – трехмерное изображение пончиков, которое можно вращать курсором по любой оси, а также увеличивать и уменьшать.

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

🎨 Цветовая палитра макета "Top 50+ Landing Pages"

HEX | RGB
#FA7CE4 | rgb(250, 124, 228)
#7DE241 | rgb(125, 226, 65)
#4378EE | rgb(67, 120, 238)

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

Сайтодел | #палитра

RSS‑дайджест (за последние 24 ч.)

Техника & технологии

• AI Driven Testing – Hacker News
https://app.deltix.ai

• Magnitude 7.7 Earthquake – 68 km NNW of Ende, Indonesia – Hacker News
https://earthquake.usgs.gov/earthquakes/eventpage/us6000tkt2/executive

• The Ploopy A+ Trackball Is Here – Hacker News
https://blog.ploopy.co/the-aplus-is-finally-here-499

• Simplifying and Refactoring Introductory Calculus – Hacker News
https://arxiv.org/abs/1811.03459

• eigendrum – Hacker News
https://eigendrum.com/#p=circle

ИИ & машинное обучение

• [Megathread] Qwen 3.8 27B Release Day – LocalLLaMA
https://www.reddit.com/r/LocalLLaMA/comments/1voojjz/megathread_qwen_38_27b_release_day/

• Qwen 3.8 ‑ 27B is a game changer – LocalLLaMA
https://www.reddit.com/r/LocalLLaMA/comments/1vonuu0/qwen_38_27b_is_a_game_changer/

• Local uncensored Opus 4.6 at home ‑ Qwen3.8 27B heretic – LocalLLaMA
https://www.reddit.com/r/LocalLLaMA/comments/1voix4o/local_uncensored_opus_46_at_home_qwen38_27b/

• Stop shitting on 9B models – LocalLLaMA
https://www.reddit.com/r/LocalLLaMA/comments/1voh7lk/stop_shitting_on_9b_models/

• Muse Glimmer was frontier In the model class around 30B models for four days – LocalLLaMA
https://www.reddit.com/r/LocalLLaMA/comments/1vofnnf/muse_glimmer_was_frontier_in_the_model_class/

Новости

• Talks to sell PayPal to Stripe and Advent are heating up – TechCrunch
https://techcrunch.com/2026/08/14/talks-to-sell-paypal-to-stripe-and-advent-are-heating-up/

• Self‑driving trucks are officially testing on California highways – TechCrunch
https://techcrunch.com/2026/08/14/self-driving-trucks-are-officially-testing-on-california-highways/

• Thrive’s Joshua Kushner chides Silicon Valley VCs over AI euphoria – TechCrunch
https://techcrunch.com/2026/08/14/thrives-joshua-kushner-chides-silicon-valley-vcs-over-ai-euphoria/

• What we know about the alleged Iranian hacks on US water utilities – TechCrunch
https://techcrunch.com/2026/08/14/what-we-know-about-the-alleged-iranian-hacks-on-u-s-water-utilities/

• Read‑it‑later app Pocket shut down — here are the best alternatives – TechCrunch
https://techcrunch.com/2026/08/14/read-it-later-app-pocket-is-shutting-down-here-are-the-best-alternatives/

Веб‑разработка

• What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text‑stroke, and More – CSS‑Tricks

🖥 Money Forest – дизайн приложения для ведения личного бюджета. Здесь есть много инфографики, а также фоновые пейзажи в пастельных тонах.

Сайтодел | #макет #figma

🌟 Рынок IT эволюционировал, но есть нюанс...

🚬

TreeWalker — последовательный обход DOM без создания промежуточной коллекции!

При обходе DOM часто используют рекурсию или querySelectorAll(). Это рабочие подходы, но они подходят не для всех задач: рекурсивный обход требует дополнительной логики, а querySelectorAll() сразу формирует статический NodeList со всеми найденными элементами.

DOM API предоставляет интерфейс TreeWalker, который позволяет последовательно обходить дерево документа и получать только нужные узлы по мере обхода. Например, создадим объект для обхода элементов:
{
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT
);

let node;

while ((node = walker.nextNode())) {
console.log(node.tagName);
}
}

Обход начинается с потомков переданного корневого узла, поэтому сам document.body в цикл не попадёт.

TreeWalker поддерживает фильтрацию узлов. Например, можно возвращать только кнопки во время обхода дерева:
{
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT,
{
acceptNode(node) {
return node.tagName === 'BUTTON'
? NodeFilter.FILTER_ACCEPT
: NodeFilter.FILTER_SKIP;
}
}
);

let node;

while ((node = walker.nextNode())) {
console.log(node);
}
}

Фильтр вызывается для узлов во время обхода, поэтому отдельная коллекция найденных элементов не создаётся.

FILTER_SKIP пропускает текущий узел, но продолжает обход его потомков. Если необходимо исключить всё поддерево целиком, используется FILTER_REJECT. TreeWalker также поддерживает навигацию в разных направлениях:
walker.parentNode();
walker.firstChild();
walker.lastChild();
walker.previousSibling();
walker.nextSibling();
walker.previousNode();
walker.nextNode();

Например, можно найти первый элемент с атрибутом data-error и сразу прокрутить страницу к нему:
{
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT
);

let node;

while ((node = walker.nextNode())) {
if (node.hasAttribute('data-error')) {
node.scrollIntoView({
behavior: 'smooth',
block: 'center'
});

break;
}
}
}

В отличие от querySelectorAll(), TreeWalker не создаёт промежуточную коллекцию найденных элементов, а возвращает узлы по мере обхода дерева.

При этом TreeWalker не обязательно будет быстрее querySelectorAll() в каждом конкретном случае. Выбор зависит от задачи: для простого поиска по CSS-селектору обычно удобнее querySelector() или querySelectorAll(), а для управляемого последовательного обхода дерева — TreeWalker.

🔥 TreeWalker определён в DOM Standard и предоставляет низкоуровневый механизм навигации по DOM с возможностью фильтрации узлов во время обхода. Он подходит для реализации редакторов, инструментов анализа DOM и библиотек, которым требуется последовательный обход дерева с полным контролем над процессом навигации.

📣 Code Ready | #практика

Верстаешь?

Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:

1. Без опыта сделаешь реальный сайт сервиса доставки с нуля;
2. Добавишь JavaScript-логику, расчёты и трекинг;
3. Подключишь карты и маршрут доставки через API;
4. Превратишь сайт в Angular-приложение;
5. Подключишь backend и выложишь проект в продакшен;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ на фрилансе даже без опыта.

А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 12-летним стажем – Романа Чернова и получишь живую помощь по проекту.

👉 Проскочить на интенсив бесплатно

Начинаем уже завтра.

🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием.

😎 FrontSkill Docs — большая база знаний по Frontend-разработке!

Это онлайн-справочник, где собраны материалы по Frontend: HTML, CSS, JavaScript, TypeScript, React и другим технологиям. Документация построена по темам, что позволяет последовательно изучать материал или быстро находить нужную информацию во время разработки.

📌 Оставляю ссылочку: frontskill.ru

📣 Code Ready | #сайт

🎨 Цветовая палитра макета "Car Service":

HEX | RGB
#C1C1C1 | rgb(193,193,193)
#FF011D | rgb(255,1,29)
#1E1E1E | rgb(30,30,30)

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

Сайтодел | #палитра

💾 Responsive Shader Carousel – галерея, показывающая выбранное изображение на заднем плане. Перелистывать можно только с помощью двух кнопок.

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

💾 Interactive Wheel Menu – меню, которое появляется при нажатии на экран. Оно исчезает, если экран перестать удерживать.

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

💾 Responsive GSAP Slider – слайдер для представления продуктов с подвижными SVG-картинками. Слайдер можно легко настроить под себя.

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

🐙 React PDF – библиотека для создания PDF-файлов с помощью React. У нее есть API для стилизации элементов документа с использованием свойств CSS, в частности Flexbox.

Сайтодел | #репозиторий #github