Сообщество - Web-технологии
96 постов 2 326 подписчиков
1043

Нейронная сеть, которая верстает сайты по картинке

Прошёл почти год с того момента, как на GitHub опубликовали алгоритм pix2code. И вот ребята из FloydHub на его основе создали нейронную сеть для вёрстки страниц, которую уже
можно запустить самому.

Работа алгоритма делится на 3 этапа:
1. Алгоритм получает JPEG-изображение дизайна страницы.

Нейронная сеть, которая верстает сайты по картинке Верстка, Сайт, Нейронные сети, Алгоритм, Гифка, Длиннопост

2. Алгоритм конвертирует элементы в HTML- и CSS-код.

Нейронная сеть, которая верстает сайты по картинке Верстка, Сайт, Нейронные сети, Алгоритм, Гифка, Длиннопост

3. Полученный результат

Нейронная сеть, которая верстает сайты по картинке Верстка, Сайт, Нейронные сети, Алгоритм, Гифка, Длиннопост

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


Алгоритм учится предсказывать соответствующие HTML-теги, последовательно «изучая» изображение на входе. Когда алгоритм предсказывает следующий тег разметки, он получает скриншот и все «правильные» теги HTML-разметки для этого элемента.

Примеры:
- 250 циклов работы алгоритма;

- 350 циклов работы алгоритма

- 450 циклов работы алгоритма;

- 550 циклов работы алгоритма.


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

Более техническое описание проекта доступно по ссылке, а ноутбук для запуска в Jupyter лежит тут.

Взято отсюда.

Показать полностью 1
525

Заметки Web Студии

На фоне возникшего у граждан интересна к историям из жизни, буквально сегодня:

Работаем в web-студии и у нас есть девочка дизайнер, она иногда рисует баннеры для заказчиков помимо основной работы (подработка).

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

Обидно, но особо не стала расстраиваться.

А сегодня эти крендели звонят опять и просят ее нарисовать, теперь уже афишу. Сидим и слушаем громкую связь:

— "А ну вы знаете, нам тут уже нарисовали конечно афишу/постер, но там караул конечно, вы бы не могли нам нарисовать Афишу?"

— "Вы офигели? Вы два дня назад меня на деньги кинули и еще что то просите?"

— "Ну что вам там сложно что ли? Вы легко делаете эту работу!"

— "И мне теперь это делать бесплатно?"

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

И вот ведь такие заказчики реально думают, что она должна была бесплатно работу сделать.

2897

Смерть фрилансера

Долго искал второго OpenCart программиста с адекватными ценами (лет 5 или 6). Очень много положительных отзывов о человеке было. Пообщались, увы недолго, но были далеко-идущие планы.

Фрилансеры поймут. Сам сижу за компом по 14-18 часов, понял, что тоже за работой когда-нибудь также уйду.

Смерть фрилансера Фрилансер, Веб-Дизайн, Скриншот, Смерть
151

Онлайн путевой лист

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

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

Вот я и написал скрипт который по Google maps сам расстояние находит и все просчитывает.

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

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

Онлайн путевой лист Web, Работа, Авто

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

И все это передается в PDF

Онлайн путевой лист Web, Работа, Авто

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

Ссылку оставлю в комментариях, там же и коммент для минусов.

Показать полностью 1
152

Книги по JavaScript

1. Современный учебник JavaScript


Автор: Илья Кaнтop


Год : 2015

https://drive.google.com/open?id=0Bw1tpOoY9MYrcmpOb2VoYWJWZ2...

_______________


2. Выразительный Javascript, 2-е издание


Автор: Marijn Haverbeke


Год : 2015

https://drive.google.com/open?id=0Bw1tpOoY9MYrTk11SjFKdDYwSG...

_______________


3. JavaScript. Сильные стороны


Автор: Крокфорд Дуглас


Год : 2012

https://drive.google.com/open?id=0Bw1tpOoY9MYrWjdtMzNzaHNaVX...

_______________


4. JavaScript. Шаблоны


Автор: Стоян Стефанов


Год: 2011

https://drive.google.com/open?id=0Bw1tpOoY9MYrazEtLTA3c1pVNj...

_______________


5. JavaScript. Подробное руководство, 6-е издание


Автор: Дэвид Флэнаган


Год: 2012

https://drive.google.com/open?id=0Bw1tpOoY9MYrSnNKRE1qM21Lbz...

_______________


6. JavaScript. Карманный справочник


Автор: Флэнаган Дэвид


Год : 2013

https://drive.google.com/open?id=0Bw1tpOoY9MYrXzNoLVBDWmloTE...

Показать полностью
303

Огромный бесплатный видеокурс по основам JavaScript

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

1. Основы JavaScript

