Awesomeness & Usefulness for Web Developers

Good day, everyone! Recently I saw a few awesomeness and usefulness tools/frameworks/events for web developers, which would like to share with you.

Prepros

Prepros

This is amazing preprocessing app. Prepros allows compile everything (LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml, Markdown), minifies and concatenates JS in the real time, optimizes png and jpg images, refreshes the browser in real time whenever you change CSS or HTML files and multi device testing.

Since you should not pay a Liverload and Ghostlab, because all of this are absolutely free and available on GitHub. Similar functionality is only possible with Grunt, but with Prepros this tasks are much easeir.

There is also a paid version of Prepros, which gives 1-Click FTP/SFTP deployment, remote device inspection & debug and other useful solutions.

Brackets

Brackets

Open source editor from Adobe based on NodeJS and writed special for web developers. It have a nice UI like a Sublime Text, live reload tool, plugin system and really clever autocomplete for HTML/CSS/JS and you will understand it after first key press. Brackets allows view and edit CSS in HTML document, by finding corresponding selector in selected element's attribute, when you press CMD/CTRL + E. Also inside a lot of smart tools like colorpicker or CSS transition editor.

VerbalExpressions

Who don't love write a regular expressions? Ok, what about if URL checking on JavaScript 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" );

VerbalExpressions also exists for Ruby, C#, Python, Java, Groovy, PHP, Haskell, C++, Objective-C.

HTML.js

This is more functionally fork from Voyeur.js - small (~2kb in gzip) library for traversing and manipulating the DOM with a nice syntax.

Find Elements

HTML.div.h1; // body>div>h1, return H1 elent
HTML.div.h1.innerHTML = "Ilya Pestov"; 
HTML.div.ul.li; // return array of li elements

HTML.find("#example"); // return one node
HTML.find(".example"); // return array of nodes
HTML.find("#example").h1.em; 

Callback Function

HTML.tag...use( callback(element) ) Root HTMLElement

HTML.div.ul.li.use(); // return div element
HTML.div.ul.li.use(function(li, i) {
        // loop in list 
        li.innerHTML = "List item #" + i;
});

HTML.div.ul.use(function(ul) {
        ul.style.background = "blue";
        ul.li; //..
});

Create Elements

HTML.create.tag...mult( factor ) Array

HTML.create.div; // return div element
HTML.create.div.h1; // return H1 with div parent
HTML.create.div.h1.em;

HTML.create.ul.li.mult(10).use(function(li, i) { // create 10 li elements 
     li.innerHTML = "Created list items!"; // 
});

//HTML.tag...eq( begin , end ) HTMLElement|Array
HTML.create.ul.li.mult(10).eq(7).innerHTML = "The 8th item.";

HTML.ul.li.eq(2, 6).use(function(li, i) {
     li.create.em.innerText = "Hello World";
});

It' not end, HTML.js provide quality work with DOM by .each(), remove(), ify(), ._other(), _fn() and other methods which described in documentation.

LiveScript

LiveScript is a language which compiles to JavaScript. It has a straightforward mapping to JavaScript and allows you to write expressive code devoid of repetitive boilerplate.

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]

instead of JS

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

Git implementation in JavaScript. Application I see only as a Brackets plugin, but I am sure, that it's will be a good stuff for true geek.

Crowdfunding: Ghost — Just a Blogging Platform

As far as I know it's first CMS, which will be developed by crowdfunding power. Author of project John O'Nolan gathered about $400 000 on Kickstarter and this amount is 785% of what he need. Ghost is open project, beautiful design, understandable and adaptive admin UI.

Infogr.am

Infogram

Infographics able not only to organize large amounts of information, but also more vividly show the ratio of objects and facts in time and space, as well as to demonstrate trends. Infogram is very simple tool for creating infographic. It's allow use diagrams, maps, photos, videos and import data in XLS, XLSX or CSV. As far as I know it's only interactive infographic builder. And it's also a social network. Share infographics with friend and embed in to your site.


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

Thank you all for your attention.

comments powered by Disqus