Обновить
281.86

JavaScript *

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

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

Как ‌С#-разработчик у JavaScript плохому учился

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


Недавно мне на глаза попалась одна статья на Хабре. В ней сравниваются C# и JavaScript. На мой взгляд, сравнивать их — всё равно что сравнивать луну и солнце, которые, если верить классику, не враждуют на небе. Эта статья напомнила мне о другой публикации. В ней речь идёт о сценариях неожиданного и неочевидного поведения JavaScript, а C# не упоминается от слова совсем, но живое любопытство сподвигло меня попытаться повторить подобное поведение на другом языке.
Читать дальше →

Typescript Compiler API: возьми управление компилятором в свои руки

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


В разработке приложений на Typescript всегда есть этап сборки проекта. Обычно для этого используются системы сборки и автоматизации workflow, такие как webpack или gulp, обвешанные достаточным количеством плагинов, либо процесс сборки размазывается в командах package.json и шелл-скриптах с использованием нативного tsc или команд CLI используемого в проекте фреймворка. Все эти решения имеют свои плюсы и минусы. Зачастую в процессе сборки нужно сделать что-то нестандартное, и оказывается, что используемая система сборки не предоставляет нужную функциональность из коробки, а имеющиеся плагины делают не совсем то, что надо. В такие моменты работа над проектом встает, и начинается судорожное ковыряние в конфигах и поиск подходящего плагина. В какой-то момент понимаешь, что за время, потраченное на поиск подходящего костыля, можно было написать свое решение.

Во многих случаях критичные процессы в проекте можно автоматизировать скриптами на javascript, выразительность и функциональность которого вполне позволяет описать нужный workflow и выбирать из всего разнообразия библиотек, не заморачиваясь наличием для них плагинов под конкретную систему сборки. Важное преимущество такого подхода – полный контроль над процессами и максимальная гибкость. Для проектов, в которых используется Typescript в качестве основного языка разработки, возникает вопрос, как встроить процесс его компиляции в свой workflow. Здесь на помощь приходит Typescript Compiler API. В этой статье мы посмотрим, как его можно использовать для того, чтобы выполнить компиляцию проекта, реализованного на Typescript, взаимодействуя с компилятором на разных этапах его работы и напишем скрипт для hot-reloading’а REST-сервера, разработанного на Nest.js.
Читать дальше →

Клиентский мониторинг производительности

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

Клиентский мониторинг производительности


Привет, Хабр! Меня зовут Влад, я лид направления Web Performance в Тинькофф.


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


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


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


Пользователям нравятся отзывчивые интерфейсы, а бизнесу — прибыльные проекты. И если производительность играет в этом не последнюю роль, то почему бы не заняться ее оптимизацией?

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

Синтетический мониторинг производительности

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

Синтетический мониторинг производительности


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


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

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

Об эстимейтах-2

Время на прочтение2 мин
Охват и читатели2.7K
Из известного мультфильма:
— я хочу измерить свой рост!
— два слоненка
— пять мартышек
— 38 попугаев и одно попугайское крылышко


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

Что ж, чтоб не горело, там где сидело, предлагаю разработать некую систему оценок

Дано:
1) многие менеджеры не любят диапазоны в оценках
2) [ходят слухи] на задачу тратится все отведенное время
3) слишком много вариантов для оценки (1 час, 2 часа, 3, 4, 5,… n)
4) роль тимлида не учтена
Читать дальше →

Как верстать веб-интерфейсы быстро, качественно и интересно

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

image


