Forem: Owais Ali

A Free Instagram Bot for Growing Your Follower Base

Owais Ali — Sat, 12 Dec 2020 09:14:24 +0000

The bot will follow people, like the posts and comment as well

Continue reading on Python In Plain English »

9 must-have Chrome extensions to make your life easier in 2020

Owais Ali — Tue, 22 Sep 2020 11:16:54 +0000

A listicle of Chrome extensions for everyone

Continue reading on An Idea »

11 Facebook Groups of Medium Members to Join Today to Increase Readership

Owais Ali — Sat, 22 Aug 2020 14:53:52 +0000

Market your articles through Facebook to thousands of Medium Members

Continue reading on ILLUMINATION »

A Web Developer’s Roadmap to Learning React Native

Owais Ali — Mon, 27 Jul 2020 15:57:52 +0000

Is it really an easy switch from web to mobile development?

Continue reading on Bits and Pieces »

How to Host a Static Website on Github for Free

Owais Ali — Fri, 24 Jul 2020 13:01:01 +0000

Photo by Soundtrap on Unsplash

Yeah, that’s right. Unlike many websites that require you to purchase hosting and domain, GitHub lets you upload a static website on their platform using Github Pages for free. Let’s make it clear that a static website means the content will not frequently change, i.e., a basic HTML and CSS site, which is a good starting point for beginners as well as experienced programmers. Let’s start by discussing why it is a good idea to host your website on GitHub.

Reasons/Advantages to host your website on Github Page

There can be a lot of reasons and advantages to hosting your website, the most prominent are:

To make your profile, as many developers prefer to host their profile on Github
To create a portfolio and showcase your skills to potential clients especially your front-end skills
You want to set up your blog where you can share articles or how-to tutorials
You already know basic Git, and you want to enhance your learning about Git further. In that case, I will suggest you learn about GitHub gist, GitHub actions, and CI/CD tools as well

In this article, we will discuss how to set up a website for free, what tools you need to have, what will be the URL when the site is published, how many sites you create on Github. So let’s keep moving.

Let’s get started

Hosting a website on GitHub page is not rocket science; instead, it is so simple that even if you have just started programming and knows basic HTML and CSS and basic Git commands like add, commit and push you can do that. If you do not see these git commands don’t worry, the commands we ll use will be explained as well. If you want to learn Git then I will suggest you read my another article to get yourself familiar with git basics:

Learn Git and Github Step By Step

We will be discussing two variants of hosting a website on Github. You can work on either one or both of them because most of the procedure is the same in variant 2. The difference is in the domain name when your site is live. So if you are creating a personal profile, then choose variant 1, its URL will be shorter, and if you are doing any other website, its URL will be longer, then choose variant 2.

Variant 1: Hosting a personal page on GitHub with domain https://.github.io

First, we will create a demo application, that works on our desktop PC

Step 1: Setup Git, Register GitHub account, and create a repository

Go to https://git-scm.com/downloads and download Git by choosing your operating system: Windows, Mac, or Linux and install.

Then, go to https://github.com and sign up. After signing up, click on the plus sign and choose a new repository (a repository is like GitHub gives you a folder/directory where you keep your code files and folders on GitHub). When it asks you to enter a name, type the name in the format .github.io so since my username on GitHub is ows-ali, I will write ows-ali.github.io

Step 2: Clone the repository in your computer

Now my repository will be created at https:/github.com/ows-ali/ows-ali.github.io. Now, in your laptop, create a new folder and in command prompt type:



git clone https://github.com/<your\_username>/<your\_username>.github.io

Step 3: Add your website pages

You will get an empty folder created on your laptop. Go inside the folder and add your project files. It can simply be a single index.html file or more project files like I have as below (yours will be different of course)

Step 4: Push to GitHub

Now the code is on your computer/laptop until now. We want to push the code on GitHub. For that, we use three commands: add, commit, and push. Now open the command prompt again and type the following commands as it is in order.



git add .
git commit -m "my first commit"
git push origin master

Step 5: Boom! Access the published website on the internet

