A programmer: HTML/CSS

UPD к предыдущему посту: Уж не знаю почему, но там все заработало, как надо, без внесения каких-либо изменений - на самом деле, скорее всего, я просто не так проверял. Но это странно, потому что, насколько я смог выяснить, - работать и не должно было, поскольку функция res должна срабатывать только один раз, а значит послать можно или на фронтенд, или в базу. Но в итоге res.render(); посылает, и туда, и туда. Разобраться с этим надо бы, но пока отложу на потом. К тому же задача вытащить последнюю введенную запись из базы тоже не получилась у меня, потому что идентификатор генерируется только в базе и мне он неизвестен, а как вставлять поле даты/времени, я пока не выснил - значит, тоже не потом. Кстати, если кто-то знает ответы на эти вопросы, пожалуйста, пишите.

Я несколько переживаю, что не сделал полноценный CRUD для работы с базой данных. Но есть два "но". Во-первых, если посмотреть то задание, которое я себе сформулировал, то там об этом речь и не идет: "Задача приложения - показывать пользователю страницу с формой и собирать введенные им данные в базу данных". То есть формально я задачу выполнил, и все в порядке. А во-вторых, я все-таки хочу это сделать, но так, чтобы все комманды сразу посылались с более-менее вменяемого фронтенда - поля-кнопочки и все такое. А для этого надо вернуться к верстке. Я, конечно, 10 лет назад заканчивал онлайн-курсы по HTML/CSS, но никакой практики с тех пор практически не имел, и основательно подзабыл почти все, что знал. Поэтому сегодняшний пост об основах HTML/CSS.

HTML (HyperText Markup Language) - это, собственно не язык, а разметка документа, которая говорит браузеру, как именно надо отображать его содержание. Если посмотреть на HTML-код документа, мы увидим, что это самое содержание помещается между угловыми скобками, внутри которых и находится тэги со всякими разными описаниями. Так, допустим, этот абзац заключен в тэг, в котором записаны параметры оформления абзаца:

Для удобства повторяющееся оформление выносят в отдельный css-файл (CSS - Cascading Style Sheets), ссылку на который просто вставляют в итоговый html-документ. Вот таким образом:

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

CSS-файл выглядит приблизительно так:

То есть это набор блоков, обозначенных фигурными скобками. Перед блоком стоит селектор (идентификатор элемента), а внутри него - описание стиля для этого элемента посредством указания свойства и его значения.

С помошью селекторов мы ссылаемся на соответствующие тэги. Или внутри тэгов указывать собственные идентификаторы элементов или классов элементов, и ссылаться уже не них. Например:

id="header" в html-документе, значит #header {} - в css-файле, или

class="header" в html-документе, значит .header {} - в css-файле.

Еще один пример вот:

Здесь показано, как еще можно указывать селекторы (* означает применить глобально ко всему документу).

Ну и напоследок. Существуют отдельные разработанные библиотеки стилей, которые просто можно подключать в свой документ. Один из самый популярных - Bootstrap

Bootstrap

Достаточно подключить библиотеку так, как мы подключали отдельный файл, и потом можно просто копипэйстить куски кода, отвечающие за всякие красивости, или кнопочки, или формы или еще что-то, в свой документ.

Впечатления дня #1

Вчера в тот период времени, в который обещал не сидеть за компьютером (а как бы укладывать Дашу спать), смотрел (слушал) мотивирующие и развивающие видео. Кое-что и Даша послушала, что тоже хорошо.

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

В другом речь шла о том, что в зрелом возрасте неплохо начинать бизнес или вообще что-то новое. Жалобы на старость и “отсталость от времени” нерелевантны, как минимум, по двум причинам. Во-первых, сейчас люди живут дольше, и если тебе сейчас 40-50 лет, то впереди у тебя еще около 30-40. Если из твоего нынешнего возраста вычесть малосознательное детство, то окажется, что впереди у тебя едва ли не большая часть сознательной жизни - ты что, собираешься все это время “доживать”? Звучит нелепо. Во-вторых, в отличие от тех молодых, у кого в руках только технические навыки жизни в современном мире, которые действительно являются преимуществом, у тебя преимущество другого рода - опыт, который им просто негде взять. В то время как техническим навыкам ты можешь научиться. Отсюда вывод - не ной и иди учись! И сделай, наконец, что-нибудь стоящее в своей жизни.

