Главная

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

2014-09-01 в 11:00, admin, рубрики: css, html, javascript, веб-дизайн, Веб-разработка

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

Best of Awesomeness & Usefulness for Web Developers

Две недели назад я опубликовал «Лучшие интересности и полезности за год». Моим дайджестам тогда исполнился ровно один год и я хотел разместить пост точно в срок. Но не правильно рассчитал время и не упомянул много всего, что должно было быть в той подборке. И даже в опросах забыл указать в редакторах Vim, во фреймворках ExtJS и тд. За что мне очень стыдно. В целом подборка выросла как минимум в два раза и я создал репозиторий на GitHub. Моей целью не было сделать очередной awesome-* список, в которые попадает практически все подряд — лучшие и ненужные альтернативы. Я попытался выделить все самое лучшее.

DUO

Авторы проекта называют его сборщиком нового поколения для фронтенд разработчиков. DUO собрал в себе все самое лучшее от Component, Browserify и Go.

Scrapper.js

Великолепный веб-парсер для ноды.

var scraperjs = require('scraperjs');
scraperjs.StaticScraper.create('https://news.ycombinator.com/')
    .scrape(function($) {
        return $(".title a").map(function() {
            return $(this).text();
        }).get();
    }, function(news) {
        console.log(news);
    })

Way.js

Простой, компактный, функциональный и независящий от сторонник библиотек фрейморк для работы с databinding. Скрипт реально очень удобен в использовании и всего за несколько дней собрал почти 2000 звезд на GitHub.

  <form way-data="myFormData" way-persistent="true">
    <input type="text" name="name">
    <input type="text" name="age">
    <input type="text" name="gender">
  </form>

  Name: <span way-data="myFormData.name"></span>

CSS Must Watch

«Живой список» лучших видео с лекций и конференций по CSS. Продублирую содержимое репозитория на момент публикации подборки:

2014

What Is a CSS Framework Anyway?: Harry Roberts, Industry Conf [48:48]
CSS Is a Mess: Jonathan Snook, Beyond Tellerand [53:49]
Slaying the Dragon: How to Refactor CSS for Maintainability: Alicia Liu, Front-Trends [33:21]
CSS in Your Pocket — Mobile CSS Tips from the Trenches: Angelina Fabbro, CSSConf.US [34:19]
Styling and Animating Scalable Vector Graphics with CSS: Sara Soueidan, CSSConf.US [38:59]
Play Nice With CSS Tools and Methodologies: Brad Westfall, HTML5DevConf [42:47]
Effortless Style: Heydon Pickering, CSS Day [49:51]

2013

When Bootstrap Attacks: Pamela Fox, CSSConf.US [28:48]
CSS in the 4th Dimension: Lea Verou, JSConf.Asia [44:49]
Automated CSS Testing: Jakob Mattsson, JSConf.Asia [42:07]
CSSConf.EU Keynote: Nicole Sullivan, CSSConf.EU [20:57]
CSS Application Architecture: Nicolas Gallagher, SmashingConf [38:36]
Realigning & Refactoring UI: Jina Bolton, SassConf [48:08]
Normalizing Designs for Better Quality CSS: Harry Roberts, CSSConf.EU [43:40]
Automating the Removal of Unused CSS: Addy Osmani, Velocity Europe Conference [5:57]
The Humble Border-Radius: Lea Verou, Future of Web Design [37:07]
The Mind-blowing Power of Sass 3.3: Chris Eppstein, CSSConf.EU [38:54]
Front-End Tools for the Young Developer: Christian Vuerings, SF HTML5 User Group [14:16]
Maths-Powered Transforms for Creating 3D Shapes: Ana-Maria Tudor, CSSConf.EU [30:27]
Sass and OOCSS Sitting in a Tree K-I-S-S-I-N-G: Nicole Sullivan, TXJS [27:50]
CSS Levels Up: Angelina Fabbro, CSSConf.EU [31:38]
Architecting Scalable CSS: Harry Roberts, Beyond Tellerand [41:57]
More CSS Secrets: Another 10 Things You May Not Know about CSS: Lea Verou, W3Conf [60:39]
Atomic Cascading Style Sheets: Renato Iwashima, HTML5DevConf [52:33]

2012

Open Source Tools and Libraries for Designers: Julie Ann Horvath, HTML5DevConf [29:39]
GitHub's CSS Performance: Jon Rohan, CSS Dev Conf [40:50]

2010

Handcrafted CSS: Dan Cederholm, Build Conference [44:29]
The Top 5 Mistakes of Massive CSS: Nicole Sullivan, Build Conference [37:53]

Heatmap.js

Я думаю все уже поняли, что делает этот скрипт. Это предельно простая библиотека для создания тепловых карт. Требуется лишь указать DOM элемент и диапозон значений. Существуют плагины для GMAPS, Leaflet и OpenLayers. Кстати автор Heatmap.js хранит у себя на гитхабе nude.js, который распознает изображения в жанре «Ню».