Frontend-разработка
2 subscribers
878 photos
579 videos
3.31K links
Агрегатор каналов о фронтенде
Download Telegram
This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 1 messages
Our filtering prevented you from: 9 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 is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 0 messages
Our filtering prevented you from: 10 messages

Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
Веб-страница: 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
💾 Stacked Cards with Autoplay – карточки, которые перелистываются автоматически. Активная карточка имеет слабую оранжевую подсветку в виде рамки. Подсветка не исчезает во время анимации.

Сайтодел | #сниппет #css


Original post link: t.me/sitodel/1987
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 21 messages
Today you received: 1 messages
Our filtering prevented you from: 20 messages

Top 3 source channels:
Сайтодел | GitHub, Верстка, Сайты, FullStack: 11 message(s)
Frontender's notes [ru]: 4 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 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 is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 0 messages
Our filtering prevented you from: 10 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 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 is a daily stats digest!
Today the bot processed: 20 messages
Today you received: 0 messages
Our filtering prevented you from: 20 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 12 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)
Frontender's notes [ru]: 3 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
👩‍💻 Когда нужен TypeScript: введение в мир надежного программирования

Поговорим про введение в TypeScript и то, как с помощью него мы можем сделать наше программирование и наш код на JavaScript более надежными и прогнозируемыми.

Читать...


Original post link: t.me/frontendnoteschannel/4014
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 2 messages
Our filtering prevented you from: 8 messages

Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 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 is a daily stats digest!
Today the bot processed: 17 messages
Today you received: 0 messages
Our filtering prevented you from: 17 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 12 message(s)
Frontender's notes [ru]: 3 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 is a daily stats digest!
Today the bot processed: 12 messages
Today you received: 1 messages
Our filtering prevented you from: 11 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 5 message(s)
Frontender's notes [ru]: 3 message(s)
Сайтодел | GitHub, Верстка, Сайты, FullStack: 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
AI Side Panel

Интересное Chrome-расширение, с помощью которого можно вызвать ChatGPT и Google Gemini прямо в окне браузера в пару кликов.

Есть одно — для работы потребуется VPN. Сама же панель открывается комбинацией Alt + Q

Ссылка на расширение: https://chromewebstore.google.com/detail/ai-side-panel/icapcpllhdnnpcmfdcgpnbgchfenmjmg


Original post link: t.me/tproger_web/4864
Forwarded and filtered by @smartfeed_bot
✔️ Валидация модели данных в ASP.NET Core 8.0 на основе HTMX

В статье мы освоим базовую реализацию валидации данных на стороне сервера. На стороне сервера мы используем самый простой способ коммуникации - HTTP.

Читать...


Original post link: t.me/frontendnoteschannel/4045
Forwarded and filtered by @smartfeed_bot
👩‍💻 Форматирование списка чисел

Напишите функцию, которая принимает отсортированный список целых чисел и возвращает строку, в которой числа либо записаны по одному, либо указаны диапазоны через дефис, если диапазон содержит хотя бы три последовательных числа.

Пример: Для списка [-10, -9, -8, -6, -3, -2, -1, 0, 1, 3, 4, 5, 7, 8, 9, 10, 11, 14, 15, 17, 18, 19, 20] функция должна вернуть строку "-10--8,-6,-3-1,3-5,7-11,14,15,17-20".

Решение задачи🔽

function solution(list) {
let result = [];
let i = 0;

while (i < list.length) {
let start = list[i];
while (list[i + 1] - list[i] === 1) i++;
let end = list[i];

if (end - start >= 2) {
result.push(`${start}-${end}`);
} else {
result.push(start.toString());
if (end !== start) {
result.push(end.toString());
}
}
i++;
}

return result.join(',');
}



Original post link: t.me/frontendnoteschannel/4046
Forwarded and filtered by @smartfeed_bot
Приходят в компанию, а уходят от руководителя: проявления негатива, которых стоит избегать в рабочей коммуникации

Давайте посмотрим, какой негатив может проявляться на работе и чего стоит избегать, если вы хотите создать здоровую команду на долгосрочный период. Расположил все плохие проявления в общении в порядке роста деструктивности:

1. Невербальный негатив
Это всё, что не озвучено явно — мимика, жесты, позы тела, взгляды, эмоции, тембр и громкость голоса. Довольно большой и богатый спектр, чтобы выразить почти любые чувства. Не все такое умеют считывать, так как не обладают достаточной степенью эмпатии или просто равнодушны к собеседникам. На мой взгляд, это на самом деле ключевой маркер поведения, который даёт больше информации, чем слова.

2. Троллинг
Это различные шуточные подколы или фотожабы на что-либо. Не все понимают, как на них реагировать, в том числе, например, на злобные комменты к текстам в социальных сетях. В последнее время люди привыкли к таким действиям и уже даже выработали какой-то иммунитет — не обращают внимания. Но тролли бывают разные и мастера манипуляций в тонком стиле способны довести неподготовленного человека до остервенения.

3. Токсичность
Пожалуй, самое затасканное понятие, которое часто неверно понимают. Токсичность — это не «плохое поведение», а действия, которые отравляют окружение при контакте. К примеру, собеседник вполне себе вежлив, но капля сарказма тут, усмешка там и вот уже с ним нет желания говорить даже в чате, не то, что в реале.

