One small bug-fix for a project, one giant leap for me.
Exploring the planet called “Open-Source Development”.
“Greetings, future software developer. We are about to land on an amazing planet, where its inhabitants share ideas and goods, collaborate and help each other on their way, comment, review and give feedback on the work of others on their way to the better future“
– this is what I would have probably heard if I was an astronaut, travelling through the endless universe in the search of new worlds. But this world is right here, one click away — and it is the World of Open-Source Development.
This week I have not only landed, but also made a couple of tiny steps on the path of collaboration and development in open-source. In the previous post, I have told you about the z-Note — a little note-taking application developed mostly for the learning purposes by me. My groupmates have also developed applications with similar core functionality — but there were no recommendations or restrictions on anything else — freedom for creativity. The goal for this week was to improve each other’s projects by contributing to GitHub repositories.
TinyNote
TinyNote is an outstanding and stylish notepad by agarcia-caicedo— it’s functionality allows the user not only to save the note and open it at any time but download it as a PDF document as well. It also includes a text-editing toolbar with headings, bold/italics/underscore stylings etc. and has two colour versions — Light and Dark Modes.
While using this application, I have noticed that in the Dark Mode the elements of the text-editing toolbar are hardly-visible because of the low contrast between the toolbar background and the colour of the icons. I have realized that I am able to fix this. “Just change the colour property of the toolbar in the CSS file” — that’s what I thought in the beginning.
For the text-editing toolbar agarcia used Quill — an API Driven Rich Text Editor. The toolbar component is not created manually by setting up divs and buttons, but with the script where the programmer has to call the quill constructor and initialize the toolbar set according to the schema given in Quill’s Documentation. Knowing this, we understand that we have to make changes in the CSS file instead of adding a style parameter with a colour property to the toolbar container in the index.html file.
Quill provides two themes for their toolbar:
Bubble, which appears on the text when it is selected,
and Snow — a clean, flat toolbar with the set of editing instruments.
Both themes have CSS Libraries.
Remember I thought it will be an easy fix? I was wrong. After spending 2.5 hours on reading the code, Quill’s documentation and CSS, I have finally found the block of CSS code responsible for changing the colour of toolbar icon on hover — but I realized that it can help me only half-way, and adding a code block of this size to the project’s style.css file is not practical. At that moment I realized that there is a second solution — add the contrast by changing the background colour of the toolbar. I have selected the colour, already used in the notepad’s interface for the GitHub-profile link. To make it look more accurate, I also got rid of the white borderline.
body:not(.light) .ql-toolbar
{ background-color: #E74040; }
body:not(.light) .ql-toolbar
{ border: 0px; }
body:not(.light) .ql-container
{border: 0px;}
At the moment of writing this article, my pull request has not yet been reviewed or merged by the owner of the project — but this is the change I made to the Dark Mode of the TinyNote.
Implementing Word-Counting Feature for “My Note Keeper”
For this note-taking application by birtony, I came up with a word-counting feature. I did not want to include any external text-analyzing library and decided to write it myself using JavaScript, DOM manipulation and regular expressions.
It was a long time ago when I used regular expressions (1st-semester Linux Course), so I could not have written this function without reading Mozilla’s Web-Notes on JavaScript Regular Expressions — it was very helpful.
So, how do we count the number of words in the string?
First, we need to get the value of the string and have access to the word-counter display. Editable <div> container has an id “note” and word-counter gets an id “wordcount”, so we can access it with the help of document.querySelector():
// select the note container
var note = document.querySelector(‘#note’);// select the word-counter container
var count = document.querySelector(‘#wordcount’);
What is a word? Let’s assume that word is a number of sequential characters not interrupted by space — it could consist of letters, digits or other characters. We can use a split(‘X‘) function that takes the string and returns an array of strings by separating the input on the given character X. The optimal string for this function will have the following formatting:
“Words separated by single space or other characters.”
//This string has 8 words.
What if the user enters multiple spaces between characters? They have to be ignored. This is where we need regular expressions.
What do we want to do? Find all of the multiple spaces and replace them with a single space. A space character is \s. + wildcard means one or more appearing of the symbol. The regular expression is opened closed by the / character, followed by the flags: g — global search, i — case insensitive, m — multiline search. Regular expression takes the following form:
// Regular Expression
let regExp = /\s+/g;In our case, regular spaces are not the only ones that are used. For strict formatting, HTML has  , which stands for “No-Break Space”. When user inserts multiple spaces in the notepad, HTML will add to the string instead of the first space, then it will add second for the second space, and then will insert a regular space between them as for the third user-inserted space. The system will keep adding no-break spaces, separating them with a regular space for 3rd, 5th, 7th etc. space character.
The string manipulation algorithm will take the following form:
// text-editing algorithm
var string = note.innerHTML.replace(/ +/gi, ‘’)
.trim().replace(/\s+/gi, ‘ ‘).replace(/^\s/gi, ‘’);, where replace(/ +/gi, ‘’) will remove all of the single or more occurrences of no-break spaces, trim() will remove spaces in the beginning and end of the string, replace(/\s+/gi, ‘ ’) will replace all multiple regular space characters with single space characters, and replace(/^\s+/gi, ‘’) will remove first single space character that will be there if the string consists only of space characters, so the counter doesn’t count string of space characters as one word.
All in all, that is how the code looks like:
HTML:
<! — index.html piece -->
<! — Events that make a call to the word-counting function --><div class=”note” id=”note”
contenteditable
onchange=”wordcount()”
onkeypress=”wordcount()”
onkeyup=”wordcount()”
onkeydown=”wordcount()”
onblur=”wordcount()”
onfocus=”wordcount()”></div><! — Word-Counter display container -->
<h5 class=”card-text”
style=”justify-content:left;
margin: 5px 0px 5px 05px”>
Words:
<span id=”wordcount”></span>
</h5>
JavaScript:
// script.js
// wordcount feature
var wordcount = function() { // select the note container
var note = document.querySelector(‘#note’);
// select the word-counter container
var count = document.querySelector(‘#wordcount’); // clear word-counter
count.innerHTML = “”; var words; // text-editing algorithm
var string = note.innerHTML.replace(/ +/gi, ‘’)
.trim().replace(/\s+/gi, ‘ ‘).replace(/^\s/gi, ‘’); // display count
if (string.length == 0)
{words = 0;}
else
{words = string.split(‘ ‘).length;} count.innerHTML =’ ’+ words;
};
If you want to check my Word-Counting feature and contribute to My Note Keeper — go ahead and check out this GitHub repository:
https://github.com/birtony/my-note-keeper
Conclusion
As I said in the beginning, Open-Source Development is a world of contribution, cooperation and union for the great ideas and bright future. It is always great to have a team to work with — but it is thousand times better to have hundreds of people all over the world who are willing to help you with your project — and who need your help too.
And I will be happy to become a part of it.
My GitHub:
