Posts

Understanding the debugger.html codebase.

This post will give a glimpse of the codebase of debugger.html and how the code is structured in the project itself. Debugger.html is a web application based debugger that takes its inspiration from mozilla's devtools.
It is a debugger that runs on your browser that you can checkout here.
So the debugger is a react/redux application and uses the new ES6 syntax as a result. The components are divided into 3 parts. Primary Pane- The left pane which hold the directory pathing.Editor -The middle panes that opens up the files.Secondary Pane -The right panel that hold the debugging windows such as breakpoints, watch etc. Most of the shared resources exists in the shared folder and utils contains all the utility files.

Recently I worked on a dropdown menu issue that made the editor show more files that were not in the tab itself.
The PR is got a lot of changes too since the primary push so hopefully this gets merged like my last PR.

Utilizing the Leaflet mini map library in a map application.

Image
In this post I will talk about how I went on to implement Leaflet's mini-map interface on a map based application called bridge-troll.
So you can check out the project here.Its a map-based game that unlocks "troll" under bridges using open data.The mini - map library that I used in Norkart's Leaflet-MiniMap that can be found here .
Implementing the mini - map was not easy and after my use of the library , I did notice some bugs. Firstly the websites example shows that the mini-map can be toggled using the 'ToggleDisplay' property.The example can be seen here .
As you can see that the example can toggle the mini-map but in my example the toggle button does not show up. This problem is already filed as an issue in the repository which can be found here . I did reply on this issue with example pictures.
This problem really makes it hard for the mini-map to appear separated from the main map. 
So I will currently wait for the owner to reply with an answer regard…

Fixing a URL bug in Brave

Image
So this week I was working on the Brave browser issue that was filed by our professor.

The issue was based on retrieving a file path from the URL input from the user. In order to replicate the error a user has to create a file path in their local machine and try to access it using the browser URL.

So I had a file named dogcat.txt located in my desktop that just contained the phrase "hello" in it.

So if you try this is chrome you get the content of the file on the browser.
As you can see the URL contains the path of the file name does not need to be URL space encoded. (dog%20cat.txt)

But if you try to enter the same file path on the brave URL you get a message saying the path doesn't exist.


Now looking at the source code I saw that most of the url based code was contained in a  'urlutil.js' file that exists in 'js/lib'  subdirectory.


Now there are many ways to make this issue work so I went with a very basic approach , that is to make the file path URL en…

Adding utilities to libphonenumber API

Image
LibphonenumberAPIis googles common Java, Javascript and C++ library for parsing , validating and formatting international phone numbers.

It is available through npm and can be found here. I decided to build a web service using this package. The repository for this is here .

Technology Stack that I used are

Node.jsExpressJavascriptPostman Use the browser to send the GET request like this -


The results for this call is displayed in the terminal.














POST request was made using a third-party application called Postman. Results are displayed here.















Overall the project was small and it was an introduction for me to use the URL is pass in parameters which I never used knowingly. This was also a great little project to learn how to use Express.js .

Fixing issues in debugger.html.

Image
In this post I will talk about my experience that went into debugging , compiling and  fixing issues for the debugger.html project.

The issue I worked on was mostly on the front- end part of the application. The issues that I worked on is listed here .

First IssueSecond Issue

So building and compiling the project is pretty easy (at least on a mac). If you follow the following steps you can get the project up and running.








My first issue got accepted and got merged in a recent commit which is always exciting.

First Open Source Contribution - debugger.html

Image
What is the project about?
debugger.html is a port of the Mozilla debugger tool that comes with Firefoxes developer tool.
It is designed to work on any web browser .This project was built from ground up using React and Redux.

This is the project running locally on my system.

Where is the code located?

Most of the source code for the project is located in the src directory.Since it is a React based application most of the "components" is located in the src/components and most of the logic or data driven functions are located in the src/reducers folder.
The components folder contains most of the front end elements of the debugger.Modules such as Editor,Primary Pane , Secondary Panes , Shortcuts are located in this location.
The reducers folder contains most of the application state logic. Functionalities such as breakpoints, pauses, event listeners etc lies in this folder.




Where are the docs?

Most of the docs are available on the project repository here.

How can you get involved?

Testing in open source projects

Image
This week in our open source class we learned about the new javascript or should I say ECMAscript.
So what is ECMAscript?
ECMAscript is a standardize javascript to foster multiple independent implementation.
It is mostly used for client-side scripting and is used in modern web technologies like node.js and react - redux frameworks.

A well way to contribute to open source project for beginners are coding testing scripts, build development and QA.

I had a look at the ECMAscript test suite experimental harness

https://github.com/bterlson/test262-harness

This test suite allows users to unit test for function in javascript.

So after setting up the environment , I ran the test using the code

test262-harness test/**/*.js


As we can see out of the 205 tests , 199 passed and 6 failed. The error shows problems with using strict mode.

After that I updated some of the test :
//Test 1assert.sameValue(reverse, x, "value is not equal");//Test 2assert.sameValue(typeof reverse, typeof x, "…