Splashed Toast Notifications

Создано и анимировано на чистом CSS. Каждый элемент - это чекбокс, при активации которого задействуются определенные стили.

👉 @seniorFront


Original post link: t.me/seniorFront/3940
Forwarded and filtered by @smartfeed_bot

1's, 0's and wildcards

Вам дана строка, содержащая нули, единицы и один или более '?', где '?' - это подстановочный знак, который может быть 0 или 1.
Верните массив, содержащий все возможные значения, которые можно получить, заменяя '?' нулём или единицей.

Пример:
'101?' -> ['1010', '1011']
'1?1?' -> ['1010', '1110', '1011', '1111']

👉 @seniorFront


Original post link: t.me/seniorFront/3941
Forwarded and filtered by @smartfeed_bot

🖥 Glass Flowers 3D Assets – набор PNG-изображений стеклянных цветов. Есть три варианта картинок: золотые, сине-розовые (с фильтром) и черно-белые.

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


Original post link: t.me/sitodel/1712
Forwarded and filtered by @smartfeed_bot

Зато будет с чем чай попить


Original post link: t.me/ithumor/11021
Forwarded and filtered by @smartfeed_bot

​​👤Как я отрендерил миллион строк в React

В этой статье вы узнаете о методах и подходах к эффективному визуализированию миллиона строк данных в ReactJS, используя элемент Canvas.

Читать...


Original post link: t.me/frontendnoteschannel/3445
Forwarded and filtered by @smartfeed_bot

​​😉Знакомьтесь, SafeTest — новый подход к тестированию фронтенда

В этой статье мы поговорим о SafeTest — революционной библиотеке, которая предлагает свежий взгляд на сквозные (E2E) тесты для веб-приложений с пользовательским интерфейсом.

Читать...


Original post link: t.me/frontendnoteschannel/3446
Forwarded and filtered by @smartfeed_bot

Метод console.time()

Чтобы подсчитать длительность каких-либо действий, можно использовать метод console.time(id). Он принимает в качестве аргумента уникальное имя таймера, который затем можно остановить с помощью console.timeEnd(id). Время, прошедшее между вызовами, будет выведено в консоль.

Плюс ко всему, можно запускать до 10 тысяч разных таймеров, используя разные айди, и выводить текущее значение запущенного таймера при помощи метода console.timeLog(id).


Original post link: t.me/senior_front/1931
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 8 messages
Today you received: 6 messages
Our filtering prevented you from: 2 messages

Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)
Сайтодел | GitHub, Макеты, Шрифты, JavaScript, Figma: 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

💾 Wooden Toggles – реалистичные объемные переключатели, стилизованные под дерево. При нажатии цвет переключается плавно.

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


Original post link: t.me/sitodel/1713
Forwarded and filtered by @smartfeed_bot

​.toSorted()

Метод массива toSorted() это копия метода sort(), но, в отличие от него, не мутирует исходный массив, а возвращает новый отсортированный массив. Все undefined элементы сортируются в конец массива.

Пример
Отсортируем массив с числами:
const numbers = [43, 6, 35, 1, 9, 7, 5, 75, 16];
const sortedNumbers = numbers.toSorted((a, b) => a - b);
console.log(numbers);
// [43, 6, 35, 1, 9, 7, 5, 75, 16];
console.log(sortedNumbers);
// [1, 5, 6, 7, 9, 16, 35, 43, 75]

При сортировке массива методом toSorted() возвращаемый массив будет содержать поверхностную копию (shallow copy) элементов, если эти элементы являются объектами. При изменении этих элементов в объекте, изменения будут видны и в исходном массиве.
const obj = {name: 'Scarlett'};
const names = [
'Kirill',
'Alex',
obj,
'Denis',
'Albert',
undefined,
'',
];
const sortedNames = names.toSorted();

console.log(sortedNames);
// ['', 'Albert', 'Alex', 'Denis', 'Kirill', { name: 'Scarlett' }, undefined]

obj.name = 'Dan'; // меняем объект

console.log(sortedNames)
// ['', 'Albert', 'Alex', 'Denis', 'Kirill', { name: 'Dan' }, undefined]
// в отсортированном массиве, объект также изменился.

👉 @seniorFront

​​Веб-разработка уже не будет прежней: Google объявила об отключении «старого» интернета и перехода на новый проект под названием «Бесконечный интернет» (Endless Internet)

Этот проект представляет собой альтернативную сеть, которая будет работать без использования протокола TCP/IP, на котором основана работа современного интернета. Вместо этого, новая сеть будет использовать технологию квантовых вычислений и квантовые коммуникации.

«Проект позволит обеспечить высокую скорость передачи данных и абсолютную безопасность передаваемой информации. Однако, для работы новой сети необходимо отключить существующую сеть интернет» — прокомментировал новую разработку Сундар Пичаи, CEO Google.

Поэтому, начиная с 23:59 1.04.2024, интернет перестанет работать до тех пор, пока не будет полностью запущена новая сеть «Бесконечный интернет».

@tproger_web #кек


