Библиотека фронтендера | 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
加入频道
А ведь действительно, некоторые подписчики верно подметили в комментариях к опросу про Astro, ведь буквально недавно был представлен релиз Astro 3.0.

🚀На 30% быстрее и мощнее, чем когда-либо. Внутри: View Transitions, Image Optimization, JSX Fast Refresh и многое другое.

💡Статью-анонс нового выпуска обязательно стоит прочитать, ровно как и материал в блоге Chrome про Astro View Transitions.

💬Кто-то уже использовал? Поделитесь опытом и впечатлениями.
Не нужно учить Svelte, потому что... угадайте что?

Вы уже знаете его! Это всё JavaScript, только в более крутом исполнении. По крайней мере, так считает автор статьи.

🔍Что такое Svelte?

UI-фреймворк: быстрый, простой и довольно популярный.
Встроенный компилятор, преобразующий .svelte-файлы в чистый JavaScript-код. Итоговый результат работы фреймворка представляет собой код без намека на этот самый фреймворк, перекладывая всю тяжелую работу на этап сборки приложения.
Лаконичный: только HTML, CSS и JS.
Полный: встроенное управление состоянием и стили, ограниченные компонентами.

🤖Svelte vs React

Эффекты/Реактивность: Svelte автоматически отслеживает зависимости.
Управление состоянием: Svelte предлагает простое решение "pub-sub".
Жизненный цикл: в отличие от React, Svelte предоставляет более явные методы для управления жизненным циклом компонентов.

🎨Примеры: в то время как в React вам нужны обертки, Svelte позволяет вам напрямую работать с библиотеками, такими как Chart.js.

🚀Начало работы с Svelte

Основы: обязательно начните с документации.
Создайте проект: попробуйте создать свой собственный проект на Svelte — идеи для проектов также есть в статье.

🌟Заключение

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

🔗Читать статью
🚀 В Firefox 117 завезли несколько полезных фич для разработчиков:

В инспекторе совместимости рядом с CSS-свойствами, которые могут привести к проблемам веб-совместимости, теперь отображается значок. При наведении на него появляется всплывающая подсказка со сведениями о том, какие браузеры не поддерживают это свойство, и ссылкой на страницу свойства в MDN.
console.clear() больше не очищает вывод консоли при включённой настройке «Непрерывные логи».
В сетевом мониторе появилась пометка о том, что запрос выполнен через прокси.
При просмотре сгруппированных правил CSS теперь отображаются отступы и открывающие/закрывающие скобки.
Появилось предупреждение о проигнорированных свойствах выделенных псевдоэлементов.
Реализована подсветка контура offset-path.
Please open Telegram to view this post
VIEW IN TELEGRAM
🚀14 правил линтинга, которые помогут вам писать асинхронный код на JavaScript

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

📋В руководстве приведена мини-коллекция правил линтинга, которые помогут вам писать асинхронный код на JavaScript/TypeScript и Node.js.

📌Часть правил по умолчанию поставляются с ESLint, часть предназначены для Node.js, а остальные — для TypeScript.

👀Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
386. Safari, Firefox, Bun, Node.js, веб-фичи, Figma, марсианский…
Веб-стандарты
🎙Свежий выпуск подкаста «Веб-стандарты»: Андрей Мелихов, Никита Дубко, Юля Миоцен, Вадим Макеев, Алексей Симоненко про Safari, Firefox, Bun, Node.js, веб-фичи, Figma, марсианский плагин, Topics API и отказ от TypeScript.

00:01:46 Safari TP
00:12:10 Планы Firefox
00:25:25 Bun 1.0
00:46:33 Env в Node.js
00:54:32 Каталог веб-фич
01:11:18 Новости Figma
01:21:50 Марсианский плагин
01:26:08 Google и Topics API
01:41:23 Отказ от TypeScript
02:03:48 Ответы на вопросы

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

#подкасты
Please open Telegram to view this post
VIEW IN TELEGRAM
🛠 Принцип работы async/await в JavaScript

Если вам доводилось работать с JavaScript, то вы наверняка встречались с синтаксисом async/await. Эта функциональность позволяет прописывать асинхронную логику синхронным образом, упрощая тем самым её понимание.

Некоторым ветеранам JS известно, что async/await — это просто синтаксический сахар для существующего Promises API. Это означает, что в JS должен быть способ реализации функциональности async/await без использования ключевых слов async и await, хоть и более громоздкий. Именно об этом и пойдёт речь под катом.

🔗 Читать
📺 TypeScript Origins: The Documentary (трейлер)

Совсем скоро будет предоставлен док про TypeScript от команды OfferZen, а сейчас самое время уделить 153 секунды своего времени на трейлер.

👀 Смотреть
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥Команда Тинькофф объединила все библиотеки Angular, работа над которыми велась в течение пяти лет, в проект Taiga Family.

