Библиотека фронтендера | 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
加入频道
5 вопросов по JavaScript на которые вы должны знать ответ

Статья старая, но вопросы все еще актуальны 🤓

Проверить себя: https://prglb.ru/2hlfv

#javascript #interview
«Пройди наш курс, стань программистом, будешь самым богатым, красивым и тебе дадут!» - примерно такие лозунги смотрят на нас в каждом третьем рекламном объявлении\посте.

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

Но как и с чего начинать? А главное - где взять деньги на месяцы обучения на разнообразных курсах разной степени онлайновости?

Автор канала @frontStarter задавался теми же вопросами. А потом просто начал учиться по тем материалам, которые можно свободно и легально достать в интернете, постепенно выходит на рынок фриланса, и собирается навсегда оставить офисную работу.

Если ты тоже мечтаешь сменить профессию, но не знаешь с чего начать, и все еще ищешь подход, подписывайся: https://yangx.top/frontstarter
a11y_styled_form_controls

Библиотека доступных стилизованных элементов форм.

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

Здесь все уже сделано за нас - просто берем и пользуемся. Есть еще подробное описание каждого компонента с учетом разных состояний.

Доступные контролы: https://prglb.ru/koiw

#tools #library #interface
25 дней CSS-анимации

Однажды одной разработчице стало скучно и она устроила себе 20-дневный челлендж. Все пошло так здорово, что он превратился в 25-дневный.

Читать про челлендж: https://prglb.ru/1rd7u
Смотреть готовые анимашки: https://prglb.ru/jv0t

#css #animation
Совет: отключайте анимацию при ресайзе

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

Примерный код:
let resizeTimer;
window.addEventListener("resize", () => {
document.body.classList.add("resize-animation-stopper");
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
document.body.classList.remove("resize-animation-stopper");
}, 400);
});


.resize-animation-stopper * {
animation: none !important;
transition: none !important;
}


Источник: https://prglb.ru/1gxn5

#css #interface #performance
Приведение типов в JavaScript

Полное погружение в преобразование типов - от спецификации до реализации.

Читать: https://prglb.ru/3q5zd

#javascript #core
Обработка миллионов строк данных потоками на Node.js

Приходилось ли вам обрабатывать с помощью Node.js одновременно миллионы строк базы данных и выводить всё это на веб-страницу? Это непросто, но у нас есть готовое решение.

Узнать: https://prglb.ru/1wq58

#tools #node
Мифы о контрасте цветов и доступности

Из статьи вы узнаете, что:

👉 "менее контрастный" не всегда означает "хуже читаемый"
👉 элементы интерфейса и текст имеют разные требования контрастности
👉 серый не значит недоступный
👉 дальтоники хорошо воспринимают контраст
👉 цветовое состояние не всегда нужно сопровождать пояснениями

Подробнее: https://prglb.ru/43xas

#interface #accessibility
Знакомство с Redux

Отличный плейлист из 9 коротеньких видео, который полностью объяснит вам всю суть Redux.

👉 Вы самостоятельно создадите хранилище и изолированное от внешних воздействий состояние приложения.

👉 Научитесь изменять состояние с помощью действий разных типов. Поймете, зачем нужны action creators (динамически создавать параметризованные действия).

👉 Напишете редьюсер - единственный узел системы, который будет модифицировать состояние.

👉 Даже установите первничную связку вашего личного redux с приложением на React.

Когда сам пишешь что-то с нуля, разобраться гораздо проще - и запоминается намного лучше.

Смотреть: https://prglb.ru/5k126

#video #tools #redux
Что объединяет фотохостинг Pinterest и приложение для планирования Trello? Оба они написаны на JavaScript.
Если английский — это основной язык современного мира, то JS — это основной язык современного интернета, на нем написано большинство сайтов, на которые вы заходите каждый день.

Для тех, кто хочет погрузиться в разработку визуальной части веб-приложений, в SkillFactory стартует курс «Frontend-разработчик». За 6 месяцев обучения вы освоите HTML, CSS, кроссбраузерную и адаптивную верстку, JavaScript и React и добавите в своё портфолио 6 проектов + дополнительный модуль про soft skills поможет подготовиться к собеседованиям.

