Forwarded from Frontender's notes [ru]
Регулярные выражения в JavaScript имеют множество улучшений, включая поддержку Юникода с флагом u в ES2015. Флаг v, предложенный для замены флага u, добавляет дополнительные преимущества.
Он позволяет использовать нотацию набора
/set и искать пересечение двух шаблонов. Флаг v также решает проблемы с нечувствительностью к регистру, присущие флагу u. Этот флаг был реализован во всех основных браузерах и ожидается в спецификации ES2024.const isEmoji = /^\p{RGI_Emoji}$/v;
console.log(isEmoji.test("💚")); // true
console.log(isEmoji.test("🐨")); // trueconst isNotHeartEmoji = /^[\p{RGI_Emoji_Tag_Sequence}--\q{💜💚♥️💙🖤💛🧡🤍🤎}]$/v;
console.log(isNotHeartEmoji.test("💚")); // false
console.log(isNotHeartEmoji.test("🐨")); // trueconst GreekLetters = /[\p{Script_Extensions=Greek}&&\p{Letter}]/v;
console.log(GreekLetters.test('π')); // true
console.log(GreekLetters.test('𐆊')); // falsePlease open Telegram to view this post
VIEW IN TELEGRAM
#вопросы_с_собеседований
Что такое Веб-компоненты и какие технологии в них используются?
Веб-компоненты — технология, которая позволяет создавать многократно используемые компоненты в веб-документах и веб-приложениях. Веб-компоненты поддерживаются веб-браузерами напрямую и не требуют дополнительных библиотек для работы.
Веб-компоненты включают четыре технологии, каждая из которых может использоваться отдельно от других:
Custom Elements — API для создания собственных HTML элементов.
HTML Templates — тег позволяет реализовывать изолированные DOM-элементы.
Shadow DOM — изолирует DOM и стили в разных элементах.
HTML Imports — импорт HTML документов.
Original post link: t.me/senior_front/1994
Forwarded and filtered by @smartfeed_bot
Что такое Веб-компоненты и какие технологии в них используются?
Веб-компоненты — технология, которая позволяет создавать многократно используемые компоненты в веб-документах и веб-приложениях. Веб-компоненты поддерживаются веб-браузерами напрямую и не требуют дополнительных библиотек для работы.
Веб-компоненты включают четыре технологии, каждая из которых может использоваться отдельно от других:
Custom Elements — API для создания собственных HTML элементов.
HTML Templates — тег позволяет реализовывать изолированные DOM-элементы.
Shadow DOM — изолирует DOM и стили в разных элементах.
HTML Imports — импорт HTML документов.
Original post link: t.me/senior_front/1994
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 6 messages
Our filtering prevented you from: 4 messages
Top 3 source channels:
Веб-страница: 3 message(s)
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Today the bot processed: 10 messages
Today you received: 6 messages
Our filtering prevented you from: 4 messages
Top 3 source channels:
Веб-страница: 3 message(s)
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
This media is not supported in your browser
VIEW IN TELEGRAM
Smooth 3d perspective slider
Свёрстано при помощи препроцессоров Pug и SCSS. Функционал слайдера и логика поворота карточки реализована на чистом JS.
👉 @seniorFront
Original post link: t.me/seniorFront/4055
Forwarded and filtered by @smartfeed_bot
Свёрстано при помощи препроцессоров Pug и SCSS. Функционал слайдера и логика поворота карточки реализована на чистом JS.
👉 @seniorFront
Original post link: t.me/seniorFront/4055
Forwarded and filtered by @smartfeed_bot
Forwarded from Frontender's notes [ru]
Promise - это объект в JavaScript, который представляет результат асинхронной операции. Промис позволяет обрабатывать результат операции, когда он станет доступным, вместо того, чтобы блокировать выполнение кода и ожидать завершения операции.
🔽 Промис может находиться в одном из трех состояний:
Pending: Исходное состояние промиса. Он находится в ожидании выполнения или отклонения операции.
Fulfilled: Промис переходит в это состояние, когда операция успешно завершается. В этом случае промис возвращает результат операции.
Rejected: Промис переходит в это состояние, когда операция завершается с ошибкой. В этом случае промис возвращает причину ошибки.
🔽 Пример использования промиса:
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = 'Some data';
// Имитация успешного выполнения операции
resolve(data);
// Имитация ошибки
// reject('Error occurred');
}, 2000);
});
}
fetchData()
.then(result => {
console.log('Результат:', result);
})
.catch(error => {
console.log('Ошибка:', error);
});#Собеседование
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Light & Shadow Text Shadow Animation
В этом видео создается тень текста, при помощи CSS text-shadow, затем в JS изменяются параметры этой тени.
👉 @seniorFront
Original post link: t.me/seniorFront/4057
Forwarded and filtered by @smartfeed_bot
В этом видео создается тень текста, при помощи CSS text-shadow, затем в JS изменяются параметры этой тени.
👉 @seniorFront
Original post link: t.me/seniorFront/4057
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Lottie Animations in React – анимация, написанная на библиотеке Lottie. Весь код находится в JS-файле, а HTML и CSS не используются.
Сайтодел | #сниппет #css
Original post link: t.me/sitodel/1759
Forwarded and filtered by @smartfeed_bot
Сайтодел | #сниппет #css
Original post link: t.me/sitodel/1759
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 8 messages
Today you received: 4 messages
Our filtering prevented you from: 4 messages
Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Веб-страница: 2 message(s)
Frontender's notes [ru]: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Today the bot processed: 8 messages
Today you received: 4 messages
Our filtering prevented you from: 4 messages
Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Веб-страница: 2 message(s)
Frontender's notes [ru]: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
This media is not supported in your browser
VIEW IN TELEGRAM
👩💻 Animated Login Form
Форма для входа с интересной анимацией вокруг. Сделана на чистом CSS.
#codepen
Original post link: t.me/frontendnoteschannel/3557
Forwarded and filtered by @smartfeed_bot
Форма для входа с интересной анимацией вокруг. Сделана на чистом CSS.
#codepen
Original post link: t.me/frontendnoteschannel/3557
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Proximity Glow Cards
Настройки стилей карточек реализованы при помощи библиотеки
👉 @seniorFront
Original post link: t.me/seniorFront/4060
Forwarded and filtered by @smartfeed_bot
Настройки стилей карточек реализованы при помощи библиотеки
dat.gui. Стилизовано и анимировано в CSS.👉 @seniorFront
Original post link: t.me/seniorFront/4060
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 7 messages
Today you received: 3 messages
Our filtering prevented you from: 4 messages
Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 2 message(s)
Веб-страница: 1 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Today the bot processed: 7 messages
Today you received: 3 messages
Our filtering prevented you from: 4 messages
Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 2 message(s)
Веб-страница: 1 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
This media is not supported in your browser
VIEW IN TELEGRAM
Travel carousel
Функционал слайдера реализован библиотекой swiper. Стилизовано в SCSS.
👉 @seniorFront
Original post link: t.me/seniorFront/4062
Forwarded and filtered by @smartfeed_bot
Функционал слайдера реализован библиотекой swiper. Стилизовано в SCSS.
👉 @seniorFront
Original post link: t.me/seniorFront/4062
Forwarded and filtered by @smartfeed_bot
🖥 AI and Machine Learning Landing Page – сайт для приложения, использующего нейросеть. Выполнен в холодных пастельных тонах, которые хорошо сочетаются с темным фоном.
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1760
Forwarded and filtered by @smartfeed_bot
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1760
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend Developer | JavaScript, React, HTML & CSS
Как работает прототипное наследование в JavaScript? Можете ли вы объяснить разницу между классическим наследованием и прототипным?
Прототипное наследование в JavaScript означает, что объекты наследуют свойства и методы от другого объекта, известного как прототип. В отличие от классического наследования, где классы являются схемами для создания объектов, в JavaScript объект может наследовать непосредственно от другого объекта.
Ключевой особенностью прототипного наследования является то, что оно позволяет объектам делиться свойствами и методами, что упрощает повторное использование кода. Например, если у вас есть объект animal, и вы создаете объект dog, который наследует от animal, dog будет иметь доступ ко всем свойствам и методам animal.
Классическое наследование, часто встречающееся в языках, таких как Java или C++, включает в себя иерархию классов, где классы наследуются от других классов. В JavaScript прототипное наследование позволяет объектам наследовать напрямую друг от друга, что делает его более гибким, но также может быть более запутанным для понимания без тщательного изучения.
Ключевой особенностью прототипного наследования является то, что оно позволяет объектам делиться свойствами и методами, что упрощает повторное использование кода. Например, если у вас есть объект animal, и вы создаете объект dog, который наследует от animal, dog будет иметь доступ ко всем свойствам и методам animal.
Классическое наследование, часто встречающееся в языках, таких как Java или C++, включает в себя иерархию классов, где классы наследуются от других классов. В JavaScript прототипное наследование позволяет объектам наследовать напрямую друг от друга, что делает его более гибким, но также может быть более запутанным для понимания без тщательного изучения.
This is a daily stats digest!
Today the bot processed: 11 messages
Today you received: 3 messages
Our filtering prevented you from: 8 messages
Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Today the bot processed: 11 messages
Today you received: 3 messages
Our filtering prevented you from: 8 messages
Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
Media is too big
VIEW IN TELEGRAM
Soap & Bubbles
В этом видео создается анимация, частицы которой генерируются в JS, а затем анимируются в CSS.
👉 @seniorFront
Original post link: t.me/seniorFront/4064
Forwarded and filtered by @smartfeed_bot
В этом видео создается анимация, частицы которой генерируются в JS, а затем анимируются в CSS.
👉 @seniorFront
Original post link: t.me/seniorFront/4064
Forwarded and filtered by @smartfeed_bot
Стилизация участков текста с помощью CSS Custom Highlight API
В этой статье рассказали, как с помощью CSS Custom Highlight API можно стилизовать выделенные диапазоны текста, а также разберу теорию на практическом примере: https://tproger.ru/articles/css-custom-highlight-api
#css
Original post link: t.me/tproger_web/4562
Forwarded and filtered by @smartfeed_bot
В этой статье рассказали, как с помощью CSS Custom Highlight API можно стилизовать выделенные диапазоны текста, а также разберу теорию на практическом примере: https://tproger.ru/articles/css-custom-highlight-api
#css
Original post link: t.me/tproger_web/4562
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Слайдер для выражения эмоций, написанный на SCSS и JS.
https://codepen.io/thebabydino/pen/vwJeJN
Original post link: t.me/senior_front/1998
Forwarded and filtered by @smartfeed_bot
https://codepen.io/thebabydino/pen/vwJeJN
Original post link: t.me/senior_front/1998
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
React Smooth Section Navigator
Создано на React и анимировано библиотекой gsap.
👉 @seniorFront
Original post link: t.me/seniorFront/4065
Forwarded and filtered by @smartfeed_bot
Создано на React и анимировано библиотекой gsap.
👉 @seniorFront
Original post link: t.me/seniorFront/4065
Forwarded and filtered by @smartfeed_bot
👩💻 Запросы стиля
Спецификация запросов контейнера также позволяет запрашивать значения стилей родительского элемента.
В следующем примере используются характеристики погоды, хранящиеся в значениях переменных, такие как дождь, солнечно и облачно, для стилизации фона карточки и иконки индикатора.
Forwarded and filtered by @smartfeed_bot
Спецификация запросов контейнера также позволяет запрашивать значения стилей родительского элемента.
В следующем примере используются характеристики погоды, хранящиеся в значениях переменных, такие как дождь, солнечно и облачно, для стилизации фона карточки и иконки индикатора.
@container style(--sunny: true) {
.weather-card {
background: linear-gradient(-30deg, yellow, orange);
}
.weather-card:after {
content: url();
background: gold;
}
}
Original post link: t.me/frontendnoteschannel/3564Forwarded and filtered by @smartfeed_bot