web.master-artem.ru code - honey код - мёд тут я стараюсь складывать неочевидные вещи которые сто...
web developing
1. Front-end
1.1. effects
1.2. components
1.2.1. img
1.2.1.1. Оптимизация и конвертирование Optimization and conversion
1.2.1.1.1. Серьезная программа конвертации, оптимизации по совету от гугл (XnConvert) (link) Serious conversion program, optimization on the advice of Google (XnConvert) (link)
1.2.1.1.2. Repo: Оптимизация png, jpg из контекстного меню windows (link) Repo: Optimize png, jpg from windows context menu (link)
1.2.1.1.3. webp
1.2.1.2. Невидимые области на изображении ведущие на какие либо ресурсы Invisible areas in the image leading to any resources
1.2.1.2.1. <map><area>... (link)
1.2.1.3. SVG
1.2.1.3.1. Оптимизация SVG Optimizing SVG
1.2.1.3.2. выделение областей изображения (image map) selection of areas of the image (image map)
1.2.1.3.3. тени shadows
1.2.2. input
1.2.2.1. checkbox
1.2.2.1.1. checkmarker
1.2.3. btns
1.2.3.1. btn-menu
1.2.4. font-face (link)
1.2.5. tab
1.2.5.1. Tab with css perspective and rotateX Ярлык - закладка из css perspective и rotateX
1.2.5.1.1. cacher
1.2.5.2. Tab in css gradient before and after Ярлык - закладка css gradient и before c after
1.2.5.2.1. cacher
1.2.6. figures
1.2.6.1. triangle
1.2.6.1.1. _right (link)
1.2.7. gradient
1.2.7.1. border
1.2.7.1.1. v1 (link)
1.2.7.1.2. v2 (link)
1.2.7.2. Gradient generator (link)
1.2.8. animations
1.2.8.1. Прелоадер Preloader
1.2.8.1.1. Прелоадер загрузки страницы. (link) Page loading preloader. (link)
1.2.8.1.2. С процентом загрузки With loading percentage
1.2.8.1.3. Круглый прогрессбар Round progress bar
1.2.8.2. libs_of_animations
1.2.8.2.1. LottieFiles - Free animation files built for Lottie, Bodymovin (link)
1.2.9. scrollbar
1.2.9.1. --hidden
1.2.9.1.1. &::-webkit-scrollbar { display: none; }
1.2.10. overlay
1.2.10.1. Overlay box-shadow Подложка box-shadow
1.2.10.1.1. cacher
1.2.10.1.2. codepen
1.2.10.2. Overlay ::before Подложка ::before
1.2.10.2.1. cacher
1.2.10.2.2. codepen
1.2.11. эффект загрузки контента content loading effect
1.2.11.1. https://simple-solutions.bitrix24.ru/bitrix/images/intranet/slider/profile.svg
1.3. functions
1.3.1. Crawl line | Бегущая строка
1.3.1.1. gist
1.3.2. Seacrh comment nodes and replace hims Поиск узлов комментариев и замена их
1.3.2.1. gist
1.3.3. Cookies accepting Разрешение файлов cookie
1.3.3.1. gist
1.3.4. cookie
1.3.4.1. cookie
1.3.4.2. setCookie
1.3.4.3. getCookie
1.3.4.4. deleteCookie
1.3.5. Show popup modal window Показать всплывающее модальное окно
1.3.5.1. gist
1.3.6. Check device for touch display Проверить устройство на сенсорный дисплей
1.3.6.1. gist
1.3.7. Плавная прокрутка до элемента Smooth scrolling to the element
1.3.7.1. gist
1.3.8. Пример fetch() и new FormData() отправка формы на сервер Example fetch() and new FormData() send form to server
1.3.8.1. github
1.3.9. Фиксация блоков при прокрутке Locking blocks while scrolling
1.3.10. Плавная прокрутка до элемента на другой или на текущей странице Smooth scrolling to an item on another or current page
1.3.11. Выбор элементов короткая функция Query selector all short function
1.3.12. Перемещение элементов Moving items
1.3.12.1. Перемещение элементов по DOM дереву в зависимости от разрешения экрана Moving elements around the DOM tree depending on the screen resolution
1.3.13. Модуль перетаскивания и бросания Drag and Drop Module
1.3.14. Обработка событий Event handling
1.3.14.1. Событие Keyup (e.keyCode или e.key) Keyup event (e.keyCode or e.key)
1.3.15. Измерения Mensurate
1.3.15.1. Медиа запрос в js на максимум от ширины окна Media request in js for the maximum of the window width
1.3.16. Мобильные устройства Mobile devices
1.3.16.1. Вызов меню "Поделиться" на Android и iOS Calling the Share menu on Android and iOS
1.3.16.2. Проверка на мобильное устройство Mobile device check
1.3.17. Типографика Text
1.3.17.1. Обрезание строки и подстановка окончания js решение + css решение String truncation and end substitution js solution + css solution
1.3.18. Изображения Images
1.3.18.1. Изменить большое изображение, нажимая на мини-изображения Change large image by clicking on thumbnails
1.3.19. CSS модули CSS modules
1.3.19.1. reset.css + reset-art.css
1.3.19.2. SCSS генерация margin'ов SCSS margin generation
1.3.20. Кроссбраузерность Cross-browser compatibility
1.3.20.1. Альтернативный стиль, если вы не можете его использовать! Alternative style if you can't use it!
1.3.21. Счётчики Counters
1.3.21.1. Счетчик - таймер с выводом на экран Counter - timer with display
1.3.21.1.1. gist_link (link)
1.3.22. Ссылки "<a href" Links "<a href"
1.3.22.1. Ссылка "Вернуться назад" Back link
1.3.22.2. Выключить переход по ссылкам если равны '#' Disable following links if equal '#'
1.3.23. Формы Forms
1.3.23.1. установка курсора в определенное место (на 4 символ сразу после откр. скобки телефона) placing the cursor in a specific place (4 characters immediately after opening the phone bracket)
1.3.23.2. Универсальный mail script - отправка формы с сайта Generic mail script - submitting a form from a site
1.3.24. Вычисления Calculations
1.3.24.1. Максимальная ширина браузера Max browser width
1.4. functions_wp
1.4.1. WP Search Query Form Module | Модуль WP форма поискового запроса
1.4.1.1. gist
1.4.2. Creating a shortcode with parameters Создание шорткода с параметрами
1.4.2.1. gist
1.5. modules
1.6. bugs
1.6.1. safari
1.6.1.1. bootstrap
1.6.1.1.1. flex
1.7. dev_tools
1.7.1. npm js babel + scss + autoprefixer + minimize
1.7.1.1. gist
1.7.2. VScode
1.7.2.1. My VSCode keyboard shortcuts
1.7.2.1.1. gist
1.7.3. KRename files rename tool | Инструмент переименования файлов KRename
1.7.3.1. gist
1.8. cross_browsing
1.8.1. macos safari + ios safari (vmware macos)
1.8.1.1. vmware
1.8.1.1.1. gist
1.8.2. Analogue of "modernizr" | Аналог "modernizr"
1.8.2.1. gist
1.9. JS
1.9.1. snippets фрагменты
1.9.1.1. JS construction for practical everyday work JS конструкция для практической повседневной разработки
1.9.1.1.1. gist
1.9.1.2. JS conspects and references Конспекты и справочники по JS
1.9.1.2.1. cacher
1.10. CSS
1.10.1. features особенности
1.10.1.1. transform:
1.10.1.1.1. Порядок трансформации ВАЖЕН! Каждая последующая трансформация трансформирует предыдущие… The order of transformation is IMPORTANT! Each subsequent transformation transforms the previous ones…
1.10.1.2. content:
1.10.1.2.1. Перенос строки и возврат каретки Line break and carriage return
1.10.1.3. Text stroke using SVG Обводка текста с помощью SVG
1.10.1.3.1. cacher
1.10.1.3.2. codepen
1.10.1.4. text-shadow
1.10.1.4.1. 3D text effect text-align Текстовый 3D эффект text-align
1.10.1.5. 1. background-blend-mode: 2. mix-blend-mode:
1.10.1.5.1. 1. Это смешение фонов на одном элементе 1. This is mixing backgrounds on one element
1.10.1.5.2. 2. Это смешение фонов разных элементов на разном уровне z 2. This is a mixture of backgrounds of different elements at different z level
1.10.1.5.3. codepen
1.10.1.5.4. cahcer
1.10.1.6. background:
1.10.1.6.1. background-origin:
1.10.1.6.2. background-clip:
1.10.1.7. var(--some-var)
1.10.1.7.1. :root { --r: 255; --g: 255; --b: 255; }
1.10.1.8. text-decoration
1.10.1.8.1. text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-underline-position: under;
1.10.1.9. clamp()
1.10.1.9.1. width: clamp(10px, 4em, 80px);
1.10.1.10. aspect-ratio
1.10.1.10.1. video { aspect-ratio: 1 / 1; aspect-ratio: 16 / 9; aspect-ratio: 4 / 3; aspect-ratio: 0.5; }
1.10.1.11. min() max()
1.10.1.11.1. width: min(50vw, 200px); width: max(20vw, 400px);
1.10.1.12. :focus-within
1.10.1.12.1. form:focus-within { background: red; } input {/*при фокусе фокусируется родитель | when the focus is focused, the parent is focused*/ }
1.11. HTML
1.11.1. features особенности
1.11.1.1. специальные коды html (символы) html special codes (simbols)
1.11.1.1.1. ­
1.11.1.1.2.
1.11.1.2. <object>
1.11.1.2.1. <object type="application/pdf" data="/media/examples/In-CC0.pdf" width="250" height="200"> </object>
1.12. Neatness Аккуратность
1.12.1. Для заполнения контента на сайте To fill in the content on the site
1.12.1.1. Контент который будет заполняться в админке надо делать без class и id, используя пространство имён родительского блока. The content that will be filled in the admin panel should be done without class and id, using the namespace of the parent block.
1.13. Performance Производительность
1.13.1. Критически важный контент может быть заранее подгружен Critical content can be pre-loaded
1.13.1.1. rel="preload"
1.13.1.1.1. Важно избегать использования rel=preload для предварительной загрузки форматов изображений без широкой поддержки браузера (например, WebP). Также полезно избегать его использования для адаптивных изображений, определенных в srcsetтех случаях, когда извлекаемый источник может различаться в зависимости от состояния устройства. It's important to avoid using rel = preload to preload image formats without broad browser support (like WebP). It is also useful to avoid using it for responsive images defined in srcset in cases where the source being retrieved may differ depending on the state of the device.
1.14. Crossbrowsing Кроссбраузерность
1.14.1. Инструменты
1.14.1.1. Modernizr (link)
1.14.2. IE
1.14.2.1. Grid
1.14.2.1.1. Правила (link)
1.14.2.1.2. Guid (link)
1.14.2.1.3. Автопрефексиры
1.14.2.2. CSS идентификация ie 10/11
1.14.2.2.1. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
1.15. programms & services
1.15.1. images
1.15.1.1. преобразование и другие манипуляции convert and other manipulation
1.15.1.1.1. xnconvert
1.15.1.1.2. converseen
1.15.2. разобрать
1.15.2.1. Транслит для URL (cyrillic -> latin) (link)
1.15.2.1.1. типа: %D0%A3%D1%81%D0%BB%D1%83%D0%B3%D0%B0%3A+%D0%A0%D0%B5%D0%BC%D0%BE%D0%BD%D1%82+%D0%B1%D1%8B%D1%82%D0%BE%D0%B2%D1%8B%D1%85+%D1%85%D0%BE%D0%BB%D0%BE%D0%B4%D0%B8%D0%BB%D1%8C%D0%BD%D0%B8%D0%BA%D0%BE%D0%B2
1.15.2.2. Разные красивые узоры с помощью CSS градиентов. (link)
1.15.2.3. Разные красивые узоры с помощью SVG. (link)
1.15.2.4. Хороший сервис по работе с изображениями, анимациями и видео. (link)
1.15.2.5. Онлайн конвертер (link)
1.15.2.6. favicon
1.15.2.6.1. check&generate (link)
1.15.2.7. Быстрое создание статичного сайта
1.15.2.7.1. НАПРИМЕР САЙТ-ЗАГЛУШКА НА ДОМЕН Программа поможет быстро сделать статичный сайт, просто нарисовав его, без знаний верстки. Сайт получится сразу адаптивным. Его останется только скачать и разместить на нормальном домене. (link)
1.15.2.8. Полезные ссылки (link)
1.16. Bugs fixing Исправления ошибок
1.16.1. Проблема на apple ios ошибка скроллинга всплывающего окна на fancybox с position: fixed; не прокручивается контент в всплывшем окне (link)
1.16.1.1. css
1.16.1.1.1. .fancy-popup { position: absolute;//instead fixed }
1.16.1.2. js
1.16.1.2.1. $('[data-fancybox-some]').fancybox({ touch: false,//for android scrolling: 'yes', overflow: 'auto' });
1.17. Observations Наблюдения
1.17.1. Резиновые блоки
1.17.1.1. Если надо сделать резиновую вёрстку то надо использовать calc, например:
1.17.1.1.1. левый блок: width: calc(33% - 20px);//здесь 20px заложены в 33% margin-right: 20px;//и соответственно можно задать этот margin в 20px теперь можно смело блоку справа задавать width: 67%; и они в сумме всегда будут иметь 100%
1.17.1.1.2. текст тоже может быть резиновым: например: font-size: calc(9px + 0.63vw); будет равен: 18px на разрешении 1440px 21px на разрешении 1920px p.s. в теории, можно подобрать такое соотношение px и vw, что шрифт будет растягиваться и сжиматься хорошо на всех разрешениях.
1.17.2. В стилях желательно придерживаться очередности, чтобы легко ориентироваться в стилях.
1.17.2.1. что
1.17.2.1.1. display: block; width: 100%; max-width: 300px; height: calc(100% - 140px); background: white; padding: 40px 30px;
1.17.2.2. где (модификатор-позиционирование)
1.17.2.2.1. position: fixed; top: 140px; left: -300px; z-index: 999;
1.17.2.3. как (модификатор-состояние)
1.17.2.3.1. transition: all 700ms cubic-bezier(0.88, -0.26, 0.13, 1.23); transition-delay: 500ms;
1.17.3. Разница загрузки BOM (Browser) и DOM (Document)
1.17.3.1. Разница в милесекундах загрузки DOM и BOM относительно начала страницы. (link)
1.17.4. UX
1.17.4.1. ссылки
1.17.4.1.1. ссылки всегда должным быть на всю ширину и высоту блока которая подразумевается под нажатие если дизайном не предусмотренно другое
1.18. Website download Скачивание сайта
1.18.1. Зайти в дирректорию куда над скачать
1.18.1.1. wget -r
1.18.1.2. А лучше
1.18.1.2.1. wget --recursive --page-requisites --adjust-extension --span-hosts --convert-links --restrict-file-names=windows --domains SITE.RU --no-parent SITE.RU
1.18.1.2.2. wget -r -k -l 7 -p -E -nc -erobots=off --user-agent="Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/5З7.З6 (KHTML, like Gecko) Chrome/60.0.З112.11З Safari/5З7.36" www.site.kotory.scachat
1.18.1.2.3. wget -r -k -l 7 -p -E -nc www.site.kotory.scachat
2. Защита от пиратства
2.1. Кража контента с сайта
2.1.1. Артём Upkey.com.ua, [15.09.21 12:39] [Forwarded from Maksym Yevsiukov – ^(ppc|seo) трафик$] Интересная схема подачи жалобы DMCA от @atommal в чате SEO БУРЖ chat (https://t.me/seo_burzh_chat): Добрый день, коллеги. Суть: На одном из сайтов воруют контент. Воровство контента мониторю на регулярной основе. Вопрос: Что предпринимаете после того как обнаружили что разные сайты у вас контент своровали? Какие сервисы/инструменты используете уже ПОСЛЕ того как обнаружили воровство контента? Для себя нашел такой алгоритм решения проблемы (без юристов, телефонов и пацанов из 90х)): 1. Копии материалов храните на Google Dоcs, файл должен быть создан раньше, чем вы опубликуете материал на своей сайте. Также ваша учетка (точнее учетка, которая будет подавать жалобу) должна быть владельцем файла (не фрилансе, сосед или еще кто-то, а именно учетка подающая жалобы). Файл не править после публикации контента уже на сайте. 2. Идете https://www.google.com/webmasters/tools/legal-removal-dashboard?complaint_type=circumvention и подаете заявление, указывая ссылку на ГуглДоку, свой сайт и сайт-вор. Указываете в заявке, что вот оригинал контента и он ваш, контент не правился с такого-го числа (желательно скрины докинуть), а вот сайт который украл контент (можно указать с какого числа страница в индексе). Прошу удалить материал из выдачи. 3. Ждете, получаете результат. Можно сразу сделать одинаковый шаблон заявки-абузы, если нужно много раз подавать. У меня такие заявки залетают на ура, из 100% подданных - 100% страниц удалили из выдачи и никакие юристы не нужны. Алгоритм, трудозатратный и если же парсят прям массово, то лучше предостеречь болезнь используя разработчика с прямыми руками + сервисы вроде https://cleantalk.org/ и т.п. 🦧 #seo #dmca
3. CMS
3.1. Wordpress
3.1.1. Получить путь к теме wordpress в js файле. (link)
3.1.2. Технические требования интеграции верстки
3.1.2.1. Отсутствие ошибок в работе сайта, ошибок в консоли браузера; Максимально автоматизировать и упростить работу с контентом. Использовать ACF (желательно) или CFS, делить их на группы/вкладки, использовать полезные пояснения для редакторов. Возможно использование Post Snippets; Использовать CPT для различного рода записей (например, услуги, акции, каталог); По возможности, не допускать использования HTML в редакторе для наполнения страниц контент-менеджером; Не использовать Page Builders; Для контактных форм использовать CF7; Для таблиц использовать TablePress; Адекватная работа ЧПУ. При необходимости можно использовать Custom Permalinks; Не нагружать сайт лишними плагинами. Использовать только то, что необходимо.
3.2. MODx
3.2.1. MODx_FormIt (link)
3.2.2. Сниппет и чанк для MODx для отображения класса 'active' на активной странице. (link)
3.2.3. https://gist.github.com/artemijeka/853e45c73ac23382d7aa6ddaac614083Пример поля MIGX в MODx Revolutoin View modx-migx.js (link)
3.3. Bitrix
3.3.1. Debug
3.3.1.1. code (link)
3.3.2. login
3.3.2.1. без пароля и логина
3.3.2.1.1. <? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php"); global $USER; $USER->Authorize(1); LocalRedirect(“/bitrix/admin/”); ?> (link)
3.3.3. Birtix Подключение разных файлов в зависимости от пути. (link)
3.3.4. Bitrix убрать $_GET['success'] из url и скрыть popup с фразой об успехе. (link)
3.3.5. Bitrix. Вставка редактируемой области. (link)
3.3.6. Редирект
3.3.6.1. Bitrix - редирект по повторному нажатию на кнопку. (link)
3.3.7. Вывод информации из админки
3.3.7.1. Вывод элементов инфоблока в вёрстку (link)
3.3.8. Mail
3.3.8.1. Васянская форма для битрикс. (link)
3.3.8.2. Отправка элементов корзины на почту в D7.
3.3.8.3. Bitrix. Добавление своего макроса #PHONE# к шаблону письма. (link)
3.3.9. Forms
3.3.9.1. хороший пример формы обратной связи на технолайф 13.07.2020
3.3.9.1.1. $ordertext = ''; foreach ($basket as $basketItem) { $ordertext .= $basketItem->getField('NAME') . ' - ' . $basketItem->getQuantity() . 'шт. на сумму ' . $basketItem->getFinalPrice() .' руб.' . '<br />'; } $name = trim($_POST["username"]); $surname = trim($_POST["usersurname"]); $phone = trim($_POST["userphone"]); $mail = trim($_POST["useremail"]); $arEventFields = array( "ORDER_USER" => $surname . " " . $name, "ORDER_ID" => $result->getId(), "PRICE" => $summ . " рублей", "EMAIL" => $mail, "PHONE" => $phone, "ORDER_LIST" => $ordertext, "ORDER_DATE" => $order->getDateInsert() ); CEvent::Send("SALE_NEW_ORDER","s1",$arEventFields,"N","30", ""); } CSaleBasket::DeleteAll(CSaleBasket::GetBasketUserID(), False);
3.3.10. Добавление custom свойства инфоблока в $arResult (link)
3.3.11. SEO
3.3.11.1. Section (link)
3.3.11.1.1. $SECTION_ID = $sec['ID']; $IBLOCK_ID = 11; $ipropSectionValues = new ($IBLOCK_ID, $SECTION_ID); $arSEO = $ipropSectionValues->getValues(); if ($arSEO['SECTION_META_TITLE'] != false) { $APPLICATION->SetPageProperty("title", $arSEO['SECTION_META_TITLE']); } if ($arSEO['SECTION_META_KEYWORDS'] != false) { $APPLICATION->SetPageProperty("keywords", $arSEO['SECTION_META_KEYWORDS']); } if ($arSEO['SECTION_META_DESCRIPTION'] != false) { $APPLICATION->SetPageProperty("description", $arSEO['SECTION_META_DESCRIPTION']); }
3.3.11.2. Element (link)
3.3.11.2.1. $ipropValues = new (11/*ID инфоблока*/,$arFields['ID']/*ID элемента*/); $arElMetaProp = $ipropValues->getValues(); if ($arElMetaProp['ELEMENT_META_TITLE'] != false) { $APPLICATION->SetPageProperty("title", $arElMetaProp['ELEMENT_META_TITLE']); } if ($arElMetaProp['ELEMENT_META_DESCRIPTION'] != false) { $APPLICATION->SetPageProperty("description", $arElMetaProp['ELEMENT_META_DESCRIPTION']); } if ($arElMetaProp['ELEMENT_META_KEYWORDS'] != false) { $APPLICATION->SetPageProperty("keywords", $arElMetaProp['ELEMENT_META_KEYWORDS']); }
3.3.12. CIBlockElement::GetList()
3.3.12.1. GetProperties()
3.3.12.1.1. $arSelect = Array(); $arFilter = Array("IBLOCK_ID" => 2, "NAME" => $arResult[3]['TITLE']); $res = CIBlockElement::GetList(Array(), $arFilter, false, Array(), $arSelect); while ($ob = $res->GetNextElement()) { $arProps = $ob->GetProperties(); $title = $arProps['NAME_ENG']['VALUE']; }
3.3.12.2. GetFields()
3.3.12.2.1. $arSelect = Array(); $arFilter = Array("IBLOCK_ID" => 2, "NAME" => $arResult[3]['TITLE']); $res = CIBlockElement::GetList(Array(), $arFilter, false, Array(), $arSelect); while ($ob = $res->GetNextElement()) { $arFields = $ob->GetFields(); $title = $arProps['NAME_ENG']['VALUE']; }
3.4. October
3.5. OpenCart
3.6. Админка для статичного сайта
3.6.1. Textolite (link)
3.7. Shop-Script (webasyst)
4. GIT
4.1. global .gitignor (link)
5. Linux
5.1. Localhost
5.1.1. Lampp пример создания локального домена (Linux). (link)
5.2. Terminal
5.2.1. .bashrc aliases collection (link)
5.2.2. search
5.2.2.1. by symbol
5.2.2.1.1. find ./ -type f -name '*\?*'
5.2.3. Get all file names in the directory Получить все имена файлов в дирректории
5.2.3.1. cahcer
5.3. Shell
5.3.1. Транслитировать все файлы в папке и подпапках с кириллицы на латиницу Transliterate all files in a folder and subfolders from Cyrillic to Latin
5.3.1.1. gist
5.4. xneur
5.4.1. settings (link)
5.5. Ускорение работы
5.5.1. Создание коротких команд "псевдонимов" (aliases)
5.5.1.1. caher
5.6. Разобрать
5.6.1. Права на файлы
5.6.1.1. Задать
5.6.1.1.1. chmod ugo+-rwx ./path/to/file
5.6.1.1.2. --- - 0 r-- - 4 (= 4*1 + 2*0 + 1*0) r-x - 5 (= 4*1 + 2*0 + 1*1) rwx -7 (= 4*1 + 2*1 + 1*1)
5.6.1.2. Посмотреть
5.6.1.2.1. ls -l ./path
5.6.2. Локальный сервер
5.6.2.1. Инструкция по установке локального сервера xampp на ubuntu и macOS хорошая тут. (link)
5.6.2.2. LAMPP
5.6.2.2.1. - - - - - - - - - - - - - - - - - - - - Раскоментировать в sudo gedit /opt/lampp/etc/httpd.conf Include etc/extra/httpd-vhosts.conf - - - - - - - - - - - - - - - - - - - - Прописать в sudo gedit /etc/hosts 127.0.0.1 php-2.loc - это имя локального хоста. - - - - - - - - - - - - - - - - - - - - Добавление нового локального доменного имени сюда: sudo gedit /opt/lampp/etc/extra/httpd-vhosts.conf Код по шаблону: <VirtualHost *:80> DocumentRoot "/opt/lampp/docs/php-2.loc/" ServerName php-2.loc <Directory "/opt/lampp/docs/php-2.loc/"> Options Indexes FollowSymLinks Includes execCGI AllowOverride All Require all granted </Directory> </VirtualHost> # (Можно в пути указать любой путь на компьютере) - - - - - - - - - - - - - - - - - - - - Если доступ все еще не доступен: Открыть права на нужные папки И ПРОСЛЕДИТЬ ЧТОБЫ НА ВСЕМ ПУТИ БЫЛИ ПРАВИЛЬНЫЕ ПРАВА! - - - - - - - - - - - - - - - - - - - - (link)
5.6.2.2.2. Если apache не запускается: sudo service apache2 status sudo service apache2 stop - - - - - - - - - - - - - - - - - - - -
5.6.2.2.3. Вынос ярлыка программы в менюшку: Open a new terminal and run: sudo gedit /usr/share/applications/xampp.desktop and save the following code in the file. [Desktop Entry] Version=1.0 Name=XAMPP Comment=Менеджер управления XAMPP Exec=gksudo /opt/lampp/manager-linux-x64.run Icon=/opt/lampp/htdocs/dashboard/images/favicon.png Terminal=false Type=Application Categories=Network;Internet; Run following command in terminal: sudo apt-get update - - - - - - - - - - - - - - - - - - - - Исключение из автозагрузки apache2 Код: [Выделить] sudo update-rc.d -f apache2 disable Код: [Выделить] echo "manual" | sudo tee -a /etc/init/mysql.override Потом остановка Код: [Выделить] sudo service apache2 stop Код: [Выделить] sudo service mysql stop Ручное управление sudo service apache2(mysql) start(stop , restart) LAMP | Русскоязычная документация по Ubuntu - - - - - - - - - - - - - - - - - - - - (link)
5.6.2.2.4. ПОМЕНЯТЬ ROOT ПАРОЛЬ В ФАЙЛЕ ЕСЛИ НАДО
5.6.3. ПРОБЛЕМЫ И ИХ РЕШЕНИЯ
5.6.3.1. Проблема загрузки
5.6.3.1.1. Failed to start Load Kernel Modules
5.6.3.1.2. Или
5.6.3.1.3. Time out waiting for device dev-disk-by..
5.6.3.1.4. Надо залезть в /etc/fstab системы и закоментить подозрительные разделы или uuid у них поправить.
5.6.4. Создание установочной флешки
5.6.4.1. linux
5.6.4.1.1. sudo dd bs=4M if=/home/artem/Media/OS/manjaro-deepin-17.1.12-stable-x86_64.iso of=/dev/sdX status=progress
5.6.4.2. windows
5.6.4.2.1. slacka/WoeUSB (link)
5.6.5. Оптимизация изображений:
5.6.5.1. Сжатие изображений:
5.6.5.1.1. jpg
5.6.5.1.2. png
5.6.5.2. Изменение высоты изображений:
5.6.5.2.1. mogrify -geometry x1280 *.jpg && mogrify -geometry x1280 *.JPG
5.6.5.3. Повернуть изображения на 90 гр
5.6.5.3.1. mogrify -rotate 90 ./*
5.6.5.4. Изменение ширины изображений:
5.6.5.4.1. mogrify -geometry 700x *.jpg
5.6.6. Падение интернета после ждущего режима.
5.6.6.1. Sander, по выходу из сна - дай ему (link)
5.6.6.1.1. sudo systemctl restart NetworkManager.service
5.6.7. Запуск программ
5.6.7.1. Интерпритируемые программы
5.6.7.1.1. интерпретатор /путь/к/файлу/программы параметры
5.6.7.2. Пример файл xampp.desktop в /usr/share/applications
5.6.7.2.1. [Desktop Entry] Version=1.0 Name=XAMPP Comment=Менеджер управления XAMPP Exec=gksudo /opt/lampp/manager-linux-x64.run Icon=/opt/lampp/htdocs/dashboard/images/favicon.png Terminal=false Type=Application Categories=Network;Internet;
5.6.7.3. Создание ярлыка запуска
5.6.7.3.1. ASD
5.6.8. Переименование группы файлов
5.6.8.1. rename 's/А/Б/g' *
5.6.8.1.1. где А - любое количество каких-то символов
5.6.8.1.2. Б - любое кол-во каких-то символов на которые надо поменять
5.6.9. Зависшее графическое окружение
5.6.9.1. ctrl+alt+f1
5.6.9.1.1. sudo service lightdm restart
5.6.10. Отмонтирование каталога
5.6.10.1. sudo umount /path/to/catalog
5.6.11. Копирование
5.6.11.1. Например нужно скопировать ссылку на sublime в другое место чтобы он отображался в меню запуск по умолчанию
5.6.11.1.1. # Копируем ярлык cp /usr/share/applications/sublime_text.desktop ~/.local/share/applications/sublime_text.desktop # Обновляем базу данных ярлыков sudo update-desktop-database
5.6.12. Смена пароля
5.6.12.1. sudo passwd <имя пользователя>
5.6.13. Редакторы кода
5.6.13.1. PhpStorm
5.6.13.1.1. Debuger (link)
5.6.14. Прилинковка хостинга к папке по SSH (link)
5.6.14.1. Соединение с папкой сервера по sshfs:
5.6.14.1.1. sudo sshfs -d -o allow_other -o reconnect -o ServerAliveInterval=15 [email protected]:/home/a51315/public_html /mnt/host_my -p 20022 -C
5.6.14.2. Отсоединение:
5.6.14.2.1. fusermount -u ~/beget
5.6.15. SSH connect
5.6.15.1. ssh [email protected]
5.6.16. Скачивание сайта
5.6.16.1. Зайти в дирректорию куда над скачать
5.6.16.1.1. wget -r
5.6.16.1.2. А лучше
5.6.17. Работа с удаленным серверами через Sublime Text 3 и Git с автозагрузкой изменений!
5.6.17.1. Соединение должно быть по SSH: git remote set-url origin [email protected]:artemijeka/bitrix_local.git Если нет ключа ( /home/a/artemkm9/.ssh/id_rsa или /home/fmf/.ssh/id_rsa ), то создать: ssh-keygen -t rsa -b 4096 -C "[email protected]" Добавляю его: eval `ssh-agent -s` && ssh-add ~/.ssh/id_rsa Копирую содержимое из: /home/a/artemkm9/.ssh/id_rsa.pub или /home/fmf/.ssh/id_rsa Иду в: Build software better, together (для открытых проектов) или https://bitbucket.org/kuznecov_fmf/projects/admin/access-keys (для закрытых проектов) Ввожу имя машины например: home__linux_manjaro или work__linux_manjaro Потом вставляю код из /home/fmf/.ssh/id_rsa.pub Сохраняю Теперь git push должен работать без авторизации на локалке. В sublime text 3 нужен плагин SFTP/FTP: В него вбиваю данные удаленного сервера. Через FileZilla качаю проект И при езменениях будет автоматом посылаться на удаленный сервер В терминале при этом можно делать гит коммиты, пуши, пулы и т.д. (Это надо сделать для каждой рабочей машины. (Можно даже хостинговый сервер добавить в гит или bitbucket)) Например для удаленной работы с локального посМылая изменения на хостинг и регистрируя изменения в гит. (link)
5.6.18. Скачать фронтальную часть сайта
5.6.18.1. Как запустить Ubuntu Bash в Windows 10. (link)
5.6.18.2. cd ./path/to/new_app wget -m inf https://url
5.7. Управление linux Linux management
5.7.1. Создание загрузчика программы linux (ubuntu) Creating a linux (ubuntu) program loader
6. SEO
6.1. alt и title
6.1.1. Для атрибут alt «прилагательное + ключевая фраза».
6.1.1.1. Конечно, “прилагательное” может быть заменено на другую часть речи и вставлено за ключом. Но в любом случае, например, “двухсловник” будет разбавлен третьим словом. Даже если к ключу будет добавлена просто порядковый номер (ключ 1, ключ 2…), это будет лучше. чем просто повторяющийся из раза в раз ключ.
6.1.2. Для атрибута title рекомендовано расширенное описание «прилагательное + ключ + дополнение».
6.1.2.1. Оно должно быть длиннее. Можно использовать ( а некоторые специалисты считаю – нужно) слова “фото”, “иллюстрация”. Это как бы подсказка для робота…
6.2. Семантика
6.3. Очистка кэша ссылки в вконтакте. (link)
6.4. Open graph (link)
7. Back-end
7.1. .htaccess
7.1.1. Сервер, сжатие, ускорение.
7.1.1.1. .htaccess
7.1.1.1.1. ### agragregra/OptimizedHTML-5 ### # Add correct content-type for fonts & SVG AddType application/font-woff2 .woff2 AddType image/svg+xml .svg ExpiresActive On ExpiresDefault "access plus 5 seconds" # Cache Images ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType image/svg+xml "access plus 2592000 seconds" # Cache Fonts ExpiresByType application/font-woff2 "access plus 2592000 seconds" ExpiresByType image/svg+xml "access plus 2592000 seconds" # Cache other content types (CSS, JS, HTML, XML) ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 2592000 seconds" ExpiresByType application/javascript "access plus 2592000 seconds" ExpiresByType application/x-javascript "access plus 2592000 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript application/font-woff2 image/svg+xml (link)
7.1.2. Редиректы
7.1.2.1. В .htaccess
7.1.2.1.1. http:// -> https://
7.1.2.1.2. Переадресация с директории в другую директорию.
7.1.2.1.3. old.site -> new.site
7.1.3. Правила (link)
7.1.4. Защищаем .htaccess файл (link)
7.1.5. Убираем конец адреса (переадрисация на обрезанную ссылку) (link)
7.1.6. Убрать окончание расширение файла в адресе сайта .htaccess (link)
7.1.7. 20+ правил .htaccess, которые должен знать каждый разработчик | Proofsite: ваш cайт должен продавать! (link)
7.1.8. Установка кодировки по умолчанию.
7.1.8.1. AddDefaultCharset UTF-8
7.1.9. Установка часового пояса по умолчанию.
7.1.9.1. php_value date.timezone "Europe/Samara"
7.2. PHP
7.2.1. Запись в файл
7.2.1.1. $emailsubscribers = './emailsubscribers.txt'; $fo = fopen($emailsubscribers, "a"); // a = add fwrite( $fo, ('new text, ') ); // new text, fclose($fo);
7.2.2. Подбор окончания слова
7.2.2.1. <?php $num = $input; // число $scriptProperties['item'] = $options; // наименование $scriptProperties['end_1'] = 'ов'; // например 45 товаров $scriptProperties['end_2'] = ''; // например 31 товар $scriptProperties['end_3'] = 'а'; // например // 2 товара $stri = array( $scriptProperties['end_1'], $scriptProperties['end_2'], $scriptProperties['end_3'] ); $index = $num % 100; if ( $index >=11 && $index <= 14 ) $index = 0; else $index = ( $index %= 10 ) < 5 ? ( $index > 2 ? 2 : $index ): 0; return $scriptProperties['item'] . $stri[$index]; (link)
7.2.3. Дебагинг/скрытая разработка
7.2.3.1. <pre style="display: none" class="var_dump"> <? var_dump($_COOKIE); if ($_COOKIE['PHPSESSID'] === '10b21e4b09d3f2e2bcd53b12a502d264' || $_COOKIE['PHPSESSID'] === 'b8695a2a1dac41eae30828679c1039ec') { $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/css/test.css"); } else { $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/css/ie.css"); } ?> </pre>
7.2.4. File
7.2.4.1. Включение файла PHP в строку при помощи буферизации. (link)
7.2.4.2. Получение имен файлов и каталогов в заданной дирректории. (link)
7.2.5. Преобразования
7.2.5.1. Числа
7.2.5.1.1. PHP преобразование числа к удобному формату (денежному). (link)
7.2.5.2. Строки
7.2.5.2.1. Преобразование строки описывающей цвет из RGB формата в HEX. View decToHex.php (link)
7.2.5.2.2. Функция мультирасчленения строки в массив по любому набору вхождений подстрок. (link)
7.2.6. REGEX
7.2.6.1. Регулярное выражение для валидации номера телефона:
7.2.6.1.1. ^((8|7)[ ]?)?(?{3}?[ ]?)?[ ]{7,10}$ Ориентировано на российские мобильные + городские с кодом из 3 цифр (например, Москва). Зеленый свет для: +79261234567 89261234567 79261234567 +7 926 123 45 67 8(926)123-45-67 123-45-67 9261234567 79261234567 (495)1234567 (495) 123 45 67 89261234567 8-926-123-45-67 8 927 1234 234 8 927 12 12 888 8 927 12 555 12 8 927 123 8 123
7.2.6.2. текст заменить
7.2.6.2.1. $res = preg_replace("/мл/", "ml", $content);
7.2.7. JSON
7.2.7.1. Преобразование в json объект.
7.2.7.1.1. json_encode($php_var);
7.2.7.2. Преобразование в php переменную
7.2.7.2.1. json_decode($json_string);
7.3. Mail
7.3.1. Repo: phpmailer_example (link)
7.3.2. mail script - отправка формы с сайта (link)
7.3.3. Тест отправки почты с формы с сайта. (link)
8. Server
8.1. Права для deploy user
8.1.1. find ./ -type d -exec chmod 0755 {} \;
8.1.2. find ./ -type f -exec chmod 0644 {} \;
8.2. Права для сервера
8.2.1. Для тех фалов/директорий, куда должен мочь писать сервер (логи, кеш и т.п.) - 664 и 775 соответственно. Owner у всего, что не создал сервер: пользователь_для_деплоя:общая_группа