https://www.youtube.com/watch?v=le-URjBhevE&index=1&list=PLW...


2. ECMAScript 6

https://www.youtube.com/watch?v=1mgLWu69ijU&list=PLWKjhJtqVA...


3. DOM (Document Object Model)

https://www.youtube.com/watch?v=eaLKqoB9Fu0&list=PLWKjhJtqVA...


4. Читстый код

https://www.youtube.com/watch?v=b9c5GmmS7ks&index=1&list=PLW...


5. Алгоритмы и структуры данных

https://www.youtube.com/watch?v=Gj5qBheGOEo&index=1&list=PLW...

6. Шаблоны проектирования

https://www.youtube.com/watch?v=bgU7FeiWKzc&index=1&list=PLW...


7. Основы React
https://youtu.be/QqLkkBKVDyM

Показать полностью 6
95

[Must know] Что нужно знать web-разработчику в 2016?

Недавно наткнулся на одно видео, где была информация о том, что нужно знать web-разработчику в 2016-2017 году. Решил поделиться с вами. Видео в самом конце (на инглише). Ниже текстовая сокращенная версия с моими комментариями (в виде цитат).

Для тех кто не любит видео-формат или не может в инглиш.


TL; DW (краткий пересказ):

В видео есть 3 ветки:

1) Не зависимо от того back-end или front-end

2) Front end

3) Back end


Первая ветка. Включает в себя такие вещи:

- FTP и работа с хостингом (залить, выгрузить, работа с cPanel и т.д.)

- Терминал (командная строка)

- SSH

- Основы GitHub

- Как происходить связь между клиентом(юзером) и сервером

- RESTful


Вторая ветка. Начнем с основ для фронта:


- Текстовый редактор

Автор выделил 3: Atom, Sublime, Brackets.

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


Большой разницы при выборе редактора нет. Так что особо заморачиваться не стоит.

- HTML

- CSS

- JS

В видео автор утверждает, что jQuery учить необязательно и можно сосредоточиться на родном JS и дальше уйти во фреймворки.

Я все-таки не соглашусь. jQuery все еще остается самой популярной библиотекой на JS (jQuery не фреймворк). При этом jQuery очень легкая в изучении и имеет просто тонны документации (и горы мусорных обучалок на Youtube).

Дальше идет продвинутый фронт:


1)ES6/ES2015 (Babel)

Как и любой язык JS (ECMA-Script) не стоит на месте. Если руки чешуться уже писать на ES6 (ибо var, let, const и еще много фич) то Babel (преобразователь ES6 в ES5) в помощь.


2)CSS инструменты.

-Препроцессоры (SASS/LESS/Stylus)

-CSS фреймворки (Bootstrap/Foundation)

-Адаптивный дизайн в CSS


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


Самые банальные примеры использования препроцессоров. Переменные. Загнали цвета в переменные. И если вдруг, дизигнеру придет в голову сделать серый-черным. Вы просто меняете значение переменной. И вуаля у вас во всем проекте серый стал черным. Функции. Использовать функции можно очень разнообразно. Но начнем с простого. Чтобы не писать все префиксы для box-shadow, transition и других CSS3 фич можно использовать функции (mixin). Пишеться функция, которая принимает значение, например: "transition: all .4s ease" и выдает это же значение, только с бразуерными префиксами.


Еще стоит отметить, что есть SASS, а есть SCSS. Разница? Только в синтаксисе. В SASS нет скобок "{}". Совсем нет. И это многих смущало посему появился SCSS.Тот же SASS только со скобками и более приближенным к CSS синтаксисом. Отличие не только в скобках, но это основное.

3)Интсрументы сборки


-Таск ранеры

Gulp и Grunt. Самые популярные. Каждый выберет то что любит больше. Лично я фанат Gulp.

Что такое таск ранеры? Это такая полезная вещь, которая позволяет настроить автоматизированные задания (таски). Простые примеры: компиляция SASS|LESS в CSS сразу после того, как файл SASS|LESS был сохранен. Т.е. ctrl+s - упаковнный CSS. Можно пойти еще дальше и сразу сделать минимизированный CSS. Т.е. пишется еще таск и после упаковки с SASS|LESS идет следующий таск который минимизирует CSS. Такая же история с JS и даже HTML (Jade). Кроме того можно написать таски на тесты (Mocha|Karma). Штука классная, но нужно посвятить время.


-Управление зависимостями

Browserify и Webpack. Webpack ваш выбор. Он популярнее. Его любят больше. Я даже видео по нему запилил.

Да, Webpack - классная штука. Такая же история как с тасками. Потратил время на обучение, попробовал повторить туториалы, написал свое, оптимизировал, доволен как слон. Потом опять переписал или дописал. И опять доволен как слон. (2 последних шага повторяются время от времени)


