💧🔄 Гидратация в веб-разработке: оживляем статический HTML

Готов узнать, как превратить статический HTML в динамичное приложение одним щелчком JavaScript? Сегодня мы нырнем в мир гидратации — процесса, который делает твои веб-страницы живыми и интерактивными.

👉 Читать статью
👉 Зеркало

🧑‍💻 Статьи для IT: как объяснять и распространять значимые идеи

Напоминаем, что у нас есть бесплатный курс для всех, кто хочет научиться интересно писать — о программировании и в целом.

Что: семь модулей, посвященных написанию, редактированию, иллюстрированию и распространению публикаций.

Для кого: для авторов, копирайтеров и просто программистов, которые хотят научиться интересно рассказывать о своих проектах.

👉Материалы регулярно дополняются, обновляются и корректируются. А еще мы отвечаем на все учебные вопросы в комментариях курса.

❗Вакансии «Библиотеки программиста» — ждем вас в команде!

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

Подробности тут

Мы предлагаем частичную занятость и полностью удаленный формат работы — можно совмещать с основной и находиться в любом месте🌴

Ждем ваших откликов 👾

🎙 445-й выпуск подкаста «Веб-стандарты»: Вадим Макеев, Алексей Симоненко, Юлия Миоцен, Андрей Мелихов про State of CSS, флексы на лице, Chrome 130, Node.js 22/23, JS0 и JSSugar, гиперреализм.

⏱️ Таймкоды:
00:01:08 Результаты State of CSS
00:25:17 Флексы на лице
00:27:40 Chrome 130
00:41:37 Node.js 22/23
01:00:31 JS0 и JSSugar
01:26:03 Гиперреализм

▶️ Лайв на YouTube | Сайт подкаста

#подкасты #новости

💬 А вы отдыхаете на выходных?

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

👍 — да, только этим и занимаюсь
🤔 — нет, доделываю «хвосты» по работе
💯 — не работаю, но занимаюсь пет-проектами
🤩 — свой вариант (напишу в комментариях)

#интерактив

⚡️Разыгрываем флагманский смартфон

«Библиотека программиста» разыгрывает один из трех смартфонов на выбор:
🔹Samsung Galaxy S24 Ultra на 1 ТБ
🔹Xiaomi 14 Ultra на 512 ГБ
🔹iPhone 16 Pro Max на 512 ГБ

🔥 А еще 99 участников розыгрыша получат скидку 50% на наш курс Базовые модели ML и приложения!
Промокод будет действителен до 20 ноября.

Условия просты:
→ подписаться на Библиотека нейротекста
→ подписаться на Библиотека нейрозвука
→ подписаться на Библиотека нейрокартинок
→ нажать на кнопку «Участвовать» под этим постом

Итоги появятся 30 октября в 20:00 по московскому времени в нашем канале Библиотека программиста. Затем мы свяжемся с победителем, который сам выберет смартфон. Тем, кто получит промокод, мы вышлем его в течение недели после окончания розыгрыша.

⚠️ Убедитесь, что вам можно написать в личные сообщения или следите за результатами — если мы не сможем с вами связаться, то не сможем и отправить приз. Доставить мы можем только в города России и Беларуси.

🔥 Руководство по Convex: серия статей для веб-разработчика

Convex — новое открытое и бесплатное решение BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.

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

Запросы — это сердце бэкенда. Они запрашивают данные из БД, проверяют аутентификацию или выполняют другую бизнес-логику, возвращая данные клиенту. Определяются они в TypeScript/JavaScript-файлах в директории convex.

Об этом и многом другом читайте в первой части серии статей, которая доступна в переводе от Игоря Агапова из Timeweb Cloud👇

🔗 Часть 1. Функции и база данных Convex

🎨✨ Современные тренды CSS: эволюция функций

Рабочая группа CSS выпустила новый модуль Values and Units Level 5: меньше кода, больше возможностей — звучит как мечта? Давайте вместе разберемся, как эти новшества изменят нашу работу и сделают веб красивее.

👉 Читать статью
👉 Зеркало

🎭 Мощь CSS-масок

Декабрь 2023 года стал значимой датой в истории развития CSS-свойства mask: все современные браузеры в своих последних версиях обеспечили его полную поддержку, теперь без использования своих вендорных префиксов.

А это означает, что данное свойство прочно и надолго вошло в жизнь каждого фронтенд-разработчика. Осталось лишь фронтенд-разработчикам принять его в свою жизнь и перестать бояться!

Под катом — обзор основных теоретических идей свойства и примеры использования на основании опыта разработки Taiga UI.

👉 Читать

💡 Знаете ли вы, что мы можем разместить кнопку отправки формы за пределами формы?

В большинстве случаев кнопка отправки находится внутри тега <form>, но иногда, из-за особенностей макета или других причин, её можно разместить снаружи. Просто используйте атрибуты form и id.

#html #tip by Shripal Soni

🔥 После почти 18 месяцев разработки, включавшей тысячи изменений от десятков контрибьюторов, наконец-то представлен стабильный релиз Svelte 5

