Блог посвящен Веб разработке, HTML, CSS, Javascript, всевозможные браузерные технологии. Разработка для мобильных браузеров. HTML5, CSS3, WebGL, и другие веб технологии. SEO Поисковая оптимизация, интернет коммерция, браузерные игры, Серверные языки программирования. PHP.
Полный аякс грядет. Всемирный полный аякс.
В мире существует много разных Javascript расширений, фреймворков, способных удобно работать с динамическим содержанием, Англяры, reactJS, но мы будем говорить не о них.
Мы уже ознакомились с простой реализацией аякса, теперь можем расширить это взаимодействие.
Встречали ли вы проблему, когда адаптивная верстка (бутстрапа) не может быть применима ко всему сайту. Предположим, у вас на странице присутствует большая таблица, которую неудобно будет сворачивать в ключ-значение, как описано здесь.
И что же делать?
У вас широкое полотно, но шапка страницы сжимается по размеру окна и остается в начале.
Растянуть шапку — не дело, ведь чтобы теперь добраться до правого угла — нам нужно пользоваться скроллингом, а таблица пользователю вовсе не нужна.
Но выход есть
Нам понадобиться щипотка магии и немного усилий
Только вчера заметил, что виджет вконтакте для групп сильно тормозит при загрузке. И мало того, что он тормозит, так из-за него не грузятся и остальные рабочие скрипты.
А ведь загрузка идет строго по документации. Так зачем, спрашивается, надеяться на сторонние второстепенные сервисы, которые рано или поздно вас подведут.
Раз сервисы сторонние — давайте научим их не лезть в основную загрузку сайта и загружаться второстепенно.
Думаете, что «контакт отвалился только вчера, и то из-за каких-то проблем с датацентром сегодня уже все починили...». Но это же может случиться снова и снова и узнаете вы об этом только от пользователей ваших сервисов. Не проще ли перестраховаться заранее... подумайте об этом...
Оказывается в интернете существует много потенциальных способов навредить, или частично манипулировать пользователем без его ведома. Другими словами — причинить вред. Одним из таких старинных способов причинить вред — стала уязвимость под названием Сross Site Request Forgery — межсайтовая подделка запросов.
В двух словах — уязвимость позволяет заставить пользователя выполнить какой-либо запрос на произвольном ресурсе, если пользователь там авторизован. С одной стороны — это и не уязвимость вовсе, т. к. позволяет проделать действия, на которые у пользователя и так есть права, с другой стороны — это манипуляция от имени чужого пользователя.
Уязвимость настолько серьезная, что во фреймворке Symfony 2 при установке — ей выделили отдельную страницу конфигурации
Хотите знать секрет правильной настройки? копаем вместе
Основная проблема правильного отображения таблица является ее квадратная форма.
Мы не можем сдать страницу без преобразования таблицы. Мы можем уменьшить шрифт, отступы, но если таблица широкая — этого будет недостаточно без преобразований.
Тексты можем сузить рисунки можно сжать, а вот с таблицами так не сделаешь.
Хотите знать решение?
Лучше 1 раз увидеть чем 100 раз услышать. Попробуйте сжать окно браузера
| Колонка 1 | Колонка 2 | Очень длинный заголовок Колонки | Заголовок с пустым полем |
|---|---|---|---|
| Значение колонки 1 | Значение колонки 2 | Значение колонки 3 | Тут поле есть |
| Строка 2. Значение колонки 1 | Строка 2.Значение колонки 2 | Колонка 3 |
Финальный этап. Мы собираемся сцепить все JS и CSS файлы в один итоговый большой файл. Как такое возможно? Спросите вы.
Многие могут подумать, что автор просто спятил и пытается реализовать не реализуемое. Ну зачем ему понадобилось сливать эти 2 файла в один?
А я вам скажу, что эта реализация будет экономить вам еще один коннект при загрузке вашего сайта на каждый логический модуль. Более того, вам больше не придется прописывать каждый раз в исходном файле линк на css файл и вспоминать, был ли он, а также переживать, что клиент может недополучить стили. В итоге мы получим единый компонент, который зашит в одном единственном файле и нам не нужно больше думать о том, все ли у клиента заработало.
Дальше начинается магия...
Замечали такую замечательную вещь. Получив изображение из фотоаппарата — вы вкладываете его на сайт, а загружается оно повернутым на 90 градусов? Что же это за бяка такая, почему крупные ресурсы вроде контакта заливают изображение правильно?
Чем наш сервис то хуже? Почему в базовом PHP и GD так криво настроено чтение исходных изображений?..
А код у вас выглядит примерно так?
Простые решения, простая жизнь!<?php
$prop=getimagesize($filename);
switch($prop[2]){
case IMAGETYPE_JPEG:
$image = imagecreatefromjpeg($filename);
break;
case IMAGETYPE_GIF:
$image = imagecreatefromgif($filename);
break;
case IMAGETYPE_PNG:
$image = imagecreatefrompng($filename);
break;
}Тогда этот материал будет для вас полезен
Всего 9 строчек кода CSS дают возможность использовать статус загрузки для любого стандартного элемента в Bootstrap v 3.0 и выше. Используйте их на здоровье в своих проектах
Вот такие чудесные вещи можно вытворять одним дополнительным классом Loading
Default Primary Danger Success Info Warning
Default Primary Danger Success Info Warning
Как это удалось сделать?
Сегодня речь пойдет о реализации механизма мгновенного отображения содержания страницы. Представьте, что вы нажимаете на ссылку и не успели отжать кнопку, как страница уже загрузилась. Как такое возможно? Спросите вы. Возможно, и на сегодняшний день существует не мало таких технологий.
Мы будем отталкиваться от идеи минимального ввода данных от пользователя. Пользователь и так водит мышкой и способен передать достаточно данных, чтобы система догадалась и предвидела его следующий шаг.
Копаем глубже?
В продолжении темы сжатия CSS и JS файлов — можно добиться еще большей производительности при загрузки страницы, объединив между собой схожие по смыслу JS и CSS файлы. Если волею судьбы — во всех страницах проекта используются одни и те же JS файлы (либо все JS файлы в папке) — мы можем слепить их в один файл и к серверу будет меньше обращений в итоге.