-Bower, Yeoman

Пакетные менеджеры. Глянуть можно. Сейчас не такие полезные как раньше. Yeoman все еще вещь, если есть много мелких проектов, которым нужен одинаковый boilerplate.


4)MV* фреймоврки

Если пишеться SPA (Single Page Application), т.е. вовлекаются сотни, тысячи строк кода на JS, то нужен фреймворк, чтобы их организовать. Знакомиться стоит с четырьмя:


-React


-Angular

Angular 2 как бы вышел. Многие недовольны резким смещением от Angular1 к Angular2. Многие сидят на Angular1. Многие не уверенны лучше ли Angular2.

Angular2 в концепции очень сильно отличается от Angular1. Кроме того, в Angular2 нет обратной совместимости с Angular1. т.е проект написанный на Angular1 нельзя просто "обновить" до Angular2. Мигрировать можно. Просто крайне муторно. Мне самому пока не доводилось.

-Ember

Используется для больших приложений и работы с большим объемом данных.


-Vue

Для маленьких и легких приложений. Но и React для таких приложений тоже хорош.


Также стоит отметить Polymer и Aurelia. Но они не должны входить в основу вашего набора разработчика.


Если хочется сосредоточиться на изучении одного, несомненно, - это React. В мире React за последний год случилось много всего. Сузим это до:


-Mobx

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


-Flux

Далее рекомендую выучить Flux. Зная Flux проще разобраться в Redux, Relay. Множество этих микрофреймворков под React берут основу именно у Flux.


-Redux

Стоит использовать, если ваше приложение набирает размер и имеет сложные взаимодействия с данными.


-Relay

Для, ну очень, больших приложений. Если бы нужно было сделать Gmail на React ябы делал это на Relay.


-create-react-app

Простой способ развернуть React-приложение.


Если хочется чего-то интересного:

-Closurescript

-Elm

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


Юнит тестирование

-Mocha

-Jasmine

-Karma

-Enzyme

Enzyme - кассная вещь для использования вместе с предыдущими тремя. Под React.


Все учить не надо. Придя на продвинутый уровень с базовыми знаниями HTML-CSS-JS, сперва выучите CSS фреймворки и препроцессоры. Далее выберите JS фреймворк (React) и учите понемногу что-то новое.


Третья ветка. Back-end.


Есть скриптовые языки, функциональные языки, высокопроизводительные языки.


Если вы новичок, то учите скриптовые языки. В скобках выделены фреймворки под эти скриптовые языки.


-NodeJS (express^, hapi^)

-Python (django, flask^)

-Ruby (Ruby on Rails, Sinatra)

-PHP (Laravel, Symphony2, Lumen^)


Фреймоврки с ^ - микрофреймворки. Меньше, легче в изучении.


Если бы мне сказали выделить один, то я бы выделил все-таки NodeJS. Почему? Скорее всего вы уже знаете немного JS и он крут.


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


Функциональные:

-Elixir

-Scala

-Haskell

-Clojure


Высокопроизводительные:

-Go

-Rust

-Java

-C#


Если выделять, то:

NodeJS - Haskell - Go/Rust. Я бы начинал так. Я выделил Java и C# другим цветом потому что они не для новичков. Да, там много возможностей работы, но новичкам, я бы рекомендовал начать со скриптового языка.


Что знать (вне зависимости от языка):

-Юнит/Функциональное тестирование

-RESTful API принципы. Как его написать.

-Защита

-Авторизация (OAUTH2, JSON Web Token)

-SOA (Services Oriented Architecture) / Microservies

-Развретывание приложения (Flightplan: nodejs / Fabric: python / Capistrano: Ruby)

-Websocket

-ORM/ Data structure


Работа с данными (базы данных):

-MySQL, PostgreSQL (реляционные)

-Redis (сессия, кеширование)

-MongoDB, Couchbase, RethinkDB (noSQL базы данных)

-Solr, Elastic Search (базы данных под поисковые системы)


Кеширование

-Nginx

-Apache

-Redis

-In-memory


Далее идет DevOps


Веб-платформы:

-Digital Ocean

-Amazon Web Services

-Azure

-Rackspace

-Heroku


Упралвение сервером:

-Linux

-Docker

-Ansible

-Salt

-Chef

-Puppet


Docker - это то, что вы абсолютно точно захотите знать. Если вы решили изучть одну технологию как DevOps учите Docker. Немного знакомы с Docker? Выучите его хорошо.

- Большой масштаб (Kubernetes, Mesos)

- Малый масштаб (Docker Swarm)

- С графическим интерфейсом (Rancher, Docker Cloud, Docker Datacenter/Universal Control Plane)


Продолжительное тестирование и разработка:

-Jenkins (на собственном железе)

