• Какие по Вашему мнению критерии хорошего проработанного шрифта?

    stratagema
    @stratagema
    Из глобального - уникальность рисунка.
    Из очевидного - читабельность, количество глифов, качество кириллицы.
    Из неочевидного - качество кривых, корректность метрик.
    А вообще - вопрос очень и очень абстрактный и двумя-тремя предложениями на него не ответить.
    Ответ написан
    Комментировать
  • Angular: какие вопросы на собеседовании актуальны?

    Daiverspb
    @Daiverspb
    Фронтенд
    Что получится, если в консоли ввести 010 ?
    ответ
    8

    Что получится, если в консоли 0.1+0.2 ?
    ответ
    0.30000000000000004


    Не в тему, но сейчас такое спрашивают ))
    Ответ написан
    1 комментарий
  • Twig vs Smarty

    Попробовал twig и в новых проектах отказался от «нативного шаблонизатора», хотя всегда был его горячим сторонником. Основная причина — в twig по умолчанию включено экранирование вывода и {{user.name}} куда короче (и понятней верстальщику), чем <?php echo htmlspecialchars($user->name, ENT_QUOTES, 'UTF-8') ?>. Плюс для удобного использования хелперов и переменных (хотя бы замены htmlspecialchars($user.name, ENT_QUOTES, 'UTF-8') на escape($user-name), а в идеале просто $user->name), требует вторжения в глобальную область видимости, что может привести к трудно улавливаемым глюкам.
    Ответ написан
    Комментировать
  • Как обрезать запятую в конце сроки?

    amux
    @amux
    alp.ac
    Не проще ли сделать сразу на php?

    Выражение будет поставлять запятую везде кроме последнего, но нужно инициализировать индекс ($i) за пределами foreach
    count($new->tags) != ++$i ? "," : "";

    <?php $i = 0; ?>
    <?php foreach ($new->tags as $tag):?>
      <span  data-id = "<?= $tag->id ?>"><?= $tag->name ?><?=count($new->tags) != ++$i ? "," : ""?></span>
    <?php endforeach; ?>
    Ответ написан
    1 комментарий
  • Как заказчики реагируют на flexbox?

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

    evgeniy8705
    @evgeniy8705
    Повелитель вселенной
    "2017-09-08T21:03:49.736Z".match(/\d+-\d+-\d+/).join();
    "2017-09-08T21:03:49.736Z".match(/.{10}/).join();
    "2017-09-08T21:03:49.736Z".slice(0, 10);
    "2017-09-08T21:03:49.736Z".split("T")[0];
    "2017-09-08T21:03:49.736Z".substring(0, 10);
    [..."2017-09-08T21:03:49.736Z"].splice(0, 10).join("");
    "2017-09-08T21:03:49.736Z".match(/[\d-]+/)[0]; // @romasovest
    Ответ написан
    3 комментария
  • Какой шрифт на авиабилетах?

    stratagema
    @stratagema
    Чисто теоретически нужно исходить из брендбука компании:
    судя по рисунку цифр 6 и 9 - это Myriad Pro.
    Ответ написан
    Комментировать
  • Можно ли применить функции цветокоррекции к потоковому видео на сайте?

    politon
    @politon
    HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
    canvas - наше все ;)
    www.xanthir.com/demos/video
    Ответ написан
    Комментировать
  • Есть какой-нибудь плагин для браузера который экспортирует веб-сайт в psd макет?

    @Impeeeery
    жуй. куй.
    сервисы есть, но они говно

    И на чем лучше писать ?

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

    Lerg
    @Lerg
    Defold, Corona, Lua, GameDev
    Их довольно просто сделать в иллюстраторе или Graphic, не думаю, что нужно что-то специальное. Хотя можете скачать библиотеки векторных клипартов и копировать оттуда.
    Ответ написан
    Комментировать
  • Как отправить форму на почту?

    broder4ik
    @broder4ik
    Допустим, твоя форма:

    <html>
    <head>
      <title>Форма обратной связи</title>
    </head>
    <body>
      <form method="post">
    Ваше имя: <input type="text" name="name" placeholder="Иван">
    Email для связи: <input type="email" name="email" placeholder="адрес электронной почты">
    Ваше сообщение: <textarea name="message" rows="5"></textarea>
    <input type="submit" value="отправить">
    </form>
    </body>
    </html>


    Тогда создавай php с таким содержанием:

    <?php
    // несколько получателей
    $to  = 'aidan@example.com' . ', ';  // обратите внимание на запятую
    $to .= 'wez@example.com';
    
    // тема письма
    $subject = 'Письмо с моего сайта';
    
    // текст письма
    $message = 'Пользователь' . $_POST['name'] . ' отправил вам письмо:<br />' . $_POST['message'] . '<br />
    Связяться с ним можно по email <a href="mailto:' . $_POST['email'] . '">' . $_POST['email'] . '</a>'
    ;
    
    // Для отправки HTML-письма должен быть установлен заголовок Content-type
    $headers  = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; 
    
    // Дополнительные заголовки
    $headers .= 'To: Иван <Ivan@example.com>' . "\r\n"; // Свое имя и email
    $headers .= 'From: '  . $_POST['name'] . '<' . $_POST['email'] . '>' . "\r\n";
    
    
    // Отправляем
    mail($to, $subject, $message, $headers);
    ?>


    Правки для realt:

    Допустим, твоя форма:

    <html>
    <head>
      <title>Форма обратной связи</title>
    </head>
    <body>
      <form method="post">
    Инпут 1: <input type="text" name="input1" placeholder="Инпут 1">
    Инпут 2: <input type="text" name="input2" placeholder="Инпут 2">
    Инпут 3: <input type="text" name="input3" placeholder="Инпут 3">
    Инпут 4: <input type="text" name="input4" placeholder="Инпут 4">
    Инпут 5: <input type="text" name="input5" placeholder="Инпут 5">
    <input type="submit" value="отправить">
    </form>
    </body>
    </html>


    Тогда создавай php с таким содержанием:

    <?php
    // несколько получателей
    $to  = 'aidan@example.com' . ', ';  // обратите внимание на запятую
    $to .= 'wez@example.com';
    
    // тема письма
    $subject = 'Письмо с моего сайта';
    
    // текст письма меняется он!!
    $message = $_POST['input1'] . '<br />' . $_POST['input1'] . '<br />' . $_POST['input1'] . '<br />' . $_POST['input1'];
    
    // Для отправки HTML-письма должен быть установлен заголовок Content-type
    $headers  = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; 
    
    // Дополнительные заголовки
    $headers .= 'To: Иван <Ivan@example.com>' . "\r\n"; // Свое имя и email
    $headers .= 'From: '  . $_POST['name'] . '<' . $_POST['email'] . '>' . "\r\n";
    
    
    // Отправляем
    mail($to, $subject, $message, $headers);
    ?>
    Ответ написан
    7 комментариев
  • В каком разрешении рисовать макет на Retina?

    Aleksei_Segodin
    @Aleksei_Segodin
    арт директор / дизайнер
    Короткий ответ:
    не рисуйте в Фотошопе — рисуйте в Adobe XD. И все вопросы про dpi отпадут сами по себе.

    Более развёрнутый ответ:
    как правильно заметил GreatRash, dpi не имеет значения. Главное — кол-во пикселей. Да и то, с такими динамичными интерфейсами и адаптивными сайтами которые востребованы сегодня даже пиксели "сдают позиции" и делят место с %.

    Если отвечать на вопрос, то верстать нужно в том разрешении (в пикселях), которое показывает браузер. Например, если с обычными компьютерами все ясно: ширина экрана 1280px, значит и рисовать нужно в 1280. То с телефонами уже все не так очевидно. Например, физический размер экрана iPhone 6: 750x1334px. Но браузер на телефоне показывает сайт так как будто бы там вдвое меньше пикселей: 375x667px. То есть, если вы в макете нарисуете блок шириной 187px, то он займёт половину экрана на iPhone 6.
    Есть отличный сайт, который показывает размеры экранов самых популярных мобильных устройств:
    • их фактические размеры (первые две колонки)
    • и размеры, которые "понимает" браузер (3 и 4 колонки — это то, что вам надо).


    Почему Adobe XD? Потому что, зуб даю, через пару лет Adobe скажет:
    — Ребята, мы убираем из Фотошопа все фишки, которые раньше помогали вам делать дизайн сайтов. Верстайте их теперь в XD. А мы оставим фотошоп для фотографов и иллюстраторов.

    Дело в том, что Adobe XD — это их новая разработка для прототипирования (дизайна) сайтов. И разработка этой программы идёт полным ходом. Пока-что доступна только под Мак (к концу года будет Windows версия). В программе есть очень "вкусные" фишки, которые ускоряют работу в десятки раз. Посмотрите хотя бы эту GIF-ку ниже. А ещё сама программа очень быстро работает.

    xd-grid-animation-375x500.gif

    Есть еще Sketch. Он тоже создан специально для дизайна сайтов и только под Мак.
    Сначала может быть трудновато привыкнуть к дизайну без Фотошопа, но оно того стоит, поверьте.

    Философия:
    Что такое дизайн сайта? И зачем думать про разрешение? И зачем вообще мы их рисуем?
    После того как сайт сделан и проект закрыт, все PSD макеты дизайнера отправляются в архив и лежат там мертвым грузом десятки лет пока вы их не удалите. Рисунки никому не нужны — нужен сам сайт. А рисуем мы их для того, чтобы легче представить себе и показать верстальщику как сайт должен смотреться. То есть, если бы мы могли телепатически обьяснить верстальщику что и как должно выглядеть, то никто бы не занимался этой "ерундой" в Фотошопе. И это основная задача дизайнера: придумать как сайт должен выглядеть, анимироваться и взаимодействовать с юзером и передать это дальше в производство.

    И тут ваша идеальная работа, как дизайнера, должна выглядеть так:
    1. Вы рисуете страницу так как она должна выглядеть и выносите в отдельный документ (или слой) все размеры всех блоков, отступов, хедеров, футеров и пр. У вас должно получиться что-то вроде "чертежа" сайта с вашими комментариями;
    2. Затем, в отдельное место выносите дизайны всех кнопок, полей для ввода текста, стили заголовков, аккордеонов, вкладок и всего остального что есть на вашем сайте;
    3. Отдельно подготавливаете контент: текст и картинки. При этом желательно, чтобы картинки были сразу продублированы в нескольких размерах (в случае с адаптивными сайтами).
    4. Все иконки — тоже отдельно. Векторные, в формате SVG, плюс PNG — для подстраховки при вёрстке.

    Затем собираете это все в один портфель и несёте верстальщику. Он скажет вам большое спасибо и назовёт лучшим дизайнером в мире.

    Для примера, касательно пункта 1, посмотрите как я обычно оформляю ТЗ для верстальщика. Это только две страницы из 20-ти.

    01b4d706294b4363a976980638344a8c.png9a0bf90210c4469682e82cc1413c9843.png

    А эта работа, которую вы проделали — это не "дополнительный" труд. Это то как обычно выглядит хороший дизайн-процесс. Особенно, в больших студиях. Таким образом вы избавитесь от кучи мелких ошибок со стороны разработчиков и от необходимости разжёвывать все мелочи отвечая на их "глупые" вопросы.
    Ответ написан
    9 комментариев
  • Как при клике пункта меню совершить переход (скролл) к нужному блоку и добавить якорь?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Работа с атрибутами
    Только проще его сразу добавить в html. Не понятно, зачем это делать динамически.
    Ответ написан
    2 комментария
  • Возможно ли отображать зеркально то, что еще рисуешь?

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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Mozilla TogetherJS

    И забавная онлайн игра, где видны курсоры всех посетителей, и надо пройти лабиринт: cursors.io:
    4fc42d6cb91f4021a00100ef60bc116e.png
    Ответ написан
    Комментировать
  • Upwork - в какое время больше всего заказов?

    sim3x
    @sim3x
    В рабочее время в той части планеты, где требуется решение задач
    Ответ написан
    Комментировать
  • Как сочетать pixel perfect и flexbox?

    bootd
    @bootd Куратор тега CSS
    Гугли и ты откроешь врата знаний!
    А в чем разница?

    Судя по всему, вы не поняли как работать с flex-box. На pixel perfect ни флоаты, ни flex-box никак не влияют!
    Влияет лишь ваше умение писать css и html.

    Да и pixel perfect себя давно изжил, с приходом адаптивности!
    Ответ написан
    2 комментария