Архив метки: HTML

Переход с Notepad++ на VS Code

Опубликовано автором
1

Долгие годы верой и правдой служил Notepad++. Доходило до того что я использовал его даже в Linux (через Wine). Несмотря на до сих пор его высокую популярность, все же захотел перейти на VS Сode, и не пожалел. Все таки в Notepad++ несмотря на множество плагинов, функционал маловат и продуктивность из-за этого падает. VS Code же напротив сейчас на гребне волны, и даже из коробки в нем много чего есть. Чего стоит только тесная интеграция с git. Хотя зачастую по старой памяти параллельно открыта обычная консоль git, и кое что все равно приходится делать там. Но, тем не менее, наиболее частые операции — add, commit, checkout, push — теперь можно делать прямо из редактора. Однако трудности перехода все же были. Конечно, они в какой-то мере специфичны для меня, но возможно некоторые решения пригодятся и вам. Перед тем как перейти к деталям, замечу, что установка плагинов в VS Code вынесена на основную панель, а не запрятана в недрах меню (в добавок с недвусмысленной иконкой — собери все из кубиков).

Ну а теперь по порядку:

Метки на полях, с быстрым переходом по ним

В Npp они ставились ctrl+F2 или просто мышкой на полях. Переход по ним через F2. Так как бывает приходится иметь дело с длинными файлами, а так же редактировать параллельно код в двух противоположных концах файла, эта функция очень удобна.

Для VS Code есть несколько плагинов на эту тему. Есть например Numbered Bookmarks, который даже судя по названию позволяет ставить нумерованные метки, но для меня это лишне. Остановился на просто Bookmarks. По умолчанию там ctrl+alt+K — создать метку, ctrl+alt+J переход на предыдущую, а ctrl+alt+L на следующую. Метки сохраняются в папке мета-информации .vccode (это нужно иметь ввиду при отслеживании файлов в git).

Вставка HTML

В Notepad++ у меня за это отвечал плагин WebEdit с настроенными кнопками употребительных тегов на панели. Плагин одинаково хорошо вставляет и оборачивает код.

Для VS Code для простой вставки тега, достаточно написать его название и нажать Enter (зависит от типа файла, и соответствующего авто-завершения). Обертку кода в тег тоже можно сделать без плагинов. Для этого выделяем код для обертки, нажимаем shift+ctrl+P (это универсальная комбинация для вызова многих команд), выбираем действие Emmet: Wrap Individual Lines with Abbreviation (Скорее всего оно будет первое в списке, то есть просто нажимаем Enter), затем пишем название тега и еще раз Enter. Довольно мудрено, поэтому я стал искать плагин. Мне пришелся по душе htmltagwrap. Здесь горячая клавиша по умолчанию — alt+W и сразу же происходит обертка тегом P. Если нужен другой тег, просто пишете его название, например div и тег меняется на нужный. К сожалению при нескольких уровнях вложенности иногда бывает работает не корректно и не прописывается автоматически имя завершающего тега, возможно это исправят позднее.

Определение кодировки

Увы, еще встречается кодировка отличная от UTF-8 кое где, например в том же Bitrix. И нужно корректное определение файлов с ней. Кстати, Notepad++ тоже не всегда корректно определял кодировку и мог спутать windows-1251 с Macintosh.

Чтобы VS Code определял кодировку при открытии файла, нужно включить опцию autoGuessEncoding. Для этого идем в меню File -> Preferences -> Settings. Вводим в поиске эту опцию и ставим галку. Теперь редактор должен определять кодировку сам, иначе придется выбирать ее вручную, нажав на название кодировки справа внизу экрана.

Прочее

По умолчанию стоит темная тема оформления. Но я привык к светлой, возможно и вы захотите выбрать что то иное. Для выбора темы нужно нажать не совсем типичную комбинацию клавиш ctrl+K+T, затем выбрать нужную в выпадающем списке. Мне понравилась предустановленная тема Light (Visual Studio). Для особых ценителей можно установить через плагины тему NotepadPlusPlus Remixed Theme. Видимо создана тем, кто так же переходил с Npp.

