Tag: webdevelopment

Svelte : create an internal API end point

Create an API end point in Svelte


How to create an API endpoint similar to Nuxt/Nextjs in Svelte routes.

Create a route of your choice (folder 📂) and add a index.json.js which implement and return body.

//index.json.js
export async function get() {
	 .... boring fetching code 😔 goes here

	return {
		body: { }
	}
}

That is all need to setup an internal API end point.

We can implement our own REST api. Also note that need not use API folder, all its mater is the get function.

Svelte and Svelte Kit

About svelte Javascript frame work.


Svelte is a compiler based Javascript framework for build fast and reactive web application with minimal effort .

Is it fast , Why ?

When we building web application using Vue or Reactjs, they also include all dependecies used. The bundle size can be depend on it. 😔.

Since Svelte used compiled version of pure vanilla Javascript, it can be smaller than others and can be have a faster startup. 🚀

For more info please visit Svelte

Learning Curve

Svelte is the most loved framework available today. It is easy to learn, adapt. In fact it simplifies the reactive programming and reduce code length and increase the performance.

I spend less time on Svelte than I spend for Nextjs. 😂

Svelte Kit

Nextjs for React , Nuxt for Vue and Svelte Kit for Svelte. It is easy to build apps with Svelte-kit. It build basic structure , routes and other configuration for us.

How to add packages in Golang

How to add packages to golang project


Golang is a programming language developed by Google. It can used to create cloud services, web , CLI tools etc. The first step to use Go is download and install the SDK.

Packages

There are plenty of packages ready to serve your needs in Golang directory. Most of them are opensource and all you have to do is get the required from Package page and add to the project using go get command as follows. 

 go get gorm.io/driver/sqlite

How to use GORM packages in Golang

How to use GORM package with SQLite database in Golang


Golang is a programming language developed by Google. It can used to create cloud services, web , CLI tools etc. The first step to use Go is download and install the SDK.

GORM

GORM is a ORM in Golang which help to generate and manipulate databases such as MySql, SQL server, SQLite etc. It will automatically create table for storing data based on ORM models.

In this example we are going to setup a SQLite database.

To make use of GORM first we need to add two packages

  • GORM
  • SQLITE drive

While using SQLite driver in Window there can be an gcc compiler error, please refer post link down below this post.

Let’s add the packages

 go get gorm.io/driver/sqlite
 gorm.io/driver/sqlite

Initialize and Migrate database with the ORM

First up all we need to generate a Model/Schema for our table and then initialize the database.

  type Product struct {
	gorm.Model
	Code  string
	Price uint
  }

With Automigrate GORM will make necessary changes in the database structure, only if there is a change occurs in the Schema. 

	db, err := gorm.Open(sqlite.Open("test.db"), &gorm.Config{})
	if err != nil {
	  panic("failed to connect database")
	}
	 // Migrate the schema
  db.AutoMigrate(&Product{})

The complete code for setup GORM is following. 

Complete code
//main.go
package main

import (
	"fmt"
	"gorm.io/driver/sqlite"
	"gorm.io/gorm"
)

  type Product struct {
	gorm.Model
	Code  string
	Price uint
  }

  func main() {
	db, err := gorm.Open(sqlite.Open("test.db"), &gorm.Config{})
	if err != nil {
	  panic("failed to connect database")
	}

	 // Migrate the schema
  db.AutoMigrate(&Product{})
   // Create
  db.Create(&Product{Code: "D42", Price: 100})

   // Read
   var product Product
   db.First(&product, 1) // find product with integer primary key
   fmt.Println(product.Price)
    db.First(&product, "code = ?", "D42") // find product with code D42
 
  Update - update product's price to 200
    db.Model(&product).Update("Price", 200)
 db.Model(&product).Updates(Product{Price: 200, Code: "F42"}) // non-zero fields
 db.Model(&product).Updates(map[string]interface{}{"Price": 200, "Code": "F42"})
 Delete - delete product
 db.Delete(&product, 1)
  }

How to solve gcc error in Golang -Windows

How to solve gcc compiler error in Golang on windows machine


On windows you may got the gcc compiler error while trying to add packages like “gorm.io/driver/sqlite” in Golang. The cause for the error is that, underlying package require the gcc C compiler which is not installed on Windows PC by default.

How to solve

We need to install the C compiler on Windows machine and also need to add the path to environment variable.

The easiest way to install the mingw package from tmd-gcc repository.

Also add the path to the bin folder as follows in environment variables.

C:\TDM-GCC-64\bin

local usage : oh-vue-icons for Vue

How to display icons[local] using oh-vue-icon component in vuejs


There are few good npm icon packages work with node project and vue as well. When I try font-awesome for my app (vuejs), it didn’t work for me. There is a package solely for vue(Vue2 and Vue3) users, oh vue icons.

