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

Технология максимально проста и позволяет строить текстовые колонки без дополнительных оберток и костылей. column-count - количество столбцов, на которые элемент должен быть разделен column-fill - задает способ заполнения столбцов column-gap - указывает зазор между столбцами column-rule - сокращенное свойство для установки всех свойств столбца column-rule-color - задает цвет правила между столбцами column-rule-style - задает стиль правила между столбцами column-rule-width - задает ширину правила между столбцами column-span - указывает, сколько столбцов элемент должен охватывать поперек column-width - задает рекомендуемую, оптимальную ширину столбцов columns - сокращенное свойство для задания ширины столбца и счетчика столбцов article { columns: 2 200px; column-gap: 20px; column-rule: 1px dotted #000; }

PHP | cURL Для получения данных с какого-либо сайта можно воспользоваться функцией file_get_contents. Но что делать, если, например, потребовалось отправить POST запрос с заголовком авторизации? В таких случаях на помощь приходит cURL, однако не всегда удобно пользоваться им, так сказать, в "сыром" виде. Куда удобнее будет воспользоваться PHP Curl Class - composer пакетом для упрощения выполнения запросов. Пример

require __DIR__ . '/vendor/autoload.php';

use Curl\Curl;

$curl = new Curl();

$curl->post('https://www.example.com/login/', array(
  'username' => 'myusername',
  'password' => 'mypassword',
));
var_dump($curl->response);

Node.js | node-canvas node-canvas - npm пакет, который позволяет работать с изображениями. Преимущества - Максимально точно реализует Web Canvas API - Позволяет работать с PNG, JPEG и PDF - Позволяет писать текст - Поддерживает загрузку шрифтов

HTML | EMMET EMMET - плагин, который позволяет значительно увеличить скорость верстки за счет комбинации команд и аббревиатур. Работает во всех популярных IDE Несколько примеров: - Комментарий после закрывающего тега с информацией о элементе

div.class|c
<div class="class"></div>
<!-- /.class -->

- Умножение

ul>li*3 
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul> 

- Атрибуты

td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>

SQL | Чем отличается WHERE от HAVING? Кажется, что с помощью WHERE можно решить любую задачу. Однако, предположим, у нас есть таблица результатов экзаменов с именем экзамена, номером ученика и самой оценкой за экзамен. Как выбрать учеников и экзамен с минимальной оценкой 5? В данной ситуации на помощь приходит как раз таки HAVING - дополнительное условие по уже имеющейся выборке. Из документации имеем, что основное отличие WHERE от HAVING заключается в том, что WHERE сначала выбирает строки, а затем группирует их и вычисляет агрегатные функции (таким образом, она отбирает строки для вычисления агрегатов), тогда как HAVING отбирает строки групп после группировки и вычисления агрегатных функций. Следовательно, задачу можно решить одним запросом SELECT StudentId FROM EXAM_RESULT GROUP BY StudentID HAVING MIN(Mark) = 5 Почему иначе - сложнее? Чтобы понять, что у ученика минимальная оценка 5, нужно сначала сгруппировать значения ученика. Иначе база данных получит минимальную оценку у всех учеников.

Давно хотел поднять свой LVL во фронте? Тогда этот канал точно для тебя! Админы канала Frontender's Notes заливают в открытый доступ только самую важную инфу для программистов любого уровня: – Бесплатные материалы и лайфхаки для быстрого освоения JavaScript, HTML и CSS – Горящие вакансии Junior и Middle разработчиков с зп от 1000$ до 3000$ – Скидки до 50% на обучающие курсы от ведущих онлайн-школ Хочешь с каждым днём прокачивать свои навыки во фронтенде? Тогда добро пожаловать!

JS | Filter() Метод filter() - создает новый массив с элементами, которые подпадают под заданные критерии.

arr.filter(callback(element[, index, [array]])[, thisArg])

callback - функция, которая будет вызвана для каждого элемента массива (return true , false) element - текущий обрабатываемый элемент в массиве. index- индекс текущего обрабатываемого элемента в массиве. array - массив, по которому осуществляется проход. thisArg - значение, используемое в качестве this при вызове функции callback. Пример, как получить массив первых буквы каждого слова в строке?

var sentence = "Senior Web Dev";
// Запишем каждый символ в массив
var arrSent = sentence.split("")
var subset = arrSent.filter((element, index, array) => {
  if (index == 0) {
    return true;
  } else if (array[index - 1] === " ") {
    return true;
  }
})
// ["S", "W", "D"]

CSS | REM При использовании EM - каждый div наследует размер шрифта от своего родителя, каждый раз увеличивая

body {
  font-size: 14px;}
div {
  font-size: 1.2em;}

<div>
    16.8px
    <div>
      20.16px
      <div>
        24.192px
      </div>
    </div>
  </div>

Если вам нужно задать одинаковый размер подойдет rem. Буква "r" в rem означает root (корень); то есть размер шрифта задается относительно корневого элемента; в большинстве случаев это будет html элемент

html {
    font-size: 14px;}
div {
    font-size: 1.2rem;}

В каждом из трех вложенных элементов в прошлом примере, шрифт будет равен 16.8px.

IT Верстальщик - канал про верстку и бэкенд в телеграм. Этот канал для тебя, если ты: - учишь верстку и языки программирования - работаешь верстальщиком/фронтом - хочешь выйти на фриланс - интересуешься бэкендом - работаешь бэком, но хочешь быть в курсе последних тенденций в верстке и на фронте в целом

PHP | Хранение паролей Хранить пароли пользователей в базе данных в открытом виде - очень плохая идея. Куда правильней будет хранить его хеш - строка, обычно определённой длины, характеризирующая пароль. Сгенерировать хеш можно, например, функциями md5() или sha1(), но ввиду быстроты работы этих алгоритмов шифрования это так же не даст необходимой безопасности. Как же быть? С пятой версии PHP появились встроенные методы хеширования паролей. Так, получить хеш пароля можно функцией password_hash('ПАРОЛЬ', PASSWORD_DEFAULT), его можно без опаски сохранить в базу данных. А проверить валидность пароля можно функцией password_verify('ПАРОЛЬ_ТРЕБУЮЩИЙ_ПРОВЕРКИ', 'ПОЛУЧЕННЫЙ_РАНЕЕ_ХЕШ'). Пример использования

$pass = '8aZdYaB0';
$hash = password_hash($pass,  PASSWORD_DEFAULT);
if (password_verify($pass, $hash)) {
  echo ("Пароль верный");
} else {
  echo ("Пароль неверный");
}
echo (", ");
if (password_verify('1s8', $hash)) {
  echo ("Пароль верный");
} else {
  echo ("Пароль неверный");
}

Как создавать с помощью React.js серьезные проекты? Освойте продвинутые навыки на демо-уроке «Разработка библиотеки компонентов на React + Storybook». 22 сентября на бесплатном вебинаре вы научитесь разрабатывать презентационные компоненты используя storybook. А также рассмотрите настройки, возможные расширения и как правильно выстроить библиотеку презентационных компонентов. Узнаете, как сделать snapshot тестирование с помощью Loki. Демо-занятие является частью программы онлайн-курса «React.js Developer», который поможет вам раскрыть возможности этого фреймворка. Пройдите вступительный тест для регистрации