Обновить
240.15

JavaScript *

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

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

Blockchain-разработка глазами Backend-разработчика

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

Я достаточно давно занимаюсь Backend разработкой и последние несколько лет, все больше и больше пишу разные блокчейн проекты (Solidity на EVM). Погружение в блокчейн мне давалось непросто и мой бэкендерский мозг несколько раз ломался, и я решил поделиться своим взглядом на погружение в блокчейн-разработку.

У этого поста также есть видеоверсия.

Читать далее

Делаем import/require ясными и красивыми

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

Довольно часто в проектах встречается использование относительных import/require. Если это маленький проект, и подключается модуль из текущей папки, то это приемлемо, но при разрастании проекта и глубины вложенности папочной структуры без слез смотреть на это нельзя:

Читать далее

react-query vs SWR и избавимся ли мы от Redux?

Время на прочтение6 мин
Охват и читатели14K

Давайте сначала познакомимся с обоеми библиотеками, чтобы сравнить их и убедиться, что лучше. react-query и SWR — это две популярные библиотеки для управления состоянием данных в React-приложениях. Они обе предназначены для облегчения работы с данными, получаемыми с сервера, но имеют некоторые различия в функциональности и подходах.

Читать далее

Абстрактные типы данных. Изложение для начинающих

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

Абстрактный тип данных. 

Зачем нужны абстрактные типы данных? Чем они полезны для программиста? Когда необходимо создавать эти абстракции, а когда можно обойтись без них? Тип данных vs абстрактный тип данных vs структура данных.

Читать далее

Генерируем простой web интерфейс для просмотра таблиц PostgreSQL

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели29K

В публикациях на хабре, чаще всего самое интересное в комментариях. Вот и в моем прошлом посте "Сгенерировать web интерфейс из БД или объектной модели не стало проще даже 10 лет спустя" я собрал джекпот из SharePoint, Vaadin и нескольких библиотек либо устаревших, либо поддерживаемых "одним автором".

Что я пытался объяснить читателям, что на этапе проверки идей не нужна дополнительная сложность в виде серверной инфраструктуры только ради этой самой инфраструктуры и нового языка программирования/платформы. Именно поэтому мне не нужны сейчас Yii, Symfony и Laravel, не подойдет ADF. На любое обучение тратится драгоценное время и поэтому надо понимать зачем тратить время на что-то, что потом возможно навсегда придется забыть через неделю-другую игры с прототипом.

В своих эксперементах с помощью лапшекода на JavaScript я быстро разработал вполне функциональный интерфейс. А начиналось все с Java 21, хотя в итоге обошелся без нее!

Читать далее

Паттерны реактивности в современном JavaScript

Уровень сложностиСложный
Время на прочтение12 мин
Охват и читатели18K



"Реактивность" — это то, как системы реагируют на обновление данных. Существуют разные типы реактивности, но в рамках этой статьи, реактивность — это когда мы что-то делаем в ответ на изменение данных.


Паттерны реактивности являются ключевыми для веб-разработки


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


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


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

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

Читать дальше →

Ликбез по распространенным Client-Side уязвимостям

Уровень сложностиСредний
Время на прочтение15 мин
Охват и читатели28K


В этой статье мы покажем:


  • как в разных ситуациях манипулировать веб-сайтом таким образом, чтобы он передавал пользователям вредоносный JavaScript.
  • как скомпрометировать администратора сайта, отправив ему личное сообщение;
  • как атаковать разом всех пользователей при помощи комментария под статьей;
  • как заставить пользователя отправить запрос на действия, которые он не собирается выполнять;
  • как прослушивать WebSocket-соединения;
  • и коротко объясним, как предотвратить все эти безобразия.

В общем, под катом вас ждет рассказ про распространенные уязвимости на стороне клиента и некоторые методы Client-Side защиты.

Читать дальше →

Подробная настройка Content Security Policy (CSP)

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

Content Security Policy (CSP) - это механизм безопасности веб-приложений, который используется для сокращения рисков, связанных с атаками, такими как внедрение скриптов (XSS) и выполнение нежелательного кода (инъекция). CSP позволяет веб-разработчикам указывать браузерам, из каких источников разрешено загружать ресурсы, такие как скрипты, стили, изображения, шрифты и другие элементы.

Читать далее

RxJS: как операторы высшего порядка упрощают код

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

Если вы работали с Angular, то наверняка встречались с RxJS. Потоки, развесистые конструкции, много аргументов у метода pipe, а каждый аргумент возвращают разные функции с разным количеством аргументов. Есть интуитивно понятные функции типа filter или map. Первый явно фильтрует значения в потоке, а второй эти значения меняет. Такие функции называют операторами. И чем глубже вы проваливаетесь в RxJS, тем больше самых разных операторов вы узнаете. И со временем добираетесь до потоков потоков. То есть вместо обычных значений такой поток эмитит другие потоки. Такие потоки называют Higher Order Observables. И для работы с такими потоками существуют специальные операторы. Возможно, вы слышали, что такие операторы называют Higher Order Operators (HOO). Они могут выравнивать потоки или, другими словами, делать их обычным.

В этой статье я покажу, что в HOO нет ничего мифического, и расскажу в каких случаях вам нужно использовать операторы высшего порядка. Сейчас вы подумаете, что это скучный лонгрид, но не торопитесь. Мы рассмотрим всего 4 оператора: switchMap, exhaustMap, concatMap и mergeMap.

