Введение Элементарные и ссылочные типы, или элементарно-ссылочный дуализм на примере строк в JavaScipt. Одно из ключевых правил языка JavaScript состоит в особенностях выполнения операций над элементарными типами данных и ссылочными типами. Так, числа и логические величины  являются элементарными типами данных, операции над ними выполняются по значению, они состоят из относительно небольшого и заранее определенного числа байт, поэтому операции над ними легко выполняются даже низкоуровневым интерпретатором JavaScript. Примером ссылочных типов являются объекты. Что касается массивов и функций – они являются специализированными типами объектов, поэтому также представляют собой ссылочный тип данных. Эти типы данных характеризуются произвольным количеством свойств и элементов, поэтому операции над ними выполняются намного сложнее. В случае массивов и объектов больших размеров, операции по значению могут привести к избыточному копированию и сравнению огромных объемов памяти, что легко может поставить под сомнение оптимальность использования клиентских ресурсов. Примером работы с элементарными типами послужит следующая пара инструкций: var a = 5; // переменная с именем a хранит значение 5 var b = a; // производится операция копирования, исключительно по значению: переменная с именем b хранит другое значение 5 (его дубликат) другим примером может послужить изменение значения внутренней копии переменной: var a = a + 5; // эта строка изменяет только внутреннюю копию переменной с именем a, перезаписывая в нее значение 10 Что касается работы со ссылочными типами, простейшим примером послужит набор операций над двумя массивами: var myArray = [10, 20, 30, 40]; // создаем переменную ссылочного типа, а именно массив с именем myArray состоящий из четырех элементов var otherArray = myArray; // присваиваем новой переменной с именем otherArray первую перменную, при этом, копирование значений из переменной с именем myArray не производится, мы разрешаем новой переменной работать со значениями из первой. otherArray[0] = 110; // так изменив якобы значения ново-созданной второй переменной, на самом деле мы производим операцию перезаписи значений из первой переменной. alert(myArray); // отобразим значение 110,20,30,40 Стоит отметить, что строки, которые, на первый взгляд, могут восприняться в качестве ссылочного типа в силу неограниченности своей длины, что касается JavaScript, то строки зачастую рассматриваются с позиции элементарного типа из-за того, что не являются сущностью с природой объекта. Что же касается реальных случаев, то строки не могут вписываться в двойственный элементарно-ссылочный тип. Строки нельзя представить объектами, поэтому можно предположить, что их можно отнести к элементарному типу, но такого рода ситуация может привести к непроизвольному расходованию системных ресурсов, в случае произведения операций по значению, в силу возможности задания произвольной длины строки. Поэтому в JavaScript нельзя изменить содержимое строки, пусть даже существует специальный метод charAt(), который после вызова вернет символ из заданной строки, но не существует метода setChartAt(), который мог бы ввести на это место другой символ. Строки в JavaScript преднамеренно созданы как неизменяемые сущности, в нем отсутствуют элементы языка, предполагающие возможность изменения символов в строке. Несмотря на то, что невозможно определить, каким образом производится копирование строк, есть возможность определить, как производится сравнение строк – по ссылке или же по их значению. <script>         var row1 = "hello world";         var row2 = "hello " + "world";         if (row1 == row2) {             alert("строки сравниваются по значению")         } script> Поскольку мы сравниваем абсолютно разные строки, состоящие из одинаковых последовательностей символов, но они интерпретируются как эквивалентные, следовательно, увидим соответствующую надпись. Важно помнить, что сравнение строк выполняется строго посимвольно и производится для числовых значений отдельного символа из общепринятой кодировки Unicode последовательно. Кроме того, сравнение символов происходит с учетом регистра, т.е. все прописные буквы будут иметь «вес» меньший, чем соответствующие строчные буквы. var word1 = "hello"; var word2 = "Hello"; var rez = word1 < word2; document.write(rez); // false Также стоит помнить, что сравнение происходит от первого определения разных символов, при этом длина строки не учитывается var word1 = "hello w"; var word2 = "hello World"; var rez = word1 > word2; document.write(rez); // true Порой получая знания от пользователя в виде строк, к примеру, используя prompt, возвращается строка, введенная пользователем. В таком случае нельзя сравнивать числа, полученные от пользователя, поскольку результат будет не верен. var a = "5"; var b = "10"; var rez = a > b; document.write(rez); // true Посимвольное сравнение дает результат: символ ‘5’ больше, чем ‘1’. Стоит помнить о явном преобразовании полученных значений к числовым. Использую унарный знак плюс «+» var a = "5"; var b = "10"; var rez = +a > +b; document.write(rez); // false Как видим, язык JavaScript имеет много тонкостей, о которых стоит помнить при написании своих сценариев и программ. В дальнейшем вы сможете самостоятельно обнаруживать подобные особенности и грамотно ими пользоваться.  

