Photoshop

Положение Ваших рук: правая на мыше, левая на левой части клавиатуры: указательный на Tab, большим покрываем Alt и Пробел.

Ctrl +R -включить линейку

Ctrl +D убрать выделение

Ctrl + H Показать и скрыть сетку, направляющие, габариты трансформации, нарезку

shift- ctrl- E -объеденить в 1 слой

F12 – восстановить макет в том виде, в котором он сейчас сохранен на диске

Ориентация по доку

Tab – показать или скрыть все панели.

Зажать Пробел, «схватить» мышью за документ и перетаскивать – перемещение в рамках масштаба. Зажатие кнопки временно активирует инструмент Hand Tool.

Ctrl + 1 – установка масштаба 100 %.

Зажать H, зажать левую кнопку мыши – документ масштабируется так, чтоб был виден целиком, можно перетащить рамку (Вы держите левую кнопку нажатой, просто тащите мыша) в любое место и отпустить – окажитесь в этой области с тем масштабом, который был ранее. АРХИудобно для перемещения по увеличенному документу! Почти как зажатие Пробел, но быстрее при перемещении на «большие» расстояния.

Зажать Alt, крутить колесо мыша – масштабирование в обе стороны.

Выбор слоёв

Зажать Ctrl и кликнуть на слой

Alt + клик по иконке «глаз» в панели слоёв – показать только один какой‑либо слой, прочее скрыть.

Нарезка

Image→Trim Обрезаем прозрачные области картинки и однотонные области

Image→Canvas size : стаим ширину 1 px для градиентов

Layer» → «New Layer Based Slice», — которая создаёт слайс по границам выделенного слоя, для теней, свечений

 

Большие фотографические (многоцветные) изображения – JPEG, качество 60‒95.

Малюсенькие картинки, вписывающиеся в 256 цветов, не нужна полупрозрачность или она бинарная – PNG‑8.

Любые картинки где нужна полупрозрачность или отсутствие искажений – PNG‑24

#page>div.logo+ul#navigation>li*5>a[href="#"]{Item $}^^footer

Emmet

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
		<li><a href="#">Item 5</a></li>
	</ul>
	<footer></footer>
</div>

lorem100 will generate a 100-words dummy text.

cheat sheet

GIT

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

документация

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

есть три части: каталог Git'а (Git directory), рабочий каталог (working directory) и область подготовленных файлов (staging area).

Каталог Git'а — место, где Git хранит метаданные и базу данных объектов вашего проекта.

Рабочий каталог — это извлечённая из базы копия определённой версии проекта. Эти файлы достаются из сжатой базы данных в каталоге Git'а и помещаются на диск для того, чтобы вы их просматривали и редактировали.

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

Стандартный рабочий процесс:

  1. Вы вносите изменения в файлы в своём рабочем каталоге.
  2. Подготавливаете файлы, добавляя их слепки в область подготовленных файлов.
  3. Делаете коммит, который берёт подготовленные файлы из индекса и помещает их в каталог Git'а на постоянное хранение.

извлечь (fetch) всю информацию, которая есть в репозитории Павла, но нет в вашем, вы можете выполнить git fetch [имя удал. сервера].  команда fetch забирает данные в ваш локальный репозиторий, но не сливает их с какими-либо вашими наработками и не модифицирует то, над чем вы работаете в данный момент.

 Выполнение git pull, как правило, извлекает (fetch) данные с сервера, с которого вы изначально склонировали, и автоматически пытается слить (merge) их с кодом, над которым вы в данный момент работаете.

отправить (push) их в главный репозиторий. Команда для этого действия простая: git push [удал. сервер] [ветка]. 

cd d:/test

git init | clone
git status
git add --all | "*.txt"
git reset  [file]  unstage a file while retaining the changes in working directory
git diff diff of what is changed but not staged
git diff --staged diff of what is staged but not yet commited

git commit -m "first commit"
git log | log --summary | log -p (diff)
git checkout -- <file>..." to discard changes in working director

git remote add origin(name) https://github.com/a-shemetillo/hello-world.git
git push -u origin master ( u запоминает параметры, в след. раз можно просто push)
git pull origin master скачивает изменения
git diff HEAD (head - last commits)

git branch [branch-name] create a new branch at the current commit
git checkout switch to another branch and check it out into your working directory
$ git checkout -b iss53 create and switch
$ git branch -d hotfix delete branch
git merge [branch] merge the specified branch’s history into the current one
git commit -am "Delete stuff"  auto removes deleted files with the commit.

Оптимизация img

https://tinypng.com/

Большие фотографические (многоцветные) изображения – JPEG, качество 60‒95.

Малюсенькие картинки, вписывающиеся в 256 цветов, не нужна полупрозрачность или она бинарная – PNG‑8.

Любые картинки где нужна полупрозрачность или отсутствие искажений – PNG‑24

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

SVG - svgo.

check

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

