Создание превью изображений с помощью HTML5 File API и jQuery и отправка их на сервер с использованием AJAX

Содержание:

  1. Множественный выбор файлов, создание превью на стороне клиента и отправка данных ajax’ом на сервер
  2. Добавляем прогресс-бар
  3. Готовые решения для загрузки изображений на сервер

1. Множественный выбор файлов, создание превью на стороне клиента и отправка данных ajax-ом на сервер

В примере представлен код для множественного выбора файлов, их валидации (проверка на формат и размер) и загрузки их с помощью ajax на сервер.
(далее…)

Памятка по работе с Chrome DevTools

CTRL + SHIFT + I — открытие панели с инструментами разработчика.


CTRL + SHIFT + F — поиск во всех загруженных на странице файлах:


CTRL + G — переход к указанной строке:


Если ввести в консоли document.designMode = 'on', активируется возможность редактировать элементы страницы, имеющие текстовой контент:


Введя $0 в консоли, вы получите ссылку на выделенную в панели элементов DOM ноду. Если вы используете jQuery, то для получения ссылки можно ввести jQuery($0):


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


Симуляция различных состояний DOM элемента (:hover, :focus, :visited):


Интересные материалы по работе с Chrome DevTools:

[Примеры] Яндекс.Карты API (Yandex.Maps API)

Документация по JS API | Песочница | Модули JS API Карт | Модуль для отрисовки регионов

Содержание:

  1. Подключение API, создание контейнера для карты и создание карты
  2. Добавление метки по адресу с использованием геокодера
  3. Стилизация меток
  4. Масштабирование карты так, чтобы было видно все объекты
  5. Добавление и переключение нескольких коллекций меток
  6. Определение местоположения пользователя
  7. Как изменить цветовую палитру Яндекс.Карты
  8. Как получить координаты объекта на PHP
  9. Как отключить scrollZoom на Яндекс.Карте
  10. Как удалить все элементы управления на Яндекс.Карте
  11. Создание выпадающей панели с поисковыми подсказками адресов
  12. Работа с полигонами в Yandex.Maps

(далее…)

[Памятка] PuTTY, Xshell, SSH, UNIX команды

  1. Операции с файлами
  2. Работа с процессами по ssh
  3. Операции с правами доступа к файлам
  4. Получение информации о системе
  5. Создать/Распаковать zip/tar.gz архив через ssh
  6. Экспорт/Импорт/Создание дампа базы данных mysql через ssh
  7. Клавиатурные сокращения в PuTTY и Xshell
  8. Кодировка в консоли OpenServer. Как корректно отобразить кириллицу и избавиться от кракозябр.

(далее…)

[Шпаргалка/Примеры] PHP Imagick (ImageMagick)

Imagick является встроенным php-расширением для создания и изменения изображений используя API ImageMagick (примеры).

Простые методы:

(далее…)

Конвертация цен в WooCommerce (WordPress)

Пример использования: если у вас в интернет-магазине цены в админке указываются в долларах/евро, а выводить нужно в рублях.
В functions.php вашего шаблона или в файл плагина необходимо добавить такой код:

Как конвертировать цены у товаров, имеющих заданный тег:

[DLE] Как добавить в пользовательские шаблоны (custom) поддержку тегов {full-story} и {fullimage-x}

Для вывода новостей на страницах в DLE используются пользовательские шаблоны, подключаемые с помощью тега {custom …}. В этих шаблонах есть доступ только к краткой версии новости {short-story} и к изображениям-миниатюрам из полной новости.
Но иногда при выводе новостей на страницах сайта необходимо вывести полную новость или изображение из этой новости.
(далее…)

jQuery/JavaScript, iPad/iPhone (iOS/Safari) и событие click

При разработке одного веб-приложения с использованием jQuery заказчик заметил, что часть функционала не работает на iPad/iPhone. В частности не срабатывало событие «click».

Сперва гугл привел на хабрахабр и stackoverflow, где предлагалось одно и тоже решение — использование события «touchstart» на iPad вместо «click»:

но при использовании этого решения невозможно было пользоваться прокруткой.

Спустя некоторое время удалось найти правильное и очень простое решение. Оказалось, что для нормальной работы события click на iOS элементы, не являющиеся ссылками, на которые навешивается обработчик события click, должны иметь атрибут «onClick» (его значение может быть пустым)

Второй вариант — добавить в css свойство cursor со значением pointer