11.01.13
by

Полезности {Хабра}

 

Выпуск #7

Browserhacks


Название говорит самое за себя. Данный ресурс — хранилище всевозможных хаков к существующим браузерам. Увидев этот сайт, сам Paul Irish мудро произнес: «Holy shit amazing«.

5 замечательных изобретений от David DeSandro (Twitter, H5BP)

Masonry — в переводе «каменная кладка» — идеальное решение для создания Grid Layout. Качественная «замена» для неутвержденной Flexbox спецификации. Простой синтаксис дает возможность без труда создавать Pinterest/Surfingbird подобные макеты. Существует на нативном JavaSciprt и как jQuery плагин.

Isotope — «изысканный jQuery плагин для магических лэйаутов. Позволяет с легкостью фильтровать, сортировать и придавать динамичность макету».

imagesLoaded.js — определяет когда изображения были загружены. Включает в себя 4 события: always, done, fail, progress. Простой в использовании.

Draggabilly — аналог jQuery UI Draggable на нативном JavaScript в лучших традициях автора кода. Работает с touch интерфейсом.
Close Pixelate — «пикселизация» изображений в Canvas аля потаённые места в некоторых работах жанра НЮ.

Юзабилити билета в кинотеатр


Прочитав недавний пост «Юзабилити посадочного талона: как спасти две человеческие жизни в год«, захотелось поделиться одним пэном на Codepen.

Ionicons — симпотичный иконочный шрифт

Kraken и JPGmini


JPEGmini — замечательное приложение для Windows и Mac, в котором используются интеллектуальные алгоритмы сжатия без видимого эффекта. Бесплатная версия приложения позволяет оптимизировать не более 20мб в сутки, чего вполне достаточно блогерам. Но если говорить о «реальной» оптимизации изображений в проекте, то выбирать нужно Kraken, который обладает API и работает с JPG, PNG, GIF и SVG файлами. Стоит также сказать, что Кракен сотрудничает с Microsoft в проекте Modern.ie.

PSD Fonts

Данный сервис синхронизируется с вашим Dropbox аккаунтом, после чего отображает все существующие шрифты в выбранном .PSD и показывает где их купить на MyFont. Проект на GitHub, все работает благодаря замечательному PSD.rb

Нужная красивая CSS ленточка? В «интернетах» даже существует генератор к этому случаю:

UCSS и Helium

Оба инструмента анализируют сайт и информируют о неиспользуемых CSS классах. Разница в том, что UCSS для Node.js, аHelium это клиентский JavaScript и судя по количеству старов популярнее аналога от Opera Software. Пока не получилось у себя решить проблему с npm зависимостями, чтобы протестить UCSS и предположить, что лучше.

Devtools Terminal

image

А еще можно красиво оформить свои контакты в консоле:

Напоследок:

 

  • RethinkDB построена для хранения JSON документов и способна масштабироваться на несколько машин.
  • slidr — очень простой и удобный слайдер.
  • Responsiveicons — интересная мысль, а еще интереснее было бы увидеть полноценный иконочный шрифт к этой затее.
  • Ratchet и Clank — быстрое прототипирование мобильных приложений на HTML, CSS и JS
  • Rimg.js — простой скрипт упрощает верстку отзывчивых изображений.
  • Mobify.js — универсальный помощник в создании отзывчивой верстки.
  • Grunticon — Grunt плагин для работы с иконками
  • «Sails.js make it easy to build custom, enterprise-grade Node.js apps.»
  • Montage JS — An HTML5 framework for building modern Web Apps.
  • slash-lang — новый язык программирования для веба. Со слов авторов проекта: «вдохновлен Ruby, Perl и старым добрым PHP.
  • TrifleJS — эмуляция работы движка Trident (Internet Explorer) с помощью V8 и PhantomJS.

Выпуск #6

Zephir — Ze(nd Engine) Ph(p) I(nt)r(mediate). Зефир — это компилируемый высокоуровневый язык программирования, предназначенный для написания PHP расширений без использования C. Проект от создателей Phalcon (скомпилированный PHP MVC Framework). О Zephir на Sitepoint

