Frontender Libs - обзор библиотек JS / CSS

JS | window.location window.location Получает/устанавливает URL страницы и его компоненты Свойства объекта Location: hash - часть URL, которая идет после символа '#', включая этот символ host - адрес сайта и порт href - весь URL страницы hostname - адрес сайта pathname - строка пути относительно корня port - номер порта protocol - протокол search - get-параметры, включая символ "?" Примеры использования

//Проверить хеш страницы и выполнить код
if(window.location.hash == '#someHash'){
    doSomething();
}
//Перейти по другому адресу
window.location = "http://javascript.ru"
//перезагрузить страницу
window.location.reload()

Node.js | Express и несколько доменов Express приложение мы уже создали, с помощью EJS его шаблонизировали, что дальше? Дальше нужно решить вопрос с доменами. Конечно, есть случаи, когда достаточно повесить приложение на ip адрес, но это, на самом деле, не такая уж и хорошая практика. Конечно нужен домен. А если доменов несколько? И на каждый домен нужно своё приложение? На помощь приходит пакет vhost. Пользоваться им крайне просто. Создаётся главное Express приложение: var mainApp = express() Затем через метод use к нему подключаются нужные нам обработчики других приложений (либо, допустим, обработчики одного и того же приложения): mainApp.use(vhost('first.example.com', firstApp)) mainApp.use(vhost('second.example.com', secondApp)) Остаётся только поставить слушателя на нужный порт: mainApp.listen(80)

CSS | Всплывающие подсказки Всплывающая подсказка часто используется для указания дополнительной информации о чем-то, когда пользователь перемещает указатель мыши на элемент, если вы хотите добавить такие подсказки на свой сайт, необязательно переделывать разметку, достаточно двух атрибутов и нескольких строк стилей Посмотреть принцип работы и поиграть со шрифтами можно на codepen

JS | querySelector Метод querySelector находит первый элемент, подходящий условию и возвращает его, а querySelectorAll находит все элементы и возвращает их список. Эти методы максимально упрощают взаимодействие разработчика с элементами страницы, теперь не нужен jQuery чтоб получить набор элементов по сложному селектору, достаточно написать: вернет несколько элементов вернет первый элемент из списка Данные возвращаются в формате NodeList, для обработки этого списка в цикле можно использовать разные способы:

 divs = document.querySelectorAll('div');
// spread operator ES6
[...divs].map(el => el.innerText); 

// обычный цикл for
for (var i = 0; i < divs.length; i++) {
    console.log('elem: ', divs[i]); 
}

Node.js | Индикатор загрузки для консоли ora - ещё один интересный npm пакет, позволяющий украсить консольный вывод, а заодно и скрасить ожидание пользователям вашего приложения. С помощью этого пакета можно отобразить индикатор загрузки. Особенности - Поддержка промисов - Поддержка эмодзи - Возможность кастомизации индикатора

CSS | Способы задания цвета Базовые цвета

color: aqua

RGB Самое распространенный вариант, каждое число представляет собой количество красного(Red), зеленого(Green) и голубого(Blue) цвета в смеси.

#f00 - #rgb
#ff0000 - #rrggbb
rgb(255, 0, 0)
rgb(100%, 0%, 0%)

RGBA То же самое представление цвета, но с добавлением альфа-канала, который отвечает за прозрачность.

белый с прозрачностью 50%
rgba(255, 255, 255, 0.5)
rgba(100%, 100%, 100%, 0.5)
#fff8 - #rgba
#ffffff88 - #rrggbbaa

HSL Способ указания цвета в зависимости от его тона(Hue) насыщенности (Saturation) и яркости (Lightness ).

hsl(120, 100%, 25%) - тёмно зеленый
hsl(120, 100%, 75%) - светло зеленый

HSLA То же самое, но с альфа-каналом.

hsla(30, 100%, 50%, 0.1) - очень прозрачный оранжевый

transparent ключевое слово обозначающее прозрачный цвет, эквивалент rgba(0, 0, 0, 0). currentColor ключевое слово обозначающее текущий цвет.

🤩 Мечтаешь стартануть карьеру Python-разработчика❓Но не знаешь, с чего начать❓ Тогда приглашаем тебя на бесплатный вебинар от Web Academy - "Знакомство с языком программирования Python". Во время вебинара ты узнаешь: — где используется и что пишут на Python? — чем занимается Python-разработчик? — что нужно знать, чтобы стать программистом на Python? 🤔 Об этом — и не только 👨‍💻 — будем говорить с Антоном Мазуном - Python Developer at GeeksForLess Inc. 🤘 🤗 Присоединяйтесь 🕔 16.10 в 17:00 по Киеву/МСК (GMT+3) к бесплатному вебинару. ➡️ Больше о вебинаре и регистрация здесь: https://bit.ly/2FqODQm #Ивенты_WebAcademy #Программирование_WebAcademy

