Введение В  статье мы рассмотрим бесплатные инструменты для редактирования изображений, выбора цветов и шрифтов, работы с CSS, FTP и другие полезные сервисы. Благодаря их использованию дизайн Вашего веб-ресурса станет интереснее и привлекательнее. Pixlr Pixlr – мощное приложение для онлайн редактирования изображений. Оно проигрывает в функциональности Photoshop-у, но некоторые функции Pixlr впечатляют. Typetester Typetester – интерактивный сервис сравнения шрифтов. Он значительно облегчает подбор шрифтов веб-дизайнеру.  CSS Type Set CSS Type Set дает Вам возможность работать с текстом в интерактивном режиме и превращать его в CSS. net2ftp net2ftp – полнофункциональный FTP-клиент в браузере. Подходит также для iPhone. WhatTheFont WhatTheFont определяет шрифт по картинке или URL. Color Scheme Designer Color Scheme Designer недавно был обновлен. Разработан новый дизайн и система определения цветовой схемы. Fontstruct С FontStruct можно создавать уникальные шрифты из геометрических форм, расположенных в сетке. Kuler Kuler позволяет просматривать цветовые палитры, созданные другими пользователями. Можно также создать свою собственную палитру, используя цветовое колесо и цветовые ползунки. W3C Markup Validation Service The Markup Validator – бесплатный сервис по W3C. С его помощью можно проверить XHTML и CSS валидность веб-документов. ViewLikeUs ViewLikeUs позволяет проверить, как Ваш сайт выглядит в распространенных форматах разрешения.  ColoRotate Веселый сервис выбора цвета. Pingdom Tools Инструменты PingDom позволяют запускать тесты времени загрузки на веб-страницах. Они имитируют загрузку страницы в веб-браузере. Визуально показано время загрузки каждого объекта. Список объектов можно просмотреть или в порядке загрузки, или в виде визуальной иерархии. Источник: http://webdesignledger.com/tools/15-free-online-tools-for-web-designers-on-a-budget

Введение Многие начинающие разработчики при создании своих проектов не задумываются о такой вещи, как создание журнала события. Мол, проект у меня нормальный, и так сойдет. Но не забываем, что наше приложение мы пишем не для себя самих, а для клиента. Всем нужна статистика и слежение за проектами. Итак, что же насчет логирования, так это процесс записи всех сведений о проекте, а именно: информации о работе тех или иных элементах приложения, предупреждение о критической нагрузке, всяческие ошибки и т.д. Для .NET приложений был разработан очень удобный фреймворк под название NLog, с его помощью можно вести учет о состоянии всего приложения. Есть поддержка записи в файл, в базу данных. Настройка данной платформы очень удобна и легка, есть два способа: через конфигурационный файл; через конфигурационный объект LoggingConfiguration; Первый способ самый простой, так как зондирование проекта уже встроено в саму библиотеку NLog. Вся работа основа на объекте Logger – парне, который занимается ведением учета состояния нашего проекта. Для того чтобы продемонстрировать работу NLog, создадим проект по шаблону консольного приложения и назовем его NLogUnderstanding. Изначально наш проект выглядит следующим образом: using System; namespace NLogUnderstanding {     class Program     {         static void Main(string[] args)         {                          }     } } Чтобы начать работу данного фреймворка в нашем проекте, нужно установить следующие библиотеки через Package Manager Console (или же через сам менеджер расширений):  После установки NLog выбираем подход, по которому будем строить процесс слежения за состоянием приложение.  Настройка через конфигурационный файл: Первое, что нужно сделать- это установить данный пакет: После это у нас в проекте появится указанный файлик NLog.config: Начальное содержимое файла выглядеть будет примерно так: xml version="1.0" encoding="utf-8" ?> <nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">   <targets>     targets>   <rules>     rules> nlog> Все, после того как мы подготовили данную библиотеку, начинаем настройку объекта Logger. Первое, что мы должны сделать, это указать ему, куда мы будем писать те или иные сообщения. Все эти файлы указываются в разделе <targets>. Первое, что мы добавим, так это все возможные записи, которые мы сможем проводить:   <targets>     <target xsi:type="File" name="file" fileName="${basedir}/logs/${shortdate}.log"             layout="${longdate} | ${uppercase:${level}} | ${logger} | ${message}" />   targets> Шесть возможных вариантов ведения учета: Информация о состоянии элементов; Информация, запущенная в режиме debug для отладки проекта (можно применять в тестах); Всяческие предупреждения (например, связанные с нагрузкой); Информация об исключениях; Информация об ошибках, которые привели к критическому завершению приложения. Для каждого сообщения присутствует свой метод все в том же объекте Logger, который мы чуть позже будем разбирать. Основные атрибуты, которые нужно заполнить, это: name – название файла, нам оно понадобиться для организации правил, по которым мы будем писать именно в этот файл; fileName – указываем файл и путь к файлу, в который будем писать наши логи; layout – шаблон, по которому будет заполнятся наш файл. Как Вы уже заметили,  заполнение значений атрибутов ведется в характерной манере регулярных выражений. То есть, мы используем заранее подготовленные в библиотеке маркеры подстановки для ведения учета наших сообщений в разные файлы. Основные, которые мы использовали, это: ${basedir} – вернет базовую директорию вашего приложения. При компиляции этот маркер вернет изначальный путь (папку bin); ${shortdate} / ${longdate} – маркеры подстановки устанавливают текущую дату и время в зависимости от маркера (полную дату и время или же только дату); ${uppercase:${level}} – интересное использование вложения маркеров. Как Вы поняли, маркер ${level} будет указываться уровень сообщения (мы их перечислили ранее), приводим в верхний регистр; ${message} – под данный маркер подставляется сообщение, указанное в аргументных скобках методов (об этом далее); ${logger} – название класса, от которого поступило сообщение. После настройки целей для записи наших сообщений мы приступаем к организации правил, по которым будем заполнять наши файлы:   <rules>     <logger name="*" minlevel="Trace" writeTo="file" />   rules> Тут все намного проще, единственное, что нужно заполнить - это основные атрибуты, т.к. minlevel (минимальный уровень заполнения файла, имя которого указанного в атрибуте writeTo). После того как настроили конфигурационный файл, приступаем к работе с проектом и нашим Logger. Первое, что нужно - это создать экземпляр Logger. Это можно сделать двумя способами: Создать через первый фабричный метод LogManager.GetLogger("Example"), в аргументах указываем название логгера, менее эффективный способ, т.к. всегда нужно указывать название класса, в котором происходит запись в журнал; Создание через второй фабричный метод LogManager.GetCurrentClassLogger(), пользуясь данным методом, мы предоставляем возможность экземпляру логгера самому узнать полное квалификационное название класса, в котором произошла запись в журнал. Теперь привнесем изменения в наш созданный проект: using System; using NLog; namespace NLogUnderstanding {     class Program     {         static void Main()         {             Logger logger = LogManager.GetCurrentClassLogger();               log.Trace("trace message");             log.Debug("debug message");             log.Info("info message");             log.Warn("warn message");             log.Error("error message");             log.Fatal("fatal message");         }     } } После компиляции проекта у нас создается файл с текущей датой и в него внесутся следующий записи: 2015-05-06 14:33:46.0911 | TRACE | NLogUnderstanding.Program | trace message 2015-05-06 14:33:46.1380 | DEBUG | NLogUnderstanding.Program | debug message 2015-05-06 14:33:46.1380 | INFO | NLogUnderstanding.Program | info message 2015-05-06 14:33:46.1536 | WARN | NLogUnderstanding.Program | warn message 2015-05-06 14:33:46.1536 | ERROR | NLogUnderstanding.Program | error message 2015-05-06 14:33:46.1693 | FATAL | NLogUnderstanding.Program | fatal message Теперь можно приступать к внедрению NLog в Ваш проект, и отслеживать состояние ваших объектов. P.S. Если вы планируете применять слежение за состоянием вашего проекта, то экземпляр логгера нужно будет создавать в нужных для отладки классах. В следующей части я опишу, как применять логгирование в веб проектах на основе ASP.NET MVC.