JSDB.IO — большая и качественная база нужных скриптов/библиотек/фреймворков на JavaScript. Все распределено по категориям: Animation, Application, Audio, Video, Games и др. Дабы собрать все популярные .js воедино добавлю еще три ссылки: Microjs (множество маленьких полезностей до 5кб), а еще jsdelivr и cdnjs, которые позволяют добавлять собственные скрипты.

Snap.svg — продукт от Adobe Webplatform. Недавно я рассказывал про «достойного конкурента Raphaël» и в комментариях оспоривали эту фразу из за отсутствия поддержки такого же множества браузеров. В разработке Snap участвует автор Raphaël — Дмитрий Барановский, а причина создания новой библиотеки для работы с SVG — невозможность поддерживать все возможности SVG в старых браузерах.

At.js — очень юзабельный скрипт для автозаполнения (в демо используется Emojify). А еще есть более функциональная библиотека для автозаполнения — Typehead от Twitter.

$('.atwho-inputor').atwho({
  at: "@", data: ["one", "two", "three"],
});



PhysicsJS — модульный, расширяемый и простой в использовании физический движок на JavaScript. Посмотрев на демонстрацию работы движка можно с уверенностью сказать, что с его помощью разработка игры подобной Angry Birds станет намного проще. Аналог: newton.

Функций смягчения


Функция смягчения (easing) определяет скорость течения анимации, делая её более реалистичной. Реальные вещи не начинают двигаться мгновенно и с постоянной скоростью. Если мы открываем ящик стола, то сначала ускоряем его, а на второй половине пути — тормозим. Если что-то упало, то оно сначала летит всё быстрее и быстрее, а ударившись о пол — слегка подпрыгивает обратно. Этот сайт поможет каждый раз подобрать нужную функцию смягчения. Проект хабраюзера Iskin наGitHub.

Reportr


Весьма интересный проект на GitHub — персональный дашборд для каждого. Благодаря этому сервису вы сможете отслеживать свою активность в сети (с помощью расширения для Chrome), на Facebook, Twitter, Foursquare, GitHib и даже физическую активность с Runkeeper. Функциональное API на JavaScript, PHP, Python. 1000+ старов и народный фронт развивающий возможности сервиса.

Все 30 иконок «трогательных» жестов

Напоследок:

Codepen: Полноценный градиент текста (Webkit Nightly, Chrome Canary):

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

Выпуск #5

 

Stackedit


Шедевр среди Open Source редакторов! Основан на библиотеке разметки (Markdown) PageDown, которая используется в StackOverflow и других проектах StackExchange. Stackedit синхронизируется с Dropbox и Google Drive, а также сохраняет все документы в local storage, благодаря чему редактирование возможно и в онлайне и в оффлайне. Возможность импорта/экспорта/конвертация Markdown и HTML. Публикация в WordPress, Tubmlr, Blogger, Github, Gist и на любой SHH сервер. Статистика, работа в режиме realtime, поддержка различных синтаксисов (Prettify/Highlight.js), LaTeX, темы… Это просто великолепный продукт.


App.io позволяет запускать iOS приложения в браузере. Это уже тема мобильной разработки, но недавно я читал статью про Sprinty Driver и обратил внимание на то, что BeetlePlay разрабатывают демо-версии на Flash. Решил поделиться. Также советую фреймворк для создания анимаций в UIKit от IFTTT.


В одном из своих дайджестов я дал ссылку на Webflow. Сейчас хочу поделитьcя еще одним не менее популярным GUI для создания отзывчивой верстки — IM Creator. Главным отличием является более широкий выбор тем. Чем-то напоминает WiX.

Автопрефиксер — утилита, которая позволит вам забыть про префиксы. Она берёт последние данные о префиксах и популярности браузеров с Can I Use. Доступно для Ruby, Compass, Rework, Node.js, Javascript, PHP, Sublime и даже Prepros.

Keypress