Node.js | Язык шаблонов EJS В прошлый раз мы создали Express приложение и указали EJS в качестве движка рендеринга. Пришло время рассказать о нём немного подробнее. Самые любознательные уже осмотрели структуру сгенерированного приложения и нашли index.ejs в директории views. С помощью особого тега (<%=) на страницу выводится значение переменной title. Но существуют и другие теги: <% - этот тег не выводит информацию, но его можно использовать для условий и циклов; <%= - этот тег мы уже использовали, с помощью него можно вывести значение переменной, но стоит сделать замечание: значение выводится экранированным; <%- - этот тег так же выводит значение, но уже без экранирования. Вывод переменной, допустим, со значением '<h1>hi!</h1>' создаст новый элемент h1; <%# - тег комментария, он не выполняется и не выводится. Шаблоны EJS поддерживают подргузку других шаблонов: <%- include(template, params); %> template - путь шаблона, например, 'user/show' params - параметры, что попадут в шаблон.

Как протестировать сторонний web-ресурс? 22 октября на демо-уроке «Основы puppeteer» Юрий Дворжецкий познакомит вас с этой библиотекой Node.js. Вы рассмотрите основы HTML/JS и реализуем простое тестирование стороннего Web-ресурса. Демо-урок входит в программу онлайн-курса «JavaScript QA Engineer». Это единственная в рунете комплексная программа по тестированию на JavaScript. Используйте эту возможность, чтобы бесплатно получить ценные знания, познакомиться с преподавателем и оценить качество курса. Проходите вступительный тест и регистрируйтесь на занятие https://otus.pw/r7Zh/

HTML | Прижатый футер Подвал сайта всегда должен быть прижат к низу экрана, если дизайн не требует другого, задача не самая сложная, но требующая определенных знаний. Вот некоторые способы прижать подвал: - абсолютное позиционирование - минимальная высота контента - табличная верстка - css flex - css grid Рассмотрим два последних варианта, как наиболее актуальные. В обоих случаях нам нужно указать высоту html и body 100% и разделить сайт на две части - контент и футер. css flex Оборачиваем сайт во flex-контейнер, меняем направление основной оси флекса на вертикальную и указываем margin-top: auto для футера, тогда он отступив на максимально возможное расстояние от контента прижмется к низу. css grid Оборачиваем сайт в grid-контейнер, указываем футеру align-self: end и всё, футер прижат.

Node.js | Как создать приложение Express Express - гибкий веб-фреймворк для приложений Node.js. Можно написать приложение вручную, а можно воспользоваться специальным генератором. Создаём новый каталог, переходим в него, открываем терминал или powershell. Установим генератор приложений: npm install express-generator -g Теперь сгенерируем приложение в текущей папке: express --view=ejs Тут стоит сделать замечание, опция --view отвечает за движок рендеринга, в данном случае устанавливается ejs. Ещё можно настроить движок стилей, например, less или sass, с помощью опции --css. Осталось установить зависимости: npm install Теперь запускаем приложение: npm start Всё, можно открывать http://localhost:3000

Как стартануть в React в 2020? Выучить React - непростая задача, технология очень объемная и имеет кучу неочевидных ньюансов, которые непросто найти в документации. Тем не менее React разработчики - самые востребованные на рынке фронтендеров, а React стал стандартом для многих IT гигантов - Facebook, Instagram, Netflix ФРОНТЕНД РАЗРАБОТКА НА REACT - русскоязычный курс от Ивана Клешина - практикующего инженера ПО с 15-летним стажем, вероятно известного вам по видео-урокам на YouTube Курс помогает просто и бюджетно войти в React-разработку и включает в себя 📹 12 часов видео-материала 🧩 9 задач + 9 проектов 💰 Стоимость - €30

HTML | Прилипающая шапка сайта Прилипающая шапка - это наверное самый распространённый вариант реализации главного меню. Особое внимание нужно уделить нескольким вещам: - независимость от ширины экрана - визуальное изменение при начале прокрутки - z-index относительно остальной части сайта Для регулирования разметки внутри меню удобно использовать css grid, не придётся жёстко задавать размеры каждому блоку отдельно, а управление сеткой делается одной строкой в свойстве grid-template-columns. Изменение стилей при прокрутке делается через небольшой скрипт который отслеживает событие прокрутки страницы и добавляет/удаляет класс к блоку шапки, а в стилях этого класса уже можно реализовать все необходимые изменения. Для перекрытия шапкой содержимого сайта ей можно поставить z-index: 10 и при необходимости увеличить.

CSS | currentColor currentColor равен значению color текущего элемента, или его родителя, если у элемента не указан цвет. Таким образном можно быстро задать текущий цвет для всех свойств которые могут принимать цветовое значение: border, outline, background, box-shadow и т.д. currentColor можно прописать как значение fill для svg-иконки, и она всегда будет совпадать с цветом окружающего её текста. Крайне удобно использовать currentColor в интерактивных блоках, когда нужно изменить цвет сразу нескольких свойств, например в кнопках при ховере.

Node.js | Цвета в консоли Зачастую проекты на Node.js очень часто и много пишут в консоль. Это, конечно, может быть и хорошо, но иногда становится очень трудно ориентироваться в консоли. Правильным решением будет разделить вывод в консоль с помощью специальных методов объектов console, например, console.warn, console.error. Эти добавят красок. Но можно пойти дальше. С помощью пакета chalk. Поддерживает 16 миллионов цветов (с помощью Truecolor), жирный текст, подчеркивание и многое другое. Пример

var chalk = require('chalk')
console.log(
  chalk.bgYellow('sWebDev'),
  chalk.bgCyan('is'),
  chalk.bgMagenta('beautifull')
)