Векторная графика - это, как правило, логотипы и штриховые рисунки. Представляет собой серию кривых, линий, фигур и цветов закраски. Векторные изображения создаются с помощью таких программ, как Adobe Illustrator или Inkscape, и сохраняются в формате SVG. Они состоят из простых элементов, поэтому их можно масштабировать без потери качества. Размер файла также остается прежним.

  • Выбирайте изображения в векторных форматах. Их качество не зависит от разрешения и масштаба, поэтому они подходят для больших экранов и разных типов устройств.
  • Минифицируйте и сжимайте SVG-ресурсы. Многие графические приложения добавляют XML-разметку, которая часто содержит ненужные метаданные. Ее можно удалить. Убедитесь, что на серверах настроено GZIP-сжатие для SVG-ресурсов.
  • Выбирайте наиболее подходящие растровые форматы. Определите необходимые требования к изображениям и выберите нужный формат для каждого ресурса.
  • Пробуйте разные настройки качеств для растровых форматов. Не бойтесь снижать качество: часто изображение по-прежнему хорошо выглядит, а размер файла становится значительно меньше.
  • Удаляйте ненужные метаданные. Многие растровые изображения содержат лишнюю информацию о ресурсе: геоданные, сведения о камере и т. д. Для их удаления используйте соответствующие инструменты.
  • Масштабируйте изображения. Уменьшайте файлы на сервере, чтобы исходный и отображаемый размеры были практически одинаковы. Обратите особое внимание на большие изображения. Если их масштабирует браузер, производительность вашего сайта значительно снижается.
  • Автоматизируйте. Используйте надежные инструменты и ПО, которые будут автоматически оптимизировать изображения на вашем сайте.

Подключение шрифтов

@font-face { 
  font-family: 'Web font'; 
  src: url('webfont.woff2') format('woff2'), 
       url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
       url('webfont.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal; 
}

@font-face { 
  font-family: 'Web font';       /* название одно */ 
  src: url('webfont8321.woff2'); /* разные файлы */ 
  font-weight: 400;              /* разная плотность */ 
  font-style: normal; 
} 

@font-face { 
  font-family: 'Web font';       /* название одно */ 
  src: url('webfont___1.woff2'); /* разные файлы */ 
  font-weight: 700;              /* разная плотность */ 
  font-style: normal; 
}

Cпрайты

Использование одного фонового изображения для нескольких элементов.

Цель состоит в том, чтобы сократить число HTTP-запросов, сделанных с использованием нескольких фоновых изображений.

http://www.spritecow.com/

Chrome dev tools

Консоль Очень полезная кнопка, открывает тут же консоль для запуска команд. Можно смотреть код и тут же запускать функции. Её нажатие можно заменить на клавишу Esc.

  1. Watch Expressions – показывает текущие значения любых выражений.

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

  2. Call Stack – стек вызовов, все вложенные вызовы, которые привели к текущему месту кода.

    На текущий момент видно, отладчик находится в функции pow (pow.js, строка 6), вызванной из анонимного кода (index.html, строка 13).

  3. Scope Variables – переменные.

    В Local показываются переменные функции: объявленные через var и параметры. Вы также можете там видеть ключевое слово this, если вы не знаете, что это такое – ничего страшного, мы это обсудим позже, в следующих главах учебника.

    В Global – глобальные переменные и функции.

read

debugger; - а-ля брейкопинт

 продолжить выполнение, горячая клавиша F8. Продолжает выполнения скрипта с текущего момента в обычном режиме. Если скрипт не встретит новых точек останова, то в отладчик управление больше не вернётся.

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

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

 – выполнять до выхода из текущей функции, горячая клавиша Shift+F11.Выполняет команды до завершения текущей функции.Эта кнопка очень удобна в случае, если мы нечаянно вошли во вложенный вызов, который нам не интересен – чтобы быстро из него выйти.

 – отключить/включить все точки останова.Эта кнопка никак не двигает нас по коду, она позволяет временно отключить все точки останова в файле.

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

  • Right-click in the Console and press Clear console.
  • Type clear() in the Console.
  • Call console.clear() from within your JavaScript code.
  • Type Ctrl+L (Mac, Windows, Linux).

Right-click on a line number that does not already have a breakpoint and press Add conditional breakpoint to create a conditional breakpoint. If you've already added a breakpoint on a line of code and you want to make that breakpoint conditional, right-click and press Edit breakpoint.

  • Subtree modifications. Triggered when a child of the currently-selected node is removed, added, or the contents of a child are changed. Not triggered on child node attribute changes, or on any changes to the currently-selected node.

  • Attributes modifications: Triggered when an attribute is added or removed on the currently selected node, or when an attribute value changes.

  • Node Removal: Triggered when the currently-selected node is removed.

Set a breakpoint on DOM change

Right-click on a node, hover over Break on, and select one of the options.

Text

Tools

By Anastasia Shemetillo

Made with Slides.com

Tools

  • 120

More from Anastasia Shemetillo