Forwarded from FrontEndDev
Ленивая загрузка вашего приложения на React
https://www.telerik.com/blogs/lazy-loading-your-react-app
https://www.telerik.com/blogs/lazy-loading-your-react-app
Telerik Blogs
Lazy-Loading Your React App
Improve the performance of your React app with React.lazy and Suspense.
React Hook Form vs Formik
Подробное сравнение двух библиотек для работы с формами в React-приложениях: https://prglb.ru/2di74
#react #library
Подробное сравнение двух библиотек для работы с формами в React-приложениях: https://prglb.ru/2di74
#react #library
Эффективное тестирование верстки
Как эффективно и правильно тестировать верстку и писать для неё тесты, чтобы они были полезны, а дедлайны не горели.
https://prglb.ru/cnon
Как эффективно и правильно тестировать верстку и писать для неё тесты, чтобы они были полезны, а дедлайны не горели.
https://prglb.ru/cnon
Forwarded from FrontEndDev
Техника ворона: на шаг ближе к Container Queries
https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/
https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/
CSS-Tricks
The Raven Technique: One Step Closer to Container Queries
For the millionth time: We need container queries in CSS! And guess what, it looks like we're heading in that direction. When building components for a
Forwarded from Будни разработчика
#codepen дня
#css #3d #transform
Сегодня в топ попал довольно необычный пример. Он сложен с математической точки зрения, но довольно прост с точки зрения кода. И это — взгляд изнутри на трёхмерный куб. Без WebGL.
Объём CSS-кода минимален для того, чтобы понять, как работают 3D-преобразования и перспектива. JS-код в свою очередь даёт элементарные понятия о взаимодействии с камерой. Не думаю, что кто-то сделает это проще и меньше.
Практической пользы у этого примера, в общем, нет, но полученные знания пригодятся всем, кто интересуется 3D-эффектами с минимальными усилиями.
https://codepen.io/ge1doot/pen/yLJwBrm
#css #3d #transform
Сегодня в топ попал довольно необычный пример. Он сложен с математической точки зрения, но довольно прост с точки зрения кода. И это — взгляд изнутри на трёхмерный куб. Без WebGL.
Объём CSS-кода минимален для того, чтобы понять, как работают 3D-преобразования и перспектива. JS-код в свою очередь даёт элементарные понятия о взаимодействии с камерой. Не думаю, что кто-то сделает это проще и меньше.
Практической пользы у этого примера, в общем, нет, но полученные знания пригодятся всем, кто интересуется 3D-эффектами с минимальными усилиями.
https://codepen.io/ge1doot/pen/yLJwBrm
Forwarded from Webchic - frontend, backend, ci/cd
Новые фичи в вебе за 2020, которые вы могли пропустить:
— IntersectionObserver V2 (позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport)
— Screen Wake Lock API (позволяет предотвратить затемнение или блокировку экрана устройствами, когда приложение должно продолжать работу)
— CSS :any-link селектор (стилизует каждый элемент <a>, <link>, <area>, в котором определен href)
— CSS content-visibility (указывает браузеру какую разметку не отрисовывать, для ускорения отрисовки видимой части контента)
— CSS ::marker (применяет стили к маркеру элемента списка, которые обычно содержит значок или номер)
— URL Scroll-To-Text Fragment (скролл к фрагменту текста на странице)
— Gap для Flexbox (пропуски, как в GRID)
— CSS Revert (откат стилей назад по каскаду на шаг)
— AVIF (новый формат картинок с очень хорошим сжатием и небольшой потерей качества)
#browser_api #css
К статье(eng)
— IntersectionObserver V2 (позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport)
— Screen Wake Lock API (позволяет предотвратить затемнение или блокировку экрана устройствами, когда приложение должно продолжать работу)
— CSS :any-link селектор (стилизует каждый элемент <a>, <link>, <area>, в котором определен href)
— CSS content-visibility (указывает браузеру какую разметку не отрисовывать, для ускорения отрисовки видимой части контента)
— CSS ::marker (применяет стили к маркеру элемента списка, которые обычно содержит значок или номер)
— URL Scroll-To-Text Fragment (скролл к фрагменту текста на странице)
— Gap для Flexbox (пропуски, как в GRID)
— CSS Revert (откат стилей назад по каскаду на шаг)
— AVIF (новый формат картинок с очень хорошим сжатием и небольшой потерей качества)
#browser_api #css
К статье(eng)
Forwarded from FrontEndDev
Ленивая загрузка изображений с помощью Intersection Observer API и React
https://tara-ojo.medium.com/lazy-load-images-with-the-intersection-observer-api-and-react-4fd8ae19e195
https://tara-ojo.medium.com/lazy-load-images-with-the-intersection-observer-api-and-react-4fd8ae19e195
Medium
Lazy-load images with the Intersection Observer API and React
The Intersection Observer API allows you to observe and react to changes when an element enters the viewport or a parent element. It’s…
Такая литература будет вечной
Forwarded from TechSkills - книги по программированию
Структуры и алгоритмы обработки данных
Авторы: Павлов Л.А., Первова Н.В.
Год издания: 2020
Скачать книгу
#algorithms #русский
Авторы: Павлов Л.А., Первова Н.В.
Год издания: 2020
Скачать книгу
#algorithms #русский
Forwarded from Webchic - frontend, backend, ci/cd
Обзор JavaScript Symbol
— iterator для итерации объектов
— hasInstance для настройки instanceof
— toPrimitive для преобразования объекта в примитив
— toStringTag для создания стандартного описания объекта
— species для создания производного объекта
— match, replace, search, split для создания регулярного выражения в форме объекта
— isConcatSpreadable для преобразования объекта в массив
#javascript #symbol
К статье(rus)
— iterator для итерации объектов
— hasInstance для настройки instanceof
— toPrimitive для преобразования объекта в примитив
— toStringTag для создания стандартного описания объекта
— species для создания производного объекта
— match, replace, search, split для создания регулярного выражения в форме объекта
— isConcatSpreadable для преобразования объекта в массив
#javascript #symbol
К статье(rus)
Forwarded from Webchic - frontend, backend, ci/cd
Декораторы JavaScript с нуля
Декоратор — это просто способ обернуть функцию другой функцией, чтобы расширить ее существующие возможности
#javascript #decorator
К статье(rus)
Декоратор — это просто способ обернуть функцию другой функцией, чтобы расширить ее существующие возможности
#javascript #decorator
К статье(rus)
Forwarded from Webchic - frontend, backend, ci/cd
Типичные ошибки джунов, использующих React
В материале приведены некоторые из ошибок, которые React-разработчики совершают на раннем этапе своего профессионального роста.
https://prglb.ru/2l1zu
#react #frameworks
В материале приведены некоторые из ошибок, которые React-разработчики совершают на раннем этапе своего профессионального роста.
https://prglb.ru/2l1zu
#react #frameworks
Forwarded from FrontEndDev
7 особенностей JavaScript, которые нужно знать, прежде чем изучать React
https://medium.com/swlh/7-javascript-features-you-need-to-know-before-learning-react-e77c3b3481d8
https://medium.com/swlh/7-javascript-features-you-need-to-know-before-learning-react-e77c3b3481d8
Medium
7 JavaScript Features You Need to Know Before Learning React
Learn the basics that you need before starting with React
Forwarded from Webchic - frontend, backend, ci/cd
Прощай, Web-API
В статье рассматривается подход, при котором не надо реализовывать REST/GraphQL взаимодействие в своем приложении, а можно переиспользовать одну и ту же модель на клиенте и сервере. Такой подход становится возможным с набором библиотек layr
#javascript #api #architecture
К статье(eng)
В статье рассматривается подход, при котором не надо реализовывать REST/GraphQL взаимодействие в своем приложении, а можно переиспользовать одну и ту же модель на клиенте и сервере. Такой подход становится возможным с набором библиотек layr
#javascript #api #architecture
К статье(eng)
Forwarded from Web Stack
Глубокое погружение в React Redux: управление состоянием в React с Redux
https://dev.to/senshiii/react-redux-deep-dive-state-management-in-react-with-redux-5299
https://dev.to/senshiii/react-redux-deep-dive-state-management-in-react-with-redux-5299
DEV Community
React Redux Deep Dive: State Management in React with Redux
Introduction In the world of React, efficient State Management is one of the most importan...