сайтодельство
- микроразметки
- 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://www.w3schools.com/css/css_navbar_horizontal.asp - навигационная панелька
w3c-schools
Подборочка ссылок, которую я насохраняла себе при каком-то предыдущем забеге в обновление представлений о html+css. Вообще, резоннее рассовать по этой страничке по темам, но пусть пока так.
- http://www.w3schools-fa.ir/w3css/w3css_sidebar.html - сайдбар
- https://www.w3schools.com/css/css3_flexbox.asp - новый для меня материал про флексбоксы и их выравнивание
- https://www.w3schools.com/w3css/w3css_buttons.asp - кнопочге в w3.css
- https://www.w3schools.com/default.asp - туториалы и прочие плюшки w3
- https://www.w3schools.com/html/default.asp - html-туториал
- https://www.w3schools.com/css/default.asp - css-туториал
- https://www.w3schools.com/css/css_rwd_mediaqueries.asp - оттеле про респонсив дезигн
- https://www.w3schools.com/w3css/w3css_templates.asp - css-темплейты.
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
- https://www.w3schools.com/w3css/w3css_references.asp - референс к css-ке.
- https://www.w3schools.com/cssref/css_units.asp - единицы измерения css
- https://www.w3schools.com/howto/default.asp - хаутушки
- https://www.w3schools.com/icons/default.asp - иконки
- https://www.w3schools.com/icons/icons_reference.asp - мегасписком
- https://www.w3schools.com/howto/howto_google_fonts.asp - гуглфонты
- https://www.w3schools.com/cssref/css_entities.asp спецсимволы
- https://www.w3schools.com/w3css/w3css_sidebar.asp - сайдбар по кнопочке и пробовалка к нему.
- https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_overall -
- https://www.quanzhanketang.com/w3css/w3css_responsive.html- всякие делилки экрана, которые потом превращаются в одну колонку на узком экране.
- http://www.w3schools-fa.ir/css/css3_gradients.html - css-градиенты
Яндеховости
- 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%)
css - выравнивание
To horizontally center a block element (like <div>), use margin: auto;
https://www.w3schools.com/css/css_align.asp - про горизонтальное и вертикальное выравнивание, в том числе отдельно про картинки.
The clearfix Hack
Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the "clearfix hack" to fix this (see example below).
Then we can add the clearfix hack to the containing element to fix this problem:
.clearfix::after { content: ""; clear: both; display: table; }
картинки для сайта
- 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
адреса, на которые ничего не надо класть, я полагаю
Потому что кто-то туда стучится, несмотря на то, что там вообще ничего нет и не было.
/ads.txt /wp-content/plugins/wpputty/wpputty.php /wp-content/plugins/dos2unix/dos2unix.php /wp-content/plugins/wpyii2/wpyii2.php /wp-content/plugins/wpzip/wpzip.php /s/8383e26313e2633323e27383/_/ /new/ /.DS_Store /backup/ /temp/ /wp-includes/wlwmanifest.xml /config.json /ecp/Current/exporttool/microsoft.exchange.ediscovery.exporttool.application /wordpress/ /api/search /info.php /old/ /_ignition/health-check/ /wp/ /about /debug/default/view /public/_ignition/health-check/ /blog/ /login.action /_ignition/execute-solution /test/ /telescope/requests /v2/_catalog /wp-22.php /home /apple-touch-icon-precomposed.png //wp-includes/wlwmanifest.xml /wp-config.php-backup /bc /alfacgiapi/perl.alfa //wp2/wp-includes/wlwmanifest.xml //news/wp-includes/wlwmanifest.xml //web/wp-includes/wlwmanifest.xml /ALFA_DATA/alfacgiapi/perl.alfa //test/wp-includes/wlwmanifest.xml //media/wp-includes/wlwmanifest.xml /wp //blog/wp-includes/wlwmanifest.xml //site/wp-includes/wlwmanifest.xml /backup /wordpress /wordpress/wp-admin/setup-config.php //2018/wp-includes/wlwmanifest.xml //wordpress/wp-includes/wlwmanifest.xml /adminer-4.2.4-mysql-en.php //wp/wp-includes/wlwmanifest.xml /old/wp-admin/setup-config.php /old /.aws/credentials //cms/wp-includes/wlwmanifest.xml /apple-touch-icon.png /test_404_page/ /wxuxtjzv.php /main /1nESR59GdXi0 //2019/wp-includes/wlwmanifest.xml //wp1/wp-includes/wlwmanifest.xml //website/wp-includes/wlwmanifest.xml /new /bk //shop/wp-includes/wlwmanifest.xml //sito/wp-includes/wlwmanifest.xml /wp-plain.php