Введение В первые годы после появления мобильных устройств их отладка была настоящей проблемой. Несомненно, Вы можете взять устройство и выполнить визуальную оценку его работы, но что Вы сделаете после обнаружения ошибки? Из-за отсутствия средств отладки разработчикам приходилось использовать разные виды хаков и взломов. В целом, эти взломы были попыткой воссоздать определенную проблему в настольном браузере и затем отладить с Chrome Developer Tools или подобными настольными инструментами. Разработчик, таким образом, получает возможность уменьшить окно браузера компьютера для тестирования, быстро реагирующего веб-сайта или изменения «Пользовательского агента» (User Agent), чтобы имитировать определенное мобильное устройство. Но эти взломы не работают. Воссоздание проблемы на рабочем столе не гарантирует корректную работу всех ваших исправлений. Более того, Вам придется постоянно перемещаться между браузером компьютера и мобильным устройством. Эмуляторы и средства моделирования Конечно, тестирование на реальных устройствах удобное и надежное. Но также необходимо проводить тест на эмуляторах и симуляторах. Такое тестирование позволяет расширить набор устройств, на которых Вы можете провести испытание, а также быстро и легко проверить работу программы после внесения небольших изменений. СРЕДСТВО МОДЕЛИРОВАНИЯ IOS Существует много способов тестирования устройств на iOS (iPhone или iPad). Из них основной – Apple iOS Simulator (официальный). Как часть XCode, это средство моделирования позволяет Вам провести тест с помощью комбинаций программного аппаратного обеспечения, но исключительно на Mac.   Сначала установите и откройте Xcode. После щелкните правой кнопкой и нажмите “Show Package Contents”. Перейдите к “Contents” → “Applications” → “iPhone Simulator”. Средство моделирования iOS сложно найти, но оно простое в использовании. Откройте Safari в средстве моделирования и протестируйте свой веб-сайт. Вы можете переключиться между разными iPhone и iPad устройствами, повернуть область просмотра, изменить версию iOS.. Примечание: тем, кто не использует Mac в работе, лучше найти другую опцию. Вы можете обратиться к iPadian, симулятору iPad на базе Windows. Кроме того, существует ряд других средств моделирования, например, определенные веб-предложения. Но все они не очень перспективны. ЭМУЛЯТОР ANDROID Существует также эмулятор Android. Он кроссплатформенный. Но, к сожалению, установка его достаточно непростая. Сначала загрузите пакет, включающий Android Development Tools (ADT) для Eclipse и Android software development kit (SDK). После следуйте инструкциям Google, чтобы установить пакеты SDK, проверьте и установите настройки по умолчанию, а потом установите “Intel x86 Emulator Accelerator (HAXM installer)”. Вам нужно будет также установить HAXM (IntelHaxm.dmg на Mac и IntelHaxm.exe на PC). Создайте Android virtual device (AVD) для устройства, которое тестируете. Если Вы откроете менеджер AVD, увидите список предварительно установленных устройств в “Device Definitions”. Выберите одну из этих предварительных установок и кликните по “Create AVD” для того, чтобы начать. Установите любой CPU и установите “No skin“ и “Use host GPU”. Далее, у Вас есть возможность запустить виртуальное устройство, а также использовать браузер Android для испытания веб-сайта. Наконец, Вы, вероятно, захотите узнать некоторые команды клавиатуры, чтобы облегчить работу с эмулятором. Примечание: Manymo – альтернативный эмулятор Android в браузере. Вы можете встроить Manymo в веб-страницу. ДРУГИЕ СРЕДСТВА МОДЕЛИРОВАНИЯ И ЭМУЛЯТОРЫ: Средства моделирования BlackBerry Эмулятор Windows Phone для Windows 8 Эмулятор Opera Mini УДАЛЕННОЕ ТЕСТИРОВАНИЕ Невозможно быть уверенными в точности теста, если Вы используете только эмуляторы и симуляторы. Всегда тестируйте на как можно большем количестве реальных устройств. Конечно, Вы не должны покупать огромное количество телефонов и планшетов. Вы можете использовать удаленные ресурсы тестирования, обеспечивающие веб-интерфейс, чтобы взаимодействовать с реальными устройствами. Вы сможете работать с телефоном удаленно, наблюдая любые изменения на экране. Если Вы хотите протестировать устройство Samsung, например, Galaxy S5, советуем воспользоваться бесплатно Samsung Remote Test Lab. Так Вы получите возможность протестировать Ваш продукт на устройствах Samsung. Кроме того, советуем Вам использовать Keynote Mobile Testing. Данные ресурсы предоставляют возможность испытать продукт на большем числе устройств. Они недешевые, но доступ к ряду устройств бесплатный. Примечание: если Вы надеетесь доставать реальные устройства, Open Device Lab может указать для Вас список ближайших лабораторий для тестирования. Удаленная отладка Удаленная отладка сталкивается с множеством проблем, связанных с мобильной отладкой. Как Вы сможете получить значимую отладочную информацию от маленького и относительно недостаточно мощного устройства? Удаленные средства отладки обеспечивают соединение настольного компьютера с мобильным устройством. Так Вы можете отладить мобильное устройство, используя средства разработки на настольной машине, которая, несомненно, более мощная. IOS С выпуском iOS 6.0 Вы получили доступ к инструменту, позволяющему использовать Safari Web Inspector, чтобы отладить устройства на iOS. Включите на своем устройстве на iOS удаленную отладку: зайдите в “Параметры настройки” → “Safari” → “Advanced” и включите “Web Inspector”. Теперь Вы готовы начать работу. Затем физически присоедините свое устройство к ПК, используя USB-кабель. Откройте Safari (версия 6.0 или выше) и в “Preferences” → “Advanced” выберите “Show Develop menu in menu bar”. В меню “Develop” Вы должны видеть свое iOS устройство вместе со страницами, открытыми в мобильном Safari. Выберите одну из этих страниц и у Вас под рукой будет широкий диапазон инструментов разработчика. Например, испытайте DOM Inspector, позволяющий Вам коснуться элементов DOM на своем мобильном устройстве и видеть отладочную информацию на рабочем столе. DOM Inspector - только начало, инструменты разработчика iOS обеспечивают тонну функций, таких как: временная шкала, чтобы отследить сетевые запросы, расположение и задачи рендеринга и JavaScript; отладчик, позволяющий установить контрольные точки и профилировать JavaScript; консоль JavaScript. Прочитайте “Safari Web Inspector Guide” и Вы узнаете, что еще можно сделать, используя этот инструмент. Примечание: Как и с симулятором iOS, Вы можете сделать удаленную отладку для iOS только на Mac OS X. ANDROID Как и у iOS, у Android есть удаленное решение для отладки. Инструменты в нем позволяют Вам отладить устройство на базе Android от настольной машины, используя Chrome’s Developer Tools. Удаленная отладка Android – кроссплатформенная. Сначала перейдите к “Settings” → “About Phone” на Вашем Android 4.4 + телефон (или “Settings” → “About Tablet”). Потом семь раз коснитесь “Build Number”. Вы увидете сообщение о том, что стали разработчиком. Вернитесь к основным параметрам настройки и в “Developer Options”. Включите “USB debugging”. Войдите в свой настольный браузер Chrome и введите about:inspect в строке поиска. Включите “Discover USB devices”, тогда Ваше устройство появится в меню. Вы должны также увидеть открытые в мобильном браузере вкладки. Выберите любую вкладку, которую Вы хотите отладить, и получите доступ к таким инструментам: DOM Inspector; Панель исходного кода, чтобы наблюдать за JavaScript и установить контрольные точки остановки; Сетевая панель внешних ресурсов; Консоль JavaScript. Примечание: Вы можете также удаленно отладить с эмулятором Android. WEINRE Вы узнали, как можно отладить разные устройства удаленно. Но в том случае, если Вам нужно отладить iOS на Windows или на Linux или отладить такие устройства, как Windows Phone или BlackBerry, воспользуйтесь Weinre, работающим с абсолютно любым устройством. Установка Weinre сложна, потому что его необходимо установить как на сервере, так и на странице. Чтобы начать, установите Node, потом установите модуль Weinre со следующей командой: npm install –g weinre После запустите сервер отладки, используя ваш IP-адрес: weinre --boundHost 10.0.0.1 Примечание: Удостоверьтесь, что Вы прописали свой IP в команду. Вы найдете IP на Mac, используя команду ipconfig getifaddr en0, и на Windows, используя ipconfig. Затем перейдите к серверу разработки, который выведен Weinre в консоли (localhost:8080). Здесь смотрите на раздел “Target Script” и копируйте тег . Его нужно вставить на страницу, требующую отладки. Наконец, нажмите на ссылку наверху этой страницы для пользовательского интерфейса и для отладки клиентов (http://localhost:8080/client/#anonymous). Как только Вы открываете страницу в своем устройстве, Вы увидете его в списке целей. Примечание: Если соединение устройства с localhost вызывает затруднения, рассмотрите установку общедоступного туннеля с ngrok. Вы можете использовать удобные инструменты, например Инспектор DOM: После окончания начальной установки Weinre поможет Вам отладить любое устройство в любой сети. Хотя, собственные решения для iOS и Android мощнее, чем Weinre. Например, в нем невозможно использовать панель “Sources”, чтобы отладить JavaScript. Примечание: Ghostlab - другая удаленная опция тестирования, которая поддерживает многочисленные платформы. Заключение Мы узнали, как установить лабораторию тестирования, используя эмуляторы, симуляторы, удаленные инструменты тестирования, также и физические устройства. Вы теперь можете протестировать мобильное приложение или веб-сайт через разнообразные устройства и платформы. Также советуем Вам использовать удаленные средства отладки, предоставляющие полезную информацию непосредственно от мобильного устройства. Источник: http://www.smashingmagazine.com/2014/09/03/testing-mobile-emulators-simulators-remote-debugging/

Прежде всего стоит освежить память и немного повторить основы. JavaScript – объектно-ориентированный язык программирования. Чаще всего в сценариях JS вы будете встречать объекты. Элементарные типы данных JS: числа строки булевые(true/false) null undefined Объект в JS – это коллекция пар ключ/значение. Если же свойством объекта выступает функция, это свойство называют – методом. Разновидности объектов в JS : Собственные объекты: встроенные (Array, Date) пользовательские (var b = {};)      2. Объекты окружения: window объекты DOM Прототип: Для использования наследования обычно применяют прототип. Что такое прототип – это объект. Каждая создаваемая функция получает свойство prototype, который ссылается на новый пустой объект. Что такое Шаблон : это повторимая архитектурная конструкция, представляющая собой решение проблемы проектирования у часто возникающего контекста. решение типичной задачи(эффективный прием). Что делают шаблоны: помогают писать более еффективный программный код, используя наработанные приемы. помогают абстрактно мыслить программисту, не погружаясь в детали, пока этого не требует ситуация. упрощает общение разработчиков, упоминание какого-либо приема сразу вносит ясность. Типы шаблонов: шаблоны проектирования шаблоны кодирования антишаблоны Рассмотрим основные приемы написания качественного кода на JS. Правила написания качественного кода: удобочитаемость (вы или человек, который будет после вас читать код, должен легко и быстро его понимать) документация (опять же, для понимания написаного вами кода) предсказуемость (опять же, вытекает из первого) непротиворечивость (отдельные составляющие программы не должны противоречить друг другу) Первый прием(шаблон) на пути написания качественного кода  – сведение к минимуму количества глобальных переменных. Стараемся объявлять переменные в теле функций(так как мы помним, что функция есть локальной областью видимости). Любая переменная, объявляемая не в теле другой функции, является свойством глобального объекта window. Почемy же нам стоит избегать глобальных переменных ? Они доступны всему приложению, соответсвенно, могут конфликтовать/перезаписываться. Решение – использование слова var при объявлении переменных.  function mult(x, y) {     //антишаблон - глобальная переменная     res = x * y;     return res; }; function mult(x, y) {     //локальная переменная     var res = x * y;     return res; }; function antiPat() {     // антишаблон - использование нескольких операций присваивания     // переменная res - локальна, переменная glob - глобальна     // потому как присваивание выполняется справа налево     // glob = 5 - в данном случае необъявленная переменная     // операция эквивалентна var res = ( glob = 5 );     var res = glob = 5; }; function antiPat() {     //решение : зарание объявить переменные;     var res, glob;     res = glob = 5; }; Также переменные, объявленные с помощью слова var, не могут быть удалены, используя оператор delete. var global0 = 5; global1 = 10;                            // антишаблон (function () { global_inFunc = 15 }());         // антишаблон //пытаемся удалить delete global0;                                 // false delete global1;                                 // true delete global_inFunc;                           // true //проверяем typeof global0                                  // 'number' typeof global1                                  // 'undefined' typeof global_inFunc                     // 'undefined' В строгом режиме ('use strict';) присвоение значения необъявленной переменной вызовет ошибку. Глобальный объект var global = (function () { return this }()); Получаем доступ к глобальному объекту, потому как ссылка this указывает на глобальный объект. Единственная инструкция var function func () {     var x = 5, y = 10, mult = x * y, someObj = {}, k, l, m;     return … }; У такого приема есть ряд приимуществ: легко найти переменную(они все в одном месте) уменьшает количество логических ошибок уменьшает количество глобальных переменных(так как мы их объявили локально уже) повышает удобочитаемость кода Подъем //антишаблон some = 'global';                  //глобальная переменная function example() {     alert(some);           //undefined     var some = 'local';     alert(some);           //'local' }; example(); Почему так происходит? Потому что в JS интерпретатор проходит по областям видимости на первом этапе обработки кода и собирает объявление переменных фунций и формальных параметров. В локальной области видимости переменная some неопределена (undefined). Она существует как глобальная переменная и как локальная. Такое поведение именуется подъем (hoisting). Второй этап выполнения кода интерпретатором – создание функций-выражений и необъявленных переменных. Циклы for function func (){     var i,  max, sampleArray;     for ( i = 0; max = sampleArray.length; i < max; i++ ) {         //    произвести действия над sampleArray[i]     } }; Используя такой шаблон, значение свойства length будет извлекаться единожды, что увеличит драгоценную скорость работы. var i, sampleArray = []; for (i = sampleArray.length; i--;) {     //    произвести действия над sampleArray[i] }; Считаем итерации обратно от максимального значения к нулю, потому как сравнение с 0 эффективнее, чем сравнение с длиной массива. var sampleArray = [],i = sampleArray.length; while(i--){ //    произвести действия над sampleArray[i]}; Такие изменения будут ощутимы на участках приложения, где необходима максимальная производительность. Циклы for-in Циклы for-in используются для обхода объектов (не массивов – это возможно, но не рекоменуется). var car = {     doors: 4,     wheels: 4,     engine: 1 }; // расширяем функционал // добавляем ко всем объектам метод ride if (typeof Object.prototype.ride === 'undefined') {     Object.prototype.ride = function () { }; }; // Теперь все объекты через прототип имеют доступ к методу ride() // чтобы отбросить метод при перечислении свойств необходим // метод hasOwnProperty() для того, чтобы отфильтровать свойства прототипа var i, hasOwn = Object.prototype.hasOwnProperty; for (i in car) if (hasOwn.call(car, i)) {     console.log(i, ' : ', car[i]); }; Для каждого собственного свойства объекта выполнить кусок кода в фигурных скобках. Расширение prototype Данный шаблон следует использовать очень аккуратно. Даже если вы предупреждаете свою команду в докумментации (что является более предпочтительным и для новой комманды) или устно (недопустимо). If ( typeof Object.prototype.someMethod !== 'function' ) {     Object.prototype.someMethod = function () {         //do something...     }; }; Приведение типов // шаблон var number = 0; if (number === false) {     // не выполнится потому как number это 0, а не false }; // антишаблон if (number == false){ // инструкция выполнится }; Во избежание двузначности старайтесь использовать однозначную трактовку кода. Шаблоны eval(), setInterval(), setTimeout() Старайтесь не использовать в своих сценариях eval(). Функция принимает строку и выполняет её как програмный код. А это уже ставит под удар безопасность приложение, так как eval() выполнит код хакера. Возможно, эта функция понадобится вам во время динамической генерации кода, тогда лучше заменить eval(), как пок­азано ниже: // антишаблон var property = 'name'; alert(eval('obj.' + property)); // лучше заменить на var property = 'name'; alert(obj[property]); Функциям setInterval(), setTimeout() и конструктору  Function() старайтесь не передавать в качестве аргумента строки. По тем же причинам , что и функция eval(). // антишаблон setTimeout( 'someFunc()', 5000); setTimeout( 'someFunc(1, 2, 3)', 5000); // заменить на setTimeout( someFunc(), 5000 ); setTimeout( function(){ someFunc(1, 2, 3); }, 5000); Если по каким-либо причинам вам все-таки приходится применять функцию eval(), оберните её в самовызывающуюся функцию, этот шаблон поможет вам создать локальную область видимости, предотвратит перетирание переменных и предотвратит создание глобальных переменных. Также конструктор Function() отличается от  eval() тем, что ему доступна лишь глобальная область видимости. (function () {     var local = 1;     eval('local = 3; console.log(local)');      // результат 3     console.log(local);                         // результат 3 }()); (function () {     var local = 1;     Function('console.log(typeof local);')();// результат undefined }()); Применяйте приведенные в этой статье шаблоны, эксперементируйте. Старайтесь создавать код, понятный и другим разработчикам. Одно из самых главных приоритетов при написании кода- это простота. Как говорится в знаменитой пословице: “Все гениальное просто.” На этом пока все. Желаю всем красивого кода. Всем спасибо!

Введение ASP.Net Web API – это основа создания HTTP услуг широкого спектра клиентов, таких как браузеры, мобильные телефоны, планшеты и так далее. API должна быть совместима с современными браузерами, чтобы использовать эти услуги в простой форме. Мы можем быстро и просто сбрасывать служебные данные в браузер, а также приложения. Необходимость в Web API Если Вы нуждаетесь в Web Service и Вам не нужно SOAP, то API ASP.Net –лучший выбор. Он строит простые HTTP сервисы, основанные на базе существующей WCF. ASP.Net Web API на основе HTTP легко определяются. У них открытый исходный код. Легкая архитектура подходит для устройств с ограниченной шириной полосы, например, смартфонов. Создание простой Web API в ASP. NET MVC 6 Запустите Visual Studio 2015 Preview. В меню Файл выберите New > Project. В диалоговом окне New Project нажмите Tempates > Visual C# > Web и выберите ASP. NET шаблон проекта Web-приложений. Назовите проект "WebApplication1" и нажмите OK. В диалоговом окне New ASP.NET Project выберите "ASP.NET 5.0 Empty” шаблон. Проект включает в себя следующие файлы:   Global.json содержит настройки решения. В project.json находятся настройки проекта. Project_Readme.html – read me файл. Startup.cs содержит встроенный код конфигурации. Откройте файл Project.json. Добавьте библиотеки классов (class libraries) в разделе зависимостей (dependencies). ​ "dependencies": {           "Microsoft.AspNet.Server.IIS": "1.0.0-beta1",           " "Microfost.AspNet.Diagnostics": "1.0.0-beta1" } Затем откройте Startup.cs с кодом, показанным ниже.  public class Startup    {         public void Configure(IApplicationBuilder app)         {             // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940              app.UseWelcomePage();             // app.UseMvc();          }     }  После отладки Visual Studio перейдите на http://localhost:port/ в браузере. Создание Web API Мы создадим Web API, чтобы упорядочить список клиентских продуктов. Сначала нужно добавить ASP.Net MVC6 в приложение. Добавьте пакет MVC6 в список зависимостей в Project.json. Используйте код ниже. "dependencies": {         "Microsoft.AspNet.Server.IIS": "1.0.0-beta1",         "Microsoft.AspNet.Diagnostics": "1.0.0-beta1",         "Microsoft.AspNet.Mvc": "6.0.0-beta1"       } Затем добавьте MVC в request pipeline в Startup.cs. Добавьте Using для Microsoft.Framework.DependencyInjection.   Добавьте следующий метод в Startup класс. using System; using Microsoft.AspNet.Builder; using Microsoft.AspNet.Http; using Microsoft.Framework.DependencyInjection;//add new  namespace WebApplication1 {     public class Startup     {         public void Configure(IApplicationBuilder app)         {                      app.UseWelcomePage();              app.UseMvc();         }         public void ConfigureServices(IServiceCollection services)         {             services.AddMvc();         }     } } Добавьте модель using System; using System.ComponentModel.DataAnnotations; namespace WebApplication1.Model {     public class Customer     {         public int CustomerId { get; set; }         [Required]         public string Name { get; set; }     } } Добавьте контроллер  using Microsoft.AspNet.Mvc; using System.Collections.Generic; using System.Linq; using WebApplication1.Model; namespace WebApplication1.Controllers {     public class HomeController : Controller     {                 static readonly new List<Customer> _items = new List<Customer>()             {                 new Customer  { CustomerId = 1, Name = "Henry" },                 new Customer { CustomerId = 2, Name = "John" },             };         public IEnumerable<Customer> Get()         {             return _items;         }         public IActionResult GetById(int id)         {             var its = _items.FirstOrDefault(x => x.CustomerId == id);             if (its == null)             {                 return HttpNotFound();             }             return new ObjectResult(its);         }         public void CreateCustomer([FromBody] Customer item)         {             if (!ModelState.IsValid)             {                 Context.Response.StatusCode = 400;             }             else             {                 item.CustomerId = 1 + _items.Max(x => (int?)x.CustomerId) ?? 0;                 _items.Add(item);                 string url = Url.RouteUrl("GetByIdRoute", new { id = item.CustomerId },                     Request.Scheme, Request.Host.ToUriComponent());                 Context.Response.StatusCode = 201;                 Context.Response.Headers["Location"] = url;             }         }         public IActionResult DeleteItem(int id)         {             var item = _items.FirstOrDefault(x => x.CustomerId == id);             if (item == null)             {                 return HttpNotFound();             }             _items.Remove(item);             return new HttpStatusCodeResult(204);         }     } } Выше описывается класс HomeController. Маршрутизация Атрибут маршрутизации определяет URL шаблоны контроллера. [Route("api/[controller]")] Методы HTTP [HttpGet], [HttpPost] и [HttpDelete] – атрибуты, определяющие методы HTTP для контроллера. public IEnumerable<Сustomer> Get() { }  //[HttpGet]  public IActionResult GetById(int id) { } //[HttpGetbyid}  public void СreateСustomer([FromBody] Сustomer item) { } // [HttpPost]  public IActionResult DeleteItem(int id) { } //[HttpDelete] {Customerid: int} int ограничивает переменную до соответствия целому числу, чтобы URL-адреса совпадали. http://localhost/api/home/1 http://localhost/api/home/42 Из этой статьи Вы узнали, как создавать Web API в MVC 6, используя модели, контроллер и HTTP методы. Источник: http://www.c-sharpcorner.com/UploadFile/85ed7a/create-web-api-in-mvc-6/

Введение Данная статья будет полезной для новичков в мире Web-разработки, поскольку в ней будут рассмотрены основные сценарии использования свойства position. Под позиционированием подразумевают расположение элемента в заданной системе координат. Можно выделить четыре типа позиционирования: нормальное, абсолютное, относительное и фиксированное. В зависимости от выбранного типа, установленного через свойство position, будет изменяться и система координат. Вместе со свойством position целесообразно использовать следующую комбинацию свойств (или лишь несколько из них): left, top, right, bottom и z-index, с их помощью элемент можно позиционировать более точно и в определенных случаях абсолютно независимо от соседних элементов. Свойства left, top, right, bottom отвечают за перемещение элемента от его первоначального положения в четырех направлениях: вправо, вниз, влево, вверх соответственно. Свойство z-index отвечает за перемещение элемента на другую плоскость (или уровень) и может принимать значения из диапазона от 1 до N. Наиболее часто свойство position используется для определения взаимного расположения слоев, далее рассмотрим особенности разных типов позиционирования. Нормальное позиционирование По умолчанию, если для элемента не задано свойство position или ему задано значение static, слои позиционируются друг за другом, при этом каждый следующий начинается с новой строки. Причем, слои размещаются максимально близко к верхнему левому углу страницы и без отступов между границами. Кроме этого, свойства left, top, right, bottom и их значения, если таковы определены, игнорируются браузером. Можем убедиться в этом, отобразив два примера кода в браузере: Без использования свойства position. <html> <head>     <title>Positiontitle>     <style type="text/css">         div {             width: 240px;             height: 80px;         }     style> head> <body>     <div style="background-color: Yellow">div>     <div style="background-color: Red">div>     <div style="background-color: Green">div> body> html> С использованием свойств position:static, top и left:  <html>                          <head>     <title>Positiontitle>     <style type="text/css">         div {             width: 240px;             height: 80px;         }     style> head> <body>     <div style="background-color: Yellow">div>     <div style="background-color: Red; position:static; top:50px; left: 100px">div>     <div style="background-color: Green">div> body> html> В итоге получим одинаковое отображение нашего кода в браузере:  Абсолютное позиционирование При задании абсолютного позиционирования элемента, он «отделяется» от потока документа и перестает в нем существовать. Его местоположение, равно как и координаты, задается относительно краёв окна браузера, в так называемой «видимой области». Задается такой тип через значение absolute свойства position. Стоит отметить следующие особенности данного типа позиционирования: - свойства top и left имеют более высокий приоритет, нежели right и bottom, это означает, что при противоречии свойств left и right значение right будет игнорироваться, также браузер поведет себя относительно свойства bottom. - при использовании абсолютного позиционирования и задании значений свойствам left, top, right, bottom и z-index изначальное местоположение слоя становится доступным для замещения другими соседними элементами. div {    background-color:red;    width: 120px;    height: 240px;    position: absolute; /*Определяем абсолютное позиционирование элемента*/    top: 100px;  /*Производим смещение на 100px вниз от изначального местоположения слоя*/    left: 150px; /*Производим смещение на 100px вправо от изначального местоположения слоя*/    bottom: 20px; /*Свойства bottom и right в данном случае будут игнорироваться*/    right: 40px; } С использованием свойств position:absolute, top и left:  <head>     <title>Positiontitle>     <style type="text/css">         div {             width: 240px;             height: 240px;             position: absolute;         }         #redBox {             background-color: red;             top: 10px;             left: 10px;         }         #greenBox {             background-color: green;             top: 70px;             left: 70px;         }         #blueBox {             background-color: blue;             top: 130px;             left: 130px;         }     style> head> <body>     <div id="redBox">div>     <div id="greenBox">div>     <div id="blueBox">div> body> html> В итоге, получим следующее отображение разметки в браузере:  Используя для зеленого слоя свойство z-index и передав ему значение 3, сможем добиться следующего отображения: #greenBox {             background-color: green;             top: 70px;             left: 70px;             z-index: 3;         } Фиксированное положение  Если свойству position задать значение fixed, элемент будет привязан к определенной свойствами left, top, right, bottom точке на экране и не будет изменять своего положения при прокрутке веб-страницы. Следующей отличительной чертой от absolute будет то, что при размещении фиксированного элемента за пределами области видимости снизу или справа от нее не приводит к возникновению полос прокрутки. Целесообразным применением данного типа позиционирования является создание меню, заголовков, неподвижных элементов, содержащих формы быстрой связи со службой поддержки (online chat).  С использованием свойств position:fixed, top и left: <html> <head>                                                  <title>Fixedtitle>     <style type="text/css">         div {             width: 240px;             height: 240px;         }         #redBox {             background-color: red;         }         #greenBox {             background-color: green;         }         #blueBox {             background-color: blue;         }         #fixedBox {             background-color: cyan;             width: 200px;             height: 200px;             border-radius: 100px;             position: fixed;             top: 20px;             left: 150px;             opacity: 1.0;         }     style> head> <body>     <div id="redBox">div>     <div id="greenBox">div>     <div id="blueBox">div>     <div id="fixedBox">div> body> html> Относительное позиционирование В случае задания свойству position значения relative позиционирование элемента будет установлено относительно его места по умолчанию. Использование свойств left, top, right, bottom позволит изменять позицию элемента и сдвигать его в ту или иную сторону от его изначального местоположения. При задании свойствам положительного значения, к примеру, left: 70px, происходит смещение элемента вправо от левой границы родительского элемента, при задании отрицательного значения left: -70px, происходит сдвиг влево. Аналогично выполняются инструкции и для других свойств. Стоит отметить, что данный тип позиционирования нельзя применять к элементам таблиц (ячейкам, строкам, колонкам и т.д.). Кроме этого, место, занимаемое элементом до его перемещения, остается пустым и не может быть занятым другими элементами. С использованием свойств position:relative, top и left: <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>Relativetitle>     <style type="text/css">         div {             width: 640px;             height: 240px;             position: relative;         }         #redBox {             background-color: red;             top: 10px;             left: 10px;         }         #greenBox {             background-color: green;             top: 70px;             left: 70px;         }         #blueBox {             background-color: blue;             top: 130px;             left: 130px;         }         style> head> <body>     <div id="redBox">div>     <div id="greenBox">div>     <div id="blueBox">div> body> html> Зачастую относительное и абсолютное позиционирование сами по себе не применяются, поскольку существует свойство margin, с очень похожим функционалом, позволяющий задать местоположения слоя относительно его соседей. Но сочетание разных типов позиционирования для вложенных слоев, делает их незаменимыми при необходимости изменить систему координат и задать размещения дочерних элементов относительно их родителя, избежав трудно-воспринимаемых конструкций из множества вложенных слоев.

Введение Переадресация – когда веб-страница побывала на определенном URL, а потом меняет его на другой URL. Если пользователь посетил "website.com/page-a" и произошло перенаправление на "website.com/page-b". Переадресация пригодится Вам, если Вы хотите перенаправить страницу на новое место, изменить URL-структуру сайта, удалить "WWW" из URL или даже полностью перенаправить страницу на другой сайт. К примеру, Вы только что перешли на новый сайт и хотите закрыть старый. Но Вам не нужно, чтобы страницы старого сайта имели статус 404 Not Found. Старые ссылки должны перенаправлять пользователя на Ваш новый сайт. Пример: мы хотим old-website.com/blog/post перенаправить на new-website.com/blog/post, а также мы хотим перенаправить все другие страницы, использующие данный URL. Также необходимо, чтобы поисковые системы понимали, что эти изменения постоянны и обновлялись соответственно. Как же это сделать? Для начала нужно узнать немного про HTTP. Коды ответов HTTP Каждый раз, когда Вы заходите на URL или отправляете запрос из браузера, используется протокол передачи гипертекста (HTTP).  Это процесс, посредством которого мы запрашиваем данные, как CSS, HTML и изображения, хранящиеся на сервере. После того, как послан запрос, эти данные отвечают кодом HTTP 200 OK, означающий, что они доступны. Есть много различных видов кода ответа, самый известный – 404 Not Found; веб-страницы, а также любой другой запрашиваемый контент, например, изображения могут отвечают статусом 404. Каждый HTTP ответ имеет определенный трехзначный номер, 404 Not Found – статусный код 4XX, указывающий ошибку клиента; 200 относится к категории 2XX и показывает, что сообщение успешно. Нас интересуют ответы HTTP-категории 3ХХ, как 301 Moved Permanently или 302 Found. Эти коды статуса специально отведены для переадресации.  В нашем случае используется перенаправление 301, потому что определенные веб-браузеры или прокси-серверы кэшируют этот тип перенаправлений и делают старую страницу недоступной. HTML перенаправления Один из самых простых способов перенаправления – мета-тег refresh. Можно разместить этот мета-тег внутри тега  в верхней части страницы HTML: <meta http-equiv=”refresh” content=”0”; url=’http://new-website.com’ /> Атрибут content – атрибут задержки перед перенаправлением браузера на новую страницу, он установлен на 0 секунд. Не нужно устанавливать код состояния HTTP, но важно перепроверить написание кавычек выше (есть вложенные кавычки, поэтому лучше использовать разные типы кавычек). Хотя этот метод самый простой для перенаправления веб-страницы,  у него есть недостатки. В соответствии с W3C некоторые браузеры не воспринимают мета-тег refresh. Пользователи могут увидеть страницу А, которая загрузится раньше, чем Вы будете перенаправлены на страницу В. Также она отключает кнопку назад на старых браузерах. Поэтому этот метод не рекомендуется использовать вообще. Лучший вариант – перенаправление сайта с JavaScript. Перенаправления JavaScript Перенаправить на другой URL с JavaScript довольно легко, просто требуется изменить location window-объекта: window.location = “http://new-website.com”;  В JavaScript есть много возможностей для этого: window.location = “http://new-website.com”; window.location.href = “http://new-website.com”; window.location.assign(“http://new-website.com”); window.location.replace(“http://new-website.com”); Также можно просто использовать location с нужным объектом окна. И self или top. С location объекта можно также перезагрузить страницу или изменить путь и начало URL. Здесь присутствует несколько проблем: JavaScript должен быть включен и загружен. Пока не ясно, как поисковые системы реагируют на это. Нет кодов состояния, поэтому Вы не можете полагаться на информацию о перенаправлении. Требуется решение на сервере, чтобы помочь нам, отправив ответ 301 в поисковые системы и браузеры. Перенаправления Apache Возможно, самый удобный способ перенаправления – добавление определенных правил в файл `.htaccess` на веб-сервере Apache.  `.htaccess` – документ, дающий нам возможность отдавать команды Apache, программному обеспечению, работающему на сервере. Чтобы перенаправить пользователей, нужно создать новый (или отредактировать существующий) файл .htaccess  и добавить его в корневой каталог старого сайта. Мы будем добавлять данное правило: Redirect 301 / http://www.new-website.com Любая страница, открытая на старом сайте, перенаправляется на новую. Как Вы видите, мы ставим код ответа прямо перед правилом переадресации. Этот вид переадресации работает только на серверах Linux с включенным mod_rewrite, модулем Apache, позволяющим нам перенаправить запрашиваемые URL-адреса на сервере, если определенный образец найден, он будет изменять запрос некоторым способом. Большинство хостинг-компаний поддерживают это по умолчанию.  Вернемся к нашему примеру, если использовать код, приведенный выше, то пользователь перейдет к "old-website.com/blog/post" и будет перенаправлен по адресу "new-website.com". Неудобно то, что пользователи не видят реальную запрашиваемую страницу. Поэтому добавим следующее правило для нашего `.htaccess` файла, чтобы перенаправить все сообщения блога на нужную страницу: RedirectMatch 301 /blog(.*) http://www.new-website.com$1 Если необходимо перенаправить отдельные страницы по определенному адресу, можно добавить правила, например, так: Redirect 301 /page.html http://www.old-website/new-page.html По ошибке пользователи могут быть перенаправлены на страницу 404:  <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule .* 404.html [L] </IfModule> Сначала нужно проверить, доступен ли модуль mod_rewrite и включить его. В случае, когда файл или каталог не найден, пользователь попадет на нашу страницу 404. Он увидит содержимое страницы 404.html файла в то время, как запрашиваемый URL останется тем же. Перенаправления Nginx Для серверов, работающих на Nginx, в `nginx.conf` файл нужно добавить блок для обработки перенаправления запросов: server {     listen 80;     server_name old-website.com;     return 301 $scheme://new-website.com$request_url; } LightTPD перенаправления Для серверов, которые работают под управлением веб-сервера Lighttpd, можно сделать перенаправление, импортируя mod_redirect модуль и используя url.redirect: server.modules = ( “mod_redirect” ) $HTTP[“host’]=~”^(www\.)?old-website.com$”{     url.redirect = (     “^/(.*)$” => “http://www.new-website.com/$1”,     ) } PHP перенаправления В PHP можно использовать функцию header: header(‘Location: http://new-website.com’);     exit; ?> Это должно быть установлено перед любой разметкой и контентом другого рода, однако есть одна небольшая сложность. Функция по умолчанию отправляет ответ 302, сообщая о том, что контент был временно перемещен. В нашем случае нужно постоянно перемещать файлы на новый сайт, так что стоит заменить перенаправление 302 на 301: header(‘Location: http://www.new-website.com/’, true, 301);     exit(); ?> Параметр true заменит ранее установленный header и 301 изменяет код ответа на правильный. Ruby on Rails переадресации Из любого контроллера Rails проекта мы можем быстро перенаправить на новый сайт с redirect_to. Параметру :status нужно установить значение : moved_permanently. Так переопределяется код статуса по умолчанию 302 и изменяется на Moved Permanently: class WelcomeController def index redirect_to ‘http://new-website.com’, :status => :moved_permanently     end end В Rails 4 можно добавить redirect в routes.rb файл, автоматически отправляющий ответ 301: get “/blog” => redirect(“http://new-website.com”) Если нужно перенаправить все статьи на новый сайт, можно сделать так:  get “/blog/:post” => redirect(“http://new-website.com/blog/%{post}”) Node.js перенаправления Чтобы перенаправить с помощью Node, во-первых, нужно включить HTTP модуль и создать новый сервер, используя .writeHead () метод: var http = require(“http”); http.createServer(function(req, res) {     res.writeHead(301,{Location: ‘http://new-website.com’});     res.end(); }).listen(8888); Если Вы делаете новый файл и называете его index.js, вставьте код, приведенный выше, и запустите node index.js, в командной строке вы найдете локальную версию сайта, перенаправленную на new-website.com. Но, чтобы перенаправить все сообщения в разделе /blog, нужно разобрать URL из запроса с удобным Node URL модулем: var http = require(“http”); var url = require(“url”); http.createServer(function(req, res) {     var pathname = url.parse(req.url).pathname;     res.writeHead(301,{Location: ‘http://new-website.com/’ + pathname});     res.end(); }).listen(8888); Используя функцию .writeHead (), мы можем установит путь от запроса до конца URL строки. Теперь пользователь будет перенаправлен на тот же путь на новом сайте. Flask перенаправления С Flask framework поверх Python мы можем создать маршрут, указывающий на подстраницы с функцией redirect, но в конце должна быть опция 301, так как по умолчанию установлена 302: @app.route(‘/notes/<page>’) def thing(page): return redirect(“http://www.new-website.com/blog/” + page, code=301)

Введение Вам приходилось возвращаться к фрагменту кода, написанному год или месяц назад? Каково это было?  Это было просто, или приходилось вникать в код исходя из заметок? Если у Вас не получается быстро разобраться в коде и Вы задаете себе вопрос: «Что же я тогда имел ввиду?» – Вы определенно делаете что-то не так. Скорее всего, Ваш код работает правильно. И Вы знали его вдоль и поперек, когда над ним работали. Почему же Вы не можете его вспомнить сейчас? Быть может, он не был написан достаточно доступно и не соответствовал стандартам машинного кода? В этой статье Вы найдете полезную информацию о том, как научиться писать доступный не только для себя, но и для остальных разработчиков код. Пример использования стандарта оформления кода Рассмотрим это на следующем примере метода в C#: public string Transform(List<DateTime> s)         {             string d = null;             foreach (DateTime kc in s)             {                 if (kc > DateTime.Now)                 {                     d = d + kc + "\n";                 }                 else                 {                     d = d + "Delayed\n";                 }             }             return d;         } Скорее всего, Вы не можете понять, какую функцию он выполняет и как его можно использовать. Но после короткой реконструкции кода мы получим:  public string GetText(List<DateTime> arrivalTimes)         {             var stringBuilder = new StringBuilder();             foreach (DateTime arrivalTime in arrivalTimes)             {                 if (arrivalTime > DateTime.Now)                 {                     stringBuilder.AppendLine(arrivalTime.ToString());                 }                 else                 {                     stringBuilder.AppendLine("Delayed");                 }             }             return stringBuilder.ToString();         } Или если мы обратимся к оператору “?:”, мы получим:  public string GetText(List<DateTime> arrivalTimes)         {             var stringBuilder = new StringBuilder();             foreach (DateTime arrivalTime in arrivalTimes)             {                 string message = arrivalTime > DateTime.Now ? arrivalTime.ToString() : "Delayed";                 stringBuilder.AppendLine(message);             }             return stringBuilder.ToString();         } Что произошло с кодом? Некоторые изменения сделали наш код более читабельным: 1. Имя метода получило более понятное название. 2. Мы изменили названия переменных: 1. “kc” изменена на arrivalTime, 2. “s” изменена на arrivalTimes, 3. “d” изменена на stringBuilder, Это облегчит понимание того, за что отвечает каждая переменная и как она используется. 3. Скобки были стандартизированы. 4. Добавлены вкладки для читаемости, размещения и разметки в скобках. 5. Оператор “?:” был введен для того, чтобы сократить наш код до четырех строчек. 6. Добавлен класс StringBuilder, чтобы избежать конкатенации (“string” + “string”). Кто-то может возразить, что создание экземпляра StringBuilder будет замедлять метод из-за его распределения памяти. Но стоит помнить, что конкатенация струн создает много мусора в памяти, который вынужден чистить Garbage Collector. Считается, что ~ 5 непрерывных строк равны созданию реализации StringBuilder, так что если список состоит из пяти или более элементов, то производительность этого метода будет увеличена. А для больших коллекций этот метод будет работать в несколько раз быстрее. Правильный способ составления кода Давайте перейдем к другому примеру. Рассмотрим класс пользователя: public class User         {             public bool HasConfirmedEmail { get; set; }             public bool HasActiveAccount { get; set; }             public bool IsLoggedIn { get; set; }             public bool HasPremiumAccount { get; set; }             public bool StatusAutoGenerated { get; set; }             public DateTime LastStatusChange { get; set; }             public bool SetStatus(string status)             {                 // write to Data Base                 return true;             }         }  Метод, отвечающий за обновление статуса пользователя, который должен проверить, все ли свойства в правильном состоянии: public string UpdateStatus(string status, User user)         {             if (user.HasActiveAccount)             {                 if (user.HasConfirmedEmail)                 {                     if (user.IsLoggedIn)                     {                         if (user.HasPremiumAccount)                         {                             if (!user.StatusAutoGenerated)                             {                                 if (user.LastStatusChange < DateTime.Now.AddDays(-1))                                 {                                     if (user.SetStatus(status))                                     {                                         return "Updated";                                     }                                 }                             }                         }                     }                 }             }             return "Fail";         } Хотя этот код более понятный, чем первый, представленный в этой статье, он все еще не соответствует стандартам программного кода. Вот пример того, как этот код можно сделать немного лучше: const string OK = "Updated";         const string FAIL = "Fail";         public string UpdateStatus(string status, User user)         {             if (!CanUpdateStatus(user)) return FAIL;             if (!user.SetStatus(status)) return FAIL;             return OK;         }         public static bool CanUpdateStatus(User user)         {             if (!user.IsLoggedIn) return false;             if (!user.HasActiveAccount) return false;             if (!user.HasConfirmedEmail) return false;             if (!user.HasPremiumAccount) return false;             if (user.StatusAutoGenerated) return false;             if (!(user.LastStatusChange < DateTime.Now.AddDays(-1))) return false;             return true;         } Основные изменения, внесенные в этот код, чтобы улучшить его читабельность: Static method был создан, чтобы проверить возможность обновления статуса пользователя. Это делает метод UpdateStatus более понятным с первого взгляда. Кроме того, логика метода CanUpdateStatus может быть повторно использована в других частях системы, если они являются public и static. Все " if " были заменены, чтобы уменьшить вложения. Количество скобок значительно уменьшилось, и код гораздо легче читать и компилировать. Еще одним преимуществом данного условия является его масштабируемость. Представьте себе, что класс User имеет теперь еще три свойства, которые должны быть проверены перед обновлением статуса – будут необходимы еще три "if" выписки. Теперь Вы можете добавить только три (не более) линии в методе CanUpdatedStatus. Строки, которые представляют сообщения, были удалены из тела методов и были введены в постоянные переменные. Это помогает поддерживать код, потому что независимо от числа использований кода есть только одно место, где Вы должны изменить содержание сообщения, если это необходимо. Но, на самом деле, все тексты должны быть помещены в проект внешних ресурсов. Источник: http://blog.goyello.com/2014/12/11/clean-code/ 

Введение: Адаптивный веб-дизайн – это один из главных показателей качества сайта, который отвечает за корректность его отображения на разных устройствах в виде динамических изменений под заданные размеры окна браузера. Для создания адаптивных веб-страниц Вам стоит ознакомиться с реализованной Bootstrap системой разметки - «сетка» (Bootstrap grid). Сетку формируют 12 отдельных столбцов, которые также могут использоваться группами для создания более широких колонок. Система разметки Bootstrap является адаптивной, вследствие чего столбцы перестроятся в соответствии с размером экрана. Сетка включает в себя такие классы: xs (для телефонов) – менее 768px sm (для планшетов) – от 768px md (для ПК и ноутбуков) – от 992px lg (для ПК с мониторами большой диагонали) – от 1200px Наглядный пример разметки страницы на строки и столбцы для отображения на ПК: В коде это может выглядеть так:     <div class="row">         <div class="col-sm-4">.col-sm-4 div>         <div class="col-sm-4">.col-sm-4 div>         <div class="col-sm-4">.col-sm-4 div>     div> Или так: <div class="row">         <div class="col-sm-4">.col-sm-4 div>         <div class="col-sm-8">.col-sm-8 div>     div> К столбцам можно применять несколько классов, что укажет, как именно они перестроятся при просмотре на устройствах с разными размерами экранов. К примеру:     <div class="row">         <div class="col-md-4 col-sm-12 col-sm-12">             Responsive block 1         div>         <div class="col-md-8 col-sm-12 col-sm-12">             Responsive block 2         div>     div> Рассмотрим первый пример. Первым делом, откройте предпочтительную Вам среду разработки и создайте файл index.html. Далее потребуется подключить сам Bootstrap. Есть два варианта подключения: Вашего файла соответствующие-и;следующий код: Вашего файла соответствующие-и;следующий код: скачать .zip с официального сайта(http://getbootstrap.com/) и добавить в воспользоваться более быстрым способом и просто подключить с помощью CDN добавив в        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">script> Далее, создадим контейнер, который послужит оберткой для дальнейшего кода. В Bootstrap существуют два класса контейнеров: “container” и “.container-fluid”. Сразу скажу о том, что адаптивности, как таковой, мы добьемся, используя контейнер как первого, так и второго типа. Различие между ними состоит в том, что “.container” будет имеет фиксированную максимальную ширину, в то время как “.container-fluid” является “резиновым” и растягивается на всю ширину экрана. Подробнее о контейнерах можно прочесть на сайте (http://getbootstrap.com/css/#grid) в разделе Containers. Давайте рассмотрим, как это работает на примере. Пример: Создадим с классом “container” в и добавим в него две строки ( с классом “row”). В первую строку добавим два столбца, а во вторую три столбца.  Главное помнить, что суммарное количество столбцов должно быть равным двенадцати. Код выглядит так: DOCTYPE html> <html> <head>        <meta charset="utf-8">               <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">script> head> <body>        <div class="container-fluid">               <div class="row">                      <div class="col-md-4 col-sm-4" >                       Первая строка, первый столбец.                      div>                      <div class="col-md-8 col-sm-8" >                       Первая строка, второй столбец.                      div>               div>               <div class="row">                      <div class="col-md-4 col-sm-12" >                       Вторая строка, первый столбец.                      div>                      <div class="col-md-4 col-sm-12" >                       Вторая строка, второй столбец.                      div>                      <div class="col-md-4 col-sm-12" >                       Вторая строка, третий столбец.                      div>               div>        div> body> html> Давайте откроем пример в браузере и посмотрим на результат. Мы видим, что ширина содержимого страницы фиксированная и не растягивается на всю ширину окна. Для того чтобы увидеть, как перестраиваются столбцы, нужно изменить размер окна браузера. Сперва столбцы перестроятся так: А затем так: Теперь давайте изменим класс нашего на класс “container-fluid”, а все остальное оставим без изменений. Затем откройте Вашу страничку в браузере и посмотрите разницу. Попробуйте изменить размеры окна и посмотрите, как перестраиваются столбцы. Результат после изменений выглядят так: Разобравшись с различиями между этими двумя классами контейнеров, можно приступить к работе с самой сеткой. Предлагаю рассмотреть адаптивность системы разметки Bootstrap на примере создания формы регистрации пользователя. Второй пример: Создадим html страницу со стандартной структурой. Между тегами вставляем с классом “container” для того, чтобы максимальная ширина формы была фиксированной. DOCTYPE html> <html> <head>     <meta charset="utf-8">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">script>     <title>Our registration formtitle> head> <body>     <div class="container">     div> body> html> Теперь мы можем начать работу непосредственно над нашей формой. Добавим в контейнер с классом “row” и в него один с классами “col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4”. Здесь “col-xs-12 col-sm-6 col-md-4” -  уже знакомые нам классы, которые будут задавать ширину формы при разных размерах экрана. Акцентирую внимание на классах “col-sm-offset-3 col-md-offset-4”. Подобные классы “col-md-offset-*” используются для смещения колонок, задавая отступ слева от столбца, к которому они применены на «*» количество колонок. В нашем примере будет сделан отступ шириной в 3 колонки при размере экрана менее 768px, и отступ размером в 4 колонки  при размере экрана от 992px.     <div class="container">         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">             div>         div>     div> Нашу форму следовало бы упаковать в компонент-панель (для удобства). За это отвечает класс “panel”. Применим его к . К этому же применим класс “panel-primary”, который задает синий фон для заголовка. Для добавления самого заголовка также потребуется отдельный с классом “panel-heading”, в который уже помещают теги для задания заголовков любого уровня с примененным к ним классом “panel-title”. <div class="container">     <div class="container">         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">                 <div class="panel panel-primary">                     <div class="panel-heading">                         <h3 class="panel-title">Registration formh3>                     div>                 div>             div>         div>     div> На данном этапе наша форма в браузере будет выглядеть так: После … добавим тег с классом “panel-body” и непосредственно в этот мы будем добавлять поля для заполнения пользователем. В нашей форме будут такие поля: Имя Фамилия Email Пароль Поле для повторного введения пароля, как его подтверждение В качестве поля ввода мы будем использовать тег   с атрибутом type, установленным разными значениями. Нужно отметить, что я использую HTML5, в котором для данного атрибута добавлены определенные значения для адресов электронной почты. Подробнее об этом вы сможете узнать из статьи (http://htmlbook.ru/html/input/type). Также нам понадобится кнопка для подтверждения ввода и дальнейшей отправки информации о пользователе на сервер. В Bootstrap имеется специальный класс “btn” для создания кнопок. Реализуем кнопку с помощью тега    с атрибутом “submit” и  классами “btn btn-info”, где класс “btn-info” задает кнопке синий цвет. Подробнее о кнопках вы сможете прочесть на сайте в разделе Buttons. Нам нужно добавить три с классом “row” внутрь с классом “panel-body”.  В первой и третьей строке будет по два столбца, а во второй строке - один. В данном примере каждое поле формы при уменьшении размера окна перестроится и будет расположено в отдельной строке. Код выглядит так: <div class="panel-body">         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-6">                 <input type="text" class="form-control input-sm" placeholder="First name">             div>             <div class="col-xs-12 col-sm-6 col-md-6">                 <input type="text" class="form-control input-sm" placeholder="Last name">             div>         div>         <div class="row">             <input type="email" class="form-control input-sm" placeholder="Email">         div>         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-6">                 <input type="password" class="form-control input-sm" placeholder="Password">             div>             <div class="col-xs-12 col-sm-6 col-md-6">                 <input type="password" class="form-control input-sm" placeholder="Confirm password">             div>         div>         <input type="submit" value="Register" class="btn btn-info btn-block">     div> На данном этапе форма выглядит так: Изменив размеры окна, мы увидим адаптивность в действии: Наша форма уже является адаптивной, но между строк отсутствуют отступы, что портит внешний вид нашей формы. Для устранения этой проблемы воспользуемся простым решением. Каждый стоит вложить в с классом “form-group” , который задаст отступы от полей сверху и снизу. Подобного результата можно добиться, используя свойство CSS -  “margin”. <div class="panel-body">         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-6">                 <div class="form-group">                     <input type="text" class="form-control input-sm" placeholder="First name">                 div>             div>             <div class="col-xs-12 col-sm-6 col-md-6">                 <div class="form-group">                     <input type="text" class="form-control input-sm" placeholder="Last name">                 div>             div>         div>         <div class="row">             <div class="form-group">                 <input type="email" class="form-control input-sm" placeholder="Email">             div>         div>         <div class="row">             <div class="col-xs-12 col-sm-6 col-md-6">                 <div class="form-group">                     <input type="password" class="form-control input-sm" placeholder="Password">                 div>             div>             <div class="col-xs-12 col-sm-6 col-md-6">                 <div class="form-group">                     <input type="password" class="form-control input-sm" placeholder="Confirm password">                 div>             div>         div>         <input type="submit" value="Register" class="btn btn-info btn-block"> div> Запустив пример в браузере, Вы увидите привлекательную форму регистрации пользователя. Уменьшив размер, получим: Надеемся, что статья была для Вас полезной и послужит толчком для создания потрясающих веб страниц с помощью Bootstrap(http://getbootstrap.com/)!

Введение Технология ADO.NET была создана, чтобы упростить задачу разработчиков и помочь им максимально эффективно работать с многоуровневыми базами данных через интернет или Интернет-сценарии. Данная статья подробно расскажет Вам об объектах ADO.NET, их предназначении, функциях и отношениях. Объектная модель ADO.NET включает в себя две основные составляющие: Соединенная модель (.NET Data Provider – ряд компонентов, в который входит Connection, Command, DataReader и объекты DataAdapter); Отсоединенная модель (DataSet). DataSet Объект DataSet – родительский объект к большинству других объектов в пространстве имен System.Data. Набор данных – отсоединенное представление данных в оперативной памяти. Его основная задача – сохранить как коллекцию DataTables, так и Relations и Constraints между этими объектами DataTables. DataSet содержит несколько методов чтения и записи XML, а также слияния других DataSets, DataTables и DataRows. Некоторые преимущества объекта DataSet: Считывание / Запись; Отсутствие необходимости устанавливать соединение; Содержит один или более объектов DataTable с взаимоотношениями, определенными в коллекции объектов DataRelation; Поддержка фильтрации и сортировки; Содержащийся в DataView объект может быть связан с формами data-aware; Поддерживает автоматическую сериализацию XML (создание XML-документа). DataTable DataTable хранит таблицу информации, обычно полученную от источника данных. DataTable позволяет Вам исследовать фактические строки DataSet через наборы столбцов и строк. Вы можете комплексно связывать управление элемента с информацией, содержащейся в таблице данных. Такое управление, как DataGrid, используется для достижения этой цели. DataTable также хранит информацию таблицы метаданных, такую как первичный ключ и ограничения. DataRows Класс DataRow разрешает Вам ссылаться на определенную строку данных в DataTable. Этот класс разрешает Вам редактировать, принимать или отклонять изменения в отдельных DataColumns. Вы могли бы использовали объект DataRow и его свойства, методы, чтобы получить и оценить значения в объекте DataTable. DataRowCollection представляет фактические данные DataRow, которые находятся в объекте DataTable, также DataColumnCollection содержит данные DataColumn, описывающие схему объекта DataTable. DataColumns DataColumns – стандартный блок DataTable. Такие объекты составляют таблицу. У каждого объекта DataColumn есть свойство DataType, определяющее вид данных в столбцах. Экземпляры DataColumn используются для чтения и записи отдельных столбцов базы данных. Свойство Items DataRow возвращает DataColumn. DataView DataView – объект, обеспечивающий пользовательское представление данных в DataTable. DataViews предоставляет возможность сортировки, фильтрации и других типов настроек. У каждого объекта DataTable есть свойство DefaultView, содержащее в себе объект DataView по умолчанию для DataTable. Изменение объекта DefaultView устанавливает характеристики дисплея по умолчанию для DataTable. Вы можете создать экземпляр DataView и связать его с определенным DataTable в DataSet. Это позволяет Вам увидеть один и тот же DataTable с двух разных сторон одновременно. DataRelation DataRelation предназначен для создания родительских отношений между двумя или более объектами DataTable и DataSet. Определить отношение между двумя таблицами можно, добавив новый объект DataRelation к DataSet. Constraints Каждый DataColumn может иметь несколько Constraints (ограничений). Constraints-объекты поддерживаются через DataTable коллекции Constraints. DataRowView DataRowView – специальный объект, который представляет строку в DataView. У каждого DataView может быть разный RowStateFilter. DataRowView, полученный из DataView, содержит данные, непротиворечивые с RowStateFilter DataView, обеспечивая пользовательское представление данных. Источник: http://www.c-sharpcorner.com/uploadfile/puranindia/ado-net-objects-part-ii/