В данной заметке по шагам расскажу как приготовить IndexDB (база данных, которая встроена в любой современный браузер) для использования в проектах, написанных на ReactJS. В результате Вы сможете использовать данные из IndexDB так же удобно, как если бы они находились в Redux Store вашего приложения.

IndexDB — это документоориентированная СУБД, удобное средство для временного хранения относительно небольшого объёма (единицы и десятки мегабайт) структуированных данных на стороне браузера. К стандартной задаче, для которых мне приходится использовать IndexDB относится кэширование данных бизнес-справочников на стороне клиента (названия стран, городов, валют по коду и прочее). Скопировав их на сторону клиента потом можно лишь изредка загружать с сервера обновления этих справочников (либо целиком — они же небольшие) и не делать это при каждом открытии окна браузера.

Добрый день.
Сегодня я хочу рассказать о новом пакете для асинхронных валидаций в проектах использующих в своей основе React, Mobx и написанных на Typescript.
Современная Frontend разработка предполагает большое количество логики при заполнении страниц с документами, анкет и документов на кредит, платежных поручений, страниц регистраций на сайте. Основная логическая нагрузка приходиться на валидационные проверки. Разработчики Angular продумали этот момент и предлагают разработчикам для этих целей использовать встроенных механизм FormControl-ов, что, хоть имеет ряд своих недостатков, но всё же лучшем чем полное отсутствие подобного решения на React. Ситуация усложняется еще тем, что современный тренд React разработки предполагает использовать mobx для организации бизнес-логики.
Столкнувшись с этими проблемами мы решили всех их с помощью написания пакета: @quantumart/mobx-form-validation-kit

Плюсы пакета:

• Полностью на TypeScript
• Совместимость с Mobx (версии 4, который поддерживает, всеми любимый, IE10)
• Рассчитан на работу в React (можно использовать в проектах и без react)
• Рассчитан на асинхронные валидации
• Легко встроить в существующий проект.

Инструкция по работы с пакетом под катом.

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

Наблюдение за изменением состояния в базе данных, мониторинг размера очередей, телеметрия с удаленных серверов, запуск деплой скриптов и получение нотификации по завершению — конфигурируется за минуту простым YAML файлом.

Код доступен на гитхабе. Инструкции по установке — для Linux, macOS и (экспериментально) Windows.

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

TL;DR: базовая логика redux помещается в 7 строк JS кода.

О redux вкратце (вольный перевод заголовка на гитхабе):

Redux — библиотека управления состоянием для приложений, написанных на JavaScript.

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

Я склонировал репозиторий redux, открыл в редакторе папку с исходниками (игнорируя docs, examples и прочее) и взялся за ножницы клавишу Delete:

• Удалил все комментарии из кода
  Каждый метод библиотеки задокументирован с помощью JSDoc весьма подробно
  
• Убрал валидацию и логирование ошибок
  В каждом методе жёстко контролируются входные параметры с выведением очень приятных глазу подробных комментариев в консоль
  
• Убрал методы bindActionCreators, subscribe, replaceReducer и observable.
  
  … потому что мог. Ну или потому что поленился писать для них примеры. Но без корнер-кейсов они ещё менее интересны, чем то, что ждёт вас впереди.
  

А теперь давайте разберём то, что осталось

Наверное, вы слышали про технологию Яндекса DeepHD, с помощью которой они как-то раз улучшили качество советских мультфильмов. Увы, в публичном доступе ее еще нет, а у нас, рядовых программистов, вряд ли найдутся силы написать свое решение. Но лично мне, как обладателю Retina-дисплея (2880х1800), недавно очень захотелось посмотреть «Рика и Морти». Какого же было мое разочарование, когда я увидел, как мыльно на этом экране выглядит 1080р, в котором существуют оригиналы этого мультсериала! (это прекрасное качество и обычно его вполне достаточно, но поверьте, ретина так устроена, что анимация с ее четкими линиями в 1080р выглядит мыльновато, словно 480р на FHD-мониторе)

Я твердо решил, что хочу увидеть этот мультсериал в 4К, хотя и совершенно не умею писать нейросети. Однако решение было найдено! Любопытно, что нам даже не придется писать код, понадобится лишь ~100 ГБ места на диске и немного терпения. А результат — четкое изображение в 4К, которые выглядит достойнее, чем любая интерполяция.

Захожу на кухню, а на столе сидит маленький гномик и вертит в руках перочинный нож. Я что-то говорю гномику, он недовольно сплевывает вбок, нехотя поднимается и отрезает кусок от огромной сосиски, которая лежит на столе. Так я запомнил метод массива splice. Главная идея «Дворца Памяти» — придумать образ, который просто невозможно забыть, и прикрепить его в воображении к реальному месту, которое хорошо знаешь.

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

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