Now, type the repository name from step 1 in your browser, and you will see your site live.

You can also visit my hosted site at https://ows-ali.github.io

Variant 2: Hosting any static website from your GitHub account with domain https://.github.io/

If you want to host more than one website, you can do so easily and as many as you want. You can make a new repository or use an existing repository that has an index.html file.

The hosted URL will be in the format https://.github.io/. Deploying any other repository is the same as we learned in variant 1 with the difference in the final step.

Once you have pushed the code on Github go to Settings, navigate to Github Pages section, and select source as ‘master branch’ and then your repo will live as well.

That’s all it in this tutorial. Also, I have listed a few important points below, hope it helps further.

Note:

Your project must have an index.html file, for Github to recognize and host it.
It is free. You don’t have to pay for hosting and not even domain.
Even after your site is live, you can make as many updates as you want and they will go live. But it some times several minutes to reflect updated changes so please be patient.
Unfortunately, it does not support any programming language like JAVA, PHP, Node, etc
It does not support any databases
Luckily, you can host as many sites on GitHub pages as you want for free.

Hope you liked the article and it helped you in hosting a site on GitHub.

Have a good day.

Build forms in React Native with tcomb-form-native

Owais Ali — Tue, 25 Feb 2020 13:40:02 +0000

Building forms from scratch is hectic than we may imagine. tcomb-form-native is one powerful library, that helps building complex input forms having validation, maintain state on input or submit, or initializing the form with default values, styling the input fields etc. Here is the official link as well:

gcanti/tcomb-form-native

In this tutorial, we will explore the library while writing example codes to see how it practically works.

Let’s get started with obvious steps:

Initializing new RN project:

react-native init tcombFormNativeTutorial

Installing tcomb library:

npm i --save tcomb-form-native

Building first form:

Lets build a new component in Tcomb.js which renders our form. tcomb automatically generates a form based on provided domain model, ‘PersonModel’ in our case, as follows:

import React, { Component } from 'react';
import { View } from 'react-native';
import t from 'tcomb-form-native'

let Form = t.form.Form
class Tcomb extends Component {
  constructor(props){
    super(props)
  }
  render() {
    let PersonModel = t.struct({
      name: t.String, // a required string
      surname: t.maybe(t.String), // an optional string
      age: t.Number, // a required number
      rememberMe: t.Boolean, // a boolean
    });
    return (
      <View>
       <Form
         ref='form'
         type={PersonModel}
         // options={{}}
         // value={{}}
         // onChange={{}}
       />
      </View>
    )
  }
}
export default Tcomb;

The above form adds Text Input, Numeric and Boolean input fields. And notice, it adds labels on its own, and it adds mandatory validation by default and you need to use t.maybe() for optional fields (i.e. ‘surname’ in the above form).

Validating input:

To verify the fields we call getValue() function on form using ref. We will add a submit button and its handler which ultimately triggers the validation of the fields:

submitForm() {
  var value = this.refs.personForm.getValue();
  if (value) {
    // if validation fails, value will be null
    ToastAndroid.show('Validation successful', ToastAndroid.SHORT);
  } else {
    ToastAndroid.show('Please fix errors', ToastAndroid.SHORT);
  }
}

and in render

<TouchableOpacity style={styles.button} onPress={this.submitForm}>
  <Text style={styles.buttonText}>Submit</Text>
</TouchableOpacity>

here is the result

Adding default values:

Let’s add default values to our form. We add this.state.value in our constructor

this.state = {
  value: {
    name: 'First',
    surname: 'Last',
    age: 25,
    rememberMe: true,
  },
};

and update form as follows

<Form
  ref='personForm'
  type={PersonModel}
  // options={{}}
  value={this.state.value}
  // onChange={{}}
/>

Changing labels

To change the label from ‘Name’ to ‘First Name’, we add options inside render:

let options = {
  fields: {
    name: {
      label: 'First Name',
    },
  },
};

and update our form

<Form
  ref='personForm'
  type={PersonModel}
  options={options}
  value={this.state.value}
  // onChange={{}}
