Все потоки
Поиск
Написать публикацию
Обновить
216.48

JavaScript *

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

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

Отрисовка в браузере большой анимации или как я ушел с mp4 к своему формату видео

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

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

Читать далее

Как я Markdown парсер выбирал

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

Недавно я решил создать свой сайт, и мне понадобилось выбрать парсер Markdown для отрисовки статей в блоге.

То, что начиналось как: «Окей, гугл, какой парсер выбрать?», – вылилось в полноценное исследование существующих реализаций парсеров.

О том, какие открытия меня ждали на этом пути, и будет данная статья.

Читать далее

Как работает неточное сравнение строк

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

https://fakt309.github.io/thisisthewall/

В языках программирования строки сравниваются очень просто, если строка отличается хотя бы на один символ, то возвращает false.

Но вот что если мы хотим не просто получать дискретное значение (true / false), а дифференцированное, например в процентах. Ведь согласитесь строки test и testing гораздо ближе к друг другу, чем test и abcd. Для данной проблемы существует множество решений, мы поговорим о самый популярных алгоритмах (также об их модификациях):

Расстояние Хэмминга

Расстояние Левенштейна

Сходство Джаро — Винклера

Коэффициент Сёренсена

Читать далее

Ностальгия по Night Light (1995)

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

Многие из нас с восторгом вспоминают те или иные игры детства, и в данном случае речь пойдет о ностальгических воспоминаниях об игре Night Light 1995 года, которые натолкнули автора на воссоздание одного из основных элементов ее геймплея — фонарика.
Читать дальше →

Память в браузерах и в Node.js: ограничения, утечки и нестандартные оптимизации

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

Интро: почему я написал эту статью


Меня зовут Виктор, я разрабатываю страницу результатов поиска Яндекса. Несмотря на внешнюю простоту, поисковая выдача — сложная штука: на каждый запрос генерируется своя уникальная страница, на которой в зависимости от запроса может присутствовать блок Картинок, Карты, Переводчик, видеоплеер и многие другие компоненты. Все они должны запускаться и работать в памяти обычных бюджетных телефонов, которые использует большинство наших пользователей. Браузерам должно хватать ресурсов, чтобы пользователь не видел вот такого:



На своих серверах мы должны генерировать сотни миллионов уникальных страниц в сутки — это сложнее, чем просто отдавать одни и те же ресурсы. Генерация страницы не должна быть слишком требовательной к памяти сервера.


Разрабатывая проект на JavaScript (TypeScript, ClojureScript или каком-то другом языке, транслируемом в JavaScript), мы привыкли создавать объекты, массивы, строки и вообще писать код, как будто память бесконечна. Это не так. Я расскажу о видах проблем с памятью, о том, какие ограничения мы часто забываем и как их можно преодолеть. В ответ браузеры и пользователи скажут вам спасибо.


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

Общего между фракталами и голографией

Время на прочтение7 мин
Количество просмотров7.5K
Продолжим тему бильярдных фракталов.



В статье присутствуют Gif (трафик!) и контрастные картинки. У эпилептиков может случиться эпилептический припадок.
Читать дальше →

Wordle или как выиграть за 6 ходов

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

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

Читать далее

Введение в SVG-анимации для верстальщиков

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


Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой статье мы рассмотрим SVG-анимации с разных сторон, посмотрим на актуальное состояние дел, возможности и сопутствующие инструменты. Мы не будем разбирать каждое свойство и каждый хак. Слишком большой объем материала получится. Для этого есть MDN и ему подобные сайты. Задача текущей статьи — дать общее представление о том, что бывает, и от чего можно оттолкнуться, если вы решили изучать эту тему, а у вас полная каша в голове.

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

Создание telegram web apps и взаимодействие с ними в телеграм ботах

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

В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная - Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.

Читать далее

Симулятор x86 подобного процессора на машине Тьюринга

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

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

Читать далее

Знакомство с ООП на примере JavaScript

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

Всем привет! В этой статье мы рассмотрим основные характеристики объектно-ориентированного программирования (ООП) на практических примерах JS-кода. В ходе обсуждения мы осветим основные принципы ООП, а также ответим на вопросы, почему и когда этот стиль может быть полезен.
Читать дальше →

