Login with github

A week ago I took part in the hackathon in Yandex. It was a small and local(for Yandex) one, only for yandexoids and friends. It was a very technical hackathon about tools for developers like loaders, builders, template engines. So developers were doing something for themselves.

So how did I get there if I'm not a yandexoid - my college Anton invited me because we were doing stuff related to Yandex on my current job. It's an interesting project - I'll say a few words about it later - but I couldn't find time for it because of other duties. So this hackathon became a great opportunity to find time and complete the project.

A few words about our project. BEMXJST is a declarative template engine, very flexible and powerful. So you can describe some structures using logic and domain-specific functions. Also, there is another engine BEMHTML that takes BEMXJST-templates and BEMJSON(simply a subset of JSON) and after some magic we get HTML. So on my current job we have a library of UI components that uses BEMXJST and BEMHTML. We also have a library based on React renderer. The libraries have to be equal in functionality and appearance - so there has to be no difference for users. The main idea is somehow to tell React-lib to use BEMXJST-templates in its render function. This will give us the ability to develop markup in one place and not to copy-paste it. It's possible to implement another engine that works like BEMHTML but outputs data structures fittable for creating virtual-DOM. That's how the React render function works - it doesn't produce a real DOM but a structure that describes DOM so it can compare it with the real one and then decide is it required to update the real DOM. That's why we called our engine VIDOM.

Before the hackathon, we checked the idea and created some POC and I can say that it was almost ready and almost all the tests were green. But the code base was awful and there were bugs and we didn't check all the edge cases. So the goal for the hackathon was to complete the project and make it possible to merge into upstream.

I love hackathons because of their magic. Just imagine the Saturday morning, you want to relax and your body is tired and then you came to the place with a lot of people who are also tired but they want to work and they have the ideas and passion for doing it and it's really the thing that motivates me. So I was full of energy for the whole weekend. Also, it's a great pleasure to hang out and just work together, it's great fun definitely.

This particular hackathon was great for me because it was about tools and I'm interested in it. I like that there were no prizes or ratings or stuff like that. I believe that money or other prizes break the idea because what really matters is the pleasure of doing some stuff with friends and what you get at the end. And this is the real prize. I also felt the engineering culture that exists in Yandex and it's great.

Finally, we've done our tasks and created a pull request into the main project.

More details in russian here.

Source

Hello!

I've been using the BEM approach for front-end web development a couple of years now (and it's just great!) but only yesterday I started to try out the BEMHTML template language. So far I like it a lot!

There's a couple of things though that I can't yet wrap my head around and can't find anything about in the docs either. So I hope to have some more luck here and hopefully also help others that might be facing the same problems.

Basically I would like to know how to be able to add custom CSS for a webpage that isn't directly block related. For example declarations for webfonts, normalize/reset css code, etc. I would still like to be able to use Stylus as preprocessor and have bem-tools generate and minify this CSS together with my blocks' CSS.

The same question goes for JS. What is the correct way to add JS libraries and custom JS code, preferably maintaining the possibility to have this combined/concatenated with the block level JS?

Thanks! :)

Hello I am going through the quickstart tutorial. One of the first things I noticed on getting it running is that the HTML generated is all on one line. I am looking for a way to have it display in a readable way. I have looked at enb-borschik>techs>borschik.js and have tried commenting out: line 69: .defineOption('minify', true) line 85: minimize: this._minify, and restarted the server, but still seeing it compressed to one line. please let me know what to change to fix this. Thank You

Hey all!

I made a couple of silly, simple little snippets to detect improper usage of Elements and Modifiers.

Very simple, not necessarily failsafe or bulletproof, but a quick ā€™nā€™ dirty start. I need to DRY them out and roll them into one at some point as well.

The thinner the footprint the better.
Without all the heavy lifters like enb, only bem-tools maybe.

This is what I try:

npm install -g bem
mkdir bem-playground
cd bem-playground
bem create level my-blocks
bem create -b foo-block -l my-blocks -t <WHAT TYPE TO START WITH?>

html type is deprecated, list of types, I guess, is here: https://github.com/bem/bem-tools/tree/master/lib/techs/v2
Default types are empty so no block is created without -t.

Ok, I can create block manually. But what's next?
To assemble blocks into a page, I guess, I need some bemdecl and some assembler (enb again).
So I can't escape complexity footprint of enb onto my stack, right?

Can I mix Polymer and BEM (techs, tools, everything behind the methodology)? Does it worth it?

Ok, I've made a feature comparison table.
I need it to figure out if one technology can supplement another, not to downplay one of them.

Feature BEM Polymer
Syntax conventions (for B, E, M) yes no, use BEM
Decomposition into components ENB assembler (*) HTML Imports / webcomponents.js
# of requests reduction ENB assembler (*) vulcanize
CSS encapsulation upper boundary (*) upper boundary, lower for Native Shadow DOM (unstable)
Component redefinition yes, orginized in levels, ENB? (*) limited: extend native tags, inherit javascript definitions (behaviors), more is planned
File structure organization yes, B,E,M, techs no, use BEM
Techs support (templates, transpilers) yes server-side preprocessing (e.g. w/ gulp), client-side may be hindered

(*) = I guess so

There was a thread recently in Russian on using BEM in medium-sized projects written by Nikolay Gromov who complained that writing BEMJSON requires more time than writing HTML with a help of emmet.

I don't feel the same way about time spent on writing code not in percentage relating to time spent on debugging and thinking over not in absolute terms but I thought that spending time for writing analogue for emmet for BEMJSON is good enough task to spend an evening.

It is how this package bemmet emerged that can expand abbreviations like b1>__e1*2>b3_theme_islands+_state_active{hello} into BEMJSON:

{
    block: 'b1',
    content: [
        {
            block: 'b1',
            elem: 'e1',
            content: [
                {
                    block: 'b3',
                    mods: { theme: 'islands' },
                    content: {}
                },
                {
                    block: 'b1',
                    mods: { state: 'active' },
                    content: 'hello'
                }
            ]
        },
        {
            block: 'b1',
            elem: 'e1',
            content: [
                {
                    block: 'b3',
                    mods: { theme: 'islands' },
                    content: {}
                },
                {
                    block: 'b1',
                    mods: { state: 'active' },
                    content: 'hello'
                }
            ]
        }
    ]
}

Using options you can configure custom naming ā€” powered by bem-naming. stringify() method supports indentation options and quotes ā€” powered by stringify-object.

You can try bemmet in action using online demo. You can also install it right away into your editor using plugins for Sublime Text and Atom.

Would be nice if you can commit with plugins for some other editors.

Good luck!

Question from https://github.com/fabm22: Hi, is there some tooling for checking the structure of CSS code following BEM approach and having and some warnings if there are errors? Thanks a lot