sublime

Выравнивание кода

Preferences → Key Bindings — User

Если файл пустой, то вставить код полностью.
Если нет, то добавить объект в массив, как добавляли бы его в JSON.

[
    { "keys": ["ctrl+alt+l"], "command": "reindent", "args": { "single_line": false } }
]

Данный код позволяет по нажатию комбинации CTRL+ALT+L отформатировать код во всем файле или только внутри выделенного фрагмента.

Йога

Шаг №1

Определиться с задачами сайта:

  • Должен быть удобным для сайта
      Решение:

    • Расположить информацию о расписании, ценах и местоположении на видном месте
  • Вызывать доверие
      Решение:

    • Информация о тренере: награды, опыт и образование
    • Фотографии зала
  • Заявка на посещение
      Решение:

    • Телефон на видном месте
    • Обратный звонок
    • Призывы к действию

Шаг №2

Прототип — расположение элементов сайта для удобной навигации по странице

Шаг №3

Дизайн — делаем симпатично

Шаг №4

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

Шаг №5

Реклама — переходы теплых клиентов с поиска Яндекс

Шаг №6

Прием и обработка входящих заявок в Вконтакте и звонков на телефон

Заказчик получает клиентов. Все довольны.

JavaScript

Интересные материалы.

http://kangax.github.io/compat-table/es6/ — кроссбраузерность javascript es6

https://pawelgrzybek.com/javascript-console-in-sublime-text/ — консоль javascript для sublime text 3

https://codyhouse.co/library
https://tympanus.net

Справочник для разработчиков.

Требования к именам переменным:
— имя может состоять из букв, цифр и символов $ и _
— первый символ не должен быть буквой
— регистр символов имеет значение. time Time TIME — разные переменный

Соглашения об именовании переменных:
— использовать английский
— нижнийВерблюжийРегистр (первая буквас нижним регистром, остальные с большой)
— имя переменной отражает информацию, которая хранится в переменной

% — оператор взятия остатка
> 256 % 7
4 (ближайшее кратное число семи 252, 256 — 252=4)

Специальные символы
\n — перенос строки
\t — символ табуляции
\\ — обратный слэш
\’ — одинарная ковычка
\» — двойная ковычка

Операторы сравнения:
> — больше
< — меньше
>= — больше либо равно
<= — меньше либо равно
== — равно
=== — точное равенство с учетом типа данных
!= — не равно

Логичекие операторы
|| — или
&& — и
! — не

Тернарный оператор
условие ? значение1 : значение22;

Алгоритм с условием:
— если — то
— если — то — иначе(else{})
— множественный выбор -иначе

switch (x) {case ‘значение’: break} — if (x === ‘значение1’)
if (условие) (действие или {несколько действий}) else{}
${name} — вывести значение переменной в тексте
Infinity — бесконечность путем деления на 0
NaN — нет ответа
** — возведение в степень
‘use strict’ — строгий режим
undefined — переменной не было присоенно значение
= — используется для присваивания значения переменной
alert — верхнее окошко
true — да
false — нет
parseInt — целые числа
parseFloat — дробные числа
window.onload — действие при полной загрузке страницы
parentNode — возвращение к родительскому блоку
Булевый тип имеет 2 значения: true (правда) false (ложь)
Любой текст заключенный в одинарные или двойные кавычки интерпретируется как строка
Дробные числа через «точку»
В js все обращение идет через точку к элементу DOM
Селекторы для id начинается с $

node -i — вызвать node.js вкомандной строке

