• Веб-приложение на Node и Vue, часть 1: структура проекта, API, аутентификация

    • Перевод
    Перед вами — первый материал из серии, посвящённой разработке полноценного веб-приложения, которое называется Budget Manager. Основные программные средства, которые будут использованы в ходе работы над ним — это Node.js для сервера, Vue.js для фронтенда, и MongoDB в роли базы данных.



    Эти материалы рассчитаны на читателей, которые знакомы с JavaScript, имеют общее представление о Node.js, npm и MongoDB, и хотят изучить связку Node-Vue-MongoDB и сопутствующие технологии. Приложение будем писать с нуля, поэтому запаситесь любимым редактором кода. Для того, чтобы не усложнять проект, мы не будем пользоваться Vuex и постараемся сосредоточиться на самом главном, не отвлекаясь на второстепенные вещи.

    Автор этого материала, разработчик из Бразилии, говорит, что ему далеко до JavaScript-гуру, но он, находясь в поиске новых знаний, готов поделиться с другими тем, что ему удалось найти.
    Читать дальше →
    • +21
    • 45,2k
    • 3
  • Ненормальный GraphQL в Electron или как я писал десктопный клиент для Tinder

    Предыстория


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


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


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

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

    Что из этого вышло
  • Метеостанция Ласточка

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


    Читать дальше →
  • Глупый дом

      Краткое предисловие



      TLDR: переходите сразу к заключению!

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

      Многословное введение



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

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

      и всего одна картинка
    • 4 вида утечек памяти в JavaScript и как с ними бороться

      • Перевод

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


      timeline в Chrome Dev Tools

      Читать дальше →
    • Снятие показаний счетчиков воды: ESP8266 + Android

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

        Прежде всего хотел бы поблагодарить за более, чем 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 — это слишком сложная база и требует обучения. А также, что возможно чего-то придется лишиться в связи с переходом. Попробую немного прояснить ситуацию.
              Читать дальше →
            • Считаем рабочие дни с Moment.js

                Несколько месяцев назад я опубликовал плагин к Moment.js позволяющий рассчитать: сколько это N рабочих дней от сегодня в календарных днях? какая дата будет спустя N рабочих дней от заданной даты? сколько рабочих дней в заданном диапазоне? Возможность сконфигурировать рабочие дни и исключения в виде праздников — имеется.

                Плагин можно найти на github: https://github.com/andruhon/moment-weekday-calc

                Плагин можно установить через bower и npm:
                bower install moment-weekday-calc
                

                npm install moment-weekday-calc
                

                Плагин добавляет несколько функций в Moment.js:
                • int weekdayCalc — считает сколько «рабочих» дней в заданном диапазоне
                • date addWorkdays — находит дату спустя N «рабочих» (пн-пт) дней
                • int workdaysToCalendarDays — конвертирует рабочие дни в календарные
                • date addWeekdaysFromSet — добавляет дни из заданного множества к заданной дате
                • int weekdaysFromSetToCalendarDays — конвертирует дни из заданного множетсва в календартные дни

                Каждая из функций доступна с префиксом iso, такие функции используют множество рабочих дней начинающееся с понедельника (1-7), функции без префикса используют американский формат начинающийся с воскресенья (0-6).

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

                Читать дальше →
              • Распознавание кириллической Яндекс капчи

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

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

                  Итак, мы имеем такую капчу:

                  imageimageimage
                  Читать дальше →
                • Чат-помощник на сайт с помощью Telegram за 15 минут



                  Про чаты-помощники


                  Многие люди продают через интернет товары и услуги. Еще больше людей — покупает что-то через интернет.
                  Во время выбора покупок, часто возникают вопросы, которые можно решить позвонив и пообщавшись с менеджером.
                  Скорее всего я — не единственный человек на хабре, который общению с менеджерами по телефону предпочитает переписку.
                  И тут на помощь приходят всплывающие чаты-помощники, которые вроде-как повышают конверсию, но многих нервируют.
                  (Для тех, кто не в курсе: в углу сайта всплывает окошко, в котором можно он-лайн переписываться с консультантом).

                  Есть с десяток подобных сервисов и все они работают по принципу "пробная версия бесплатно, а дальше за деньги".
                  На хабре есть несколько статей, вот одна из них (http://habrahabr.ru/company/tuthost/blog/165365/), но, я уверен, аудитория Хабрахабра знает о чем речь.
                  Большинству людей подойдет бесплатный вариант любого такого сервиса: нужно всего-навсего зарегистрироваться и вставить на сайт кусок JS кода. Для тех у кого много менеджеров — придется платить: например Редхелпер на 10 операторов обойдется Вам:
                  115200 руб. за 1 год



                  Скорее всего — цена адекватная для тех, кто платит зарплату десяти менеджерам.

                  Но я решил изобрести бесплатный «велосипед» из подручных материалов.
                  Запуск у себя на сервере займет 15 минут. Всем, кому идея интересна — прошу под кат.
                  Читать дальше →
                • Эффективное изменение размера картинок при помощи ImageMagick

                  • Перевод
                  В наше время всё чаще сайты сталкиваются с необходимостью введения отзывчивого дизайна и отзывчивых картинок – а в связи с этим есть необходимость эффективного изменения размера всех картинок. Система должна работать так, чтобы каждому пользователю по запросу отправлялась картинка нужного размера – маленькие для пользователей с небольшими экранами, большие – для больших экранов.

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

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

                  Большие картинки == большие проблемы


                  Средняя веб-страница весит 2 Мб, из них 2/3 – картинки. Миллионы людей ходят в интернет через 3G, или ещё хуже. 2Мб-сайты в этих случаях работают ужасно. Даже на быстром соединении такие сайты могут израсходовать лимиты трафика. Работа веб-дизайнеров и разработчиков – упростить и улучшить жизнь пользователя.

                  image

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

                  ImageMagick


                  Утилита командной строки с 25-летним стажем в то же время является редактором картинок с полным набором функций. В ней огромная куча функций, и среди них – быстрое и автоматическое изменение размера картинок. Но с настройками по умолчанию файлы часто получаются излишне большими – иногда по объёму больше оригинала, хотя в них и меньше пикселей. Сейчас я объясню, в чём проблема, и покажу, какие настройки необходимы для её решения.
                  Читать дальше →
                • Как заменить однородный фон прозрачным с помощью Imagemagick

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

                    Часто такая фича нужна для фотографий товаров в интернет-магазине, картинок, которые накладываются на корпоративный фон и других фоток, не портящих дизайн сайта. Вырезать каждую фотку вручную фотошопом довольно грустно, но есть php-методы, с помощью которых это можно «поставить на поток».
                    image
                    Читать дальше →
                    • +18
                    • 22,5k
                    • 9
                  • «Её» или ещё один ёфикатор

                      Не так давно в рабочей рассылке обсуждалась тема использования буквы «ё» в документации и постах.
                      Обсуждение затянулось на несколько месяцев…

                      Осознав важность проблемы, написал ёфикатор на Node.js.
                      Читать дальше →