Thursday, February 15, 2018

Release 0.2: Antivirus vs VS code

These 2 weeks I have been looking for and fixing this issue.

Recently my antivirus got updated... I am using Bitdefender and until this release I have never had problems with it. So one day when I had some time I decided to start working on my  issue. 

In my case the first step was reproducing the bug. So I tried to run vs code and I run into this error:

             [21:02:51] Using gulpfile C:\...\gulpfile.js
             [21:02:51] Starting 'clean-electron'...
             [21:02:51] Finished 'clean-electron' after 6.22 ms 
             [21:02:51] Starting 'electron'...
                ↓ electron-v1.7.9-win32-x64.zip [==============------] 68%events.js:183
                   throw er; // Unhandled 'error' event
                   ^

             Error: read ECONNRESET
                at _errnoException (util.js:1024:11)
                at TLSWrap.onread (net.js:615:25)
           [21:08:18] Syncronizing built-in extensions... 
           [21:08:18] You can manage built-in extensions with the --builtin flag
           [21:08:18] [marketplace] ms-vscode.node-debug@1.21.1 ✔︎
           [21:08:18] [marketplace] ms-vscode.node-debug2@1.21.0 ✔︎
     '".build\electron\Code - OSS.exe"' is not recognized as an internal or external command,
      operable program or batch file.


So after a few hours of research on StackOverflow, I wasn't getting anywhere. It was a lucky coincidence and I decided to check my antivirus. 

It always gives me million notifications about what is happening in the system, but not this time... My Bitdefender just silently blocked executables needed to run VS code.


It took me a while to disable blocking of all the files I needed to run, but I finally managed to restore all the files and finally run my instance of Visual Studio code.

Tip for future: if something goes wrong and you don't have an explanation, check your overprotective antivirus.



Sunday, February 11, 2018

TIL: React Native and Android. Tutorial Edition

This week I have been working on React Native Android application for one of my courses, so I decided to write a tutorial with everything you need to know to get started with React Native.

You can find the full code from this tutorial on GitHub.

I am not planning to go through setup, you can check this blog (it's only for Windows, here is one for Linux and for Mac).

So what happens next after running your app?

Your main page is App.js, so let's take a look what's going on there.

Everything that is under render() function's return is your view, so that's the part you will modify the most, this structure reminds me a little bit of HTML.

On the next few lines we can see styles,

I prefer to keep structure and styles separated in different files.
So let's do that!

To include your stylesheet in App.js you need to export module from your styles file and don't forget to import all the dependencies in your styles file:

In your App.js you have to import this file and use it as a "library":

One of the hardest parts (at least for me) is configuring navigation from page to page.
To add navigation to the project, you have to modify index.js file:


First of all you need to import StackNavigator and create constant property to pass navigation property to it, later on we will use that property to move user from component to component:

Now you need to configure StackNavigator component and make it main/first screen by passing reactNavigation property we have just created. And we need to register StackNavigator component, now when you need to redirect user to the next screen you will use "App" title and your application will know what you are talking about.


Now let's create a few buttons and extra component, so we can play around with our navigation and don't forget to import Button component:


It is highly important to add ".bind(this)" when you call your function, otherwise this.props and this.state won't be available in your function.

So here is my Next.js page:


Now you need to add Next component to index.js file, so it can be accessible by App component. Don't forget to import the page first:

And add the page to StackNavigator:

So let's our app and see how it works:



As you can see Navigation has added a bar at the top of the screen, it's not pretty, so here is a solution on how to can get rid of it. You need to add a few lines in index.js file in you StackNavigator component:


And here is how the app looks now:




I prefer to work with Emulator to work on styling and components, because it's easy to reload and see the changes almost instantly. But sometimes it's important to know how your app would feel on the actual phone.

Here is how you can easily run your android app on your phone.

First of all you need to configure development mode on your mobile device. This configuration may vary for each model, so I am not including it here.
Next step is to connect your phone to your computer using USB cable.
Now to run your application you should bundle it using the following command first (you have to rerun this one every time you make changes in your code):

$ react-native bundle --platform android --dev false --entry-file index.js
--bundle-output android/app/src/main/assets/index.android.bundle
--assets-dest android/app/src/main/res



Now you can run:

$ react-native run-android

And enjoy your awesome application on the phone!

You can find the full code from this tutorial on GitHub.



Tuesday, February 6, 2018

How to contribute to open source without coding skills?

The first thought that you have right now is probably: "It's not possible, she does not know what she is talking about". But give me a chance to prove my point.

If you know languages, you can contribute to open source projects. It doesn't matter if you know "human" or programming languages. Most of the big projects are in need of localization. And if you know more than one "human" language: it's your chance to shine! 

I am a localization contributor as well. I have recently started to translate for Visual Studio Code, so this is what you need to do to join the community:

Step 1: Get a transifex account (it's completely free).

Step 2: Request access to the project.

Step 3: Start contributing!

The website has user-friendly interface, but if you need detailed instruction on how to get started once you have joined an organization, here it is:

1) From your home page go to "Dashboard"


2) Select the project you want to work on

