Задать вопрос
  • Как поменять схему переноса?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Antonio09, сдается мне, трщ, вы и сами не понимаете, что хотите. Ибо:

    1. Требование на пикче — предложены 2 варианта, один правильный, второй хороший.
    2. «тут у меня потребовали использовать display: inline-block;» — это бред, если есть вменяемое обоснование — выкладывайте.
    3. Если вся эта канитель для того, чтобы обеспечить переносы при мобильном разрешении — вопрос поставлен некорректно, так как ответ на поставленный вопрос в пункте 1 и в ответе выше.
  • Как поменять схему переноса?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Antonio09, что флекс был не строкой (дефолтное значение), а колонкой.
  • Сфера применения бекэнд-шаблонизаторов?

    Егор Левоненко, все верно, бизнес-логика крутится на бэке, обмен происходит через http-протокол, SPA просто показывает то, что пришло в ответ на запрос.

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

    Поэтому я и задал этот вопрос,

    Нюансов, пожалуй очень много на самом деле. В принципе могу сказать, что для чего-либо функционального используется схема, где бэк независим и взаимодействует с окружающим миром через web api (Если что API это не только запросы с ответом типа json в интернете), а морда, она же приложение, она же чаще всего SPA крутится где-то в сторонке. На уровне с приложениями для устройств. Это позволяет обеспечить одинаковый подход к обращениям к основной логике при абсолютно диком разнообразии конечного продукта.

    Тем не менее это нужно далеко не всегда + я еще раз акцентирую внимание на безопасности. Не всегда, например для лендоса все это не нужно. Для сайта, который не использует расчеты, а просто отдает контент — тоже. Бложик какой на коленке — там вообще оптимально использовать какой-нить Jekyll, который не входит в обсуждение и так далее.

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

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

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

    На сим закончим, успехов на поприще.
  • Сфера применения бекэнд-шаблонизаторов?

    Егор Левоненко, нет, решение принимается на основе задачи.

    В случае SPA обычно предполагается REST API (что вовсе не обязательно), следовательно используется стек в виде JS-фреймворка, в котором просто нет backend-а по определению, а есть шаблоны, которые строятся на базе ответов из API.

    И все же еще раз скажу — стек, подход и все остальное решают в первую очередь задачи, которые стоят перед разработчиками. Не модное решение (хотя чаще всего именно оно), а именно задача. Ну и призма навыков и знаний. Факторов в действительности много.
  • Как правильно свертстать блок карточек?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    dmitriu256, изучи флексы, а потом сможешь сам понимать, что нагенерино бутстрапом. Там ничего сложного, почти все значения дефолтные.
  • Как позиционировать и адаптировать без пустого пространства?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    alekamisleforma, кстати, если под «Но.. это вообще нормально так верстать?» ты имеешь в виду, не стоило ли сделать дублирование контента и показывать один или другой в зависимости от разрешения — иной раз в очень частных случаях, например, когда ты осуществляешь прогрессивное улучшение верстки и дублируешь контент, который зависит от JS. Т.е. если ты можешь безболезненно обойтись без дублирование — обойдись.
  • Как позиционировать и адаптировать без пустого пространства?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    alekamisleforma, да, это абсолютно нормально, если ты не выстрелил себе в ногу, набедокурив с поддержкой. Часто такое бывает, но никак не относится к методе.

    По крайней мере именно к твоему макету такой вариант исполнения подходит.

    А вот на счет стилей я бы на твоем месте написал наоборот, как я указал выше по принципу mobile first. То, что у тебя идет в начале обернуть в @media (min-width: 800px) {. А то, что после оставить без медиазапроса.

    Можно пойти дальше и написать, как четкие поцоны: чтобы конфликтные стили не пересекались вообще, т.е. например:

    .search{
      color: red;
      ....
    }
    @media (max-width: 799.99px) {
      .search{
        width: 100%;
        ....
      }
    @media (min-width: 800px) {
      .search{
        position: absolute;
        right: 0;
        width: 75%;
        ....
      }


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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    bach1, смотри алгоритм, что я показываю по ссылке, и реализуй это в виде логики, опираясь на то, что я написал. И тогда ты сможешь вводить любое стартовое значение позиции стрелок. Может быть тебе станет проще, если я скажу, что тут такая же логика (почти), как в классической задаче о поездах из точки А и Б? Все исходные данные у тебя есть, ты точно знаешь, с какой скоростью двигаются стрелки.
  • Почему при использовании свойства flex один элемент растягивается по высоте из-за рядом стоящего?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    dyuisenov, если что, то у тебя и .oportunities-list__item и .oportunities-list__index должны быть флексами. Управляемыми. Тогда и бокс встанет туда, куда ты его метишь, и цифра внутри бокса.
  • Почему при использовании свойства flex один элемент растягивается по высоте из-за рядом стоящего?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    dyuisenov, для того, чтобы ты самостоятельно смог дальше разобраться, я и прикрепил ссылку на спеку. Посмотри ее внимательно, чтобы понять, как это все работает. Слева ссылки по теме (если ты с пекарни).

    vertical-align, кстати, это табличное свойство для управления инлайновыми элементами в блочных. Если напхать костылей, можно и на нем сделать твой пример, это факт, но твое решение — флексы.
  • Как бороться с undefined?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Максим Ленский, в программировании всегда есть место для «святой войны».
  • Как на vue реализовать зажатие по элементу?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    be9st, вторая часть ответа об этом. Внимательно почитай и осознай. Лучше я уже сегодня не выдам.
  • Как на vue реализовать зажатие по элементу?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    be9st, ага, ты в одном потоке все держишь, я так понял. Когда я замечаю подобное усложнение компонента, я разбиваю его на еще один. Что позволяет обрабатывать каждый случай и не искать в цикле, о чем речь. А теперь по сути, если каждый элемент, на который ты кликаешь ты сделаешь компонентом, то:
    1. Ты сможешь использовать счетчик в его data.
    2. Засекать как-то так.

    И если тебе не критично, когда именно будет удален элемент, то сравнивать время на mouseup событии. А если тебе надо, чтобы ровно с секунды триггерилось и удалялось, то в setTimeout, как у тебя, и при этом можно хранить состояние pressed, скажем, и если оно все еще true на момент завершения timout-а, всплывать метод для родителя.
  • Как бороться с undefined?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Максим Ленский, это бывает, это нормально)

    По секрету скажу, что проверку на undefined разумнее всего делать, скажем, в асинхронке, когда к тебе данные еще не приехали, переменных нет, а как-то не обосраться с выводом надо.

    Ну и в данном случае можно было массив заранее промапать на условие undefined, чтобы туда что-то вписать. И потом уже первым тернарником выводить. Я так иногда делаю, когда мне надо в цикле Vue вывести массив, у которого из коробки нет, и нет необходимости создавать ID, а ключ какой-то бы надо задать. На индекс цикла он так-то ругается. Я и мапаю под watch-ером. За счет проверки undefined при расширении массива (например что-то догрузилось в конец существующего), я точно знаю, что не затру имеющиеся данные.
  • Как разделить критический css?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    BoriHagen, тут 2 фактора. Наличие желания и оплата за труд.
    А тот факт, что проект самописка увеличивает шансы на вменяемое разделение. К тому же на самом деле от движка, если не пытаться на нем или на ЯП реализовать сборку билдов, то вообще этим занимается webpack, как сборщик, или сконфигурированная сборка на gulp. Все, что нужно в конечном виде — просто подключить скомпилированное в шаблоны.
  • Как разделить критический css?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    BoriHagen, нет, в данной схеме не должно быть «проблемного файла», должен быть «первые по необходимости элементы», например сетка, чтобы сборка сайта на глаза у пользователя не напоминала создание франкенштейна, а затем отдельный файлом все остальное. Вот все остальное и можно грузить таким образом, «отложив» загрузку.

    Но при все эффективности данного метода он аморально устарел, так как давно уже принято просто не засирать билд стилей всем, что есть на странице. Под каждый шаблон свой билд. Или вообще динамическая подгрузка стилей на каком-нить JS-фреймворке. ИМХО, лучше всего с этим справляется OctoberCMS со своим combined и может сливать как js, так и css, и более того, билдить из исходников на scss. Из коробки. Нет в целом ничего страшного в том, чтобы просто импортировать код по необходимости. Т.е. разделить на компоненты и линковать их в документ. Да, тут можно перестараться и выстрелить себе в ногу, засрав просто поток запросов, но если у тебя их несколько штук, а в целом на страницах требуется всего ничего описания, помимо сетки и базового конфига, то ну такое.
  • Как правильно разрабатывать версию сайта для слабовидящих?

    Я сталкивался с этой темой и видел ресурсы. Другие правда, но в твоем ответе я вижу ссылку, где приложил руку Макеев. И кратко взаглянул на пару ссылок. И я уверен, тебе этого ресурса будет за глаза и за уши. Если мало — бобро пожаловать в документацию W3C. Там это все в общем и целом есть.

    Где-то у меня даже есть на полпути брошенный проект, может даже когда-нибудь вернусь к нему) В остальном по либам смотри скачивания. Если старые, но скачивают, то скорее всего просто условия не поменялись и оно до сих пор работает. Если не менялось и не скачивается никем, то такое я бы не ворошил.
  • Как разделить критический css?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    BoriHagen, начинает загружаться по событию load. Если не понимаешь, как это работает и не можешь прочитать такую простую конструкцию, не рекомендую его использовать. Велик шанс напортачить.

    Лучше воспользуйся первым вариантом. Самую малость получишь варнинг при валидации (на который всем насрать). Он простой и работает в конечном счете почти так же.
  • Как разделить критический css?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    BoriHagen, весь хак прямо перед тобой. Одна из его вариаций.
  • Как разделить критический css?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    BoriHagen, сливать в кеш браузера. Иными словами проблема не в том, как такое каждый раз грузить, а как не упустить юзера, который не захотел эту срань грузить первый раз.