Web-development

test

Chrome Extension(расширение)

Расширяем Chrome/Chromium

Часто по работе приходиться вкручивать всякого разного. В данном случае понадобилось делать расширение для хрома и собирать информацию по кусочкам.
Не могу не упомянуть хороший блог посвященный расширениям для хрома.
В этом материале я расскажу об основах но чуть больше чем многие введения.
Если вы попали на мой материал то скорее всего уже видели что само расширение состоит из нескольких базовых файлов:
  1. icon.png - иконка расширения
test

Полезные уроки по Chrome Developer Tools

Пропустил я их в свое время и многие методы освоил по кускам из разных материалов =) а тут все скопом. Берем и проходим. Каждое видео минуты 2-3 длиться, потом простенькая задачка. Все удобно. Но на английском, если кто не понимает английский - печаль.

Ссыль на туториал: http://discover-devtools.codeschool.com/
test

Отзыв на книгу Лаборатория хакера - С.А. Бабин

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

Импорт файла базы данных в PostgreSQL в Windows

Публикую скорее как памятку самому себе и всем кому может помочь.
Задача тривиальная, импортировать файл-дамп базы данных PostgreSQL в Windows.
1) Запускаем pgAdmin III
2) Plugins->PSQL Console
3) Создаем базу данных командой create database mydbname;
4) Создаем пользователя. Так как это Windows, в котором я занимаюсь лишь разработкой то пользователь будет иметь все права на публичную схему.
create user myuser with password 'somepassword';
grant all privileges on all tables in schema public to myuser;
5) Загружаем дамп базы данных командой из консоли Windows:
"C:\Program Files\PostgreSQL\9.5\bin\psql.exe" mydbname myuser < E:\somedump.sql


После этого в консоли будет вывод импорта базы данных. На этом все.
test

Мой отзыв по книге "PHP обьекты, шаблоны и методики программирования" Мэтт Зандстра

PHP обьекты, шаблоны и методики программирования.  Мэтт Зандстра Сложно взять и оценить то все что дает такая книга веб-разработчику... Методологию разработки, схемы, подсказки, инструменты. Сейчас достаточно много книг которые помогу подняться на уровень junior, их не тяжело узнать, все они называются подобно "как создать сайт с помощью PHP+MySQL" и т.д. Эта же книга уровнем выше. Рассмотрение ООП, шаблоны проектирования, систем контроля версий, юнит-тестов(то что я для себя считал тратой времени), развертывания приложения, сервер непрерывной интеграции(НИ). Все это значительно выше уровнем чем просто создать сайтик. Для тех кто создает или собирается создавать проекты средней и высокой сложности, такую книгу стоит взять на вооружение. Периодами книга была достаточно тяжелой, и начинающим явно не подойдет, но столько информации для уровня middle и senior... Must Have.
Моя личная оценка книге 5+. Автору огромное спасибо за труд. P.S. Пошел настраивать сервер НИ...
test

Перемещаем подгрузку шрифтов вниз страницы

Наверное все веб-разработчики знают как PageSpeed Insights относиться к подгрузке CSS и JS файлов в верху страницы. Не становятся исключением в этом плане и шрифты самого Google: Google Fonts. А используются они достаточно часто. Но и на этот случай у гугла есть решение. Нужно всего-лишь подключить специальный лоадер для шрифтов. Подключаем таким образом:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Open+Sans:400,300,600,700,800:latin,cyrillic,cyrillic-ext']
            }
        });
    </script>
В families как не трудно догадаться мы и прописываем шрифт и его настройки. Все. Более подробно можно ознакомиться тут. Разработчики заявляют о поддержке разными браузерами и подгрузке шрифтов с Google Fonts, Typekit, Fonts.com и Fontdeck. А соразработчиками выступают Google и Typekit.
test

PHP функция для автоматического закрытия внешних ссылок атрибутом rel="nofollow"

nofollow link Небольшая функция, прогнав через которую текст на выходе получаем закрытыми атрибутом rel="nofollow" все ссылки кроме внутренних...
test

Создание простого расширения для Chrome

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

Теперь немного более приземленно.
Создаем папку с расширением, например myclickbtn
В ней создаем файл manifest.json, ...
test

PHPStorm в Windows 10 не работает терминал

После обновления Windows на 10 версию PHPStorm не смог запустить терминал. В решении помогает гугл давая ссылку.
Решение сводиться к запуску обычного терминала, клику по управляющей окном панели правой кнопкой мыши и выбора Properties(Свойства).
windows terminal
Внизу ставим галочку на "Use legacy console"(Использовать прежнюю версию консоли)
Использовать прежнюю версию консоли
ОК.
После переходим в PHPStorm и запускаем новый терминал. Все.
test

Youtube парсим картинку превью из кода

