1 November 2015

Hi everyone,

We are ready to announce a new set of documents for the i-bem technology!

i-bem.js user's guide will help you start your acquaintance with the i-bem.js JavaScript framework for BEM.

What this set of documents covers:

  • Overview of the framework that includes its relationship to the BEM subject domain, and a summary of the framework modular structure, a template project, and assembly tools written using i-bem.js.
  • Binding JS blocks to HTML that describes markup for JS blocks in HTML code and the possible relationships of HTML elements to JS blocks.
  • Block declaration that contains syntax for describing JS blocks.
  • Passing parameters that describes passing parameters to a block instance and accessing block parameters from an instance.
  • Working with the DOM tree that includes the API for working with DOM nodes of blocks: elements, dynamic changes to the DOM tree (using AJAX), and searching DOM nodes.
  • Block states that describes modifiers and triggers for state changes (setting modifiers).
  • Events that shows the i-bem.js event model: DOM and BEM events and event delegation.
  • Initialization that describes how to initialize and delete block instances; describes deferred and automatic initialization.
  • Interaction of blocks that includes calls from a block to other blocks and classes of blocks.
  • Context that describes private and static properties of a block. BEMDOM static properties.
  • What next? that contains links to documentation and supplemental materials.

Hope, these documents will help you understand and work with the i-bem.js framework.

If you have any questions, please, ask them on the forum or e-mail us at

Enjoy usage and Stay BEMed!

26 October 2015


We have good news for you — we improved existing documentation for bem-components library.

Not so long ago we conducted a survey and found out what would be useful to add to the blocks library description. We have analysed your responses and implemented many of your wishes in our new documentation!

Here is the list of new features of documentation that were implemented:

  • Now we are able to show source files of blocks from all levels involved in the assembly. To see links to all the files of the block from all levels, you need to open a new tab of the block description — Sources. Thus, for example, for a desktop block there will be a set of files from desktop and common levels.
  • We are able to show additional levels for the complex block examples from an ”Examples“ tab. For this we created a separate tab called ”custom blocks“ that contains links to all additional files.
  • We also are able to show the dependencies for all examples in ”deps“ tab.
  • We now highlight and format all code examples. We add formatting and highlighting of the code in BEMJSON and HTML tabs.
  • And finally we are able to show HTML for custom examples in ”Examples“ tab.

Hope these new updates will be useful!

And of course, we want to thank all the respondents who participated in a survey! Your answers helped us dramatically in improvement of the documentation and understanding what is really important to you.

We also added a permanent feedback tab on the main menu to give you a tool to report us what you think back any time you like. You can do this by mail as well:

Enjoy usage and Stay BEMed!

26 October 2015

When: October 7, 2015

Where: Kapitein Zeppos, Amsterdam, The Netherlands

No Fronteers conference would be the same without the Jam Session to kick things off the night before. That is why a lot of developers apply to talk at Jam and are very happy when they are chosen.

We thrilled to announce that two of our talks are accepted to a program of a six year tradition of Jam Session.

More information about the event could be found on it's official web page.

Rebuild your own React by Sergey Berezhnoy

vidom is a React-inspired library for building web interfaces. In his talk Sergey will talk about the basic ideas behind it, like speed, lightweight and simplicity. Furthermore, this talk is about the process of reassembling things as a method to understand them deeply.

Declarative templates for HTML by Vladimir Grinenko

We all love declarativeness of CSS. Why not to use same approach for HTML templates as well? Vladimir will share the experience they've got at Yandex.

Speakers' biography

Sergey Berezhnoy, a web developer in Yandex since 2005. Developed such Yandex services as Search, Mail, Blog Search, Yandex blogging platform, Video. Along with service development codes internal tools for web development.

Vladimir Grinenko, the head of BEM development team. HTML/CSS/JS-professional. BEM-addict. Answers BEM questions 24/7. Outside Yandex runs his own web development agency, consults projects and helps them stay healthy and wealthy with BEM.

Follow @bem_en for updates and live tweets.

Hopefully, there will be video available after the conference that we can share with you.

Stay BEMed!

1 October 2015


We start with “thank you” note: we would like to thank you so much for using our BEM technology, support us, ask questions on social media and our forum, help us not only develop and improve our technologies, but build your own projects and products using BEM and contribute to the community development.

Today we would like to ask you, BEM developers, for a very important favour — to find some time and fill in the questionnaire with the experience you have got.