-SemaphoreCI

-CircleCI

-Codeship


Vagrant. Стоит иметь ввиду. Но сейчас - Docker это вещь.


Вот краткий обзор технологий, которые должен знать веб-разработчик в 2016-2017 году.


Я лично не по всем пунктам согласен с автором. Но у меня нет настолько обширного и глубокого опыта, чтобы спорить о том насколько Docker крут или нет, или почему Flux отстой Redux рулит и т.п. А согласны ли вы с ним или есть возражения?

Делимся мнениями в комментариях.


Ссылочка на майндмапу, которую использует автор в видео: тык

Показать полностью 1
98

One Punch Web - автоматизация всего что можно до одной кнопки

Всем привет!

Последние пару лет я занимаюсь node.js разработкой, из которых несколько месяцев делаю свой "швейцарский нож(костыльный монстр) на все случаи жизни" - One Punch Web.

One Punch Web - автоматизация всего что можно до одной кнопки Nodejs, Разработка приложений, Гифка, Длиннопост

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


Постараюсь как можно более подробно описать детали проекта. Надеюсь, кому-то это покажется интересным и не сильно скучным)

Используемые технологии

- Nw.js как ядро проекта, для окошек gui и обработки сочетаний клавиш

- Vue.js + Element.js для интерфейса

- Node.js для написания инструментов командной строки (CLI)

- Sublime text как текстовый редактор

- Wireframe.cc для управления wireframes

- Xmind для редактирования интеллект-карт

- Яндекс диск для бекапов

- Nedb.js как база данных всего приложения


В центре всего окошко One Punch Menu, которое вызывается поверх всех окон из любого места по сочетанию клавиш (которое я повесил на кнопку мышки). До вызова оно ждет своего часа в трее системы

One Punch Web - автоматизация всего что можно до одной кнопки Nodejs, Разработка приложений, Гифка, Длиннопост

Карта функционала проекта

One Punch Web - автоматизация всего что можно до одной кнопки Nodejs, Разработка приложений, Гифка, Длиннопост

Основные фичи

1. One Punch Snippet

Все сниппеты(куски кода для переиспользования), плагины и расширения для sublime text хранятся в папке проекта One Punch Web. При изменениях, или добавлении новых объектов идет синхронизация (перезапись старых, удаление лишних) с папкой sublime text. Основной задачей было сделать быстрый доступ для создания, изменения, удаления сниппетов.

One Punch Web - автоматизация всего что можно до одной кнопки Nodejs, Разработка приложений, Гифка, Длиннопост

2. One Punch Cli

Так же как и сниппеты, быстро создаются, редактируются и удаляются.

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

Пример в гифке - подготовка файла шрифта для вставки на сайт

One Punch Web - автоматизация всего что можно до одной кнопки Nodejs, Разработка приложений, Гифка, Длиннопост

3. One Punch Code (codeprocessors)

Есть препроцессоры кода, есть постпроцессоры. Почему бы не сделать просто процессоры?

Бывает лень/долго разворачивать(на маленьких проектах) gulp/webpack когда, к примеру, хочу использовать некоторые функции less. Решением было написание плагина для sublime, который отправляет фрагмент выделенного текста в проект One Punch Web и возвращает на его место обработанный результат.

Пример - less2css, autoprefix, css-beautify, css в одну линию и сохранение сниппета из выделения

One Punch Web - автоматизация всего что можно до одной кнопки Nodejs, Разработка приложений, Гифка, Длиннопост

4. One Punch Search

Вместо открытия вкладки google в браузере, я отрываю google в One Punch Menu.

Это делается для сохранения истории поиска. Когда нашел что искал - нажал кнопку. В базу записывается поисковой запрос и адрес страницы с необходимой информацией.

Помогает когда не могу найти что гуглил ранее, либо когда ищу одно и то же


5. One Punch Mindmap

Для визуализации причинно следственных связей в проектах.

Были разработаны 2 cli для создания и открытия mindmap файлов через xmind


6. One Punch Wireframe

Для схематичных набросок пользовательских интерфейсов. Для этого интегрировал сайт wireframe.cc. В базе программы хранятся только ссылки на wireframes.


7. One Punch Backup

На работе у меня linux(ubuntu), дома ноутбук и стационарник с виндой. С проработкой функционала под кроссплатформ проблем особо не было, а вот с переносом всего добра они периодически возникали. Раньше использовал git, но по некоторым причинам решил сделать иначе.

Сейчас это zip-архивы, которые лежат на яндекс диске (мне повезло с аккаунтом на 200гб).

Чтобы перенести все наработки, достаточно нажать одну кнопку и через минуту я буду во всеоружии



Планы на ближайшее будущее


- One Punch Cheatsheet