The package is consisting of 28K+ icons , all of them are waiting for developers and UI designers. So how do we use them ?

Install the package

yarn add oh-vue-icons
# or
npm install oh-vue-icons

Local import

Let’s got to the file where you want to use and in the script section add these lines


import OhVueIcon from "oh-vue-icons";

import {
 
  FaHome
} from "oh-vue-icons/icons";

OhVueIcon.add(
  
  FaHome,
  
);
export default {
 ...
  components:{
   'v-icon': OhVueIcon
  }
};

In the he 3rd line we imported the individual Icon from oh-vue-icons. Visit the icon page and copy the name of the icon by clicking and copy. Then add it to the main.js as above.

v-icon

Using the v-icon we can include icons in the template. The component has few important props like name, scale etc, where scale is used to adjust the size of the icon. For complete list of props and features refer the GitHub documentation.

                <v-icon name="fa-wordpress"  scale="1.5"/>

Icon set/name we imported has two part (all of them has to be in lower case while passing to name prop). The first two letters (fa) should be appear before the hyphen(-) and the rest come after.

Following vue posts may help you explore more

Two must have plugin for web development

Two VS Code extension you may need for web development


Media and Text is two important elements in web app development. We always need pictures for place holders and text too. I found two of Lore’s extensions in VS Code market place, which is not so popular but useful.

Lorem ipsum

Iosum extension help us to generate line/paragraph text running the command from Pallet using Ctrl+ Ship +P

Lorem Picsum

This one let me insert random images with img tags into my HTML template. All I need is , type pics and choose one from the list.

I hope, this will help some one. Got some thing better than this, leave the link in the comment section, I will add in this post later.

oh-vue-icons for Vuejs app

How to display icons using oh-vue-icon component in vuejs


There are few good npm icon packages work with node project and vue as well. When I try font-awesome for my app (vuejs), it didn’t work for me. There is a package solely for vue(Vue2 and Vue3) users, oh vue icons.

The package is consisting of 28K+ icons , all of them are waiting for developers and UI designers. So how do we use them ?

Install the package

yarn add oh-vue-icons
# or
npm install oh-vue-icons

Global import

Let’s got to entry point file, usually main.js and the following lines

import OhVueIcon from "oh-vue-icons";

import { FaFlag, RiZhihuFill, MdFacebook, OiOctoface, BiTwitter, FaWordpress } from "oh-vue-icons/icons";

OhVueIcon.add(FaFlag, RiZhihuFill, MdFacebook, OiOctoface, BiTwitter, FaWordpress);

Vue.component("v-icon", OhVueIcon);

In the he 3rd line we imported the individual Icon from oh-vue-icons. Visit the icon page and copy the name of the icon by clicking and copy. Then add it to the main.js as above.

v-icon

Using the v-icon we can include icons in the template. The component has few important props like name, scale etc, where scale is used to adjust the size of the icon. For complete list of props and features refer the GitHub documentation.

                <v-icon name="fa-wordpress"  scale="1.5"/>

Icon set/name we imported has two part (all of them has to be in lower case while passing to name prop). The first two letters (fa) should be appear before the hyphen(-) and the rest come after.

Following vue posts may help you explore more

CSS frameworks that made web development easy

About CSS Frameworks that can replace your bootstrap needs


Nowadays web development on responsive design, it means that work fine with all types of screens, mobile, computer and tablets. Creating a web app app consisting of beautiful UI using CSS.

CSS can be little bit weird and tedious, bootstrap made things better and the other UI. But you know there there are even better solution , the CSS Frame works. Why a framework ? it is more customizable, smaller libraries, easy to understand, good document ion.

I have two choice when comes to CSS framework, Bulma and Twailwindcss. Tailwind more features and being used larger development team due to its flexibility. The second is Bulma, small, customizable.

Both these framework supports, all front end frameworks, like vue,react ect. Tailwind only supports Vue3 and Bulma has no issue with that.

How to use

All you have to do is add the script or add it to the project using npm or yarn. We will discuss about configuring bulma and tailwinds on another posts.

Which one ?

It depending on personal preference, for beginner Bulma is more than enough and I like bulma. Both are good.

Top 3 free services for deploy Vuejs apps

Top services for hosting vuejs apps


When I first start with Python Flask, I use Heroku for deploying app, it is easy and git controlled. For Vuejs Heroku fails on me, but I keep in search and found alternative methods and services.

Top Pick

I here only mention three services which will be the best choice for beginners other also good and useful.

Vercel and Netlife

Both are capable of deploying web app from Git, but I prefer Netlife, you can deploy app in seconds , just go working with Vuejs build command and go through deployment guide. The Vercel also have similar features.

Netlife also provide manual deployment which can be done by dragging and dropping the build folder, that’s cool, isn’t it?

Final one is Render it is little bit professional hosting service, you can try ….

Links

https://www.netlify.com/

https://render.com

https://vercel.com/