Сообщество - Web-технологии
Web-технологии
100 постов 2 449 подписчиков
1051

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2901

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Книги по 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...

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

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

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

1. Основы JavaScript

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


2. ECMAScript 6

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


3. DOM (Document Object Model)

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


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

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


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

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

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

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


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

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

[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
78

Путь в мире программирования: 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...


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


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

47

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

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

Научу программировать #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
30

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

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


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

https://puzzle.mail.ru/


Описание:

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


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


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


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

Подумываю купить квартиру. Куда бежать и на что смотреть?

Подумываю купить квартиру. Куда бежать и на что смотреть? Длиннопост

Живешь несколько лет на съемной квартире – все отлично: платишь исправно, сделал ремонт под себя. А тут – бац! – хозяин просит съехать через месяц. Возможно, это прекрасный момент, чтобы подумать о покупке своего жилья и переехать раз и навсегда. Пикабу и застройщик ПИК запускают проект «10 шагов к покупке квартиры». Мы проследим путь покупателя от момента, как у него только появилась безумная идея купить квартиру и ввязаться в ипотеку, до выбора планировки и оформления трех тысяч бумажек (на самом деле меньше).

С чего начать: новостройка или вторичка


Если задумались о собственном жилье, пора изучить рынок и выбрать «свою» квартиру. Определите, что в приоритете: въехать сразу или сделать квартиру с нуля?


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


Есть другой вариант – новостройка с отделкой. Обсудите его с менеджером по продажам и попросите показать ремонт «вживую». Важно, чтобы это была не просто черновая отделка, а чистовой ремонт в новой квартире с обоями, полом и сантехникой. Если вам понравится – выбирайте такой вариант, чтобы переехать сразу. Часть соседей все равно будет делать ремонт, но головной боли точно меньше (только если от дрели). Останется только завезти мебель и пригласить друзей на новоселье!


Вторичка – вариант для тех, кто не готов ждать. В нее можно въехать сразу, постепенно делать ремонт и покупать «свои» вещи. Одним из плюсов квартир на вторичном рынке считается развитая инфраструктура района. Поблизости точно есть магазины, аптеки, поликлиники. Хотя сейчас многие новые дома строят в районах, где с этим все в порядке и можно не переживать, что останетесь без цивилизации.


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


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


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

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

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

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


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


Где квартиру искать: сайты для поиска

Подумываю купить квартиру. Куда бежать и на что смотреть? Длиннопост

Есть хорошая новость! Уже никто не ищет квартиру в газете или по объявлениям на подъезде. Да здравствуют онлайн-площадки для поиска жилья.


На ЦИАНе и Яндекс.Недвижимости – самый большой выбор квартир, от новостроек до элитных домов на Рублевке. Домофонд агрегирует и собственные предложения по квартирам, и варианты с Авито (их больше).


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


Если думаете о новостройке – мониторьте сайты застройщиков. Например, на сайте застройщика ПИК всегда есть самые свежие квартиры и новости рынка. Это сократит время на поиск.


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


На что смотреть при выборе жилья


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


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


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


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


Чек-лист: о чем подумать, прежде чем выбирать квартиру


1. Насколько просторной должна быть квартира. Оптимальный размер однушки в новостройках и для жизни – 34-45 м², двушки – 55-70 м². Важен и размер санузла. Если он совмещен, то должен быть не меньше 4 м², иначе вы в нем просто не поместитесь. Оптимально – 5-7 м². Чтобы понять размеры комнат, ванной и кухни – узнайте о габаритах своей нынешней квартиры и решите, все ли вас устраивает в них. Хотя в деле квартир не столько размер имеет значение, сколько планировка. Но об этом в другой раз.


2. Хочется ли устраивать ужины на кухне. Если да, то нужно рассматривать кухню не меньше 10-12 м². В кухню 6-8 м² поместится только небольшой стол или барная стойка.


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


4. На каком этаже хотите жить. Первый этаж обычно стоит дешевле, но его будет сложнее продать в будущем. Готовы вы к решеткам на окнах? Хотя в новостройках придумали уловку, и на деле первый этаж часто второй! Еще стоит учитывать, что пятиэтажки значительно дешевле высотных домов. Но, скорее всего, они уже старые, придется как следует вложиться в ремонт.


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


6. Хотите ли вы балкон/лоджию. Квартиры с балконом стоят дороже, при этом сокращается общая площадь жилья. А потом оказывается, что это вовсе и не балкон, а склад запылившихся ненужных вещей. Подумайте, насколько он вам нужен.


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


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


Эти же вопросы можно задать по телефону менеджеру по продажам. Сразу отсечете неподходящие варианты и сэкономите время. Покупая вторичку, возьмите часть вопросов из пункта про риски: спросите, кто собственник, прописаны ли дети, были ли перепланировки.


На что придется еще потратиться при покупке квартиры (помимо самой квартиры)


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


В основном все квартиры на сайтах, особенно вторичка, выложены с надбавкой в цене, поэтому, если умеете торговаться, можно скинуть от 10 до 100 000 ₽.


Переговоры с продавцом в среднем помогают скинуть от 1 до 3% от первоначальной стоимости. В Москве можно смело попросить скидку в 100–200 000 ₽, просто начав обсуждение условий покупки. Например, у ПИК система скидок прозрачная, чтобы клиентам не приходилось гадать и проходить курсы навыков успешной торговли: есть одна единственная скидка для всех – 2%, если оплачиваешь квартиру полностью (ипотека или 100% оплата).


Учтите, что к стоимости квартиры добавится несколько трат. Не избежать оплаты госпошлины на оформление права собственности или оформления договора купли-продажи у нотариуса (все это до 10 000 ₽). Помимо этого вас ждет:


— оплата риелтора, если будете с ним работать: это может быть процент от стоимости квартиры, а может фикс;

— оплата банковской ячейки/аккредитива для передачи денег, иногда при покупке новостройки можно сделать банковский перевод на счет застройщика;

— страхование квартиры и, возможно, еще и жизни в случае ипотеки;

— стоимость переезда, если есть что перевозить;

— покупка мебели и ремонт, если квартира продается без отделки и мебели;

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


Нужен ли риелтор или можно обойтись самому


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


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


С новостройками дело обстоит иначе: если застройщик работает по 214 Федеральному закону, ваши права защищает государство. Главное – проверьте все уставные документы и проектную декларацию.


Самое важное (и страшное) – копить или брать ипотеку

Подумываю купить квартиру. Куда бежать и на что смотреть? Длиннопост

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


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


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


Рассрочку же дают застройщики покупателям с большим первоначальным взносом (30–80%). Условия рассрочки у застройщиков могут отличаться, в целом она . выгодна тем, кто сможет выплатить остаток стоимости в короткий срок (буквально за несколько месяцев).


Чтобы понять, на какую стоимость квартиры реально рассчитывать, воспользуйтесь ипотечным калькулятором. Иногда, взяв ипотеку 2 миллион рублей с ежемесячным платежом около 20 000 ₽, можно купить квартиру в два раза больше, чем планировали. Удобнее, чем несколько лет копить и жить это время на съемной.


Так как все-таки понять, потянете ли вы ипотеку? Считаем в рублях


Если знаете сумму первоначального взноса, но не понимаете «смогу ли я платить 20 лет кредит», есть такой прием. Несколько месяцев откладывайте сумму месячного платежа по ипотеке, чтобы понять, насколько комфортной осталась ваша жизнь.


Допустим, ваша зарплата 60 000₽, на первоначальный взнос накопили 1 000 000₽. Поискав квартиры, вы поняли, что вам нужно 4 000 000 ₽, чтобы купить квартиру. В ипотечном калькуляторе получили сумму платежа – 31 000 ₽ в месяц.

Подумываю купить квартиру. Куда бежать и на что смотреть? Длиннопост

Если вы снимаете жилье за 25 000₽, попробуйте откладывать еще 10 000₽, чтобы понять, готовы ли вы отдавать за ипотеку 31 000₽ (не забудьте, что около 4 000₽ будет уходить на коммунальные услуги). Если не снимаете – несколько месяцев откладывайте 35 000₽. Так вы проверите себя и легко накопите деньги для первоначального взноса.


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


Прежде чем принять финальное решение: 6 ошибок новичка


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


2. Не смотрите слишком много квартир в небольшой промежуток времени. Если вы посмотрите 10 и больше квартир в неделю, принять решение будет сложно. Во всех будут плюсы и минусы, а от обилия вариантов выбрать будет невозможно. Или хуже: вы просто забудете все, что смотрели, а варианты перепутаются между собой


3. Снимите видео на телефон при осмотре квартиры. Это поможет восстановить все подробности и взглянуть на нее со стороны. В момент просмотра вы можете не увидеть торчащие провода без ламп, плохой ламинат, спрятанный под ковром, или сколы на плитке в ванной. Попросите разрешения прежде, чем доставать камеру и расскажите для чего вам это нужно: чтобы не забыть впечатления, чтобы показать жене/маме/брату. Если квартиру показывает арендатор, скорее всего, проблем со съемкой не возникнет. Если риелтор или хозяин, могут и отказать.


4. Осмотрите квартиру несколько раз. Если рассматриваете вторичку – минимум два раза в разное время суток, чтобы оценить пробки, загруженность парковок и шум из окна. Приезжая в квартиру второй раз, вы увидите нюансы, которых не заметили раньше. Даже если выбираете новостройку, посмотрите объект два-три раза: это поможет оценить район, дорогу и инфраструктуру.


5. Не стесняйтесь задавать вопросы продавцу или застройщику. Спрашивайте обо всем, что вас интересует, так как вы покупаете целую квартиру (!) за несколько миллионов рублей (!!). Если рассматривайте вторичку, спросите о соседях, как хорошо топят батареи, есть ли рядом парк, чтобы гулять с собакой. Если ваш выбор – новостройка, уточните сроки сдачи квартиры и что может на них повлиять, уточните, не будут ли строить рядом дороги, метро или какие-то другие крупные объекты. То есть любые вопросы, которые приходят в голову и волнуют именно вас. Ловите еще один лайфхак для покупателей квартиры в новостройке: поищите чаты жильцов в telegram или whatsapp. Гарантированно узнаете много нового и о застройщиках, и о районе.


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


Это лишь первый шаг, но чуть ли не самый важный. В следующем выпуске – расскажем, как выбрать застройщика и разобраться во всех документах и договорах, которые понадобятся для покупки квартиры. Stay tuned! ;)

Показать полностью 3
Отличная работа, все прочитано!