Geekly Articles each Day
📜 ⬆️ ⬇️

Some interesting and useful things for web developer # 32

Good day, dear habravchane. Recently, I saw some interesting and useful tools / libraries / events that I want to share with Habr.

Iccocoder



This is not just a sandbox, but a full-fledged open source editor in your browser. In general, there are desktop versions, but in my opinion, developers pay the greatest attention to the web version. ICEcoder supports HTML, CSS, LESS, SASS, JS, Coffee, PHP, RonR, Python, C / C ++ / C #, Java, Lua, Rust, SQL, Markdown, more than 60 languages ​​in total! Features: the ability to work together with the code, Emmet, LiveReload, work with the database, kolopiker, diff tool, linters and even a whole lot of successful interface solutions. I repeat - it's all in your browser!


')

Lazysizes


Probably the best script for lazy content loading. First: it is very intelligently written and it is fast in terms of performance. Secondly: it works with images, frames and other widgets. Thirdly: support for responsive images, perceives picture , srcset and special date attributes. Well, plus to everything, it is as simple as possible to install; to work correctly, you only need to specify the corresponding elements of the lazyload class.

Canman.js




(Ca) nvas (man) ipulation for Node.js and browsers. With this library, you can easily perform various operations with images and even create filters, like in Instagram. On this topic there is an article from Tutorialzine .
Caman('#my-image', function () { this.brightness(10); this.contrast(30); this.sepia(60); this.saturation(-30); this.render(); });


or

  <img data-caman="brightness(10) contrast(30) sepia(60) saturation(-30)" data-caman-hidpi="/path/to/image@2x.jpg" src="path/to/image.jpg" >


Swarm


Swarm is an isometric reactive M-of-MVC library for Node.js, which synchronizes objects in real time and allows you to work offline.

 var Swarm = require('swarm'); var Mouse = Swarm.Model.extend('Mouse', { defaults: { name: 'Mickey', x: 0, y: 0 } }); module.exports = Mouse; // CommonJS


Refer to the model in App.js:

 // 1. create local Host var swarmHost = new Swarm.Host('unique_client_id'); // 2. connect to your server swarmHost.connect('ws://localhost:8000/'); // 3.a. create an object var someMouse = new Mouse(); // OR swarmHost.get('/Mouse'); // OR new Mouse({x:1, y:2}); // 4.a. a locally created object may be touched immediately someMouse.set({x:1,y:2}); // 3.b. This object is global (we supply a certain id) so we // may need to wait for its state to arrive from the server var mickey = new Mouse('Mickey'); // 4.b. ...wait for the state to arrive mickey.on('init', function () { // ...so we may touch it finally. mickey.set({x: 3, y: 4}); }); // 5. let's subscribe to the object's change events mickey.on(function (spec, val, source) { // this will be triggered by every state change, be it // local or remote console.log('event: ', spec.op(), val); // outputs: // set {x:3, y:4} });


Material Design Icons


A huge collection of icons from Google in two sizes of SVG, with CSS sprites and in all sizes of PNG for mobiles and the web.


Later.js


Probably the easiest way to work with repetitive tasks on a schedule.
  // fires every 2 hours on the first day of every month // and 8:00am and 8:00pm on the last day of every month // except in December var sched = later.parse.recur() .every(2).hour().first().dayOfMonth() .and() .on(8,20).hour().last().dayOfMonth() .except() .on(12).month(); // get the next 10 valid occurrences later.schedule(sched).next(10);


Top Sublime Text Plugins


Last week I published a selection with the best plugins for ST. Many thanks to all the commentators, thanks to you the digest has become even more meaningful. But for those who have already seen it, I still recommend looking at it again, because there appeared several new plug-ins following the recommendations of our colleagues from Reddit .

Western thoughts or what would translate to Habré:




They say and show domestic IT resources:




Finally:




Previous selection (Release 31)

I apologize for any typos. If you notice a problem - please write in a personal.

Thank you all for your attention.

Source: https://habr.com/ru/post/241539/

More articles:


All Articles