Frontender Libs - обзор библиотек JS / CSS – Telegram
Frontender Libs - обзор библиотек JS / CSS
8.09K subscribers
2.04K photos
735 videos
4 files
247 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
Как вывести строки, в которых присутствует 'Red' без использования OR?
Anonymous Quiz
48%
WHERE 'Red' IN ( C1, C2, C3 )
10%
WHERE 'Red' BETWEEN ( C1, C2, C3 )
29%
WHERE 'Red' CONCAT ( C1, C2, C3 ) LIKE '%Red%'
13%
Нет способа
PHP | Наследование класса

Как только класс будет создан, из него можно будет получить подкласс. Это достигается за счет использования инструкции extends.
Например, у нас есть класс User, который создается при регистрации
class User
{
public $name, $password;
function save_user()
{
echo "Сохраняем данные";
}
}
Если пользователь захочет добавить данные
class UpdateInfo extends User
{
public $phone, $email;
function display()
{
echo "Name: " . $this->name . "<br>";
echo "Pass: " . $this->password . "<br>";
echo "Phone: " . $this->phone . "<br>";
echo "Email: " . $this->email;
}
}
Таким образом мы расширили класс User
🔥 Frontend skills matter?

Всех неравнодушных к фронтенду приглашаю на наш второй канал Senior Frontend

Там можно качать скиллы по HTML, CSS, JS, проходить викторины, общаться в обсуждениях
Node.js | Однократное событие

Используйте метод класса EventEmitter once(eventName, listener) для реакции на событие только один раз.
Например вам нужно изменить эхо-сервер так, чтобы воспроизводил только первый фрагмент отправленных ему данных.

const net = require('net');
const server = net.createServer(socket => {
socket.once('data', data => {
socket.write(data);
});
});
server.listen(8888);

Событие data будет обработано всего один раз.
Семь основных методологий разработки

В современной практике модели разработки программного обеспечения многовариантны. Нет единственно верной для всех проектов, стартовых условий и моделей оплаты.

Самые используемые методологии:
1. «Waterfall Model» (каскадная модель или «водопад»)
2. «V-Model»
3. «Incremental Model» (инкрементная модель)
4. «RAD Model» (rapid application development model или быстрая разработка приложений)
5. «Agile Model» (гибкая методология разработки)
6. «Iterative Model» (итеративная или итерационная модель)
7. «Spiral Model» (спиральная модель)

В статье вы найдете детальнее про каждую методологию и рекомендации когда их применять
This media is not supported in your browser
VIEW IN TELEGRAM
HTML | Datalist

Тег datalist позволяет добавить к полю выпадающие подсказки без сторонних библиотек

  <input 
type="text"
list="country-value"
autocomplete="off"
>
<datalist id="country-value">
<option value="HTML">HTML</option>
<option value="JS">Javanoscript</option>
<option value="PHP">PHP</option>
</datalist>


Когда пользователь будет набирать текст в поле ввода, снизу будет появляться дропдаун с подсказками и пользователь сможет выбрать один из предложенных вариантов, не заканчивая ввод

Если autocomplete включен (по умолчанию включен), то к значениям, которые вы задали в теге datalist, будут добавляться значения, которые пользователь вводил в это поле ранее
Node.js | ZIP files

Модуль adm-zip npm экспортирует класс AdmZip.
const AdmZip = require('adm-zip');
const file = new AdmZip();

Добавлять можно и файлы и папки
file.addLocalFile('./package.json');
file.addLocalFolder('./node_modules', 'node_modules');

Запись в архив может осуществиться несколькими способами, например :
1. С помощью Node.js buffer
const fs = require('fs');
fs.writeFileSync('output.zip', file.toBuffer());
2. С помощью writeZip()
file.writeZip('output.zip');

Распаковка файла
const AdmZip = require('adm-zip');
const file = new AdmZip('./output.zip');
file.extractAllTo('./output');
Сколько строк выведется в результате?
Anonymous Quiz
40%
0
18%
1
11%
2
31%
3
PHP | JSON

Рассмотрим как обновить данные в файле json с помощью php
Основной принцип работы php с json - декодирование или кодирование данных, где данные представлены как массив.

<?php
// Переменная для обновления
$old = trim($old);

// Переменная для обновления старого значения
$new = trim($name);

// Открыть файл data.json
$file = file_get_contents('php/data.json');

// Декодировать в массив
$list=json_decode($file,TRUE);

// Найти в массиве
foreach ( $list as $key => $value){

// Совпадение значения переменной
if (in_array( $old, $value)) {

// Присвоить новое значение
$list[$key] = array('name'=>$new);
}
}
// Перекодировать в формат и записать в файл.
file_put_contents('php/data.json',json_encode($list));

// Очистить переменную
unset($list);


