• Как использовать тег picture при создании адаптивных изображений?

    @IvanPsarev
    It-любитель
    Заводим тег picture внутри которого указываем дефолтную картинку:
    <picture>
        <img class="image"
          src="img/mobile.jpg"
          alt="Описание" width="260" height="260">
    <picture>

    В данном коде у нас везде просто загрузится "img/mobile.jpg".
    Как это можно улучшить? Можно использовать прогрессивные файлы изображений такие как webp (почитать про них стоит отдельно, вкратце - они меньше весят при одинаковом качестве картинки).
    Добавляем условие для показа новой картинки:
    <picture>
        <source srcset="img/mobile.webp" 
          type="image/webp">
        <img class="image"
          src="img/mobile.jpg"
          alt="Описание" width="260" height="260">
    <picture>

    Здесь, если браузер поддерживает .webp будет загружена картинка: img/mobile.webp.
    Допустим у нас есть брейкпоинт на десктоп при 768px где нам нужно показывать картинку более высокого качества (либо вообще другую). Код можно улучшить так:
    <picture>
        <source media="(min-width:768px)" 
          srcset="img/desktop.webp"
          type="image/webp">
        <source media="(min-width:768px)"
          srcset="img/picture/desktop.jpg">
        <source srcset="img/mobile.webp" 
          type="image/webp">
        <img class="image"
          src="img/mobile.jpg"
          alt="Описание" width="260" height="260">
    <picture>

    Тут мы добавили еще 2 условия: если окно шире 768px и браузер поддерживает webp - грузится desktop.webp, если не поддерживает то - desktop.jpg.
    Данную конструкцию можно еще расширить. Например мы хотим чтобы на retina-дисплеях картинки показывались в более высоком качестве. Для этого у нас должны быть копии всех наших картинок но с увеличенным в 2 раза разрешением. Например, наши картинки будут именоваться как mobile@1x.jpg (260х260рх). плюс эти же картинки, но в 2 раза большем разрешении: mobile@2x.jpg (520х520рх). Загружать их, или нет будет решать браузер, на основании данных о плотности пикселей на экрана полученных от системы (это тоже отдельная тема для обсуждения, есть статьис названием что-то вроде "Пиксель на самом деле не пиксель". Точного названия не помню, но смысл в том, что на "так называемых" Retina-дисплеях при фактическом разрешении, например, 2500х1600px браузер будет "считать", что окно шириной 1250px). Короче для "ретинизации" код нужно изменить так:
    <picture>
      <source media="(min-width:768px)" 
        srcset="img/desktop@1x.webp, img/webp/desktop@2x.webp 2x"
        type="image/webp">
      <source media="(min-width:768px)"
        srcset="img/picture/desktop@1x.jpg, img/picture/desktop@2x.jpg 2x">
      <source srcset="img/webp/mobile@1x.webp, img/webp/mobile@2x.webp 2x" 
        type="image/webp">
      <img class="image" 
        src="img/mobile@1x.jpg" 
        srcset="img/mobile@2x.jpg 2x"
        alt="Описание" width="260" height="260">
    </picture>

    Вся эта громадина читается сверху:
    - первый <source>: если ширина экрана больше 768рх, браузер поддерживает webp и плотность пикселей 2x грузится desktop@2x.webp, если плотность пикселей 1х - desktop@1x.webp
    - если webp не поддерживается, то второй <source> - все тоже самое для .jpg
    - если экран уже 768px - третий <source>
    - во всех остальных случаях и в случае если браузер не поддерживает загрузится обычный <img>.
    Нужно понимать, что для такого подхода требуется иметь для одной картинки 4 файла и это только для одной ширины экрана:
    mobile@1x.jpg, mobile@2x.jpg, mobile@1x.webp, mobile@2x.webp.
    И еще столько же для desktop.
    Вот как-то так, можно добавить еще брейкпоинт для tablet - все по примеру :)
    Ответ написан
  • Как сделать адаптивный svg с возможностью менять цвет без JS?

    Если ты вставляешь иллюстрацию не инлайн, т.е. не код <svg>bla bla bla</svg>, то тебе нужно вставлять через тег
    <object type="image/svg+xml" data="images/your.svg" >


    А в самом коде иллюстрации добавить
    <?xml-stylesheet type="text/css" href="style.css" ?>
    и управлять из стилей как обычно.
    Ответ написан
  • Как грамотно использовать rem в адаптивной вёрстке?

    batyrmastyr
    @batyrmastyr
    базовый шрифт не 16px, а какие-нибудь 14.25px±50%

    За такое надо исправить должность на "дизагнира". Дробные пиксели все браузеры отображают как хотят: кто-то округлит до целых, кто-то до сотых, как у вас, а кто-то честно отрисует даже 14,674956954px. Добавьте субпиксельное сглаживание и получите кучу вопросов "а что у вас шрифт такой мыльный?".

    Реально ли пользователи подстраивают размер шрифта?

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

    Чего точно не стоит делать, так это смешивать пиксели и типографские пункты. Либо {font-size: 1em, line-height: 1.25em}, либо {font-size: 16px, line-height: 20px}. У нас сейчас решили использовать пиксели чтобы не думать, чему будут равны 1,4 пункта, особенно если кому-то приспичит сменить размер шрифта. Хотя лично я считаю допустимым при вёрстке в пикселях иногда использовать em для указания отступов, например, в :first-letter.
    Ответ написан
  • Как грамотно использовать rem в адаптивной вёрстке?

    @cluberr
    Соль в том что что все размеры типографики, размеры заголовков и их отступы, отступы абзацев и высота строки задаются относительно базового шрифта например 16px. И если нужно изменить всю типографику под конкретное устройство, то в медиазапросе меняется всего одно значение - базовый шрифт, остальное меняется пропорционально.
    https://betterwebtype.com/rhythm-in-web-typography
    https://www.youtube.com/watch?v=b9M_7ytm-iM
    Ответ написан
  • Как грамотно использовать rem в адаптивной вёрстке?

    Если говорить о мобильном, то если разрешения экрана у него Full HD, то это не значит что контент на нем будет отображаться так же как на десктопе с тем же разрешением. Для этого существует мета тег viewport. Уменьшая размер шрифта для мобильного, ты уменьшаешь его не относительно 1920, а относительно 320px на минимальном для мобилок. Это я к тому что можно использовать просто пиксели для шрифта и выглядеть будет нормально. Просто регулируй в медиа-запросах и все
    Ответ написан
  • Существуют ли психотерапевты для программистов?

    @skrimafonolog
    Существуют ли такие специалисты, которые помогают программистам с профессиональным выгоранием?


    Это зависит не от профессии.

    А от фирмы. Которая наймет или не наймет такого в штат.
    Или от самого программиста, который пойдет или не пойдет к специалисту за свои кровные.

    Профессиональное выгорание - бывает у кого угодно.
    Я вот у фотографов встречал сие.
    Ответ написан
  • Существуют ли психотерапевты для программистов?

    @pavnen
    Посмотри полезный телеграмм - канал "Psy в IT"

    А по поводу не делиться с коллегами - так сейчас столько уставших и слово "выгорание" такое модное, что вряд ли этим кого-то удивишь, а интересный разговор может получиться
    Ответ написан
  • Как удалить фон без потери информации?

    irishmann
    @irishmann
    Научись пользоваться дебаггером
    Gimp. Добавить альфа-канал для слоя, в меню "Цвет" выбрать "Цвет в альфа канал".
    Результаты:

    Итоговый png:
    5d5bd29a94a61206765226.png
    На разных фонах:
    5d5bd4bac3e44663912841.png
    Ответ написан
  • Как удалить фон без потери информации?

    Задача довольно частая, поэтому к ней есть множество решений и подходов. И специализированные инструменты в редакторах и плагины. Одной из трудных считается задача отделить волосы/шерсть от сложного фона. И тоже решается.

    Надо сделать хорошую маску – картинку в оттенках серого, где чем светлее пиксель, тем виднее будет исходная. Где пиксели черные – полная прозрачность.

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

    Рассмотрите каждый из каналов, R, G и B – где наиболее контрастно выглядит разница между объектом и фоном?
    В данном случае это в канале красного, R. Возьмём его за основу для будущей маски.

    Скопируйте его, и Уровнями поднимите контраст, глядя на гистограмму, чтобы от чёрного до белого были пиксели. Потом инвертируйте маску и примените к слою с исходной картинкой.
    результат
    5d5bb9c49e101149369921.png
    Ответ написан
  • В каком стеке web технологий одновременно: высокий порог входа, высокие зарплаты и в целом не проблема найти удалёнку?

    iCoderXXI
    @iCoderXXI
    React.JS/FrontEnd engineer
    Удаленных вакансий на чисто React+Redux довольно немало, правда реальный рейт 100-120 тыр в месяц. Если в Москве/Питере в офисе, то реально найти 150+. В целом это всё.

    Причем это рейты для крепких мидл+, и требования весьма высоки.

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

    Ну и да, мидлов+ и особенно синьоров катастрофически не хватает на проектах и за ними охотятся повсеместно.

    Но рейтов 30-40 у.е., чтобы работать пару-тройку часов в день и не напрягаться, про такое я не слышал, и так хотел бы каждый первый наверное, но объективная реальность, увы, она другая...
    Ответ написан
  • В каком стеке web технологий одновременно: высокий порог входа, высокие зарплаты и в целом не проблема найти удалёнку?

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

    Развивайтесь в сторону создания более сложных вещей - там и технологии поймутся.
    Более сложные - это всевозможные веб-приложения, забудьте о сайтах.
    А приложения могут быть уже какими угодно и с большим разбросом по сложности - может быть CRUD админка которую любой индус накидает, а может быть какая-нибудь замороченная система бизнес-аналитики, где кнопки в браузере - это только 10% от всего функционала, и это одна из причин почему ищут фуллстеков. Фуллстек в состоянии взять фичу и сделать её полностью, а не "накидать кнопок и ждать бекенд" или "сделать апишку и отдать фронту".
    Ответ написан
  • Как верстать 18 колоночный макет?

    mroforolhc
    @mroforolhc
    умственно отсталый
    1. npm install bootstrap
    2. Создаёшь файл bootstrap_custom.scss и _settings.scss

    bootstrap_custom.scss

    // Settings
    @import "./settings";
    
    // Required
    @import "../../node_modules/bootstrap/scss/functions";
    @import "../../node_modules/bootstrap/scss/variables";
    @import "../../node_modules/bootstrap/scss/mixins";
    
    // Optional
    @import "../../node_modules/bootstrap/scss/grid";
    @import "../../node_modules/bootstrap/scss/utilities/display";
    @import "../../node_modules/bootstrap/scss/utilities/flex";

    Можно подключить что-то ещё, по желанию.
    _settings.scss

    $grid-columns: 18;  // количество колонок
    
    $grid-gutter-width: 30px; // отступ между колонками (по желанию можно для каждого брейкпоинта указать свой отступ
    
    $grid-breakpoints: (  // брейпоинты
      xs: 0,
      sm: 576px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );
    
    $container-max-widths: (  // максимальная ширина контейнера
      sm: 540px,
      md: 720px,
      lg: 960px,
      xl: 1140px
    );


    А дело всё в том, что в исходниках бутстрапа после каждой переменной указан флаг !default, благодаря которому значения по умолчанию присваиваются только если эта переменная не была раньше инициализирована. Поэтому мы можем создать конфиг и импортировать его раньше, чем исходники бутстрапа.
    Ответ написан
  • Как верстать 18 колоночный макет?

    @esvlad
    Веб-разработчик
    В чём проблема? Верстай не колонками, меньше проблем, больше управляемости. Заказчика убеди, что на 1024 будет УГ, а не сайт, пусть дизы делают макет на 1024 нормальный и 640(320) для мобилок, для таких сайтов обычно просят ещё макет на 1366 (ведь тексты никуда не денешь), припомни им, что на планшетах есть ещё и книжный режим на 768 и меньше, как тогда сайт должен выглядеть?, если агрятся и цена меньше 100k шли их куда подальше, сэкономишь нервы.
    Ответ написан
  • Насколько важную роль при устройстве на работу программистом играют собственные OpenSource проекты?

    askhat
    @askhat
    Full Stack Developer
    Наличие публичных репозиториев как минимум покажет, как вы работаете с VCS. А если вы не умеете работать в VCS, значит компании придётся тратить ресурсы на ваше обучение, что снижает вашу ценность. Тим лид будет очень зол, если в первый же рабочий день вы запушите в мастер.
    Во-вторых это покажет, что вы не стыдитесь своей работы—не пишете говнокод. Здесь не идёт речь о благотворительности, вы не лишаетесь прав на свою работу, она по прежнему принадлежит вам. К тому же, вы ведь тоже используете открытые библиотеки, т.е. благотворительностью не занимаетесь, но активно её получаете.
    И последнее, ваши репозитории иллюстрируют ваш кругозор. Даже если вы устраиваетесь на позицию скажем верстальщика, и параллельно поддерживаете библиотеку для скажем нейро-сетей, это увеличит количество опций которые могут ожидать вас на новом рабочем месте.
    Ответ написан
  • Насколько важную роль при устройстве на работу программистом играют собственные OpenSource проекты?

    Sanes
    @Sanes
    !
    Открытые проекты делают для себя и делятся с сообществом. Нет здесь никакой благотворитольности, спите спокойно.
    Ответ написан
  • Как ходить на "пристрелочные" интервью (когда нет цели трудоустроиться)?

    zolt85
    @zolt85
    Программист
    Периодически, и с переменным успехом, хожу на такие собеседования. Начальнику сказал открыто, что мониторю рынок, уходить никуда не собираюсь, но время такое, что случиться может все что угодно.

    На самом собеседовании сразу говорю,что меня все устраивает на прежнем месте работы, но вдруг Вы сможете сделать предложение, от которого я не смогу отказаться? Отказов по причине, мол "чо тут разговаривать, и так все ясно" не получал.

    Занимаю позицию тимлида команды разработчиков на текущем месте работы.
    Ответ написан
  • Как ходить на "пристрелочные" интервью (когда нет цели трудоустроиться)?

    banderos120
    @banderos120
    Играю на балалайке
    Если у вас нет конкретной цели устраиваться на другую работу, то и своего начальника нет необходимости предупреждать, этим вы освободите и его и себя от лишней нервотрепки.

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

    @SZolotov
    разрабатываю на Xamarin,WPF,Qt, Asp.net
    Нужен кто-то, кто будет понимать страдающего, т.е. то, о чем он говорит, конкретно, например что его гложит в javascript'е, с чем затык, почему не получается и т.п. Но в то же время, чтобы этот специалист не влиял на карьеру человека.

    Обычно это бармен с опытом работы от 5-ти лет, в хорошем заведении общепита.

    Знаю кучу примеров, когда достаточно опытные люди просто бросали программирование и уходили в фермерство и прочие другие проф.деятельности.

    А почему вы думаете что они поступили плохо? В программировании ничего хорошего, кроме зарплаты, нет. Всё остальное только минусы или попытка оправдать себя. Жаль что это начинаешь понимать только со стажем 10+

    Но вот смотришь на работу этого спеца и видишь, что он "сдает", угасает на глазах.

    В таких ситуациях лучшего способа чем увольнение еще не придумали. Вдруг человек сварщиком в детстве мечтал работать, но его засосало офисное болото? Хороший сварщик не сильно меньше хорошего программиста получает.

    Идея "психолог для программиста" вроде как интересная. И мне кажется, что она уже реализована в каких-нибудь супер крупных компаниях, типа Epam, Accenture и пр. Вы сталкивались с такой реализацией психологов?

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

    @auoa16
    "Для программистов" вряд ли существуют, по крайней мере в том виде, в котором Вы себе представляете. Я говорю о
    например что его гложит в javascript'е, с чем затык, почему не получается

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

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

    Вопрос профессионального выгорания особо остро стоит у программистов - тут я соглашусь, специфика такая. Но это не значит, что для лечения нужно быть с головы до ног погруженным в IT. Высококвалифицированному психотерапевту изучить особенности профессионального выгорания программистов от а до я не составит труда за неделю-другую, и для этого ему совсем не нужно знать javascript)
    Ответ написан