• Генерируем красивые картинки для социальных сетей



    Код для генерирования именно этого изображения
    $generator = new imgGenerator();
    $textGenerator=new imgTextGenerator();
    $textGeneratorTop=new imgTextGenerator();
    
    $label=$textGeneratorTop
    	->seTextShadow("#000000", 75, 1, 2, 2)
    	->setText("Test Site","#ffffff",imgGenerator::position_center_top,"1/12",0 )
    	->setBackground("#000000",'3%')
    	->setFont($_SERVER["DOCUMENT_ROOT"]."/upload/fonts/fonts2_7/hinted-PTF55F.ttf");
    
    $text=$textGenerator
    	->seTextShadow("#000000", 75, 1, 2, 2)
    	->setText("Морковь как двигатель прогресса человечества","#ffffff",imgGenerator::position_center_center,"1/7",array(0,'5%',0,'5%'))
    	->setFont($_SERVER["DOCUMENT_ROOT"]."/upload/fonts/fonts2_7/hinted-PTF55F.ttf");
    
    $generator
    	->addText($text)
    	->addText($label)
    	->fromImg($_SERVER["DOCUMENT_ROOT"] . "/upload/dynamic/2016-08/15/carrot-big.jpg")
    	->resizeFor("autodetect")
    	->addOverlay(0.5,"#000000")
    	->show();

    Глядя на красивые картинки для соц. сетей, которые в последнее генерируют многие новостные (и не только) сайты — захотелось написать свой генератор.

    Примеры картинок

    Скрипт работает на PHP, с использованием модуля Imagick. Писать это на GD2 что-то я не решился.

    Алгоритм работы предполагался такой:

    • Берем за основу картинку или цвет
    • Уменьшаем до нужного размера
    • Накладываем сверху полупрозрачный фон
    • Устанавливаем логотип
    • Добавляем надпись
    • Кешируем результат

    Читать дальше →
  • 30 легковесных JavaScript плагинов и библиотек

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

      Как и следовало ожидать ниже вы найдете много плагинов для создания ползунков, галерей с изображениями, адаптивных меню, а также много других полезных плагинов и библиотек. Также в списке представлены плагины, которые предлагают действительно уникальные функциональные возможности. Давайте взглянем на список!
      Читать дальше →
    • Over 9000: неочевидные сложности работы со счетчиками социальных кнопок (+ задачка)



        Одна из наиболее востребованных функций социальных кнопок «поделиться» — это счетчик совершенных действий. Малое число лайков и шеров может говорить* о «некачественности» материала; большие числа, наоборот, служат своего рода социальным доказательством и заставляют других делиться контентом.

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

        • счетчик может отвалиться в самый неподходящий момент;
        • некоторые социальные сервисы не предоставляют данных о репостах в принципе;
        • а другие не всегда в состоянии обеспечить корректную передачу этой информации.

        Читать дальше →
        • +20
        • 6.8k
        • 5
      • 1000 и 1 репост: гайд по кнопке «поделиться» в русских соц сетях

        • Tutorial


        Недавно передо мной встала задача — провести на нашем сайте «народное голосование» за номинантов на премию в нашей отрасли (франчайзинг). В рамках народного голосования человек размещал на своей странице в социальной сети пост, рассказывающий о том, за кого именно он проголосовал. Чтобы реализовать эту задачу, мне пришлось перелопатить массу информацию о том, как именно устроен шаринг в различных соцсетях, и как лучше размещать эти самые посты. Кроме того, была создана система подсчета количества размещенных репостов.

        К сожалению, большая часть информации на эту тему, которую можно найти на хабре или stackoverflow — уже устарела, поэтому я постарался превратить этот в пост в актуальный мега-гайд по шерингу страниц в соц сетях. Я рассмотрел 5 наиболее популярных в России социальных сетей: контакт, facebook, твиттер, одноклассники и мой мир. Для каждой социальной сети приведен актуальный URL для шаринга, небольшие советы и рекомендации по использованию, а также JS код, позволяющий узнать количество шеров конкретного URL в каждой из соц. сетей.

        В конце статьи есть сводная таблица со всеми ссылками и кратким описанием возможностей каждой из сетей.
        Читать дальше →
      • Многопоточные вычисления в PHP: pthreads

          Недавно я попробовал pthreads и был приятно удивлен — это расширение, которое добавляет в PHP возможность работать с несколькими самыми настоящими потоками. Никакой эмуляции, никакой магии, никаких фейков — все по-настоящему.



          Я рассматриваю такую задачу. Есть пул заданий, которые надо побыстрее выполнить. В PHP есть и другие инструменты для решения этой задачи, тут они не упоминаются, статья именно про pthreads.


          Стоит отметить, что автор расширения, Joe Watkins, в своих статьях предупреждает, что многопоточность — это всегда не просто и надо быть к этому готовым.


          Кто не испугался, идем далее.

          Читать дальше →
        • Разработка чат-бота для Facebook Messenger

          • Tutorial
          В настоящее время наблюдается, действительно, бум чат-мессенджеров. Один за другим платформы для обмена мгновенными сообщениями объявляют о запуске платформы для разработки ботов.
          Не стал и исключением Facebook. 12 апреля на конференции F8 Facebook представила платформу для разработки ботов для своего мессенджера.
          В данной статье хочу поделиться опытом разработки чат-бота для Facebook на PHP.
          Читать дальше →
        • Leaflet как оболочка для «Яндекс.Карт» — отображаем 100 тысяч маркеров на карте

            Я очень люблю Leaflet. С его помощью можно очень быстро строить свои интерактивные карты. Однако, практически все доступные поставщики тайлов (слоёв для карт) предоставляют свои услуги за весьма внушительные деньги. Существуют такие OpenSource-проекты, как OSM, но не всегда их тайлы удовлетворяют своим внешним видом.

            Цель


            Цель заключалась в том, чтобы слепить своего полностью бесплатного кентавра. Мне всегда нравились Yandex-карты, но не их API. Поэтому я заинтересовался вопросом внедрения Яндекс-карты, как слоя для Leaflet.
            Читать дальше →
          • Готовим WebP правильно

              WebPХабр уже насыщен статьями на тему «нового» формата изображений WebP (описание, сравнение с JPEG2000, сравнение с BPG, использование, подключение на сайте). К сожалению, открытыми остаются вопросы: как правильно подключить WebP на сайте, чтобы «все работало», и насколько он лучше (меньше) PNG/JPEG. В этой заметке я буду отвечать на оба вопроса.

              Предполагаю, что вы уже в курсе оптимизации изображений, умеете конвертировать изображения в WebP, понимаете разницу между использованием JPEG и PNG на сайте, знаете инструменты ExifTool, jpegtran, mozjpeg, JPEGrescan, optipng, pngcrush, pngwolf, zopflipng и TruePNG, а также различаете пастеризацию молока и постеризацию изображений.

              Если все так — то переходим к сути.
              Читать дальше →
              • +10
              • 25.1k
              • 8
            • Деплой на shared-хостинг: боль и страдания или простая рутина?

                Коротко для тех, кто спешит


                Утилита FTP Deployment: написана на php, принимает в качестве параметра путь к конфигу и выкладывает файлы на удаленный сервер, довольно быстро и хорошо.

                Долго и подробно для тех, кому интересно


                Все мы любим классные и удобные методы деплоя с помощью capistrano, rsync или, на худой конец, git pull. А если надо выкладывать проекты на shared-хостинг?

                Да, некоторые провайдеры предоставляют ssh и git. Но, прямо скажу, их немного.

                Однажды я вдруг понял, что привык к хорошему, и ненавижу выкладывать проекты через (S)FTP: не залился какой-то файл; надо вспомнить, где лежат конфиги; вот эту папку не надо выкладывать вообще; вот тут надо проверить права. Думаю, многие этот список легко продолжат.

                Читать дальше →
              • Оформляем красиво «битые» картинки

                Предлагаю вашему вниманию вольный перевод статьи "Styling Broken Images" с сайта bitsofco.de.

                «Битые» картинки выглядят ужасно.

                image

                Но они не всегда должны так выглядеть. Мы легко можем применить CSS к элементу (тегу) img, чтобы улучшить его внешний вид — сделать его куда более привлекательнее, чем как он выглядит по умолчанию.

                Если вам наскучили дефолтные уведомления о «битых» картинках, милости прошу под кат.
                Читать дальше →
              • Лучшие бесплатные коллекции векторных иконок

                  Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.

                  Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах: @font-face, SVG, EPS, AI, PSD, Sketch.

                  В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.

                  Responsive Icons (100 иконок, PSD, AI, EPS, SVG)


                  Responsive Icons

                  Читать дальше →
                • Генераторы в действии

                  Небольшое вступление


                  Не так давно я решил для себя, что пора восполнить большой пробел в знаниях и решил прочитать про переходы между версиями PHP, т.к. понимал, что остался где-то между 5.2 и 5.3 и этот пробел необходимо как-то устранить. До этого я читал про namespaces, traits и т.д, но дальше чтения не уходило. И вот тут я заметил генераторы, почитал документацию, одну из статей на хабре на этот счет и после этого возникла мысль — а как раньше без них жили-то?

                  Данным переводом хочу помочь хотя бы новичкам, поскольку на php.net документация по генераторам на английском и, на мой взгляд, должным образом не раскрывает всю идею и места применения. Текста много, кода чуть меньше, картинок нет. Потребуются общие знания, например, про итераторы. Очевидный код комментировать не буду, а вот сложные для понимания примеры постараюсь объяснить в силу своих знаний.

                  UPD1: Изменил расплывчатую формулировку, про которую говорили в комментариях.
                  UPD2: Добавил решение с принудительным break.

                  И сразу под хабракат
                • Коллекция практических советов и заметок по вёрстке

                    CSS Refresher


                    Это большая коллекция практических советов и заметок по вёрстке. Своеобразная памятка для тех, кто каждодневно использует CSS. Освещаются самые разные темы, от деталей поведения плавающих элементов до использования SVG и спрайтов. Проект постоянно обновляется, активное сообщество github также принимает в нем участие, там добавляются интересные замечания, о которых, возможно, вы и не слышали.

                    От переводчика


                    Приветствую всех, меня зовут Максим Иванов, и сегодня я подготовил для вас перевод заметок разработчика из Сан-Франциско Васанта Кришнамурти (Vasanth Krishnamoorthy) «CSS Refresher». Web-программирование одна из самых быстро развивающихся отраслей в наше время. Казалось бы, возьми какой-нибудь видеокурс на tuts+ и освой html-верстку, однако, как говорил разработчик Opera Software Вадим Макеев, выступая на конференции CodeFest, они все равно это делают плохо. Но давайте посмотрим, может мы итак все это знаем.

                    Содержание


                    1. Позиционирование (position)
                    2. Отображение элемента в документе (display)
                    3. Плавающие элементы (float)
                    4. CSS селекторы
                    5. Эффективные селекторы
                    6. Переотрисовка и перерасчет
                    7. CSS3 свойства
                    8. CSS3 медиа-запросы
                    9. Адаптивный web-дизайн
                    10. CSS3 переходы
                    11. CSS3 анимации
                    12. Масштабируемая векторная графика (SVG)
                    13. CSS спрайты
                    14. Вертикальное выравнивание
                    15. Известные проблемы

                    Читать дальше →
                  • 50 лучших инструментов для разработки CSS и JavaScript

                    • Translation
                    Веб-разработчику постоянно необходимо быть в курсе появления новых библиотек и инструментов. Я нашёл и выбрал несколько лучших инструментов для разработки как CSS, так и JavaScript. Это не просто копипаста – это выборка, основанная как на рекомендациях, так и на личном опыте использования.

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

                    Лучшие инструменты для CSS и JavaScript


                    1) Fileicone

                    Сборник 100%-CSS файловых иконок. Может пригодиться для дизайна страниц.

                    image

                    2) Marx

                    Элегантное обнуление CSS безо всякого JavaScript.

                    image
                    Читать дальше →
                  • Прокачка TinyMCE 4

                    Здравствуйте, меня зовут Константин, я работаю front-end-разработчиком на информационно-развлекательном портале, основную долю контента которого составляют новости и статьи. И, конечно же, нам было крайне важно организовать удобную работу с порталом для наших редакторов. О том, каких успехов мы добились на данном поприще, и будет эта статья.
                    Читать дальше →
                    • +31
                    • 48.5k
                    • 5
                  • Обзор платежных агрегаторов для приема платежей

                      image Если вы владелец интернет-магазина и хотите, чтобы покупатель мог оплатить товары удобным ему способом, у вас есть два пути: подключать и настраивать оплату для каждой платежной системы отдельно — мучиться с интеграцией, подписанием договоров… либо сделать все быстро и без лишней волокиты — воспользоваться услугами компании, которая является платежным агрегатором. При выборе последнего варианта вам понадобится подписать всего один договор, а ваш покупатель сможет выбрать удобный ему способ оплаты из десятков доступных. Это и оффлайн способы, и электронные кошельки и, конечно же, оплата банковской картой. Платежных агрегаторов множество.

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

                      Чем же платежные агрегаторы отличаются друг от друга, и на что стоит обратить внимание?


                      Каждую компанию было решено рассмотреть по десяти параметрам. Ниже приведено детальное описание параметра и почему на это стоит обратить внимание.
                      Читать дальше →
                    • 12 малоизвестных фактов о CSS

                      Предлагаю читателям «Хабрахабра» перевод статьи «12 Little-Known CSS Facts (The Sequel)». Она совсем недавно была упомянута в дайджесте интересных материалов из мира веб-разработки и IT.

                      Update: немного «шлифанул» перевод напильником. Выражаю благодарность всем неравнодушным читателям.
                      Внимание! Под катом почти 1.5 Мб картинок и много интересных ссылок.

                      Итак, начнём-с…

                      1. В свойстве border-radius можно использовать slash-синтаксис.


                      Об этом уже писалось 4 года назад, но многие новички и даже некоторые опытные разработчики не знают о существовании этой «фишки».

                      Верите или нет, но следующий код валиден:

                      .box {
                        border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
                      }
                      

                      Читать дальше →
                    • Эффективное изменение размера картинок при помощи ImageMagick

                      • Translation
                      В наше время всё чаще сайты сталкиваются с необходимостью введения отзывчивого дизайна и отзывчивых картинок – а в связи с этим есть необходимость эффективного изменения размера всех картинок. Система должна работать так, чтобы каждому пользователю по запросу отправлялась картинка нужного размера – маленькие для пользователей с небольшими экранами, большие – для больших экранов.

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

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

                      Большие картинки == большие проблемы


                      Средняя веб-страница весит 2 Мб, из них 2/3 – картинки. Миллионы людей ходят в интернет через 3G, или ещё хуже. 2Мб-сайты в этих случаях работают ужасно. Даже на быстром соединении такие сайты могут израсходовать лимиты трафика. Работа веб-дизайнеров и разработчиков – упростить и улучшить жизнь пользователя.

                      image

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

                      ImageMagick


                      Утилита командной строки с 25-летним стажем в то же время является редактором картинок с полным набором функций. В ней огромная куча функций, и среди них – быстрое и автоматическое изменение размера картинок. Но с настройками по умолчанию файлы часто получаются излишне большими – иногда по объёму больше оригинала, хотя в них и меньше пикселей. Сейчас я объясню, в чём проблема, и покажу, какие настройки необходимы для её решения.
                      Читать дальше →
                    • Что нужно знать при миграции с MySQL на PostgreSQL?

                      • Tutorial
                      В продолжение статьи о теории и практике миграции хранилищ данных на PostgreSQL, мы поговорим о проблемах, с которыми вы можете столкнуться при переезде с распространенной СУБД MySQL. Дабы не утомлять всех лишней риторикой, сегодняшний рассказ будет более тезисный и проблемно-ориентированный.

                      Все нижепредставленное является перечнем типовых ошибок дизайна и эксплуатации MySQL, которые могут повлиять на процесс адаптации схемы, переработки кода и переноса данных. Наличие всех этих мелочей в разнообразных коварных сочетаниях является одной из причин, по которой существующие “универсальные” инструменты вряд ли справятся конкретно с вашей базой.

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

                      Перейдем к делу.
                      Читать дальше →