vladsadretdinov

https://stackedit.io/app

1. Как склеить коммиты и зачем это нужно https://htmlacademy.ru/blog/27-how-to-squash-commits-and-why-it-is-needed

PS Олег Петров - Я покажу более безопасный способ чем git push --force. Можно форсить ветки просто через плюс типа git push origin +master и тогда форсанётся только ветка, которую отправляют

2. Стиль кода Академии HTML http://codeguide.academy/html-css.html https://github.com/htmlacademy/codeguide
3. Узнаем о поддержке CSS-свойств браузерами https://caniuse.com/

vladsadretdinov

Продуманная оптимизация http://optimization.guide/ мини

vladsadretdinov

.visually-hidden:not(:focus):not(:active) {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;

vladsadretdinov

// width of devices
$mobile-width: 320px;
$tablet-width: 768px;
$desktop-width: 1150px;
$mobile-width-only: 767px;
$retina-dpi: 144dpi;
$retina-dppx: 1.5dppx;

$mobile-data-width: 260px;
$tablet-data-width: 668px;

vladsadretdinov

@media (min-resolution: @retina-dpi), (min-resolution: @retina-dppx) {
      background-image: url("img/bg-header@2x.jpg");
      background-size: 1338px auto;
    }
    
@media (min-width: 768px) and (min-resolution: 144dpi),
       (min-width: 768px) and (min-resolution: 1.5dppx) {
  .page-header__logo {
    background-image: url("img/bg-header@2x.jpg");
    background-size: 1338px auto;

vladsadretdinov

<picture>
  <source type="image/webp" media="(min-width: 1200px)" srcset="img/photo-1-desktop.webp 1x, img/photo-1-desktop@2x.webp 2x">
  <source type="image/webp" media="(min-width: 768px)" srcset="img/photo-1-tablet.webp 1x, img/photo-1-tablet@2x.webp 2x">
  <source type="image/webp" srcset="img/photo-1-mobile.webp 1x, img/photo-1-mobile@2x.webp 2x">

  <source media="(min-width: 1200px)" srcset="img/photo-1-desktop.jpg 1x, img/photo-1-desktop@2x.jpg 2x">
  <source media="(min-width: 768px)" srcset="img/photo-1-tablet.jpg 1x, img/photo-1-tablet@2x.jpg 2x">
  <img class="works-item__image" src="img/photo-1-mobile.jpg" srcset="img/photo-1-mobile@2x.jpg 2x" alt="Пример нашей работы">
</picture>

vladsadretdinov

<a class="page-header__logo">
  <img width="100%" src="img/bb-logo-adaptive.svg">
</a>

<a class="page-header__logo">
    <svg width="370" height="153" viewBox="0 0 370 153">
      <style>
        .page-header__logo-barbershop {
          display: none;
        }

vladsadretdinov

http://jsfiddle.net/simurai/7GCGr/

https://gist.github.com/darsain/3a8e344f655621ce1d4f

https://elrumordelaluz.github.io/micro-svg-spreact/

<svg style="display:none">
  <symbol viewBox="0 0 16 16" id="icon-login">
    <polygon points="0 7 7.01 7 7.01 4.06 10.96 8.01 7.01 11.91 7.01 9.06 0 9.02 0 7"/><polygon points="7.01 0 7.01 2 14.03 2 14.03 13.99 7.01 13.99 7.01 16 16 16 16 0 7.01 0"/>
  </symbol>

vladsadretdinov

#!/bin/sh
#
# Delete Python's compiled *.pyc and __pycache__ files like a pro
# https://gist.github.com/jakubroztocil/7892597
#
# Usage:
# Delele *.pyc and __pycache__ files recursively in the current directory:
# $ pyc  
# 
# The same, but under /path:

vladsadretdinov

Use (most) macOS style keyboard shortcuts on Windows

Make Windows PC's shortcut act like macOS (Mac OS X)

With this AutoHotKey script, you can use most macOS style shortcuts (eg, cmd+c, cmd+v, ...) on Windows with a standard PC keyboard.

Note that:

1. you shouldn't change the modifier keys mapping with keyboard DIP. This script assumes you use a standard PC keyboard layout, and wish to use shortcuts as if it was a mac keyboard layout.
2. To use cmd + shift + ↑ / ↓ / ← / → (select text between cursor and top / bottom / beginning of line / end of line), You should disable the Between input languages shotcut from Control Panel\Clock, Language, and Region\Language\Advanced settings > Change lanugage bar hot keys due to conflicting.