Lately I've been looking for a light-weight library that helps to develop UI components using native browser technologies like Web Components, Shadow DOM etc. I see most of them surviving out there like Angular, React are not completely based on native technologies and not only that they have quite some learning curve. Also, there is always this fear that, am I doing this in the right way?. I found libraries like LitElement compelling but finally I ended up creating something simple, light-weight that focuses only on solving the component building business and nothing else.

I created a small library called tiny that utilizes decorators and a simple base class to create components using native technologies. I'm pleased by the outcome. Though it doesn't support fancy data bindings and other cool features (for now) it turned out to be good!. In this article, I would like to share some of the learnings I got in the process of building that library and hopefully someone can use them to build their own library in future and why not please share your thoughts and ideas to transform the tiny into something bigger.

musquito is an audio engine created using Web Audio API for HTML5 games and interactive websites. It provides a simple abstraction to create and play sounds easier. With the latest version v3 creating and playing sounds is much more simple now.

Resume is a tool to market yourself. It's a place where you can specify your skills, education and experience in a way to easily convey to recruiters. Having a well structured resume gives a positive outlook about you to the recruiters. In fact, many interviewers starts to judge their candidates based on their resumes even before taking interviews. Traditionally resumes are written in word documents and even now too. Online resumes built with latest web technologies are getting quite popular nowadays especially among web developers. The problem with online resume is you need to pay for the domain and hosting. In this post, I'll explain how you can create a beautiful single page resume template and host it in Github for totally free.

musquito is an audio engine created using Web Audio API for HTML5 games and interactive websites. It provides a simple abstraction to create and play sounds easier.

Below are some of the core features supported by the library.

• Simple API to create and play sounds
• Supports variety of codecs
• Supports audio sprites
• Fading
• Caching

Angular CDK is a library from Google that provides a set of tools which helps to simplify the component building process in Angular. It provides utilities for creating floating panels, virtual scrolling, drag-n-drop, accessibility and more. If you are creating a reusable library in Angular then CDK will be of great help.

Creating a custom dropdown with the same behaviors of a native one is a little complex job. Though in outside dropdowns looks simple there is a lot of engineering goes with it, like positioning the dropdown, adjusting it's position and dimensions based on screen real-estate, keyboard accessibility etc. The Angular CDK library has dedicated modules to deal with creating overlays and accessibility. In this article I'm gonna show you how we can build a custom dropdown step by step with the help of CDK.

Angular platform ships Angular Material library that contains quite a bunch of UI components which helps to develop Single Page Apps easier. The material components are opinionated and they follows Google's Material Spec. Sometimes we've to develop components from scratch either wrapping over the native HTML elements or third party components. For custom components created in such ways, Angular provides support for them to bind data and synchronize the state through interfaces. It also a good idea to encapsulate the validation and displaying error messages work inside the custom component.

In this article, I'll show you how we can leverage the built-in validation and display the error messages inside a custom component.

We do not use HTTP just for preparing web pages. We all know that HTTP is a very strong platform for constructing APIs that reveal data and services. HTTP is easy to use, agile, and ever-present. Using API we shall easily communicate with variety of other languages with less code.

Most of the platforms in existence today contain a HTTP library. This enables the HTTP services to extend to a wide variety of clients, consisting of traditional desktop applications, mobile devices, and browsers. In this article we are gonna see how to build a simple REST service using ASP.NET Web API and test the methods using PostMan.

CSS3 provides couple of powerful concepts to create layouts: Grid and Flex. The former uses a top to bottom approach and later uses the reverse. Both these concepts are well supported by browsers except IE11. Though there are advantages in leveraging CSS to accomplish layouts (for example, we can make them responsive through media queries) there are benefits in leveraging a HTML like declarative approach. Angular provides a powerful concept called directives that helps to enhance HTML by adding custom behaviors to it.

In this post, I'm gonna show you how we can create couple of directives that helps to craft layouts using CSS3 grid. As a bonus, I also show you how we can make the layouts responsive. I'm also glad to introduce you the library angular-bone which is a real world implementation of this sample that supports both flex and grid layouts.

Decorators are an excellent way to add metadata information to a class / method / property / parameter. Angular uses quite a lot decorators. There are decorators for classes, properties, methods and even parameters. In this post we are gonna see how to extend the built-in Component decorator and create a custom one.

Here comes the fourth and final part of the hybrid mobile series in the hot summer. At the time of writing this from Bangalore (was called as Green City not any more I think) it's quite hot like 40° C. Time to take care of our nature! Anyway, we've come through a long way... let's finish this final part. Our hybrid mobile app "Safe" has grown into a pretty good shape now. So far, the work we've done allows an user to select a photo and persist in a secured way by AES 256 encryption. We also completed the work to edit an already persisted photo or wipe it out permanently.

Fig 1. Safe Login Pages

Encrypting and persisting the photos is not enough to keep them safe! We've to protect the access to the app through a login mechanism and that's what we are gonna build in this part. We'll also see how to build the settings and info pages and last but not least I'll introduce you to Jasmine and show how she'll help us to write some good unit tests. So folks, ARE YOU READY?