Blog by Alla

Ubuntu - настройка виртуальных хостов

2012-11-23T00:00:00Z

Итак, приступим.

Для настройки виртуальных хостов необходимо проделать несколько операций. Настраивала я все это счастье под Ubuntu 12.10. Так как сайт на php, пришлось поставить соответствующие инструменты. Откройте терминал.

Для начала устанавливаем Apache. В окне терминала введите строку:

sudo apt-get install apache2

Теперь установим PHP:

sudo apt-get install php5 php5-mysql libapache2-mod-php5

Перезагрузите Apache-сервер, чтобы загрузить php-модули:

sudo service apache2 restart

Для проверки статуса сервиса, его старта, остановки, рестарта или перезагрузки конфигурационных файлов используются следующие команды:

service apache2 status
sudo service apache2 start
sudo service apache2 stop
sudo service apache2 restart
sudo service apache2 reload

Файл конфигурации Apache хранится по адресу /ect/apache2/apache2.conf. Проверьте его обязательно. У меня была закомментирована строчка Include sites-enabled/, в следствии чего не получалось запустить созданный хост из нужного каталога.

В браузере наберите адрес http://localhost. Если все хорошо, то должна появится надпись "It works!". Эта надпись выводится из файла /var/www/index.html. Можете отредактировать его и убедиться, что все правильно.

Теперь можно приступить к настройке хоста. Я захотела для начала установить у себя фреймворк Symfony2. Создала в домашнем каталоге папку website, а в ней symfony. Путь к такой папке:

/home/User/website/symfony

Он нам понадобится для конфигурационных файлов. User - это ваше имя в системе (пользователь/логин). Затем закачала туда файлы. И теперь мне нужно, чтобы по ссылке symfony.me открывалось окно с приветствием данного фреймворка.

Зайдем в папку /etc/apache2:

cd /etc/apache2
ls

Командой ls посмотрите, что находится в данной директории. Нас интересуют два каталога — sites-available и sites-enabled. В папке sites-available хранится информация о существующих хостах, а в папке sites-enabled о подключенных, причем файлы в ней являются символическими ссылками на файлы из папки sites-available

Шаг 1

Создадим в каталоге sites-available файл symfony.me (к слову, назвать его можно как угодно, но так просто легче не запутаться) и откроем его для редактирования.

sudo gedit /etc/apache2/sites-available/symfony.me

Откроется пустой файл. Можете скопировать в него полностью содержимое файла /etc/apache2/sites-available/default (отрыть для чтения его можно просто двойным кликом, зайдя в эту папку):

	<VirtualHost *:80>
		ServerAdmin webmaster@symfony.me
					ServerName symfony.me
		DocumentRoot /home/user/website/symfony
		<Directory>
			Options FollowSymLinks
			AllowOverride None
		</Directory>
		<Directory /home/user/website/symfony>
			Options Indexes FollowSymLinks MultiViews
			AllowOverride All
			Order allow,deny
			allow from all
		</Directory>
		ErrorLog /var/log/apache2/error.log
		LogLevel debug
		CustomLog /var/log/apache2/access.log combined
	</VirtualHost>

Внесем некоторые изменения: отредактируйте ServerName:

ServerName symfony.me

Заменим адрес директории DocumentRoot на свою:

DocumentRoot /home/user/website/symfony

Изменим строчку Directory /var/www/:

Directory /home/user/website/symfony

И изменим значение AllowOverride None на:

AllowOverride All

Шаг 2

Теперь отредактируем файл hosts:

sudo gedit /etc/hosts
terminal

У меня он выглядит так:

127.0.0.1 localhost.localdomain localhost HOME-SP
127.0.0.1 symfony.me

# The following lines are desirable for IPv6 capable hosts
::1 ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

Вам нужно добавить строчку:

127.0.0.1 symfony.me

Шаг 3

Теперь включим наш сайт

sudo a2ensite symfony.me

Чтобы выключить сайт

sudo a2dissite symfony.me

Шаг 4

Перезагружаем Apache

sudo service apache2 restart

Идем в браузер и в набираем адрес хоста, в моем случае это symfony.me/web/app_dev.php. У меня конечно не с первого раза вышло. Это уже вопрос фреймворка. В php.ini пришлось отредактировать строчку date.timezone:

sudo gedit /etc/php5/apache2/php.ini

Раскомментировать и прописать Europe/Moscow.

date.timezone = Europe/Moscow

Добро пожаловать

2017-05-08T00:00:00Z

Добро пожаловать в мой блог.

Более 12 лет занимаюсь frontend-разработкой. Закончила Череповецкий государственный университет по специальности инженер-программист.

