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

JavaScript *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читать далее
Всего голосов 26: ↑23 и ↓3+24
Комментарии13

Истории

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область

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

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

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

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

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

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

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

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

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

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

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

Демо


Демо здесь.


Зачем


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 мин
Количество просмотров5.7K

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Работа