Всем привет! Давно хотел и наконец написал небольшую книжку — бодрое пособие по своей профессиональной области: актуальным подходам к разметке интерфейсов, экранному дизайну и доступности. Она о моем оригинальном подходе к созданию GUI, препроцессорам CSS (для объективности, немного и об альтернативных подходах), и его эффективном практическом использовании с javascript и популярными реактивными компонентными фреймворками Vue и React. Материал представлен аккуратно последовательно, но безумно интенсивно и динамично — ничего лишнего или даже слишком подробного — для того чтобы увлеченный и подготовленный читатель не потерял интереса и «проглотил на одном дыхании». С другой стороны, текст, достаточно сложный ближе к концу, и на всем протяжении — густо насыщенный идеями, ссылками на технологии и подходы — поэтому, очевидно, будет «на вырост» начинающим. Но, в любом случае, как и если вы только начали интересоваться данной тематикой, так и если уже давно занимаетесь веб-дизайном, версткой и программированием фронтенда — вам может быть полезно на него взглянуть.

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

Создание Discord-бота, используя библиотеку discord.js | Часть №1

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

Введение


В этой статье я подробно расскажу о том, как работать с библиотекой discord.js, создать своего Discord-бота, а также покажу несколько интересных и полезных команд.

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

Начало работы


Если вы уже знакомы с приведёнными ниже материалами, — смело можете пролистать этот раздел.

Установка среды разработки
Для начала работы с кодом нам нужно установить среду разработки, это может быть:


… и так далее.

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

Для установки переходим по этой ссылке.


Выбираем свою операционную систему и запускаем скачивание.

Установка среды выполнения
Для создания бота мы используем среду выполнения node.js. Для её установки нам необходимо перейти на этот сайт.



На данный момент нас интересует версия долгосрочной поддержки (LTS), скачиваем её.

Установка полезных расширений
В Visual Studio Code присутствует возможность устанавливать расширения.
Для этого, кликните по отмеченной ниже иконке.



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



Из полезных расширений могу отметить:

  1. Discord Presence — расширение, позволяющее отображать рабочую область и файл, в котором вы работаете в вашей игровой активности (функция работает только при использовании приложения Discord).

    Идентификатор расширения: icrawl.discord-vscode
Читать дальше →

Используем DI в Angular по максимуму — концепция частных провайдеров

Время на прочтение7 мин
Охват и читатели41K
В Angular очень мощный механизм Dependency Injection. Он позволяет передавать по вашему приложению любые данные, преобразовывать и переопределять их в нужных частях.

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

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

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


Аккуратно и системно облегчаем понимание кода

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

Читаемость кода упрощает как процесс написания программ, так и последующие действия – от отладки и оптимизации до тестирования и сопровождения.


image


Один из эффективных способов для понимания кода – применение функциональной парадигмы программирования. Основная идея функционального программирования состоит в представлении процесса вычислений как последовательного изменения состояний без хранения где-либо самих состояний. В качестве примера системы, в которой хорошо реализован функциональный подход, часто приводят Haskell, а также Erlang или Scala. Внедряя такой подход в распространенные языки, такие как JS или Swift, можно добиться как улучшения читаемости, так и тестируемости.


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

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

От библиотеки компонентов к дизайн-системе

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


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

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

Todo-лист для командной строки на Deno

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

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


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


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

Симуляция роста кристаллов: ограниченная диффузией агрегация на Javascript

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

В этой статье мы поговорим об одном из таких процессов, называемом агрегацией, ограниченной диффузией (diffusion-limited aggregation, или DLA), создающем фрактальные ветвящиеся структуры при помощи случайного движения и «липких» частиц (подробнее о них позже). Свидетельства этого процесса можно найти в природе в различных масштабах и в органических, и в неорганических системах, например:



Наверху: кластер DLA, выращенный из раствора медного купороса в ячейке для электроосаждения; внизу: коллоидный диоксид кремния с площадью поверхности 130 м2

Память в JavaScript — без утечек

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


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

Вступление


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

Любовный треугольник


Когда компьютеру необходимо выполнить некоторые вычисления, процессору (ЦП) нужны данные для обработки. Таким образом, в соответствии с поставленной задачей он отправляет в память запрос на выборку данных через шину.

Это выглядит так:

image

Так что это наш романтический треугольник — Процессор -> Шина -> Память
Читать дальше →

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

Alpine.js своими руками

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

