shared_code

web dev code

Get Started. It's Free
or sign up with your email address
shared_code by Mind Map: shared_code

1. Yii2

2. Laravel

3. Front

3.1. CSS

3.1.1. Резиновые блоки

3.1.1.1. Если надо сделать резиновую вёрстку то надо использовать calc, например:

3.1.1.1.1. левый блок: width: calc(33% - 20px);//здесь 20px заложены в 33% margin-right: 20px;//и соответственно можно задать этот margin в 20px теперь можно смело блоку справа задавать width: 67%; и они в сумме всегда будут иметь 100%

3.1.1.1.2. текст тоже может быть резиновым: например: font-size: calc(9px + 0.63vw); будет равен: 18px на разрешении 1440px 21px на разрешении 1920px p.s. в теории, можно подобрать такое соотношение px и vw, что шрифт будет растягиваться и сжиматься хорошо на всех разрешениях.

3.1.2. В стилях желательно придерживаться очередности, чтобы легко ориентироваться в стилях.

3.1.2.1. что

3.1.2.1.1. display: block; width: 100%; max-width: 300px; height: calc(100% - 140px); background: white; padding: 40px 30px;

3.1.2.2. где (модификатор-позиционирование)

3.1.2.2.1. position: fixed; top: 140px; left: -300px; z-index: 999;

3.1.2.3. как (модификатор-состояние)

3.1.2.3.1. transition: all 700ms cubic-bezier(0.88, -0.26, 0.13, 1.23); transition-delay: 500ms;

3.2. JS

3.2.1. Совместимость

3.2.1.1. JavaScript

3.2.1.1.1. ECMAScript 6 compatibility table

3.2.1.1.2. Can I use... Support tables for HTML5, CSS3, etc

3.2.2. Разница загрузки BOM и DOM

3.2.2.1. Разница в милесекундах загрузки DOM и BOM относительно начала страницы.

3.2.3. Подсчет количества элементов внутри объекта (с числовыми индексами).

3.2.4. Кнопка показа и скрытия контента Посмотреть - Скрыть

3.2.5. Слайдер

3.2.5.1. slick

3.2.5.1.1. Docs

3.2.5.1.2. Slick on hover - stop on click

3.2.6. Menu

3.2.6.1. Раскрывающееся меню со стрелкой.

3.2.6.2. Фиксация верхнего меню при прокручивании вниз.

3.2.7. Плавный скролл

3.2.8. Счетчик - таймер с выводом на экран

3.2.8.1. gist_link

3.2.9. Ссылки

3.2.9.1. Ссылка "Вернуться назад"

3.2.9.2. Выключить переход по ссылкам если равны '#'

3.2.10. Отрисовка графики

3.2.10.1. Ядро

3.2.10.1.1. Совсем немного изменив код игрового цикла, можно добиться поддержки slow motion без изменения остального кода игры: let last = performance.now(), fps = 60, slomo = 1, // slow motion multiplier step = 1 / fps, slowStep = slomo * step, dt = 0, now; let frame = () => { now = performance.now(); dt = dt + Math.min(1, (now - last) / 1000); while(dt > slowStep) { dt = dt - slowStep; update(step); } last = now; render(dt / slomo * fps); requestAnimationFrame(frame); } requestAnimationFrame(frame);

3.2.10.2. Обработка пользовательского ввода

3.2.10.2.1. let inputState = { UP: false, DOWN: false, LEFT: false, RIGHT: false, ROTATE: false };

3.2.10.2.2. let update = (step) => { if (inputState.LEFT) posX--; if (inputState.RIGHT) posX++; if (inputState.UP) posY--; if (inputState.DOWN) posY++; if (inputState.ROTATE) angle++; };

3.2.11. Коллекции

3.2.11.1. Перевод коллекции в массив

3.2.11.1.1. var elems = document.documentElement.childNodes; elems = Array.prototype.slice.call(elems); // теперь elems - массив

3.3. Вычисления

3.3.1. Максимальная ширина браузера

3.4. Скачать фронтальную часть сайта

3.4.1. Как запустить Ubuntu Bash в Windows 10.

