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...
Forwarded from Веб-страница
Дорожная карта React-разработчика
Хотите знать, как стать React-разработчиком в 2021? Держите дорожную карту, которая собрала must-have темы и инструменты:
https://tprg.ru/rMBs
#фронтенд #react
Хотите знать, как стать React-разработчиком в 2021? Держите дорожную карту, которая собрала must-have темы и инструменты:
https://tprg.ru/rMBs
#фронтенд #react
Forwarded from Free Online Courses (N00B |TIC| |FTU|)
React – The Complete Guide with React Hook Redux 2020 in 4hr
FREE For 48 Hrs
Learn how to create high performance web app with react. Hooks, Redux, React Routing, useContext, Fireabase and more
https://coursevania.com/courses/react-the-complete-guide-with-react-hook-redux-2020-in-4hr/
FREE For 48 Hrs
Learn how to create high performance web app with react. Hooks, Redux, React Routing, useContext, Fireabase and more
https://coursevania.com/courses/react-the-complete-guide-with-react-hook-redux-2020-in-4hr/
Forwarded from Веб-страница
CSS clip-path Editor
Полезный инструмент при создании clip-path фигур, который наглядно демонстрирует, как будет выглядеть элемент на странице. Можно воспользоваться готовыми пресетами или настроить по своему желанию, после чего просто скопировать готовый код в свой проект.
https://tprg.ru/sKF5
#фронтенд #css
Полезный инструмент при создании clip-path фигур, который наглядно демонстрирует, как будет выглядеть элемент на странице. Можно воспользоваться готовыми пресетами или настроить по своему желанию, после чего просто скопировать готовый код в свой проект.
https://tprg.ru/sKF5
#фронтенд #css