Обновить
192.11

JavaScript *

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

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

Taiga UI — библиотека компонентов под Angular, которую вам стоит попробовать

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

Привет!

Саша Инкин и я регулярно пишем на Хабр статьи по Angular. Почти все они основаны на нашем опыте разработки большой библиотеки компонентов.

Эту библиотеку мы развиваем, перерабатываем и дополняем уже несколько лет, а свои идеи проверяем на нескольких десятках проектов Тинькофф Бизнеса и внутренних систем компании. Мы рады сообщить: выложили нашу библиотеку в открытый доступ!

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

Что там за Taiga UI?

Фронтендеры — герои. Yehuda Katz объясняет почему

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

Идея что фронтенд это "для джунов", расстраивает меня тем, что никто не скажет так про другие специализации.

Кто-то может сказать, что неплохо, если б автор компилятора был более "фуллстековым".

Но они не скажут, что "писать компиляторы это для джунов".

Это перевод треда Yehuda Katz из твиттера. Под фронтендом здесь подразумеваются именно браузерные приложения на JS (и, отчасти, вся JS-экосистема).

Читать далее

Разработка PWA с поддержкой распознавания лица и голоса

Время на прочтение11 мин
Количество просмотров11K
Этот материал посвящён продвинутым возможностям PWA (Progressive Web Application, прогрессивное веб-приложение), основанным на некоторых современных API. А именно, здесь мы поговорим о разработке веб-проекта, поддерживающего распознавание лица и голоса. Тем, что раньше было доступно только в обычных приложениях, теперь можно воспользоваться и в PWA. Это открывает веб-разработчикам множество новых возможностей.



Приложение, о котором пойдёт речь, основано на PWA, разработка которого подробно описана в этом материале. Здесь мы уделим основное внимание следующим двум API:

  • Face Detection API, который предназначен для реализации возможностей по распознаванию лица в браузере.
  • Web Speech API, который позволяет преобразовывать речь в текст и «озвучивать» обычные тексты.

Мы добавим поддержку этих API в существующее PWA и оснастим его функционалом создания «селфи». Благодаря возможностям по распознаванию лица приложение сможет выяснить эмоциональное состояние, пол и возраст того, кто делает «селфи». А снабдить снимок подписью можно будет, воспользовавшись Web Speech API.
Читать дальше →

Пугающие эксперименты с PDF: запускаем «Арканоид» в документе

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

Подробнее об этом хаке и особенностях его работы можно узнать из доклада на !!con 2020 «Playing Breakout… inside a PDF!!»

Если вы его не смотрели, то попробуйте открыть файл breakout.pdf в Chrome.

Как и многие из вас, я всегда считал PDF довольно безопасным форматом: автор создаёт текст и графику, после чего он открывается в программе просмотра PDF, больше ничего не делая. Несколько лет назад я мимоходом слышал об уязвимостях Adobe Reader, но особо не задумывался о том, как они могут возникать.

Изначально Adobe сделала PDF именно для этого, но мы уже выяснили, что сегодня это совсем не так. В 1310-страничной спецификации PDF (на самом деле довольно понятном и интересном чтиве) описывается безумное количество возможностей, в том числе:


но самое интересное для нас…

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

Поиск замены депозита в облигациях с учетом того, что с 1 января 2021 года все выплаты облагаются налогами

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

Полгода назад, летом 2020 года я написал скрипт поиска ликвидных облигаций на Мосбирже (статья в закладках у 194 человек, рейтинг +45). Скрипт нужен для поиска облигаций, которые можно купить прямо сейчас с доходностью гораздо выше банковского вклада.

Сейчас, в начале 2021 года модифицировал прошлогодний скрипт, потому что проценты по вкладам так и остаются на очень низких уровнях, а с началом 2021 года ещё и изменения в налоговом кодексе РФ подоспели. 

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

Облигации как замена вклада в 2021 году

Botsman: новая платформа для разработки Telegram-ботов

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

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

Для тех же, кому уже захотелось ознакомиться с Botsman (но не очень хочется много читать) — вот ссылка, милости прошу: https://bots.mn/. Главное, о чём стоит помнить — платформа только-только запустилась, и (пока что) не стоит переносить на неё что-то серьёзное и масштабное.

Читать далее

Устали от глупых шуток о JS? Напишите свою библиотеку

Время на прочтение17 мин
Количество просмотров24K
В JavaScript есть немало моментов, вызывающих вопрос «Чего???». Несмотря на то что у большинства из них есть логическое объяснение, если вы вникнете, они всё равно могут удивлять. Но JavaScript точно не заслуживает возмутительных шуток. Например, иногда мы видим такие шутки:


В этом случае критика абсолютно не заслужена. Давайте разбираться почему.
Продолжить

Делаем схему выбора мест в кинозале на React: о canvas, красивом дизайне и оптимизации

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

В богатой экосистеме Тинькофф есть лайфстайл-сервисы. Купить билеты на различные мероприятия - в кино, театры, на концерты, спортивные события можно на https://www.tinkoff.ru/entertainment/, а также в мобильном приложении.

Меня зовут Вадим и я расскажу вам, как мы это делали в команде Развлечений в Тинькофф Банке.

Читать далее

Что нужно знать о популярных JS-фреймворках

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

Привет! Меня зовут Дима Чудинов, я наставник на веб-факультете Яндекс.Практикума, Head of Group, Front-end, ABBYY.


Студенты недавно задали мне вопрос: «Что лучше: Angular или React?». Я начал отвечать и понял, что мне понадобится для этого статья. Позже я понял, что и одной статьи не хватит.


