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

В примере по ссылке реализован базовый шаблон для модального окна.

Хотите быть в курсе всех последних событий в сфере IT? https://t.me/T_e_c_h_4 📝На этом канале вы получите краткую и ёмкую информацию о технологиях, новостях, инсайдах. Всегда удобно следить за короткими статьями и постами. Именно поэтому данный канал подходит для тебя! 👇 https://t.me/T_e_c_h_4 📈Крутой канал с интересным контентом 🗂Качественные статьи, удобная подача 📘Создан для интересующихся технологиями людей ✅Заходи, будет интересно

CSS | background CSS3 предоставляет возможность указать несколько фонов для блока одной строкой с помощью короткой записи которая объединяет свойства background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, и background-attachment.

 
background
   url(url.jpg) center / 50% no-repeat, 
   url(url.svg) top 100% / contain fixed repeat-x,
   linear-gradient(to bottom, #000 0%, #0000 100%),
   #ccc

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

Не тормози на пути в Веб-разработку Ребята, знакомьтесь с другими нашими каналами, если еще не знакомы Frontend Interview - здесь мы помогаем готовиться к собеседованиям на фронтенд разработчика Senior Frontend - здесь мы постим крутые примеры кода, статьи и викторины по фронтенду Приятного просмотра 😉

Периодически возникает задача найти и обработать все вхождения подстроки в набор строк, например при разборе поисковых результатов для выделения совпадений с поисковой строкой. Простой способ реализации представлен ниже, с помощью jQuery-метода html перебирается содержимое поисковых подсказок, и найденная подстрока оборачивается в span с классом. let replace = 'query'; // строка которую ищем let re = new RegExp((replace),"gi"); $('.search-result__item').html(function(i, v){ return v.replace(re, '<span class="search-results__match">$&</span>'); }); Код не идеальный, предложите свой метод реализации решения этой задачи.

Наконец напишем саму кластеризацию. Если текущий процесс приложения - основной, то мы пробегаемся циклом по числу доступных потоков процессора и создаём по экземпляру на каждый поток:

if (cluster.isMaster) {
  let cpus = os.cpus().length
    
  for(let i = 0; i < cpus; i++) {
    cluster.fork()
  }

  cluster.on('exit', (worker, code) => {
    console.log('Воркер', worker.id, 'завершен')
    app.listen(3000, '127.0.0.1', () => console.log('Воркер', cluster.worker.id, 'запущен'))
  })
} else {
  app.listen(3000, '127.0.0.1', () => console.log('Воркер', cluster.worker.id, 'запущен'))
}

Готово, теперь можно посетить 127.0.0.1:3000 и увидеть в консоли, какой воркер поймал запрос.

Node.js | Кластеризация Зачем нужна кластеризация? В большинстве случаев, конечно, она может и не понадобиться, но когда нагрузка на приложение нарастает, приложению становится сложнее обрабатывать запросы. Напомню, что Node.js сам по себе однопоточный. Улучшить ситуацию может как раз таки кластеризация. И так, основная цель кластеризации - запуск нескольких экземпляров приложение и распределение между ними запросов. Мы будем использовать встроенный в Node.js модуль Cluster. Для начала объявим необходимые зависимости:

var os = require('os')
var cluster = require('cluster')
var express = require('express')

Теперь создадим экземпляр Express приложения и повесим на него обработчик. В обработчике будем выводить ID воркера, который обрабатывает запрос в данный момент.

var app = express()
app.use((req, res, next) => {
  if (cluster.isWorker) {
    console.log('Воркер', cluster.worker.id, 'поймал запрос')
  }
  next()
})
app.get('/', (req, res) => res.send('Кластеризация'))

HTML | favicon При загрузке сайта, в адресной строке браузера можно иногда увидеть небольшую картинку, которая связана с тематикой сайта. Тот же рисунок отображается рядом со ссылкой при добавлении ее в закладки браузера. Раньше было достаточно положить в корень сайта файл favicon.ico размером 16 на 16 пикселей и браузер подхватывал её на лету. Сейчас с обилием устройств, на которых можно просматривать сайты, выросли и требования к фавиконке. realfavicongenerator.net - ресурс который из одного изображения генерирует набор фавиконок для всех устройств, включая иконки приложений для сайтов закрепленных на экране мобильного телефона или в меню пуск windows 10.

JS | Содержимое элементов страницы Есть два простых и похожих друг на друга метода, которые позволяют динамически изменять или получать содержимое элементов страницы. Выбрать способ нужно в зависимости от того, что вы хотите изменить, только текст или html разметку. На чистом JS для этого можно использовать

el.textContent         // вернет текстовое содержимое 
el.textContent = 'foo' // установит новое значение

el.innerHTML                    // вернет html-разметку
el.innerHTML = '<div>foo</div>' // установит новое значение

В jQuery для этого есть два метода $('.elem').text() // вернет текстовое содержимое $('.elem').text('Foo'); // установит значение $('.elem').html(); // вернет html-разметку $('.elem').html('<div>Foo<div>') // установит значение

Webchic - отбор качественных материалов(en/rus) по веб разработке с уклоном на фронтенд: -- nodejs -- webpack -- css -- javascript -- собеседования -- CI/CD -- архитектурные решения -- алгоритмы

Node.js | Запуск приложения на Heroku Альтернатива разворачиванию приложения на сервере - использование облачных платформ, например, Heroku. Эта статья - краткое руководство по запуску приложения на этой платформе. Сначала подготовим приложение, для этого необходимо в package.json в разделе scripts создать команду start, что будет запускать проект. (Например, так: "node index.js") Теперь инициализируем Git: git init Добавляем все файлы и коммитим: git add . && git commit -m "first commit" Установим CLI инструмент Heroku глобально: npm install -g heroku Затем необходимо авторизоваться: heroku login Теперь создаём Heroku приложение в директории нашего Node.js приложения: heroku create Пушим проект в Heroku: git push heroku master Готово. В консоли появиться ссылка с нашим сайтом-приложением.

CSS | Псеводкласс :not Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор. Быстрый способ получить набор одинаковых элементов за исключением, например, первого или последнего, или содержащего дополнительный класс или атрибут. Этот псевдокласс не увеличивает специфичность селектора.

все элементы li, кроме первого и последнего
li:not(:last-child):not(:first-child)

все кнопки без атрибута disabled
button:not([disabled])

все элементы с классом link, но без класса is_active
.link:not(.is_active)

Node.js | Как подружить Nginx с Express приложением? В прошлый раз у нас был Apache, в этот раз предлагаю подружить Nginx с Express приложением. Тут всё даже немного проще, открываем конфигурационный файл, выделяем домен и, в раздел location, вставляем следующее содержимое:

proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

Перезапускаем Nginx. Всё. Ещё раз напомню, порт выше - порт, который слушает ваше Express приложение.

JavaScript задачи с собеседований - канал на котором публикуются интересные задачки по JavaScript. Так же react, vue, angular, node.js Тематика канала : — cинтаксис, — условные операторы, переменные и типы данных, — функции и функциональные выражения, — циклы, взаимодействие с пользователем, — строки, массивы. Проверь свои знания языка на @javascriptquiz

HTML | shema.org Микроразметка — своего рода единый язык, который одинаково понимают и трактуют поисковые роботы Google, Яндекс, Bing, Yahoo. Об этом они «договорились» еще в далеком 2011 году. С помощью микроразметки можно показать роботам, что определенный текст или другие элементы на странице важны и принадлежат к определенному типу данных. Для добавления микроразметки к блоку на сайте его тегу нужно добавить атрибуты itemscope (указывает что этот блок содержит микторазметку) и itemtype (определяет описываемый тип данных), а его дочерним элементам добавить атрибут itemprop, который укажет что именно содержит этот тег. Пример разметки: <div itemscope itemtype="http://schema.org/Movie"> <meta itemprop="name" content="Footloose"> <div itemprop="potentialAction" itemscope itemtype="http://schema.org/WatchAction"> <a itemprop="target" href="http://example.com">Watch</a> </div> </div>