Ahamed Safnaj

I am a

Ahamed Safnaj

Hi , I am Safnaj.The main purpose is to build something that you need and that you will love. I lead powerful projects through innovative and modern technologies.My work says a lot about me, passionate about all I do.
Welcome to My Blog !!!

Me

My Professional Skills

Web Development 80%
UI/UX Designing 60%
Software Development 70%
Wordpress 80%
Cloud Computing 50%

Programming

Java
PHP/Laravel
Node.js
Angular
JavaScript

Graphics Designing

Adobe Photoshop
Adobe Illustrator
Adobe Lightroom
Adobe Muse
Adobe Premier

Web Development

HTML5 , CSS3 , JavaScript , PHP
Bootstrap
Blogger
Joomla
Wordpress

Work Experience

Trainee Software Engineer at Virtusa
Web Developer at Maruthamunai Online

Volunteer Experience

Member at FOSS Communtity, SLIIT
Member at Kalmunai IT Hub
Google Crowdsource Community Sri Lanka
Developer Circles From Facebook, Colombo

0
Completed Projects
0
Coffees
0
facebook likes
0
current projects
  • Building a simple Web API using Node.js



    Have you been working with JavaScript Front-end technologies and eager to learn JavaScript for Full Stack Development ??  If yes, you are in the right place. JavaScript become an an essential technology that every developers should know in this era. In this article, I'll show you step by step to create a simple RESTful Web API using Node.js & Express.js by building a Web Service.

    Prerequisites :

    • Basic Knowledge of JavaScript
    • Basic of ES5 & ES6 Concepts
    • Node Installed (https://nodejs.org/)
    • IDE (VS Code)
    • Postman Installed

    What is Node.js ?

    This is a question that raises to most of the developers when they new for the Node environment. 

    Node.js is Not a
    • Programming Language
    • Framework
    Node.js is a
    • JavaScript Runtime Environment
    • Built on Chrome's V8 Engine
    • Its Free & Open Source
    • Written in C++
    • Its runs on various platforms (Windows, Linux, MacOS)

    So Node is allows you to run the JavaScript codes for server communications. The V8 engine in your browser takes your JavaScript code and converts in into a faster machine code. So Machine code is low-level code which the computer can run without needing a interpreter. 

    Why Node.js

    • It's fast & efficient
    • Highly Scalable
    • Event drive, no-blocking I/O model
    • Asynchronous
    • Popular in the industry
    • Same language for both client & server-side

    What is Express.js ?

    Express.js is one the the most popular framework for back-end development. It's highly customizable using middleware. Also Express JS us very easy to use and learn. Express.js basically helps you to manage everything from routes to handling requests & views. 





    What is REST API ?

    REpresentation State Transfer (REST) is an architectural style or design for APIs. Also it is a set of rules that developers follow when they create their API. These rules states that you should be able to get a piece of data (resource) when you link to a specific service URL. 

    Each URL is called Request while the data sent back to you is called Response

    Setting Up the Project

    Once you installed Node.js on your PC go the the CMD and type following commands to make sure its installed successfully.
    node -v
    npm -v
    Create a new folder and go the directory from CMD or VS Code Terminal and initialize new Node.js Project.
    npm init

    Fill the requested information to your requirements. Once it done you will get a new file created called package.json as below.













    Now we can install the express.js web framework by running the below command.

    npm install --save express

    The --save flag is used to edit your package.json file and add express as a dependency. After the installation complete, open up our package.json to see express is listed under dependency. By doing this you could send just your code and package.json file to your friend without the node_modules. Your friend can install all the necessary modules by running the npm install command.

    Creating the Application

    Now its time to code your application. Create a file called App.js and add the following code.


    Congratulations..! You just made your first useless express server. So lets make it something useful. Now you can start the server by running node app.js command & your app will be accessible using http://localhost:3000. But it won't get you anything because We have coded to start our server but we haven't implemented the REST protocols yet to listen to any events.

    Making Request Handlers 

    A Server receives requests, process them and returns a response. So you need to use the routes to handle this requests. The main requests types are GET, POST, PUT & DELETE.

    Let's create a simple GET request that returns a list of users. Modify your app.js file shown as below.

    This simple function makes the express application to use the url handle "/users" to trigger the callback. This callback accepts two parameters, req is the request body which carries information about request & the res is the response body which is used to handle the response functions like .render() to render templates and .json() to return JSON data.

    Running the Application

    To run your application, use the below command.
    node App.js
    If you get "Server running on port 3000" in your Terminal, it means our app is now successfully running. Open your browser and enter http://localhost:3000/users. You will expect to see something like a array of names. /users is the route that we created to send some user's name in JSON format. 

    This is the awesomeness of REST. There is no state between the client and the server. There is no any web pages server to parsed the date. This gives you a complete freedom. All you need to do is write some logic on a specific URL that connects to a Database, use the logic to process the data. You can make your client application any any technologies. It could be a Java Android Application, Ardunio Project or Angular Project. You just need to iterate and display the data anywhere you want. 



    Testing the API

    Let's test our API using POST Man App to make sure that the URL gives the response.


    Where to go from here ?

    With this introduction explore more about Node.js and build some applications. You can build high scalable efficient applications using Node,js, Express & MongoDB. Try to build MEAN (MongoDB, Express, Angular, Node.js) or MERN (MongoDB, Express, React, Node.js) Applications.  

    Some of my Node.js Projects : 


    Share with your mates & Thank You..!




  • How to Deploy an Angular Application to GitHub Pages using Actions




    In this article i will explain How to deploy an Angular Application to GitHub Pages using GitHub Actions. GitHub Actions make it easy to automate all your software workflows, now with world-class CD/CD. Using GitHub Actions we can Build, test and deploy our code directly from GitHub.

    GitHub Pages  is a feature in GitHub that allows you to host a static website or web application for free. Most of the companies & organizations using GitHub Pages as their Documentation site.

    If you are developing an Angular Application for GitHub Pages you need to build the Application for the production ready. Whenever we made some changes to the application we have to repeat the build process every time. By using GitHub Actions we can make the CI/CD process automated.

    To learn more about GitHub Actions : https://github.com/features/actions



    STEP 01 : 

    Code your Angular Application.

    STEP 02 : 

    In order to set up workflow, it is necessary to set up a secret key for the workflow. Its protect your workflow trigger accessing by outsiders. There for you need to create a GitHub Token.

    1. First Login to https://github.com
    3. Now navigate to the Developer Settings
    4. Click on the Personal Access Tokens.
    5. Generate New Token.

    Now you have got access token. Store it somewhere..

    STEP 03 : 

    Now its time to create the Secret Key in your Repository. 

    1. Go to your repository Settings.
    2. Click on Secrets
    3. Click on Add New Secret
    4. Put ACCESS_TOKEN as name and paste the GitHub Token that you got in the previous step. 
    5. Now Click Add Secret Button. 


    Now A Secret Key named ACCESS_TOKEN has been added to your repository.



    STEP 04 : 


    Now comes the main part. Go to your repository and navigate to Actions tab & Setup New Workflow. Now modify the workflow file as shown below.



    Angular provides a CLI tool called gh-pages to deploy the angular application to GitHub Pages. Here i prefer an CI/CD Automation to build and deploy Angular Application to GitHub Pages. Check it Here : https://github.com/JamesIves/github-pages-deploy-action

    Here i selected development branch as Base Branch. Because for the Organization GitHub pages we can not be able to choose which branch to deploy. By Default its on master branch. So here i do the developing process in the development branch. When i made any changes and pushed it will build the application to master branch and then deploys it to GitHub Pages. 

    BASE BRANCH - Branch which contains your Angular Application.
    BRANCH - Where is build and render the applications.
    FOLDER - App compiled directory.



    That's all. 

    Whenever you commit new changes to the development branch the build process will start automatically and deploys it to the GitHub pages. You can check the build process by navigating to the Actions tab. Changes will be live within a few seconds. You can check the below repo url where used Actions to build the Angular Application.


    I hope this article might useful for you.

    Keep Learning & Keep Building..!


  • How Did I Became GitHub Campus Expert



    Hi all, before directly going in to the topic let me give a brief introduction on What is GitHub Campus Expert Program. Its a technology community leadership at your campus. During the campus expert training program we had to learn public speaking, technical writing, community leadership and software development skills that will help you to imporove your own personality and as well as the campus community. GitHub Campus Expert can get sponsorship and support from GitHub to host a
    How did i get to know about this ?

    When i moved to the capital of Sri Lanka for my higher education i have seen lots events happening around the city of Colombo via my Facebook news feed. I was really interested in those topics and attends it with one of my friend. Then i realized that i am getting to know something more than our university syllabus. And i continued it till today.

    When i was in first year of my university, our campus FOSS Community has organized a workshop on "Introduction to Git & GitHub ". The guest speaker for the event was Sri Lanka's First GitHub Campus Expert Isuru Jayawardana. He was like a complete GitHub Man wearing GitHub Hoodie & a cute GitHub bag. That's the very first impression on GitHub. He taught us about Version Controlling and How to work with multiple developers in a same project. At the end of the event i felt it is the very useful tool and platform in the information technology field.







  • Introduction to Git & Github


    Git and GitHub have become popular standards in the software development process. Here’s an introduction to how you can utilize both to write code and Git and GitHub have become popular standards in the software development process. Here’s an introduction to how you can utilize both to write code and build applications.build applications.


    What is Git?


    Git is a free and open source distributed version control system. What is version control? Essentially, it’s a system that allows you to record changes to files over time, thus, you can view specific versions of those files later on.

    Why Use Git?


    Over time, Git has become an industry standard for development. Being able to snapshot your code at a specific time is incredibly helpful as your codebase grows and you have to reference previous versions of it.

    How it Works?


    With Git, you record local changes to your code using a command-line tool, called the “Git Shell”. Command-line lets you enter commands to view, change, and manage files and folders in a simple terminal, instead of using a graphical user interface (GUI). If you have not used command-line before, don’t worry, once you get started, it is incredibly straightforward.



    Essentially, when using Git, you make changes to your code files as you normally would during the development process. When you have completed a coding milestone, or want to snapshot certain changes, you add the files you changed to a staging area and then commit them to the version history of your project (repository) using Git. Below, you’ll learn about the Git commands you use for those steps.

    Terminal Commands


    While using Git on the command line, chances are you will also use some basic terminal commands while going through your project and system files / folders, including:
    • pwd - check where you are in the current file system
    • ls - list files in the current directory (folder)
    • cd - moves to the given directory name or path / change current directory
    • mkdir - makes a new directory with the given name


    Creating Repository


    When you wish to utilize Git for a project, the first command you must do is git init, with the name of your project from your local computer.
    git init [project-name]
    You run this command on the Git Shell command-line in the main directory (folder) of your project, which you can navigate to in the Shell using the commands listed above. Once you run this command, Git creates a hidden .git file inside the main directory of your project. This file tracks the version history of your project and is what turns the project into a Git repository, enabling you to run Git commands on it.



    Making Changes


    git add [file] or git add *
    Once you make changes to your files and choose to snapshot them to your project’s version history, you have to add them to the staging area with git add, by file name, or by including all of the files in your current folder using git add *.
    git commit -m “[message]”

    To finally commit the changes you made to your files from the staging area to your repository’s version history, you need to run git commit with a descriptive message of what changes you made.
    git status

    If at any point, you wish to view a summary of the files you have changed and not yet committed, simply run git status in your project’s repository on the Git Shell command-line.


    Now, with the basic Git commands in place, you can utilize Git to snapshot the version history of your project. Simply initialize a new repository by running git init in your project’s main directory. Using git add *, or git add with specific file names, you add your changes to the staging area. Finally, using git commit, you can add your changes to the repository’s version history.
    As you continue developing code, simply continue to add and commit your changes to your repository.

    What is Github ??


    GitHub is a service that allows you to host your Git repositories online and collaborate with others on them. You can use GitHub through their web portal as well as the GitHub desktop GUI and the Git Shell.

    As a service, GitHub is now used by 12 million developers and organizations, and has become a fairly popular standard for collaborating on projects and open-sourcing code.




    With GitHub, you have the same local process of adding and committing files to an initialized Git repository on your computer. However, you can utilize GitHub to push your changes to GitHub’s hosting service. This allows other people to similarly work on the same project, pull your changes to their computers, and push their own changes to GitHub. Continue below to see the commands you can use to utilize Git with GitHub.



    Creating & Copying Repositories


    Fork

    With Git on your local computer, if you want to create a new repository, you must run git init. However, many times you may work on projects that are hosted on GitHub and have already been initialized. One of the ways to copy a repository to your GitHub account is using fork, which is available on GitHub’s website.


    Forking a repository essentially copies that project to your online GitHub account. However, to work on that project on your local computer, you must clone the project.

    git clone [url]
    Cloning a project simply copies a Git repository with its version history, by its url, to your local computer from GitHub. From there, you can make and commit changes of your own to that repository. Any changes you commit and then push to GitHub (see below) are saved for your copy of that project.


    Push & Pull Changes



    git push [repo] [branch]
    To publish a new initialized repository or any committed changes from your local repositories to GitHub, you use git push with the repository and branch of your code. The default syntax that you will generally use is git push origin master. This pushes your code to the master branch of your repository.
    git pull
    If any changes happen to a repository that you wish to pull from GitHub to your local computer, such as when collaborating on a project with others, you simply use git pull.

    FYI


    It is important to remember, that while you may have a repository hosted on GitHub, the version history of your local copy can be different than the version history of your repository online.
    Thus, if you try to pull or push changes to files that have already been changed by someone else, and those changes are already on GitHub, you can run into a merge conflict. Essentially, a merge conflict is when the version history of the repository on your local computer is different from the repository’s version history on GitHub. You will need to eventually resolve the merge conflict manually to bring all of the repository’s changes together.

    Branches


    When using Git, you have the ability to view the version history of your project’s development. However, sometimes you may choose to develop features, fix bugs, or experiment in ways where you want to separate your main project’s code from another variant.
    You can do this with branches, which are essentially parallel versions of your repository’s main code— that code is developed on the “master” branch. You can create multiple branches for collaboration and other unique development to your code. Changes you make to files in one branch stay in the version history for that branch only.
    If at any time you want to merge the code from one branch in to another, including the master branch, you make a pull request that merges the changes. However, similar to using git pull and git push, if different changes have been made to the same files on more than one branch, you will run into merge conflicts that must be resolved manually.

    With GitHub, you are enabled to collaboratively use Git to build your own repositories and those of others. You can fork an initialized repository to your own account and clone any repository from GitHub to your computer. As you continue to add and commit changes you make to files on your local computer with Git, you can now additionally push those changes and pull any other commits to and from GitHub.

    Get Started


    To get started with Git and GitHub, sign-up for a GitHub account at github.com.
    Next, download GitHub’s desktop GUI at desktop.github.com. This is an application version of using Git on command-line. This should also download the Git Shell.
    The final step you need to take is to enter your GitHub credentials. You can do this from the Git Shell, or by using the GitHub desktop application. View GitHub’s setup article for more information.
    Git Cheat Sheet - A cheat sheet of Git commands when using GitHub
  • Website for Manha Handlooms



    Manha Handlooms is a Leading Handloom Products Producers in Easter Province Sri Lanka. So They Planed to Make a Website for their Business and Hired Me.

    I Purchase domain name from Register.lk and also the Unlimited Hosting. I used Wordpress CMS to build the Site. I designed a Custom theme from Scratch using HTML5, CSS3, Bootstrap and JavaScript. For the Search Engine Optimization I Used Google Web Master Tools and Yoast.



    Tags : Wordpress, E-Commerce, Websites, Web Solutions,  Ahamed Safnaj



  • Java Web Application Project

    Java Web Application Project

    On My Degree Program We supposed to Create a Web Application Using Java (JSP & Servlets) as 2nd Year 1 Semester Group Project. Our Topic was Online Gaming Site which has Basic Functions like Register, Login, Shopping Cart, Contact Us and Much More. 

    We Used Eclipse Oxygen as IDE which includes Java EE (Enterprise Edition). And We Used HTML5, CSS3 , JavaScript and Bootstrap as Front End Languages and in Back End we have used JSP (Java Server Pages), Servlets and MySQL. We used PhpMyAdmin as Database.



    Source : Ahamed Safnaj


    Tags : Java, Java EE , Java Web Application, JSP & Servlets , HTML5, CSS3, BootStrap, JavaScript, MySQL, Java Project, Java Website , SLIIT Project, Web Project Using Java.
  • How Did I Got Adsense Approval ??


    What is Google Adsense? Google Adsense Program is a Online Advertisement Publishing on Websites. Its Allows Publishers in the Google Network of Content Sites to Serves Ads. By Publishing Google ads in our Website We could Earn Money By PPC (Pay Per Click) and CPM (Cost Per Mille) Rates. But Its Really Really Difficult to get Approved. Their Rules and Policies are very Strict. So Here I am Going to Share My Adsense Experience... 



    I Was Started Blogging in 2010. That Time I was grade 9 Kid. I was running a Tamil Tech Blog and Posting some Technology and IT News in that (http://tamiltelegram.blogspot.com). One Day One of My friend showed me a Cheque with $100 and the cheque was sent by Google. I was Wondered. And I Started to Search About Adsense and Find out What is it. For the First Time Applied to the Adsense for my Tamil Blog and Got Rejected. Because I am not 18 years old that time (A Kid). As usual I didn't read the Privacy and Policy Statement of Adsense when I signed up. If our Adsense Application disapproved once we can't apply again within the next 6 months. 


    So I Waited 6 months and Applied Again. Also Rejected Again. Why ? My Blog was in Tamil Language. Google Didn't Accept Tamil Blogs to Publish Ads. Then I Started a English Blog and Running on it. 6 Months Later I Applied for the English Blog. This Time It Said You cant Apply for Adsense with sub domain Blogs. Holly Shit !! I Thought I am not Lucky Enough to get it and Drop that Idea.



    Years went. In 2018 February I heard that Google Accepts Tamil Language Websites to Serve Ads. So This time I Had a Website with Top Level Domain (.com) And also have pretty much Traffic. So After some years I Applied Again. This time Its didn't said rejected. But Its Says "We Couldn't Reach your site". WTF ?? Every thing Perfect and My Site working Perfectly. So I Went to Adsense Discussion Forum and Asked about this Issue.Then I found that We Have to Configure Robots.txt file to Allow Google Auto-bots to crawl our site. 

    Then Its took 3 Hours to Find out the Location of Robots.txt file and I Did everything Perfectly. But Again google said the Same thing. Then I did Lot Of Search and Figured out that Our Site Speed should be above 90 out of 100. My Site got 70 Marks out of 100. Shit !! After That I removed Slider From my Sited and shorten all the CSS & JavaScript Codes and Proceeded Again. Finally I Became Google Adsense Publisher !! You can see the Adsense Below....







    Tags: Google Adsense , How to Get Google Adsense Approval , Adsense , Google Renenues , Ahamed Safnaj 
  • My Photographs


    " Sometimes It's Good to Miss a Bus. It Might be the Wrong Bus "




    " SLIIT Night View "

    SLIIT, SLIIT Malabe , SLIIT Campus




    Tags : Photography, Sri Lanka, Colombo, Bus, Ahamed Safnaj, DSLR , Nikon , Nikon D5300

  • Joined at SLIIT.


    Finally I Joined to my dream campus on 20th February 2017. SLIIT is the leading private campus in Sri Lanka. Here I came to do Bsc.(Hons) in Information Technology Specialized in Software Engineering.

    For the First time i miss my Hometown  for a long period. But I am feeling well here.
  • Started Coding


    We Went on a Trip To Rawana Ella waterfall which Located in Badulla District Sri Lanka. With the 10 guys that trip Trip was Really Awesome. And the think is this was a Bike Ride.
    //

    ADDRESS

    490, Zam Zam Road,
    Maruthamunai,
    Sri Lanka.

    MOBILE

    +94 777 97 42 07