Генератор надежных и сложных паролей онлайн

  Александр Маврин   Комментариев нет

Password Generator online

Привет всем. Этот материал будет занесен в специальный блок с полезными сервисами и речь в нем пойдет о генераторе паролей онлайн и как им пользоваться. Думаю вы в курсе, что пароли от сайтов необходимо периодически менять для вашей же безопасности. Некоторые сайты могут предупреждать об этом, например ВК или Госуслуги, не говоря уже про банковскую сферу, например ВТБ или Сбербанк онлайн. Последние относятся к этому вопросу самым серьезным образом.

Для того, чтобы сгенерировать пароль существуют специальные программы, типа AZPassword или GenPass, но их нужно скачивать и устанавливать, что не очень хочется делать. Желательно сделать это быстро и без особых заморочек. К счастью сделать это можно при помощи онлайн генератора паролей, который я написал специально для этих целей. Уверен, что он вам пригодится и предлагаю оценить сие творение прямо сейчас.

Генератор паролей

Этот генератор паролей позволяет создать пароль от 4-х символов, что является крайне не надежным, до 40 символов. И с учетом того, что генератор паролей использует цифры, строчные и прописные буквы, а так же специальные символы, то надежность такого пароля Как генерируется пароль

Длина пароля от 4 до 40 символов
Цифры Да
Строчные буквы Да
Прописные буквы Да
Спец. символы Да
Пример }WHew*5_iG;b8oHcw

Поэтому если вам нужно срочно сменить пароль на Яндексе, Майл he или стиме, то можно смело пользоваться этим генератором паролей онлайн, тем более, что пароль легко скопировать, нажав на соответствующую кнопку. Если очень постараться, то можно сгенерировать запоминающийся пароль и вам не придется его записывать, но лучше сгенерировать более сложный пароль и хранить его в надежном месте на бумаге.

Валидация номера телефона на JS и jQuery

  Александр Маврин   Комментариев нет

Валидация телефона на js

Способов валидации форм на стороне клиента, а именно поля ввода номера телефона (инпута) существует несколько. Для этих целей существуют специальные jQuery плагины, типа Inputmask, которые легко подключить и легко использовать. Но в этой статье мы их рассматривать не будем, а будем производить валидацию телефона при помощи регулярного выражения и совсем маленькой функции, которую можно будет использовать в последующем и других проектах. Для демонстрации предлагаю посмотреть и протестировать пример.

Демо

Валидация номера телефона на JS

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

1
2
3
4
5
6
7
8

