Решил собрать в одном материале кучу базовых примеров, блоков кода, простых шпаргалок по программированию сайтов. Надеюсь, хоть кому-то будет полезно
Здесь будут совсем базовые азы, совсем простой код и все намешано - html,css,javascript,vue,modx,php. И в конце полезные книги, источники сайты, часть из которых я уже делился с вами в статье про cms, но некоторые продублирую еще раз. Это не учебник и не руководства, часть шпаргалок пишу\копирую\вставляю для себя. Т.к. иногда это полезно иметь под рукой готовые фрагменты кода, чтобы упростить и ускорить свою работу. Однако же рекомендую перепечатывать, а не копипастить для понимания (а то вдруг у меня неправильные примеры). Также, имея готовые фрагменты кода, можно экспериментировать и быстро прототипировать новые идеи. Ну или когда я сталкиваюсь с задачей, которую уже решал ранее, я могу просто обратиться к своей коллекции и найти соответствующий фрагмент кода :-D Хотя кого я обманываю, иногда приходиться "изобретать велосипед" заново и тратить время на изучение документации и написание кода с нуля (кстати это даже на простых задачах немного помогает повторить, казалось бы, базовый материал, но не упустить важные детали). Ну и еще одно преимущество готовых фрагментов кода заключается в возможности обмена опытом, уверен, что кто-то скажет, что здесь что-то не так и предложит лучше вариант. Это хорошо. Желаю всем продуктивной работы и лучших результатов и начну.
Изначально я хотел составить все на одной странице, но все-таки решил разбить на несколько в рамках одного материала, вверху содержание.
Итак
Простой и пустой HTML шаблон
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Заголовок раздела</h1>
<p>Текст раздела</p>
</section>
</main>
<footer>
<p>Copyright © Год</p>
</footer>
</body>
</html>Универсальные HTML Open Graph метатеги, для различных соцсетей. Однако же, стоит заметить, что для некоторых платформ может быть специфическое начало в property:
<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Описание страницы">
<meta property="og:image" content="URL_изображения">
<meta property="og:url" content="URL_страницы">
К слову сказать в HTML множество различных мета-тегов, вот еще пример иногда или часто встречающихся:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Описание вашего веб-сайта">
<meta name="keywords" content="ключевые слова, разделенные запятыми">
<meta name="author" content="Имя автора">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<meta name="revisit-after" content="7 days">
<meta name="language" content="язык">
<meta name="theme-color" content="#ffffff">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Все мы знаем, что есть такой формат ссылки mailto: но многие не знают, что сюда можно добавить сразу и тему письма и строки для начала письма. например
<a href="mailto:Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript. ?subject=Вопрос с сайта&body=Здравствуйте">нам на почту</a>Это же работает и для большинства ссылок на мессанджеры, только нужно указывать ?text=
Простейший пример горизонтального меню с использованием CSS flexbox
<div class="container">
<nav class="menu">
<a href="#">Главная</a>
<a href="#">О нас</a>
<a href="#">Услуги</a>
<a href="#">Контакты</a>
</nav>
</div>Стиль
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f2f2f2;
padding: 10px;
}
.menu a {
text-decoration: none;
color: #333;
margin-right: 10px;
}Flexbox сильно упрощает верстку блочных элементов Подробнее о всех свойствах можно прочесть по этой ссылке.
Пример анимации на CSS. Мигание элемента
<div class="pulse"></div>
.pulse {
width: 100px;
height: 100px;
background-color: #ff5e3a;
border-radius: 50%;
animation: pulseAnimation 1.5s ease-in-out infinite;
}
@keyframes pulseAnimation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
CSS постоянно развивается и дополняется, это и новые единицы измерения например cqw, cqmin, это и новые селекторы, например has или where, и попытки добавить математические операторы. Вообщем, кто занимается фронтэндом, те должны следить и постоянно быть в курсе обновлений и поддержке браузерами. Вот, например, один из обзоров, что добавили в 2023 году. А вот крутейший сайт, гд можно проверить, какой браузер, что поддерживает. Опять же ссылки еще я продублирую в самом конце
А пока перечислю самые популярные и часто используемые свойства css
-
text-decoration: Устанавливает вид текста (например подчеркнутый). -
box-shadow: Устанавливает тень блока. Для текста text-shadow -
transition: Устанавливает переходные эффекты для свойств элемента при изменении состояния. Можно указывать время (transition-duration) и тип (transition-timing-function) перехода. Иными словами делает плавной анимацию -
text-align: Устанавливает выравнивание текста внутри элемента. -
widthиheight: Устанавливают ширину и высоту соответственно. Можно и нужно использовать также min-width или max-width для установки минимальной или максимальной ширины (или высоты) -
border: Устанавливает границу элемента. Также можно прописать:border-width(толщина границы),border-color(цвет границы),border-style(стиль границы). Border-radius позволит вам скруглить углы. -
font-family: Устанавливает шрифт (семейство шрифта) для текста. -
font-size: Устанавливает размер шрифта. -
color: Устанавливает цвет текста. -
background: Устанавливает фоновые свойства элемента. Некоторые возможные значения:background-color(цвет фона),background-image(изображение фона),background-position(положение фона),background-repeat(повторение фона). -
padding: Устанавливает внутренние отступы элемента. Можно задавать отступы для всех сторон сразу (padding: 10px) или для конкретной стороны (padding-left: 10px). -
margin: Устанавливает внешние отступы элемента. Можно задавать отступы для всех сторон (margin: 10px) или для конкретной стороны (margin-top: 10px). -
position: Определяет позиционирование элемента. Некоторые распространенные значения:static(позиционирование по умолчанию),relative(относительное позиционирование),absolute(абсолютное позиционирование),fixed(фиксированное позиционирование). -
display: Устанавливает тип отображения элемента. Некоторые распространенные значения:block(элемент отображается как блок),inline(элемент отображается как строчный элемент),none(элемент не отображается). -
gradient-background: Позволяет создавать градиентные фоны с плавным переходом цветов. -
transform: Позволяет изменять размер, поворот и масштаб элементов. -
opacity: Позволяет устанавливать прозрачность элементов. -
box-sizing: Позволяет управлять моделью размеров блока, определяя, каким образом размеры и отступы влияют на полное занимаемое пространство. -
media queries: Позволяют создавать адаптивный дизайн, изменяя стили в зависимости от различных параметров экрана (например, ширина экрана, разрешение и ориентация). -
flexbox: Позволяет гибко распределять элементы внутри контейнера по горизонтали и вертикали. -
grid: Позволяет создавать сетки для размещения элементов на веб-странице. -
animation: Позволяет создавать сложные анимации и переходы с использованием ключевых кадров и временных функций.
Теперь о CSCC/LESS/SASS. Все это так называемые препроцессоры css, которые сильно расширяют функциональность и помогают при программировании (или написании) css. Можно использовать переменные, константы, вложенности, mixin и т.д., SCSS и LESS отличаются синтаксисом и некоторыми особенностями, но основные концепции и возможности у них схожи. Но я обещал поменьше теории ) Мне лично scss помог в свое время избавиться от всяких !important и быстрой замены каких-либо цветов сразу для всех элементов. Вот простой пример
// Определение переменных
$primary-color: #ff0000;
$font-size: 16px;
// Стили для элемента .my-element
.my-element {
background-color: $primary-color;
font-size: $font-size;
&:hover {
color: #fff;
}
.inner-element {
font-weight: bold;
}
}Чуть не забыл, пожалуй самое базовое и нужное в CSS это сброс всех отступов границ и т.д. для умолчаний. Вы можете добавить и свои элементы
/* CSS Reset */
/* Обнуление отступов и полей */
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
}
/* Сброс стандартных стилей списков */
ol, ul {
list-style: none;
}
/* Границы */
img, iframe {
border: 0;
}
/* Обнуление свойств шрифта */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
/* Сброс стандартных стилей ссылок */
a {
text-decoration: none;
color: inherit;
}
/* Сброс стандартных стилей заголовков */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}Теперь по дебрям, кратко и сухо.
Javascript отправка данных Ajax :
// Создание объекта XMLHttpRequest
let xhr = new XMLHttpRequest();
// Настройка обработчика события загрузки
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 400) {
// Обработка успешного ответа, выводим в консоль полученный текст
let response = JSON.parse(xhr.responseText);
console.log(response);
} else {
// Выводим ошибку в консоль
console.error('Ошибка :', xhr.status, xhr.statusText);
}
};
// Настройка обработчика события ошибки
xhr.onerror = function() {
console.error('Ошибка сети');
};
// Настройка и отправка запроса
xhr.open('POST', 'url страницы куда отправлять', true);
xhr.setRequestHeader('Content-Type', 'application/json');
let data = {
name: 'Name ',
age: 35
};
xhr.send(JSON.stringify(data));Кстати, везде в JS буду использовать объявление переменных let или const, а не как было ранее принято var
К слову сказать, как это выглядит на jQuery
$.ajax({
url: 'example.php', // URL
method: 'POST', // Метод запроса (GET, POST и т. д.)
data: {
name: 'Name',
age: 35
}, // Данные, которые нужно отправить
success: function(response) {
// Обработка успешного ответа от сервера
console.log(response);
},
error: function(xhr, status, error) {
// Обработка ошибок при выполнении запроса
console.log('Произошла ошибка: ' + error);
}
});
Тернарный оператор на Javascript
let a = (array.lenght >= 3) ? "длина массива больше 3 (условие true)" : "длина массива меньше трех (условия false (или иначе)";
Перебор массива на Javascript
let array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
let element = array[i];
// Обработка элемента массива
console.log(element);
}let array = [1, 2, 3, 4, 5];
array.forEach(element => {
// Обработка элемента массива
console.log(element);
});Перебор массива на Jquery
let array = [1, 2, 3, 4, 5];
$.each(array, function(index, value) {
console.log('Индекс: ' + index + ', Значение: ' + value);
});Запрос к удаленному серверу, предоставляющему API данные с авторизацией по API key на JavaScript с передачей параметров
const apiKey = 'your_api_key';
const params = { param: 'test' };
const url = new URL('https://api url nekiy/data');
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
fetch(,url {
headers: {
'Content-Type': 'application/json',
'API-Key': apiKey
}
})
.then(response => response.json())
.then(data => {
const dataArray = Array.isArray(data) ? data : [data];
console.log(dataArray);
})
.catch(error => {
console.error('Ошибка при выполнении запроса:', error);
});Вот пример подключения jQuery с авторизацией по API-key
$.ajax({
url: 'https://api url nekiy',
method: 'GET',
data: { param: 'test'},
headers: {
'Authorization': 'APIKEY'
},
dataType: 'json',
success: function(response) {
console.log(response);
let resp_data = JSON.parse(response.responseText);
},
error: function(xhr, status, error) {
console.log('Произошла ошибка: ' + error);
}
});jQuery получаем данные из полей на странице и передаем их php файлу (или куда там захотим)
$(document).ready(function() {
$('#myForm').submit(function(event) {
event.preventDefault(); // Предотвращение отправки формы по умолчанию
// Получение данных из формы
let formData = {
pole1: $('#text').val(),
pole2: $('#text2').val(),
pole3: $('input[name="checkbox"]:checked').val()
};
// Преобразование данных в JSON-массив
let jsonData = JSON.stringify(formData);
// Отправка данных посредством AJAX-запроса
$.ajax({
url: '/page.php',
method: 'POST',
data: jsonData,
contentType: 'application/json',
// Установка типа содержимого запроса
success: function(response) {
// Обработка успешного ответа от сервера
console.log(response);
},
error: function(xhr, status, error) {
// Обработка ошибок при выполнении запроса
console.log('Произошла ошибка: ' + error);
}
});
});
});
Собственно php
<?php
// Получение данных из POST-запроса
$jsonData = file_get_contents('php://input');
$formData = json_decode($jsonData, true);
// Получение данных из массива
$pole1 = $formData['pole1'];
$pole2 = $formData['pole2'];
$pole3 = $formData['pole3'];
// Обработка данных и генерация ответа
$response = 'Данные успешно получены: Данные1 - ' . $pole1 . ', Данные2 - ' . $pole2 . ', Данные3 - ' . $pole3;
// Возврат ответа в формате JSON
echo json_encode($response);
?>Простейший класс на JavaScript, который выведет введенное слово
class MyClass {
constructor(value) {
this.value = value;
}
printValue() {
const { value } = this; // Деструктуризация значения из свойства this.value
console.log(value);
}
}
// Использование класса
const instance = new MyClass('Hello, World!');
instance.printValue(); // Выведет: Hello, World!Работа с датой в JavaScript
const currentDate = new Date();
console.log('Год:', currentDate.getFullYear());
console.log('Месяц:', currentDate.getMonth() + 1); // Месяцы нумеруются с 0, поэтому добавляем 1
console.log('День:', currentDate.getDate());
console.log('Часы:', currentDate.getHours());
console.log('Минуты:', currentDate.getMinutes());
console.log('Секунды:', currentDate.getSeconds());
const tomorrow = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000); // Добавляем 1 день (24 часа * 60 минут * 60 секунд * 1000 миллисекунд)
console.log('Завтрашняя дата:', tomorrow);
const pastDate = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000); // Вычитаем 7 дней
console.log('Дата неделю назад:', pastDate);
const formattedDate = currentDate.toLocaleDateString('ru-RU');
console.log('Форматированная дата:', formattedDate);Сортировка JSON данных по дате в JavaScript
const jsonData = [
{ "name": "Объект 1", "date": "2023-01-15" },
{ "name": "Объект 2", "date": "2023-02-10" },
{ "name": "Объект 3", "date": "2023-03-05" },
{ "name": "Объект 4", "date": "2023-01-30" }
];
// Сортировка по дате
jsonData.sort((a, b) => new Date(a.date) - new Date(b.date));
// Вывод отсортированных объектов
jsonData.forEach(obj => console.log(obj));
В Node.JS есть специальный модуль FS который позволяет считать файл .json . здесь не рассматривается.
Для поиска в массиве JavaScript можно
- Метод indexOf() array.indexOf(target);
- Метод find() array.find(item => item.id === targetId);
- Метод filter() для поиска всех элементов, удовлетворяющих условию array.filter(item => item === target);
- Метод includes() (возвращает true или false если array.includes('значение') найдено
Простейшая проверка введенного текста в поле input и вывод сообщения в span, если его нет
function checkField() {
const inputField = document.getElementById('IdTextInput');
const warningSpan = document.getElementById('IdSpan');
const checkbox = document.getElementById('myCheckbox');
if (inputField.value === '') {
warningSpan.textContent = 'Поле не заполнено';
} else {
warningSpan.textContent = '';
// если поле заполнено
}
}
//проверим чекбоксы
if (checkbox.checked) {
warningSpan.textContent = 'Флажок установлен';
} else {
warningSpan.textContent = 'Флажок не установлен';
}
Как-то раз использовал Server-Sent Events. Простой пример SSE
const eventSource = new EventSource('/sse-endpoint', { headers: { 'Authorization': 'Bearer token' } });
eventSource.onmessage = (event) => {
// Обработка полученного события SSE
console.log('Получено событие SSE:', event.data);
};
eventSource.onerror = (error) => {
// Обработка ошибки SSE
console.error('Ошибка SSE:', error);
};Немножко регулярки JS + jquery
Допустим у нас есть форма, в которой нужно ввести номер телефона и поставить галочку на "я согласен". Проверяем, что в поле номер телефона (11,12 цифр и символ +) и, собственно, принято согласение. Если все верно по ajax отправляем данные в php файл, иначе ругаемся
submitButton.addEventListener('click', function() {
let phoneNumber = phoneInput.value;
let agreementChecked = agreementCheckbox.checked;
let phoneFormat = /^[0-9+]+$/;
if (phoneNumber && agreementChecked && phoneNumber.match(phoneFormat)) {
let xhr = new XMLHttpRequest();
xhr.open('POST', '/send.php', true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 || xhr.status === 200) {
phoneNumber.disabled = true;
successMessage.textContent = xhr.responseText.replace(/(<([^>]+)>)/gi, '');
} else {
}
};
xhr.send('phone=' + encodeURIComponent(phoneNumber));
} else {
errorMessage.textContent = "Пожалуйста, заполните правильно все поля и примите условия обработки персональных данных.";
}
});
Находит в тексте слово и присваиваем ему класс, другой кнопкой его сбрасываем. Например нам из кучи абзацев нужно выделить и подчеркнуть определенное слово
$(document).ready(function() {
$('#searchButton').click(function() {
var keyword = 'тест'; // Слово для поиска
var divContent = $('#IdDiv').text(); // Получение содержимого слоя
// Создание регулярного выражения с флагом 'gi' (глобальный и независимый поиск)
var regex = new RegExp(keyword, 'gi');
// Замена найденных совпадений на выделенный текст
var highlightedContent = divContent.replace(regex, function(match) {
return '<span class="highlighted">' + match + '</span>';
});
// Вставка выделенного текста обратно в слой
$('#IdDiv').html(highlightedContent);
});
$('#resetButton').click(function() {
// Удаление элементов <span> из слоя
$('#IdDiv').find('span.highlighted').contents().unwrap();
});
});ExtJS обработка нажатия на кнопку, где делаем запрос к удаленному API, получаем данные и заполняем поля в панели
handler: function () {
Ext.Ajax.useDefaultXhrHeader = false;
Ext.Ajax.cors = true;
Ext.Ajax.disableCachingParam = true;
Ext.Ajax.request({
url: 'https://api.url.org/3/' + Ext.getCmp('txtName').getValue()',
withCredentials: true,
method: 'get',
headers: 'Access-Control-Allow-Origin',
cors: true,
async: true,
success: function (response, options) {
let objAjax = Ext.decode(response.responseText);
//если там все разложено, то
Ext.getCmp('homepage').setValue(objAjax.homepage);
Ext.getCmp('name').setValue(objAjax.title);
//или
for (var j = 0; j < objAjax.results.length; j++) {
props_getid += 'Текст: ' + objAjax.results[j].id + ' - ' + objAjax.results[j].title + ' (' + objAjax.results[j].release_date.substring(0, 4) + 'г.)' + '\n';
}
//выводим все в одном поле
Ext.getCmp('result').setValue(props_getid);
//или перебираем массив в выдаче и также сплошняком заполняем
let a = ''
for (a = objAjax.genres.length; a--;) {
props += objAjax.genres[a].name + ', ';
}
Ext.getCmp('genres').setValue(props);
},
failure: function (response, options) {
alert("Ошибка: Проверьте данные в поле ввода. " + response.statusText);
}
})
}ExtJS
Как-то делая свою панель на ExtJS 3.0 для modx я долго искал как сделать выборку дат. Решил просто сделать текстовое поле с маской вводимых символов. Но оказывается достаточно просто сделать типа поля xtype: 'datefield' и тогда будет поле с календариком выбора дат, причем можно указать формат данных и формат отображения после выбора, например
items: [{
width: 133,
cls: 'container',
fieldLabel: 'Конец диапазона',
xtype: 'datefield',
format: 'd.m.Y', // Отображаем только день
submitFormat: 'Y-m-d', // Сохраняем полный формат даты (гггг-мм-дд)
emptyText: 'Дата',
name: 'to_date',
id: 'to_date',
}]Добавляем динамично или нет элементы в панель. Допустим у меня есть панель
id: 'panelActors',
xtype: "panel",
title: "Актерский состав",
А при выполнении запроса, например к API я хочу добавить в эту панель N элементов в зависимости от размера массива. Или, напримр удалить все итемы с панели. Или обновить. Для всего этого есть следующие вещи
Ext.getCmp('panelActors').removeAll();
Ext.getCmp('panelActors').update();
Ext.getCmp('panelActors').doLayout();
Ext.getCmp('panelActors').add(
{
layout: "table",
title: 'Актер ' + i + ' ',
id: 'actor' + i + '',
style: 'padding-top:10px;',
layoutConfig: {
columns: 6
},
defaults: {
bodyStyle: "padding:5px;",
style: "margin:5px;"
},
items: [
{
columnWidth: .3,
colspan: 2,
title: 'Имя',
items: [{
xtype: 'textfield',
fieldLabel: 'В главных ролях',
id: 'casts' + i + '_name',
name: 'casts' + i + '_name',
emptyText: '',
style: 'width:98%'
}]
}}]});В одной из моих задач было такое: при нажатии на кнопку в handler, идет ajax запрос, а точнее Ext.Ajax.request , который выполняет обмен данными между сервером с сайтом и удаленным сервером, получая xml, разбирая его и занося в базу. Выполнение такого запроса занимало достаточно много времени, при этом в самой панели ничего не видно и непонятно, что что-то происходит и менеджер видит только или Успех (success) или Ошибка (failure). Покопавшись в примерах ExtJS 3.4 и документации я нашел способ, показать окно анимации загрузки данных (можно даже анимацию прогресса) и даже в простом виде визуально выглядит лучше, чем простое ничего. Вот как это выглядит. При запуске handler мы делаем вначале показ Ext.MessageBox, потом делаем Ext.Ajax.request и в success и в failure просто делаем Ext.MessageBox.hide(). Таким образом мы создали некую анимацию и обращение к пользователю, что нужно ждать результата. Также можно указать еще и класс иконки, чтобы все было красиво. Вот простой код обращения. Еще обратите внимание, в request я добавил timeout, без него запрос может вернуть ошибку до того, как закончится выполнение скрипта и таймаутом мы задаем максимально время ожидания выполнения. Честно скажу, вначале меня это немного выбило из равновесия, что вроде бы скрипт на php выполняет все правильно, а request возвращает ошибку :-)
Итак, вывод информации о загрузке при запросах request в ExtJS 3.4. Класс иконок - font awesome
{
style: 'margin: 13px 0px;',
xtype: 'button',
id: 'updall',
text: '<i class="fas fa-sync"></i> Обновить расписание',
cls: 'primary-button',
handler: function () {
Ext.MessageBox.show({
msg: 'Идет обмен данными между двумя серверами, пожалуйста подождите...',
progressText: 'Обмен данными...',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'fas fa-plug',
animEl: 'updall'
});
Ext.Ajax.request({
url: '/////////////',
timeout: 300000,
params: {
//здесь ваши параметры
action: 'mgr/update/all',
action: 'schedule',
},
success: function(response, options) {
//что-то делаем при успешном выполнении
Ext.getCmp('testfield-success').setText('Успешно');
Ext.MessageBox.hide();
},
failure: function (data) {
Ext.getCmp('testfield-error').setText('Ошибка');
Ext.MessageBox.hide();
console.log(data);
}
});
}
},Единственное, что стоит отметить, можно решить по разному задачу, это один из видом решения. А вот тут все варианты обработок таких окошек (MsgBox) при нажатии на кнопку в официальных примерах ExtJS 3
Перебор массива на VueJS
<template>
<div>
<ul>
<li v-for="item in array" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
array: [
{ id: 1, name: 'Элемент 1' },
{ id: 2, name: 'Элемент 2' },
{ id: 3, name: 'Элемент 3' }
]
};
}
};
</script>Запрашиваем данные у удаленного API и заполняем <li> данными при этом используем AXIOS
<template>
<div>
<button @click="fetchData">Загрузить данные</button>
<ul>
<li v-for="item in data" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
data: []
};
},
methods: {
fetchData() {
const params = {
param1: 'value1',
param2: 'value2'
};
const headers = {
'apikey': 'your-api-key'
};
axios.get('https://api.example.com/data', { params, headers })
.then(response => {
this.data = response.data;
})
.catch(error => {
console.error(error);
});
}
}
};
</script>Предположим, что я по cron получаю динамично некие данные в json файл. С помощью Vue мы будем перебирать файл json каждые 10 секунд и выведем информацию
<template>
<div>
<ul>
<li v-for="item in data" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
data: []
};
},
mounted() {
this.fetchData();
// Запускаем запрос при монтировании компонента
setInterval(this.fetchData, 10000);
// Запускаем запрос каждые 10 секунд
},
methods: {
fetchData() {
axios.get('path/to/data.json')
.then(response => {
this.data = response.data;
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
PHP
Используя тернарный оператор проверим существует ли переменная или нет
$b = isset($a) ? "Условие сработало".$a." существует" : "не существует, условие не сработало";
//или же $a = (условие) ? если сработало, да, то выполняем действие : иначе выполняет это действиеС php7 можно использовать нулевое слияние
$a = $b ?? "Не существует";
// Нулевое слияние позволяет установить значение переменной по умолчанию, если проверяемое значение равно null или не существует. В условиях
= - присвоение
== - равно, значение
=== - равно, с типизацией (очень строгая проверка, проверяет эквивалентность и значение)
&& - и
|| - или
Пример switch case (проверяем значение пока не совпадет или не выведется по умолчанию)
$cmd = "что-то содержит";
switch ($cmd) {
case "Variable1": //cmd содержит Variable1? условие верно?
echo "Действие 1";
break;
case "Variable2":
echo "Действие 2";
break;
case "Variable3":
echo "Действие 3";
break;
default:
echo "По умолчанию";
}
Популярная задача и вопрос. Вывод даты в родительном падеже при использовании strftime. Когда вы используете strftime(%e %B %Y), то php вам покажет типа 1 сентябрь 2023 года. В интернете огромное количество решений этой проблемы - от перебора массива своих имет месяц, до.. уже и не помню. В основном все пишут свою функцию, которая заменит символ на месяц. На самом деле с версии php 7 какой-то и уж тем более в php 8 Функция объявлена УСТАРЕВШЕЙ, о чем прямо гласит информация здесь https://www.php.net/manual/ru/function.strftime.php . Вы можете использовать date(), но он выведет на английском или учиться писать с помощью IntlDateFormatter . Вот пример
//Дата на русском по стандартам php
$timestamp = time();//текущее время или
//$timestamp = new DateTime('2023-10-06'); например, если только дата в таком виде
$dateFormatter = new IntlDateFormatter('ru_RU', IntlDateFormatter::SHORT, IntlDateFormatter::SHORT);
$dateFormatter->setPattern('d, MMMM, Y');
$formattedDate = $dateFormatter->format($timestamp);
echo $formattedDate;Дата будет выведена на русском языке и уже в родительном падеже. Подробнее о встроенном классе и работы с ним здесь - https://www.php.net/manual/ru/class.intldateformatter.php
Проверяем на безопасность получаемые данные или передаваемые далее
Основное -
Функция htmlspecialchars(), а лучше htmlentities() можно вызывать с параметрами и преобразовывает в сущности html (кавычки, символы <> и т.д.)
$clear_inp = htmlspecialchars($text, ENT_QUOTES);Функции фильтрации ввода filter_var() или filter_input() . Все возможные фильтры тут
$email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);В принципе filter_var позволит даже иногда заменить регулярные выражения по очистке строки и удалению, например текста.
$input = $_POST['text'];
$clear_input = filter_var($input, FILTER_SANITIZE_STRING);
$clear_input = filter_var($sanitizedInput, FILTER_SANITIZE_NUMBER_INT);
// $clear_input будет содержать только очищенные цифры из введенного значенияПри передачи в БД ОБЯЗАТЕЛЬНО подготовленные выражения Prepared Statements
$sql = 'некая sql команда по вставке или обновлению записи';
$stmt = $pdo->prepare($sql);
$stmt->execute();Если точно известно, что переменная будет число is_numeric()
Также для очистки строки от разных тегов strip_tags()
$inp = $_POST['text'];
$clear_inp = strip_tags($inp );Это быстрые примеры, не пренебрегайте безопасностью
Перебор массива без ключей. Обычный Foreach
foreach ($array as $value) {
echo $value . "<br>";
}While. Итерация всегда в конце, чтобы начинался цикл с 0
$arrLength = count($array);
$i = 0;
while ($i < $arrLength) {
echo $array[$i] . "<br>";
$i++;
}For
$arrLength = count($array);
for ($i = 0; $i < $arrLength; $i++) {
echo $array[$i] . "<br>";
}Для массивов всегда использую Foreach. Примеры While и For можно использовать как просто пример этих циклов. Кстати, мне всегда был понятен for, который почему-то многие считают более сложным.
Пример цикла for с четными итерациями
for ($i = 0; $i <= 10; $i++) {
if ($i % 2 === 0) {
echo $i . "<br>";
}
}Можно в for делать математические операции, например $i += 2 (прибавлять 2 к каждой итерации $i - ($i=0; $i<=10; $i +=2){};);
+=, -=, /=
В циклах можно использовать break и continue
(break - прерывает цикл, continue - пропускает одну итерацию)
for ($i = 47; $i>10; $i--){
if($i % 2 ==0)
continue;
if ($i<35)
break;
echo $i.'<br>';
}Вернусь (вернемся) к массивам, перебор ассоциативного массива с ключами. Выводим и ключ и его значение.
foreach ($array as $key => $value) {
echo $key . ": " . $value . "<br>";
}Простейший пример получения данных с БД в виде массива (используется PDO)
$query = "SELECT * FROM your_table";
$statement = $pdo->prepare($query);
$executeResult = $statement->execute();
$result = $statement->fetchAll(PDO::FETCH_ASSOC);Проверим полученный массив на существования ключей
$requiredKeys = ["key1", "key2"];
if (array_diff($requiredKeys, array_keys($array))) {
// Если данные ключи в массиве отсутствуют, то выполним действие
}С помощью filter_var_array() можно очищать массив вплоть до значений определенных ключей
$data = [
'name' => 'Имя',
'email' => 'его@почта',
'age' => '35',
];
// Определение фильтров для каждого значения
$filters = [
'name' => FILTER_SANITIZE_STRING,
'email' => FILTER_VALIDATE_EMAIL,
'age' => [
'filter' => FILTER_VALIDATE_INT,
'options' => [
'min_range' => 1,
'max_range' => 100,
],
],
];
// Применение фильтров с помощью filter_var_array()
$filteredData = filter_var_array($data, $filters);
// Проверка результатов
if ($filteredData !== false && $filteredData !== null) {
// Фильтрация прошла успешно
} else {
echo 'Ошибка валидации или фильтрации данных.';
}Поиск в массиве
in_array()
if (in_array('чтоищем', $array)) {
echo 'Элемент найден!';
} else { echo 'Элемент не найден.';}array_search():
$key = array_search('значение', $array);
if ($key !== false) {
echo 'Элемент найден ' . $key;
} else { echo 'Элемент не найден.'; }array_key_exists() проверяет, существует ли определенный ключ в массиве. true, если ключ существует, и false если нет
Сортировка массива. sort() сортирует массив в порядке возрастания значений , rsort() сортирует массив в порядке убывания значений , asort() сортирует массив по значениям в порядке возрастания, сохраняя связь между ключами и значениями, ksort() сортирует массив по ключам в порядке возрастания, сохраняя связь между ключами и значениями.
Перебор многомерного массива рекурсивной функцией. Внимание, на данное решение я наткнулся недавно и не проверял. В теории функция проверяет если внутри массива. Не рискуйте при запуске :-)
function recursiveArray($array) {
foreach ($array as $key => $value) {
if (is_array($value)) {
recursiveArray($value);
} else {
echo "Ключ: $key, Значение: $value\n";
}
}
}
recursiveArray($array);Перебор двумерного массива вложенными foreach
foreach ($array as $key_a => $subarray) {
echo "Ключ 1: $key_a \n";
foreach ($subarray as $key_b => $value) {
echo "Ключ 2: $key_b, Значение: $value \n";
}
echo "\n";
}Сортировка внутри многомерного массива, например по возрасту
usort($array, function ($a, $b) {
return $a['age'] - $b['age'];
});Предположим у нас есть удаленный сервер, который по порту 1234 отдает xml файл с чем-либо и нам необходимо его получить и составить запрос для бд (обращаю внимание, тут будет специфика MODX xpdo, но в целом думаю понятная). Например это список фильмов. Мы получим ответ, разберем его, подсчитаем количество актеров, заполним столько же полей (предположим, что мы не храним в json) и используем ON DUPLICATE KEY UPDATE, если такой фильм уже существует с таким ID и просто обновим данные на него.
//формируем url с параметрами
$url = $remoteHost.':1234/?param1='.$param1.'&Encoding=UTF-8&';
$stream = fopen($url, 'r');
//проверили подключение
if (!$stream) {
$output = 'Не смог получить доступ к серверу по следующему запросу. Проверьте. '.$url;
return $output;
die();
}
$xml_data = stream_get_contents($stream);
//проверили получение файла
if ($xml_data === false) {
$output = 'Файл не получен по адресу: '.$url;
return $output;
die();
}
fclose($stream);
//получили xml
$xml = simplexml_load_string($xml_data);
$query = '';
//создали массив с фильмами
$movies = $xml->ArrayDataTo->ListMovies->Movie;
//начали его перебирать и заполнять в БД
$output .= "Результат добавления фильмов."."\n"."Фильмы:";
foreach ($movies as $movie) {
$query .= "INSERT INTO TableName SET `id` = ?,
`name` = ?,
`pole1` = ?,
`pole2` = ?,
`pole3` = ?,
";
//очищаем полученные данные, т.к. сервер удаленный и кто его знает, что они могут нам подсунуть от злости или просто пошутить
$params = [
htmlentities(strip_tags($movie['ID'])),
htmlentities(strip_tags($movie->Name)),
htmlentities(strip_tags($movie->pole1['pole1'])),
htmlentities(strip_tags($movie['pole2'])),
htmlentities(strip_tags($movie->pole->pole['pole3']))
];
//определяем какое количество у нас актеров и предположим, что в бд 8 полей, но вообще такое лучше делать в json.
$namesArray = explode(", ", $movie->Actors);
$arraySize = (!empty($namesArray)) ? count($namesArray) : 7;
for ($i = 0; $i < $arraySize; $i++) {
$query .= ", `casts{$i}_name` = ?";
$params[] = htmlentities(strip_tags($namesArray[$i]));
}
//теперь делаем проверку на дубликат ключей, при INSERT. Мы не указываем поля, которые не трогаем и проверяем, например ID - не указываем ибо он и есть Primary
$query .= " ON DUPLICATE KEY UPDATE
`pole1` = COALESCE(VALUES(`pole1`), `pole1`),
`pole2` = COALESCE(VALUES(`pole2`), `pole2`)";
for ($i = 0; $i < $arraySize; $i++) {
$query .= ", `casts{$i}_name` = COALESCE(VALUES(`casts{$i}_name`), `casts{$i}_name`)";
}
$stmt = $mysqli->stmt_init();
$stmt->prepare($query);
if ($stmt) {
$stmt->execute($params);
}
$output .= "\n".$movie->Name;
$query = '';
}
$output .= "\n"."Успешно добавлены. Мои поздравления"."\n"."\n";Подчеркну, что для уделанного соединения есть CURL и разные другие продвинутые библиотеки для работы с Rest и удаленным подключением. Простейший пример Curl запроса вы увидите ниже.
Простейший класс на php который подключается в __construct к БД , а мы создав объект, экземпляр класса, делаем выборку из таблицы по своему условию
class DBMySelect {
private $pdo;
public function __construct() {
$dsn = "mysql:host=localhost;dbname=mydatabase";
$username = "username";
$password = "password";
$this->pdo = new PDO($dsn, $username, $password);
$this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if (!$this->pdo) {
echo "Ошибка подключения к базе данных.";
}
}
public function MyCustomSelect($condition) {
$query = "SELECT * FROM table_name WHERE " . $condition;
$statement = $this->pdo->query($query);
if ($statement === false) {
echo "Ошибка выполнения запроса.";
} else {
return $statement->fetchAll(PDO::FETCH_ASSOC);
}
}
}$database = new DBMySelect();
$results = $database->MyCustomSelect("column_name = 'value'");
print_r($results);Очень мечтал освоить или понять Websocket и не вышло.
Простейшее подключение по CURL к api серверу с авторизацией по API-KEY в заголовке, полученя данных в JSON, перебор его и очистка от html тегов
$url = "https://api.example.com/page_point";
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, [
'Content-Type: application/json',
'api-key: ' . 'my-apikey'
]);
$response = curl_exec($curl);
if ($response === false) {
echo "Ошибка при выполнении запроса: " . curl_error($curl);
} else {
$clear_resp = strip_tags($response);
$data = json_decode($clear_resp, true);
foreach ($data as $key => $value) {
echo "Ключ: $key, Значение: $value<br>";
}
}
curl_close($curl);
Подключение с помощью file_get_contents
$url = "https://api.example.com/page_point";
$response = file_get_contents($url);
$data = json_decode($response, true);Простейшая запись строки в текстовый файл
$logtext = 'Текст, который записываем';
file_put_contents('/files/log.txt', $logtext , FILE_APPEND);С помощью регулярки ищем слово в тексте
preg_match("/\b$word\b/i", $text))
//где $word - слово, а $text, вы не поверите, текст
Разбиваем, с помощью регулярки, строку по цифра и тексту в массив. Например 100рублей делим на элемент 100 и рублей
if (preg_match('/(\d+(?:\.\d+)?)([^\d]+)/', htmlentities($place->Sum), $matches)) {
$number = $matches[1];
$currency = $matches[2];
$formattedString = $number . ' ' . $currency;
}
Стоит заметить, что я не супер профессионал разработчик modx и прошу прощения у сообщества, случайно сюда зашедшего и посмеявшегося над моими примерами кода. Да, у меня есть свои компоненты для modx, которые я для себя использую, однако я прекрасно понимаю, что они далеки от идеала и от грамтного написания и поэтому еще раз, прошу прощения! Просто мне нравится сам подход modx и возможность самореализации и кодинга.
Столкнулся с такой задачей: у меня подгружаются картинки пользователем и неизвестно какой будет у них тип файла. Условно говоря mixed filetypes , а превьюхи создаются с помощью pthumb, который ругается, если неявно указан тип. Ошибка, что-то типа Unable to open image... и т.д. Одно из решений сделать конвертер, чтобы все файлы переводились в один тип, например в webp. Мною же был написан костыль, который, разумеется, чуть замедляет работу, но работает. Это сниппет, который получает адрес картинки, смотрит ее тип и задет фильтр.
$imageInfo = getimagesize($modx->stripTags($input));
$imageType = $imageInfo['mime'];
$paramW = $modx->stripTags($w);
$options = 'w=' . $paramW;
switch ($imageType) {
case 'image/jpeg':
$options .= '&f=jpeg';
break;
case 'image/webp':
$options .= '&f=webp';
break;
case 'image/png':
$options .= '&f=png';
break;
default:
break;
}
$params = array(
'input' => $input,
'options' => $options,
);
$img = $modx->runSnippet('pthumb', $params);
return $img;Вызывается примерно так:
<img src="/[[!ImageTypeforThumb? &input=`[[+tv.imgItem]]` &w=`170`]]" data-alt="[[+pagetitle]]" class="m-3" >Что он делает, отправляет картинку, разбирает ее, собирает параметры и возвращает уже созданный thumbs. Понимаю, что решение возможно глупое, но было сделано на скорую руку.
Далее, была у меня проблема в связке QuickEmail и доменной почтой с mail.ru - Письма не отправлялись никак.
1. В mail.ru заходим под необходимым почтовым ящиком
2. Заходим в раздел Пароль и Безопасность -> Внешние сервисы и разрешаем доступ по smtp
3. Далее заходим Пароль и Безопасность -> Пароль для внешних приложений и создаем пароль для modx и smtp (потребуется привязка телефона. далее называем этот пароль и получаем)
4. В настройках modx, в разделе Авторизация и безопасность в ключе emailsender указываем эту почту
5. В настройках modx, в разделе Почта:
SMTP аутентификация - ДА
Авто TLS для SMTP - ДА
SMTP Helo сообщение - smtp.mail.ru
SMTP хосты - ssl://smtp.mail.ru
SMTP пароль - созданный пароль для внешних приложений
SMTP номер порта - 465
mail_smtp_prefix - ssl
SMTPS - ssl
SMTP посылать по одному - ДА
SMTP пользователь - email как в emailsender выше (ну или ваш почтовый ящик)
Использовать SMTP - ДА
Так же потом в mail.ru можно в разделе Пароль и Безопасность видеть все отправленные письма (а точнее историю активности). Промучался с этим долго
Пример отправки с QuickEmail в сниппете хорошо расписан у разработчика и повторять нет смысла. Но ладно, пример:
$props = array(
'debug' => '0',
'hideOutput' => '0',
'message' => 'Кто-то заполнил и отправил сюда. Новый клиент.',
'subject' => 'Новый клиент с сайта',
'to' => 'email куда',
'fromName' => 'От кого',
'emailSender' => 'email ваш',
'replyTo' => 'email',
'html' => '1',
'failureMessage' => 'Mail Failed',
'successMessage' => 'Ваше сообщение успешно отправлено, мы свяжемся с вами в самое ближайшее время',
'errorHeader' => 'Mail error:',
'smtpErrorHeader' => 'SMTP server report:',
);
$output = $modx->runSnippet('QuickEmail',$props);
Создаем свой класс и проверяем, modx переменная уже определена или ее необходимо определить (например я свой класс использую как внутри modx, так и при работе Cron, Надеюсь правильно написал :-)
protected $modx;
public function __construct()
{
define('MODX_API_MODE', true);
require_once(dirname(__DIR__, 4) . '/config.core.php');
require_once MODX_CORE_PATH . 'model/modx/modx.class.php';
if(isset($GLOBALS['modx'])){
global $modx;
$this->modx = $modx;
} else {
$this->modx = new modX();
}
}
Внимание, есть официальная страница как использовать modx вне системы modx. Следуйте больше ему Для версии 3
По разному используем PdoTools
//Получили в чанке дату и форматируем ее. Здесь и далее $_pls - плейсхолдер
{$_pls['date'] | date_format : '%B, %Y'}
//Форматируем дату с помощью Шикарного дополнения DateAgo
{$_pls['date'] | dateago:'{"dateNow":0,"dateDay":"","dateFormat":""j F, H:i"}'}
//Проверяем на пустоту плейсхолдер
{if $_pls['param'] is not empty}{/if}
//Подключаем свой лексикон в чанке
{$_modx->lexicon->load('NameSpasesMy:default')} // или любой другой словарь вместо default
//запускаем сниппет
{$_pls['team_logo'] | pthumb : 'h=15'}
//используем компонент mobiledetect
{if 'standard' | mobiledetect}{/if}
if 'mobile' | mobiledetect} {/if}
Очистить переменную можно с помощью $modx->stripTags. Я лично параноидально делаю
$statusId = $modx->stripTags(htmlentities($_POST['statusId']));
Допишу про все xpdo которые пользуюсь
Литература
PHP + MySQL:
Отличнешая книга по PHP8, расписано практически все - Дмитрий Котеров, Игорь Симдянов, PHP 8 , Издательство БХВ. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra243qZj )
Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 6-е изд., Робин Никсон, Издательство Питер. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra249tEV )
MySQL по максимуму, Сильвия Ботрос, Джереми Тинли, Издательство Питер. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23WGNd )
Laravel 9. Быстрая разработка веб-сайтов на PHP, Владимир Дронов, Издательство БХВ. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23WwLV )
Общее про SQL. SQL: быстрое погружение, Уолтер Шилдс. Издательство Питер. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23ZdBw)
JavaScript:
JavaScript и Node.js для веб-разработчиков, Николай Прохоренок, Издательство BHV-CПб. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23SuZK)
Новые возможности JavaScript. Как написать чистый код по всем правилам современного языка, Ти Джей Краудер, Издательство БОМБОРА. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid:Kra23Uaxy )
JavaScript для FrontEnd-разработчиков. Написание. Тестирование. Развертывание, Александр Кириченко, Издательство Наука и техника. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23VbQm )
JavaScript с нуля до профи, Роб Персиваль, Майке вае Путтен, Лоренс Свекис, Издательство Питер. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23Vvth )
React:
React. Сборник рецептов, Дэвид Гриффитс, Издательство БХВ. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23XcJM )
React. Современные шаблоны для разработки приложений, Алекс Бэнкс, Ева Порселло, Издательство Питер. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23YHGD )
Изучаем React, Кирупа Чиннатамби, Издательство БОМБОРА. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23Yck9 )
Разное:
Паттерны объектно-ориентированного проектирования, Эрих Гамма, Издательство Питер. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23dKVB )
Проектирование веб-API, Лоре Арно, Издательство ДМК Пресс. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23dzT3 )
Git для профессионального программиста, С. Чакон, Б. Штрауб, Издательство Питер. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23efQu)
Docker без секретов, Сайбал Гош, Издательство BHV-CПб. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23ihC5 )
Безопасность веб-приложений. Эндрю Хоффман, Издательство Питер. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23iMi9 )
NGINX. Книга рецептов, Дерек Де Йонге, Издательство ДМК Пресс. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23jN9w )
UX/UI дизайн для создания идеального продукта, Ярослав Шуваев, Издательство БОМБОРА. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23jhds )
100 главных принципов дизайна, Сьюзан Уэйншенк, Издательство Питер. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23kNbj )
И моя любимая, которая к программированию сайтов, конечно же не относится, но все же уж очень нравится она мне - Компьютерные сети. Принципы технологии протоколы. Юбилейное издание, Виктор Олифер, Издательство Питер. Купить в Читай-город (Реклама: ООО "Новый книжный центр" ИНН 7710422909, erid: Kra23mP3X )
Сайты
Codepen - пожалуй не стоит в представлении. Помимо интересных идей и наработак других программистов, можно тренироваться и писать свой код в песочнице практически на любых библиотеках.
RapidApi - огромная база API библиотек и сайтов расширяющих ваш сайт
Или же огромный список доступных публичных API - https://github.com/public-apis/public-apis
Рейтинг CMS по версии Wapallazer (популярное расширение для браузеров) - https://www.wappalyzer.com/technologies/cms/
Документация по Twig - https://dev-gang.ru/doc/twig/intro/
Документация по markdown - https://gist.github.com/Jekins/2bf2d0638163f1294637,
Документация по json https://developer.mozilla.org/ru/docs/Learn/JavaScript/Objects/JSON,
Документация по yaml https://yaml.org/
Документация по php php.net
Docker Hub - https://hub.docker.com/ и документация https://docs.docker.com/
Документация по GitHub - https://docs.github.com/ и просто по GIT https://git-scm.com/doc
Документация по NodJS - https://nodejs.org/en/docs
Документация по React - https://legacy.reactjs.org/docs/getting-started.html
Документация по NestJs - https://nestjs.ru/
Примеры различных панелек на ExtJS (не забудь поменять версию) - http://extjs.cachefly.net/ext-3.4.0/examples/
Шпаргалка по Emmet https://docs.emmet.io/cheat-sheet/
Документация по всему - https://webinmind.ru/
----
Блог разработчиков от Google Chrome.
Caniuse - Проверяем доступность в браузерах свойства CSS
Документация по моему любимому фреймворку CSS Bulma. - https://bulma.io/ ,
Документация по Популярному фреймворку CSS Tailwind - https://tailwindcss.com/
Документация, конечно же, по Bootstrap (не забудьте менять версию вверху) - GetBootstrap
Документация, а еще есть такой CSS фреймворк, как Foundation, признаюсь честно - неосилил, мощная мащина - Get.foundation
Документация по Ukit Getuikit.com
Документация по Vue3 vuejs.org
Документация по Yii2 yiiframework.com
Документация по Laravel laravel.com
Пройдемся по CMS
October CMS https://octobercms.com/
GravCMS https://getgrav.org/
GhostCMS https://ghost.org/
Drupal CMS https://drupal.org/
Joomla CMS https://joomla.org/4
Wordress https://wordpress.com/
MODx https://modx.com/ - обожаю его
Сообщество Modx с магазином расширений, готовыми решениями, теплым коллективом и добрым советом https://modx.pro/
Документация по ExtJS https://docs.sencha.com/extjs
Полный справочник - документация по Fenom - https://github.com/fenom-template/fenom/tree/master/docs/ru
https://fontawesome.com/docs - ну Awesome, ну шрифт :-)
Документация по Composer https://getcomposer.org/
https://figma.com/ - Figma, маст-хэв всех дизайнеров
Очень хорошо и просто про PDO в php https://prowebmastering.ru/php-pdo-start.html
Создаем макеты лендингов https://mobius1.github.io/Pageable/#page-1
Да, кстати, Конструкторы сайтов
Tilda. https://tilda.cc/ - все знают Тильду. Многие программисты с нее эмоционально вспыхивают и устраивают постоянные дискуссии в тематических и не очень каналах и форумах. Я ничего плохого в ней не вижу.
https://wfolio.ru/ - Идеален для фотографов! продумано все, до мелочей. Кстати, вот отличный фотограф, рекомендую https://poddubny.info/
да и еще сотни
Шикарная таблица юникод кодов для эмодзи смайлов. Особенно круто для разработки телеграм ботов https://apps.timwhitlock.info/emoji/tables/unicode
Документация по API Telegram Bot https://core.telegram.org/bots/api к слову их совсем не сложно писать на php, а помогают здорово. Вот еще документация переведенная https://tlgrm.ru/docs/bots/api
----------------
https://codentools.com/jquery-to-javascript - Конвертер из Jquery в JavaScript (дожились)
Очень крутые инструменты от Adobe для получения кода цвета в hex и иных видах, может даже по фото цвета подобрать - https://color.adobe.com/ru/create/color-wheel
И еще один генератор пастельных цветов и спокойной цветовой гаммы - https://colorhunt.co/palettes/pastel
И еще одная цветовая схема -- https://colorscheme.ru/
Генератор Favicon под все устройства - https://realfavicongenerator.net/
Преоладеры - https://icons8.com/preloaders/
Яндекс для разработчиков - тут и API карт, и js библиотеки, и метрика и облачные решения - https://yandex.ru/dev/
Проверка правильности заполнения мета-тегов OG - https://metatags.io/
Cli команды для синхронизации по протоколу AWS - https://docs.aws.amazon.com/cli/latest/reference/s3/sync.html
Speechkit от яндекса Документация https://cloud.yandex.ru/docs/speechkit/quickstart - прикольная технология - вы отправляете текст, а получаете ogg озвучку
К слову у Яндекса очень много крутых облачных решений, рекомендую. Хотя бы даже один онлайн перевод https://cloud.yandex.ru/services#featured
Кабинеты для вебмастеров
Google - https://search.google.com/search-console
Яндекс - https://webmaster.yandex.ru/
Чуть позже распишу все полезные сервисы от Яндекса и Гугла.
PageSpeed от Google https://pagespeed.web.dev/
Хорошая статья по уведомлениям в режиме реального времени - https://intellect.icu/prilozheniya-realnogo-vremeni-i-polling-long-polling-websockets-server-sent-events-sse-webrtc-7016
собственно официально про SSE - https://learn.javascript.ru/server-sent-events
Конвертер HTML сущностей в обе стороны (в свое время очень сильно выручил) - https://www.online-toolz.com/langs/ru/tool-ru-text-html-entities-convertor.html
Один из сотни готовых генераторов, генератор полно экранных страниц сайтов - https://mobius1.github.io/Pageable/#page-1, отлично подойдет для лендингов
ОЧЕНЬ КРУТАЯ ШТУКА - набор для apache, nginx и т.д. правил для блокировки различных ботов на сервере или сайте. Пользоваться очень осторожно!! - https://github.com/mitchellkrogza/apache-ultimate-bad-bot-blocker сто раз перечитайте и подумайте или отредактируйте для себя. Будьте предельно аккуратными, вся ответственность на вас и только на вас. Я лично использую решения от Cloudflare.
Собственно Cloudflare https://www.cloudflare.com/ - очень полезный и важный сервис, который поможет от быстрой светы ns записей домена и кеширования до cdn, защиты сайта, ограничений доступа и прочим прочим
Поиск различных SVG и PNG - https://undraw.co/
Поиск различных мокапов для оформления - https://www.mockupworld.co/all-mockups/
Статусы страниц с котиками - https://http.cat/
Регистрация доменов с моей реф-ссылкой - https://www.webnames.ru/tld/catalog/?ref_id=139640
Шикарный генератор различных паттернов, есть даже плагины под Figma - https://www.magicpattern.design/
Конвертер стандратного шаблонизатора под шаблонизатор Fenom в modx - https://m2f.zencod.ru/
... и это еще не все, будут ссылки на софт и прочее.
Разное
Отличный YouTube канал Анны Блок про Css и верстку. Всегда рассказывает про новинки в css и js. Иногда проводит шикарные стримы, где отвечает на любые вопросы по frontend программированию. Ведет телеграм-канал Типичный Верстальщик. YouTube | Telegram | ее крутейший сайт с полезностями и шпаргалками
Тоже канал про фронтэнд от RED Group. Достаточно интересные вещи кодит в прямых эфирах, доступны хорошие видео по react. YouTube
Телеграм канал про веб разработчиков - Веб-Страница.
Телеграм канал программистов на October CMS, Перейти
А это программистов на Grav CMS. Перейти
Чат-бот на основе ChatGPT по Modx. Быстрее, чем в справке искать. Открыть.
ТГ канал с API. Обновляют информацию редко, но все равно интересно. Открыть
Официальный канал Яндекс Метрики и Яндекс Облака
YouTube канал разработка Академии Яндекса
Очень полезная кастомная клавиатура, где вы можете запрограммировать любую клавишу (у продавца есть еще много разных вариантов, например с регуляторами). (Реклама: Aliexpress).
Софт
Материал еще не окончен и будет дополняться. Впереди php - curl, api, фильтрация данных, проверки, массивы, modx, полезные книги, youtube и т.д..
Очень важно - это не документация, не курсы, не учеба, не гарантия правильности, не каталог ссылок. Эт просто материал и я ответственности не несу, ни за работу блоков кода, ни за содержание сайтов, ссылки на которые я привел. Я не являюсь автором этих ресурсов и не мониторю постоянно, что у них там размещено.
