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 — автоматическая проставновка браузерных префиксов.

ES6 - Symbol

Symbol это уникальный и неизменяемый тип данных.

Свойства символов:
При создании символам можно дать имя.

 Создаём символ id с описанием (именем) "id"
let id = Symbol("id");

Они гарантированно уникальны.

 let id1 = Symbol("id");
 let id2 = Symbol("id");

alert(id1 == id2); // false

Не преобразуются автоматически в строки.

 let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

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

let id = Symbol("id");

let user = {
  name: "Вася",
  age: 30,
  [id]: 123 // просто "id: 123" не сработает
};

Игнорируются циклом for…in

 for (let key in user) alert(key); // name, age (свойства с ключом-символом нет среди перечисленных)

Инструменты для верстки Pixel Perfect

Pixel Perfect - это техника, при использовании которой вёрстка в точности совпадает с макетом.

Для её реализации отлично подходит расширение для браузера PerfectPixel.

В браузерах, где нет поддержки этого расширения — можно использовать скрипты, например X-Precise.

Сценарий работы:
1. Сохраняем макет в формат изображения .png или .jpg
2. В браузере открываем сверстанный по этому макету документ
3. При помощи плагина изображение макета накладывается на сверстанную страницу.

Наконец-то мы нашли этот канал!

Друзья, кто работает, учится или планирует начать заниматься программированием – welcome в Твой Программист.

🔥 Здесь есть всё, что нужно IT-специалисту: от статей до новостей, от обучения до юмора, от интерактива до полезных советов.

Автор собирает вокруг канала крутое коммьюнити, с которым познавать сферу будет ещё легче и интересней. Советуем подписаться 😌

JS Слайдер

Слайдер реализован на нативном JS.

Количество показываемых слайдов можно изменить в переменной slidesToShow.
Количество пролистываемых слайдов изменяется в переменной slidesToScroll.

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

CodeWars - минимальный свободный ID

Получаем массив чисел и находим минимальное неотрицательное число, которого нет в этом массиве.

CSS ::before и ::after

before и after - псевдоэлементы
С их помощью можно стилизовать элементы, не размещенные в HTML
before размещается до контента родительского элемента, а after после.

Для добавление контента внутрь псевдоэлементов нужно воспользоваться CSS-свойством content.

Добавить можно:
1. Строку content: "a string"
2. Картинку content: url(/path/to/image.jpg)
3. Ничего content: “”
При добавлении пустого значения можно задать псевдоэлементу ширину и высоту и стилизовать его как отдельный блок.

Before и after отлично подходят для стилизации маркеров списков, а также для добавления разного рода разделителей.

CSS Анимация

Анимация — это набор ключевых кадров, хранящихся в CSS:
@keyframes a1 {
0% {
width: 50px;
}
100% {
width: 150px;
}
}
В фигурных скобках содержится список кадров. Мы используем начальный кадр 0% и конечный 100%.

Способ подключения анимации к элементу:
element {
//имя
animation-name: a1;
// длительность
animation-duration: 2s;
// задержка перед началом
animation-delay: 5s;
// число повторов
animation-iteration-count: 3;
//скорость воспроизведения
animation-timing-function: steps(7, end);
}

К одному элементу можно применить несколько анимаций:
element {
animation-name: a1, a2;
animation-duration: 2s, 4s;
}