The Spring is the time when the nature reborns and start its life again and again, every year. I tried to keep this fresh momments and publish them as a pack of HD photos which you can use as a wallpapers on your devices.

date: 2017-05-26
author: Valentin Kirilov

The pure JavaScript datepicker library

MTR Datepicker is a library written in pure JavaScript which allows you to create great looking and lightweight datepickers for you web apps. It is supported by all of the modern internet browsers and comes with a few customizable themes.

A simple preview of the datepicker is available here. You can customize the datepicker and make it works the way you want. You can download the latest version of the datepicker and test it in your projects or play with the live demo in jsfiddle.

Get the code

There are two possible ways to include the mtr-datepicker library in your project. You can download the latest stable release form the official site and include it in your templates.

Or if you prefer to be up-to-date with our latest releases with a package manager you can use Bower or NPM, just type in your Terminal or CMD the following command:

1

bower install --save mtr-datepicker

or

1

npm install --save mtr-datepicker

Load the library

First you need to load the styles of the datepicker. Put the following lines in the head section of your html file or template:

1
2

<link rel="stylesheet" type="text/css" href="dist/mtr-datepicker.min.css">
<link rel="stylesheet" type="text/css" href="dist/mtr-datepicker.default-theme.min.css">

Then you should load the JavaScript, we suggest you to put the lines at the bottom of the body section of your html file or template. That is all, now you are ready to initialize your first datepicker.

1

<script type="text/javascript" src="dist/mtr-datepicker.min.js"></script>

How to use

To use the loaded scripts just add an element with specific id to your html and then tell the library to make it a datepicker. Here is a simple example:

1
2
3
4
5
6
7
8

<div id="first-mtr-datepicker"></div>
<script>
  var config = {
    target: 'first-mtr-datepicker'
  };
  var myDatepicker = new MtrDatepicker(config);
</script>

You can use more advanced datepickers and customize their behavior. You can learn more from the API section of the docs.

Contribute

We will appreciate it if you want to support our project and contribute to make it better. You can read our Contributions guide in the official docs or send us your ideas in the issues tracker.

date: 2016-12-08
author: Valentin Kirilov

What Easy-math is?

It’s a simple game that challenges your brain and speed of reaction with easy math problems. The game has a few different modes for playing and it allows you to play different levels and difficulties.

What it gives me?

Easy-math is a simple game but can be used for big things, not just for entertainment and fun. This game is training your skills and developing your brain speed and reaction so don’t forget to play here a few times a day to keep you in good shape.

What it’s not?

Easy-math is not a professional problem solving software. It’s just a little game that helps you to develop your brain skills and entertains you.

Wanna play it?

The game is online and you can find it at http://valkirilov.github.io/easy-math/.
If you are interested about what is behind the UI you can read the whole review.

About the idea

This is an idea that was born in a moment of boredom during one of my classes at the university. I wanted to make something that would be addictive with its simplicity and started to work on something small. The main concept of easy-math is to compare two numbers and choose which of them is the bigger one. Therefore, it was the part developed first. I made a generator for simple problems (at the beginning it was generating numbers between 0-10 but later I changed it to be more complicated and generate more difficult problems.

The programming part

Since the project was started during one of my programming classes, I started it from one of my seed projects with AngularJS and Bootsrap. This is my second app with Angular (and first published online) and it was my way to learn some of its basics and practices.

You are already familiar with the idea so I can move directly on the structure. First, I separated the app in a few services. This way the logic of the project can be reused easily. The main parts are QuestionsService and GameFactory which, as you may suggest, are responsible for generating the questions and organizing, running and combining all other services to make the game works. Of course, HighScoreService and DatabaseService which are used for storing the results, fetching and saving them. There are also Timer and Sounds services which complete the list of stuff that is needed to make the game more addictive.

The design part

My wish was to make simple and responsive design which would look good on different devices and, at the same time, would be easy to use. Because of this the “play” screen is really clear and contains only the question - the numbers that you have to compare and three buttons for selecting your choice. According to the game mode a timer or a score bar is at the top of the screen where you can see some more details about your current game.

Then I made some images which are used on the page for choosing the game mode to help the user to build a picture about the different game modes.

For the home screen, I decided to put the main game screen as an animated component to show what is the main goal of the game. This way, the first thing that visitors of the site see is the game concept and its simplicity. So, when you start playing the game you have something familiar in front of you and not entirely new interface.

Future developement

Currently the game has two modes - Classic and Timelimit but everyone can contribute and make the game more various. For an example, there is no limit to new game modes that can be implemented. If you are interested and want to contribute you can contact me.
Have fun

Finally, if you like what you see now you can try it. The game is available online and you can find it at http://valkirilov.github.io/easy-math/.
Try to beat the High Scores, currently I cannot enter in top 10 of my own game, can you?

date: 2016-09-25
author: Valentin Kirilov

Now is the moment to say “Hello world” form my new blog. I will post here tutorials, examples and code snippets for technologies which I use. I hope that I can make this blog something like a bucket with knoledge, cool stuff and code boosters.

I will start with that how I build this simple blog. The setup is really easy and fast, it will took you less than 5 minutes (more if you want to make some customizations).

What you should know to create a blog like this one:

1. I am using Hexo - a node.js blog generator from markdown files. If you are not familiar with node.js and don’t want to dive in the world of the Server-Side-JavaScript I suggest you to checkout other technologies like Wordpress, Jekyll, etc.

2. To continue you should have installed node.js and npm. If you don’t have them you can checkout my snipet for this - Install Node.js on Linux.

3. Install the Hexo npm package.

   1	npm install -g hexo-cli

4. Once hexo is installed you should create a new blog project. Simply execute the following commands.

   1 2 3

   hexo init <folder> $ cd <folder> $ npm install

   This will create a new folder with basic setup for you blog and will download all of the required dependencies. After all, you should have something like this folder structure:

   1 2 3 4 5 6 7 8

   . ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes

5. The next step is to check your new blog. Hexo is comming with build-in server so you can start it and access your blog from your favorite browser. To do this just execute the command bellow:

   1	hexo server

This will start a local server. By default, this is at http://localhost:4000/. You can pass some configuration details, for more information check the official documentation.

You know the basics now and can continue alone. You can use the Hexo Docs which will answer all of your questions.
I am still reasearching the available plugings for Hexo but I suggest you to try Hexo Admin - it is really helpfull and looks cool. Now I want to publish it as my first post and will use this handy command:

1

hexo deploy

date: 2016-01-28
author: Valentin Kirilov