During our experiments with inlining SVG icons at our company, we discovered that browsers responded to linking SVG set into a page differently. However, we would like to have a universal and stable method, which works in all the browsers with support SVG.

Trials and errors led us to this scenario:
to some variable in a variable in JavaScript.

Add the JavaScript file in the bundle of all JavaScript files. Then, link this
bundle in <head> section.

Before the first usage of SVG add an empty element (placeholder) and insert the content of SVG-string here.

Thus, we achieved the caching of SVG pictograms similar to how it happens to other static files. Also, we overcame a problem of linking
an external SVG file in IE.

Placeholder attribute is used to provide an action hint inside empty elements such as input or textarea. In this article, we consider the possibility of styling the placeholder text as well as some tricks to make it more usable and functional.

Let's begin with an example for those who don't know what a placeholder is.

Once upon a time my colleagues and I met a need to work up a lot of SVG icons. The prerequisites: over 30
colorless SVG images (the color are defined with CSS later). The task: generate their PNG+CSS fallbacks for
the older browsers.

While working with one large project, my colleague and I were thinking about how to automate building the CSS sprites.
Before, we used to build them manually or with different online services which anyway took a lot of time. Also, by that
time we already used Gulp to build the project and so were looking for a gulp-friendly solution for sprites.

Our development department has a very nice tradition. Every 2 weeks we hold Naked Friday; this is a little conference
where we share interesting knowledge gotten during our work. As a result, we have a lot of such information by now and
so we decided to publish it.

Thus, let me introduce a set of fascinating CSS and HTML tricks, which we hope are not yet well-known. We will be happy
if everyone learn something new!

I work on a huge project — in fact, on nothing else than the Yandex SERP (Search Engine Results Page).
As in any other large project, people here work with enourmously huge chunks of CSS code; a separate developer team does the maintenance.

When different people create and edit CSS using different tools and approaches, the resulting code becomes complicated, messy and inconsistent. For example, different developers apply different order for vendor prefixes, some of them omit quotes around urls while others don't. I could even imagine that in a hotfix rush, one could add something like position: relative to a rule set which already has position: absolute buried deep inside between other definitions... a happy debugging session guaranteed!

Regarldess of the aforementioned problems, our CSS repository shines with consistent code style and looks perfect, all of it.

How do we do it?

Written by Denis Payase on 9th July 2014; translated by Max Shirshin on 10th August 2014

The BEM methodology never assumed that its long CSS classes such as .block__element_modifier to
be written manually. At Yandex they use special tools to produce HTML markup and styles. If you are using CSS
preprocessors to generate your styles, you also do not have to repeat block names again and again. Here I'm going to
demonstrate how to do this.

Once Opera’s guys proposed to use @viewport { ... } in CSS instead of <meta name="viewport" ...> tag. Regarding the
reasons
you’d better watch and listen to @ppk and I will explain why you should use this
right now.

When nine months ago I wrote a small console utility for myself, I didn't suspect that soon it would become a serious and unique in its class tool, which would be used even by such famous teams as jQuery, Bootstrap and Angular. Now, as I'm writing this article, my project has 1010 stars on GitHub, and I'm very happy to think that so many people could make their work more comfortable with the help of my idea.

SVG-figures can be grouped to structure a file in more convenient manner. There are several tags for this purpose:
<g>, <defs> and <symbol>. Elements, element groups and symbols can be used repeatedly.

SVG is quite a mature technology but it began to gain its popularity just recently. Mostly due to the fact that
vector graphics perfectly suit for adaptive web sites. If you have just started to learn SVG,
here is some information you can start with.

What do we do if we have to search for something? Of course, we fire up our favorite search engine web site. It is quite hard to push yourself to use another a different search engine rather than the usual one, even if you know that the result would be better. To change this UX pattern I developed Likeastore Chrome
Extension. It adds social
part to your search flow by showing relevant information from the article you liked. Besides Chrome we support Firefox
and Safari. Despite the platform difference all these extensions are built from the same codebase.

Today I'd like to focus on the subject of web page rendering and why it is important in web development. A lot of articles are available covering the subject, but the information is scattered and somehow fragmented. To wrap my head around the subject, for example, I had to study a lot of sources. That's why I decided I should write this article. I believe the article will be useful for beginners as well as for more advanced developers who want to refresh and structure what they already know.

Written by Alexander Skutin on 26th May 2014; translated by Max Shirshin on 30th June 2014

A shaped emotion, a message in a well-defined system

Let me introduce myself. I am an Interface Designer at Yandex, and I've been involved with projects like Yandex.Maps
and Search Engine Results Page, and also designed brand icons, promo materials, documentation, a project planner, a
shared interface component library, and a fast prototyping system. Besides that, I follow my colleagues' projects such
as Yandex Main Page and other Yandex portal services: Market, News, Images, Video, Disk, Auto, Realty. I see how these
projects grow and evolve.