Третье видео - интервью с Брайаном Трейси, весьма известное. И ключевой совет там такой: “Если ты не знаешь, как добиться того, чего ты хочешь, спроси у того, кто уже добился этого, как он достиг успеха”. Ну а дальше - следуй совету и повторяй его действия. Правильные причины создадут правильный результат.

A programmer: JavaScript #10

О главном - Часть II (не последняя).

Как это часто бывает, не всё проходит гладко. Я изначально хотел сделать CRUD (Create Read Update Delete - методы работы с базой данных) в отдельном файле, но не получилось быстро найти ответ, как это сделать (поищу позже), поэтому слил всё в один файл. Заодно написал и ввод в базу данных (попутно уточнив новый способ образения к коллекции - стр. 18 - спасибо stackoverflow).

Но оказалось, что введенные данные на страницу выводятся, как и раньше, а в базу не добавляются. Изучение вопроса показало, что поскольку в JavaScript'e всё происходит асинхронно (в противном случае надо специально настраивать и проч.), то нельзя посылать два разных ответа, а у меня именно так и было:

• в одном случае я посылал данные на фронтенд,
• в другом - в базу данных.

Пришлось пока оставить что-то одно, я оставил базу данных. Следующая ощибка вылетела с сообщением, смысл которого сводился к тому, что закрыть базу данных надо только один раз, а не два, что я и сделал. В итоге файл получил следующий вид (я специально не показываю здесь GET-запрос для экономии места):

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

Но как же всё-таки вывести введенные данные на веб-страницу? Снова-таки, быстрого решения я не нашел, поэтому пойду немного в обход: возьму-ка я эти данные из базы данных! Но об этом - в следующий раз...

A programmer: JavaScript #9

Сегодня речь, наконец, пойдет о главном - о связи фронтенда с базой данных (Часть I). В написании фронтенда мы остановились на вводе логина и пароля в форму на сайте и их выводе в консоль. В написании функционала для работы с базой данных мы остановились на вводе данных в нее вручную. Осталось это соединить. Пока что мы сделали так, чтобы запускались оба сервера - вебсервер и сервер базы данных. Что дальше?

Для начала решил подправить сам файл страницы. Во-первых, чтоб чуть более красивенько, а во-вторых, чтобы введенные емйл и пароль показывались тут же, на этой же странице. Прекрасная идея - и как удобно! Но возник вопрос: что показывать, когда данные ещё не введены в форму, точнее - как?

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

var data = {email: 'your email', pass: 'your password'}; - это и есть наш "промежуточный" файл.

На странице - вот так:

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

A programmer: JavaScript #8

И ещё одна маленькая, но важная добавка - воспользовавшись хорошим советом, я залил свой проект на GitHub: https://github.com/OleksiyMusiyezdov/sveta

Как это делать? Вот так:

git init - создаём репозиторий (локальный), предварительно создав соответствующий на https://github.com

git add . - добавляем туда все файлы проекта (надо находиться в папке проекта) для отслеживания

git commit -m "Initial commit" - закрепляем изменения

git remote add origin https://github.com/OleksiyMusiyezdov/sveta - подключаемся к удалённому репозиторию

git push -u origin master - заливаем проект в удалённый репозиторий

А подробнее, например, здесь (три маленьких видео): Git - для новичков

A programmer: JavaScript #7

Уже надоело ходить вокруг да около и связать-таки базу данных с фронтендом, но все-таки сегодня ещё об одной важной (для себя, по крайней мере) вещи должен сказать. Речь о подключении собственных модулей. Как написано в туториалах и прочем (точнее, как я понял сначала), для того, чтобы модуль подключался с помощью require

var database = require('./database');

надо его код экспортировать с помощью

module.exports = () => { код };

Оказывается, не всегда, а только тогда, когда собираешься этот код потом вызывать как функцию. В противном случае - то есть, чтобы код подключаемого модуля просто отрабатывался при его подключении - делать этого не надо. Более того, если так сделать, то код внутри module.exports отрабатываться не будет, а будет ждать отдельного вызова (через функцию - в нашем случае: database(); ).

Собственно, с этим всем я разбирался потому, что хотел разнести функционал по разным модулям. В итоге получилость так:

Это главный файл, в котором подключается модуль (строка 3).

Это модуль. Пока всё.