Саша Бизиков

Тег: Веб-разработка

С чего начать изучение вёрстки

Аркадий Мочульский:
Саша, привет. Прочитал последний пост на канале и возник вопрос к тебе. Я бы хотел немножко фронтенд подучить. С чего начать? Знаю базовый HTML/CSS, совсем азы JS.

Аркадий, привет!

Базовые знания — это хорошо. Можно начинать верстать. В процессе придёт понимание того, каких знаний не хватает. Потом идешь читать статьи, книги, смотреть видео уроки, возможно стоит записаться на курсы.

С чего начать?

Моё знакомство с вёрсткой началось в 10 классе. Стало интересно, как делают сайты. Зарегистрировался на каком-то бесплатном хостинге и начал верстать сайт. Попутно читал статьи как что-то реализовать. После этого начал за деньги делать сайты для учителей.

Для начала необходимо попробовать. Понравилось? Можно начинать учить.

Установи редактор кода, например, Atom. Попробуй:

Как только сталкиваешься с проблемой — ищи решение в интернете. 99% твоих проблем уже решены и описаны в статьях. Описание HTML-тегов и свойств стилей CSS можно смотреть на htmlbook.ru.

Параллельно с вёрсткой старайся читать книги. У ребят из A List Apart есть серия книг для дизайнеров. Они короткие, написаны простым языком. Тебе будут полезны:

Научись работать c веб-инcпектором: смотреть и редактировать вёрстку, стили, отлаживать скрипты. Если понравился чей-то сайт, не стесняйся заглянуть «под капот» и посмотреть как там всё сделано.

Иногда встречаются весёлые сообщения:

Если в процессе вёрстки что-то пошло не так, то открывай инспектор и ищи ошибку. Чтобы узнать как с ним работать — посмотри эти видео:

Когда начнешь уверенно чувствовать себя в вёрстке — переходи к изучению JavaScript. Cначала разберись с возможностями языка, а потом уже переходи к изучению библиотек и фреймворков.

Изучение языка советую начать с книги Дэвида Флэнагана — «JavaScript. Подробное руководство». Книга большая, но не пугайся. Читать целиком необязательно.

Достаточно прочитать с первой по восьмую главы — это основы JavaScript, без них никуда.

Ещё можешь посмотреть видеокурсы, на ютубе их много. Вот пара интересных:

Что дальше?

У Ильи Кантора есть классный скринкаст по Gulp
Понравилось верстать? Теперь можно ускорить работу. Изучи какой-нибудь препроцессор для стилей: SASS, LESS или Stylus. Автоматизируй сборку стилей и их обработку через Gulp или PostCSS.

Прочитай книгу про системы контроля версий: Pro Git.

Заведи аккаут на GitHub и установи их приложение на компьютер. Научись работать с репозиториями и ветками. Этот навык будет полезен в командной разработке.

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

Если решил крепко связать свою жизнь с фронтендом — запишись на курсы в HTML Academy.

Σ

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

Краткий чеклист:

  1. Придумать проект для вёрстки
  2. Начать верстать
  3. В процессе вёрстки читать книги, статьи и смотреть видео уроки
  4. Повторять до уровня, который тебя начнет устраивать

Правильный перенос сайта Вордпрес на новый домен

Если вы используете платную тему, в которой есть сложные объекты, то скорее всего они хранятся в сериализованном виде — это когда WordPress перед сохранением в базу, преобразует php-объект в строку и сохраняет её в поле таблицы базы данных. Для считывания, он просто получает эту строку и обратно преобразует в объект PHP.

Все хорошо, но до того момента когда нам надо переносить сайт с локального сервера на боевой. Что бы делаем? Самый примитивный вариант выглядит так: выполняем экспорт базы и в текстовом редакторе заменяем локальный адрес на новый.

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

Решение

Для правильного изменения адреса в базе лучше воспользоваться специальным скриптом. Называется он Search Replace DB.

Search Replace DB

Выполняем перенос сайта:

  1. Переносим файлы сайта на новое место.
  2. Выполняем экспорт локальной базы, ничего не меняем.
  3. Импортируем в базу нового сайта.
  4. Изменяем настройки сайта в wp-config.php, чтобы сайт смог подключаться к вашей базе.
  5. Качаем архив скрипта и загружаем в корневую папку сайта.
  6. Заходим по адресу, в котором располагается папка со скриптом (например, site.com/Search-Replace-DB) и у нас отобразится интерфейс, где часть данных для подключения к базе уже указана.
  7. Заполняем поля. Вводим старый и новый адреса. Выполняем тестовую проверку, нажав на кнопку dry run. В этом режиме начнётся проверка в каких местах надо заменить адрес. В этом режиме ничего изменено не будет.
  8. Убедившись что все хорошо, можно выполнить замену. Нажимаем кнопку live run.

Σ

Изменение адреса в базе для WordPress-сайта проведено правильно. Настройки плагинов и тем оформления никуда не пропадут.

Перенос записей в WordPress

Если нужно перенести не более 2 000 записей с одного WordPress на другой, то никаких проблем не возникнет. Это можно сделать стандартными средствами CMS, но если нужно перенести больше и с другой CMS. Например, с Bitrix или Joomla, то нужен другой подход.

В заметке рассмотрим как перенести большое количество записей в формате CSV на WordPress. Решение подойдёт даже для случая больше 100 000 записей.

Как произвести экспорт записей из старой CMS в CSV-файл — зависит от ситуации, поэтому в заметке об этом не стану говорить. Воспользуйтесь поиском и найдите решение, наверняка до вас это уже кто-то делал. Теперь у вас есть такой файл и поля в нём разделены запятыми (это важно).

