DEV Community: jesusramirezs

“Scroll Restoration”, React Router and my custom solution for React Studyboard

jesusramirezs — Mon, 21 Dec 2020 10:13:03 +0000

I keep working on improvements for React Studyboard

Github repository: https://github.com/jesusramirezs/react-studyboard

I would like to write in this article about:

“scrollRestoration” and React Router.
My solution to resume reading a text at the point where it was last left.

1. “scrollRestoration” and React Router

According to developer.mozilla, “The scrollRestoration property of History interface allows web applications to explicitly set default scroll restoration behavior on history navigation.” (https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration).

This browser feature has raised some debate in the past when using React Router, especially when it comes to unwanted performance. For example, in a SPA (Single Application Page), when we navigate through React Router from one "page" to another, the browser keeps the scroll of the first page on the next one, instead of positioning itself at the beginning of the new page as it would be more logical and natural.

See, for example, the following conversation when some time ago, the problem was detected and where a solution is beginning to emerge:

https://github.com/ReactTraining/react-router/issues/252

There are times when it is desirable to maintain this performance and other times when it is not.

After some time trying to address the issue with partial solutions, officially, React Router has chosen not to offer support to control this property. According to the documentation:

"In earlier versions of React Router we provided out-of-the-box support for scroll restoration and people have been asking for it ever since....Because browsers are starting to handle the “default case” and apps have varying scrolling needs, we don’t ship with default scroll management."

(https://reactrouter.com/web/guides/scroll-restoration)

As a result, when it is desired to dispense with automatic scrolling, especially in SPA's, the developer must adapt his solution, as described in the same guide or examples like this one:

https://spectrum.chat/react/general/handling-scroll-position-on-route-changes~1e897a67-c05f-40c0-946b-d459d93615bf

2. My solution to resume reading a text at the point where it was last left

So, for example, in my case, to prevent this performance in the most reliable way, I have placed in the "header" component the following code to disable the “scrollRestauration” property of “window.history”:

    useEffect(()=>  {
        if ("scrollRestoration" in window.history) {
            window.history.scrollRestoration = "manual"
          }
    },[]);

And for those components where I want the page to be displayed from a scrolling position at the top of the page, I use the following code:

    useEffect(()=>  {
        window.scrollTo(0, 0);
      },[]);

But there is a particular case in which I find it necessary to maintain the browser scroll position when visiting a page for the second time: the article page, which is the essential page in the app. Thus, when I want to resume reading an article, which could be extended, I find it convenient that the browser positions me at the point where I left the reading for the last time, something like a virtual page mark.

I consider this functionality vital since it contributes to significantly improving the app's user experience by maintaining control over the reading and saving the reader time every time he or she returns to any of the articles.

Also, I think it is interesting that the list of articles in a category or section shows the progress made in reading each of them.

In addition, the solution adopted to this problem can be used so that when you click on annotations, the application not only navigates to the article but position us exactly in the paragraph to which it refers.

The solution seems simple; it could store in Redux (the status manager I use in the project) the last scroll position of each article since the last login to the page, reading, for example, the window.pageYOffset property, and when returning to the page, make a scrollTo to the previously stored position.

This window.pageYOffset property is monitored to show a thin reading progress bar at the top of the page.

But this simple solution has some problems:

The app allows you to modify the preferred font used in the articles' text and their size. If these properties are modified between two accesses to the same article, there is a possibility that the position of the scroll will not be correct since the height of each line will probably have changed.
If the author modifies the article's content between two reading sessions, adding new text or images, or something foreseen by future new features, the content is dynamically enriched by new content provided by other readers. Also, the reading position based on an offset will not be valid.
Afterward, it appears to make more sense to mark the last reading position based on the paragraphs visible in the browser at a given time rather than the offset.

In the article.component, the text is divided into “paragraphs” (which may contain text or other content such as images or video).

Each of these paragraphs is managed by TextBlock component (pending renaming to a more appropriate name).

The design decision is because this way, unrelated functionalities are separated, making the code more readable. This TextBlock component deals with things like highlighting text, formatting Markdown, and displaying or editing annotations.

Each TextBlock instance is embedded in a component called VisibilitySensor, provided by the “react-visibility-sensor” package.

This package provides a very useful feature for our purposes: it detects when a component becomes visible or invisible in the browser or inside another component depending on the scroll position.

<VisibilitySensor scrollCheck={true} scrollThrottle={1} partialVisibility={true} onChange={visibilityChange(key)} >

Each time a change occurs in a component's display, we check whether it is due to an upward or downward scroll and thus determine which the first active paragraph on the page is:

    const visibilityChange = (key) => (isVisible) => {


      const previous_scroll = lastScroll.current;
      const new_scroll = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);

      if(new_scroll < previous_scroll) {

        if((!isVisible && new_scroll > previous_scroll) || (isVisible && new_scroll < previous_scroll)) {

          dispatch(updateProgressAtReadingStatus({articleId: article.articleId, progress: calcProgress(), textBlockId: key}));

          lastScrollTime.current = Date.now();
          lastScroll.current = new_scroll;
        }

      }
      lastScroll.current = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);

    }

Then, the identificator of this new active paragraph is sent to Redux:

dispatch(updateProgressAtReadingStatus({articleId: article.articleId, progress: calcProgress(), textBlockId: key}));

And here is the second part of all this. Once we resume reading the article, the first thing we do is reading the first active paragraph:

useSelector(state => selectArticleLastTextBlockId(article.articleId)(state), equality_selector);

And then scroll to the position of that paragraph:

scrollRef.current.scrollIntoView({ behavior: 'smooth', block: 'start'});

Here is a interesting discussión about scrollIntoView:

https://stackoverflow.com/questions/48634459/scrollintoview-block-vs-inline/48635751#48635751

My conclusion is that a seemingly simple feature requires some developmental effort and creativity. Thanks to the numerous components available, it is possible to arrive at acceptable solutions in a short time.

Thanks for reading this article. Any feedback will be greatly appreciated.

Connect with me on Twitter or LinkedIn

React StudyBoard (React, Hooks, Redux...)

jesusramirezs — Tue, 24 Nov 2020 16:53:40 +0000