Введение В нашей стране в последнее время существует большая проблема с трудоустройством, особенно среди недавних выпускников и молодых специалистов. Именно поэтому был создан проект Labitex – специализированная IT-биржа труда, помогающая соискателям, связанным с IT-сферой, успешно найти работу. В этой статье будут рассмотрены основные трудности и мелочи, с которыми сталкивается соискатель при поиске работы. В чем специфика IT-биржи труда, чем она отличается от рекрутингового агентства Задача рекрутингового агентства – находить работу. У IT-биржи труда задача другая. Она предлагает работу, но, в то же время, если соискатель не подходит работодателю по уровню знаний, биржа труда отправляет его на повышение квалификации. Биржа труда – не только буфер между соискателем и работодателем, она предоставляет обучение в партнерских учебных центрах. Проект Labitex работает со школами, техникумами, вузами, учебными центрами и с IT-компаниями. С чего начинается знакомство соискателя с нами Самое простое, с чего можно начать – составление профессионального резюме. Ведь немногие знают, как оно должно выглядеть, как правильно его создать. Наш отдел HR помогает составить резюме. При составлении резюме нужно уделять внимание как его форме, так и содержанию. Существует много способов оформления, структурирования и форматирования резюме. Стоит помнить, что неправильно оформленное и недостаточно информативное резюме служит причиной отказа в 40 % случаев. И наоборот, хорошо составленное CV может показать сильные стороны даже не очень опытного кандидата и заинтересовать работодателя. Labitex в процессе работы с IT-компаниями знает, какую информацию хочет видеть работодатель, как в резюме подчеркнуть свои сильные стороны и скрыть слабые. Оформление социальных сетей Проблема в том, что соискатели не до конца понимают важность своих социальных профилей, того, как они выглядят. Они не знают, что социальные сети просматриваются работодателем всегда. Специалисты Labitex консультируют, каким должен быть контент и фотографии, говорят о том, что нужно указывать опыт работы, ведь многие используют социальные сети совсем не для того, чтобы показать свои достижения. Также необходимо иметь аккаунт в сети LinkedIn. Каждый HR знает, что в этой социальной сети тоже ищут сотрудников. Профайл в LinkedIn – неотъемлемая часть при поиске работы, тем более в сфере IT. Собеседование с HR Шутя, в Labitex называют эту услугу велотренажером. Структура собеседования в IT-компании такая: сначала соискатель проходит собеседование с HR, это как сито, где оставляют нужных подходящих людей, а остальных отправляют домой. Все должны понимать, что HR не может принять на работу. Функция HR –передать человека на собеседование дальше техническому специалисту, либо же отказать. Сам HR не может принимать решения о приеме на работу. Немногие представляют, что такое собеседование с HR, чего будет ждать HR, что кандидат должен говорить. Собеседование с HR в Labitex – репетиция собеседования. Наш HR объяснит, для чего он задает определенные вопросы, как он будет пользоваться полученной информацией, на что будет обращать внимание, а на что нет. После этого соискателю намного проще, так как когда он приходит на боевое собеседование с HR, он уже четко понимает, чего от него хотят и что он будет говорить. Собеседование – не экзамен, который Вы можете либо сдать, либо нет. Это исключительно договор о партнерстве двух сторон. Не стоит бояться собеседования. Нужно понимать, чего Вы хотите от компании и что она может дать Вам. Семинары Мы работаем над интересностью, полезностью, функциональностью семинаров. Самый ключевой семинар, он же и самый сложный, длится около 6 часов и называется «Правильное составление резюме и как пройти первое собеседование в IT-компанию». На нем мы рассматриваем, как составить резюме, что в нем должно быть и чего не должно быть. Все участники семинара заполняют анкеты, которые потом мы трансформируем в резюме, оформленное согласно требованиям работодателя. Многие даже не понимают, как оно должно выглядеть, потому что этого никто не объясняет. Мы говорим о форме и содержании. На этом же семинаре мы также рассматриваем, как пройти собеседование с HR, что захочет услышать HR от соискателя, что соискатель должен спрашивать у HR. Помощь персонального ассистента Чтобы получить работу, кандидат должен многое знать и многое уметь. Labitex сотрудничает с учебными центрами, потому что для нашей компании очень важно, чтобы на выходе из учебных центров все специалисты были качественно подготовлены. Конкуренция велика, рынок IT переполнен. Поэтому специалист должен быть квалифицирован и понимать, что от него будут требовать. Персональный ассистент работает во всех наших партнерских учебных центрах, ассистент – личный помощник, он как тренер в спортзале, который будет контролировать Ваш индивидуальный процесс обучения. Изначально персональный ассистент формирует план обучения, а также контролирует его выполнение. Он рисует timeline, может наглядно показать, для чего учиться, сколько нужно учиться и что студент получит по окончанию обучения. Персональный ассистент регулярно звонит, пишет своим клиентам. Процентов тридцать студентов учебных центров не понимают, для чего они учатся,  кем они хотят быть. Персональный ассистент создан для того, чтобы поддерживать в процессе обучения, а также контролировать качество обучения. Например, timeline может перемещаться из-за невыполнения домашних заданий. Персональный ассистент также оказывает помощь в выполнении домашних заданий. Ведь не всегда во время обучения все понятно, и нужен человек, способный объяснить сложные моменты. Также персональный ассистент составляет план стажировки. Реальность такова, что junior-специалист должен иметь опыт работы от двух лет. Выпускник университета не может пойти на должность junior-а, потому что у него нет такого опыта. Это замкнутый круг. Labitex предоставляет необходимый опыт. Когда персональный ассистент рисует timeline, студент понимает, что у него есть, к примеру, шесть месяцев для того, чтоб выучиться. А ассистент понимает, что у него есть шесть месяцев, чтобы найти стажировку. Средняя стажировка начинающего специалиста в сфере IT – 4-5 месяцев. Персональный ассистент приходит в компанию-партнер и договаривается о такой стажировке для своего клиента. Если Labitex берется за обучение кандидата, из него готовят качественного перспективного сотрудника IT-компании. Вывод В статье было рассмотрено, что мешает соискателю получить работу в желаемой IT-компании: неправильно составленное резюме, плохо оформленные социальные сети, страх и неумение проходить собеседование с HR-специалистом, недостаток знаний, низкий уровень квалификации, отсутствие опыта работы. Также рассмотрели услуги HR-специалистов, помогающие устранить проблемы и добиться желаемой должности соискателем.

