Pikaweb

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

Разработчик с пятнадцатилетним стажем, а ныне технический директор образовательной онлайн-платформы для программистов Firehose Кен Мазаика (Ken Mazaika) рассказал на Quora о тех вещах, которые он хотел бы знать до начала изучения программирования. Мы подготовили небольшой список советов на основе его текста и делимся им с вами.

Обо всем

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

Облегчать себе задачу – приветствуется. Регулярно гуглите ответы на возникающие у вас вопросы, так делает большинство программистов. Тут главное не заиметь привычку бездумно копипастить со Stackoverflow.

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

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

Изучение программирование – это не подготовка к тесту. Заучивание разных штук вам не сильно поможет (см. п. 1).

Код

Пробуждение начинается с мыслей о коде. Когда такое начинает случаться, это действительно крутые ощущения.

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

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

Позволять проблемам накапливаться – плохая стратегия. Старайтесь исправлять проблемные места в коде сразу, не давая им накладываться одно на другое. Иначе этот клубок ошибок будет трудно расплести.

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

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

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

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

Развитие

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

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

Делать большие ошибки – нормально. Ошибка автора этого списка, Кена Мазаика, однажды стоила компании, где он работал 10 тысяч долларов. И это был самый важный урок в его программистской карьере.

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

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

Предоставьте все детали того, что вы видите (код, логи ошибок, скриншоты etc.)

Объясните, что точно по-вашему должно происходить

Объясните, что точно по-вашему происходит

Объясните почему так происходит по-вашему мнению

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

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

Поиск работы

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

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

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

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

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

Статья взята с https://proglib.io/p/25-things-to-know-about-coding/

Наконец дошли руки написать обещанный пост про парсер сайтов. Главное условие для нашего парсера, чтобы сайт был открытый и не требовал авторизации (в принципе 98% интернет магазинов).

Для примера работы я буду использовать этот сайт, ни в коем случае не реклама. Сам парсер я взял у команды Lofblog (ссылка на оригинал) это не реклама, урок был написан еще в апреле 2014, но почему то не нашел своей славы. На него я наткнулся после нескольких часов блужданию по интернету в поисках бесплатного и хорошего способа парсинга сайт.

Так а теперь приступим к самому парсеру, сначала я выложу его код (для тех кто хоть немного понимает справятся без моих коментариев), а потом начну пояснять все потихоньку.

function getconten() {

for(var j=1;j<=68;j++){

getPageContent(1+10*(j-1),"https://cleanshop.ru/catalog/spbd/?start="+j)

}}

function getPageContent(startRow,url) {

var sheet = SpreadsheetApp.getActiveSheet();

var range = sheet.getRange("A2:I5000");

var cell = range.getCell(startRow,1);

var response = UrlFetchApp.fetch(url);

var textResp=response.getContentText();

var start,end,name;

for (var i=1;i<=10;i++){

//фото

start = textResp.indexOf('<table class="good_img">',end)+24;

start = textResp.indexOf('src="',start)+5;

end = textResp.indexOf('"',start);

name = textResp.substring(start,end);

cell.setValue(name);

cell=cell.offset(0,1);

// цена

start = textResp.indexOf('</td></tr><tr><th>',end)+18;

end = textResp.indexOf('</th></tr></table>',start);

name = textResp.substring(start,end);

cell.setValue(name);

cell=cell.offset(0,1);

//название

start= textResp.indexOf('<div class="good_text">',end)+23;

start= textResp.indexOf('class="good_title">',start)+19;

end=textResp.indexOf('</a>',start);

name =textResp.substring(start,end);

cell.setValue(name);

cell=cell.offset(0,1);

//код

start = textResp.indexOf('Код: ',end)+5;

end = textResp.indexOf(' | ',start);

name = textResp.substring(start,end);

cell.setValue(name);

cell=cell.offset(0,1);

// описание

start = textResp.indexOf('<p>',end)+3;

end = textResp.indexOf('</p>',start);

name = textResp.substring(start,end);

cell.setValue(name);

cell=cell.offset(0,1);

cell=cell.offset(1,-5);}}