/>

Hint/Help Text:

let options = {
  fields: {
    name: {
      label: 'First Name',
      help: 'Must be less than 20 characters',
    },
  },
};

Dropdown field:

Let us add a dropdown field of gender:

let PersonModel = t.struct({
  name: t.String, // a required string
  surname: t.maybe(t.String), // an optional string
  age: t.Number, // a required number
  rememberMe: t.Boolean, // a boolean
  gender: t.enums({M: 'Male', F: 'Female'}, 'gender'),
});

Disabling fields:

Here we disable the fields ‘age’, ‘rememberMe’ and ‘gender’. Notice, we sometimes use ‘editabale’ and sometimes ‘disabled’ configuration variables

let options = {
  fields: {
    name: {
      label: 'First Name',
    },
    age: {
      editable: false,
    },
    rememberMe: {
      editable: false,
    },
  },
};

Conclusion:

We built a simple form using tcomb-form-native library. We used textinput, dropdown, toggle switch, we also added mandatory validation and added a form submission handler. There will be another tutorial in the continuation where I will show how can you add custom advanced validation to the fields. This project is also uploaded on Github for reference:

https://github.com/ows-ali/tcombFormNativeTutorial

Set up a Yii 2.0 Application in Windows

Owais Ali — Wed, 07 Nov 2018 16:15:06 +0000

PHP Yii 2.0 Framework

Let’s setup a Yii 2.0 Application on local PC. We will setup Yii 2.0 advanced application on Windows alongwith:

Connection with MySQl
Enabling Pretty URLs
Virtual Hosts (for backend and frontend)
Installing AdminLTE Theme

Installing the project

Let’s install the application in our PC using Composer (you should install composer first if you don’t have already).

Head over to your xampp/htdocs folder and run this command in cmd:

composer create-project --prefer-dist yiisoft/yii2-app-advanced ows-yii2-application

The application will be installed in ‘ows-yii2-application’ directory/folder. You can rename it according to your project name

Enter into the folder ‘ows-yii2-application’ in cmd and then run the command:

init

Choose ‘0’ or ‘dev’ to initialize the application in development environment.

Run the following command to install dependencies:

composer install

You now have the working application in your local PC. Turn on your Apache server using XAMPP/WAMP or any other server that you use and headover to

localhost/ows-yii2-application/backend/web

and

localhost/ows-yii2-application/frontend/web

DB Connection with MySQL

Make a database in your local machine with name ‘ows_database’. To connect to this database, go to common/config/main-local.php and set dbname to

'dsn' => 'mysql:host=localhost;dbname=ows\_database',
'username' => 'root',
'password' => ''

(and edit the username and password also if you have changed them otherwise leave it as it is)

Now, run the command

yii migrate

This will generate the user table in your database and RBAC tables as well for future use.

Now, Go to

http://localhost/ows-yii2-application/frontend/web/index.php?r=site%2Fsignup

And create a user with

username : testusername

password : testpassword

Now, you can login into the application using these credentials.

Enabling Pretty URLs

Currently, the URL looks like:

http://localhost/ows-yii2-application/backend/web/index.php?r=site%2Flogin

but we want it to be as follows:

http://localhost/ows-yii2-application/backend/web/login

In order to enable pretty URLs, go to backend\config\main.php and uncomment the following code in $components‘urlManager’:

'urlManager' => [
            'enablePrettyUrl' => true,
            'showScriptName' => false,
            'rules' => [
                '<alias:\w+>' => 'site/<alias>',
            ],
        ],

Make a .htaccess file with the following code and place it in backend/web folder:

RewriteEngine on

RewriteCond %{REQUEST\_FILENAME} !-f
RewriteCond %{REQUEST\_FILENAME} !-d
RewriteRule . index.php

Do the same in frontend application.

Virtual Hosts

Now, we want to run our backend and frontend applications from two different and easy to remember domains/server names. Like:

admin.ows-yii2-application.com for backend application

and

ows-yii2-application.com for frontend application.

