Видеокурс "jQuery от А до Я. Библиотека JavaScritp для начинающих." на Stepik, бесплатно! https://stepik.org/134100

Создаем HTML страницу

Делаем свою первую HTML-страницу (веб-страницу)

Урок №2
Создание своей первой веб-страницы

Сайты в интернете, состоят из HTML-страниц, точно также как обычная книга состоит из бумажных страниц, только в отличии от страниц книги, HTML-страницы соединены между собой не переплётом, а ссылками. Давайте создадим свою первую HTML-страницу. Read More

Новый формат изображений BPG

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

Рассмотрим новый формат .bpg более подробней.

BPG (Better Portable Graphics) — новый формат изображений, цель которого заменить JPEG в тех местах, где качество или размер файла имеют значение. BPG был создан гениальным программистом Фабриссом Белларом.

Подключив к своему сайту небольшой JavaScript файл (декодер), вы сможете уже сейчас использовать изображения в формате .bpg в своих проектах.

Преимущества формата BPG

  • Высокая степень сжатия
  • При одинаковом качестве изображений, формат .bpg намного меньше формата .jpg
  • Основан на открытых стандартах (почти открытых :))
  • Поддержка всех основных форматов цветности (RGB, CMYK и т.д.)
  • Имеется возможность сжатия файлов без потери качества
  • В изображениях можно использовать мета данные типа EXIF и т.п.
  • Поддерживает анимацию

Анимация и BPG

Благодаря поддержке анимации, формат .bpg способен заменить собой не только JPEG но и также популярный формат GIF используемый для анимированных изображений.

Видеоролик в BPG размерами в 500kb, будет сопоставим по качеству с видеороликом в GIF размерами 30мб.

Анимировав формат BPG, он показывает качество сопоставимое с MP4, но при этом имеет намного меньший размер (примерно 5% от оригинала).

Недостатки формата BPG

Ну и поговорим немного о недостатках данного формата:

  • Относительно большое время декомпиляции
  • Так же как и в GIF, отсутствует поддержка звука

Bootstrap 4 что нового

В конце лета на официальном сайте Bootstrap, появилась запись о выходе альфа версия Botstrap 4. Рассмотрим какие нововведения подарит нам данный релиз.

  • Вместо Less, в Bootstrap 4 теперь поддерживается Sass
  • Улучшена система сеток
  • Появилась поддержка FlexBox
  • Новый компонент в Bootstrap 4 — карточки (cards)
  • Появился сброс стилей Reboot
  • Больше возможностей для кастомизации тем Bootstrap
  • Прекращена поддержка IE8
  • Вместо пикселей EM и REM
  • Все плагины  переписаны с помощью новой версии JavaScript
  • Улучшены подсказки и popover элементы
  • Обновлена структура документации в Bootstrap 4

Less Sass Bootstrap

Разработка и компиляция модулей Bootstrap 4 теперь осуществляется на Sass, раньше Bootstrap создавался на Less. Компиляция происходит с помощью библиотеки Libsass, которая работает в несколько раз быстрее своих аналогов.

Система сеток Bootstrap

Bootstrap 4 стал еще более дружелюбен к мобильным пользователям (смартфоны, планшеты). Миксины в Bootstrap 4 стали более мобильно-ориентированными. Появилась возможность настраивать и управлять миксинами.

Поддержка FlexBox

В Bootstrap 4 есть возможность включать поддержку FlexBox, благодаря которму можно управлять элементами на странице более гибко. Чтобы включить поддержку FlexBox в Bootstrap, нужно выставить определённые параметры, и скомпилировать фреймворк заново, это делается на официальном сайте.

Компонент карточки (cards)

В Bootstrap 4 были удалены компоненты (wells, thumbnails и panels) вместо них создали компонент cards (карточки), который делает все тоже самое только лучше и удобней.

Сброс HTML Reboot

Появился новый модуль, который сбрасывает стандартные стили HTML-тегов (у каждого браузера свои стили по-умолчанию), предназначенный для кроссбраузерности. Данный модуль теперь хранится в Sass файле и имеет название Reboot. Все эти стили сброса, собираются в файл normalize.css

Больше возможностей для кастомизации тем

В Bootstrap 4, праметры различных элементов страницы сайта (цвета, градиенты, скругления и т.д.) собраны в отдельные файлы, что облегчает перенастройку темы под свой дизайн.

IE8 не поддерживается

