Frontend-разработка
2 subscribers
878 photos
579 videos
3.31K links
Агрегатор каналов о фронтенде
Download Telegram
Forwarded from Frontender's notes [ru]
👩‍💻 RegExp флаг /v

Регулярные выражения в JavaScript имеют множество улучшений, включая поддержку Юникода с флагом u в ES2015. Флаг v, предложенный для замены флага u, добавляет дополнительные преимущества.

Он позволяет использовать нотацию набора /set и искать пересечение двух шаблонов. Флаг v также решает проблемы с нечувствительностью к регистру, присущие флагу u. Этот флаг был реализован во всех основных браузерах и ожидается в спецификации ES2024.

🗣Несколько примеров его использования:

const isEmoji = /^\p{RGI_Emoji}$/v;
console.log(isEmoji.test("💚")); // true
console.log(isEmoji.test("🐨")); // true


const isNotHeartEmoji = /^[\p{RGI_Emoji_Tag_Sequence}--\q{💜💚♥️💙🖤💛🧡🤍🤎}]$/v;
console.log(isNotHeartEmoji.test("💚")); // false
console.log(isNotHeartEmoji.test("🐨")); // true


const GreekLetters = /[\p{Script_Extensions=Greek}&&\p{Letter}]/v;
console.log(GreekLetters.test('π')); // true
console.log(GreekLetters.test('𐆊')); // false
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Frontender's notes [ru]
👩‍💻 RegExp флаг /v

Регулярные выражения в JavaScript имеют множество улучшений, включая поддержку Юникода с флагом u в ES2015. Флаг v, предложенный для замены флага u, добавляет дополнительные преимущества.

Он позволяет использовать нотацию набора /set и искать пересечение двух шаблонов. Флаг v также решает проблемы с нечувствительностью к регистру, присущие флагу u. Этот флаг был реализован во всех основных браузерах и ожидается в спецификации ES2024.

🗣Несколько примеров его использования:

const isEmoji = /^\p{RGI_Emoji}$/v;
console.log(isEmoji.test("💚")); // true
console.log(isEmoji.test("🐨")); // true


const isNotHeartEmoji = /^[\p{RGI_Emoji_Tag_Sequence}--\q{💜💚♥️💙🖤💛🧡🤍🤎}]$/v;
console.log(isNotHeartEmoji.test("💚")); // false
console.log(isNotHeartEmoji.test("🐨")); // true


const GreekLetters = /[\p{Script_Extensions=Greek}&&\p{Letter}]/v;
console.log(GreekLetters.test('π')); // true
console.log(GreekLetters.test('𐆊')); // false
Please 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
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
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
Forwarded from Frontender's notes [ru]
👩‍💻 Что такое Promise, и какие бывают состояния

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
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
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
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
This media is not supported in your browser
VIEW IN TELEGRAM
Proximity Glow Cards

Настройки стилей карточек реализованы при помощи библиотеки 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
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
🖥 AI and Machine Learning Landing Page – сайт для приложения, использующего нейросеть. Выполнен в холодных пастельных тонах, которые хорошо сочетаются с темным фоном.

Сайтодел | #макет #figma


Original post link: t.me/sitodel/1760
Forwarded and filtered by @smartfeed_bot
Как работает прототипное наследование в JavaScript? Можете ли вы объяснить разницу между классическим наследованием и прототипным?

Прототипное наследование в JavaScript означает, что объекты наследуют свойства и методы от другого объекта, известного как прототип. В отличие от классического наследования, где классы являются схемами для создания объектов, в 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
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
​​Стилизация участков текста с помощью 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
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
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