Clickable phone number links in HTML5 (click to call)

Level: intermediate

The topic of this article is simple and nice. We just summarize the options of creating telephone links, or if you prefer “clickable phone numbers”. Today, some of the mobile applications are implemented not as native, but as web apps, and there is often a need to create a link to a phone call (call the user), or send SMS, or call via Skype.

HTML5: make clickable phone number simply

Also on “regular” websites, where we show contact data, it is good (from the user and UX points of view) to make phone number clickable. The user can very easy call the number then (no copy-paste and so on). A phone call needed, or maybe SMS, or Skype call? No problem. HTML5 brings an easy way to create links to phone calls, sms, e-mail…

How to?

Very easy. Simply use the ‘href’ attribute of the link, but with the tel: string, after which put a valid phone number (or skype user name). A few examples below.

Style, conventions and general CSS methodologies. Part II Sass, BEM, rscss, SMACSS, WTF?

Level: intermediate

Hello dev-friends! Let’s continue the topics discussed in part I.

Today we will look closer at different CSS writing methodologies, such as BEM, rscss, SMACSS. It should be also mentioned, that the methodologies can be combined (eg OOCSS + BEM). Of course only if it makes a sense to us. That’s actually important thing. It’s not so good to use sucking things only because they are so “cool” now, so trendy and so on. It doesn’t matter – in next days, weeks or months there something “completely new and awesome” will appear 😉 But this is a separate topic, on which I don’t want to waste the time 😉 OK, to the point.


CSS methodologies: SMACSS

Let’s start with SMACSS. And I have to say I never used this approach of organizing and writing CSS in real-life project. It’s not about SMACSS sucks or something like that. Simply this methodology is not comfortable for me. For sure it has many advantages, just for me some details are annoying. BUT, of course, it may be very good and comfortable for the others. It’s up to you! So…

SMACSS (Scalable and Modular Architecture for CSS), created by Jonathan Snook, is a style guide for CSS code. In this approach we organize the CSS code by categories (Base, Layout, Module, State, Theme). Let’s look at them closer.


Basic styles, general. This style group is responsible for default values; default appearance of page elements (margins, input, fonts, example: normalize.scss).


Layout styles define the appearance and placement of typical web and page elements, such as header, footer, sidebars. In SMACSS (and not only) it is assumed to use the prefix “l-” for them.


Modules in SMACSS are independent, reusable code blocks (UI), such as menu, search box, list items, etc. We can say that they are something like blocks in BEM. Modules are usually located in containers, inside layout elements.

The assumption is that each module should be independent of the other modules. It should work the same way in every container we put him in. Therefore, do not create styles that are dependent on the parent container.

As an example we can consider the menu module:


.menu {
  background: #00a;

.menu h1 {
  font-size: 20px;

.menu .menu-item {
  border: 1px solid #000;


They simply define the appearance of the element’s state, depending on the situation (e.g. hidden, expanded, etc). We collapse or expand menu, make elements visible or hidden, move cursor over an element, and other such situations.

CSS structure, style and conventions. Sass, OOCSS, BEM, rscss, SMACSS, OMG?

Level: intermediate

What does it mean to be busy? For example, there was absolutely no time for new posts on the blog, but the topics list is never-ending. I was so busy, professionally and privately. Today we back “on-line”, with a really nice topic.

We can save our time by optimizing daily tasks. Organizing and automating them. And I always try to implement such improvements step by step. No use to complain that there is so much to do and no time for all. The effects may be surprising. Otherwise our frustration can keep growing.

In the matter of programming, we could write here about the tools, such as webpack. But this topic deserves for separate articles. Today we will focus on approaches for writing CSS styles. In a good, comfortable (for us and the others) way. Such codes will be easier to maintain and develop.

“Long term value of the software is directly proportional to the quality of code base…”
— Douglus Crockford

Do you know any other guides and conventions for CSS structure? Like OOCSS, BEM, rscss, SMACSS. Or maybe OMG? Maybe you have seen code samples, that were written using one of these approaches, like BEM or other SMACSS… but you maybe didn’t care about. This article looks closer at the topic of writing better CSS.

Note: personally I write my styles mostly usingSass (SCSS – Syntactically Awesome Style Sheets), so articles and code examples here will be also made using this CSS pre-processor, also known as “CSS with superpowers” 🙂

See more at official website: Starting work with Sass goes smoothly, especially when we use a framework, that provides a nice support for such technologies (such as Ruby on Rails).

About style giude, in case of JavaScript / ES6, my favorite one is this elaborated by Airbnb:

Same about approach to writing (S)CSS:

Setup of linting tool will help us to keep the right syntax.

NOTE: the only detail I don’t like and don’t use about Airbnb style guide for CSS is about letter case for blocks. In case of fronted-development, I’m not a fan of PascalCase / camelCase.

Certainly in other cases, like writing classes in Ruby / RoR, we use PascalCase, and also snake_case for naming methods. In both cases it’s great and looks good. Just somehow I don’t like it for CSS.

For CSS I prefer kebab-case (spinal-case, hyphen delimited,, so I DON’T write any:

.pageHead {}
.sub_header {}


.page-head {}
.sub-header {}

That’s my own preference of course.

Actually there’s so many approaches and conventions, both for JS and CSS. We simply should use those we like, that are nice and reasonable for us. Then let’s follow the conventions we choose, constantly. With this we can really take many advantages for our code development. Without consistency we may create a mess instead.

Let’s start smoothly, from the basic thing – few words about Sass and directory / file structure for our styles.

“Writing CSS is easy. Writing maintainable CSS is hard.”

Why it’s important? For sure I hate to see any “over-engineering” acts, unfortunately it seems to be typical for front-end developers. Therefore we have billions of JS tools, libraries, approaches and so on. But not time for philosophy now, to the point.

Bootstrap Tutorial and RWD – responsive websites

Level: intermediate

Today a quick tutorial about Bootstrap and creating responsive websites. Actually a template of good start point for further projects. We will also talk about the techniques, which allow us to reach specific results. We also collected links to resources with valuable information.

Bootstrap Tutorial – responsive template by hand

As we know, Twitter Bootstrap (TB) is an open-source CSS framework. Incredibly simplifies and accelerates the creation of solid, nice looking web projects (UI). Mobile-first approach included.

So let’s get straight to the point and create a basic template. We want to get it ready to run in desktop, as well mobile browsers. The first detail will be to define the viewport (area visible for the user at one screen). More about HTML5 basics can be found here.

HTML5 document and including necessary files

Let’s create HTML5 document, and include jQuery, as well Bootstrap 3.3.7 (e.g. from

Progress bar

CSS: visually consistent html5 progress bar in all browsers

Level: intermediate

Today a few words about HTML5 progress bar, and more specifically about adding CSS rules to such an element, so it will be looking same in all the browsers. For example there may be a requirement at design level, to keep visually consistent html5 progress bars. The developer may be surprised about the default behavior of this element.

The same appearance of html5 progress bar in all browsers

Different web browsers displays html5 progress bar in a different way. Also the default styles are not same. If we want to get progress bar looking always the same, we need a small CSS trick. A ready solution below.

Useful tools for programmers: Yeoman

Level: intermediate

Finally, I’ve got a little bit of time for blogging, so today wanted to write a few words about one of useful tools for developers – Yeoman.

Yo man! Useful tools for programmers – Mr Yeoman

Why to do the tedious, repetitive tasks, if it can be done for us by machine, or in this case – by the program. Yeoman allows us to generate different kind projects, especially creating the structure of folders and the necessary ingredients, in order to the best practices and patterns.

It makes initial creation of necessary folders and files, as well the setup of dependencies.

For example we may create new AngularJS project, where we also want to have Bootstrap, Saas and other extensions, that our project will need.

Installation is based on npm, which for sure we have in our environment, if we have worked with node.js. There also Bower and Grunt will be necessary =>

Top 5 jQuery plugins and libraries – May 2016

Level: intermediate

The next portion of good jQuery plugins and JavaScript solutions from our library. Here we present a small ranking of top jQuery plugins from May 2016.

Top 5 jQuery plugins from May 2016

Ordered by popularity.

1. Style elements, use media queries to build a responsive menu in jQuery

In this tutorial you’ll style elements and use media queries to build a responsive menu in jQuery. A nice effect reached quickly.

Progress bar with CSS and HTML5 in a few lines of code

Level: intermediate

A progress bar in CSS for web project? Sure, and it without using images. Today short and to the point.

Create progress bar with CSS and HTML5

We can use HTML5 and Bootstrap, or define our own CSS styles.

Solution #1 – HTML5

Let’s add Twitter Bootstrap and jQuery to our web page, and a simple code as below.

  <div class="progress" style="width: 50%">
    <div class="progress-bar" role="progressbar" aria-valuenow="40"
      aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      40% (default style)

Ready! We have a progress bar. The colors and progress step we define through CSS classes (e.g.: class=”progress-bar progress-bar-danger”) and properties (e.g.: role=”progressbar”, aria-valuenow=”100″). And besides, we set style width of an element.

More examples of progress bars below.

Top jQuery plugins

Top jQuery plugins – March 2016

Level: intermediate

Hello! We added many new interesting positions to our scripts and plugins library. Here we present a small ranking of top jQuery plugins from March 2016.

Top jQuery plugins from March 2016

Ordered by popularity.

1. Multi-step jQuery form wizard plugin – jquery.steps

The first plugin is a nice way to implement forms in web application: multi-step jQuery form wizard solution. Turn multiple forms into a step-by-step form wizard with nice effects.

AngularJS Tutorial – a simple UI to control elements

Level: intermediate

Angular in practice! Today we have a small AngularJS tutorial, about creating small UI connected with dynamically created (refreshed) graphical object.

AngularJS Tutorial – control an element with Angular

In the basic course of Angular, we focused on information. Now it’s time to see it in a real example. Today’s simple tutorial in small steps will help us with this.

Step 1.

Let’s create HTML5 document and include AngularJS library.

Step 2.

Define an element, on which we will operate from the level of UI. In our example we will create a simple element using CSS:

.my-elem {
  background: #00c;
  border-radius: 10%;
  position: absolute;
  width: 200px;
  height: 200px;
  max-width: 500px;
  max-height: 500px;

  /* speed */
  transition: 0.8s;
  -webkit-transition: 0.8s;

  /* init pos*/
  left: 100px;
  top: 200px;