bbhags-blog

[bbhags-blog]

Fixes #1948, Remove strange effect on items deleted from Your Projects list

Well this was a long and confusing process...

This issue caused my breakup with Opera and reuniting with Google Chrome. However, had to add an extension that turns off all other extensions for the page to load properly. Opera, for some reason, doesn’t show the effects after the project is deleted. So every time I try to change something in the .js file and try to test it out, nothing happens (-_-). The move to Google Chrome was ultimately successful as it’s a bit easier to use for development.

I was first asked to add a fadeOut effect so that the deleted project would fade out from the table and the remaining rows fill up the space left by the deleted row. I was able to successfully do this by changing project.hide to project.fadeOut. After trying to push the changes, flukeout told me that the fadeOut effect has an awkward looking effect once a project is deleted. He suggested I used slideToggle() instead of fadeOut().

project.hide() was the function that made the row slide to the left of the list so i removed that function and added project.slideToggle instead. Great fix using just two lines. The practice I gained from the time I spent figuring how to apply this fix was really a good experience. 

[bbhags-blog]

Fixes issue 1976: Transparent background images look bad when using Dark theme

The issue is caused by the dark theme resulting in an untidy white background leaving an awkward effect and doesn’t make the photo be easily visible. Changing the background to white would increase the visibility of the photo uploaded. Finding where to change the colour was the biggest issue like most issues within this project. Other than using the inspection tools, network monitor and elements, using a colour picking tool to find the colour of the background to search for in the .less files within the project.

The fix i proposed included using the same background of the image background from the white theme. I thought copying the background rather than applying a new background would make it better for readability. I used Google Chrome to test my changes and Visual Studio to read and edit the code.

These two lines inserted in the brackets.less file inside the dark theme application will change the background to the same background used in the light theme, 

[bbhags-blog]

Continuing the fix of #1719

After trying to fix the aesthetic bug of the gear icon, I was told to improve the pull request because i had issues with the browser I was using. 

An unknown Google Chrome extension prevented the thimble page from loading by complaining about some fonts...Therefore, I was using Opera and Opera was where I found my initial fix for the gear icon. 

Initially, I thought that the css stylesheet needed to change with the js file but the help I got from flukeout revealed that the fix was actually simpler. As seen above, the only changes required was to apply changes to the opacity when button was showing and when it closed.

[bbhags-blog]

Learning Lab Part 3 : Deploying App to Heroku

From what I understand, Heroku, a PAAS ( a platform as a Service), allows us to run an app using a cloud service and to test it’s application, we were tasked with setting up a node server file and deploying it to Heroku. In the end, we had to create a “route” ( a page within the server ) that shows the uptime of heroku. Navigating to:

https://evening-dawn-90858.herokuapp.com/healthcheck

should show how long the server has been running.

The process was pretty simple due to the experience gained from the previous labs. Within the SenecaLearningLab directory, we needed to install/update npm which would add a few dependencies with the command:

npm install express --save

Then create a server file ‘server.js’ with a few routes and declarations. Finally, we deploy to Heroku. Following is the steps taking to deploy Heroku

1. Create free Heroku Account: https://signup.heroku.com/signup/dc

2. Download and install Heroku CLI for Mac

3. Login to created Heroku account using the credentials previously used to create the account.

4. Create a file named ‘Procfile’ with the following text:

web: node server.js

5. Deploy the app using the following command:

heroku create

6. Deploy code to Heroku using:

git remote -v

7. Push to github

8. Start a web server:

Heroku ps:scale web=1

heroku open

9. Update code to include new route and re-deploy app

It took me some time to actually figure out how to display the uptime on the route just because of confusion among all the different programming language syntaxes out there, but like most successful applications, figuring out how to do it was a nice relief.

Most of the labs I’ve done during the time of this course really exposed me to the magnitude of platforms, services and support that the open source community has going for it. This is definitely a movement that helps moving technology forward.

[bbhags-blog]

Learning Lab - Part 2: Unit testing frameworks and Travis CI

Continuing from last week’s learning lab, we are adding unit tests to ensure that our code works properly and prevent broken code in the future (maybe operating systems developer should learn about this before pushing new updates? Does Apple do QA?). 

To begin, we’ve got to install Jest: a Facebook testing tool for Javascript and include it in our scripts inside Package.json. For this lab, we’ll use Jest to add testing for seneca.test.js and seneca.js from last week.

Before we could test, we need to decide what we’d like to create tests for. The recommended testing cases include: 

