5 лучших JavaScript библиотек для анимации SVG
Сегодня SVG широко используются в веб-приложениях. Его способность масштабироваться без потери качества - основная причина его успеха.
Но знаете ли вы, что мы можем использовать SVG не только в статических изображениях?
В этой статье представлены 5 библиотек JavaScript, которые мы можем использовать для анимации SVG.
https://blog.bitsrc.io/top-5-javascript-libraries-for-svg-animation-30677ad9c937
#en #javascript #library #libraries #svg #animation
Cut corners with custom shapes
Создаем маску по необходимой форме
https://codepen.io/t_afif/pen/JjyaOKO
#codepen #css #mask
5 лучших функций JavaScript ES12, которые вы должны использовать сейчас
5 основных функций JavaScript, предлагаемых обновлением ECMAScript 2021
1. Numeric Separators
2. String.prototype.replaceAll
3. Promise.any() and AggregateError
4. Logical Assignment Operators
5. Private Class Methods and Accessors
Подробно рассмотрим 5 основных функций, предлагаемых ECMAScript 2021, чтобы вы могли начать использовать их в своих проектах и улучшить свой опыт работы с JavaScript. Эта статья может пригодиться как новичкам, так и опытным разработчикам.
https://levelup.gitconnected.com/top-5-javascript-es12-features-you-should-start-using-now-b16a8b5353b1
#en #article #javascript #es2021
Написание чистого кода на JavaScript
Написание чистого кода улучшает поддержку приложения и делает разработчиков продуктивными. Однако некоторые разработчики не знают о функциях языка для дальнейшего улучшения кода.
Рассмотрим 7 советов по чистому программированию на JavaScript, которые должен знать каждый разработчик.
https://blog.bitsrc.io/writing-clean-code-in-javascript-dd584bbe1874
#en #article #javascript
Деструктуризация массивов и объектов в JavaScript - в чем разница?
The destructuring assignment in JavaScript provides a neat and DRY way to extract values from your arrays and objects.
This article aims to show you exactly how array and object destructuring assignments work in JavaScript.
https://www.freecodecamp.org/news/array-vs-object-destructuring-in-javascript/
#en #article #javascript #destructuring
Звёздный рейтинг: решение с использованием SVG
Для некоторых веб-сайтов и платформ в интернете важно отображать оценку материала пользователями в виде звёздного рейтинга. Недавно мне довелось реализовать для одного проекта компонент звёздного рейтинга со следующими требованиями:
• Производительность (без использования картинок)
• Адаптивность под разный размер
• Доступность
• Частичное заполнение звёзд (например, 3.5 или 3.2)
• Легкая поддержка с помощью CSS
В данной статье будет рассмотрен способ реализации с помощью SVG и как он работает в разных сценариях.
https://habr.com/ru/post/588695/
#css #svg #mask #gradient
CSS Loaders
Подборка готовых анимированных загрузчиков на чистом CSS
https://codepen.io/RRoberts/pen/pEXWEp
#codepen #css #animation #transform #loader
Полное руководство по word-wrap, overflow-wrap, иword-break в CSS
В наши дни очень важно сделать сайт адаптивным, чтобы он правильно отображался на всех устройствах. К сожалению, несмотря на все ваши усилия, вы все равно можете получить неправильно работающие макеты.
Иногда макеты нарушаются из-за того, что некоторые слова слишком длинные, чтобы уместиться в контейнере. Эта статья представляет собой подробное руководство по CSS-свойствам word-wrap, overflow-wrap, and word-break, а также о том, как их использовать чтобы не допустить разрушения вашего красиво оформленного макета.
https://blog.logrocket.com/complete-guide-word-wrap-overflow-wrap-word-break-css/
#en #article #css #overflow #wordwrap #overflowwrap #wordbreak
Map против Set в JavaScript: выбор структуры данных
Способ структурирования данных играет жизненно важную роль в нашей способности эффективно выполнять различные операции с данными. Например, вы можете удалить любой элемент из двусвязного списка за заранее определенное время, тогда как это время может завить от размера списка, если список представлен как массив. Точно так же поиск наличия ключа в массиве ключей может выполняться более эффективно за логарифмическое время, когда массив отсортирован.
В этом посте мы рассмотрим, как можно использовать объекты Map и Set для эффективного решения проблем связанных с обработкой данных.
https://webdevblog.ru/map-protiv-set-v-javascript-vybor-struktury-dannyh/
#article #javascript #set #map
Поиск-фильтр на странице с использованием ванильного JavaScript
Если у вас есть страница, содержащая много информации, было бы неплохо позволить пользователям искать то, что им нужно. Речь не идет о поиске в базе данных или даже JSON - буквально о поиске текста на одной отрисованной веб-странице. Пользователи уже могут использовать для этого встроенный поиск в браузере, но мы можем расширить возможности, предложив нашу собственную функцию поиска, которая фильтрует страницу, что упрощает поиск и чтение результатов поиска.
https://css-tricks.com/in-page-filtered-search-with-vanilla-javascript/
#en #article #javascript #search #filter
Заменит ли Rome Webpack?
Экосистема JavaScript, как известно, имеет бесчисленное количество библиотек и фреймворков, которые вы можете использовать для своих проектов. У вас есть все мыслимые разновидности JavaScript, такие как TypeScript , PureScript или Reason . И для каждого фреймворка и библиотеки у вас есть столько же инструментов сборки и автоматизации, которые помогут вам в повседневной работе. До настоящего времени. Войдите в мир Rome.
https://medium.com/weekly-webtips/will-rome-replace-webpack-a60e1a740222
#en #article #javascript #webpack #rome
Новый CSS Reset
В последние годы CSS приобрел ряд новых функций, позволяющих нам сбрасывать CSS более кратко, чем раньше. Более того, теперь, в 2021 году, все
эти функции CSS получили широкую поддержку во всех вечнозеленых браузерах. Это побудило к созданию "The new CSS Reset". Встречаем.
https://elad.medium.com/the-new-css-reset-53f41f13282e
https://elad2412.github.io/the-new-css-reset/
#en #css #reset
Начало новой эры адаптивного веб-дизайна
Если вы работаете в индустрии веб-дизайна столько же, сколько и я, вы знаете - одно неизбежно, одно постоянно - это изменения. Примерно каждые 10 лет или около того происходит фундаментальный сдвиг в том, как мы делаем вещи, имеющие первостепенное значение, чтобы превзойти то, что мы делали раньше… и мы снова собираемся перейти к следующей фазе.
https://uxdesign.cc/the-start-of-a-new-era-for-responsive-web-design-6658a6bbeb9b
#en #article #webdesign #responsive
Неправильный TypeScript
Написание TypeScript-кода - это здорово, потому что вы защищены компилятором. Каждый раз, когда вы транспилируете код, он проверяется на наличие потенциальных ошибок, которые вы допустили. Это буквально делает вас лучшим разработчиком, помогая избежать простых ошибок. Это восхитительно!
Однако, если вы недостаточно осторожны, вы все равно можете допустить эти ошибки и внести баги, неправильно используя некоторые функции языка. Да, TypeScript может быть двусторонним лезвием, если вы не будете осторожны! Итак, давайте проверим некоторые ошибки, которые вы, вероятно, делаете прямо сейчас.
https://blog.openreplay.com/typescript-done-wrong
#en #article #typescript
CSS переходит на новый, шестой уровень каскадности
Пока одни веб-разработчики спорят о том, как лучше «избавиться от каскада» (чаще всего имея в виду ограничение глобальной видимости стилей), а другие видят в контекстной природе CSS его сильную сторону, CSS продолжает развиваться. Это по-прежнему каскадные таблицы стилей (значение каждого свойства для элемента выбирается из нескольких «претендентов»), но алгоритм этого выбора — он и есть каскад — становится всё гибче и удобнее в управлении. Не успели мы привыкнуть к ключевому слову revert из модуля каскада и наследования 4 уровня, позволяющему откатить любые стили до браузерных дефолтов, как вышел модуль 5 уровня, позволяющий явно управлять приоритетом стилей, группируя их по специальным «слоям». Их уже можно «пощупать» за флагом в основных браузерах (и самое время это сделать, потому что масса ключевых вопросов в них еще проясняется).
https://css-live.ru/vecssti-s-polej/css-perexodit-na-novyj-shestoj-uroven-kaskadnosti.html
#article #css #level6
Расширение цепочек when/ else в CSS: первый взгляд
В этой статье мы рассмотрим новые условные правила @whenи @else, включая их некоторые практические применения в таблицах стилей.
https://blog.logrocket.com/extending-css-when-else-chains-first-look/
#en #css #when #else
Слайдер с необычным фильтр-эффектом
Создаем слайд-шоу с простым, но интересным эффектом при переходе между изображениями
https://tympanus.net/codrops/2021/11/17/slideshow-with-filter-reveal-effect/
#css #javascript #filter #slider #slideshow
Color meditation
Медитируем под анимированные элементы с изменением цвета
https://codepen.io/cjgammon/pen/qBXLeJK
#codepen #javascript #canvas
3D Globe (Pure canvas)
Генерируем объемный анимированный шар
https://codepen.io/Mamboleoo/pen/rNzYPjq
#codepen #canvas #javascript
Breathing hexagon
Создаем анимированные фигуры с градиентной заливкой с помощью CSS (SCSS)
https://codepen.io/t_afif/pen/ExvjMPo
#codepen #css #scss #gradient
Что нужно знать о вёрстке под ретину
При создании сайтов и веб-приложений важно помнить, что пользователи будут их открывать на устройствах с разными экранами. Поэтому нужно делать всё возможное, чтобы вёрстка выглядела хорошо на любом девайсе.
Есть множество способов подготовить вёрстку, начиная от использования медиавыражений и заканчивая написанием скриптов. Мы не будем углубляться в эту тему и разберём только основные моменты, которые полезно знать начинающим веб-разработчикам.
Дисклеймер: в статье мы называем ретиной все экраны с повышенной плотностью пикселей, но знаем, что это не так. Считайте это литературным допущением.
https://habr.com/ru/company/htmlacademy/blog/585864/
#article #retina #responsive
ES2022: Полное руководство по приватным полям классов, методам и статическим блокам инициализации
Давайте посмотрим на изменения ES2022 для классов JavaScript, которые включают следующие новые синтаксисы:
• Private class fields and methods
• Static public fields (Static public methods are in ES2015)
• Static private fields and methods
• Static initialization blocks
• Ergonomic brand checks for private fields
https://betterprogramming.pub/es2022-a-complete-guide-on-private-static-class-fields-methods-and-static-initialization-blocks-f12943a86b2d
#en #article #javascript #es2022 #classes #class #methods
Vue.js: как перенести большой проект с Vue 2 на Vue 3
Команда Vue.js выпустила Vue 3.0 в сентябре 2020 года. Эта новая версия содержит множество новых функций и оптимизаций, но также имеет несколько критических изменений.
В июне 2021 года команда Vue.js выпустила версию Vue 3.1. Этот новый релиз поставляется с @vue/compat (он же «сборка миграции»). Он позволяет плавно переносить большие проекты, запуская кодовую базу Vue 2 вместе с изменениями Vue 3.
Переход на Vue 3 может быть сложной задачей (в зависимости от размера вашего проекта). В этой статье описан опыт миграции:
- Основные различия между Vue 2 и Vue 3
- Проблемы, с которыми столкнулись, и как с ними справлялись
- Стратегия миграции на Vue.js 3
https://webdevblog.ru/vue-js-kak-perenesti-bolshoj-proekt-s-vue-2-na-vue-3/
#article #vue #vue3 #migration
Разбираемся в сортах реактивности
Основная суть реактивного двигателя - хаотичное взаимодействие между молекулами, приводит к тому, что улетающие молекулы опосредованно передают импульс корпусу двигателя. Что ж, давайте подумаем, как реактивные принципы решают или наоборот усугубляют проблемы в программировании. Сравним различные подходы к реактивному программированию. И вытащим на поверхность все их подводные камни.
https://habr.com/ru/company/timeweb/blog/586450/
#article #javascript #reactivity
Глубокое погружение в object-fit и background-size в CSS
Мы не всегда можем загрузить изображения разного размера для HTML-элемента. Если мы используем ширину и высоту, которые не пропорциональны соотношению сторон изображения, изображение может быть сжато или растянуто. Это плохо, и это можно решить либо с помощью object-fit для элемента img либо с помощью background-size.
В этой статье мы рассмотрим, как работают object-fit и background-size, когда мы можем их использовать и почему, а также некоторые практические примеры использования и рекомендации. Давайте же погрузимся.
https://www.smashingmagazine.com/2021/10/object-fit-background-size-css/
#en #article #css #objectfit #backgroundsize
Путь Photoshop к веб-версии
Последние три года Chrome работал над расширением возможностей веб-приложений, которые хотят расширить границы возможного в браузере. Одним из таких веб-приложений был Photoshop. Идею запуска такого сложного приложения как Photoshop непосредственно в браузере было бы сложно представить всего лишь несколько лет назад. Однако, используя различные новые стандартизированные веб-технологии, Adobe теперь представила общедоступную бета-версию Photoshop в Интернете.
https://web.dev/ps-on-the-web/
#en #article #web #photoshop #webphotoshop
Generative SVG Flowers
Генерируем SVG с возможностью настройки параметров.
https://codepen.io/natszafraniec/pen/YzxpdEa
#codepen #svg #javascript #flowers
Микрофронтеды: достоинства, недостатки и нюансы
Термин «микрофронтенды» стал входить в обиход с ростом популярности микросервисов. Разработчикам понравилась идея дробления бэкенд-монолита на небольшие, полностью автономные куски кода, и они захотели привнести то же самое во фронтенд-разработку.
Идея микрофронтендов заключается в том, что сайт или веб-приложение представляет собой набор функций, которые разрабатывают отдельные команды. Функции могут иметь совершенно разные цели или решать абсолютно непохожие бизнес-задачи. При этом каждая команда кросс-функциональна и отвечает за полную цепочку реализации функции, от базы данных до UI.
https://habr.com/ru/post/585912/
#article #microfrontend
Предотвращение влияния прокрутки на цепочку элементов с помощью Overscroll Behavior
Предположим, что у нас есть элемент с position: fixed. Если у него есть прокрутка, вы заметите, что когда достигнете нижней границы элемента, браузер продолжит прокрутку основного элемента. Это нежелательный и сбивающий с толку эффект. К счастью, мы можем исправить это с помощью CSS.
В этой статье мы рассмотрим CSS-свойство overscroll-behavior, какую проблему оно решает, как оно работает и где мы можем его использовать.
https://ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior/
#en #article #css #overflow #overscroll-behavior
Top 10 VS Code extensions for 2021
Visual Studio Code - один из наиболее широко используемых редакторов кода в сообществе разработчиков. Одна из причин популярности VS Code - множество расширений, ускоряющих процесс разработки.
В этом руководстве мы рассмотрим 10 расширений VS Code, которые должен знать каждый веб-разработчик в 2021 году. Эти инструменты предназначены для улучшения взаимодействия с разработчиками и облегчения вашей работы различными способами.
https://blog.logrocket.com/top-10-vs-code-extensions-2021/
#en #article
