DEV Community: Pranav Pandey

Host Static Websites for Free

Pranav Pandey — Thu, 04 Apr 2019 17:57:39 +0000

Having our own website can be beneficial to get a better opportunity or to make us standout and shout in this over crowded market, but there are very few people who want to spend money to make one and keep it running. If I say there is no need to pay extra money to make your personal website or portfolio with full control then, what would you say? Please read below to know more and how you can make it happen.

Prerequisites

A GitHub account to host your website. You can register for a GitHub account here.
Git to push your website on GitHub. You can install git from here depending on your platform (Linux, Mac or Windows).
A good code editor to build or edit the website. You can download VS Code, Atom or Notepad++ depending on your platform.
A static website which we are going to host. This is optional and you can develop or update the website later.

Custom domain

A domain which you want to connect with the website. This step is optional and only required if you want to use your own personalised domain. You can buy a domain name on GoDaddy, Namecheap, or anything else. Please don't buy their hosting service as we are going to host the website for free on GitHub.

Background

Above, I have discussed about git which is a version control system used to maintain code or source code. Here, we are going to use some of its commands but it is a very useful and powerful tool making the developers life easier in every software industry. If you want to learn more about git, you can take a very well written and free course at Udacity.

Here, I have written static website, what does it really mean? Static websites are simple HTML pages which cannot perform server side operations. So, you cannot host your PHP blog, Node.js or web app with this method, you can use Jekyll for blogging or convert your WordPress blog into a static website by using this generator.

So, there are some limitations but I think we can live with that as still we can do enough amount of work with static websites. Still not sure? Please check out my personal website which is completely a static website built with Polymer and can be hosted by using this technique.

Prepare the website

First of all, we need to initialize the website structure which we can put on our GitHub account. For this, you can use any static website with an index.html page in its root directory.

If you have not created the website yet then, just follow the steps below to create a website for testing, you can update it with the actual website later.

Create a new folder or directory, say website.
Create an index.html file inside this folder.
Place the below code in it and save.

    <head>
      <title>My website</title>
    </head>
    <body>
      <h1>My website, Coming Soon!</h1>
    </body>

Create a repository

We have successfully created our website, now we need to place or push this collection of codes called as source code on GitHub. For this, we first need to create a repository or repo with our registered account.

Login with your GitHub account.
Create a new repository with the name username.github.io. Here, username is your GitHub account user name.
Now, we have successfully created a repo, it is just a place on a server which will store our website to serve it globally.

Push the website

Now, we are going to push our website on GitHub. For this, we first need to commit the code locally. Please follow the steps below to make your first commit.

Open a terminal or command prompt in the website folder.
Add all the files in the staging area by running the below command.

    git add -A

Now, type a commit message and commit.

    git commit -m "Initial commit"

If you are running git for the first time then, you need to setup your git username and email to do your first commit. It can be done by using the below commands.

    // Configure name
    git config --global user.name "Your Name"

    // Configure email
    git config --global user.email "email@example.com"

We have successfully committed our website code. Now, we will add origin so that we can push this code to our GitHub repo. To add origin, go to your GitHub repo page and click on Clone or download button. It will show a url something like https://github.com/username/username.github.io.git. Copy this url and run the below command in your website directory to add the origin.

    // Add origin
    git remote add origin https://github.com/username/username.github.io.git

Now, we have added origin and ready to push the code on server. Run the below command to push the code in the master branch of the origin.

    git push origin master

It will push our local code to the GitHub repo which you can check by visiting the repo page in the browser. It will show all your committed files.

See it running

Now, we are done and you can check your website running at the following link:

https://username.github.io

Did you like it? It is the easiest and fastest method to make a website live for free! Now, a question arises, what if I want to use my own domain called as custom domain? The answer is pretty simple, it is also possible with GitHub and you don't need to pay any extra money. Sounds great? Let's try to integrate your custom domain to give it a more personalised feel.

Connect with a custom domain

To connect our website with a custom domain we need to do modify our website files and DNS configurations.

