​​👤Как я отрендерил миллион строк в 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

Генераторы

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

В целом использовать их в разработке необязательно, полезно лишь знать, как они работают, потому что они активно используются в async/await и могут пригодиться для отладки кода.


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

Фрилансер и заказчик. Взаимодействие

Каждый, кто имеет дело с IT в той или иной форме, так или иначе сталкивался/слышал о том, что существует такое явление, как фриланс. Как может показаться на первый взгляд, фриланс несет в себе одни плюсы. Ни тебе работника в офисе, для которого надо организовать рабочее место, ни проблем с оформлением его по ТК и последующим увольнением (если нанимать на четко заданный объем работ). Так же стоимость фрилансера, как правило, оказывается от 2 до 20 раз меньше, чем у фирмы, предлагающей те же самые услуги.

Тем не менее, существует огромное количество негативного опыта работы с фрилансом. О его причинах и возможных способах устранения — в статье.

👉 @seniorFront


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

​Годных codepen-проектов вам в ленту: Just Ice — анимированная сцена с объемным кубиком льда

Проект реализован с помощью CSS и JavaScript: https://codepen.io/atzedent/pen/eYKPGQr

@tproger_web #codepen


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

​​🥶Создание библиотек и публикация в npm

В этой статье разберём процесс создания библиотек и их публикации в системе управления пакетами npm.

Читать...


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

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

Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Веб-страница: 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