Верстаю кроссбраузерно, блочно, адаптивно. Работала с разными CMS.

С 2015 работала в социальной сети, где занималась разными большими по охвату пользователей задачами.

Увлекаюсь дизайном, фотографией. С 2009 года живу в Петербурге, где есть масса возможностей для реализаций моих хобби. Знаю много о Японии и других странах, очень люблю кошек, выращиваю цветы и завариваю пуэр.

Организация стилей. Группировка по стилевому назначению

2020-10-17T00:00:00Z

Не знаю, как происходит это у других разработчиков, но я всегда любила группировать стили по назначению. Сейчас вкратце расскажу о чем я.

Возьмем небольшой пример. Пусть будет самостоятельный section на странице, который нужно как-то покрасить, задать размеры отступов, с помощью псевдоэлементов прикрутить красивости и etc.

.header {
  border: 1px solid #cfc8c8;
  border-bottom-color: 1px solid red;
  font-size: 12px;
  background-image: url("path/pic.png");
  background-size: 562px;
  width: 980px;
  padding: 20px 20px;
  font-weight: bold;
  height: 110px;
  color: #666;
  margin: 24px 0 0;

  &:before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-color: #f1ece8;
    bottom: 0;
    left: 50px;
  }

  &:after {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-color: #f45674;
    bottom: 0;
    right: 50px;
  }
}

И вот когда видишь такую мешанину, немного становится дурно. Такой код я встретила в первую неделю работы, когда вышла на последнее место. С одной стороны, кому от этого плохо? Никому. С другой, мне. Я получила от руководителя таску на внесение изменений в стили согласно макету. Головная боль меня сопровождала несколько дней, пока я не сдалась. В общем, я решила просто отрефакторить куски стилей. При чем мне нужно было сделать не только тех частей, которые затрагивали мои правки, а всего кода. Но, поверьте, уж лучше так, чем месить намешанное.

.header {
  margin-top: 24px;
  padding: 20px;

  width: 980px;
  height: 110px;

  font-size: 12px;
  font-weight: bold;
  color: #666;

  border: 1px solid #cfc8c8;
  border-bottom-color: 1px solid red;
  background-image: url("path/pic.png");
  background-size: 562px;

  &:before,
  &:after {
    content: "";
    position: absolute;
    bottom: 0;

    width: 10px;
    height: 10px;
  }

  &:before {
    left: 50px;
    background-color: #f1ece8;
  }

  &:after {
    background-color: #f45674;
    right: 50px;
  }
}

Я считаю, что это хорошее стилевое оформление позволит быстрее разбираться в коде и вносить в него правки. Стили сгруппированы по назначению: все что касается отступов - в одном блоке, оформление текста - в другом, и так далее. Это позволит сэкономить время разработчику. Проверено на опыте. И я не раз получала респект от коллег.

Так же, если у вас есть элементы, которые сильно похожи, но отличаются друг от друга парами свойств, то неплохо их группировать.

Иногда возникают спорные моменты, и не знаешь как сгруппировать правильнее. Можно отталкиваться от того, где вес свойства важнее, и приписывать его к необходимому блоку свойств.

В данной статье я не стану углубляться в оптимизацию свойств, как и стилей в целом. Просто хочу обратить внимание на небольшое удобство в оформлении. Для примера я использую код на основе препроцессора. Какого - это не так важно. Главное для меня объяснить суть.

Update

2022-11-09T00:00:00Z

Немного оживить мой блог меня сподвигла ситуация в некоторых социальных сетях, которая произошла с неделю назад. Мне взяли и просто удалили аккаунты. Все. Я их восстановила. Но не все. Думаю, что делать.

Времена сейчас такие, что все хлипко, как лед в весенний период. Поэтому хочу попробовать оживить блог. Хочется начать писать тут и постепенно перейти на английское изложение. Это не произойдет быстро, но произойдет, однако.

Из бытовых вопросов в ближайшее время я напишу заметки о покупке недвижимости и общем экономическом состоянии в Нидерландах. Последнее может сильно меняться, ибо ничто не вечно и очень быстротечно. В своем блоге я могу выражать свое мнение как угодно и не бояться быть забаненной, или удаленной. Сейчас фоново обдумываю систему лайков и RSS. Картинки тоже будут. Их я нашла где хранить. Будут ли они появляться в социальных сетях? Хороший вопрос.

В общем, постараюсь калякать. И много. И позитивного.

Blog переехал на 11ty

2023-08-03T00:00:00Z

Перевезла свой блог на Eleventy - простой генератор статических сайтов. Достаточно удобный и практичный. Есть много плагинов для различных нужд.

