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

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

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

Best of Awesomeness & Usefulness for Web Developers

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

DUO

Несколько интересностей и полезностей для веб разработчика #26
Авторы проекта называют его сборщиком нового поколения для фронтенд разработчиков. 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

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

2013

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

2012

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

2010

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

Heatmap.js

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

Monocle — неординарный эффект для новостных лент.

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

Западные мысли или что стоило бы перевести на Хабре:

Говорит и показывает Хабр:

Напоследок:

                                                         Предыдущая подборка (Выпуск 25)

Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите, пожалуйста, в личку.

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

Автор: ilusha_sergeevich

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js