Читать далее

Задачи про PEG-парсеры

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

Когда-то я хотел сделать контест по парсингу для Codeforces. Придумал задания двух типов:

1. Дается неформальное описание языка, по которому нужно создать грамматику (например, "язык с правильными скобочными последовательностями")

2. Даны примеры строк в языке, по которым нужно восстановить грамматику

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

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

Читать далее

Просто о Deep #1

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

Боль в написании backend

Разберем, какие есть боли у backend разработчика и как deep.foundation решает данную проблему и что предлагает для разработчика.

In deep

Добавление server side Open Graph и прочего SEO в существующую SPA

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

Представьте себе следующую ситуацию: у вас на руках есть SPA с рендерингом полностью на клиенте, и вам необходимо сделать так, чтобы в зависимости от URL было разное содержимое у тега <head>.

Читать далее

Под капотом анимаций в React Native. Часть 2/2: Reanimated and JSI

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

Привет! Меня зовут Евгений Прокопьев, я старший инженер-разработчик в СберМаркете. На React Native я пишу уже больше 6 лет и очень люблю создавать красивые анимации.

В интернете часто сталкиваюсь с мнением, что на RN невозможно сделать красивые и стабильные анимации: их трудно делать и они ужасно лагают. По моему опыту всё обстоит совсем не так — вопрос именно в том, как их готовить. Хочу поделиться опытом, что сделать, чтобы у вас анимации не лагали, и по возможности восстановить репутацию React Native в глазах комьюнити.

Это продолжение вторая часть статьи. Призываю сначала ознакомиться с первой:Под капотом анимаций в React Native. Часть 1/2: Animated and Bridge

Читать далее

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

Подборка VS Code-плагинов для Frontend-разработчиков и не только

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели22K

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

Читать далее

Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса

Уровень сложностиСредний
Время на прочтение22 мин
Охват и читатели18K
Как и в любом достаточно динамическом языке, в JavaScript из коробки есть способы разобрать в рантайме структуру его значений — определить типы, ключи объектов, получить конструкторы и прототипы.

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

Читать дальше →

Считаем «a=1; b=2; x=pi/3; abcos(x)»

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

В предыдущей серии мы научились считать выражения вида -2.1+ .355 / (cos(pi % 3) + sin(0.311)). Один из комментариев там предложил посчитать то, что я вынес в заголовок этого поста. Что ж, вызов принят. Как и в предыдущем посте, мы "на пальцах" разбираем устройство простейшего интерпретатора.

Считать далее

JavaScript повсюду или почему веб-технологии захватили мир

Время на прочтение18 мин
Охват и читатели17K

Я давно слежу за развитием веб-технологий и каждый раз, натыкаясь на очередной холивар в интернете про злой и страшный JavaScript, залезающий на чужую территорию, инстинктивно хочу побыть его адвокатом. Обычно все мои доводы сводятся к банальному “не мы такие, жизнь такая” или “ничего личного, просто бизнес”, но в этот раз захотелось развернуто обосновать причины популярности веб-технологий.

Пробежимся галопом по истории интернета, перемоем косточки фронтендерам и придем к неутешительному заключению. Буду ругать и хвалить, но выводы делать лишь вам. Хотя и не надеюсь кого-то в чем-то убедить. Добро пожаловать под кат!

Читать далее

DOM, DI и View: деревья в Angular

Уровень сложностиСложный
Время на прочтение8 мин
Охват и читатели15K

Чтобы стать продуктивным разработчиком на Angular, потребуется понимание различных деревьев, из которых состоит приложение. На первый взгляд легко можно спутать дерево инжекторов DI и DOM-дерево непосредственных HTML-элементов и вьюх Angular. Они похожи и иногда имеют прямое соответствие, но далеко не всегда. В статье рассмотрим различия, научимся держать их в уме и освоим, как можно обойти возможные трудности, связанные с ними.

Читать далее

Как уменьшали размер VS Code, используя name mangling — сокращение идентификаторов во время сборки

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

Не так давно, мы уменьшили на 20% объем итогового скомпилированного JavaScript-кода в Visual Studio Code. В абсолютных числах это около 3.9 МБ. Хоть это и меньше типичной гифки из блога, цифра все равно значительная! Это положительно влияет не только на объем скачиваемых данных для очередного обновления, но и на время запуска: меньше кода значит меньше работы для парсера и интерпретатора. И ко всему прочему, мы добились этого без удаления кода или каких-либо рефакторингов. Вместо этого, мы работали над новым шагом сборки: name mangling, сокращение имен сущностей.

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

Читать далее

Как показать миллион зданий на карте — и не сломать браузер

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

В 2ГИС мы аккумулируем огромное количество геоданных, с которыми взаимодействуют миллионы пользователей ежедневно. Анализируя их, мы можем получить ценную информацию и найти важные идеи для развития городов. Эти данные также полезны организациям.

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

Расскажем, как мы получаем такую картинку, как это всё работает под капотом, и посмотрим, на что способен ваш браузер, ведь ему предстоит отображать сотни тысяч объектов одновременно.

Расскажем, как мы получаем такую картинку, как это всё работает под капотом, и посмотрим, на что способен ваш браузер, ведь ему предстоит отображать сотни тысяч объектов одновременно.

Читать далее

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