Хабрчане закидали меня камнями за косяки в МВП. Я не уныл, всё поправил и готов получать новую порцию или релиз Измерии

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

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

И вот я готов представить обновлённую Измерию. Всё, что осталось от старой, — возможность оставлять рейтинги на карте и её (карты) вид. Для полного списка изменений предлагаю проследовать на специально отведённую для этого страницу. В данной же статье я разберу косяки, на которые пользователи и комментаторы Хабра обратили внимание, способы их устранения, а также дополнения, приносящие ещё больше полезности в сервис. Примерное время чтения: 7 минут.

Читать далее

Нецелевое использование assert-функций в TypeScript

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

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

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

11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком

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

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

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

Давайте посмотрим

TypeScript: худший лучший язык программирования

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

На конференции FrontedConf 2021 Андрей Старовойт показал плюсы и минусы TypeScript. Если вы сомневаетесь, стоит ли его использовать — эта статья для вас, чтобы вы смогли для себя всё решить. Если вы уже любите и используете TypeScript, то надеюсь, вам тоже будет интересно.

Все преимущества и недостатки языка описаны, конечно, через призму опыта Андрея. Несмотря на то, что последние 7 лет он работает в компании JetBrains над продуктом WebStorm на Java Kotlin, пишет он и на TypeScript. Попутно много смотрит на код других людей, пытаясь понять, что с ним можно сделать внутри WebStorm и почему типы выбились неправильно. А также — какие инспекции можно применить так, чтобы люди стали счастливы, а их код — лучше.

Читать далее

Невидимый Javascript-бэкдор

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

Несколько месяцев назад мы увидели пост в сабреддите r/programminghorror: один разработчик рассказал о своих мучениях с поиском синтаксической ошибки, вызванной невидимым символом Unicode, скрывавшемся в исходном коде на JavaScript. Этот пост вдохновил нас на мысль: что если бэкдор в буквальном смысле нельзя было бы увидеть и таким образом он бы избежал тщательных проверок кода?

Как раз когда мы завершали написание этого поста, команда из Кембриджского университета опубликовала статью с описанием такой атаки. Однако её подход сильно отличается от нашего — в нём упор делается на механизм двойного направления текста в Unicode (Bidi). Мы реализовали подход, который в статье называется Invisible Character Attacks и Homoglyph Attacks.

Без лишних предисловий перейдём к бэкдору. Сможете его найти?
Читать дальше →

JavaScript редактор диаграмм, который открывает диаграммы из PNG картинок (open source)

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

dgrm.net | GitHub

dgrm.net - это редактор диаграмм, с прицелом на трансформацию в карту знаний.

Отличительные особенности:
- аскетичность,
- работает на телефонах (одно из немногих web-решений),
- открытый исходный код.

В процессе разработки появляются интересные моменты. Статья про один из таких моментов: чтение данных из PNG.
Исходный код для использования в своих проектах прилагается.

Читать далее

Оптимизация рендеринга React-компонентов: как не навредить

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

Всем привет! Если вы используете React для создания UI, то уверена, что вы слышали о таких понятиях, как PureComponent, memo, useCallback и прочих возможностях, которые нам предоставляют создатели библиотеки для оптимизации наших приложений. Разработчики React уже позаботились о том, чтобы обновление DOM было предсказуемым и производительным: преобразования деревьев React-элементов выполняются максимально эффективно с помощью алгоритма согласования (reconciliation). Однако при большом количестве компонентов, глубокой вложенности или неправильной архитектуре количество отрисовок или вызовов функций может заметно увеличиться. Для оптимизации использования ресурсов мы применяем различные приёмы, позволяющие нам, к примеру, избавиться от лишних отрисовок с одинаковыми входными значениями props.

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

Как мы в Домклике делаем виджеты на React

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

Всем привет! Меня зовут Игорь Савин, я frontend-разработчик в компании Домклик. На текущий момент у нас около 150 различных команд разработки, из которых большая часть связана с разработкой какого-либо фронтенда на HTML, CSS и Javascript. Но когда так много команд, непременно возникают ситуации, при которых в проект одной команды нужно встроить какую-то функциональность, разрабатываемую другой. И не просто встроить, но и потом поддерживать её работу, исправлять ошибки и внедрять новые фичи.

Читать далее

Калькулятор на типах TypeScript

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

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

Читать далее

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