Type Annotations
Type Annotations are an optional feature, which allows us to check and express our intent in applications e.g they indicate what types of values you can pass to the function. Type annotations (and other TypeScripts features) are enforced at compile time...
Hello World in TypeScript
TypeScript is a typed superset for Javascript that compiles into plain Javascript. It focuses on providing useful tools for large scale applications by implementing features such as type annotations, classes, inheritance, modules and much more. This post is a TypeScript Hello World!...
Local storage
When building more complex Javascript apps it's useful to be able to store information in the browser, so that the information can be shared across different pages and browsing session.
In the past we used cookies to do so, but the way of managing these with Javascript was not so good. Now we can use new technology called local storage that does a similar thing, but with easier-to-use interface.
...
querySelector(), querySelectorAll()
The querySelector() method returns the first element that matches a specified CSS selector in the document. In order to return all the matches, use querySelectorAll() method instead.
So why people include jQuery only for use $(".someClass")? What is the difference between Javascript's document.querySelector() and jQuery $()?
...
Jasmine - create custom matcher
In previous post I described build-in jasmine matchers. But what if I want to create my own matcher? Easy peasy! So let's write one....
CSS data attribute - new line character in pseudo-element content
CSS has a property called content. It can be used only with the pseudo-elements :after and :before. We can use special characters in the CSS content however we can encounter difficulties when we want to display data attribute value in aforementioned content property for new line ...
When you can use !important
"Using !important in your CSS usually means you're narcissistic & selfish or lazy." Stephanie Rewis

"Ok, I need to add new style for element. So I'll add new class (.classA) and place it at the end of our Styles.css file. God, it doesn't work! Ok, I'll add !important statement. Yes, yes, yes! It works" And the next guy who are trying to make changes in .classA is very frustrated because his changes aren't behaving how they should. You know it from somewhere, right?
...
What is an object in javascript?
An Object in Javascript is a variable that allows to store other variables in it. This "inside" variable is known as a property. Basically you can store any variable you want on an object, you can also store functions,
Let's get started by creating a simple object
...
Jasmine.js - beforeEach and afterEach
Let's say you want some code to be run before every spec (maybe you want a function defined or sth else), then you can use beforeEach()
And if you want something to run after rach spec, you can use afterEach().
Let's see an example
...
Jasmine.js - matchers
In previous post I've used matcher toEqual. Today I will describe more defined matchers which I find useful.
  • toBeDefined, toBeUndefined
  • toBeLessThan, toBeGreaterThan
  • toBeTruthy, toBeFalsy
  • toContain
  • toMatch
  • toBeNull
  • toThrow
  • toBeCloseTo

toBeDefined/toBeUndefined - just to make sure a variable or property is defined
...
Jasmine.js - first example - describe it!
What does describe and it mean?
describe("", ...) is a suite. It defines a component of your application. It's not code, just a string.
Inside of that suite you have got the it() function (which is called spec). This function says what piece of your app should do.
And one more thing
...
Jasmine.js - introduction
Jasmine is an automated testing framework for JavaScript. Jasmine is one of many players in JS testing area. If you check this post stackoverflow, you will find about 10 testing frameworks. So why i decided to learn jasmine? There are three reasons:
  • It's continuously updated and growing
  • You can run tests via a CI server (just add PhantomJS)
  • I'm using Jasmine in my work :)
See more
...
How to clone object in javascript?
There is few ways to clone objects in Javascript and some of them are pretty creative and elegant.
I'll describe three methods:
1. Pure Javascript
2. Use JSON library
3. Use jQuery
...
Sort an Array of Dates with Javascript
By default, Array.sort will sort alphabetically. For sorting date we can apply our own function.
So let's create an array of Javascript Date and define our date comparison functions
See more
...
Variables scope in Javascript
Most of the people assume that scope of variable in Javascript is very much similar to other programming languages like Java or C#. But this assumption is wrong. There are a number of points where the behavior is different.
So what are that points?
  • No block level scope (except block-scoped variables)
  • Variables declaration are moved to top and then run (variables are hoisted)
  • Chaining of scopes. Any function defined within another function has a local scope which is linked to the outer function.
So let's see how it really looks like
...
Better Css code
We all know basics of CSS, but have you ever thought about Css in matters of efficiency? How browser "read" .css files? After reading two articles:
Writing efficent CSS
PageSpeed Insights
and see PageSpeed Insights in action I decided to write few words with examples about this topic.
...
Pace.js - Automatic page load progress bar
"The system should always keep users informed about what is going on, through appropriate feedback within reasonable time." (One of the Nielsen heuristics).
In modern web pages we've got a lot of asynchronous AJAX calls. To keep user informed what is really happening, we can simply show loading image while some calls are pending.
...
Footer always at the bottom of the page with Css
It's problem for many developers. You have a page without much content on it. How to push footer down to the bottom of the viewport?
Like always we have few options
...
Css positioning
"The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big."
CSS positioning is offen misunderstood. Many times we apply different position values just to fix layout until we get one that works
...