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

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

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

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
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
🤨Веб-компоненты действительно окружены ореолом глубоких заблуждений и непонимания — и с этим надо что-то делать.

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

📌Автор статьи затронул эту тему и разобрал все по полкам:

👉Веб-компоненты — это не замена вашему фреймворку
👉Главное — это жизненный цикл
👉Композиция и разметка
👉Shadow DOM — это опция
👉Объектная модель
Please open Telegram to view this post
VIEW IN TELEGRAM
Frontend Meetup от СберМаркет Tech 🔥

В программе:

🟡 Что такое Web3 и как под него разрабатывать. Расскажет Алексей Авдеев, CTO в Mish.

🟡 Pet-проекты — это зло. Вредные советы для фронтендеров от Александра Водолазских, руководителя направления разработки интерфейсов клиентского продукта в СберМаркете.

🟡 Как мы добавляли видео на Авито. Кейс от фронтенд-разработчика Авито Романа Миронова.

🗓 21 сентября, 19:00 Мск • офлайн + онлайн

Регистрируйся по ссылке, чтобы забронировать место в офлайне или получить ссылку на трансляцию! До встречи 😎

Реклама. ООО «Инстамарт Сервис», 115035, Москва, ОГРН 1187746494980. 16+
Таненбаум vs Торвальдс (микроядро vs монолит)

Старый добрый профессиональный спор, который перерос в холивар. Первыми его начали известные разработчики Эндрю Таненбаум и Линус Торвальдс в начале 90-х в одной из новостных групп «Юзнета».

Таненбаум и Торвальдс холиварили из-за архитектуры ядра ОС. Первый утверждал, что лучше использовать микроядра, второй — монолитное ядро. И сколько раз они не возвращались к публичному обсуждению архитектуры ядра, каждый оставался при своём мнении.

А что сейчас? Да ничего не изменилось. Холивар разгорается при обсуждении абсолютно любой темы.

Любите холиварить?
👍 — конечно — в споре рождается истина
🤔 — ненавижу — только мешает работать
💯 — смотря где и при каких обстоятельствах

#холивар
🛠 Event Loop в деталях

JavaScript был спроектирован как однопоточный язык программирования. Тем не менее у него есть механизм Event Loop, который позволяет выполнять «асинхронные» операции.

Движок JavaScript выполняет одну операцию за раз — и все, что является асинхронным отправляет в Event Loop. Давайте заглянем под капот этого механизма и разберем, почему Event Loop вообще был создан, как с ним работать и почему про него спрашивают на собесах.

🔗 Читать
Креатив от третьего докладчика👇

Чтобы стать крутым сеньором,
Нужно срочно на реакте,
Ангуляре, вью и квике,
Вам закодить ту-ду лист.


📌А вот и подборка докладов:

📺Алексей Авдеев, CTO в Mish. Что такое Web3 и как под него разрабатывать.
📺Роман Миронов, фронтенд-разработчик в Авито. Как мы добавляли видео на Авито.
📺Александр Водолазских, руководитель направления разработки интерфейсов клиентского продукта в СберМаркете. Pet-проекты – это зло. Вредные советы для фронтендеров.

#чтопроисходит
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🚀С появлением на горизонте новой функции CSS linear() возможности того, что мы можем сделать для создания естественной анимации и переходов в будущем, значительно расширяются. Смотрите сами реализацию того, что на демо:

:root {
--elastic-out: linear(
0, 0.2178 2.1%, 1.1144 8.49%,
...
1.0056 72.24%, 0.9981 86.66%, 1
);
}

button {
transition: scale 0.5s var(--elastic-out);
}

button:active {
scale: 0.8;
transition: scale 0.5s ease;
}

Посмотрите на текущее состояние смягчения в CSS и на то, что ждет нас в будущем. Очень проработанный материал, написанный доступным языком👇

👀Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
🤩TypeScript Origins: The Documentary

Друзья, отложите все дела. Перед вами док про TypeScript от команды OfferZen, в котором участвуют такие основные контрибьюторы и члены сообщества, как Anders Hejlsberg, Steve Lucco, Luke Hoban, Daniel Rosenwasser, Ryan Cavanaugh, Amanda Silver, Matt Pocock, Josh Goldberg и многие другие.