Лучшее решение на JavaScript для захвата событий с клавиатуры:

keypress.combo("shift s", function() {
    console.log("You pressed shift and s");
});

// There are also a few other shortcut methods:

// If we want to register a counting combo
keypress.counting_combo("tab space", function(e, count) {
    console.log("You've pressed this " + count + " times.");
});

 

Множество вариаций с комбо

Dropzone


Прекрасный скрипт для создания drag&drop области загрузки файлов. Поддерживается в Chrome 7+, Firefox 4+, IE 10+, Opera 12+, Safari 6+. Работает все предельно просто:

Подключаем Dropzone.js (есть AMD модуль для RequireJS):

<script src="./path/to/dropzone.js"></script>

Cоздаем форму:

<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>

Также имеется возможность создавать dropzone програмно:

// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

// jQuery plugin
$("div#myId").dropzone({ url: "/file/post" });

Напоследок:

За $10 вы сможете работать с Git в вашем Sublime

  • Яндекс опубликовал материалы с прошедшего YaC 2013 (front-end в 4 зале, рекомендую)
  • Odometr — скрипт для создания красивых счетчиков
  • Prerender — Open Source решение для полноценной поисковой индексации ваших JavaScript приложений
  • Source от Одноклассников — Front-end documentation engine
  • MCSS от Одноклассников — многослойная система организации CSS основанная на OCSS и БЭМ
  • Изобретательность от CSS Tricks — Conical Gradients in CSS
  • В CERN решили продемонстрировать первобытный вид серфинга в интернете и создали Line Mode Browser
  • Очень необычный сайт Fontwalk, «запаралаксен полностью»

#4

 

Stackedit


Шедевр среди Open Source редакторов! Основан на библиотеке разметки (Markdown) PageDown, которая используется в StackOverflow и других проектах StackExchange. Stackedit синхронизируется с Dropbox и Google Drive, а также сохраняет все документы в local storage, благодаря чему редактирование возможно и в онлайне и в оффлайне. Возможность импорта/экспорта/конвертация Markdown и HTML. Публикация в WordPress, Tubmlr, Blogger, Github, Gist и на любой SHH сервер. Статистика, работа в режиме realtime, поддержка различных синтаксисов (Prettify/Highlight.js), LaTeX, темы… Это просто великолепный продукт.


App.io позволяет запускать iOS приложения в браузере. Это уже тема мобильной разработки, но недавно я читал статью про Sprinty Driver и обратил внимание на то, что BeetlePlay разрабатывают демо-версии на Flash. Решил поделиться. Также советую фреймворк для создания анимаций в UIKit от IFTTT.


В одном из своих дайджестов я дал ссылку на Webflow. Сейчас хочу поделитьcя еще одним не менее популярным GUI для создания отзывчивой верстки — IM Creator. Главным отличием является более широкий выбор тем. Чем-то напоминает WiX.

Автопрефиксер — утилита, которая позволит вам забыть про префиксы. Она берёт последние данные о префиксах и популярности браузеров с Can I Use. Доступно для Ruby, Compass, Rework, Node.js, Javascript, PHP, Sublime и даже Prepros.

Keypress


Лучшее решение на JavaScript для захвата событий с клавиатуры:

keypress.combo("shift s", function() {
    console.log("You pressed shift and s");
});

// There are also a few other shortcut methods:

// If we want to register a counting combo
keypress.counting_combo("tab space", function(e, count) {
    console.log("You've pressed this " + count + " times.");
});

 

Множество вариаций с комбо

Dropzone


Прекрасный скрипт для создания drag&drop области загрузки файлов. Поддерживается в Chrome 7+, Firefox 4+, IE 10+, Opera 12+, Safari 6+. Работает все предельно просто:

Подключаем Dropzone.js (есть AMD модуль для RequireJS):

<script src="./path/to/dropzone.js"></script>

Cоздаем форму:

<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>

Также имеется возможность создавать dropzone програмно:

// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

// jQuery plugin
$("div#myId").dropzone({ url: "/file/post" });

Напоследок:

За $10 вы сможете работать с Git в вашем Sublime

  • Яндекс опубликовал материалы с прошедшего YaC 2013 (front-end в 4 зале, рекомендую)
  • Odometr — скрипт для создания красивых счетчиков
  • Prerender — Open Source решение для полноценной поисковой индексации ваших JavaScript приложений
  • Source от Одноклассников — Front-end documentation engine
  • MCSS от Одноклассников — многослойная система организации CSS основанная на OCSS и БЭМ
  • Изобретательность от CSS Tricks — Conical Gradients in CSS
  • В CERN решили продемонстрировать первобытный вид серфинга в интернете и создали Line Mode Browser
  • Очень необычный сайт Fontwalk, «запаралаксен полностью»

#3

 

Доброго времени суток уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Pace.js — это самый простой способ (документация здесь) добавить к вашему проекту прогресс бар. Для Pace существует несколько тем, которые описываются только на CSS. От Hubspot есть еще двауниверсальных проекта на GitHub: Vex и Messenger — «Dialogs for the 21st century» и «Alerts for the 21st century» соответственно. Рекомендую.

imageFlat UI Free 2.1
Популярный информационный ресурс Designmodo опубликовал на GitHub обширный набор элементов интерфейса в стилей трендового плоского дизайна. Об этом еще в марте писал хабраюзер ilya42. А на этой недели проект обновился до версии 2.1. Теперь в Flat UI есть поддержка Bootstrap 3, появился ряд новых элементов, иконок, обновилились шрифты. Количество старов уже больше 5000.

Framer
Потрясающее изобретение разработчика Koen Bok. Framer — это бесплатный инструмент для прототипирования интерактивных и анимационных интерфейсов. Приложение синхронизируется с Photoshop, нарезает слои макета на .png (конечно же для верстки придется немного порезать руками, но все зависит от педантичности дизайнера к макету) и все верстает на z-index и trasnform matrix3d. А интерактив и анимацию дизайнеры добавят с помощью этого простого синтаксиса прямо в браузере (к сожалению только Chrome). PSD.Logo, PSD.OverviewButton — это имена PNG файлов. Говоря о разработчике Framer, хочется также упомянуть про его проект Cactus — генератор статистических сайтов на Python использующий Django template. 

Blendme.in


Буквально на днях появилось одно очень удобное расширение для Photoshop — Blendme.in. Благодаря ему все самые популярные наборы иконок будут доступны прямо в окне фотошопа. Графический файлы распространяются под лицензией Creative Commons Attribution 3.0 Unported License.

Версия для Photoshop CC     Версия для Photoshop CS6

Editr.js


С помощью Editr вы сможете организовать на своем сервере playground для работы с HTML, CSS, JavaScript. Качественный и красивый проект: основан на ACE Editor, поддержка Emmet, Base64, LESS и CofeeScript, валидация JS и CSS, множество тем.

Responsive Elements

Простой и в тоже время очень юзабельный плагин на jQuery. Для того чтобы сделать элемент отзывчивым добавляем к нему аттрибут data-respond и прописываем в CSS классы .gt и .lt с соответствующими размерами по аналогии с min-width и max-width в media-queries:

.quote.lt500 {background: blue}
.quote.gt150.lt300 {background: red} /* min-width: 150, max-width: 300 */

Trunk.js


Юзабельный jQuery плагин для создания адаптивного меню. Очень красивая демо страничка не оставит вас равнодушными к этому скрипту смайл. Также существуем похожий, возможно, даже более функциональный скрипт на нативном JS — Responsive-nav

Composite

Выше я уже рассказывал про инструмент для «интерактивного прототипирования». Composite — это нечто похоже: На данный момент это приложение для только iOS, которое удаленно подключается к фотошопу и позволяет создавать дизайнерам интерактивные прототипы. Еще одно отличие это то, что он платный возможно и более стабильный.

Brace


«Brace is the new way to host websites». На самом деле это интересный способ хостить простые сайты. Можно даже что-нибудь сделать с CMS основанных на XML. Но пока это лишь «интересность» и, возможно, для кого-нибудь удобный сервис для демонстрации верстки клиентам.

