Библиотека фронтендера | 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
加入频道
Вам не нужен Moment.js

Подборка функций для замены библиотеки moment.js при работе с датами и временем.

В закладки: https://prglb.ru/ovb6

#javascript #library
Полный список решений для валидации форм в React-приложениях

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

👉 Formik
👉 React Final Form
👉 Unform
👉 React Form
👉 react-json-schema-form
👉 React Hook Form
👉 Redux Form
👉 Formsy
👉 Simple React Validator

Подробный обзор с примерами использования здесь: https://prglb.ru/5wgzp

#frameworks #react #validation
9 прекрасных проектов, которые можно создать на ванильном JavaScript

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

Список идей с видео-объяснениями: https://prglb.ru/5j7bt

#javascript #projects
Инклюзивные компоненты: слайдер

Слайдеры похожи на мужчин. Буквально не все они плохие. Кто-то из них даже отзывчивый и тактичный.

Все, что вы должны знать о слайдерах в переводе Татьяны Фокиной: https://prglb.ru/4ra49

#accessibility #interface
SVG-редакторы в браузере

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

Есть множество инструментов для работы с SVG, в том числе браузерные:

👉 editor.method.ac
👉 SVG edit
👉 Vector Paint
👉 Drawing SVG
👉 Vecteezy Editor
👉 Vectr
👉 Janvas
👉 Boxy SVG
👉 RollApp

Подробный список с описаниями: https://prglb.ru/5gefr

#tools #svg
Как складные девайсы повлияют на фронтенд-разработку?

Новые возможности или новый кошмар?
Читать: https://prglb.ru/43ced

#web #device
Chrome University

Устройство самого популярного браузера Google Chrome в 22 лекциях.

Смотреть (на английском): https://prglb.ru/5soii

#video #browser
Javascript — единственный язык программирования для браузеров. Если не знаешь JS, программировать будет туго. Зато, если знать JS и ещё пару фреймворков, можно стать перспективным фронтенд-разработчиком.

Для тех, кто хочет научиться разрабатывать веб-приложения и сайты, Skillfactory приглашает на курс «Frontend-разработчик».

За полгода вы:
— Научитесь разрабатывать адаптивные сайты с использованием CSS, Flexbox и интерактивные сайты и приложения на JavaScript и HTML.
— Создадите сайт-визитку, сверстаете лендинг, разработаете аналог Trello на React — канбан-доску и познакомитесь с популярными фреймворками Node.js, Vue и Angular.
— Soft Skills прокачаете на бонусном модуле и соберете портфолио на Github.
Карьерный центр в Skillfactory помогает выпускникам с трудоустройством в крупные IT-компании, так что дерзайте.

🚀Получите курс со скидкой 40%: https://clc.to/-OBN6w
👋 Всем привет!

23 июля приглашаем на онлайн-митап сообщества разработчиков MSK VUE.JS.

В программе митапа:

1️⃣ Разработка конструктора отчетов при помощи Cube.js.

2️⃣ 5 действенных техник оптимизации vue-приложений.

3️⃣ Решение проблем REST API при помощи GraphQL.

Подробности и регистрация 👉 https://clc.to/MSK-VUE.JS
​​Пробовали ли вы заниматься фронтенд разработкой на React без подключения к интернету?

Для студенческих проектов и фриланса очень важно, чтобы посторонние зависимости не были сломаны после завершения работ. Однако, некоторые npm пакеты докачивают файлы с облака Amazon, что в случае с node-sass убило ошибкой 404 кучу дипломных проектов студентов. Полностью обособленный от интернета инструментарий разработки с применением React, где в качестве системы сборки выступает только TypeScript Compiler, можно посмотреть в этом репозитории:

https://github.com/tripolskypetr/material-ui-umd
Что за… «замыкание»?

Дэн Абрамов объясняет замыкания в JavaScript на множестве примеров: https://whatthefuck.is/closure

#javascript #core
Как вставить адаптивное видео на сайт

В мире адаптивных и гибких макетов в Интернете, один единственный медиа тип стоит на пути к идеальной гармонии - видео. Разбираемся, как сделать их адаптивными, сохраняя при этом соответствующую высоту и не нарушая пропорции.

https://prglb.ru/ty9i

#interface
Интересные находки в новой верстке Facebook

Ahmad Shadeed разобрал новый дизайн соцсети и нашел много интересных приемов: https://prglb.ru/9vgv

#css #html
Паттерны реактивности в 2020 году

Большое исследование моделей реактивности в современном фронтенде: https://prglb.ru/3jugh

#frameworks #tools #reactivity #frontend #bestpractices
Почему нельзя установить размер шрифта у посещенной ссылки?

Но при этом можно изменить цвет? И как это связано с безопасностью?

https://prglb.ru/1t3m2

#css #security #browser
💥Станьте востребованным: освойте Flutter и Dart на онлайн-курсе «Flutter в мобильной разработке» от Skill-Branch!💥

Начните создавать современные приложения под Android и IOS, как это уже делают Google, Alibaba, eBay и другие мировые компании.✊🏼

«Flutter в мобильной разработке» от Skill-Branch – это:

• 3,5 месяца обучения мультиплатформенной разработки
• 40+ академических часов лекций
• 100+ часов практики
• 11 закрытых мастер-классов
• Система автоматической проверки заданий
• Апгрейд портфолио: мобильное приложение на Flutter, созданное вами👍🏼
• Сертификат, подтверждающий полученные знания
Живой чат сообщества для общения. Присоединяйтесь!

⚠️Количество мест ограничено!⚠️

⚡️Рассрочка 0/0/24 - Учитесь за 1630 ₽/мес.
⚡️Программа лояльности и скидки
⚡️Обучение за счёт работодателя

Оставьте заявку на сайте сейчас!
Руководство по работе с SVG

Огромный гайд по работе с векторной графикой в Adobe Illustrator, Sketch и Figma.

https://prglb.ru/4wn1v

#svg #tools
Состояние загружаемых данных

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

https://prglb.ru/1psv8

#bestpractices
Плагины Vue, которые вам очень нужны, но вы об этом еще не знаете

https://prglb.ru/31saz

#vue #frameworks
Пробуем Deno на примере простейшего сервера и React SSR

Небольшой практический видео-обзор Deno: https://prglb.ru/4cv9

#deno #tools #video