Posts

Привет вам, дорогие, как это раньше называлось, вебмастеры.

Сегодня мы познакомимся с несколькими командами терминала, полезными как при работе с большими дампами базы данных, так и не очень. Всё что нам понадобится – доступ к командной строке на сервере посредством ssh, mosh или putty.

создать базу данных
mysqladmin create названиебазыданных

убить базу
mysqladmin drop названиебазыданных

экспортировать базу в файл
mysqldump названиебазыданных > имяфайла.sql

импортировать базу из файла
mysql названиебазыданных < имяфайла.sql

скопировать всё из одной базы в другую без файлов
mysqldump однабаза | mysql другаябаза

Используя эти простые команды в консоли можно существенно ускорить работу, превратить трепет в силу, избавить себя от мучений при закачивании огромных дампов через phpmyadmin да и просто повысить свой уровень профессионализма.

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

Переворачиваем видео по горизонтали

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

Проще всего добавить скрипт в закладки (Bookmarks) нажатием правой кнопкой мышки на ссылку Перевернуть видео по горизонтали и запускать её при проигрывании любого перевёрнутого видео на сайте Вконтакте.

Перевернуть видео по горизонтали

Код, который находится внутри закладки, можно запустить также в консоли Chrome нажатием Ctrl+Shift+J или Firefox нажатием Ctrl+Shift+K:

(function(sel){ 
    for (el of sel) { el.style.transform = el.style.transform ? '' : 'scaleX(-1)'; }  
})(document.getElementsByClassName('videoplayer_media'));

Приятного просмотра.

It’s very easy to install fresh version of Firefox Quantum, but i stucked on installing Developer Edition. There was coinces:

After trying all scenarios, i picked one optimal way to install Firefox Quantum Developer Edition in Ubuntu 16.

Installation of Firefox Quantum Developer Edition on Ubuntu 16 with Ubuntu Make

sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make
sudo apt-get update
sudo apt-get install ubuntu-make
umake web firefox-dev

Uninstall Firefox Quantum Developer Edition on Ubuntu 16 with Ubuntu Make

umake web firefox-dev -r
sudo ppa-purge ppa:ubuntu-desktop/ubuntu-make

Мне кажется прошло время, когда приставка www была чем-то необходимым при создании сайта. Сейчас больше ценится лаконичность адреса, наличие шифрования (HTTPS) и единого домена для лучшей индексации (canonical).

В этой статье мы рассмотрим настройку веб-сервера Apache для того чтобы перенести пользователя на домен без или с приставкой www в защищенном режиме.

Вступление

Тут я покажу как настроить сайт, чтобы убрать www (или наоборот) и поменять HTTP на безопасный HTTPS, используя конфигурацию сервера Apache. Если быть точным, конфигурация перенаправит следующие адреса:

http://example.com
http://www.example.com
https://example.com

на

https://example.com

Я также покажу небольшое изменение, с помощью которого можно добавить www в адрес(если вы предпочитаете с www).

Конфигурация Apache

Чтобы переадресация работала, добавьте следующее в конфиг Apache, если у вас есть к нему доступ, или в .htaccess в корневой папке вашего сайта:

RewriteEngine On
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]

Если вместо example.com вы хотите, чтобы адрес сайта был www.example.com, просто измените третью и пятую строчки:

RewriteEngine On
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
RewriteRule ^ https://www.%1%{REQUEST_URI} [L,NE,R=301]

Как это работает

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

RewriteEngine On

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

RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} !^www\. [NC]

Эти две строчки – условия переадресации, они используются, чтобы определить нужна ли переадресация. Так как в условиях используется ИЛИ [OR], при выполнении хотя бы одного условия, Apache запустит правило перезаписи(переадресацию).

Первое условие определяет использовался ли адрес без HTTPS шифрования. Второе условие определяет использовался ли адрес с www. Заметьте, что я использовал www\. , а не www. , так как \ делает из . точки просто точку( . точка имеет в конфигурации свою функцию, поэтому лучше её избегать).

RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]

Четвёртая строка раскладывает адрес на составляющие: www(если существует) и остаток адреса. Позже мы обратимся к этому при помощи %1 в правиле перезаписи.

Если вам известно имя хоста, то вы можете не использовать эту проверку(смотрите дальше).

RewriteRule ^ https://www.%1%{REQUEST_URI} [L,NE,R=301]

Правило перезаписи – это основа переадресации. Этой строкой мы говорим Apache переадресовать любой запрос на новый адрес:

Все эти токены соединяются вместе и получается финальный URI переадресации. И в конце мы добавляем 3 флага:

Заметки

Как я уже говорил, мой пример использует условие перезаписи, чтобы извлечь имя хоста и не вписывать его в правило. Если вы считаете, что это повлечёт ухудшение производительности, вы можете вписать хост прямо в правило:

RewriteEngine On
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteRule ^ https://example.com%{REQUEST_URI} [L,NE,R=301]

Вывод

Эта статья позволяет настроить простую переадресацию www и HTTP( не HTTPS) запросов к каноническому домену сайта. Это очень полезно, чтобы избежать проблему повторений с поисковыми системами, а так же облегчает серфинг вашим пользователям.

Существует множество способов осуществить переадресацию в Apache, это всего лишь один, и он не раскрывает все возможности. Я надеюсь, что обьяснение в параграфе “Как это работает” поможет вам настроить его под свои нужды.[:en]The increasing adoption of HTTPS as the default connection protocol for websites has introduced a few new challenges to developers and system administrators, such as the need to consolidate a canonical domain by redirecting non-HTTP sites to HTTPS, in addition to redirecting www to non-www host name (or vice-versa).

Introduction

Here I show how to redirect a site from www to non-www (or viceversa) and from HTTP to HTTPS, using the Apache server configuration. To be more clear, the configuration will redirect the following host names:

http://example.com
http://www.example.com
https://example.com

to

https://example.com

I’ll also show a small change to redirect the non-www to the www version, if you prefer the www.

Apache Configuration

To configure the redirects, add the following redirect rule either to the Apache config file if you have access to it, or to the .htaccess in the root of your site:

RewriteEngine On
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]

If instead of example.com you want the default URL to be www.example.com, then simply change the third and the fifth lines:

RewriteEngine On
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
RewriteRule ^ https://www.%1%{REQUEST_URI} [L,NE,R=301]

How it works

Since I’m not a huge fan of cut-and-paste tutorials, let’s try to understand how the configuration works. That would help you to make the necessary modifications, if needed.

RewriteEngine On

The first line enables the Apache runtime rewriting engine, required to perform the redirect. You may have already enabled it in a previous config in the same file. If that’s the case, you can skip that line.

RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} !^www\. [NC]

These two lines are are the redirect conditions, they are used to determine if the request should be redirected. Because the conditions are joined with an [OR], if any of those two conditions returns true, Apache will execute the rewrite rule (the redirect).

The first condition determines if the request is using a non-HTTPS URL. The second condition determines if the request is using the www URL. Notice that I used www\. and not www., because the pattern is a regular expression and the . dot has a special meaning here, hence it must be escaped.

RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]

The forth line is a convenient line I used to avoid referending the hostname directly in the URL. It matches the HOST of the incoming request, and decomposes it into www part (if any), and rest of the hostname. We’ll reference it later with %1 in the RewriteRule.

If you know the host name in advance, you may improve the rule by inlining the URL and skipping this condition (see later).

RewriteRule ^ https://www.%1%{REQUEST_URI} [L,NE,R=301]

The RewriteRule is the heart of the redirect. With this line we tell Apache to redirect any request to a new URL, composed by:

All these tokens are joined together, and represents the final redirect URI. Finally, we append 3 flags:

Remarks

As I’ve already mentioned, my example uses an extra RewriteCond line to extract the host name, and avoid to inline the hostname in the rule. If you feel this is a performance penalty for you, you can inline the host directly in the rule:

RewriteEngine On
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteRule ^ https://example.com%{REQUEST_URI} [L,NE,R=301]

Conclusion

This articles provides a simple configuration to redirect www and non-HTTPS requests to the canonical site domain. This is very useful to avoid content duplication issues with search engines, and offer an improved experience to your users.

If you search online there are dozens of ways to perform a redirect in Apache, this is just one of the possibilities and it may not cover all the possible cases. Hopefully, with the explanation in the How it works section you will be able to customize it to your needs.

В Ubuntu функция автодополнения часто просто не работает. Например, если зайти пользователем root в Ubuntu 16 Server, нажатие кнопки TAB никак не помогает с командами, только с файлами. Возможно пользователь был создан не совсем корректно и ему перенеслись не все файлы.

Чтобы автодополнение заработало, необходимо переустановить пакет bash-completion и скопировать шаблон /etc/skel/.bashrc в домашнюю папку пользователя:

sudo apt-get install --reinstall bash-completion
cp /etc/skel/.bashrc ~/
exit

И перезайти.

В Ubuntu 16 сразу станет понятно, работает ли шаблон и пакет автодополнения – коммандная строка станет цветной и можно пользоваться кнопкой TAB после комманд git или apt.

