Git

Git 

https://www.atlassian.com/git/tutorials/syncing/git-remote

git config –global core.editor /usr/bin/vim

Ω 

git config –global user.name “Your Name”

git config –global user.email “your_email@whatever.com”

Create a repository

git init

Add the page to the repository

git add hello.html

git commit -m “First Commit”

-m flag gives a comment on the command line

Check the status of the repository

git status

Adding changes or undo 

git add git add .(add all) or git checkout or git unstage

git status

Staging and committing

git commit -m “cimment fot commit”

History

git log

git log —-pretty=oneline

git log —-all —-pretty=format: “%h %cd %s (%an)” —-since=‘7 days ago’

Aliases

Add the following to the .gitconfig file in your $HOME directory.

[alias]

  co = checkout

  ci = commit

  st = status

  br = branch

  hist = log –pretty=format:\”%h %ad | %s%d [%an]\” –graph –date=short

  type = cat-file -t

  dump = cat-file -p

alias gs=’git status ‘

alias ga=’git add ‘

alias gb=’git branch ‘

alias gc=’git commit’

alias gd=’git diff’

alias go=’git checkout ‘

alias gk=’gitk –all&’

alias gx=’gitx –all’

alias got=’git ‘

alias get=’git ‘

Cloning repository

git clone (ssh or urli repo)

git add .

git commit -m “First commit”

git push origin master

.gitignore – файл с шаблонами игнорируемых файлов

git diff – 

https://git-scm.com/book/ru/v1/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B-Git-%D0%97%D0%B0%D0%BF%D0%B8%D1%81%D1%8C-%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B9-%D0%B2-%D1%80%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%B9

git clean  -d  -fx “”

http://www.kernel.org/pub/software/scm/git/docs/git-clean.html

-x means ignored files are also removed as well as files unknown to git.

-d means remove untracked directories in addition to untracked files.

-f is required to force it to run.

git checkout . – unstage all files

Gulp

Gulp

http://habrahabr.ru/post/250569/ – приятная сборка front-end

http://habrahabr.ru/post/259225/ – ловим ошибки правильно

New projects

npm init

npm install --save-dev gulp-plumber - ошибки

npm install --save-dev gulp-autoprefixer

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

npm install --save-dev browser-sync

npm install --save-dev gulp-imagemin

npm install --save imagemin-pngquant

npm install --save-dev gulp-uglify

npm install gulp-sass --save-dev

npm install --save-dev gulp-rigger - include //= footer.html

npm install --save-dev gulp-watch

npm install rimraf

npm install -g bower

bower init

чат в админке WP

source map - размер файла

 

MCS 1 Урок

Программа урока от гуру JS Антона Шувалова (moscoding.ru)

 

Знакомство с языком и история создания (статья откровение –комментарии от создателя)
Место JavaScript среди других ЯП и зачем его надо изучать
— Консоль/REPL — самый простой способ попробовать язык (Как запустить консоль в браузере)
— Синтаксис и грамматика JavaScript
— Типы данных и операторы

Screen Shot 2015-12-12 at 5.47.30 PM

Лучший учебник по JS в ru коммьюнити

 

Основы от классного парня из интернета – Sorax

По первому уроку – с первого по восьмое видео

http://www.youtube.com/playlist?list=PL363QX7S8MfSxcHzvkNEqMYbOyhLeWwem

Очень полезное, как браузер парсит код – как его следует читать

 

 

Основы от интернет сообщества LoftBlog 

с первого по десятый выпуск

Тестовое задание

See the Pen http://codepen.io/A8H333/pen/aveQpE/‘>aveQpE by Shuvalov Anton (http://codepen.io/A8H333‘>@A8H333) on http://codepen.io‘>CodePen.0

 

Онлайн курсы JS

Treehouse School

Codeacademy

 

Онлайн сообщества начинающих FrontEnd-еров на Youtube

uWebDesign

loftblog

 

ВК сообщества

http://vk.com/designlog

http://vk.com/webtackles

http://vk.com/forwebdev

http://vk.com/uwebdesign

 

Что читаю

Карманный справочник JavaScript Д. Фленаган 2015 г.

 


 

И еще мы съли по такому вот классному бургеру “Брянский парнеь” в кафе Фарш с Денисом.

ce9ac7b9a7c24edf8333bfbadbd04aba

Search form

WP Codex

<?php get_search_form( $echo ); ?>

Display search form using searchform.php Theme file.

Default HTML5 Form

Since WordPress 3.6, If your theme supports HTML5 Markup, which happens if it uses:

add_theme_support( 'html5', array( 'search-form' ) );

WordPress will render its built-in HTML5 search form:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
  </label>
  <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

Example of a custom searchform.php:

<form action="/" method="get">
  <label for="search">Search in <?php echo home_url( '/' ); ?></label>
  <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
  <input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" />
</form>

For example by only showing posts in the search results. This can be done with the next addition to the form above:

<input type="hidden" value="post" name="post_type" id="post_type" />

Here we submit the value post. The default value is any, meaning, posts, pages and custom post types. With the input above added to the form it will now only search in posts with the post_type post. There are many additions like this. With a var_dump of the object $wp_query you can see all the default values of the search variables. With a var_dump of $wp_query->query you can see the current query.

A last option is to write a custom function (in your functions.php file) and hook that function to the get_search_form action hook.

function my_search_form( $form ) {
  $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
  <div><label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
  <input type="text" value="' . get_search_query() . '" name="s" id="s" />
  <input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
  </div>
  </form>';

  return $form;
}

add_filter( 'get_search_form', 'my_search_form' );

 

 

