Хотите быть в курсе новых конференций, митапов по фронтенду? Мы сделали бота, который оперативно оповещает о новых мероприятиях, и вы не пропустите все самое интересное.

Подписывайтесь: t.me/event_listener_bot

Все, что вы должны знать о каркасных экранах

Каркасные экраны (Skeleton Screens) позволяют загружать данные по мере их готовности, не вызывая при этом беспокойства у пользователей.

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

#interace

Шпаргалка по самым распространенным операциям над массивами в JavaScript

15 важнейших операций - от перебора до сортировки с наглядными примерами.

Смотреть: https://prglb.ru/3pbwq

#javascript #core #cheatsheets

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

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

В ходе интенсива вы не только познакомитесь с «гибкими» подходами, но научитесь выбирать подходящие для решения любой задачи. На практике вы разберёте реальные кейсы и научитесь внедрять и применять Agile-методы в своих проектах.

Успейте подать заявку и повысьте свою эффективность - https://prglb.ru/3ph0p

7 полезных CSS-свойств

Небольшая подборка редко используемых, но полезных свойств CSS.

👉 hyphens
Позволяет переносить длинные слова (будет очень полезно разработчикам сайтов на немецком языке 👍)
Ссылка на MDN

👉 will-change
Указывает браузеру, какие свойства элемента могут изменяться. Очень важное свойство для улучшения оптимизации
Ссылка на MDN

👉 -webkit-line-clamp
Ограничивает многострочный текст указанным числом строк и добавляет многоточие при необходимости
Ссылка на MDN

👉 conic-gradient()
Создает красивые конические градиенты
Ссылка на MDN

👉 caret-color
Изменяет цвет мигающего курсора при вводе текста
Ссылка на MDN

👉 CSS Motion Path
Группа свойств, позволяющая указать кастомный путь для анимации
Ссылка на MDN

👉 CSS Scroll Snap
Умное управление прокруткой
Ссылка на MDN

👍 Список 300+ CSS-свойств, разбитых на группы по функциональности: https://prglb.ru/44u42

#css

Простое объяснение рекурсии и стека вызовов

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

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

#javascript

Полное руководство по отзывчивым изображениям

При создании веб-страницы часто требуется использовать разные изображения для экранов разного размера. В HTML и CSS существуют специальные решения для того, чтобы не грузить сразу все необходимые картинки.

Из руководства вы узнаете:

👉 что такое плотность пикселей, чем она отличается от реального размера дисплея и как ее определить
👉 как работают атрибуты srcset и sizes тега img
что умеет тег picture
👉 как проверить, поддерживает ли браузер webp-формат
👉 как определить плотность экрана с помощью CSS
👉 какие волшебные возможности даст нам когда-нибудь функция image()

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

#css #performance

Тестирование Vue с Jest

Пишем первый тест для Vue-проекта с помощью Jest.

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

#testing #frameworks #vue

Введение в Web Share API

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

С WebShare API для этого вам нужна только одна кнопка!

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

#api #web

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

XSS-уязвимости в React-приложениях, их обнаружение и защита.

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

#security #frameworks #react

Медиа-выражения в CSS - это не только max-width

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

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

#css

Пользовательские правила eslint

Из этого руководства вы узнаете

🖍 как настроить eslint, чтобы добавление правил было таким же простым, как и написание другого кода в проекте
🖍 как создать пользовательское правило линтинга

Подробнее: https://slonoed.net/ru/custom-eslint-rule/

#tools

Классы на прототипах: как работает ООП в JavaScript

Изначально ООП модель JavaScript была основана на прототипной структуре, но для удобства в нем появились классы. Посмотрим, как это работает на деле.

Читать: https://proglib.io/p/klassy-na-prototipah-kak-rabotaet-oop-v-javascript-2020-02-20

#javascript #core #beginners

​Обойдемся без JS

You might not need JavaScript - подборка самых распространенных компонентов интерфейса, реализованных только на HTML+CSS.

Табы, слайдеры, модальные окна и еще много всего.

Чекнуть: http://youmightnotneedjs.com/

#interface #css #html

Делегирование событий в JavaScript

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

Читать: https://prglb.ru/415p2

#javascript #core #beginners

Frontend разработчик (React)

Требования:
— отличное знание HTML и CSS, а также особенностей их отображения в различных браузерах
— знание стека React + MobX
— хорошее знание современного JavaScript, TypeScript
— знание CSS/JS-препроцессоров и систем сборки (Stylus, Babel, Webpack);
— умение работать с системой контроля версий Git

от 100 000 до 160 000 ₽, офис в Москве

Подробнее о вакансии

React в действии

Книга Т. М. Томаса познакомит вас с библиотекой React и ее экосистемой. Отличное систематизированное введение в тему.

#books #frameworks #react

Эффективное использование ARIA в HTML5

ARIA - Accessible Rich Internet Applications (доступные насыщенные интернет-приложения).

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

Читать: https://prglb.ru/ekyb
Спецификация тут: https://www.w3.org/TR/wai-aria-1.1/

#accessibility

Микросервисный подход в веб-разработке: micro frontends

Жизнеспособен ли микросервисный подход во фронтенд-разработке? Каковы его плюсы и минусы? Не пора ли срочно переводить все ваши проекты на новую архитектуру?

Не торопитесь - хоть микрофронтенд предлагает серьезные преимущества, у него очень много недостатков.

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

#bestpractices