Для создания своей документации к технологиям и библиотекам. Вдохновила эта реализация


- One Punch Guide

Для периодических тренировок/code kata


- One Punch Chrome

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

Огромное спасибо всем, особенно тем кто дочитал до этого момента)

Проект находится в процессе разработки, буду искренне рад любой критике.

Оставлю пару комментариев для минусов, на всякий случай

Показать полностью 5
79

Путь в мире программирования: 25 вещей, о которых стоит знать

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



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



Обо всем



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



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



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



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



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



Код



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



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



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



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



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



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



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



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



Развитие



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



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



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



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



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



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


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


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


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


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



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



Поиск работы



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



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



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



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



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


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

Показать полностью
43

Web-технологии. Начало

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


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


По мере появления времени, я выберу шаблон и поэтапно покажу работу над ним. Все желающие могут присоединиться, выбрать себе psd макеты и в процессе работы над ними мы обсудим те или иные подходы к верстке. Подробные уроки по HTML и CSS составлять не буду, этого в сети много. Например, уроки на webref:


https://webref.ru/layout/learn-html-css


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


Список полезных ссылок:


Справочник по html/css: https://webref.ru/ref


Информация о поддержке тегов и стилей браузерами: http://caniuse.com/


Онлайн песочница: http://codepen.io/


Хорошая статья по флексбоксам: http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstv...


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


Оставляйте предложения и замечания в комментариях.

71

Научу программировать #1 Системы контроля версий. Git

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

Глава 1. Системы контроля версий.

1.1 Что это такое?

1.2 Накуа надо, и так все работает

1.3 Как работает внутри

1.4 А как работать

1.5 Работа в команде

1.6 Домашка


1.1 Что такое системы контроля версий?

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



Вообще системы контроля версий 2-х типов:

a) Централизованные

б) Распределенные.


Централизованные.


Давайте поговорим о том, в чем разница.

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

В централизованных системах весь код хранит центральный сервер (бла-бла-бла). Доступ имеют все разработчики ПО. Минусы такого подхода, что у разработчика нет своего репозитория, а если сервак сломается, упадет, сгороит (нужное подчеркнуть). То ни у кого не останется полной рабочей версии ПО. Обмен происходит также, ка ки децентрализовванных.


В настоящее время уже не особо популярны, поэтому подробно останавливаться не будем, дабы не забивать голову. Кому интересно может погуглить инфы много, например: SVN

Децентрализованные

Вот тут уже гораздо интересней - остановимся подробней во второй части. Пока краткое описание, как работает.

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

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


Коротко рассмотрели, давайте подробней теперь на децентральзованных.

1.2 Накуа надо и как работает


Всем знакома ситуация:

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

----------------------------

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

Папки конечно могут называться по разному. Например: "правил дизайн" и т.д.

В папке "Изменения Васи" поменялся файл index.php и т.д.

можно решить таким способом данную проблему:

Вася пишет исправлял файл

...

...

и т.д.


Петя пишет исправлял файл

...

...

и т.д.


Так вот, представьте что у Вас работает над проектом так человек 20-ть, как быстро показать заказчику проект со всеми изменениями?


Правильно подумали, открывает файл и начинаем копировать файлы с изменениями в папку "Рабочая версия". Вам ничего не кажется странным? :) пишите в комменты что думаете о таком подходе.


И у нас вдруг возникает ситуация, что Вася и Петя редактировали один файл.


Что будем делать?

Если честно я хз, как решать подобное, но срок релиза отложился до решения проблемы.

По головке не погладят точно.


Вот тут и приходит на помощь наш репозиторий.

Буду рассматривать git, материалы приведенные мной это книга по git

link to book:

https://git-scm.com/book/ru/v1/

и так поехали.

Я не буду рассматривать установку на свой ПК сервера git


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

И так мы уже знаем, что наш git - это СКВ.

Как же он устроен и почему на сегодня он лидер в данной области?


Неужели весь код хранится на сервере, каждый файлик.


Это и так и не так.

Во первых все изменения происходят у Вас локально. Т.е. сервер не знает, что вы там наделали. Инфа приходит есму после, того как Вы ее туда отправили.


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


Получается вот такая картина:

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

Давайте рассмотрим подробнее что тут отображено:


Version - история изменений (коммитов)

A, B, C - файлы.


Наверное у Вас возникли вопросы, че за **но одни пунктиром, другие нет.


Так в этом и заключается версионность. Сам git не сохраняет полный файл к себе каждый раз, когда вы сохраняете состояние. Он сохраняет только изменения, измененных файлов. Если файл не менялся, то будет просто (условно) сказано (фактически ссылка на файл), файл без изменений.


Получается, что мы можем видеть что конкретно в какой строке поменялось в файле.

