​Глубокое клонирование в JavaScript с использованием structuredClone

Новый метод для настоящего глубокого клонирования без хаков с сериализацией. Еще не полностью доступен и имеет ряд ограничений, но это все равно хорошая новость: https://proglib.io/w/7a16c22d

#javascript

Утечки памяти в приложениях

Искать утечки памяти в веб-приложениях очень непросто, поэтому почти никто это и не делает.

👉 fuite - это CLI-утилита, которая поможет найти утечки памяти на вашем сайте: https://proglib.io/w/a9767bdd

👉 Detached Elements - новый инструмент в Microsoft Edge DevTools, который тоже умеет обнаруживать утечки, связанные с DOM-элементами вне основного дерева документа: https://proglib.io/w/525096f4

Много утечек нашли? 😏

#performance

Архитектурные паттерны React для ваших проектов

Статья, посвященная организации файловой структуры (и не только) проекта: https://blog.openreplay.com/react-architecture-patterns-for-your-projects

Рекомендации:

👉 директория с исходниками называется src
👉 названия папок должны быть понятны всем членам команды, нет жестких правил, можно использовать слова-синонимы, если так проще
👉 для компонентов следует выделять отдельные папки внутри директории components
👉 кроме того, есть общий index.js файл в components, который импортирует все компоненты сразу
👉 для каждого компонента создаем отдельные файлы: для собственно кода, для стилей, для тестов и для Storybook
👉 для наименования файлов и папок хуков используйте префикс use
👉 размещайте каждый хук в отдельной папке в директории hooks вместе с файлом для тестирования
👉 по аналогии с компонентами стоит создать отдельный файл hooks/index.js, который будет импортировать все хуки проекта сразу
👉 следует использовать абсолютные импорты, для этого нужно правильно настроить сборку, указав алиас или корневую директорию
👉 отделяйте логику приложения от отображения, выносите ее в хуки по возможности
👉 константы и утилитарные методы стоит вынести в отдельную директорию utils
👉 не создавайте единый Контекст для всего, лучше создать несколько независимых контекстов с разными данными

#ссылки #паттерны #проект

​Svelte-компоненты в React-стиле

Разбираемся в Svelte, сравнивая его с React: https://proglib.io/w/633f563f

#frameworks #svelte #react

Браузерное расширение своими руками

Создаем собственное расширение для браузера с нуля: https://proglib.io/w/babb7e68

#browser

YaTalks 2021: доклады про фронтенд

8 больших докладов по фронту с конференции YaTalks 2021: https://proglib.io/w/5dda2653

👉 Создание универсальной UI-библиотеки
👉 Научите меня писать интерфейсы для космолётов!
👉 Спецвыпуск «Веб-стандартов»
👉 Аутентификация в вебе. История развития
👉 Когда документация — просто космос
👉 30 лет — полёт нормальный!
👉 Как и зачем проводить тесты с незрячими людьми?
👉 Существующие инструменты не работают в невесомости? Напиши свои!

#video #frontend

​2021 JavaScript Rising Stars

6-й ежегодный обзор самых трендовых проектов: https://proglib.io/w/4342c03b

💸 Стоит ли разрабатывать коммерческие сайты на WordPress в 2022 году?

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

https://proglib.io/w/1eecce7a

#cms

📊 Создавайте диаграммы на React с помощью библиотеки chart.js

https://proglib.io/w/8b33f34e

#interface #library

Если вдруг кто-то из наших подписчиков-новичков пропустил такой полезный материал, у freeCodeCamp есть двухчасовой видеокурс по фундаментальным основам программирования и информатики, с которого стоит начать перед тем как писать код.

https://proglib.io/w/9392d746

Не лайтхаусом единым: как проверить свой сайт со всех сторон

Скорость загрузки — лишь один из множества параметров, которые стоит проверять на своём сайте, и для большинства других есть свои валидаторы и скоринговые алгоритмы: https://proglib.io/w/d302ad1b

#accessibility #testing

Математика верстальщику не нужна 2

Матрицы, базовые трансформации, построение 3D и фильтры для картинок: https://proglib.io/w/2fb3abb3

#math

Методы обхода защиты приложений VueJS

Популярный фреймворк JavaScript VueJS предлагает функции, имеющие серьезные последствия для безопасности веб-сайтов. Если вы столкнетесь с веб-приложением, использующим Vue, этот пост поможет вам определить специфичные для Vue векторы XSS атак.

https://proglib.io/w/3008a222

#vue #security

Tailwind CSS — резюме после двух с половиной проектов

Бэкендер рассказывает, что он думает о Tailwind: https://proglib.io/w/4868b61a

#css #frameworks

Доклад: Пакетные менеджеры: есть ли жизнь за пределами npm?

Валентин Семирульник из Авиасейлс сравнивает пакетные менеджеры и рассказывает, как перейти с npm на что-то более интересное.

https://proglib.io/w/925f2d83

#video #tools

Senior React Native developer to Rain https://rain.us/

Company field: Fintech.
In Rain we are trying to give financial freedom to workers by modernizing the existing payroll systems to better serve the employee. As an ambitious first target, Rain set out to kill predatory financial products like payday loans and high overdraft fees by providing instant on-demand pay (a.k.a earned-wage access) to employees through an app. Through Rain, employees are able to withdraw a portion of their earned wages instantly, so that they can pay their bills on time. https://rain.us/

We are looking for a senior mobile engineer with experience in react native, do provide such roles? Time zone within EU preferably, otherwise up to the timezone difference of Urmat.
Full job description below:

As a mobile engineer you will be responsible for: developing, testing and deploying the Rain app in multiple countries.
Skills
• Solid technical aptitude to grasp the technical nature of Rain products and the environments in which they operate
• Excellent software design, problem-solving and debugging skills
• Ability to Implement pixel perfect UI's that match designs
• Able to work effectively across functional groups & with minimal supervision
• Flexible and able to adapt quickly to new situations
• Ability to work as part of a team

Must-haves
• 3-4+ years developing React Native apps
• Proven experience deploying apps to production
• Experience implementing native modules and native views
• Meaningful experience delivering high performant React Native apps
• Deep understanding of versioning control tools like Git

Nice-to-haves
• Experience with CI/CD
• Experience with Android native development
• Experience with iOS native development
• Experience with Redux
• Experience with testing tools

What we offer:

• Work on an interesting IT project
• A friendly team of like-minded people
• Competitive compensation depending on experience and skills
• Compensation for sick leaves
• Paid vacation + all national holidays (30 paid leave days)
• Flexible working hours (UK time GMT)
• Corporate events and activities
• Opportunity for professional growth and career development
Kindly visit company website in LinkedIn: https://lnkd.in/e_zejzXH
For more information, please, feel free to drop a message and discuss this opportunity with me or send your CV to:

Email [email protected] Telegram @darya_sakhno Skype dasha_057

Advanced hiring: попадите в команду Luxoft за несколько дней

У Luxoft крутые новости − попасть в команду теперь можно гораздо быстрее. В компании хорошо понимают, что время – это важный ресурс, поэтому упростили процесс найма. Уже сейчас вы можете получить job offer всего за несколько дней после успешного прохождения технического интервью.

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

Узнать об открытых вакансиях можно по ссылке.

Еще больше новостей в телеграм-канале Luxoft.

​Разбираемся в сортах реактивности

Хороший лонгрид с детальным разбором разных подходов к обеспечению реактивности: https://proglib.io/w/790bb1bf

JavaScript Паттерны. Полный курс

22 паттерна в 1 видео: https://proglib.io/w/22571aca

#video #patterns #bestpractices

Карточки с параллакс-эффектом

Очень красивый эффект при наведении: https://proglib.io/w/a61647c9

#interface #animation #snippets