SPO600 – Stage 3 and Final Thoughts

Pull request for changes : https://github.com/ctyler/spo600-glibc/pull/6

For the last stage I ended up pushing my local changes to the classes github. The final version that I ended up with for STRCSPN is the one I mentioned in the last post. Even thought the overall speed increase is rather small (  only about 2% ) the function is now far more readable and has an overall better run time.

As for final thoughts about the course, it is a great class that allows you to experience how and why we need to develop and optimize our software for variety of reasons, power consumption and performance are very important when it comes down to the core system, and need to be working at their maximum. I really enjoyed the assembly and the way course is taught. I highly recommend anyone interested in software portability and optimizations to take this course in the future.

OSD600 Release 0.4 and Course Conclusion

With the study term coming to an end, this will be the last release for the OSD600.

The bug had to do with thimbles  project activation button, it had a bad styling once pressed, which caused it to not change color making it harder for user to know what happens.

The fix required some CSS changes with dynamic linking of a class to adjust it.

For CSS :

cssclass.PNG

We create a simple class and add properties to it that we want to give to our button. Then after the button is pressed we find the function that handles the event and call this line in order to add this class dynamically to the CSS.

dynamicCall

In conclusion I want to say this course has been very useful in getting some real life coding practices and interactions with other people. Compared to other courses where everything is laid out to you, in here you have to commit by yourself in order to stay ahead. I highly recommend this course for anyone looking to either work in open source or to get more hands on experience with source control and team oriented work.

SPO600 – Testing STRCSPN improvement

Previous post about the implementation is here : https://andreybykin.wordpress.com/2017/04/09/spo600-improving-strcspn-the-implementation/

In this post I will show the tests that I ran for my implementation of the STRCSPN function and the results of those tests.

Here is the test file that I worked with.

spnTestFile.PNG

I am unable to test my implementation as a direct compilation of the library, but this works too. The file includes a large string that we want to search in, and a smaller string with the characters we want to find a match with. I use the clock() function to time the execution of the two functions and compare the results at the end. A simple test files but it does show a slight improvement in the run time using the new implementation.

Here are some results running this test.

spnTestResult.PNG

As you can see there is a percentage of 1-1.3 improvement over the old function, this is on the X86 machine, on a AARCH64 machine the improvement bounces between 1.5-2 percent, with a similar test. This is all compiled with the default flag, playing around with -01 and -02 still shows somewhat similar results.

Again this is not much of an improvement in terms of performance however the new implementation does make the code look cleaner and easier to read. You can find the link to the implementation post above.

SPO600 – Improving STRCSPN, The Implementation

This is an update for the last time I posted. Currently I have a working version of the new implementation, that I think is ready to be code checked. In this post I want to explain the implementation and what it is suppose to do, and in the next post after this I will post my testing method as well as test scripts.

So after adjustments and trial and error this is the current iteration of my adjusted function :

implemenationFile.PNG

Let’s break this down.

First thing up we create a bitmap with maximum number of unsigned char capacity. We will need this in order to store the values we have in the string we want to find a match in.

Next we set up  a few variables that we will use, n being the return value and parity is our bit indicator.

We will  initially populate the entire matchmap array with 0 using memset. This allows us to ensure we will not mistakenly match with some weird value.

while(*map) loop iterators over the characters we are looking for in the string, and for every character we cast it into an unsigned char which lets us use it as a array indexer in our matchmap. Once we have the index we place the value 1 in the position. This is for later to allow us compare the two strings.

matchmap[0] = parity; This statement is so the null terminator never matches.

while(matchmap[(unsigned char)*s++] ^ parity). This is the part that does the work. We use the original string we are searching in and again converting it to an unsigned char to get the index value after which we use the bitwise operator ^ XOR to see if it already had the value set to one, when we initially went over the look up string. If values do not match we simply add one to N and move on to the next value, once a match is found the loop terminates and we get our final result.

This is current iteration of my implementation that I think is ready for code check.

As a side note, the original function is a mess and if anything this just helps it look nicer.

To find the tests that I ran here will be the blogpost : https://andreybykin.wordpress.com/2017/04/09/spo600-testing-strcspn-improvement/

OSD600 Release 0.3 – Fixing a feature

In this release I worked on an issue listed in thimble, you can find it here : https://github.com/mozilla/thimble.mozilla.org/issues/1907

