recursal/MDN huggingface dataset:
.htaccess ( hypertext access )
==============================

Название .htaccess происходит от "hypertext access". Это файл с расширением HTACCESS, который содержит различные настройки сервера apache. Он позволяет настраивать для текущей директории защиту паролем, редиректы и многое другое.

**Доступ к файлу**: файл htaccess может быть открыт для редактирования любым текстовым редактором, таким как стандартный блокнот Windows, Vim, Sublime Text или любым другим. Подсветка синтаксиса для файлов .htaccess встречается редко.

Применение
----------

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

Redirect 301 / http://example.com/       # Постоянное перенаправление на example.com
Redirect 302 / http://example.com/       # Временное перенаправление на example.com
```


**Блокирование**: htaccess также может блокировать доступ с определённого IP адреса или диапазона IP адресов. Блокирование часто используется, чтобы запретить доступ к директории для различных ботов и поисковых пауков.
```

deny from 146.0.74.205                   # Блокирует все запросы с адреса 146.0.74.205
```


**SSI или Server Side Include** : С помощью файла .htaccess можно настроить автоматическое подключение файлов в документ. При каждом запросе пользователя, указанные файлы автоматически будут подключены в начало или в конец документа. При этом в самом документе их подключать не нужно.
```

php_value auto_prepend_file "/real/path/to/file/functions.php" # Подключит файл function.php в начало документа
php_value auto_append_file "/real/path/to/file/footer.php" # Подключит файл footer.html в конец документа
```


**Настройка страниц с ошибками:** с помощью .htaccess можно перенаправлять пользователя на определённые страницы, при возникновении ошибок на сервере.
```

ErrorDocument 404 /notfound.html # Перенаправит пользователя на страницу notfound.html , при возникновении ошибки с кодом 404
ErrorDocument 500 /serverr.html  # Перенаправит пользователя на страницу serverr.html , при возникновении ошибки с кодом 500
```


Для дополнительной информации читайте статью Redirect your Traffic for Error Handling.

**Кеширование:** файл .htaccess может управлять кешированием данных веб-браузером пользователя. Это ускорит загрузку страниц и сократит количество передаваемой информации между сервером и клиентом.

**MIME типы**: смотрите статью correct MIME types (en-US) для большей информации.
Node.js server without a framework
==================================

Здесь вы найдёте описание простого статического сервера, который построен сугубо на Node.js без использования какого-либо фреймворка .

Node.js может использовать множество фреймворков, которые могут помочь создать сервер

Наиболее популярные:

* Express: Один из наиболее популярных фреймворков.
* Hapi.js: Набирающий популярность фреймворк для построения приложений и сервисов
* Total: Этот фреймворк имеет богатую функциональность и не требует каких-либо дополнительных фреймворков или библиотек.

Конечно-же эти фреймворки могут и не подойти для каждого конкретного случая. Именно поэтому нужно знать как все работает изнутри, чтобы быть готовым сделать свой собственный сервер без каких-либо дополнительных зависимостей.

Пример
------

Вот так выглядит статический сервер на Node.js:


```js
var http = require("http");
var fs = require("fs");
var path = require("path");

http
  .createServer(function (request, response) {
    console.log("request ", request.url);

    var filePath = "." + request.url;
    if (filePath == "./") {
      filePath = "./index.html";
    }

    var extname = String(path.extname(filePath)).toLowerCase();
    var mimeTypes = {
      ".html": "text/html",
      ".js": "text/javascript",
      ".css": "text/css",
      ".json": "application/json",
      ".png": "image/png",
      ".jpg": "image/jpg",
      ".gif": "image/gif",
      ".svg": "image/svg+xml",
      ".wav": "audio/wav",
      ".mp4": "video/mp4",
      ".woff": "application/font-woff",
      ".ttf": "application/font-ttf",
      ".eot": "application/vnd.ms-fontobject",
      ".otf": "application/font-otf",
      ".wasm": "application/wasm",
    };

    var contentType = mimeTypes[extname] || "application/octet-stream";

    fs.readFile(filePath, function (error, content) {
      if (error) {
        if (error.code == "ENOENT") {
          fs.readFile("./404.html", function (error, content) {
            response.writeHead(404, { "Content-Type": "text/html" });
            response.end(content, "utf-8");
          });
        } else {
          response.writeHead(500);
          response.end(
            "Sorry, check with the site admin for error: " +
              error.code +
              " ..\n",
          );
        }
      } else {
        response.writeHead(200, { "Content-Type": contentType });
        response.end(content, "utf-8");
      }
    });
  })
  .listen(8125);