Узнайте подробнее о программе курса: https://clc.to/EiTo5Q
Hammer.js для обработки жестов

Крошечная dependency-free библиотека, которая умеет распознавать жесты пользователя (тапы, свайпы, повороты и т. д.)

Можно достаточно тонко настраивать имеющиеся события и даже создавать на их основе собственные.

Взять себе: https://prglb.ru/6yrs

#tools #library
Доступность сайта: 6 быстрых проверок

Автоматизированное тестирование доступности (Lighthouse) - отличная вещь, но не проверяет все, что должно быть проверено. Кое-что придется доделывать руками.

Вот вам маленький список обязательных тестов:

‼️ Наличие альтернативных описаний у изображений и их соответствие картинке
‼️ Адекватное и понятное отображение страницы БЕЗ стилей
‼️ Валидность HTML-кода
‼️ Логичная структура документа (уровни заголовков, семантические элементы)
‼️ Проверка в монохромном режиме - цвет не должен быть единственным носителем важной информации
‼️ Полная доступность с клавиатуры

Источник: https://prglb.ru/11vnl

#interface #accessibility
Большое руководство по Svelte

Svelte - фреймворк с уникальным подходом к сборке веб-приложений. Даже если вы никогда про него не слышали, руководство вам все подробно расскажет.

Читать: https://prglb.ru/2t9a1

#tools #frameworks #svelte
Современное тестирование фронтенда с Cypress

Cypress - фреймворк для автоматизации тестирования в браузере. С его помощью можно проводить сложные интеграционные и сквозные тесты по сценарию.

Понятная документация: https://prglb.ru/1bf4f

Читать статью: https://prglb.ru/17wh5

#tools #testing
This media is not supported in your browser
VIEW IN TELEGRAM
Помогаем строить карьеры в IT. Наша цель - твое трудоустройство Front-End разработчиком через 7 месяцев. Это единственная программа в РФ, где выпускники платят за подготовку только после трудоустройства. Если не найдешь работу, то ты ничего не должен. Необходимо пройти отбор.

Получить тестовое задание можно тут 🙋‍♂️👉 https://clck.ru/MQ5i5

Мы будем вести тебя до первого рабочего дня и даже больше. Мы оказываем карьерную поддержку после трудоустройства еще 2 года.
Каждый наш выпускник получает около 5 предложений о работе. А средняя зарплата уже в первый год после выпуска, примерно, 120 000 рублей.
За свою работу мы попросим 17% процентов от зарплаты разработчика. У нас нет скрытых условий или кредитов. Мы научим тебя Веб-разработке и ты заплатишь только за результат.
От тебя мы ждем возможность уделять учебе минимум 25 часов в неделю и проживание или готовность к переезду в Москву для трудоустройства.
TDD с React, Jest и Enzyme

Полное руководство по модульному тестированию React-приложения.

1 часть: https://prglb.ru/1m2wt
2 часть: https://prglb.ru/338uu

#tools #testing
Когда использовать новое Composition API во Vue (а когда нет)

Новое Composition API вызвало немало споров, когда оно было впервые анонсировано командой Vue. Но теперь, когда пыль осела и у нас появилась возможность его попробовать, большинство из нас может увидеть, что у нее огромный потенциал.

Подробнее: https://prglb.ru/46p2a

#tools #frameworks #vue
Скринкаст по Pug

Введение в шаблонизатор pug

Смотреть: https://prglb.ru/1une

#video #html #tools
awesome-react

Огромная коллекция ссылок на первоклассные материалы по React-экосистеме. Туториалы, инструменты, обсуждения - все, что вам может понадобиться.

Смотреть: https://prglb.ru/18zv

#react #digest
Список вопросов для JavaScript-интервью

Огромный список вопросов с фильтрами по уровню (джун, миддл, сеньор) и типу (теоретические, практические)

Изучить: https://prglb.ru/2yuyp

#javascript
Сюрреализм на JavaScript

Книга о разработке игр и приложений на JavaScript. Уже довольно старенькая (2014 год), но основные концепции и идеи никуда не деваются 😉

Читать онлайн: https://www.bakhirev.biz/book/

#books #javascript #gamedev