Podcast WP blog in a minute


Is that so easy to publish your own podcast ? It may require recording some awesome content and then push it to the web. Is there any better ways to do that ?

Anchor and WordPress

Anchor will help you to publish podcast, you can record your own or simply convert the WordPress post into listenable and add links to WordPress posts too. We can choose what ever post we want to be and there is an option for monetization.

Traffic that matters

Anchor is not only help me to publish podcast of my post but also increase the popularity of the blog too. In effect it the traffic will boom. So try it out

Here is a sample PODCAST

Quasar UI framework for Vue Developer blog

This episode is also available as a blog post: https://developerm.dev/2021/03/22/quasar-ui-framework-for-vue/
  1. Quasar UI framework for Vue
  2. MobaXterm SSH client for Raspberry pi
  3. Vuex store ?
  4. How to Modules in Vuex
  5. Redirect a route in Vue router

How reactivity works in Vuejs


One of the interesting thing about all these JavaScript Frameworks is reactivity of components. Each framework have their own way to treat us.

Problem

Suppose you have a counter that increment when user click it will increase by itself. So each time user click on it, the UI should update, it should reloaded the page/UI.

Solution

This problem have one solution, binding. Vuejs allow us bind members of the component.

<template>
<div >     
   {{counter}}
</div>
</template>

How to refresh / reload content to a div using jQuery


With JQuery ( light weight, super Java Script library) we can make call to API for fetching data or loading web page.

How about refresh or reload contents every 5 second ?

Steps

To auto reload the content we need the following

  • Create function
  • Set interval

Function

$(function () {
  // Function load content
function fetchData(){

}

});

Turn the data fetching portion of the AJAX call into JavaScript function inside the document ready jQuery function.

Set interval

setInterval(function(){
     fetchData()
 },5000)

The setInterval will invoke the function every 5 second using the call back function.

Enable Flutter Web support on Windows


Flutter can be used to create web applications, which is possible by enabling the feature. Before that I would like recommend the basic flutter setup on Windows post.

Flutter setup for Windows

Flutter become popular cross platform development tool. Let’s Install Flutter in Windows. As a open source project, we can install the flutter SDK from GitHub.

The prerequisites

The minimum requirement for Flutter for Windows is Windows 10 or later . In order to clone the repository we have to use git. Also recommend to have Visual Code /Atom for editing the code.

Download and install the Git tool for windows

Clone the repository

Get the latest stable version from GitHub repository or alternatively can download from flutter site

git clone https://github.com/flutter/flutter.git -b stable --depth 1

Use the -b option to clone the stable version

Set the path variable

You also need to update the path variables

  • From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
  • Under-User variables check if there is an entry called Path:
  • If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
  • If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.

Call the Doctor

run Flutter doctor command to inspect status of your Flutter SDK and tools installed

Android IOS development

For Android you have to install the Android Studio for development tool support which can be download from official website.

Enable web feature

Before starting make sure you chrome/Edge installed on your system. Otherwise the feature may not work

For enabling the web feature we have to switch to the beta channel ( web feature is an experimental feature and official full support is not yet released)

flutter channel beta
flutter upgrade
flutter config --enable-web

Run the flutter doctor command again and then check the web feature is list or not by using

flutter devices

and it will list the web feature

Test Run

Flutter web app on Windows 10

Create sample Flutter project

flutter create myweb_app

run the app using flutter run command

flutter run -d chrome

For building the web we can use

flutter build web

Create a simple Jason File


Like XML files JSON file can hold data in the form of  list or list of list. If you are familiar with Python list, it can be simplified. Using your favorite text editor you can create a Jason file.

JSON file can be used to store data for static web pages or can be used to transfer data between application. Let’s look at the very simple Jason file.

</p>
"institution":
[{
"name" : "RMHS MELATTUR",
"location" : "Melattur",
"catagory":"School",
"landmark":"Opp. GOVT. Hospital PMNA",
"distance":"12.km",
"Office phone":"947854545",
"district" :"Malappuram",
"web" :"http://rmhs.com",
"email" :"rmhs@outlook.com",
"course_offering" :["Plus Comp. Science","Plus Science"]
}]
<p>

In the above example we have a list called institution, and lots of keys and values, say location is a key and Melattur is the key value, you can identify the value with the key.  Each key is separated with a ‘.’ operator. and you can also have sub list which can be included within a ‘[‘ and ‘]’.

Can I hold more than one information in a Jason? yes. In the following format, within the same list.

