Обновить
217.46

JavaScript *

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

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

Конструктор плейлистов для Spotify

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

Статья о том, как Spotify Web API (SWA) и платформа Google Apps Script (GAS) позволили превратить библиотеку в гибкий конструктор плейлистов с бесплатным исполнением по расписанию.

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

Читать далее

HackTheBox. Прохождение RopeTwo, часть 1. Chromium v8

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

Пора выложить первый райтап для машинки с площадки HackTheBox.

В данной статье разберемся с написанием RCE для патченного JavaScript-двжика v8, используемого сейчас почти повсеместно.

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

Читать далее

Приглашаем на DINS JS EVENING: разбираем Chrome DevTools и Cypress

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

На митапе Андрей Соколов из DINS расскажет, как разработчикам облегчить отладку с помощью Chrome DevTools. Константин Поздникин из Usetech покажет, как Cypress помогает бороться с багами в проектах со сложной бизнес-логикой. Во время прямого эфира вы сможете задать вопросы спикерам. Участие бесплатное, но нужно зарегистрироваться. Подробная программа и информация о спикерах — под катом. 

Читать далее

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

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

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

Лонгрид

CRUD для NMAP’а: решение для мониторинга открытых портов на хостах

Время на прочтение9 мин
Охват и читатели11K
Привет, Хабр! Меня зовут Рудаков Александр, я занимаюсь информационной безопасностью в компании "ЛАНИТ-Интеграция". Однажды, в рамках работы над проектом, мне понадобилось организовать небольшой непрерывный мониторинг (с хранением истории) открытых портов в подсети серверов. Требовалось за короткое время сделать рабочий прототип решения для данной задачи. В этой статье я расскажу о том, как с помощью nmap, Node.JS, PostgreSQL и ORM Sequelize организовать мониторинг открытых портов на хостах.

Источник 
Читать дальше →

Эффектное программирование. Часть 2: генераторы в полевых условиях

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

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

Эта статья также может быть полезна тем, кто хочет разобраться, как работает redux-saga.

Также я давно хотел познакомиться с Deno (альтернатива Node) и использовал его в качестве среды для запуска кода, так что примеры будут в этот раз на typescript.

Читать далее

OpenCart popup, модальные окна

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

Статья нашего сотрудника из его личного блога.

Разрабатывая модуль, в админке мне понадобилось использовать модальные окна OpenCart для вывода определенной информации, а так же для показа формы. Мой опыт frontend на тот момент был так себе, однако коллега подсказал что в OpenCart используется jquery (2.1.1), а у этой библиотеки есть поддержка popup окон. Но не все так просто …

Читать далее

Свободно стилизируемый outline DOM элементов

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

В последнее время всё чаще и чаще возникает вопрос о доступности, если раньше скрытие outline для элементов страницы было общим правилом, то теперь хороший сайт должен иметь outline у элементов, как минимум :focus-visible.
Основная проблема outline - это их стилизирование.

Я пришел к своему решению, которое изложено в этой статье.

Читать далее

Пакет валидации mobx form validation kit 2.0 (TypeScript / Flutter)

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

Предисловие


Почти полтора года назад мы выпустили первую версию библиотеки "Новый пакет валидаций для React на Mobx @quantumart/mobx-form-validation-kit"
Время шло, и библиотека корректировалась и не стояла на месте, да собственно, как и наше развитие в целом. Мы перешли на flutter, по пути попинав ReactNative, сделали еще несколько проектов. И новые задачи потребовали от нас новых и современных решений, в том числе и переработки mobx-form-validation-kit.
Сегодня я рад представить вам новую версию пакета mobx-form-validation-kit.
Для строго типизированного TypeScript
mobx-form-validation-kit 2.0
И переписанный вариант библиотеки под Flutter
flutter_mobx_form_validation_kit 2.0


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

Будущее JavaScript: декораторы

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


Доброго времени суток, друзья!

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

Впервые данное предложение прозвучало около 5 лет назад и с тех пор претерпело несколько значительных изменений. В настоящее время оно (по-прежнему) находится на второй стадии рассмотрения.

Если вы раньше не слышали о декораторах или хотите освежить свои знания, рекомендую ознакомиться со следующими статьями:


Итак, что такое декоратор? Декоратор (decorator) — это функция, вызываемая на элементе класса (поле или методе) или на самом классе в процессе его определения, оборачивающая или заменяющая элемент (или класс) новым значением (возвращаемым декоратором).

Декорированное поле класса обрабатывается как обертка из геттера/сеттера, позволяющая извлекать/присваивать (изменять) значение этому полю.

Декораторы также могут аннотировать элемент класса метаданными (metadata). Метаданные — это коллекция простых свойств объекта, добавленных декораторами. Они доступны как набор вложенных объектов в свойстве [Symbol.metadata].
Читать дальше →

Мой опыт разработки с использованием андроид устройства

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

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

Читать далее

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

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

Привет!

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

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

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

Что там за Taiga UI?

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

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

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

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

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

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

Читать далее

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №449 (4 — 10 января 2021)

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

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

Библиотека Frontend-разработчика, часть 3: Литература уровня «Middle» и выше

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

Явление деления разработчиков на уровни очень распространено. Даже в вакансиях чаще всего пишут не просто "Frontend-разработчик", а более развернуто - "Junior/Middle/Senior/${место для вашей должности} Frontend-разработчик". Для чего? С помощью такого деления легче делегировать задачи в команде. У каждого разработчика своя особая матрица компетенций, свои навыки, которые он оттачивал месяцами, а то и годами. С помощью такого деления процесс разработки ускоряется в разы.


Вообще на рынке (я смотрю на рынок стран СНГ) по состоянию на начало 2021 года среди Frontend-разработчиков имеют место быть такие должности (от низкого уровня, к наивысшему и без привязки к инструментам/библиотекам)

Ну, удиви

Компилируем Svelte в уме. Часть 1/3

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

В данном материале Tan Li Hau, один из мейнтейнеров фреймворка Svelte, в доступной форме рассказывает о том как работает компилятор Svelte и что скрывается под капотом когда мы пишем простейший компонент.

Читать далее

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

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



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

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

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

Мониторинг бизнес-процессов Camunda

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

Привет, Хабр.

Меня зовут Антон и я техлид в компании ДомКлик. Создаю и поддерживаю микросервисы позволяющие обмениваться данными инфраструктуре ДомКлик с внутренними сервисами Сбербанка.

Это продолжение цикла статей о нашем опыте использования движка для работы с диаграммами бизнес-процессов Camunda. Предыдущая статья была посвящена разработке плагина для Bitbucket позволяющего просматривать изменения BPMN-схем. Сегодня я расскажу о мониторинге проектов, в которых используется Camunda, как с помощью сторонних инструментов (в нашем случае это стек Elasticsearch из Kibana и Grafana), так и «родного» для Camunda — Cockpit. Опишу сложности, возникшие при использовании Cockpit, и наши решения.
Читать дальше →

React.js — формошлепство или работа с формами при помощи пользовательских хуков

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


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

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

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

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

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

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

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

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


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

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