Blog

Last week I met the need to develop a web site which static assets have to be hosted on a different server and respond by different URLs than its HTML. This is the requirement to all the static files: stylesheets and JavaScript linked to the page as well as imges and fonts mentioned in HTML, CSS and JavaScript code. However it is obvious that these resources should be local when developing. Thus, the challenge was to introduce a piece of magic which knows where we aim to host the statics and transforms all the relative paths into absolute ones according to it. The tools which helped me is…

The recently published step-by-step tutorial on i-bem.js mentioned YM modular system as a base for component JavaScript solution behind BEM. Why do we need another modular system? Let us see... The author of YM modules, Dmitry Filatov recently came up with an article about YM modules in Russian. And below you can find the translation. So, one more modular system? Besides CommonJS and AMD? Why should we care? I will not write why modules and modular systems are needed, there are plenty of articles about it. Let us rather proceed to the main question: why do we need another modular system? For…

We usually start developing a web site prototyping the interface and then implementing HTML/CSS and bacis JavaScript. In case of using the full BEM stack a tranformation from prototype to a functioning web site goes smoothly. You can clone the project from project-stub and create a static web page as it was described earlier. Thanks to templates, you do not need write all the HTML manually. Describing page sructure in rather than writing all the tags manually saves time. But sometimes this is still a lot of work to do, especially for large pages. Luckily BEMJSON can include JavaScript…

A couple of days ago I was asked about some basic things of using BEM project stub from someone who is enjoying the full BEM stack (BEM-CSS, i-bem.js and BEMHTML templates) for their projects. Answering the questions I promised to turn the information into text as we always skip many important things mistakenly considering them being primitive. The quesion was about configuration file which is needed if you use bem tools to build your pages. The 12th and 13th lines describe regular expressions to match and . And the meaning of these terms turned out to be unclear. First of all, the…

A developer using custom fonts in web (don't say this is evil) usually face a dilemma. The users' main interest is the content of the page not the view. It is nice to provide it as fast as possible and then apply a custom font. This blog used to work this way. I provided a script among others in the bundle linked by the end of the page. The drawback is obvious. Once a font is loaded and apllied, a user notice twitching as a page is being re-rendering. It is recommended to define a suitable system font in the . But there never is a good fit. Otherwise there was no need in a custom font. The…

There is a well-known front-end pattern which is to have hidden elements in DOM and make them visible when necessary. As with any good pattern, it can be compromised by wrong implementation. Most times, hidden means that the DOM element gets a property. This approach has become even more widespread thanks to and jQuery helpers. Whenever you need to hide a visible block you use the helper which in charge of assigning an inline style property, making the block invisible. When it has to become visible again, the helper changes the inline CSS property. I believe this is a very nice example…