Как стать автором
Обновить
184.35

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

className убивает ваш UI kit

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 2.7K

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

Гибкое API у UI kit компонентов является преимуществом. Однако возможность повлиять на стили ваших компонентов в конкретном месте является большим искушением. Разработчику выгодно внести изменение здесь и сейчас, а не думать на перспективу. Такое поведение постепенно разрушает вашу систему переиспользования.

Читать далее 🔥
Всего голосов 6: ↑6 и ↓0 +6
Комментарии 30

Новости

JS. Валидация данных. Пишем свой YUP

Уровень сложности Средний
Время на прочтение 7 мин
Количество просмотров 2.9K

Создаем TypeScript библиотеку для валидации данных. Поэтапно добавляем основной функционал и типизацию. Делаем основую упор на простоту кода и проиводительность. Как протитип используем yup и zod.

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Комментарии 19

Мемоизация в React: я почитал документацию вместо вас

Уровень сложности Простой
Время на прочтение 18 мин
Количество просмотров 8.1K

В статье рассмотрены три инструмента мемоизации в React: useMemo, useCallback, memo. Главный источник информации: документация React. Не всем комфортно работать напрямую с документацией, так что если вы постоянно откладываете погружение в документацию React - я сделал это за вас, постарался выделить самое важное, и дать ссылки для углубленного погружения.  

Так как мы будем рассматривать не самые базовые вещи, касающиеся React, то я не буду останавливаться на таких основах как хуки, состояние, свойства, чистые функции и чистые компоненты, ожидая, что вы ознакомитесь с ними за пределами статьи. А также все рассмотренное ниже относится в первую очередь к React 18. 

Читать далее
Всего голосов 16: ↑15 и ↓1 +14
Комментарии 2

Путь развития (Roadmap) Frontend разработчика

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 15K

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

Читать далее
Всего голосов 22: ↑19 и ↓3 +16
Комментарии 11

Истории

Как мы создаём редакторы документов. Ядро и его роль в кроссплатформенной разработке

Время на прочтение 10 мин
Количество просмотров 2K

В МойОфис мы создаем ПО для корпоративного пользования, и одни из ключевых продуктов нашей линейки — редакторы документов «МойОфис Текст» и «МойОфис Таблица». Эти приложения представлены на всех популярных платформах, включая мобильные устройства. Они позволяют создавать, изменять, просматривать текстовые и табличные документы различных форматов, а также совместно работать над ними в веб-версии редакторов.

Сегодня мы расскажем об общем технологическом устройстве редакторов МойОфис, с акцентом на их центральный элемент: ядро, написанное на C++. Именно ядро обеспечивает основную функциональность приложений и даёт нам возможность эффективно унифицировать её для разных платформ.

О том, что представляет собой ядро наших редакторов, принципах его работы, преимуществах и специфике, читайте под катом.

Читать далее
Всего голосов 35: ↑33 и ↓2 +31
Комментарии 9

Интерфейс под один палец. Концепция ONE TOUCH

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 4.6K

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

72120
Всего голосов 17: ↑17 и ↓0 +17
Комментарии 26

Безопасность веб-приложений: анализ методов защиты от атак на уровне Backend

Уровень сложности Средний
Время на прочтение 12 мин
Количество просмотров 2.8K

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

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

Целью данной работы является анализ и оценка методов защиты веб-приложений на уровне Backend от различных видов угроз и атак.

Читать далее
Всего голосов 5: ↑4 и ↓1 +3
Комментарии 2

WebRTC. Как установить p2p соединение между браузерами

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 3.3K

WebRTC позволяет браузерам обмениваться информацией напрямую без сервера. Можно передавать видео, звук и данные. Установить WebRTC соединение можно разными способами. В статье описано как WebRTC соединение устанавливается между пользователями редактора схем dgrm.net.

Читать далее
Всего голосов 9: ↑9 и ↓0 +9
Комментарии 5

Web3 приложение Twitter на React.js + Solidity | часть 2

Уровень сложности Простой
Время на прочтение 21 мин
Количество просмотров 1.6K

Hello, в первой части был подготовлен проект, подключены кошельки и написан backend на Solidity, значит пришло время писать frontend на React.