Давайте поговорим о том, что внутри, под капотом Alpine.js. К концу статьи вы узнаете, как происходит создание современного реактивного фронтенд фреймворка путем написания оного своими руками. Это легче, чем вам кажется.


Эта статья – вольный перевод мини-курса Building AlpineJS от создателя библиотеки Caleb'а Porzio на Laracasts. Если вы в нормальных отношениях с английским и больше любите видео, чем текст, – милости прошу. 4 из 6 уроков бесплатны, остальные по подписке. Статья затрагивает только бесплатные уроки. В принципе, их нам будет достаточно, чтобы понять, что там внутри.
Читать дальше →

Задачи с собеседований (front-end) часть 2

Время на прочтение9 мин
Охват и читатели50K
С момента выхода моей предыдущей статьи о вопросах на собеседованиях Задачи с собеседований (front-end) прошло практически два года.

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

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

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

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

$mol_func_sandbox: взломай меня, если сможешь!.

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

Здравствуйте, меня зовут Дмитрий Карловский и я… хочу сыграть с вами в игру. Правила её очень просты, но их нарушение… приведёт вас к победе. Почувствуйте себя в роли хакера выбирающегося из JavaScript песочницы с целью прочитать куки, намайнить биткоины, сделать дефейс или ещё что-нибудь интересное.



https://sandbox.js.hyoo.ru/


А далее я расскажу как работает песочница и подкину несколько идей для взлома.

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

Скрипт выборки российских облигаций по параметрам

Время на прочтение6 мин
Охват и читатели39K
Уже несколько лет я пользуюсь облигациями в качестве замены депозита, потому что процент дохода, который можно получить со вклада стабильно падает. В отличии от ситуации с депозитом, в облигациях всегда можно найти большую доходность. И в этой ситуации меня не устраивало только количество времени на механическую работу по поиску подходящих вариантов бумаг.


Работа скрипта по поиску облигаций на Московской бирже

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

Сделал это на Node.js с выводом полученных результатов в локальный html файл с интерактивной таблицей от Google Charts (а в случае, если JavaScript отключен в браузере, что например происходит при открытии этого html файла из мессенджера на iPhone, то отображается статическая версия таблицы, также сгенерированная скриптом).
Поиски замены вклада на Мосбирже

Дайджест свежих материалов из мира фронтенда за последнюю неделю №420 (15 — 21 июня 2020)

Время на прочтение4 мин
Охват и читатели10K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Сервировка сжатых файлов и использование CDN

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

При загрузке сайта на сервер ложится множество задач, которые необходимо выполнять быстро и стабильно. Но ответственность за часть из них (например, обработку запросов на получение файлов, их пересылку клиенту и компрессию передаваемых данных) можно переложить на специализировые файловые хранилища. Они, как правило, имеют несколько территориальных зон и отдают клиенту файлы от наиболее близкого сервера (так, время загрузки ресурсов из физически удаленных от расположения основного сервера мест значительно сократится). Эти преимущества использования CDN — разгрузка сервера, сокращение времени доставки контента, а также сокращение трафика, передаваемого основным сервером (который обычно дороже), привели к довольно широкому использованию подобного подхода. Сегодня разберемся, как работать с Amazon S3-совместимыми CDN и настраивать передачу сжатых файлов.

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

Не надо следовать JavaScript-трендам

Время на прочтение7 мин
Охват и читатели21K
Однажды, когда у вас выдался не самый светлый день, вы увидели новый твит о том, как пользоваться хуками React. Но по какой-то причине ваша компания или ваша команда ещё не перешли на хуки. Или, может быть, вы ими пользуетесь, но не таким способом, который можно было бы назвать «трендовым». Возможно, вы применяете Vue.js или Angular, но React-хуки лезут буквально отовсюду, вы видите сообщения о них так часто, что возникает такое ощущение, будто скоро о них «заговорит» даже микроволновка.

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

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


Обложка выдуманной книги: «Переписываем фронтенд каждые шесть недель»
Читать дальше →