Шаг 1: Создаем документ на Google тут или тут;

Шаг 2: Кликаем в меню по пункту "Инструменты" затем на "Редактор скриптов", у нас откроется новая вкладка.

Шаг 3: В открытое окно вставляем наш скрипт.

Шаг 4: Запуск скрипта для начала нужно выбрать функцию getcontent. затем нажать кнопку запуска (серая стрелка, станет черной после выбора функции).

После этого в документе мы увидим подобное:

Теперь основные комментарии к коду:

Мы имеем 2 функции getconten и getPageContent , из getconten мы передаем нужные данные и запускаем функцию для getPageContent для парсинга страницы которую мы передали из getconten.

Функция getconten: здесь мы имеем цикл равный количество страниц в данном разделе. За каждый проход цикла мы отправляем ссылку на страницу и кол-во уже обработанных товаров.

И так какую же ссылку нам вставить для нашего сайта? Большинство сайтов имеет подобную структуру сайт.ру/раздел/?страниц=1 под словом страница может скрываться любое слово в нашем случае start, чаще page. Иногда на первой странице сайта этой переменной нет, нужно просто перейти например на вторую. Для лучше понимая рекомендую прочитать прочитать про GET запросы тут или в google.

Формула 1+10*(j-1) - нужна для того чтобы записи шли дальше,а не перезаписывались в документе, где 10 это количество записей (!внимание! количество записей по умолчанию, для частоты лучше зайти на нужную страницу с другого браузера или с приватной вкладки тогда вы уведите страницу именно так, как видит ее ваш скрипт).

Функция getPageContent: здесь творится основная магия. Я думаю здесь стоит пояснить только основные моменты, более подробнее почитать про каждую из функций можно в гугле если заинтересует.

sheet.getRange("A1:I5000") - здесь мы выбираем диапазон ячеек, с которыми мы будем работать, рекомендую ставить большой разбег.

for (var i=1;i<=10;i++) - параметры цикла, где 10 см.формулу выше (!Внимание! цифры должны совпадать с формулой вышей).

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

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

И так разбор полета пошел:

Чтобы вставить в ячейку некоторый текст со страницы нам нужно знать его начальное положение (start) и конечное (end). Для этого мы находим уникальную строку для элемента которые мы хотим спарсить, в случае с изображением товара это строка <table class="good_img"> она уникальная, ее имеет только товары при этом она имеется у каждого товара, но отталкиваясь от этой строки мы захватим слишком много, по этому находим точку еще ближе к нужной информации и уже от ее оставляем как start. Незабываем приплюсовывать количество всех символов в строке.

start = textResp.indexOf('<table class="good_img">',end)+24;

start = textResp.indexOf('src="',start)+5;

С концом еще проще здесь как правило закрывающийся тег или же кавычки.

end = textResp.indexOf('"',start);

Далее функцией substring извлекаем нужные данные зная где они начинаются и где заканчиваются.

name = textResp.substring(start,end);

Тут просто присваиваем значению в ячейку.

cell.setValue(name); 

И перешагиваем на новый столбец, оставаясь на этой же строке .offset(Строка,Столбец).

cell=cell.offset(0,1); 

Незабываем в конце перепрыгнуть на новую строку и вернуться на нулевой столбец.

cell=cell.offset(1,-5);- где 5 количество столбцов на которое мы ушли или проще говоря сколько данных у товаров мы спарсили.

Теперь поговорим о его достоинствах и недостатков более подробно:

Он бесплатный, но имеет ограничений на кол-во использования обращения к сайту, вроде 12000 раз за 24 часа, для обхода вроде как надо покупать специальную лицензию ну или просто зайти с другого аккаунта.

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

Не требует установки какого то софта.

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

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

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

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

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

Разработку любого сайта следует начинать с настройки инструментов.