Проект далёк от продакшена и является простым примером для новичков, предназначенным для демонстрации взаимодействия с смарт‑контрактом через веб‑приложение.

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Комментарии 1

Выбор технологического стека для digital-продукта в 2024 году

Уровень сложности Средний
Время на прочтение 12 мин
Количество просмотров 2.3K

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

Однако если вы свободны от необходимости использования какого-либо наследия (набираете новую команду или ищете актуальные технологии для изучения), то эта статья поможет вам выбрать, что стоит использовать для запуска продукта или сервиса. 

Меня зовут Евгений Корнеев и я постараюсь дать разностороннюю оценку с точки зрения зрелости технологии, популярности, доступности специалистов и вакансий, а также того, для каких целей лучше применять конкретный стек.

Читать далее
Всего голосов 12: ↑8 и ↓4 +4
Комментарии 1

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

Уровень сложности Средний
Время на прочтение 10 мин
Количество просмотров 4.5K

Всем привет! Я Виктор Кугай, руководитель команды разработки спецпроектов в Тинькофф. Мы создаем геймификационные проекты, основанные на данных, чтобы познакомить пользователей с экосистемой компании и повысить узнаваемость бренда.

Расскажу, как с помощью Node.js Streams и механизма Back Pressure протокола TCP реализовать пакетную обработку сотен гигабайтов данных на машинах с жестким лимитом памяти.

Читать далее
Всего голосов 23: ↑23 и ↓0 +23
Комментарии 2

Web3 приложение Twitter на React.js + Solidity | часть 1

Уровень сложности Простой
Время на прочтение 8 мин
Количество просмотров 4K

Hello, в этой статье постараюсь подробно показать процесс создания dApp приложения на примере Twitter. Проект написан на ReactJS и Solidity. Контракт развернут в частной сети с помощью truffle и ganache.

В первой части мы подготовим проект, напишем смарт-контракт и развернем его в частной сети, а также подключим кошельки в MetaMask.

Во второй части будет написано web-приложение для взаимодействия с контрактом.

Читать далее
Всего голосов 7: ↑5 и ↓2 +3
Комментарии 4

Модульность в JavaScript: CommonJS, AMD, ES Modules

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 3.7K

Привет, Хабр!

Начало истории в модульности в JavaScript положил хаос: глобальные переменные, конфликты имен и сложности с зависимостями. Со временем сообщество предложило несколько подходов для организации модулей, начиная от CommonJS, которое легло в основу Node.js, до AMD, предпочтительного для асинхронной загрузки кода в браузерах. И приближаясь к настоящему времени появился ES Modules стандартизированный и встроенный в язык механизма модулей, который стал частью ECMAScript в 2015 году.

В этой статье рассмотрим кратко про CommonJS, AMD, и наконец - как появился ES Modules.

Читать далее
Всего голосов 14: ↑10 и ↓4 +6
Комментарии 7

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн

Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано

Уровень сложности Простой
Время на прочтение 14 мин
Количество просмотров 4.8K

В статье расскажу и покажу, как сверстать письмо, чтобы оно наверняка правильно отображалось во всех почтовых клиентах — особенно в Outlook, который до сих пор возглавляет подборки по популярности в РФ.

В конце — пример целого письма в HTML.

Читать далее
Всего голосов 34: ↑32 и ↓2 +30
Комментарии 17

Сборка мусора в V8

Время на прочтение 19 мин
Количество просмотров 4.1K

В этой статье мы детально разберем процесс сборки мусора движком V8. Познакомимся с понятиями поколений, Minor и Major Garbage Collection, посмотрим, как аллоцируются, трассируются и маркируются объекты в памяти. Что происходит с пустыми областями после очистки, и как выполняется сборка мусора в фоновом режиме. 

Читать далее
Всего голосов 15: ↑15 и ↓0 +15
Комментарии 3

GitHub Copilot ➜ OpenAI API прокси. Serverless

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 4.6K

Демо


Демо здесь.


Зачем


GitHub Copilot доступен бесплатно для подтверждённых учащихся, преподавателей и мейнтейнеров популярных проектов с открытым исходным кодом.


Даже если вы не подходите под указанные выше критерии, стоимость платной подписки
(Individual) более доступна, чем аналогичное предложение от OpenAI.
Она стоит всего 10 долларов и при этом обеспечивает доступ к GPT-4.


