Ответы пользователя по тегу CSS
  • Нужно ли Frontend разработчику мониторить обновления?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    За обновлениями периодически нужно следить, просто, чтобы знать, что меняется, появляется или удаляется из новых версий. Нужно ли обновлять - это уже вопрос потребностей проекта, клиента, команды.

    Я обычно просматриваю изменения ключевых пакетов/библиотек раз в 1-3 месяца.

    В большом проекте ключевые пакеты/библиотеки может быть сложно обновить, особенно если меняется номер старшей (major) версии (например, Bootstrap v4 => v5). Несущественные изменения (minor), в некоторых случаях могут иметь ощутимые последствия, что-то может сломаться или изменится поведение.

    Я бы не стал просто так обновлять такой пакет, как Bootstrap. Если обновление ключевого пакета происходит, то это неизбежно увеличит нагрузку на QA команду (quality assurance - обеспечение качества, тестирование). В случае с Bootstrap, вероятно придется весь проект перетестировать. Без автоматического тестирования будет особенно тяжко.

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

    Если вы используете менеджер пакетов, например npm, то скорее всего он вам будет показывать предупреждения об обнаруженных уязвимостях в пакетах и варианты их устранения. За этим лучше следить, чтобы потом не было неприятных сюрпризов. Как правило, с менеджером пакетов это делать проще, достаточно будет проверить отдельные предупреждения, а не все пакеты.

    Ну и главное, не делать просто так обновления на текущей активной версии проекта. Чем дольше проект с обновленными пакетами будет находиться на тестировании, тем лучше.
    Ответ написан
    Комментировать
  • Datapicker криво отображает дату?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Используйте русскую локализацию:

    <script src="i18n/datepicker-ru.js"></script>
    $('#datepicker').datepicker($.datepicker.regional[ 'ru' ]);

    Скачать нужные ресурсы можно отсюда:
    https://github.com/jquery/jquery-ui/tree/master/ui/i18n

    Если вам нужен календарь на английском (или другом) языке, то задать первый день недели можно следующим образом:

    $('#datepicker').datepicker({ firstDay: 1 });
    // или
    $('#datepicker').datepicker('option', 'firstDay', 1);

    Посмотреть рабочий пример

    0 - воскресенье (Su - Sunday)
    1 - понедельник (Mo - Monday)
    и т.д.
    Ответ написан
    Комментировать
  • Как использовать встроенные стили css?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Встроенные стили имеет смысл использовать, когда нужно создать одну страничку, чтобы не было дополнительных файлов.

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

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

    Приложения JavaScript могут содержать упакованные стили и встраивают их в HTML при инициализации. Это вполне нормальная практика. Однако если стилей очень много, их обычно выносят в отдельный файл.
    Ответ написан
    Комментировать
  • Как по клику заменить слово на другое и при повторном клике обратно?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    <div class="clickme">
    Нажми на меня!
    </div>

    $('.clickme').click(function(){
      if (!$(this).data('status')) {
        $(this).html('Молодец! А еще раз слабо?');
        $(this).data('status', true);
      }
      else {
        $(this).html('Ну ты гигант! А может еще раз?');
        $(this).data('status', false);
      }
    });

    https://jsfiddle.net/alekseynemiro/bu0zfgz4/
    Ответ написан
    1 комментарий
  • Как сделать, чтобы внутренние страницы сайта открывались в определенной позиции?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Проще разместить якоря и переходить к ним (браузер сам переместит страницу к якорю):
    <h1 id="перейтиСюда">Заголовок</h1>
    ...
    <h1 id="илиСюда">Заголовок 2</h1>

    http://example.org/#перейтиСюда
    http://example.org/#илиСюда
    http://example.org/#idЭлементаНаСтранице
    Ответ написан
    6 комментариев
  • Как нужно чтоб выглядел текст?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Как я понимаю, проблема в шрифтах?

    Если так, то просто нужно указать необходимый шрифт(ы) в font-family:
    .detail{
        width: 100%;
        background-color: #dcd6c6;
        font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
    }

    Какой именно нужен, не скажу, поставил что первое попалось :)

    font-size можно еще поиграть.
    и color до кучи.
    В общем, проблема обширная, можно диссертацию писать :)
    Ответ написан
    2 комментария
  • Обучение по видео урокам. В чем фишка?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Вот помню, в наше время даже книжек порой не было и как-то умудрялись учиться :-)
    С интернетом тоже были проблемы. Удивительные были времена.

    Некоторые вещи лучше один раз увидеть (показать), чем сто раз услышать (рассказать).

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

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

    Так что учиться эффективно только на одних видео-уроках не получится.

    В видео можно показать основы. Причем чем меньше информации, тем меньше будет допущено ошибок и проще будет урок (технически реализуем и для восприятия пользователями). А все тонкости темы урока зритель должен изучать самостоятельно, читая статьи и книги.
    Ответ написан
    Комментировать
  • Верстка html шаблона для экспорта в пдф?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Таблицы для реализации "подчеркивания" и моноширинный шрифт (фиксированной ширины) для подставляемого текста.

    За счет фиксированного размера текста можно будет без проблем рассчитать максимальное число символов в строке и разбить по строкам.
    Ответ написан
    Комментировать
  • Смена языка на странице?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    А что, хорошая идея, локализовать сайты одними только HTML и CSS!

    Зачем нужны все эти JavaScript, PHP, ASP .NET, Perl, Python, Ruby и прочая непонятная белиберда. Это все прошлый век, будущее за HTML и CSS!

    Скоро не только сайты будут делаться одними только HTML и CSS, но и приложения для компьютеров, телефонов и даже холодильников. Популярные операционные системы в будущем будут переписаны на HTML и CSS. Детям в школах вместо русского языка и литературы будут преподавать HTML и CSS. Да что там, нефть будут обменивать на код HTML и CSS!

    Бред конечно, но это все возможно, вот пример (кликать по толстому тексту):
    jsfiddle.net/alekseynemiro/fzxLz35p

    Хотя почему бред? (не про нефть, конечно) Думаю, для мелких статичных проектов, вкупе с LESS или SCSS (для удобства) вполне можно использовать такой странный способ. Можно еще проще - скрывать блоки, но объем данных на странице будет больше. Псевдоклассу :target может быть найдется применение для решения проблемы передачи языка через адресную строку. Нужно подумать, но идея безумная :-) Применение, как минимум, JavaScript существенно упростит решение.
    Ответ написан
    Комментировать
  • Как сделать сеточную галерею на css?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Примерно так:
    ul{list-style-type:none;}
    li{display:inline;}
    li:nth-child(4):after { content:"\A"; white-space:pre; }

    \A - перевод строки.

    Либо можно ограничить ширину элементов.
    Ответ написан
    Комментировать