Введение В современном JavaScript приложении встречается много задач, которые выполняются асинхронно (обращение к серверу, анимация, работа с файловой системой, геолокация). В данной статье будут рассмотрены Promise объекты, как один из вариантов организации асинхронного кода. Асинхронное программирование в JavaScript Асинхронное программирование в JavaScript не связано с многопоточностью. JavaScript – однопоточный, это означает, что не существует стандартных языковых конструкций, которые позволят создать в приложении дополнительный поток для выполнения параллельных вычислений (единственная возможность организовать настоящую многопоточность – использовать Web Workers). Асинхронное программирование – стиль программирования, при котором результат работы функций доступен не сразу, а через некоторое время. Асинхронная функция – это функция, после вызова которой JavaScript приложение продолжает работать, потому что функция сразу выполняет возврат. Результат работы асинхронной функции становится известным позже, и для того, чтобы оповестить наше приложении о полученных значениях, асинхронная функция вызывает другую функцию (callback), которую мы передаем в аргументах при запуске. Например, getDataFromServer(onSuccess); getDataFromServer – асинхронная функция, выполняющая запрос на сервер, onSuccess – callback функция или функция обратного вызова, которая запускается при успешном завершении операции обращения к серверу. Использование callback функций может привести к появлению проблемы, которую называют Pyramid of Doom – callback функция, в которой вызывается асинхронная функция, которой передается callback функция, и в ней же вызывается асинхронная функция и т.д. step1(function(result1) {        step2(function(result2) {              step3(function(result3) {                     // и т.д.              });        }); }); Такой код тяжело читать и сопровождать. Для того, чтобы подобных проблем не было , мы можем использовать различные шаблоны для организации кода. Один из таких шаблонов - Promise. (Другие варианты организации асинхронного кода можно посмотреть в этой статье) Что такое Promise (ECMAScript 6) Promise – прокси объект, который представляет еще не известное значение (значение будет доступно после завершения асинхронной операции). С Promise можно ассоциировать две функции: первая - для выполнения операции, если асинхронная задача завершилась успешно. И вторая - для операции в случае ошибки. Promise может находиться в одном из трех состояний: pending; fulfilled; rejected. Например, мы выполняем AJAX запрос с помощью асинхронной функции, которая возвращает Promise. Как только мы выполним запрос, функция создаст Promise, который будет в состоянии pending. Когда сервер вернет ответ, Promise перейдет в состояние fulfilled, если ответ был 200 OK, или в состояние rejected, если статус код был 500 Internal Server Error (или другой код ошибки). При переходе в fullfiled состояние Promise будет содержать ответ от сервера, при переходе в rejected – ошибку или текст ошибки (все зависит от реализации асинхронной функции). Как только Promise меняет свое состояние, запускается функция, которая была зарегистрирована как реакция на соответствующее состояние. Пример использования асинхронной функции download, которая возвращает Promise: download("data.txt").then(function (data) {     console.log(data); }, function (error) {     console.error(error); }); или такая запись var p = download("data.txt"); p.then(onFulfilled, onRejected); function onFulfilled(data) {     console.log(data); } function onRejected(error) {     console.error(error); } Для того, чтобы установить, что произойдет после завершения асинхронной операции, на объекте Promise необходимо вызвать метод then. Этот метод принимает два аргумента: обработчик для состояния fulfilled обработчик для состояния rejected Функцию then можно вызвать в любой момент, даже если асинхронная операция уже завершена и Promise перешел из состояния pending. Если вызвать then на Promise, который уже находится в конкретном состоянии, то будет вызвана соответствующая состоянию функция, переданная в метод then. Ниже приведен код асинхронной функции download. function download(url) {     // Создание нового объекта Promise     return new Promise(function (resolve, reject) {         var req = new XMLHttpRequest();         req.open('GET', url);         req.onload = function () {             if (req.status == 200) {                 // перевод Promise в состояние fulfilled.                 // req.response - данные доступные в функции-обработчике                 // перехода состояния                 resolve(req.response);             }             else {                 // перевод Promise в состояние rejected                 reject(Error(req.statusText));             }         };         // Обработка сетевых ошибок         req.onerror = function () {             // перевод Promise в состояние rejected             reject(Error("Network Error"));         };         // отправка запроса на сервер         req.send();     }); } Поддержка Promise браузерами http://caniuse.com/#search=Promise Библиотеки для работы с Promise Есть много различных библиотек, которые реализуют спецификацию объекта Promise. Поэтому проблему слабой поддержки Promise ECMAScript 6 можно решить, применив одну из следующих библиотек: jQuery http://jquery.com/ Q https://github.com/kriskowal/q When https://github.com/cujojs/when WinJs http://msdn.microsoft.com/en-us/library/windows/apps/br211867.aspx RSVP.js https://github.com/tildeio/rsvp.js

Введение При разработке компьютерных систем и программ, в том числе таких, в которых функционирует множество оригинальных сущностей и их дублей – экземпляров, возникает проблема отслеживания связей взаимодействия между этими объектами. И чем больше появляется этих объектов , тем сложнее вписать их в структуру приложения. Да, можно сказать что здесь явные проблемы с архитектурой и так не должно быть, но все равно мы наталкиваемся на проблему создания крупной многообъектной системы с гибкими динамическими связями и адаптивным поведением. Лучшее решение – событийно-ориентированное программирование! Итак, событие – это внезапное происшествие, появление которого нельзя предугадать, а можно только к нему готовиться. В подобном русле работает и человеческих мозг. Он ожидает появления события и, когда оно происходит, как-то на него реагирует. Давайте рассмотрим небольшой мысленный эксперимент. Представьте дорогу, пешеходный переход и светофор, который регулирует переход в данном месте. Светофор – это объект, который порождает событие. Он по воле своего внутреннего устройства будет включать или отключать зеленый свет, который будет разрешать пешеходам переход через улицу. В это время на тротуаре начинают собираться люди. Каждый человек – это объект, содержащий специфическое поведение, которое называется обработчиком события. В данном случае этот обработчик будет отвечать за пересечение улицы и будет вызываться во время возникновения события. У каждого человека обработчик разный, ведь все люди переходят через улицу по-разному. Один будет идти быстро, другой медленно, третий - смотреть на машины, которые стоят на перекрестке, а четвертый - следить за таймером, который будет отсчитывать секунды. Но каждый из них не предполагает, когда конкретно произойдет это событие, потому все они ждут на тротуаре. Когда человек подходит к переходу, он подписывает свой обработчик события перехода дороги на конкретное событие этого светофора. Если человек передумает переходить или, например, отойдет поговорить по телефону, то он не будет выполнять свой обработчик, если событие возникнет. И, наконец, когда светофор включается на зеленый, все люди начинают переходить дорогу. Возникло событие – выполнился обработчик. Что-же нам позволяет сделать событийную модель? Она разрешает динамически изменять связи между объектами и не только расторгать или устанавливать их, но и менять характер самого действия. Давайте рассмотрим пример создания события на языке C#. namespace TrafficLight {     // Светофор     public class Light     {         // Событие появления зеленого света         public event EventHandler Green;         // Метод который вызывает событие         public void SwichToGreen()         {             Green.Invoke(this, new EventArgs());         }     }     // Человек     public class Human     {         public string Name { get; private set; }         public Human(string name)         {             Name = name;         }         // Метод обработчик события перехода через дорогу         public void CrossingTheRoad(object sender, EventArgs e)         {             Console.WriteLine(this.Name + " crossing!");         }     }     class Program     {         static void Main(string[] args)         {             // Создание светофора             Light light = new Light();             // Создание людей             Human human1 = new Human("Alex");             Human human2 = new Human("Bob");             Human human3 = new Human("Alice");             // Подписка на событие             light.Green += human1.CrossingTheRoad;             light.Green += human2.CrossingTheRoad;             light.Green += human3.CrossingTheRoad;             // Вызов события             light.SwichToGreen();             Console.ReadKey();         }     } } Таким образом, язык C# позволяет быстро и легко создавать приложения, которые используют событийную модель. Более подробно узнать о событиях Вы можете в двенадцатом уроке курса C# Базовый. Для практики можете создать небольшую игру с игровыми объектами, взаимодействующими посредством событий.

1. Используйте сброс CSS стилей в браузерах (Reset CSS) Различные браузеры по-разному устанавливают шрифты, поля и другие свойства. Вместо того, чтобы устранять каждый элемент по одному, большинство разработчиков используют “Reset CSS” стиля для сброса таких параметров, как margin, border, font-size и других. Примеры и библиотеки для сброса CSS: Eric Meyer Yahoo! Crucial 2. Используйте средства разработки браузера и дополнительные плагины. Очень полезно при разработке визуализировать «невидимые» части веб-страницы, например, свойства - margin, padding, parent positions и так далее. Вместо того, чтобы спрашивать себя, почему функция остановилась или неверно задан border style, рекомендуется использовать встроенные средства веб-разработки или использовать плагины для браузера. Firebug – плагин для браузера Firefox. Фантастическая и бесценная вещь при разработке страницы. Yahoo!'s YSlow – Плагин для Firebug для проверки скорости загрузки страницы. 3. Выучите JavaScript JavaScript является языком высокого уровня, где автоматически выполняется установка и компилирование. Он подходит для людей даже без опыта программирования. С появлением AJAX, JS становится очень важной частью современных веб приложений. 4. Выучите Photoshop Photoshop - необходимая вещь для каждого разработчика. Используя различные инструменты программы, Вы можете создать как отдельную часть дизайна, например, кнопку, так и полноценный дизайн, который не только произведет впечатление на клиентов, но и позволит Вам проявить Ваше творчество. 5. Тестируйте Ваш продукт на IE 30% пользователей интернета до сих пор используют данный браузер для просмотра контента. К сожалению, Internet Explorer на данный момент не получил стандартов HTML, и веб разработчики должны учитывать это в своих продуктах. Проверяйте Ваш продукт на всех браузерах. Например, Firefox имеет полную поддержку стандарта HTML, в то время как Internet Explorer только продолжает развиваться. Источник: http://www.hackification.com/2008/11/06/ten-web-development-tips-i-wish-id-known-two-years-ago/

Введение ADO.NET – это набор классов (фреймворк) для работы с базами данных, а также XML файлами. Аббревиатура ADO расшифровывается как ActiveX Data Objects. Данная технология имеет методы и классы для извлечения и обработки данных. Список .NET приложений, которые используют возможности ADO.NET для различных действий с БД: ASP.NET Web Applications Console Applications Windows Applications. Структуры подсоединения к БД Можно определить два типа архитектуры подключения: Архитектура, подключенная к базе: подсоединена к БД на протяжении всего рабочего времени. Архитектура, не подсоединённая к БД: приложение, автоматически подключается/отключается в процессе работы. Приложения на такой архитектуре используют временные данные, хранящиеся на стороне клиента (DataSet). ADO.NET и его библиотеки классов   На данной диаграмме видны различные типы приложений (Веб приложения, консольные приложения, приложения для Windows и так далее), использующие ADO.NET для подсоединения к БД (SQL Server, Oracle, OleDb, ODBC, XML-файлы и так далее). Классы в ADO.NET Также на предыдущем рисунке мы видим различные классы, а именно: Connection Class Command Class DataReader Class DataAdaptor Class DataSet.Class 1. Connection Class Данные классы применяются в ADO.NET для подсоединения к БД. 2. Command Class Данный класс обеспечивает хранение и выполнение SQL команд. Ниже приведены различные команды, выполняющиеся с помощью данного класса. ExecuteReader: Возвращает данные к клиенту в виде строк. ExecuteNonQuery: Выполняет команду, изменяющую данные в базе данных. ExecuteScalar: Данный класс возвращает только одно значение. ExecuteXMLReader: (Только для классов SqlClient) Получает данные из базы данных SQL Server 2000 с помощью XML-потока. 3. DataReader Class DataReader используется для получения данных. Он используется в сочетании с Command Class для выполнения SQL-запроса. 5. DataSet Class Класс DataSet – сердце ADO.NET, представляющее из себя набор объектов DataTable. Каждый такой объект содержит много объектов DataColumn и DataRow. Подключение ADO.NET к базе данных Для настройки подключения Вы должны быть знакомы со строками подключения (connection strings). ConnectionString – строка переменной (регистр не учитывается). Строки подключения нужны нам для параметра SQLConnection. Данные примеры содержат основные значения, а именно: provider, server, database, userid и password. SQL Аутентификация String constr="server=.;database=institute;user id=rakesh;password=abc@123"; Или:  String constr="data source=.;initial catalog=institute;uid=rakesh;pwd=abc@213"; Windows Аутентификация (Windows Authentication) String constr="server=.;database=institute;trusted_connection=true" Или:  String constr="server=.;initial catalog=institute;integrated security=true" Получение и отображение данных из базы данных Получить и отобразить данные можно по такой схеме: Создайте объект SqlConnection, используя строку подключения. Откройте соединение. Создайте SQLCommand. Укажите тип SQLCommand. Выполните команду (используйте executereader). Получить результат (используйте SqlDataReader). Закройте соединение. Получите результат. Ниже приведен код для подсоединения к SQL:  using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Data.OracleClient; using System.Data.OleDb; using System.Data.Odbc; namespace AdoDemo {     public partial class WebForml : System.Web.UI.Page     {         protected void Page_Load(object sender, EventArgs e)         {             SqlConnection con = new SqlConnection("data source=.; database=Sample; integrated security=SSPI");             SqlCommand cmd = new SqlCommand("Select * from tblProduct", con);             con.Open();             SqlDataReader rdr = cmd.ExecuteReader();             GridView1.DataSource = rdr;             GridView1.DataBind();             con.Close();         }     } } Вы должны использовать System.Data.SqlClient для подключения к SQL. В предыдущем коде мы использовали классы SqlConnection, SqlCommand и SqlDataReader, потому что наше приложение обращалось к SQL Server, а он понимает только SQL. Подключение к базе данных Oracle При подключении к БД Oracle Вам нужно изменить имя некоторых классов, а именно SqlConnection на OracleConnection, SqlCommand на OracleCommand и SqlDataReader на OracleDataReader. Также вначале используйте System.Data.OracleClient. Источник: http://www.c-sharpcorner.com/UploadFile/18fc30/understanding-the-basics-of-ado-net/

Вступ Іноді виникає потреба швидко прочитати чи записати числа у двійковій чи шістнадцятковій системі числення, наприклад, працюючи з різними байтовими редакторами, під час розрахунків формул з побітовими операціями чи роботі з кольором. Часто в таких ситуаціях немає можливості довго переводити числа за допомогою формул або калькулятора. Про швидкі способи переходу між системами числення йтиметься у цій статті. Перехід від десяткової системи до двійкової Перший випадок – рахуємо від десяткової системи до двійкової. Основне, що потрібно пам'ятати в даному випадку – це ряд ступенів двійки (1, 2, 4, 8, 16, 32, 64, 128 і т. д.). Навіть якщо його ви не знаєте, то можна просто кожне наступне число множити на двійку. Оскільки молодші розряди йдуть праворуч, а старші – ліворуч, то їх записуватимемо у зворотному порядку справа наліво. Для прикладу будемо переводити число 115. Далі дивимося, якщо значення розряду вміщується в число, то віднімаємо від нього це значення і ставимо в цьому розряді 1, інакше ставимо 0. Зворотний переклад ще простіше – треба підсумувати всі значення розрядів, які відзначені одиничками: 64+32+16+2+1=115. Перехід до шістнадцяткової системи Тепер давайте розберемося із шістнадцятковою системою. Маючи на увазі те, що кількість чисел, які кодуються тетрадою (4 біти) і одним шістнадцятковим символом співпадають, відповідно кожен символ кодує одну двійкову тетраду. В результаті одержали число 0х73. Головне пам'ятати, що А=10, B=11, C=12, D=13, E=14, F=15. Якщо є потреба перевести десяткове число в шістнадцяткове або навпаки, то тут найпростіше спочатку буде перевести число в двійкове уявлення, а потім тільки в шістнадцяткове або десяткове відповідно. У результаті ми навчилися швидко переводити числа з однієї системи числення до іншої. Головне, що потрібно пам'ятати – ступені двійки і вміти гарно додавати та віднімати. Детальніше про машинну математику ви можете дізнатись у другому уроці курсу C# Стартовий. Попрактикуйтеся самостійно і переведіть кілька чисел з однієї системи до іншої, звіряючись з калькулятором. Трохи практики – і ви всьому навчитеся.

Введение В августе 2014 года были обновлены продукты, работающие на .NET, а именно: ASP.NET vNext, .NET Native и RyuJIT. ASP.NET vNext ASP.NET vNext - обновленная версия ASP.NET, используемая для создания клиент-серверных приложений. Разработчики продолжают добавлять новые функции и улучшают разработку ASP.NET vNext приложений, написанных в Visual Studio 14. Список преимуществ, почему ASP.NET vNext лучше выбирать в качестве веб-платформы: Единое и улучшенное API для MVC и Web API. Значительно улучшена производительность при запуске и пропускная способность. Полная поддержка .NET Framework. Компоненты ASP.NET vNext не надо регистрировать, потому что конфигурационные сведения уже встроены. Поддерживает работу с Mono на Mac и Linux Новые функции Минимальный Формат Проекта «Minimal Project Format» Формат проекта ASP.NET (kjproj) также был обновлен. Новый функционал теперь будет влиять на работу внутри проекта Visual Studio: Легкий контроль всех исходников, так как kproj не будет изменятся при добавлении, перемещении или переименовании файла. Улучшенный опыт использования командной строки Visual Studio и ASP.NET, поскольку среда разработки не нуждается в списке файлов. Это хорошо работает, когда над проектом работают один-два человека. Поддержка Модульного Тестирования «Unit Testing Support» Была добавлена базовая поддержка для модульного тестирования, теперь можно использовать любой фреймворк для тестирования. Разработчиками создана первоначальная поддержка xUnit, работающая в рамках текущего Visual Studio Test Explorer. Скаффолдинг «Scaffolding» ASP.NET Scaffolding – это фреймворк для генерации кода, используемый в ASP.NET веб приложениях. Его использование позволяет сократить время разработки конфигурационных файлов для приложений. Новая версия позволяет добавить первоначальную поддержку фреймворка в ASP.NET vNext, а также создавать собственный скаффолдинг для генерации контента. Обновленный домашний репозиторий «Update Home Repo» “Home Repo” – Ваш репозиторий на Github для командной строки ASP.NET vNext. В новой версии были добавлены: новая документация, примеры и скрипты. Теперь имеются простые ASP.NET vNext примеры “Home Repo” для проверки работоспособности вашей программной среды. .NET Native Обновление .NET Native включает в себя лимитированную поддержку “Windows Communication Foundation” (WCF). Так же были добавлены новые свойства для WCF: CustomBinding BasicHttpBinding HttpTransportBindingElement TextMessageEncodingBindingElement ChannelFactory ClientBase DataContractSerializer RyuJIT – Новое поколение JIT компиляторов В JIT компиляторе RyuJIT обновилась исполняющая библиотека CoreCLR. Библиотека SIMD на данный момент не поддерживается, но разработчики обещают ее добавить в следующих релизах. Подробнее про компилятор RyuJIT Вы можете узнать на ресурсе: blogs.msdn.com/b/dotnet/archive/2013/09/30/ryujit-the-next-generation-jit-compiler.aspx Ознакомиться со всеми обновленными продуктами можно в Visual Studio 2014 или Visual Studio 2015 Preview. Источник: blog.msdn.com

Введение Roslyn – это компилятор с открытым исходным кодом для C# и Visual Basic. Roslyn представляет из себя библиотеку (API), интегрируемую в проект. Данный компилятор не имеет ничего общего с CLR. Таким образом, он может скомпилировать код с преобразованием в Intermediate Language для последующей передачи в CLR. Установка компилятора Для установки Roslyn Вам нужно скачать и установить­­ Visual Studio 2015 Preview (рекомендуется установка на виртуальной машине). Затем перейдите на страницу проекта Roslyn и скачайте исходный код. Распаковав файл, Вы увидите папку с несколькими файлами и папками в ней. Нас интересует только папка Src: Дважды щелкните на Roslyn.sln для загрузки проекта. После этого настройте solution в VS и перейдите в Roslyn/Binaries/Debug: Использование компилятора Каждый, кто использует C#, наверняка знаком с csc.exe. Посмотрев на дату создания файла, Вы увидите, что одновременно с открытием проекта Roslyn скомпилировался csc.exe. Как мы этим будем пользоваться? Запустив файл csc из командной строки, Вы увидите ошибку: C:\Users\Michael\Documents\Visual Studio 2015\Projects\roslyn\Binaries\Debug>csc Microsoft (R) Visual C# Compiler version 1.0.0.0 Copyright (C) Microsoft Corporation. All rights reserved. warning CS2008: No source files specified. error CS1562: Outputs without source must have the /out option specified C:\Users\Michael\Documents\Visual Studio 2015\Projects\roslyn\Binaries\Debug> Тут нечему удивляться, поскольку Вы не указали исходный файл для компиляции. Теперь можно посмотреть ошибки и предупреждения в нашем исходном коде. Если мы будем искать текст Outputs without source must have the /out option specified, то мы найдем место в коде, выдающее нам ошибку. В этом случае ошибка исходит из класса ResourceManager. Разбираем пример Скачайте и установите: •       Visual Studio 2015 Preview SDK •       Visual Studio Project Templates для Roslyn •       Syntax Visualizer для Roslyn После установки откройте Visual Studio 2015 Preview и выберите шаблон “Compiler Platform Console Application”: Добавьте следующий код в Main: public static void Main(string[] args)  {      SyntaxTree tree = CSharpSyntaxTree.ParseText(      @"using System;      using System.Collections.Generic;      using System.Text;      namespace HelloWorld      {          class Program          {              static void Main(string[] args)              {                  Console.WriteLine(""Hello, TDN!"");              }          }      }");      var root = (CompilationUnitSyntax)tree.GetRoot();      var compilation = CSharpCompilation.Create("HelloTDN")             .AddReferences(references: new[] { MetadataReference.CreateFromAssembly(typeof(object).Assembly) })             .AddSyntaxTrees(tree);  } Установите точку остановки (breakpoint) на последней фигурной скобке и запустите Syntax Visualizer через меню View -> Other Windows -> Roslyn Syntax Visualizer. Вы увидите следующее: Запустите приложение и перейдите в верхнюю часть документа. Нажмите на объявленный SyntaxTree, и он перенаправит Вас на часть кода, в котором содержится большая часть информации. В нашем примере мы рассматриваем Leading и Trailing WhiteSpace. Теперь мы увидели процесс компиляции с помощью Roslyn. Выводы Roslyn - это отличный метод получения полезной информации о нашем исходном коде. Он предоставляет множество функциональных возможностей, например: IntelliSence, переформатирование кода и т.д. Также он обеспечивает совместимость языков. Данный функционал дает много возможностей для инноваций в таких областях, как мета-программирование, генерация кода и его преобразование, интерактивное использование языков C# и Visual Basic. Источник: http://developer.telerik.com/featured/roslyn-nutshell/

Введення  Використовуючи форми в HTML5, Ви часто використовуєте методи перевірки (валідації) даних, адже їх ігнорування може призвести: до втрат користувачів, до сміття в базі даних або до взлому сайту. Історично склалося, що створення форм із гарною валідацією – складне завдання. В HTML5 є інструменти оброблення даних для форм, з їх допомогою можна проводити валідацію, що включає в себе спеціальні атрибути і нові типи вхідних даних. Давайте розберемо їх детальніше. 1. Спеціалізовані типи вхідних даних HTML5 містить кілька нових типів введення. Вони використовуються для створення поля введення, що приймає тільки певні типи даних. Нові типи вхідних даних виглядають наступним чином: color date datetime datetime-local email month number range search tel time url week Приклад: <input type="email"/> Якщо браузер не підтримує даний тип введення, поле поводитиметься як звичайне поле введення тексту. 2. Обов’язкові поля для заповнення  Просто додавши атрибут "required"до <input>, <select> або <textarea>, Ви кажете браузеру, що значення має бути заповнене. <input type="checkbox" name="terms" required > 3. Ліміти Ми можемо встановити деякі обмеження та ліміти, наприклад, максимальні та мінімальні значення для числових полів. Щоб обмежити довжину поля введення, треба використовувати атрибут "maxlength". <input type="text" name="name" required  maxlength="15"> Поле <input type="number" /> використовує атрибути "max" та "min", щоб створити діапазон можливо-допустимих значень (у прикладі мінімально допустимий вік – 18). <input type="number" name="age" min="18" required> 4. Стилізування CSS3 псевдо-класи дозволяють прикрасити форму незалежно від її стану. Це: :valid :invalid :required :optional :in-range :out-of-range :read-only :read-write У прикладі ми об'єднали селектори "valid" та "invalid" із псевдо-класом "focus" для зафарбовування поля форми в червоний або зелений, залежно від того, що робить користувач: вибирає або друкує. input:focus:invalid, textarea:focus:invalid{     border:solid 2px #F5192F; } input:focus:valid, textarea:focus:valid{     border:solid 2px #18E109;     background-color:#fff; } 5. Підказки Ви помічали спливаюче вікно з підказкою під час відправлення неправильно заповненої форми? Встановивши атрибут "title" для поля введення, можна додати підказки, що вказують на помилки при порушенні тих чи інших правил валідації. Зверніть увагу, що різні браузери відображають підказки по-різному. У браузері Chrome значення назви атрибуту буде відображатися дрібним шрифтом, під основним повідомленням про помилку. У Firefox інша проблема: використовуючи атрибут “pattern” після того, як він береться в якості шаблону, Ви не отримаєте спливаючу підказку.  <input type="text" name="name" title="Будь ласка, введіть ім’я користувача."> 6. Шаблони Атрибут "pattern" дозволяє розробникам задавати регулярний вираз, який браузер порівнює з даними введення, перш ніж відправити форму заявки. Ось як це можна використати: <input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com"> З функцією фільтрування вхідних даних ми можемо приймати тільки повну e-mail адресу. Джерело: http://tutorialzine.com/2014/12/quick-tip-easy-form-validation-with-html5/

Введение  Подошел к концу 2014 год и самое время спросить себя: «Какие тенденции будут преобладать в сфере веб-разработки в 2015 году?». Представляем вашему вниманию подборку трендов, которые, по нашему мнению, будут популярны в следующем году. 1. Адаптивный дизайн Вместе с ростом популярности на планшеты начал расти спрос на адаптивный дизайн, сегодня это - неотъемлемая часть любого сайта. С помощью “Responsive Design” пользователь сможет спокойно просматривать Ваш сайт на любом девайсе, будь то PC или мобильный телефон. Зачем Вам адаптивный дизайн? Ответ простой, сейчас все больше пользователей просматривают новости через разные устройства с разным расширением экрана, поэтому выбор ресурса напрямую зависит от удобства его использования на всех носителях. Главный критерий выбора – ширина контента не должна превышать ширину экрана, иначе пользователю будет неудобно воспринимать информацию и он к вам больше не вернется.  2. Плоский дизайн (Flat Design) Плоский дизайн начал набирать свою популярность после релиза Windows 8, благодаря компании Microsoft и ее Metro-стилю. Концепция плоского дизайна заключается в том, что двухмерные изображения не перегружают восприятие пользователя и уменьшают загруженность ресурса. В плоском дизайне отсутствуют лишние эффекты: тени, блики и градиенты, в противовес им выдвигаются яркие цветовые решения. 3. Карточный дизайн Карточный дизайн — это способ подачи контента на страницах сайта. Каждая карточка содержит в себе определенную информацию, это дает ресурсу возможность концентрировать внимание пользователя и легко группировать содержимое сайта.  Главное преимущество данного типа дизайна — это легкость взаимодействия пользователя с Вашим сайтом, ведь карточки легко можно опубликовать на своей странице в социальных сетях, сохранить в избранное или прокомментировать. Первопроходцами карточного дизайна считаются  Pinterest и Google+. Благодаря своей отзывчивости и адаптивности все больше сайтов переходит на карточный дизайн. 4. Фоновые изображения и видео За последнее время все большую популярность набирают ресурсы с широкоформатным изображением  или видео на фоне,  с небольшой цитатой поверх него. Этот прием идеально подходит для сайта-портфолио или сайта-визитки. 5. Рисованные иллюстрации и шрифты Сайты с рисованной типографикой или иллюстрациями подкупают своей неповторимостью. Все больше сайтов начали использовать в своем дизайне элементы, разработанные вручную, именно под определенный проект. Эти детали делают сайт уникальным и запоминающимся, пользователю приятней пользоваться таким сайтом, он захочет рассказать о нем другу и обязательно вернется сам. 6. SVG иконки и анимации SVG — это специальный язык разметки векторной графики, который разрабатывается W3C с 1999 года. Возможность создавать SVG изображения доступна в большинстве векторных редакторов: Illustrator, Corel Draw или Sketch. SVG-графика часто используется для создания иконок, они выглядят качественней и легко адаптируются под разные расширения экрана. И напоследок, с помощью SVG можно создавать анимированные иконки.  Источник: http://www.sevensignature.com/blog/articles/top-10-sign-things-come-2015-web-design-trends/

Введение Данная статья будет полезна web разработчикам, которые начинают работать с языком JavaScript и знакомятся с инструментами разработки, встроенными в браузер. Умение «дебажить» JavaScript приложение является очень важным для веб разработчика, поскольку позволяет быстро найти причину ошибки в сценарии. Отладка в Google Chrome Отладка приложения – процесс обнаружения, локализации и устранения ошибок при помощи отладчика (инструмента встроенного в среду разработки или другое ПО). При отладке разработчик может узнать значения переменных и ход выполнения программы. Во всех современных браузерах есть инструменты, позволяющие разработчику анализировать работу веб приложения, в том числе и выполнять отладку JavaScript кода. Для того, чтобы открыть инструменты веб разработчика, в большинстве браузеров используется клавиша F12. В данной статье будет рассмотрена отладка JavaScript приложения на примере инструмента Web Inspector в браузере Google Chrome. Ниже приведен HTML код страницы с простым сценарием, который будет анализироваться с помощью Web Inspector. <div id="myDiv">div> <script>      var div = document.getElementById("mydiv");      var text = "";      for (var i = 0; i < 10; i++)      {         text += i + " ";      }    div.innerHTML = text; <script> Задача данного сценария - создать ряд цифр от 0 до 9-ти и отобразить их в элементе div на странице. Но код не срабатывает, и мы попробуем найти проблему, выполнив отладку.  Запуск Web Inspector и переключение в окно отладчика. Нажав на клавишу F12, мы получаем следующее окно в Google Chrome. Убедитесь в том, что выбран пункт меню Sources, который и позволяет произвести отладку. Окно отладки делится на три панели (отмечены на изображении цифрами):      1 – Панель файлов, подключенных к текущей странице, в которых есть JavaScript код.      2 – Панель, в которой будет отображаться JavaScript код выбранного файла.      3 – Панель с дополнительными настройками, упрощающими отладку. Установка точки останова или breakpoint Для того, чтобы начать отладку приложения, нужно определить, на каком этапе произойдет остановка выполнения сценария. Для этого, как и в большинстве других инструментах отладки, необходимо установить точку останова или breakpoint. Точка останова (breakpoint) – метка, которая указывает отладчику, на каком этапе выполнения приложения нужно сделать паузу. Для начала необходимо выбрать файл, в котором будет выполнятся отладка JavaScript (для этого дважды щелкаем по файлу index.html) После этого устанавливаем точку останова, нажимая на номер строки в центральной панели, которая отображает код выбранного файла. Точка останова отображается синим прямоугольником. Теперь, если обновить страницу, сценарий должен выполниться до 9 строки и остановиться. Далее мы сможем пошагово выполнять отладку приложения и отслеживать значения переменных в сценарии. Одно из преимуществ отладчика – отображение ошибок, выброшенных интерпретатором. На строке 14 выводится сообщение – Uncaught TypeError: Cannot set property ‘innerHTML’ of null (невозможно установить свойство ‘innerHTML’ для null). Это сообщение уже может помочь в решении проблемы сценария. Сценарий пытается обратиться к свойству на переменной div - сообщение говорит о том, что в этой переменной null и для null нельзя установить значения свойства. Если в переменной null - значит нужно искать код, который записывает в переменную значение. Пошаговая отладка JavaScript После установки breakpoint нужно начать отладку. Для этого достаточно обновить страницу (F5). При наличии точки останова сценарий остановился на строке №9 (об этом свидетельствует синяя подсветка строки). С помощью горячей клавиши F10 можно пошагово выполнять приложение и отследить значения переменных. При первом нажатии на F10 выполнение переходит на следующую строку кода и, наведя курсор на переменную div, мы сможем увидеть значение этой переменной. Отладчик показывает, что в переменной находится значение null. Ошибка на строке №9 вызвана отсутствием инициализации переменной div должным образом. После внимательного изучения этой строки мы находим ошибку – неправильно указанный id элемента “myDiv”. Дополнительную информацию по отладке JavaScript приложений Вы можете найти в бесплатном видео уроке https://itvdn.com/ru/video/javascript-advanced. В этом видео уроке будет идти речь не только об отладке, но и о работе с объектами и прототипами в JavaScript.