Making sure that the user is entering a string for the email (we’ve already created testing cases to ensure the user is actually entering an email (the use of “@myseneca.ca”)

Checking for a null variable entered

Checking for whitespaces (leading)

Pass tests for Student and Professor emails (myseneca.ca and senecacollege.ca and senecacollege.on.ca)

After creating the test cases for these conditions (which was pretty fun). It’s time to lint it out. This is where Visual Studio Code and all it’s amazingness came to help me. One of the extensions installed was eslint and it does the linting in real-time. After satisfying the test cases locally and then pushing it to github (for travis to check it out), Travis showed me how many “errors” were in the code (all syntax and spaces)...

This was all fixed with the help of Visual Studio Code displaying red lines under each error with descriptions of exactly what was expected. For example, Visual Studio Code uses 4 spaces with each indent while I was supposed to use 2 spaces, so Visual Studio Code would tell me how many spaces i used and how many I should have. 

That got fixed and then I realized i didn’t install jest in the directory -_-

Totally noob move...

Installed jest and pushed to github. All tests succeeded: 

https://travis-ci.org/bbhagwandeen/Seneca2017LearningLab

[bbhags-blog]

Learning Lab: Who/What is Travis, and what does it do?

In this lab, we use Travis to help test our programs before we’re able to commit it to GitHub. Travis helps us ensure our code doesn’t break a project before being committed. Below, I talk about the lab used to learn about using Travis...

First, we began by creating a repo on our github account for trying Travis out (created a README file, a gitignore and a MIT license) . 

[bbhags-blog]

Learning new editors...

I’ve been assigned to learn how to use new editors from the following list:

Atom

Visual Studio Code

Brackets

Nuclide

Sublime Text

vim

emacs

Since I’ve been tasked to try out editors that I’ve never used before, I had to eliminate Atom, Brackets and Sublime text. Of those 3, I’ve enjoyed using Sublime the most but this task has given me a new favorite.

I’ve decided to try out Visual Studio Code and Nuclide text editors. Some of the example cases given to us to try out to see how these editors work include:

Opening files and/or folders of files (example, an entire project)

Indentation

Opening from command line

Finding files or specific strings

Multi-pane editing

Extensions

Multiple cursors

Key bindings and how to change them

Autocomplete enabling

Change preferences (night mode is where the party is)

The benefits of using Visual Studio Code are quickly appearing. Opening a project is really simple and feels like you’re using an IDE to edit the code without the ability to run the project. Because it’s “just” and editor, the loading times are extremely fast and it does not use a ton of RAM. 

Trying to check the preferences and settings to see the identation options on Visual Studio Code revealed that the settins is in a json format which i think is nice as mostly programmers would be using the application. Pressing tab indents to 4 spaces and can be editted via changing the value in settings.json.

  "editor.tabSize": 4, "editor.insertSpaces": true,

  I don’t personally use terminal to open applications, so learning how to open it using the command line was new but informative. On Mac’s terminal, a simple command to open an application goes:

open -a ‘Application Name’

For example, opening safari would be:

open -a Safari

And opening an application with multiple strings as a name (like Visual Studio Code) would be:

open -a ‘Vistual Studio Code’

Searching can be done within a single file as well as multiple files. Standard search functionality with replacement features is available. Searching within a single file is done with `CMD + F` while with multiple files is `CMD + SHIFT + F`

Similarly to IDEs, project files are on a left pane while open tabs are where tabs are usually places in browsers or other IDEs. Visual Studio Code is really close to an IDE. You can also edit multiple files with multiple panes open at the same time (bigger screen recommended).

I was elated to see the number of extensions available for Visual Studio Code including support for many programming languages and even tools for linting and beautifying the code. Visual Studio Code is much wow.

[bbhags-blog]

Actually getting Bramble set up...

Unfortunately, my setup from before was broken. A huge problem with thimble prevented me from being able to load thimble properly (In my setup blog, I talked about deleting the spinning-container to get the page to load) and while doing extensive research, I was unable to figure out what was wrong. The console reported many errors about missing files and I figured that I should just reclone the repo 6 million times and update the files, but that too didn’t work.

Fortunately our class professor was available for help and  after weeks of not asking for help from him, I realised how much time I would have saved by visiting him. He was able to help me find the root of the actual problem by running `npm start logs`. This simple command let thimble explain to me what was really happening. In addition to having help from my class professor, I directed (by the same professor) to get involved with the Thimble channel chat and share my problems with the humans there who would end up helping me completely overcome my issues.

The errors from thimble prevented the application to write to my computer and resulted in files not being able to load from Thimble’s server. A simple run of the command, `npm dedupe’ fixed it and `npm start logs` produced ZERO errors with all files being successfully written to my local directory.

An example of the errors that `npm start logs` produced:

/opt/vagrant/embedded/gems/gems/vagrant-1.9.1/lib/vagrant/util/platform.rb:24: warning: Insecure world writable dir /Users/dir/dir/dir/thimble.mozilla.org/node_modules in PATH, mode 040777 timestamp=2017-03-20-17:36:45+0000 app=thimble id=4 type=out message=Watcher error: Error: watch node_modules/express/node_modules/path-to-regexp/package.json ENOSPC

After running `npm dedupe`, this is an example of the successfully written files:

Done writing: /Users/dir/dir/dir/thimble.mozilla.org/dist/locales/pt_BR/messages.json

Once this ran, the thimble icon actually stopped spinning a few seconds after it started and was able to let me start a new project from scratch.

Any new issues will be blogged about soon....

[bbhags-blog]

Fixing the #1719 “Gear menu icon should keep "hover" state always when the menu is open.” bug from thimble.mozilla.org

After my battles in trying to set up the environment to begin working on this simple aesthetic bug of the gear icon color not keeping its state when hovered or pressed. 

The picture below is the state of the gear icon when not interacted with.

 When the mouse cursor hovers over the icon, it will appear like this and is needed to appear like this when the icon is clicked and until another area is clicked (look closely and notice that it’s a little lighter in color).

The process of finding out where to apply this fix was a little more tedious than actually applying the fix. Thanks to the inspector tool found in most browsers, Google Chrome was able to help me understand where the javascript file for the gear icon’s features existed. Having recorded the interaction of the gear icon using the timeline function of the inspector tool, it was revealed that the bramble-popupmenu.js javaScript file was the file housing the functions related to the menu of the gear icon. 

From there, I was able to insert two simple statements which changed the css property values of the id “editor-pane-nav-options”’s opacity value. On the opening of the menu, the statement included was:

$('#editor-pane-nav-options').css('opacity', '.7');

and on closing, the gear icon’s opacity had to be reset to default, therefore the second statement added was:

$('#editor-pane-nav-options').css('opacity', '.5');

which was added to a separate function which handled the closing of the menu.

[bbhags-blog]

Setup and Installation of Bramble and Thimble

Before attempting to fix the issue #1719 bug, a thorough and lengthy process of setting up Bramble and Thimble had to be done (not fun). The process was completed after many trial and error processes which were solved by simply spending time and getting to understand why terminal would complain so much. This made for a good strong history of the foundation of the relationship between myself and Bramble and Thimble including many restarts and port configurations until realizing that only thimble and vagrant should be running at the same time to set up the localhost:3500 server. 

Once the environment setup was complete, I could concentrate on finding out how to fix the bug referenced in the title above. Unfortunately, computers are modeled after the human brain and sometimes like to be dramatic and/or stubborn so it takes time to understand how to get around it’s stubbornness to get something working. In this case, it was the loading of localhost:3500/src/hosted.html which at first had a vague error message which only provided the solution of trying again outside of incognito mode (wasn’t in incognito mode). In trying to figure out why the world was against me for days, I consulted with another human who was working on the same setup. During this consultation, I restarted thimble and vagrant and things were up and running.

Happily ever after doesn’t start yet....

This screen was my best friend for a few hours. Reloads, clearing cache, restarting servers, rebooting machines all didn’t help. The machine needed me to know that it, too, can complain or be ignorant. I had no other choice but to accept this complaint as a challenge and went to work in figuring out what was making this thimble stop playing around. Hello, inspector tool, goodbye <div id="spinner-container">. A simple press of the delete button on this line stopped the thimble from being childish and allowed me entrance to the editor page where I can FINALLY begin to test work on the bug*.

*The blog post right after this one contains the details of the bug to be fixed.

[bbhags-blog]

How many programming languages should I know?

There are many programming languages out there, over 500 to be a little more specific. So how many of these should a programmer learn to be a successful programmer? Well, that really depends on what you would like to learn programming to be able to do with the language: do you want to make websites, mobile applications, desktop applications, database management applications, e.t..c.? Below you’ll find a few of the top programming languages used currently to create these applications.

Websites 

Html is definitely the first language you’d need to learn to start website development. Not only does it provide the foundations of web development, but it is one of the easiest languages to learn how syntax works in programming and should be considered as an initial’s guide to programming.

Mobile Applications

The two top mobile application development languages you should learn are Java for Android and Swift for iOS. You will also need to familiarize yourself with the Android Studio and Xcode IDEs which provides the best user interface for mobile application development.

Desktop Applications

Depending on your operating system, the scripting languages to learn may vary but scripts are very powerful pieces of code that can be used to perform little to huge tasks. 

Database Management

The premiere database design language (DDL) is SQL and should be the first language you decide to learn if you want to become a database developer. SQL is similar to HTML as a good foundation programming language as it will help you get familiar with programming syntaxes and data types.