MaajReedr part 1

For the first day I decided to “cheat” a little bit since it is a quite complicated project which I divided it into two, possibly three, small projects. The big project is a RSS reader for my Raspberry Pi with a recommendation system based on content-based filtering. I use node.js and MongoDB on back-end and nginx as a front-end.

Today’s main task was to create a parser for RSS feeds which I was unable to do with node.js’ external XML libraries. Secondary task was to go as far as possible.

I was able to finish main task with enough time to do a base work for interacting with the database, the only part of this project I have never dealt before, I mean MongoDB, I’ve dealt with several SQL databases before. I also did some work with node.js library Natural which I use for tokenization of either the description or the content of the post.

When it comes to RSS I decided not use all tags there are available but I used only bare minimum. In the future I plan to use atom features, such as updatePeriod and updateFrequency, but that’ll be sometime in the future when I tweak recommendation algorithm and user interface. It is not my top priority at the moment.

Tomorrow I plan to debug database which I was unable to do because I was away today from my working computer, to create user interface and rewrite and update recommendation algorithm from my own plugin for Mozilla Thunderbird which uses jQuery and underscore.js which provides functional helpers for JavaScript.

The pronunciation of this project’s name was ‘My Reader’, Czenglish, but I use ‘Maaj Reedr’ all the time.

New beginning

After four and half years at the university I am no longer a student. First three years were hard and most of classmates didn’t make it to the other side, didn’t graduate. It took heavy toll on me. There were many sleepless nights due to schoolwork and a-hole students who lived in rooms next to mine. There were new challenges which arise always when a major change in the system occurs. We were in the first run of a new set of study programs. It was awful but it was worth it.

After I earned my bachelor’s degree I tried to slightly change my career path. In the hindsight I was too conservative. Going from a border between computer science and electrical engineering to pure computer science is objectively a sound strategy but not subjectively. I consulted with several people which is objectively also a good idea but subjectively it depends on who are the people one consults with. I didn’t have a lucky hand when I chose people around me.

I knew that the mix I studied as an undergrad was not something I wanted to do in the long-term and I knew I couldn’t voice the other issue why I wanted and needed a course change quite desperately. I was stressed out and wanted to make every year count and also change my pace of life. I didn’t do it because I have thought that people with more life experience know better than I do. Now I know it might not be true.

I was stressed out because of school work and a lack of quiet spaces where one could work on them. One person told me that I will get used to it. I never did.

At this point have two choices I can make, doing nothing is not an option. I can take conservative path and start looking for a job. Or I can do what I do best: make a job while working alone. In order to do either of both I’ll need some portfolio of what I can do. Therefore in next 60 days I will do 60 small to medium-sized projects and then write about them in posts of 200 to 400 words. Starting today.

Learning JavaScript part 4 Objects part 2