💪 Ребята начали еще с Angular 4 и до сих пор держатся. Вас ждут:

🔻Web APIs for Angular
🔻Event manager плагины
🔻Polymorpheus
🔻Maskito и многое другое

🔗GitHub
This media is not supported in your browser
VIEW IN TELEGRAM
💡Улучшаем UX для пользователей при нажатии на hover-based action buttons, которые используют только клавиатуру и сенсорный экран.

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

#css #tip by Shripal Soni
🍪Хоть сейчас и мало кого заинтересуешь «печеньками» и «кикером в офисе», эйчары до сих пор в описаниях вакансий делают упор на удобном расположении офиса, бесплатном кофе и классных тимбилдингах.

🧗‍♀️Но это, скорее, верхушка айсберга и приятное дополнение к тому, что должно помогать сотруднику сохранять страсть к своей работе и не выгореть на первом же году работы. А «под водой» — интересные и разноплановые задачи, которые бросают вызов нашим скиллам и заставляют получать новые знания, и благодаря которым каждый день мы приходим на работу с удовольствием.

💬А что «зажигает» именно вас? Ради чего вы каждый день приходите на работу или садитесь за рабочий компьютер в случае удаленки? Как думаете, зависит ли счастье сотрудников от интересных задач?
🤩 Неделю назад был представлен крупный релиз Bun 1.0

Универсальный набор инструментов для запуска, сборки и тестирования JavaScript/TypeScript стал еще лучше и быстрее. Под катом — подробности новой версии.

👀 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
👀 Манипулирование данными JPEG и EXIF в JavaScript: практический взгляд на то, как выбирать формат JPEG и читать/заменять теги EXIF напрямую, не полагаясь на стороннюю библиотеку.

👉Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
🎓💼 ТОП-9 не самых очевидных компаний для стажировки в ИТ

Везде просят опыт работы... Но где его взять? Как раз об этом сейчас и расскажем!

🔗Читать статью
🔗Зеркало
This media is not supported in your browser
VIEW IN TELEGRAM
Emil Kowalski — разработчик библиотеки всплывающих компонентов для React под названием Sonner.

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

👀 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 В чем разница между выражениями (expressions) и инструкциями (statements) в JavaScript?

👨‍🎓Если кратко, то одни после выполнения возвращает какое-либо значение, в то время как другие просто выполняют определённое действие.

📌Закрепляем эти, казалось бы, простые вещи на практике и разбираемся, как они отразились в React.

👀 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
⚒️ ТОП-27 плагинов для Visual Studio Code в 2023

Предлагаем список лучших расширений для VS Code в 2023 году: продуктивность, окрашивание сниппетов, контроль версий, форматирование, линтинг и отладка.

🔗Читать статью
🔗Зеркало
387. Chrome 117 и бета 118, DevTools, экологичный веб, миксины и…
Веб-стандарты
🎙Свежий выпуск подкаста «Веб-стандарты»: Андрей Симоненко, Никита Дубко, Юля Миоцен, Вадим Макеев про Chrome 117 и бету 118, DevTools, экологичный веб, миксины и функции в CSS, Interop 2024 и Figma.

00:01:46 Chrome 117
00:12:20 Бета Chrome 118
00:42:21 Chrome DevTools
00:48:49 Экологичный веб
00:58:19 Миксины и функции в CSS
01:25:54 Interop 2024
01:29:59 Новости Figma
01:36:19 CSS в Figma
01:49:16 Ответы на вопросы

YouTube | Apple Подкасты | Google Подкасты | Яндекс Музыка | Сайт подкаста
This media is not supported in your browser
VIEW IN TELEGRAM
🗺Команда дата-журналистики Яндекса составила карту хард-скиллов для фронтендеров

Для этого они собрали программистские запросы, на которые были ответы ссылками на Stack Overflow. Навыки тут — это теги вопросов на Stack Overflow, а их популярность — это число запросов.

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

📌Еще два интересных списка: к этим фреймворкам и инструментам особенно вырос интерес по сравнению с прошлым годом

➡️Библиотеки и фреймворки
1. nuxtjs3
2. next-auth
3. pinia
4. prisma
5. rtk-query
6. react-query
7. react-three-fiber
8. sveltekit
9. echarts
10. monaco-editorпока

➡️Инструменты разработки
1. vitest
2. pnpm
3. vite
4. react-devtools
5. playwright
6. ts-jest
7. vercel
8. nrwl-nx
9. storybook
10. ts-node

👉Карту смотрим тут.
This media is not supported in your browser
VIEW IN TELEGRAM
🟡 CSS Loaders — самая большая коллекция анимаций загрузки на чистом CSS.

Копируйте и забирайте себе в один клик!
Please open Telegram to view this post
VIEW IN TELEGRAM