Введение Привет всем. Многие студенты, которые решили связать свою жизнь с програмированием, задаются такими вопросами: - что выбрать своим главным инструментом в работе? - чем пользуется большинство? - чем пользоваться при написании своего кода? - что лучше? На эти вопросы нет однозначного ответа, каждый редактор по-своему хорош. Но постараюсь описать главные возможности тех редакторов, с которыми я сам столкнулся и пользовался в своей практике. Сразу внесем ясность и расставим точки над i. Средства разработки делятся на два главных класса: 1 – Интегрированные среды разработки (IDE) 2 - Текстовые редакторы (text editor) Официальное определение  интегрированная среда разработки можно найти по адресу: https://ru.wikipedia.org/wiki Официальное определение текстовый редактор по адресу: https://ru.wikipedia.org/wiki Попытаюсь объяснить  разницу между двумя этими классами своими словами. Интегрированная среда разработки - это как швейцарский нож или трактор, он мультифункционален, а следственно, и граничен. Может делать много, но некоторые вещи делает не так, как нам хотелось бы. Посудите сами: трактор ведь может тянуть тяжелый груз, копать и, главное, может передвигаться. Но все это он делает медленно. К примеру, если стоит задача переместиться из пункта “А” в пункт “Б” (что является одной из функций трактора), для этого лучше пригодится спорткар или обычный легковой автомобиль, для этой операции нами не нужен трактор со всеми его функциями. Следовательно, мы можем сделать вывод, что для определенных операций нам нужны определенные инструменты. В этой статье я не буду рассматривать IDE и их фичи (feature). Хочу рассказать о главных текстовых редакторах и их возможностях. Мой TOP текстовых редакторов: 1. Sublime Text 2. Brackets 3. Visual Studio Code (на этом месте был Atom) Пробовал, но не понравились/не подошли, по каким-либо причинам (поэтому не рассматриваю их тут) 1. Notepad++ (Сайт https://notepad-plus-plus.org/) 2. Komodo Edit (Сайт http://komodoide.com/komodo-edit/) 3. Atom (Сайт https://atom.io/) 4. Textmate (Сайт https://macromates.com) Итак ,начнем. Sublime Text 3 сайт: http://www.sublimetext.com/3 Чем нравится: кроссплатформенный легкий большая и понятная библиотека плагинов (дополнений) легко настроить под себя Что следует сделать после установки. Зайти на сайт https://packagecontrol.io/installation И сделать все согласно инструкции, открыть консоль Саблайма: найти вкладку View  и кликнуть Show Console. В появившемся снизу поле ввода вставить следующий код: import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) Должно получиться вот так: Жмем Enter. Так мы установили Package Control в наш Sublime. Теперь мы можем устанавливать плагины в редактор, нажав сочетание клавиш Ctrl+Shift+P on Windows/Linux, ⇧⌘P on OS X На сайте https://packagecontrol.io/ вы найдете множество плагинов с детальным описанием, руководством установки и руководством использования. Теперь о плагинах. Плагин – грубо говоря, это дополнение программы. Официальное определение https://ru.wikipedia.org/wiki Плагины, которые пригодились мне в работе, возможно, пригодятся и вам. 1. Emmet - https://packagecontrol.io/packages/Emmet Плагин, который помогает быстро набирать код. С помощью шпаргалки вы быстро научитесь быстро набирать сложные конструкции html, указав лишь название тега и  порядок иерархического положения елемента на странице. Его официальный сайт http://emmet.io/ и шпаргалка http://docs.emmet.io/cheat-sheet/ Еще одно условие: для работы этого дополнения нужен предустановленный nodeJS. Найти его можно тут: https://nodejs.org/ Думаю, что nodeJS у вас уже был предустановлен, а если не был, то он вам точно еще пригодится не раз. 2. SublimeCodeIntel - https://packagecontrol.io/packages/SublimeCodeIntel Плагин портирован из текстового редактора Komodo Editor, помогает автодополнением к языкам программирования JavaScript, Python, Ruby, XML, HTML, CSS, PHP и другим. 3. SideBarEnchancements - https://packagecontrol.io/packages/SideBarEnhancements Плагин открывает новые возможности боковой панели для работы с Вашими проектами. 4. BracketHighlighter - https://packagecontrol.io/packages/BracketHighlighter Плагин позволяет отображать дополнительные скобки возле номеров строк, отображая, к примеру, блоки кода. 5. AutoFileName - https://packagecontrol.io/packages/AutoFileName Плагин говорит сам за себя, когда мы пишем пути к нашим фалам, помогает, выводя дополнительное выскакивающее окошко, с выбором папок или файлов. 6. HTML-CSS-JS Prettify https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify Плагин “расческа”. Причесывает наш код, делает его более читабельным для человеческого глаза. 7. Color Highlighter - https://packagecontrol.io/packages/Color%20Highlighter Плагин подсвечивает цвета при написании вайлов CSS/Less/SASS/SCSS/Stylus. Остальные плагины, для работы с такими библиотеками как jQuery, Bootstrap, AngularJS,  советую устанавливать осторожно, потому как постоянно выскакивающие окошки с помощью какого либо плагина если не пугают, то начинают очень надоедать. Поэтому советую не превращать текстовый редактор в “неубранный балкон”. Также есть возможность установки из того-же Package Control множества тем и цветовых схем. Темы и цветовые схемы отличаются тем, что тема  меняет полностью весь внешний вид Sublime, цветовая схема  меняет только цвета подсветки синтаксиcа. Файл настроек находится во вкладке Preferences>Settings Default/Settings User. Почему именно два файла? Потому что вы сможете изменять только Settings User. Оба файла являются, по сути, JSON объектами, поэтому разобраться и изменять свои настройки вы научитесь довольно быстро. Brackets сайт - http://brackets.io/ Этот текстовый редактор также поддерживает большинство перечисленых плагинов, и даже если таковых вы не найдете, то их аналоги точно есть в песочнице. На правой боковой панели вы найдете несколько кнопок: Первая в виде молнии – LivePreview. Запускает страницу с рашрирением html в вашем браузере, который установлен по умолчанию, браузер будет сам обновлять страницу.  Вторая в виде лего – Extension Manager. При клике вызывает модальное окно в, котором содержатся вкладки меню для выбора плагинов, тем, их установке и удалению.  Третья в виде “слоев торта” со стрелочкой вверх – Extract for Brackets. Ради этой кнопки и стоит устанавливать этот редактор. Она позволяет после регистрации загрузить файлы psd формата для верстки прямо  из текстового редактора, не загружая ничего больше.  Кликаете по кнопке Open PSD Регистрируетесь или же входите под своим Adobe ID, загружаете PSD шаблон и начинаете верстать в разы быстрее. Кликнув по какому либо элементу на шаблоне, вы можете моментально перенести: текст, css свойства, или же выгрузить картинку из шаблона пряму в папку с проектом. С такими возможностями верстка становится в разы быстрее! Не агитирую, просто  советую попробовать) Visual Studio Code сайт - https://code.visualstudio.com/ Бесплатный кроссплатформенный текстовый редактор, основанный на технологиях замечательного текстового редактора Atom от GitHub. Подробное описание можно прочитать по ссылке ниже: https://uk.wikipedia.org/wiki/Visual_Studio_Code Также будет полезна ссылка с документацией: https://code.visualstudio.com/Docs/setup Отличный текстовый редактор от компании Microsoft. Облегченная и кроссплатформенная версия Visual Studio. Имеет схожий дизайн со своим старшим собратом. Похожие темы и подсказки в виде выпадающих окошек (контекстные подсказки). Так что разработчикам, перешедшим с Visual Studio, будет гораздо легче адаптироваться. Еще несколько плюсов с коробки: поддержка таких языков програмирования: JavaScript, C++, C#, PHP, XML, Java, Objective-C, HTML, CSS, Less, Sass и т.д. (полный перечень находится в документации). отладчик инструменты для работы с Git автодополнения в стиле Emmet. Настоятельно рекомендую обратить внимание и попробовать Visual Studio Code. Даже просто потому, что вы установите его и все, дальше просто приступаете к работе :) На этом все. Думаю, что изложил свои мысли достаточно простым языком. Помните, что не важно, в каком текстовом редакторе или IDE вы работаете, это всего лишь инструмент, в конечном итоге вы можете остановить свой выбор на обычном блокноте и там разрабатывать приложения, для того, чтобы писать программы не обязательно иметь подсветку синтаксиса, всякие плюшки, главное, чтобы вам было удобно и при написании вы чувствовали себя комфортно. Выбор за вами. Удачи!

