См. первые две части: Решение и планирование и Создание сайта.
Смотрите оригинальный пост на моем сайте: Портфолио: Извлеченные уроки
Как и в случае с любым другим приложением, я многому научился, а также укрепил некоторые прошлые практики. Преимущество создания этого приложения только для меня без каких-либо сроков заключалось в том, что я смог поэкспериментировать с настройками и конфигурациями, чтобы полностью понять, зачем они нужны. Иногда вы можете прочитать документацию, кивнуть и сказать, что понимаете, но на самом деле это не щелкнет, пока вы не потратите 2 часа на отладку неописуемой ошибки консоли, на которую даже глубины StackOverflow не могут дать вам четкого ответа.
Изучено: организация CSS
Это было самое сложное приложение, которое я создал, где я сам писал CSS, без Bootstrap или MDL. Я хотел чистый, последовательный дизайн. Во многом это побудило меня написать собственную почтовую форму вместо использования Google Forms. Мне все еще нужно добавить настройки для лучшего масштабирования на мобильных устройствах, но я горжусь тем, как это получилось. Я свел к минимуму повторение, поместив любые общие настройки в файл `app.css` и изменяя только при необходимости в CSS компонента (странице навыков даже не требовался собственный файл css).
Это приложение помогло мне понять, как работает сетка, и оно действительно помогло мне понять, как на самом деле функционируют отображение и позиция и как они связаны со всеми движущимися частями веб-страницы. Меня больше всего устраивает страница проектов. Оттенок над ссылкой на изображение проекта — небольшая функция, но это один из тех моментов, когда я реализовал то, чем всегда восхищался на других сайтах. Это также более сложно, чем то, что я изначально разработал для страницы:
Я научился относиться к каркасу с долей скептицизма и доверять своим ощущениям в отношении окончательного вида. Помимо функции наведения, для заголовка и описаний, мне пришлось копаться в том, как «гибкость» влияет на высоту и ширину, относительное позиционирование. Это был разочаровывающий, но полезный опыт.
Улучшено: порядок файла Express имеет значение
В данном случае это файл `/src/server/index.js`. Это должно иметь смысл. JavaScript является синхронным. Ваш файл Express будет выполняться в том порядке, в котором вы их записываете. Самое важное, что было усилено, — это инициировать ваши маршруты последними, чтобы все необходимые настройки были уже на месте до того, как ваши маршруты будут вызваны.
Более того, инициируйте заданные маршруты перед подстановочным знаком:
routes.init(app); //initiating all routes in
app.use(express.static(dir));
app.use(express.static(path.join(__dirname, ‘..’, ‘..’, dir))); //telling Node where all the frontend pages are
//Wildcard to tell Node to load any frontend routes (aka: the ones not specified in routes file or in static)
app.get(‘/*’, function(req, res) {
res.sendFile(path.join(__dirname, ‘..’, ‘..’, `/${dir}/index.html`));
});
Помещение пути с подстановочным знаком перед вашими маршрутами приведет к тому, что любой вызов API за пределами «/» вернет файл `index.html`. Если вы зарегистрируете свой ответ API, вы увидите HTML-файл в своей консоли. Подстановочный знак необходим, если вы хотите перейти непосредственно к маршрутам вашего внешнего интерфейса, которые не являются домашней страницей, поэтому Node знает, что нужно обслуживать ваши страницы. Однако, если это произошло до инициации ваших маршрутов, он примет любой из ваших маршрутов API в качестве подстановочных знаков и будет обслуживать html-файл вместо данных, которые вы пытаетесь получить. Просто будьте внимательны при настройке файла Express.
Усиление: не забудьте перенести базу данных Heroku
Довольно очевидный — этот шаг легко пропустить, поскольку вы уже активно поддерживаете свою локальную базу данных, и приведенные ошибки не ясно, что он не подключается к базе данных.
Просто помните, что `heroku run sequenceize db:migrate` может избавить вас от головной боли примерно на 30 минут в будущем.
Изучено: упорядочить TEXT против STRING
Раньше при работе с Sequelize я без особых раздумий использовал только `Sequelize.STRING`. Ничто из того, что я создал, не требовало хранения больших кусков текста, и я никогда не сталкивался с какими-либо проблемами. Когда я пошел, чтобы опубликовать свой первый пост в блоге, я получил сообщение об ошибке, что лимит `STRING` был превышен. Я заглянул в Документацию по типам данных Sequelize и быстро узнал, что ограничение по умолчанию составляет 255 символов. Но есть возможность увеличить это число до 1234, просто используя `Sequelize.STRING(1234)`. Наверняка я не так много пишу, верно? Неправильный. Символы складываются быстро, особенно в разметке.
Ну и что дальше по списку? `ТЕКСТ`. Какое описание? «Текстовый столбец неограниченной длины». ОТЛИЧНО
После всего этого
С этим было очень весело играть, и я все еще учусь маленьким и большим вещам здесь и там. Я рассмотрел основные вещи, которые я изучил в «Создание сайта», такие как конфигурация веб-пакета и более подробная конфигурация корса, но это были мелочи, которые помогут мне создавать приложения умнее и быстрее в будущем. Я уже был поражен тем, как быстро я смог выполнить первое развертывание этого сайта по сравнению с одним из моих первых полнофункциональных приложений (3 дня против 2,5 недель). Я рад использовать эти извлеченные уроки и улучшать FitFeel и будущие приложения.
