• Почему не отображаются шрифты, хотя подключены?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Ну как минимум должно быть font-family: FormulaCondensed; а не font-family: Formula Condensed; либо у подключенного шрифта надо поменять название
    Ответ написан
    9 комментариев
  • Где есть годные БЕСПЛАТНЫЕ уроки для vue.js?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Ответ написан
    Комментировать
  • Когда лучше всего грузить пооекты на behance?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Слышал «лайвхак»: менять превьюшку, которая отображается в ленте, раз в несколько дней. Это позволяет получить больше просмотров.
    Ответ написан
    1 комментарий
  • Как парсить и выводить JSON в HTML с помощью JavaScript?

    @dimentimor
    Например:
    var data = {
    	name: 'Jack',
    	items: {
    		dog: 1,
    		car: 1,
    		phone: 2,
    	},
    };
    
    // объект в json
    var json = JSON.stringify(data); // {"name":"Jack","items":{"dog":1,"car":1,"phone":2}}
    
    // json в объект
    var obj = JSON.parse(json); // объект


    Когда получаем json- преобразуем его в объект, а дальше уже в зависимости от структуры данных
    var data = JSON.parse('{"name":"Jack","items":{"dog":1,"car":1,"phone":2}}');
    
    var header = '<h2>My name is ' + data.name + '</h2>';
    var list = '';
    
    for (var i in data.items) {
    	list += '<li>' + i + ': ' + data.items[i] + ' шт. </li>';
    }
    
    document.getElementById('div').innerHTML += header;
    document.getElementById('div').innerHTML += '<ul>' + list + '</ul>';
    
    // Конечно, лучше создавать элементы через
    // var div = document.createElement('div');
    // наполнять через div.innerHTML = "text";
    // и добавлять их через element.appendChild(div);

    1978d2a5f51544268810b11dc1357ee7.jpg
    Ответ написан
    Комментировать
  • Какие проблемы решает качественный дизайн сайта?

    @Insayt
    Ну тут надо уточнить, что дизайн сайтов/приложений не является продуктом. Это услуга.
    "Картошка" - это продукт. "Доставка картошки" - это услуга. Вы предоставляете услуги, соответственно ставить вопросы надо исходя из понимая этого.

    Бизнес выбирает поставщика услуг по нескольким пунктам:
    1. Доступность - важно что бы было легко вас найти.
    2. Понимание проблем клиента - важно что бы поставщик услуг четко понимал как его деятельность скажется на нашем бизнесе.
    3. Скорость реакции сотрудников и их вежливость - тут думаю все понятно, если на email отвечают неделями и на от*бись, то такой поставщик услуг не получит заказ.


    В контексте вашего вопроса речь идёт о "Понимании проблем клиента".
    И тут важнее не написать большой список, а выбрать конкретный пункт и давить на него. Объясню:

    1. Увеличение продаж - на этот пункт вы влияете очень косвенно (ниже объясню почему). Потребитель больше будет смотреть на цену и скорость доставки, чем на форму кнопочки "Перейти в корзину".
    2. Привлечение внимания - это тоже не ваша работа. Привлекают внимание маркетологи. Клиент даст рекламу в директ, и она будет привлекать внимание. Если вы занимаетесь дизайном рекламных баннеров, то тогда можно говорить о привлечении внимания, но в контексте вашей деятельности вы привлечением внимания к продукту/услуге заказчика не занимаетесь.
    3. Большая конкурентоспособность/отстройка от конкурентов - это тоже не про вас. Конкурентоспособность никак не соотносится с визуальной составляющей. Вы можете сделать идеальную упаковку для пиццы, но если её везут 3 часа, то никакой конкурентоспособности быть не может.
    Отстройка от конкурентов - это тоже не про вас. Немного погуглите про то что такое "отстройка от конкурентов", и поймете это. Отстраиваются на уровне позиционирования и бизнес процессов. Например вы открыли магазин продуктов возле дома. Через пол года рядом открывается пятерочка. Вы начинаете проседать по доходам, потому что пятерка дает лучшую выходную цену для клиента, и тогда вы решаете отстроится от конкурента, убираете весь ассортимент и становитесь магазином "Колбасы от Васи". И расставляете на прилавке 1 вид продукта, но в широком ассортименте, который пятерочка никак не может себе позволить, потому что им не выгодно иметь широкий ассортимент одной товарной позиции. Вот это и есть отстройка.

    А теперь к важному. Продавайте "Повышение конверсии". И только это.
    Бизнес делает рекламу, тратит на это деньги, и тут появляетесь вы и говорите, мы можем сделать новый дизайн вашего сайта, уменьшить "боль" потребителя от использования, что повысит вашу конверсию на N процентов + увеличит кол-во повторных заказов от существующих клиентов. Повышение конверсии даст большую эффективность вашим рекламным затратам, потому что вы можете потратить 100500 миллионов денег, но если вся реклама будет вести на непродуманный, некрасивый и абсолютно неюзабельный лендинг - ваши деньги вылетят в трубу. Такая постановка вопроса будет очень понятна любому бизнесу.

    Так что вывод - переимуйте абстрактный пункт "Увеличение продаж" в более конкретный "Увеличение конверсии", и продавайте его.
    Ответ написан
    1 комментарий
  • Что такое digital-дизайн?

    честно, не знаю ответа на вопрос. Но я больше чем уверен, что это очередной маркетинговый вброс новомодного термина
    Ответ написан
    1 комментарий
  • Как настроить категорий(и сделать под категории) в HTML(CSS):?

    @quaden
    Изучаю js, верстку
    https://codepen.io/Quaden/pen/ZEQarWe

    Дочерние селекторы
    Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
    Синтаксис: A > B
    Пример: селектор ul > li выберет только дочерние элементы , которые находятся внутри, на первом уровне вложенности по отношению к элементу
    • .
    Ответ написан
    Комментировать
  • Можно ли сделать выравнивание по левому краю через flex, чтобы?

    @quaden
    Изучаю js, верстку
    Ответ написан
    Комментировать
  • Покритикуете верстку?

    @Lord_Dantes
    Не стыдно ли класть в портфолио такую работу для фриланса?

    Я бы постыдился
    Ответ написан
    Комментировать
  • Покритикуете верстку?

    @Qualiant
    Не буду ничего говорить по реализации, так как не шарю во фронте. Скажу как пользователь.

    "Закажите сейчас по акции" - в этом блоке отступы между абзацами бы побольше.

    Анимация кнопки "заказать со скидкой" почему-то работает в обратную сторону. Кнопка должна наживаться, а не подскакивать. Не говоря уже о том, что я ничего не нажимал, но анимация намекает. Лучше просто подсвечивать другим цветом при наведении.

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

    Есть понятие о максимально комфортной ширине контента. Чтобы его можно было читать, не мотая головой. Я бы ограничил толщину контента второго, третьего и четвёртого блоков до 1200 пикселей.
    Ответ написан
    7 комментариев
  • Покритикуете верстку?

    @artuh_a
    - Прелоадер или совсем уберите или сделайте его исчезновение более плавным, у вас статичная страничка и это мерцание как-то не очень смотрится;
    - названия картинкам лучше давать латиницей:
    5efb8a1033c3e982374636.png
    - там где белый фон у картинок лучше сделать его прозрачным, там где нет прозрачности лучше вместо png использовать jpg. На таких маленьких страницах не важно, а в будущем может пригодиться для оптимизации;
    - добавить ховер эффекты для пунктов меню;
    - убрать ссылку с логотипа, тут итак одностраничник.
    Ответ написан
    Комментировать
  • Как использовать тег 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" ?>
    и управлять из стилей как обычно.
    Ответ написан
    1 комментарий
  • Как грамотно использовать 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.
    Ответ написан
    4 комментария
  • Как грамотно использовать rem в адаптивной вёрстке?

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

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

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


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

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

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

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

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

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

    Итоговый png:
    5d5bd29a94a61206765226.png
    На разных фонах:
    5d5bd4bac3e44663912841.png
    Ответ написан
    2 комментария