Хотя в этой статье не ставится цель осветить все полезные плагины, а лишь те что помогают плавно перейти с Npp, упомяну еще парочку.

  • Git History — позволяет посмотреть историю коммитов, подобно Git GUI. На панели справа вверху появляется иконка для вызова плагина.
  • WakaTime — тайм-трекер. Ведет подробную статистику времени, которое вы провели за кодингом. Требуется регистрация на одноименном сайте — wakatime.com — и последующий ввод Api Key в настройках плагина. Для этого нажимаем универсальное shift+ctrl+p, выбираем WakaTime: Api Key, и вставляем ключ полученный на сайте. Саму статистику можно посмотреть на сайте, кликнув на времени, которое отследил Waka, на нижней панели в редакторе.

Выпадающее меню на CSS без доступа к HTML, без JavaScript

Опубликовано автором
Добавить комментарий

В некоторых онлайн конструкторах сайтов на определенных тарифах очень ограничен функционал (например — Битрикс24). Бывает нет возможности вставить свой JavaScript-код, а так же поменять HTML-код готовых блоков. Такая политика в общем то не удивительна, надо же как-то монетизировать такие продукты.

Что если все же хочется выпадающее меню на сайте, а базовые модули с таким функционалом не доступны. Попробуем сделать чисто на CSS. Бывает, что его добавлять как раз разрешают.

Итак пример структуры одноуровневого меню, которое будем превращать в двухуровневое:

<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Four</li>
<li>Five</li>
<li>Sub el 1</li>
<li>Sub el 2</li>
</ul>

И CSS:

ul {
  word-spacing: -.36em;
  display: table;
  position: relative;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  padding: 10px;
  word-spacing: normal;
  height: 20px;
  width: 80px;
  background: gray;
}

ul:hover li {
  display: inline-block;
}

li:nth-child(6),
li:nth-child(7) {
  display: none;
  position: absolute;
  left: 200px;
  background: lightgray;
}
li:nth-child(6) {
  top: 40px;
}
li:nth-child(7) {
  top: 80px;
}
li:nth-child(1):hover ~ li:nth-child(6),
li:nth-child(2):hover ~ li:nth-child(6),
li:nth-child(4):hover ~ li:nth-child(6),
li:nth-child(5):hover ~ li:nth-child(6),
li:nth-child(1):hover ~ li:nth-child(7),
li:nth-child(2):hover ~ li:nth-child(7),
li:nth-child(4):hover ~ li:nth-child(7),
li:nth-child(5):hover ~ li:nth-child(7) {
  display: none;
}

Вот что у нас получилось:

  • First
  • Second
  • Third
  • Four
  • Five
  • Sub el 1
  • Sub el 2

Как видно, выпадающие пункты меню размещены в конце, иначе начинаются проблемы при отображении. Некоторый CSS-код относится к решению проблемы отступов между элементами типа inline-block (В частности word-spacing и display: table у UL). Неудобство, конечно, еще в том что все отступы пунктов выпадающего меню придется прописывать вручную. А для разных разрешений экрана, по видимому, их надо будет настраивать с помощью медиа-запросов CSS.

Но суть в том, что все же есть техническая возможность сделать выпадающее меню для клиентов, которые пока не готовы платить дополнительный ежемесячный взнос за расширенный функционал онлайн-конструктора.

Как убрать всплывающие окна на сайте

Опубликовано автором
Добавить комментарий

Как то раз у одного из моих клиентов, пользующегося бесплатным хостингом, неожиданно стала всплывать недоброкачественная реклама на сайте. Расследование указало на то, что хостинг просто заразили вирусом. Переезжать на новый хостинг по некоторым причинам было неприемлемо. Файлы самого сайта были вирусом не тронуты. В итоге пришлось искать альтернативные методы вырезания рекламы. Сначала был испробован…

Метод перехвата вывода с чисткой кода после закрывающего тега body

Именно в этом месте в моем случае и оказался вредоносный код. Перед началом вывода был добавлен код:

<?php
function antibug($buffer)
{
	// убрать мусор
	$garbageCode = substr(strstr($buffer, "</body>"), 7);
	$buffer = str_replace($garbageCode, "", $buffer)."</html>";
	return $buffer;
}
ob_start("antibug");
?>

А в конце:

<?php
ob_end_flush();
?>

Для большинства страничек на сайте это сработало. Но в некоторых местах реклама полезла опять. Тогда был применен 2-ой способ.

Поднятие слоя с сайтом выше всплывающей рекламы

Способ, строго говоря, не очень хороший, так как вредоносный код он не убирает. Из-за этого если хостинг, к примеру, не вылечится от вируса долгое время, кто знает, могут быть санкции поисковой системы — что мол сайт угрожает безопасности и так далее. Но на первое время пойдет, чтобы реклама не надоедала. В моем случае именно это и нужно было. А делается это просто — элементу содержащему весь сайт (в примере, div с идентификатором class=’site’) назначается следующий код CSS:

.site {position:relative; z-index:999999;}

И всё! Реклама на сайте присутствует, но её просто не видно.
Кстати у клиента хостинг все таки вылечился, а указанные меры остались в качестве предосторожности на будущее. Конечно, не панацея, но все же.

Как вставить или заменить любую ссылку во Flash с помощью HTML и CSS

Опубликовано автором
Добавить комментарий

Для вставки или изменения ссылки в swf-файле вовсе не обязательно иметь его исходники и среду разработки. Ниже приведен код, в котором реализована ссылка с баннера, не имеющего внутренней ссылки.

<div style="position:relative;">
<a style="position: absolute; width: 100px; height: 100px; left: 0; top: 0; background: url(/images/blank.gif) left top no-repeat;" href="http://www.example.ru"></a>
<object
  type="application/x-shockwave-flash"
  data="/banner.swf"
  width="100" height="100">
    <param name="movie" value="banner.swf">
    <param name="wmode" value="opaque">
    <param name="allowScriptAccess" value="sameDomain" />
</object></div>

В примере используется флешка 100 на 100 пикселей. На неё накладывается ссылка с абсолютным позиционированием. А чтобы это было возможно, swf-файлу присваивается параметр wmode с значением opaque. Для работы данного примера также необходим пустой gif 1 на 1 пиксель, используемый в качестве фона ссылки.

Как обрезать Flash с помощью HTML и CSS

Опубликовано автором
Добавить комментарий

Иногда возникает необходимость модифицировать какой либо элемент дизайна сайта, сделанный на Flash. Допустим fla-исходников нет и в помине, и/или среда разработки Flash недоступна. Если вся требуемая модификация сводится к обрезке имеющегося swf-файла, то это проще сделать средствами HTML и CSS. Например это может потребоваться когда шапка сайта сделана во Flash заодно с меню. Если надо поменять только меню, то его можно отрезать от Flash и сделать альтернативное на JavaScript. Рассмотрим два варианта обрезки.

  1. Обрезаем Flash снизу 
    <div style="height:175px; overflow:hidden;">
<object
  type="application/x-shockwave-flash"
  data="/header.swf"
  width="800" height="200">
    <param name="movie" value="header.swf">
    <param name="wmode" value="transparent">
    <param name="allowScriptAccess" value="sameDomain" />
</object>
</div>

    В этом случае высота Flash — 200 пикселей, а высота div-контейнера — 175 пикселей. Соответственно swf-файл будет обрезан снизу на 25 пикселей.

  2. Обрезаем Flash сверху 
    <div style="height:175px; overflow:hidden;">
<div style="position:relative; top:-25px;">
<object
  type="application/x-shockwave-flash"
  data="/header.swf"
  width="800" height="200">
    <param name="movie" value="header.swf">
    <param name="wmode" value="transparent">
    <param name="allowScriptAccess" value="sameDomain" />
</object>
</div>
</div>

    А эта обертка в 2 div-а обрезает swf-файл сверху на 25 пикселей.

В следующем посте рассмотрим как вставить или заменить любую ссылку во Flash с помощью HTML и CSS без вмешательства в сам swf-файл.