Рассмотрим инструменты и подготовим их к работе.

Все материалы я буду добавлять сюда: https://github.com/pikaweb

Для работы с репозиториями нам пригодится GitBash. Скачать его можно отсюда:

https://git-for-windows.github.io/

В качестве локального сервера я использую OpenServer:

http://open-server.ru/

Кроме того понадобится установить node.js

https://nodejs.org/en/

Перейдем к подготовке. Создаем каталог в \Ваш путь\OpenServer\domains\

Запускаем OpenServer. Входим в его настройки, вкладка «Домены» и добавляем домен для созданной ранее папке. Запускаем сервер.

Теперь сайт будет доступен при вводе в браузере http://domain-name/

Настраиваем git (если еще не настроен). Я предпочитаю bitbucket т.к. он предоставляет бесплатные приватные репозитории. Ниже ссылки на github и bitbucked и на материал по настройке подключения сразу к обоим:

github.com

bitbucket.org

https://gist.github.com/rosswd/e1afd2b0b0d515517eac

Переходим к созданию git репозитория.

https://help.github.com/articles/creating-a-new-repository/

Добавление проекта в репозиторий:

https://help.github.com/articles/adding-an-existing-project-...

Подробный tutorial по bitbucket:

https://www.atlassian.com/git/tutorials/learn-git-with-bitbu...

Настроив репозитории, перейдем к настройке gulp для проекта. Для начала его нужно установить (необходим установленный node.js). Перейдя в терминале (можно и gibush, можно любой удобный для вас) в каталог с сайтом, выполняем следующую команду:

npm init

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

npm install gulp --save-dev

--save-dev обозначает, что мы сохраним информацию об установке пакета в package.json. Это нужно, чтобы не хранить в репозитории подгружаемые npm файлы для установленных модулей. Все они содержатся в node_modules. Чтобы node_modules не отправлялись на git, создадим файл .gitignore со следующим содержимым:

.gitignore

node_modules

А теперь продолжим устанавливать модули для gulp:

Модуль gulp-concat для конкатенации файлов:

npm install gulp-concat --save-dev

Модуль gulp-less для построения css файлов на основе less. Про это чуть подробней при верстке проекта.

npm install gulp-less --save-dev

Для less еще пригодятся less-plugin-clean-css (пост обработка и сжатие less файла) и less-plugin-autoprefix (автоматическое добавление вендорных префиксов, согласно базе данных caniuse.com)

npm install less-plugin-clean-css --save-dev

npm install less-plugin-autoprefix --save-dev

Для сжатия css файлов добавим gulp-minify-css

npm install gulp-minify-css --save-dev

Часть css я встраиваю в html, поэтому добавим gulp-inline-source

npm install gulp-inline-source --save-dev

Для удаления комментариев из html файла понадобится.

npm install --save-dev gulp-remove-html-comments

Для очистки файла от лишних пробелов и удаления комментариев из html файла понадобится:

npm install gulp-htmlclean --save-dev

Для слайдера я воспользуюсь http://kenwheeler.github.io/slick/

Для него требуется jquery

npm install slick-carousel –save-dev

npm install jquery --save-dev

Для верстки еще полезно подключить normalize.css или reset.css. Я обычно использую normalize.

npm install normalize.css --save-dev

Почитать про него можно тут:

https://htmlacademy.ru/blog/64-about-normalize-css

Продумаем общую структуру проекта

index.html

assets/

--less/

--fonts/

--img/

--js/

public/

--index.html

--css/

----build.css

--fonts/

--js/

----build.js

--img/

Где в public будет собираться проект.

Для настройки gulp следует создать файл gulpfile.js и подключить в нем все установленные плагины:

var gulp = require('gulp')

//load plugins

var less = require('gulp-less');

var minifyCSS = require('gulp-minify-css');

var inlinesource = require('gulp-inline-source');

var LessPluginCleanCSS = require('less-plugin-clean-css'),

LessPluginAutoPrefix = require('less-plugin-autoprefix'),

