• 10 шагов настройки Create React App + TypeScript + Ant-Design

    • Tutorial

    В какой-то момент борьбы со Flow-Type на VSCode, я согласился, что нужно переезжать на TypeScript. Поддержка Flow-Type обеспечивается сторонним плагином и совсем-совсем не устраивает. Если файл невалиден с точки зрения Flow-Type, то переходы внутри кода между файлами перестают работать, например. А возвращаться на WebStorm после знакомства с VSCode — я не могу себя заставить. Microsoft, как обычно, затягивает полностью. Любишь VSCode, получи TypeScript.


    Если бы мне кто сказал год назад, что я вернусь в поклонники Microsoft — сложно было такое представить. Но случаются и более удивительные вещи. Я в полном восторге от качества китайского набора React-компонентов от Ant-Design. И хотя он написан на TypeScript, чтобы его прикрурить, нужен babel-plugin-import.


    Но как же остаться на Create React App (CRA) — у форка для TypeScript (CRA-TS) выпилили Babel. Поддерживать собственную вариацию CRA представляется безумием. Многообещающий Preact-CLI (как замена CRA) не обеспечивает необходимый уровень совместимости с React. Но, играясь с Preact-CLI, заметил, что preact.config.js очень похож на react-app-rewired, которым я активно пользуюсь для обхода ограничений конфигурации Webpack в CRA. Сопоставил этот факт с идеей перевода CRA-TS c ts-loader на awesome-typescript-loader, внутри которого можно включить Babel. И вуаля!

    Читать дальше →
    • +7
    • 16,2k
    • 8
  • Шесть бесплатных автоматизированных платформ для изучения программирования

      Привет, сообщество! Мы в Хекслете составили список из пяти бесплатных автоматизированных онлайн-платформ для новичков.


      На русском:


      HTML Academy
      «Академия» учит верстать сайты. Основной контент в формате подписки (390 рублей в месяц) и интенсивов (от 12500 рублей), но есть несколько бесплатных автоматизированных курсов по основам HTML, CSS и JavaScript.


      В HTML Academy не столько задания для прокачки в программировании, сколько для знакомства с основами веб-разработки. Но это идеальный формат для тех, кто никогда не писал код и хочет попробовать. Большое количество веб-разработчиков начинало путь именно здесь.


      Code Basics
      Это новый бесплатный сервис от Хекслета. Его основная идея — через решение простых заданий прямо в браузере погружать новичков в основы программирования. Сейчас есть уроки по PHP, JavaScript и Python, ближайшее время появятся — новые. Платформа подойдет лучше всего для изучения основ синтаксиса, и меньше — для прокачки алгоритмов.


      Обучение построено вокруг чередования небольших порций теории (3-4 абзаца) и закрепления практики в тренажере. У каждого практического задания есть решение учителя, которое можно сравнить со своим после успешного прохождения и раздел для обсуждения задания.

      Читать дальше →
    • Релиз Node.js 10.5: мультипоточность из коробки


        На прошлой неделе состоялся релиз Node.js версии 10.5.0, содержащий нововведение, чью значимость трудно переоценить, – поддержку многопоточности в виде модуля worker_threads. Сразу оговорюсь API находится в экспериментальной стадии и поэтому может измениться, но уже сейчас можно составить первое впечатление и получить представление о заложенных в его основу принципах и технологиях. А если у вас есть желание, то и поучаствовать в финализации интерфейса, написании кода или исправлении багов (список issues).

        Читать дальше →
      • 7 правил проектирования печатных плат

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

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


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

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

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

            image

            Дисклаймер:
            Internet of Things — круто, занятно и на гребне волны мировых трендов. О том, как пройтись по граблям, утопить на проект средств на покупку маленького парка иномарок, что есть MVP и какое он имеет отношение к железу, как программист становится продавцом — под катом.

            — Привет, меня зовут Александр, и я стартапер.
            — Привет, Александр, — нестройно ответил зал.

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

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

              image

              Читать дальше →
            • Навигация квадрокоптера с использованием монокулярного зрения

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


                Читать дальше →
              • Разбираемся с синтаксисом шаблонов в Angular2


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

                  Так как шаблоны в AngularJS являются неотъемлемой его частью, важно разобраться с ними в самом начале знакомства с новой версии этого фреймворка. Заодно обсудим, какие преимущества дает нам данный синтаксис по сравнению с angular 1.x. Причем лучше всего будет рассматривать это на небольших примерах.

                  Данная статья во многом основана на материалах этих двух статей:



                  Для того, что бы упростить подачу материала, давайте разберемся. Под AngularJS я буду подразумевать всю ветку Angular 1.x, в то время как под Angular2 — ветку 2.x.

                  Так же спасибо господину Bronx за ценное дополнение, которое я включил в текст статьи.

                  Примечание: вечер выходного дня, потому о опечатках и т.д. сообщайте в личку. Премного благодарен и приятного чтения.
                  Читать дальше →
                • Эволюция структур данных в Яндекс.Метрике

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



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

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

                    • Перевод

                    Рад представить дополнение оригинального списка из 300 потрясающих бесплатных сервисов. Автор оригинальной статьи Ali Mese добавил ещё +100 новых сервисов, которые помогут найти все — от источников вдохновения и редакторов фотографий до создания опросов и бесплатных иконок.

                    И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



                    A. Бесплатные веб-сайты

                    • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
                    • Bootswatch: Бесплатные темы для Bootstrap.
                    • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
                    • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
                    • Strikingly: Конструктор веб-сайтов.
                    • Layers: Создание сайтов на WordPress (new).
                    • Bootstrap Zero: Самая большая коллекция бесплатных шаблонов Bootstrap (new).
                    • Landing Harbor:  Продвижение мобильного приложения c помощью бесплатного лендинга (new).
                    Читать дальше →
                  • Список YouTube-каналов для обучения веб-разработке

                      image


                      Привет, хабражители!

                      Представляю вам список YouTube-каналов для обучения веб-разработке. Список доступен на гитхабе, там он будет пополняться и редактироваться. В планах — создание отдельной странички для фильтрации каналов по тегам и рубрикам.

                      Также хочу попросить вас о небольшой услуге: если вы знаете канал, не вошедший в список — опубликуйте ссылку на него в комментариях или отправьте pull request. Сообщество будет благодарно вам.

                      Под катом — текущая версия списка.
                      Читать дальше →
                    • Суперсилы Chrome DevTools



                        Я работаю в команде Онлайн. Мы делаем веб-версию справочника 2ГИС. Это долгоживущий активно развивающийся проект, в котором JavaScript используется как основной язык как на клиенте, так и на сервере.

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

                        В этой статье я расскажу, как мы используем стандартные браузерные инструменты разработчика для эффективной отладки и исследования. Эти рецепты направлены в первую очередь на изучение приложения снаружи-внутрь, поэтому подойдут для любого проекта.
                        Читать дальше →
                      • ODROID-C1 — форма от Raspberry Pi B+, 4 ядра по 1500MHz, 1GB и цена $35

                          Корейские ребята из компании Жёсткоеядрышко (Hardkernel) выпустили в жизнь свой новый микрокомпьютер ODROID-C1, который сделан по подобию Raspberry Pi B+ в том же формфакторе и с тем же разъёмом GPIO. При этом, он обладает четырёхядерным процессором Cortex-A5 с частотой 1,5GHz, 1GB DDR3, гигабитной сетевой картой и прочими прелестями, которые заметно превосходят возможности малинки.

                          image

                          Немного предыстории


                          Ещё до этого Hardkernel выпустила ODROID-W, который имел тот же процессор от Broadcom, что и малинка, был программно совместим, а главным отличием были значительно меньшие размеры платы, особенно в высоту. Но ребятам, которые пекут малиновые пироги, это не понравилось и Broadcom запретила продавать Hardkernel свои процессоры. Была выпущена только одна партия ODROID-W. Её анонсировали в июле, а уже в сентябре появилось сообщение об отказе Broadcom в поставках.

                          Теперь же, Raspberry Pi B+ получил серьёзного конкурента, и хотя корейский вариант и менее известен, но он хорошо подходит тем, кому, как минимум, нужно больше производительности.

                          Сравнение и подробности
                        • npm для простых смертных

                          • Перевод
                          • Tutorial


                          Эта статья предназначена для тех, кто не очень дружит с Node.js, но хочет использовать приложения вроде Grunt, Gulp и тому подобные. Процесс работы с этими приложениями подразумевает редактирование файла package.json и использование команд npm, так что понимание принципов работы npm поможет вам справиться с трудностями.
                          Читать дальше →
                        • Стартап WigWag создаёт среду для программирования умного дома на JavaScript

                            Сегодня разные производители предлагают десятки разных (и часто несовместимых между собой) систем, устройств, приложений и интерфейсов для превращения обычного дома или квартиры в «умный» — интеллектуальные дверные замки и лампочки с управлением по WiFi, розетки, датчики и выключатели с аккаунтом в Твиттере, интернет-холодильники кондиционеры. Стартап WigWag, который уже собрал на Кикстартере почти в четыре раза больше денег, чем планировал, подошел к вопросу создания умного дома более системно. Они предлагают не просто набор сенсоров и актуаторов, но и целую инфраструктуру, совместимую со множеством уже существующих интеллектуальных электроприборов, и, что ещё важнее — открытую для модификаций и дружелюбную как к простым пользователям, так и к программистам и хакерам.

                            WigWag позволяет создавать «правила», подобные рецептам IFTTT, которые могут на основе информации с датчиков или из интернета управлять любыми устройствами. Это могут быть датчики и актуаторы WigWag, интернет-сервисы, Raspberry Pi, Arduino, Belkin WeMo, Philips Hue, и любые другие, поддерживающие протоколы IP, RS-232, 6loWPAN, Bluetooth и Zigbee. Причем создавать правила можно не только через графический интерфейс, но и на JavaScript, с помощью среды выполнения DeviceJS, которую разработчики WigWag позиционируют как способ писать приложения для умного дома точно так же, как пишутся приложения для Web.


                            Читать дальше →
                          • Никогда не «не делай» того, о чем пожалеешь или умный дом с CCU.IO

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

                              Хочу представить программную платформу автоматизации для дома на базе Node.js, которую можно скачать со всеми исходниками и установить прямо сейчас практически одним кликом (Windows) или одной командой (Linux/Debian).


                              Подробности
                            • Зимовка кактусов с онлайн контролем температуры

                                веб интерфейс управления температурой зимовника кактусов

                                Уже много лет, как жена увлеклась разведением кактусов, а все никак ей не удавалось организовать для них правильную зимовку. Дело в том, что для кактусов очень важно, чтобы зиму они пережили при температуре от 5 до 15 °C — не ниже, чтобы не погибли, и не выше, чтобы не решили, что уже весна. Я хотел бы с вами поделиться, как весьма доступными средствами мне удалось создать систему контроля температуры на Arduino с онлайн управлением через Dropbox.
                                Читать дальше →
                              • Создание AngularJS приложения c использованием Firebase

                                В этой статье я хочу рассказать о связке AngularJS и Firebase в качестве хранилища данных.

                                Про AngularJS на Хабре написано много, а вот про Firebase совсем чуть-чуть. По этому я решил заполнить этот пробел. Что же такое Firebase?

                                Firebase — это мощный сервис, предоставляющий API для хранения и синхронизации данных в реальном времени, сервер, на котором эти данные хранятся. Также из коробки мы имеем аутентификацию пользователей и поддержку различных платформ и фреймворков. Более подробную информацию можно получить на официальном сайте.

                                Также Firebase предоставляет замечательную библиотеку для AngularJS — AngularFire.

                                Используя AngularJS и его прекрасный двусторонний дата биндинг вместе с Firebase, мы можем получить трехстороннюю синхронизацию данных. Однако, обо всем по порядку.
                                Читать дальше →
                                • +7
                                • 22,8k
                                • 9
                              • Espruino Pico: миниатюрная плата разработчика с JavaScript поможет быстро освоиться в мире электроники



                                  Миниатюрная плата Espruino Pico для разработчика JavaScript — это интересное устройство, внутри которого есть все, что нужно для работы с электронными устройствами. Плата позволяет быстро настроить взаимодействие с самыми разными модулями и системами, без необходимости написания большого количества кода и его постоянной отладки.

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

                                  Читать дальше →