• Обзор анимации с codepen для страниц загрузки сайта

      Обзор анимации с codepen для страниц загрузки сайта

      Программисты проверяют идеи для сайтов на площадках: codepen, jsbin, jsfiddle, cssdesk. Потому что там они мгновенно видят результат написанного кода и могут показать его другим.


      Codepen — одна из самых популярных. Там более 500 тыс. готовых решений. Из них половина — хлам: неэффективный код, не работают на планшетах и телефонах, не поддерживают все популярные браузеры. Надо потратить много часов на поиск идеи, которую можно использовать на своем сайте.


      Я решил делать подборки полезных решений с codepen. Первую уже выпускал на хабре «Обзор многоуровневых меню». Теперь вторая — «Обзор анимации для страниц загрузки сайта».


      Подборку разделил на 3 статьи.


      Читать дальше →
    • Javascript-анимация элементов как в jQuery, только своими руками

      Часто при поиске ответа на вопрос, как сделать ту или иную до этого незнакомую вещь, программист знакомится с опытом коллег. И довольно часто у нас, во фронтенд-разработке, можно увидеть советы следующего содержания: мол, просто подключи ту или иную библиотеку, просто поставь тот или иной плагин, просто перепиши проект на Ангуляре (просто_на_Ангуляре ))) ), и не надо забивать себе голову посторонними вещами.

      Однако, иногда стоят действительно творческие задачи, и обычный копипаст не спасает демократию (честно говоря, он почти никогда не спасает). Об одном из таких случаев я и хочу рассказать уважаемой публике.
      Читать дальше →
    • Шпаргалка по шаблонам проектирования


        Перевод pdf файла с сайта http://www.mcdonaldland.info/ с описанием 23-х шаблонов проектирования GOF. Каждый пункт содержит [очень] короткое описание паттерна и UML-диаграмму. Сама шпаргалка доступна в pdf, в виде двух png файлов (как в оригинале), и в виде 23-х отдельных частей изображений. Для самых нетерпеливых — все файлы в конце статьи.

        Под катом — много картинок.

        Читать дальше →
      • Шаблоны проектирования PHP. Часть 1. Порождающие

          Тема заезженная до дыр, не спорю… Вероятно, для опытных разработчиков моя статья будет мало, чем полезна. Я бы рекомендовал её к прочтению тем, кто только начал осознавать, что его коду чего-то не хватает, и что он созрел для вникания в это далёкое понятие – «паттерны». По себе помню, что довольно долгое время я путался в шаблонах, иногда даже не понимая, чем один отличается от другого. Именно этот факт стал основой для моей статьи. Примеры в ней не будут реальными. Они будут абстрактными и максимально простыми. Однако я постараюсь все примеры держать в едином контексте, чтобы можно было наглядно видеть отличия их использования в одной и той же ситуации. Я не буду нагружать классы лишним функционалом, чтобы можно было понять, какая именно часть кода имеет непосредственное отношение к шаблону. Главными героями примеров станут Factory (фабрика) и Product (продукт, производимый этой фабрикой). Возьмём это отношение за отправную точку. Возможно, в некоторых примерах это будет не очень уместно, но зато очень наглядно…

          Статья будет разбита на несколько частей. В каждой я буду рассказывать о новом типе шаблонов проектирования. Всем, кого эта тема может заинтересовать, прошу под кат.
          Меня заинтересовала...
        • Webix. Первое знакомство с JavaScript фреймворком

          • Tutorial


          Эта статья предназначена для тех, кто хочет узнать об основах использования этого фреймворка. В ней я постараюсь подробно рассказать о том, как начать работу с Webix. Также стоит обратить внимание на то, какие дополнительные полезные инструменты, помимо библиотеки, предлагают разработчики.

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

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

          Читать дальше →
        • Пошаговая инструкция по реализации загрузки файлов на сервер без перезагрузки страницы на PHP + Javascript

          Проблема


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


          Читать дальше →
          • –4
          • 30,1k
          • 7
        • 300 потрясающих бесплатных сервисов

          • Перевод


          Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



          A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

          • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
          • Bootswatch: Бесплатные темы для Bootstrap.
          • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
          • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
          • Strikingly.com Domain: Конструктор веб-сайтов.
          • Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
          • Withoomph: Мгновенное создание логотипов (англ.).
          • Hipster Logo Generator: Генератор хипстерских логотипов.
          • Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
          • Invoice to me: Бесплатный генератор счета.
          • Free Invoice Generator: Альтернативный бесплатный генератор счета.
          • Slimvoice: Невероятно простой счет.

          Читать дальше →
        • Как мы написали helpdesk

            Есть продукты, которые можно взять и использовать, но с небольшой модификацией «под себя». Так вот система заявок или helpdesk как раз к таким вещам не относится. Точнее, мы для себя не нашли подходящий продукт и решили сделать сами.


            Читать дальше →
          • Постинг в группу картинки с текстом с помощью Вконтакте API

            • Tutorial
            Задача запостить текст с картинкой в группу Вконтакте скриптом на PHP простая, тем более API Вконтакте считается понятным и надёжным. Тем не менее, мне не удалось отыскать в Интернете чёткого пошагового руководства для начинающих, которые содержало бы готовые ответы на все мелкие вопросы, возникающие на пути.
            image

            постим материал в сообщество ВК легко и просто
            • –10
            • 67,4k
            • 19
          • Как развернуть систему контроля версий (VCS) без командной строки


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

            Естественно, поиски были начаты с изучения Хабра — и привели к неожиданному результату. Несмотря на то, что системы контроля версий появились ещё в 1986 году, большинство туториалов по работе с современными системами контроля версий оказались неполными и сильно завязанными на работу с командной строкой.

            Мы ничего не имеем против командной строки в целом, но в нашей небольшой команде разработчиков (4 человека) фанатов работы с командной строкой нет :).

            Почему мы считаем, что работа с командной строкой неэффективна?

            1. Трата времени на ввод данных. Набивать команды намного дольше, чем кликать мышкой.
            2. Трата времени на обучение. Изучение нового синтаксиса в эпоху понятных интерфейсов однозначно дольше, чем обучение графическому интерфейсу.
            3. Вероятность ошибки. Ошибиться при вводе данных через командную строку легче (человеческий фактор никто не отменял).
            4. Нарушение принципов автоматизации. Возможно, это самый главный пункт. Компьютер создан для ускорения работы и замене человека при выполнении рутинных операций. В случае с командной строкой мы всегда работаем вручную, по сути, приходится каждый раз писать один и тот же программный код (пусть и примитивный).

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

            1. Будет пошаговой инструкций (по ней же будут работать наши программисты).
            2. Будет работать от начала и до конца (то есть по ней вы получите небольшой, но законченный результат — работающую распределенную систему контроля версий).
            3. Будет работать с использованием только графических интерфейсов (причины см. выше).
            Читать дальше →