Полное руководство по отзывчивым изображениям
При создании веб-страницы часто требуется использовать разные изображения для экранов разного размера. В HTML и CSS существуют специальные решения для того, чтобы не грузить сразу все необходимые картинки.
Из руководства вы узнаете:
👉 что такое плотность пикселей, чем она отличается от реального размера дисплея и как ее определить
👉 как работают атрибуты
что умеет тег
👉 как проверить, поддерживает ли браузер webp-формат
👉 как определить плотность экрана с помощью CSS
👉 какие волшебные возможности даст нам когда-нибудь функция
Подробнее: https://prglb.ru/3tzet
#css #performance
При создании веб-страницы часто требуется использовать разные изображения для экранов разного размера. В 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
Пишем первый тест для Vue-проекта с помощью Jest.
Читать: https://prglb.ru/4q6m4
#testing #frameworks #vue
Введение в Web Share API
Разработчикам приходится добавлять несколько кнопок, чтобы пользователи могли делиться своими веб-сайтами на разных социальных платформах. Эти кнопки занимают драгоценное пространство экрана. Кроме того, трудно учесть все платформы, которыми может пользоваться юзер.
С WebShare API для этого вам нужна только одна кнопка!
Подробнее: https://prglb.ru/5svop
#api #web
Разработчикам приходится добавлять несколько кнопок, чтобы пользователи могли делиться своими веб-сайтами на разных социальных платформах. Эти кнопки занимают драгоценное пространство экрана. Кроме того, трудно учесть все платформы, которыми может пользоваться юзер.
С WebShare API для этого вам нужна только одна кнопка!
Подробнее: https://prglb.ru/5svop
#api #web
Три подводных камня в обеспечении безопасности, о которых должен знать каждый React-разработчик
XSS-уязвимости в React-приложениях, их обнаружение и защита.
Подробнее: https://prglb.ru/q78c
#security #frameworks #react
XSS-уязвимости в React-приложениях, их обнаружение и защита.
Подробнее: https://prglb.ru/q78c
#security #frameworks #react
Медиа-выражения в CSS - это не только max-width
Мир медиа-выражений намного богаче, чем вы могли себе представить. Кроме размеров вьюпорта они умеют отслеживать ориентацию, соотношение сторон, основное устройство ввода, инвертирование цветов и еще много разных аспектов работы приложения.
Подробнее: https://prglb.ru/1s70x
#css
Мир медиа-выражений намного богаче, чем вы могли себе представить. Кроме размеров вьюпорта они умеют отслеживать ориентацию, соотношение сторон, основное устройство ввода, инвертирование цветов и еще много разных аспектов работы приложения.
Подробнее: https://prglb.ru/1s70x
#css
Пользовательские правила eslint
Из этого руководства вы узнаете
🖍 как настроить eslint, чтобы добавление правил было таким же простым, как и написание другого кода в проекте
🖍 как создать пользовательское правило линтинга
Подробнее: https://slonoed.net/ru/custom-eslint-rule/
#tools
Из этого руководства вы узнаете
🖍 как настроить eslint, чтобы добавление правил было таким же простым, как и написание другого кода в проекте
🖍 как создать пользовательское правило линтинга
Подробнее: https://slonoed.net/ru/custom-eslint-rule/
#tools
slonoed.net
Пользовательские правила eslint
Пример написания своего правила для eslint
Классы на прототипах: как работает ООП в JavaScript
Изначально ООП модель JavaScript была основана на прототипной структуре, но для удобства в нем появились классы. Посмотрим, как это работает на деле.
Читать: https://proglib.io/p/klassy-na-prototipah-kak-rabotaet-oop-v-javascript-2020-02-20
#javascript #core #beginners
Изначально ООП модель 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
You might not need JavaScript - подборка самых распространенных компонентов интерфейса, реализованных только на HTML+CSS.
Табы, слайдеры, модальные окна и еще много всего.
Чекнуть: http://youmightnotneedjs.com/
#interface #css #html
Делегирование событий в JavaScript
Очень доходчивая статья о том, как работает делегирование событий в JavaScript и как не запутаться в слушателях событий.
Читать: https://prglb.ru/415p2
#javascript #core #beginners
Очень доходчивая статья о том, как работает делегирование событий в 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 ₽, офис в Москве
Подробнее о вакансии
Требования:
— отличное знание HTML и CSS, а также особенностей их отображения в различных браузерах
— знание стека React + MobX
— хорошее знание современного JavaScript, TypeScript
— знание CSS/JS-препроцессоров и систем сборки (Stylus, Babel, Webpack);
— умение работать с системой контроля версий Git
от 100 000 до 160 000 ₽, офис в Москве
Подробнее о вакансии
Томас_М_Т_React_в_действии_Для_профессионалов.pdf
53 MB
React в действии
Книга Т. М. Томаса познакомит вас с библиотекой React и ее экосистемой. Отличное систематизированное введение в тему.
#books #frameworks #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
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
Жизнеспособен ли микросервисный подход во фронтенд-разработке? Каковы его плюсы и минусы? Не пора ли срочно переводить все ваши проекты на новую архитектуру?
Не торопитесь - хоть микрофронтенд предлагает серьезные преимущества, у него очень много недостатков.
Разобраться: https://prglb.ru/5xpap
#bestpractices
The account of the user that created this channel has been inactive for the last 5 months. If it remains inactive in the next 9 days, that account will self-destruct and this channel will no longer have a creator.
Рваные края в диагональных градиентах
👎 При создании диагональных линейных градиентов в CSS с резким переходом на месте стыка цветов образуется рваная линия.
Маленький хак для решения этой проблемы: начало второго цвета нужно немножко сдвинуть.
👉 Способ 1 - десятые доли процента:
👉 Способ 2 - функция
Источник: https://prglb.ru/3wj0g
#css #snippets #code
👎 При создании диагональных линейных градиентов в CSS с резким переходом на месте стыка цветов образуется рваная линия.
background: linear-gradient(176deg, white, white 75%, black 75%, black 100%);
Маленький хак для решения этой проблемы: начало второго цвета нужно немножко сдвинуть.
👉 Способ 1 - десятые доли процента:
background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%);
👉 Способ 2 - функция
calc
:background: linear-gradient(176deg, white, white 75%, black calc(75% + 1px), black 100%);
Источник: https://prglb.ru/3wj0g
#css #snippets #code
CSS-переменные в инлайн-стилях
Зачем вам может потребоваться хранить переменные прямо в атрибуте style? Оказывается, таких кейсов немало!
🖍 еще более гибкая грид-сетка
🖍 стили кнопок
🖍 размер юзерпика
Этот подход может здорово упростить написание CSS.
Подробнее: https://prglb.ru/5w37w
#css
Зачем вам может потребоваться хранить переменные прямо в атрибуте style? Оказывается, таких кейсов немало!
🖍 еще более гибкая грид-сетка
🖍 стили кнопок
🖍 размер юзерпика
Этот подход может здорово упростить написание CSS.
Подробнее: https://prglb.ru/5w37w
#css
Цикл событий: как выполняется асинхронный JavaScript-код в Node.js
Разбираемся, как работает цикл событий Node.js, зачем там коллбэки и в каком порядке они выполняются.
Подробнее: https://proglib.io/p/cikl-sobytiy-kak-vypolnyaetsya-asinhronnyy-javascript-kod-v-node-js-2020-02-26
#javascript #node #core
Разбираемся, как работает цикл событий Node.js, зачем там коллбэки и в каком порядке они выполняются.
Подробнее: https://proglib.io/p/cikl-sobytiy-kak-vypolnyaetsya-asinhronnyy-javascript-kod-v-node-js-2020-02-26
#javascript #node #core
Полное руководство по классам в JavaScript
От конструктора до статических методов. И про прототипы под капотом не забудем 😌
Читать: https://prglb.ru/4hewc
#javascript #core
От конструктора до статических методов. И про прототипы под капотом не забудем 😌
Читать: https://prglb.ru/4hewc
#javascript #core
Я ❤ Фронтенд 2020
8 крутых докладов о состоянии современного фронтенда.
📖 Почитать программу: https://prglb.ru/22uki
📺 Посмотреть доклады: https://prglb.ru/112e1
#video
8 крутых докладов о состоянии современного фронтенда.
📖 Почитать программу: https://prglb.ru/22uki
📺 Посмотреть доклады: https://prglb.ru/112e1
#video