In order to achieve that, copy and paste the following in your httpd-vhosts file, most likely on ‘xampp\apache\conf\extra\httpd-vhosts’ (Make sure to change the DocumentRoot to set it as your own web directory)

<VirtualHost \*:80>
       ServerName admin.ows-yii2-application.com
       DocumentRoot "E:\xampp\htdocs\ows-yii2-application\backend\web"
</VirtualHost>

<VirtualHost \*:80>
       ServerName ows-application.com
       DocumentRoot "E:\xampp\htdocs\ows-yii2-application\frontend\web"
</VirtualHost>

and the following in your hosts file at C:\Windows\System32\drivers\etc (you may be required to open the file in Administrator mode):

127.0.0.1 admin.ows-yii2-application.com
127.0.0.1 ows-yii2-application.com

Restart your Apache server.

Now, you can access your backend and frontend applications on admin.ows-yii2-application.com and ows-yii2-application.com respectively.

Installing AdminLTE Theme in Yii 2.0 Application

Let’s now setup the AdminLTE Theme with our application as well. Run the following command

composer require dmstr/yii2-adminlte-asset "^2.1"

Now, go to frontend/config/main.php and add this in components[‘view’]

'view' => [
            'theme' => [
                'pathMap' => [
                    '@app/views' => '@vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app'
                 ],
             ],
        ],

Follow the similar steps for the backend application if you want to enable the AdminLTE theme in backend application too.

Conclusion

So we have successfully set up our Yii 2.0 Application, a great PHP Framework. You can find all this stuff in my repository at:

https://github.com/ows-ali/ows-yii2-application

if you don’t understand anything. Also, if you are new to Github and want to learn the basics, then give it a read:

Learn Git and Github Step By Step

Thank you for reading. If you liked the article, please give it a clap.

My first experience of Hacktoberfest

Owais Ali — Fri, 02 Nov 2018 10:47:51 +0000

Starting contribution after Hacktoberfest

I read about Hacktoberfest on Yii 2 Twitter group. From getting confused to is it about hacking, to knowing what is PR, to start contributing a little and finally to opening my own repository ows-ali/Hacktoberfest dedicated for Hacktoberfest exclusively.

Beyond my expectation, my repository got:

80 Contributors (Around half lot of them were those who made their first ever contribution)
514 Commits
105 Forks

And this

Finally, on 27th October since I had already completed more than 5 Pull Requests, I received the email (I did not wait to write article after receiving my shirt because I wanted to write all memories as soon as possible before they get blurred)

Learning Github

I have used Github before and already knew its basic commands since I have maintained some projects on Bitbucket. But I did not use it as open source platform before as you can see in the first image. Only in October I have been contributing consistently and will take this further Inshallah. During this month I learnt a lot of things that are worth sharing.

Issues, PR, Merging, Closing and Reverting a PR

Learnt the most important components required to contribute on open source projects i.e. Issues and PRs and how labels support the issue tracking.

Github Pages

Learnt about Github pages. Made my own online profile on Github page and also added Jekyll theme to the repository.

Github Bots

Learnt about wonderful bots on Github. And used the bots (with the contribution of others of course to write messages) that welcome and appreciate the contributors when they create an issue, make their first ever PR on my repo or their first ever PR is merged on my repo.

Files like PR Template, Issue Template, Contributing, CodeOfConduct

Before participating in Hacktoberfest, I was not clearly aware of the need and concept behind these files but now I appreciate the repositories should have these files and I will try to make these files in my future repositories as well.

If you are a beginner in Git and Github, you can learn the basics on my following article:

medium.com/@owaisali.cs/path-to-learning-git-and-github-be93518e06dc

Mistakes

Since it was my first repository opened for Hacktoberfest and my plan to improve my own learning, I knew that mistakes would be inevitable. So, it happened of course. Here are some of them.

Structure of files kept on changing

Initially, I started accepting contributions from those who have code on HackerRank only but seeing the interest all around the world I decided to accept others code as well so i had to make a folder for HackerRank and asked to make a new folder if they want to add code from a new platform.