Привет. 24–25 сентября в Москве прошла конференция фронтенд-разработчиков HolyJs https://holyjs-moscow.ru/. Мы на конференцию пришли со своим стендом, на котором проводили quiz. Был основной квиз — 4 отборочных тура и 1 финальный, на котором были разыграны Apple Watch и конструкторы лего. И отдельно мы провели квиз на знание react.

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

Поехали!

Уже из названия понятно, что headless-браузер — это нечто без головы. В контексте фронтенда — это незаменимый инструмент разработчика, с помощью которого можно тестировать код, проверять качество и соответствие верстке. Виталий Слободин на Frontend Conf решил, что необходимо познакомиться с устройством этого инструмента поближе.

Под катом компоненты и особенности работы Headless Chrome, интересные сценарии использования Headless Chrome. Вторая часть про Puppeteer — удобную Node.js-библиотеку для управления Headless-режимом в Google Chrome и Chromium.


О спикере: Виталий Слободин — бывший разработчик PhantomJS — тот, кто закрыл его и похоронил. Иногда помогает Константину Токареву ( annulen) в «воскрешенной» версии QtWebKit — том самом QtWebKit, где есть поддержка ES6, Flexbox и многие других современных стандартов.

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

Недавно я познакомился с замечательной серией статей "Thinking in Ramda", которые проясняют на простых и ясных примерах способы написания кода в функциональном стиле с использованием библиотеки Ramda. Эти статьи показались мне настолько прекрасными, что я не смог удержаться от того, чтобы не перевести их на русский язык. Надеюсь, что в этом будет польза для многих людей :) Давайте начнём перевод с первой вступительной статьи.

1. Первые шаги
2. Сочетаем функции
3. Частичное применение (каррирование)
4. Декларативное программирование
5. Бесточечная нотация
6. Неизменяемость и объекты
7. Неизменяемость и массивы
8. Линзы
9. Заключение

Данный пост — это начало серии статей «Мышление в стиле Ramda» о функциональном программировании.

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

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

В 2020 году библиотека Natasha значительно обновилась, на Хабре опубликована статья про актуальную версию. Чтобы использовать инструменты, описанные в этом тексте, установите старую версию библиотеки pip install natasha<1 yargy<0.13.

Раздел про Yargy-парсер актуален и сейчас.

Есть стандартная задача извлечения именованных сущностей из текста (NER). На входе текст, на выходе структурированные, нормализованные объекты, например, с именами, адресами, датами:



Задача старая и хорошо изученная, для английского языка существует масса коммерческих и открытых решений: Spacy, Stanford NER, OpenNLP, NLTK, MITIE, Google Natural Language API, ParallelDots, Aylien, Rosette, TextRazor. Для русского тоже есть хорошие решения, но они в основном закрытые: DaData, Pullenti, Abbyy Infoextractor, Dictum, Eureka, Promt, RCO, AOT, Ahunter. Из открытого мне известен только Томита-парсер и свежий Deepmipt NER.

Я занимаюсь анализом данных, задача обработки текстов одна из самых частых. На практике оказывается, что, например, извлечь имена из русского текста совсем непросто. Есть готовое решение в Томита-парсере, но там неудобная интеграция с Python. Недавно появилось решение от ребят из iPavlov, но там имена не приводятся к нормальной форме. Для извлечения, например, адресов («ул. 8 Марта, д.4», «Ленинский проезд, 15») открытых решений мне не известно, есть pypostal, но он чтобы парсить адреса, а не искать их в тексте. C нестандартными задачами типа извлечения ссылок на нормативные акты («ст. 11 ГК РФ», «п. 1 ст. 6 Закона № 122-ФЗ») вообще непонятно, что делать.

Год назад Дима Веселов начал проект Natasha. С тех пор код был значительно доработан. Natasha была использована в нескольких крупных проектах. Сейчас мы готовы рассказать о ней пользователям Хабра.

Natasha — это аналог Томита-парсера для Python (Yargy-парсер) плюс набор готовых правил для извлечения имён, адресов, дат, сумм денег и других сущностей.

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

Полнотекстовый поиск даёт возможность искать документы по текстовому содержимому. Такая необходимость может возникнуть, когда система содержит много текстовых сущностей, а пользователям требуется учитывать эти данные во время поиска. Мы столкнулись с подобной ситуацией при разработке решения для документооборота*. Данные системы хранятся в MS SQL Server или PostgreSQL, а гибкий атрибутивный поиск позволяет находить документы по различной мета-информации. Однако со временем этого стало недостаточно. Перед нами встала задача: научиться искать документы по текстовым свойствам и приложенным файлам.

