👩‍💻 10 полезных методик во фронтенд-разработке React

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

Читать...


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

Stacked Cards with Autoplay

В JS создана функция перелистывания карточек, которая запускается по заданному интервалу.

👉 @seniorFront


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

👩‍💻 Массив++

Учитывая массив целых чисел любой длины, верните массив, в котором единица добавлена к значению, представленному массивом.

Массив не может быть пустым. Допускаются только неотрицательные однозначные целые числа. Возвращайте null для недопустимых входных данны

Пример кода:

upArray([2,3,9]) => [2,4,0]
upArray([4,3,2,5]) => [4,3,2,6]
upArray([1,-9]) => null

Решить задачу ⬅️

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

function upArray(arr) {
if (arr.length === 0 || arr.some(num => num < 0 || num > 9)) {
return null;
}

for (let i = arr.length - 1; i >= 0; i--) {
if (arr[i] < 9) {
arr[i]++;
return arr;
}
arr[i] = 0;
}

arr.unshift(1);
return arr;
}

// Примеры использования функции
console.log(upArray([2, 3, 9])); // => [2, 4, 0]
console.log(upArray([4, 3, 2, 5])); // => [4, 3, 2, 6]
console.log(upArray([1, -9])); // => null


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

👩‍💻 Очистка операторов импорта TypeScript с помощью псевдонимов путей

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

Читать...


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

​​​Скрытые функции Google Chrome для разработчика

Chrome Dev Tools — один из самых популярных инструментов среди веб-разработчиков. Однако в неём есть некоторые полезные функции, о которых большинство разработчиков не знает. 

В этой статье вы сможете узнать о пяти основных функциях Chrome DevTools, которые могут вам пригодиться:

https://webformyself.com/skrytye-funkcii-google-chrome-dlya-razrabotchika/

#devtools #инструменты


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

🖥 Вам нужен сайт? — Мы найдем исполнителя!

➖ Сайт под ключ;
➖ Верстка;
➖ Дизайн;
➖ Лендинг;
➖ Интернет магазины.

Мы найдем разработчика под любую задачу. Достаточно указать пожелания по сайту в свободной форме, нажав на кнопку ниже. ⬇️


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

👩‍💻 Интеграция Rust в Next.js: практическое руководство для разработчика

Как добавить Rust в свой инструментарий и проекты? Рассмотрим различные варианты развертывания кода Rust на Vercel с написанием конечных точек API, общие закономерности разработки API, проблемы применения Rust в продакшене. Весь код и примеры ― в шаблоне.

Читать...


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

​​В VSCode нашли расширения с вирусами и миллионами установок

Эксперты из Израиля обнаружили вредоносные расширения для Visual Studio Code (VSCode), установленные миллионами пользователей. Они позволяют злоумышленникам красть учетные данные, информацию о системе и устанавливать удаленные оболочки на компьютеры жертв.

В ходе анализа исследователи обнаружили следующие проблемы:
— Было выявлено 1283 расширения с известным вредоносным кодом, установленных 229 млн раз.
— 8161 расширение общается с жестко закодированными IP-адресами.
— 1452 расширения запускают неизвестные исполняемые файлы.
— 2304 расширения используют GitHub-репозитории неоригинальных издателей, что указывает на их подделку​.

Подробнее: https://tproger.ru/news/v-vscode-nawli-raswireniya-s-virusami-i-millionami-ustanovok

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


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

❓ Зачем нужен CORS: просто о сложном

CORS  —  чрезвычайно полезный инструмент в мире, где орудуют киберпреступники и запускаются некорректно настроенные веб-серверы. Поэтому стоит выяснить, что такое CORS и как он может уберечь вас от межсайтовых подделок запросов.

Читать...


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

🐙 JS2Flowchart – библиотека для визуализации JavaScript-кода. Она генерирует блок-схемы, позволяет настроить стиль и показать код на разных уровнях абстракции.

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


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

#вопросы_с_собеседований
Какие бывают человеческие ошибки в javascript?

В javascript есть два типа ошибок.
Syntax error. Это ошибки или опечатки в коде, из-за которых программа вообще не выполняется или останавливается на полпути. Обычно появляются сообщения об этих ошибках.

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


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

Лайфхак для IT-шников в 2024