youtube image У нас есть текст фрейма поделиться, но нужно получить картинку превью.
Для этого нам нужно выпарсить ID видео и подставить в нужную ссылку:
Youtube генерирует несколько таких ссылок: http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg Что соответствует размерам и аналогично ссылкам в том же порядке: По умолчанию: http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg Для картинок в высоком качестве: http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg Среднее качество: http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg Стандартный размер картинки: http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg Максимальный размер картинки: http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg Просто выбираем подходящую ссылку.
Я парсил из кода следующей регуляркой:
//кусок кода выбирающий превью для ютуба
preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $this->body, $matches);
            //preg_match("/^(?:http(?:s)?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?v(?:i)?=|(?:embed|v|vi|user)\/))([^\?&"'>]+)/", $this->body, $matches);
            if (!empty($matches[1])) $vid_id = $matches[1];
            if (!empty($vid_id)) return "http://img.youtube.com/vi/".$vid_id."/0.jpg";

Такой код вернет нам ссылку с подставленным айди видео, что нам и требовалось.
test

Сниппет JQuery кода, который скролит страницу к нужному элементу, указанному в ссылке

Может кому пригодиться. Код найден где-то на stackoverflow. Если у ссылки путь начинается с hash(#), то при клике код скролит страницу к нужному элементу на странице.
$(function() {
    $("a[href*='#']:not([href='#'])").click(
        function()
        {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
        {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length)
            {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }});
    });
test

Select2 и добавление нового элемента

Нужна была возможность добавлять новый элемент в список если такого элемента у нас еще не было, благо select2 предусматривает подобную возможность. Загвоздка заключалась только в том что мы использовали список с числовыми id как значение и брался из базы данных. Имеем классическую конструкцию из трех таблиц:
материал(id, ..., ..., ...); теги(id,...,...,...); материал_тег(id_material, id_tag);
Так вот, сам select2 мы используем так:
<select id="multiple" class="form-control select2-multiple" multiple name="tags[]"  >
                                {foreach $labels as $label}
                                    <option value="{$label->id}" {if !empty($exists.{$label->id})}selected{/if} >{$label->title}</option>
                                {/foreach}
                            </select>
<script>

    $(document).ready(function () {

        $("#multiple").select2({
            placeholder: "Select or add tags",
            tags: true,
            tokenSeparators: [",", " "],
            createSearchChoice:function(term, data) {
                if ( $(data).filter( function() {
                            return this.text.localeCompare(term)===0;
                        }).length===0)
                {
                    return { id: term, text:term };
                }
            }
        });
</script>
На стороне сервера я использую фреймворк Laravel 5 и в контроллере использую такую часть кода:
//...
//материал
$record = Linkedin_GroupLabel::find($id);
//...
//Сбрасываем связи с тегами
                        $record->tags()->detach();
                        $rtags  = array();
                        foreach ($request->input('tags') as $tag){
//если значение элемента селекта число, значит это id
                            if (is_numeric($tag)){
                                $rtags[] = $tag;
                            }
                            else //в противном случае это новое значение
                            {
                                $new = Linkedin_Label::where('title','=',trim($tag))->first();
                                if (empty($new->id)){
                                    $new = new Linkedin_Label();
                                }
                                $new->title = trim($tag);
                                $new->save();
                                $rtags[] = $new->id;
                            }
                        }
//аттачим айдишники между записями
                        $record->tags()->attach($rtags);

Единственное НО при таком, записи тегов не должны быть только числом, иначе is_numeric подумает что добавлен айдишник, а не новый тег. Очень вероятно что у кого-то есть вариант получше, но данный случай для меня работает.
test

Windows7+Apache2.4+PostgreSQL+Laravel 5= PDO Exception: driver not found

Пришлось все вот это чудо поднимать, так как нужно делать серверную и клиентскую часть под одну задачу. Искренне не понимаю тех веб-девелоперов которые работают веб-разработкой под Windows )) ну да ладно, это их личное дело.

Итак, проблема следующая:
Windows 7+Apache2.4+PostgreSQL+Laravel = PDO Exception: driver not found
При этом команда:
php -m
Показывает что как pgsql так и pdo_pgsql есть, но Laravel 5 уверенно доказывает обратное. При этом в php.ini:
extension=php_pdo_pgsql.dll
extension=php_pgsql.dll
раскомментированны.

Но вот команда:
php -a
Вызывающая интерактивную консоль php, так же сообщает:
Unable to load dynamic library `D:\WebServer\php\ext\php_pgsql.dll` - тут вместо сообщения какая-то каша, но явно что-то не в порядке.

Оказалось, не хватает dll для данных расширений.

Нужны библиотеки:


libpq.dll, libiconv-2.dll и libintl-8.dll Взять их можно в установленном PostgreSQL, в папке:
C:\Program Files\PostgreSQL\9.4\bin\
вместо 9.4 может быть ваша версия.
Копируем их в:
apache\bin\

Вместо libiconv-2.dll у меня лежала iconv.dll, на всякий случай скинул как есть, так и копию переименованную в libiconv-2.dll
Перезапускаем apache и видим что Laravel 5 на эту проблему больше не ругается.

Страницы

Subscribe to RSS - Web-development