Браузер Internet Explorer восьмой версии, в Bootstrap 4 больше не поддерживается. Это необходимо было сделать для того чтобы иметь возможность использовать все новые технологии из CSS3, без использования дополнительного кода, что несомненно благотворно скажется на быстродействии фреймворка.

Размеры в em и rem

В Bootstrap 4 вместо пикселей теперь используются размеры в em и rem, благодаря этому элементы страницы, шрифты и модули стали более гибкими и адаптивными.

JavaScript ES6

Все существующие плагины Botstrap 4, были переписаны с ES5 (JavaScript 5) на более новую версию JavaScript ES6. Код написанный на ES6 (JavaScript 6) более структурирован надёжен и быстр.

Подсказки и popover элементы

Подсказки и popover (всплывающие) элементы, в Bootstrap 4 теперь работают более слаженно и ожидаемо.

Документация Bootstrap 4

Документация Bootstrap 4 стала более полной и переписана с помощью Markdown (облегчённый язык разметки), также улучшен поиск по документации.

Поддержка Bootstrap 3

Когда Bootstrap обновлялся со второй (2) версии на третью (3), то поддержка Bootstrap 2 прекратилась. Это вызвало много нареканий со стороны сообщества. На этот раз с выходом Bootstrap 4, третья версия фреймворка будет также поддерживаться и исправляться при обнаружении багов.

Ну и напоследок, код сайтов которые были созданы с помощью Bootstrap 3, будет также хорошо работать при обновлениий до Bootstrap 4, реализуется обратная совместимость.

Остальное

Изменений в Bootstrap 4 произошло много и не мало изменений еще впереди, следите за обновлениями.

Обновление WordPress 4.4 (Clifford)

8 декабря 2015 года, вышло обновление для WordPress 4.4, под названием «Clifford», в честь американского музыканта Клиффорда Брауна.

Нововведения WordPress 4.4 включают в себя следующее:

  • Разработана новая тема под названием «Twenty Sixteen»
  • Появилась возможность делать изображения адаптивными (не только средствами CSS)
  • Внедрение записей со сторонних сайтов (oEmbed)
  • Внедрена первая стадия REST API
  • Добавлены различные примочки для разработчиков

Рассмотрим более подробней, что нового появилось в WordPress 4.4:

Тема «Twenty Sixteen»

Twenty Sixteen — минималистичная, светлая тема WordPress, имеет стильный и адаптивный дизайн. Располагает четырьмя цветовыми схемами и удачной типографикой. Twenty Sixteen — это современная классическая тема для блога, которая отлично выглядит на любом устройстве.

Адаптивные изображения

WordPress в версии 4.4 начал автоматически подстраивать изображения под размер экрана. Адаптивные изображения реализуются с помощью атрибута srcset.

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

Внедрение записей со сторонних сайтов

Записи и страницы с любого сайта (блога) под WordPress 4.4 и выше, можно встроить на свой сайт (блог). Это возможно благодаря объекту oEmbed.

oEmbed позволит разработчикам стандартными методами движка WordPress (без сторонних плагинов), встраивать записи в свой контент с любого сайта или блога, у которого стоит версия WordPress 4.4 и выше. При встраивании создается так называемая карточка записи, что-то подобное вы можете увидеть например, при вставке URL в запись во Вконтакте (появится карточка страницы на которое указывает URL).

Данную возможность при желании можно отключить с помощью плагина «Disable Embeds».

REST API

В ядро WordPress добавлен функционал REST API, который позволяет использовать не только API WordPress но и самому создавать своё собственное API для WordPress.

Для разработчиков WordPress 4.4

Вместо функции wp_title(), которая отвечает за названия страниц и записей, теперь нужно использовать функцию add_theme_support('title-tag'), которую необходимо разместить в файле functions.php, что даст больше гибкости разработчику и подключение названий будет более правильным.

Произвольные таксономии теперь получили поддержку мета-данных, читайте подробнее о функциях add_term_meta(), get_term_meta() и update_term_meta().

Из-за появившейся поддержки кэширования, повышена производительность комментариев. Также благодаря функции WP_Comment_Query() можно создавать более гибкие запросы.

Об изменениях вы также можете прочитать на официальном блоге WordPress (статья на английском): https://wordpress.org/news/2015/12/clifford/

Типы данных в JavaScript

