Design Systems — review of vocabulary and terms
## Introduction In general, *design systems* is a systematic approach to creating and maintaining consistent user interfaces which coherently communicate the brand values and empower user experience.
Aspect of in-company communication for innovation
Company internal communication is a crucial aspect of forming innovation-friendly environment, in which employees can effectively apply their expertise and creativity for achieving business goals. Creative people need “emotional ownership” in the goals and objectives, which becomes even more important speaking about the corporate world where such people are not co-founders but employees. (Sarasvathy, 2008) Establishing right communicational practices very much contributes to developing this kind of ownership and makes innovation possible.
What makes entrepreneurs entrepreneurial?
Last year, during my studies of IDBM program at Aalto University, I took a course "Design in Innovation Context" which covered entrepreneurial innovations and behavior. Even out of study context but in everyday life I have always been interested in the answer to the question “What is so special about entrepreneurs that makes them who they are?”. Below, I have tried to summarize the knowledge I got and answer this question.
Simple yet promising structure for React/Redux project
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.
Week 44, 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](https://iamstarkov.com/). 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.
Living SC5 Styleguide, the next level
Simple React Angular project
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.
Materials for your React hackathon
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.
Visual diffs for the images in a git repo
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.
Dealing atomically with icon fonts
Tag cloud of random sizes in pure CSS
An answer to the question which should not have been asked
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.
Style-guide the smaller things
I've been presenting [SC5 Style Guide](http://styleguide.sc5.io/) 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.
JSCS in use
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.
Run on time (about Mac applications)
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. :-)
The so different frontend community and how we deal with it
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.
Using side drawers in mobile apps on Steroids.js
Docpad with the taste of BEM
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.
HTML5 mobile apps with native UI on Steroids
Recently I attended [Front Trends 2014](http://2014.front-trends.com/) 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](http://www.appgyver.com/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.
Switching to bem-core#v2
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](https://github.com/varya/varya.github.com/commit/f21f810b7cb4e16206ef3d088a8b2c38b615f8f3). Now so can do you. Careful examination of the version changelog will help you with it. Look how I did this.
BEML - an HTML preprocessor for BEM
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`.
Borschik helps with remote static assets
YM Modular System. Why?
Blocks are bricks, and bundles are buildings
A couple of days ago I was asked about some basic things of using [BEM project stub](https://github.com/bem/project-stub/tree/14e24fd17ba66a357a2f6fcdce045065b4eb5d6c) 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.
Custom fonts with no cramp
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 Best Way to Hide
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.
Patterned triangles with CSS