Введение Многие разработчики заблуждаются, считая, что CSS – единственный способ работы с анимацией в WEB. CSS становится все более и более популярным, он считается самым надежным и удобным инструментом создания анимаций. Но это не означает, что он лучше, чем JavaScript. В этой статье мы расскажем, почему лучше использовать JavaScript, а не CSS, а также разоблачим мифы, связанные с CSS. 1. JQuery JavaScript и JQuery ошибочно объединяют. Анимации, разработанные с JavaScript – быстрые и динамичные, тогда как анимации JQuery – медленные. Причина в том, что несмотря на его мощные инструменты, JQuery  не был создан для анимации. 2. Отсутствие управления вращением и позиционированием Для выполнения анимации необходимо использовать элементы управления вращением и определением позиции. В CSS все эти функции содержатся в свойстве «transform». Это создает проблемы для уникальной анимации чего-либо через один общий элемент. Например, анимирование «rotation» и «scale» отдельно, с разными таймингами, возможно только с JavaScript, потому что он позволяет использовать различные функции, не поддерживаемые CSS. CSS удобно использовать только для простой анимации. 3. Производительность с Velocity и GSAP Velocity и GSAP – наиболее популярные библиотеки JavaScript. Они работают без JQuery. Нет уменьшения производительности, так как эти библиотеки работают за пределами основных анимаций JQuery. Velocity и GSAP можно применять даже, когда jQuery не используется на странице.  * Работа без JQuery * / Velocity(element, { opacity: 0.4 }, 900); // Velocity TweenMax.to(element, 1, { opacity: 0.4 }); // GSAP В приведенном выше примере Вы видете, что velocity использует тот же синтаксис, даже когда JQuery не применяется. Он просто смещает все элементы в правильном направлении, чтобы создать пространство для целевых элементов. 4. GPU-фактор Полностью оптимизированный код с GPU отлично подходит для выполнения различных задач, включая преобразование матриц и изменение прозрачности, поэтому все ведущие браузеры сначала перенаправляют такие задачи от CPU к GPU. Нужно разделять все анимационные элементы на разные слои GPU. Таким образом мы избавимся от необходимости вычислять каждый пиксель в каждой минуте. Можно сэкономить много времени, просто перемещая один пиксель за другой. Обратите внимание: нет необходимости делать собственный слой для каждого элемента из-за ограничения видеопамяти GPU. 5. Быстрые анимации JavaScript JavaScript обходит CSS в производительности и скорости. JavaScript достаточно универсальный, чтобы создать впечатляющую 3D демо-анимацию, которую Вы можете увидеть через WebGL. Он достаточно быстрый, чтобы построить мультимедийный тизер, разработанный с использованием Flash, или After Effects. С JavaScript это легко сделать с помощью canvas. Вывод Данная статья доказывает, что анимация JavaScript более быстрая, по сравнению с анимацией CSS. Но это не означает, что CSS не стоит использовать. Он хорошо подходит для простой анимации, но если Вы хотите сделать анимацию более гибкой, Вам лучше использовать JavaScript. Источник: http://www.script-tutorials.com/css-vs-javascript-myths-fall-to-pieces/