Удалилось или добавилось. При этом достаточно компактно.


На сим давайте закончим. Основа задана, далее по линку. А мы поедем дальше.

Самое важное.

Состояния файлов в гит. Это действительно важно, без этого не понять как работает система контроля версий.


и так, есть три состояния:

а) подготовленный - будет включен в репозиторий при commit

б) измененный - изменили файл

в) зафиксированный - зафиксировали, значит отправили с локальный репозиторий (помните где он да?)


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


Их называют не отслеживаемые файлы. Ну само вытекает как бы из этого.

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

Теперь добавим файл в отслеживание.

(Команды пока я опускаю, мы к ним еще придем.)

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

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

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

Теперь файл зафиксировали в нашем локальном репозитории. Состояние №3, при отправке на сервер от будет отправлен.


А теперь давайте сделаем состояние №2. Напишем внутри файла строку:

Petya the Best. Как видно на картинке ниже git отметил наш файл как измененный

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование
Фухххх.......  Ну что же. Передохните пол часика, пусть материал уляжется. И продолжим. Статья получается огромной.

----------------------------------------------------------------------------------------------


Отдохнули, налили чай. Едем дальше.


И так, что надо сделать, чтобы начать работу.


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


Для начала давайте поставим необходимые программы для работы.


Linux: ссылка на мануал по установке
Windows: http://msysgit.github.com/


Для тех кто использует Windows, разработчики git написали:

"Пожалуйста, используйте Git только из командой оболочки, входящей в состав msysGit, потому что так вы сможете запускать сложные команды, приведённые в примерах в настоящей книге. Командная оболочка Windows использует иной синтаксис, из-за чего примеры в ней могут работать некорректно."

После того, как установили приложение приступим уже к практической части.

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

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


1. Склонировать готовый, (допустим на работе уже давно создано)

2. Создать новый локально.


И так способ 1-й.

Идем на bitbucket.org (github и др.)

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


на ПК создаем каталог в котором будет находится копия нашего ПО, склонированного с сервера. Пишем команду:


git clone https://bitbucket.org/bla-bla-lba (в созданном репозитории на bitbucket уже есть ссылка на проект).


Мы должны в нашей папке увидеть проект, название папки = название проекта.

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование
Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

Жмем создать. Все наш репозиторий на bitbucket создан.

Можем приступать к работе. Внизу на странице у нас две ссылки:

У меня уже есть проект
Я начинаю полностью с нуля

Сейчас мы выберем, я начинаю проект с нуля:

git clone https://nibbler-ws@bitbucket.org/nibbler-ws/testing-repository.git

получаем ссылку на клонирование нашего проекта к себе на ПК.


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

Теперь открываем консоль и понеслась.

1. Выбираем папку куда будем клонировать наш пустой (пока) репозиторий.

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

Собственно моя папка куда мы будем производить сие действие.

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

Оп, наш репозиторий готов. Теперь у нас есть два репозитория, один на нашем сервер, второй на нашем ПК.


И так репозиторий готов, приступим к работе с файлами. Правда для начала давайте пробежимся коротко по GUI приложениям для git:

GitKraken - на мой взгляд просто красивый :) Эта сволоч платная, но красивая.

Есть и free-план

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

В остальном можно обойтись консолью, так как я работаю в основном на  Ubuntu/Mac то клиентов могу назвать еще пару, но можно просто погуглить.

Ладно передохнули, начнем. Создаем файл в нашей папке Petya.txt

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование
touch и прочие мной используемые команды ищите пожалуйста в интернете, они просты, а Вы сразу подучите консоль.

и так мы сделали клон репозитория ранее, перешли в папку, создали файл Petya.txt и попросили git показать статус (назовем это так). В данном случае git говорит нам, что видит наш файл, но он его не отслеживает. Что это значит, а это значит что ничего, что мы там напишем не попадет на наш сервер. Давайте попробуем зафиксировать наши изменения.

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

Нам сказали, что парень какого? У тебя нихрена не добавлено, давай работай. И показал, что есть файлы которые просто не отслеживает. Снова :) Мы всегда будем их видеть.


Ну давайте скажем следить ему за файлом.

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

Странно, но нам ничего не сказали. Конечно зачем :) мы уже просто и так добавили файл

Но если сейчас запросить статус увидим, такую картину:

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

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

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


А: ( Строка ХАХАХ ) фиксируем изменения | ( Строка ХАХАХ ) -> ( Строка ХАХАХ2 ) -> ( Строка ХАХАХ123 ) -> ( Строка ХАХАХ Кхе-Кхе ) фиксируем изменения.

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

А: ( Строка ХАХАХ ) -> ( Строка ХАХАХ Кхе-Кхе ).

