Today… a small article about the approach to writing code. Do you write your JS code declaratively, or rather imperatively? It’s good to take a look closer. Similarly to approaches of writing and organizing CSS styles.

Declarative JavaScript vs imperative in JavaScript/ES6

Declarative programming is a programming paradigm — an approach to building the structure and elements of computer programs, which expresses the logic of calculations without describing its control flow. In contrast to programs written imperatively, the programmer describes the conditions, that the final solution must meet (what we want to achieve), and not the detailed sequence of steps that lead to it (how to do it).

Many languages, that use a declarative approach, tries to minimize or eliminate side effects, describing what the program must do in their field of domains, instead of describing how to achieve this as a sequence of programming language primitives. In turn, in imperative approach we implement algorithms in clear steps.

Boredom. Let’s just look at it.

Imperative code defines what and how has to be done, eg:

– go to the kitchen
– cut the bread
– take the butter out of the fridge
– …
– …
– put a sandwich on the table

In case of declarative we just describe what we need:

– I want a sandwich

Where’s the catch?

Simply, by building our program declaratively, we describe what we need. We compose the program from individual elements. These elements can exist in a framework or library; open-source or in our own libraries. If they are not available, we write them. Imperatively? Yes, in the end, we will come to such a level of abstraction.

Simply, when there is no lower level of abstraction, we need to write a code (functions, libraries, components, etc.) that implements what we need. At a higher level of abstraction, we will use this by building a program declaratively and modifying it more easily.

Boring again, so let’s take a look at JS code samples.

Sass (Syntactically awesome style sheets), aka CSS with superpowers, is a preprocessor, which makes developing styles for our projects much easier, more enjoyable, and faster. It also allows us to significantly improve the code structure itself, to use variables and create reusable elements (mixins, placeholders). The maintenance of such code is much easier.

Learning Sass (SCSS) quickly

We already mentioned about Sass in the previous articles about CSS structure and methodologies:

– part I

– part II

See also:

https://en.wikipedia.org/wiki/Sass_(stylesheet_language)

Learning Sass for what?

Well, writing CSS is simple. Writing maintainable CSS for larger projects is hard. We need tools and approaches, that will simplify, improve and make our work faster. And simply will put programmers on the right way. One of such tools is old, good Less CSS. However I don’t use it since long time. Instead I work with Sass, which is my favorite.

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.

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.

Base

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

Layout

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.

Module

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;
}
…

State

писинг смотреть

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.

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: http://sass-lang.com. 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:

https://github.com/airbnb/javascript

Same about approach to writing (S)CSS:

https://github.com/airbnb/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, https://en.wikipedia.org/wiki/Letter_case#Special_case_styles), so I DON’T write any:

.pageHead {}
.sub_header {}
…

BUT:

.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.

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 https://www.bootstrapcdn.com).

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.

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 =>

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.