Задать вопрос

Irkov

I like CSS
Лайки

  • Как "перепрошить" мозг будущему программисту?

    tema_sun
    @tema_sun
    Тебе мозг надо не под программирование прошивать, а под жизнь в реальном мире.
    Во-первых, ты не "потеряешь" 4 года на обучение. Чему-то ты там научился, ну и диплом в конце концов лишним не будет.
    Во-вторых, программирование подходит вот вообще далеко не каждому. И тут надо смотреть правде в глаза. Нет ничего плохого в том, что ты не можешь быть программером. Я вот не могу быть танцором, ну и фиг с ним.

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

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

    Нужно заниматься только тем, что тебе нравится (разумеется, с поправкой на адекватность).
    Ответ написан
    3 комментария
    3 комментария

  • Как "перепрошить" мозг будущему программисту?

    delphinpro
    @delphinpro
    frontend developer
    Ну, ок, допустим, беру какую-нибудь задачу. Прочёл текст. А дальше-то что? Я не знаю как подойти к решению задачи, с чего начать, что вообще делать и чем закончить.

    Анализ, декомпозиция.
    Разбивайте общие задачи на более мелкие, элементарные.

    Задача: выпить кофе.

    Разбиваем на составляющие:
    • Достать турку
    • Налить воды
    • Добавить кофе
    • Сварить
    • Попить

    Подзадачу "Сварить" делим на еще более мелкие:
    • Зажечь газовую плиту
    • Поставить турку на конфорку
    • Довести до кипения

    Задачу "Зажечь газовую плиту" снова делим на составляющие:
    • Взять спички
    • Чиркнуть о коробок
    • Открыть подачу газа в конфорку
    • Поднести спичку к конфорке


    И т.д. До самых элементарных уровней.
    Ответ написан
    2 комментария
    2 комментария

  • Как лучше верстать сайты с векторными элементами?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Если не лень, то можно сохранить каждую фигуру отдельно(желательно в svg) и позиционировать на фоне, таким образом у фигур будет плавающая позиция и на других экранах можно перестроить по другому, убрать половину на мобильных и т.д.. выглядеть это будет примерно так :
    background: url(../images/other/decor-figure-1.svg) no-repeat 53% 6%,
            url(../images/other/decor-figure-2.svg) no-repeat 45% 22%,
            url(../images/other/decor-figure-3.svg) no-repeat 82% 22%,
            url(../images/other/decor-figure-4.svg) no-repeat 45% 96%,
            url(../images/other/decor-figure-5.svg) no-repeat 83% 82%
    Ответ написан
    11 комментариев
    11 комментариев

  • Как поставить hover на тачпад?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    CSS-детекция ненадёжна:
    https://developer.mozilla.org/en-US/docs/Web/CSS/@...
    https://developer.mozilla.org/en-US/docs/Web/CSS/@...

    В Android Chrome срабатывает какого-то дьявола первое:


    Лучше использовать любой JS-скрипт, определяющий сенсорный экран, ставить класс на body, после чего писать стили отдельно для этого случая. Стили для сенсора нужно ставить для :active вместо :hover.

    Я использую этот простой скрипт:
    Ответ написан
    7 комментариев
    7 комментариев

  • Как ограничить область влияния внешнего CSS файла?

    yarkov
    @yarkov
    Помог ответ? Отметь решением.
    <template shadowroot="open">
    По-моему это вообще только под флагом работает.
    100% вариант (сам вчера писал виджет, который встраиваться должен на любой сайт) это кастомный элемент:
    customElements.define('tag-name', class extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({ mode: 'open' }).appendChild(rootElement);
        }
      }
    );


    И в разметке пишем так:
    <tag-name>
    <link rel="stylesheet" href="путь/к/стилям/этого/элемента.css">
    <div class="container">Тут контент</div>
