Как стать автором
Обновить
-3
0.1

Front-End Developer

Отправить сообщение

Обобщенные фабрики тайпгардов в TypeScript

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

Привет, Хабр! Меня зовут Сергей Соловьев, я разрабатываю интерфейсы международных платежей в Тинькофф Бизнесе. Уверен, многие хотят писать надежный, поддерживаемый, но при этом лаконичный код. Как найти баланс?

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

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

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

Использование кастомных шаблонов и конфигов для swagger-typescript-api

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

swagger-typescript-api - это мощный инструмент для генерации кода на основе OpenApi-контактов, о процессе работы с которым я рассказывал в предыдущей статье. Там же я упомянул, что его можно кастомизировать под нужды конкретного проекта с помощью своих шаблонов.

Именно кастомные шаблоны и бонусом, кастомная конфигурация, будут раскрыты в текущей статье. Поехали!

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

Аутентификация для WebSocket и SSE: до сих пор нет стандарта?

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

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

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

А еще заодно поговорим про уязвимость Cross-Site WebSocket Hijacking (CSWSH) и в целом посмотрим на многие вопросы через призму информационной безопасности.

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

Оптимизация js/WebGL/Web Assembly

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

Не так давно я писал про свой 2d движок jsge. При написании рендера, делал оптимизацию кода, а также экспериментировал с web assembly. Как и обещал, написал отдельную статью про результаты.

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

Готовим Telegram Mini App без туннеля и с Hot Module Reload на React, TypeScript

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

В этой статье разберем как собрать комфортную девелопмент среду для разработки Telegram Mini App. Под комфортом я понимаю ситуацию когда тебе не нужно выгружать свое приложение в облако, чтобы увидеть результат работы в телеге, или запускать туннель типа ngrock, который после каждого перезапуска меняет ссылку. И я не уверен, что HMR можно получить через туннель. Поэтому я сделал свое решение, и хочу оставить его тут себе и потомкам.

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

Сложность алгоритмов. Разбор Big O

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

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

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

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

Как я сделал проект для себя и получил приз от Telegram

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

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

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

Unity WebGL + React

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

Всем привет. Меня зовут Григорий Дядиченко, и я технический продюсер. Сегодня хотелось поговорить про Unity, веб, как его дружить с мобильными телефонами, какие есть удобные трюки и приколы, и причём тут React. Если вам интересна тема веб проектов на Unity, добро пожаловать под кат!

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

Anki — настолько круто, что я даже представить не мог

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

Если вдруг кто не знает, Anki - это бесплатная opensource программа для запоминания слов (и не только). Есть версии под декстоп и мобилы. Она довольно популярна при этом имеет интуитивно-НЕпонятный интерфейс. Мне понадобилось много лет, чтобы понять, насколько она крута, т.к. базовые статьи и туториалы этого не описывают. А многие люди используют ее даже не понимая ее возможностей.

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

Читать далее
Всего голосов 69: ↑60 и ↓9+66
Комментарии145

Рисуем верёвку в формате SVG при помощи JavaScript

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

Сегодня я расскажу о процессе, который я придумал для преобразования SVG‑контура в векторный рисунок верёвки.

Вы узнаете, как превратить показанный слева контур в верёвку справа:

Эта задача возникла в проекте, над которым работали мои коллеги, и она привлекла моё внимание. Я думал о ней и начинал экспериментировать, как только появлялось свободное время. Это было очень увлекательно, поэтому я захотел поделиться с вами процессом решения.

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

Замысел

Взглянув на это фото верёвки, вы заметите, что она состоит из множества переплетённых друг с другом прядей. Визуально они делят верёвку на сегменты. 2D‑проекция каждого сегмента напоминает изогнутый многоугольник.

Наша задача будет заключаться в создании этих многоугольников при помощи JavaScript.

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

Vue.js и слоистая архитектура: вынесение бизнес-логики в сервисы

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

Когда нужно сделать код в проекте гибким и удобным, на помощь приходит разделение архитектуры на несколько слоев. Рассмотрим подробнее этот подход и альтернативы, а также поделимся рекомендациями, которые могут быть полезны как начинающим, так и опытным разработчикам Vue.js, React.js, Angular. 

В старые времена, когда JQuery только появился, а о фреймворках для серверных языков лишь читали в редких новостях, веб-приложения реализовывали целиком на серверных языках. Зачастую для этого использовали модель MVC (Model-View-Controller): контроллер (controller) принимал запросы, отвечал за бизнес-логику и модели (model) и передавал данные в представление (view), которое рисовало HTML. 

Объектно-ориентированное программирование (ООП) на тот момент только начинало формироваться, поэтому разработчики зачастую интуитивно решали, где и какой код надо писать. Таким образом, в мире разработки зародилось такое понятие, как «Божественные объекты», которые первоначально отвечали практически за всю работу отдельных частей системы. Например, если в системе была сущность «Пользователь», то разработчику следовало создать класс User и в нем писать всю логику, так или иначе связанную с пользователями. Без разбиения на какие-то ещё файлы. И если приложение было большим, то такой класс мог содержать тысячи строк кода.

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

VueEnt — сложные формы на Vue и не только

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

Примерно полтора года назад вышла моя статья про библиотеку валидации v9s. Благодаря конструктивной критике в комментариях, удалось серьезно переработать библиотеку, уже год как вышла вторая более дружелюбная версия. В тексте публикации было сказано о том, что появилась необходимость осуществлять динамическую валидацию больших и сложных форм на Vue, а еще хотелось добавить индикацию к отдельным частям страницы во время загрузки и сохранения данных. После серии экспериментов сложился общий концепт новой библиотеки и нескромное название VueEnt, намекающее на сферу ее применения. Итак, если у вас возникают те же проблемы при разработке на Vue, что изложены в моей предыдущей публикации по ссылке выше, то заварите чайку и приготовьте бутерброды, ведь, несмотря на обзорный характер публикации, в двух словах все не описать.

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

Chrome Headless против cloudflare JS challenge

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

Автоматизация сбора информации с различных ресурсов - обычная задача для людей разных сфер деятельности. Жаль, что не всегда бывает достаточно сделать простой GET запрос и разобрать полученный html. Веб-сайты, с которых собираются данные, принимают защитные меры для предотвращения автоматизированных запросов. Одной из таких мер является использование cloudflare. Сегодня мы посмотрим, как cloudflare выявляет ботов через javascript и коснёмся темы деобфускации скриптов.

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

Как на практике работать над перфомансом веб-приложения: опыт Авто.ру

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

Советов «как ускорить веб-приложение» в интернете немало. Но при попытке применить их на деле может вспоминаться мем «делойте хорошо а плохо не делойте». Ситуации очень различаются, и универсальные рецепты плохо подходят. 

Поэтому на нашей конференции HolyJS Наталья Стусь поделилась тем, как выглядела работа над производительностью не в «вакууме», а конкретно в случае Авто.ру. Конечно, раз всё индивидуально, вы не сможете тут же сделать всё в своём проекте «точно так же». Но вот извлечь какие-то полезные принципы и понять, на что обратить внимание, вполне можно. Участникам конференции доклад понравился, и теперь для Хабра мы сделали его текстовую версию (а для тех, кто предпочитает видео, доступна запись).

Далее повествование — от лица Натальи.

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

Разрабатываем REST API с помощью TypeScript, NestJS, Prisma, AdminJS и Swagger

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



Привет, друзья!


В данном туториале мы разработаем простой сервер на NestJS, взаимодействующий с SQLite с помощью Prisma, с административной панелью, автоматически генерируемой с помощью AdminJS, и описанием интерфейса, автоматически генерируемым с помощью Swagger. Все это будет приготовлено под соусом TypeScript.


Репозиторий с кодом проекта.


Если вам это интересно, прошу под кат.

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

Руководство по NestJS. Часть 1

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



Привет, друзья!


