Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
23.2K subscribers
2.2K photos
120 videos
38 files
4.61K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Наши каналы: https://yangx.top/proglibrary/9197

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
Кастомизация вывода JSON.stringify() на практике: на заметку фронтенд-разработчику.

#javascript #tip by Shripal Soni
👀 СРОЧНО: Next.js 27 позволит взаимодействовать с ядром системы на уровне компонентов

А если серьезно, то на недавней Next.js Conf была представлена 14-ая версия фреймворка, а вместе с ней стабильную поддержку получили Server Actions. Кроме того:

◆ next dev --turbo
↳ Запуск локального сервера на 53% быстрее
↳ Обновление кода на 94% быстрее
◆ Partial Prerendering (Preview)
◆ Новый курс для изучения Next.js
↳ App Router
↳ Authentication
↳ Postgres

Хотите погрузиться в эту тему подробнее? Читайте анонс React Server Components или запустите демо-приложение, использующее React Server Components. Если совсем ничего непонятно, здесь есть неплохой обзор происходящего с React и Next.js.

#чтопроисходит
Please open Telegram to view this post
VIEW IN TELEGRAM
20_JavaScript_Abbreviation_Techniques_To_Improve_Efficiency_by_Xiuer.pdf
4.5 MB
20 методов сокращения JavaScript для повышения эффективности

Сокращение кода — это компромисс между производительностью и удобочитаемостью.

Читайте подробнее, если вас не раздражает что-то вроде этого:

let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];
☁️🧩 ТОП-10 бессерверных фреймворков

Существует множество различных бессерверных фреймворков, каждый из которых предназначен для определенных задач. В этой статье рассмотрим 10 наиболее популярных из них.

Читать статью
🎃Собрали для вас несколько страшных историй по случаю Хэллоуина. Ждем ваши истории в комментариях👇
393. Firefox и Safari, Passkey, Figma и Adobe, State of React, Node.js…
Веб-стандарты
🎙Свежий выпуск подкаста «Веб-стандарты»: Алексей Симоненко, Вадим Макеев, Юля Миоцен, Андрей Мелихов про релизы Firefox и Safari, код-лаб для Passkey, Figma и Adobe, State of React, Node.js Buffer, Next.js 14, Tailwind и эмоджи пельменя.

00:01:54 Firefox 119
00:14:42 Safari 17.1 и бета
00:28:10 Код-лаб для Passkey
00:40:29 Figma и Adobe
00:53:33 State of React
00:58:25 Node.js Buffer
01:02:56 Шум вокруг Next.js 14
01:12:27 Опять Tailwind
01:29:32 Эмоджи пельменя

YouTube | Apple Подкасты | Google Подкасты | Яндекс Музыка | Сайт подкаста

#подкасты
Please open Telegram to view this post
VIEW IN TELEGRAM
💡Красивый эффект при наведении всего за несколько шагов: :hover, CSS anchor positioning, :has и ни единого JS-кода

article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --develop; }
ul::after {
inset:
anchor(var(--anchor) top)
anchor(var(--anchor) right)
... ;
}


ul:has(li:hover) { --active: 1; }
ul::after {
opacity: var(--active, 0);
transition: opacity 0.2s, inset 0.2s 0.2s;
}
ul:hover::after {
transition: opacity 0.2s 0.2s, inset 0.2s;
}


👉 Посмотреть код и поиграть можно здесь

#css #tip by Jhey
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤖 25 бесплатных AI-инструментов для разработчиков
ИИ-помощники способны заменить GitHub Copilot, проверить код и даже сделать UX/UI-дизайн. Мы сделали подборку.

🟣 Codeuim
Помогает писать код. Можно опробовать в браузере или установить в качестве расширения в популярные IDE. Поддерживает более 70 языков программирования.
🟣 Codiga
Проверит, проанализирует и отрефакторит ваш код.
🟣 GPT Pilot
Создатели инструмента утверждают, что он позволит ускорить процесс разработки в 20 раз. С помощью GPT Pilot можно пошагово разработать собственное приложение.
🟣 Open Interpreter
Альтернатива официальному плагину Code Interpreter от Open AI. Может управлять браузером Chrome для поиска в интернете.
🟣 GPT-Code-Clippy
А это опенсорсный аналог GitHub Copilot на базе GPT-3.

Ещё 20 инструментов можно найти здесь

О других классных новых инструментах мы писали тут
#дайджест
This media is not supported in your browser
VIEW IN TELEGRAM
💻🍏Apple представила новый MacBook Pro с процессорами семейства M3, которые делают один из лучших в мире профессиональных ноутбуков еще лучше. 14- и 16-дюймовые модели с M3 Pro и M3 Max доступны в новом цвете «черный космос». Хотите узнать подробнее? Смотрите презентацию Apple Scary Fast на русском и всего за 6 минут.

💡А мы недавно делали небольшую подборку ноутбуков для разрабов, где перечислили самые легкие, автономные и производительные. Скажем честно, не всем она понравилась. Так или иначе, поделитесь своим опытом 🔽

💬Какие характеристики для вас наиболее важны? Накидайте свой топ ноутбуков в комментарии👇

#холивар
В мире, одержимом следующим большим JavaScript-фреймворком, разработчик Jake Lazaroff делает шаг назад, оценивая простоту и долговечность веб-компонентов и подчеркивая как их возможность многократного использования, так и переносимость.

У автора также недавно вышло отличное интерактивное введение в CRDT (Conflict-free Replicated Data Types), для изучения которого вам не требуется ничего, кроме начальных знаний TypeScript:

🔸 Интерактивное введение в CRDT
🔸 Создание совместного редактора пиксельной графики с помощью CRDT
🔸 Повышение эффективности CRDT на 98 %
💡Ошибки HTML и CSS, влияющие на доступность: серия статей для фронтендера

Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет.

Конечно, aria-атрибуты нужны, но HTML и CSS — такая же важная часть процесса создания доступных интерфейсов. Эти технологии не просто несут в себе много скрытых моментов, влияющих на доступность, а напрямую позволяют её улучшить.

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

🔹 Часть 1
🔹 Часть 2
Please open Telegram to view this post
VIEW IN TELEGRAM
🎮 Разработка браузерных игр с использованием Phaser3, React, Typescript

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

🔹Typescript
🔹React
🔹Webpack
🔹HTML/CSS
🔹Phaser3

🤩 Кстати, недавно мы в Библиотеке программиста рассказывали историю разработки браузерной игры Angry Pumpkins, которую полностью написали генеративные модели: GPT-4 + Midjourney / DALLE.