07.08.2022
сайтодельство
- микроразметки
- indieweb
- static site generators
- оргмодное сайтодельство
- брать цвета
- w3cschools
- https://www.w3schools.com/cssref/pr_pos_vertical-align.asp - vertical-align: baseline|length/%|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
- Gimp умеет делать imagemap. Фильтры -> Web -> imagemap, там открывает специальное окошечко. Потом сохранить файл как map, открыть как текст и применять.
- рассылкоманагеры и сервисы - практически архивное
- картинки в инетах
- accessibility - это важно. Сохранять accessibility, проверять в текстовом браузере, а ещё круче - и на слух.
- https://baradusov.ru/posts/2018/accessibility-is-not-what-you-think - к слову, примерно о том же.
- https://html.spec.whatwg.org/multipage/ - html-стандарт
- https://www.w3.org/TR/2016/WD-html51-20160310/index.html
- http://www.w3.org/ - стандарты про всякие html, css и прочее.
- https://downforeveryoneorjustme.com/ - проверить, если сайт упал, у меня проблема или у сайта.
- https://mermaid-js.github.io/mermaid/#/ - разметка для диаграмм, юзаемая гитлабом
- https://github.com/mermaid-js/mermaid-live-editor - гитхаб редактора для нее, но невнятный
- sass
- http://sass-lang.com/documentation/file.SASS_REFERENCE.html
- Sass: Syntactically Awesome Style Sheets http://sass-lang.com/
- Sass: Документация на русском языке http://sass-scss.ru/
- Интересно, почему про less не сохраняла?
- https://gohugo.io/content-management/comments/#alternatives - что можно прикрутить для комментов. Дискус давно не вариант. С ещё одной стороны, а нужно ли вообще? indieweb вот вебменшны придумал, но на них я с ещё большим сомнением смотрю.
- https://xml-sitemaps.com
- https://icon-icons.com/ru/%D0%B7%D0%BD%D0%B0%D1%87%D0%BE%D0%BA/instagram-%D0%BE%D0%BA%D1%80%D1%83%D0%B3%D0%BB%D1%8B%D0%B9/61576 - иконки соцсетей для скачивания
- https://wackowiki.org/doc/Doc/%D0%A0%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9 - доки ваковики. Давно это было…
- https://habr.com/ru/post/649669/ - возможно, домены в зоне ru будут продлеваться через госуслуги.
- https://squarechip.github.io/timeline/ - сделать симпатичный таймлайн.
- https://github.com/jjuliano/org-simple-timeline - емаксово-оргмодная штука для удобства этого.
- css
- https://www.w3schools.com/css/css3_gradients.asp - Градиенты на бэкграунде.
- https://www.w3schools.com/css/css3_backgrounds.asp - несколько бэкграундов одного элемента и ещё немного занятностей
Яндеховости
- https://yandex.ru/forms/#dlya-biznesa
- https://yandex.ru/support/connect-forms/common/metrica.html - интеграция с метрикой
- https://yandex.ru/forms/feedback/ - интеграция с трекером
- https://yandex.ru/support/webmaster/recommendations/indexing.html
- https://metrika.yandex.ru/dashboard?group=day&period=week&id=50218198 - Яндекс.Метрика
- https://yandex.ru/support/connect-forms/common/notifications.html - что можно делать при помощи яндекс-форм.
- https://tech.yandex.ru/maps/staticapi/doc/1.x/dg/concepts/input_params-docpage/ - док по деланию яндекс-карты
flat file cms
- https://medevel.com/18-flat-file-cms-for-enterprise/ - случайно попавшийся обзор.
- https://www.libhunt.com/t/flat-file
- indieweb:
- https://indieweb.org/Grav - конкретная cms
- https://indieweb.org/content_management_system - вообще про cms оттуда же.
- https://indieweb.org/static_site_cms - cms, которые позволяют править файлы через веб-интерфейс. Но мне интересно немного не это :) Бывают ещё headless cms, но понятно, это выделяется по другому принципу.
Полезняшки
doctype-ы html 4, xhtml 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
html5 почти минимальный файл
Короткий doctype. Скриптам и стилям не надо лишних атрибутов. Кодировку тож попроще указывать.
<!DOCTYPE html>
<html lang=ru>
<head>
<meta charset="utf-8">
<title>Пример страницы</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>Страница на HTML5</p>
</body>
</html>
css, чёрный фон с прозрачностью 0.5
Пример позволяет ставить прозрачность, не задевая текст
background-color:rgba(0,0,0, 0.5);
font-display:swap, если надо грузить шрифты
How to avoid showing invisible text
The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers:
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}
The font-display API specifies how a font is displayed. swap tells the browser that text using the font should be displayed immediately using a system font. Once the custom font is ready, it replaces the system font. (See the Avoid invisible text during loading post for more information.)
https://web.dev/codelab-avoid-invisible-text - развитие темы.
гамбургер и тизер-енд
<!-- ☰--> <!-- TEASER_END: Читать дальше -->
подгонка контента под размер окна
main { min-height: calc(100vh - 2em); }
https://baradusov.ru/posts/2018/math-and-frontend - css-трюки в некотором количестве.
перенаправление - html meta
Откуда-то давно прихвачено
<!-- remove the following three lines to stop redirecting to the help page <meta http-equiv="refresh" content="1;url=/help/" /> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> -->
css-диагональка
background-image: linear-gradient(to top right, transparent 45%, #fff, transparent 54%)
картинки для сайта
- webp и отзывчивые картинки
- http://www.dejurka.ru/web-design/galleries-in-web-design/ - примеры оформления галерей
- https://html.spec.whatwg.org/multipage/images.html - разъяснение, как и почему устроена работа с картинками в html сейчас
- (https://web.dev/serve-responsive-images/ - в ту же степь, но больше инструкция)
- (https://web.dev/serve-images-webp/ - аналогично)
- https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element - описалово тега picture
- https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fflamenco.msk.ru%2Fmaria.html&hl=ru&tab=desktop - с чего я вообще заморочилась. Проверка скорости загрузки страницы о Марии c сайта школы.
- Некоторые конкретные с openclipart
Все посты