3) Click on "Translate"

4) If translating is available in a few languages you know, you will be asked to select one

5) You will also be asked to select a resource, it is just a subsection of a project


6) On the left you will see a few subcategories of strings


7) On the right side there is a panel where you can suggest translation or vote for one


I have noticed that community is in need of contributors. To have your translation be accepted you need to have 1 more vote from another contributor. I have translated a few strings and most of them were not reviewed due to lack of contributors.

And the whole translating process it quite pleasant. It feels like playing a game and may even be addictive. I noticed that when I get involved: it's hard to stop.

Even if you don't want to translate strings you may start as a reviewer, just get involved with terminology and you will be a great fit to translators' community! And don't worry, you will be recognized and even included in release notes under "thank you" header!


Just imagine how many people will see our name and will benefit from 20-30 minutes of your time!


Some helpful links:








Saturday, January 27, 2018

New semester. New projects. More open source

So I have got thought Open Source Development I course in Seneca College successfully.
Now I am one of not many brave people who are taking Open Source Development II

This course is a bit more different in terms of work load. In previous semester I have completed 2 releases (in other words: my professor marked 2 sets of issues I have attempted to fix on GitHub). And this semester I have bi-weekly releases, which means 7 releases. 
I am not excited to be overwhelmed during my last semester in school and I am not a fan of spoiling my transcript, so I need a plan.

First of all, as our professor has advised, the best way is to stick to one project. Originally I wanted to work in Golang on Golang☺. 

But after several attempts to sell it to my classmates, I was sold on contributing to VS Code. This open source editor is quite popular these days. I even wrote an article about using it and some other IDEs a while ago. A lot of people with whom I work/study are using it daily. This is a perfect opportunity to become involved in a large project that affects me and people I know directly.

So I decided to contribute as both developer and translator. I remember the struggle I had with English version of Visual Studio, when I was about 12-13 years old and was confused not only but English, but also by programming in general. So I hope other kids/people in Ukraine and Russia will have more comfort and I want to help! So while I was installing dependencies for vscode project, I found an instruction on how I can contribute to translations.

I even had a chance to translate and rate a few dozens of lines and strings while waiting for all the dependencies to load.
Setting up vs code at my personal computer was a piece of cake, I followed instructions in the vscode Github repository and everything just worked!

My professor suggested not to stress ourselves out and pick some small "good-first-bug" just to get involved. So that was exactly what I did. I picked this "please remove" bug. It was quite an easy fix: Ctrl+F, Delete. I have submitted pull request and to my surprise one of the tests was failing!


3827 passing (30s)
1 failing
1) FileService "before each" hook for "moveFile - MIX CASE":
Error: timeout of 2000ms exceeded. Ensure the done() callback is being called in this test.
The command "if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then ./scripts/test.sh --coverage --reporter dot; else ./scripts/test.sh --reporter dot; fi" exited with 1.

I was confused... That error was not even related to my fix, so I asked for help.

It was on Saturday, so I didn't expect to get the response until Monday. And the first thing I saw in the morning on Monday was an email from GitHub. My PR got merged and it will be shipped with Visual Studio Code for their January 2018 release! I was happy about how not painful this time my experience was. And that was the test that had some issues.