To summarize the bug, it involves changing the themes of the editor. When themed changed to dark, the inline color picker still had the same light theme, which of course should be light in this case.

To go about researching this error, it was pointed out that it involved an older commit hat ended up breaking it. Now in order to find this commit we have to do a bit of git magic. Git Bisect is a command that allows you to quickly switch to older commits and find the commit that ended up breaking a feature. Initiate the bisect by running :

  • git bisect start ( Initation git bisect )
  • git checkout master ( Checkout the most latest commit that we know is broken )
  • git bisect bad ( We tell git that the master branch has the bad change)
  • git checkout oldereCommitThatWorks ( Now lets get an older commit that we know for user works properly)
  • git bisect good ( Tell git that this older commit is good )
  • git bad/good ( Now go through the commits and find the one that broke)
  • git bisect reset ( Finish bisect mode and return to normal git mode )

This process will get us the commit that initially broke what we are trying to do. In my case I found that the commit that took place was changing the way thimble changes themes. The change that broke it was $(“body”).toggleClass(“dark”, theme.dark); Which basically turns on a class for CSS so it can use the dark theme. When this was omitted it broke the code that changes the color picker, so for the solution I simply reverted this one line change, it still allows the previously committed code to work normally, and allows the color picker to keep using the previous way of changing themes.

My pull request was accepted and merged here : https://github.com/mozilla/brackets/pull/670

Open Source Tooling : Deploying to Heroku

Heroku is a tool available to try for free at www.heroku.com . It allows for developers to put up server code that they can then share with anyone. This is an extremely useful tool when it comes to working in the open source community and sharing projects with team mates and friends. All you need to do in order to get started is create an account, and install the CLI application to allow heroku to automatically sync with your git repo.

When I first tried it I extended the code I wrote in the last lab to be able to be ran on express server. Express allows you to easily make your JS code accessible with a server. To merge the express server and heroku cloud service, we have to add a couple of things to our code. One of them is a file named Procfile, all it contains is information on what server we want to use, in this case it’s web: node server.js.

Once everything is set up and running you simply push your git changes to the automatically created heroku git repo. Once its up it would be running on the web with the url it provided. You can check out my server at : https://infinite-earth-38198.herokuapp.com/

This is what it looks like when passing some parameters to trigger a function, for example healthcheck :

healthcheck.PNG

Overall this was a great lab and it taught me an easy way for me to code a server and share it with people I am working with. If you ever think you may need to do some simple servers or test code for your application and want to share it online, check out Heroku! Only takes about 10 min to learn. That’s it for today, have a great one.

OSD600 Lab 8 – Unit Testing

For Lab 8 we got a chance to create a java script testing program that automatically runs when we run our builds on Travis. It is quite easy with the technology from facebook to allow us to code our tests for specific function and easily test them against multiple tests to see what passes and what fails.

testFunctions.PNG

As you can see it’s very easy to create a test function for the function. And this file after it’s pushed gets ran by Travis which allows us easily to tell if any of the above tests have failed.

Unit testing is a new topic for me and I found it very interesting. It allows for an interesting approach with developing with test cases. to be honest I did not find anything hard about this. If anything it is much harder to do this without knowing how to create proper tests for your functions.

I will try to take the approach of test oriented development in my future javascript projects as it seems to be a good way to develop small and large applications that require precise handling of data.

You can check my build on travis using this link :

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

SPO600 optimizing GLIBC function “strcspn”

I choose to optimize the string library function strcspn because it looked like it could use some cleaning up at the very least. First to explain what the function does. STRCSPN take two strings and compares the first string against any of the characters in the second string. Ones a matching character is found, it returns the number of characters in the first string before the matched character. For example string one will be “test1” string two is “1”, the function will return 4, as 4 characters come before the first matched character. Now lets take a look at the current implementation of the function.

strcpsnimplemenation.PNG

It’s a little bit confusing but from I understand, it uses a table and tries to find the matching character at which point it starts calculating the number of characters to return. So far I’ve come up with a few different implementations, mostly getting around 1.5 – 2% increased performance. The implementation I am currently testing is very simple :

myStrcSPN

All we are doing here is looping through the first string and using the bit operator ^ XOR to see if any bits match between the two strings, counting our return value up when we don’t find a match. So far with my testing this function works properly and is about 2% in terms of improvement. Looking to see what I can do to it further to increase either performance or memory.