Besides that I created issues asking contributors to change the README file a lot of time to make it look better. You can see below how it started and how it looks now.

From this:

Contributors v1

To this:

Contributors v2

And finally to this:

Contributors v3

PR and Issue Templates were not defined earlier

It is a great way to remind people to check if they have fulfilled all the requirements of the PR or not. A lot of times I had to ask them that they have forgotten to add their names and info in README file.

Exposure

During participating in Hacktoberfest, I also started using Twitter more and I came across some great trends there.

Trends

#100DaysOfCode (Interestingly I have also started this challenge but since I do not know whether I will be able to complete it or not, I did not mention it and you don’t know it)
#301DaysOfCode
#momscancode (A great initiative and startup to beat imposter syndrome faced by moms. If you are a busy house wife and want to learn coding then this is the best opportunity to learn with fun and other moms)
#100DaysOfDataScience
#DataScienceIn3Months

Learning Platforms

I also came across a lot of learning platforms which are great for the beginners as well as the experts. I learnt over there, build projects there, fixed issues and contributed something in their repositories as well. Some of those platforms are

FreeCodeCamp (the most active, beginner friendly, user friendly, and completely free platform where anyone can learn Full Stack Web Development even from 0 experience in programming literally. I am also on my way to gain a certificate of Api and Microservices)
TheOdinProject (Great for learning ROR)
Exercism (Great for learning languages and getting your code reviewed from mentors)

Conclusion

I started contributing to Github, my October went almost all green and this is just the beginning. I will be doing a lot on open source from now onwards, to learn and grow myself, and to give back to the society. If you are looking for similar fun filled activities, I will recommend you to check the following

24 Pull Requests (similar to Hacktoberfest but in December)
GSOC (If you are an undergrad student then this is a great opportunity for you to work on open source with big companies and earn some cash as well)
Google CodeIn (If you are pre university students then this one is great to expand your coding skills)
TheOdinProject (If you want to learn web development on ROR platform, from 0 to job ready, this one is great)
MomsCan:Code ( As mentioned earlier, if you are a mom you can learn with other moms wherever you are)
You can also earn cash prizes, T-shirts and other souvenirs by participating in the online coding platforms like TopCoder, CodeChef, HackerRank etc welcoming all skill levels and all programming languages.

If you liked the article, learnt something or found yourself motivated then you can appreciate with claps.

Learn Git and Github Step By Step

Owais Ali — Mon, 29 Oct 2018 13:08:57 +0000

Hey! In this post I am going to show you how you can start using the best version/revision control software today, none other than, Git.

If you are starting with coding or you already know coding but not yet used Git before, then it is time to introduce yourself to this wonderful technology and this article is a good start to embark on your Git journey.

Why this article is a good read:

This article is not going to tell you the syntax only, I am going to focus on what is the concept/working behind that command.

Why even do Git/Github:

The best way to maintain/manage your project. You can access your project anywhere anytime
When you work with a team then the issues of working on same files and other conflicts are handled carefully by Git
Almost all Open Source world knows Git and since the code will be visible to everyone, people will be interested in contributing to your code as well
It is free

This is my first post on Medium so there may be some mistakes or not up to the mark with Medium, so please bear with me.

Enough now! Let’s begin the real stuff here.

Creating a Github repository

Let’s start with a simple PHP project in your say ‘E:\’ drive and directory ‘E:\xampp\htdocs\testing’. (See below images)

The target is to upload this project on Github.

You need to have an account on Github which is free to create of course, so you must sign up if you haven’t. After signing in, click on ‘New repository’ and you will see a screen like this:

Add the repository name of your choice (add description if you want) and click ‘create repository’.

Now, open Command Prompt, by typing ‘cmd’ in start menu, and change directory to the ‘testing’ directory like this:

Type ‘dir’ and you can see in the following picture we have only one file ‘index.php’ which we will be pushing to Github

Git on local

Now, you need to tell the ‘testing’ folder that this is going to be a Github project. So, you need to initiate the ‘testing’ folder as local git repository. This simple command will do it