Надеюсь это понятно. Едем дальше. Сделаем первый коммит теперь (фиксация изменений).

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

нам сообщили, что наш файл зафиксирован. 1 файл изменен, строк добавилось 0, удалено 0.

и хэш. Клево правда :)

Посмотрим лог (история фиксаций):

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

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

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

автор - собственно кто создал коммит.

Дата

И список файлов, которые были изменены.

теперь отправим наши изменения на сервер. Мы помним уже, что наш файл был добавлен и зафиксирован, теперь чтобы все разработчики его увидели нам надо сделать push (или отправить на наш сервер).


Для этого делаем git push.

Научу программировать #1 Системы контроля версий. Git Php, Junior php developer, Длиннопост, Самообразование, Самообучение, Программирование, Web-Программирование

У меня остался последний блок который я могу добавить :) мать его да у меня статья не влезла полностью первая, надо что-то думать :)


Читая Ваши комментарии и просматривая ссылки наткнулся на такой комментарий от пикабушника.

"Вот ты пишешь, что твои посты в горячем нахер не нужны. B я только на 30 лекции на тебя наткнулся." Пруф по ссылке

Я вот даже не знаю, просить как-то неудобно Вас. А люди мучаются :(


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

Показать полностью 20
46

Парсинг интернет магазинов

Наконец дошли руки написать обещанный пост про парсер сайтов. Главное условие для нашего парсера, чтобы сайт был открытый и не требовал авторизации (в принципе 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: Кликаем в меню по пункту "Инструменты" затем на "Редактор скриптов", у нас откроется новая вкладка.

Парсинг интернет магазинов Google, Парсер, Google script, Loftblog, HTML, Pikaweb, Длиннопост

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

Парсинг интернет магазинов Google, Парсер, Google script, Loftblog, HTML, Pikaweb, Длиннопост

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

Парсинг интернет магазинов Google, Парсер, Google script, Loftblog, HTML, Pikaweb, Длиннопост

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

Парсинг интернет магазинов Google, Парсер, Google script, Loftblog, HTML, Pikaweb, Длиннопост

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

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

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

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

Парсинг интернет магазинов Google, Парсер, Google script, Loftblog, HTML, Pikaweb, Длиннопост

Формула 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.

Показать полностью 5
30

Головоломка ко дню программиста от mail.ru

Прошел головоломку от mail.ru. Ушло на это 2,5 часа (долговато). Думаю может быть интересна еще кому-нибудь в сообществе.


Ссылка головоломку:

https://puzzle.mail.ru/


Описание:

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


Головоломка состоит из 25 уровней. На каждом уровне необходимо выяснить секретное слово и ввести его в поле ввода. Кодовое слово может быть ответом на загадку или спрятано где-то на странице (очень часто — в исходном коде страницы).


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


И пусть удача всегда будет с вами!

23

Пути развития в WEB-сфере

В последнее время озадачился вопросом дальнейшего развития в сфере веб-технологий и решил обратиться к коллективному разуму Пикабу за советом:) Жду комментариев с вашим виденьем ситуации или опытом в этой сфере, может кто-то уже сталкивался с тем, что "завяз" и нужно срочно выбирать новый путь движения.

Предисловие: в веб-сфере уже не новичок, разработкой сайтов занимаюсь лет с 13 (сейчас мне почти 29), за это время были и попытки всё это бросить и перейти в другую сферу, но в нашем городе-почтимиллионнике особо не разбежишься с выбором и "веб" был наиболее оптимальным выбором). Оглядываясь назад можно выделить основную проблему/ошибку с которой я столкнулся - это распыление на всё подряд начиная от работой с разными CMS(Joomla,Wordpress...остановился на MODX) заканчивая SEO, SMM, e-mail-маркетинг, возможно сосредоточившись на одном направлении (том же JS), картинку можно было изменить, но плакать о прошлом не наш путь, будем исправлять ошибки в будущем).

Что имеем сейчас: На данный момент я уже седьмой год работаю в небольшой компании как руководитель веб-направления и по совместительству как комбайн делаю, то что не могут/не хотят делать юные рекруты(дизайнеры, контент-менеджеры и стажеры-разработчики на подхвате), которые уходят через год-два как чуть наберутся опыта. Работа всегда есть, у компании основной сайт и несколько монобрендовых сателлитов. Здесь как раз пригодилось, упомянутое выше, распыление на все сферы от рекламы до разработки. Сделать с нуля сайт-каталог или магазин (при этом хочется сделать всё с душой, через сборщик, с препроцессорами, по БЭМу и тд, а не делать УГ на коленке) придумать новость о новинке, сделать кампанию в директе или рся, найти сотрудника через хх или sj, при этом вакансия должна быть приятна взгляду и цеплять "жертву", ну и наконец научить "дизайнера" предметной съемке или контент-менеджера делать рерайт. Всё это при полусерой зп в ~30к, кому-то покажется вполне нормальной (у нас в г. средняя наверно 15-20к), но тут ипотека, бензин/расходники и не желание есть дошики при этом:) отсюда уже поднадоевшие подработки у сомнительных заказчиков в виде сделать сайт на заказ, поднять в поисковике или сделать рассылку в мэйлчампе, с последним картину портит кидалово со стороны заказчиков, которые могут слиться даже если переведут предоплату.

