Из чего же сделаны наши веб-сайты

Хранитиели древних знаний

  1. https://developer.mozilla.org/ru/docs/Web
  2. https://learn.javascript.ru/
  3. w3c
  4. https://webref.ru/
  5. https://webreff.ru/
  6. htmlbook
  7. hexlet (платно)
  8. http://shpargalkablog.ru/2013/09/html-cheat-sheet.html

HTML разметка

Все сайты написаны на HTML. Всякие переносы или ссылки передаются в браузер в виде <тегов>. Это такой способ разметки текста, что бы браузер знал что как разукрасить. На этом функции HTML - все, закончились. Главное соблюсти структуру

Для более удобного редактирования текстов используются графические редакторы текста. Но компьютер тупой, он ожидает получить HTML. Поэтому при сохранении статьи, программа редактор преобразовывает все в HTML.
Можно также писать с разметкой Markdown, которая является компромиссом между машинным и человеческим форматом восприятия. Почитай подробнее в статье

CSS стили

Каскадные таблицы стилей используются для описания внешнего вида веб-контента.

Про иерархию селекторов CSS и наследование

Про адаптивность

  1. CSS Grid https://tproger.ru/translations/how-css-flexbox-works/

Javascript сценарии

JavaScript — язык программирования, широко используемый для реализации взаимодействия пользователя с веб-сайтами и приложениями.

  1. https://puzzleweb.ru/javascript/element_innerhtml.php
  2. https://frontblog.ru/javascript-kak-poluchit-get-parametr.html
  3. https://learn.javascript.ru/searching-elements-dom
  4. AJAX https://developer.mozilla.org/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data

Фреймворки и библиотеки

Когда нужно ускорить решение повторяющихся задач - используют библиотеки с заранее написанными функциями. Когда вся работа состоит из решения массива задач и ловкому маневрированию между ними - используют фреймворки. Они позволяют не только расширнить границы возможностей разработчика, но и в значительной мере ограждают от ошибок. Некоторые крутые фреймворки можно даже считать отдельными языками программирования. Ниже кратко про вот это вот все.

Мне понравилось оформление дерева с помощью спецсимволов, решил скопировать

├── css/  
│   └── bootstrap.min.css.map  
└── bootstrap.min.js.map

Где хостить сайт

Когда сайт написан, его нужно разместить в интернете. Самый простой вариант - это загрузить свои файлы на сервер в дата центре. Как правило, хостинг сайта размером до 1ГБ обходится $1/месяц. Но иногда можно и бесплатно. Список проверенных хостеров вынесен на отдельную страницу: Хостинг CMS.

Как управлять сайтом

Для управления сайтом лучше всего использовать CMS - систему управления сайтом. Про их разновидности в статье Хостинг CMS.

Как правило, админка крутится на том же сервере, где и хранятся все данные сайта. Поэтому нередки случаи когда мы видим новость что десятки государственных сайтов были взломаны, а украденные данные продаются в дарквэбе. К сожалению, этого не избежать в системах, где требуется обработка данных “на лету”. Но для информационных сайтов отлично подходит статика. Тут даже CMS для статики подвезли. С их помощью можно конвертировать markdown в html. Подробнее в статье Хостинг CMS.

В чем кодить

Как писать что-то более сложное чем просто статьи? Например редактировать дизайн своего сайта. Для этого лучше всего использовать разные IDE. Они упростят рутинные задачи. Хотя и вряд ли помогут разобраться со сложностью кода. Гуглить все-равно придется.

Песочницы

Песочница - это место для игры с кодом. Его можно отлаживать, тестировать, сохранять и делиться. Ниже перечень известных мне сайтов-песочниц. Возможно некоторые ссылки ведут на какой либо пример - это хорошее демо ;-)

  1. JsFiddle - удобно
  2. Plunker - красиво
  3. JsBin
  4. CodePen
  5. w3school
  6. pagedemos
  7. codesandbox
  8. gitpod
  9. stackblitz
  10. https://developer.mozilla.org/ru/play

Совместное редактирование

Бьютифаеры, форматтеры

  1. FreeFormatter.com
  2. beautifier.io
  3. https://codebeautify.org/jsviewer
  4. https://html-cleaner.com/js/
  5. https://beautifytools.com/javascript-beautifier.php

Полезные сниппеты

Масштаб по экрану
Задать ширину страницы в соответствии с размером экрана.
Документация: ссылка

<meta name="viewport" content="width=device-width, initial-scale=1">

Отменить переход по нажатой ссылке
Как отменить переход по ссылке с обработчиком onclick?
Нужно что бы выполняемая функция вернула false.
Вот пример: Ссылка

<a href="#" onclick="alert('test');return(false);">ссылка</a>

Как задать базовый урл для всех относительных ссылок на странице?
Например для таких: “/index.html”, “file.png”

<!-- в заголовке HTML: -->
<base href="./">
<!-- или для jekyll: -->
<base href="%site.baseurl%">

Скачать ссылку принудительно
Скачать эту страницу как txt-файл: ссылка

<a href="#" download="test.html">ссылка</a>

Данные внутри ссылки
Протокол ссылки data:base64. Документация: ссылка.
Пример ссылки с протоколом data: ссылка

<a href="data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E" download="test2.html">ссылка</a>

Спойлеры

<details markdown="1">
<summary markdown="0">Сегодня в программе</summary>
* Table of Content  
{ : toc}
</details>

Встраивание медиа в страницу

<audio controls="" autoplay="" name="media"><source src="https://noasrv.caster.fm:10001/stream" type="audio/mpeg"></audio>

Таблица на всю ширину страницы
(смотри исходник страницы)

Софт Книги Музыка Кино

#wp
https://themeansar.com/free-themes/

Полезные ссылки

💬 Показать комментрарии
или открыть в telegram