Some interesting and useful things for web developer # 27

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

Highcharts.js

Recently, I have become a part of libraries designed for building graphs and diagrams. But against trends on GitHub with 2500+ stars, there is no arguing, and when there is something to choose from, it is always good. Highcharts.js is a powerful tool based on SVG and VML rendering with many plugins. The disadvantage of this project is a license that allows using the script only for non-commercial purposes. I would also like to draw your attention to the fact that this project was chosen by such companies as Yandex, Facebook, Twitter, Yahoo, AT & A, Nokia, etc.

Chartist.js

And another similar library with responsive charts. Simple syntax, CSS animations, Jasmine tests and detailed documentation thanks to JSDoc.

/*    */ var data = { labels: ['1', '2', '3', '4', '5', '6'], series: [ { data: [1, 2, 3, 5, 8, 13] } ] }; /*    */ var options = { axisX: { labelInterpolationFnc: function(value) { return 'Calendar Week ' + value; } } }; /*        */ var responsiveOptions = [ ['screen and (min-width: 641px) and (max-width: 1024px)', { showPoint: false, axisX: { labelInterpolationFnc: function(value) { return 'Week ' + value; } } }], ['screen and (max-width: 640px)', { showLine: false, axisX: { labelInterpolationFnc: function(value) { return 'W' + value; } } }] ]; /*  */ Chartist.Line('#my-chart', data, options, responsiveOptions); 

')

Senna

Wonderful script for creating lightning single-page sites. It is important to emphasize that the developers paid a lot of attention to the routing and solved the typical problems for typical libraries related to SEO, linking, history and cache in the browser. Senna.js weighs only 8kb and provides a simple and intuitive API divided into three categories: Routes, Screens and Data attributes.

Timesheet

This great tool allows you to display information on a timeline.

 new Timesheet('timesheet', 2002, 2013, [ ['2002', '09/2002', 'A freaking awesome time', 'lorem'], ['06/2002', '09/2003', 'Some great memories', 'ipsum'], ['2003', 'Had very bad luck'], ['10/2003', '2006', 'At least had fun', 'dolor'], ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'], ['07/2005', '09/2005', 'Bad luck again', 'default'], ['10/2005', '2008', 'For a long time nothing happened', 'dolor'], ['01/2008', '05/2009', 'LOST Season #4', 'lorem'], ['01/2009', '05/2009', 'LOST Season #4', 'lorem'], ['02/2010', '05/2010', 'LOST Season #5', 'lorem'], ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum'] ]); 

Uilang

Rapid prototyping language created for web designers:
clicking on ". try-it" toggles class "hidden" on ". info-box"

Western thoughts or what would translate to Habré:

• Advanced objects in JavaScript
• What you should know about javascript regular expressions
• JavaScript Memory Management Masterclass
• Animating Without jQuery
• Favicons, Touch Icons, Tile Icons, etc. What All Do You Need?
• Centering in CSS: A Complete Guide
• Building A Simple Cross-Browser Offline To-Do List With IndexedDB And WebSQL
• Running Code Reviews with Confidence
• Git: The Safety Net for Your Projects
• How to Manipulate and Animate SVG With Snap.svg
• Nerd Using the: target pseudo-selector for alternative layouts
• Using SVG stroke Attributes
• 7 Reasons to Develop Your Next Web App with Meteor
• The Beginner's Guide to Type Coercion: A Practical Example
• Bubble.js: A 1.6K Solution to a Common Problem
• Mobile Onboarding: A Beginner's Guide
• Write better walkthroughs with the 3x3 Method
• Material Design exploration: NBA scores
• Four Design Lessons from Material Design Documentation
• How One Cold Email Landed Me A $ 15K Consulting Project
• Braden Kowitz: Why?
• Lessons Learned From My High School Teachers

Says and shows Habr:

• “Scaling backwards: Yandex's BEM methodology on small projects” from ingdir
• Pure CSS Parallax by alspaladin
• “Ractive.js is the diamond age of web development” from setdvd
• “JavaScript insertAdjacentHTML and beforeend method” from jojo97
• Mckalech 's GitHub's CSS
• "Atom - the minimum brick FRP applications" from vintage
• "Note on PHP verification" by SvyatoslavMC
• “How Docker helped us achieve the (almost) impossible” from rkononov
• "Docker image optimization" by silentvick
• “Small Utility for CoffeeScript Developer” by SerafimArts
• “Developing Your Django Billing System” by akamoroz
• "Django 1.7" from KestL
• “HHVM 3.3 - First Release with Long Term Support (LTS)”
  “The final release of PHP 5.6.0 has been released” by kriptomen
• WordPress 4.0 Benny Release by Scorpion97
• “RabbitMQ - Deferred Messages” by ivanych
• "[Translation] News from the world of Node: Tint, Redbird" by vba
• "Eddie Osmani: The Paralysis of Choice" by john_samilin
• "A little Japanese trick on organizing your notebook" by @alexandfox

Finally:

• The best of awesomeness .
• jQuery Focuspoint - plugin for “responsive focusing” of images.
• Page Monitor - diff tool for DOM built on PhantomJS.
• Type Rendering Mix - the use of CSS depending on the rendering of the browser.
• style-guide - style guide for web components from Google.
• Phred is an advanced OOP for PHP.
• Mailpile is an email search engine in Python.
• Aesop Core is an interactive story engine for WordPress.
• Kite is a cool web email client in Python.
• Slap - Sublime is a similar editor in your terminal.
• Syncthing - continuous sync for Go.
• iBrute - AppleID Bruter Python.
• Gooey - GUI for almost all programs from the command line.
• Dockersh - isolates the user shell using docker containers. From the Yelp team.
• "20 years of web design and community" - a video with Jeffrey Zeldman, founder of A List Apart and many other projects, one of the first and most famous web developers.
  
  

Previous selection (Release 26)

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

Thank you all for your attention.