В этой серии из 3 статей я расскажу вам о Nest (NestJS) — фреймворке для разработки эффективных и масштабируемых серверных приложений на Node.js. Данный фреймворк использует прогрессивный (что означает текущую версию ECMAScript) JavaScript с полной поддержкой TypeScript (использование TypeScript является опциональным) и сочетает в себе элементы объектно-ориентированного, функционального и реактивного функционального программирования.


Под капотом Nest использует Express (по умолчанию), но также позволяет использовать Fastify.



В первой статье рассматриваются основы работы с Nest, во второй — некоторые продвинутые возможности, предоставляемые этим фреймворком, в третьей — приводится пример разработки простого React/Nest/TypeScript-приложения.


При рассказе о Nest я буду в основном придерживаться структуры и содержания официальной документации.


Это первая часть руководства.

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

Основы внутреннего устройства JavaScript

Время на прочтение6 мин
Количество просмотров40K
image

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

Введение


Почти все уже слышали о концепции движка V8 и большинство людей знает, что язык JavaScript однопотоковый или что он использует очередь обратных вызовов.

В этом посте мы подробно разберём эти концепции и объясним, как же работает JavaScript. Благодаря знанию этих подробностей вы сможете писать более оптимальные приложения, надлежащим образом использующие API. Если вы работаете с JavaScript относительно недавно, этот пост поможет вам понять, почему JavaScript настолько «странный» по сравнению с другими языками. А если вы опытный разработчик на JavaScript, то он позволит вам по-новому взглянуть на внутреннее устройство JavaScript Runtime, с которым вы работаете каждый день.
Читать дальше →
Всего голосов 26: ↑23 и ↓3+29
Комментарии5

Децентрализованная конфигурация webpack или как упростить сборку проекта

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

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

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

Но если говорить о конфигурации сборки, то такая декомпозиция скорее редкость, и в больших проектах часто можно встретить огромные webpack.config.js, модификация которых может доставить немало проблем и привести к ошибкам.

Если вам хочется сделать работу со сборкой проще и надёжнее при модификациях, то добро пожаловать под кат.

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

Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза

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

На протяжении всей жизни мне приходится экономить вычислительные и сетевые ресурсы: сначала были компьютеры с 300 кГц (кило — не гига!) и 32 Кбайт RAM, интернет по dial-up. Потом я решал олимпиадные задачки. Теперь имею дело с терабайтами трафика и 50 млрд событий в сутки. И хотя современные телефоны в 1 000 раз мощнее любого оборудования двадцатилетней давности, я до сих пор оптимизирую. Думал даже, что это со мной что-то не так. Но потом понял, что все постоянно что-нибудь оптимизируют. 

Эта статья в меньшей степени о том, почему нужно бороться за производительность, и в большей о том, на что сейчас стоит заменить устаревший стек из JPEG, JSON, gzip и TCP — и как это сделать. 

Спойлер: у нас есть решение и мы его не только показываем — ссылки на open source в конце статьи.

Читать далее
Всего голосов 336: ↑324 и ↓12+411
Комментарии300

Собираем свой chromium/electron, с блекджеком и поэтессами

Время на прочтение13 мин
Количество просмотров14K
image

Добрый день. Меня зовут Тимур и я программист.

Сегодня я предлагаю посмотреть как можно подрихтовать исходники chromium-а, собрать свой вариант браузера и подтянуть это добро в electron. Эта статья — пробный шар, какая то часть ее позже перекочует в документацию проекта который, я надеюсь, смогу раскачать и сделать популярным, но об этом потом.

Если Вам хочется похейтить пользователей электрона в частности или джисеров в целом — проходите мимо. Электрон я сам не особо люблю и как раз пытаюсь сделать лучшую замену ему, что касается фронтовиков — я один из них, но про js в статье будет очень мало. Сорян.
Читать дальше →
Всего голосов 30: ↑26 и ↓4+25
Комментарии35

Информация

В рейтинге
2 688-й
Откуда
Краснодар, Краснодарский край, Россия
Зарегистрирован
Активность

Специализация

Frontend Developer, Fullstack Developer
Senior
Vue.js
TypeScript
GraphQL
Node.js