A React webapp to publish and study extended content in Markdown format organized in articles and categories and allowing annotations.

Github repository: https://github.com/jesusramirezs/react-studyboard
Please submit bug fixes via pull requests & feedback via issues.

Purpose

With this app, I intend to develop an example app by using some of the latest trends in real React app (redux, hooks,...) and that, besides fulfilling an educational function, offers an attractive functionality.

When I thought about developing React StudyBoard, I imagined an app where you could publish extensive articles on a particular study topic and organize them into sections or categories, which would be useful for the study. I want this app to be helpful as an educational and informative app not only for simple reading, and for this, It had to allow:

Using Markdown for more friendly text formatting.
Keeping a record of what has been read so far.
To continue reading a text at the last point where it was left.
To maintain an index of the following readings to be addressed by the student.
Adapting the characteristics of the text to the reader's preferences (font type, size...)
Highlighting important text for the reader.
Adding and organizing annotations (also in Markdown format) to any text within the article.
Annotations must also support uploaded images (for now to Imgur).
Being able to add tags to any annotation.
Editing annotations.
Displaying the annotations made just by moving the cursor over the text without interrupting the reading flow.
Quickly access to a list of all the annotations made in reverse chronological order of editing, from any of the articles, and from them, navigate to the point in the article to which they refer.

This is the first version, and later in this article, I will tell you about the next tasks to be tackled in future versions.

Getting started

To get the frontend running locally:

Clone this repo git clone https://github.com/jesusramirezs/react-studyboard.git
npm install or yarn to install all required dependencies
Optional: Edit the config-data.js file with your Firebase credentials and your Imgur API keys
npm start/ yarn start to start the local server (this project uses create-react-app)
App should now be running on http://localhost:3000/

Featuring

The project makes use of the following:

React Hooks
React Redux
React Suite components
Styled components
Firebase authentication
Markdown-to-jsx

Features

The code is reasonably easy to follow and understand. It is divided into pages and components, each of them in a separate folder; I think they are as simple and decoupled as possible so that we do not add excessive levels to the code. The same has been done with different Redux stores.

All contents: sections and articles are stored in two JSON files, easy to maintain and organize: one for categories and one for articles.

The Markdown formatting is applied using the component Markdown-to-jsx, in its version 6.11.4; I must mention that the last version of this package has generated some errors still to be solved.

This component supports different functions for each of the formats, and specific functions have been implemented for rendering (in text-block.component.jsx) :

paragraph
list elements
titles (h1...h6)

The tag-input component is used to enter tags in the annotation form and unique colors have been set aside for three specific tags so that they are visually easy to identify:

re-read
question
highlight

All standard status management between components in the app is managed through React-Redux, and all access to the standard status is done through selectors.

Redux stores the most varied information:

The visible or hidden state of the side panels
The reading progress point of each article and the last article read.
All content: articles and categories Content of the reading list
All text portions highlighted
Annotations
User preferences (preferred font and size)

The system uses local storage as user data storage, almost everything stored in Redux except the contents themselves.

So far, this could be enough, but obviously, it has its limitations, and in the next version, the app will probably use Firebase as cloud storage.

An authentication mechanism has been implemented through user password and Google Auth but only for educational purposes and to support the cloud storage and sharing of content and annotations between users in a future version.

I am not a graphic designer, so I have tried to keep the style as simple as possible. To do this, I have used:

Tachyons CSS as the main style base.
Styled Components to apply the styles to some of the components.
React Suite for some particular components: drawer, progress bar.

There are still many points of improvement and evolution in the project:

From the functional point of view.

Allow highlighting of any word selection, not just whole paragraphs, and allow annotations on them.
Allow the sharing of notes between different students.
Allow several tabs to keep reading several articles at once. Perhaps use a splitter in the reading panel to have two or more articles active.
Improve the management of image uploads to the cloud.
Add night mode for reading.
Filter the side panel annotations according to tags. For example: display only "questions" or "re-readings.
The possibility of publishing your articles (summaries, reflections) and dynamically integrating notes on other articles into the content.
The possibility to export/import annotations in the JSON file.

EDIT: Dec 19, 2020

v1.1:

Accomplished: Filter the side panel annotations according to tags. For example: display only "questions" or "re-readings.
Accomplished: Allow highlighting of any word selection, not just whole paragraphs.
Accomplished: Improved behaviour os scroll restoration mechanism.

From the technical point of view.

PropTypes for type verification.
Improve the naming of some components.
Improve the communication mechanism between components, e.g., Article and Annotation Form.
Use a database system for storage of items (instead of JSON files), statuses, and annotations. Perhaps based on Apollo and GraphQL.
Integrate a complete testing system into the project. In-depth performance review.

Credits

All texts have benn generated using https://www.blindtextgenerator.com/

All images come from the initiative Open Access from The Metropolitan Museum of Art:

https://www.metmuseum.org/about-the-met/policies-and-documents/open-access

Thanks for reading this article. Any feedback will be greatly appreciated.

Connect with me on Twitter or LinkedIn

First steps in text processing with NLTK: text tokenization and analysis

jesusramirezs — Tue, 17 Nov 2020 14:49:59 +0000

