👩💻 Set в JavaScript: теперь с новыми суперспособностями
Узнайте о грядущих обновлениях Set в JavaScript, включая новые методы union, intersection, difference и другие. Подробный обзор и примеры использования.
Читать...
Original post link: t.me/frontendnoteschannel/3688
Forwarded and filtered by @smartfeed_bot
Узнайте о грядущих обновлениях Set в JavaScript, включая новые методы union, intersection, difference и другие. Подробный обзор и примеры использования.
Читать...
Original post link: t.me/frontendnoteschannel/3688
Forwarded and filtered by @smartfeed_bot
Библиотека программиста
🛠️ Set в JavaScript: теперь с новыми суперспособностями
Узнайте о грядущих обновлениях Set в JavaScript, включая новые методы union, intersection, difference и другие. Подробный обзор и примеры использования.
🖥 Самые интересные публикации за последние дни:
• На чем разработать свой стартап или с чего начать хакатон в 2024?
• Освоение программирования за 2 года с нуля или как я пытался автоматизировать реальное производство
• FastStream — новый убийца Celery?
• Как работать с объектным хранилищем на Python
• Мощь AST в действии, или как переписать код 10 летней давности на ES6-модули и ничего не сломать
Original post link: t.me/frontendnoteschannel/3689
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
Хабр
На чем разработать свой стартап или с чего начать хакатон в 2024? (часть 1)
typical startup thinking about technology Давайте попробуем собрать свой идеальный boilerplate для full-stack разработки. В статье мы будем постепенно собирать шаблон для быстрого запуска стартапов....
Forwarded from Senior Frontend - javascript, html, css
Что такое ARIA-атрибуты?
ARIA-атрибуты — это группа дополнительных атрибутов из спецификации WAI-ARIA, которая состоит из свойств и состояний.
Состояния (states) описывают состояния элементов и отвечают на вопрос «В каком состоянии сейчас элемент?».
Свойства (properties) нужны для раскрытия дополнительных функций элементов. Отвечают на вопрос «Что ещё делает этот элемент?».
ARIA-атрибуты поддерживают роли и помогают браузерам и Accessibility API правильно обрабатывать элементы для вспомогательных технологий. Сами по себе, без CSS и JavaScript, они не изменяют внешний вид и функциональность элементов.
Общий синтаксис ARIA-атрибутов — aria-атрибут="значение".
Для примера сообщим скринридеру с помощью ARIA-атрибута, что у поля есть инструкция к нему.
👉 @seniorFront
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
Хотите создавать действительно крутой градиент, а не полоски из 2-3 цветов? Тогда присмотритесь к Mesher — инструменту, который позволяет создавать очень сложные комбинации цветов, смешивая их так, как нужно именно вам.
Убедитесь сами:
https://csshero.org/mesher/
#инструменты #фронтенд
Original post link: t.me/tproger_web/4649
Forwarded and filtered by @smartfeed_bot
Как ошибка ChatGPT стоила нам $10 000
В этой статье рассказывается про то, как код, написанный при помощи ChatGPT привёл к багу, который не могли исправить неделю
👉 @seniorFront
Original post link: t.me/seniorFront/4219
Forwarded and filtered by @smartfeed_bot
В этой статье рассказывается про то, как код, написанный при помощи ChatGPT привёл к багу, который не могли исправить неделю
Произошло следующее: в рамках миграции бэкенда мы переносили модели баз данных с Prisma/Typescript на Python/SQLAlchemy. Это был очень монотонный процесс. Мы обнаружили, что ChatGPT превосходно справляется с этой трансляцией, поэтому использовали его на протяжении почти всей миграции. Мы копипастили генерируемый им код, видели, что всё работает хорошо, пробовали в продакшене, видели, что он тоже работает, а затем продолжали процесс.
👉 @seniorFront
Original post link: t.me/seniorFront/4219
Forwarded and filtered by @smartfeed_bot
JavaScript localStorage: что такое и как использовать?
LocalStorage в JavaScript позволяет хранить пары ключ/значение в браузере. Но в отличие от обычных переменных, всё, что мы запишем в localStorage, останется там после перезагрузки страницы и закрытия браузера.
В статье рассказали, как работает и как использовать localStorage в JS: https://tproger.ru/articles/javascript-localstorage-polnoe-rukovodstvo/
#js
Original post link: t.me/tproger_web/4652
Forwarded and filtered by @smartfeed_bot
LocalStorage в JavaScript позволяет хранить пары ключ/значение в браузере. Но в отличие от обычных переменных, всё, что мы запишем в localStorage, останется там после перезагрузки страницы и закрытия браузера.
В статье рассказали, как работает и как использовать localStorage в JS: https://tproger.ru/articles/javascript-localstorage-polnoe-rukovodstvo/
#js
Original post link: t.me/tproger_web/4652
Forwarded and filtered by @smartfeed_bot
Regex Previewer: работа регулярки в соседней вкладке VSCode
Расширение позволяет валидировать регулярное выражение на ваших примерах в параллельных вкладках IDE.
Расширение на Visual Studio Marketplace
#инструменты
Original post link: t.me/tproger_web/4654
Forwarded and filtered by @smartfeed_bot
Расширение позволяет валидировать регулярное выражение на ваших примерах в параллельных вкладках IDE.
Расширение на Visual Studio Marketplace
#инструменты
Original post link: t.me/tproger_web/4654
Forwarded and filtered by @smartfeed_bot
Что нового в React 19?
Видеообзор, в котором можно узнать все о новых интересных функциях, которые появятся в React 19, включая готовые способы обработки действий, оптимистичные обновления, статусы форм, новый API use() и многое другое: https://youtu.be/81uAxzeyL2I
#react
Original post link: t.me/tproger_web/4655
Forwarded and filtered by @smartfeed_bot
Видеообзор, в котором можно узнать все о новых интересных функциях, которые появятся в React 19, включая готовые способы обработки действий, оптимистичные обновления, статусы форм, новый API use() и многое другое: https://youtu.be/81uAxzeyL2I
#react
Original post link: t.me/tproger_web/4655
Forwarded and filtered by @smartfeed_bot
🖥 Самые интересные публикации за последние дни:
• Вам не нужен Lodash. Хватит! Пожалуйста
• Квест на Node.js — борьба с утечкой памяти. От диагностики до решения
• Организация структуры папок и файлов в React/Next по MVC-архитектуре
• Кофе по SSH, сайты в zip-архивах. Чистый HTML лучше всего
• Магия CSS на практике: советы по вёрстке от гика
Original post link: t.me/frontendnoteschannel/3701
Forwarded and filtered by @smartfeed_bot
• Вам не нужен Lodash. Хватит! Пожалуйста
• Квест на Node.js — борьба с утечкой памяти. От диагностики до решения
• Организация структуры папок и файлов в React/Next по MVC-архитектуре
• Кофе по SSH, сайты в zip-архивах. Чистый HTML лучше всего
• Магия CSS на практике: советы по вёрстке от гика
Original post link: t.me/frontendnoteschannel/3701
Forwarded and filtered by @smartfeed_bot
Хабр
Вам не нужен Lodash. Хватит! Пожалуйста
Всем привет. Сегодня я вернулся с отпускной поездки, проснулся, сделал себе кофеек, заказал завтрак, и решил глянуть наконец-то вышедший State Of JS 2023. Читаю, открываю секцию библиотек - и первое,...
👩💻 21 лайфхак для новичков в JavaScript
В JavaScript есть эксклюзивные практики, которые используют профессионалы и о которых даже не подозревают новички. Ознакомьтесь с некоторыми из них, чтобы усовершенствовать свои навыки в написании кода и преуспеть в динамичном мире JavaScript-разработки.
Читать...
Original post link: t.me/frontendnoteschannel/3704
Forwarded and filtered by @smartfeed_bot
В JavaScript есть эксклюзивные практики, которые используют профессионалы и о которых даже не подозревают новички. Ознакомьтесь с некоторыми из них, чтобы усовершенствовать свои навыки в написании кода и преуспеть в динамичном мире JavaScript-разработки.
Читать...
Original post link: t.me/frontendnoteschannel/3704
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
21 лайфхак для новичков в JavaScript
В JavaScript есть эксклюзивные практики, которые используют профессионалы и о которых даже не подозревают новички. Ознакомьтесь с некоторыми из них, чтобы усовершенствовать свои навыки в написании кода и преуспеть в динамичном мире JavaScript-разработки.
Web API, которые функционально приближают веб-приложения к нативным
Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.
В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/
#javascript #api #react
Original post link: t.me/tproger_web/4661
Forwarded and filtered by @smartfeed_bot
Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.
В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/
#javascript #api #react
Original post link: t.me/tproger_web/4661
Forwarded and filtered by @smartfeed_bot
🖥 Dynamic 3D Business Icons Set – набор из 44 объемных иконок на тему бизнеса. У иконок красивые пастельные цвета, напоминающие конфеты.
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1838
Forwarded and filtered by @smartfeed_bot
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1838
Forwarded and filtered by @smartfeed_bot
🖥 Самые интересные публикации за последние дни:
• Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях
• Загружаем товары из магазина Ozon в Google-таблицу
• Многопоточность JavaScript с SharedArrayBuffer и Atomics: основы
• Загрузка es-модулей в браузерные приложения
• Tramvai — фреймворк для создания веб-приложений
Original post link: t.me/frontendnoteschannel/3711
Forwarded and filtered by @smartfeed_bot
• Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях
• Загружаем товары из магазина Ozon в Google-таблицу
• Многопоточность JavaScript с SharedArrayBuffer и Atomics: основы
• Загрузка es-модулей в браузерные приложения
• Tramvai — фреймворк для создания веб-приложений
Original post link: t.me/frontendnoteschannel/3711
Forwarded and filtered by @smartfeed_bot
Хабр
Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях
Я работаю в Ramblr, это ИИ-стартап, где мы строим на React сложные приложения для аннотирования видео. Недавно мне попалась сложная утечка памяти, которая возникает при одновременном использовании...
Forwarded from Веб-страница
Новый китайский владелец популярного проекта Polyfill JS внедрил вредоносное ПО более чем на 100 тысяч сайтов
Polyfill.js - популярная библиотека с открытым исходным кодом для поддержки старых браузеров. Более 100 тыс. сайтов встраивают ее через домен cdn.polyfill.io.
В феврале этого года китайская компания Funnull купила домен и аккаунт на Github. С тех пор этот домен был замечен в внедрении вредоносного ПО на мобильные устройства через вебсайты, использующие cdn.polyfill.io. Любые жалобы быстро удалялись из репозитория Github.
Самое интересное, что код имеет защиту от реверс-инжиниринга и активируется только на определенных мобильных устройствах в определенные часы, не активируется при обнаружении пользователя-администратора, а также приостанавливает выполнение при обнаружении службы веб-аналитики, предположительно, чтобы не попасть в отчёты.
Автор оригинального проекта рекомендует не использовать Polyfill, так как он больше не нужен современным браузерам. Тем временем, Fastly и Cloudflare предложили собственные альтернативы пользователям.
Google начал блокировать рекламу для сайтов eCommerce, использующих polyfill.io. Cloudflare реализовала перенаправление в реальном времени с cdn.polyfill.io на свою версию. Позже регистратор Namecheap приостановил действие домена, устранив риск на данный момент.
Этот инцидент является типичным примером атаки на цепочку поставок. Рекомендуется удалить все ссылки на polyfill.io в вашем коде.
Подробнее: https://sansec.io/research/polyfill-supply-chain-attack
#безопасность
Polyfill.js - популярная библиотека с открытым исходным кодом для поддержки старых браузеров. Более 100 тыс. сайтов встраивают ее через домен cdn.polyfill.io.
В феврале этого года китайская компания Funnull купила домен и аккаунт на Github. С тех пор этот домен был замечен в внедрении вредоносного ПО на мобильные устройства через вебсайты, использующие cdn.polyfill.io. Любые жалобы быстро удалялись из репозитория Github.
Самое интересное, что код имеет защиту от реверс-инжиниринга и активируется только на определенных мобильных устройствах в определенные часы, не активируется при обнаружении пользователя-администратора, а также приостанавливает выполнение при обнаружении службы веб-аналитики, предположительно, чтобы не попасть в отчёты.
Автор оригинального проекта рекомендует не использовать Polyfill, так как он больше не нужен современным браузерам. Тем временем, Fastly и Cloudflare предложили собственные альтернативы пользователям.
Google начал блокировать рекламу для сайтов eCommerce, использующих polyfill.io. Cloudflare реализовала перенаправление в реальном времени с cdn.polyfill.io на свою версию. Позже регистратор Namecheap приостановил действие домена, устранив риск на данный момент.
Этот инцидент является типичным примером атаки на цепочку поставок. Рекомендуется удалить все ссылки на polyfill.io в вашем коде.
Подробнее: https://sansec.io/research/polyfill-supply-chain-attack
#безопасность
Прокачай скиллы, чтобы получить заветный оффер
Ребята из команды FAANG School собрали в одном месте гайды, шпаргалки, мануалы и чек-листы, в общем всё, что поможет стать сильными профессионалами.
Основные концепции Docker, наборы команд в JetBrains, пошаговая RoadMap по Java и множество других полезных материалов будут всегда под рукой, помогут быстро справиться со сложными вопросами и тем самым приблизят вас к высокой зп.
Библиотечный каталог постоянно пополняется, а значит, будет еще больше ценного контента. Бесплатно и навсегда!
Переходи, заглядывай в библиотеку и сохраняй полезности, если хочешь увеличить шансы устроиться в Яндекс, Amazon, Google и другие.
Попасть в библиотеку JAVA JUNIOR
Original post link: t.me/seniorFront/4235
Forwarded and filtered by @smartfeed_bot
Ребята из команды FAANG School собрали в одном месте гайды, шпаргалки, мануалы и чек-листы, в общем всё, что поможет стать сильными профессионалами.
Основные концепции Docker, наборы команд в JetBrains, пошаговая RoadMap по Java и множество других полезных материалов будут всегда под рукой, помогут быстро справиться со сложными вопросами и тем самым приблизят вас к высокой зп.
Библиотечный каталог постоянно пополняется, а значит, будет еще больше ценного контента. Бесплатно и навсегда!
Переходи, заглядывай в библиотеку и сохраняй полезности, если хочешь увеличить шансы устроиться в Яндекс, Amazon, Google и другие.
Попасть в библиотеку JAVA JUNIOR
Original post link: t.me/seniorFront/4235
Forwarded and filtered by @smartfeed_bot
Forwarded from Frontender's notes [ru]
В России появилась среда разработки – встречайте GIGA IDE
На главной технологической конференции лета GigaConf 2024 СберТех представил российскую среду разработки GIGA IDE со встроенным AI-ассистентом*.
Среда позволяет вести разработку на популярных языках программирования, обеспечивает совместимость с востребованными плагинами, а также привычный пользовательский опыт. Встроенный в среду AI-ассистент GIGA CODE анализирует контекст, предлагает полные конструкции функций и других элементов, что позволяет писать код до 25% быстрее.
• GIGA IDE Desktop – это интегрированная среда разработки, которая включает 70 инструментов для облегчения задач разработки, автоматизации тестирования и администрирования приложений. Разработчики уже могут скачать GIGA IDE Desktop на платформе GitVerse.
• GIGA IDE Cloud позволит вести разработку в облаке, расширив возможности устройства дополнительными облачными ресурсами. Публичный релиз среды запланирован на осень 2024 года. Чтобы первыми получить доступ к GIGA IDE Cloud – регистрируйтесь на платформе GitVerse на раннее тестирование.
*AI (Artificial Intelligence) - «искусственный интеллект»
На главной технологической конференции лета GigaConf 2024 СберТех представил российскую среду разработки GIGA IDE со встроенным AI-ассистентом*.
Среда позволяет вести разработку на популярных языках программирования, обеспечивает совместимость с востребованными плагинами, а также привычный пользовательский опыт. Встроенный в среду AI-ассистент GIGA CODE анализирует контекст, предлагает полные конструкции функций и других элементов, что позволяет писать код до 25% быстрее.
• GIGA IDE Desktop – это интегрированная среда разработки, которая включает 70 инструментов для облегчения задач разработки, автоматизации тестирования и администрирования приложений. Разработчики уже могут скачать GIGA IDE Desktop на платформе GitVerse.
• GIGA IDE Cloud позволит вести разработку в облаке, расширив возможности устройства дополнительными облачными ресурсами. Публичный релиз среды запланирован на осень 2024 года. Чтобы первыми получить доступ к GIGA IDE Cloud – регистрируйтесь на платформе GitVerse на раннее тестирование.
*AI (Artificial Intelligence) - «искусственный интеллект»
Метрики, которые действительно имеют значение
Способность определить, что работает, а что нет, имеет решающее значение для определения успеха продукта. Кроме того, это позволяет руководителям продуктов правильно приоритезировать планы и инициативы. Принять решение о том, какими будут показатели успешности — важно, поскольку есть множество метрик, которые необходимо отслеживать, и отсутствие чёткого определения показателей успешности может дезинформировать.
В этой статье рассматриваются виды метрик и рассказывается о том, как их выбрать.
👉 @seniorFront
Original post link: t.me/seniorFront/4239
Forwarded and filtered by @smartfeed_bot
Способность определить, что работает, а что нет, имеет решающее значение для определения успеха продукта. Кроме того, это позволяет руководителям продуктов правильно приоритезировать планы и инициативы. Принять решение о том, какими будут показатели успешности — важно, поскольку есть множество метрик, которые необходимо отслеживать, и отсутствие чёткого определения показателей успешности может дезинформировать.
В этой статье рассматриваются виды метрик и рассказывается о том, как их выбрать.
👉 @seniorFront
Original post link: t.me/seniorFront/4239
Forwarded and filtered by @smartfeed_bot
Old but gold: Самый безопасный способ скрыть ключи API при использовании React
Хотите убедиться, что ваши ключи API в целости и сохранности при работе с React? В этой статье вы увидите лучшие способы скрыть ключи API, от использования переменных среды до создания собственного внутреннего прокси-сервера.
Подробнее: https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/
#фронтенд #react
Original post link: t.me/tproger_web/4673
Forwarded and filtered by @smartfeed_bot
Хотите убедиться, что ваши ключи API в целости и сохранности при работе с React? В этой статье вы увидите лучшие способы скрыть ключи API, от использования переменных среды до создания собственного внутреннего прокси-сервера.
Подробнее: https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/
#фронтенд #react
Original post link: t.me/tproger_web/4673
Forwarded and filtered by @smartfeed_bot
Forwarded from Frontender's notes [ru]
В этой задаче необходимо реализовать генератор хештэгов.
Условия:
— Выходная строка должна начинаться с хештега ( # )
— Во всех словах первая буква должна быть заглавной
— Если окончательный результат длиннее 140 символов, функция вернёт false
— Если ввод или результат представляет собой пустую строку, то функция должна вернуть false
Пример кода:
generateHashtag(" Hello there thanks for trying my Kata") => "#HelloThereThanksForTryingMyKata"
generateHashtag(" Hello World ") => "#HelloWorld"
generateHashtag("") => falseРешить задачу
Решение задачи🔽
function generateHashtag(str) {
if (str.trim() === "") {
return false;
}
const words = str.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1));
const hashtag = "#" + words.join("");
return hashtag.length <= 140 ? hashtag : false;
}
console.log(generateHashtag(" Hello there thanks for trying my Kata")); // "
console.log(generateHashtag(" Hello World ")); // "
console.log(generateHashtag("")); // false
Please open Telegram to view this post
VIEW IN TELEGRAM