Экскурсия по 4 новым цветовым функциям CSS
First, a major heads up. This stuff is so complicated. I barely understand it. But here are some aspects:
• Before all this upcoming change, we only had RGB as a color model, and everything dealt with that.
• We had different “color spaces” that handled it differently .• With the upcoming changes, we’re getting new color models and (!) we’re getting new functions that map that color model differently. So I think it’s kind of a double-triple whammy.
https://css-tricks.com/new-css-color-features-preview/
#en #article #css #color #displayp3 #hwb #lab #lch
Vue 3 как новый стандарт
Vue 3 станет новой версией по умолчанию в понедельник, 7 февраля 2022 года!
Обязательно прочитайте раздел "Возможные необходимые действия" чтобы узнать, нужно ли вам внести определенные изменения перед переключением, чтобы избежать поломки.
https://blog.vuejs.org/posts/vue-3-as-the-new-default.html
#en #article #vue #vuejs #vue3 #vuejs3
structuredClone(): глубокое копирование объектов в JavaScript
Spreading is a common technique for copying objects in JavaScript:
• Spreading into an Array literal to copy an Array
• Spreading into an Object literal to copy a plain object
Spreading has one significant downside – it creates shallow copies: The top levels are copied, but property values are shared.structuredClone() is a new function that will soon be supported by most browsers, Node.js and Deno. It creates deep copies of objects. This blog post explains how it works.
https://2ality.com/2022/01/structured-clone.html
#en #article #javascript #object #clone #structuredclone
JavaScript: работа с датой и временем с помощью Temporal
В этой статье мы познакомимся с Temporal, новым API для работы с датой и временем в JS.
Предложение находится на 3 стадии рассмотрения и может подвергнуться некоторым изменениям, так что воздержитесь от его использования в продакшне до официального утверждения (вероятно, это произойдет где-то в конце текущего года).
https://habr.com/ru/company/timeweb/blog/645075/
#article #javascript #date #temporal
Наш канал поздравляет вас с Новым годом! 🎄
Желаем: зарплату побольше, багов поменьше, заказчиков поадекватней, ТЗ поточнее, проектов поинтересней. Ну и, конечно, здоровья, благополучия и прекрасного настроения! 🥳
Получение элемента внутри компонента с помощью Vue querySelector
Используя querySelectorVue, мы можем получить доступ и изменить свойства первого выбранного элемента, создавая в процессе динамические и интерактивные веб-сайты. Мы можем использовать querySelector по разным причинам, включая, помимо прочего:
• Добавить или удалить CSS-стиль выбранного элемента
• Получить или установить значение выбранного элемента ввода
• Получить или установить атрибут выбранного элементаquerySelectorпросто реализовать внутри кода Vue, поэтому его могут использовать разработчики всех уровней, знакомые с Vue. В этом руководстве мы продемонстрируем, как получить элемент в компоненте с помощью querySelector во Vue, следуя пошаговым инструкциям для получения доступа или изменения свойства этого элемента.
https://blog.logrocket.com/getting-element-component-vue-queryselector/
#en #article #vue #queryselector
Топологическая сортировка
В информатике топологическая сортировка или топологическое упорядочение ориентированного графа является линейным упорядочением его вершин так, что для каждого направленного ребра uv из вершин u в вершину v , u предшествует v.
- Топологическая сортировка , Википедия
Помимо математической терминологии, топологическая сортировка позволяет вам взять серию команд «a предшествует b» и создать список элементов, который удовлетворяет этим ограничениям. Возможно, эти ограничения представляют собой файлы, которые необходимо загрузить, прежде чем их можно будет использовать, или задачи, которые необходимо выполнить для отправки продукта.
Мы будем использовать их для создания некоторого CSS, чтобы размещать одни элементы над другими.
https://cards.jordanscales.com/toposort
#en #article #javascript #sort #topological #graph
Глубокое копирование в JavaScript с использованием structuredClone
The Platform now ships with structuredClone(), a built-in function for deep-copying.
For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with structuredClone(), a built-in function for deep-copying.
Copying a value in JavaScript is almost always shallow, as opposed to deep. That means that changes to deeply nested values will be visible in the copy as well as the original.
https://web.dev/structured-clone/
#en #article #javascript #structuredclone #copying
Защитный CSS. Подборка техник, позволяющих избежать проблем с динамическим контентом
Часто нам хочется, чтобы был способ избежать возникновения определенной проблемы или поведения CSS. Вы знаете, что контент является динамическим, и на веб-странице все может измениться, что увеличивает вероятность проблемы с CSS или странного поведения.
Защитный CSS - это набор фрагментов, которые могут помочь вам в написании защищенного CSS. Другими словами, в будущем у вас будет меньше проблем.
https://ishadeed.com/article/defensive-css/
#en #article #css #defensive #dymanic
Как ваш браузер обрабатывает прикосновения к экрану телефона (js touch events)
В javascript существует 4 события которые вызываются при вашем прикосновении. Сами события помечаются как touch, именно как касание, а не finger например, потому что предполагается, что вы касаетесь, но чем именно неважно, например локтем или носом. То есть разработчики изначально разрабатывали интерфейс для более широких возможностей, чем только пальцы.
В статье рассмотрим основные фичи, которые есть в JavaScript для обработки прикосновения в дисплею.
https://habr.com/ru/post/592317/
#article #javascript #touch #events #touchevents
Процедурная генерация бумажных снежинок
Скоро начинаются предпраздничные дни, а вместе с ними и украшение наших домов. По этому поводу зеймемся процедурной генерацией лекала для вырезания из бумаги снежинок.
https://habr.com/ru/post/592659/
#javascript #snowflakes
10 вещей, которые можно делать в верстке с помощью псевдоэлементов before и after
По умолчанию, псевдоэлементы ::before и ::after делают то, что должны - добавляют нечто до элемента и после элемента. Однако, на практике почти никто не использует эту возможность, т.к. потребность в ней возникает крайне редко. Рассмотрим десять способов реального использования данных псевдоэлементов в работе.
https://habr.com/ru/company/skillbox/blog/592643/
#article #css #before #after
Введение в Svelte Actions
Actions are one of Svelte’s less commonly used features. An action allows you to run a function when an element is added to the DOM. While that sounds simple, an action used in the right way can greatly simplify your code and allow you to reuse bits of logic without creating an entirely separate component.
In this post, I’ll give two examples where a Svelte action would be useful and show why an action is the right tool for the job.
https://blog.logrocket.com/svelte-actions-introduction/
#en #article #svelte #actions
Сделайте свой сайт особенным с помощью настраиваемой полосы прокрутки
Полоса прокрутки - один из наиболее игнорируемых компонентов пользовательского интерфейса, которые не используются многими веб-сайтами для повышения удобства работы своих пользователей. По умолчанию во всем HTML, когда содержимое веб-сайта превышает высоту области просмотра, справа автоматически появляется полоса прокрутки, точно такая же, как на большинстве сайтов.
Полоса прокрутки по умолчанию выглядит неплохо, но может быть и лучше. 😊
https://esteetey.dev/make-your-website-stand-out-with-a-custom-scrollbar
#en #css #scrollbar
JavaScript: разрабатываем приложение для записи экрана
Решаем интересную задачу: записать экран компьютера пользователя.
Общие требования к реализации:
• запись должна состоять из видео и аудио
• у пользователя должна быть возможность просмотра и скачивания записи
• данные должны передаваться и сохраняться на сервере
• запись, сохраняемая на сервере, должна быть приличного качества, но весить мало
Если вам это интересно, прошу следовать за мной.
https://habr.com/ru/company/timeweb/blog/591417/
#javascript #screenrecord
Привет, каскадные слои CSS
Одной из наиболее распространенных причин путаницы в CSS является специфика при написании стилей. Например, изменение значения display элемента никогда не работает, потому что другой элемент в каскаде переопределяет его из-за более высокой специфичности. Или когда есть другой элемент !important. Это обычно происходит, когда кодовая база растет, а мы не организуем CSS таким образом, чтобы предотвратить (или уменьшить) такие проблемы.
Чтобы преодолеть проблемы с каскадом и специфичностью, нам нужно быть осторожными с тем, где писать конкретный блок CSS. В небольших проектах это может быть нормально, но для больших это трудоемкая задача.
В этой статье мы рассмотрим, как работают каскадные слои и как они помогут нам писать CSS с большей уверенностью, а также примеры использования и примеры.
Вы готовы? Давайте погрузимся!
https://ishadeed.com/article/cascade-layers/
#en #article #css #layers #cascade
📱26 февраля компания Flo проведет онлайн hiring event для Android, iOS и Front-End Web инженеров.
Пройти собеседование, получить job offer и welcome-бонус в размере $5 000 можно всего за несколько часов.
Для участия приглашаются Senior (6+ лет опыта на схожей позиции), а также Middle+ Mobile инженеры.
Чтобы принять участие вам надо пройти регистрацию:
👉Android инженеры https://grnh.se/2c18c9313us
👉iOS инженеры https://grnh.se/d2cbccaa3us
👉Web инженеры https://grnh.se/6cdf77f03us
Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
Как вы думаете, сколько CSS-градиентов нужно, чтобы нарисовать каждую из этих фигур?
Один! 😲 Причем его даже не надо дублировать: достаточно указать один раз в одном-единственном свойстве.
https://css-live.ru/tricks/border-image-gradients-sorcery.html
#css #gradient #border-image
Как создать круговую диаграмму, используя только CSS
Круговые диаграммы — это распространенные компоненты, которые позволяют отображать части целого, и их можно использовать для самых разных целей.
Существует множество статей о создании такого компонента, но обычно они основаны либо на SVG, либо на множестве элементов HTML.
В этом посте мы увидим, как создать круговую диаграмму, используя CSS и только один элемент.
https://www.freecodecamp.org/news/css-only-pie-chart/
https://codepen.io/t_afif/embed/XWaPXZO?
#article #codepen #css #chart #piechart #animation
День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari
21 декабря, самый короткий день в 21-м году 21 века, принес сразу несколько приятных CSS-новостей.
Во-первых, у CSS в очередной раз обновилось официальное определение — уже девятое по счету (можно сказать, «CSS9»🤣).
Во-первых, у CSS в очередной раз обновилось официальное определение — уже девятое по счету (можно сказать, «CSS9»🤣).
Во-вторых, в этот же день вышли сразу три новых первых публичных черновика.
И кстати, о браузерах: в этот же день вышел Safari TP 137 — экспериментальное превью будущих новинок.
https://css-live.ru/vecssti-s-polej/den-zimnego-solncsstoyaniya-novye-publikacii-css-i-priyatnyj-syurpriz-safari.html
#news #css #has #containerqueries #css2021 #safari #parentselector
5 способов уменьшения размера пакетов JavaScript
Сегодня мы активно используем JavaScript в веб-разработке. Существует множество приложений с большими размерами пакетов. Однако когда их объем переходит критическую точку, это может сказаться на эффективности софта.
В этой статье мы рассмотрим 5 способов уменьшить размер пакетов JavaScript, чтобы избавиться от проблем с производительностью.
https://nuancesprog.ru/p/14671/
#article #javascript #bundle #webpack
6 скрытых жемчужин JavaScript, которые вы могли пропустить
Насколько хорошо вы знаете язык? Это хороший вопрос, потому что всегда можно открыть для себя что-то новое в языке, даже после многих лет работы.
Сегодня мы затронем такие темы:
1. Mixins via Subclass Factories
2. Templating via Template Literals
3. Swap Variable Values via Destructuring
4. Enforce Mandatory Parameters For Functions
5. The For-Of Loop Supports Index Access
6. Iterating Over Unicode
https://javascript.plainenglish.io/6-hidden-javascript-gems-you-probably-missed-but-will-make-you-a-shining-star-at-work-b57a3bcf8015
#en #article #javascript
CSS Custom Properties
Настраиваемые свойства CSS, также известные как «переменные CSS», обеспечивают невероятную гибкость для всех ваших таблиц стилей.
Мы рассмотрим следующее:
• Что такое пользовательские свойства CSS
• Чем они отличаются от переменных препроцессора
• Почему вам следует использовать настраиваемые свойства
• Использование их для установки значений по умолчанию
• Настраиваемые свойства и наследование
• Доступ к пользовательским свойствам и их установка с помощью JavaScript
https://12daysofweb.dev/2021/css-custom-properties/
#en #article #css #custom #properties #customproperties
Актуальные форматы изображений в вебе
Основное преимущество современных форматов изображений — это уменьшение объёма передаваемого по сети трафика, когда пользователь взаимодействует с сайтом или веб-приложением. Как следствие, страницы открываются быстрее, что положительно влияет как на впечатление пользователя, так и на позиции в поиске: сайты, которые быстро загружаются, получают более высокие позиции в выдаче Яндекса и Google. При этом качество графических материалов остаётся по-прежнему высоким при минимальных трудозатратах на внедрение. В то же время не рекомендуем использовать только самые модные форматы, так как в отдельных случаях это не принесёт большой пользы.
Рассмотрим, как же делать хорошо.
https://habr.com/ru/post/594211/
#article #img #image #svg #webp #jpg #png
Move Along Curve
Создаем точки с движением по кривой
https://codepen.io/radNoise/pen/mdBPmpQ
#codepen #javascript #canvas #animation
Three.js dancing Tree (for Xmas)
Создаем анимированную елочку с помощью Three.js
https://codepen.io/pehaa/pen/KKXMKMN
#codepen #javascript #threejs
Как контролировать лейаут страниц с мультинаправленным контентом
Многие бизнес-сайты нуждаются в мутильязычной настройке. Как и во всем, что связано с разработкой, желательно реализовать ее простым, эффективным и удобным в обслуживании способом.
Сменить язык и содержание - самая простая часть. Но когда вы это делаете, иногда язык, на который вы меняете, имеет другое направление . Например, текст (и, следовательно, макет) на английском языке идет слева направо, в то время как текст (и, следовательно, макет) на арабском языке идет справа налево.
В этой статье мы хотим создать многоязычную целевую страницу и поделиться некоторыми методами CSS, которые упрощают этот процесс.
https://css-tricks.com/control-layout-in-a-multi-directional-website/
#en #article #css #multilingual
proposals.es — Веб-сайт для получения последней информации о ECMAScript proposals
https://www.proposals.es/
#javascript #es #ecmascript #proposals
В maxma.com Middle/Senior Frontend Developer (AngularJS)
Мы ищем разработчика, который разберется в нашем фронтовом стеке, наведет порядок в тулинге, избавится от легаси, напишет много новых красивых интерфейсов, которые будут бесконечно радовать пользователей и нести пользу!
От кандидата ждем:
•опыт адаптивной верстки
•опыт в Angular / React / Vue.js
•готовность разобраться с AngularJS, если не было такого опыта
•знакомство с инструментами сборки и пакетными менеджерами
•GIT, консоль
•умение использовать Docker в разработке - будет плюсом
Приглашаем на фулл-тайм или частичную занятость от 10ч/неделю с почасовой оплатой.
Удаленка/Офис/Гибрид – на выбор кандидата.
Пишите!
в Telegram: @livinbelievin
на почту: denis@maxma.com
Управление памятью в JavaScript
While learning about memory management, we need to deal with 2 things basically, i.e. How memory is allocated and how we are going to access it.
The memory life cycle comprises of 3 phases:
1. Allocation
2. Use
3. Release
The Allocation and the Release phase are handled by JavaScript. Knowing this memory management, the process helps programs to use memory efficiently while coding.
gdsc.cu/memory-management-in-javascript-bf5d7c048054" rel="nofollow">https://medium.com/@gdsc.cu/memory-management-in-javascript-bf5d7c048054
#en #article #javascript #memory