We ask there very important and useful for the technology development questions, answers to those will help us know you and your projects better, find out problems you face using it and understand what you need in the first place.

We analyse all the answers and dedicate our efforts to technology and infrastructure improvements to ease your interactions with it.

All the results we have got will be published in our blog.

Feedback is available in both English and Russian languages, however, you need to choose only one because there is a common storage for the answers.

We will be very much thankful as well if you could possibly forward a link to the questionnaire to your colleagues and friends who use BEM in their work. This allows us to gather as much useful and important feedback as possible.

Thank you very much in advance, and Stay BEMed!


Finally, we have launched a subscription to news mailing list. So, it is even easier now to stay in the know of product news, important releases, documentation updates, events and conferences about BEM as well as other topics!

30 September 2015


We are happy to announce our next minor release of bem-core library — v2.8.0 — that contains of important and long-awaited changes.

Major changes

The biggest and most significant change is the release of i18n block for internalisation (translation) of your interfaces (#1074). This block has an universal API to work with JS and templates and could be used both in browsers and in node.js environment.

Internationalisation-powered build-related documentation could be found in a build package called enb-bem-i18n (Russian only, translation is coming).

Besides, jQuery is loaded via https by default (#1202) and there is no bemhtml-compat dependancy (#1186) any longer — we deleted it. If you use bem-tools, please, proceed with npm i bemhtml-compat --save to install the package on a project level.

Bug fixes and other changes

Following bug fixes and changes we released as well:

  • Bug in loader_type_js that allowed undefined handler calls (#1159) fixed.
  • BH bundles in dist now mimic to BEMHTML (#1210).
  • bem create templates for bemhtml, bemtree, vanilla.js and browser.js (#1183) were improved.
  • vow updated up to 0.4.10 (#1056).

The complete history of other changes could be found in bem-core library releases' changelog.

Pleasant migrating and Stay BEMed!

31 August 2015

MercadoLibre Frontend Meetup is a weekly event held every Friday and hosted by MercadoLibre (Latin America's e-commerce site).

Speakers are usually employees themselves, they talk about a wide variety of topics with the intention of sharing knowledge and experiences.

BEM talk took place on August 14, 2015, in Córdoba, Argentina, and was transmitted via live streaming to the offices located in Argentina (Buenos Aires and San Luis) and Chile (Santiago de Chile).

On this page you may find slides of BEM talk.



Speakers' biography

Luciano Battagliero is a seasoned frontend developer with 7+ years of experience in HTML, CSS and JavaScript. Specialised in architecting and building large-scale web applications, strongly focused on performance, flexibility, scalability and maintainability.

Have a pleasant time sliding and Stay BEMed!

19 August 2015

You Gotta Love Frontend is the first international frontend conference of its kind that was held on June 8 — 9, 2015, in Tel Aviv (Israel).

More information about it could be found on the official web page.

There was quite a bunch of brilliant speakers including Douglas Crockford as well as interesting talks and now — videos.

Our team talked about BEM methodology, BEM technologies, frontend development in Yandex, the community and not only.

On this page you may find a video and slides of BEM talk.

BEM — Build ‘em Modular!


Every web developer, designer or manager who supports huge project or tryes to reuse some parts of HTML + CSS anywhere else sooner or later will face with the same issues and most likely come to the idea of componentized web. It's rather popular now and was even described as a W3C standard Web Components. But how exactly new are the new ideas and how useful is its realization?

In the frontend world since Internet Explorer 5.5 a lot of developers know and use BEM methodology that was created to solve exactly the same problems. During years of use it formed its own huge ecosystem that includes technologies, tools, libraries and active community. It is built and developed by developers within Yandex and outside that use it everywhere both in small such as promo page for a cat and high loaded projects such as Yandex services and They are well aware of the problems that developers face.


Speakers' biography

Vladimir Grinenko, the head of BEM development team. HTML/CSS/JS-professional. BEM-addict. Answers BEM questions 24/7. Outside Yandex runs his own web development agency, consults projects and helps them stay healthy and wealthy with BEM.

Yelena Jetpyspayeva, BEM Developer Relations Specialist. Helps BEM team with coordination of an open source activity inside and outside Yandex and the community making sure everyone is happy with BEM. Outside Yandex volunteers for open source and helps developers run developer events. Dreamer of the better web and believer in true power of open source.

Have a pleasant time watching and Stay BEMed!

10 August 2015


Back in December 2014 we announced a freeze of build with a help of bem make command of bem-tools. However, since that time we have released minor updates with some improvements.

As we have written already we decided to do so because we switched to build with ENB.

Today we can confirm that ENB supports all options of bem make and even more. Besides, it works faster and is being developed by leaps and bounds (soon you will be expecting major releases of the most popular packages).

What's inside bem-tools v0.10.0?

Inside we have done a fallback that in absence of .bem/make.js will search for ENB config and will launch it under the hood. In other words launch of bem make out of bem-tools runs enb make, and launch of bem server runs enb server.

Such a way allows us to preserve its usual API and an option to use the rest of the commands of bem-tools (for instance, bem create) when users need them.

Also in the future it will give us an opportunity to add other useful modules to work with files according to BEM methodology in the common wrapper.

We continue to suggest you to switch to ENB build if you still haven't done it yet.

The simplest way to do so is to check the config sample within the project-stub and if you have diffuculties, ask on our forum.

Bon appetit and Stay BEMed!

6 July 2015


Until recently we felt your pain dealing with JSDoc in our libraries. Therefore we decided to re-think rendering of Javascript API inside documentation of our blocks.

Refactoring of the block responsible for rendering of JSDoc went through several iterations where we found few ways to improve it.

Old version: all parameters and descriptions without indentations and titles were displayed as canvas/cloth on the page; it was hard visually to find one or another element of the block, method or parameters of the function.

What we improved:

  • every block now has its content that links to needed anchors on the page;
  • all entities of one block now displayed according to sections. For instance, now methods of button block and methods of its modifier _type_link are separated;
  • all accessible information about every method such as description, what returns a method, what parameters it accepts are now displayed;
  • if a block returns a class, methods of that class will be available;
  • parent block is displayed in the field of augments even if the block does not have its own public methods;
  • tags are displayed in front of methods if they have protected, override or abstract statuses;
  • if the method is outdated it will have the corresponding field with a description;
  • optional parameters are displayed in grey color and [ ].

Currently the look of JSDoc we see as final, however we will be glad to hear out your feedback and know what we are missing.

Please, post your feedback to our forum labeled with asktheteam.

Updated JSDoc could be found in the latest versions of bem-history, bem-components and bem-core libraries.

Major result of this work is complete reference of all i-bem.js methods

Bon usage and Stay BEMed!

14 May 2015

You Gotta Love Frontend When: June 8 — 9, 2015

Where: The Cameri Theatre of Tel Aviv, Tel Aviv, Israel

You Gotta Love Frontend is the first international conference of its kind to be held in Israel.

More information about the event could be found on it's official web page.

There is quite a bunch of brilliant speakers including Douglas Crockford as well as interesting talks.

BEM — Build ‘em Modular!

We are more than happy to participate with a talk and be a part of the first international conference of its kind to be held in Israel.


Every web developer, designer or manager who supports huge project or tryes to reuse some parts of HTML + CSS anywhere else sooner or later will face with the same issues and most likely come to the idea of componentized web. It's rather popular now and was even described as a W3C standard Web Components.

But how exactly new are the new ideas and how useful is its realization?

In the frontend world since Internet Explorer 5.5 a lot of developers know and use BEM methodology that was created to solve exactly the same problems. During years of use it formed its own huge ecosystem that includes technologies, tools, libraries and active community. It is built and developed by developers within Yandex and outside that use it everywhere both in small such as promo page for a cat and high loaded projects such as Yandex services and They are well aware of the problems that developers face.

During our talk we start from the beginning that covers CSS and design and will go on as far as you would wish to.

Speakers' biography

Vladimir Grinenko, the head of BEM development team. HTML/CSS/JS-professional. BEM-addict. Answers BEM questions 24/7. Outside Yandex runs his own web development agency, consults projects and helps them stay healthy and wealthy with BEM.

Yelena Jetpyspayeva, BEM Developer Relations Specialist. Helps BEM team with coordination of an open source activity inside and outside Yandex and the community making sure everyone is happy with BEM. Outside Yandex volunteers for open source and helps developers run developer events. Dreamer of the better web and believer in true power of open source.

Follow @bem_en for updates and live tweets.

Hopefully, there will be video available after the conference that we can share with you.

Stay BEMed!

29 January 2015

Hi everyone!

We are excited to announce that we have released our bem-components v2.0.0 library!

This is a major step forward for all our team and the community!

We worked hard to get a product we could be proud of. And we hope, you will enjoy and build a lot of great sites using our library!

Any feedback you should have, we are ready to discuss!


bem-components library consists of 22 cross-platform and cross-browser controls of forms that cover the most of interface implementation scenarios you should have.

All blocks are documented in English and Russian languages and tested.

The list of blocks:


Different types of redefinition level allow our library to operate correctly at full strength on different platforms.

Such levels of differentiation allow you to cut off the desktop-oriented files during the build procedure when you develop an application only for touch devices and vice versa.

Cross-browser compatibility

bem-components library supports all upcoming browser versions, including Firefox, Chrome, Safari, Opera, Yandex и Internet Explorer.

Library delivery cases

We offer you three types of bem-components library delivery.


Used for technically identical projects that use the same preprocessor and template engine. For more information about tools and technologies see the description of the library.

We recommend you to use source method. The easiest way to start with it is to use a project-stub or BEM project generator based on yo. Both of them already contain of bem-components v2.0.0 library.


Used for the projects that do not use any preprocessor or use other than Stylus.

To get the compiled version of the library, download the source code of bem-components library, install npm dependencies, and run npm run compiled command in the root directory.


Used to connect bem-components library as a readymade library with the possibility to link components as JS or CSS bundles to the page. To get the readymade library, you should download the source code of bem-components, install npm dependencies, and run npm run dist command in the root directory.

Now you will be able to see the result within the ./dist/ directory.

Compatibility and stable build

Developers using the library way before the release should know that the code base was ready to use for a long time.

Before announcing v2.0.0 we wanted to test it in the real world, cover all use case scenarios, and write detailed documentation for all blocks in two languages.

Now, we can say — bem-components v2.0.0 is a stable version. And it could be used for a wide range of tasks on projects of all sizes with no risk.

One more good news: bem-components library uses semantic versioning. Now, you could use corresponding tags instead of definite commit number.

All future updates of the library will be more transparent and understandable.

From now on you may check two information sources – semantic versioning and a changelog file with detailed description of all changes. It will definitely give you a picture of all new features and compatibility between different versions.

We would love to hear your stories about bem-components v2.0.0 library usage in the ”wild“, meaning – in your projects :)

We welcome all your questions and experience notes on our forum. Please don’t forget to mark your posts about the library with the bem-components label.

Your user feedback and active contribution to the library helps us to improve our library and extend it with new helpful blocks and features.

Enjoy the update and use, and always Stay BEMed!

26 January 2015

Hi everyone!

My name is Volodya Grinenko, I live in Simferopol, I am the head of the BEM Development service, I write code 24/7, love my wife and don't like meat. You can find lots of my BEM talks at this link.

It's now my turn to share my thoughts and impressions of the BEM hackathon that we held last November in Moscow.

I'm not one to wax lyrical, but our "first outing" has left some fond memories, not least of the great turnout, with people from different cities coming to spend a weekend with the BEM team at our own hackathon.

Why did we do it?

The BEM team spent a lot of last year getting to know people from the community. That involved a lot of online communication, conferences and BEMups, where we all met, chatted and discussed our experience.

At one point we realized that the simple talk format was no longer enough. People were trying their hand at their own projects and facing some real problems in the process. Where possible, we gave online assistance via messengers and forums. But that wasn't enough.

As far as live events were concerned, we were gradually moving from talks to master classes. When the increase in the developers' level became evident, we had an idea to conduct a master class in reverse, where BEMup participants carried out assignments under our guidance.

We saw that many enjoyed "on the spot" coding and were good at it. Why not then have a bash at a BEM hackathon? We seemed to be equal to the task, as challenging as it was — the team had grown and were ready to present projects and answer questions, our Yandex colleagues were keen to take part and help us with our teams, and there was already a sufficient number of developers "from the outside" with the necessary skill level, creating their own BEM projects.

So it was settled. We recorded a and it was off from there!

The next few months were spent in preparation: we had to find people to lead the projects, decide what those projects would be, select participants for the hackathon, help some of them get to Moscow. There was a lot of work involved but I think we managed.

Why hackathons are good

All the details of the project presentations, of people forming teams, working hard, not sleeping, eating pizzas and presenting their project results at the end have already been covered by other participants in their post-hackathon posts. So I'm going to talk about something else.

What were those two days like? The participants gave different descriptions: strenuous, fun, interesting, enlightening, exhausting. The main answer though is that they were productive! There was not a project that didn't make it to the end. Some people may not have been able to achieve their original goals but everyone did their best.

Our hackathon took place in a very friendly atmosphere. Everyone already knew each other either from the BEMups or through previous online communication. Participants didn't hesitate to offer assistance to or seek advice from members of "rival" teams. I am not sure if that was because our chosen event format didn't imply competition as such or because the event attracted the right kind of people or if it's just the way BEM influences people :) It's something that everyone can judge for themselves.

What did we all get out of the hackathon?

I believe first of all it was the drive to push on and grow further professionally. Working alongside smart and determined people as one team, realizing that you've managed able to create a product together, small as it may be, within a short period of time — all of that drives you and spurs you on and pushes you to keep learning and growing further.

Secondly, result-oriented teamwork is a great motivator. Somewhere in the dark corners of your soul your own conscience begins to hint how your performance during regular work hours could perhaps be improved :)

Thirdly, a hackathon brings people closer. Before, we'd been staying in contact, exchanging emails, retweeting each other's messages but rarely meeting in real life. The hackathon let us put faces to names. Some people made friends, some people started projects together :) One way or another, that was a big step forward for the community.

I could go on and give you a "forthly", a "fifthly" and so on, up to "tenthly". The important thing, though, is that everyone who took part in the event had their own wonderful and exciting journey and enriched their life experience!

Not empty-handed, or the BEM Blog project

Incidentally, I came to the hackathon with a project of my own. I planned to finish a BEM stack-based blog, which I'd begun to write during the Camp JS conference in Australia when we were staying for a couple of days at a camp with no Internet connection.

I wasn't able to get a team together, people found other projects more interesting :) However, I didn't drop the project altogether, and did a bit of coding now and then in between consulting other teams.

My project was about creating a full-blown engine on which you could deploy a small website using the full BEM technology stack, in a way that should be no more difficult to do than by using WordPress. Both file system based markdown files and a database of some sort could be used as data sources. Themes were to be provided by a redefinition level containing BEMTREE and BEMHTML templates, CSS and JS.

I was aiming for a product that could be used in two modes: as a static page generator to avoid the need to search for specialized hosting supporting Node.js, and as a dynamic application.


So what was I able to achieve before and during the hackathon? Currently the blog can generate pages from markdown format.

Obviously, I'm still a long way away from the product I would like to see in the end. And if I do manage to make time for further development, I'm most likely to rewrite the existing code pretty much from scratch ;)

However, those wishing to collaborate with me on the project are more than welcome to join!

The project description can be found in the repository.

Further plans for the project are presented on wiki.

Let's code the blog together and stay all a little bit BEMed!

21 January 2015


My name is Kolya Ilchenko and I, together with my colleague Andrey Kuznecov, represented the BEM Forum team at the hackathon.

Here we want to share our impressions of the BEM hackathon and tell you about the results our team was able to achieve.

The team

A few words about the team members:

  • Kolya Ilchenko — the mentor. I have been with Yandex since 2013, working as an interfaces developer (or front end developer, in common parlance). I'm currently developing the site and BEM forum, I have knowledge of the full BEM stack and four years of experience in web development. My twitter name is @tavriaforever.
  • Andrey Kuznecov — my teammate at Yandex, interfaces developer, mostly on the server side which is developed with node.js. Has experience in server-side development using Java and Ruby. The times when Andrey first started to code already feature in history books. His twitter name is @kuznetsov48.
  • Mikhail Shukshin, when he took part in the hackathon, was working as a front end developer in ”“. As the mentor, I enjoyed working with Misha. He did really well. Without any hands-on experience of BEM stack development, he got stuck into the work right away and had no difficulty coding. A big thanks to him for the help, all the tasks that he planned were completed.
  • Ivan Voischev — one of the most active BEM community members, came to the hackathon from Voronezh. Works in the web studio Manufactura. As the BEM evangelist of the company, Ivan managed to persuade his co-workers to switch to using the full BEM stack in website development. As far as I'm aware, the studio benefited substantially from switching to the full BEM stack in terms of timelines and parallelizing tasks between server-side and client-side developement. Vanya got a difficult task at the hackathon. And he kept at it until the very end, passing through all the ”circles of hell“, which otherwise we would have had to face ourselves. So a big thanks to him for the help, our working together was just as fun as it was productive. Vanya's code will be used as the basis when the feature he worked on is brought up to production level.
  • Anton Vinogradov, interfaces developer in Alfa Lab's Moscow office. Works on the integration and development of the BEM methodology, having even adopted the BEM folder-naming conventions. Anton is an active member of the BEM community, a regular speaker at BEM events, and is developing a number of open-source BEM block libraries. With a lot of BEM stack development experience under his belt, he got down to working on the tasks at once, suggesting a number of improvements along the way. Together we discussed a lot of interesting aspects of BEM development. As the mentor, I'm satisfied with the result. It's nice to know there are people like Anton and Vanya in the BEM community. Anton's twitter name is @AWinogradov.
  • Yuri Malakhov, when he took part in the hackathon, was working in OOO Aitarget in Saint Petersburg. Experienced in both server-side and client-side development. Accomplished the set tasks at the hackathon. Yuri is a nice guy and good company, I enjoyed working with him.
  • Andrei Melikhov, works in the Yandex.Money department. He uses the full BEM stack in working on his service and is a confident coder with node.js. Together with Andrey Kuznecov, he developed the server solution for the forum. Andrei gave his 200 percent to the task, working tirelessly even through the night — a mighty big thanks to him for that, he's a real Yandexoid!

Getting ready

The BEM forum is a live, actively developing project on the site.

We had no problem coming up with tasks. Typically, we have a lot of ideas and not enough resources to implement them. The only challenge was to organize the ”crowd coding process“.

Andrey and I opted for the following arrangement: divide the tasklist into two categories — client-side-oriented and server-side-oriented tasks. After which we quizzed the team members on their individual strengths to find out who wanted to implement which feature.

Tasks were then matched to people, and we got down to work.

The tasks

In the course of discussion we identified a number of separate tasks for every team member.

GitHub-like post sorting

Ever since the forum went live, the missing sorting functionality had been an issue. At the time GitHub already had its neatly implemented sorting function. We decided not to reinvent the wheel and follow GitHub's lead. So we used the block select from bem-components and filled it with some JS magic to enable sorting by six different parameters.

Preview of .md code for posts and comments

The forum uses GitHub issues as a data source, where the content is written in markdown format, so we had it the same way. However, the preview feature was unavailable as the user wrote text and presented it in markdown blocks, which was rather inconvenient. We decided to implement markdown code preview during the hackathon and completed the task successfully. To do that, we used the BEM library bem-content, which is a good library for content formatting. The library is maintained by Anton Vinogradov, who was one of our team members.

Comment pagination

The number of users is growing by the day, and so is the number of posts and comments. Pagination for comments had to be introduced, unless we wanted to see the user's page turn into a "white skyscraper". That task was finished on time.

Implementing dynamic headers for posts

We were so engrossed with interface features that we completely forgot about one essential component — a unique page header for posts opened on separate pages. We decided to implement that as well, even though we hadn't anticipated that we'd be able to do that many tasks.

Post rating

Vladimir Grinenko once suggested an idea for the rating of posts on the forum based on GitHub's emoji ”:+1“. It's a cool idea in that it'll help support post authors in different situations. We started to implement it at the hackathon but failed to estimate the task accurately. The work was already in progress when we realized how many possible conditions and exceptions must be taken into account when calculating a rating. Unfortunately, we failed to finish the task within the time constraints of the hackathon, but the massive amount of work we put in the task laid the groundwork for bringing it up to production level. We're looking to roll out the feature January — February 2015.


While pondering over the forum database task, we struck upon the idea of adding another authorization option to the existing authorization through GitHub. To implement that functionality, we decided to use passport.js. It supports 140 providers. In addition to the server part, we had to work with the BEM stack as well as implement the user's panel for displaying information and the login/logout form. The task was successfully completed and handed over to Andrey and Yuri for subsequent use in the database task.

Database support using ORM as a data source

Andrey Kuznecov and Yuri Malakhov undertook the task concerned with an alternative data source for the forum, a database. For flexibility purposes, they decided not to tie their solution to a specific database but to use one of the node.js modules for interacting with different databases using ORM. To implement such as solution, they had to thoroughly revise the forum engine, perform code refactoring, allow for all the relevant data structure-related aspects and do a number of sub-tasks. The guys worked all day and all through the night sticking with their solution until the very end.

The team at work

As soon as the tasks were assigned, everyone started typing away at their laptops. Luckily, every team member had a MacBook, so no time was wasted on environment setup. Time was spent writing code, feeding off each other's good mood, discussing IT news, wishing Evgeniy Konstantinov @sipayrt a Happy Birthday, talking about BEM, putting up sticky notes for completed tasks on the board, preparing for the presentation, then everyone presenting the results and receiving prizes.


Both Andrey and I were really pleased with the results of this first BEM hackathon. We'd hardly expected to produce so many lines of useful code.

At the time of writing (January 2015), we have been able to release some of the solutions to production, onto the site. The time constraints of the hackathon didn't permit us to complete some of the more complicated and time-consuming tasks though, such as authorization via passport.js or using a database instead of GitHub for data storage.

The guys had hardly slept, working on the code right up to the start of the project presentations. Their code will form a solid foundation for completing the task, and we will try to find the necessary resources to do this in 2015.

That said, we did manage to complete the bulk of the tasks and get them to a production-ready state. We are very pleased about that.

So what exactly did we finish and roll out?

As you will have noticed, convenient post sorting has been enabled for the forum, which uses a select from bem-components. There are six available sorting options that you can choose from.

You can also see the preview of a post or comment that you are writing. This helps to ensure that the text is correct and is properly formatted.

The finished feature for inserting headers for separate posts is already helping the forum make new friends via search engines. The home page can now be differentiated from specific post pages.

The rest of the tasks are being finished, with the respective features shortly to be released. The features in question are comment pagination and post rating. Both features are high priority, and we'll be definitely using the code written by our team during the hackathon.


We found the BEM hackathon to be a great format. The venue and the general atmosphere surrounding the hackathon participants were excellent. We were impressed with the attendees' level, as well as the number of people full of enthusiasm for web development based on the BEM technical platform.

I want to say thanks to my team. Well done to all of you, your solutions have contributed greatly to the main platform for BEM-related communication on the Internet.

Exchange your thoughts and ideas, share solutions, and ask questions on the BEM forum. Stay BEMed!

17 January 2015

Hi everyone,

We are ready to launch our BEM forum — a place where developers working with BEM can get together, share their experiences and ask questions directly to the BEM team.

Little bit of history

We wanted to have our own communication platform for a long time.

Before we launched BEM forum on for Russian language community in August 2014 we had to monitor a lot of social media platforms such as twitter, Yandex blog platform, facebook, in order not to miss your questions.

At the same time Yandex was shutting down it's blog platform, and that decision forced us to launch the forum.

We carefully planned it, have chosen github to host everything as well as to login through and we went live as well as moved in to github 5 years of blogging history that we wanted to keep.

We were worried from the beginning that useful channels of communication will still prevail, and developers continue to ask questions everywhere and not here that is time consuming in terms of search and not usefull at all for archiving the history for the sake of future users.

But forum proved us wrong: the number of posts grew up every month, and it is about 40 posts (issues) per month now.

Inside the forum

As we do almost everything in open source, forum is an open sourced platform too. This means we encourage you to use it in your home projects and report bugs.

The repository could be found here. Local copy installation instruction is in it's readme file.

Forum's architecture allows using it well as a separate service and as a route for express. We use it in a second capacity — it is a part of site.

We use github API as a source of data, node.js for backend and full stack of BEM (BEMTREE, BEMHTML, i-bem.js) for frontend.

Right now it is possible on BEM forum to open a topic, comment it and filter posts using labels. We already made few necessary for you there. Attention: we ask you to use our forum via interface, because here you can have it labeled and found by others.

Every post is an issue on github that we browse on the site. This scheme allows communicating via forum having what developers already have — github login. For you it also means that you can open topics via site's interface or directly on github.

All you need to start using BEM forum is to authorize via oAuth using your github login.

Start writing your first post right now! We as a BEM team and guys from the community monitor user questions all the time and answer them right away.

We also hope you open our eyes on the problems English language developers have with BEM (anything from documentation to demos, from installation to use cases). Just mark such posts with "bug" label. It will be a lot of a help!

Let's get started with BEM forum!

To keep in touch and Stay BEMed!

15 December 2014

Greetings, dear reader!

My name is Sasha Belyanskii. I work in the Group of advertising technologies, in Simferopol. In addition to my regular job of developing interfaces for Yandex.Direct, I devote my time to nurturing and developing Vitaly Harisov's ideas about how source code editors' usability can be improved by ”teaching“ them to work with BEM projects.

I want to share my impressions of the recently held BEM hackathon, tell you about my own idea, the team-that-never-was, my project plans, and why I decided not to waste my time and help other people.

About me and my project

As mentioned above, I work in the Group of advertising technologies in Simferopol, developing interfaces for Yandex.Direct, doing front-end development and JavaScript programming.

The BEM community knows me as the developer who talks about the BEM IDE prototype idea. What idea is that then?

The BEM methodology is a powerful tool for the development of large-scale projects. Dividing an interface into separate entities helps identify the general and the specific, but, like everything else in this world, BEM is not perfect. It's easy to get confused while working on a big BEM project, as the logic for a single block can be described at different redefinition levels.

BEM IDE is about developing plug-ins for different source code editors that should make working with BEM projects easy and straightforward without changing your customary environment. To get a better idea of the whole concept, see this video of the BEMup in Saint Petersburg.

When the chance came up for me to be a mentor at a BEM hackathon and tackle the BEM IDE project idea as a team effort by writing plug-ins for code editors, I jumped at it.

For the hackathon, I already had a completed BEM IDE prototype and a general understanding of the principle of working with a block's code at all levels at once. I chose Atom and Brackets as source code editors in which to implement the capabilities provided by the prototype, as they are both written in JavaScript and have an accessible API, which I began to study. As for the more popular WebStorm and Sublime Text, those were left to be dealt with during the hackathon.

In the field

The first day of the hackathon began with the project presentations, where the mentors had to pitch their ideas to the participants and try to recruit people into their teams.

How did I get on? I am not exactly a master of eloquence but that was only half the problem, it seems... Even before the presentation, I came to the important realization that coming to a hackathon — where everyone's looking forward to coding blocks — with a project that has nothing to do with block-coding is always a bit of a gamble. There's a great chance you'll fail to get a team together.

That's precisely what happened. After the presentations, the developers chose to join other, more practical projects, which, in one way or another, involved working with blocks, documentation or the site.

So my project had to be backburnered. I felt disappointed, but working on my own, I wouldn't be bringing much value to the hackathon. So I decided to continue working on BEM IDE after the hackathon and publish the results in a separate article on

And in the meantime I could put my expertise and my time to good use as a team member on a different project — so I went and joined Andrey's "modular build" project.


Andrey's idea consisted in making the build process for BEM projects transparent by breaking it down into modules that could be used indepedently of the existing build systems such as ENB or bem-tools. I was not that clued up on the inner workings of the build tools, so I was just trying to take in what my more knowledgeable team mates had to say on the matter.

Towards the first day's evening we'd gone through the plans for what's required to build a BEM project using Gulp and got down to work. We went on to develop a number of modules during the hackathon, with bem-walker becoming Andrey's own pride and joy.

However, an important part was still missing — we didn't have a module for building an accurate dependency list that the build tool was supposed to use. We were looking into how the deps-resolver module in the ENB build tool was implemented but it turned out to be rather complex, and we had no time for a re-write. Instead we did our best to upgrade it to meet our needs, so that we had at least a build prototype to show at the end of the hackathon.

Team results and overall impressions

The hackathon concluded with another series of project presentations, this time with the mentors reporting on their teams' results.

Andrey presented the finished modules, stressing their benefits, before proceeding to explain how the modular approach brings the future that much closer and mentioning the almost working gulp-based build.

But so much for spoilers. You'll soon be able to read Andrey's own detailed post and see the team results published.

Following the presentations, the participants were able to each vote for their favourite project, and after the votes were counted, the lovely event organizers awarded books and t-shirts to the top three winning teams.

For me personally, it was great getting to see the results delivered by all the teams after two days of shoulder-to-shoulder collaboration. It was an excellent experience and the first event of this kind in the BEM community!

The organizers did a tremendous job making sure we felt comfortable at all times. We enjoyed comfortable workspaces, great food and a wonderful atmosphere.

The highlights for me personally? Being an interfaces developer who finds himself writing blocks all the time, it was interesting for me to watch colleagues at work, those who routinely develop with node.js. I realized, for example, how programming modules could be made easier if you first write the tests and then the code :)

And, of course, events like this are not just about the coding but about the atmosphere, too!

A weekend spent in the company of like-minded people, topped off with an afterparty is the very sort of diversion that puts the wind in your sails and keeps you working with renewed vigour and in high spirits for a long time afterwards :)

Make no mistake, dear reader — events like this inflict beneficial results and cause severe enjoyment!

And all the subsequent participant reviews only serve to make these events better and better :)

That's all, keep coding and Stay BEMed!

There are posts for this query in archive:
Go to archive