Введение Если Ваш бизнес достаточно рентабелен, Вы можете считать, что не нуждаетесь в SEO, так как это технически сложное и трудоемкое дело. Но если Вы отнесётесь к SEO поверхностно и небрежно, Вы можете ухудшить состояние Вашего бизнеса. Вам нужно помнить, что в Google часто меняют правила. В этой поисковой системе был крупный ряд обновлений и, несмотря на их приятное описание, они ужасно повлияли на владельцев веб-сайтов всего мира. Подготовка и планирование SEO-кампании может казаться Вам непреодолимым препятствием. Почему необходимо подготовиться и узнать как можно больше о SEO, прежде чем приступить к работе? Ваш сайт может получать 30-60 % траффика из поисковых систем, но если Вы посмотрите статистику ключевых слов в своей учётной записи (в Google Webmaster Tools), то Вы скорее всего увидите, что около 30-50 % ключевых слов, используемых для поиска Вашего сайта, это товарные знаки – названия Ваших продуктов или компаний. Такой поиск осуществляется людьми, которые уже знаю о Вас. Но не знающие Вашего бренда и ищущие то, что Вы продаёте, не могут найти Ваш ресурс. Если пользователи хотят найти продукт или компанию по названию, Google легко направит их к цели поиска. А SEO существует для помощи пользователю найти необходимую ему услугу или товар, которые Вы можете предоставить, даже если он не знает Вашего имени. Эта статья поможет Вам узнать, что делать для улучшения поиска. Что такое настоящее SEO? Настоящее SEO – это всё, что помогает поисковой системе понять содержимое Вашего веб-ресурса. Даже если Google понял содержание и актуальность каждой страницы веб-сайта, необходимы также многократные его просмотры пользователями. Понимание Вашего положения – Google Analytics Прежде чем перейти к улучшению своего SEO-рейтинга, Вам нужно разобраться в своём текущем положении. Простой и быстрый способ сделать это: 1. Откройте Вашу учётную запись в Google Analytics. 2. В диапазоне дат, в правом верхнем углу, измените нынешний год на предыдущий. К примеру, 5 января 2015 станет 5 января 2014. Затем выберите Apply. 3. Потом нажмите All Sessions, выберите Organic Traffic и кликните Apply. 4. Нажмите на небольшой чёрно-белый квадратный значок в правом верхнем углу и перетащите ползунок к режиму Higher Precision (высокая точность). 5. Нажмите на кнопку интервала Week, чтобы график стал более простым для понимания. Сейчас Ваш график будет выглядеть приблизительно так: 6. Нажмите на стрелочку справа от All Sessions и выберите команду Remove. 7. Нажмите на Select a metric, рядом с кнопкой Sessions над графиком, и выберите Pages / Session. На экране должно быть что-то подобное: Выше мы видим, что количество трафика увеличивается с середины августа, но его качество (количество просмотренных страниц за одну сессию) снизилось. Объединение данных Сессия в Google Analytics показала Вам качество Вашей работы со стороны SEO и количество Ваших посетителей. Но статистика демонстрирует то, что уже работает, количество людей, находящих Ваш ресурс в поисковых системах и переходящих на него по ссылке. Запрос данных в Google Webmaster Tools даст Вам представление о недочетах. Он покажет статистику запросов и ключевых слов, по которым пользователи не переходят на Ваш веб-сайт. Чем меньше пользователей будут переходить на Ваш ресурс, тем на более дальних позициях в поиске он окажется. По каким ключевым словам Вы бы хотели, чтобы Вас находили? Неправильный подбор ключевых слов – одна из самых распространенных и важных ошибок в SEO. Многие полагают, что не нужно беспокоиться относительно своих ключевых слов. Они считают, что им известно, какие слова используются для поиска их товаров. Также они предполагают, что Google освоил содержание их сайтов. Все эти утверждения ошибочны. Проведите коллективное обсуждение маленького ряда Ваших наиболее очевидных ключевых слов, затем проверьте их с помощью Google’s Keyword Planner. Игнорируйте информацию в Ad group ideas, опирайтесь на Keyword ideas. Вместо того, чтобы пользоваться очень неудобным интерфейсом, рекомендуем скачать данные как электронную таблицу, где можно их изменять и сортировать. Из таблицы можно удалить все неуместные столбцы или ключевые слова. На этом этапе Вы можете устранить проблему поиска Вашего веб-сайта пользователями. Число зафиксированных поисков определенного ключевого слова важно, но ещё важнее – уровень конкуренции. Определяется по формуле: (число поисков × число поисков) ÷ конкуренцию Есть множество альтернатив формулы, но данный вариант наиболее простой. Это слегка запутанная, но вполне эффективная методология исследования ключевых слов. Действительно ли SEO просто? 70 % SEO – несложно. Если у Вас есть список актуальных для Вашей продукции ключевых слов, все, что нужно сделать – создать под них качественный контент. Но существует одно простое правило: созданное Вами содержание должно быть не только хорошего качества, но и совершенно оригинальным, а также он должен быть написан прежде всего для пользователя-человека, а не паука поисковой системы. Каждая статья должна быть ценной и полезной для читателя. Но остальные 30 % требуют не просто создания хорошего содержания и ожидания посетителей. Вы должны помочь Google понять содержание на своих страницах, входящие ссылки, авторитет домена, авторитет страницы, факторы спама и многое другое. Однако, даже если Вы не вмешиваетесь в эти 30 % SEO, создавая правильный контент для правильных посетителей, используя терминологию Ваших потенциальных клиентов, Ваш сайт будет лучше, чем ресурс Ваших конкурентов. Вывод SEO – очень важная часть продвижения любого бизнеса. Для того, чтобы Ваша SEO-кампания прошла успешно, нужно изучить свое текущее положение, выявить свои сильные и слабые стороны. Затем следует работать с качеством контента Вашего ресурса, делая его максимально удобным для пользователя, используя ключевые слова для улучшения поиска Вашего сайта в поисковых системах. Только на третьем этапе, после выполнения всего вышеперечисленного, стоит приступать к оптимизации понимания Вашего сайта системой Google. Источник: http://24ways.org/2014/seo-in-2015-and-why-you-should-care/

