Category: Web-Dev

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.

• Live sample: https://jsfiddle.net/7h3eoogk/

html:

<div class="row">
  <div class="col-6 col-sm-12">
    Left column. 50% on large screens. 100% on smaller screens.
  </div>
  <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.
  </div>
</div>

css:

.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%;
  }
}

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.

• https://www.kickstarter.com/discover/categories/technology/web
• https://www.kickstarter.com/discover/categories/technology/software

WebStorm / PHPStorm / IntelliJ Shortcuts

• Cmnd + Optn + L = Code reformat
• Cmnd + Shft + F = Find in path
• Cmnd + Shft + O = Open file

• https://smacss.com/
• https://maintainablecss.com/chapters/reuse/
• https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
• https://appendto.com/2014/04/oocss/
• https://code.tutsplus.com/tutorials/3-key-software-principles-you-must-understand–net-25161

BEM colors:

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

BEM code sample:

<div class="c-card">
  <img class="c-card-img" src="http://via.placeholder.com/350x150">
  <div class="c-card-header">
    Featured
  </div>
  <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>
  <div class="c-card-footer">
    Posted 12 days ago
  </div>
</div>

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

Links:

• https://en.bem.info/
• http://getbem.com/
• https://css-tricks.com/bem-101/
• https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
• https://philipwalton.com/articles/side-effects-in-css/
• https://medium.com/@ZeeCoder/a-practical-introduction-to-the-bem-css-methodology-eeef578bac8c
• BEM for beginners
• BEM by example
• MindBEMding – getting your head ’round BEM syntax
• Battling BEM – 5 common problems and how to avoid them
• https://en.bem.info/forum/66/
• https://github.com/getbem/awesome-bem
• https://github.com/sturobson/BEM-resources
• https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/

• monkeyuser.com

Real Programmers don’t comment their code. If it was hard to write, it should be hard to understand.

Six Stages of Debugging

1. That can’t happen.
2. That doesn’t happen on my machine.
3. That shouldn’t happen.
4. Why does that happen?
5. Oh, I see.
6. How did that ever work?

https://jsfiddle.net/07x1tek8/1/

Insert javascript file into document dynamically via javascript:

(function () {
	var script = document.createElement('script');
	script.type = 'text/javascript';
    script.src = 'https://code.jquery.com/jquery-3.3.1.min.js';
    document.head.appendChild(script);
	// document.body.appendChild(script);
	
	setTimeout(function(){
		$('div').slideUp(5000);
	}, 5000);
}());