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

JS | Moment.js Moment.js - библиотека для форматирования даты в нужном вам формате. Работает в браузере и с Node.js. Легко подключается и настраивается и при этом работает динамично со всеми временными зонами. Поддерживает: - Текущие даты

moment().format("MMM Do YY");               // авг. 27-го 20
moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020

- Относительные

moment().endOf('day').fromNow();          // через 10 часов
moment().startOf('hour').fromNow();       // 13 минут назад

- Календарные

moment().calendar();                      // Сегодня, в 14:12
moment().add(1, 'days').calendar();       // Завтра, в 14:12

- Локальные

moment.locale();         // ru
moment().format('LT');   // 14:12

PHP | Files mode Функция fopen() - принимает вторым параметром режим работы с файлом.

fopen("\resource.txt", "r");

Основные режимы: - 'r' - Открывает файл только для чтения; помещает указатель в начало файла. - 'r+' - Открывает файл для чтения и записи; помещает указатель в начало файла. - 'w' - Удаляет содержимое файла. Если файл не существует - пробует его создать. - 'w+' - Открывает файл для чтения и записи. Удаляет содержимое файла. Если файл не существует - пробует его создать. - 'a' - Открывает файл только для записи; помещает указатель в конец файла. Если файл не существует - пытается его создать. - 'a+' - Открывает файл для чтения и записи; помещает указатель в конец файла. Если файл не существует - пытается его создать.

Node.js | Обработка асинхронных ошибок Если ошибка не обработана, то ваше приложение находится в неопределённом состоянии. try/catch c синхронными ошибками работает замечательно, но в Node.js лучше всего писать асинхронный код, чтобы не блокировать thread. Некоторые способы обработки асинхронных ошибок: - Прослушиваем все сообщения об ошибках (on error).

server.on('error', function (err) {
console.error(err)
process.exit(1)})

- Прослушиваем uncaughtException в объекте process.

process.on('uncaughtException', function (err) {
  console.error('uncaughtException: ', err.message)
  console.error(err.stack)
  process.exit(1)})

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

Персональная рассылка 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-ом. И выполните код выше на платформе, если не совсем поняли почему такой вывод.