Pull to refresh
  • by relevance
  • by date
  • by rating

Yeoman.io

Website development *JavaScript *HTML *
На конференции Google I/O 2012 во второй части своего выступления Paul Irish представил проект yeoman.io. Главной целью которого является собрать для разработчика лучшие библиотеки и фреймворки в одном месте и создать идеальную среду для разработки за кратчайшее время.
Читать дальше →
Total votes 32: ↑31 and ↓1 +30
Views 18K
Comments 14

Grunt, инструмент для сборки javascript проектов

Website development *JavaScript *Node.JS *
Translation
Grunt — это инструмент для сборки javascript проектов из командной строки с использованием задач. Релиз вышел совсем недавно, автор Ben «Cowboy» Alman, проект есть на github. В этой статье я рассмотрю основы Grunt, его установку и использование.
Читать дальше →
Total votes 35: ↑32 and ↓3 +29
Views 129K
Comments 15

LiveReload на Node.js

JavaScript *Node.JS *

Что это такое?


LiveReload — это утилита, которая позволяет автоматически перезагружать страницу в браузере при изменение её кода и ресурсов(html, css, js, images, etc) на сервере. Кроме того LiveReload позволяет применять изменения в CSS и JavaScript без перезагрузки страницы.
Читать дальше →
Total votes 21: ↑18 and ↓3 +15
Views 43K
Comments 17

Отладка Grunt-задания в WebStorm

Node.JS *
Вообще-то у меня PhpStorm, но, думаю, все будет работать и в WebStorm.

Запускаем в командной строке
cd <path to Gruntfile>
node --debug-brk=64005 $(which grunt) img2base64

Где img2base64 — название нужного задания. Можно опустить этот параметр, чтобы запустились все задания.
Получаем debugger listening on port 64005
Читать дальше →
Total votes 19: ↑16 and ↓3 +13
Views 9K
Comments 9

Миграция на Grunt v0.4

Website development *JavaScript *Node.JS *

Предисловие


18 февраля вышел релиз Grunt v0.4.0, с чем всех и поздравляю. Если вы еще не знакомы с Грантом — прошу пройти на официальный сайт или почитать ознакомительную статью на Хабре. Вкратце, Грант позволяет автоматизировать склеивание и минификацию js-файлов, запуск тестов, проверку кода с помощью JSHint и многое другое.

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

Зачем я использую Grunt


Как любому ленивому frontend-разработчику, мне нужен был инструмент, который автоматизирует рутинные задачи, позволяя сосредоточиться непосредственно на разработке. Так я нашел Грант, который делал за меня следующее:

  • компиляция stylus в css;
  • склеивание js-файлов;
  • проверка JavaScript линтером;
  • минификация склеенных js-файлов;
  • запуск unit-тестов (qUnit);
  • отслеживание изменений исходных файлов и автоматический перезапуск вышеперечисленных задач.
Читать дальше →
Total votes 33: ↑30 and ↓3 +27
Views 8.9K
Comments 13

Время подключать исходники. Введение в Source Maps

JavaScript *Designing and refactoring *Node.JS *
Tutorial
В современной разработке ваш код сильно отличается от кода на «боевом» сервере (production) после компиляции, минификации, объединения и разных оптимизаций. Тут-то и вступают в игру карты кода (source maps), показывая точное соответствие элементов готового рабочего кода проекта и вашего кода разработки. В этом вводном уроке мы возьмём простой проект и запустим его с помощью различных компиляторов JavaScript с целью посмотреть работу карт кода в браузере.
Читать дальше →
Total votes 28: ↑24 and ↓4 +20
Views 51K
Comments 3

Развиваем фронтенд Дневник.ру. Часть первая. Сборка и проверка JavaScript кода

«Дневник.ру» corporate blog Website development *JavaScript *

Вступление


За время существования Дневник.ру (а это более 4-х лет) скопился огромный объем JavaScript кода: часть находилась в отдельном проекте в виде подключаемых файлов, часть определялась прямо на разметке контролов, а часть собиралась прямо в code-behind при помощи StringBuilder. К этому прибавлялись:
  • растущее количество HTTP запросов для получения статичного контента – так, например, на всех страницах только в теге <head> загружалось 11 JavaScript файлов;
  • глобальные переменные, которые иногда перекрывали друг друга;

