General Page load speed is an important metric for SEO. Targeting images for the appropriate browsers goes a great deal in achieving this, particularly on mobile devices. We shall discuss the srcset attribute on the img tag to help us achieve this. This attribute is available on newer browsers. Before we start, we need to […]
General Info Flexbox is aimed at a container based layout where we are primarily focused on arranging container items in a single dimension with some abilities of aligning along the cross-axis as well. Because of this, flexbox is often the preferred tool for laying out items along a single dimension. This is different from CSS-Grid […]
// crreate a whole random number between [0,20) function wholeRandomNumber(){ return Math.floor(Math.random() * 20) } console.log(wholeRandomNumber()) // random numbers within a range [min, max] function randomRange(min, max){ return Math.floor(Math.random()*(max-min + 1)) + min } console.log(randomRange(1,2)) // parseInt // return integer from a string. It will returrn NaN if string cannot be converted to a number […]
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: from django.conf.urls import url, include from django.contrib import admin from django.conf import settings from django.conf.urls.static import static from .views import ( HomeView, AboutView, ContactView, LoginView, RegistrationView ) urlpatterns = […]
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 […]
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; You will find this code often. We strip off any padding around ul because it is automatically added by browsers ul{ padding: 0; } If you want the list […]
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 […]
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: import axios from ‘axios’; const API_URL = ‘http://localhost:8000/api’; export class RestAPIService{ constructor(){ } async getCodes() { const url = […]
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 […]
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 […]