Введение Давайте рассмотрим практику написания AngularJS приложения. Приведенные ниже примеры помогут вам писать приложение правильно, чисто и более обдуманно. С помощью применения данной практики вы разработаете приложение, которое будет разделено на блоки, что в конечном итоге поможет строить правильную архитектуру приложения. Итак, начнем. 1) Создавая новое приложение, старайтесь разделять модуль, контроллер, фабрику, вынося их в отдельные файлы. Этот прием имеет ряд приимуществ: улучшается читаемость приложения улучшается рефакторинг приложения легче производить дебаггинг приложения //плохая практика angular        .module('app', ['ngRoute'])        .controller('myController', myController)        .factory('myFactory', myFactory); function myController() { }; function myFactory() { }; //рекомендуется //myapp.module.js – файл модуля angular        .module('app', ['ngRoute']); //mycontroller.js – файл контроллера angular .module('app') .controller('myController', myController); function myController() { }; //myfactory.js – файл фабрики angular        .module('app')        .factory('myFactory', myFactory); function myFactory() { }; 2) Старайтесь оборачивать код в самовызывающиеся функции. Это позволяет : сохранить переменные от глобального объекта scope предотвратить перетирание глобальных переменных (т.к. они локальны) при минификации кода помогает избежать путаницы переменных //плохая практика angular        .module('app')        .factory('myfactory', myfactory); function myfactory() { }; //рекомендуется (function () {     'use strict';     angular         .module('app')         .factory('myfactory', myfactory);     function myfactory() { }; })(); 3) Старайтесь придерживаться иерархии именования. Это поможет правильно структурировать приложение, что в итоге приведет к правильной архитектуре программы. Избегайте создания модуля через переменную и используйте цепочный синтаксис (в виде цепочки) //плохая практика var app = angular.module('app', [        'ngAnimate',        'ngCookies',        'firebase' ]); //рекомендуется angular        .module('app', [        'ngAnimate',        'ngCookies',        'firebase' ]); 4) Используйте именованные функции. Код становится более читабельным и куда лучше тестируется.  //плохая практика angular        .module('app')        .controller('mycontroller', function () { }); //рекомендуется (обратите внимание на контроллер он вынесен в отдельный файл //от модуля) //myapp.module.js – файл модуля angular        .module('app', ['ngRoute']); //mycontroller.js – файл контроллера angular .module('app') .controller('myController', myController); function myController() { }; 5) Используйте controller as нотацию вместо просто controller. Она более читабельна, помогает не запутаться в коде      //плохая практика     <div ng-controller=”myController”>{{title}}div>     //используем     <div ng-controller=”myController as mycontroller”>{{mycontroller.name}}div> 6) Используйте слово vm(ViewModel) внутри контроллера вместо ключевого слова this. Это поможет избежать подмены контекста внутри функции.  //антипаттерн function mycontroller () {        this.name = {};        this.deleteSome = function () {}; }; //паттерн function mycontroller () {        var vm =  this;        vm.name = {};        vm.deleteSome = function () {}; }; Это лишь базовые приемы, которые вы можете использовать в своей практике. Они помогут вам избежать некоторых проблем в вашей роботе и сделать код вашего приложения чище и понятнее. Желаю вам хорошего кода и светлых идей.