Это набор действий, упрощающих жизнь пользователя той самой социальной сети в некоторых ситуациях.

Для того, чтобы вместо вас по спискам щёлкал сам браузер, нужно научиться запускать скрипты в консоли. Вкратце, вот как.

В Firefox нажать Shift + F4 чтобы открыть окно для ввода скриптов.

Нажать Ctrl+V. Если Firefox не позволяет вставлять, наберите волшебное слово пожалуйста allow pasting

Вы готовы для запускания скриптов, теперь идём в Facebook.

Массовое добавление друзей в список

Открываем список, например Restricted, нажимаем кнопку Manage List. Появится диалоговое окошко для изменения списка. Переключаемся на Friends и видим друзей, которых можно добавить в список.

Открываем консоль Shift + F4 и запускаем скрипт

var c = document.querySelectorAll('.checkableListItem:not(.selectedCheckable)');
for (i = 0; i < c.length; i++) { c[i].click(); }

Возможно придётся сделать это несколько раз, чтобы список полностью заполнился.

Массовое удаление друзей из списка Restricted

Примерно тем же образом происходит очищение списка.

Открываем список, например Restricted, нажимаем кнопку Manage List. Появится диалоговое окошко для изменения списка, переключаемся на On this list.

Открываем консоль Shift + F4 и запускаем скрипт

var c = document.getElementsByClassName('selectedCheckable');
for (i = 0; i < c.length; i++){ c[i].click(); }

Возможно придётся сделать это несколько раз, чтобы список полностью очистился.

Массовое удаление рекламы

Страничка настроек рекламы фейсбука даёт нам возможность отписаться от каких-нибудь объявлений.

Создаётся впечатление, что список тем бесконечный и кликать устанешь чтобы от всех них отписаться. Тут приходит на помощь наш скрипт, запускается тем же способом как и все предыдущие.

(function(selector){
var c = document.querySelectorAll(selector);
for (i = 0; i < c.length; i++) { c[i].click(); }
})('*[data-tooltip-content="Remove"]')

После нескольких запусков скрипта и десятка-двух перезагрузок страницы настроек, получаем девственно чистый список.

Продолжение следует

Мне известно по крайней мере десяток излишеств, которые ввели чудо-дизайнеры операционной системы Ubuntu, которые очень сложно приживаются у меня. Да и у многих, думаю, кто постоянно работает в ней. Одно из новшеств overlay-scrollbars – скроллбары, которые сложно найти и легко потерять.

Screenshot_Scrollbars

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

sudo apt-get remove overlay-scrollbar

Вуа-ля, и да здравствуют нормальные олдскульные скроллбары.

Screenshot_Scrollbars_Okay

Пример создания собственного валидатора персонального кода в Symfony.

(more…)

Колонки. Этот простой, но почему-то за столько лет не ставший ни разу универсальным, элемент, изобретается снова и снова. И всякий раз либо верстальщик лепит как ему удобно это, либо использует фреймворк. К примеру, популярный нынче Bootstrap, здесь колонки и ряды разложены по иерархиям, что иногда вполне “сойдёт”. Делая один не маленький проект с использованием Bootstrap мы упёрлись в то, что разметки и стилей становится больше чем информации. Мыши плакали, кололись и думали, а не перейти ли нам обратно на табличную верстку…

Хочу представить свой вариант, который возможно покажется слишком простым или недоделанным, но именно простота и нативность в нём мне нравится. Здесь использованы совмещенные стили с человеко-читабельными названиями, никакого космоса и никаких вложенностей. Немного “отзывчивости” на маленькие экраны мобильников – бесплатный бонус трек.

CSS:

.columns { float: left; padding-right: 1%;}
.three.columns { width: 32%; }
.three.columns.double { width: 64%; }
.two.columns { width: 49%; }
.clear.columns { clear: both; width: 100%; display: block; }
@media only screen and (max-width: 800px) {
  .columns { float: none; padding-right: 0; width: 100%; }
}

HTML:

<div class="two columns">Первая колонка</div>
<div class="two columns">Вторая колонка</div>
<div class="clear columns"></div>
<div class="three columns">Первая колонка</div>
<div class="three columns">Вторая колонка</div>
<div class="three columns">Третья колонка</div>
<div class="clear columns"></div>
<div class="three columns">Первая колонка</div>
<div class="three columns double">Вторая колонка</div>
<div class="clear columns"></div>

Понравилось? Пользуйся на здоровье. Нет – обоснуй ;)

en_USEnglish