cleancss = new LessPluginCleanCSS({ advanced: true }),

autoprefix= new LessPluginAutoPrefix({ browsers: ["last 2 versions"] });

var htmlclean = require('gulp-htmlclean');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

//generate css from less ( + slick less files + slick files).

gulp.task('less-to-css', function() {

gulp.src(['node_modules/slick-carousel/slick/ajax-loader.gif'])

.pipe(gulp.dest('./public/css/'));

gulp.src(['node_modules/slick-carousel/slick/fonts/*'])

.pipe(gulp.dest('./public/css/fonts/'));

return gulp.src(['./assets/less/*.less', 'node_modules/slick-carousel/slick/slick.less', 'node_modules/slick-carousel/slick/slick-theme.less'])

.pipe(less({

plugins: [autoprefix, cleancss]

}))

.pipe(concat('build.css'))

.pipe(minifyCSS())

.pipe(gulp.dest('./public/css'));

});

//minify fonts

gulp.src('./assets/fonts/*.css')

.pipe(minifyCSS())

.pipe(gulp.dest('./public/fonts/'));

//move images to public

gulp.src(['./assets/img/*']).pipe(gulp.dest('./public/img/'));

gulp.src(['./assets/img/**/*']).pipe(gulp.dest('./public/img/'));

//inline link, script and img in index.html . Clean html.

gulp.task('index', function () {

var options = {

compress: true

};

return gulp.src('./index.html')

.pipe(htmlclean())

.pipe(inlinesource(options))

.pipe(gulp.dest('./public/'));

});

/* making build.js */

gulp.task('slickJs', function(){

return gulp.src(['node_modules/jquery/dist/jquery.min.js','node_modules/slick-carousel/slick/slick.min.js', 'assets/js/*.js'])

.pipe(concat('build.js'))

.pipe(uglify())

.pipe(gulp.dest('./public/js/'));

});

gulp.watch('./assets/less/*.less', ['less-to-css']);

gulp.watch('./index.html', ['index']);

gulp.task('default', ['less-to-css','index', 'slickJs']);

Запуск gulp осуществляется из консоли. Открыв консоль в каталоге с проектом и введя gulp, мы запустим выполнения задачи default, которая в свою очередь выполнит задачи 'less-to-css','index', 'slickJs'. За счет gulp.watch, после любого изменения less файлов или index.html файла будет выполняться соответствующая задача.

Верстка

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

Ссылка на макет:

http://www.bestpsdfreebies.com/freebie/fudi-landing-page-psd...

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

Обычно первым делом я формирую общую схему разметки. Получается нечто подобное:

<title>Fudi</title>

В дальнейшем в разметке я буду придерживаться BEM методологии. Почитать про неё можно здесь:

https://ru.bem.info/methodology/key-concepts/

Далее согласно этой методологии размечаю всю страницу.

Оптимизация загрузки шрифтов.

К данному макету шрифты шли в каталоге /fonts.

Для оптимизации работы со шрифтами воспользуемся fontsquirrel и возможностью хранить до 5мб места в localstorage. Подробней можно прочитать в переводах статей Adam Beres-Deak:

http://css-live.ru/articles-css/bystraya-zagruzka-veb-shrift...

https://htmlacademy.ru/blog/61-better-webfont-loading-with-l...

Верстал преимущественно флексами, про них можно почитать по ссылкам:

http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstv...

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://www.w3.org/TR/css-flexbox-1/

Ссылка на кросс-браузерный вариант реализации filter.

http://codepen.io/AmeliaBR/pen/xGuBr

Полностью выкладывать в пост файлы проекта я не буду. Они выложены в гит аккаунте сообщества:

https://github.com/pikaweb/pikaweb-first-demo

Посмотреть на результат в git pages:

https://pikaweb.github.io/pikaweb-first-demo/

Чтобы отправить каталог public В новую ветвь для git pages следует выполнить следующую команду:

git subtree push --prefix public origin gh-pages

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