Note: By mistake I set publish date to November, silly me =(

Functions

Function is usually a named block of code which performs a task or calculates a value and which is declared by keyword function . Special type of function without return value is called a procedure. Function defined inside an object is usually referred as a method.

Function is declared by keyword function which is followed by

  • function’s name
  • list of arguments in parentheses and separated by ‘,’ (comma)
  • statement(s) in curly brackets

In Example 1 we pass an argument number  and the we use that argument as a return value through keyword return .

Functions, usually procedures, can modify variables inside it’s scope.

At this point I’ll try to explain what is the scope. It is a space in code where certain variable exists. In Example 2 the variable  a  exists globally compared to

locally  and  b  which are defined only inside the function test and can’t be accessed from outside the function.

In Example 2 we can also see usage of a function on line 6. Definition of the function on line 2 does nothing on its own. Probably the best analogy for function from “real” world is a hammer in a drawer. We have it there hidden but until we use it it does nothing.

When we are at it I should mention a term closures which is a powerful feature of JavaScript. It means that you can nest functions and the inner function has access to all variables in the outer function. But it is not vice versa, outer function cannot access inner function’s variables.

In this simple case we called inner function to return variable which is defined in outer function. Closures can be more powerful than as shown in Example 4:

In last two examples I used what is called an anonymous function. This type of function doesn’t have a name and can be accessed only locally.

When we defined local variable with the same name as some global variable then we won’t be able to access the global one and we will only work with the local one. In other languages there is an easy way but in JavaScript there is a major pitfall when it comes to keyword this . Because it doesn’t depend on where it is defined but rather where the function is called. Therefore following Example may or may not always work:

 Argument object

An interesting feature is an array-like object arguments . It can be iterated through in a for cycle but it doesn’t have all array manipulation methods.

 Function object

Function object is a special JavaScript object which specifies a string of code to be compiled as a function.

Predefined function

  • eval
    • evaluates a string of JavaScript code
  • isFinite
    • returns false if an argument is not a number (NaN), positive or negative infinity
  • isNan
    • tests if argument is not a number
  • parseInt, parseFloat
    • parses a number out of string until first non-numerical character except for ‘.’ for float is found
    • if a first character in string is a letter it returns NaN value

Conclusion

Today we’ve looked at functions. We’ve learned about scope and closures. Next time we’ll start finally defining our own objects.

Note

An interesting post about closures.

Learning JavaScript part 3 Objects part 1

Note: As you can see this post is part 1 of a sub-series about objects and object model in JavaScript.

Even though I used object-oriented programming (OOP) paradigm countless times in the past JavaScript’s object model is at the moment a bit unclear. But before we dive into creating our own objects let’s learn the basics with predefined ones.

Note: Some parts will be explained later because they might be confusing at a time.

Arrays

In general arrays are indexed and/or named sets of values usually of one data type. I use this definition because that is what I am used to from writing code in C-like languages. But JavaScript unlike Java is weak typed language and doesn’t have an explicit arrays data type.

Also unlike Java in JavaScript an array is a predefined object which can be created in three different ways:

First two cases use directly the Array object and third uses simple enumeration of elements inside square brackets.

As in other languages it is possible to create uninitialized, elements have default values, array of specified length:

JavaScript uses numbers for indexing arrays and first element has index 0 (zero).

In Example 4 we create a new array and begin to populate it with elements starting at position 0.  length  is a property of object Array. In next example we’ll see similar code:

Example 5 produces different result. It is because  length ‘s value is implicitly defined as highest index plus one. But as we’ve seen in Example 2 it can be set to specific value.

Another thing I’d like to mention about populating arrays is that one can assign elements of various data types to different positions in the array:

I advise against it.[ref]Remember that you’ll have to write more code which detects types of values and comments explaining structure of said array. Respect that coder should write readable code for other not just for themself.[/ref] When I need to store different data types together I rather use JSON or objects defined by myself.

Array methods

JavaScript provides several handy methods I didn’t know about and a lot I used before. Here is a list of those I have found interesting:

  • concat()
    • turns two arrays into one

 

  • join(deliminator = “,”)
    • joins all elements into a string separated by deliminator

 

  • push() and pop()
    • work as when one works with stack
  • sort()
    • sorts array with default algorithm or user defined algorithm pass as a callback function

 

  • every(callback[ref]callback is a function which you can call when ever you execute some other function or method.[/ref]) and some(callback)
    • I haven’t used these functions yet but they’ll come handy one day. They return true if all/at least one gives true value from call back.

At this point I would like to go to loops for a bit. There are two forms of for  loop

for…in

Iterates a variable over all properties in an object

This loop is not recommended for iteration over the Array object because we assign variable a name of the property and then we have to access it again inside the loop.

for each…in

This loop is better suited for iteration over arrays because it iterates over property value and not names.

I am mentioning these loops here because Array object has method  forEach(callback)  which is a part of JavaScript’s functional programming traits. And I didn’t want it far away from  for each...in .

Conclusion

I left out multidimensional arrays simply because it is an array of arrays. That’s the only reason. In next part we’ll dig into  Function  object.

Learning JavaScript part 2

Computers in the past were used mainly for calculations. But as demands grew programmers needed to use more sophisticated tools to control execution flow. First we’ll take a look control structures and in second half at loops.

Control structures

If…else

The simplest control structure is if (exp) . This statement will allow execution of first statement or group of statements in curly brackets (braces) if expression exp is  true .

More complex form of if  statement is combination of if...else which will execute statement(s) depending on expression behind if .

It is also possible to put several if  statements in a cascade:

Switch

When I was beginning to learn programming at high school, we learned Pascal then, I feared this statement because it never worked as I needed. Therefore my first programs were made using cascades of if s. Not the most elegant way of coding but brute force works until something breaks. With heavy usage of if cascades it is usually readability of mine/yours/someone else’ code.

Switch is a simple way how to execute statements according to expression in the switch  statement.

In the example 4 we have rewritten if  cascade from Example 3 to a switch  statement. We have to use default  case for the moment when expression gives us different value than 1 or 2. It’s a matter of safety.[ref]Do no harm! Unless you are programming a missile or creating new replicators[/ref]

break  statement is not mandatory in this control structure. But you’ll have to use it when you want to execute only certain set of statement per case .

break  statement is used also in loops.

Loops

for loop

Loops in general are used when we need to repeat some action more than once in a row. There are two types of loops. Ones where we know how many iterations will be done and ones without a known number of iterations. for  loop belongs to the former category. Most common syntax for this loop is following:

Parameters for the for  loop are initial state, exit condition (i. e. when the loop can be executed) and what should be done after each iteration.

 while loop

This loop belongs to the latter group where we know only exit condition. Therefore it has much simpler syntax compared to for  loop.

Certain modification to a  while  loop is  do ... while  . The only different except the keyword do  is that the latter loop will execute at least once.

Warning: Some languages, let’s not mention Pascal, work strangle with this loop. Logic states that this will work as log as exp is true. But in Pascal it works as long as !exp is true.

Extra: while  loop can be rewritten as a for  loop:

break statement

This statement is used whenever programmer needs to terminate switch statement or any loop immediately.

 continue statement

continue  statement is from my point of view an extension of break  statement because it breaks current iteration and restarts whole loop.

Example how it works:

Conclusion

In this post we have seen control structures  if ... else and  switch . We’ve talked about  for  and  while  loops. Those two are not the only loops you can use but  for ... in  and  for ... each  are more complicated and I think they should be explained in the post about arrays which is by coincidence next post.

Learning JavaScript part 1

Motivation

I first met JavaScript more than ten years ago. I didn’t see its purpose except for simple effects, such as hiding elements, showing current time or number of visitors. The best things, from my point of view, were made in Flash. And let’s not forget that then JavaScript was recommended to be blocked. Continue reading “Learning JavaScript part 1”

Making blog: Intro, wireframes & design

Intro

I have been on and off blogging on this address for some time, mostly it was off. And I think it is time restart blogging. First of all I want to announce that I will blog every Monday starting today and may be some Thursdays too. On Mondays I will blog mostly about Web. Which means that for next couple of weeks I will publish posts about redesigning my own blog. At the end of this series will be a documented process from wireframes through design and static HTML code to WordPress theme.

Wireframes

This website is only a blog therefor I wireframed three most important pages: front page, post and search page. With this attitude I am probably shooting myself into my leg but this is my regular attitude, thinking in big picture first and finalizing details later.

First wireframe I made is front page. It contains header space, menu and footer which are common for all pages. Front page has three specific features. Most dominant one is an excerpt from Featured article which takes whole width of the page.

Below the excerpt are sidebar on the right side and blog excerpts of older posts on left side.

Front page wireframe

The second one is a post wireframe which is composed of post block and sidebar block keeping the same theme as on front page.

post wireframe

To compose search page I used post page as template. It contains simple search form and results are list of titles of posts.

Search wireframe

 Design

Previous designs I did for this blog were more skeuomorphic. But this time I am thinking about something more minimalistic and definitely not skeuomorphic. As an example is one of previous prototypes.

Old Blog on a paper prototype
Old Blog on a paper prototype

Here are six pages of my new planned design:

404 page archive front-page post quote search

This is all for this Monday. Criticism is welcome.