Муки выбора: отсутствие перспектив и обострившееся желание куда-то двигаться  заставило основательно задуматься о выборе дальнейшего пути развития, пока я выделил три основных направления (учитывая умения и желания, внизу набросал схему):

1. Работа с заказчиками на фрилансе (всё то, что как-правило делают небольшие веб-студии): разработка лендингов, каталогов, интернет-магазинов "под ключ", контекстная реклама, SEO-оптимизация/продвижение, рассылки, ну и работа со страницами  в соцсетях. Весь тот багаж разбросанных знаний пригодится тут в наибольшей степени. Из минусов - это желательное последующего оформление юрлица, составление договоров и прочая скучная бюрократия. Также в минусы можно записать процент неадекватных клиентов, которых, я так полагаю, не убедит даже договор. Ну и на перспективу, по своему опыту понял, что будут сложности с поиском заинтересованных сотрудников при создании команды, большой зарплатой вряд ли сможешь заинтересовать на начальном/среднем этапе, да и есть большой процент людей которые сами не знаю чего хотят, научился и ушел в неизвестном направлении).

2. Работа Frontend-разработчиком или JavaScript-программистом: вариант с необходимостью постоянного обучения и заполнения пробелов прошлого:) Держу в голове этот вариант как наиболее перспективный уже наверно год, за последнее время освоил все эти фишки с препроцессорами (Less,Sass,Jade/Pug), сборщиками проектов (GULP, в процессе Webpack), работу с Node.JS и GIT. Сейчас активно вникаю в React. Самое сложное - это настроить свой мозг на постоянное обучение, ну и в голове крутится мысль, которую приходится отгонять "не поздно ли лезть во все эти дебри в почти 30 лет??". (тут ещё свое рода минус можно рассмотреть вычеркивание опыта веб-дизайна, сео, рекламы и тд.) Отсутствие опыта командной разработки или участие в энтерпрайз проектах осложнит поиск позиции в этом направлении. Тут особенно интересно мнение бывалых)

3. Работа менеджером проектов (product owner): интерес вызывает работа по современным методологиям (Agile: Kanban, Scrum), но понятие о них чисто теоретические(видеосеминары, статьи), ознакомительная работа в JIRA и Trello. Наверно плюсом пойдет опыт работы руководителем в целом. Но тут тоже всё начинать сначала, единственное, что в зависимости от проекта может пригодится опыт работы в веб-сфере.

4. - Недовариант (добавил в последний момент) - это разработка своего проекта, где также пригодится весь опыт разработки, продвижения и веб-рекламы. Как-то из благотворительных соображений запустил свой проект (на livestreet) с объявлениями о передачи животных в добрые руки, раскрутил группу, нашлись постоянные посетители, но потом всё загнулось из-за недостатка времени, он так пока и дрейфует в интернете (с дневной посещаемостью около 150) без копирайтера или вложений в рекламу. Может у кого-то возникнут мысли и поэтому поводу).

Ниже схема первых трех вариантов для наглядности. Высказывайте свое мнение:)

Пути развития в WEB-сфере Web-Программирование, Web, JavaScript, HTML, Веб-Дизайн, Seo, Развитие, Программист, Длиннопост
Показать полностью 1

Выиграйте год бесплатной еды от Delivery Club

Ненавидите манную кашу с комочками? Шкурки от курицы? Молочный суп с вермишелью?

Не ешьте это. Ешьте то, что считаете вкусным. Целый год можно пировать за счет Delivery Club и Тинькофф Банка — для этого надо выбрать ненавистное блюдо из антименю и поделиться выбором в соцсетях. Еще на странице конкурса разыгрывают 10 сертификатов на 3000 рублей.

Выиграйте год бесплатной еды от Delivery Club

Если оформить там же карту Tinkoff Black, то получите гарантированный приз за заказы в Delivery Club: за первый заказ — 1000 рублей, за каждый пятый заказ — 500 рублей. Призы дают за заказы от 1000 рублей.


По карте дают кэшбэк (1% за любые покупки, и до 30% у партнеров) и начисляют 10% годовых на остаток до конца года. Подробнее про Tinkoff Black писали здесь.


Участвовать в конкурсе

Отличная работа, все прочитано!