О том, какой фреймворк выбрать, я расскажу в другой раз. А в этой статье опишу историю создания фреймворков и их особенности. Выбрать рабочий инструмент статья не поможет. Зато поможет вести споры с другими разработчиками на кухне (если не будет карантина) и в сети. Статья будет полезна новичкам, которые только начинают своё знакомство с фреймворками и библиотеками, и поможет взглянуть на «зоопарк» веб-технологий сверху.


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

JavaScript исполнилось 25 лет

Время на прочтение9 мин
Количество просмотров5.1K
4 декабря 2020 года JavaScript исполнилось 25 лет. Автор материала, перевод которого мы сегодня публикуем, Даниэль Адамс, говорит, что этот язык повлиял на её карьеру, а так же — на профессиональную деятельность многих программистов. JavaScript повлиял и на то, как обычные люди со всего мира пользуются веб-сайтами. Даниэль предлагает отпраздновать 25-летие JavaScript, вспомнив о 25 заметных событиях, которые сделали экосистему, сложившуюся вокруг этого языка, такой, какой она стала в наши дни.


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

Модули в JavaScript

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


Фронтенд-разработчики каждый день используют модули. Это может быть функция из локального файла или сторонняя библиотека из node_modules. Сегодня я кратко расскажу об основных модульных системах в JavaScript и некоторых нюансах их использования.

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

Использование Effector в стеке React + TypeScript

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

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

Читать далее

Производительность TypeScript

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

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

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

n8n. Автоматизация ИБ со вкусом смузи

Время на прочтение13 мин
Количество просмотров66K
Всем давно очевидна польза тотальной автоматизации, в том числе, и в области информационной безопасности. В условиях большого кадрового дефицита как никогда актуальна идея снятия рутинной рабочей нагрузки как со специалиста по информационной безопасности, так и со специалистов в других областях. 

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

Источник

TL;DR: Telegram, REST API, Shodan, DNS-over-HTTPS. Пишем бота в Telegram  для парсинга инфы с shodan и поиска эксплойтов на exploit-db. Находим баг в работе n8n. 

Ответ есть – добро пожаловать во фронтенд со смузи и гироскутерами
Читать дальше →

Осциллограф в браузере

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

Отрисовка графиков в реальном времени




Одно время я работал в компании, которая разрабатывала бесконтактные датчики, как на фото. И при установке этих датчиков, надо было правильно сориентировать антенну (белая штука на фото). И выглядело это так: один человек на объекте, где-то в Сибири, на морозе крутит антенну, а другой в Питере, в офисе, не видит того человека, но видит графики на мониторе. И вот они как слепой с глухим пытаются поставить антенну, один по графикам, по телефону говорит, что надо антенну повернуть, а другой пытается понять в какую сторону её крутить. Звучит как бред, правда? Но так и было.

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

Как и почему Яндекс переехал с собственного npm-репозитория на Verdaccio

Время на прочтение9 мин
Количество просмотров11K
Всем привет. Меня зовут Андрей Фримучков, я работаю в команде инфраструктуры разработки интерфейсов Яндекса. Последние несколько месяцев участвовал в запуске нового хранилища пакетов. Около года назад мы упёрлись в ограничения собственного решения и после череды экспериментов пришли к выводу, что дальше масштабироваться под растущие нагрузки не получится.

Нужно было искать что-то новое. Выбор пал на опенсорсное решение под названием Verdaccio. Это может показаться странным, потому что им чаще пользуются небольшие компании. Скажу честно, настроить работу оптимально и внести необходимые доработки было непросто, но интересно. И стоило того. А теперь — обо всём по порядку.

Как пакеты хранились раньше?


Хорошая практика при разработке на JS — хранить внутренние пакеты в собственном репозитории и сохранять копии внешних пакетов. Это снижает зависимость от внешнего npm и позволяет ограничить выходы во внешнюю сеть в системах сборки. Исторически Яндекс использовал своё решение для хранения внутренних пакетов. Долгое время оно всех устраивало, но компания росла. Росли нагрузки, репозиторий стало сложно масштабировать и поддерживать. Например, при регламентных работах в датацентрах приходилось вручную переключать мастер у CouchDB. Схема выглядела следующим образом:


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

Декларативный подход в Angular

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

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

Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.

Узнать, к чему это я

Quasar — швейцарский нож для Vue

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


Некоторое время назад (года два с половиной) чувак по имени Razvan Stoenescu собрал команду Vue-разрабов и начал пилить с ними свой фреймворк. Свечку не держал, но я твёрдо уверен что в первоначальном документе было что-то типа «Хотим свой фреймворк, чтобы в нём было вообще всё. Включая блэкджек и куртизанок». Довольно странно, что во многих материалах за прошедший год упоминается Quasar, но статья про него вышла всего одна и была приурочена к релизу 1.0, да ещё и оказалась переводом. Недавно я наконец распробовал этот чудесный фреймворк и с удовольствием поделюсь своими впечатлениями о нём.

Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда

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


Приветствую всех! Меня зовут Пучнина Анастасия, я ведущий разработчик в компании ДомКлик, занимаюсь фронтендом Витрины объявлений. Сегодня я хотела бы поделиться с вами своим мнением на тему того, что важно знать фронтенд-разработчику. Эта статья будет полезна тем, кто только начинает свой путь в разработке, или имеет опыт программирования в другой области и решил перейти на сторону фронтенда.

Содержание:

  1. Кто такой фронтендер и чем он занимается?
  2. С чего начать и что читать? Чек-лист обучения
  3. Какие трудности могут быть? Ошибки в начале пути
  4. Подготовка к собеседованию на Junior-разработчика

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

Как привести проект в чувство

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


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

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

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