Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

244,62
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Анализ вредоносного расширения Google chrome

Время на прочтение8 мин
Охват и читатели18K
Добрый день, сегодня я расскажу про одного зловреда, пойманного на просторах Интернета. Данный зловред прикидывается расширением для браузера Google Chrome. При заражении видоизменяет ярлык, дописывая команду загрузки расширения (--load-extension “путь до зловреда“). То есть, можно удалить расширение в браузере, но при следующем запуске оно установиться вновь.
Читать дальше →

Includor.js, или @j includor

Время на прочтение2 мин
Охват и читатели4.2K

Вы наверняка привыкли, что для того, чтобы подключить внешний JavaScript код на вашей HTML-страничке, нужно писать длинные конструкции вроде этой:

<script src="JS/example.js"></script>

Много времени я мирился этой конструкцией, но однажды мне стало лень писать её, потому что понял, что мне вполне по силам сократить её до такой:
Читать дальше →

Jasmine vs. Mocha, Chai и Sinon

Время на прочтение6 мин
Охват и читатели40K
Тестирование в JS становится все более распространенной практикой. Но с чего начать? Существует множество фреймворков которые предоставляют API для написания JS тестов.

Данная статья — это краткий обзор различий между двумя популярными фреймворками для тестирования JS: Jasmine 2 и Mocha. Мы также обсудим наиболее полулярные библиотеки Chai и Sinon которые часто используются в связке с Jasmine и Mocha.

1. API (application programming interface)


API в Jasmine и Mocha очень схожи. Они оба поддерживают написание тестов используя BDD (Behavior Driven Development) подход. Вы можете спросить: «что такое BDD»? Если кратко, это подход к написанию тестов, который предоставляет возможность описания функциональности на разговорном языке.

describe('calculator', function() {
  describe('add()', function() {
    it('should add 2 numbers together', function() {
      // assertions here
    });
  });
});

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

Как мы запускали Хабр для гуманитариев

Время на прочтение7 мин
Охват и читатели20K
«В следующие два года нужно не пытаться изобразить из себя что-то особенное, а просто быть достаточно умным, чтобы компоновать то, что человечество уже создало» (с) bobuk

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

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


Старик Гутенберг был бы доволен

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

Давайте посмотрим, что учитывать при разработке подобного сервиса, и что выбрать, чтобы без костылей.
Истории четырех людей и нескольких капризных подсистем

Множество JS-пакетов в одном репозитории

Время на прочтение8 мин
Охват и читатели21K

image


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


Если не занудствовать с терминологией, мы делаем платформу. Платформу для визуального программирования под DIY-электронику.


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

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

Теперь ONLYOFFICE может всё: добавляем плагины в редакторы документов

Время на прочтение3 мин
Охват и читатели18K
Что если бы вы могли добавить в редакторы документов любые функции, какие вам хочется? Теперь вы можете: в редакторах ONLYOFFICE появилась возможность подключения плагинов. Несколько примеров мы написали сами — все их можно посмотреть в нашем открытом репозитории на GitHub'e. Теперь ваш ход — напишите то, чего вам не хватало.

Подробности далее.


React'ивные Panel'и

Время на прочтение6 мин
Охват и читатели13K

Что такое панель? Это довольно простой компонент, разбивающий видимую область на 2-3 блока:


  • Шапка. В шапку обычно выводится заголовок и какие-то (обычно навигационные) элементы правления.
  • Тело. В тело панели выводится выводится произвольное содержимое. Часто этот блок делается скроллируемым, чтобы шапка не уходила из поля зрения.
  • Подвал. Опциональный блок. Сюда выводят обычно общую для содержимого панели информацию и элементы управления.

Не смотря на кажущуюся простоту, реализации обычно не такие уж и простые. Связано это с тем, что вариантов его использования великое множество.


В шапке может быть, а может не быть:


  • Заголовок. Дополнительно у него может быть подзаголовок.
  • Хлебные крошки. Они могут быть частью заголовка, а могут — подзаголовка.
  • Навигационные ссылки. Такие как "назад", "следующий" и тп.
  • Кнопки. Такие как "открыть фильтры", "переключить флаг", "закрыть окно" и другие.

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


Получается, что у панели должно быть минимум 3 параметра, которые принимают "сложное содержимое", то есть такое, которое не является плоским текстом, а содержит иерархию вложенных блоков.


Далее идёт обзор тех готовых решений, которые можно найти в гугле. Для каждого указан размер реализации в строках кода (CLOS). Плюс бонус в конце, для тех, кто доберётся ;-)

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

Горячая перезагрузка Chrome-расширения

Время на прочтение2 мин
Охват и читатели8.2K

На днях возникло желание написать простенькое расширение для Google Chrome. Столкнулся с такой проблемой, что после изменений в коде расширения, браузер не перезагружает его автоматически. Это очень сильно затрудняет разработку, т.к. после каждого Cmd-S в редакторе, приходится нажимать "Reload" в списке расширений, а затем еще и рефрешить страницу, чтобы перезапустить контент-скрипты.


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


Готовое встраиваемое решение лежит на github.com/xpl/crx-hotreload, а в этой статье я расскажу, как оно реализовано.

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

Be King of your state with Angular2 State Machine

Время на прочтение3 мин
Охват и читатели7.6K
image

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

Сегодня я хотел бы рассказать об одном интересном open-source проекте, который может облегчить работу с состояниями для тех, кто решил написать или переписать свое приложение на Angular2 и думает о том, переписывать ли ему логику управления состояниями заново или стоит что-либо поискать на просторах этих ваших интернетов.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №235 (1 — 6 ноября 2016)

Время на прочтение6 мин
Охват и читатели20K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.


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

