Pretor DH

1. Разметка:
   
   • пишу всегда вручную;
     
   • длинные селекты тянутся из базы посредством шаблонизатора (например серверного TWIG);
     
   • прописываю полностью с атрибутами валидации HTML5 (благо все современные браузеры потдерживают);
     
   • выдумывать JS-велосипеды для валидации не стоит уже давно;
     
   • для зависимых полей пока есть простой js-клаcс сверяющий их.
     
   • drag&drop файлов давно уже работает без JS;
     
   • для подгрузки изображений в страницу на стороне клиента js-класс.
     
   
   
2. Стили:
   
   • один раз прописаны стили для разных-форм на уровне тегов и взаимоотношений тегов (в итоге все формы на сайте виглядят в одном стиле);
     
   • класы только для самой формы, определяет как одна выводится: локально, модально или в теле контента;
     
   • кому сложно написать 300 строчек CSS, пользуйтесь фреймворками;
     
   • ни в коем случае не делайте стили форм для каждого раза как онные встречаются (придет дядя даст по рукам :) ).
     
   
   
3. Отправка:
   
   • пользуйтесь action, submit и target;
     
   • нужны данные как модальное окно есть iframe;
     
   • ajax с формами не использую он изначально предназначен для другого:
     
     • для подгрузки полей в селектор, но только если селектор очень большой;
       
     • для поиска налету.
       
     
     
   
   
4. Сервер:
   
   • использую специальный статический класс, который делает валидацию и XSS/injection-очистку;
     
   • как минимум PDO с подготовленными запросами;
     
   • Doctrine;
     
   
   
5. База-данных:
   
   • наименования полей в базе соответствуют наименованиям полей в формах (с префиксом);
     
   
   

.display {                               /* пропиши свои размеры */
       height:100px;                    /* высота раскрытого */
       max-height:50px;              /* высота скрытого */
   }
   .display:hover {
       max-height:100px;           /* опять высота раскрытого */
   }

$(".colors").on("click", ".CancelFramework" ,function(){
      $( '.colors' ).removeClass('colorBorder');
      $( 'div.color div' ).remove();
      $( 'div.color strong' ).remove();
      $( 'div.color' ).fadeOut(500);
      filterObj();
});

function getXmlHttp() {
    var xmlhttp;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            (typeof XMLHttpRequest != 'undefined') && (xmlhttp = new XMLHttpRequest() ) ||
            (typeof XDomainRequest != 'undefined') && (xmlhttp = new XDomainRequest() );
        }
    }

    return xmlhttp;
}

function getStrongText(value) {
  var str = 'Hello world hello123',
  regex = new RegExp(value, "gi");
  return str.replace(regex, '<strong>$&</strong>');
}	
console.log(getStrongText('Hello'));

function getStrongText(value) {
  var str = 'Hello, world hello123',
    pattern = "(\s|^)"+value+"(\W|\s|$)",
    regex = new RegExp(pattern, "gi");
    return str.replace(regex, "$1<strong>$2</strong>$3");   
}	
console.log( getStrongText('hello') );

<strong>$&</strong> все равно, что <strong>$1$2$3</strong>

/* Функция асинхронной загрузки хеадера */
function getHeader() {
  $.post('modules/constructor.php',     /* Аппелируем к серверному скрипту по указаному адресу */
      { 'action': "header", 'lang': lang },   /* Передаем параметры на сервер */
       function(data) {                            /* Callback - параметр анонимня функция. Вызывается при удачном запросе */
          $('div#header')                          /* Выбираем #header - но правильнее $('#header'), ибо 2 блока с одним id не правильно */
             .empty().append(data);           /* Очищает выбраный блок и дописывает к нему полученные данные */
       	}
      ).done(function() {                         /* Событие выполняется после удачного выполнения запроса */
        getFooter()                                 /* Вызов запроса Fotter */
      })
}

/* далее аналогично но для footer */
 
