Simplicity vs Complexity

Complexity eats a lot of time and resources.
The amount of time and resources increases exponentially with the complexity of the system.
Complexity can be measured by lines of code, levels of hierarchy and amount of tools used.
Linear is much better than nested.
Simpler system takes much less brain power to understand the logic what also increases developer efficiency and reduces amount of issues due to being less tired and more possible issues.
Simpler is much easier to debug and to maintain and to extend.

Flexbox responsive columns


<div class="row">
  <div class="col-6 col-sm-12">
    Left column. 50% on large screens. 100% on smaller screens.
  <div class="col-6 col-sm-12 col-right">
    Right column. 50% on large screens. 100% on smaller screens. Has different background for visual difference.


.row {
  display: flex;
  flex-wrap: wrap;

.col-6 {
  flex: 0 0 50%;
  background-color: #eee;

.col-right {
  background-color: #dde;

@media (max-width: 576px) {
  .col-sm-12 {
    flex-basis: 100%;

Web-Dev Notes

DRY is often misinterpreted as the necessity to never repeat the exact same thing twice. This is impractical and usually counterproductive, and can lead to forced abstractions, over-thought and over-engineered code.Harry Roberts

DRY, SRP, Modularity etc is not a ultimate goal or strict rule. It is just a principle and recommendation.


BEM colors:

  • .primary
  • .secondary
  • .tertiary
  • .light
  • .dark

BEM code sample:

<div class="c-card">
  <img class="c-card-img" src="">
  <div class="c-card-header">
  <div class="c-card-body">
    <h4 class="c-card-title">Card title</h4>
    <div class="c-card-text">Card additional content.</div>
    <a href="#" class="button button-primary">Link</a>
  <div class="c-card-footer">
    Posted 12 days ago

Folder structure:

  • components: reusable components. For example: c-pager
  • layout: layout styles, like header, footer, sidebar
  • pages: context specific styles. For example: contact-us
  • utilities: utility helper classes with single function. Often using !important to boost their specificity. For example: u-text-center


Add javascript dynamically via javascript

Insert javascript file into document dynamically via javascript:

(function () {
	var script = document.createElement('script');
	script.type = 'text/javascript';
    script.src = '';
	// document.body.appendChild(script);
	}, 5000);