Для WordPress есть много плагинов импорта записей из CSV-файлов, но только один из них сработал так, как было нужно. Это плагин Really Simple CSV Importer.

После установки и активации плагина в разделе Инструменты → Импорт появится пункт CSV.

Импорт CSV

Подготовим CSV-файл к импорту в WordPress. В моём случае в первой строке файла хватило 4 основных поля: заголовок, тип записи, дата публикации и текст записи.

"post_title","post_type","post_date","post_content"

Можно добавить ещё одно поле «post_status» со значением «publish». В таком случае наши записи при импорте будут опубликованы с датой публикации из поля «post_date». В моём случае было сложно добавить значение к каждой строке в CSV-файле, но это не проблема. Если поле «post_status» не указано, то все импортируемые записи попадут в черновики.

После этого опубликуем все наши черновики с помощью SQL запроса, который можно выполнить через phpMyAdmin:

UPDATE wp_posts SET post_status = 'publish' WHERE post_status = 'draft'

Теперь наши записи перенесены в WordPress, но не медиафайлы. Наверняка в записях были вставлены изображения. Вручную проверять каждую запись, искать ссылки на изображения и переносить их в WordPress займёт много времени и сил. На помощь приходит плагин Media Tools. После его активации в разделе Инструменты появится новый пункт Media Tools.Импорт медиа файлов

При необходимости настраиваем фильтры импорта, нажимаем «import External Images». Плагин сам загрузит все изображения на сайт и заменит старые ссылки на новые.

На этом всё. Удачного импорта записей!

Неделя @cssunderhood

Месяц назад открыл для себя коллективные твиттер-аккаунты @cssunderhood и @jsunderhood.

«Коллективные твиттер-аккаунты» — это аккаунты, авторы которых меняются каждую неделю. Они рассказывают о своём опыте, инструментах, которые используют в работе, делятся мнением и, конечно же, отвечают на любые вопросы, которые им зададут читатели.

На данный момент известны следующие коллективные твиттер-аккаунты:

На прошлой неделе мне довелось побывать ведущим последнего и самого молодого коллективного твиттера — @cssunderhood. О результатах недели хорошо расскажет статистика, а твитты можете прочитать в архиве.

Зачем?

Каждый из коллективных твиттеров читает больше 1 000 человек, которые следят за сообщениями автора. Это аудитория, которая поймёт вас. Выход из зоны комфорта, как лёгкий удар электрошоком. Ты просыпаешься от повседневной работы и общаешься с коллегами по цеху.

О чем писать?

На странице проекта уже есть советы насчёт того, о чём можно писать. На мой взгляд важно не то, какие темы вы, как автор, поднимете на обсуждение. Ведь количество тем, которые касаются верстальщиков (как и разработчиков других направлений) — конечны, а вот мнений столько, сколько будет ведущих. Поэтому в первую очередь высказывайте свою точку зрения, свою позицию и мнение. Неважно, что, скажем, методологии вёрстки уже обсуждались на одной из недель. Если вам есть что сказать — обязательно скажите.

Как планировать?

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

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

План на неделю

Как вести твиттер и при этом успевать работать? Основной вопрос, который беспокоил меня. Поэтому составил расписание, которого старался придерживаться. В 7 утра (по московскому времени) писал итоги прошедшего дня и анонсировал основную тему на вечер. Потом писал 5–10 сообщений на короткую тему и начинал работать. Днём время от времени заглядывал в твиттер и по возможности отвечал на вопросы. После 16:00 предупреждал читателей о том, что через 30 минут начнётся основное обсуждение. Таким образом, я и читатели могли подготовиться к обсуждению уже известной темы.

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

Результат

По результатам недели побил 4 рекорда. Основные — по количеству написанных сообщений и по количеству сообщений, добавленных в избранное. Получил ответы на волнующие меня темы, познакомился с новыми людьми, понял, что надо попробовать Gulp и отказаться от LESS в пользу PostCSS.

Статистика @cssunderhood за неделю
Статистика @cssunderhood за неделю

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

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

Двухфакторная аутентификация в WordPress

Если у вас есть сайт или блог на WordPress, то его можно обезопасить от взлома. Один из таких способов повышения безопасности сайта — настройка двухфакторной аутентификации. Что это такое?

Двухфакторная аутентификация — это метод идентификации пользователя в каком-либо сервисе (как правило, в Интернете) при помощи запроса аутентификационных данных двух разных типов, что обеспечивает двухслойную, а значит, более эффективную защиту аккаунта от несанкционированного проникновения. На практике это обычно выглядит так: первый рубеж — это логин и пароль, второй — специальный код, приходящий по SMS или электронной почте.

В блоге лаборатории Касперского хорошо описано, что такое двух-факторная аутентификация.

Теперь о том, как подключить её к вашему WordPress-сайту:

  1. Установить и активировать плагин Google Authenticator.
  2. Установить приложение Google Authenticator на ваш смартфон.
    Ссылки на приложение: Android, iOS.
  3. Активируем Google Authenticator в своем профиле WordPress и через QR-код добавляем запись в приложение на смартфоне. Сохраняем изменения.

Настройка плагина Google Authenticator

Теперь давайте проверим работу плагина.

Разлогинимся и зайдем повторно. Для этого используйте сгенерированный пароль из Google AuthenticatorДля удобства поставьте галку «запомнить меня», что бы не пришлось каждый раз авторизовываться при входе в админ панель сайта. Но помните, что это следует делать только на том компьютере, доступ к которому имеете только вы. На компьютере в интернет-кафе такое точно не следует выполнять.

Страница авторизации WordPress

Таким образом взломать ваш сайт будет сложнее. Безопасной работы!

Ранее