Привет, харб! Примерно год назад я выкладывал статью о том, как я в прямом эфире создал выживалку за 150 часов. На этот раз хочу представить вам сетевой шутер, который я создал за 25 заходов по 3 — 4 часа. Всего вышло около 90 часов и в итоге мы создали онлайн шутер, в который сыграли вместе со зрителями.



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

Несмотря на чистое время, данный проект занял примерно 10 месяцев. Я делал большие перерывы в стримах, но тем не менее, закончил разработку и теперь он доступен всем бесплатно и без смс.
Если вас интересуют подробности, записи стримов, исходники или билд игры с сервером в комплекте, предлагаю прочитать дальше под катом!

Часть 2. Больше про сетевые протоколы и перемещение пакетов

С 2014 по 2016 годы у меня на работе произошло много всего, но главным кошмаром стал Slack. Менеджерам он понравился, потому что «всё излагается в письменном виде», «повышается доступность сотрудников» и «быстро публикуются ответы на вопросы». Я считаю, что он разрушает способность команды думать, планировать и выполнять сложную работу.

Прерывания работы

Slack помогает вашим худшим сотрудникам подавить лучших. В этом его сходство с офисом открытого типа.

Он превращает в норму постоянные прерывания, многозадачность и отвлечения, косвенно допуская всё это в офлайне и онлайне. Он делает нормой безумно быстро отвечать на вопросы. В мире Slack люди переходят от прямого вопроса к person до обращения here за несколько минут. И правильно: ведь тут если на вопрос не ответили в течение 5 минут, то о нём вообще забывают.

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

Всем привет! Я заметил, что на Хабре очень мало информации про такой сервер сборки, как ConcourseCI. Я решил восполнить этот пробел и написать небольшое введение. Под катом описание этого инструмента и небольшой туториал.

Перевод статьи Christopher Pitt.

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

Однако, в некоторых ситуациях, мы можем столкнуться с проблемами нехватки оперативной памяти — например, пытаясь запустить композер на маленьком VPS, или при открытии большого файла на сервере не богатом ресурсами.

Последняя проблема и будет рассмотрена в этом уроке.

Прошло довольно много времени с момента нашей последней статьи об эффективной Selenium-инфраструктуре. Если вы находитесь в самом начале непростого пути Selenium — советую ознакомиться с нашими статьями про масштабируемый Selenium (часть I, часть II), Selenoid — универсальный инструмент для автоматизации тестов в браузерах (раз, два), Selenium под Windows (ссылка). Если вам больше нравятся мотивирующие рассказы — посмотрите видео моего доклада про масштабируемый Selenium на SeleniumConf Berlin 2017.

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

Мы уже рассмотрели механизм индексирования PostgreSQL, интерфейс методов доступа и все основные методы доступа, как то: хеш-индексы, B-деревья, GiST, SP-GiST и GIN. А в этой части посмотрим на превращение джина в ром.

RUM

Хоть авторы и утверждают, что джин — могущественный дух, но тема напитков все-таки победила: GIN следующего поколения назвали RUM.

Этот метод доступа развивает идею, заложенную в GIN, и позволяет выполнять полнотекстовый поиск еще быстрее. Это единственный метод в этой серии статей, который не входит в стандартную поставку PostgreSQL и является сторонним расширением. Есть несколько вариантов его установки:

• Взять пакет yum или apt из репозитория PGDG. Например, если вы ставили PostgreSQL из пакета postgresql-10, то поставьте еще postgresql-10-rum.
• Самостоятельно собрать и установить из исходных кодов на github (инструкция там же).
• Пользоваться в составе Postgres Pro Enterprise (или хотя бы читать оттуда документацию).

Ограничения GIN

Какие ограничения индекса GIN позволяет преодолеть RUM?

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

Во-вторых, поисковые системы обычно возвращают результаты в порядке релевантности (что бы это ни означало). Для этого можно пользоваться функциями ранжирования ts_rank и ts_rank_cd, но их приходится вычислять для каждой строки результата, что, конечно, медленно.

Метод доступа RUM в первом приближении можно рассматривать как GIN, в который добавлена позиционная информация, и который поддерживает выдачу результата в нужном порядке (аналогично тому, как GiST умеет выдавать ближайших соседей). Пойдем по порядку.

Привет!

Для тех, кто пользуется Google Таблицами, есть хорошая новость — ниже описано решение, которое позволит импортировать данные из таблицы на ваш сайт.

Поехали.

1. Открываем Таблицу Google

Для примера, я возьму таблицу, в которую падают результаты из Google Формы.