I have already had the opportunity to talk about NLTK in two of my previous articles (link#1, link#2).

In this article, I would like to review some possibilities of NLTK.

The kind of examples discussed in articles like this one fall under what is called natural language processing (NLP). We can apply these techniques to different categories of texts to obtain very varied results:

Automatic summaries
Sentiment analysis
Keyword extraction for search engines
Content recommendation
Opinion research (in marketplaces, aggregators, etc...)
Offensive language filters
...

NLTK is not the only one package in this field. There are other alternatives to NLTK for these types of tasks, such as:

Apache OpenNLP.
Stanford NLP suite.
Gate NLP library.

To start experimenting, in the first place we will install NLTK from the Python CLI, which is very simple:

pip install nltk

Once the NLTK library is installed, we can install different packages from the Python command-line interface, like the Punkt sentence tokenizer :

import nltk

nltk.download('punkt')

One of the most important things to do before tackling any natural language processing task is "text tokenization". This phase can be critical because otherwise, it will be much more challenging to process the text.

Tokenization, also known as text segmentation or linguistic analysis, consists of conceptually dividing text or text strings into smaller parts such as sentences, words, or symbols. As a result of the tokenization process, we will get a list of tokens.

NLTK includes both a phrase tokenizer and a word tokenizer. A text can be converted into sentences; sentences can be tokenized into words, etc.

We have, for example, this text (from Wikipedia - Stoicism):

para = "Stoicism is a school of Hellenistic philosophy founded by Zeno of Citium in Athens in the early 3rd century BC. It is a philosophy of personal ethics informed by its system of logic and its views on the natural world. According to its teachings, as social beings, the path to eudaimonia (happiness, or blessedness) is found in accepting the moment as it presents itself, by not allowing oneself to be controlled by the desire for pleasure or by the fear of pain, by using one's mind to understand the world and to do one's part in nature's plan, and by working together and treating others fairly and justly."

To perform Tokenizing in Python is simple. We import the NLTK library and precisely the sent_tokenize function that will return a vector with a token for each phrase.

from nltk.tokenize import sent_tokenize

tokenized_l1 = sent_tokenize(para)

print(tokenized_l1)

and we will get the following result:

['Stoicism is a school of Hellenistic philosophy founded by Zeno of Citium in Athens in the early 3rd century BC.', 'It is a philosophy of personal ethics informed by its system of logic and its views on the natural world.', "According to its teachings, as social beings, the path to eudaimonia (happiness, or blessedness) is found in accepting the moment as it presents itself, by not allowing oneself to be controlled by the desire for pleasure or by the fear of pain, by using one's mind to understand the world and to do one's part in nature's plan, and by working together and treating others fairly and justly."]

Likewise, we can tokenize a sentence to obtain a list of words:

from nltk.tokenize import word_tokenize

sentence1 = tokenized_l1[0]

print(word_tokenize(sentence1))

['Stoicism', 'is', 'a', 'school', 'of', 'Hellenistic', 'philosophy', 'founded', 'by', 'Zeno', 'of', 'Citium', 'in', 'Athens', 'in', 'the', 'early', '3rd', 'century', 'BC', '.']

Well, let's do something a little closer to a real case; for example, extract some statistics from an article. We can take the content of the web page and then analyze the text to draw some conclusions from the text.

For this, we can use urllib.request to get the HTML content of our target page:

import urllib.request

response = urllib.request.urlopen('https://en.wikipedia.org/wiki/Stoicism')

html = response.read()

print(html)

and use BeautifulSoup. This is a very useful Python library for extracting data from HTML and XML documents and setting different filtering and noise removal levels. We can extract only the text of the page without HTML markup by using get_text() or a custom solution like in the example code bellow.

pip install beautifulsoup4

from bs4 import BeautifulSoup

soup = BeautifulSoup(html,"html.parser")

title = soup.select("#firstHeading")[0].text

paragraphs = soup.select("p")

intro = '\n'.join([ para.text for para in paragraphs[0:4]])

print(intro)

Finally, we can go on to convert the text obtained into tokens by dividing the text as described above:

tokens = word_tokenize(intro)

print (tokens)

From here, we can apply different tools to “standardize” our token set. For example, to convert all tokens to lowercase:

new_tokens = []
for token in tokens:
    new_token = token.lower()
    new_tokens.append(new_token)
tokens = new_tokens

...remove punctuation:

import re
new_tokens = []
for token in tokens:
    new_token = re.sub(r'[^\w\s]', '', token)
    if new_token != '':
        new_tokens.append(new_token)
tokens = new_tokens

...replace numbers with their textual representation using Inflect, which is a library that generate plurals, singular nouns, ordinals, indefinite articles and convert numbers to words:

pip install inflect

import inflect
p = inflect.engine()
new_tokens = []
for token in tokens:
    if token.isdigit():
        new_token = p.number_to_words(token)
        new_tokens.append(new_token)
    else:
        new_tokens.append(token)
tokens = new_tokens

... and remove stopwords, which are words that don't add significantly any sense to the text.

nltk.download('stopwords')

from nltk.corpus import stopwords

stopwords.words('english')

['i', 'me', 'my', 'myself', 'we', 'our', 'ours', 'ourselves', 'you', "you're", "you've", "you'll", "you'd", 'your', 'yours', 'yourself', 'yourselves', 'he', 'him', 'his', 'himself', 'she', "she's", 'her', 'hers', 'herself', 'it', "it's", 'its', 'itself', 'they', 'them', 'their', 'theirs', 'themselves', 'what', 'which', 'who', 'whom', 'this', 'that', "that'll", 'these', 'those', 'am', 'is', 'are', 'was', 'were', 'be', 'been', 'being', 'have', 'has', 'had', 'having', 'do', 'does', 'did', 'doing', 'a', 'an', 'the', 'and', 'but', 'if', 'or', 'because', 'as', 'until', 'while', 'of', 'at', 'by', 'for', 'with', 'about', 'against', 'between', 'into', 'through', 'during', 'before', 'after', 'above', 'below', 'to', 'from', 'up', 'down', 'in', 'out', 'on', 'off', 'over', 'under', 'again', 'further', 'then', 'once', 'here', 'there', 'when', 'where', 'why', 'how', 'all', 'any', 'both', 'each', 'few', 'more', 'most', 'other', 'some', 'such', 'no', 'nor', 'not', 'only', 'own', 'same', 'so', 'than', 'too', 'very', 's', 't', 'can', 'will', 'just', 'don', "don't", 'should', "should've", 'now', 'd', 'll', 'm', 'o', 're', 've', 'y', 'ain', 'aren', "aren't", 'couldn', "couldn't", 'didn', "didn't", 'doesn', "doesn't", 'hadn', "hadn't", 'hasn', "hasn't", 'haven', "haven't", 'isn', "isn't", 'ma', 'mightn', "mightn't", 'mustn', "mustn't", 'needn', "needn't", 'shan', "shan't", 'shouldn', "shouldn't", 'wasn', "wasn't", 'weren', "weren't", 'won', "won't", 'wouldn', "wouldn't"]

new_tokens = []
for token in tokens:
    if token not in stopwords.words('english'):
        new_tokens.append(token)
tokens = new_tokens

Finally, lemmatisation will allow us to extract the root of each word and thus ignore any inflection (verbal conjugations, plurals...)

from nltk.stem import WordNetLemmatizer 
lemmatizer = WordNetLemmatizer()
lemmas = []
for token in tokens:
    lemma = lemmatizer.lemmatize(token, pos='v')
    lemmas.append(lemma)
tokens = lemmas

Tokenization and lemmatization are techniques widely used by me in my last project.

Once all this standardization process is done, we can move on to simple analysis, for example, calculate the frequency distribution of those tokens using a function in NLTK called FreqDist() that does the job correctly:

freq = nltk.FreqDist(tokens)

for key,val in freq.items():

    print (str(key) + ':' + str(val))

material:1
found:2
ethical:1
phrase:2
present:1
others:1
justly:1
teach:2
athens:1
natural:2
especially:1
corruptions:1
health:1
live:1
believe:1
sufficient:1
emotionally:1
misfortune:1
citium:1
moral:1
behave:1
sage:2
mind:1
everything:1
zeno:1
radical:1
epictetus—emphasized:1
pain:1
pleasure:1
moment:1
blessedness:1
allow:1
hold:1
philosophy:3
also:1
two:1
know:1
rule:1
adiaphora:1
people:1
fear:1
bc:1
use:1
vicious:1
together:1
accord:1
maintain:1
fairly:1
say:1
prohairesis:1
act:1
ethics:3
form:1
work:1
nature:3
would:1
human:1
social:1
wealth:1
stoicism:1
understand:2
three:1
one:5
mean:1
think:2
system:1
best:1
judgment:1
oneself:1
pleasure:1
accept:1
hellenistic:1
school:1
virtue:4
personal:1
person:2
errors:1
century:1
call:1
equally:1
eudaimonia:1
order:1
free:1
find:1
similar:1
destructive:1
calm:1
plan:1
value:1
alongside:1
indication:1
accordance:1
view:2
certain:1
good:3
seneca:1
bad:1
many:1
result:1
consider:1
root:1
belief:1
resilient:1
path:1
truly:1
control:1
include:1
logic:1
early:1
desire:1
world:2
life:1
inform:1
major:1
happiness:2
part:1
tradition:1
though:1
emotions:1
treat:1
since:1
stoics:3
individual:1
aim:1
aristotelian:1
be:2
upon:1
external:1
stoic:3
approach:1

And finally, we can graphically represent the result in this way.

pip install matplotlib

freq.plot(20, cumulative=False)

This first analysis can help us classify a text and determine how to index we could frame the article within a content aggregator.

We can apply formal techniques to this classification, such as a Naive Bayes classifier; most simply, in its "naive" mode, we use the conditional probabilities of the words in a text to determine which category it belongs to. This algorithm is called "naive" because it calculates each word's conditional probabilities separately as if they were independent of each other. Once we have each word's conditional probabilities in a review, we calculate the joint probability of all of them by using a Pi-product to determine the likelihood that it belongs to the category.

I would like to cover a simple example of applying a Naive Bayes classifier in another article.

To finish this article we can tackle an apparently difficult task wich becomes easy to achieve in Python, at least at a first level of approach: sentiment analysis. By using NLTK we can analyze the feeling of each sentence in the article. Sense analysis is a machine learning technique based on natural language processing, aiming to obtain subjective information from a series of texts or documents.

To do this, we must download the next package:

nltk.download('vader_lexicon')

This package implements VADER ( Valence Aware Dictionary for Sentiment Reasoning), a model used for text sentiment analysis that is sensitive to both positive/negative and strength of emotion.

Next, we will cut the text to be analyzed by using a tokenization process that allows us to divide the different sentences of a paragraph, obtaining each one of them separately.

tokenized_text = sent_tokenize(text)

from nltk.sentiment.vader import SentimentIntensityAnalyzer
from nltk import sentiment

text = "The habit of reading is one of the greatest resources of mankind; and we enjoy reading books that belong to us much more than if they are borrowed. A borrowed book is like a guest in the house; it must be treated with punctiliousness, with a certain considerate formality. You must see that it sustains no damage; it must not suffer while under your roof. You cannot leave it carelessly, you cannot mark it, you cannot turn down the pages, you cannot use it familiarly. And then, some day, although this is seldom done, you really ought to return it...

(William Lyon Phelps- The pleasure of Books, from http://www.historyplace.com/speeches/phelps.htm)

...to finally instanciate the sentiment analyzer and apply it to each sentence.

analyzer = SentimentIntensityAnalyzer()

for sentence in tokenized_text:
    print(sentence)
    scores = analyzer.polarity_scores(sentence)
    for key in scores:
        print(key, ': ', scores[key])
        print()

As a result we can examine each of the phrases separately.
These are some example results:

The habit of reading is one of the greatest resources of mankind; and we enjoy reading books that belong to us much more than if they are borrowed.
neg :  0.0

pos :  0.222

neu :  0.778

compound :  0.8126

A borrowed book is like a guest in the house; it must be treated with punctiliousness, with a certain considerate formality.
neg :  0.0

pos :  0.333

neu :  0.667

compound :  0.7579

You must see that it sustains no damage; it must not suffer while under your roof.
neg :  0.254

pos :  0.134

neu :  0.612

compound :  -0.3716

You cannot leave it carelessly, you cannot mark it, you cannot turn down the pages, you cannot use it familiarly.
neg :  0.0

pos :  0.138

neu :  0.862

compound :  0.2235

...

And there is no doubt that in these books you see these men at their best.
neg :  0.215

pos :  0.192

neu :  0.594

compound :  0.128

For each sentence, several different scores are obtained, which we will see in the output a little further down:

neg (negative): to tell us how negative this sentence would be.
neu (neutral): this second value indicates the neutrality of a phrase and a score between zero and one.
pos (positive): Same as the previous ones, but indicating how positive a phrase is.
compound: this is a value between -1 and 1 that indicates at once whether the phrase is positive or negative. Values close to -1 suggest that it is very negative, close to zero would mean that it is neutral, and close to, that it would be very positive.

If you are interested in this field of analysis probably you can find more suitable texts available for sentiment analysis, like political opinions, product reviews... this is just an example.

Thanks for reading this article. If you have any questions, feel free to comment below.

Connect with me on Twitter or LinkedIn

When a technology draws the perfect constellation for your educational project (Django, NLTK...)

jesusramirezs — Mon, 26 Oct 2020 07:34:48 +0000

Each development project is unique, and there are times when the characteristics of a particular technology show up as a perfect constellation. I would love to present my case.

Two years ago, I started developing an educational project called eningles.club of which I am immensely proud and is already working and helping students from different countries.

The objective was initially quite simple: a web tool that would help early English learners to improve their English reading and listening skills.

To do this, I set out to develop a tool that would offer students different activities that would reinforce their vocabulary and grammar before reading well-known stories in English from prestigious publishers that are easy to find in a bookstore.

Image #1: Example activities

Image #2: Grammar activity

The tool is currently available for native Spanish language students, but I would like to extend it to students from anywhere in the world in the future.

Determined to undertake the adventure, I looked for and studied different alternatives in terms of technology.

I raised four fundamental options:

Django / Python + Javascript for the frontend
React / Node
React / Headless CMS (Strapi, Directus ...)
Monolithic CMS (WordPress, Drupal ...)

The second and third options attracted me enormously, but there were good reasons which, like stars of a perfect constellation, led me to choose Django, a framework that I have already covered in a previous article:

Star #1: Django Admin

A large part of the development effort required for an educational application like this would go to the development of a backend to manage the creation and maintenance of very varied content: lessons, readings, grammar exercises, flashcards, multiple-choice exercises, vocabulary pills, and also chain them in "routes" and learning sessions.

Not developing this background would mean having to edit all these contents directly on the database or keeping it in some plain text format following a particular grammar (using the well-known LEX and YACC tools for example). Also, the idea is that in the future other collaborators can contribute content.

Using a Headless CMS seemed viable, but there was a much more powerful option: Django Admin.

Image #3: Django Admin main view

Image #4: Django Admin

Django Admin offers a highly customizable CRUD interface. This interface is automatically generated from the definition of the database data model already written in Python as part of the Django project. To this is added other metadata information that we can contribute. That allows us to make the Django Admin interface more user-friendly (labels, validations, relationships ...) and create more complex tools intended even for other staff users with non-technical profiles.

Image #5: Administration metadata for database model

With this possibility that Django offers me, I cut development time by months because I did not have the time to save in the future in backend maintenance and error correction.

Star #2: Natural language processing with NLTK

My project required developing natural language analysis algorithms to process lots of contents written in English, mainly text and video transcripts.

I needed to extract specially difficult vocabulary according to the different English levels(A1, B1, B2 ...), classify language by level, detect verb conjugations, proper names, and classify the complexity of sentences...

One of the key characteristics is determining how difficult a word is for a English learner depending on the word itself and the context in which it is found.

Based on the facilities that NLTK provides, the algorithms used to analize the vocabulary present in a text are based on different studies:

Research papers from Paul Nation about his work in English language learning and vocabulary coverage in English texts -link-

Resources from the University Centre for Computer Corpus Research on Language at the University of Lancaster -link-

Resources from University of Oxford about researching in English corpora -link-

English Profile from Cambridge University -link-

Image #6: Vocabulary analysis for a given text

Python has excellent natural language processing packages. NLTK is undoubtedly the most important, extremely powerful, but other libraries like TextBlob are especially interesting for specific tasks without conflicting with the use of NLTK.

Image #7: Readability tests code

NLTK also offered me a perfect gift: a compelling interface with WordNet, a huge lexical database in English, something like a complete thesaurus for scientific purposes, organized in semantic sets called synsets.

Image #8: Dictionary and vocabulary manager

Also, its license for use is relatively permissive to use Wordnet to offer an exciting dictionary within my project.

Again a possibility was open to me to cut the development time dramatically.

This project uses a readability test based on different readability studies to classify the complexity of any text and determine how suitable it is for a student. Scores from readability formulas generally correlate highly with the actual readability of a text.

Were readability test comes from?

The US Military took the first step in grading adults in 1917. In 1921 Edward Thorndike tabulated the frequency of difficult words used in general literature, a great step in analyzing texts complexity.

First modern readability tests were developed in the 1930s. The Great Depression sparked investment in adult education. General adult readers in the United States had limited reading ability and many students complained that many books were too difficult to read. These first readability tests were based on sentence length and difficult words.

In 1949 George Kingsley Zipf came up with his study "Human Behavior and The Principle of Least Effort", in which he declared a mathematical relationship between the hard and easy words and its frequency in texts, called Zipf’s Curve.

Later In the 1940s and the 50s, with the birth of modern marketing, several linguists like Rudolf Flesch and Robert Gunning strove to create the easiest and most reliable readability formula. Readability studies became a very competitive field.

Both public (education, military...) and private sectors (publishing, journalism...) needed readability tests to ensure that texts meet a minimum readability requirement. As an example the Texas Department of Insurance has a requirement that all insurance policy documents have a Flesch Reading Ease score of 40 or higher, the reading level of a first-year undergraduate student.

In the 1970s, Flesh published another readability formula with his colleague J Peter Kincaid in partnership with the US Navy: the Flesch Kincaid . After rigorous validation, the formula became US military standard. It also was applied to other sectors, like the insurance industry.

Nowadays there are over 200 readability formulas and readability is a research field in continuous evolution.

Star #3: Choosing PostgreSQL as my database engine

PostgreSQL was shown to me as the perfect option over other options (MySQL, MongoDB ...) for some reasons:

I wanted to manage my Database instance and not a cloud database, and I had previous experience with PostgreSQL.
For some of the features that I planned to offer, I needed the richness SQL offers to execute queries. In many cases, the questions have a certain complexity, involving variable relationships between different data types.
I did not anticipate frequent changes in the data model that would justify a NoSQL model.
PostgreSQL offers adequate mechanisms to scale, if necessary, something that does not concern me for now.

Star #4: The Python ecosystem.

The Django and Python ecosystem is merely unique. You can find a solution to any problem and focus on developing "your idea".

For example, one of the features that it wanted to offer was that the student had access to the pronunciation of any word they were looking for in the dictionary at the click of a button, something similar to what Youglish does.

Image #9: Pronunciation assistant

I needed to be able to access the transcripts of thousands of YouTube videos and to be able to analyze their content to index the appearance of thousands of words from the Wordnet dictionary. I found two beneficial Python tools: youtube2str and Youtube-transcript-API.

But these are not the only libraries/features of Django and Python that helped me in the task and that I would like to comment, something that I think may help others who are considering the development of a similar educational tool:

crispy-forms: rapid form development and Ajax validation

Image #10: Form definition

Django-allauth: sign up, authentication, and user account management

Image #11: Signup section specification (Allauth)

Image #12: Signup and signin page design

Django Mobile: library for the detection of browsers on mobile devices for their differentiated treatment in the templating system
GeoIP2: wrapper for the MaxMind geoip2 Python library
Django-humanize: a series of filters for Django's templating system to make the interface more human
Django templating language and Jinja to define templates in HTML
Django Managements Commands: This is not a library but a Django feature. The management commands are small Python applications that can be invoked from the command line perfectly integrated with the Django project. In the project, I use dozens of them for a multitude of small automation tasks, scrapping-etc ...

Thanks for reading this article. If you have any questions, feel free to comment below.

Connect with me on Twitter or LinkedIn

Creative Common Images from Flickr:
https://www.flickr.com/photos/luisfelipepadilla

A simple experiment with the JSFeat library combining skin and edge detection

jesusramirezs — Wed, 30 Sep 2020 15:55:06 +0000

In a previous article, I briefly reviewed some libraries that allow testing with artificial vision and image processing using Javascript. This is an area that I find a fascinating and funny time.

Among these listed libraries, one, in particular, caught my attention: JSFeat. Besides, it seems to be an entirely complete library for the filters and algorithms that it uses; it has a good documentation and some quite illustrative examples.

I found it very easy to start playing with this library. Each filter or algorithm library is documented with a simple example, and all of them work in real-time with the PC’s webcam.

I find it interesting to try something that I have been thinking about: a simple hand gesture/movement detector. To do this, I will first try to apply a simple previous filtering of the image in real-time to detect the skin tones from the rest of the image's colors.

I know that the result won’t be rigorous, but I don’t try to get a 100% reliable result: it is just a test intended to simplify the initial problem as much as possible.

To start with our experiment, we will only need a local HTTP server, for example, Apache, and copy the code from any of the most basic JSfeat’s examples and take it as a template; for example, we can start from “canny edge demo” that already uses one of the most known edge detection algorithms: “Canny edges”:

https://inspirit.github.io/jsfeat/sample_canny_edge.html

The JSfeat website does not provide the setting up of the examples by cloning, so you will have to set up a “js” folder with the necessary libraries next to your .html or modify the code not to use them:

jsfeat-min.js: Github: https://github.com/inspirit/jsfeat
profiler.js
compatibility.js
bootstrap.js

and in a folder named “css”:

js-feat.css // basic styles
bootstrap.css // bootstrap CSS

There is a bunch of code dedicated to webcam's initialization and a the creation of a web canvas on which the webcam video stream is dumped and the algorithms applied. Let's skip all this to focus on just two functions:

    demo_app()
    tick()

demo_app() is an initialization function while tick() is executed at each frame of video captured from our webcam

At demo_app() we find two important lines of code:

    ctx = canvas.getContext('2d');

The getContext() function returns the drawing context from the HTML canvas - which is an object that has all the drawing properties and functions you use to draw on the canvas.

At each frame we will draw the image captured from our webcam into this drawing context

The second line is:

    img_u8 = new jsfeat.matrix_t(640, 480, jsfeat.U8_t | jsfeat.C1_t);

JSfeat uses a data structure called “matrix_t” which is an array with the parameters of our HTML canvas and the resolution chosen for our capturing video from our webcam, in our case 640 x 480 pixels. In this matrix, the edge detection algorithm will be applied once we have filtered the skin tones.

You need to initialize our matrix with the number of channels to be used, and the type of data that represent each pixel, in our case, “single-channel unsigned char” because once we filter the skin of the rest of the image, we’ll apply edge detection to a monochrome image result of the “grayscale” function.

It is important to note that the skin pre-filtering will not be performed using any JSfeat’s specific algorithm but a function programmed from scratch and which this data structure “img_u8” is not involved.

This function traverses an array of data “RGBA”, where each pixel is represented by four bytes: Red, Green, Blue color components and Alpha channel.

To determine whether or not a pixel corresponds to skin in the image, we previously convert the color in RGB format to HSV format using the following function:

    function rgb2hsv(r, g, b) {
                let rabs, gabs, babs, rr, gg, bb, h, s, v, diff, diffc, percentRoundFn;
                rabs = r / 255;
                gabs = g / 255;
                babs = b / 255;
                v = Math.max(rabs, gabs, babs),
                    diff = v - Math.min(rabs, gabs, babs);
                diffc = c => (v - c) / 6 / diff + 1 / 2;
                percentRoundFn = num => Math.round(num * 100) / 100;
                if (diff == 0) {
                    h = s = 0;
                } else {
                    s = diff / v;
                    rr = diffc(rabs);
                    gg = diffc(gabs);
                    bb = diffc(babs);

                    if (rabs === v) {
                        h = bb - gg;
                    } else if (gabs === v) {
                        h = (1 / 3) + rr - bb;
                    } else if (babs === v) {
                        h = (2 / 3) + gg - rr;
                    }
                    if (h < 0) {
                        h += 1;
                    } else if (h > 1) {
                        h -= 1;
                    }
                }
                return {
                    h: Math.round(h * 360),
                    s: percentRoundFn(s * 100),
                    v: percentRoundFn(v * 100)
                };
            }

Next we use the algorithm proposed by the following paper, were are put the results of analyzing the data set "Pratheepan dataset for human skin detection":

https://arxiv.org/ftp/arxiv/papers/1708/1708.02694.pdf

This simple algorithm is passed over the data set obtained from the initialized canvas line in our HTML document:

    function filterSkin(data) {

        for (var i = 0; i < data.length; i += 4) {

            var hsv = rgb2hsv(data[i], data[i + 1], data[i + 2]);

            if (!(((0.0 <= hsv.h && hsv.h <= 50.0)) && 23 <= hsv.s && hsv.s <= 68  &&
                data[i] > 95 && data[i + 1] > 40 && data[i + 2] > 20 && data[i] > data[i + 1] &&
                data[i] > data[i + 2] && (data[i] - data[i + 1]) > 15 && data[i + 3] > 15) ) {

                data[i] = 0;
                data[i + 1] = 0;
                data[i + 2] = 0;
            }


        }
    }

So final data flow in the tick function is:

        // the frame is drawn from the video stream into the 2D context of the canvas 
        ctx.drawImage(video, 0, 0, 640, 480);

        // we get the image data (matrix+metadata) from the 2D context
        var imageData = ctx.getImageData(0, 0, 640, 480);

        // the image data matrix is passed to the Skin Filtering function
        filterSkin(imageData.data);   

        // the new image content is passed to grayscale function. The result is a one byte per pixel image
        jsfeat.imgproc.grayscale(imageData.data, 640, 480, img_u8);

        // lets apply some gaussian blur to reduce noise
        jsfeat.imgproc.gaussian_blur(img_u8, img_u8, 4, 0);

        // the monochrome image is passed to canny edges algorithm
        jsfeat.imgproc.canny(img_u8, img_u8,35, 40);

I would like to continue with these experiments and see how far I can go.

Thanks for reading this article. Any feedback will be greatly appreciated.

Connect with me on Twitter or LinkedIn

Why is worth considering Django for your web project in 2020?

jesusramirezs — Wed, 16 Sep 2020 17:16:13 +0000

Web frameworks abstract the common aspects of building web sites and APIs and allow you to build solid applications with less effort.

I’m confident that Django will be one of the major players in the future of web development and it deserves to be considered.

In these days when Javascript frameworks seem to be the way to go going forward and all the focus is put on frontend libraries and Single Page Applications, I would like to give some reasons to still consider Python web development with Django, an impressive backend framework.

I think that developers should always be open minded and consider the best solution for concrete problems, not only following the last trend but taking into account different approaches. That is why I thought this article could be a little reminder.

Open source

Django is open source and it is maintained by the Django software foundation, an independent Non-Profit 501(c)(3), focused on promoting, supporting and advancing this framework.

Productivity

Django was designed to help build software (not only dynamic web apps) as quickly as possible. It has a well-deserved reputation for being highly productive.

Django will let you create a complete website or API from scratch in short time span so it has become a strong technological foundation for lots of companies.

Python is an interpreted, object-oriented, dynamic language and it is considered one of the most readable programming languages which has greatly contributed to its popularity.

Popularity

First, Django is built on Python which is one of the most popular languages. According to TIOBE, Python is ranked in third position in the list of most popular programming languages. Therefore you will find that the ecosystem and the community is huge.

This also means that there are more developers available that could fit your needs when you decide to expand your team and start hiring.

Talking about popularity, Django is considered the most popular Python framework, followed by Pyramid, and Flask and according to Statista, in 2020 Django is ranking among the most used web frameworks https://www.statista.com/statistics/1124699/worldwide-developer-survey-most-used-frameworks-web/

Companies like Instagram, Pinterest, Disqus, The Washington Post, Bitbucket, Udemy and Mozilla use Django in their production websites.

Documentation

The documentation is one of the strong points of Django. In my honest opinion it is really excellent and instructive. In fact most Django developers learn Django from official tutorials. It is thorough, cross-referenced and well versioned and it covers all the Django features in a very detailed way.

Tutorials, reference guides, how-to articles and recipes provide a comprehensive and deeply view of the framework and describe how it works and how to use it

Release process

The release process is very well documented and reflects the extreme care that Django Project puts on satisfying actual industry development cycles, by smoothing changes between versions as much as possible.

According to Django’s website: “The plan is to have a new feature release every 8 months and a new long-term support release (LTS) every 2 years. LTS releases are supported with security updates for 3 years.”

Batteries included

Django’s batteries included philosophy means that the framework has everything necessary to develop a complete web application. It lets you focus on your business logic.

Django has lots of built-in modules and open-source packages to create anything from scratch very easily and without reinventing the wheel. There are literally thousands of high quality 3rd party libraries that can help accelerate your development.

Some examples:

Requests - HTTP client
Django-Rest-Framework - ReST API endpoint
pytz - Timezone support
Pillow - Image Manipulation
django-templated-email - css in mail templates
django-social-auth - oauth autentication

...and many more...

Security

Django is one of the most secure web frameworks.

It is implemented in Python, which has excellent security track record.

Furthermore, Django was also designed with security in mind. The security mechanisms already developed in Django can prevent your website or app from most of the attacks like – SQL Injection, XSS, CSRF, Clickjacking, and many more.

The ORM

Are you thinking of writing a database middleware by yourself?

Django comes with ORM

The ORM (object-relational mapping ) is an abstraction layer between the database and your web application.

It is compatible with most major SQL databases and makes possible, thanks to its powerful API, to accessing and maintaining your data from python code, not SQL.

The key here is that you won’t code using SQL sentences but an abstraction that supports any SQL database.

This abstraction provides a declarative model to describe your schema and common operators to perform any kind of query you need.

Anyway, you can still use SQL if you want.

ORM has core support for mysql, mariadb, postgresql, oracle and sqllite and works with third party packages to support other database systems like Microsoft SQL Server or IBM DB2 among others.

Migrations

It's difficult to imagine a project where data model doesn´t change throughout development or production stages.

Migrations is a very unique feature of Django. It detects changes in your data model declarations and generates automatically SQL sentences to adapt the database schema to them.

It is also able to generate "data migrations" to apply transformations to data.

Admin interface

An administration backend is a must have for any project and Django has done a great job with the admin interface.

Django provides a Built-in admin panel: a custom and extendable admin panel by default. This admin panel is highly configurable and it can be a great interface for your staff in order to maintain data. You can even use themes to customize the appearance to your liking.

SEO-friendly development

There are lots of tools Django provides to assist you with SEO such as the Django SEO framework, django-robots, the sitemap framework, the redirects app...

Developers can also reduce page size and loading time by compressing CSS and JavaScript and using cached templates.

There is much more to write about Django. I will be very pleased to write more concrete articles about features/libraries I have experimented with in some of my projects. For example I would like to write about scalability in Django in another article.

If you have any questions, feel free to comment below.

Connect with me on Twitter or LinkedIn

Some interesting Javascript libraries for image processing and computer vision.

jesusramirezs — Sun, 06 Sep 2020 15:58:36 +0000

For the past two months, I've been doing some research in the field of computer vision on the web.

Today’s Javascript implementations are really fast, and this fact has allowed that some computationally intensive tasks, that were reserved to other languages and platforms just a few years ago, are now feasible for web browsers or Node.js.

So if you are a Javascript developer interested in computer vision you are lucky.

First of all we must differentiate computer vision from image processing. Some of the Javascript libraries in this article are in fact just image processing libraries. Performing computer vision requires more complex and sophisticated algorithms and techniques.

Image processing makes an extensive usage of maths and algorithms to extract important image features. Computer vision uses the power of image processing along with other techniques (decision trees, Bayes classifiers, deep neural networks...) in order to recognize objects or categorize images.

Computer Vision tries to do what a human brain does when it recognizes shapes, objects or situations in an image while Image processing is mainly focused on processing raw images, making them optimal for other tasks (noise reduction for example) and extracting key features.

Some Javascript computer vision libraries like tracking.js or handtrack.js are very specialized in their scope , trying to solve how to detect concrete kind of “objects” like faces, eyes, hands, etcetera. These libraries allow you to use ready-to-go systems to perform actual computer vision tasks. Others, like Opencv4nodejs / OpenCV aims to provide more general systems / frameworks that can help to solve a wider range of computer vision problems.

Here are some of the libraries that I found specially interesting in the field of image processing and computer vision, all of them open source.

GammaCV

WebGL accelerated computer vision library. It uses a data flow paradigm to create and run graphs on the GPU. This is a very compact library: weights just 32.5K minimized.

In addition to the most common algorithms (grayscaling, color segmentation…) it implements some other more sophisticated algorithms like Canny Edges, Sobel operator and lines detections, but it also lacks of important feature extraction algorithms like FAST or ORB.

Website: https://gammacv.com

github repository: https://github.com/PeculiarVentures/GammaCV

Opencv4nodejs

Opencv4nodejs is not exactly a pure Javascript library but a npm package that provides Node.js bindings to OpenCV through an asynchronous API. It supports Open CV 3 and Open CV 4, so it brings us all the performance benefits of the native OpenCV library to your Node.js application and allows to easily implement multithreaded CV tasks via Promises. It sound really great.

OpenCV (Open Source Computer Vision Library) is a library of programming functions mainly aimed at real-time computer vision.

If execution in the browser is not an important requirement, Opencv4nodejs is probably the most interesting option given the performance and maturity of OpenCV.

Github repository: https://github.com/justadudewhohacks/opencv4nodejs/

OpenCV.js

If you are looking for a 100% browser solution OpenCV.js offers a different approach. OpenCV.js offers JavaScript bindings for a subset of the OpenCV library, implemented in WebAssembly.

You can't expect OpenCV.js to perform all the things you can do with OpenCV using C or Python or even Opencv4nodejs. Documentation is not that good either.

An additional problem to take into account is the size of the library itself, 2MB, which doesn’t make it very appropriate to all networks / devices.

To be clear, OpenCV.js is a really interesting Webassembly implementation but, in my opinion, probably you can find better alternatives depending on the kind of task you are trying to achieve.

Website: https://docs.opencv.org/3.4/df/df7/tutorial_js_table_of_contents_setup.htmlhttps://docs.opencv.org/master/d5/d10/tutorial_js_root.html

MarvinJ

MarvinJ is a pure javascript image processing library. It derives from Marvin Framework, a Java cross-platform image processing framework.

MarvinJ provides a set of algorithms and filters (Gaussian, emboss, grayScale, thresholding…) that could be wide enough for your purposes, but as it happens in the case of GammaCV, it lacks of feature extraction algorithms. I could only find the Prewitt edge filter, which is not one exactly one of the most used.

Website: http://www.marvinj.org/en/index.html
Github repository: https://github.com/gabrielarchanjo/marvinj

tracking.js

This library brings some well-known image processing algorithms (gaussian blur, gray scale, convolution...) along with various computer vision algorithms to JavaScript. It can perform color tracking, face detection and feature detection. It is well-documented and the examples in the website are very illustrative.

It is very easy to implement color tracking, face detection (not recognition) or eye tracking from video or webcam. Tracking.js also provides a simple framework to implement your own object tracking algorithm. Of course it comes with some filters and feature extraction tools like FAST, BRIEF.

Website: http://trackingjs.com/
Github repository: https://github.com/eduardolundgren/tracking.js/

jsfeat

jsfeat has a rich and varied feature set to implement image processing in any browser. It can perform tasks such as: edge detection, image processing (grayscale, blur, etc.), corner detection, object detection, optical flow detection, etc...

This library is very lightweight (23 kB) and really fast, with very good performance on desktop computers or even mobile devices. In its website you can find lots of real time demos and examples using your webcam (webRTC required) so you can check the resulting framerate in all of them.

JSFeat documentation is very good. Of course this library include basic filters and algorithms (grayscale, derivatives, box-blur, resample, gaussian blur, equalize histogram) but also more advanced operations like:

Canny edges
Fast Corners feature detector
Lucas-Kanade optical flow
HAAR object detector
BBF object detector

which can be considered as advanced feature extractors.

Website: http://inspirit.github.io/jsfeat/
Github repository: https://github.com/inspirit/jsfeat

In a next article I will show some little experiment using this library.

PoseNet

A machine learning model, built on Tensorflow.js, which allows for real-time human pose estimation in the browser.

PoseNet can be used to estimate either a single pose or multiple poses, meaning there is a version of the algorithm that can detect only one person in an image/video and one version that can detect multiple persons in an image/video.

https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-tensorflow-js-7dd0bc881cd5

As you can see there are some interesting options if you don’t want to start coding your image processing system from scratch. if you are planning to learn about computer vision I encourage you to start experimenting with them.

And that is all!. Thanks for reading this is my first article. Hope you found it useful. I look forward to hear any feedback or suggestion.

Connect with me on Twitter or LinkedIn