First, go to your website folder and create a new file CNAME. Please make sure that don't give it any extension.
Now, edit this file and paste your domain in it and save.

yourdomain.xyz

Again, commit the code and push it to the GitHub.

    git add -A
    git commit -m "Add CNAME"
    git push origin master

Now, we have modified our website so that it can point to our custom domain. Similarly, we need to modify the DNS configuration so that it can point to the GitHub server. For this we need to add A records and CNAME in the DNS configuration.

Login with your domain registrar account (GoDaddy, NameCheap, etc.).
Select your domain and go to the DNS management or configuration.
Delete any previous A records and add these two A records. You can read more on this here.

    // 1st A record
    type: A 
    name: @ 
    IPv4: 185.199.108.153
    Automatic TTL

    // 2nd A record
    type: A 
    name: @ 
    IPv4: 185.199.109.153
    Automatic TTL

    // 3rd A record
    type: A 
    name: @ 
    IPv4: 185.199.110.153
    Automatic TTL

    // 4th A record
    type: A 
    name: @ 
    IPv4: 185.199.111.153
    Automatic TTL

Save and done.
Here, we are just pointing our domain to the GitHub servers by using their IP addresses.

Now, check the website at your custom domain. It should work or wait for 2–3 minutes.

Conclusion

Great! We have successfully hosted our website on GitHub without any extra cost. Please keep in mind that this is not the only way, there are several other possibilities like Firebase Hosting which I will discuss later. We can also partially secure our website by using Cloudflare free SSL. Please ask questions or share your feedback in the comments section to make it better.

This is not the end, keep exploring to find out the better possibilities and stay tuned to know more about such tactics of web!

Android — Create Bitmap from a View

Pranav Pandey — Mon, 18 Mar 2019 13:41:41 +0000

Hello everyone! This is my first programming tutorial here in which I will discuss about creating the bitmap from a view at runtime.

Background

I have an app for Android in which users can customise all the theme colors according to their requirement. They can also copy or share their theme in the form of a JSON which can be imported to achieve the exactly same look later or can be shared between the other devices.

Recently, I decided to generate an image from the theme preview which users can share along with the JSON to give some idea about the theme before importing it. The in-app preview already shows the theme before applying it but I wanted to provide the similar kind of functionality for posts shared on social media and in other communities.

Implementation

View.getDrawingCache()

Initially, I tried to use the view drawing cache. Although, it is working fine but most of the drawing cache related methods are deprecated in Android 9 (API 28). Please check the deprecated code below:

    /**
     * Creates a bitmap from the supplied view.
     *
     * @param view The view to get the bitmap.
     * @param width The width for the bitmap.
     * @param height The height for the bitmap.
     *
     * @return The bitmap from the supplied drawable.
     */
    public @NonNull static Bitmap createBitmapFromView(@NonNull View view, int width, int height) {
        if (width > 0 && height > 0) {
            view.measure(View.MeasureSpec.makeMeasureSpec(DynamicUnitUtils
                            .convertDpToPixels(width), View.MeasureSpec.EXACTLY),
                    View.MeasureSpec.makeMeasureSpec(DynamicUnitUtils
                            .convertDpToPixels(height), View.MeasureSpec.EXACTLY));
        }

        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
        view.setDrawingCacheEnabled(true);
        view.buildDrawingCache(true);
        Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
        view.setDrawingCacheEnabled(false);

        return bitmap;
    }

Canvas

As drawing cache API is deprecated, I found that we can achieve the similar result by using the Canvas API. Please check the new code below:

    /**
     * Creates a bitmap from the supplied view.
     *
     * @param view The view to get the bitmap.
     * @param width The width for the bitmap.
     * @param height The height for the bitmap.
     *
     * @return The bitmap from the supplied drawable.
     */
    public @NonNull static Bitmap createBitmapFromView(@NonNull View view, int width, int height) {
        if (width > 0 && height > 0) {
            view.measure(View.MeasureSpec.makeMeasureSpec(DynamicUnitUtils
                            .convertDpToPixels(width), View.MeasureSpec.EXACTLY),
                    View.MeasureSpec.makeMeasureSpec(DynamicUnitUtils
                            .convertDpToPixels(height), View.MeasureSpec.EXACTLY));
        }
        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());

        Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(),
                view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        Drawable background = view.getBackground();

        if (background != null) {
            background.draw(canvas);
        }
        view.draw(canvas);

        return bitmap;
    }

Pass 0 for height or width to use the current view dimensions.
You can check the code for DynamicUnitUtils.convertDpToPixels(float) method here.

Outputs from both the methods are similar but it is recommended to use the canvas API as the view drawing cache methods may not work in the future releases of Android.

PixelCopy

There is another API for Android 7.0 (API 24+) or above devices which you can use to take screenshots of the UI. It seems complicated to me and I have not tried it yet. You can check the official documentation here.

Dynamic Utils

I have created a library for similar kind of utility methods related to color, device, drawable, package, tasks, SDK, etc. which you can use to perform various runtime (dynamic) operations. Please visit the GitHub page for more info.

pranavpandey / dynamic-utils

Utility functions to perform dynamic operations on Android.

Dynamic Utils

A collection of static methods and packages to perform dynamic operations on Android 2.3 (API 9) and above.

Since v0.4.0, it uses 26.x.x support libraries so, minimum SDK will be Android 4.0 (API 14)
Since v2.0.0, it uses AndroidX so, first migrate your project to AndroidX
Since v3.3.0, added Concurrent package to replace the deprecated AsyncTask API.
Since v4.1.0, it is dependent on Java 8 due to the dependency on AndroidX Core.
Since v4.3.0, it supports some helper methods to capture results via Barquode app.
Since v4.5.1, it is targeting Java 17 to provide maximum compatibility.
Since v4.6.0, the minimum SDK is Android 4.4 (API 19) to comply with the latest policies.

Installation

It can be installed by adding the following dependency to your build.gradle…

View on GitHub

This is my initial attempt on blogging so, I will keep improving the future posts. Please comment to give suggestions and what you want to see in the future posts. Thanks for your time!

Android Story — Introduction

Pranav Pandey — Sun, 10 Mar 2019 10:03:17 +0000

Hello everyone! My name is Pranav Pandey and I want to tell a story of Android development. I am a professional software developer and a little bit designer from India working on many technologies, especially from Google.

Background

I am a self taught developer and working on Android since 2011 and now trying to setup my own app development business. In those years, I have faced many challenges related to self learning and software development. Some of them I have already overcame and still finding solution for the rest. My story is quite interesting as I have started with reverse engineering the various Android apps and developing custom ROMs at XDA followed by the native app development in 2013.

Nothing is perfect but can be better. Developing such better things!

Then, I worked with a couple of start-ups for around two years and learnt a lot during that period. I have also travelled to other countries and lead the software development of three Android devices. Thanks to all of my managers, team members and other co-workers.

Future

Now, with the help of this series I want to share my experiences with others in which I will reveal the various hidden secrets of Android and software development. I will also discuss some of the mistakes that I made in the past so that you can learn and improve on them.

Don't be afraid of failures, it makes you more confident!

Open Source

I always believe in open source projects and helping others as I have learnt a lot from this community so, I am working on various open source projects and giving back to the community.

This is my initial attempt on blogging so, please don't judge me as I will keep improving the future posts. Please comment to give suggestions and what you want to see in the future posts. Thanks for your time!

DEV Community: Pranav Pandey

Host Static Websites for Free

Prerequisites

Custom domain

Background

Prepare the website

Create a repository

Push the website

See it running

Connect with a custom domain

Conclusion

Android — Create Bitmap from a View

Background

Implementation

View.getDrawingCache()

Canvas

PixelCopy

Dynamic Utils

pranavpandey / dynamic-utils

Utility functions to perform dynamic operations on Android.

Dynamic Utils

Contents

Installation

Android Story — Introduction

Background

Future

Open Source