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

Персональная рассылка Frontend-вакансий под твою ЗП. Подписывайся! @masterhubot

JS | Fetch Fetch API - это более простая и удобная версия XMLHttpRequest. Fetch позволяет работать с REST API с дополнительными параметрами, такими как кэширование данных и многое другое. Основное отличие состоит в том, что Fetch работает с promise, а не callback.

fetch('https://api...')
    // Handle success
    .then(response => response.json())  // convert to json
    .then(json => console.log(json))    //print data to console
    .catch(err => console.log('Request Failed', err)); // Catch errors

Также можно передавать заголовки, используя свойство «headers»

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: "POST",
  body: JSON.stringify(_data),
  headers: {"Content-type": "application/json; charset=UTF-8"}
})

HTML | PRELOAD & PREFETCH Preload - говорит браузеру как можно скорее загрузить и кэшировать ресурс (например, скрипт или таблицу стилей). Это полезно, когда ресурс понадобится через несколько секунд после загрузки страницы — и вы хотите ускорить процесс.

<link rel="preload" href="/style.css" as="style" />

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

<link rel="prefetch" href="/style.css" as="style" />

Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.

Node.js | Passport Passport.js - npm пакет, который поддерживает аутентификацию с помощью имени пользователя и пароля от аккаунтов Facebook, Twitter, и так далее. Работает в любом приложении на основе Express. Преимущества : - Более 300 стратегий аутентификации - Простая обработка успешных и неудачных результатов - Облегченная база кода

Открываем сентябрь полезными ивентами от Лектрума! 💪 2 сентября собираемся на воркшоп, на котором сверстаем ваш первый настоящий лендинг за 60 минут Что вы узнаете: ✅ Что такое тег и как их правильно применять ✅ Атрибуты тегов и их предназначение ✅ Как отображать на страничке текст и графику ✅ Что такое слои и как с ними работать ✅ Как при помощи стилей превратить обычную HTML-разметку в красивый лендинг ✅ Какие единицы измерения лучше использовать при вёрстке сайта ✅ Что лучше использовать при стилизации элемента — тег, класc или идентификатор Этот воркшоп для вас, если вы: 🤓 Хотите на практике понять, что такое вёрстка 🤓 Решили начать свой путь в IT с вёрстки 🤓 Планируете развиваться во фронтенде 🤓 Хотите пообщаться с экспертами и получить ответы на вопросы, которые возникают у новичков Нажимайте на кнопку ⬇️⬇️⬇️ для регистрации на ивент!

CSS | Центрирование ГОРИЗОНТАЛЬНОЕ ЦЕНТРИРОВАНИЕ: - Центрирование строк текста.

  p { text-align: center; }

- Центрирование блока с фиксированной шириной.

p.blocktext {
   margin: auto;
   width: 6em; }

- Центрирование изображения

img.displayed {
    display: block;
    margin: auto; }

ВЕРТИКАЛЬНОЕ ЦЕНТРИРОВАНИЕ: - Отформатировать блок как ячейку таблицы

div.outer {
    height: 300px;
    display: table-cell;
    vertical-align: middle; }
<div class="outer">
   <p>Этот параграф отцентрирован вертикально.</p>
</div>

- С использованием абсолютного позиционирования

div.outer p {
  margin: 0;
  position: absolute;        
  top: 50%;                   
  transform: translate(0, -50%) } 

- 'flex' для свойства 'display' div.outer { height: 10em; display: flex; align-items: center }

SQL | Трюки от DBA Лайфхаки от опытного администратора БД - Обновляйте лишь то, что нужно обновить - При больших загрузках отключайте ограничения и индексы - Для промежуточных данных используйте UNLOGGED-таблицы - Реализуйте процессы целиком с помощью WITH и RETURNING - В колонках с низкой избирательностью избегайте индексов - Используйте частичные индексы - Всегда загружайте отсортированные данные - Колонки с высокой корреляцией индексируйте с помощью BRIN - Делайте индексы «невидимыми» - Не планируйте начало длительных процессов на начало любого часа В статье подробно разобран каждый пункт с примерами

85% людей, не знают о пользе IT-сервисов, а Вы? Большинство людей пользуются только соцсетями, сервисами заказа еды или такси, а о пользе других IT-сервисов, они даже не знают.. В современном мире без IT - невозможно жить! Всего 15% людей используют IT-сервисы, которые помогают им стать эффективнее в работе, бизнесе или учебе, а также сэкономить массу времени и денег! Канал GIT - это сборник полезных IT-сервисов, с помощью которых вы достигните максимальных результатов в своих делах! Подписывайтесь сейчас - улучшите жизнь с помощью IT

PHP | Поиск файлов При работе с каталогом и файловой структурой иногда может потребоваться найти определенные типы файлов в каталоге ( *.text ,* .png ) PHP glob() - Находит файловые пути, совпадающие с шаблоном и возвращает массив найденных файлов. Код PHP в следующем примере будет искать в каталоге documents и выводить все файлы с расширением .txt. Поиск в подкаталогах не выполняется. <?php foreach(glob("documents/*.txt") as $file){ echo basename($file) . " (size: " . filesize($file) . " bytes)" . "<br>"; } ?>

CSS | Flexbox Наглядное пособие по CSS-Flexbox Автор сделал интерактивными самые популярные свойства: flex-shrink, flex-grow, align-items, flex-wrap и другие.

JS | Call stack Стек выполнения - это LIFO ( last in, first out ) -стек, который используется для хранения контекстов выполнения, создаваемых в ходе работы кода. Механизм работы Call-stack: - JS-движок начинает обрабатывать скрипт. - При обнаружении команды вызова функции движок добавляет ее в начало стека. - Выполняет функцию в верхней части стека. - Oтработанная функция извлекается и выполняется нижняя. - Если стек переполнен, то будет ошибка ("stack overflow" error).

function first(){
  console.log("Hello from firstFunction");
}
function second(){
  first();
  console.log("The end from secondFunction");
}

second();

// Hello from firstFunction // The end from secondFunction По ссылке потренируйтесь с call-stack-ом. И выполните код выше на платформе, если не совсем поняли почему такой вывод.

PHP | Include and Require Files Операторы include() иrequire() позволяют включать код, содержащийся в файле PHP, в другой файл PHP. include("path/to/filename"); -Or- include "path/to/filename"; require("path/to/filename"); -Or- require "path/to/filename"; В чем их отличие? Если файл отсутствует оператор include() будет генерировать только предупреждение, но позволит продолжить выполнение скрипта, тогда как оператор require() сгенерирует фатальную ошибку и остановит выполнение скрипта. Рекомендуется использовать оператор require(), если вы включаете файлы библиотеки или файлы, содержащие функции и переменные, которые необходимы для запуска вашего приложения, например файл конфигурации базы данных.

Node.js | Segmentation Fault Ошибка сегментации возникает, когда программа пытается получить доступ к области памяти, к которой ей не разрешен доступ, или недопустимым способом. Когда вы можете столкнуться с этим в Node: - Когда вы используете собственные дополнения ( C++ addons, пакеты ), если они несовместимы с вашей версией Node, вы часто будете получать сбои. - Если вы изменяете встроенные объекты, модули Node. - Когда в самой Node.js где-то есть ошибка. Как это исправить? - Перекомпилируйте все ваши собственные модули node с помощью npm rebuild . - Установите модуль Segfault-Handler npm install segfault-handler для подробной информации об ошибке. - Убедитесь, что все ваши модули обновлены. - Большинство ошибок описаны по ссылке Node issue tracker