3.4.2. cd ./path/to/new_app wget -m inf https://url

3.5. Исправления ошибок / fixed bugs

3.5.1. Проблема на apple ios ошибка скроллинга всплывающего окна на fancybox с position: fixed; не прокручивается контент в всплывшем окне | Problem on apple ios pop-up scrolling error on fancybox with position: fixed; does not scroll content in popup window

3.5.1.1. css

3.5.1.1.1. .fancy-popup { position: absolute;//instead fixed }

3.5.1.2. js

3.5.1.2.1. $('[data-fancybox-some]').fancybox({ touch: false,//for android scrolling: 'yes', overflow: 'auto' });

3.6. Интерактивность

3.6.1. Закрыть окно по нажатию за его пределы.

3.6.1.1. $(document).on( 'click', function( e ) { var heightHeader = $('.nav-top').height() + $('header').height(); if ( e.clientY > heightHeader ) { $('.nav-top').removeClass('opened'); } });

3.7. UI

3.7.1. animations

3.7.1.1. Прелоадер

3.7.1.1.1. Прелоадер загрузки страницы.

3.7.1.1.2. С процентом загрузки

3.7.1.1.3. Круглый прогрессбар

3.7.1.2. libs_of_animations

3.7.1.2.1. LottieFiles - Free animation files built for Lottie, Bodymovin

3.7.2. эффект загрузки контента

3.7.2.1. https://simple-solutions.bitrix24.ru/bitrix/images/intranet/slider/profile.svg

3.8. images

3.8.1. Оптимизация и конвертирование

3.8.1.1. Серьезная программа конвертации, оптимизации по совету от гугл (XnConvert)

3.8.1.1.1. XnConvert обеспечивает пакетную обработку изображений, совместим с более чем 500 форматами изображений. Вы можете комбинировать более 80 отдельных действий для преобразования или редактирования изображений несколькими способами. XnConvert поддерживает пакетную оптимизацию изображений, обеспечивая прямое преобразование из исходных файлов в WebP и другие форматы. В дополнение к сжатию, XnConvert может также помочь с разделением метаданных, кадрированием, настройкой глубины цвета и другими преобразованиями. Некоторые из параметров, перечисленных на веб-сайте xnview, включают: Метаданные: редактирование Преобразование: поворот, обрезка, изменение размера Регулировки: яркость, контрастность, насыщенность Фильтры: размытие, тиснение, резкость Эффекты: маскировка, водяной знак, виньетирование Результаты ваших операций могут быть экспортированы в около 70 различных форматов файлов, включая WebP. XnConvert бесплатен для Linux, Mac и Windows. Настоятельно рекомендуется XnConvert, особенно для малого бизнеса.

3.8.1.2. Repo: Оптимизация png, jpg из контекстного меню windows

3.8.1.3. Хороший сервис по работе с изображениями, анимациями.

3.8.1.4. Онлайн конвертер

3.8.1.5. webp

3.8.1.5.1. WebPconv | WebP File Converter | Romeolight

3.8.1.5.2. Консольные утилиты webp от google

3.8.1.6. Полезные программы для оптимизации изображений jpg, png

3.8.1.6.1. http://www.romeolight.com/contents/imageoptimizer/

3.8.2. Невидимые области на изображении ведущие на какие либо ресурсы

3.8.2.1. <map><area>...

3.8.3. favicon

3.8.3.1. check&generate

3.8.4. Полезные статьи гугл

3.8.4.1. Delivering Fast and Light Applications with Save-Data  |  Web Fundamentals  |  Google Developers

3.8.4.2. Automating Resource Selection with Client Hints  |  Web  |  Google Developers

3.8.4.3. Automating image optimization  |  Web Fundamentals  |  Google Developers

3.8.5. Кратность дисплея к пикселям DPR

3.8.5.1. <img srcset="paul-irish-320w.jpg, paul-irish-640w.jpg 2x, paul-irish-960w.jpg 3x" src="paul-irish-960w.jpg" alt="Paul Irish cameo">

3.8.6. GIF->MP4

3.8.6.1. Обратная совместимость

3.8.7. SVG

3.8.7.1. оптимизация

3.8.7.1.1. SVGOMG - SVGO's Missing GUIMenu

3.8.7.2. выделение областей изображения (image map)

3.8.7.2.1. Видео урок

3.8.7.3. тени

3.8.7.3.1. gist

3.8.7.3.2. codepen

3.8.7.4. Разные красивые узоры с помощью SVG.

3.9. css-components

3.9.1. input

3.9.1.1. checkbox

3.9.1.1.1. checkmarker

3.9.2. __triangle

3.9.2.1. _right

3.9.3. Font-face

3.9.4. gradient

3.9.4.1. border

3.9.4.1.1. v1

3.9.4.1.2. v2

3.9.4.2. font (text)

3.9.4.3. Gradient generator

3.9.5. scss

3.9.5.1. scss генерация margin'ов

3.9.5.1.1. @for $i from 0 through 75 { .mt#{$i*5} { margin-top: $i*5px; } }

3.9.6. Разные красивые узоры с помощью CSS градиентов.

3.10. Быстрое создание статичного сайта

3.10.1. НАПРИМЕР САЙТ-ЗАГЛУШКА НА ДОМЕН Программа поможет быстро сделать статичный сайт, просто нарисовав его, без знаний верстки. Сайт получится сразу адаптивным. Его останется только скачать и разместить на нормальном домене.

3.11. html

3.11.1. Фишки

3.11.1.1. Maps

3.11.1.1.1. Карта с разделением по регионам

3.11.1.2. Перенос текста через дефис

3.11.1.2.1. Мягкий перенос Применение <wbr> имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол &shy;. Он выполняет ту же роль, что и тег <wbr> — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис

3.11.2. Семантика

3.11.2.1. Семантика

3.12. Кроссбраузерность

3.12.1. IE

3.12.1.1. Grid

3.12.1.1.1. Правила

3.12.1.1.2. Guid

3.12.1.1.3. Автопрефексиры

3.12.1.2. CSS идентификация ie 10/11

3.12.1.2.1. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)

3.12.2. Инструменты

3.12.2.1. Modernizr

3.12.3. Chrome

3.12.3.1. Пуш уцведомления в chrome

3.12.4. Изображения

3.12.4.1. <picture> <source srcset="/path/to/image.webp" type="image/webp"> <img src="/path/to/image.jpg" alt=""> </picture> <picture> <source srcset='paul_irish.jxr' type='image/vnd.ms-photo'> <source srcset='paul_irish.jp2' type='image/jp2'> <source srcset='paul_irish.webp' type='image/webp'> <img src='paul_irish.jpg' alt='paul'> </picture> <picture> <source srcset="photo.jxr" type="image/vnd.ms-photo"> <source srcset="photo.jp2" type="image/jp2"> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="My beautiful face"> </picture>

3.12.4.2. <picture>и <img srcset>предпочтительны для загрузки реагирующих изображения чем @media

3.13. Переходы | transfer

3.13.1. Плавный скролл до элемента на другой странице или на текущей странице.

3.14. form

3.14.1. Маски

3.14.1.1. Телефон

3.14.1.2. Дата

3.14.1.2.1. Зависимости

3.14.1.2.2. Код

3.14.2. functions

3.14.2.1. установка курсора в определенное место (на 4 символ сразу после откр. скобки телефона)

3.15. Производительность

3.15.1. Twitter Lite и высокопроизводительные прогрессивные веб-приложения React в масштабе

3.15.2. display: none; // плох для скрытия изображений...

3.15.2.1. скрин гугл

3.15.3. Влияние display: none; на background images...

3.15.3.1. скрин гугл

3.15.4. lazyload (совет гугл)

3.15.4.1. aFarkas/lazysizes

3.15.4.1.1. В чем прикол с Lazy Loading? Программы чтения с экрана, некоторые поисковые роботы и любые пользователи с отключенным JavaScript не смогут просматривать изображения, загруженные с помощью JavaScript. Это, однако, то, что мы можем обойти с <noscript>запасным вариантом. Прослушиватели с прокруткой, например, используемые для определения, когда загружать лениво загруженное изображение, могут отрицательно повлиять на производительность прокрутки в браузере. Они могут заставить браузер многократно перерисовываться, замедляя процесс до обхода - однако, умные ленивые загрузочные библиотеки будут использовать регулирование для смягчения этого. Одним из возможных решений является Intersection Observer, который поддерживается lazysizes.

3.15.4.1.2. Возможности Lazysizes включают в себя: Автоматически обнаруживает изменения видимости текущих и будущих элементов lazyload Включает стандартную поддержку адаптивных изображений (picture и srcset) Добавляет автоматический расчет размеров и псевдонимов для медиа-запросов Может использоваться с сотнями изображений / фреймов на страницах CSS и JS или веб-приложениях Расширяемый: Поддерживает плагины Легкое, но зрелое решение SEO улучшено: не скрывает изображения / ресурсы от сканеров

3.15.4.1.3. <!-- non-responsive: --> <img data-src="image.jpg" class="lazyload" /> <!-- responsive example with automatic sizes calculation: --> <img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload" /> <!-- iframe example --> <iframe frameborder="0" class="lazyload" allowfullscreen="" data-src="//www.youtube.com/embed/ZfV-aYdU4uE"> </iframe>

3.15.4.2. Для веб-версии этой книги я связал Lazysizes (хотя вы можете использовать любую альтернативу) с Cloudinary для адаптивных изображений по требованию. Это дало мне свободу экспериментировать с различными значениями масштаба, качества, формата, а также с возможностью постепенной загрузки с минимальными усилиями:

3.15.4.3. Lazy-load

3.15.4.3.1. Lazy Load img video audio iframe

3.15.4.3.2. еще

3.15.5. Оптимизация контента (google)

3.15.5.1. Optimizing Content Efficiency  |  Web Fundamentals  |  Google Developers

3.15.6. Критически важный контент может быть заранее подгружен

3.15.6.1. Важно избегать использования rel=preloadдля предварительной загрузки форматов изображений без широкой поддержки браузера (например, WebP). Также полезно избегать его использования для адаптивных изображений, определенных в srcsetтех случаях, когда извлекаемый источник может различаться в зависимости от состояния устройства.

3.15.6.2. <link rel="preload" as="image" href="logo.jpg"/>

3.15.6.3. Адаптивные изображения

3.15.6.3.1. <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">

3.15.6.4. <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script">

3.15.6.5. <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>

3.16. Адаптивность

3.16.1. Видео

3.16.1.1. Убрать видео ролик на мобильных устройствах.

3.17. Конвертеры

3.17.1. Online converter - convert video, images, audio and documents for free

3.18. Семантическая разметка

3.18.1. Опен граф.

3.18.2. Очистка кэша ссылки в вконтакте.

3.18.3. Repo: json schema.org

4. Back

4.1. .htaccess

4.1.1. Сервер, сжатие, ускорение.

4.1.1.1. .htaccess

4.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

4.1.2. Редиректы

4.1.2.1. В .htaccess

4.1.2.1.1. http:// -> https://

4.1.2.1.2. Переадресация с директории в другую директорию.

4.1.2.1.3. old.site -> new.site

4.1.3. Правила

4.1.4. Защищаем .htaccess файл

4.1.5. Убираем конец адреса (переадрисация на обрезанную ссылку)

4.1.6. Убрать окончание расширение файла в адресе сайта .htaccess

4.1.7. 20+ правил .htaccess, которые должен знать каждый разработчик | Proofsite: ваш cайт должен продавать!

4.1.8. Установка кодировки по умолчанию.

4.1.8.1. AddDefaultCharset UTF-8

4.1.9. Установка часового пояса по умолчанию.

4.1.9.1. php_value date.timezone "Europe/Samara"

4.2. PHP

4.2.1. Запись в файл

4.2.1.1. $emailsubscribers = './emailsubscribers.txt'; $fo = fopen($emailsubscribers, "a"); // a = add fwrite( $fo, ('new text, ') ); // new text, fclose($fo);

4.2.2. Подбор окончания слова

4.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];

4.2.3. Дебагинг/скрытая разработка

4.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>

4.2.4. File

4.2.4.1. Включение файла PHP в строку при помощи буферизации.

4.2.4.2. Получение имен файлов и каталогов в заданной дирректории.

4.2.5. Преобразования

4.2.5.1. Числа

4.2.5.1.1. PHP преобразование числа к удобному формату (денежному).

4.2.5.2. Строки

4.2.5.2.1. Преобразование строки описывающей цвет из RGB формата в HEX. View decToHex.php

4.2.5.2.2. Функция мультирасчленения строки в массив по любому набору вхождений подстрок.

4.2.6. REGEX

4.2.6.1. Регулярное выражение для валидации номера телефона:

4.2.6.1.1. ^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{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

4.2.6.2. текст заменить

4.2.6.2.1. $res = preg_replace("/мл/", "ml", $content);

4.2.7. JSON

4.2.7.1. Преобразование в json объект.

4.2.7.1.1. json_encode($php_var);

4.2.7.2. Преобразование в php переменную

4.2.7.2.1. json_decode($json_string);

4.3. Mail

4.3.1. Repo: phpmailer_example

4.3.2. mail script - отправка формы с сайта

4.3.3. Тест отправки почты с формы с сайта.

5. CMS

5.1. Wordpress

5.1.1. Получить путь к теме wordpress в js файле.

5.1.2. Технические требования интеграции верстки

5.1.2.1. Отсутствие ошибок в работе сайта, ошибок в консоли браузера; Максимально автоматизировать и упростить работу с контентом. Использовать ACF (желательно) или CFS, делить их на группы/вкладки, использовать полезные пояснения для редакторов. Возможно использование Post Snippets; Использовать CPT для различного рода записей (например, услуги, акции, каталог); По возможности, не допускать использования HTML в редакторе для наполнения страниц контент-менеджером; Не использовать Page Builders; Для контактных форм использовать CF7; Для таблиц использовать TablePress; Адекватная работа ЧПУ. При необходимости можно использовать Custom Permalinks; Не нагружать сайт лишними плагинами. Использовать только то, что необходимо.

5.2. MODx

5.2.1. MODx_FormIt

5.2.2. Сниппет и чанк для MODx для отображения класса 'active' на активной странице.

5.2.3. https://gist.github.com/artemijeka/853e45c73ac23382d7aa6ddaac614083Пример поля MIGX в MODx Revolutoin View modx-migx.js

5.3. Bitrix

5.3.1. Debug

5.3.1.1. code

5.3.2. login

5.3.2.1. без пароля и логина

5.3.2.1.1. <? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php"); global $USER; $USER->Authorize(1); LocalRedirect(“/bitrix/admin/”); ?>

5.3.3. Birtix Подключение разных файлов в зависимости от пути.

5.3.4. Bitrix убрать $_GET['success'] из url и скрыть popup с фразой об успехе.

5.3.5. Bitrix. Вставка редактируемой области.

5.3.6. Редирект

5.3.6.1. Bitrix - редирект по повторному нажатию на кнопку.

5.3.7. Вывод информации из админки

5.3.7.1. Вывод элементов инфоблока в вёрстку

5.3.8. Mail

5.3.8.1. Васянская форма для битрикс.

5.3.8.2. Отправка элементов корзины на почту в D7.

5.3.8.2.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);

5.3.8.3. Bitrix. Добавление своего макроса #PHONE# к шаблону письма.

5.3.9. Forms

5.3.9.1. хороший пример формы обратной связи на технолайф 13.07.2020

5.3.10. Добавление custom свойства инфоблока в $arResult

5.3.11. SEO

5.3.11.1. Section

5.3.11.1.1. $SECTION_ID = $sec['ID']; $IBLOCK_ID = 11; $ipropSectionValues = new \Bitrix\Iblock\InheritedProperty\SectionValues($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']); }

5.3.11.2. Element

5.3.11.2.1. $ipropValues = new \Bitrix\Iblock\InheritedProperty\ElementValues(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']); }

5.3.12. CIBlockElement::GetList()

5.3.12.1. GetProperties()

5.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']; }

5.3.12.2. GetFields()

5.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']; }

5.4. Админка для статичного сайта

5.4.1. Textolite

5.5. Shop-Script (webasyst)

6. Linux

6.1. Localhost

6.1.1. Lampp пример создания локального домена (Linux).

6.2. Terminal

6.2.1. .bashrc aliases collection

6.3. xneur

6.3.1. settings

6.4. Права на файлы

6.4.1. Задать

6.4.1.1. chmod ugo+-rwx ./path/to/file

6.4.1.1.1. u - user

6.4.1.1.2. g - group

6.4.1.1.3. o - other

6.4.1.1.4. + добавить флаг

6.4.1.1.5. - убрать флаг

6.4.1.1.6. r - чтение

6.4.1.1.7. w - запись

6.4.1.1.8. x - исполнение

6.4.1.1.9. последний атрибут - путь к файлу

6.4.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)

6.4.2. Посмотреть

6.4.2.1. ls -l ./path

6.5. Локальный сервер

6.5.1. Инструкция по установке локального сервера xampp на ubuntu и macOS хорошая тут.

6.5.2. LAMPP

6.5.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> # (Можно в пути указать любой путь на компьютере) - - - - - - - - - - - - - - - - - - - - Если доступ все еще не доступен: Открыть права на нужные папки И ПРОСЛЕДИТЬ ЧТОБЫ НА ВСЕМ ПУТИ БЫЛИ ПРАВИЛЬНЫЕ ПРАВА! - - - - - - - - - - - - - - - - - - - -

6.5.2.2. Если apache не запускается: sudo service apache2 status sudo service apache2 stop - - - - - - - - - - - - - - - - - - - -

6.5.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 - - - - - - - - - - - - - - - - - - - -

6.5.2.4. ПОМЕНЯТЬ ROOT ПАРОЛЬ В ФАЙЛЕ ЕСЛИ НАДО

6.5.2.4.1. /opt/lampp/phpmyadmin/config.inc.php

6.6. ПРОБЛЕМЫ И ИХ РЕШЕНИЯ

6.6.1. Проблема загрузки

6.6.1.1. Failed to start Load Kernel Modules

6.6.1.2. Или

6.6.1.3. Time out waiting for device dev-disk-by\...

6.6.1.4. Надо залезть в /etc/fstab системы и закоментить подозрительные разделы или uuid у них поправить.

6.6.1.4.1. чтобы узнать uuid каждого раздела

6.7. Создание установочной флешки

6.7.1. linux

6.7.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

6.7.1.1.1. X это буква раздела без номера!

6.7.2. windows

6.7.2.1. slacka/WoeUSB

6.7.2.1.1. sudo woeusb --target-filesystem NTFS --device /media/artem/other/os/windows/ru_windows_10_enterprise_ltsc_2019_x64_dvd_78e7853a.iso /dev/sdd

6.8. Оптимизация изображений:

6.8.1. Сжатие изображений:

6.8.1.1. jpg

6.8.1.1.1. jpegoptim --strip-all --max=91 *.jpg

6.8.1.2. png

6.8.1.2.1. optipng -o=4 image.png

6.8.2. Изменение высоты изображений:

6.8.2.1. mogrify -geometry x1280 *.jpg && mogrify -geometry x1280 *.JPG

6.8.3. Повернуть изображения на 90 гр

6.8.3.1. mogrify -rotate 90 ./*

6.8.4. Изменение ширины изображений:

6.8.4.1. mogrify -geometry 700x *.jpg

6.9. Падение интернета после ждущего режима.

6.9.1. Sander, по выходу из сна - дай ему

6.9.1.1. sudo systemctl restart NetworkManager.service

6.10. Запуск программ

6.10.1. Интерпритируемые программы

6.10.1.1. интерпретатор /путь/к/файлу/программы параметры

6.10.1.1.1. python hellowrld.py

6.10.1.1.2. java -jar program.jar

6.10.2. Пример файл xampp.desktop в /usr/share/applications

6.10.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;

6.10.3. Создание ярлыка запуска

6.10.3.1. ASD

6.11. Переименование группы файлов

6.11.1. rename 's/А/Б/g' *

6.11.1.1. где А - любое количество каких-то символов

6.11.1.2. Б - любое кол-во каких-то символов на которые надо поменять

6.12. Зависшее графическое окружение

6.12.1. ctrl+alt+f1

6.12.1.1. sudo service lightdm restart

6.13. Отмонтирование каталога

6.13.1. sudo umount /path/to/catalog

6.14. alias Создание короткой команды "псевдоним" для длинной команды.

6.14.1. alias apt-get="sudo apt-get"

6.14.2. Чтобы работала после перезагрузки нужно ее прописать в конец файла:

6.14.2.1. sudo gedit ~/.bashrc

6.14.2.1.1. Обновить .bashrc

6.14.2.2. Мои alias

6.14.2.2.1. alias beget-start="sshfs [email protected]: ~/Beget -o reconnect,ServerAliveInterval=15,ServerAliveCountMax=3,auto_cache,compression=no" alias beget-stop="fusermount -u ~/Beget" alias beget-ssh="ssh [email protected]" alias lampp="sudo /opt/lampp/lampp start" alias lampp-start="sudo /opt/lampp/lampp start" alias lampp-stop="sudo /opt/lampp/lampp stop" alias lampp-status="sudo /opt/lampp/lampp status" alias lampp-restart="sudo /opt/lampp/lampp restart"

6.15. Копирование

6.15.1. Например нужно скопировать ссылку на sublime в другое место чтобы он отображался в меню запуск по умолчанию

6.15.1.1. # Копируем ярлык cp /usr/share/applications/sublime_text.desktop ~/.local/share/applications/sublime_text.desktop # Обновляем базу данных ярлыков sudo update-desktop-database

6.16. Смена пароля

6.16.1. sudo passwd <имя пользователя>

6.17. Редакторы кода

6.17.1. PhpStorm

6.17.1.1. Debuger

6.18. Прилинковка хостинга к папке по SSH

6.18.1. Соединение с папкой сервера по sshfs:

6.18.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

6.18.2. Отсоединение:

6.18.2.1. fusermount -u ~/beget

6.19. SSH connect

6.19.1. ssh [email protected]

6.20. Скачивание сайта

6.20.1. Зайти в дирректорию куда над скачать

6.20.1.1. wget -r

6.20.1.2. А лучше

6.20.1.2.1. 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

6.20.1.2.2. wget -r -k -l 7 -p -E -nc http://site.com/

6.21. Работа с удаленным серверами через Sublime Text 3 и Git с автозагрузкой изменений!

6.21.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)) Например для удаленной работы с локального посМылая изменения на хостинг и регистрируя изменения в гит.

7. Facebook OpenGraph

8. head

9. global .gitignor

10. alt и title

10.1. Для атрибут alt «прилагательное + ключевая фраза».

10.1.1. Конечно, “прилагательное” может быть заменено на другую часть речи и вставлено за ключом. Но в любом случае, например, “двухсловник” будет разбавлен третьим словом. Даже если к ключу будет добавлена просто порядковый номер (ключ 1, ключ 2…), это будет лучше. чем просто повторяющийся из раза в раз ключ.

10.2. Для атрибута title рекомендовано расширенное описание «прилагательное + ключ + дополнение».

10.2.1. Оно должно быть длиннее. Можно использовать ( а некоторые специалисты считаю – нужно) слова “фото”, “иллюстрация”. Это как бы подсказка для робота…

11. Ближайшие возможные действия пользователя должны быть проинициализированы наиближайшем образом. Текущее состояние пользователя должно быть как можно ближе к корню программы и функции должны быть в ближайшем доступе.

11.1. Корень программы (окружение пользователя)

11.1.1. Функции

11.1.2. События

11.1.3. Интефейс ближайший

12. Объектно ориентированный стиль

12.1. Любая сущность является отдельным объектом и правится только в одном месте.

13. GIT

14. Транслит для URL (cyrillic -> latin)

14.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

15. SEO

16. Контроль версий

17. Теория

18. Фреймворки