Напоследок:

  • Polymer — очень амбициозный проект. Это новый тип библиотеки для веба, основанной на веб-компонентах, которая предназначена для функционирования последних элементов веб-платформы на современных браузерах. Грубо говоря, это огромной набор полифилов для создания поддержки последних стандартов и кроссбраузерности в браузерах.
  • Fireshell — я бы сказал что это более полноценный Boilerplate c Grunt, SCSS/SASS и прочим, чем существующий H5BP
  • Возможно кто-то не увидел мой пост про SVG.js
  • Browserswarm — это как Browserstack, но для тестирования JS
  • CLNDR.js — один из самых качественный и функциональных календарей на JS.
  • Два свежеиспеченных красивых шрифта: Fira от Mozilla для FirefoxOS (GitHub) и The Exo, который появился благодаря Kickstarter
  • Simperium — realtime сервис, хороший конкурент для Pusher. Более кроссплатформенный и менее дорогой. Разработан в Automattic (WordPress, Gravatar и др.)
  • Learnyounode — еще одна обучалка для Node.js, но консольная.#2

 

#3

 

Великолепный онлайн конвертер файлов, который поддерживает в общей сложности 140 форматов следующих типов: archive, audio, cad, document, ebook, image, presentation, spreadsheet, video. Синхронизируется с Dropbox и Google Drive, благодаря чему возможно использование на всех смартфонах. А самое приятное это то, что для данного сервиса существует функциональное и простое API.

Munee


Многофункциональная PHP5.3 библиотека, которая является отличным решением для оптимизации проекта. С ее помощью вы можете на лету компилировать LESS, SCSS и CofeeScript файлы, изменять размеры изображений и обрезать их, минифицировать CSS и JS, объединять их в один запрос. Также Munee дает возможность грамотно кэшировать ресурсы, как на стороне сервера, так и на стороне клиента. Проект на Github

Brunch


Первоклассный сборщик проектов на Node.js. С точки зрения оптимизации аналогичен Munee (про PHP написал раньше, потому что старшим надо уступать, и вообще подобные удобства на нем появляются «не часто»). В остальном огромное множество различных настроек сборки для: Boilerplate, Bootstrap, Skeleton, Angular.js, Backbone.js, Jade, Phonegap и тд.

Favico.js

Маленькая, практически незаметная фавиконка, может быть очень полезным элементом в грамотном интерфейсе. Данный скрипт позволяет с легкостью манипулировать всевозможными способами отображение favicon в вашем проекте, даже транслировать произвольное видео или запись с веб-камеры. Также существует jQuery Notify Better с похожим, но менее широким функционалом.

Animo.js

На сегодняшний день, мы имеем возможность красиво и легко анимировать элементы различными способами на CSS с помощьюEffeckt.css или Animate.css. Animo.js — это маленькая библиотека (7кб), которая позволяет манипулировать CSS анимациями (animate+animo.css) и добавляет кроссбраузерный Blur эффект. Работает с jQuery 2 и старше. Синтаксис весьма прост:

$('#demo-a').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {
    $('#demo-n').animo({animation: "fadeOutUp", duration: 0.5, keep: true}, function() {
        $('#demo-i').animo({animation: "fadeOutDown", duration: 0.5, keep: true}, function() {
            $('#demo-m').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {
                $('#demo-o').animo({animation: "fadeOutRight", duration: 0.5, keep: true}, doMagicIn()); // function to fade them back in
            });
        });
    });
});

Gridism

Если вы не используете CSS фреймворки (Bootstrap, Foundation, UIkit и др), то рекомендую Gridism, как самый простой и миниатюрный способ для создания отзывчивой сетки.

Rework

«Произвольный CSS препроцессор для Node.js и браузеров». Пока не успел хорошенько распробовать его. Но в целом это похоже на качественную смесь LESS, SCSS и Stylus, потому что здесь есть JavaScript с нормальными функциями, встроенный Compass, свобода от префексов, различные «тонкие» моменты, как прозрачные миксины или встроенные полифилы .at2x([vendors]) для retina дисплеев.