Если вышеперечисленные варианты вам не подходят — попробуйте полностью бесплатную альтернативу: openai-gemini.

Для чего


GitHub Copilot чат доступен исключительно в избранных IDE.


Проект openai-github-copilot позволяет использовать его с намного более широким спектром инструментов: предоставляется общий API, совместимый с OpenAI, который можно развернуть бесплатно.
(Однако подписка на GitHub Copilot всё так же требуется.)

Читать дальше →
Всего голосов 4: ↑4 и ↓0 +4
Комментарии 6

Необычный RxJS

Уровень сложности Средний
Время на прочтение 5 мин
Количество просмотров 4.7K

Всем привет! А вы знали, что RxJS содержит в себе более 100 операторов? Но если ваш проект использует эту библиотеку - скорее всего вы с трудом насчитаете у себя больше пары десятков. Интересная ситуация, да? Не знаю почему так получается, но сегодня я хочу поделиться реальными примерами использования “редких” операторов. Приступаем!

Читать далее
Всего голосов 4: ↑4 и ↓0 +4
Комментарии 4

Где изучать Javascript в 2024. Бесплатные курсы, книги и ресурсы

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 17K

Изучение JavaScript в 2024 году по открытым ресурсов имеет несколько преимуществ:

1. Востребованность: JavaScript остается самым популярным языков программирования в мире. Знание JavaScript открывает двери к множеству возможностей в IT-индустрии.

2. Бесплатный доступ: Благодаря бесплатным онлайн-курсам, вы можете изучать JavaScript без необходимости тратить деньги на платные обучающие материалы.

3. Актуальные материалы: Многие бесплатные курсы по JavaScript постоянно обновляются и содержат актуальную информацию о новых технологиях и подходах к разработке.

Почему не стоит покупать курсы и тратить деньги:

1. Доступность ресурсов: В интернете существует огромное количество бесплатных ресурсов, которые позволяют изучать JavaScript на высоком уровне. Покупка курсов не всегда является необходимой.

2. Качество бесплатных курсов: Некоторые бесплатные курсы могут предоставлять высококачественное обучение, сопоставимое с платными аналогами.

3. Мотивация и самодисциплина: Самое важное при изучении языка программирования – это ваша мотивация и самодисциплина. При достаточной мотивации и усердной работе можно достичь успеха в изучении JavaScript, не тратя деньги на покупку курсов.

Таким образом, изучение JavaScript по бесплатным курсам в 2024 году имеет множество преимуществ, особенно при наличии достаточной мотивации и самодисциплины.

Список ресурсов для бесплатного изучения JS.

Читать далее
Всего голосов 26: ↑24 и ↓2 +22
Комментарии 9

Смена профессии и мой первый опыт в IT: путешествие в мир фронтенда с Tauri, REST и Fetch API

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 2.1K

Привет, Хабр! Меня зовут Гармаев Энхэ. В течение длительного времени я работал в сфере розничной торговли, занимая должность менеджера. Это было увлекательное и насыщенное время, но, как говорится, в жизни всегда есть место переменам и новым вызовам. Сегодня я хочу поделиться с вами своим путешествием, решением о смене профессии и первом опыте работы в IT компании.

Читать далее
Всего голосов 16: ↑12 и ↓4 +8
Комментарии 3

Zustand.js: современный, невесомый, производительный и очень гибкий state manager

Уровень сложности Простой
Время на прочтение 9 мин
Количество просмотров 7.3K

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

В статье я расскажу:

о простом интерфейсе Zustand

о его внутреннем устройстве

о производительности без усилий: 3 простых способа оптимизаций

о производительности на максималках: не всегда нужно использовать длинный цикл рендера React, чтобы достичь максимальной производительности - Zustand может быстрее!

о применении на практике: советы и рекомендации по интеграции Zustand в ваши проекты для достижения масштабируемости и удобства поддержки.

Начните активно использовать Zustand в своих проектах - вы будете приятно удивлены простотой и удобством работы с ним.

Читать далее
Всего голосов 18: ↑13 и ↓5 +8
Комментарии 53

Вклад авторов

Работа