Разберись в алгоритмах. Компании уровня BigTech вязнут в большом количестве данных. Поэтому тот, кто сможет подобрать эффективное решение для задачи и оптимизировать рабочие процессы, поможет генерировать им больше прибыли.

На бесплатном обучении от FAANG School ты прокачаешь алгоритмы с разработчиком с 7-летним опытом, который решил 500+ задач на LeetCode. Узнаешь:

– Как использовать разные структуры данных
при решении задач
– Какие 20% усилий дают 80% результата
при подготовке к алгоритмам
– Prefix Sum и Sliding Window. 2 подхода, которые закрывают задачи на 200к$ во время собесов в Google
– Как научиться решать алгоритмы без матана

Простые и доступные объяснения, полезные квизы и опросы, а также много задач для практики.

Переходи и жми на кнопку «Принять участие», если хочешь увеличить шансы устроиться в Яндекс, Amazon, Google и другие.


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

Cityscape

При нажатии на части сцены задаются различные CSS-классы, которые запускают анимации и трансформации.

https://codepen.io/jackiezen/pen/bvqqOo


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

🖥 HaHo Mobile UI Kit – дизайн-система для мобильных приложений, которая включает самые разные элементы интерфейса: формы, календари, инфографику, галереи, чаты и тд.

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


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

🗓 JavaScript и HTML: делаем простой календарь за 5 минут

Существует много способов использования JS для вебмастера. Одним из таких примеров может быть виджет календаря для веб-страницы. В этом материале мы создадим такой виджет с помощью HTML, CSS и JavaScript.

Читать...


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

Прототипы и наследование в JavaScript

В этой статье мы изучим всё, что касается прототипов в JavaScript. Разберём, зачем они нужны, что такое наследование и цепочка прототипов, как работает this внутри методов, рассмотрим пример расширения классов и многое другое.

https://itchief.ru/javascript/prototypes


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

👩‍💻 5 крутых функций JavaScript, о которых не знает большинство разработчиков

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

Читать...


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

👩‍💻 Set в JavaScript: теперь с новыми суперспособностями

Узнайте о грядущих обновлениях Set в JavaScript, включая новые методы union, intersection, difference и другие. Подробный обзор и примеры использования.

Читать...


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

🖥 Самые интересные публикации за последние дни:

• На чем разработать свой стартап или с чего начать хакатон в 2024?

• Освоение программирования за 2 года с нуля или как я пытался автоматизировать реальное производство

• FastStream — новый убийца Celery?

• Как работать с объектным хранилищем на Python

• Мощь AST в действии, или как переписать код 10 летней давности на ES6-модули и ничего не сломать


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

​Что такое ARIA-атрибуты?

ARIA-атрибуты — это группа дополнительных атрибутов из спецификации WAI-ARIA, которая состоит из свойств и состояний.
Состояния (states) описывают состояния элементов и отвечают на вопрос «В каком состоянии сейчас элемент?».
Свойства (properties) нужны для раскрытия дополнительных функций элементов. Отвечают на вопрос «Что ещё делает этот элемент?».

ARIA-атрибуты поддерживают роли и помогают браузерам и Accessibility API правильно обрабатывать элементы для вспомогательных технологий. Сами по себе, без CSS и JavaScript, они не изменяют внешний вид и функциональность элементов.

Общий синтаксис ARIA-атрибутов — aria-атрибут="значение".
Для примера сообщим скринридеру с помощью ARIA-атрибута, что у поля есть инструкция к нему.
<label for="psw">Пароль</label>
<input
type="password"
name="password"
id="psw"
aria-describedby="hint"
>
<span id="hint">Пароль должен содержать не меньше 20 знаков</span>

aria-describedby связывает с помощью одинакового ID два элемента — поле и подсказку из тега <span>. Скринридер озвучит текст подсказки после подписи и основной информации о поле.

👉 @seniorFront

​Генератор градиентного фона

Хотите создавать действительно крутой градиент, а не полоски из 2-3 цветов? Тогда присмотритесь к Mesher — инструменту, который позволяет создавать очень сложные комбинации цветов, смешивая их так, как нужно именно вам.

Убедитесь сами:

https://csshero.org/mesher/

#инструменты #фронтенд


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