What is syntatic sugar?

In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language “sweeter” for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer,
WIKIPEDIA

In simpler term, write more code with less syntax to achieve more result.
I like this because i believe in pareto principle. Do 20% achieve 80% result!

As we move fast in the front end world, we also see this in trend!
So in front end , we commonly use resources like Javascript,CSS,HTML.
Let’s take a look at how syntatic sugar is crawling into these resources.

I)Javascript
The most notable changes is ES6 in javascript. We know it shares alot common expression with coffeescript. In fact, enthusiasts argues es6 influenced by coffeescript based on the github code changes date. So , what about syntatic sugar in these? We look at arrow function quickly, the ‘function’ ,'{‘ ,’}’ keyword is removed and alot abbreviations for the coder. Okay, then we look quickly at class functions, for the coder to write class in es6 and coffeescript, it is much simpler compared to writing them in es5. We write less and achieve more!

Of course there are many more which you can find all over the internet.

II)CSS
One of the popular changes, in css would be frameworks like LESS,SASS,OOCSS,POSTCSS.
So what about them , that makes them so great? Everyone’s opinions differ. One thing we can agree is the ability to reuse them via variable definition and functions/mixins. We write less and achieve more. Syntax wise, if we look at the technical details, we do not have to do double declaration in most cases like when write mixins/functions, then we invoke the same function for declaration and definition, we cut down on writing alot syntaxes. As such, we transitively write less in syntax. Of course, at the moment, the syntax likee ‘{}’ is still heavy. We can foresee, surely someone will write a wrapper transpiler to totally omit them in nearest future.

III)HTML
In this case, we can look at JADE, PUG, HAML. In these cases, the brackets are omitted and indentations defined a scope block. There are of course more and feel free to add.

So to summarize, in front end resources, we can see this trend moving up.

What are advantages?
With less code written, writing, less human error on syntax, faster delivery for high productivity.
With less code written, reading, easier to read to understand, faster understanding,faster turnaround cycle.

What are disadvantages?
Some argue, the proper core syntax is not learned before using this interface wrapper. We learned just outside interface. like knowing a person you like on a surface level rather than deep love level.
Interface wrapper always changed, core not changed so frequently, better learn core first.