Библиотека фронтендера | 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
加入频道
385. Firefox 117, form-sizing и релизы Chrome, State of CSS 2023…
Веб-стандарты
#подкасты

🎙Свежий выпуск подкаста «Веб-стандарты»: Алексей Симоненко, Никита Дубко, Андрей Мелихов про Firefox 117, form-sizing и релизы Chrome, State of CSS 2023, велосипеды Dropbox и Astro 3.0.

00:01:23 Firefox 117
00:08:29 Прототип form-sizing
00:20:25 State of CSS 2023
00:58:20 Велосипеды Dropbox
01:20:00 Astro 3.0
01:36:00 Ответы на вопросы

YouTube | Apple Подкасты | Google Подкасты | Яндекс Музыка | Сайт подкаста
Какой(-ая), по вашему мнению, фронтенд фреймворк/библиотека будут наиболее активно развиваться в следующем году?
Anonymous Poll
56%
React
16%
Angular
2%
Alpine.js
1%
Ember
1%
Stencil
32%
Vue.js
3%
Preact
15%
Svelte
5%
Qwik
8%
Другой вариант (напишу в комментарии)
This media is not supported in your browser
VIEW IN TELEGRAM
#css #tip by Shripal Soni

💡Получаем доступ к значению HTML-атрибута как к строке внутри CSS: наглядный пример для фронтенд-разработчика

👉 Поиграть можно здесь.
🤔Татьяна Дерягина, Mobile QA в СберМаркете, делится своей историей борьбы с выгоранием. Она про то, как ей понадобилось выгореть до углей, чтобы понять, что ворк-лайф баланс необходим. Причём не только, чтобы не остаться совсем без лайф, но и чтобы делать свою любимую ворк хорошо и с удовольствием.

🚀Мини-подборка советов на основе статьи:

📌Как понять, что что-то идёт не так? Это сравнимо с постоянным стрессом — поэтому вы не можете:
• расслабляться;
• радоваться;
• придумывать новое;
• планировать будущее и вообще смотреть на него широко открытыми глазами;
• расставлять приоритеты;
• заставить себя сделать необходимые задачи; 
• концентрироваться; 
• запоминать.

📌Как не попасть в зависимость от работы? Просто имейте это в виду:

1️⃣Работа никогда не закончится
2️⃣Незаменимых людей нет
3️⃣Ты не перестанешь расти, если будешь себя хвалить
4️⃣Не кори себя за «лень», когда чувствуешь усталость
5️⃣Не бойся просить о помощи
6️⃣Умерь свой перфекционизм
7️⃣Тайм-менеджмент реально помогает

📌Что делать, если ты уже выгорел?

⚠️Научиться отдыхать, но это еще не все.

А теперь по шагам: что делать, если выгорел👇

Отдохни 👉 Выйди на прогулку 👉 Вспомни, какие занятия доставляли тебе удовольствие 👉 Системно займись тайм-менеджментом 👉 Будь себе другом, относись к себе бережно и работай над отношениями, даже если эти отношения — с работой
Please open Telegram to view this post
VIEW IN TELEGRAM
#айтисобытия #лучшиепрактики

🚀 Весь плейлист можно посмотреть здесь. А вот лучшие доклады заслуживают отдельного внимания:

🌐 Chrome DevTools — спрятанные полезности / Никита Дубко (Яндекс)
🌐 Ораторское мастерство как инструмент развития карьеры / Александра Прокшина (ARTW)
🌐 Инженерный подход к внедрению дизайн-системы / Семен Левенсон (Дзен)
🌐 Высококонверсионные собеседования / Андрей Смирнов (X5 Group)
🌐 Синий свет — зеленый свет: релизим без даунтаймов / Николай Тихонов (Тинькофф)
🌐 Webpack: заменить нельзя оставить / Евгений Кувшинов
🌐 Микросервис головного мозга. Рецепты качества / Михаил Трифонов (Сloud)
🌐 История о том, как мы на Module Federation съезжали / Максим Смирнов (Тинькофф)
🌐 Рано выбрасывать iframe в 2022-м году / Андрей Кузнецов (РБС)
🌐 Многопоточность на фронте. Абсурд или прекрасное архитектурное решение? / Игорь Костяков (IBS Dunice)
Please open Telegram to view this post
VIEW IN TELEGRAM
А ведь действительно, некоторые подписчики верно подметили в комментариях к опросу про 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