Front End Development (16)


ES6 Javascript quick recap cookbook




Setting active navbar link in Django template

Here is probably the best way to set the active navbar link in Django template. Note, this needs no jQuery/ javascript. Step 1 Create named urls:

Step 2 Create a Navbar template. I keep it stored in a file called navbar.html inside “templates/base” folder. This “templates” folder is at same level as manage.py I […]




Add eslint config file (eslintrc) to Vue project

If you created Vue project via vue create my_proj and had eslint enabled in the options, You should get a .eslintrc.js in the root folder. Sometimes, I have seen it isn’t created. Worry not, here is how you can generate it manually. Make sure you have eslint module in node_modules folder. Then in console, do […]




CSS common tricks – Avoid text wrapping at whitespace

  • December 11, 2019
  • CSS

Here is how to avoid wrapping of text in elements like btn, div etc (block, or inline-block elements). add this to the btn styling: white-space: nowrap;




Vertically center items in Vuetify v-app-bar

I was writing a navigation bar and wanted to center some buttons in the navbar. Here is how I did it. Note that there are many items in nav-bar which is not very good in terms of material design principles (for smaller screens). If there are that many items, it is advisable to put a […]




Add Axios to your Vue app

Install axios npm install –save axios Then goto src/ folder and add a file called RestAPIService.js. In this file we will reside all our AXIOS interfacing code and Rest API calls. The RestAPIService.js looks like this:

The Service has two methods getCodes and getRate. They hit the respective endpoints to get currency codes and […]




Building Front-End App in Vue with Vuetify – Part 2

We have been building Currency Converter using Vue.js. In the part-1 we built the basic layout of the app with navbar. In this tutorial we will setup a form with validation. The code for this is here. Please note that the code has been committed under commits matching with Parts. So for complete code for […]




Building Front-End App in Vue with Vuetify – Part 1

In this series, we will be building front-end app Currency Converter using Vue and Vuetify. The code for this is here. Please note that the code has been committed under commits matching with Parts. So for complete code for this tutorial, please refer to commit branch “part-1”. Pre-requisites: Please ensure that npm-cli is installed. You […]




Tips for making reusable React components

Tip 1: props.children

Instead of invoking the component with a self-closing tag <Picture /> if you invoke it will full opening and closing tags <Picture> </Picture> you can then place more code between it and display using this.props.children (props.children for stateless components) . This decouples the <Picture> component from its content and makes it more reusable. Tip 2: Stateless Components […]




Generator Functions in Javascript

We will be building on what we discussed in previous post generator-functions-using-co Here we will focus on how to implement something analogous to co. i.e. actually implement an iterable. How to run the function* Steps involved in running through a generator function. If its a bit confusing, it will be clear when we look at the […]