Введение HTML5 – последняя версия языка разметки. У HTML5 есть семантическая структура. В пятой версии языка ввели определенные средства для управления – они дают возможность сэкономить Ваше время при разработке веб-сайтов. В этой статье мы рассмотрим упомянутые средства управления, а также функции в HTML5. Прежде чем начать, необходимо установить Visual Studio. Мы можем включить опцию HTML в целевом разделе: Tools -> Options -> Text Editor -> HTML. Разметка HTML5          Объявление DOCTYPE: <!DOCTYPE html> Объявление кодировки символов: <meta charset="utf-8" /> <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Sibeesh Passion wish you a happy new yeartitle> head> <body> Welcome to Sibeesh Passion body> html> Структура HTML5 Как уже говорилось, у HTML5 есть семантическая структура. Это уменьшает усилия UI-разработчика. На изображении объясняется эта структура. До применения HTML5: После: Исходя из рисунка, понятно, что в HTML5 доступны такие элементы: Header Nav Section Aside Article Footer Добавление собственных элементов Вы можете создать собственный элемент, используя стили. Разметка должна выглядеть таким образом: <!DOCTYPE html> <html> <head>     <title>Your own element title>     <script>document.createElement("yourelement")script>     <style>         yourelement {             display: block;         }     style> head> <body>     <div>         Normal element     div>     <yourelement>My elementyourelement> body> html> Вы создали новый элемент «yourelement». Новый синтаксис Атрибута В HTML5 введен новый синтаксис атрибута: Empty Unquoted Double Quoted Single Quoted Можно присвоить текстовое значение тега input type таким образом:   <input type="text" value="Sibeesh" disabled>     <input type="text" value=Sibeesh>     <input type="text" value="Sibeesh">     <input type="text" value=’Sibeesh’> Примените CSS Так же, как  к обычным элементам HTML, так и к новым семантическим элементам можно применять стили. footer{border:1px solid;} Предыдущий стиль будет применен ко всем footer, доступным на странице. Не рекомендуется использовать верхний регистр (Footer, FOOTER) в названии элементов. Обзор элемента Canvas Если Вы хотите создать определённый графический контент, элемент Canvas,  то Вам нужно: Объявление Canvas     <canvas id="canvasExample" width="200" height="100"             style="border:1px solid #ccc;">         Bad Luck, It seems your browser won't support :(     canvas> Реализация Canvas var c = document.getElementById("canvasExample"); //Get the element var ctx = c.getContext("2d"); // Get the context for the element var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line grd.addColorStop(0, "blue"); // Apply the colors grd.addColorStop(1, "white"); // Apply the colors ctx.fillStyle = grd; //apply the style ctx.fillRect(10, 10, 150, 80); // Fill Здесь мы применили градиент к canvasExample. Введение в SVG Масштабируемая векторная графика (Scalable Vector Graphics) – графика для web типа canvas. Одно из различий между canvas и SVG  то, что SVG поддерживает обработчик событий, а элементы canvas – нет. Объявление SVG     <canvas id="canvasExample" width="200" height="100"             style="border:1px solid #ccc;">         Bad Luck, It seems your browser won't support :(     canvas> Полный вариант HTML-документа: <!DOCTYPE html> <html> <body>     <table style="border:1px solid #ccc;">         <tr style="border:1px solid #ccc;">             <td style="border:1px solid #ccc;">                 <h2 style="text-align:center;">Canvash2>                 <canvas id="canvasExample" width="200" height="100"                         style="border:1px solid #ccc;">                     Bad Luck, It seems your browser won't support :(                 canvas>             td>             <td style="border:1px solid #ccc;">                 <h2 style="text-align:center;">SVGh2>                 <svg width="200" height="200">                     <circle cx="100" cy="100" r="50"                             stroke="green" stroke-width="4" fill="yellow" />                     Bad Luck, It seems your browser won't support :(                 svg>             td>         tr>     table>     <script>         var c = document.getElementById("canvasExample"); //Get the element         var cctx = c.getContext("2d"); // Get the context for the element         var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line         grd.addColorStop(0, "blue"); // Apply the colors         grd.addColorStop(1, "white"); // Apply the colors         ctx.fillStyle = grd; //apply the style         ctx.fillRect(10, 10, 150, 80); // Fill     script> body> html> Источник: http://www.c-sharpcorner.com/UploadFile/65794e/html-5-elements-in-a-look-part-1/         http://www.c-sharpcorner.com/UploadFile/65794e/html-5-elements-in-a-look-part-2/

Введение Приветствую всех профессионалов или просто любителей великого дела – продвижения сайтов. Я постараюсь не затрагивать того, о чем пестрят страницы многих блогов и порталов и перетирать уже и так “до дыр” затертые темы относительно современного SEO. Работая руководителем интернет-рекламы в компании Abweb, мне с командой технических специалистов удалось накопить значительный бекграунд, который позволит поделиться прикольными “фишками” с Вами. По заголовку данной статьи на меня может сразу политься поток критики по поводу понятия “правильное SEO”. Ребята, расслабтесь. Я расскажу об 11 золотых истинах правильного SEO относительно клиента и самому подходу к рабочемму процессу, которые мы составили с коллегами на основании реальных событий и опыта. Поэтому, данный материал будет полезен как для любителей своего дела, так и для клиентов, которые сотрудничают или собираются сотрудничать с интернет-агентством. Прописные истины 2015. Какие они у нас? 1. Начнем с глобального. SEO – это специфическая услуга, в которой априори не может быть гарантий. Какого бы уровня  не был специалист - Senior, Middle или Junior, никто из них одинаково не сможет дать 100% гарантии, но вероятность успешного результата все же есть. О гарантиях есть официальный материал Google, где указано, что гарантий даже стоит остерегаться! Пусть этот аргумент станет палочкой-выручалочкой для тех продажников, от которых клиенты в договоре просят прописывать гарантии или возврат денег. 2. Поисковое продвижение не бывает быстрым. Да, иногда удается достигнуть очень быстрого результата, но на это влияет ряд факторов (трастовость ресурса, возраст, текущая история продвижения, качество самого сайта, ниша). Но, зачастую, результата нужно ждать 6 месяцев, а то и больше. Донесите до клиента, что Google -  искусственный интеллект, который не доверяет первичным манипуляциям. И при дальнейшей модификации алгоритмов эти сроки аж никак не будут становиться меньше. 3. Качественно составленная семантика – первый шаг к успеху. Грамотно  проработанное семантическое ядро - это действительно залог хорошего результата. Тут важны 2 аспекта: правильно подобрать запросы (не продвигать те ключи, которые не подходят тематике или типажу сайта) и корректно выбрать посадочные страницы под них. Например, часто возникает ситуация, когда основные запросы “садят” на страницу категории, хотя под них идеально подходит главная страница, которая продвигается значительно легче. Поэтому, это очень ответственный этап! Чтобы сделать это максимально правильно, ориентируйтесь на тех, кто в ТОПе по продвигаемым ключевым словам, проводите анализ конкурентов. Просмотрите, какие целевые страницы они выбирают для продвижения и берите за базис их стратегию. 4. Внутренняя и внешняя оптимизация – неразрывные звенья. Невозможно получить ТОПы, выполнив лишь 1 фронт работ. Нужно хорошо оптимизировать сайт, устранить все ошибки, написать и разместить тексты, составить и разместить оптимизированные мета-теги, а потом выполнять работы по наращиванию ссылочной массы.  Часто клиенты пытаются навязывать свое мнение, что один из этапов нужно пропустить (явно для того, чтобы сократить бюджет). Но это неверно. Только такой симбиоз даст что-то толковое! 5. Эра контента наступила. И это факт. Поисковые машины научились определять полезность контента. Есть сторонники OLDSCHOOL-теорий, что тексты никто не читает и главное, чтобы плотность ключевика там была процентов 5 не меньше. Это эра динозавров. Нами лично было проведено много экспериментов, которые дали положительные результаты. Страница, которая содержит только текст с определенной оптимизацией под ключевики, ранжируется в поисковых системах хуже, чем структурированная и реально полезная страница. Такая страница должна содержать изображения, видеоматериалы, маркировочные списки и, желательно, конкретные предложения и прайсы. Все это выявляет большой интерес и важность для пользователя, попавшего на Вашу посадочную страницу. Пример удачной страницы одного из наших довольных клиентов: Тут не просто голый текст, а реально важная информация для клиента, которая и делает контент полезным. 6. Вечные ссылки рулят. Вечные ссылки – это такие ссылки, которые оплачиваются разово, которые размещаются в теле постового материала или тематической статьи и “живут” на площадке столько, сколько существует сама площадка. Такие ссылки выглядят очень естественно (что несомненно нравится клиентам) и хорошо воспринимаются поисковыми системами. И не нужно переживать, что ссылка будет мигать или будет снята за неуплату аренды, как это было в далеких 2000-ых. Единственный минус – дороговизна такой ссылки, но зато результат того стоит. 7. Стремительная положительная динамика от внутренней оптимизации видна в течении 1-ого месяца, а от продвижения ссылочным через 2-3.Часто клиенты спрашивают: “После внутренней оптимизации сайта произошел стремительный рост позиций, а после закупки ссылок мы топчемся на месте уже 2-й месяц?”. Очень типичная ситуация, на которую есть железный аргумент. Индексация сайта и индексация внешних ссылок на сайт – это два разных процесса, которые длятся по-разному. Для индексации ссылки и учета ее на ранжирование продвигаемого сайта поисковик проводит несколько апдейтов (2-3 месяца), а для учета всех изменений по сайту (текстов, метатегов) ему может быть достаточно 1 посещения Гугл-ботом (1-3 недели). Вот почему происходит такая разница в динамике по позициям на разных этапах, и успокойте заказчика. 8. Принудительная переиндексация целевых страниц помогает сдвинуть динамику.  В инструменте Google Webmaster Tools есть инструмент, который позволяет отправлять страницы на целевую переиндексацию, чтобы привлечь быстроробота на страницу.  В основном, этот прием применяют для того, чтобы робот поисковика быстрее учел внесенные изменения в текст страницы или метатеги. Но, как показывает практика, если Вы долго не видите положительной динамики по позициям по продвигаемым страницам, можно попробовать отправить их через данный инструмент. Очень часто помогает сдвинуть позиции с мертвой точки. Невероятно, но факт! 9. Прозрачное SEO – это подушка безопасности.   Это так, ибо зачастую данная услуга продается без гарантий. Максимальная прозрачность и этапность работ, открытый бюджет (Open Budget), а также промежуточная и ежемесячная отчетность поможет сгладить все конфликтные “углы”. Заказчик регулярно будет видеть перечень работ и какие манипуляции проводятся. Также, в конечном итоге даже при возникновении конфликтной ситуации можно попытаться вывернуть ее в то русло, что оплачена, в первую очередь, проведенная работа, а не ТОПовые позиции, которых ждет клиент и деньги не выброшены зря. 10. Для построения чего-то серьезного нужна не менее серьезная структура.Часто клиенты ошибочно считают, что весь цикл коммуникаций и все работы должно проводить то лицо, которое заключало с ними договор и продавало услугу, критикуя при этом структуру построения коммуникаций. Это ошибочно! (исключение - фриланс) Любая уважающая себя компания понимает и выстраивает свою иерархию по должностям и отделам, и в такой структуре один человек не может выполнять все процессы. В интернет-агентствах зачастую структура состоит из sales менеджеров, аккаунт-менеджеров, технических специалистов и руководителей. И это правильно. Каждый должен выполнять определенный круг задач с максимальным качеством. Поэтому меня возмущают вакансии типа совмещающие в себе этакий микс с разных направлений и отраслей. Это важно доносить и клиентам. 11. Эксперименты - двигатель прогресса. Пускай и говорят, что работа сеошников во многом похожа на тыканье пальцем в небо. Зато, как приятно достигать неожиданного положительного результата при проведении очередного эксперимента. Признаюсь честно, мы точечно тестируем множество тактик и стратегий (те же арендные ссылки с Sape, ссылочные прогоны или переспам в метатегах), чтобы понимать четкую картину того, что пишут на большинстве блогов и можем ли мы с этой информацией согласиться или ее опровергнуть. Для нас эксперименты – это двигатели прогресса. Экспериментируйте и Вы! Надеюсь, что этот дебютный материал будет полезным тем, кто только начинает свой путь в SEO или уже успешно по нему шагает. Ждем комментов ;)

Прежде всего стоит освежить память и немного повторить основы. 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 }()); Применяйте приведенные в этой статье шаблоны, эксперементируйте. Старайтесь создавать код, понятный и другим разработчикам. Одно из самых главных приоритетов при написании кода- это простота. Как говорится в знаменитой пословице: “Все гениальное просто.” На этом пока все. Желаю всем красивого кода. Всем спасибо!

Введение Данная статья будет полезной для новичков в мире 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, с очень похожим функционалом, позволяющий задать местоположения слоя относительно его соседей. Но сочетание разных типов позиционирования для вложенных слоев, делает их незаменимыми при необходимости изменить систему координат и задать размещения дочерних элементов относительно их родителя, избежав трудно-воспринимаемых конструкций из множества вложенных слоев.