Решив, что с этим пора что-то делать, мы поставили себе первоочередную задачу: вынести все подключаемые по отдельности файлы из тега <head> в один минифицированный пакет. При этом код делился на сторонний и «наш», который планировалось проверять каким-то синтаксическим анализатором.

В этой статье мы расскажем вам о том, как решили эту задачу.
Читать дальше →
Total votes 28: ↑22 and ↓6 +16
Views 14K
Comments 19

Интересные аспекты развития JavaScript и веб-технологий 2013-го года

Website development *JavaScript *
Всем доброго дня!

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

Читать дальше →
Total votes 105: ↑80 and ↓25 +55
Views 39K
Comments 49

FileAPI 2.0: Загрузка файлов на сервер год спустя

Mail.ru Group corporate blog Website development *JavaScript *
FileAPI 2.0Привет Хабр! Примерно год назад я представил вашему вниманию первую версию open-source библиотеки FileAPI, предназначенную для работы с файлами на клиенте и последующей загрузки на сервер.

За это время был пройден долгий путь. Библиотека заработала 670+ звезд и 90+ форков. С помощью github-сообщества удалось исправить множество «детских» проблем и внести ряд улучшений. Было закрыто более 100 тасков, и благодаря Илье Лебедеву сделана загрузка файлов по частям. Сегодня я с гордостью хочу представить вам FileAPI 2.0.
Читать дальше →
Total votes 166: ↑157 and ↓9 +148
Views 68K
Comments 85

Подарок всем front-end разработчикам. grunt(Jade+Stylus+Watch)

CSS *JavaScript *HTML *


Здравствуйте Уважаемые хабра-пользователи!

Во-первых, всех с уже наступившем Новым Годом. Желаю Вам добра и развития в Вашей области деятельности!

Во-вторых, в качестве подарка я подготовил небольшой инструмент, которым сам пользуюсь уже порядка полугода. Данный инструмент требует минимального времени на настройку, но это никак не влияет на отдачу, которую Вы получаете от его использования.
Читать дальше →
Total votes 49: ↑26 and ↓23 +3
Views 41K
Comments 21

GulpJS — фантастически быстрый сборщик проектов

Website development *JavaScript *Node.JS *
Gulp.js это потоковый сборщик проектов на JS. Он использует Stream и действительно является очень быстрым. Для примера у меня есть проект где около тысячи stylus файлов, GruntJS нужно примерно 2.5 секунды на сборку и 2 секунды на обработку autoprefixer'ом. Gulp все это делает за 0.5 секунды выигрывая у GruntJS минимум в 4 раза.



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

В этой статье будет больше практики, мы соберем среду разработки фронтенда используя Jade и Stylus, запустим локальный сервер и подключим Livereload. Проект я выложил на Github, экспериментируйте.

Читать дальше →
Total votes 39: ↑39 and ↓0 +39
Views 293K
Comments 48

Init.js: Зачем и как разрабатывать с Full-Stack JavaScript

JavaScript *Node.JS *MongoDB *
Translation

История


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

Окей, значит людям это нужно. На этом можно даже заработать денег. И единственная причина, по которой люди до сих пор этим не пользуются: вы не реализовали свою идею. Пока не реализовали.

И наконец, в один прекрасный день вы решили: “Сделаем это!”. И вот вы уже пытаетесь разобраться как реализовать бизнес-логику своего приложения, ту киллер-фичу, которая будет двигать продукт вперед. У вас есть идея как это сделать, и вы знаете, что способны на это. И вот вы говорите: “Готово! Работает!” У вас есть успешный прототип! Осталось только упаковать его в веб приложение.

“Окей, сделаем сайт,” говорите вы.

А только потом вы понимаете, что для этого нужно выбрать язык программирования; нужно выбрать (современную) платформу; нужно выбрать какие-то (современные) фреймворки; нужно настроить (и купить) хранилище, базы данных и хостинг; нужно обеспечить интерфейс для администрирования; нужно обеспечить контроль доступа и систему управления контентом.

Перед вами десятки и десятки архитектурных решений, которые необходимо принять. И вы не хотите ошибиться: требуются технологии, которые позволят вести быструю разработку, поддерживают постоянные итерации, максимальную эффективность, скорость, устойчивость и многое другое. Вы хотите быть бережливым (lean) и гибким (agile). Вы хотите использовать технологии, которые помогут вам быть успешным как в краткосрочной, так и в долгосрочной перспективе. А выбрать их далеко не всегда так просто.

