• Делаем модальные окна для сайта. Заботимся об удобстве и доступности

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


    Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.


    В итоге было задумано сделать собственное простое решение.


    Читать дальше →
  • Alt: City Online. Как я в одиночку создавал «Gta Online» для мобильных устройств. Часть 1

    Возможно ли в здравом уме замахнуться на подобный проект в одного, и надо ли оно вообще? Спойлер: да (длинный пост с картинками и видео).


    Читать дальше →
  • 12 советов по внедрению TypeScript в React-приложениях

    TypeScript — стандарт современной фронтенд-разработки. Согласно исследованиям State of JavaScript, TS вызывает явный интерес у программистов. По данным опроса за 2019 год, почти 60% респондентов пробовали TS и продолжают использовать, 22% не пробовали и желают изучить.

    Эта статья — сборник советов о том, как внедрить и улучшить использование TypeScript. Первая половина советов общая, касающаяся подходов и инфраструктуры. Вторая — несколько особо полезных фишек языка.


    Читать дальше →
  • Опубликован исходный код Command & Conquer: смотрим, что внутри

    • Translation

    Компания Electronic Arts открыла исходный код первой Command & Conquer, а также Command & Conqueror: Red Alert. Скачать его можно с GitHub.

    Всё содержимое имеет лицензию GPL v3; кроме того, в исходном коде сохранены все комментарии. Отсутствует только changelog использовавшейся при разработке системы контроля версий. Похоже, всё просто недавно выложили на Git.

    Я решил изучить, что же происходит внутри этого игрового движка. Не буду описывать каждую строку кода, но, по крайней мере, будет интересно взглянуть на то, какой была разработка на C++ в начале 1990-х.

    Изучать мы будем только исходный код «Command & Conquer: Red Alert», потому что он похож на форк первой игры. В репозитории он находится в папке REDALERT.

    Статистика


    1. 290 файлов заголовков C++
    2. 296 файлов реализации на C++
    3. 14 файлов ассемблера, содержащих инструкции ассемблера x86
    4. 222090 строк кода на C++

    Количество строк кода я получил, подсчитав непустые строки, после чего вычел из них те строки, которые очевидно были комментариями.

    Почти все файлы имеют имена в верхнем регистре.

    Кроме того, есть файл «RedAlert.vcxproj», поэтому можно предположить, что проект можно собрать в более новых версиях Visual Studio, но этого я не проверял.
    Читать дальше →
  • Несколько советов о том, как ускорить сборку Docker-образов. Например, до 30 секунд

      Прежде чем фича попадет на прод, в наше время сложных оркестраторов и CI/CD предстоит пройти долгий путь от коммита до тестов и доставки. Раньше можно было кинуть новые файлы по FTP (так больше никто не делает, верно?), и процесс «деплоя» занимал секунды. Теперь же надо создать merge request и ждать немалое время, пока фича доберётся до пользователей.


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


      Читать дальше →
    • Самый маленький компьютер

        Игровой.
        Но это не точно


        Он, конечно, не претендует на звание «самого», но явно компактнее собратьев.

        Представляю вам пошаговую инструкцию +заметки для сборки вполне себе компактного игрового ПК. Сразу говорю, что понятие «игровой» широкое, а я не богатый, так что тут не будет Core i9 и GTX 1080Ti, я собрал довольно скромную систему, впрочем, она мощнее, тише и меньше старой раз в 10.

        Вместо вступления


        У меня был средненький 7-летний компьютер, и в какой-то момент он перестал мне нравиться, тогда я решил собрать новый. С удивлением обнаружил, что вышли новые камни у обоих производителей и решил: «наконец-то соберу mini-ITX.» И собрал. Немного заморочившись с питанием (относительно, конечно, но по меркам сборки ПК, где «купил и поставил», заморочился) получил очень компактный ПК. Сами посудите: 210*170*95 мм.
        Читать дальше →
      • Полная домашняя автоматизация в новостройке

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


        Панель управления квартирой в феврале 2020 года (Home Assistant)

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


        Строительство нашего дома в процессе — ноябрь 2016 года
        Умный дом в самом соку...
      • Роботаракан Петя за десять баксов

        • Tutorial

        Знакомьтесь с Петей, шестиногом о трёх сервоприводах


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


        Читать дальше →
      • Self-driving ГАЗ66 Monster Truck 1/16

        Хабр, привет!

        Хочу рассказать вам о том, как я делал и сделал самоуправляему машинку :)

        Я мог бы рассказать сразу, как делать, сухо прикрепив схемы и bash команды, но так будет скучно. Предлагаю вам интересную (я надеюсь) историю о том, как лично я прошел этот путь, и куда пришел.

        Те места, где было что фоткать, с фотками. Там, где про софт — скорее всего без фото.

        Это будет действительно история в формате повествования, как я рассказывал бы вам за чашкой кофе. Это не про bash команды, python скрипты, и вот это вот всё.

        Начнём с фотки и видео того, что получилось, и дальше вся история под катом.


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

          Обложка статьи


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


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


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

          Читать дальше →
        • Доклад «42». Большой конспект

            Привет, Хабр, меня зовут Вадим Макишвили. В 2014 году я выступил с докладом «36». Рассказывал про кризис среднего возраста, признавался в собственных слабостях и делился способами, которые помогли мне совладать со страхами. Сразу после выступления друзья стали надо мной подтрунивать, мол, давай каждые десять лет по продолжению. Я отшучивался, мол, обязательно сделаю. Но, вообще-то, не собирался, потому что каждые десять лет рассказывать всему миру про свои страхи — скучно.

            Однако несколько месяцев назад на конференции YaTalks в Екатеринбурге я выступил с новым докладом. В заголовке число 42, и возникает вопрос: «Неужели Макишвили — автор одной темы?» Нет. Самокопания не было. А что было? И можно ли «42» считать продолжением «36»?

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

            «42» — точно не про кризис среднего возраста.


            — Здравствуйте, друзья. Мне очень много хочется вам рассказать. Так много, что первая версия этого доклада длилась два часа. Но организаторы сказали мне — Макишвили, не наглей. Короче, вы со мной здесь на час. Я постараюсь, чтобы вам не было ни скучно, ни грустно.
            Читать дальше →
          • Как проектировать большие и сложные веб-таблицы

            • Translation
            image

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

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

              image
              В первой части я рассказал про концепцию проекта. Во второй части разбираем конструкцию робота MIRO по косточкам (много картинок).
              Читать дальше →
              • +32
              • 4.4k
              • 3
            • RC Машинки: Первые покупки — шасси и силовая установка

              • Tutorial


              Силовая установка — звучит как-то странно, но если подумать, то очень четко описывает те самые компоненты которые заставляют модель двигаться. Не уверен входит ли сюда сервопривод (лево/право). Если вы читали первую часть этого цикла, то вы знаете, что есть модели на ДВС и на электромоторах. Так как по большей части я описываю свой опыт — речь пойдет об электромоторах и комплектующих под них.

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

                Хабр, привет!

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

                Приступим!

                Учить лексику


                Плагины, мобильные приложения и сайты, которые помогут перевести и запомнить незнакомые термины с русского на английский и обратно.

                ЛеоПереводчик

                С этим плагином удобно переписываться с коллегами. Он автоматически переводит непонятные слова и выражения. Незаменимый инструмент, когда нет времени на доскональные переводы и нужен срочный ответ.
                Читать дальше →
              • Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™

                • Tutorial


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

                  Привет, Хабр!

                  У webpack'а есть много полезных плагинов, о которых многие не знают и не используют в своих проектах. Под катом я собрал 5 таких, они могут здорово упростить вам жизнь!


                  Читать дальше →
                  • +31
                  • 14.5k
                  • 5
                • Процедурная генерация планет

                  • Translation

                  От переводчика:
                  Представляю вашему вниманию статью авторства Andy Gainey, в прошлом независимого разработчика игровых инструментов, ныне сотрудника Paradox Development Studio. На мой взгляд, автор играючи создал один из лучших процедурных генераторов планет с открытым исходным кодом.

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

                  • Translation

                  Генерация уровней в Unexplored 2


                  Мы очень гордимся генератором уровней игры Unexplored 2, это программа, отвечающая всем современным требованиям. В посте я расскажу о том, как создаются уровни игры.

                  Нам не пришлось заново изобретать велосипед. В Unexplored 1 мы уже создали техники, которые сильно повлияли на успех первой игры. Unexplored 2 просто продолжила начатое. Фундамент нашей технологии состоит из двух частей: мы применяем многоэтапную генерацию, которая почти имитирует процесс, очень похожий на работу живого дизайнера уровней. Поверх него мы используем технику под названием "циклическая генерация подземелий", которая гораздо лучше справляется с генерацией естественно выглядящих уровней, чем большинство стандартных приложений генеративного создания контента. В этом посте я расскажу о первом аспекте. Адаптация циклической генерации подземелий к Unexplored 2 будет темой будущего поста.

                  Имитация «человеческого» дизайна уровней


                  Генератор уровней разбивает процесс генерации уровня на целое множество управляемых этапов. Он проходит путь от высокоуровневого планирования до низкоуровневой детальной карты уровня. По сути, он сначала создаёт набросок уровня, а затем начинает добавлять детали, пока уровень не станет завершённым и заполненным.
                  Читать дальше →
                  • +50
                  • 13.3k
                  • 7
                • Как я дома NAS строил

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

                  Смотрел я на модели именитых брендов, такие как дели Synology и QNAP, даже чуть не взял QNAP TS-469 Pro, но жаба таки сделала свое дело.

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