Учим HTML

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

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

Ты создал таблицу и потом ты можешь опубликовать этот документ в веб. Для этого выбери «Файл» > «Опубликовать в интернете...». В нижней части диалога ты можешь увидеть ссылку к данным, но он дает нам доступ только к HTML

Скопируй все, после key= ( например — 0AtMEoZDi5-pedElCS1lrVnp0Yk1vbFdPaUlOc3F3a2c) и подставь это в URL: spreadsheets.google.com/feeds/list/PUT-KEY-HERE/od6/p... вставить вместо "PUT-KEY-HERE".

Ты также можешь получить данные как чистый JSON (но тебе будет нужно пропустить это сначала через CORS прокси, например cors.io) по ссылке: https://spreadsheets.google.com/feeds/cells/PUT-KEY-HERE/1/p...

Теперь в своем веб приложении ты можешь получить данные и использовать их как захочешь.

Ember.js — зрелый фронтенд фреймворк, получивший много внимания в последнее время.

Ember.js вобрал в себя множество современных JavaScript концепций и технологий. Вот их неполный список:

●Транспайлер Babel для полноценной поддержки ES2015 синтаксиса.

●Поддержка юнит, интеграционного и приемочного тестирований с помощью Testem и QUnit.

●Brocolli.js для сборки ассетов.

●Поддержка live-reload для сокращения отклика во время разработки.

●Шаблонизация с использованием Handlebars.

●Навигация в любую часть приложения благодаря

системе роутинга.

Полная поддержка JSON API, но при этом присутствует возможность использовать любой API, который вам необходим.

Для работы с Ember.js предполагается, что у вас установлены свежие версии Node.js и npm.

Также стоит упомянуть, что Ember — исключительно фронтенд фреймворк. Есть множество способов взаимодействия с бэкендом на ваш выбор, но сам бэкенд никак не управляется Ember.

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

Добрый день, уважаемые читатели.

В прошлом уроке мы добавили в игру звезды и возможность их сбора, таким образом наша игра приобрела некий смысл т.к до этого наш мир был пуст и безжизнен. Однако на данный момент процесс сбора звезд не имеет никакой обратной связи, кроме того что звезда исчезает после того как мы "набегаем" на неё нашим персонажем. Для того что бы сделать этот процесс более интерактивным мы добавим в игру счётчик очков.

Подготовка к работе

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все необходимые файлы доступны по ссылке.

Реализация счётчика

Для этого мы будем использовать функционал работы с текстом встроенный в phaserjs. Для этого мы объявим две переменные, одна будет содержать текущий счёт, а вторая объект который позволяет работать с текстом:

Для переменной scoreText мы устанавливаем значение в функции create:

Где:

- 16x16 - это координаты на которых будет располагаться счётчик ( отсчёт идет от левого верхнего угла );

- 'score: 0 ' - начальное значение счётчика;

{ fontSize: '32px', fill: '000' } - объект который устанавливает размер и цвет счётчика, если не устанавливать эти параметры по умолчанию phaserjs будет использовать шрифт Courier;

Далее нам нужно изменить функцию collectStar, мы добавим в неё код который будет повышать значение счётчика каждый раз когда мы поднимаем звезду:

Таким образом каждая поднятая звезда будет прибавлять к нашему счётчику 10 очков:

Давайте разберемся как сделать аккордеон на ванильном JavaScript.

HTML

<dl>
 <dt class="question js-accordion">
  <button class="question__trigger" type="button">First Question?
 </button>
 </dt>
 <dd class="answer">
  <div>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
  </div>
 </dd>
 <dt class="question js-accordion">
  <button class="question__trigger" type="button">Second Question?</button>
 </dt>
 <dd class="answer">
  <div class="answer__content">
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
  </div>
 </dd>
</dl>

В принципе, можно, но аккордеон — это хороший пример списка из терминов и определений, для чего эти теги и предназначены.

Разберем по частям:

<dt class="question js-accordion">
 <button class="question__trigger" type="button">First Question?
 </button>
</dt>

В dt помещаем вопрос, но для чего оборачивать его в кнопку? Опять семантика: когда пользователь кликает на элемент — что-то должно произойти, для этого необходимо использовать button.

Вторая причина — доступность через клавиатуру: на аккордеон можно попасть через tab и раскрыть через пробел.

<dd class="answer">
 <div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
 </div>
</dd>

В dd кладем ответ, обернутый в дополнительный div?

Дело в том, что для того чтобы анимировать «раскрытие» аккордеона, необходимо знать высоту ответа.

.answer {
 overflow: hidden;
 height: 0;
 transition: height 0.5s;
}

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

Как только аккордеон будет раскрыт — мы присвоим answer ранее измеренную высоту.

JavaScript

Найдем все аккордеоны на странице и инициализируем их:

const elements = [...document.querySelectorAll('.js-accordion')];
elements.forEach(accordion);

function accordion(element) {
 // объект, в котором будем хранить всю необходимую информацию
 const instance = {};
 function init() {
  // найдем вопрос и ответ
  findElements(instance, element);
  // измерим высоту ответа
  measureHeight(instance);
  // добавим логику нажатия на кнопку
  subscribe(instance);
 }
 init();
}

function findElements(object, element) {
 const instance = object;
 // element - это "вопрос", по которому происходит нажатие
 instance.element = element;
 // target - это "ответ", который должен "раскрываться"
 instance.target = element.nextElementSibling;
}

measureHeight

function measureHeight(object) {
 const instance = object;
 // вычисляем высоту ответа
 instance.height = object.target.firstElementChild.clientHeight;
}

У answer высота — 0, а у answer__content — нет

subscribe

function subscribe(instance) {
 instance.element.addEventListener('click', (event) => {
  // отменяем "действие по умолчанию"
  event.preventDefault();
  // меняем состояние аккордеона
  changeElementStatus(instance);
 });
 // если размер окна поменяется - измерим высоту ответа заново
 window.addEventListener('resize', () => measureHeight(instance));
}

changeElementStatus

function changeElementStatus(instance) {
 if (instance.isActive) {
  hideElement(instance);
 } else {
  showElement(instance);
 }
}

hideElement и showElement

function hideElement(object) {
 const instance = object;
 const { target } = instance;
 // обнуляем высоту ответа
 target.style.height = null;
 // делаем статус неактивным
 instance.isActive = false;
}
function showElement(object) {
 const instance = object;
 const { target, height } = instance;
 // задаем ответу сохраненную в measureHeight высоту
 target.style.height = `${height}px`;
 // делаем статус активным
 instance.isActive = true;
}

Как всегда — демо на codepen.