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

1. Front

1.1. debug

1.1.1. code

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

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

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

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

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

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

1.4. UI

1.4.1. animations

1.4.1.1. Прелоадер

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

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

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

1.4.1.2. libs_of_animations

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

1.5. images

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

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

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

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

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

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

1.5.1.5. webp

1.5.1.5.1. WebPconv | WebP File Converter | Romeolight

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

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

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

1.5.2. favicon

1.5.2.1. check&generate

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

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

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

1.5.3.3. Automating image optimization  |  Web Fundamentals  |  Google Developers

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

1.5.4.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">

1.5.5. GIF->MP4

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

1.5.6. SVG

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

1.5.6.1.1. SVGOMG - SVGO's Missing GUIMenu

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

1.5.6.2.1. Видео урок

1.5.6.3. тени

1.5.6.3.1. gist

1.5.6.3.2. codepen

1.6. css-components

1.6.1. input

1.6.1.1. checkbox

1.6.1.1.1. checkmarker

1.6.2. __triangle

1.6.2.1. _right

1.6.3. Font-face

1.6.4. gradient

1.6.4.1. border

1.6.4.1.1. v1

1.6.4.1.2. v2

1.6.4.2. font (text)

1.6.4.3. Gradient generator

1.6.5. scss

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

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

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

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

1.8. html

1.8.1. Фишки

1.8.1.1. Maps

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

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

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

1.8.2. Семантика

1.8.2.1. Семантика

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

1.9.1. IE

1.9.1.1. Grid

1.9.1.1.1. Правила

1.9.1.1.2. Guid

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

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

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

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

1.9.2.1. Modernizr

1.9.3. Chrome

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

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

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

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

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

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

1.11. form

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

1.11.2. Маски

1.11.2.1. Телефон

1.11.2.2. Дата

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

1.11.2.2.2. Код

1.11.3. functions

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

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

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

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

1.12.2.1. скрин гугл

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

1.12.3.1. скрин гугл

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

1.12.4.1. aFarkas/lazysizes

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

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

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

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

1.12.4.3. Lazy-load

1.12.4.3.1. Lazy Load img video audio iframe

1.12.4.3.2. еще

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

1.12.5.1. Optimizing Content Efficiency  |  Web Fundamentals  |  Google Developers

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

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

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

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

1.12.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)">

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

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

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

1.13.1. Видео

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

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

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

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

1.15.1. Опен граф.

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

1.15.3. Repo: json schema.org

1.16. JS

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

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

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

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

1.16.4. Слайдер

1.16.4.1. slick

1.16.4.1.1. Docs

1.16.4.1.2. Slick on hover - stop on click

1.16.5. Menu

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

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

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

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

1.16.7.1. gist_link

1.16.8. Ссылки

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

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

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

1.16.9.1. Ядро

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

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

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

1.16.9.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++; };

1.16.10. Коллекции

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

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

2. Back

2.1. debug

2.1.1. code

2.2. .htaccess

2.2.1. Правила

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

2.2.2.1. RewriteRule ^vouchers /$1 [R=301,L]

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

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

2.2.5. Перенаправление с http к https

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

2.3. PHP

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

2.3.1.1. Числа

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

2.3.1.2. Строки

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

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

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

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

2.3.3. File

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

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

2.4. Mail

2.4.1. Repo: phpmailer_example

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

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

3. CMS

3.1. Wordpress

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

3.2. MODx

3.2.1. MODx_FormIt

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

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

3.3. Bitrix

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

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

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

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

3.3.5. Редирект

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

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

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

3.3.7. Mail

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

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

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

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

3.3.9. SEO

3.3.9.1. Section

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

3.3.9.2. Element

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

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

3.4.1. Textolite

4. Linux

4.1. Localhost

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

4.2. Terminal

4.2.1. .bashrc aliases collection

4.3. xneur

4.3.1. settings

5. РАСКИДАТЬ

6. Сделать offline desktop приложение из сайта.

7. SEO

7.1. OpenGraph

7.1.1. head

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

8.1. GIT

8.1.1. global .gitignor

9. Теория

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

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

9.1.1.1. Функции

9.1.1.2. События

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

10. WebMaster

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

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