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

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
11 распространенных заблуждений о микрофронтендах

Развенчиваем популярные мифы, которые мешают составить правильное представление о технологии:

- о том, что нужен JavaScript и куча разных фреймворков
- о разделении компонентов и обмене данными
- об отладке, микросервисах и монорепозиториях

Читать: https://prglb.ru/4b7h3

#microfrontends
CSS анимация

Плейлист от Виталия Менчуковского, посвященный анимации в CSS: https://prglb.ru/3w5u7

#video #css #animation
Правильный ответ li:nth-child(-n + 2)

В функции nth-child можно использовать отрицательный множитель для параметра n. Таким образом, условию будут соответствовать только элементы с индексами 1 и 2.

Еще несколько дельных советов по CSS: https://prglb.ru/zssn
Итераторы, генераторы и протокол итерации в JavaScript

Статья рассказывает:
- как происходит итерация по умолчанию строк, массивов и других структур под капотом (спойлер: с помощью итераторов)
- как написать кастомный итератор, чтобы итерировать все, что угодно
- что такое функции-генераторы и нужны ли они разработчику

Читать: https://prglb.ru/pe6e

#javascript #core
Шпаргалка по SEO для разработчиков и веб-мастеров

29 пунктов, которые обязательно нужно проверить до и после запуска сайта!

Читать: https://dev.to/pagely/seo-cheat-sheet-for-devs-5h1g

#seo
Утечки памяти в веб-приложениях

Откуда берутся - и как бороться?

Когда код вашего приложения выполняется на клиентской стороне, нужно заботиться о ресурсах устройства, на котором он работает. Утечки могут съесть целые гигабайты памяти - за это пользователь вам спасибо не скажет!

Читать: https://prglb.ru/vbc2

#browser #performance #bestpractices #javascript
Проблемы с тултипами - и чем их заменить

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

Читать: https://adamsilver.io/articles/the-problem-with-tooltips-and-what-to-do-instead/

#interface
​​Сегодня недооценивают проблему конфиденциальности с «тыла». Никто из нас не застрахован от того, что под давлением мы будем вынуждены показать переписку с рук. В роли принуждающего может быть кто угодно, начиная от злоумышленника и заканчивая пограничником, в любой точке мира.

Ни один из популярных мессенджеров не имеет защиты от подобной «атаки». Ребята из Postuf предлагают тебе исправить эту ситуацию на основе открытого кода Telegram. Если твое решение окажется лучшим, то ты получишь 5000$. Твоей задачей будет разработать принцип «двойного дна» в оригинальном клиенте Telegram.

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

Подробности об участии здесь: https://yangx.top/postuf/17
🕵️ Puppeteer: парсинг сайтов с JavaScript

Библиотека Puppeteer позволяет создавать веб-скраперы, имитирующие действия пользователя на странице.

Читать: https://prglb.ru/4o5mg

#javascript #parsing #browser #tools
Вакансия: Front-end разработчик в Tilda (офис / Москва)
Компания: Tilda Publishing — платформа для создания сайтов, интернет-магазинов или посадочных страниц.

👨‍🎓 Спектр задач: В Тильде есть несколько направлений, которые мы рассматриваем как внутренние продукты. Одним из них является Библиотека блоков. Мы ищем разработчика, который будет заниматься созданием новых блоков и поддержкой существующих, а также развитием нашего внутреннего фреймворка для их создания.

📌 От кандидата мы ожидаем:
- Отличные знания HTML, CSS, JS
- Опыт кроссбраузерной и адаптивной верстки
- Базовые знания Git
- Технический английский
- Умения разбираться в чужом коде и писать читаемый код
- Внимание к UX, желание создавать удобные интерфейсы
- Навык расставлять приоритеты и самостоятельно доводить задачи до финальной стадии

Ссылку на резюме и сопроводительное письмо отправлять на [email protected]

➡️ Подробности - https://proglib.io/vacancies/front-end-razrabotchik-v-tilda-tilda-publishing-2020-06-20
3 способа коммуникации между компонентами в Svelte

Из статьи вы узнаете, как наладить общение между родительскими и дочерними компонентами в Svelte-приложении.

Вкратце - есть три способа:
1️⃣ Передать в дочерний компонент обработчик-замыкание, имеющий доступ к состоянию родителя
2️⃣ Передать в дочерний компонент само состояние через переменную
3️⃣ Использовать dispatcher для передачи сообщений

Подробнее: https://prglb.ru/2h75x

#frameworks #svelte
Правильный ответ: 1 января 2020 года

Конструктор даты в JavaScript самостоятельно исправляет все ошибки параметров. Минус первый месяц 2020 года превращается в последний месяц 2019. А лишний 32-й день переходит на следующий месяц.

У JavaScript очень много талантов, но работа с часовыми поясами в их список не входит. Однако и разработчики зачастую не до конца понимают, что именно им нужно. Чтобы глубже разобраться в теме, рекомендуем лонгрид Работа с часовыми поясами в JavaScript.
13 советов по безопасности на фронтенде

Фронтенд несет ответственность за безопасность приложения не меньше, чем бэкенд. Поэтому не расслабляемся и читаем, как защититься от "злых хакеров": https://prglb.ru/7n89

#security
Простые директивы Vue для быстрой разработки

👉 v-hotkey - поддержка горячих клавиш
👉 v-click-outside - отслеживание кликов вне компонента
👉 v-clipboard - копирование в буфер

Подробнее о том, как подключить и использовать: https://prglb.ru/kfib

#frameworks #vue
Курс по основам UI-дизайна

Маленький, но важный курс Гэри Саймона на Scrimba, в котором вы разберетесь с базовыми концепциями UI (цвет, контраст, типографика и т. д.) и научитесь правильно их использовать.

Курс на английском, состоит из 14 коротких видео уроков, каждый из которых сопровождается живыми примерами кода.

Пройти курс (бесплатно): https://prglb.ru/vp5o

#video #interface #design
10 способов ускорить загрузку вашего сайта

Десять моментов, на которые стоит обратить внимание, чтобы сократить время загрузки страниц.

Читать: https://prglb.ru/1djoa

#performance