Original post link: t.me/tproger_web/4471
Forwarded and filtered by @smartfeed_bot

​​☁️Как задеплоить сайт в облако. Инструкция для новичков

В этой статье вы узнаете, как разместить сайт в облаке: арендовать сервер, подключиться через SSH, клонировать проект из GitHub, настроить Nginx, задеплоить сайт, подключить домен и настроить SSL-сертификат.

Читать...


Original post link: t.me/frontendnoteschannel/3447
Forwarded and filtered by @smartfeed_bot

​Если вы разработчик какого-то сайта и у вас есть капча — замените вашу капчу вот на эту

Конечно, капча шуточная, в реальности такую любой ИИ пройдет еще быстрее чем человек. Но зато как выглядит!

Демо и код проекта: https://vivirenremoto.github.io/doomcaptcha/

#безопасность


Original post link: t.me/tproger_web/4472
Forwarded and filtered by @smartfeed_bot

Split Landing Page

При наведении изменяется Значение Width блока. Плавность достигается при помощи CSS transition.

👉 @seniorFront


Original post link: t.me/seniorFront/3945
Forwarded and filtered by @smartfeed_bot

​​🚀Анализ производительности React Native приложений: как выявить проблемы и улучшить перформанс

В этой статье расскажу, как провести профилирование (оно же измерение производительности или оценка перформанса) RN-приложений: как выявить источник проблем и решить их.

Читать...


Original post link: t.me/frontendnoteschannel/3448
Forwarded and filtered by @smartfeed_bot

Sun Reflection

Солнце, отражающееся в воде, сделанное на чистом CSS без использования JS.

https://codepen.io/pokecoder/pen/JjJxXbJ


Original post link: t.me/senior_front/1932
Forwarded and filtered by @smartfeed_bot

​Как получать приглашения на собесы, если опыта минимум?

1. Добавьте максимальное количество навыков, которые вам подходят, чем больше навыков - тем лучше. Желательно выбирать навыки из списка, которые есть на сайте. Если нашли какую-нибудь очень интересную вакансию - возможно стоит на какое-то время изменить резюме, чтобы навыки на 100% подходили под вакансию, но это надо делать только в том случае, если этими навыками вы действительно обладаете. Чем больше соответствие навыков - тем выше вас видит работодатель

2. Распишите информацию о проектах, чтобы все было довольно детально, но лаконично: стек, обязанности, команда. Об этом часто спрашивают на следующих этапах. Если очень лень - можно использовать нейросеть, но потом текст все равно обязательно нужно отредактировать

3. Уберите возраст из профиля. Мне это помогло, потому что только стукнуло 18, но, думаю, лучше от этой информации в профиле избавиться, у всех HR свои предпочтения. Если очень интересно будет - спросят на интервью (обычно спрашивают)

4. Добавьте контактные данные в раздел "Обо мне", поскольку для того, чтобы увидеть ваши контактные данные на сайте, работодателю нужно платить, а если вы дадите их бесплатно - будет чуть выше шанс, что с вами свяжутся. Также в этом разделе стоит указать GitHub и сайт-визитку, если есть

5. Попробуйте верифицировать хотя бы один навык, это хороший знак для работодателя

6. Не стоит добавлять сертификаты "Русского Медвежонка", которые вы получили за победу в олимпиаде во 2 классе. Фотографию брелка победителя еще можете прикрепить, но тоже опционально

Все эти пункты помогли автору статьи получать положительные ответы на отклики на интересные мне вакансии. Все эти пункты выполнить очень просто, свой годовой опыт работы автор в профиле отразил в вышеописанном формате где-то за полчаса, так что вы тоже потратьте, если еще этого не сделали, это время потом точно окупится.

👉 @seniorFront

🎨 Цветовая палитра макета "Agriculture Landing Website Templates"

HEX | RGB
#D4D4BE | rgb(212,212,190)
#49A760 | rgb(73,167,96)
#1F4E3D | rgb(31,78,61)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра


Original post link: t.me/sitodel/1714
Forwarded and filtered by @smartfeed_bot

​​​Применение принципов SOLID в React

В этой статье вы узнаете, как применять принципы SOLID в React. SOLID — это набор принципов, которые помогают разработчикам создавать более поддерживаемый и расширяемый код. Здесь объясняется каждый принцип и показывается, как его можно применить в React-приложениях.

Если вы хотите улучшить свои навыки разработки в React, эта статья точно стоит вашего внимания:

https://medium.com/dailyjs/applying-solid-principles-in-react-14905d9c5377

@tproger_web #react #solid


Original post link: t.me/tproger_web/4473
Forwarded and filtered by @smartfeed_bot

​​😎Деструктуризация в React. Очевидно, но важно

В этой статье вы узнаете о проблемах, которые могут возникнуть при использовании деструктуризации в React, особенно при добавлении значений по умолчанию для объектов или массивов в аргументах компонентов.

Читать...


Original post link: t.me/frontendnoteschannel/3450
Forwarded and filtered by @smartfeed_bot