Svelte 5 — самый значительный релиз в истории проекта, который также остается в значительной степени обратно совместимым. Большим дополнением являются runes для явного объявления реактивного состояния, но есть и многое другое.

Официальный сайт svelte.dev также претерпел большую перестройку, чтобы выступать в качестве «всеобъемлющего» для всего, что касается Svelte.

▶️ Если вы хотите узнать, как использовать Svelte 5, Scott Tolinski из Syntax выпустил двухчасовой курс по основам Svelte 5 на YouTube.

🎨🔙🔚 Паттерн «Бэкенд для фронтенда»: преимущества, недостатки и лучшие практики для реализации

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

👉 Читать статью
👉 Зеркало

👨‍🍳 Полезные рецепты ручного создания SVG

Цель руководства — рассмотреть практические аспекты работы с простыми SVG. Когда дело доходит до рисования кривых (curves), автор рекомендует использовать инструменты вроде Illustrator или Affinity.

Основное внимание в руководстве уделено практическим примерам, которые помогут понять некоторые математические аспекты создания SVG-графики. Для более глубокого изучения спецификаций SVG можно обратиться к статье "A Practical Guide To SVG And Design Tools".

👉 Читать

🎙 446-й выпуск подкаста «Веб-стандарты»: Юлия Миоцен и Никита Дубко про Chrome DevTools 130, прогресс на CSS, словари сжатия, CSS-пластилин и правильный blockquote.

⏱️ Таймкоды:
00:01:15 Chrome DevTools 130
00:17:56 Прогресс на CSS
00:25:44 Словари сжатия
00:41:03 CSS-пластилин
00:50:04 Blockquote правильно
01:05:35 Ответы на вопросы

▶️ YouTube | Сайт подкаста

#подкасты #новости

🛠️🎯 12 инструментов для разработки крутого фронтенда

🔸 Neumorphism — набирающий популярность тренд в дизайне интерфейсов.
🔸 UIverse — библиотека UI-элементов.
🔸 Ray.so создает красивые сниппеты для иллюстрации гайдов и туториалов.
🔸 Icon Maker — еще один крутой сервис от разработчиков Ray.so.
🔸 ReactToPrint позволяет рендерить в браузере печатные версии отдельных React-компонентов.
🔸 Kontra.js — JavaScript-библиотека для участия в Js13kGames.
🔸 Swapy позволяет превратить макет в интерактивный интерфейс с возможностью перетаскивания элементов.
🔸 WebJSX — библиотека для создания веб-приложений с использованием синтаксиса JSX и веб-компонентов.
🔸 Web Maker — оффлайн-песочница для экспериментов с HTML, CSS и JavaScript.
🔸 Sniper CSS — расширение Chrome для поиска и устранения неиспользуемых CSS-стилей.
🔸 Recharts — библиотека для построения графиков в React-приложениях.
🔸 Creatie — ИИ-платформа для разработки, аудита и улучшения UI/UX.

👉 Читать статью полностью
👉 Зеркало

🤖 Transformers.js v3: запуск transformers в браузере

Перед вами JS-порт Python-библиотеки transformers от Hugging Face, которая может запускать модели машинного обучения на естественном языке, зрении и звуке прямо в браузере. v3 добавляет поддержку WebGPU для повышения производительности и теперь также поддерживает Node, Deno и Bun.

👉 Подробнее о новой версии

💡 Простой способ сортировки без учета регистра в JavaScript: на заметку фронтенд-разработчику

#javascript #tip by Shripal Soni

⏭️ Как быстро разобраться в Next.js 14: 5 советов опытного фронтендера

Next.js — мощный фреймворк для создания веб-приложений на React: он поддерживает статическую генерацию сайтов, серверный и клиентский рендеринг. Это делает его идеальным выбором для проектов, которым необходима высокая производительность, SEO-дружественность и масштабируемость.

Делимся пятью советами, которые помогут быстро разобраться в тонкостях работы с изображениями, переменными окружения, кэшированием и управлением компонентами в Next.js.

👉 Читать статью
👉 Зеркало

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

Ждем ваших комментариев 👇

🎨 Подпишись на нашу еженедельную email-рассылку, чтобы быть в курсе новостей и лучших практик в области фронтенда.

В еженедельных письмах ты найдешь:
● Современные JavaScript-фреймворки и библиотеки
● HTML5 и CSS3: новые возможности и трюки
● Оптимизация производительности веб-приложений
● Тестирование и отладка кода
● UX/UI лучшие практики
● Новые веб-стандарты и браузерные технологии
● Тренды в веб-дизайне и интерфейсах
● Прогрессивные веб-приложения (PWA)

👉Подписаться👈

🤔 Стоит ли разделить JavaScript на два языка?

Две недели назад вы могли наткнуться на интересную презентацию, представленную на TC39, в которой предлагалось разделить JavaScript на два языка: базовое ядро и полнофункциональную версию, для компиляции которой требуются инструменты.

👉 Этот материал раскрывает немного больше подробностей и привел к особенно обширному обсуждению на Hacker News.