browser-sync start —server —files «php/*.php,css/*.css,js/*.js,html/*.html,*.*» — запуск browser-sync

Способ ускорить верстку

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

1) SASS и сетку
2) GULP для компиляции. конкатенации сжатия и включения в html, а также AutoPrefixer и BrowserSync с его локальным сервером
3) GIT
4) Emmet
5) BEM (БЭМ)
6) Используйте gist от github
7) Мощная машина
8) Слепое печатание

Использовать ftp от sublime 3

Загружать сжатые сконкатимируемые стили и скрипты только для тех страниц, на которых они используются, желательно в саму страницу html

CSS

Интересные материалы.

https://caniuse.com — Проверка на кроссбраузерность
http://css.yoksel.ru — Фишки
https://csscompressor.com — Компрессор кода
http://nisnom.com — Библиотека анимаций
https://uigradients.com — Генератор градиента
http://grid.malven.co/ — css grid
https://www.fontsquirrel.com/tools/webfont-generator — форматирование шрифта в woff и woff2
https://transfonter.org/ — форматирование шрифта в woff и woff2
https://www.pngtosvg.com/

https://store.steampowered.com/hwsurvey/ — разрешения экранов steam

Разрешения по ширине || ширина сетки || название класса:

1280px || 1170px || h [huge]

1024px || 970px ||  b [big]

768px || 750px || m [medium]

320 — 375px  || 100% || s [small]

Ньюансы

Если буквы белым цветом и фон темным цветом, то лучше сделать заглушку background-color: #ddd. Зачем: если скорость интернета на устройстве низкая, то фон прогрузится не сразу и буквы будут видны сразу.

Справочник для верстальщика.

* {margin:0; padding:0;} — Сброс стилей
transform: rotateY(15deg); — Поворот по оси y на 180 градусов
letter-spacing: 1.6px; — Расстояние между буквами
overflow-wrap: break-word; — Перенос строк в скролле
:after :before — Доп элементы перед и после элемента
pointer-events: none; — Запрет перехода по ссылке
display: none — Исчезновение блока
input [type=submit]:hover — Изменение стиля при наведении
padding — Это пространство между содержимым внутреннего элемента и бордэром.
h1, p — Селекторы
bottom — Дно
top — Верх
link — Сылка
floats- Плавает
align — Выравнивать
width — Ширина
value — Значение атрибут в INPUT
opacity — Прозрачность задается в css значение от 0 до 1
background: rgba(0, 0, 0,  0.7); — Прозрачность без затрагивания внутренних элементов
z-index — Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
:first-child — Первый элемент и «last-child» — последний
box-shadow: 0px(горизонталь) 0px(вертикаль) 0px(размытие) #000; — Тени
border-radius: — Радиус закругления
display: block: — Преобразовать строчный элемент в блочный
border: 1px solid #fff; — Пример рамки
box-siring: border-box; — Высота без плюсования паддинга
line-heght: 1.3em; — Межстрочный интервал.
overflow: hidden; — Решение, когда элемент выходит за пределы блока и и появляется скрол
для прозрачности блока без элементов делай подложку
line-height: 60px; — Выравнивание текста в кнопке
@font-face{ font-family: ‘Intro’; src: url (‘../fonts/Intro.otf’); font-weight: normal; } — Подключение шрифта с сервера
width: 100vw;  — Ширина экрана
transform: rotate(45deg); — Повернуть элемент на 45 градусов
line-height — Расстояние между строчками
outline: none; — Без обводки элементы формы
list-style: none; — Убирает кружочки и цифры в списке
letter-spacing: 5px; — Расстояния между буквами
text-transform: uppercase; — Буквы в верхнем регистре
text-decoration: none; — Ссылка без подчеркиваний
font-weight: 700/400; — Жирность текста
no-repeat — Изображение не повторяется, свойство на фоне
text-indent: -300px; — Сдвинуть текст влево или вправо(+)
font: italic; — Шрифт курсивом
opacity — Прозрачность
a:hover — Ссылка при наведении
a:visited — Ссылка по которой уже проходили

Design

https://hotlog.ru/global/screen — популярные разрешения экранов

https://webkul.github.io/coolhue/ — Палитра и градиент
Freepik.com
Freebiesbug.com
365psd.com
Pixelbuddha.net/freebies
Design-hero.ru
Cssauthor.com
Morepsd.ru
psdrepo.com
materialpalette.com/ — Палитра
uplabs.com
fonts-online.ru — Шрифты
dribbble.com
theultralinx.com
flaticon.com — Иконки и векторные изображения

Маркетинг

«Узнай, сколько это стоит.  Бесплатная консультация от мастера»
«На все вопросы с радостью отвечу по телефону»
«У меня нет 33 директоров, которых я кормлю, поэтому у меня цены ниже рыночных»
«Немецкое качество»
«Остерегайтесь Мошеников и Фирм однодневок — используя более дешевый материал и давая сомнительную гарантию, могу предложить более низкую цену»

Не путай бизнес с ремеслом 

Есть одна мелочь, из-за которой предприятия закрываются в первый год. Уверен, что вас она не коснется, но всё же обратите внимание.

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

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

Ремесло — это когда человек работает на себя и сам выполняет ключевую работу на собственном предприятии.

Ни то ни другое — ни хорошо, ни плохо. Это просто разные пути, каждый

со своими ограничениями. И если их не осознавать, то можно быстро перегореть. Сейчас поясню на примере.

Допустим, есть Анна, она работает мастером ногтевого сервиса в салоне красоты. Ей достается 40% тех денег, что платят клиенты, — остальное забирает салон.

Что получаем?

Анна — НАЕМНЫЙ РАБОЧИЙ
Условия — Стоимость сеанса 1500 Р
Доля Анны — 40%
Нагрузка — 90 клиентов в месяц

Доходы:
— Гонорар за 1 сеанс 600 Р
— Гонорар в месяц 54 000 Р
— Прибыль (до налогов) 54 000 Р

Анна решает, что это несправедливо. Она делает всю работу, а получает меньше половины денег. Анна уходит из салона и становится вольным мастером: арендует кабинет, забирает клиентов и занимается ими самостоятельно. Постепенно она нанимает ассистента и бухгалтера. Но до тех пор, пока она САМА ЗАНИМАЕТСЯ КЛИЕНТАМИ, ОНА РЕМЕСЛЕННИК.

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

Что получаем?

Анна — РЕМЕСЛЕННИК
Условия — стоимость сеанса 1500 Р
Доля Анны — 100 %
Нагрузка — 90 клиентов в месяц

Доходы:
— Гонорар за 1 сеанс 1500 Р
— Гонорар в месяц 135 000 Р

Расходы:
— Ассистент, бухгалтер — 20 000 Р
— Помещение — 20 000 Р

Прибыль (до налогов) 95 000 Р

У заработка Анны есть предел. Его легко посчитать: например, Анна берет за сеанс 1500 Р и физически может провести не более 120 сеансов в месяц. Получается, порог выручки — 180 тысяч рублей в месяц, не считая расходов на помещение и ассистентов. Это круто для студента, но как доход предпринимателя это несерьезно. И это при полной занятости и адском режиме.

Еще один минус: Анна никогда не сможет остановиться. Она зарабатывает, только пока работает. Как только она уедет в отпуск, заболеет или перегорит, она перестанет зарабатывать.

Что получаем?

Анна — РЕМЕСЛЕННИК, ПОРОГ ЗАРАБОТКА 180 000 Р
Условия — Стоимость сеанса 1500 Р
Доля Анны — 100 %
Нагрузка — 120 клиентов в месяц

Доходы:
— Гонорар за 1 сеанс 1500 Р
— Гонорар в месяц 180 000 Р

Расходы:
— Ассистент, бухгалтер −20 000 Р
— Помещение −20 000 Р

Прибыль (до налогов) 140 000 Р

Бизнес

Чтобы Анне превратиться в предпринимателя, она должна сделать одно

действие: нанять вместо себя другого мастера. Теперь у Анны ОГРОМНОЕ количество проблем. Она начинает зависеть от нового мастера: а вдруг он не придет, заболеет, будет плохо работать, будет левачить, уводить клиентов? Анне придется его контролировать. Мастеру нужно будет платить — а как? Зарплату или сдельно за клиента? А сколько? А если в другом салоне ему предложат больше? А что, если мастер сам решит, что ему платят мало, и откроет свой салон? И это только начало. Поначалу Анна может зарабатывать меньше, чем В РЕМЕСЛЕННИЧЕСТВЕ. У нее будут все те же расходы, но еще она будет отдавать часть дохода новому мастеру. Ремесленники, как правило, получают больше, чем начинающие предприниматели. Но это только поначалу.

Анна — НАЧИНАЮЩИЙ ПРЕДПРИНИМАТЕЛЬ
Условия — Стоимость сеанса 1500 Р
Доля Анны — 40 %
Нагрузка — 90 занятий в месяц

Доходы:
— Выручка за 1 сеанс 1500 Р
— Выручка в месяц 135 000 Р

Расходы:
— Ассистент, бухгалтер −20 000 Р
— Помещение −20 000 Р
— Гонорар мастера −54 000 Р

Прибыль (до налогов) 41 000 Р

Когда Анна научится работать с одним мастером, она сможет нанять еще

одного, потом еще и еще. Теперь оборот ее салона ограничен не тем, сколько занятий Анна может провести, а тем, сколько она сможет привлечь мастеров и клиентов.

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

Анна — ПРЕДПРИНИМАТЕЛЬ
Условия — Стоимость сеанса 1500 Р
Гонорар наемного сотрудника — 40 %
Мастеров — 20
Нагрузка на мастера — 90 клиентов в месяц
Всего — 1800 клиентов в месяц

Доходы:
Выручка за 1 сеанс — 1500 Р
Выручка в месяц — 2 700 000 Р

Расходы
Бухгалтер — 50 000 Р
Менеджеры и др. — 200 000 Р
Помещения — 200 000 Р
Гонорары мастерам — 1 080 000 Р
Прибыль (до налогов) — 1 170 000 Р

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

Анна — ПРЕДПРИНИМАТЕЛЬ С 10 салонами
Условия — Стоимость сеанса 1500 Р
Гонорар наемного сотрудника — 40 %
Мастеров — 100 в 5 городах
Нагрузка на мастера — 90 занятий в месяц
Всего — 9000 клиентов в месяц

Доходы:
Выручка за 1 сеанс — 1500 Р
Выручка в месяц — 13 500 000 Р

Расходы:
Бухгалтер — 150 000 Р
Менеджеры и др. — 500 000 Р
Помещения — 500 000 Р
Гонорары мастерам — 5 400 000 Р
Прочие расходы — 2 000 000
Прибыль (до налогов) 4 950 000 Р

Будут и проблемы: сотрудники могут воровать, опаздывать на работу, уводить клиентов. Нужно будет платить налоги, взносы, зарплаты, проводить медосмотры, делать инструктажи по технике безопасности. Клиенты будут качать права в соцсетях. Могут быть удачные и неудачные проекты, сезонные колебания, профсоюзы и множество других интересных вещей. Всего этого в РЕМЕСЛЕННИЧЕСТВЕ нет. Идти ли по этому пути — вопрос личного выбора. Анне может быть совершенно комфортно работать вольным мастером и забирать 50—100 тысяч в месяц.

Как ошибаются

Главная ошибка — когда люди одновременно работают и над бизнесом, и внутри его.

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

Довольно быстро она понимает, что работа над бизнесом требует больше

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

Как надо: Анна должна снизить нагрузку от клиентов, чтобы у неё хватало времени для бизнеса. В первую очередь она должна работать над процессами, и уже потом — принимать своих клиентов. Это чуть ли не главное правило бизнесмена.

Сначала система, потом работа

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

И только потом можно заниматься своими делами.

Например, у Анны в салоне проблема: клиенты жалуются на какого-то мастера. Сравните, что делает в этой ситуации неопытный и опытный предприниматель.

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

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

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

НОВОЙ причине.

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

Стоит запомнить:
1. Можно быть ремесленником, можно — предпринимателем. Это не плохо и не хорошо, это просто разные стратегии.
2. Ремесленник — тот, кто работает внутри своего бизнеса. Зарабатывает больше наемника, но меньше предпринимателя. Зато он занят любимым делом.
3. Предприниматель — тот, кто строит систему бизнеса, но сам в ней не работает. Он нанимает других мастеров, чтобы они нормально работали, строит им систему, регламенты, систему контроля и т. д.
4. Ремесленничество масштабировать нельзя. Предпринимательство и бизнес-систему — можно.
5. Опытные предприниматели сначала строят систему, потом работают работу. Неопытные затыкают собой дыры в бизнесе.

P.s. Не важно бизнес у тебя или Ремесло, в любом случае тебе нужны клиенты. В феврале этого года, через ВК я продал продуктов на 2.2 млн. рублей. В конце этого месяца я планирую запустить курс, где подробно расскажу шаги, которые необходимо делать, чтобы монетизировать ВК. Однако я никак не могу придумать название))) Может у тебя есть идеи? Напиши ее в комментарии!)

P.s.s. Лучшая идея по названию курса получит лично от меня разбор группы ВК (с рекомендациями) или разбор личной страницы(если группы нет)

Всем добра!

Автор: неизвестен.