So my first release is done in this semester!


Monday, January 1, 2018

My Christmas / New Year Journey: Fixing bugs. Part 2

Happy New 2018 Year!

First part of the blog is available here.

So I have been looking for some new bug for the last few days. I have found a few interesting once, contacted different project maintainers, but they didn't respond. Probably because of the holidays.

And finally I found something interesting: rmw project.
As it states on GitHub page: "rmw is an OS portable cli trash can utility written in C. It can send files to your "Desktop" trash, or a completely separate folder. It can also: restore files; permanently delete files that were rmw'ed more than xx number of days ago; skip files or directories that have a "PROTECT" directive in the configuration file; and append a unique string to the filenames so they won't be overwritten (duplication protection)."

I was always curious how the different projects are available in multiple languages, I thought it required a lot of copy-pasted text and if statements... But during my experience I found out that one of the ways is to use gettext tool. So I decided to contribute and translate the output messages to Russian and Ukrainian.

It was definitely an interesting experience and welcoming community!

I can now tell that I finally feel comfortable with contributing, creating pull requests and starting to work on the new projects!

During last 4 months I tried to gain confidence as an open source contributor and programmer.

My goal was to learn more "how big programmers code", best practices and explore some technologies, I have never heard/tried before.

I can say with confidence that I have done at all of that.

And since it's impossible to know and try everything in IT field, I will still continue my journey in Open Source, in exploring new technologies and programming languages by myself.

Saturday, December 30, 2017

My Christmas Journey: Fixing bugs. Part 1

Merry Christmas and Happy New Year!

A bit later after my holidays, I remembered that I need to finish my assignment for Open Source Development. I have planned how I was going to work on it in this blog post. I planed to work on it for 1 month instead of 9 days, but due to personal reasons, I couldn't do that. So here I am: 7 days before the deadline(It's not 7 hours, so I think it's quite doable).

As I expected the bug I planned to work on about a month ago has been already silently fixed, so I didn't even get any email notifications about activity on the issue I have been following on the GitHub. That happened a few days ago and of course I got stressed out. So I have asked my friend, Ray Gervais (link to his blog), to recommend me some interesting developing project and he did.

He was contributing to a CSS Framework based on Flexbox called Bulma. Even though originally I was planning to concentrate more on Node.js, JavaScript and React, I thought it might been a good idea to see how CSS Frameworks work from the inside.

So I picked up a new bug. This experience started with "Oh my God, this is amazing!" comment. When you start contributing to a new project you need to set up an environment, download all the technologies you may not have on your computer... Well, apart from forking the repository and cloning it locally, I spent 5 minutes on setup: npm install and npm start (to run the project). It would be a bit longer if you don't have node.js on your machine, but it is still faster than a lot of other large projects.

I have started looking into the code. And at some point I asked myself "what am I trying to do here?". Originally I thought the requester meant to add an ability to write buttons with different sizes, that was already implemented(I wish I read the docs, I just found a piece of code), so I contacted my friend again just to confirm that I am not going crazy and it already exists.

Spoiler: later that day the requester made his idea clearer, but I think that should be reviewed by somebody who maintenance the project first.

Still it was a nice experience getting familiar with a new code, but I didn't find my bug yet...
Next part of the blog is available here.


Tuesday, December 12, 2017

Goals for the next month

It's about month before the due date for the next project for my Open Source course.
So it's time to set some goals and determine how I am going to grow as an open source contributor.

My goals are:

It's quite tricky to work on the assignment at the end of the semester with no plan. And Christmas is coming! I definitely need a plan how to spend more time with my family and friends, but also do my best for this project.

My plan:
  • Spend 3 hours on fixing bugs every week from Dec 12 till Jan 5
  • Learn Node.js, JavaScript and React if needed (depends on my knowledge and bugs I find)
  • Fix at least 2 bugs
So far I have found only one bug, but I hope to get involved in this project and continue working on it.


It's only a beginning

What have I learned for the past 8 months of Open Source Programming? I was convinced from the very beginning that this course would be i...