Для получения полного доступа
зарегистрируйтесь.
RSS

Все сниппеты с тэгом «библиотеки»



dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Задача была следующей, сделать красивую полосу прокрутки для кода сниппетов. В MacOS, полоса прокрутки очень минималистична и красиво вписывается в наш интерфейс. Но, в Windows и других OS, полоса прокрутки выглядет везде по разному. Поэтому было решено заменить системный скроллбар на свой.

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

89f82efb23d7643ffb367b9adf801611.gif

Продолжение »

dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Сразу покажу демо:

l41m5gGukcDpZa2MU.gif

В качестве фреймворка используем Yii2, для работы с веб-сокетами Ratchet.

Добавляем через composer Ratchet:

composer require cboden/ratchet

Затем, создаём контроллер в папке commands для запуска сервера:

Продолжение »

dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Наткнулся на полезный (кто бы сомневался) проект Flysystem, от замечательной команды The League of Extraordinary Packages, который позволяет работать с такими хранилищами файлов как Dropbox, AWS, Azure, FTP, SFTP, WebDAV и другими. Для популярных фреймворков уже есть готовые интеграции, в том числе и для yii2 — yii2-flysystem

Допустим, нам необходимо создать папку для Dropbox. Создадим приложение на сайте, сгенерируем токен:

rAbTDKa.png

Добавим в composer:

composer require creocoder/yii2-flysystem

И подключим нужный нам адаптер, в нашем случае Dropbox:

Продолжение »

Bran
  • Репутация: 29
  • Сниппеты: 7
  • Ревизии: 0

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

Подключаем скрипты и стили:

<link href="timesheet.min.css" media="all" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="timesheet.min.js"></script>

Теперь добавим свои стили, например, чтобы при большом кол-ве данных отображался скролл:

body, .timesheet .data, .timesheet .scale section {
    font-family: Arial, sans-serif;
}
.timesheet {
    width: 100%;
}
.timesheet .data {
    overflow: scroll;
}
.timesheet .data li .bubble{
    opacity: 1;
}
/* Цвета */
.timesheet .bubble-js {
    background: #F0DB4F;
}
.timesheet .bubble-php {
    background: #5F82BA;
}
.timesheet .bubble-sql {
    background: #00618A;
}

Добавим элемент, в который будет выведена шкала времени

<div id="timesheet"></div>

Вызов библиотеки:

$('document').ready(function(){
    new Timesheet('timesheet', 2010, 2015, [
        ['2012', '2015', 'JS', 'js'],
        ['2012', '2015', 'PHP', 'php'],
        ['09/2010', '09/2015', 'SQL', 'sql']
    ]);
});