Plan and done for February-19-2018

What will I learn today?

FreeCodeCamp projects: TicTacToe - start coding.

Done

TicTacToe app

Challenges

  1. How to implement game engine - what is the algorithm inside it?
  2. What is a winning in terms of algorithmical calculation - how to calculate that I have winning condition on the board?
  3. How to find which player's turn next?
  4. What is 'empty' value in an Array generated by new Array(number)?
  5. After implementation of minimax I've found myself with an utility value but without moves - how could I add to minimax return any sugestions on the next move?
  6. How to pass a parameter to an event callback function?
  7. How to make the engine work in async with UI and prevent itching in a player interaction with the game?
  8. How to restart the game after we've got either winning or draw conditions?

Solutions

  1. Algo - minimax as it described in the Wiki page. Another explanations are at Youtube - academic, less formal.

  2. SO gives the algorithm to estimate an answer. I have alternative approach - find masks which represent winning, transform board into binary representation and apply mask to it. If result is the same as mask applied - here's winning position. The question: what is efficiency for each approach? For SO algo the complexity is O(n), n - is dimension of the board. For my approach - O(n^2 + n).

  3. I can track the current player or just get it from the board state. I'll use reduce for it: array.reduce((res,elm) => elm ? res + 1 : res,0).

  4. Unbelievably long search why my toString didn't work the right way - it just silently swallowed empty values. Here is a good snippet to detect empty values in Array.

  5. I shouldn't - I've implemented the separate chooseMove() function where I initialize all available moves with their utility values and than I just choose the best or any depending whether utility equal for multiple values or not.

  6. We can either bind this with additional paramenter to the function - take a look here. I've tried to use an arrow function as a callback, but it prevents me from removing listener down the road. Final approach is to make cells distinguishable by id and communicate through the DOM:

    boardCells.forEach((cell, ndx) =>
  cell.addEventListener('click', e => this.handleBoardClick(e, ndx)),
);

  7. The broad article states that there are two available options: split intensive function into pieces and run every along with browser animation frames routine or use WebWorkers. As the MDN article says:

    The worker thread can perform tasks without interfering with the user interface.

    I should try the approach, but later, when all bugs will be fixed and the game will be ready. And I've found another option - Web Animation API.

  8. I've implemented it as reinitialization of the whole application - the same routine which is called once an app starts. But here I've encountered another problem - multiple event handler calls and it escalates with each actual trigger. Looks like I add more and more identical handlers with each restart.

    I've solved it by light reengineering the code: I don't need to reinitialize the whole app on reset, just draw the clear board and add all event listeners;

Plan and done for February-05-2018

What will I learn today?

FreeCodeCamp projects: Weather - fix error with unreacheble host for ip resolution; Pomodoro - start coding.

Done

Pomodoro app

Challenges

  • I want the UI be with a circular control element, but how to design <input type='range'>

Solutions

  1. Angular-input to the rescue - https://github.com/andrejewski/angle-input.
  2. Morphing play/pause button - https://css-tricks.com/making-pure-css-playpause-button/.
  3. Theming with CSS variables - https://alligator.io/css/theming-custom-properties/.

Plan and done for January-29-2018

What will I learn today?

FreeCodeCamp projects: Weather - fix error with unreacheble host for ip resolution; Pomodoro - start coding.

Done

While I was editing my application to the LEAP project I found that WeatherNow app stoped working on my laptop. After light research (developer tools -> console and network tabs) I found the reason. The resource I've used for retrieving geolocation data based on my IP-address started responding with error message.

The first impulse was to replace current resource with another one. I checked for available resources and found a bunch here - https://stackoverflow.com/a/35123097/2255031. I payed attention to the list of resources which were available before but are down now. The most optimal and natural way is to add many resources to the app and then just request location from all of them and work with the first available. But how to get data from first successful promise resolved if we have multiple resources? Here is elegant solution from SO - https://stackoverflow.com/a/37235274/2255031:

function oneSuccess(promises){
  return Promise.all(promises.map(p => {
    // If a request fails, count that as a resolution so it will keep
    // waiting for other possible successes. If a request succeeds,
    // treat it as a rejection so Promise.all immediately bails out.
    return p.then(
      val => Promise.reject(val),
      err => Promise.resolve(err)
    );
  )).then(
    // If '.all' resolved, we've just got an array of errors.
    errors => Promise.reject(errors),
    // If '.all' rejected, we've got the result we wanted.
    val => Promise.resolve(val)
  );
}

Plan and done for January-28-2018

What will I learn today?

Application to Microsoft LEAP program. FreeCodeCamp project: Pomodoro.

Done

Unrelated How to copy any file content to clipboard in MacOS:

$ cat filename | pbcopy

Why are you interested in programming?

Improving and optimization are my core values and I always seek for ways to make things work better, more smooth, more steady, being more reliable. On the other hand, programming is the fastest way to interact with "reality" in a creative way, even if such reality is totally constructed. This form of authoring "reality" is like the digital photography - you got the picture exactly at the time when it was taken and always have a freedom to immediately continue your work to get the result you want. And the whole structure of a software implementation consists of the steps of continuous approvement and optimization: you prototype, create the first approach, think what could work better or could be implemented in a more efficient way.

Programming is like possessing a supernatural power of creating your own tools to test how the constructed "reality" works. Moreover, now I see the code as the means by which we can optimize, tweak the reality around us to be sometimes more exciting, sometimes more supportive, more encouraging for new ways of thinking and exploration.

I hardly tolerate unfinished tasks and in coding, I know there are always ways to finish the work in the way which is appropriate for me. If I work on my personal project it's always the matter of my own learning capacity and it lays in a circle of my personal responsibility. It's my work to design and implement a solution in my own unique way.

If we switch to a teamwork there are distinct parts of the code I'm responsible for. I'm a visual thinker and I adore to draw boxes and connect them with arrows. I like to create a visual representation of data and execution flows of a code. It helps me better understand what's going on inside an app or how to organize flows more efficiently. And it let me illustrate my ideas and present them to my team in the most expressive way. Add here a communicative function of a code and we've got the most effective way to share thoughts with the people who think alike and to get a feedback to learn what could be improved.

In high school, I was interested in computers and principles behind them working. At my last workplace, I was responsible for providing stable and efficient work of fintech's back-office and implementation of settlement modules under the company's projects. I've been devoted to the gradual improvement of surrounding world since my school years, and programming gives me the freedom and opportunity to keep going on this path.

What have you done to expose yourself to programming so far?

I worked with all kinds of data handling for the last 10 years - generation, transformation, routing - in different roles for a fintech company. I worked as a data engineer, a database application developer, a team-lead and for the last couple of years as a project manager and a solution architect. I used to work with multimillion transaction datasets providing financial and informational reports, revealing patterns of customer behavior and presenting data flows and processing cycles on real-time dashboards. And all my job activities were done by using different kinds of programming languages: I used SQL to communicate with Oracle or MS SQL Server to transform and extract data for reports; Python with cluster analysis to form customers groups; SQL, shell-scripts, and JavaScript/.NET to present data on dashboards.

I've got training experience both as an author of training materials and as an instructor for new employees and internal teams. I established a company's knowledge base as a single starting point of entry to get acquaintance with terms and technology stack in use. And this role included creating documentation for the in-house software modules and procedures.

A couple of years ago I spent some time to get accustomed to machine learning toolkits. I finished an online certification and started to use ML tools for prototyping side project for monitoring customer loyalty level.

For the last year, I switched from a data engineering to a software development and specifically to a web development. I've been studying and practicing HTML, CSS, and Javascript. I've started following the freeCodeCamp curriculum and despite I work on two jobs and raise three daughters I spend the remaining time implementing projects, watching online courses and practicing algorithms and data structures. In the year my coding expressiveness increased tangibly - I started using code patterns and practicing functional programming approach.

Projects - technologies:

Certification: Coursera Machine Learning, https://www.coursera.org/account/accomplishments/verify/MBJY4S7WH9H5 Coursera Introduction into machine learning, https://www.coursera.org/account/accomplishments/verify/BWPNGQ6TEG58

Plan and done for January-21-2018

What will I learn today?

FreeCodeCamp project: Calculator.

Done

  1. To invoke numeric keyboard on mobile we need:

    <input type="tel" />

And type="number" gives numeric keyboard too, but without symbols for arithmetic operations.

  1. Tried to implement insertion of digits into <input> with execCommand('insertText', ...) but it seems doesn't work in FF (v57.0.4). Found old working code on SO - https://stackoverflow.com/a/1064139. It has separate routes for old IE < 9.0 and modern browsers, and the way to put elements in text field is to manually cut and then concatenate text in the field. Had some troubles with inability to put cursor at the end of the whole text after insertion but found it was due sending number primitive into the function instead of string.

  2. To turn off virtual keyboard on mobile we may use HTML5 readonly property for input - https://codepen.io/agorilla/pen/FJIic. But it makes impossible to control calculator using real keyboard. How to detect activation of the input field by user? By intercepting click mouse event. And to route click and touchend events differently inside a handler.

  3. How to set one handler for multiple events? ['click', 'touchend'].forEach(e => document.addEventListener(e, handlerFunc);.

  4. Add vibration for pressing virtual keys on mobile:

    function vibrateOnTouch() {
  if ('vibrate' in navigator) {
    navigator.vibrate =
      navigator.vibrate ||
      navigator.webkitVibrate ||
      navigator.mozVibrate ||
      navigator.msVibrate;
    navigator.vibrate(30);
  }
}

  5. I applied Kyle Simpson's OLOO pattern by separating data processing and UI into different objects and then creating and invoking application as a combination of those two. Feels clearer than mashup of both into one peace of code.

  6. As a start point for UI I've choosen keybord JQuery plugin - https://github.com/Mottie/Keyboard/blob/master/js/jquery.keyboard.js.

  7. Almost perfection - https://web2.0calc.com/

Plan and done for November-08-2017

What will I learn today?

FreeCodeCamp curriculum: No repeat please.

Done

Permutations and combinations. There are bunch of algorithms to construct permutations. I've tried Heap recursive, Heap iterative and Steinhaus-Johnson-Trotter. The code for each is here - https://codepen.io/alstof/pen/jarvNx. Couldn't get grounded intuition behind Heap algo: the reason it works - it has a pattern of elements swapping, but it's very easy to implement:

var heapPermute = (n, arr) => {
  var swap = (arr, pos1, pos2) => [arr[pos1], arr[pos2]] = [arr[pos2], arr[pos1]];
  if (n === 1) console.log(arr.join(''));
  else {
    for (let i = 0; i < n - 1; i++) {
      heapPermute(n - 1, arr);
      swap(arr, n % 2 === 0 ? i : 0, n - 1);
    }
    heapPermute(n - 1, arr);
  }
}

SJT looks a little more complicated, but it has more sense for me - just build the whole pyramid from scratch - starting with permutation of 1, 2, 3 ... elements and add every next element to what you've already got in every porision from last to first for every odd element of previous permutation and first to last for every even one.

Good source of explanation is Khan Academy - https://www.khanacademy.org/math/precalculus/prob-comb/combinatorics-precalc/v/factorial-and-counting-seat-arrangements.

Pictures with explanation are available at Wiki:

Plan and done for September-17-2017

What will I learn today?

FreeCodeCamp project: Wikipedia viewer.

Done

Trasforming search bar is implemented. Here is a pen on Codepen - https://codepen.io/alstof/pen/yzNdKj, here is a stand-alone page - https://al1s.github.io/AskWiki/.

Besides there was a todo list:

  • fix address bar - remove submit parameters from it;
  • clear the page if the input value is undefined;
  • speed up loading and displaying data;
  • limit the keys to react to meaningful - letters and entry control;
  • fix browser history: make backspace to return a user to the previous page;
  • fix images size - it's too crane;
  • show a message on no search results;
  • make the page functional on iPad mini (Safari 7);
  • deal with Promise object manipulation;
  • how to get the page similar to Wiki's one on no data found;

Fix browser history

There is the history object wich may be used to control browser behavior on back and forward buttons. Here is MDN article - https://developer.mozilla.org/en-US/docs/Web/API/History_API.

Now the page restores previous search phrase on back and forward.

Show a message when there are no results returned

Implemented custom error object based on https://stackoverflow.com/a/5251506/2255031. The reason was to get cutomized variables inside error object to pass it between functions. I'm not sure if it's correct coding style.

Promise with resolves and rejects

I used promises in the code but the question left - how to return a value from a Promise: e.g. I've implemented common ajax request wrapper for fetch and it could be used as a call to get results but it didn't work when I tried to use it inside Promise.all function.

Special search results when nothing found

The Wiki returns special page on no data found result - Special:search. I haven't found it was mentioned anywhere in API docs or discussed as possible result on unsuccessful search. I've tried to retrieve the same page I have in a browser but got the CORS error that I treated such as the functionality wasn't implemented in a Wiki's public API.

Unlisted

I like the way VS Code simulates Vim keyboard control scheme. Everything I used in pure Vim, I use now in VS Code.

Plan and done for September-13-2017

What will I learn today?

FreeCodeCamp project: Wikipedia viewer.

Done

After I finished MVP my next step was to enhance UI, to make it more interactive and appealing. My plan was to try at least two things:

  • a tags cloud as a background around a search bar. I wanted to get the main page of Wikipedia and parse it to weighted tags. All these tags would be fed into cloud generator and it returns a cloud of terms with links to Wiki. Here is a cloud generator - https://timdream.org/wordcloud2.js/. The idea is great but requires time to dive into. I want something less time consuming.
  • search bar should be placed in the center of a screen and on user input smoothly float to top, freeing a room for search results.

Plan and done for September-11-2017

What will I learn today?

  1. I am moving towards application to Microsoft LEAP program - http://www.industryexplorers.com/applicants. What should I do to fit better? My deadline is 15 September 2017.
  2. FreeCodeCamp project: Wikipedia viewer.

Done

  1. I've done with the application to Microsoft LEAP. The last versions of the application essays are here - https://al1s.github.com/posts/plan-and-done-for-august-22-2017/.

  2. Wikipedia viewer completed as a prototype.

    Challenges:

    • huge variety of wikipedia API's parameters;
    • smooth slide-in/slide-out of search result panels;
    • icon inside input element;
    • searching in different languages in Wiki;
    • get wiki data with title, excerpt, and image;
    • validate unicode input;
    • keyup and keydown - the difference is in the last entered charecter; the first doesn't return it and the last - does.

Variety of Wiki's API parameters

I've tried different ways to get data but then two things pushed me in the right way: the article on using generators to get thumbnail and excerpt from search results - https://www.mediawiki.org/wiki/API:Page_info_in_search_results and a backtrace of

Icon inside input element

The problem is that we cannot use ::after or ::before with replaced elements (https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element) and input is one of them.

The hard way to place images inside input is to wrap an input and an icon into container div and position them accordingly with relative and absolute values and indents. A lot easier is to set icon as a background-image (https://stackoverflow.com/a/917636/2255031).

There is a list of SVG icons from Font Awesome - https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg.

Validate unicode input

The reason was - to validate user input without info on what user language is. The wrong way is to start digging to ennumerate all possible unicode ranges - http://kourge.net/projects/regexp-unicode-block. Twitter does something like this for hashtags - https://github.com/twitter/twitter-text/blob/master/js/twitter-text.js#L76. I don't need it - just filtered out all non language specific symbols:

formInput.replace(/([.,;:=+[\]\\|\/?<>!@#$%\^\&*()'"\n\r])/g, '');

Searching in different languages

Here is some topic on FreeCodeCamp forum - https://forum.freecodecamp.org/t/wikipedias-api-query-problem-with-getting-data-in-different-language/6740/9. But they discuss only one issue that could be fixed using generators in request parameters. But my question was - how to get data in your language. I used navigator.language for it and it's the same as Wiki does, but they have more complex logic inside the search scripts for particular languages (at least with regards to Chinese).

Unlisted. I switched from Atom to VS Code as a primary project editor and it fits my requirements.

Unlisted. How to fix not repeating down or up keys in Vim on MacOS:

defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false

From SO - https://stackoverflow.com/a/44010683/2255031.