Form

Base form set

<form action="index.html" method="post"> //create form action index.html method post
    <h1>About form</h1>
    //Fieldset form section
    <fieldset>
        //legend label for fieldset
        <legend>Main information</legend>

        //label name for input with id name
        <label for="name">Name:</label>
        //text input
        <input type="text" id="name" name="user_name">

        <label for="email">Email:</label>
        //email input
        <input type="email" id="email" name="user_email">

        <label for="password">Password:</label>
        //password input
        <input type="password" id="password" name="user_password">

    </fieldset>

    <fieldset>
        <legend>About</legend>
        <label for="bio">Biography</label>
        <textarea name="bio" id="bio"></textarea>
    </fieldset>


    <label for="job">Job role:</label>
    <select name="user_job" id="job">
        <optgroup label="Web">
            <option value="frontend_developer">Frontend developer</option>
            <option value="php_developer">PHP developer</option>
        </optgroup>
        <optgroup label="mobile">
            <option value="android_developer">Android developer</option>
            <option value="ios_deveoper">iOS developer</option>
        </optgroup>
    </select>

<label>Age:</label>
<input type="radio" id="under_13" value="under_13" name="user_age"><label for="under_13">Under 13</label><br>
<input type="radio" id="over_13" value="over_13" name="user_age"><label for="over_13>Over 13</label>

<label>Interests:</label>
<input type="checkbox" id="development" value="interest_development name="user_interest"><label for="development"><meta charset='utf-8'><pre class="enlighterjsraw" data-enlighter-language="html">Development</label><br>
<input type="checkbox" id="business" value="interest_business" name="user_interest"><label for="business">Business</label><br>

    // button with type submit, another option for backend type="button", and type="reset"
    <button type="submit">Sign Up</button>
</form>

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

HTML форма состоит из одного или нескольких виджетов.

  • text field (одна или несколько строк)
  • select boxes
  • buttons
  • checkboxes
  • radio buttons

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

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

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

Дизайн формы

 

form design

в этой форме три поля и одна кнопка. Обычно запрашивается имя пользователя, почта и текст сообщения. HTML дескрипторы – <form>, <label>, <input>, <textarea> и <button>.

<form> – элемент
<form action="/my-handling-form-page" method="post">

</form>

Этот элемент объявляет форму и является контейнером для формы. Атрибуты указывать необязательно, но лучше всегда прописывать action (URL куда отправится полученная через форму информация) и method (указывает какой html метод используется при отправке get или post).

В нашей форме всего три текстовых поля, и у каждого есть свой <label>.  Поле Имя – базовый input с типом text; поле для почты – input с типом  email, позволяющий ввести только адрес почты – статья о валидации; поле для сообщения – многострочный текстовый тип.

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
</form>

Блоки div  помогают структурировать код и помогут при написании стилей CSS. Для привязки label к виджету используется атрибут for, ссылаясь на id родительского.  Одна из основных функций label – пользователь может кликнуть на лейбл и активировать родительский виджет. Статья – Как организовать HTML структуру формы.

Основной атрибуд для виджета input – type, от которого зависит, как будет себя вести input. Статья о виджетах формы.

атрибут value

<input type="text" value="этот текст будет отображаться по умолчанию" />
<textarea>этот текст будет отображаться по умолчанию</textarea>

button 

<div class="button">
        <button type="submit">отправить сообщение</button>
</div>

У кнопки может быть три типа:

  • submit – отправляет информацию из формы по объявленному пути в form action.
  • reset – сбрасывает все поля формы в стартовое значение value
  • button – используется для создания кнопок управляемых при помощи JS

 

Cheсkbox

  1. autocomplete (on/off разрешает автозаполнение браузером)
  2. checked (делает кнопку активной)
  3. list ()
  4. readonly
  5. value

 

See the Pen vLOQQW by Alexander Dolgan (@AlexanderDolgan) on CodePen.0

 

MDN – Forms

htmlacademy

Шпаргалка блогера

Циклы

IF

X ? Y : Z

SWITCH

WHILE

Оператор цикла While называется оператором цикла с предусловием.

Синтаксис

while (условие)
{
   операторы;
}

При входе в цикл выполняется условие, если его значение TRUE, выполняется тело цикла.

<?php 
  $do_while = TRUE;
  $i = 1;
  while($do_while)
  {
    echo $i."<br>";
    $i++;
    //условие выхода из цикла
    if ($i >5) $do_while = FALSE;
  }
?>

 

Тело цикла выполняется до тех пор, пока флаг $do_while не примет значение FALSE.

break – переводит текущий поток программы на первый оператор после цикла while. Так же можно передать номер (по умолчанию 1) к которому из циклов относится break.

continue – досрочно прекращает текущую итерацию.

<?php 
  $i = 0;
  while (TRUE)
  {
    $i++;
    //Досрочно прекращаем текущую итерацию
    if ($i < 4) continue;
    //Условие выхода из цикла
    if ($i > 5) break;
    echo $i.<br>;
  }
?>

Использование оператора декремента совместно с циклом while

<?php 
  $number = 5;
  while(--$number)
  {
    echo $number.<br>;
  }
?>

<?php 
  $number = 5;
  while($number--)
  {
    echo $number.<br>;
  }
?>

Альтернативный синтаксис оператора while

<?php 
  $number = 5;
  while ($number--) 
    echo $number.<br>;
  endwhile;
?>

 

DO WHILE

FOR

 

Ресурсы использованные для статьи

PHP 5/6 Наиболее полное руководство М. Кузнецов, И. Симдянов