OSD600 Release 0.2 – Small fixes and adjustments

For this topic I choose two issues to work on :

https://github.com/mozilla/thimble.mozilla.org/issues/1728
https://github.com/mozilla/brackets/issues/619

However I wasn’t able to replicate the issue in 1728. I believe that has something to do with specific system configuration. When I tested on my machine I was able to have it working. So unfortunately was unable to help with that issue. However I feel like it may be better for someone with that issue to have a go at it, as it will be easier to test.

For issue-619 I did simple adjustments to the console logging that was present in some of the LiveDevelopment files. To summarize the changes :

HTMLDocument.js
remove console.log(delta);
remove console.log(“Edits applied to browser were:”);
remove console.log(JSON.stringify(result.edits, null, 2));

Inspector.js
remove console.log(“You must connect to the WebSocket before sending messages.”);

LiveDevMultiBrowser.js
console.log(“Invalid launcher object: “, launcher, new Error(“LiveDevMultiBrowser.setLauncher()”));

LiveHTMLDocument.js
remove console.log(“Edits applied to browser were:”);
remove console.log(JSON.stringify(result.edits, null, 2));
LiveDevProtocolRemote.js
console.log(“[Brackets LiveDev] Received message without method.”);

console.log(“[Brackets LiveDev] Error executing a handler for ” + msg.method);
console.log(e.stack);

remove console.log(“[Brackets LiveDev] No subscribers for message ” + msg.method);

console.log(“[Brackets LiveDev] Trying to send a response for a message with no ID”);

remove console.log(“Runtime.evaluate”);

console.log(“[Brackets LiveDev] Malformed message received: “, msgStr);

With current production version there are some that ran way too often like the Runtime.evalute log which ran every action look below :

runtimeEvaluate.gif

This may be fine for a desktop version of the application where console is unseen, but for browser it fills it up with unnecessary waste and can cause it harder to debug. Nevertheless I removed those logs that I thought were being unnecessary, and kept those that are useful in terms of debugging an actual error handling function.

There is one more issue I kept track on, trying to figure out, but didn’t have enough time to. I am still looking at the side, and may want to ask for help for it, as it has thing I don’t really understand how they operate. The issue in question is :

https://github.com/mozilla/brackets/issues/493

It may need some discussion as it alters a functionality currently in the editor. But the solution does look promising as it makes it more friendly for the user to use.

I wish I had some more time to work on this release, but I had some issue during break week that needed to be handled. Will try to go for a big bug/ feature for next release thought!

 

 

OSD600 Lab 6 – Editor Comparison

For this lab I have decided to compare two popular code editors, Atom and Sublime text. Now to let you know right away I have not used atom ever, so it was more of a first impression kind of thing. Sublime on the other hand I have used but not have dived deeply into the customization and preferences of the editor. Here is what Atom looks like with Brackets opened :

bracketspic.PNG

Now I will show how to configure some of the features of the editor. First up lets try to search for a string in a file and then in the whole project.

search.gif

As you can see finding things is rather simple in Atom, and the interface is not that bad when searching the entire project.

Next up to install additional extensions, all you simply need to do is Click Packages -> Setting View -> Install packages

package.gif

Some common key binds you will find in the editor :

  • CTRL – F ( Search inside the file )
  • CTRL – SHIFT – F ( Search inside the project )
  • CTRL – L ( Select Line )
  • CTRL – SHIFT – +  (  Increase Font Size )
  • CTRL – SHIFT – –  ( Decrease Font Size )

There are many more key binds simply by looking around the top menu you will find lots of more useful binds you can use.

Next lets have a look on how to split the view.

splitview.gif

Extensions – There are plenty of extensions for Atom, ranging from a variety of things such as auto text complete to simplified usage. The following extensions I loved the most :

  • Atom Beautify ( Cleans up javascript code to look nicer, and stylizing it so everything looks the same )
  • autocomplete-clang ( This is a autocomplete for C/C++, as many of my code is written in those languages, it is awesome for writing quicker and easier)
  • git-plus ( this allows for git control without using the command line interface inside atom)

Here is a look at how some of them function :

Beautify :

beautify.gif

Clang-autocomplete:

clang.gif

Thanks for reading, how you find an editor that is good enough for you :).