</p>
{
"institutions":
[{
"name" : "RMHS MELATTUR",
"location" : "Melattur",
"catagory":"School",
"landmark":"Opp. GOVT. Hospital PMNA",
"distance":"12.km",
"Office phone":"947854545",
"district" :"Malappuram",
"web" :"http://rmhs.com",
"email" :"rmhs@outlook.com",
"course_offering" :["Plus Comp. Science","Plus Science"]
},
{
"name" : "NSS School",
"location" : "Manjeri",
"catagory":"School",
"landmark":"Opp. Municipality",
"distance":"12.km",
"Office phone":"947854545",
"district" :"Malappuram",
"web" :"http://rmhs.com",
"email" :"rmhs@outlook.com",
"course_offering" :["Plus Comp. Science","Plus Science"]
},
{
"name" : "MODEL School",
"location" : "Pandikkad",
"catagory":"School",
"landmark":"Opp.Buss stand",
"distance":"12.km",
"Office phone":"947854545",
"district" :"Malappuram",
"web" :"http://rmhs.com",
"email" :"rmhs@outlook.com",
"course_offering" :["Plus One Comp. Science","Plus One Science"]
},
{
"name" : "CENTRAL SCHOOL",
"location" : "Perinthelmanna",
"catagory":"School",
"landmark":"Opp. GOVT. Hospital PMNA",
"distance":"12.km",
"Office phone":"947854545",
"district" :"Malappuram",
"web" :"http://rmhs.com",
"email" :"rmhs@outlook.com",
"course_offering" :["Plus One Comp. Science","Plus One Science"]
},
{
"name" : "NSS COLLAGE",
"location" : "Palakkad",
"catagory":"Collage",
"landmark":"Opp. GOVT. Hospital PMNA",
"distance":"12.km",
"Office phone":"947854545",
"district" :"Palakkad",
"web" :"http://rmhs.com",
"email" :"rmhs@outlook.com",
"course_offering" :["BSc Comp. Science","BSc Physics,BSc Maths"]
},
{
"name" : "MES BED COLLAGE",
"location" : "Edathanattukara",
"catagory":"Collage",
"landmark":"Opp. GOVT. Hospital PMNA",
"distance":"12.km",
"Office phone":"947854545",
"district" :"Malappuram",
"web" :"http://rmhs.com",
"email" :"rmhs@outlook.com",
"course_offering" :["SS,MALAYALAM,ENGLISH"]
}
 ]
}
<p>

The file extension must be.json.

In the next post, we will learn how to read a Jason file in Python.

Build a Flask-Python web App


Building a dynamic website made so easy with Python -Flask, a Micro FrameWork which helps us to create the websites like Twitter and even more. Forget about the complicated web programming languages, start learning Python. So where you start, Python or Flask ?. I should say, you have to learn basics of how Python first, just have a look at Python.org

IDE

Which IDE I should choose? IDE helps you to write, compile, build programs. Pycharm is a good choice, Visual Studio also had added the feature for Python programmers in their 2013 edition onwards. You can Google it for more options. I Prefer Pycharm.

Flask and Web, How it works?

Flask arranges web pages as basic URL or routes.  Let’s take a look at the Pycharm App code.

from flask import Flask
app = Flask(__name__)

@app.route(‘/’)
def hello_world():
return ‘Hello World!’

if __name__ == ‘__main__’:
app.run()

When the Index page is loaded the @app.route(‘/’) will be fired with an initial page. You can create as much as routes you want to say ‘/blog’, ‘/news/ etc.

 

How to redirect a route to another in Flask app


How to redirect a route to another in Flask?

Python and Flask have the rich set of libraries and Classes which offer variety of tasks. You need not do lots code in Flask. Let’s come to the topic.

Finest example of redirecting route/web page is, when user login successfully , it is wise to redirect the login route to ‘chat room’, on a chat app. To do this you need to import the following packages.

from flask import redirect, url_for, request

After that you can use the redirect and url_for functions with return statement as follows

app.route(‘/login’, methods=[‘POST’, ‘GET’])
def login():
form = LoginForm()

if form.validate_on_submit():
user = User.query.filter_by(username=form.username.data).first()
if user:
if check_password_hash(user.password, form.password.data):
login_user(user, remember=form.remember.data)
return redirect(url_for(‘chatroom’))
return ‘Invalid user name’

return render_template(‘signin.html’, form=form)

In our Chat example if the user login then the route will be redirected to ‘Chatroom’ route, which is the chatroom page for our app.

SqlAlchemy[SQLite] databse connection in Python-Flask


Flask is a Python framework which can be used to build the web application from scratch. Flask is micro frame work which capable to build websites like Instagram, twitter and anything at programmers will.

SqlAlchemy is a package in Python Flask which simplifies data base connections. The following simple Application will explain ….. how.

This project was built on windows OS and Pycharm IDE

The connection string

</p>
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
 app.config['DATABASE_FILE'] = 'app2.db'
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + app.config['DATABASE_FILE']
 app.config['SECRET_KEY'] = '123456790'
 db = SQLAlchemy(app)
<p>

So the db is like the cursor to the database.

Making of Database enabled Class

The User class exclusively has some database capabilities, such as querying tables. It is a fine example of how inheritance helping to build better applications.

</p>
class User(db.Model, UserMixin):
 id = db.Column(db.Integer, primary_key=True)
 username = db.Column(db.String(80), unique=True)
 email = db.Column(db.String(120), unique=True)
<p>