• Ненормальный GraphQL в Electron или как я писал десктопный клиент для Tinder

    Предыстория


    фрустрация и решение


    Привет, Хабр. В начале зимы 2016 года я снова стал одинок. Спустя какое-то время я решил завести себе профиль в Tinder. Всё бы ничего, но постепенно стала накапливаться усталость из-за невозможности нормально печатать на физической клавиатуре. Мне виделось несколько решений этой проблемы:


    • Смириться и продолжать использовать официальное приложение для смартфона
    • Использовать BlueStacks с официальным приложением на Android
    • Использовать существующие клиенты для десктопа (Tinder++)
    • Написать свой

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

    Что из этого вышло
  • 4 вида утечек памяти в JavaScript и как с ними бороться

    • Перевод

    В этой статье мы рассмотрим распространённые виды утечек памяти в клиентском JavaScript. Также мы узнаем, как их обнаружить с помощью Chrome Development Tools.


    timeline в Chrome Dev Tools

    Читать дальше →
  • Пакет-географ – первая рабочая версия

      Прежде всего хотел бы поблагодарить за более, чем 80 звёзд на GitHub, которые мне дали читатели Хабра по результатам предыдущего поста. И это несмотря на то, что репозиторий был почти пустой, а ссылка была неочевидна. На лицо полезность этого пакета!


      Для тех, кто пропустил первый пост, маленькое повторение. Если у Вас в приложении есть что-то вроде:


      Читать дальше →
    • Руководство по работе с Redux

      • Перевод
      • Tutorial
      Сегодня Redux — это одно из наиболее интересных явлений мира JavaScript. Он выделяется из сотни библиотек и фреймворков тем, что грамотно решает множество разных вопросов путем введения простой и предсказуемой модели состояний, уклоне на функциональное программирование и неизменяемые данные, предоставления компактного API. Что ещё нужно для счастья? Redux — библиотека очень маленькая, и выучить её API не сложно. Но у многих людей происходит своеобразный разрыв шаблона — небольшое количество компонентов и добровольные ограничения чистых функций и неизменяемых данных могут показаться неоправданным принуждением. Каким именно образом работать в таких условиях?

      В этом руководстве мы рассмотрим создание с нуля full-stack приложения с использованием Redux и Immutable-js. Применив подход TDD, пройдём все этапы конструирования Node+Redux бэкенда и React+Redux фронтенда приложения. Помимо этого мы будем использовать такие инструменты, как ES6, Babel, Socket.io, Webpack и Mocha. Набор весьма любопытный, и вы мигом его освоите!
      Читать дальше →
    • Az.js: JavaScript-библиотека для обработки текстов на русском языке

        Как чуден и глубок русский курлык
        Генератор постов

        Обработка естественного языка (natural language processing, NLP) — тема, на мой взгляд, очень интересная. Во-первых, задачи тут чисто алгоритмические: на вход принимаем совершенно примитивный объект, строчку, а извлечь пытаемся вложенный в него смысл (ну или хотя бы частичку смысла). Во-вторых, необязательно быть профессиональным лингвистом, чтобы решать эти задачи: достаточно знать родной язык на более-менее приличном уровне и любить его.

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

        Бессвязность текстов в нынешней версии «Генератора» вызвана тем, что на самом деле никакого анализа он производить не умеет. Просто в одних случаях «предсказывает» продолжение предложения по собранным биграммам, а в других — заменяет в готовом предложении некоторые слова на другие, которые заканчиваются похоже. Вот и вся начинка.

        Конечно, хочется сделать что-нибудь поинтереснее. Беда в том, что модные сейчас нейросети не очень-то применимы здесь: им нужно много ресурсов, большую обучающую выборку, а в браузере у пользователя соцсети всего этого нет. Поэтому я решил изучить вопрос работы с текстами с помощью алгоритмов. К сожалению, готовых инструментов для работы с русским языком на JavaScript найти не удалось, и я решил сделать свой маленький велосипед.
        Читать дальше →
      • Панель управления databoom. Работа с коллекциями. Часть 1

        • Tutorial
        Привет Хабр! Мы продолжаем знакомить разработчиков с сервисом databoom.

        В этом видео мы расскажем Вам, как и зачем создавать коллекции в базе данных databoom, как присваивать им объекты, используя панель управления databoom.



        JSON файлы, используемые в видео, хранятся здесь: github.com/Databoom/pub-src

        Подробнее познакомиться с нашим сервисом и БЕСПЛАТНО зарегистрироваться можно на сайте databoom.space
      • Естественная анимация в интерфейсах

          \begin{tikzpicture}
\def\t{0}
\def\r{3.1415}
\begin{axis}[width=12cm,height=7cm,
    ticks=none,
    xmin=-0.5, xmax=3.8,
    axis y line=left,axis x line=bottom,
    xlabel=$t$,ylabel=$x$, 
every axis x label/.style={at={(current axis.south east)},anchor=south},
every axis y label/.style={at={(current axis.north west)},anchor=west},
enlargelimits=true,mark size=1
    ]
\addplot[smooth,blue,domain=\t:\r,samples=80] {1-cos(deg(x*3))};
\addplot[mark=*] coordinates {(\t,0)};
\addplot[mark=*] coordinates {(\r,2)};
\end{axis}
\end{tikzpicture}


          Рис. 0. КДПВ


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


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


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

          Читать дальше →
        • Лучшие бесплатные коллекции векторных иконок

            Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.

            Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах: @font-face, SVG, EPS, AI, PSD, Sketch.

            В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.

            Responsive Icons (100 иконок, PSD, AI, EPS, SVG)


            Responsive Icons

            Читать дальше →
          • Как я использую SVG-спрайты

            • Tutorial
            Привет, разработчик!
            При верстке макета из PSD часто иконки вставлены в формате SVG. А если нет — прошу их у дизайнера. Ранее я использовал иконочные шрифты, но недавно увидел преимущества спрайтов и решил попробовать с ними поиграться внедрить их в процесс разработки. Мне нравятся иконочные шрифты, но они имеют ряд недостатков(на эту тему почитайте CSSTricks). Эксперимент удался, и вот как я организовал систему.
            Читать дальше →
          • Возможности PostgreSQL, которых нет в MySQL, и наоборот



            Многие боятся переходить с «мускуля» на «посгрес» из-за того, что лишь смутно понимают, что это даст. Некоторых останавливает мысль, что наверно Postgres — это слишком сложная база и требует обучения. А также, что возможно чего-то придется лишиться в связи с переходом. Попробую немного прояснить ситуацию.
            Читать дальше →