“Я перегружен”, говорите вы и чувствуете себя перегруженным. Энергия уже не та, что была в начале. Вы пытаетесь собраться с мыслями, но работы слишком много. Прототип медленно блекнет и умирает.
Читать дальше →
Total votes 34: ↑30 and ↓4 +26
Views 30K
Comments 29

Angular boilerplate. Простота — тренд молодежи

Website development *JavaScript *Angular *
Tutorial
Любая физическая система стремится к состоянию с наименьшей потенциальной энергией. И программисты не исключение. Поэтому речь пойдет о том, как упростить себе жизнь при разработке на angular.js, используя при этом сервисы, которые сейчас в тренде. Главным образом, я буду ненавязчиво пиарить свое архитектурное решение angular-boilerplate, а на закуску предложу поделиться своим опытом и идеями в комментариях.

Мотивация


Свести рутину к минимуму, создать интуитивно понятную архитектуру и собрать вместе то, что называется best practices.
Читать дальше →
Total votes 26: ↑23 and ↓3 +20
Views 23K
Comments 38

Сравнение популярных систем сборки для frontend-разработчиков

Website development *JavaScript *Node.JS *


Я стал замечать, что в последнее время build-системам стали уделять всё больше внимания, и, под влиянием этого, их в одночасье стало настолько много, что, честно говоря, уже всех и не упомнить. Последнее время у меня на слуху четыре системы: Grunt, Gulp, Brunch и Gear. Про все что-то где-то было написано, но ни разу не ставился вопрос о том, какие преимущества или недостатки они имеют друг перед другом? И именно поэтому я решил провести сравнительный анализ самых популярных build-систем(по версии google).

Но сперва надо определиться с критериями, по которым мы будем оценивать эти системы:

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


Теперь, я полагаю, с вводной частью можно покончить и приступить, наконец, к сравнению.
Читать дальше →
Total votes 71: ↑65 and ↓6 +59
Views 45K
Comments 18

Оптимизируем Gruntfile

Website development *JavaScript *Node.JS *
Translation

Введение


Если Grunt — новое для вас слово, то вы можете сначала ознакомиться со статьей Криса Койерса «Grunt для людей, кто думает, что такие вещи как Grunt уродливы и тяжелы». После введения от Криса, у вас будет свой собственный Grunt проект и вы уже попробуете на вкус все возможности, которые Grunt нам предоставляет.

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

  • Как сохранить ваш Gruntfile аккуратным и опрятным
  • Как сильно улучшить время вашей сборки
  • Как быть постоянно в курсе состояния сборки

Читать дальше →
Total votes 34: ↑32 and ↓2 +30
Views 20K
Comments 16

Как мы управляем конфигурациями в Pics.io

TopTechPhoto corporate blog Website development *Designing and refactoring *
configuration
В конце 2012 мы с ребятами собрались сделать сумасшедшую штуку – засунуть в браузер RAW конвертер, фотошоп и добавить туда возможность совместной работы над фотографиями. С технической стороны мы практически все проверили: технологии, которые позволяли все это воплотить, были сырыми, иногда требовали включения их в настройках браузера… но они были. Мы назвали это Pics.io и начали.

У нас была пачка прототипов/proof-of-concept, простыни кода с огромным количеством хардкодов. Мы решили, что нужно все это объединить в один большой продукт, который будет полностью покрывать рабочий процесс фотографа: придумали архитектуру, написали каркас, начали делать функциональность.
Читать дальше →
Total votes 18: ↑15 and ↓3 +12
Views 5.4K
Comments 14

Встречайте WebStorm 8: поддержка AngularJS, spy-js, интеграция Grunt и многое другое

JetBrains corporate blog Website development *JavaScript *
Вот и настало время весеннего обновления WebStorm, нашей IDE для front-end разработки и Node.js.
В новом WebStorm 8 появились поддержка фреймворка AngularJS, JavaScript-трейсер spy-js, долгожданные множественные курсоры в редакторе, интеграция Grunt и Bower и еще много интересных нововведений и улучшений.
Теперь обо всем по порядку.
image
Читать дальше →
Total votes 45: ↑44 and ↓1 +43
Views 24K
Comments 65
1