Lit-html is a small, lightweight templating library. Lit-html uses JavaScript template strings to create expressive, dynamic templates. Alongside of the lit-html library, Polymer has also released a lightweight base Class called lit-element. Using lit-element, we can easily create Web Components with higher level APIs built on the Web Component primitives we discussed in introduction to Web Components.


In this post, we are going to create a counter component using lit-html and lit-element. Here is a sample of what our counter looks like.

Let’s start with the minimal code needed to create our Web Component using the base class lit-element.


He doesn’t know what he is up to but he is trying to do productive testing :)

Productive testing means testing right things in the react app. By which I mean the correct thing that makes sense to test. Remember when you write test cases its not to make your coverage results get the higher attention but to write test so that app functionality works correctly and its easier to refactor the code and you don’t break the code while refactoring. How easily you can refactor your code matters the most because thats what the developer is hired for :)

When it comes time to actually write the tests though, we often get stuck. What exactly should…

What is an applicable example of using Maps over objects?


There’s a new data structure in ES6 called a map. So storing the data in the map by using the key and then accessing the data using the same key is something like 👇

var map = new Map();

map.set("something", "somethingElse");
map.get("something") // somethingElse


Like Array, Object is straight-forward. To declare new object, all you need to do is using direct literal:

var obj = {}; //Empty object
var obj = {id: 1, name: "Manjula"};
//2 keys here: id maps to 1, and name maps to "Manjula"

Or by constructor

Lets say initial state of your component is 👇👇👇

this.state = { on: true}

Now on click may be I would want to change the state of my component. In React probably the way you change the state of a component is by passing an object to update the current state. This probably will depend on the current state. To manage the state, React provides a special method called setState(). You use it like this:

this.setState({on: !on})

I am relying on the value of this.state.on to modify the next state of my component. In this simple example, we probably would…

console.log('b' + 'a' + + 'n' + 'a' + 'n' + 'a')


The expression is evaluated as

'b' + 'a' + + 'n' + 'a' + 'n' + 'a'

which converts ‘b’ + ‘a’ + (+’n’) to not a number. and therefore the output is


Double not — always not out.

Your variable hold multiple data types ? Tired of checking null / undefined or zero ? Use !! ( two times ‘!’ (not) operator ) . That will type cast your variable into boolean

For e.g.

var a = null // Replace ‘a’ with 0 , undefined, false
console.log(!!a) // false
console.log(Boolean(a)) // false

Thanks for reading

Stay tuned for more updates !!!

“Pretty Print” your JSON output. Helpful while debugging on terminal.

Prettify your ugly JSON

var obj = {
name: 'geekabyte',
url: '',
courses: {
web: ['react', 'redux', 'ES6'],
android: ['app development']



"{"name":"geekabyte","url":"","courses":{"web":["react","redux","ES6"],"android":["app development"]}}"


JSON.stringify(obj, '\t', 4)

Output :

"name": "geekabyte",
"url": "",
"courses": {
"web": [
"android": [
"app development"

Isn’t that cool ?

I find it useful while debugging. Do give a try :)

Thanks for reading

Stay tuned for more updates !!!

Save bytes — Use unary operator instead parseFloat

Consider the following examples

var height= “123.45”console. log(parseFloat(height))) // 123.45console.log(+height) // 123.45

Both yields same output but later one saves code size.

Thanks for reading

Stay tuned for more updates !!!

Simplify if condition — Use indexOf

Do you have one variable to be checked against multiple values ?

For e.g. Jack will be happy when he will get to eat Mango, Apple, Grapes or Guava

Trivial code is :

if(fruit === ‘Apple’ || fruit === ‘Mango’ || fruit === ‘Grapes’ || fruit === ‘Guava’) {
// Jack will be happy

But Jack is not happy with this code

Smart code is :

if([‘Apple’, ‘Mango’, ‘Grapes’, ‘Guava’].indexOf(fruit) > -1) {
// Jack will be happy

Read more about Array.prototype.indexOf

Thanks for reading

Stay tuned for more updates !!!

Geekabyte comes with one stop solution for you….

Geekabyte is happy to announce the first paid workshop on Starter Byte: Zero to Hero in React at Of10 Powai on 21st April 2018. The workshop will provide best of the learnings and right resources to start React.

Excited about this?

Manjula Dube

Senior Developer, Javascript Lover, Frontend Technology, Passion is to learn and share.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store