-
Технологии современной вёрстки pug + gulp + sass + sublime text + emmet
Последнее время совершенно нет времени даже на пост в блоге – помимо текущей работы погрузился в технологии современной вёрстки. Собственно, случайно наткнулся на видео FrontCoder-a Современная верстка сайта с нуля и понеслось … Информации для переваривания ОЧЕНЬ много, и вся на вес золота! Одно дело изучать сухую теорию, другое дело видеть своими глазами непосредственно процессинг,…
-
Хотлинки – уязвимость и тормоза!
Удалённо сопровождаю сайт одной довольно крупной Московской организации, судя по всему сайтов у них много и непосредственно сайт с базой данных для работы не мой. И основной сайт этот частенько очень так жестоко висит – страничка минут по 5 не может загрузиться и вместе с ним висит и сопровождаемый мною сайт, вернее не сам сайт,…
-
Jquery адаптивная фотогалерея – слайдер
Аллоха коллеги! Ваяю бюджетный сайт … нарыл хорошую адаптивную фотогалерею-слайдер baguetteBox – что прикольно, с мобильного пальцем листать можно! Рабочий пример на сайте Официальная демо страничка Ну и исходники на GetHub
-
Сайт визитка за 15 000 рублей
Как мне не нравится делать сайты на бесплатных движках Joomla и подобных (уже далеко не один пост написан о проблемах безопасности Джумлы, и по факту – ломали уже неоднократно) – иногда реалии всё же обязывают выполнять такую работу. Как ни крути – далеко не у всех есть лишние деньги на лицензию 1С-Битрикс. Да и в…
-
Готовые CSS стили для таблиц
Очень популярная задача – оформить таблицу в стиль подходящий для сайта. Выбрать, более менее подходящее для допила можно тут Ещё найду – дополню, если кто знает ещё подобные ссылочки – постим в комменты, буду благодарен.
-
Выделение области изображения и передача параметров в Битрикс
Всем привет! Закончил сегодня довольно интересный (для меня) проектик, который делал для товарища. Потыкать можно тут В 2х словах о ТЗ: тематика “продажа фотообоев” – расширение стандартного функционала до возможности выбрать из картинки произвольную область, с обсчётом стоимости работы вся информация должна передаваться в корзину и быть доступна в оформленном заказе фронтенд реализовал на Jquery…
-
Bootstrap Sublime Text Emmet FontWeb и другие полезняшки для вёрстки
Решил сделать репост полезных ссылок с http://webdesign-master.ru для себя, дабы не потерялось 🙂 Шрифты для веб-дизайна и верстки: fontweb.ru Создание прототипов “на коленке” wireframe.cc Иконки в шрифтах fontawesome.io Адаптивная каруселька owlcarousel Sublime Text 3 Sublime Text 3 Package Control LiveReload Browser Extension Sublime Text 3 Live Reload Plugin Fork by GrafikArt сервис проверки адаптивности (виртуальные…
-
Просто находка webdesign-master.ru
Получив ТЗ на вёрстку PSD макета в кроссбраузерный адаптивный шаблон, и осознав свою отсталость в этом вопросе (верстал довольно давно, вручную, причём сугубо “дедовскими” методами в FAR-e с подсветкой синтаксиса – вот такой я “динозавр”) решил почитать о современных подходах в данном вопросе… Собственно, томить не буду – Видео BOOTSTRAP: Как создаются современные адаптивные сайты…
-
Ресайзинг изображений на PHP img_resize
В продолжение предыдущего поста по оптимизации изображений … Соответственно, если в коде имеем конструкцию img scr с указанием width – тут есть смысл проверить соответствие width и реального размера картинки, если реальный больше – нужно уменьшить и использовать уменьшенное! Погуглив, сначала нашел такую библиотеку но прозрачный png она меняла на чёрный, а вот эта функция…
-
Оптимизация изображений optipng
Итак, как следствие предыдущего поста – задача оптимизации png изображений (в моём случае). Всё действо будем делать прямо на сервере, в моём случае под управлением centos. 1. Ставим optipng – yum install optipng 2. Пишем небольшой скрипт, перебирающий все картинки и запускающий optipng с максимальным сжатием for i in `find -name ‘*.png’`; do optipng -o7…
-
Инструмент web разработчика PageSpeed Insights
Открыл для себя PageSpeed Insights Анализ страницы – рекомендации разработчику. Полезная ИМХО штуковина! Отдельно спасибо AVK за анализ интернет аптеки на форуме sbup.com Нужно будет список подобных полезных инструментов составить и на отдельную страничку закрепить (задачка на будущее т.к. пока маловато будет).
-
HTTPS для домена. Настраиваем подключение SSL сертификата в NGINX.
Новая задачка – клиент подключает на свой сайт Яндекс.Кассу, а там очень настойчиво рекомендуют для взаимодействия использовать шифрованный протокол https. Ранее с https я лично не сталкивался (вернее сталкивался но только сугубо в роли пользователя)… Собственно, живём в замечательную эру веб-технологий – нарыл пару отличных статеек (ссылки внизу). Если в 2х словах – настраиваем nginx…
-
FireBug сеть – анализ скорости загрузки страницы
Продолжаю мучать интернет магазин корейских обоев. Сейчас решил посмотреть сайт с точки зрения Запрос-Ответ, скорости отдачи контента и в целом как страничка принимается браузером. Для этой цели я использовал расширение для браузера FireBug – закладка “Сеть” (см.рис). Сразу же обнаружил косячёк – какого то хрена морда дёргает детальные изображения товара, что конечно же сильно притормаживает…
-
Кликабельный JQuery слайдер для вертикальных изображений
Пост абсолютно не информативный, а даже наоборот – просьба о помощи 🙂 Собственно, ИЩУ кликабельный! JQuery слайдер для вертикальных изображений! Слайдеров куча, но 99% под горизонтально ориентированные картинки, а та малая часть, что мне подошла – некликабельны 🙁 Слайдер подбирается для морды сайта “Корейские обои для стен“. В данные момент поставил более менее подходящий для…
-
Javascript – передача параметра в модальное окно fancybox
Вроде элементарное ТЗ – а промучался полдня. При клике на “купить” – должно появляться модальное окно “Товар добавлен в корзину” “продолжить покупки” “оформить заказ” В качестве модального окошка решено использовать скриптик JancyBox – и центрируется и затемняет, в общем всё устраивает! кроме одного НО! – при нажатии на “купить” товар сначала должен “упасть” в корзину,…
-
vipmaster.net – перспективный SEO форум
Итак, прошу любить и жаловать VIPMaster – Форум ВебМастера и SEO оптимизатора. Молодой, перспективный SEO форум. Приятный интерфейс со всеми удобными “фенечками” на движке IP.Board Помимо прямого направления поисковой оптимизации, довольно плотно обсуждаются темы сайтостроения (Web-программирования,Услуги вебмастера), конвертации траяфика (электронная коммерция), коммерция(купля/продажа) и другие не менее интересные темы. Не буду скрывать, что статья рекламная –…
-
JQuery – мультиселект и cлайдер бегунок
Задача – создать фильтр с красивым выпадающим списком с возможностью множественного выбора, а так же слайдер-бегунок для выбора числовых диапазонов. Собственно, плотный поиск в сети конечно предоставит необходимые сведения, но может кому пригодиться найденный мною материал: 1. jQuery Dropdown CheckList – TESTING – собственно, готовое решение множественного выбора с различными демонстрационными примерами (мне например сильно…
-
Как выбрать правильную CMS – поучительная история
Обратившись в веб-студию для создания сайта, стоит очень внимательно отнестись к выбору CMS (система управления сайтом). Так на днях столкнулся с очень интересной и поучительной ситуацией! Итак, ко мне обратился заказчик с просьбой “навести порядок” в интернет-проекте. Став разбираться я обнаружил, что проект реализован на самописной CMS к которой разработчики ни коем образом доступ не…
-
Требуется веб-дизайнер
Время от времени прилетают заказы на всякого рода сайты (последнее время практикую Битрикс) и вопрос с дизайном на данный момент остаётся открытым. Мог бы заняться сам, но последнее время нахожусь в жестоком цейтноте. Собственно, нужен дизайнер (уже на данный момент есть один заказ). Можно конечно на фрилансе поискать, но это как запасной вариант… В обязанности…
-
Ignitegallery – Jquery слайдер-фотогалерея для Joomla
Заказчиком была поставлена задача модернизировать фотогалерею объектов, раньше просто была тумба на все объекты – количество их расло а пагинацию делать не хотели. Придумали сделать прокруткой превьюшек в одну строку с возможностью увеличения для детального просмотра – т.е. добавить возможности слайдера оставив функционал галереи. Довольно долго шарил в поисках подходящих вариантов, нашел кучу слайдеров –…