⋅⋅⋅varya;
Published on 11/21/2016

Two weeks ago, I have started a new project of migrating a large website to React. Although this is not developing from scratch but refactoring, there still was a great chance to reconsider the project file structure in its client part.

As a proof-of-concept, I have chosen a pair of components: shopping cart and adding button. This is e-commerce what we are building here :-) My initial goal was to create simple components and demonstrate their reusing as well as introduce Redux as a glue to the components in the data area. As a result, I think I provided a nice and neat structure which helps a developer to understand what serves what. On the other hand, I tried to keep it simple. In the beginning, there is no need in overcomplicated.

Published on 11/8/2016

First thing first, I'm staring weekly posts about findings that are somehow related to work. This is a mature but not yet implemented idea. Although, a friend of mine Vladimir Starkov sometimes practises the same.

In this issue there are tips on organizing Google Calendar, nice project management addition for GitHub, Styleguide solutions for React projects and a couple of good reads.

Published on 5/23/2016

When it comes to the large web applications, we often operate with complex components. Such components are not just CSS styles for the pieces of an interface but also their JavaScript interactions and templates. As documentation, the style guide should reflect them all. In other words, the components on the style guide's pages should be the same living as in production.

Published on 5/19/2016

Earlier this year, I participated in a development of a single page application. With the team, we started this project from scratch. This situation was the most suitable to practice the new technologies.

The stack I've tried was React + ES2015 + postcss + webpack. However, keeping in mind that most of the team (who were supposed to maintain the project later) are mainly experienced in Angular, I was looking for some sort of combination of these frameworks.

Published on 4/16/2016

Being a frontend developer these days means to learn the new things every day. We read articles and blog posts, examine the changelogs, follow the Twitter announcements and participate in the GitHub discussions. This helps to keep up.

However, when it comes to something bigger, like the exploring of a new framework or an ecosystem, it is not enough. The perfect solution is to organize a whole day hackathon for the developers in your company. At SC5 online, we took this advantage mastering the React development. Few ecosystem components such as webpack and redux came along.

Published on 3/18/2016

My first task for new projects is to create a git repository. Whether it is a new app, or conference slides, or even an article, I prefer to keep everything in Git. It is an excellent tool, and, personally, I enjoy its command line interface.

However, there is always room for improvement. Recently I found an idea how to make my git visualize the changes that I've done to the images in a repository.

Published on 11/10/2015

My recent huge project was developing a library of CSS and JavaScript components for sharing this code across a lot of web services and mobile apps. In most cases such work brings up question about how to avoid blocking the processes.

The library has its own flow, and obviously the new things can only appear in new versions. Although I made my best to provide fast releases, and so the library has them 2-3 times a week, it is still understandable that the library customers sometimes cannot wait even an hour.

I belive that one of the must-haves of UI library is the freedom which it should give to its customers. You can easily provide this if practice atomic approach everythere. For example, for the icon fonts.

Published on 11/2/2015

Last week I faced a need to make a fake tag cloud, where the words need to be of different size. This was needed for a presentation slide, and as my slides are always in HTML/CSS, must be implemented with these technologies. It is always possible to inject some JavaScript and code anything. But what about pure CSS, do we get random sizes there?

Published on 9/7/2015

I never thought that I would write a post about diversity. But as the unicorn law says that being a woman in tech you will be eventually speaking about women in tech, I do so now. However I'm doing this not because it is a strong will of mine. Something happened which makes me to respond

Published on 7/30/2015

I've been presenting SC5 Style Guide several times during this year sharing my experience of using it for one of the SC5's clients, Elisa. Assuming that Elisa is a huge mobile operator with a lot of websites and a need to keep those websites visually consistent, there is no wonder that the SC5 Style Guide as a tool provides benefits there. But what about smaller websites? Would it be useful there? I did not know the answer to this question and wanted to experiment. The experiment was conducted on my blog codebase

Published on 2/11/2015

This time I would like to share my experience of keeping a codestyle in one of my working projects. This is about a new tool called JSCS which we have recently chosen with the team and now are very pleased with the result

Published on 9/12/2014

I use the same laptop for both work and personal needs. This is useful but makes me see to keeping my work-life balance. I do this simply — turn off all the applications running when I finish my working day in the evening. The only issue is not to forget to open them again next day. But this process can be automatized. :-)

Published on 6/30/2014

Long time ago I could read and learn about web development in Russian only. Later, having completed an English language course, I began to read articles and blogs in English more and more. The same went for conferences: I visited Russian-speaking conferences at first and later switched to English-speaking conferences in Europe. In both articles and conference talks, I noticed how the content was different depending on the language used. Sometime I even thought that the communities evolve in different ways and follow different directions

Published on 6/9/2014

As a mobile apps user you may be already familiar to drawers. They are quite popular solution for a side menu. Using Steroids HTML5/JavaScript framework for hybrid mobile applications, you can bring such an interface solution into your product very easy

Published on 6/4/2014

Let me present a stub for docpad-run project with bem-built static assets. If you ever wanted to be a generic blog holder equiped with nice and neat static files, here we go

Published on 5/26/2014

Recently I attended Front Trends 2014 in Warsaw. This is an awesome conference which you should (no, definitely have to!) attend in 2015. Besides incredible main programm Front Trends provides a set of Lighting Talks. This year I was a part of it presenting Steroids, a framework and a toolkit for developing HTML5 mobile apps. If you did not have a chance to hear it, this offline text presentation is for you

Published on 4/16/2014

The bem-core library goes futher and there already is 2.0.0 version available. This blog was safely switched to the new major version with some diff to the code. Now so can do you. Careful examination of the version changelog will help you with it. Look how I did this

Published on 4/9/2014

Depending on a project people prefer different ways to adapt BEM. This results into a range of tools for our choice. Today, I am translating Maxim Shkalin's description of the BEML templating pre-processor.

Willing to lighten the development with BEM I propose a tiny extension for the HTML syntax (yes, I used to writ all those long CSS classes manually). As the name BEMHTML is greedily taken by the Yandex guys, let us call it BEML

Published on 3/10/2014

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

Published on 2/25/2014

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

Published on 1/21/2014

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

Published on 1/6/2014

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

Published on 11/26/2013

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

Published on 10/31/2013

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

Published on 6/28/2013

This article features common problems that developers often face, or maybe used to face before the current open source era, when writing JavaScript for the client side; showcase of possible solutions to these problems and explanations of my choices

Published on 3/19/2013

As you might know, I recently run the BEM LOVE project to demonstrate how blocks can communicate with JavaScript