?>


В статье вы найдете также пример добавления/удаления
SQL | UNION

Оператор UNION используется для объединения результатов двух или более запросов SELECT

SELECT column_list FROM table1_name
UNION SELECT column_list FROM table2_name;

Операция UNION отличается от использования JOIN. Операция UNION создает новую таблицу, помещая все строки из двух исходных таблиц в одну таблицу.
Oсновные правила объединения наборов результатов двух запросов SELECT с помощью UNION:
- Количество и порядок столбцов должны быть одинаковыми во всех запросах.
- Типы данных соответствующих столбцов должны быть совместимыми.

Пример, нужно получить всех пользователей ( платных и в пробной версии):

SELECT first_name, last_name FROM trial
UNION
SELECT first_name, last_name FROM premium;

Результат:
+---------------+-------------——-+
| first_name | last_name |
+---------------+-------------——-+
| Ethan | Hunt |
| Tony | Montana |
PHP | Сортировка массива

sort($array, $flag); — по возрастанию.
rsort($array, $flag); — по убыванию.
asort($array, $flag); — подходит для ассоциативных массивов, cсортирует по значению элементов с сохранением связи «ключ — значение».
arsort($array, $flag); — антагонист asort.
ksort($array, $flag); — аналог asort, сортировка не по значениям, а по ключам.
shuffle($array); — перемешает массив и разместит его элементы в случайном порядке.
usort($array, ‘function’); — сортировкa массива без сохранения связи «ключ-значение» в соответствии с пользовательской функцией.
uasort($array, ‘function’); — аналогично usort, но сохраняет связь «ключ-значение».
ukrsort($array, ‘function’); — oтличие от usort заключается в том, что сортировка происходит по ключам элементов.
array_multisort($array1, $array2, $flag); — первый параметр – сортируемый массив, в качестве второго массива указывается порядок сортировки первого, после чего второй массив сортируется по аналогии с первым
JS | map vs forEach

Метод map() вызывает функцию для каждого элемента массива и возвращает новый массив.
Пример: преобразование массива в верхний регистр.

var low = ['a', 'b', 'c'];
var upper = low.map(function(v) {
return v.toUpperCase();
});
// теперь upper = ["A", "B", "C"]
// а low все еще ['a', 'b', 'c']

forEach() ничего не возвращает, а просто вызывает функцию для каждого элемента массива
Пример: вывести измененные элементы массива на странице.

var low = ['a', 'b', 'c'];
var upper = low.forEach(function(v){
console.log(v.toUpperCase());
});
// A , B , C
// upper = undefined, low = ['a', 'b', 'c'];
SQL | TRUNCATE TABLE

Команда TRUNCATE TABLE удаляет данные внутри таблицы, но не саму таблицу.

TRUNCATE TABLE table_name;

TRUNCATE TABLE работает быстрее и использует меньше системных ресурсов, чем DELETE, потому что DELETE сканирует таблицу для создания количества удаляемых строк, затем удаляет строки одну за другой и сохраняет в лог каждую из них, тогда как TRUNCATE TABLE просто удаляет все строки без сохранения дополнительной информации. Но в TRUNCATE TABLE отсутствует оператор WHERE.

Используйте TRUNCATE TABLE, если вы просто хотите удалить все строки и заново создать всю таблицу.
Что выведет консоль?
Anonymous Quiz
17%
null
25%
true
17%
0
41%
NaN
PHP | checkdate

Как проверить, что пользователь передал правильную дату вашей программе?
Нужно передать месяц, день и год функции checkdate, которая вернет значение TRUE, если ей передана допустимая дата, или значение FALSE в противном случае.
Например, если введена дата 30 февраля любого года, то она в любом случае будет недопустимой.

<?php
if (checkdate(2, 30, 2020)) echo "Допустимая дата";
else echo "Недопустимая дата";
// Недопустимая дата
?>
Node.js | multer

Одной из наиболее часто встречаемых задач в Node.js является загрузка файлов на сервер. В Node.js для этого нет встроенных инструментов. Одним из популярных пакетов является multer, который работает поверх Express.
Для конфигурации в функцию multer передается объект, в котором параметр dest указывает на путь, по которому будет загружаться файл. В данном случае это папка uploads:

app.use(multer({dest:"uploads"}).single("filedata"));
app.post("/upload", function (req, res, next) {
let filedata = req.file;
console.log(filedata);
if(!filedata)
res.send("Ошибка при загрузке файла");
else
res.send("Файл загружен");
});

В index.html <input type="file" name="filedata" />;, поэтому в функцию single() передается соответствующее значение.
Настроив multer, мы можем при обработке запроса получить файл через req.file.

В статье более вы найдете подробную информацию, и узнаете как как загрузить несколько файлов.