State of css 2023

2023-11-26T00:00:00Z

И так. Ух! Как же я отстала, что не заметила новинки (или забытое старое), которые все активно используют. Ну, а кто как и я был долго в глубокой заморозеке, добро пожаловать.

Writing modes: vertical-text и text-orientation

.container-text {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

На MDN можно посмотреть все значения writing-mode. По этой ссылке описание и примеры. Суть этого свойства в расположении текста: вертикально или горизонтально.

Пример

Lorem ipsum
dolor sit amet
consectetur
adipiscing elit

Свойство text-orientation работает при отображении текста вертикально.

Свойство content-visibility

content-visibility: [value];

Ссылка на саму спеку. Чем интересно данное свойство: с помощью него можно скрыть содержимое элемента, которое не будет участвоваь в рендеринге. Пока не вижу, что это кто-то сильно поддерживает. Разве что Chrome.

Свойство accent-color

Свойство для установки цвета элементам контроля.

.checkbox {
  accent-color: #f79a5b;
}

Example accent-color

Пример для группы

Example for green radio

Example for yellow radio

Поддерживают все браузеры.

Shapes & Graphics

Хорошо, посмотрим что у нас есть по работе с графикой.

Наложила сверху на картинку фильтр sepia через свойство backdrop-filter. Не знаю, как все это влияет на производительность. Ссылка на mdn. И тут вы сейчас воскликнете filter! А вот и главное отличие: эффекты filter примеменяются только к фону, а не к содержимому.

.backdrop-filter.__with:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  backdrop-filter: sepia(80%);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Я использовала псевдоэлемент для наложения эффекта через backdrop-filter. И с его помощью получилось накрыть часть фотографии.

А это эффект, если вы используеть filter.

.img-filter {
  filter: sepia(80%);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Если нужно наложить частичный эффект, то можно использовать backdrop-filter.

Из нового увидела View Transition API. Джек Арчибальд в статье подробно рассказывает почему это важно и нужно. Оно уже есть и поддерживается в Chrome, но это экспериментальная штука. Насколько я понимаю, комитет пытается понять нужно оно миру или нет. На сайте организации есть статус и еще больше описания.

color-scheme

Свойство позволяет указать цветовую схему элементу. Синтаксис

:root {
  color-scheme: light dark;
}

Хорошая статья со всеми подробностями на css-tricks. Внизу у автора приведена табличка с поддержкой по браузерам.

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

Update 2024

2024-07-08T00:00:00Z

Since childhood it has been my passion to draw. I have used different media, but during the last couple of years, I have mostly created digital images from my imagination. Every day I try to improve my skills and draw new images inspired by dreams, different characters, other art, cats … life!

Now I am working on a website for my art with the domain paraplu.art. Paraplu means ‘umbrella’ in Dutch. This word makes me smile. The website is a place for all my work and visitors are welcome to save pictures and print them. The site is being developed and, for the moment, you can easily see more of my images on Instagram – @paraplu.art

I do it just for fun. It is my hobby. It makes me happy. Please join part of my world and smile with me.

Update 2026

2026-07-29T00:00:00Z

I'm still working on my lovely project, paraplu.art. At the same time, I'm looking for a new role at a small company. It's a difficult time. More and more companies want to hire only senior developers with AI experience. But where will they find senior developers in 15–20 years if nobody wants to hire juniors today?

So far, I've had only one screening interview. It's not much. The experience was quite strange. At first, the company didn't even want to speak with me. Instead, I had to answer a list of unusual questions in writing. The position was for a junior developer, but the expectations were closer to those for a senior engineer.

Later, I received an email with the job description, and... wow. They expected a staff-level developer for a junior role. They were asking for more than three years of experience for a junior position. No comments.

Right now, the world feels strange and difficult to understand. I'm continuing to work on my art project while exploring the job market. At the same time, I'm improving my skills in many different areas.

Twenty six years ago

2026-08-21T00:00:00Z

In far 1998 I could not imagine whom and what I will do in ten or twenty years. There weren't many opportunities in my hometown in those years. I got my first computer in 1999. Before I got it, I completed some special computer courses because my father wanted me to learn about new technologies first. When my classmates found out that I had a computer, they couldn't believe it.

When I went to my first computer lab at university in 2001, many of my classmates didn't even know how to use a mouse. I think you're smiling while reading these words. But yes, that was the reality back then. A couple of other students and I taught the others how to double-click and how to use a keyboard and mouse.

This is my first USB flash drive. My father gave it to me in 2003. It's still with me. Before 2003, I used floppy disks. I still remember the sound of the floppy disk drive.