Несколько интересностей и полезностей для веб-разработчика (выпуск 3)

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

    Cloudconvert




    Великолепный онлайн конвертер файлов, который поддерживает в общей сложности 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) и Картман.

    Спасибо всем за внимание.

                                 Следующая подборка (Выпуск 4)      Предыдущая подборка (Выпуск 2)

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

    Какой CSS препроцессор вы используете?

    Понравилась ли вам подборка?

    • +123
    • 59,5k
    • 29
    Поддержать автора
    Поделиться публикацией

    Комментарии 29

      –5
      День программиста ощущается. За пол часа ни плюса, ни минуса. Люди программируют на Ruby, Python, Perl и Assembler.
        +2
        Спасибо за Cleaver!
          +4
          От «клевера» в восторге — уже думаю как бы поинтереснее интегрировать в один из своих сайтов, где много вопросов задают
            +3
            Эх, cloudconvert! А я уж было понадеялся, что файлы из под Corel Draw будут конвертироваться нормально… Увы и ах.
            Что, впрочем, не умаляет остальных достоинств этого сервиса. Просто сразу про .cdr подумал, проверил и огорчился.
              0
              Файлы из-под CorelDraw вообще никто не любит. Кроме печатников баннеров и резчиков Оракала :)
              0
              Демки Favico.js и jQuery Notify Better отказались работать в Safari.
                0
                Демка Favico.js в FF тоже не работает
                  0
                  Да и в хроме последнем — тоже
                –14
                как то непривычно звучит словосочетание «отзывчивой сетки»,
                может все-таки оставить «респонсивной сетки»?
                  +8
                  самхау анъюжиал саундс колокейшн «отзывчивой сетки» мэйби лив «респонсивной грид» со?
                    0
                    все верно, автор просто взял статью и закинул в гугл переводчик
                      0
                      Минусую. Уверен в том, что это твой сайт, и ТЫ его рекламируешь, выставляя еще меня за копипастера
                        0
                        это не мой сайт
                          0
                          Не верю. Каждый из приведенных «интересностей/полезностей» собирался по одному из множества источников. А тут какой-то сайт, и ты про него два раза написал в комментах.
                            0
                            просто непонятно за что заминусовали vasilyyaremchuk
                              0
                              Другим понятно. Смотрите на даду публикации 14 Sep 2013 10:17:28 +0000. Мой пост на 10 часов раньше.
                    +3
                    А сделайте ссылки на предыдущие части. Хорошая подборка, хочется предыдущие тоже глянуть.
                      0
                      Я не планирую публиковать дайджесты в запланированный период, а только по факту, когда найдется этот, по моему мнению, интересный и полезный материал. Я думаю подборка не последняя и каждый раз собирать ссылки на предыдущие — как-то не правильно.

                      Несколько интересностей и полезностей для веб-разработчика

                      9 интересностей и полезностей для веб-разработчика
                        +1
                        Думаю, можно соединить все посты в связанный список — указать в каждом посте ссылку на предыдущий, как это делают Zfort Group в своих дайджестах.
                          0
                          А об этом я не подумал. Будет сделано. Спасибо вам за интерес.
                          0
                          обязательно делайте ссылки на другие выпуски, хотя бы на соседние. это не для периодичности, а для связности.

                          спасибо!
                        –1
                        ilusha_sergeevich, это ведь не ваша подборка а просто перевод взятый отсюда?
                          0
                          Нет) Это именно моя подборка. Я очень рад, что мои статьи публикуются на западе. Хотя скорее всего это кто-то из хабраюзеров. Я знаю как минимум одного такого.
                            –1
                            вот это уровень!
                            0
                            А может это вообще ваш сайт и вы решили чуть посетителей добавить?
                              0
                              конечно же нет, все мои сайты есть в моем профиле. Я просто искал информацию кто реально использует Gridism, скопировал «gridism.css»>" в гугл и на второй странице нашел этот сайт, показалось что это просто перевод
                                0
                                Gridism использую, например, я)))
                            0
                            А почему Rework в препроцессорах, если он постпроцессор и прекрасно объединяется с Sass, LESS или Stylus
                              0
                              В подборке и так два опроса. Чтобы не создавать третий «Используете? — Да или Нет».

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое