Я ❤ Фронтенд 2020

8 крутых докладов о состоянии современного фронтенда.

📖 Почитать программу: https://prglb.ru/22uki

📺 Посмотреть доклады: https://prglb.ru/112e1

#video

10 способов спрятать элемент на CSS

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

Выбрать подходящую: https://prglb.ru/3ok1d

#css

Как написать хороший HTML & CSS код с помощью Webflow

Webflow — это, по сути, визуальный конструктор для создания HTML и CSS кода. Звучит не очень серьезно, но этот инструмент может существенно облегчить работу верстальщика или дизайнера.

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

#tools #html #css

Цитирование в HTML

В чем разница между тегами blockquote, q, cite - и какой из них следует использовать для оформления цитат?

Спойлер

✏️ для больших фрагментов - blockquote 👌
✏️ для небольших, находящихся прямо в строке, - q (но не для сарказма 🤔)
✏️ а cite - вообще предназначен не для цитат 😲

Разобраться: https://prglb.ru/1jc9i

P.S. Не вмешивайте сюда тег dialog.

#html #accessibility

ТОП-15 книг по JavaScript: от новичка до профессионала

В этом посте мы собрали переведённые на русский язык книги по JavaScript – всё, что нужно для старта, роста и оттачивания скиллов. Расставили в порядке возрастания сложности, указали преимущества и недостатки.

Изучить: https://prglb.ru/4dhaj

#javascript #books #beginners #advanced

Рассказываем о новой платформе для удобного поиска работы в IT - Headz.

Наверное вы сразу подумаете, в чем состоит ее уникальность? 👾
Headz соединяет разработчиков и компании при помощи матчинга.

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

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

Испытать платформу в действии — по ссылке:
http://bit.ly/2x7giBn

Лучшие практики JavaScript — производительность

6 советов для ускорения вашего приложения.

https://prglb.ru/3o6nw

#javascript #performance

👋 Всем привет!

11 марта приглашаем на первый Skillbox Frontend Meetup, где мы обсудим основы SSR и soft skills, которые необходимы разработчику.

На митапе выступят:

– Системный архитектор Goods Тимофей Тиунов, который на примере Vue расскажет, как работает серверный рендерин веб-приложений.

– Руководитель управления X5 Retail Group Андрей Смирнов, который поговорит о необходимом наборе soft skills для любого разработчика.

Подробности и регистрация 👉 https://clc.to/Frontend_Meetup

Должен ли фронтенд разработчик уметь писать бэкенды?

Где проходит граница современного фронтенда? Что входит в этом понятие?

Только HTML+CSS? Или модные JS-фреймворки? Или хороший фронтендер должен уметь написать бэкенд-часть приложения?

Вопрос спорный. Артур Басак считает, что эта граница очень размыта: https://prglb.ru/3n26x

​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