• Как заставить работать vs code с github с использование ssh ключа в windows 10?

    serjikz
    @serjikz
    web-developer
    Всегда работаю через терминал, но вот решил жене попробовать таки настроить именно в vscode.

    Добавляем ключ в системный агент SSH:
    ssh-add ~/.ssh/your_private_key

    Ну и да, может быть ещё нужно допом в ~/.ssh/ создать файл config (если его ещё нет) и там можно записать следующее

    Host github.com (тут может быть любой хост ваш нужный, от которого ключ приватный)
      IdentityFile ~/.ssh/your_private_key


    Должно помочь. У меня перестал просить ключ.

    P.S. Я для мака это делаю, где на windows – уж думаю найдёте))

    P.P.S. Естественно, ВСЕГДА указывайте пароль от ssh-ключа. Не пренебрегайте безопасностью.
    Ответ написан
    Комментировать
  • С помощью каких стилей или скриптов можно добиться масштабирования сайта?

    serjikz
    @serjikz
    web-developer
    Можно сделать полностью резиновый сайт, который будет вменяемо смотреться на любом разрешении и получится как раз то, что вы хотите.

    Да, будет много @media, в частности сейчас у нас на проекте 21 media с изменениями размера шрифта, а все размеры полностью в rem и сайт резиновый.

    Да, это долбеж с размерами шрифта, да есть нюансы с выстраиванием некоторых элементов, но это вполне реально и сайт выглядит правильно. Хочется прям что-то дико огромное типа 8k – пожалуйста, просто больше @media.

    По итогу ваша задача – выбрать нужные размеры для всех разрешений, посмотреть, на каких @media нужно менять размер шрифта и на какое значение (шаг в px у нас к примеру иногда 2 иногда 1.5 иногда 1).

    Если хочется пример – ну вот такой балаган будет:
    Хотите вы с этим возиться? Если да – то видимо вам хорошо платят за это, но за 100k я б таким не морочился.
    Ответ написан
  • Как сделать, чтобы блок не уходил за пределы родительского?

    serjikz
    @serjikz
    web-developer
    1. Измерить блок-родитель
    2. Установить ограничение в точке, где будет останавливаться передвигающийся (ширина родитея наверно отнять сколько-то px так как у вас рамка там ну и точка остановки может должна быть ещё левее чем рамка начинается, вычислить это так)
    3. При движении вычислять каждый раз координаты правой грани передвигающегося блока и если координаты правой грани равны или больше чем ограничение - то приравнивать позицию left как координату ограничения минус ширина передвигающегося блока.

    Это решит выпадания из родителя слева и справа.

    Нужно чтоб не выпадал из потока (грубо говоря вниз не уезжал) - задайте элементу position: relative; или используйте margin-left/translateX для передвижения

    В целом тут js-а не много. Писать готовое решение не хочу вам, чтоб подумали и погуглили самостоятельно, как это можно сделать всё))

    CSS тут не поможет, position тут не причем, двигать можно хоть меняя margin-left, хоть translateX(), хоть будет передвигаемый с absolute (тогда блок родитель схлопнется, имейте ввиду, абсолютное позиционирование выводит блок из потока), хоть с relative, как угодно.
    Ответ написан
    Комментировать
  • Почему текст блока с абсолютным позиционированием внутри flex контейнера не растягивается на всю ширину?

    serjikz
    @serjikz
    web-developer
    Проблема не во flex-контейнере, а в особенности абсолютного позиционирования и центрирования таким образом (через transform: translatex()).

    Любой блок, спозиционированный абсолютно и которому не даны размеры, будет всегда пытаться ужать самого себя (и контент в себе) если он вылазит за родителя. Уберите transform - увидите, что блок у вас прилипает к правому краю вашего элемента и он уже в 2 строки сразу. Если вы сделаете left меньше (в вашем случае хотя бы 48%)- текст будет в одну строку даже с transform (но эффекта центрирования конечно тогда не будет). Всё из-за особенности позиционирования. Если использовать right - будет тоже самое.

    В то же время свойство transform делает следующее - оно не перемещает сам по себе элемент, а перемещает, можно сказать, отражение этого элемента. То есть сам по себе элемент остается на своём месте (left: 50%;) а transform просто двигает его "отражение" влево. Грубо говоря браузер фоткает ваш элемент, скрывает его и фотку двигает на нужное расстояние. Элемент то у вас в 2 строки - значит и на "фотке" он будет в 2 строки.

    Решить это можно только путем задания ширины блоку, который позиционируется абсолютно (задать ему нужную ширину).

    Также можно ещё как вариант центрировать блок через отрицательный левый margin, задавая точное значение в px (половину от ширины блока, который позиционируете).

    Если вам нужна резина - подумайте над тем, чтобы отказаться от абсолютного позиционирования. Если вам нужна и резина и абсолютное позиционирование - делайте ширину этому блоку 100% (будет он тянуться на всю ширину его родителя).

    Оч надеюсь, что объяснил понятно, в тексте такие штуки объяснять достаточно проблематично.
    Ответ написан
    Комментировать
  • Как реализовать вложенность классов в SCSS?

    serjikz
    @serjikz
    web-developer
    Вам уже высказали в комментариях, что подход ужасен и это всё неправильно и тд и тп. Но если вам таки очень прям очень и вот очень хочется писать плохой код - никто этого делать не запретит.

    Какое может быть решение - вы можете сделать переменную внутри родителя. То есть вот так:

    .card {
      $parent: ".card";
    
      &__avatar {
        $avatar: ".#{$parent}-avatar";
    
        #{$avatar}__image {
            // ну и далее я думаю подход ясен
        }
      }
    }


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

    Можно все переменные возможных названий повтыкать как раз в самое начало и из них комбинировать всё, что надо (как раз на основании этого можно и миксин пробовать пилить с циклом возможно и тд и тп).

    Но честно - лучше воспользоваться БЭМ и всем, что он пропагандирует. Если вы у себя в профиле пишите, что вы front-end - пожалуйста, ведите себя как front-end и не пишите плохой код.
    Ответ написан
  • Как настроить div?

    serjikz
    @serjikz
    web-developer
    Для красного display: flex; justify-content: space-around; и нужные padding сверху и снизу (может еще справа и слева понадобятся). Для зеленых - размеры просто, для синего - align-self: center; ну и тоже размеры если надо

    Советую глянуть сюда: https://webref.ru/css/align-self и поклацать примеры.
    Ответ написан
  • Несколько вопросов по HTML и CSS?

    serjikz
    @serjikz
    web-developer
    Я считаю что нужно полное разделение (собственно, чем и является компонентный подход). Без глобальных стилей жить вряд ли будет удобно. К примеру от normalize я не могу ну вот никак отказаться. Обертки (некоторые) в любом случае будут лишние у вас и будут загромождать код, к сожалению пока мы живем с флексами и флоатами не имея гридов - придется с этим мириться.

    Многие вовсе отказываются от БЭМ когда используют компонентный подход и обзывают элементы абракадаброй. Я лично от него не могу отказаться. Да, smart-grid, возможно, стоит попробовать, но опять же это не универсальное решение, как и бутстрап (ну вы меня понимаете), потому что замечательные дизайнеры и заказчики хотят от нас добиться феерических вещей, которые будут кружить голову каждого посетителя, который заходит на наш сайт.

    Универсального, к сожалению, а может и к счастью, вы не найдете. К сожалению - потому что хотелось бы все делать просто и быстро. К счастью - потому что работа за счет этой "неуниверсальности" не скучная и, естественно, прибыльная, так как не каждого можно научить хорошо верстать.

    Вспомните (если конечно застали) верстку таблицами. Та еще жуть была, но ничего, работали как-то. Мое личное мнение - работать как работаем, просто не отставать от быстро идущего паровоза под названием Front-end. Идти к идеалу и добиваться универсальности мы будем еще долго, если вообще придем когда-нибудь с нашими все теми же дизайнерами и заказчиками.
    Ответ написан
    8 комментариев
  • Как изменить высоту iframe через @media?

    serjikz
    @serjikz
    web-developer
    А вы не пробовали просто для iframe в css задать ширину и высоту?. Либо можете задать блоку оборачивающему нужные параметры а также position: relative и потом для iframe 100% высота и ширина а также абсолютное позиционирование.
    Ответ написан
    3 комментария
  • Как исправить проблему?

    serjikz
    @serjikz
    web-developer
    Если не хотите менять внешне никак - то тогда просто поставьте перед "на" <br>. Для десктопов скройте его через display: none; а для мобильных наоборот покажите. Этого будет более чем достаточно.
    Ответ написан
    Комментировать
  • Кто в production использует flexbox и какие хаки используете для определенных свойств?

    serjikz
    @serjikz
    web-developer
    htmlacademy перешли уже полностью на flexbox даже на своем базовом интенсиве html и css. Год назад еще учили float и inline-block. Вопрос не в том, надо переходить или нет. Надо использовать нужные техники в нужных местах. Я около 2х лет использую flex во всех своих работах (и в фриланс и на постоянке). Да, проблемы есть и они очень и очень забавны местами и решение этих проблем тоже имеется. К примеру есть проблема следующая - на iOS 11 в сафари сайт смотрится отлично, на iOS 10 нет. И думай в чем дело. Но опять же подобные проблемы выявляются только тестами и решаются без особого труда. IE 10-11 и Edge - тоже самое, только тесты и исправлять все что там не так. Опять же вряд ли вам нужно делать pixel perfect проекты для этих браузеров и поэтому проблемы использования flex я не вижу.
    Ответ написан
    Комментировать
  • Как лучше отверстать это?

    serjikz
    @serjikz
    web-developer
    Использовать flex. Конечно же, на мобильном разрешении у вас будет перенос всего этого и блоки будут друг под другом
    Ответ написан
  • Вопрос о препроцессоре less + БЭМ?

    serjikz
    @serjikz
    web-developer
    Пред P.S. Для начала я очень надеюсь что вы используете normalize в своих проектах

    1. Вы можете использовать чистый css в less файлах, но я сомневаюсь, что вам будет не интересно работать с вложенностью, которую позволяет сделать less.
    Этот less
    .footer {
        color: #fff;
        a {
            font-size: 24px;
        }
    }

    развернется в .footer {color: #fff;} .footer a {font-size:24px} это просто пример, я думаю вы понимаете в чем плюс такого подхода, а если еще работать с & то вообще все хорошо и удобно как по мне. Также использование переменных и миксинов тоже очень и очень порой помогает.
    Итог - никто вас не наругает за то, что у вас чистый css в less файлах, но стремитесь less узнавать и упрощать свой код, как раз используя возможности less (надеемся что многое скоро будет в чистом CSS, но до этого надо дожить)

    2. Каждая страница уникальна - да, на каждой странице есть свои компоненты, этим страницы и уникальны. Из компонентов страница и строится. Нет компонентов - нет страницы. Если у вас один проект с множеством страниц - у вас в любом случае будет одинаковый (ну или примерно одинаковый) подвал, также, возможно, меню, шапка и тп. Все зависит от проекта и части каждой страницы будут формироваться из одних и тех же блоков, за стилизацию которых будут отвечать файлы .less те самые (ну конечно потом все собирается в один css и как бы он за все отвечает, но вы поняли меня, надеюсь). И из-за этого как раз я ваш вопрос не понял. На любой странице проекта будет компонент, который вы уже верстали и вы просто используете его снова, просто скопировать-вставить, а не верстаете снова с 0.

    Или вы пытаетесь сделать какой-то костяк общих компонентов, при этом постоянно работаете с лендингами абсолютно разного дизайна? Тогда ваш вопрос понятен и вам не стоит пытаться тягать в абсолютно разные проекты одни и те же файлы. Запаритесь так переписывать каждый раз все стили. Для каждого проекта свой костяк файлов, которые для него нужны. Конечно, какой-то один, может два, а может 3 файла у вас будут одинаковыми на всех проектах, где у вас общие стили, которые вы используете всегда (у меня к примеру миксины, кнопки ну и конечно тот же normalise)

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

    Также почитайте, что такое миксины. Если вы просто будете писать @media (max-width: 767px) это не миксин, а просто медиа-выражение. Миксины - совсем другая вещь.
    Ответ написан
    2 комментария
  • Премущества и недостатки Google Fonts?

    serjikz
    @serjikz
    web-developer
    Советую глянуть хоть и старую, но хорошую статью по шрифтам от google https://habrahabr.ru/post/159907/

    По поводу SEO что-то я ничего не слышал за такое)) Оно никак не связано с google fonts. На счет минусов - в google есть достаточное количество косячных шрифтов, поэтому надо смотреть каждый раз, не с косяком ли у вас шрифт (сравнить с макетом от дизайнера и с тем что у вас в верстке получается, если с косяком - подключать руками с сервера).
    Ответ написан
  • Как правильно верстать Landing Page?

    serjikz
    @serjikz
    web-developer
    1. Как в дизайне. Если заказчик/дизайнер сказал делать так - значит так. Если нет - значит нет.
    2. Как в дизайне (1920 не видел ширины центровщика ни разу, смотри вспомогательные линии голубого цвета в документе от края контента до края контента)
    3. Опять же - в дизайне как сделано? Делайте так, как сделал дизайнер.
    Ответ написан
    2 комментария
  • Правильно ли avocode отображает line-height?

    serjikz
    @serjikz
    web-developer
    Проверить проще всего - откройте в фотошопе и посмотрите, правильно или нет. Вам тут никто не скажет однозначно, правильно ли в вашем случае показывает потому что макета нет. Но такой line-height быть не должен это точно, как вам ответили в комментарии - это косяк дизайнера возможно.
    Ответ написан
    Комментировать
  • Как правильно и быстро определить тень из photoshop'a?

    serjikz
    @serjikz
    web-developer
    Если ФШ более менее новый - правой кнопкой на слое с тенью, в менюшке всплывшей выбрать "Копировать css".
    Ответ написан
    Комментировать
  • Можно ли наложить картинки друг на друга с помощью flexbox?

    serjikz
    @serjikz
    web-developer
    Я так понял это что-то типа слайдера изображений. Флексы так не умеют. Ищите подходящий скрипт слайдера под это дело
    Ответ написан
    Комментировать
  • Как в iframe менять css?

    serjikz
    @serjikz
    web-developer
    Этого нельзя делать, если страница загружена с чужого домена.
    Ответ написан
    Комментировать
  • Как взять один элемент из flexbox и переместить его в конец строки?

    serjikz
    @serjikz
    web-developer
    Эти селекторы должны иметь такие правила:
    .flex-container-header {
      display: flex;
      align-items: center;
      width: 100%;
    }
    
    .flex-container-header .flex-container-header-sign-in {
      margin-left: auto;
    }
    Ответ написан
    Комментировать
  • Как развернуть GitHub проект (Git репозиторий) на хостинге?

    serjikz
    @serjikz
    web-developer
    GitHub никак. Это веб-сервис, а не какая-то программа, которую можно куда-то поставить на другой хостинг к примеру. За все отвечает Git (система контроля версий как раз то, что вам дает мониторинг изменений и тд и тп).
    Как поставить Git - вот так
    https://git-scm.com/book/ru/v1/Git-%D0%BD%D0%B0-%D...
    https://www.youtube.com/watch?v=tMbG6RuI2dM к примеру. Гуглите просто хорошенько.
    Ответ написан