• Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™

    • Tutorial


    Привет, Хабр. Недавно я выпендрился в комментариях и пообещал подробно ответить на вопрос о том, как дизайн-система упрощает взаимоотношения и нейтрализует конфликты между дизайнерами и верстальщиками (разработчиками). Плюс рассказать о некоторых вариантах стандартизации именования слоёв. Вот и отвечаю. Подробно. Про сетки. Про компоненты. Про иконки. Про язык. Про БЭМ. Про «фигмин» слэш и её же плагины. Про артборды и вьюпорты. Про типографику. Про стили и палитры. Про эффекты. Про экспорт растра. Про «мультиплеер». Про распределение обязанностей. Ну и немножко «о жизни, вселенной и вообще». Осторожно, трафик: внутри много картинок, есть gif-анимации. А ещё много, действительно много нудного текста. Я предупредил.
    Читать дальше →
  • Как нужно и не нужно писать чат ботов на примере моего бота для игры в «Тайный Санта»

      image

      Предыстория


      Год назад решил я создать телеграм бот для того, чтобы поиграть в достаточно популярную новогоднюю игру «Тайный Санта». Вдохновился я тем, что пару лет назад мы на работе компанией решили сыграть в эту игру (это показалось очень круто), и плюс я давно следил за клубом АДМ на Хабре. В октябре-ноябре прошлого года, я понял, что нужно сыграть между своей же компанией в этом году снова, но в этот раз не вытягивая имена написанные на листочке с шапки Деда Мороза, а более технологично, что ли. Поскольку все сидели в телеграме и мне было очень интересно написать туда бота, я решил это сделать именно на этой платформе
      Читать дальше →
    • Что умеют делать наручные часы кроме показа времени и как выбрать свои первые часы

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



      Современные часы имеют невероятные дополнительные функции

      Читать дальше →
    • Сравнение качества фотографий, сделанных на телефоны с различной конфигурацией сенсоров

      В настоящее время чуть ли не каждый месяц выходит какой-то смартфон в котором очередной вендор обязательно вносит «революционные» изменения, начиная от внешнего вида (материал, цвет, формы, габариты) и заканчивая начинкой (процессор, дисплей, камеры, различные интерфейсы). Так получилось, что я сторонник устройств «всё-в-одном», если сценарий применения оборудования не связан с профессиональной деятельностью или же не сильно ограничивает функциональные возможности, которые мне интересны.
      Читать дальше →
    • Mkcert: валидные HTTPS-сертификаты для localhost


        В наше время использование HTTPS становится обязательным для всех сайтов и веб-приложений. Но в процессе разработки возникает проблема корректного тестирования. Естественно, Let’s Encrypt и другие CA не выдают сертификаты для localhost.

        Традиционно есть два решения.
        Читать дальше →
      • Где мои деньги, чувак: о чем молчит Steam

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



          Мы много будем говорить о Steam, самой крупной открытой платформе для игр, потом посмотрим на 3rd-party дистрибуцию и альтернативные варианты продаж. До того, как вы найдете свои собственные ответы — давайте трезво посмотрим на то, как маховик издания игр работает сейчас.

          Простите, ребята, но это будет очень меркантильная статья с цифрами и процентами — я считаю, что если создание игр ваша страсть и ремесло, без них сложно уверенно идти вперёд. Начнём с цен, скидок и того, как работает список желаемого в Steam.
          Читать дальше →
        • Мне не страшен ваш NDA

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

            Это так же как вы неизбежно получите требование вместе с учредительными документами предоставить выписку из ЕГРЮЛ не старше 30 дней. Хотя всё доступно в онлайне, все распечатывают эту выписку из интернета, заверяют её и передают контрагенту, который даже не смотрит её, потому что всё есть в интернете. Ну, вы поняли, короче, отечественную любовь к таинствам.

            image
            Читать дальше →
          • Простой статический сайт на Webpack 4

            • Tutorial


            После прочтения ряда статей (например, этой) решил перейти на современный подход с использованием Node.js при написании простых сайтов с подхода «динозавров». Ниже представлен разбор примера сборки простого статического сайта с помощью Webpack 4. Статья написана, так как инструкции с решением моей задачи не нашел: пришлось собирать всё по кусочкам.

            Читать дальше →
          • Web-приложения в Android без Cordova, Phonegap и SMS

              Начиная с 5 версии Android компонент WebView поставляется не как часть системы, а как обычное приложение которое может быть обновлено из Google Play:

              image

              Что это даёт разработчикам? Теперь HTML-приложения можно встраивать в .apk без дополнительных костылей. Все возможности HTML5 будут доступны.

              Рассмотрим пример публикации в Google Play реального HTML5 приложения.
              Читать дальше →
            • Руководство для начинающих по прогрессивным веб-приложениям и фронтенду

              • Translation
              • Tutorial

              image


              Разрабатывать веб-фронтенд, придерживаясь JavaScript-экосистемы, всех этих новомодных штучек и пафосных фреймворков, может быть пугающим занятием, если не сказать больше. Я давно уже хотел окунуться в это, и наконец собрался с духом. К концу этой статьи, надеюсь, вы узнаете что-нибудь новое, или хотя бы чуть больше отточите свои навыки веб-разработки. Какая ирония, что длина статьи и обширное количество информации тоже могут отпугивать. Но я очень надеюсь, что вы найдёте время осилить хотя бы интересующие вас главы. В конце каждого раздела есть абзац TL;DR, так что вы можете быстро ориентироваться в содержании.

              Читать дальше →
            • Как сделать веб-студию эффективной и начать зарабатывать? 15 шагов от WebCanape



                Меня зовут Василий Чуранов. Я директор компании WebCanape. Ближайшие несколько месяцев я хочу потратить на систематизацию тех знаний и опыта, которые помогли WebCanape войти в топ-100 веб-студий и начать зарабатывать на самом конкурентном рынке — разработки сайтов. Этот опыт я планирую свести в 15 материалов, которые, возможно (очень надеюсь), станут для веб-студий с небольшим штатом сотрудников и большими амбициями — полезными практическими инструкциями в этом нелегком пути.
                Читать дальше →
                • +24
                • 34.9k
                • 9
              • Делаем сайт для виртуальной реальности. Встраиваем монитор в монитор и размышляем о будущем

                  image

                  Несмотря на то, что понятие «виртуальная реальность» уже не первый год мелькает перед глазами, оно до сих пор остается загадкой для большинства людей, а цены на аксессуары, связанные с этим развлечением, могут уходить в бесконечность. Но существует бюджетный вариант. Среднестатистический человек, интересующийся новыми технологиями, может позволить себе смартфон с гироскопом, встроенный в Google Cardboard или любой аналог этого нехитрого устройства и простой джойстик с парой кнопок. В наше время такой вариант знакомства с этой технологией наиболее распространенный. Но, как и многие другие технологичные новинки, вроде квадрокоптеров, интересная игрушка быстро превращается в пылящуюся на полке. Практическое применение сильно ограничено. Взрослые люди, купившие очки виртуальной реальности, первые дни играются в игрушки, смотрят различные видео с прекрасными барышнями, радуются, как дети. Это здорово. Новые впечатления всегда полезны. Но быстро приходит понимание, что графика в игрушках находится на уровне конца 90-х, видео наскучивает, а другого практического применения очкам для этих людей нет. Для отдельных разработчиков, дизайнеров и экспериментаторов очки становятся инструментом в работе, но обычный потребитель кладет их на полку и забрасывает. Было бы интересно применить эту технологию в интернете на обычных сайтах. В этой статье мы попробуем с помощью Javascript адаптировать привычную нам верстку под новые условия отображения. Информации по теме пока не много, статья носит характер эксперимента, так что всем заинтересованным людям, а также тем, кто имел подобный практический опыт, заранее предлагается присоединиться к обсуждению и поделиться своими мыслями и опытом в комментариях.

                  Читать дальше →
                • Favicon сегодня: форматы, поддержка, автоматизация

                  На сегодняшний день favicon — это не просто значок 16x16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.



                  Читать дальше →
                • 8 JavaScript библиотек для визуализации данных в виде интерактивных карт

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

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

                  Заглавная картинка: визуализация данных с помощью интерактивных карт
                  Читать дальше →
                • Создание редактора квестов и диалогов для Unreal engine: Часть 1 описание плагина

                  • Tutorial
                  image

                  Здравствуйте меня зовут Дмитрий. Я занимаюсь созданием компьютерных игр на Unreal Engine в качестве хобби.

                  На определенной стадии создания вашей игры, возникает необходимость написать диалоги и квесты. К сожалению Unreal engine не имеет встроенного инструмента для решения этой задачи. Поэтому я написал плагин для редактирования квестов и диалогов. Как всегда все исходники будут предоставлены в конце статьи.
                  Читать дальше →
                  • +20
                  • 24.7k
                  • 4
                • Про оптимизацию рендеринга — с оптимизмом

                    У меня есть мечта, и она утопична: я хочу, чтобы мои веб-приложения работали идеально. JQuery, AngularJs, React, Vue.js — все обещают производительность. Но проблема совсем не во фреймворках и не в JavaScript. Проблема в том, как браузер рендерит страницу. А делает он это очень плохо.

                    Если бы браузер отлично справлялся с рендерингом, то не появился бы такой инструмент, как React Native. Под капотом React Native всё тот же JavaScript, а View нативное, и разница в производительности между нативным приложением и приложением на React Native не будет заметна для рядового пользователя. Другими словами, проблема не в JavaScript.

                    Если что-то оптимизировать, то как раз рендеринг. Инструментов, которые нам даёт JavaScript и API браузера, недостаточно. Два года я пытаюсь сделать работу своих продуктов плавной и быстрой, но тщетно. Я почти смирился с тем, что веб останется таким навсегда. В этой статье я собрал всё, что успел узнать об оптимизации рендеринга и применить на проектах, над которыми работал, и рассказываю о своих надеждах на ближайшее будущее. Это будущее, в котором я хочу опираться на устойчивый фундамент стандартов и API браузера, а не CSS-хаки и third-party репозитории для оптимизации производительности.


                    Читать дальше →
                  • Как я вспоминал школьный курс геометрии

                      image


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

                      Читать дальше →
                    • Математика CSS-шлюзов

                      • Translation

                      CSS-шлюзом (CSS-lock) называется методика из адаптивного веб-дизайна, позволяющая не перепрыгивать от одного значения к другому, а переходить плавно, в зависимости от текущего размера области просмотра (viewport). Идею и одну из реализаций предложил Тим Браун в статье Flexible typography with CSS locks. Когда я пытался разобраться с его реализацией и создать свои варианты, мне с трудом удавалось понять, что именно происходит. Я выполнил много вычислений и подумал, что полезно будет объяснить другим всю эту математику.

                      В статье я опишу саму методику, её ограничения и лежащую в её основе математику. Не волнуйтесь: там в основном одни сложения и вычитания. К тому же я постарался всё разбить на этапы и украсил их графиками.
                      Читать дальше →
                    • Шпаргалка по Flexbox (CSS3 Flexible Box)

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

                      Я решила создать краткую визуальную шпаргалку по Flexbox для тех случаев освежения памяти после паузы в будущем. Думаю, что у меня получилась шпаргалка, основанная на… шпаргалках.


                      Читать дальше →
                    • Как объяснить бабушке, что такое Agile за 15 минут с картинками

                      • Translation
                      «Любое дело всегда длится дольше, чем ожидается, даже если учесть закон Хофштадтера.»
                      — закон Хофштадтера

                      image

                      Самый просматриваемый ролик на YouTube по теме agile. 744 625 просмотров на момент публикации данной статьи. Легкий стиль изложения, картинки и всего 15 минут — лучшее что я видел. TED отдыхает.
                      Читать дальше →