Установка node.js на Raspberry Pi

Время на прочтение2 мин
Охват и читатели26K
Logo Raspberry and Node.js

Привет, Хабр! Статья посвящается веб-разработчикам, которым попала в руки Raspberry Pi первая модель. Когда несколько лет назад я покупал raspeberry это был компьютер за 35 долл, сегодня это приставка для телевизора и домашний сервер IoT устройств.
Читать дальше →

Из Firefox 52 удалят API уровня заряда аккумулятора для сохранения приватности пользовательских данных

Время на прочтение4 мин
Охват и читатели16K


Компания Mozilla заблокирует доступ к одной из функций браузера Firefox, известной как Battery Status API. С ее помощью веб-сайты могли узнавать об уровне заряда батареи ноутбука, планшета или смартфона пользователя. Решение было принято с целью обезопасить право пользователей на приватность. Хронология событий такова, что история началась с подозрений экспертов, за ними последовала реализация и реальное использование. На данный момент не ясно, что будут делать с этой функцией остальные браузеры.
Читать дальше →

Делаем проект на Node.js с использованием Mongoose, Express, Cluster. Часть 1

Время на прочтение9 мин
Охват и читатели51K

Введение


Добрый день, дорогой %username%! Сегодня мы будем описывать создание каркаса приложение по типу MVC на Node.js с использованием кластеров, Express.js и mongoose.


Задача — поднять сервер который имеет несколько особенностей.


  • Работает в несколько асинхронных потоков.
  • Сессионная информация будет в общей для всех потоков.
  • Поддержка HTTPS.
  • Авторизация.
  • Легко масштабируем.

Статья написана новичком для новичков. Буду рад любым замечаниям!

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

Ближайшие события

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

Время на прочтение7 мин
Охват и читатели9.8K
image

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

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

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

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

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

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

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

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

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

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

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

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

Паттерн Стратегия на JavaScript

Время на прочтение8 мин
Охват и читатели25K

Ранее я уже публиковал перевод статьи с таким же названием. И под ней товарищ aTei оставил комментарий:


По-моему кое-чего не хватает в этой статье и в статье в википедие — примера в стиле «Было плохо — стало хорошо». Сразу получается «хорошо» и не достаточно ясно, что это действительно хорошо. Буду благодарен за такой пример.

Ответа на него так никто и не дал до сих пор. За 3 года я набрался опыта смелости и теперь, как ответ на этот комментарий, хочу написать о паттерне Стратегия от своего имени.


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

Добавление аватара, обрезка фото на мобильном устройстве и десктопе на JavaScript и PHP

Время на прочтение5 мин
Охват и читатели9K
Доброго времени суток! Разрабатывая сайт я подошел к тому, что мне необходимо добавить функцию добавления аватара для пользователей на десктопе и мобильных устройствах. Долго искал материалы, даже сначала решил добавить библиотеку с готовыми функциями, уже написанную кем-то (не помню как называлась статья, но она точно была на хабре и там были рассмотрены некоторые библиотеки). После тестирования этих подключенных библиотек я решил написать все на JavaScript и PHP (за исключением использования ajax для работы с php) при помощи HTML5. Для демонстрации я создал страницу для хабра: демо для habrahabr.
Читать дальше →

JavaScript и SEO в 2016 году

Время на прочтение3 мин
Охват и читатели24K
Вы все еще отдаете поисковикам HTML-версию своего SPA приложения? 2016 год на дворе, времена изменились.


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

Redux-form. Когда работать с формами просто

Время на прочтение6 мин
Охват и читатели70K
Думаю, большинство знает схему работы библиотеки redux: view → action → middlewares → reducers → state → view

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

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

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

Интервью c Max Stoiber и Сергеем Лапиным: Выбираем state management решение для React.js

Время на прочтение8 мин
Охват и читатели10K


В преддверии конференции HolyJS мы поговорили с Максом Штойбером (одним из организаторов React.js Vienna Meetup, создателем react-boilerplate, принимавшим участие и в создании Carte Blanche) и Сергеем Лапиным (членом программного комитета HolyJS) и обсудили, как выбрать state management решение.

Redux, MobX, Relay или другая реализация Flux? Практические рекомендации и лучшие практики.

Макс Штойбер


– Макс, привет! Для начала коротко представься и расскажи о себе.

– Привет! Меня зовут Макс Штойбер, я Open Source разработчик, работаю в компании Thinkmill. Мы делаем всякие прикольные штуки вроде KeystoneJS, разрабатываем веб- и мобильные приложения, вносим свой вклад в улучшение User Experience.

– Звучит круто! Расскажи, как давно ты всем этим занимаешься, когда открыл для себя React, и в каких проектах участвовал?
Читать дальше →

$mol: reactive micromodular ui-framework

Время на прочтение28 мин
Охват и читатели23K

Сколько нужно времени, чтобы просто вывести на экран большой список, используя современные фреймворки?


Список на 2000 строк ReactJS AngularJS Raw HTML SAPUI5 $mol
Появление списка 170 ms 420 ms 260 ms 1200 ms 50 ms
Обновление всех его данных 75 ms 75 ms 260 ms 1200 ms 10 ms

Напишем нехитрое приложение — личный список задач. Какие у него будут характеристики?


ToDoMVC ReactJS AngularJS PolymerJS VanillaJS $mol
Размер ( html + js + css + templates ) * gzip 322 KB 326 KB 56 KB 20 KB 23 KB
Время загрузки 1.4 s 1.5 s 1.0 s 1.7 s 0.7 s
Время создания и удаления 100 задач 1.3 s 1.7 s 1.4 s 1.6 s 0.5s

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


Синхронная параллельная загрузка ресурсов


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

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