• Антистресс-маска

    image

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

    На данный момент было найдено два популярных решения:

    1. jQuery.Inputmask
    2. jQuery-Mask-Plugin

    Те, кто пытался использовать маски в своих и без того непростых проектах, скорее всего были бы рады выбросить все это дело и использовать просто валидацию. Особенно если маска должна быть динамической, зависеть от уже введенных символов, нужна возможность получать размаскированное значение даже если пользователь ввел его не целиком, или нужно полностью скрыть placeholder… Что работало в одной библиотеке — не работало в другой, как только извращаться не приходилось. Уж проще самому написать, в конце то концов, программисты мы или кто!? Да и коллеги тоже не потерялись, написали под Android же.

    Кому не терпится, вот оно: imaskjs.
    Поломать демку можно здесь.
    Читать дальше →
  • Оптимизация фронтенда под браузеры

    • Translation

    enter image description here


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


    • С точки зрения User Experience (UX) фронтенд должен обеспечивать быструю загрузку и работу веб-страниц.
    • А с точки зрения Developer Experience (DX) нам хочется, чтобы и сам фронтенд тоже работал быстро, был прост в использовании и вообще являлся примером для подражания.

    Всё это делает пользователей и разработчиков счастливее, а заодно существенно улучшает ранжирование сайтов поисковиками. Например, Google уделяет особое внимание оптимизированности фронтенда. Если вы достаточно долго бились над тем, чтобы ваш сайт заработал побольше баллов в Google Pagespeed Insights, то, надеемся, эта статья поможет вам лучше понять, для чего всё это нужно и каково разнообразие стратегий оптимизации фронтенда.

    Читать дальше →
    • +44
    • 46.2k
    • 6
  • JavaScript-тренды, на которые стоит обратить внимание в 2017-м

    • Translation
    image

    Я решил написать этот материал после того, как увидел твит Дэна Абрамова, за который хочу сказать ему огромное спасибо. Дэн задал своим подписчикам вопрос о самых интересных событиях в мире JavaScript, которые достойны внимания широкой общественности.


    Любители JS на вопрос откликнулись, под твитом собралась целая гора ответов. Каждый говорил о том, на что, по его мнению, стоит обратить внимание в 2017-м году. В результате получилась весьма занимательная подборка, из которой я выбрал всё лучшее и добавил пояснения.
    Читать дальше →
  • 7 советов начинающему ИП, чтобы избежать проблем (что-то вы точно из этого не знаете)



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


      А для тех, кто открыл ООО, мы подготовили: 10 вещей, которые обязательно нужно сделать после регистрации ООО
      Читать дальше →
    • How to ReactJS

      • Translation
      • Tutorial
      Для новичка, экосистема вокруг React (как и фронтэнда в целом) может показаться запутанной. Этому есть несколько причин.

      • Изначально, React был нацелен на экспертов и ранних последователей
      • Facebook открывает исходный код только тех продуктов, которые использует сам, т. е. не нацеленные на проекты-меньше-чем-Facebook
      • Огромное количество гайдов по React совершенно разной сложности


      Здесь и далее, я предполагаю, что вы уже знакомы с HTML, CSS и JavaScript.

      Читать дальше →
    • Прогрессивная загрузка web-приложения с помощью разделения кода

        В этой статье мы рассмотрим как можно ускорить первоночальную загрузку web-приложения c помощью разделения кода (code splitting). Для реализации задуманного я буду использовать webpack v1, а для демонстрации — React (не обязателен).

        В большинстве своих проектов я собираю все javascript файлы (а иногда css и картинки тоже) в ОДИН ОЧЕНЬ БОЛЬШОЙ bundle.js. Возможно ты, дорогой читатель, делаешь точно так же. Это достаточно стандартная практика для современных веб-приложений.

        Но этот подход имеет один (и иногда достаточно важный) недостаток: первоночальная загрузка приложения может занимать очень долгое время, так как web-браузер должен (1) загрузить огромный файл и (2) распарсить тонну js-кода. Загрузка файла может занять долгое время, если у пользователя медленный интернет. Так же этот огромный файл может содержать код компонентов, которые пользователь НИКОГДА не увидит (например, пользователь просто не откроет некоторые части вашего приложения).

        Что делать?
        Читать дальше →
      • Конец эры глобального CSS

        Все CSS-селекторы живут в глобальной области видимости.

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

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

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

        Так не должно быть. Пора оставить позади эру глобальных стилей. Наступило время закрытого CSS.
        Читать дальше →
      • Тестирование JS. Кармический Webpack

          image

          Привет!

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

          В этой статье хочу поделиться опытом смешивания гремучей смеси webpack + jasmine + chai + karma.
          Читать дальше →
        • webpack: 7 бед — один ответ

          После моего недавнего выступления на MoscowJS #17 с одноимённым докладом у многих возник интерес к этому инструменту. В рамках 11-го выпуска RadioJS, Миша Башкиров bashmish рассказал, что решился попробовать его в своём новом проекте, об успешном опыте и множестве положительных эмоций. Но были озвучены вопросы и возникла дискуссия, в результате которой я решил написать эту статью, чтобы раскрыть основные тезисы с доклада и рассказать о том, что тогда не успел.
          Статья ориентирована, как на профессионалов, так и на тех, кто с похожими технологиями ещё не сталкивался.
          Итак, начнём.
          Читать дальше →
        • Webpack для Single Page App

            Привет!





            Отгремели фанфары, прошел звон в ушах от истязаний «евангелистов», модников в сфере фронтенд разработки. Кто-то ушел на sprockets, кто-то пустился во все тяжкие и стал писать свои велосипеды или расширять функционал gulp или grunt. Но статей по поводу популярных инструментов автоматизации процесса сборки – стало существенно меньше и это факт! Пора бы заполнить освободившееся пространство чем-то существенно иным.

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

            Читать дальше →
          • Elixir в биоинформатике



            В этой статье я расскажу о своей попытке использования библиотеки GenStage, а в частности модуля Flow, для реализации одного из алгоритмов биоинформатики. На протяжении последних двух лет я занимался разработкой комплексной системы хранения и поиска результатов метагеномного анализа (метагеномика) углеводородного сырья. Наверное, для многих это китайская грамота. Фактически такой анализ означает выявление всех типов микроорганизмов, обитающих, к примеру, в залежах нефти. Некоторые из этих микроорганизмов, преимущественно бактерии, способны разъедать стальные трубы и создавать множество других неблагоприятных эффектов.
            Читать дальше →
          • Неблокирующая загрузка JavaScript

            • Translation
            Примечание: ниже перевод статьи «Non-blocking JavaScript Downloads», в которой автор рассказывает о проблемах, связанных с подключением JavaScript-файлов, и возможной параллелизации их загрузок. Мои комментарии далее курсивом.

            Stoyan StefanovОб авторе: Stoyan Stefanov является веб-разработчиком Yahoo! в группе Exceptional Performance и курирует разработку YSlow — инструмента по измерению производительности. Он также внес значительный вклад в разработку продуктов с открытым кодом, выступал на конференциях и автор технических текстов. Его последняя книга Object-Oriented JavaScript.

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

            читать дальше на webo.in →
          • Как я стала дизайнером за шесть месяцев

            Я не заканчивала дизайнерских курсов и не училась дизайну в институте, но мне удалось пройти свой собственный курс обучения за 6 месяцев, замечу, что в процессе обучения я параллельно занималась полный день своей основной работой. Хотя я не думала, что уже готова устраиваться на новую работу дизайнером, все же мне сильно повезло и удалось найти неплохое место.
            Читать дальше →
          • Разработка мобильной 2D-игры «Составь слова из слова»

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



              Работа со словарями


              Имея некоторый опыт работы с БД Oracle, решил что обработку словарей буду вести в ней (Oracle 11.2 XE). Накачал в интернете несколько словарей в виде текстовых файлов с разделителями и с помощью механизма External Table загрузил в БД. Из загруженных слов отобрал 700 существительных длиной 8-10 букв. Это как раз и будут те слова, из букв которых игроки будут вести составление. Далее необходимо для каждого из этих 700 слов подобрать набор слов, которые можно из него составить. Для этого нужно проиндексировать все слова, чтобы можно было делать поиск по вхождению букв.


              Читать дальше →
            • Клон Trello на Phoenix и React. Части 1-3

              • Translation
              • Tutorial
              image

              Trello — одно из самых моих любимых приложений. Я пользуюсь им с момента появления, и мне очень нравится то, как оно работает, его простота и гибкость. Каждый раз, начиная изучать новую технологию, я предпочитаю создать полноценное приложение, в котором смогу применить на практике всё, что изучил, для решения реальных проблем, и проверить эти решения. Так что начав изучать Elixir и его Phoenix Framework я понял: я должен на практике использовать весь этот потрясающий материал, с которым познакомился, и поделиться им в виде руководства о том, как реализовать простое, но функциональное посвящение Trello.

              Читать дальше →
            • Процедурная генерация уровней для игр-головоломок

              • Translation


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

              Здорово было бы найти способ заставить компьютер сэкономить вам время и решить проблемы, о которых я сказал выше… И именно тут на помощь приходит процедурная генерация!
              Читать дальше →
            • Поэтапное руководство по созданию иконок

                image

                Статья была опубликована на smashingmagazine автор статьи Scott Lewis.

                Найти недорогие качественно сделанные иконки и векторные изображения не составляет труда – именно для этого есть такие веб-сайты, как Iconfinder (где работает автор настоящей статьи). В распоряжении дизайнеров тысячи наборов иконок премиум класса, и сотни наборов доступны для бесплатного скачивания.

                В данной статье приводится руководство по дизайну векторных иконок, которое включает в себя шесть этапов. Мы рассмотрим эти этапы после того, как разберем основные принципы успешного дизайна иконок. Эти принципы хорошо известны и подробно рассмотрены в таких работах, как Руководство по дизайну иконок Джона Хикса, а также в руководстве от Google Материальный дизайн в разработке системных иконок. Шесть этапов, которые мы будем рассматривать в данной статье, должны восприниматься, как рекомендации, а не как догмы. Способность чувствовать, где нужно следовать правилам, а когда их лучше нарушить – это важное качество, которое должен развить в себе каждый хороший дизайнер, и мы наглядно это продемонстрируем.
                Читать дальше →
              • Продвижение инди-игры на Steam Greenlight

                  Всем, привет! Наша команда сейчас проходит важный этап становления любого разработчика игр — первый запуск игры на Steam Greenlight. Пока я готовил материал для этой статьи, наша игра вошла в ТОП-100 проектов на Greenlight, набрала почти 2000 голосов «ЗА» и через 12 дней получила зелёный свет.

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

                  image
                  Читать дальше →
                • Сборка проектов с помощью Gulp.js. Семинар в Яндексе

                    Привет, меня зовут Борис. Я работаю в Яндексе в отделе тестирования и создаю инструменты, которые позволяют сделать жизнь наших тестировщиков проще и счастливее. Наша команда отчасти исследовательская, поэтому мы можем позволить себе использовать довольно необычные инструменты и эксперименты. Недавно я рассказал своим коллегам об одном из таких экспериментов: Gulp.js. Сегодня я хотел бы поделиться этим опытом с вами.



                    Для начала немного предыстории, о том, как развивались веб-технологии. В начале не было фронтенда как отдельного понятия, большая часть логики выполнялась на сервере. Поэтому разнообразные задачи по сборке скриптов и стилей, а также подготовка картинок, шрифтов и других ресурсов выполнялись бэкэндом, и их сборщиками, например, Apache Ant или Maven. Фронтенд оказывался в невыгодном положении, инструменты, предоставляемые этими сборщиками не очень подходили для него. Эту проблему начали решать только недавно, когда появился Grunt. Это первый сборщик, написанный на JS. Каждый фронтендер знает JavaScript, поэтому может без проблем писать задачи под Grunt и разбираться в уже написанных. Это и обусловило успех этого сборщика. У Grunt есть куча преимуществ, но есть и недостатки.
                    Читать дальше →
                  • История о разработке Космосима на Unity

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


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