Some interesting and useful things for web developer
Good day to all. Somehow it happened, lately I saw many interesting and useful tools / libraries / events that I wanted to share on Habré. All these topics separately, in my opinion, did not deserve a whole article. But each of them is worthy of attention and can be useful to someone else. The result was a small digest:
Great preprocessor application for CSS, JS. Compiles the following file types: LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml. Minimizes JS on the fly, with every file change. Optimizes images. Available for Windows and Mac, and also as an extension for Chrome. Plus, it creates an HTTP server to test the site on different devices. Free replacement CodeKit'u and Ghostlab'u combined, which together will save you $ 75 .
Speaking of testing the display of web applications on different screens, I want to say about the online service Dimensionsapp .
')
Open source editor from Adobe written in JavaScript specifically for web developers. Nice design, built-in page refresh without reloading (analogs: Emmet LiveStyle and LiveReload ), viewing styles for HTML elements from the Cmd / Ctrl + E editor and many plug-ins, which will be even more.
Who doesn't like to write regular expressions? What if the check on the URL in JS will look like this:
The library also exists for: Ruby, C #, Python, Java, Groovy, PHP, Haskell, C ++, Objective-C.
Github
Relatively recently, I told in Habré about Voyeur.js with a very nice syntax for working with DOM. HTML.js is a fork of Voyeur with a number of new methods:.
Github
LiveScript is “a language that is compiled into JavaScript, an indirect descendant of CoffeeScript”. The syntax is probably not very attractive at first glance, but LiveScript itself is very, very functional:
Implement git to javascript in your browser. I see the application only in the example of the work described above Brackets (in JavaScript) as extensions for Chrome, but I am sure that this is a useful thing for real geeks.
Github
Demo page with a demonstration of Commit, Push, Pull and Branching
As far as I know, this is the first CMS that will be developed by crowdfunding. The author of the project John O'Nolan collected already $ 400,000 on Kickstarter , which is 785% of the required amount. Ghost is an open project, a great design and a very user-friendly responsive interface.
Infographics can not only organize large amounts of information, but also more clearly show the ratio of objects and facts in time and space, as well as demonstrate trends. Inforgram is a very simple tool for creating infographics. The ability to import data in XLS, XLSX and CSV formats. If I'm not mistaken, then this is the only service for creating interactive infographics. Add charts, maps, photos, videos. The service is in the format of a social network. Share, share, use embed code for your sites.
Next compilation (Issue 2)
Prepros
Great preprocessor application for CSS, JS. Compiles the following file types: LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml. Minimizes JS on the fly, with every file change. Optimizes images. Available for Windows and Mac, and also as an extension for Chrome. Plus, it creates an HTTP server to test the site on different devices. Free replacement CodeKit'u and Ghostlab'u combined
Dimensionsapp
Speaking of testing the display of web applications on different screens, I want to say about the online service Dimensionsapp .
')
Brackets
Open source editor from Adobe written in JavaScript specifically for web developers. Nice design, built-in page refresh without reloading (analogs: Emmet LiveStyle and LiveReload ), viewing styles for HTML elements from the Cmd / Ctrl + E editor and many plug-ins, which will be even more.
VerbalExpressions
Who doesn't like to write regular expressions? What if the check on the URL in JS will look like this:
// Create an example of how to test for correctly formed URLs var tester = VerEx() .startOfLine() .then( "http" ) .maybe( "s" ) .then( "://" ) .maybe( "www." ) .anythingBut( " " ) .endOfLine(); // Create an example URL var testMe = "https://www.google.com"; // Use RegExp object's native test() function if( tester.test( testMe ) ) alert( "We have a correct URL "); // This output will fire else alert( "The URL is incorrect" ); The library also exists for: Ruby, C #, Python, Java, Groovy, PHP, Haskell, C ++, Objective-C.
Github
HTML.js
Relatively recently, I told in Habré about Voyeur.js with a very nice syntax for working with DOM. HTML.js is a fork of Voyeur with a number of new methods:.
each(), remove(), ify(), ._other(), _fn()Github
LiveScript
LiveScript is “a language that is compiled into JavaScript, an indirect descendant of CoffeeScript”. The syntax is probably not very attractive at first glance, but LiveScript itself is very, very functional:
LiveScript take = (n, [x, ...xs]:list) --> | n <= 0 => [] | empty list => [] | otherwise => [x] ++ take n - 1, xs take 2, [1 2 3 4 5] #=> [1, 2] take-three = take 3 take-three [3 to 8] #=> [3, 4, 5] # Function composition, 'reverse' from prelude.ls last-three = reverse >> take-three >> reverse last-three [1 to 8] #=> [6, 7, 8] But how much would you need JS code with you
var take, takeThree, lastThree, slice$ = [].slice; take = curry$(function(n, list){ var x, xs; x = list[0], xs = slice$.call(list, 1); switch (false) { case !(n <= 0): return []; case !empty(list): return []; default: return [x].concat(take(n - 1, xs)); } }); take(2, [1, 2, 3, 4, 5]); takeThree = take(3); takeThree([3, 4, 5, 6, 7, 8]); lastThree = function(){ return reverse(takeThree(reverse.apply(this, arguments))); }; lastThree([1, 2, 3, 4, 5, 6, 7, 8]); function curry$(f, bound){ var context, _curry = function(args) { return f.length > 1 ? function(){ var params = args ? args.concat() : []; context = bound ? context || this : this; return params.push.apply(params, arguments) < f.length && arguments.length ? _curry.call(context, params) : f.apply(context, params); } : f; }; return _curry(); } git-html5.js
Implement git to javascript in your browser. I see the application only in the example of the work described above Brackets (in JavaScript) as extensions for Chrome, but I am sure that this is a useful thing for real geeks.
Github
Demo page with a demonstration of Commit, Push, Pull and Branching
Crowdfunding: Ghost - Just a Blogging Platform
As far as I know, this is the first CMS that will be developed by crowdfunding. The author of the project John O'Nolan collected already $ 400,000 on Kickstarter , which is 785% of the required amount. Ghost is an open project, a great design and a very user-friendly responsive interface.
Infogram
Infographics can not only organize large amounts of information, but also more clearly show the ratio of objects and facts in time and space, as well as demonstrate trends. Inforgram is a very simple tool for creating infographics. The ability to import data in XLS, XLSX and CSV formats. If I'm not mistaken, then this is the only service for creating interactive infographics. Add charts, maps, photos, videos. The service is in the format of a social network. Share, share, use embed code for your sites.
Next compilation (Issue 2)
Source: https://habr.com/ru/post/189994/
All Articles