• Где верстать email html?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Фрэймворк:
    https://mjml.io/

    Расширение для vscode где можно сразу live превью смотреть результата и компилировать в html
    https://marketplace.visualstudio.com/items?itemNam...
    Ответ написан
    Комментировать
  • Как используют в верстке vh для размеров шрифтов?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    vw/vh - это довольно специфичный кейс для указания размера шрифта. Он не всегда и не везде нужен.
    А вот за использование пикселей надо уже наказывать =)

    Самое простое - ну хотя бы rem использовать.
    Как?

    Ну опять же самое простое решение, это задать для корня размер 62,5%

    :root{
      font-size: 62.5%
    }


    Это даст вам базовый размер шрифта в 10 пикселей (1rem = 10px) и вам будет удобно, без вычислений, задавать любые размер в rem.

    body { font-size: 1.4rem; /* 14px */ }
    h1 { font-size: 3.2rem; /* 32px */ }


    Ну логика понятна, надеюсь.

    Если используете препроцессор, то можно написать функцию для пересчета пикселей в ремы и использовать ее везде.

    @function toRem($px) {
      /* 16px – это значение шрифта по умолчанию в большинстве агентов */
      @return $px / 16px * 1rem;
    }
    
    body { font-size: toRem(14px); }
    h1 { font-size: toRem(32px); }
    Ответ написан
    9 комментариев
  • Какой алгоритм быстрее и почему?

    @mayton2019
    Bigdata Engineer
    Тебе не нужно сортировать все 10 000 000 элементов чтоб взять два минимальных. Достаточно одного прохода
    с отслеживанием двух наименьших {m1,m2} . И кейсов сравнений будет немного. Новый элемент больше - игнорируем. Новый элемент меньше обоих - вставляем в голову. Новый между ними - вставляем в центр.
    Ответ написан
    1 комментарий
  • Как запретить обратную анимацию при снятии мышки с элемента?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Да, без @keyframes не обойтись.
    При отводе мыши сначала доводим rotateY до 360 (чтобы анимация продолжалась вправо), а затем очень быстро сбрасываем с 360 до 0 - так карточка незаметно перейдёт в первоначальное состояние.
    Ответ написан
    1 комментарий
  • Как можно разрешить просмотр страницы только в горизонтальном положении устройства?

    ThunderCat
    @ThunderCat Куратор тега JavaScript
    {PHP, MySql, HTML, JS, CSS} developer
    Используйте media запросы:
    @media only screen and (min-device-width: 480px) 
                       and (max-device-width: 640px) 
                       and (orientation: landscape) {
    /*
    тут стили - например дисплей: нон;
    */
    }
    Ответ написан
    Комментировать
  • Base64 формат картинки, что делать на фронтенде?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    что делать на фронтенде

    Пойти к бэкендеру и сказать: ты шо, дурак, зачем нам 470киллобайт не кешируемых данных по сети каждый раз гонять?!
    И пинать чтоб присылал ссылку.
    (а на деле я так понимаю там не одна картинка такая и не кешируемых данных в разы больше гоняется, что вообще ужас)

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

    А ещё есть лимиты на длину строки. В разных движках причём разные. Так что, теоритически, наверное, можно упереться в лимит строки и картинка не отобразится или будет битая.
    Ответ написан
    7 комментариев
  • Кнопка создать select?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    Вывести данные для опций один раз, и положить их в константу:
    spoiler
    $options = [
        [null, $_LNG['TYPE_ORDER']],
        ['select_all', $_LNG['ALL_TYPES']],
        ['select_domain', $_LNG['DOMAIN']],
        ['select_server', $_LNG['SERVER']],
        ['select_ssl', $_LNG['SSL']],
        ['select_desing', $_LNG['DESING']],
        ['select_script', $_LNG['SCRIPT']],
        ['select_layout', $_LNG['LAYOUT']],
        ['select_adv', $_LNG['ADV']],
        ['select_seo', $_LNG['SEO']],
    ];
    
    printf('const options = %s;', json_encode($options));


    Вот такая JS функция динамически создаёт из этих options полноценный элемент select со всеми опциями:
    createSelect = () => {
      const select = document.createElement('select');
      options.forEach(([value, title]) => {
          const option = document.createElement('option');
          option.innerText = title;
          if (value) {
            option.value = value;
          } else {
            option.setAttribute('disabled', true);
            option.setAttribute('selected', true);
          }
          select.appendChild(option);
        });
      return select;
    };

    Создали селект – одновременно создаём кнопку, но пока её прячем. Референс на созданный селект и кнопку держим. По событию выбора в свежесозданном селекте – показать изначально скрытую кнопку "Добавить".

    Нажатие на кнопку создаёт ещё один селект-с-кнопкой.

    Ответ написан
    3 комментария
  • Как весь блок заполнить точками?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Повторяющимся радиальным градиентом
    https://jsfiddle.net/Ankhena/h21s4o0m/
    Ответ написан
    Комментировать
  • Нужен совет опытных WEB разработчиков?

    @rPman
    Самый неправильный способ обучения - с конца. Это очень неэффективно если не бессмысленно, изучать программирование непоследовательно.

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

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

    Советую изучать с низов, самостоятельно, чтобы было понимание каждого шага, всего что происходит.
    * операционные системы, процессор и многопоточность, сети,...
    глубоко изучать это не требуется но базовые понимания нужны чтобы не получать медленное приложение только потому что не знал что каждый твой запрос в tcp это 'туда-сюда', и это медленно (десятки миллисекунд), что одновременно два человека пытающиеся что то изменить на сайте нужно разруливать чтобы не было конфликтов и т.п.
    * бакэнд и фронтэнд
    буквально что значит запрос и генерация ответа, какие бывают способы организации этого бакэнда (http rest и к примеру websocket), не понимание разницы между бакэндом и фронтэндом у новичков рождает абсурдные вопросы как из javascript изменить переменную php (и наоборот)... в чем разница между генерацией страницы на сервере и в браузере.
    * html, css,..
    верстка и дизайн, отдельный мир браузерных стандартов, исторических наслоений,. когда стоит применять фреймы, почему шрифты по разному выглядят, разные устройства и размеры экранов, разные способы взаимодействия (сенсорный экран, мышь, клавиатура)...
    * базы данных
    еще более огромный мир атомарных транзакций, индексов, нормальных форм и прочего
    * девопс
    без умения выбрать инструмент, настроить тулчейны, среду разработки, среду исполнения (веб сервер), настроить бакапы и прочее пытаться что то разрабатывать это как в слепую гулять по лесу, будешь постоянно на ветки натыкаться
    ...
    это я еще про системную аналитику не сказал, обычно прежде чем что то создавать, нужно продумать как это все делать, что такое технический долг и т.п., а еще есть тестирование, обслуживание, работа с отказами (сервер сдох, база упала, как все восстановить), обновление на живую и прочие веселья

    без понимания всего этого, даже поверхностного, будешь натыкаться на огромные дыры в разработке.
    Ответ написан
    7 комментариев
  • Как сделать такую анимацию стрелки?

    Seasle
    @Seasle Куратор тега CSS
    \( ゚ヮ゚)/
    @keyframes arrow {
      0% {
        width: 60px;
      }
      
      25% {
        width: 260px;
        transform: translateX(0px);
      }
      
      50%, 75% {
        width: 60px;
        transform: translateX(200px);
      }
    }
    Ответ написан
    4 комментария
  • Как заставить работать colspan или существует другой способ компоновки?

    firedragon
    @firedragon
    Senior .NET developer
    Ответ написан
    Комментировать
  • Top-level selectors may not contain the parent selector "&"?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    как можно исправить эту проблему??

    Ровно так, как написано в тексте ошибки: Не использовать "&" на верхнем уровне.

    UPD

    main.scss
    @mixin example() {
      &::hover { color: red; } // Так можно
      // но миксин можно использовать только внутри родительского селектора
    }
    
    &::hover { color: red; } // Так нельзя, нет родителя
    
    .block {
      &::hover { color: red; } // Так можно, есть родительский селектор (.block)
    }
    
    @include example(); // Так нельзя, внутри обращение к родителю, а его нет
    
    .block {
      @include example(); // Так можно
    }
    Ответ написан
    4 комментария
  • Как проверить строку, чтобы узнать, можно ли её парсить?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Разработчик ПО и IT-инженер
    try { 
        const rq = JSON.parse(data)
    } catch (err) {
        console.log('error:', err)
    }
    Ответ написан
    Комментировать
  • Как сделать плавное исчезновение бордера у формы?

    @mikilikala
    На фронте
    transition: border 0.7s ease-out;
    Вырежи эту строку и вставь в button
    Ответ написан
    6 комментариев
  • Почему таблица bootstrap находится внизу?

    v3shin
    @v3shin
    Веб-шаман
    6373474d7b1f3970106507.png
    А это что за растопырка? Похоже, у вас код невалидный, и браузер старается как может исправить его.
    Ответ написан
    2 комментария
  • Какой стек технологий выбрать для разработки экосистемы проектов?

    GavriKos
    @GavriKos
    Ну как бе команда спецов у вас есть - пусть и решает.

    Под ваше ТЗ подходят любые ЯП - потому что ТЗ говно.
    Ответ написан
    4 комментария
  • Как определить свой уровень программирования?

    index0h
    @index0h
    PHP, Golang. https://github.com/index0h
    Эти уровни - абстракция, причем зависящая от компании. Пройдите несколько собеседований и спросите, что думает о вас интервьюер.

    Юниор чаще всего - это программист с в основном теоретическими знаниями, либо наоборот только практическими знаниями. Он умеет решать более-менее стандартные задачи. Юниора обязательно надо учить. При получении нового задания он "создает" свое решение.

    Мидл - знания уже подкреплены опытом, может (в отличии от юниора) предсказывать последствия тех, или иных решений. Может решать задачи по проектированию модуля, или его части. Получив новое задание - может скомпоновать из уже существующих решений свое и реализовать его.

    Синьйор - понимает не только то зачем использовать ту, или иную технологию, а еще и как она работает, например почему при HL форин ключи сожрут io hdd. Может спроектировать и вести средний по размерам проект. Получив новое задание он уже знает как его решить кучей способов, выбор заключается только в правильности интеграции решения.

    -----------------

    Многое зависит от интервьюера.
    У меня был случай, собеседование на php senior developer: поговорили про HL оптимизации, архитектурные предложения для решения неких задач, способы оптимизации и т.д., а потом:
    - перейдем к практике: что произойдет в таком коде:
    $a = 5 + '5abc' + 'abc5';
    - произойдет следующее: я посмотрю blame скрипта и поговорю с автором этой строчки, что бы узнать, что такого хренового в жизни может произойти, что бы он позволил себе это написать.
    - ну, тут вопрос на приведение типов
    - 10, но вы в своей практике с подобным сталкивались?
    - нет
    - вот и я не сталкивался...
    Ответ написан
    1 комментарий
  • Почему при обновлении сайта, в placeholder появляется что-то невидимое, из-за чего placeholder не виден?

    Ankhena
    @Ankhena Куратор тега HTML
    Нежно люблю верстку
    Вот ваши пробелы
    62cdbbfc2b0f0336639059.jpeg
    Ответ написан
    Комментировать
  • Как в VS Code настроить видимость SASS-переменных из импортированых файлов?

    SeaInside
    @SeaInside
    10 лет пилю все эти штуки
    Есть расширение SCSS IntelliSense, оно ищет декларации по всему, что находится в воркспейсе
    Ответ написан
    2 комментария