Journey Towards FEND

Starting with basic language such as C/C++ and exploring websites with random stuff till you actually know your field of interest is a usual start for anyone.¬†ūüėĬ†

While pursuing my Bachelor degree in Information Technology, I was also in the same dilemma and for that, I started trying out free courses at Udacity.

After some time, I felt interested in learning technologies related to websites and browsers. When I went deeper, I realized this is called Frontend Development.

Boom!! Now, I knew my field of interest and was passionate to learn this. The most challenging part was to find out How to learn this?  

I tried various free courses on the Internet and learn HTML, CSS, and JS.  Then, I came across Frontend Developer Nanodegree program through a friend.  

The average time for a beginner for this program is around 6 months at 10hrs/week. But, by this approach, it took me around 1.5 months to pass all the projects. The best part I like about FEND is the Mentor support and review process. The feedback cycle to pass the rubric of the project boost you with confidence.

In my third year of graduation, I applied for Google Summer Of Code and luckily got selected. The real fun just begins now. After GSOC, I continue contributing to the project  Open-event-Web app  and try to apply various concepts of the Frontend Nanodegree that gave a huge performance boost to the Open-event-Web app.

The experience of GSOC opened many opportunities including mentoring at CodingBlocks. I finally represented my work at FOSSASIA Summit at Science Center,

Advertisements

Performance Optimizations in Open Event Webapp

The open event web app is an open-source project under FOSSASIA organization. The project generates web applications for conferences, meetups, and events within seconds after having data from a zip/ REST API.

After working as a Google Summer of Code student, I was invited to present my talk on Performance Optimizations in Open Event Web app at FOSSASIA Summit 2017 held at Science Center, Singapore.

Improvements in Open-Event Web app

The four golden rules we have followed here are:

Measure:

Measuring the performance of the website should be the first priority. We need to figure out the answer to the question “Do we really need optimization ?”. For open event web app project, we have used lighthouse a simple and open-source Google Chrome extension to generate the performance report.

Analyze: 

We should ask here “Which part of our website needs optimization ?”

Udacity Website optimization course can work as a great resource here, it will help in analyzing the Google chrome Timeline and optimizing the Critical Rendering path. After, the course we have easily figured out the tools to detect the slow parts of the page and the reasons behind them.

Implement:

Here comes the crucial step, which needs the answer for “How to do optimizations ?” we have already figured out the reasons for our websites to be slow and it’s the time to fix them now.

In open-event webapp, we have achieved some good results after analyzing and fixing these things.

Testing :

The last phase is testing, where we have checked the Google page speed Insight of our website and again generates the report using lighthouse. The open event webapp page has shown significant improvements with a pace speed insight score rise from 60 to 90 after following the above practices.

Testing with Jasmine-Node

opev

This week I have started testing my own code with Jasmine-Node. Testing seems beneficial only when we do it with a right approach. I have gone through various articles and find out Jasmine as one of the best frameworks for testing Javascript applications.

For specifically NodeJS, a better option will be to use Jasmine-Node.

How to start with Jasmine-Node ?

For a quick-start, you need to have Jasmine-Node installed with npm.

npm install jasmine-node -g

After the installation, make a folder say spec/ in the root directory of the project. This will contain all the tests for the node app.

We can include the command  to run the tests in package.json file of the project.

./node_modules/.bin/jasmine-node spec

script

Like here it is included with the key tester. Now, we are ready to write our first test file.

So, in the Open-event-webapp spec/ folder I have created a file serverSpec.js. The file will…

View original post 238 more words

Working with Absolute Positioning

opev

During the past week, I have done a lot of work for making the feature that allow the users to view the schedule of events according to track and time. The toughest part was to have a headstart to think of the mockup that fulfills this criterion.

After the mockup, I started coding it and realized that I have to add CSS by using Javascript. The frontend needs to calculate the top of each pop-up that appears when the track is hovered and to append the box just below it.

a

The interesting part was to calculate the top each time the element is hovered and to place the box at the right position by using jQuery.

Position Absolute 

The difficulty becomes maximum when we use “position : absolute “. As, it takes the element out of the layer. The element with absolute positioning is difficult to handle when it comes…

View original post 234 more words

SASS for the theme based concept

opev

Until yesterday, I was exploring all around the internet, to find the best possible way for the theme concept in the web app. The theme concept allows an organizer to choose the theme for the web app from the set of provided themes.

After some time, I realised that this awesomeness to the web app can be added by using Syntactically Awesome Stylesheets.

How SASS supports the theme concept?

In the web app, a folder name _scss is added which has the directory structure as shown

tree _scss folder directory structure

There is a file _config.scss inside the _base folder that includes the SASS variables which are used in all the files after importing it.

Each of the SASS variables uses a flag !default at the end, which means it can be overwritten in any other file. This property of SASS leads to the theme concept.

//_.config.scss @charset "UTF-8"; // Colors…

View original post 329 more words

Self-Contained Folder For Webapp

The first version of Open-event-webapp will be a generator that will create the web app.

This week I have worked on various OTS issues that will become the basis for the web app. The OpenTechSummit web app works along with Open-event-scraper.

The web app can be generated in any empty repository and can be hosted with gh-pages by just running build.sh  file from the Open-event-scraper. This is the build.sh file I have written for doing this.

build file

How can you create the webapp from scraper in your repository ?

1 . Replace the URL of the repository in git clone command.

git clone – – depth=1 < destination repo url > ots-repo

2 . Run the file build.sh from  Open-event-scraper.

./build.sh

Utility for transferring content using build.sh

The build.sh file is written to make a folder that is self-sufficient. It means it can be taken anywhere and it should work on its own.

The build.sh file first creates a clone of the destination repository in the local Open-event-scraper. It itself make the required folders inside the cloned repository and runs generator.js which provides index.html file according to the template schedule.tpl. The resync command that is known as remote sync is used to transfer the files remotely. A programm folder is created automatically that includes all the CSS, JS,  JSON and other important files used to run the web app.

Finally, the programm folder along with all necessary files is pushed to gh-pages branch of the destination repository.

Working Example

To create the web app I have replaced the destination URL as shown in the image.

4

After running the build.sh we will get the output as shown :

1 .8

                Programm folder ( self-sufficient)

9

                 Sub folders inside Programm folder

That’s how a folder is generated which contains all the necessary files needed to run the web app.

Open-Event ( FOSSASIA )

Hello , everyone

This year I am selected for Google Summer of Codes  . Firstly , I would like to thank Fossasia for providing me this wonderful opportunity . I am very excited to get involved with the Fossasia Community in the coming months.

During this summer , I will be working on the project Open-event .The project will make it easier for the events , tech summits  to create a webapp and mobile app  quickly by providing necessary information such as speakers for the event , sessions , tracks , location etc .The project itself consists of three core components :

  1. Open-Event Organiser Server
  2. Open-Event Android App
  3. Open-Event Webapp

We as a team , will work for this project . I am selected for the Open-event webapp . In terms of technologies , the webapp front-end is based on AngularJS 1.5.5 which will be integrated with the REST API’s .

The target for this summer is to complete ¬†the Open-event . In terms of webapp it will be a redesigning ¬†of the whole UI/UX ¬† , integration of the backend with the support of REST API’s , adding more features to it ¬†and writing the unit tests to check the code glitches .

I am contributing to this project since October 2015 . Currently , I have solved many Codacy related issues , I will try my best effort to complete this project and to implement the complete discussed feature list .

Cheers ūüôā