let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
let phone = '89000000000';
// дальше идет проверка на соответствие выражению
if(!regex.test(phone){
console.log('Не соответствует');
}else{
console.log('Соответствует');
}

То же самое можно записать в функцию валидации и вызывать ее где угодно в коде.

1
2
3
4
5
6
7
8
9
10
11
12

function validatePhone(phone){
 let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
 return regex.test(phone);
}
// Вызов функции
let phone = '89000000000';
 
if (!validatePhone(phone)){
  console.log('Не соответствует');
}else{
  console.log('Соответствует');
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

89000000000
+79000000000
8-900-000-00-00
+7-900-000-00-00
8(900)0000000
8(900)000 00 00
+7 (900) 000 00 00
8(900)-000-00-00
+7(900)-000-00-00
+7(900)000-00-00
8 900 000 00 00
+7 900 000 00 00
8-(900) 000 00 00
+7-(900) 000 00 00
8-(900)-000-00-00
+7-(900)-000-00-00
7(999)999 99 99
79000000000
7-900-000-00-00
7-(900)-000-00-00
7(900)-000-00-00
7(900) 000 00 00
7 (900)-000-00-00
7 (900) 000 00 00
7 900 000 00 00
8000000000
9000000000
800 000 00 00
900 000 00 00
800-000-00-00
900-000-00-00
(800)-000-00-00
(900)-000-00-00

Валидация телефона на jQuery

Здесь все в точности то же самое, но пройдемся по HTML коду и разберем по полочкам все элементы, чтобы было более понятно. Допустим у нас есть вот такой инпут:

<input type="tel" class="input"/>

Затем пишем jQuery код.

1
2
3
4
5
6
7

let phone = $('.input').val(); // Получаем значение input
let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
if(!regex.test(phone){
console.log('Не соответствует');
}else{
console.log('Соответствует');
}

Обычно валидация поля с телефоном происходит при отправке Ajax запроса без перезагрузки страницы. данный способ подойдет, если в форме есть всего несколько полей, к примеру имя и телефон. Если полей много и для каждого требуется проверка на корректность заполнения, то здесь лучше подключить соответствующий плагин, чтобы не изобретать велосипед и не писать кучу кода с нуля. Надеюсь, что все было понятно, если что — пишите комменты.

Как передать значение переменной из JavaScript в PHP

  Александр Маврин   Один комментарий

Передача данных из JS в PHP

Всем привет. Как-то я писал статью на тему передачи значений переменных из PHP в JS и после этого меня много просили сделать материал по теме передачи данных в обратном порядке, то есть из JS в PHP. И вот наконец это свершилось, дошли руки. Скажу сразу, что в примере буду использовать jQuery, поскольку передавать данные из JS в PHP мы будет через Ajax, а на JQ это сделать проще всего. Да и нет никакого желания писать вдвое, а то и втрое больше кода на чистом JS. Поэтому извиняйте. Итак, рассмотрим вариант, в котором будет задействовано наиболее часто используемое JavaScript событие — клик по элементу. В нашем случае это будет кнопка. Для того, чтобы увидеть работу нашего скрипта, создадим HTML страницу, на которую будем выводить результат через PHP.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<button class="" id="button">Кнопка</button>
<p class="out"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>

Чтобы передать переменную из JavaScript в PHP, создадим файл js.js, в котором пропишем Ajax запрос на сервер. Главное — не забыть подключить его к странице, так же как и jQuery. И давайте напишем код.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).on('click', '#button', function(){
  let txt = 'Hello';
  $.ajax({
    url: 'finc.php',
    type: 'POST',
    data: txt,
    success: function(data){
     $('p.out').text(data);
   },
    error: function(){
	console.log('ERROR');
    }
 })
})

На второй строке я создал переменную txt и поместил в нее значение Hello. Это для примера. В реальности данные обычно берутся со страницы, например из формы.

url путь к PHP файлу-обработчику
type тип передачи данных. В нашем случае POST
data какие данные передаем (указываем переменную)
success функция вывода результата запроса при успешной обработке
error функция вывода ошибки работы скрипта

И теперь давайте создадим тот самый файл func.php с незамысловатым содержанием:

1
2
3
4

< ?php 
 
$txt = $_POST['txt'];
echo $txt;

результат работы Ajax запроса на сервер

По сути ля того, чтобы передать данные из JavaScript в PHP, этого достаточно. Другое дело, если вам нужно передать большой объем информации, например массив, то здесь чуть сложнее, но принцип остается тем же. Можете посмотреть как передаются данные из все формы сразу в статье про отправку формы с сайта без перезагрузки страницы. Но давайте я покажу вам еще один пример, в котором данные будут передаваться в формате JSON из трех переменных.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$(document).on('click', '#but', function(){
  let name = 'Вася';
  let age = 35;
  let location = 'Москва';
  $.ajax({
    url: 'func.php',
    type: 'POST',
    dataType: 'json',
    data: {
    	func: 'func_data',
    	name: name,
    	age: age,
    	location: location,
    },
    success: function(data){
     $('p.out').text('Я '+data.name+', мне ' +data.age + ' лет. Мой город: ' +data.location);
	}, error: function(){
	console.log('ERROR');
		}
	})
});

И PHP код для обработки запроса и вывода результата:

1
2
3
4
5
6
7

$func = $_POST['func'];
if ($func === 'func_data') {
	$arr['name'] = $_POST['name'];
	$arr['age'] = $_POST['age'];
	$arr['location'] = $_POST['location'];
	echo json_encode($arr);
}

В итоге мы получаем следующее:
Передача переменных из Javascript в PHP

Надеюсь, что теперь у вас появилось понимание о том, как передавать значения переменных из JS в PHP. Но все равно для этого нужна практика. Рекомендую экспериментировать на локальном сервере, а уже потом внедрять готовый код в рабочие проекты.

Как узнать какая видеокарта стоит на компьютере

  Александр Маврин   Комментариев нет

Всем привет. Скажу сразу, что система роли не играет, будь это Windows 10 или Windows 7, а так же ноутбук это или ПК, все действия описанные ниже, относятся ко всем версиям ОС. Есть несколько способов узнать видеокарту, установленную в компьютер и некоторые ее параметры. А именно ее модель, версию драйвера и производителя. Я расскажу про 3 самых распространенных и наиболее простых, доступных каждому. Начнем с самого простого и относительно надежного. Чуть позже поймете почему.

Узнать модель видеокарты через диспетчер устройств

Чтобы вызвать диспетчер устройств, жмем сочетание клавиш Win + R и вписываем туда такую команду:

devmgmt.msc

Команда devmgmt.msc

Или просто найти его в поисковой строке. Раскрываем раздел Видеоадаптеры и смотрим, какая видеокарта там стоит.

Как узнать видеокарту на Windows

Но есть один нюанс. Если драйвера на видеокарту не были установлены, то скорее всего вы увидите надпись: Стандартный VGA графический адаптер. Это означает, что система пока не в состоянии определить ее модель. И мы плавно переходим ко второму способу.

Узнать видеокарту через командную строку

Не нужно пугаться CMD, она в прошлый раз помогла нам узнать материнскую плату и работать в ней не так сложно, как кажется. Таким же образом, через Win + R вызываем консоль командной строки, вписывая в строку команд: cmd.

Вызов командной строки
Теперь пройдемся по командам.
Получаем модель и название видеокарты

wmic path win32_VideoController get name

Получаем версию драйвера видеокарты

wmic path win32_VideoController get DriverVersion

Получаем идентификатор видеокарты

wmic path win32_VideoController get PNPDeviceID

В консоли это выглядит так:
wmic path win32_VideoController get name

Узнать видеокарту через средство диагностики DirectX

Работаем по той же схеме, пишем:

dxdiag

Средство диагностики DirertX

И получаем развернутые характеристики видеокарты. Главное — мы узнали модель, а проверить какой объем памяти уже не проблема. Это очень легко гуглится за 2 минуты. Надеюсь, что эта статья была для вас полезной и теперь вы сами сможете узнать какая видеокарта стоит на вашем компьютере.

4 вида иконок для Bootstrap 4

  Александр Маврин   Комментариев нет

Icons for Bootstrap 4

Если для предыдущей третьей версии в комплекте имелся определенный набор иконочных шрифтов GlyphIcon, то в Bootstrap 4 можно подключить только сторонние иконки и это скорее плюс, чем минус, ведь можно выбрать из большого количества именно те, которые больше подходят под стилистику сайта. Я расскажу о четырех разных наборах иконок, которые наиболее часто использовал в различных проектах. Их гораздо больше, но перечислять их все не имеет смысла, ведь самые используемые иконки присутствуют в абсолютном большинстве подобных наборов.

Font Awesome

Ссылка на сайт. Это, наверное, самые популярные иконки из всех встречающихся и для Bootstrap 4 они подходят как нельзя лучше. Подключение достаточно простое. Качаете архив, там 2 папки, css и fonts, загружаете все это на сервер и подключаете файлы стилей.

Подключение Font Awesome
Подключение:

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
Крайне важно соблюдать пути к файлам и папкам. Если вы их меняете, то необходимо изменить пути к файлам шрифтов.

Изменить путь в файле font-awesome.min.css:

1
2
3
4
5
6
7

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Использование:

<i class="fa fa-icon"></i>

Кнопки с иконкой в Bootstrap 4 будет выглядеть так:

<button class="btn btn-success btn-sm"><i class="fa fa-eye"></i></button>
<button class="btn btn-info btn-sm"><i class="fa fa-edit"></i></button>
<button class="btn btn-danger btn-sm"><i class="fa fa-trash-alt"></i></button>

Bootstrap кнопки с иконками
Кнопки с текстом:

1

<button class="btn btn-success btn-sm"><i class="fa fa-eye"></i> Смотреть</button>

Иконки Бутстрап 4

Один маленький нюанс, чтобы скачать с оф. сайта, нужно ввести свой email, на который придет ссылка. если вы не хотите делать такие манипуляции, то можете скачать у меня по прямой ссылке. Версия 4.7.0

СКАЧАТЬ

Stroke 7 Icon Font Set

Ссылка на сайт. Приличная коллекция иконок для Бутстрап 4. Подключение не отличается от предыдущего. Если вы скачаете с оф. сайта, то в архиве будет много лишнего, а так же документация, которая может понадобиться.

Stroke 7 Icon Font Set

Вам нужны 2 папки, которые лежат в папке pe-icon-7-stroke.

Подключение:

<link rel="stylesheet" type="text/css" href="css/pe-icon-7-stroke.css"/>

Использование:

<i class="pe-7s-trash"></i>

Nucleo css

Ссылка. Входят в состав CSS фреймворка Argon Design System и без особых проблем можно подружить с Bootstrap 4. Процедура аналогичная.

Подключение:

<link rel="stylesheet" type="text/css" href="css/nucleo.css"/>

Использование:

<i class="tim-icons icon-basket-simple"></i>

Google Material icons

Ссылка. Классные иконки в большом количестве. Скачивать ничего не нужно, просто подключаете как обычные Google шрифты через CDN.

Подключение:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

Использование:

<i class="material-icons">android</i>

В принципе ничего сложного нет в реализации иконок для Bootstrap 4. Можно попробовать все и выбрать те, которые наиболее понравятся. Если у вас есть какие-то вопросы, пожелания или предложения, то пишите их в комментариях.

12345…102030405060708090100110…113вперед »