• Под какие разрешения рисовать адаптивный дизайн?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    При рисовании любого дизайна встает техническая задача — уместить элементы сайта в указанную ширину. Уместить в заданную ширину тяжелее, чем растянуть до заданной ширины. Растянуть легко на этапе верстки. Поэтому нужно ориентироваться на минимальную ширину в классе.

    1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

    2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

    3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

    В принципе, этого достаточно, чтобы верстальщик справился.

    Если дизайн не имеет максимальной ширины и тянется от края до края окна браузера, то на усмотрение дизайнера можно нарисовать еще один или несколько эскизов для более широких экранов.

    В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

    Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.
    Ответ написан
    Комментировать
  • В Google Chrome перестал работать плагин Adobe Flash Player, кто починил?

    @Pokatum Автор вопроса
    после переустановки гугл хрома через пару часов опять перестал работать плагин флеша.
    методом тыка выяснил, что надо запускать хром с правами администратора, тогда флеш работает.
    Ответ написан
    Комментировать
  • Обязателен ли /apple-touch-icon-precomposed.png ,если есть /apple-touch-icon.png?

    Желательно указывать оба файла, а желательно что бы структура .png была именно такая
    apple-touch-icon-152x152-precomposed.png
    apple-touch-icon-152x152.png
    apple-touch-icon-120x120-precomposed.png
    apple-touch-icon-120x120.png
    apple-touch-icon-76x76-precomposed.png
    apple-touch-icon-76x76.png
    apple-touch-icon-precomposed.png
    apple-touch-icon.png


    apple-touch-icon.png <- размер 57х57
    apple-touch-icon-precomposed.png <- размер 57х57

    Вот тут подробно рассказано. Я использую именно этой схемой.
    Ответ написан
    Комментировать
  • Подсказка при наведении на маркер в Google Maps?

    @Tsybyte
    Веб-мастер
    Вот друг держи!
    Создаем и при наведении показываем.
    google.maps.event.addListener(marker, 'mouseover', onMarkermouseover);


    Полный код:

    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=ваш апи">
    </script>
    <script type="text/javascript">
    
    
     google.maps.event.addDomListener(window, 'load', function() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9,
          center: new google.maps.LatLng(44.958196, 34.109555),
    scrollwheel: false,
    	  styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}],
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    
        var infoWindow = new google.maps.InfoWindow;
    
        var onMarkerClick = function() {
          var marker = this;
          var latLng = marker.getPosition();
          infoWindow.setContent(marker.title);
    
          infoWindow.open(map, marker);
        };
        google.maps.event.addListener(map, 'click', function() {
          infoWindow.close();
        });
    	
     var onMarkermouseover = function() {
          var marker = this;
          var latLng = marker.getPosition();
          infoWindow.setContent(marker.title);
    
          infoWindow.open(map, marker);
        };
        google.maps.event.addListener(map, 'mouseover', function() {
          infoWindow.close();
        });
    	
    
        var marker1 = new google.maps.Marker({
          map: map,
    	  title: 'sadasdad',
    	  icon: 'icon.png',
          position: new google.maps.LatLng(44.958196,34.109555)
        });
        var marker2 = new google.maps.Marker({
          map: map,
    	  title: 'dfd',
    	  icon: 'icon.png',
          position: new google.maps.LatLng(44.858196,34.109555)
        });
        var marker3 = new google.maps.Marker({
          map: map,
    	  title: 'ааа',
    	  icon: 'icon.png',
          position: new google.maps.LatLng(44.758196,34.109555)
        });
    
    // infoWindow.open(map, marker1);
        google.maps.event.addListener(marker1, 'mouseover', onMarkermouseover);
        google.maps.event.addListener(map, 'mouseover', onMarkermouseover);
        google.maps.event.addListener(marker2, 'mouseover', onMarkermouseover);
        google.maps.event.addListener(marker3, 'mouseover', onMarkermouseover);
        google.maps.event.addListener(marker1, 'click', onMarkerClick);
        google.maps.event.addListener(marker2, 'click', onMarkerClick);
        google.maps.event.addListener(marker3, 'click', onMarkerClick);
      });
    
    	
    </script>
    Ответ написан
    Комментировать
  • Как в brackets добавить подсказки по псевдоэлементам?

    smolyakov770
    @smolyakov770
    Веб Дизайнер Верстальщик
    Почитайте здесь, может что полезное вытащите. https://habrahabr.ru/post/242623/
    Ответ написан
    1 комментарий
  • Как можно вывести сначала 5 постов, а далее выводить по 10 на страницу (используется ajax load_more)?

    @aarty20
    Front-end / Wordpress developer
    В wp_query есть параметр offset - сколько постов пропустить сверху выборки (верхний отступ).
    Подробнее о пагинации тут.
    Ответ написан
    Комментировать
  • Чем отличается модуль от плагина под wordpress?

    LenovoId
    @LenovoId
    svg, css,js
    наверно тем что Модулей для WP нету и их называют Plugin
    Ответ написан
    Комментировать
  • Как отказаться от навязывания низкоквалифицированной работы?

    SkyShot
    @SkyShot
    Фрилансер, интроверт, дизайнер, web-разработчик.
    Было подобное. Приходилось с клиентом много спорить по этому поводу, так как почти каждый клиент считает, что если он платит деньги (даже 3тыс), то ему разработчик должен чуть ли не целовать пятую точку. В договоре я ясно прописывал, что наполнение сайта производится по отдельной таксе (к примеру 50р за 1 позицию), а так же предоставлял полный прайс на заполнение, в котором было расписано от простого копипаста с doc файла, до написания статей самостоятельно. В итоге клиенты старались выехать на том, что давали doc файл и говорили, что мол 80% тут информации, а там картинки и какое-то доп. описание бери в сети. Тут ясное дело, что цена делилась на 2 части, т.е. за копипаст с файла + поиск в сети (не важно, потратишь ты там 1 минуту или 1 час).
    Так, что если не хочешь наполнять сайт пиши в договоре так, что ты мол не занимаешься наполнением на стадии разработки и наполнение сайта подписывается отдельным соглашением с отдельными ценами. А там если клиент начинает склонять к тому, что мол ты не полный проект сдаешь, то "тыкай носом" в договор, в нужный пункт. А раз в договоре указано, что это отдельная услуга, то будь клиент будь добр, соблюдай то, что подписал и не наглей.
    Ответ написан
    Комментировать
  • Как перенять объектно-ориентированное мышление?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Т.е. сложно понимаю, что "засунуть" в один объект, что в другой, что должно быть статическим методом, что приватным и тд.


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

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

    Теперь задумаемся о декомпозиции всего этого хаоса. Мы находим какую-то задачу, которую выполняет наш код (например какую функцию вызвать для обработки каждого конкретного запроса) и выносим это в отдельный объект. Отправка email-ов - отдельный объект. Весь SQL зашиваем в отдельный объект. Соединение с базой - объект. Пользователи - объекты. Все - объекты.

    И главное, у каждого объекта есть своя область ответственности. UNIX way. Каждый объект делает что-то одно и делает это хорошо. Бывает так что ну... нужно сделать так что бы один объект делал две вещи. НЕ вопрос, мы можем его попросить сделать что-то сложное, а он будет как хороший менеджер тупо делегировать работу другим объектом. То есть он и сложную штуку сделает, и сам не будет знать как она делается.

    А все безхозные функции, которые не пренадлежат никаким объектам (например функции порождающие объекты) можно вынести в статические методы. Главное что бы статичесих переменных у нас небыло (ибо это те же глобальные переменные). И поменьше публичного ибо черт его знает что эти разработчики будут использовать. Причем "те разработчики" это вы завтра.

    Вообщем писав всё время на процедурке, сложно перейти на ооп.


    Просто не думайте что это что-то "принципиально другое". Это та же самая процедурка, просто благодаря классам и объектам, вы можете порезать систему на маленькие модули. Данные будут лежать рядом с процедурами и у вас будет больше контроля за происходящим.

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

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


    Фреймворки универсальны, а значит чистого ООП там быть не может. Во всяком случае нет ни одного фреймворка на котором стоит учиться ООП.

    Есть хорошие упражнения на развитие понимания объектно-ориентированного проектирования. Например вот: https://habrahabr.ru/post/206802/

    Сразу хочу отметить что это крайности. Упражнения же. Они должны ограничивать вас что бы заставлять думать и задавать правильные вопросы.

    Или может подскажите книгу/сайт где пошагово в ооп написан какой-то проект, чтобы быстрее пришло понимание.


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

    riky
    @riky
    Laravel
    никак. узкое место - обращение к сервису.

    разве что можете оптимизировать сохранение в базу. массовые update в mysql делаются
    insert into ... on duplicate key update ...

    но не думаю что это что-то ускорит. 99% времени ваш скрипт отдыхает дожидаясь ответа сервиса.
    чтобы убедится в этом - сделайте профилирование. хотя бы через microtime().
    Ответ написан
    1 комментарий
  • Почему такой странный гет параметр добавляется при ajax запросе?

    trushka
    @trushka
    jQuery добавляет параметр _={timestamp} для предотвращения кэширования запроса браузером. По идее, на сервере "левые" параметры должны игнорироваться
    api.jquery.com/jQuery.ajax
    cache (default: true, false for dataType 'script' and 'jsonp')
    Type: Boolean
    If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.
    Ответ написан
    Комментировать
  • Как правильно интегрировать Google Calendar API в Symfony?

    miraage
    @miraage
    Старый прогер
    Сначала английский подтяните. Ошибка все за себя говорит.
    Ответ написан
    6 комментариев
  • На чем лучше и быстрее написать парсер (PHP)?

    muhammad_97
    @muhammad_97
    PHP-разработчик
    DiDom: https://github.com/Imangazaliev/DiDOM

    + высокая скорость работы (сравнение с другими парсерами)
    + хорошая дока
    + большое количество поддерживаемых селекторов
    + самое главное - тесты

    Простой пример:

    $document = new Document('http://www.example.com/', true);
    
    echo $document->first('title::text');


    Чуть посложнее - парсим все ссылки:

    $links = $document->find('a[href]::attr(href)');
    
    var_dump($links);


    Еще сложнее - получить адреса всех ссылок-картинок:

    $links = $document->find('a[href]:has(img)::attr(href)');
    
    var_dump($links);


    Другие варианты:
    - Symfony DomCrawler
    - Zend Dom Query
    Ответ написан
    3 комментария
  • Как перечислить значения в условии?

    @MadridianFox
    Web-программист, многостаночник
    if(in_array($chislo,['1','2','3'])){}
    Ответ написан
    Комментировать
  • WordPress | Как настроить более эффективно редирект при смене структуры урла?

    Punkie
    @Punkie
    У вас и так вордпресс будет автоматически редиректить с site.ru/%название поста% на site.ru/%название категории%/%название поста% при условии, что %название поста% останется неизменным. Попробуйте включить новую структуру, а зачем перейти по ссылке от старой структуры - ворпдерсс сам выполнит редирект ввиду своей особенности технической реализации пермалинков.
    Ответ написан
    3 комментария
  • Обновление reCaptcha без перезагрузки страницы, как?

    @burov0798 Автор вопроса
    Пытаюсь изучать php\js
    Решил проблему: grecaptcha.reset();
    Ответ написан
    Комментировать
  • Как написать запрос?

    dhs
    @dhs
    Web-разработчик
    Для проверки на NULL должно использоваться такое выражение: IS NOT NULL, а не !=null
    Ответ написан
    6 комментариев