</tag-name>


    Ну и сами стили:
    :host .container {
    color: red;
}


    Если всё правильно сделано, то стили извне не влияют на разметку тега tag-name.
    Ответ написан
    4 комментария
    4 комментария

  • Как правильно внедрять БЭМ?

    @AlexS94
    Попытаюсь ответить вам по пунктам, так как сам в своё время задавался теми же вопросами.

    1. Если говорить об удобстве - читаемость хромает, но на прямую в разрез с методологией это не идёт. Если существует "оБЭМленый" Bootstrap и он ничем не уступает - используйте. Это по-настоящему продуманная и современная библиотека компонентов, соответствующая стандартам доступности. Отдельных соглашений на такие случаи не знаю.

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

    2. Касательно использования em: рекомендую ознакомиться с этой статьёй
    Пришло время попрощаться с единицей измерения px
    Для блоков отдельно назначать font-size в px не нужно. Попробуйте правильно использовать rem, взяв за константу, что он должен быть по умолчанию 16px. Если нужно будет - отвечу подробнее.

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

    3. В случае чистого БЭМ - создайте блок с одним шрифтом и другим и используйте его как микс.

    4. Если честно, стараться использовать готовые решения CMS можно, но я бы не рекомендовал. Когда работал с WP, всё время кастомизировал классы и вывод шаблона. На Битрикс с этим проще, можно даже собственный класс назначить для WISYWIG редактора.
    Вопрос в том можете ли вы себе позволить такую кастомизацию или нет. Если это требует сверх ресурсов - оно того не стоит.

    5. Я использую альтернативное именование, которое прижилось лучше всего в англоговорящих странах .block__element--modifier. На мой взгляд оно читаемее.

    Вообще для расширения "БЭМ кругозора" рекомендую ознакомиться с этими статьями
    More Transparent UI Code with Namespaces
    Battling BEM CSS: 10 Common Problems And How To Av...

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

    Надеюсь, что смог вам помочь, так как сам на решение этих вопрос вопросов потратил продолжительное время.
    Ответ написан
    5 комментариев
    5 комментариев

  • Где JavaScript работает быстрее: в браузере или в NodeJS?

    Lynn
    @Lynn
    nginx, js, css
    Учитывая что и там и там под капотом один и тот же V8 вопрос бессмысленный.

    Если конечно вы под браузером понимаете (как большинство) Chrome и его клонов.
    В Firefox другой движок, но и в этом случае корректнее сравнивать V8 vs SpiderMonkey.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как резиново сверстать этот макет?

    approximate_solution
    @approximate_solution
    JS Developer. Angular\React\Vue\Ember
    Задаете всё в процентах, текст и картинки можно уменьшить пропорционально ширине окна браузера с помощью vw

    Вопрос,
    не прибегая к медиа-запросам

    Блоки которые не должны быть на мобильных тоже будете скрывать без медиа-запросов?)

    Не нужно резину сводить к абсолюту, так как резиновая верстка чаще всего используется в совокупности с адаптивом. Без медиа-запросов, если у вас более-менее сложная верстка сейчас никуда.
    Ответ написан
    Комментировать
    Комментировать

  • Почему многие крупные сайты тормозят по самые помидоры?

    @XEHKOK
    Эта проблема нашего времени которую бизнес старается не замечать, ну или для бизнеса просто это не всегда рентабельно. Обычно когда я задаю тимлидам вопрос про комплексную оптимизацию, что-то вроде такого: Мы можем перевести веб сервер на HTTP 2.0, а еще мы можем обновить допустим MySQL с 5.х до 8.х, и все в таком духе, то в ответ я слышу что для бизнеса это не критично, бизнесу это не выгодно или не нужно. Я конечно понимаю что это звучит как капля в море, но эта капля больше положительная как плюс чем минус.
    Но это не единственная проблема, еще на сайты навешивают всякую мишуру, вроде таргета, аналитики, трекеров, виджетов, что в принципе можно можно увидеть открыв консоль браузера и посмотреть запросы во вкладке сеть, походить по страницам, нажимать на кнопки/ссылки, можно увидеть +100500 запросов при загрузке каждой страницы.
    Еще есть одна редкая проблема, когда разработчики пытаются делегировать большинство или весь функционал с бека на фронт JS, это про то когда пытаются делегировать логику которую и ненужно с бека переписывать на фронте. Конечно в чем-то это экономит возможно ресурсы, но делегировать логику на фронт и полностью полагаться на производительность пользователя не всегда круто для того самого пользователя, просто я считаю это важным моментом в плане качества сервисов для пользователей.
    Один из таких примеров сайт ВК, когда скрипты JS отваливаются из-за потери соединения с сайтом, или производительности устройства пользователя.
    В общем и целом, большинству бизнеса не важны все или частично эти моменты, все хотят болше дохода чем развития особенно бизнес РФ, эти моменты больше важны для тех кто ориентируется на качество для пользователя(и оптимизацию для него же).
    Ответ написан
    8 комментариев
    8 комментариев

  • Как верстать доступные сайты?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    То, о чём Вы спрашиваете, официально называется WAI-ARIA.
    Тут можно скачать бесплатно экранного диктора и с помощью него тестировать свои сайты, осуществляя навигацию по ним с помощью табуляции, а так же открывая специальное меню с помощью горячих клавиш (командная кнопка приложения, которую назначите, по умолчанию ins+f7, или f6? Не помню уже точно :-) )

    Доклады Вадима Макеева на ютубе:
    https://www.youtube.com/watch?v=MWJKwn_gKR4
    https://www.youtube.com/watch?v=ssJsjGZE2sc

    Если действительно умеете соблюдать семантику, то, скорее всего, Вы уже сделали достаточно.
    Рускоязычные ресурсы по доступности:
    https://weblind.ru/
    specialbank.ru/guide (В данный момент чёт не работает, но должен)
    Есть курс, где учат именно этому: https://kurmak.info/
    Статья на хабре: https://habr.com/ru/post/40730/ (там внизу есть полезные ссылки)
    Тут можно найти информацию по этому вопросу, в том числе перевод статей из первой ссылки англоязычных ресурсов

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

    Есть англоязычные ресурсы
    Про доступные компоненты: https://inclusive-components.design/ (нажимаете в хроме справа сверху "перевести страницу" и профит)
    Есть спецификация: https://www.w3.org/TR/wai-aria-1.1/#usage (аналогично, перевод в браузере и профит)
    MDN: https://developer.mozilla.org/en-US/docs/Learn/Acc...
    Ответ написан
    1 комментарий
    1 комментарий