function getFooter() {
  $.post('modules/constructor.php',    
      { 'action': "footer", 'lang': lang },    
       function(data) {                            
          $('#footer').empty().append(data); 
       	}
      ).done(function() {
        getScriptHandF();              /* Здесь была синтаксическая ошибка: отсутствие замыкающего ";" */
        getContent(content)
      })
}
function getContent(cont) {
  $.post('modules/constructor.php', 
      { 'content': cont, 'lang': lang, 'device': devi },
       function(data) { 
          $('#content-wrapper').empty().append(data); 
       	}
      ).done(function() {

/* Далее человек питался сделать прелоадинг картинок. НО! */
/* Картинки уже начались загружатся после  выполнения
 колбеков из загрузок getContent, getHeader, getFoоter */
        var paths  = [];                  /* Готовим массив для прелоадинга картинок */
        var images = $('body').find('img');    /* Выбираем все картинки */
        images.each(function() {                  /* Пробегаемся по всем картинкам */
          paths.push($(this).attr('src'));          /* Записываем ссылку на картинку в масив */
        });
         
        preloadImages(paths, function () {   /* Вызывает preloadImages Описания процедуры нет */
          $("html,body").animate({"scrollTop":0},200);  /* Анимирует скроллинг если страница прокручена на верх страницы */
          $('#preload').fadeOut(1000);   /* Анимирует прозрачность кроющего блока #preload */
          getScript();                              /* Вызывает getScript */
          if (cont=="home") getSlider(); /* Вызывает getSlider если страница домашняя */
        });
      })
}

$('.owl-carousel').owlCarousel({
   /* здесь могут быть ваши параметры инициализации карусели */
    autoplay:false
});

$('div').click(function(){
    $('div').fadeOut(200)
});
$('div').click(function(){
    $(this).css({opacity: 0},function(){$(this).css({'display':'none'});})
});

<form method="get" id="delForm">
  <input id="dell" type="button" name="dell" value="Delete">
</form>

function checkButton()
{
  var hid = document.getElementById('hidden'); //Находим id всасывающегося окна
  var yes = document.getElementById('yes'); // id кнопки ДА
  var no = document.getElementById('no'); // id кнопки НЕТ
  
  yes.onclick  = function(e) //если будет нажата кнопка ДА
  {
    var frm = document.getElementById('delForm'); //Находим id формы
    this.onclick = null;
    hid.className = ''; // скрывается окно подтверждения
    frm.submit();  //// отправка на сервер происходит
    e.stopPropagation();
    e.preventDefault();
  };
  no.onclick = function(e) // Если будет нажата кнопка НЕТ
  {
    var hid = document.getElementById('hidden'); //Находим id всасывающегося окна
    this.onclick = null;
    hid.className = ''; //скрывается окно подтверждения
    // отправка на сервер не происходит
    e.stopPropagation();
    e.preventDefault();
  }

   // Oтображается окно подтверждения.
   hid.className = 'substrate';
}

window.onload = function(e)
{
  var myf = document.getElementById('dell');
  myf.onclick = checkButton; //Подписка на событие клика по кнопке УДАЛИТЬ
  e.stopPropagation();
  e.preventDefault();
}

.show-none{
  display:none;       /* просто прячем окно, а не задвигаем его в минуса */
}
.substrate{
...

var Var;
$.get(url + 'pages/read.json', {events: true} ,function(data) {
          Var = data
      }
  });

$.get(url + 'pages/read.json', {events: true} ,function(data) {
          window.Var = data;
      }
  });

MyObj = {Var:'Ответ от сервера не пришел!' // <- Сдесь можно вставить данные по-умолчанию}; 
$.get(url + 'pages/read.json', {events: true} ,function(data) {
          MyObj.Var = data;
      }
  });

$('a').css({border-bottom-color:'rgba(100,100,100, 0 или 1)'});

a{
   font-family: 'Open Sans', sans-serif;
   font-weight: 500;
   font-size: 14pt;
   letter-spacing: 1px;
   color: #fff;
   border-bottom: 2px solid rgba(100,100,100, .1);  /*  .1 (90% прозрачности), 0 будет прозрачным */
   &:hover{
      border-bottom-color: rgba(100,100,100, 1);  /*  1 (0% прозрачности), 0 будет прозрачным */
   }
}

<html>
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="materialPreloader.js"></script>
<link rel="stylesheet" type="text/css" href="css/materialPreloader.css"> 
<script type="text/javascript">
jQuery(document).ready(function($) {
    preloader = new $.materialPreloader({
        position: 'top',
        height: '5px',
        col_1: '#159756',
        col_2: '#da4733',
        col_3: '#3b78e7',
        col_4: '#fdba2c',
        fadeIn: 200,
        fadeOut: 200
    });
    $(window).on('load', function(){console.log('BlaBla'); preloader && preloader.off();});
    preloader.on();
    setTimeout(preloader.off,9000);
});
</script>