4. Пассивная агрессия
Как ни странно, иногда самый действенный метод для того чтобы пробить тупость людей) Не советую злоупотреблять, но в некоторых случаях можно использовать, чтобы разрулить ситуацию без доведения до открытого конфликта — это лучше, чем допустить драку. В рабочих отношениях будет вызывать раздражение, но если директор не хочет решать какие-то трудности менеджмента, то именно такое отношение он и получит в результате.

5. Хамство
Одна из самых старых форм выражения эмоций, которую на фоне остального негатива почти уже не обращают внимания, так как просто привыкли и очерствели от окружающего. Один послал на другого, тот в ответ сказал то же самое — все «довольные» разошлись. В коллективе же такое поведение медленно разъедает команду, люди перестают доверять друг другу и просто общаться.

👉 @seniorFront
👩‍💻 Проверка сбалансированных скобок

Напишите функцию, которая принимает строку, содержащую различные типы скобок ((), {}, []), и проверяет, являются ли они сбалансированными. Строка считается сбалансированной, если каждая открывающая скобка имеет соответствующую закрывающую в правильном порядке.

Пример: Для строки "{[()]}" функция должна вернуть true, а для строки "{[(])}"false.

Решение задачи🔽

function isBalanced(str) {
const stack = [];
const pairs = { ')': '(', '}': '{', ']': '[' };

for (let char of str) {
if (['(', '{', '['].includes(char)) {
stack.push(char);
} else if ([')', '}', ']'].includes(char)) {
if (stack.pop() !== pairs[char]) return false;
}
}
return stack.length === 0;
}

// Пример использования
console.log(isBalanced("{[()]}")); // true
console.log(isBalanced("{[(])}")); // false



Original post link: t.me/frontendnoteschannel/4054
Forwarded and filtered by @smartfeed_bot
Original post link: t.me/tproger_web/4882
Forwarded and filtered by @smartfeed_bot
👩‍💻 Упаковка массива последовательностей

Напишите функцию, которая принимает массив чисел и группирует последовательные числа в виде подмассивов. Если числа идут друг за другом, их нужно объединить в один подмассив. Если нет, каждое число должно остаться отдельным элементом в результирующем массиве.

Пример: Для массива [1, 2, 3, 5, 6, 8, 9, 10] функция должна вернуть [[1, 2, 3], [5, 6], [8, 9, 10]].

Решение задачи🔽

function packSequences(arr) {
let result = [];
let temp = [];

for (let i = 0; i < arr.length; i++) {
if (temp.length === 0 || arr[i] === arr[i - 1] + 1) {
temp.push(arr[i]);
} else {
result.push(temp);
temp = [arr[i]];
}
}
if (temp.length > 0) result.push(temp);

return result;
}

// Пример использования:
console.log(packSequences([1, 2, 3, 5, 6, 8, 9, 10])); // [[1, 2, 3], [5, 6], [8, 9, 10]]



Original post link: t.me/frontendnoteschannel/4067
Forwarded and filtered by @smartfeed_bot
#вопросы_с_собеседований
Объясните стрелочные функции.

Стрелочная функция – это краткий способ записи функциональных выражений.

Стрелочные функции не являются конструкторами, не поддерживают ключевые слова this, arguments, super и new.target и записываются так, как показано на картинке.


Original post link: t.me/senior_front/2294
Forwarded and filtered by @smartfeed_bot
Как использовать useEffect ?

Это хук, введённый в React 16.8, который позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты включают в себя операции, которые выходят за рамки возвращаемого результатом рендеринга, такие как работа с сетью (запросы к API), подписки, изменение документа и так далее. Он заменяет собой жизненные циклы классовых компонентов, такие как componentDidMount, componentDidUpdate и componentWillUnmount.

Синтаксис:
useEffect(() => {
// Ваш код для побочного эффекта
return () => {
// Очистка (необязательно)
};
}, [зависимости]);

Функция побочного эффекта: Это его основное тело, где вы помещаете код, который должен выполняться после каждого рендеринга (по умолчанию) или когда изменяются определённые зависимости.
Очистка: Функция очистки выполняется перед тем, как компонент будет удалён, а также перед следующим выполнением эффекта. Это идеальное место для отмены подписок, таймеров и других ресурсов, чтобы избежать утечек памяти.
Массив зависимостей: Определяет, при изменении каких значений должен повторно выполняться эффект. Если массив пуст ([]), эффект выполнится один раз после первого рендеринга. Если массив не указан, эффект будет выполняться после каждого рендеринга.

Примеры использования:

Запуск эффекта один раз
Чтобы выполнить эффект один раз после первого рендеринга (аналог componentDidMount в классовых компонентах), используйте пустой массив зависимостей:
useEffect(() => {
// Код здесь будет выполнен один раз после инициализации компонента
}, []);


Выполнение при изменении зависимостей
Чтобы выполнить эффект при изменении определённых значений:
const [count, setCount] = useState(0);

useEffect(() => {
// Код здесь будет выполнен каждый раз, когда изменяется значение count
document.title = Вы нажали ${count} раз;
}, [count]); // Зависимости


Очистка эффекта
Пример использования функции очистки:
useEffect(() => {
const timerID = setInterval(() => {
// Ваша логика здесь
}, 1000);

return () => {
clearInterval(timerID); // Очистка при размонтировании компонента
};
}, []); // Эффект выполнится один раз


👉 @seniorFront