git init

It will create a .git folder in testing folder and it means you are now ready to play with remote Github project. You probably be thinking how should I tell git that where my repository on Github is, so here is the command which tells what is the url of your Github repository:

git remote add origin https://github.com/ows-ali/testing

In your case ows-ali/testing will be replaced by [your_username]/[your_repository_name]

Now, you do

git add .

This stages your files (add command means you are prepared to make a commit to git and then push it, files can be removed after adding so this extra layer comes handy a lot of time).

Now few things are useful to know about this command:

git add . add all the edited or new files to stage
git add index.php will only add index.php to stage and only this will be pushed to Github ultimately

Now, you are ready to make a commit

git commit -m “first commit”

The commit is what takes the changes from your local repo to remote repository on Github (a commit can contain changes in one file, or many file, or creation or deletion of files etc)

So, finally the most awaited command that will finally push your code on Github is:

git push origin master

Now go ahead, check your repository, the index.php will be visible on your repository and it will look like this:

Introducing README Markdown file

Now, in the above picture you see below that it is asking you to create a README file. Wait! that was not in the plan, I haven’t heard of it and probably my project does not have it. No worries, it is another beautiful and important file about Git projects and it is totally worth it to understand it. README.md is a markdown language which you can use to provide description about your project, also you need to follow a specific markdown styling to write. Oh but is that it? No, the most wonderful thing about README file is whenever you open your repository on Github, the Github will automatically show you the README.md file if it has any. Pretty Good, right.

So well you can go back and create a file and push it following the above steps but we can also create files right from the repository as well. So, click on ‘Add a README’ and add your content as following or anything you like:

Click on preview and you can see the changes before finalizing:

You can learn few styling here:

# is equivalent to
tag in html (no closing required though like in html)
## is equivalent
and so on
text acts similar to tag

Looks fine, now go ahead and type your commit message (remember commit is used to carry in all kind of changes to repository) and click commit.

Now, your repository will look like this

Lovely! Looks much better.

Ok, wait, there is a problem. Right! this README.md file is not in your local computer. Hmm..

Pull from remote Github repository

Here comes the command pull. Open the command prompt in the project directory and type

git pull origin master

Seems wonderful. Now, the remote and local repositories are in sync. So this concludes our article here. You can have a glass of water if you feel like it.

Going Beyond

If you got this, you can go ahead and learn about:

I will hopefully write more on how can you dive into contributing into open source so stay tuned.

It’s my first article but you already know that Medium has a wonderful clap feature, right? :)

Happy Coding!

Forem: Owais Ali

A Free Instagram Bot for Growing Your Follower Base

9 must-have Chrome extensions to make your life easier in 2020

11 Facebook Groups of Medium Members to Join Today to Increase Readership

A Web Developer’s Roadmap to Learning React Native

How to Host a Static Website on Github for Free

Reasons/Advantages to host your website on Github Page

Let’s get started

Variant 1: Hosting a personal page on GitHub with domain https://.github.io

Step 1: Setup Git, Register GitHub account, and create a repository

Step 2: Clone the repository in your computer

Step 3: Add your website pages

Step 4: Push to GitHub

Step 5: Boom! Access the published website on the internet

Variant 2: Hosting any static website from your GitHub account with domain https://.github.io/

Build forms in React Native with tcomb-form-native

Adding default values:

Dropdown field:

Conclusion:

Set up a Yii 2.0 Application in Windows

Installing the project

DB Connection with MySQL

Enabling Pretty URLs

Virtual Hosts

Installing AdminLTE Theme in Yii 2.0 Application

Conclusion

My first experience of Hacktoberfest

Learning Github

Issues, PR, Merging, Closing and Reverting a PR

Github Pages

Github Bots

Files like PR Template, Issue Template, Contributing, CodeOfConduct

Mistakes

Structure of files kept on changing

PR and Issue Templates were not defined earlier

Exposure

Trends

Learning Platforms

Conclusion

Learn Git and Github Step By Step

tag in html (no closing required though like in html)

and so on