Some interesting and useful things for web developer # 43

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

Ramjet

An incredibly cool script that morphs DOM elements. Looks awesome! Works with HTML and SVG elements, as well as with images. Ramjet contains a basic collection of animation functions and is as easy to use as possible:

<div id='a' style='background-color: red; font-size: 4em; padding: 1em;'>a</div> <div id='b' style='background-color: blue; font-size: 4em; padding: 1em;'>b</div> <script src='ramjet.js'></script> <script> // to repeat, run this from the console! ramjet.transform( a, b ); </script> 

JSON Server

Extremely handy tool that allows you to create a full-fledged REST API without writing code, in just 30 seconds. "Made with love for front-end developers who need a quick prototyping of the server side."

Create a db.json file:

 { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ] } 

Run JSON server:

 $ json-server --watch db.json 

And now if we go to localhost : 3000 / posts / 1 , we’ll get:

 { "id": 1, "title": "json-server", "author": "typicode" } 

')

Elevator.js

All of you have probably met various mini-libraries and jquery plugins with the “Up” button, which scroll the page to the very beginning. Elevator.js does the same, but is notable for its originality. Remember elevators in old american high-rises? So the scrolling will happen with a similar animation and to that vintage melody of waiting.

I also want to mention Egg.js for creating easter eggs in your project.

 var egg = new Egg(); egg .addCode("up,up,down,down,left,right,left,right,b,a", function() { jQuery('#egggif').fadeIn(500, function() { window.setTimeout(function() { jQuery('#egggif').hide(); }, 5000); }, "konami-code"); }) .addHook(function(){ console.log("Hook called for: " + this.activeEgg.keys); console.log(this.activeEgg.metadata); }) .listen(); 

Deck of Cards

A very unusual project, with which you can easily and easily make any card game at your leisure. Deck of Cards is a full-fledged API for drawing, counting and mixing playing cards. Sample answer:

 { "success": true, "cards": [ { "image": "http://deckofcardsapi.com/static/img/KH.png", "value": "KING", "suit": "HEARTS" }, { "image": "http://deckofcardsapi.com/static/img/8C.png", "value": "8", "suit": "CLUBS" } ], "deck_id":"3p40paa87x90", "remaining": 50 } 

By the way, another well-known company Marvel with a huge chronicle of all its superheroes relatively recently announced a developer portal - developer.marvel.com .

Wwwhere - a huge collection of utilities

Western thoughts or what would translate to Habré:

• We Tested How Googlebot Crawls Javascript And Here's What We Learned
• Web Animation using JavaScript: Animating Text
• Pluralization for javascript
• Making Sense of Clip Path
• A Primer To Background Positioning In CSS
• Inline SVG fallback; no javascript required
• Setting a Web Performance Budget: Where to Start
• Block, Element, Modifying Your JavaScript Components
• Accessible Drag and Drop with Multiple Items
• Building a Custom Right-Click (Context) Menu with JavaScript
• Timeline portfolio
• Building Nonlinear Narratives for the Web
• 20 Design Rules You Should Never Break
• Design Principles: Compositional Flow And Rhythm
• Content-First Design
• Just use pixels
• There is no fold

They say and show domestic IT resources:

• "Functional programming in the browser" from Tonsky.me.
• “Creating a Style Guide”
  "Introduction to d3.js" from Frontender.info.
• "Cycle Optimization" by Forwebdev.ru.
• “Io.js is combined with NodeJS” by apelsyn .
• "Your code does not interest anyone" from Dreyk
• "Introduction to functional programming in Python"
  “Introduction to developing a slideshow on JavaScript” by SLY_G
• "Python nightmares: the implicit` this` ' from BasicWolf
• "Introduction to fetch" by xamd
• "Uploading and storing photos in Web applications" from Capuchin
• “The first version of the Matreshka.js framework has been released” by Finom
• "Fast cross-platform HTML5 application on Framework7" from Shannon
• "Developing a cross-platform application using the Ionic Framework" from m0sk1t
• “JavaScript frameworks. How to learn them in a quick way ” from ph_piter
• “Mixins for“ classes ”in javascript” by and_rew

Finally:

• HTML / CSS
  • Blackhole is a minimalistic and flexible SCSS / CSS framework.
    
  • ARIA examples .
  • CSS Flexbox - curated list of articles and tricks on the Flexbox.
  • Responsive Report 2014
• Javascript
  • Textures is a great library for creating SVG textures.
  • Watermark.js - client side watermarks.
  • JSPM is a package manager for the browser.
  • ReadRemaining.js - progress page reading bar.
  • Flummox - minimalistic, isomorphic Flux.
  • Brisket - yes, again MV * framework, a note already from Bloomberg.
  • jQuery.my is a complete data binding for jQuery.
  • Zoom.js - jQuery plugin for zoom images.
  • Justice - page performance metrics.
• Php
  • Bolt is an elegant, lightweight and simple CMS for editors and developers.
    
    
  • Icicle - asynchronous functionality in PHP using generators.
  • Unirest is an HTTP client.
  • Saber XML is a library for working with XML.
• Python
  • Neon - Deep Learning Framework.
  • Toolz - a collection of useful functions for Python.
  • Pyvim - Vim clone in Python.
• Ruby
  • Rsense - statistical code analysis.
  • Embiggen is a powerful library for uncovering long URLs.
  • Device Detector - the user-agent string parser.
  • Rspec Rail Examples are examples of most rspec features in the form of a rails application with tests.
  • Impressions of the Volt , who are not familiar with this framework, are a must-read.
  • Rails DB Info - almost like phpMyAdmin, only for Rails and in Engine view.
  • Accelerate ActiveRecord .
  • The most terrible thing in Ruby Smile .
• Go
  • Journey is a blog engine compatible with Ghost themes.
    
    
  • Pingo is a system of plugins for Go.
  • Rtop is an online remote monitoring system based on SSH.
  • Ccat - colorizing `cat`.
• miscellanea
  • Libscore - JS libraries distribution analyzer.
    
  • Awesome mysql
  • First Aid Git is a collection of the most frequently asked questions about Git.
  • Git Large File Storage (LFS)
  • Planetarium - a dynamic map of space.
  • GitLab has gained support for Debian 8 .

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 42)

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

Thank you all for your attention.