• Как верстать письма для самых распространенных почтовых сервисов?

    DjailinVasu
    @DjailinVasu
    Верстальщик, подрастающий фронтендер
    Я не очень давно писала такое мини-руководство для верстки рассылок.

    Рассылку лучше всего сначала верстать ручками в файлике .html.
    Из статьи последней редакции 2015 года, заготовка файла такая:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
    <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body bgcolor="#ffffff" style="padding:0;margin:0;">
    	    …
    	</body>
    </html>

    Источник https://mindbox.fogbugz.com/?W95

    Дальше мы забываем про тэг<body>, его параметры будут проигнорированы почтовыми сервисами (в лучшем случае), забываем про блочную верстку и вообще про существование тэга <div>, возвращаемся в 1996-98 год и вспоминаем табличную верстку.
    Конечно.. Можно использовать div, но стоит ли? Учитывая, что где-то они будут игнориться. Хотя есть вот прием - оборачивание картинки в тэг div, чтобы outlook, не делал бы ей лишние отступы. Но по-моему лучше картинке задать display: block;

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

    Для того, чтобы задать фон для будущей рассылки лучше использовать таблицу с одной ячейкой, шириной в 100%, внутри которой уже верстать основную таблицу рассылки.

    Стили
    Про хэдерные стили через тэг <style>тоже забываем - только инлайновые стили.
    Важно помнить, что некоторые почтовики удаляют все стили, которые прописаны после недопустимого в нем (яндекс) или вообще удаляют весь атрибут style, если в нем прописан хотя бы один недопустимый стиль (гмеил).
    Подробнее об обработке стилей почтовыми клиентами смотреть тут: habrahabr.ru/post/146414
    Обязательно просматривать таблицу восприятия почтовиками стилей тут: https://www.campaignmonitor.com/css/

    Обнуляем таблицы!
    <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0">

    Этот набор атрибутов запомнили сугубо и тригубо.

    Шрифты и текст
    Забываем про красивые дизайнерские шрифты и используем стандартные безопасные: www.wearymax.ru/webmasters/fonts
    Лучше не использовать тэги<p>и <font>. Весь текст задаем через <span>.

    Фоновые картинки и не только фоновые
    Забываем про background-image, если хотим, чтобы пользователи Outlook тоже могли насладиться красотой. Если все-таки фоновые картинки нужны и без них никак, то нужно назначить альтернативный цвет фона.

    Тэгу img не забываем прописывать следующие атрибуты:
    <img src="..." width="..." height="..." border="0" alt="" />

    И лучше всего к этому: style=" line-height:0; display: block "
    Для картинок display: block не дает Outlook-у добавлять им свои отступы.
    Атрибуты align, vspace и hspace лучше не использовать для этого тэга вообще.
    Картинки (на мой взгляд) лучше подгружать по абсолютным адресам с сервера. Но лучше про варианты погрузки картинок почитать в этой статье: habrahabr.ru/company/sibirix/blog/114472

    Цвета
    Никаких сокращенных обозначений HEX цветов, только шестью значениями!
    Цвет фона лучше всего задавать атрибутами background="" или bgcolor="" , есть некоторые отшибленные почтовики, которые будут игнорировать фон, заданный стилем (но их не много, так что.. ).

    Отступы и выравнивания
    Есть такое утверждение, что вертикальные отступы рекомендуется задавать не пустыми ячейками с прописанной шириной, а вкладывать в них нулевые (прозрачные) картинки. Желательно хотя бы 10pxна10px, и самим картинкам задавать ширину нужного отступа. Другие же говорят, что это наоборот плохо, потому что the bat, например, заливает прозрачные картинки черным цветов.
    Я картинки для отступов не использую. Просто ячейки с заданной высотой. Пока везде работало.

    Горизонтальные отступы нужно задавать ячейками таблицы жестко, четкой фиксированной шириной.

    Забыли про float. Он под запретом, будет игнорироваться большинством почтовых сервисов.

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

    Ссылки
    Не забываем прописывать target="_blank", не забываем, что значения # у атрибута src быть не должно.
    Всегда задаем цвет, шрифт, размер шрифта, line-height, -webkit-text-size-adjust:none(это свойство запрещает увеличивать размер шрифта айфонам и айпадам).
    Про "Якоря" забываем.

    Тестируем рассылку:
    На данный момент, нормальных инструментов для простого тестирования рассылок нет
    А может и есть, но все платное и лично я с этим не разобралась.
    Примеры можно посмотреть здесь: www.cossa.ru/digdog/48567

    Самое простое и правильное решение - находим сервис бесплатной отправки сообщений, создаем себе аккаунты на как можно большем кол-ве почтовиков, и шлем себе любимому рассылку на все адреса. Потом смотрим, тестим, наслаждаемся.
    И пытаемся сами понять где же мы накосячили, и просматриваем статьи из-за чего такой косяк может всплыть.
    Я выбрала для себя https://sendpulse.com/ru/
    Вот рассылка которая там лежит archive.sendpulse.com/bd6092af/?_ga=1.158251578.12...

    После регистрации сначала надо зайти в раздел Адресные книги, добавить все свои адреса.

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

    Это вот примерное резюме из всех прочитанных мною статей и моего личного опыта.
    Ответ написан
    Комментировать
  • Что нужно знать при устройстве на работу?

    @gaxetasok
    Не стесняйся.
    Сейчас дефицит и берут всех подряд.
    Не возьмут в эту фирму, попробуй в другую.
    Ответ написан
    2 комментария
  • Как запустить скрипт без обновления страницы?

    @deworkers
    Middle front-end, UI designer
    $(window).resize(function() {
       // тут ваш код
    })
    Ответ написан
    1 комментарий
  • Хочу стать программистом. Какой факультет выбрать(Санкт-Петербург)?

    TrueBers
    @TrueBers
    Гуглю за еду
    Знаю пару отличных факультетов:

    Вот оф сайт главного https://www.google.ru
    Ещё есть у них филиал — https://stackoverflow.com/

    Бесплатно и без СМС!
    Ответ написан
    2 комментария
  • Как объединить эти два запроса?

    rpsv
    @rpsv
    делай либо хорошо, либо никак
    Лучше двумя запросами, т.к. если у вас связь много ко многим, у вас будет дублирование информации о комнате.
    Ответ написан
    Комментировать
  • Как скрыть контент через JS?

    yarkov
    @yarkov Куратор тега JavaScript
    Помог ответ? Отметь решением.
    document.addEventListener('DOMContentLoaded', function(e){
        var x = document.querySelector('a[href="http://ssylka.ru"]')
        if (!x) {
            document.body.innerHTML = 'Верни ссылку, блеать!';
        }
    });

    Обфусцированный код (привет Олежа Азимов ):
    var _0x9f66=["\x44\x4F\x4D\x43\x6F\x6E\x74\x65\x6E\x74\x4C\x6F\x61\x64\x65\x64","\x61\x5B\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x73\x73\x79\x6C\x6B\x61\x2E\x72\x75\x22\x5D","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x62\x6F\x64\x79","\u0412\u0435\u0440\u043D\u0438\x20\u0441\u0441\u044B\u043B\u043A\u0443\x2C\x20\u0431\u043B\u0435\u0430\u0442\u044C\x21","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72"];document[_0x9f66[6]](_0x9f66[0],function(_0x4dcax1){var _0x4dcax2=document[_0x9f66[2]](_0x9f66[1]);if(!_0x4dcax2){document[_0x9f66[4]][_0x9f66[3]]= _0x9f66[5]}})
    Ответ написан
    3 комментария
  • Ошибка при создании Foreign Key?

    @d-stream
    Готовые решения - не подаю, но...
    Для начала:
    select * from rooms where rooms.id_room_size not in (
    select id_room_size from hotel.roomsize
    )
    Ответ написан
    3 комментария
  • Большое количество делегированных событий плохо ли?

    Lumore
    @Lumore
    Front-end developer
    Раньше юзал так:
    $(document).on('click', element, function(){ //code });
    Ответ написан
    Комментировать
  • Большое количество делегированных событий плохо ли?

    Попробуйте vuejs вместо (в дополнение) к jquery. И вместо подгрузки блоков подгрузку объектов контента делать будете и события все там иначе назначаются, чем в jquery - от этого код легче читается и пишется.
    Ответ написан
    1 комментарий
  • Изменить value у input, если input был загружен через AJAX?

    @tyzberd
    так работает. https://jsfiddle.net/tyzberd/fdvjnwmd/
    так как у вас используется загрузка на ajax используйте делегирование событий
    Ответ написан
    1 комментарий
  • Какая ошибка в коде?

    bemdev
    @bemdev
    foreach ($employee as $value) {
        echo '	<div class="new-form" data-employee-id="'.$value['id_employee'].'">
              <input type="text" disabled value="'.$value['first_name'].'">
              <input type="text" disabled value="'.$value['second_name'].'">
              <input type="text" disabled value="'.$value['middle_name'].'">
              <select name="list-position" id="list-position">';
        
              foreach ($positions as $val) {
                echo '<option value="'.$val['id_position'].'">'.$val['position'].'</option>';
              }
        
        echo '</select>
              <input type="text" disabled value="'.$value['position'].'">
              <input type="text" disabled value="'.$value['salary'].'">
              <button class="change-employee" data-id="'.$id.'">Изменить</button>
              <button id="js-save-change-employee" class="save-change-employee hide" data-id="'.$id.'">Сохранить изменения</button>
            </div>';
      }
    Ответ написан
    Комментировать
  • Какая ошибка в коде?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    foreach ($employee as $value) {
        echo '	<div class="new-form" data-employee-id="'.$value['id_employee'].'">
              <input type="text" disabled value="'.$value['first_name'].'">
              <input type="text" disabled value="'.$value['second_name'].'">
              <input type="text" disabled value="'.$value['middle_name'].'">
              <select name="list-position" id="list-position">';
              foreach ($positions as $val) {
                echo '<option value="'.$val['id_position'].'">'.$val['position'].'</option>';
              }
    // echo забыл
    echo '</select>
              <input type="text" disabled value="'.$value['position'].'">
              <input type="text" disabled value="'.$value['salary'].'">
              <button class="change-employee" data-id="'.$id.'">Изменить</button>
              <button id="js-save-change-employee" class="save-change-employee hide" data-id="'.$id.'">Сохранить изменения</button>
            </div>';
      }


    Но нафига так писать??? Можно же красиво всё оформить и не ломать глаза

    <?php foreach ($employee as $value) { ?>
        <div class="new-form" data-employee-id="<?= $value['id_employee'] ?>">
            <input type="text" disabled value="<?= $value['first_name'] ?>">
            <input type="text" disabled value="<?= $value['second_name'] ?>">
            <input type="text" disabled value="<?= $value['middle_name'] ?>">
            
            <select name="list-position" id="list-position">';
                <?php foreach ($positions as $val) { ?>
                    <option value="<?= $val['id_position'] ?>"><?= $val['position'] ?></option>
                <?php } ?>
            </select>
            
            <input type="text" disabled value="<?= $value['position'] ?>">
            <input type="text" disabled value="<?= $value['salary'] ?>">
            <button class="change-employee" data-id="<?= $id ?>">Изменить</button>
            <button id="js-save-change-employee" class="save-change-employee hide" data-id="<?= $id ?>">Сохранить изменения</button>
        </div>
    <?php } ?>


    ЗЫ. Местная подсветка, конечно, убивает всю прелесть, но редакторы нормально подсвечивают.
    Ответ написан
    1 комментарий
  • Как лучше сделать такое?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ответ написан
    Комментировать
  • Как перенести сайт на другую CMS?

    sim3x
    @sim3x
    Просто скачивать каждую и пытаться как-то разложить все файлы по папкам в надежде создать структуру файлов?

    скачивать, делать из них темплейт
    на WP
    Ответ написан
    Комментировать
  • Как вставить значение в БД?

    SimBioT19
    @SimBioT19
    {{ user.about }}
    $query = $db->prepare('INSERT INTO employees (first_name, second_name, middle_name, id_position) 
    VALUES (:first_name, :second_name, :middle_name, :id_position');
    
    $query->execute(
    [
     ':first_name' => $f_name,
     ':second_name' => $s_name,
     ':middle_name' => $m_name, 
     ':id_position' => $position
    ]);
    Ответ написан
    Комментировать
  • Как исправить кодировку?

    qork
    @qork
    { background: #F00B42 }
    decideURI(str)
    Ответ написан
    Комментировать
  • Применение стилей только к активным блокам owl carousel?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Применение стилей только к активным блокам owl carousel?

    На вскидку - только через JS, т.к. в CSS'е (пока) нет селектора "предыдущий элемент".
    Ответ написан
    8 комментариев
  • Где граница между дедлайном и сверхурочной работой?

    fedorez
    @fedorez
    Хатуль мадан
    первая работа? ага, обычная тема.
    если студия не единственная в городе - пора начинать ходить на собеседования. тем более что
    верстаю я без косяков. По фронту особо проблем нету, ибо проекты довольно легкие в плане JSа.


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

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

    @mikamak
    Идеальное - Враг Хорошего. Если работаете по договору, будьте перфекционистом в соответствии с договором. (про Тыкву выше сказали) Искореняйте в себе вселенский само-разрушающий перфекционизм. Направь эти свои амбициозные гормоны на оттачивание навыков договаривания о ЗП на следующих проектах.
    Так ты растёшь. Больше планировать и договариваться заранее
    Ответ написан
    Комментировать