Basiliq


Базилик — это PSD файл, содержащий в себе огромное количество UI элементов для создания десктопных и мобильных интерфейсов. Лично мне очень сильно понравился стиль «Freehand» (ручная работа) и еще больше он понравится после просмотра промо ролика. А сделано это все в Самаре, студии CloudCastle респект за качество и чувство вкуса.

Cleaver

«30-second Slideshows for Hackers».

npm install -g cleaver

 

cleaver path/to/something.md

 

title: Basic Example
author:
  name: "Jordan Scales"
  twitter: "@jdan"
  url: "http://jordanscales.com"
output: basic.html
controls: true

--

# Cleaver 101
## A first look at quick HTML presentations

--

### A textual example

Content can be written in **Markdown!** New lines no longer need two angle brackets.

This will be in a separate paragraph

--

### A list of things

* Item 1
* Item B
* Item gamma

No need for multiple templates!

И в итоге мы получим вот такую презентацию

Напоследок:

Возможно кто-то не увидел Shade.less/Shade.css.
Недавно я искал инструмент похожий на Kuler для определения Flat цветов и нашел только эту палитру (буду благодарен ссылке на необходимый сервис в комментариях).
Занимательные CSS диковинки: Client-side full-text search in CSS, Мона Лиза на чистом CSS(image2css) и Картман.

#2

 

Webflow


С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».

Если Вам GUI для верстки не комильфо сам по себе как для меня, все равно рекомендую зарегистрироваться и экспортировать парочку responsive макетов. А еще есть простой генератор отзывчивого лэйаута и Responsive Patterns.

Parallax.js

Функциональный и простой инструмент для создания параллакс эффекта.


Для всех элементов на которых будет применяться эффект указываем класс layer и устанавливаем значение скорости движения в аттрибуте data-depth. В библиотеке есть ряд параметров:

<ul id="scene"
  data-calibrate-x="false" // Отключает калибровку по горизонтали
  data-calibrate-y="true"  
  data-invert-x="false"     
  data-invert-y="true"  // Устанавливает инверсию по вертикали
  data-limit-x="false"
  data-limit-y="10" // Устанавливает ограничение в 10 циклов для движения
  data-scalar-x="2"
  data-scalar-y="8" // Устанавливаем чувствительность движения
  data-friction-x="0.2"
  data-friction-y="0.8"> // Как я поннимаю это хаотичность движения элементов
  <li class="layer" data-depth="0.00"><img src="layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer2.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer1.png"></li>
</ul>

После чего передаем родительский элемент в Parallax конструктор:

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

Intention.js

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

Device.js

Cкрипт по принципу Modernizr присваивает тегу HTML классы ios/android/windows/blackberry phone/tablet landscape/portrait, тем самым избавляет Вас от необходимости прописывать основные разрешения устройств в media queries.

Говоря о «кроссдевайсности» хочется также упомянуть про Risizer — Bookmark для для тестирования отзывчивого дизайна. Все мы знаем про множество подобных сервисов, но мне кажется, этот способ самый удобный.

GistBox


GistBox синхронизируется с вашим GitHub профилем и в нужном виде отображает Gist лист. Все ваши сниппеты отсортированы по меткам и всегда под рукой. Доступен как расширение для Chrome.

CSS Modal

Начну с того, что проект создан одним из членов команды Boilerplate. CSS Modal — самый простой способ добавить в своей проект адаптивное модальное окно:

Dotdotdot.js, Uikit, HTML2PDF

Недавно мне понадобилось сокращать абзацы многоточием. Но стандартный text-overflow работает только на одной строке сno-wrap. И на просторах интернета мне повстречался замечательный скрипт (dotdotdot.js), который отлично решает эту задачу.

Uikit — плюс один к существующим веб фреймворкам со своими особенностями.

