Павел Радьков

Я пользуюсь гайдами фейсбука для Open Graph картинок: https://developers.facebook.com/docs/sharing/webma...

Они рекомендуют 1200×630 px для большой картинки.

Mobile first верстать удобнее: от меньшего экрана к большему, от простого к сложному. При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили (как в mobile last). Меньше переопределений — чище код, легче верстальщику.

Существует признак плохого кода: если вам приходится обнулять стили, значит, что вы их задали где-то слишком рано. При mobile last обнулять приходится часто, при mobile first — очень редко.

С точки зрения браузера, чем меньше переопределений, тем быстрее парсинг.

А если заморочиться с оптимизацией, то при помощи некоторых программных средств можно пересобрать все стили для больших экранов в отдельный файл и загружать их только, когда сайт открыт на больших экранах. Т.е. грузить меньше килобайт и вообще не парсить лишнее.

При равной специфичности двух селекторов, применяется тот, который объявлен последним (ниже по коду).
Чтобы что-то переопределить, пишите (или подключайте) новые стили ниже.

https://developer.mozilla.org/ru/docs/Web/CSS/Spec...

https://codepen.io/paulradzkov/pen/vjEdbM

Вместо рекурсивного определения переменной, рекурсивно вызываем миксин:

@num: 100;
.mixin(@num) when (@num > 0) {
  .mixin(@num - 1);
  .square-@{num} {
    animation-delay: @num;
  }
}
.mixin(@num);

Если вам нужно получить в итоге селектор `.less-level-1 .less-level-2 { ... }` то вариант только такой:

.less {
    &-level-1 {
       display: block; 
    }
    
    &-level-1 &-level-2 {
        display: block;
    }
}

https://www.lists.design
Они же на GitHub https://github.com/listsfordesign/Lists

Если вы рисуете в Sketch, то https://www.invisionapp.com/craft#data

Для Хрома есть расширения
https://chrome.google.com/webstore/detail/visualpi...
https://chrome.google.com/webstore/detail/page-mon...
https://chrome.google.com/webstore/detail/distill-...
и наверное есть другие.

Работоспособность не проверял, но заявлено, что у последних двух можно поставить интервал проверок 5 секунд

Ссылка внутри ссылки — невалидный код. Браузер пытается его исправить разметки самостоятельно и ломает внешний вид.

Нужно положить дополнительные ссылки рядом, сестринскими элементами внутри общего родительского элемента. При наведении на этого родителя, позиционировать дополнительные ссылки поверх основной ссылки с картинкой.

Я вижу такой путь: 1) свой open-source проект → 2) свой платный продукт → 3) свой бизнес.

1) Создание своих собственных инструментов для решения типовых повседневных задач — это сложнее и интереснее, чем просто делать таски. Так можно дополнительно прокачать себя в теории, сохранить свой опыт в виде готовых решений и сократить будущие трудозатраты на скучную рутинную работу.

2) Используя собственные наработки, сделать свой платный продукт, который решает более крупную задачу. Повышение масштаба задачи — это, опять же, сложно и интересно. Продвигая и продавая свой продукт вы напрямую сталкиваетесь с типовыми задачами бизнеса: маркетинг, реклама, администрирование. Это шанс не бросая основную работу получить опыт в бизнесе и оценить, нравится вам это или нет.

3) Если будете чувствовать себя достаточно уверенно, можно начинать свой full-time бизнес. Может быть ваш платный продукт будет развиваться стремительно и потребует 100% вашего времени. Может быть вы даже решите уйти в оффлайн-бизнес. Но опыт, полученный на предыдущих этапах, поможет.

Я сейчас на первом этапе и что там будет на втором и третьем, могу лишь вообразить. Но, по крайней мере, такой план даёт осмысленное направление для развития.