My blogging workflow

Blogging on Jekyll using Visual Studio Code.

Starting in 2010, I have tried various blogging platforms. Blogger, WordPress (both self hosted and .com one), Tumblr have all at one time or the other, hosted my thoughts. Initially blogger felt really simple but as WordPress came in, it seemed to be more customisable. I ran a self hosted WordPress site for quite sometime, but felt that for my blog I do not need anything as complicated as WordPress, with a database and all that. Also, I ended up paying for domain and hosting as well since WordPress.com did not allow free custom domain mapping. I did not want...
Read More

Podcasts I listen to

A list of excellent podcasts I listen to.

I love listening to podcasts. I feel they are great learning resources. Especially when you can fill up your otherwise wasted time like commuting to work etc listening to them. I have subscribed to a few of them which I have listed here: Shop Talk Show Shop Talk Show, co-hosted by Chris Coyier of CSS Tricks and Dave Rupert of Paravel is one of my favourites. The fun attitude of the hosts and tonne of information that it provides are both mind blowing. Typical episode is an interview with someone important from the web world. In between there are few...
Read More

Charts using Chart.js and Laravel

Create data driven charts using Chart.js and Laravel

Recently I was working on an app that required some simple analytics. It involved charts and reports created from database values and displayed on the dashboard. The backend was in Laravel. For front end I wanted something that was simple. D3.js is a powerful library, but it would’ve been an overkill for a simple application. So I decided to use Chart.js. It is simple and generating charts is a real simple deal. Also I wanted to plot two different values (months and total projects) from the database against each other by creating them from a single JSON response. I’ll show...
Read More

Styling HTML radio button and checkbox

How to change the default style of the html radio button and checkbox

While you can design most of the elements like textboxes, button and links on an HTML page, styling checkboxes and radio buttons are not easy. Here is a small hack to style radio button and checkboxes. There might be many ways, but this is just one cool way. The HTML markup for the radio box and the check box: <!-- HTML markup for the radio button --> <div class="radio"> <label> <input name="option1" type="radio"> <span>option 1</span> </label> </div> <div class="radio"> <label> <input name="option2" type="radio"> <span>option 2</span> </label> </div> <!-- HTML markup for the checkbox --> <div class="checkbox"> <label> <input type="checkbox"> <span>check...
Read More

How to be a better programmer

Few tips on becoming a better programmer and improving your craft

“Anyone who stops learning is old, whether at twenty or eighty. Anyone who keeps learning stays young.” - Henry Ford Let me start by saying this - you do not need a fancy degree in computer science to start a career in programming. If you are really passionate about coding, you can easily get started. All you need is a computer and an internet connection. With so many high quality tutorials on the net, it is easy to get hold of the basics of any programming language. But it is not just about watching tutorials that make you a good...
Read More

CSS Filters

Let's take a look at various CSS filters

Today we take a look at various CSS filters. There was a time when for any kind of web design, Photoshop or Fireworks were the tools. Things like gradients, shadows, filters etc were possible only through image editing tools like Photoshop. So if you are one of them, you know how difficult it was to get a gradient or a shadow by creating images and repeating them - horror! But now, CSS implements most of those effects through a property called filter. Let’s see how. Few of these filters might not be supported by older browsers, but you can always...
Read More

HTTP status codes

There are various HTTP codes that are returned from a server. What do these numbers mean?

If you are an Internet user or a developer, you would’ve come across various status codes as responses. When you search a particular page and it shows up ‘404 - not found!’. What does this mean exactly? Let’s take a look at the most commonly seen HTTP responses. 100s - Hold on, we are processing! Anything that falls in the 100s represents a process that is still going on. The server has taken your request and is processing it. So you should probably wait. These are few requests that fall in this category: 100 - Continue: This is a confirmation...
Read More

CSS Measuring Units

We look into the world of measuring units used in CSS in this post

It’s programming, mathematics and art! “Everything you can imagine is real.” - Pablo Picasso CSS is fascinating! It is a mixture of programming, mathematics and art as Chris Coyier says. For me, it was just a way to change colours and sizes during the initial days of my tryst with web applications. Those were the days of tables where you aligned your content by creating tables within your HTML page. Scary as hell! But over the years I realised how cool CSS really is. It has become as important as any language in modern web development world. There is a...
Read More

Desktop apps with Electron - 2

In this post we see how to add multiple window options to the app that we made in previous post.

Creating multiple windows in your electron app In my last post, I wrote about how to get a basic Electron app up and running. But what do you do if you want a multi-window app? For example, if you want to display various user specific options once you select from the app menu. Let’s see how to get this done. In our main.js file, we add a couple of lines of code to trigger the options window when a user clicks on the options menu. For this we include a module called ipc which enables us to send commands across...
Read More

Desktop apps with Electron - 1

Let us see how we can create a desktop app using JavaScript, HTML and CSS using Electron framework.

What is the fuss all about? In my last post, I wrote about how JavaScript has taken over the programming world and now extends beyond the boundaries of a web browser. It exisits on the server side and on various desktop apps as well. So we’ll see how to create a simple desktop app using Electron. Electron is an open source framework maintained by Github to enable building cross platform desktop apps using web technologies like HTML, CSS and JavaScript. Electron was initially built to power Github’s Atom editor. Electron has been gaining popularity as is it easier for developers...
Read More