HTML2PDF. Сервис написан на основе Phantom.js. Возможно, пригодится для оформления портфолио в .pdf.

 

#1

Prepros


Великолепное приложение препроцессор для CSS, JS. Компилирует файлы следующих типов: LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml. Минифицирует JS на лету, при каждом изменении файла. Оптимизирует изображения. Доступен для Windows и Mac, а также как расширение для Chrome. Плюс ко всему создает HTTP сервер, для тестирования сайта на разный устройствах. Бесплатная замена CodeKit’у и Ghostlab’у вместе взятых, что в сумме позволит Вам сэкономить $75.

Dimensionsapp

Говоря о тестировании отображения веб приложений на разных экранах, хочется сказать про онлайн сервис Dimensionsapp.

Brackets

Open source редактор от Adobe написанный на JavaScript специально для веб-разработчиков. Приятный дизайн, встроенное обновление страницы без перезагрузки (аналоги: Emmet LiveStyle и LiveReload), просмотр стилей для HTML элементов из редактора по Cmd/Ctrl + E и множество плагинов, которых будет еще больше.

VerbalExpressions

Кто не любит писать регулярные выражения? Что если проверка на URL в JS будет выглядеть следующим образом:

// Create an example of how to test for correctly formed URLs
var tester = VerEx()
            .startOfLine()
            .then( "http" )
            .maybe( "s" )
            .then( "://" )
            .maybe( "www." )
            .anythingBut( " " )
            .endOfLine();

// Create an example URL
var testMe = "https://www.google.com";

// Use RegExp object's native test() function
if( tester.test( testMe ) ) alert( "We have a correct URL "); // This output will fire
else alert( "The URL is incorrect" );

Библиотека также существует для: Ruby, C#, Python, Java, Groovy, PHP, Haskell, C++, Objective-C.
GitHub

HTML.js

Относительно недавно я рассказал на Хабре про Voyeur.js с очень приятным синтаксисом для работы с DOM. HTML.js это форк Voyeur’а с рядом новых методов: .each(), remove(), ify(), ._other(), _fn()
image
GitHub

LiveScript

LiveScript — это «язык, который компилируется в JavaScript, косвенный потомок CoffeeScript». Синтаксис, возможно, не очень привлекательный на первый взгляд, зато сам LiveScript очень и очень функциональный:

LiveScript

take = (n, [x, ...xs]:list) -->
  | n <= 0     => []
  | empty list => []
  | otherwise  => [x] ++ take n - 1, xs

take 2, [1 2 3 4 5] #=> [1, 2]

take-three = take 3
take-three [3 to 8] #=> [3, 4, 5]

# Function composition, 'reverse' from prelude.ls
last-three = reverse >> take-three >> reverse
last-three [1 to 8] #=> [6, 7, 8]

 

А вот сколько бы нам с Вами понадобилось JS кода

git-html5.js

Реализация git на JavaScript в вашем браузере. Применение я вижу только в примере работы вышеописанного Brackets (на JavaScript) как расширения для Chrome, но уверен, что это полезная штука для настоящих гиков.

GitHub
Демо-страничка с демонстрацией Commit, Push, Pull и Branching

Краудфандинг: Ghost — Just a Blogging Platform

Насколько я знаю, это первая CMS, которая будет разработана силами краудфандинга. Автор проекта John O’Nolan собрал уже $400 000 на Kickstarter, что составляет 785% требуемой суммы. Ghost — это открытый проект, замечательный дизайн и очень удобный адаптивный интерфейс.

Infogram


Инфографика способна не только организовать большие объёмы информации, но и более наглядно показать соотношение предметов и фактов во времени и пространстве, а также продемонстрировать тенденции. Inforgram — очень простой инструмент для создания инфографики. Возможность импортировать данные в форматах XLS, XLSX и CSV. Если я не ошибаюсь, то это единственный сервис для создания интерактивной инфографики. Добавляйте диаграммы, карты, фото, видео. Сервис выполнен в формате социальной сети. Делитесь, шарьте, используйте embed code для своих сайтов.

Оставьте комментарий