Var, let и const

Объявление переменных let и const - фича из ES6

Отличия let от var
1. Область видимости
let - блочная (видна только внутри блока {...})
var - функциональная (видна внутри функции и вложенных в нее)

let result = 20;

if (true) {
let result = 10;
}

console.log(result); // 20

var result = 20;

if (true) {
var result = 10;
}

console.log(result); // 10

2. Hoisting - объявление var переместится в начало функции

console.log(x); // undefined
var x = 10;

превращается в

var x;
console.log(x); // undefined
x = 10;

Отличие const от let:
Значение переменной, объявленной с помощью const, нельзя переназначить, это не относится к свойствам объекта

const person = {
name: 'Kim Kardashian'
}
person.name = 'name' // Ок
person = {} // Ошибка

CSS свойство white-space

Оно говорит браузеру, как работать с множественными пробелами и переносами строк.

Пример:
<p>I have multiple spaces
and a line break</p>

white-space: normal
Строки будут переноситься, если в строке не будет хватать места

white-space: nowrap
Повторяющиеся пробелы игнорируются, переводы строк не используются.

white-space: pre
Повторяющиеся пробелы и переводы строк выводятся так же как и в исходной разметке, естественные переводы строк не работают.

white-space: pre-line
Повторяющиеся пробелы игнорируются, переводы строк обрабатываются.

white-space: pre-wrap
Обрабатываются повторяющиеся пробелы и явные переводы строк, а также естественные переводы строк.

Angular - The Complete Guide (2020 Edition)

Курс вышел - можно смотреть целиком

https://news.1rj.ru/str/seniorFrontCourse/46

Только для проактивных подписчиков

Заходите в обсуждения канала
Там собрался Чат анонимных фронтендеров, задают вопросы, знакомятся, обсуждают контент, вообщем целая фронтенд туссовка, welcome

Построение гексагональной сетки с использованием CSS grid

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

Вышел новый фильм!

В кассе кинотеатра много людей, стоящих в огромной очереди. Каждый из них имеет одну 100, 50 или 25 долларовую купюру. Билет стоит 25 долларов.

Может ли Вася продать билет каждому человеку и дать сдачу, если у него изначально нет денег и он продает билеты строго в порядке очереди людей?

Верните Да или Нет

tickets([25, 25, 50]) // => YES
tickets([25, 100]) // => NO

ES6 - Spread / Rest оператор

Данный оператор "разбивает" ("spread") объект на индивидуальные элементы. Или "объединяет" ("rest"), в зависимости от варианта использования.

Примеры использования:

function foo(x, y, z) {
console.log(x, y, z);
}

let arr = [1, 2, 3];

foo(...arr); // 1 2 3

Клонирование свойств массивов:

 = ['will', 'love'];
var data = ['You', ...arr, 'spread', 'operator'];

console.log(data); // ['You', 'will', 'love', 'spread', 'operator']

Преобразование коллекции DOM элементов:

 = [...document.querySelectorAll('a')];
// Или просто
var links = [...document.links];

Array.isArray(links); // true

Объединение набора значений в массив:
function foo(...args) {
console.log(args);
}

foo(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

ES6 - шаблонные строки

Шаблонные строки заключены в обратные кавычки () .
Они могут содержать подстановки, обозначаемые знаком доллара и фигурными скобками (${выражение}).

Возможности:

1. Многострочность

console.log(`string text line 1
string text line 2`);
// "string text line 1
//  string text line 2"

2. Интерполяция выражений

 a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// "Fifteen is 15 and not 20."

3. Сырые строки

 tag(strings) {
  return strings.raw[0];
}

tag`string text line 1 \\n string text line 2`;
// выводит "string text line 1 \\n string text line 2",
// включая 'n' и два символа '\'

4. Вложенные шаблоны

 classes = `header ${ isLargeScreen() ? '' :
`icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

Всем привет. Xочу посоветовать вам неплохой канал с подборками статей касающихся фронтенда
На канале публикуются годные статьи на такие темы как:

Обучающие материалы и обзор современных технологий
Новости фронтенда
Рекомендации по написанию кода
Вакансии
Soft skills для разработчика

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

Figma

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

Преимущества:

1. Многопользовательский режим редактирования

2. Хранение файлов в облаке

3. Комментирование макетов

4. Производительность

Figma полностью бесплатна в режиме просмотра. Это значит, что члены команды смогут видеть все макеты и презентации.

Для верстальщиков и программистов в Figma есть специальная панель Code, на которой можно скопировать CSS-стили для Web, а также код-разметки расположения и стилей для Android и iOS.

Несколько необычных эффектов подчеркивания при наведении на ссылки.

Код реализован на чистом CSS.

При реализации автор использует абсолютное позиционирование, свойства transform и box-shadow.

Для плавности установлено свойство transition: all 0.6s, которое при желании можно изменить.

7 советов по оптимизации CSS для ускорения загрузки страниц

1. Найдите узкие места производительности
2. Минифицируйте и сжимайте CSS-файлы
3. Используйте Flexbox и CSS Grid
4. Используйте тег <link> вместо правила @import
5. Используйте градиенты и SVG вместо растровых изображений
6. Избегайте правила !important
7. Выполняйте рефакторинг

Примеры выполнения, а также подробное описание советов вы можете посмотреть в статье.

Интересуешься веб разработкой? Тогда рекомендуем тебе подписывайтесь на канал @frontend_info. Каждый день публикуются отборные статьи, туториалы, видеокурсы и многое другое из мира современного фронтенда.

Таймер обратного отсчета на нативном JS.

Считает время до указанной даты в переменной deadline.

С помощью метода Date.parse автор получает количество миллисекунд, прошедших с 1 января 1970 года до выбранной даты.

Затем, с помощью математических вычислений получает дни, часы, минуты и секунды, которые подставляет в HTML.

Установка gulp + browsersync

1. Инициализируем проект и устанавливаем необходимые пакеты.
npm init
npm i –g gulp
npm i --save-dev gulp


 npm i --save-dev browser-sync 

2. Создаем файл gulpfile.js и выполняем настройку пакетов.

 var gulp = require('gulp');
 var browserSync = require('browser-sync').create();

gulp.task('browser-sync', () => {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

3. Запускаем gulp и получаем автоматическую перезагрузку страниц при изменении файлов.

Tакже gulp поддерживает разные плагины, например:
Sass - компиляция sass в css;
gulp-watch — мониторинг изменений;
Gulp autoprefixer — автоматическая проставновка браузерных префиксов.