📺 Смотреть
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Deno 1.37: современный JavaScript в Jupyter Notebooks

Команда Deno придумала кое-что довольно изящное. Deno 1.37 поставляется с интеграцией Jupyter Notebook, поэтому вы можете создавать интерактивные сессии REPL, но используя знакомый и любимый JavaScript, а не Python.

$ deno jupyter --unstable
💡Простой способ показать относительное время в удобочитаемом формате.

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

#css #tip by Shripal Soni
388. Safari 17 и TP 179, :has в Firefox, State of HTML, Scroll-Driven…
Веб-стандарты
🎙Свежий выпуск подкаста «Веб-стандарты»: Алексей Симоненко, Никита Дубко, Андрей Мелихов про Safari 17 и TP 179, :has в Firefox, State of HTML 2023, Scroll-Driven Animations и TypeScript, который иногда мешает.

00:01:08 Релиз Safari 17
00:24:39 Safari TP 179
00:28:07 :has в Firefox
00:30:07 State of HTML 2023
00:41:25 Scroll-Driven Animations
00:52:31 TypeScript иногда мешает
01:15:48 Ответы на вопросы

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

#подкасты
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡️Последний курс по алгоритмам, который вам понадобится

Знаете ли вы, что у Frontend Masters есть курс по алгоритмам с примерами на TypeScript? Бесплатно и без кредитки. Все, что вам нужно, — это электронная почта.
Please open Telegram to view this post
VIEW IN TELEGRAM
📌О порядке применения трансформаций

CSS инженер София Валитова проверила по спецификации, в каком порядке применяются CSS-свойства transform, transform-origin, translate, rotate и scale, — и вот на что следует обратить внимание при работе с этими свойствами:

1⃣Меняем центр трансформации блока согласно свойству transform-origin.
2⃣Перемещаем на расстояния из свойства translate по всем осям.
3⃣Поворачиваем на углы из свойства rotate по всем осям.
4⃣Масштабируем на вычисленные значения scale по всем осям.
5⃣Применяем каждую из функций свойства transform по списку слева направо.

Читайте краткие заметки Софии о том, что это значит на практике.
Какой(-ую) инструмент/фреймворк/библиотеку вы используете для тестирования JavaScript? Можно выбрать несколько вариантов.
Anonymous Poll
15%
Mocha
9%
Jasmine
68%
Jest
6%
Karma
18%
Cypress
4%
Chai
1%
Ava
1%
Tape
15%
Свой вариант (напишу в комментариях)
15 полезных сервисов (на самом деле 14 сервисов + 1 статья-чеклист) для фронтендера, которые упростят жизнь и сохранят нервы

📌Разметка и доступность

1. Emmet — генерирует HTML-кода из CSS-селекторов и не только.
2. Can I Include — подскажет, можно ли класть один тег в другой.
3. HTML head — содержит список всего, что может быть в <head> страницы.
4. Logical Content Flow — поможет обнаружить проблемы с заголовками, их порядком и отображением.
5. Build a Better Mobile Input — поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных устройствах.
6. Weblind — содержит рекомендации по разработке сайтов для людей с нарушениями зрения.
7. Inclusive Components Содержит примеры реализации слайдеров, аккордеонов и других компонентов с упором на доступность.
8. Axe — браузерный плагин для комплексной проверки доступности страниц.
9. Good Email Code Справочник и набор рекомендаций для «пуленепробиваемой» верстки писем.
10. How to Favicon in 2021 — статья-чеклист о том, как добавлять фавиконку на сайт без лишнего кода.
11. W3C Validator — валидатор HTML-кода.

📌Инструменты для оптимизации и работы с картинками

1. Squoosh — приложение, CLI и API для оптимизации графики.
2. SVG URL Encoder — кодирует SVG в URL-строку, чтобы использовать его в background без base64. При этом SVG остается читаемым, и его можно править прямо в CSS.
3. SVG OMG — оптимизатор SVG. Содержит массу настроек и позволяет ужимать неоптимизированные SVG в десятки раз.
4. Social Image Preview — предпросмотрщик изображений для соцсетей.

#инструменты
💡Получение контроля над сетевой активностью с помощью Priority Hints

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

⚖️Читать
💡Возможно, вы не знали, но кнопку отправки формы можно использовать вне HTML-формы.

#html #tip by Shripal Soni