Что такое веб-приложение? Какие его основные признаки? Чем веб-приложение отличается от веб-сайта?

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

Репозиторий с презентациями и домашними заданиями: https://github.com/larchanka/web-dev-remind

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

Это четвертая лекция моих курсов для будущих веб-разработчиков. Остальные лекции, а также мои блоги (влоги) можно найти у меня на канале.

Репозиторий с презентациями и домашними заданиями: https://github.com/larchanka/web-dev-remind

В этом видео мы разберем основные селекторы CSS, поговорим о флексбоксах и посмотрим на анимации. Только самое главное и самое нужное - никакой "воды".

Это третья лекция моих курсов для будущих веб-разработчиков. Остальные лекции, а также мои блоги (влоги) можно найти у меня на канале.

Репозиторий с презентациями и домашними заданиями: https://github.com/larchanka/web-dev-remind

В этом видео я хотел бы рассказать и посоветовать программы, которые нужны любому веб-разработчику. Так же во время рассказа буду делать акцент на том, какая разница есть между операционными системами (Linux/MacOS/Windows) и как это влияет на работу.

Это вторая лекция моих курсов для будущих веб-разработчиков. Остальные лекции, а также мои блоги (влоги) можно найти у меня на канале.

Репозиторий с презентациями и домашними заданиями: https://github.com/larchanka/web-dev-remind

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

В этой лекции речь пойдет про самое важное в HTML и CSS - только то, что может понадобиться в реальной жизни на старте карьеры веб-разработчика.

Репозиторий с презентациями и домашними заданиями: https://github.com/larchanka/web-dev-remind

Одним из недостатков изпользования AJAX в вебе долго оставалось вот это - XMLHttpRequest - API не предназначенное для такого использования. Было много элегантных оберток вокруг XHR, но всегда казалось, что можно лучше.

«Ленивая загрузка изображений» – это практика, которая популярна уже около десятилетия, и на то есть веская причина: изображения, как правило, – самая тяжелая часть страницы, и возможность не отображать картинки, которые не видны на экране значительно ускоряет загрузку страницы. Есть плагины для ленивой загрузки изображений практически для каждого JavaScript-фреймворка, или же можно использовать Intersection Observer API. Сейчас такой функционал стал очень востребован и разработчики Chrome добавили встроенную поддержку lazy loading в браузер.

Текст – всему голова. Конечно, классно рассматривать картинки и смотреть видео в интернете, но, все же, большинство материалов в сети представляют из себя текст. Обращали ли вы внимание, что читать статьи на одном сайте удобнее, чем на другом? Это происходит от того, что один дизайнер (если он был) подумал об удобстве восприятия информации, а второй вовсе не задумывался об этом.

Новый тренд в дизайне - милые цветные кружочки (квадратики) различного цвета с первой или двумя первыми буквами имени. Так сейчас делают все: браузер Сафари, почтовые клиенты, социальные сети.

Здесь я покажу как это сделать с помощью JavaScript. Главный вопрос – подбор цвета?

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

Вот так будет выглядеть наш HTML:

<div class="user-info">
    <div class="user-info-avatar" id="avatar"></div>
    <div class="user-info-name" id="name"></div>
</div>

Добавим немного CSS-стилей:

.user-info-avatar {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
    margin-right: 10px;
    color: white;
}
.user-info-name {
    display: inline-block;
}

А теперь JavaScript:

var stringToColor = function stringToColor(str) {
    var hash = 0;
    var color = '#';
    var i;
    var value;
    var strLength;

    if(!str) {
        return color + '333333';
    }

    strLength = str.length;

    for (i = 0; i < strLength; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }

    for (i = 0; i < 3; i++) {
        value = (hash >> (i * 8)) & 0xFF;
        color += ('00' + value.toString(16)).substr(-2);
    }

    return color;
};

var name = 'Михаил';
var letter = name.substr(0, 1);
var backgroundColor = stringToColor(name);
var elementAvatar = document.getElementById('avatar');
var elementName = document.getElementById('name');

elementName.innerHTML = name;
elementAvatar.innerHTML = letter;
elementAvatar.style.backgroundColor = backgroundColor;

За генерирование цвета отвечает функция stringToColor. Она принимает строку с именем (любую строку), переводит ее в биты и уже из них в HEX-цвет. Если мы не передадим в функцию ничего, то получим в ответ цвет по умолчанию – в данном примере, #333333.

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

В грядущем обновлении Mac OS, с номером 10.11 и названием El Capitan, придет и новая версия браузера Safari – 9.0.

Список нововведений не слишком чтобы внушительный, но интересные вещи там присутствуют. Одна из них – возможность добавить кнопку airplay в любое видео, вставленное с помощью тега video.