Префиксы помогают разработчикам быстро понять предназначение переменных и функций, что особенно полезно в больших проектах или когда код должен быть понятен новым участникам команды
User
Асинхронный веб: WebSocket, Server-Sent Events, Long Polling и Short Polling
Веб-разработка часто требует реализации механизмов обновления контента на странице в реальном времени. Существуют различные сценарии, где это необходимо, например, отображение прогресса выполнения тяжелых задач на бекенде, обновление каких-либо часто меняющихся данных, будь то курсы валют или мониторинг какой-то активности, чаты, различные уведомления. Эти сценарии объединяет одна общая особенность: источник события необходимости обновления данных находится не на клиентской стороне, поэтому мы хотим получать события с бекенда. В данной статье мы рассмотрим четыре популярных подхода к реализации этой функциональности: WebSocket, Server-Sent Events (SSE), Long Polling и Short Polling.
Мы проанализируем каждый метод, выявим их плюсы, минусы и сложность реализации.
Сложнейшая проблема компьютерных наук: центрирование
Заявляю: «Мы, как цивилизация, разучились использовать центрирование». Ну то есть мы, конечно, знаем, как это делать — очень просто:
display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */
Не спрашивайте, почему вам нужно запомнить четыре слова вместо просто горизонтальное/вертикальное; всё равно лучше, чем было до этого.
Ещё можно использовать сетку:
display: grid;
justify-items: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */
Также не спрашивайте, почему выражение
justify-content
стало justify-items
.Windows 10 + Linux. Настройка GUI KDE Plasma для Ubuntu 20.04 в WSL2. Пошаговое руководство
Введение
Данная статья предназначена вниманию системных администраторов, которые подготавливают типовые рабочие места на компьютерах под управлением ОС Windows 10, в том числе для разработчиков ПО.
Следует отметить, что существует определенная проблема, связанная с невозможностью интеграции ПО, полученного в on-line магазине Microsoft Store для использования в пользовательском образе Windows 10. Не вдаваясь в подробности уточню, что данная проблема связана с тем, что установленные из Microsoft Store программы связываются со служебной учетной записью Administrator, и при завершении создания пользовательского образа утилитой
sysprep
возникают обусловленные этим обстоятельством ошибки.Рассмотренный в данной статье способ позволить избежать такой проблемы при подготовке образа ОС Windows 10 с предварительно настроенной подсистемой WSL2, а также с заранее подготовленным и настроенным образом ОС Ubuntu 20.04 с GUI KDE Plasma, который в свою очередь может иметь свой набор пользовательского ПО.
В сети Интернет имеется большое количество примеров и руководств по настройке подсистем WSL (т.е. WSL1 и сравнительно новой WSL2), с настройкой GUI интерфейса для linux систем на базе ОС начиная с версии Ubuntu 16.04 и заканчивая Ubuntu 20.04, но в основном это касалось рабочих столов на основе т.н. «легковесного» xfce4, имеющий вполне объяснимые ограничения в пользовательских настройках. Но что касается GUI KDE Plasma для Ubuntu 20.04, в сети не нашлось какой-либо существенной информации. Но именно этот вариант предоставляет конечному пользователю практически неограниченный набор настроек как внешнего вида системы, так и настроек оборудования, конечно с учетом текущих возможностей интеграции linux-систем, реализованных в подсистеме WSL2.
Структура объекта в JavaScript движках
С точки зрения разработчика, объекты в JavaScript довольно гибкие и понятные. Мы можем добавлять, удалять и изменять свойства объекта по своему усмотрению. Однако мало кто задумывается о том, как объекты хранятся в памяти и обрабатываются JS-движками. Могут ли действия разработчика, прямо или косвенно, оказать влияние на производительность и потребление памяти? Попробуем разобраться во всем этом в этой статье.
Сравнение utility types библиотек или тайпскрипт на стероидах
Буквально за несколько лет typesctipt стал практически мастхэв в современной фронтэнд-разработке (и не только). Язык типов, работающих поверх языка javascript, который сам по себе является языком со слабой динамической типизацией со всеми вытекающими (отсутствие достойного тайп-хинтинга в редакторах, строгой проверки в анализаторах кода и прочее), нивелировал большинство из недостатков слабой типизации.
Чем такой инструмент не является обычной посадкой строгой статической типизации на динамически типизированный язык, как она есть в C#, Java, Kotlin и так далее...? Что такое типы утилиты? И какие решения всерьез могут облегчить жизнь разработчикам?
Когда «as never» — единственное, что работает
as never
, очень редко требуется в TypeScript. Давайте рассмотрим пример, где это необходимо.
Представим, что мы хотим отформатировать некоторый ввод на основе его typeof
. Сначала мы создадим объект formatters
, который сопоставит typeof
с функцией форматирования:
App Router и Pages Router: что изменилось в Next.js
Привет, Хабр!
Как могут заметить разработчики, фреймворк Next очень активно развивается. Так, некоторое время назад в 13 версии появилась новая парадигма (модель) для создания приложений — app router, которая должна прийти на смену старой pages router.
В этой статье мы постараемся наглядно продемонстрировать и рассказать, что же поменялось в работе приложения с появлением app router, какие изменения произошли в сравнении с pages router, что нового успели добавить разработчики, а от чего они отказались.
Как запретить разработчику делать не то что нужно?
React основан на компонентом подходе. Когда создается компонент, предполагается, что его будут использовать по назначению. Если в проекте есть таблицы значит надо использовать <Table /> (к примеру), формы - значит <Form />. Естественно названия носят абстрактный характер, в каждом проекте они могут иметь разные названия, но суть их одна.
На практике нередко встречается такое, что разработчики, особенно новые, пытаются обойти некие правила использования, и за этим может уследить только TeamLead (или тот кто проводит ревью). И для того что бы облегчить эту работу, я расскажу о том какой паттерн можно для этого использовать, покажу какие модификации для этого следует внести и естественно все это подкреплю практическими примерами.
Меня зовут Дмитрий Чернов - старший инженер-программист в компании Nord Clan. И мы начинаем.
Ускорение в 30 раз — requestIdleCallback
В данной статье я хотел бы привести пример практического кейса использования метода requestIdleCallback, который возник у меня на проекте. Кейс сам по себе небольшой, замеры времени отработки функции и отрисовки компонентов для использования производились с помощью React Profiler.
Хотелось бы сразу сказать, что статья может быть не чем-то новым, но может оказаться полезной в плане практического понимания того, где может пригодиться requestIdleCallback и как он может быть использован.
Принципы SOLID, о которых должен знать каждый разработчик
Материал, перевод которого мы сегодня публикуем, посвящён основам SOLID и предназначен для начинающих разработчиков.
Детальный React. Реконсиляция, рендеры, Fiber, виртуальное дерево
В сети можно найти огромное количество статей, мануалов и книг по основам React, включая официальную документацию от разработчиков. В этой статье мы не будем писать HelloWorld и изучать общеизвестные концепции. Сегодня мы заглянем под капот библиотеки и попытаемся понять, как она устроена внутри, как хранит данные, и как, на самом деле выглядит её виртуальное дерево.
На момент написания статьи, последняя стабильная версия React 18.2.0. За 10 лет разработчики Facebook проделали колосальный объем работы, было реализовано много фич и сделано не мало оптимизаций. За эти годы, так же, происходили и кардинальные архитектурные изменения. Очевидно, одной статьи мало, чтобы покрыть всю механику React, поэтому, данная публикация станет первой в серии статей о внутреннем устройстве React. Здесь мы познакомимся с основными сущностями и архитектурными решениями.
React: полное руководство по повторному рендерингу
Привет, друзья!
Представляю вашему вниманию перевод этой замечательной статьи, посвященной повторному рендерингу (re-render, далее — ререндеринг) в React.
Что такое ререндеринг?
Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React
:
- первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
- ререндеринг — второй и последующие рендеринги компонента.
Ререндеринг происходит, когда React
необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.
Я выпустил Grafar — JS-библиотеку для визуализации
После пяти лет в столе я готов представить свою библиотеку для визуализации — grafar. У нас есть: 3D, реактивные вычисления и самое простое АПИ для построения математических графиков прямо в браузере. В статье рассказываю, что я сделал и как этим пользоваться.
Бинарный поиск
В этой статье мы познакомимся с бинарным поиском с примером на JavaScript, а так же сравним бинарный поиск и линейным.
TypeScript: операции Union и Intersection в свете теории множеств
Недавно мне задали вопрос «почему пересечение в TS работает не как в теории множеств, а совсем наоборот?»
Озадачился, задумался и стал разбираться, как согласуются, и согласуются ли вообще операции «объединение» и «пересечение» в TypeScript и в теории множеств? И действительно ли пересечение в TS работает прямо противоположно?
Увлекательный мир фронтенда
Фронтенд-разработка — это как собирать лего без инструкции: иногда весело и творчески, но порой ты забираешься на кровать и кричишь: «*@#%*, да где же этот пропавший блок?!»
Каждый новый проект во фронтенде — это как уникальный набор лего, и ты никогда не знаешь, какие интересные вызовы подкинет он на этот раз.
В этой статье, опираясь на личный опыт, я расскажу, что такое современный фронтенд, какие задачи решают фронтендеры и что вообще происходит в мире фронтенда.
Сложность алгоритмов. Разбор Big O
Сложность алгоритмов - это ключевой аспект при проектировании и создании веб-приложений, особенно при работе с большим объемом данных или выполнении вычислительно сложных операций. Понимание, как оценивать сложность алгоритмов, помогает принимать обоснованные решения в выборе алгоритмов и структур данных, а также оптимизировать производительность своих приложений.
Сейчас мы рассмотрим, почему знание сложности алгоритмов является важным навыком для разработчика, какие методы используются для оценки сложности, и какие практические применения можно найти для этого знания при создании веб-приложений. На тему сложности алгоритмов часто задаются вопросы на техническом собеседовании. Поэтому я настоятельно рекомендую не пропускать это видео.
Наводим порядок в конфигах Webpack
Всем привет. Меня зовут Евгений Чернышев, и я возглавляю фронтенд-разработку в одном из направлений деятельности Домклик. Хочу поделиться своими мыслями о том, как управлять сложными конфигурациями Webpack. Сразу «проведу черту», чтобы предотвратить возможные холивары: сравнение Webpack с другими бандлерами (Rollup, Vite и прочими) выходит за рамки статьи.
Де-факто, Webpack является основным сборщиком фронтенд-проектов. Это зрелый продукт, который до сих пор развивается и повсеместно используется. Но, как и любой инструмент, он имеет свои слабые стороны. Я считаю что основной недостаток Webpack — это сложность его конфигурации. На крупных долгоживущих проектах конфигурационные файлы становятся слишком большими и нечитаемыми, превращаясь в мешанину вложенных объектов и spread-операторов. Чтобы показать, что я имею в виду, рассмотрим стадии развития проекта.
После прочтения применить, или Чистый код на практике
Начинающие разработчики часто встречают на ревью пулл-реквестов очень дотошных ревьюеров, дающих кучу комментариев по теме чистоте кода. Меня зовут Мария Кондаурова, я фронтенд-разработчик в департаменте вычислительной биологии в BIOCAD. И у меня есть свои мысли на тему чистого кода и рефакторинга.
Со временем у разработчика опытным путем или с чтением хорошей технической литературы нарабатывается чувство чистого кода, но что делать новичкам? В этой статье я не буду долго мучать теорией про чистый код и паттерны — про это уже было в Симпсонах в учебниках, конференциях и на Хабре в том числе. Но приведу примеры плохого (на мой взгляд) кода в приложениях на React и JavaScript — и также покажу, как его улучшить.
Надеюсь, что начинающим моя статья будет полезна — и после прочтения они смогут применить всё на практике.
Information
- Rating
- Does not participate
- Location
- Томск, Томская обл., Россия
- Date of birth
- Registered
- Activity