• Методы обхода защитных средств веб-приложений при эксплуатации XSS-векторов

      image

       
      Несмотря на большое количество рекомендаций по защите веб-приложения от клиент-сайд атак, таких как XSS (cross site scripting) многие разработчики ими пренебрегают, либо выполняют эти требования не полностью. В статье будут рассмотрены способы обхода средств фильтрации и при эксплуатации xss-векторов.

      Читать дальше →
    • Современная JWT авторизация для современного Node.js фреймворка Koa

      image
      Задача авторизации возникает практически в каждом Node.js проекте, однако, чтобы ее правильно настроить, необходимо подключить большое количество модулей и собрать кучу информации из разных источников.

      В этой статье я опишу полноценное решение по авторизации на основе JSON Web Token (JWT) для Node.js и Koa с хранением хэшей паролей в MongoDB. От читателя ожидаются базовые знания Node.js и принципов работы с MongoDB через Mongoose.
      Читать дальше →
    • Упрощаем универсальное/изоморфное приложение на React + Router + Redux + Express

        На Хабре уже было предостаточно статей про то, как делать универсальное (изоморфное) приложение на стеке React + Redux + Router + Koa/Express (Google в помощь), однако я заметил, что все они содержат повторяющийся код для серверного рендеринга. Я решил упростить задачу и выделить этот общий код в библиотеку, так и появился на свет Create React Server, работает примерно так:


        import Express from "express";
        import config from "./webpack.config";
        import createRouter from "./src/createRouter";
        import createStore from "./src/createStore";
        import {createExpressServer} from "create-react-server";
        
        createExpressServer({
          createRouter: (history) => (createRouter(history)),
          createStore: ({req, res}) => (createStore()),
          port: 3000
        }));

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

        Читать дальше →
      • Ускоряем Node.js с помощью Rust



          В последнее время в сети довольно часто упоминается «молодой и перспективный» язык Rust. Он пробудил во мне любопытство и желание сделать на нём что-то более-менее полезное, чтобы как-то примерить — впору ли он мне. Это вылилось в достаточно любопытный, как мне кажется, опыт скрещивания ужа с ежом при содействии кукушки.

          Читать дальше →
        • Как слямзить Хабр по-быстрому

          • Tutorial

          Это произошло в понедельник 13 февраля, мир больше не будет прежним. Открыта вакансия:



          Для работы над нашими проектами мы ищем сильного front-end разработчика. Вам предстоит амбициозная задача: внедрить компонентный подход в разработку всех текущих и новых проектов компании.

          Отлично, работаем дальше! Выполняю "тестовое задание".

          Читать дальше →
        • Производительность старта JavaScript

          • Translation


          Веб-разработчики знают, как легко разрастаются размеры веб-страниц. Но загрузка страницы — это не просто передача байтов по проводу. Когда браузер загрузил скрипты, ему нужно их отпарсить, интерпретировать и запустить. В статье мы внимательно рассмотрим эту фазу и узнаем, почему она может стать причиной замедления запуска вашего приложения и как это исправить.
          Читать дальше →
          • +55
          • 24.4k
          • 3
        • Первый официальный релиз Webpack 2. Что нового по сравнению с Webpack 1?

          • Translation

          Webpack 2 Release


          Предупреждение: проверьте, как установлена версия Webpack в package.json. Возможно скоро ваш continuous integration сломается.


          Наконец-то Webpack 2 преодолел рубеж beta и release candidate. Это значит, что всё работает стабильно, и можно без опаски использовать его в production.


          Список изменений/улучшений:


          • Нативная поддержка ES6-модулей;
          • Разбиение кода на чанки — Code Splitting with ES6;
          • Поддержка динамических выражений при загрузке модулей — Dynamic expressions;
          • Изменения при работе с Babel;
          • ES6-специфичные оптимизации;
          • Breaking Changes;
          • Новый сайт с документацией.

          Подробности под катом.

          Читать дальше →
        • Изоморфные React-приложения: производительность и масштабирование



            Денис Измайлов ( DenisIzmaylov )


            Всем привет! Вкратце расскажу о себе. Я — Денис Измайлов. Последние 5 лет сосредоточился на JS-разработке, делал много Single Page Application, highload, React, выступал на MoscowJS несколько раз, каммитил webpack и т.д.

            Сегодня хотел бы поговорить вот о чем: почему от Single Page Application в его классическом виде стоит отказаться; как изоморфные приложения отразятся на Вашей зарплате; и что вы будете делать на этих выходных?
            Читать дальше →
          • Оптимизируем redux хранилище для более производительных изменений

              Этот пост является продолжением поста про оптимизацию производительности списка в React приложении.

              Внимание. В данном посте примеры подготовлены специально для Redux приложений. Но сам подход возможно применить и с другими библиотеками. Так же нижеприведенный совет работает в react-redux версии 5. Я не смог достичь желаемого результата в версии 4. Глубоко разбираться в причинах я не стал.

              И так, стандартный способ хранить некоторое множество элементов в приложении — это хранить их в массиве:

              const state = {
                targets: [{id: 'target1', radius: 10}, {id: 'target2', radius: 2}]
              };
              
              Читать дальше →
            • Быстрый курс Redux + websockets для бэкендера

              Всем привет из 2018! Оригинальный react-redux-universal-hot-example прекратил развитие в 2017 году, но его можно собрать на версии 6.14.2, на 8 и выше версии будут ошибки. Но есть его форк
              https://github.com/bertho-zero/react-redux-universal-hot-example, где продолжается разработка и поддерживаются более свежие версии Nodejs.

              Это краткое руководство и обучение по фронтэнеду для бэкендера. В данном руководстве я решаю проблему быстрого построения пользовательского интерфейса к серверному приложению в виде одностраничного веб-приложения (single page app).


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


              В роли учебной задачи представлена страничка чата с каким-то умозрительным "ботом", который работает на стороне сервера и принимает сообщение только через WebSocket. Бот при этом выполняет эхо ваших сообщений (мы тут не рассматриваем серверную часть вообще).

              Читать дальше →
            • Идеальный программист. Часть 1

                Статья-конспект по книге Роберта Мартина «Идеальный программист». После прочтения книги у меня поменялось отношение к программистической жизни. В книге рассматривается процесс написания кода, сам код, отношение к задачам, TDD и много других полезностей. Читать нужно разработчикам и менеджерам проектов. Частично применимо к дизайнерам.


                Читать дальше →
              • Нейронные сети на JS. Создавая сеть с нуля

                  КПДВ про нейронные сети


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


                  Но врожденные любознательность и энтузиазм довели меня до того, что я стал одним из разработчиков Synaptic — проекта фреймворка для построения нейронных сетей на JS с 3к+ звезд на GitHub. Сейчас мы с автором фреймворка занимаемся созданием Synaptic 2.0 с ускорением на GPU и WebWorker-ах и с поддержкой почти всех основных фич любого приличного NN-фреймворка.


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

                  Читать дальше →
                • Готовим IndexedDB



                    На Хабре уже рассказывали про IndexedDB — стандарт хранения больших структурированных данных на клиенте. Но это было давно и API сильно изменился. Несмотря на это в поиске статья всплывает одной из первых и вводит в заблуждение многих, кто начинает пытатся работать с этой технологией. Поэтому я решил написать новую статью с информацией об актуальном API.
                    Читать дальше →
                    • +26
                    • 50.1k
                    • 8
                  • React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

                    • Tutorial

                    image
                    Эта статья о том, как написать универсальный JavaScript-компонент, который можно будет использовать


                    • как React-компонент;
                    • как Preact-компонент;
                    • как Angular-компонент;
                    • как Web Component;
                    • как jQuery функцию для рендеринга в DOMElement;
                    • как нативную функцию для рендеринга в DOMElement.

                    Зачем и кому это нужно


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

                    Читать дальше →
                  • Как избежать излишней сложности состояния приложения [перевод]



                    Реализации Flux, такие как Redux, мотивируют нас уделять больше внимания проектированию состояния приложения. Оказывается, это нетривиальная задача. Это похоже на классический пример из теории хаоса, когда, казалось бы, безобидный взмах крыльев бабочки ведёт к далеко идущим последствиям. Ниже приведены советы, которые помогут вам лучше организовать состояние приложения.
                    Читать дальше →
                    • +19
                    • 14.4k
                    • 7
                  • Fedora 25. Новая надежда: Wayland, Storaged, поддержка Raspberry Pi…

                      Fedora 25

                      22 ноября Fedora опять зарелизилась. 25-й релиз, на мой взгляд, получился очень удачный:

                      • Замена старого сервера X.Org или X11 на Wayland. Поддержка сеанса на базе X11 сохранена в качестве опции
                      • UDisks2 заменён на Storaged, предоставляющий унифицированный D-Bus API для управления LVM2, iSCSI, Btrfs, BCache, LSM и ZRam
                      • Поддержка устройств Raspberry Pi 2 и 3

                      Читать дальше →
                    • Автоматически генерируемая CMS использую вашу готовую GraphQL-схему

                        image

                        вторая версия GraphQL CMS

                        В моей предыдущей статье "ну Русском. Оригинал" я рассказывал как можно вдвое сократить свой код и время, если вы используете GraphQL вместе с Mongoose.

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

                        » Ссылка на сам модуль: graphql-auto-generating-cms.

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

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

                        У вас есть два способа использовать данный модуль.

                        1. Первый максимально быстрый и подойдет для нового проекта. От вас требуется только GraphQL схема и следование легкому паттерну по наименованию GraphQL методов и типов.

                        2. И второй способ который не требует от вас следованию никаких паттернов, и может быть легко интегрирован в уже готовый проект. Все что от вас нужно предоставить конфигурационный объект вместе с GraphQL схемой.

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

                        Исходя из всего выше перечисленного давайте разделим текущую статью на несколько пунктов:

                        • Общие правила
                        • Подготовка к работе
                        • Первый способ использования, с паттерном
                        • Второй способ использования, с конфигурационным объектом
                        • Дополнение CMS своими компонентами и функциями
                        Читать дальше →
                      • Как спасти принцессу, используя 8(+45) языков программирования, в пятницу

                        • Translation


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



                        У вас есть С. У вас есть библиотека для замка и для принцессы. В атаку! Вы спасаете принцессу, ее собаку, весь ее гардероб и всё, что она когда-либо съела. Fuck, неужели я забыл null-terminator?
                        Читать дальше →
                      • Redux-form. Когда работать с формами просто

                        • Tutorial
                        Думаю, большинство знает схему работы библиотеки redux: view → action → middlewares → reducers → state → view

                        Подробности здесь.

                        Хочу представить вашему вниманию библиотеку, которая работает по тому же принципу для форм.

                        image
                        Читать дальше →
                      • Девять секретов о UX от практикующих экспертов

                        Antoine Valot, эксперт по user experience из Щвейцарии, в своем блоге на Medium, опубликовал очень хорошую статью, максимально созвучную с моим практическим опытом. Решившись на адаптацию данного текста, я специально снабдил его собственными мыслями и поправками на российские реалии, так, чтобы статья не являлась бы дословным переводом, а скорее новым совместным произведением, раскрывающим некоторые секреты профессии UX.

                        image

                        Да, сегодня уже трудно удивить кого бы то ни было новой «очередной статьей про юзабилити», в которой в сотый раз будут сделаны все те же очевидные выводы: возлюби пользователя своего, да не будет у тебя аргументов иных кроме результатов тестирования, сотвори себе кумира из Джобса…
                        Читать дальше →