-
Технологии современной вёрстки 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
Заказчиком была поставлена задача модернизировать фотогалерею объектов, раньше просто была тумба на все объекты — количество их расло а пагинацию делать не хотели. Придумали сделать прокруткой превьюшек в одну строку с возможностью увеличения для детального просмотра — т.е. добавить возможности слайдера оставив функционал галереи. Довольно долго шарил в поисках подходящих вариантов, нашел кучу слайдеров —…