Всего в JavaScript, существует 6 типов данных:
— Число number,
— Строка string,
— Логический (булев) тип данных boolean,
— Отсутствие значения undefined,
— Пустота, ничто null,
— Объект object.

Эти 6 типов данных, делятся на два вида, простые типы данных и составные (объектные) типы данных.

Простые (примитивные) типы данных: number, string, boolean, undefined, null.
Составные (объектные) типы данных: object

Составным типом данных являются: объект, функция, массив (см. в конце статьи).

Прежде чем рассмотреть каждый тип данных, познакомимся сначала с оператором typeof. Данный оператор позволяет узнать, какой тип данных у переменной, делается это так:

var имяПеременной;
имяПеременной = значение;
alert(typeof имяПеременной);

Тип данных: number

Number — тип данных число. Числа могут быть как целыми так и с плавающей запятой (дробные, вещественные, действительные числа).

var myNumber = 5;
var myNumber2 = 5.5;

В JavaScript в числах с плавающей запятой, используются точки, а не запятые 🙂

Проверяем с помощью оператора typeof, тип данных наших переменных:

alert(typeof myNumber);
alert(typeof myNumber2);

В обоих случаях, скрипт выдаст нам сообщение number.

Тип данных: string

String — тип данных строка. Чтобы превратить значение переменной в строку, её нужно обрамить кавычками: дойными «строка» или одинарными ‘строка’. Если число обрамить кавычками, то её тип данных из number превратится в string:

var myString = 'Привет я строка JavaScript';
var myString2 = '5';

Проверяем с помощью оператора typeof, тип данных наших переменных:

alert(typeof myString);
alert(typeof myString2);

В обоих случаях скрипт выдаст нам сообщение string.

Тип данных: boolean

Boolean — логический (булев) тип данных, он может иметь только одно их двух значений: true (правда) или false (ложь). Значения true или false обычно появляются в операциях сравнения или логических операциях.

var myBoolean = true;
var myBoolean2 = false;

Проверяем с помощью оператора typeof, тип данных наших переменных:

alert(typeof myBoolean);
alert(typeof myBoolean2);

В обоих случаях, скрипт выдаст нам сообщение boolean.

Если логический тип данных обрамить кавычками, то его тип данных из boolean превратится в string.

Тип данных: undefined

Undefined — тип данных который имеет всего одно значение undefined. Этот тип данных появляется тогда, когда переменная объявлена, но не инициализирована, т.е. когда у переменной (свойства объекта или элемента массива) отсутствует значение.

// Объявили переменную, но не присвоили ей значения
var myUndefined;
// Проверяем с помощью оператора typeof, тип данных нашей переменной
alert(typeof myUndefined);

Функция alert() выдаст нам сообщение undefined.

Если переменной присвоить значение undefined, то её тип данных тоже будет undefined.

var myUndefined2 = undefined;
alert(typeof myUndefined2);

Если значение undefined обрамить кавычками, то его тип данных из undefined превратится в string.

Тип данных: object

Object — тип данных объект.

var myObject;
myObject = {
    svoistvo: "znachenie",
    svoistvo2: "znachenie2",
};

Проверяем с помощью оператора typeof, тип данных нашего объекта:

alert(typeof myObject);

Скрипт выдаст нам сообщение object. Так же оператор typeof, покажет object у массивов и функций (см. ниже).

Тип данных: null

Null — это специальный тип данных обозначающий пустоту (ничего). Null — это специальный пустой объект. Например null может появиться при нажатии на кнопку отмена при использовании функции promt().

var myNull = null;
alert(typeof myNull);

Данный скрипт выдаст сообщение object, почему так происходит читайте ниже.

Если null обрамить кавычками, то его тип данных из null превратится в string.

Уточнение по работе с оператором typeof

Здесь сообщу о некоторых подводных камнях которые есть в операторе typeof, например при работе с null и с функциями он выдаёт не верный тип данных, что часто путает начинающих. Ниже я составил небольшую табличку, показывающую как работает оператор typeof:

typeof 7;             // number
typeof "Строка";      // string
typeof true;          // boolean
typeof undefined;     // undefined
typeof {};            // object
typeof [];            // object
typeof null;          // object
typeof new Array();   // object
typeof function(){};  // function
typeof function имяФункции(){} // function

Хотя на самом деле, null это null, а функция это object.

Вместо new Array() можно вcтавить любой другой конструктор объектов, например new Date() или new RegExp().