Geekly Articles each Day
📜 ⬆️ ⬇️

Some interesting and useful things for web developer # 37

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

Buzz.js




Recently, there are more and more projects on the Internet, where various interface elements are accompanied by certain sounds. I would even say that UX / UI on the web is moving to a new stage of evolution. And Buzz.js is one of the first to help you with the voice acting of your interface. This is a library for working with the HTML5 Audio API with a number of suitable event handlers.
') 
var mySound = new buzz.sound( "/sounds/myfile", { formats: [ "ogg", "mp3", "aac" ] }); mySound.play() .fadeIn() .loop() .bind( "timeupdate", function() { var timer = buzz.toTimer( this.getTime() ); document.getElementById( "timer" ).innerHTML = timer; });



Snabbt.js



Snabbt.js is tiny (only 4kb in gzip) and very fast (60FPS) library for processing CSS animations. Allows you to interact with the properties translate, rotate, scale, skew and resize. Works in all modern browsers.
  snabbt(element, { position: [100, 0, 0], easing: 'ease' }).then({ fromRotation: [0, 0, -2*Math.PI], easing: 'spring', springConstant: 0.2, springDeaccelaration: 0.95, });


Cachet



The system of status alerts, the first of these open and free projects. There are cases when your site does not work because of third-party services. In order not to scare away the visitor, you need to properly inform him, namely, to show him the error message in real time. Cahet monitors the services (components) you use and displays a status message in case of any malfunctions. Written in PHP with Laravel, has a RESTful API, modular and easy to customize.

PageKit CMS




Blessed contrib


image
Psychic JavaScript library for dashboards in the terminal using ascii / ansi characters. At the core lie Blessed and Drawille .

  var blessed = require('blessed') , contrib = require('blessed-contrib') , screen = blessed.screen() , line = contrib.line( { style: { line: "yellow" , text: "green" , baseline: "black"} , xLabelPadding: 3 , xPadding: 5 , label: 'Title'}) , data = { x: ['t1', 't2', 't3', 't4'], y: [5, 1, 7, 5] } screen.append(line) //must append before setting data line.setData(data.x, data.y) screen.key(['escape', 'q', 'C-c'], function(ch, key) { return process.exit(0); }); screen.render()


I also want to leave a reference to cli-dashboard to visualize graylog logs.

Minimap.js



jQuery plugin that allows you to display a mini map of the current page next to the scrollbar. Probably, this decision is familiar to many thanks to Sublime Text. So far I can not provide an explicit example where the use of this plugin is necessary, but the implementation clearly deserves a place in this compilation for its originality.

Slate


Beautiful static documentator of your code, with support for more than 60 programming languages ​​and responsive output templates.
image

Western thoughts or what would translate to Habré:




They say and show domestic IT resources:




Finally:




For help in preparing the material I express my deep gratitude to Alexander Maslov drakmail .

Friends backenders! I think everyone knows that I am doing my compilations entirely on altruism. I always went through a bunch of websites to make it always convenient to work. And at one point I decided to share the material found. Over time, collections have gained some popularity and significantly expanded in terms of content. From now on, I will clearly structure the “Finally” block so that people do not have to look for what they need. In order for the sections not to be bare and always filled with relevant information, I need your help. And the problem is not only in time, but also in competence. In terms of backend, I am rather a theorist than a practitioner.

Pkhshshnik, rubist , pythonist, goschik , if you already monitor GitHub Trending, Reddit, HackerNews or Twitter in search of interesting and useful things on your topic, if you find it definitely has value, but does not deserve the attention of the whole post, if it's not difficult for you once a week / in two weeks, depending on the material to share a pair of kilobytes of reference mass, then write me in a personal or any social. network from profile. Scribble in the main section as desired. The name or contacts of volunteers in each post will be indicated.

Previous selection (Release 36)

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/248715/

More articles:


All Articles