console.log("Server running at http://127.0.0.1:8125/");
```

Задание
-------

Попробуйте добавить в этот код описание как работает этот код. Как вариант ещё можно добавить функциональность динамических запросов.
Форматирование даты при помощи moment
=====================================

По умолчанию отображение дат наших моделей некрасиво: *Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time)*. В этом разделе мы покажем, как можно обновить страницу списка *BookInstance List* из предыдущего раздела, чтобы представить поле `due_date` в более удобном формате: December 6th, 2016.

Подход, который будет использован, состоит в создании виртуального свойства в модели `BookInstance`, которое будет возвращать отформатированную дату. Форматирование будет производиться с использованием moment, легковесной библиотеки JavaScript для разбора, проверки, изменения и форматирования дат.

**Примечание:** Можно применять *moment* для форматирования непосредственно в шаблонах Pug, а можно отформатировать строку в других местах. Использование виртуального свойства позволяет получить дату, отформатированную точно так же, как при помощи `due_date`.

Установка moment
----------------

Ведите следующую команду в корне проекта:


```bash
npm install moment
```

Создание виртуального свойства
------------------------------

1. Откройте файл **./models/bookinstance.js**.
2. В начало файла введите строку для импортирования *moment*.

```js
var moment = require("moment");
```


Добавьте виртуальное свойство `due_back_formatted` сразу после свойства url.


```js
BookInstanceSchema.virtual("due\_back\_formatted").get(function () {
  return moment(this.due_back).format("MMMM Do, YYYY");
});
```


**Примечание:** Метод format method может вывести дату почти по любому образцу. Синтаксис для представления различных составляющих даты можно найти в документации ( moment documentation).

Обновляем представление
-----------------------

Откройте файл **/views/bookinstance\_list.pug** и замените `due_back` на `due_back_formatted`.


```js
      if val.status!='Available'
        //span (Due: #{val.due\_back} )
        span  (Due: #{val.due_back_formatted} )
```


Вот и все. Если вы перейдёте к *All book-instances* в боковом меню, вы должны увидеть все даты в привлекательном формате!

Далее
-----

* Вернуться к Express Tutorial Part 5: Displaying library data.
* Перейти к следующему подразделу части 5: Author list page and Genre list page challenge (страница списка авторов и тест- страница списка жанров).
Базовый шаблон LocalLibrary
===========================

Теперь, чтобы мы понимали как расширить шаблон с помощью Pug, давайте создадим базовый шаблон для проекта. У него будет боковая панель (sidebar)) со ссылками на страницы, которые мы надеемся создать на протяжении учебника (например, для отображения и создания книг, жанров, автор и т. д.) и основная область контента, которую мы переопределим на каждой из отдельных страниц.

Откройте файл **/views/layout.pug** и замените его содержимое следующим.


```pug
doctype html
html(lang='en')
  head
    title= title
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    div(class='container-fluid')
      div(class='row')
        div(class='col-sm-2')
          block sidebar
            ul(class='sidebar-nav')
              li
                a(href='/catalog') Home
              li
                a(href='/catalog/books') All books
              li
                a(href='/catalog/authors') All authors
              li
                a(href='/catalog/genres') All genres
              li
                a(href='/catalog/bookinstances') All book-instances
              li
                hr
              li
                a(href='/catalog/author/create') Create new author
              li
                a(href='/catalog/genre/create') Create new genre
              li
                a(href='/catalog/book/create') Create new book
              li
                a(href='/catalog/bookinstance/create') Create new book instance (copy)

        div(class='col-sm-10')
          block content
```


Шаблон использует (и включает) JavaScript и CSS из Bootstrap , что позволяет улучшить макет и представление HTML-страницы. Применение Bootstrap или другого клиентского фреймворка - быстрый способ создать привлекательную, хорошо масштабируемую страницу. Кроме того, это позволяет получить представление страницы, не вдаваясь в детали - мы можем уделить все внимание коду на стороне сервера!

Макет представляется достаточно очевидным, если вы уже прочли статью Основы шаблонов (Template primer) выше. Обратите внимание на использование `block content` в качестве места для размещения контента отдельных страниц.

Базовый шаблон также ссылается на локальный файл стилей (**style.css**), что обеспечивает дополнительное управление внешним видом. Откройте **/public/stylesheets/style.css** и замените его содержимое таким текстом:


```css
.sidebar-nav {
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
```


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

Следующие шаги
--------------

* Вернуться к Учебник Express часть 5: Отображение данных библиотеки.
* Перейти к следующему подразделу Домашняя страница.
Асинхронный JavaScript
======================

В этом модуле мы рассмотрим asynchronous JavaScript, почему это важно, и как это поможет эффективно справляться с потенциальной блокировкой операций, таких как получение ресурсов с сервера или запись в файл.

Необходимые знания
------------------

Асинхронный JavaScript довольно сложная тема, и мы советуем пройти Первые шаги в JavaScript и Блоки в JavaScript прежде чем начать эту тему.

**Примечание:** Если вы работаете за компьютером/планшетом/другим устройством где у вас нет возможности создавать собственные файлы, вы можете попробовать(почти все) примеры кода в одном из веб-приложений, таких, как JSBin или Thimble.

Руководства
-----------

Введение в асинхронный JavaScript

В этой статье мы кратко расскажем о различиях между синхронным и асинхронным программированием, проблемах, связанных с синхронным JavaScript-ом, и взглянем на различные техники асинхронного программирования, с которыми вы столкнётесь. Покажем как эти техники помогают решать проблемы синхронного JavaScript.

Обработка асинхронных операций с помощью Промисов

Расскажем о промисах и том, как использовать API на их основе, а также объясним как работает функция с `async` и оператор `await`.

Реализация API на основе Промисов (en-US)

Статья о том, как реализовать собственный API на основе промисов.

Введение в воркеры (en-US)

Воркеры позволяют запускать код в отдельном потоке и не блокировать основной поток, чтобы код в нём оставался отзывчивым. В статье мы перепишем «тяжелую» синхронную функцию с использованием воркера.

Смотрите также
--------------

* Асинхронное программирование из фантастической онлайн книги Марина Хавербеке, Выразительный JavaScript.
HTML таблицы
============

Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (CSS) HTML с лёгкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.

Необходимые условия
-------------------

Прежде чем приступить к данному разделу, вы должны ознакомиться с основами HTML — смотрите Введение в HTML (Introduction to HTML).

**Примечание:** Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например JSBin или Thimble.

Руководства
-----------

Данный раздел содержит следующие статьи:

Основы работы с таблицами HTML

Эта статья поможет вам начать работу с таблицами HTML, познакомив с самыми базовыми понятиями - строками и ячейками, заголовками, слиянием строк или столбцов, а также с тем, как объединять все ячейки столбца для оформительских целей.

Продвинутые возможности таблиц HTML и доступность

Во второй статье данного раздела мы рассмотрим более продвинутые возможности таблиц HTML — заголовки/подписи, а также разбиение строк таблицы на три части: "голову" (head), "тело" (body) и нижний колонтитул (footer) — а также исследуем, как можно представлять таблицы для людей, имеющих проблемы со зрением.

Проверка знаний
---------------

Структурирование данных о планетах

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

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

2D игра Breakout на чистом JavaScript (en-US)

В этом пошаговом руководстве вы сможете реализовать простой клон игры Breakout с использованием чистого JavaScript. Попутно вы узнаете основы использования элемента `<canvas>` для реализации фундаментальной игровой механики, такой как рендеринг и движущиеся изображения, обнаружение столкновения, механизмы управления и выигрышные и проигрышные состояния.

2D-игра Breakout с использованием Phaser (en-US)

В этом пошаговом руководстве вы будете использовать тот же самый клон Breakout, что и предыдущая серия уроков, за исключением того, что на этот раз вы сделаете это, используя HTML5 игровой фреймворкPhaser. Идея состоит в том, чтобы научить некоторым основам (и преимуществам) работы с фреймворками наряду с фундаментальной игровой механикой.

2D-игра Лабиринт с применением ориентации устройства (en-US)

В этом учебном пособии показано, как создать 2D-игру Лабиринт с использованием HTML5, включая основы, такие как обнаружение столкновения и размещение спрайтов на `<canvas>`. Это мобильная игра, в которой используются **API** Ориентация устройства и Вибрация (en-US) для улучшения игрового процесса и построенная с использованием фреймворка Phaser.

2D-игра платформер с использованием Phaser

В этой серии уроков показано, как создать простую платформенную игру с использованием Phaser, освещаются такие основы, как спрайты, столкновения, физика, коллекции и многое другое.
Инструменты для разработки игр
==============================

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

asm.js

asm.js это очень ограниченное подмножество языка JavaScript, которое можно значительно оптимизировать и запустить в опережающем времени (AOT), компилируя движок гораздо быстрее, чем при типичной производительности языка. А это, конечно же, замечательно для игр.

Emscripten

Низкоуровневая виртуальная машина(LLVM) для JavaScript; с Emscripten вы можете компилировать C++ и другие языки, которые можно копировать в байт-код LLVM с высокой производительностью JavaScript. Это отличный веб-инструмент! Вот полезный туториал по Emscripten, доступный на вики. Заметьте, что мы стремимся охватить Emscripten в своих разделах на MDN.

Gecko profiler

Gecko profiler позволяет профилировать код, чтобы понять, где имеются проблемы производительности, и добиться максимальной скорости в .

Игровые движки и инструменты

Список движков, шаблонов и технологий, полезных для разработчиков.

Shumway

Shumway это рендер для Adobe Flash построенный полностью на JavaScript, WebGL, etc., преодолевающий разрыв между Flash и web-стандартами. Это статья поясняет, как пользоваться Shumway,и как вносить исправления в проекте.

Инструментарий для разработки и отладки игр

Чем это отличается от обычной отладки веб-приложения? Какие специальные инструменты доступны? Многое из этого доступно в инструментах, но здесь мы должны обеспечить своего рода практический учебник для отладки игры, с ссылками :

* Обзор базовых инструментов
* Редактор шейдеров
* Производственные инструменты (все ещё находятся в производстве, по оценкам, в начале 2014 года)
asm.js
======

Asm.js - это подмножество JavaScript, имеющее более высокую оптимизацию. В этой статье описаны возможности asm.js, улучшения которые оно даёт, где и как это можно применять, а также дополнительные ресурсы и примеры.

Что такое asm.js?
-----------------

Это небольшое, более строгое подмножество JavaScript которое ограничивает стандартный язык только конструкциями, типа `while`, `if` и данными в виде чисел, именованных функций, и другими простыми вещами. Оно не разрешает использование объектов, строк, и всего, что требует больших нагрузок. Asm.js напоминает C во многих вещах, но он является полностью валидным кодом на JavaScript и работает на всех имеющихся движках. Он позволяет JS движкам, поддерживающим asm.js, оптимизировать такой код и даёт компиляторам, типа Emscripten, чёткое определение того, как нужно компилировать. Мы покажем, как asm.js код выглядит, чем он полезен и как с ним работать.

Это подмножество JavaScript уже автоматически используется во многих движках, использующих технологию компиляции Just-In-Time (JIT). Однако, указав явный стандарт, мы можем улучшить оптимизацию такого кода и получить максимальную производительность. Благодаря этому, упрощается совместная работа нескольких JS движков, потому что легче договориться о стандартах. Идея в том, что этот вид кода должен работать очень быстро в каждом движке, и если это не так, это ошибка, и есть чёткая спецификация, что именно движки должны оптимизировать.

Это также делает asm.js достаточно простым для людей, которые пишут компиляторы высокопроизводительного кода под web. Они могут обратиться к спецификации asm.js, чтобы найти более быстрые паттерны для него. Emscripten, компилятор C/C++ в JavaScript, выдаёт код asm.js, работающий в некоторых браузерах с производительностью, близкой к машинному коду.

Кроме того, если движок специально распознает код asm.js, то можно сделать ещё больше оптимизаций. На данный момент Chrome (статус) и Firefox обладают поддержкой asm.js. Firefox имеет поддержку передовых фич asm.js

В общем об asm.js
-----------------

asm.js - это вспомогательное подмножество языка JavaScript. Он имеет предсказуемый уровень производительности, т.к. ограничен только лишь некоторыми строгими типами и конструкциями. Рабочие характеристики близки скорее к машинному коду, чем к стандартам JS. Использование этого подмножества уже поддерживается главными веб браузерами. Работа asm.js также зависит от браузера и от оборудования.
2D игра на Phaser
=================

* Следующая статья »

В этом пошаговом руководстве мы создадим простую мобильную игру **MDN Breakout** с помощью JavaScript и фреймворка Phaser.

Каждый шаг будет сопровождаться настраиваемым и живым примером для того, чтобы вы могли видеть, что должно получиться на промежуточных этапах создания. Вы узнаете основы для работы с фреймворком Phaser: рендер и движение картинок, определение столкновения, управление, встроенные вспомогательные функции, анимации и отрисовка кадров, изменение игровой статистки.

Чтобы получить наибольшую пользу от этого руководства, вам необходимо иметь базовые знания JavaScript. После прочтения вы научитесь создавать собственные простые веб-игры с помощью Phaser.

![Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives.](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/mdn-breakout-phaser.png)

Дополнительно
-------------

Все уроки и различные версии MDN Breakout, которые мы сделаем вместе, доступны на GitHub:

1. Инициализация фреймворка
2. Масштабирование
3. Загрузка ресурсов и их вывод
4. Движение мяча
5. Физика
6. Отскакивание от стен
7. Управление
8. Конец игры
9. Создание поля блоков
10. Определение столкновения
11. Счёт
12. Победа в игре
13. Добавление жизней
14. Анимация (en-US)
15. Кнопки (en-US)
16. Создание случайных событий (en-US)

Также мы хотели бы заметить, что лучший способ научиться создавать веб-игры - это чистый (pure) JavaScript. Если вы ещё не знакомы с разработкой на чистом JavaScript, то мы предлагаем вам первым делом пройти туториал 2D игра на чистом JavaScript.

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

**Примечание:** Эта серия статей может быть использована, как материал для создания игр в мастерских разработчиков. Также вы можете использовать Gamedev Phaser Content, который сделан на основе этого руководства, если захотите углубиться в разработку игр с помощью Phaser.

Следующие шаги
--------------

Давайте начнём! Первая часть руководства — это Инициализация фреймворка.

* Следующая статья »