Начать. Это бесплатно
или регистрация c помощью Вашего email-адреса
Rocket clouds
ready_code создатель Mind Map: ready_code

1. Front

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

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

1.2. CSS

1.2.1. Font-face

1.2.2. Gradient generator

1.3. PSD Assets менеджеры

1.3.1. psdetch

1.3.2. markupeasy

1.4. HTML

1.4.1. Фишки

1.4.1.1. Maps

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

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

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

1.4.2. Семантика

1.4.2.1. Семантика

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

1.5.1. IE

1.5.1.1. Grid

1.5.1.1.1. Правила

1.5.1.1.2. Guid

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

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

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

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

1.5.2.1. Modernizr

1.5.3. Chrome

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

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

1.5.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.5.4.2. <picture>и <img srcset>предпочтительны для загрузки реагирующих изображения чем @media

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

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

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

1.6.2.1. скрин гугл

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

1.6.3.1. скрин гугл

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

1.6.4.1. aFarkas/lazysizes

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

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

1.6.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.6.4.2. Для веб-версии этой книги я связал Lazysizes (хотя вы можете использовать любую альтернативу) с Cloudinary для адаптивных изображений по требованию. Это дало мне свободу экспериментировать с различными значениями масштаба, качества, формата, а также с возможностью постепенной загрузки с минимальными усилиями:

1.6.4.3. Lazy-load

1.6.4.3.1. Lazy Load img video audio iframe

1.6.4.3.2. еще

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

1.6.5.1. Optimizing Content Efficiency  |  Web Fundamentals  |  Google Developers

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

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

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

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

1.6.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.6.6.4. <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script">

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

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

1.7.1. Видео

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

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

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

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

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

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

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

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

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

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

1.9.1.5. webp

1.9.1.5.1. WebPconv | WebP File Converter | Romeolight

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

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

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

1.9.2. favicon

1.9.2.1. check&generate

1.9.3. .htaccess

1.9.3.1. webp

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

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

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

1.9.4.3. Automating image optimization  |  Web Fundamentals  |  Google Developers

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

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

1.9.6. GIF->MP4

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

1.9.7. SVG

1.9.7.1. SVG оптимизация

1.9.7.1.1. SVGOMG - SVGO's Missing GUIMenu

1.9.7.2. Выделение областей изображения image map

1.9.7.2.1. Видео урок

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

1.10.1. Опен граф.

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

1.10.3. Repo: json schema.org

1.11. UI

1.11.1. Прелоадер

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

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

1.11.1.2.1. Прелоадер с высчитыванием процента загрузки

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

1.11.1.3.1. gsit

1.11.1.3.2. codepen

1.12. JS

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

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

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

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

1.12.4. Слайдер

1.12.4.1. slick

1.12.4.1.1. Docs

1.12.4.1.2. Slick on hover - stop on click

1.12.5. Menu

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

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

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

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

1.12.7.1. gist_link

1.12.8. Ссылки

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

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

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

1.12.9.1. Ядро

1.12.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.12.9.2. Обработка пользовательского ввода

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

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

2. Back

2.1. .htaccess

2.1.1. Правила

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

2.2. PHP

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

2.2.1.1. Числа

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

2.2.1.2. Строки

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

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

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

2.2.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.2.3. File

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

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

2.3. Mail

2.3.1. Repo: phpmailer_example

2.3.2. Отправка формы с сайта на почту.

2.3.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. Mail

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

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

3.3.6.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.7. Добавление custom свойства инфоблока в $arResult

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

5. РАСКИДАТЬ