Learning-HTMX/16-countries-page-from-api

• Frontend Mentor - REST Countries API with color theme switcher solution
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
      • polling download for 'infinite scroll'
      • having html 5 native autocomplete with <datalist> tag
      • inserting thymeleaf templates by css selector
      • building docker image
      • deploying to render.com
      • using browser history
    • Continued development
    • Useful resources

Frontend Mentor - REST Countries API with color theme switcher solution

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview

The challenge

Users should be able to:

• See all countries from the API on the homepage
• Search for a country using an input field
• Filter countries by region
• Click on a country to see more detailed information on a separate page
• Click through to the border countries on the detail page
• Toggle the color scheme between light and dark mode (optional)

Screenshot

Links

• Solution URL: https://github.com/efim/Learning-HTMX/tree/master/16-countries-page-from-api
• Live Site URL: https://efim-frontentmentor-countries-page.onrender.com/

My process

Built with

• Scala Server Side Rendering
• Htmx
• TailwindCSS
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

polling download for 'infinite scroll'

https://htmx.org/examples/infinite-scroll/

I've done almost same thing as example, but i'm appending additional empty div, that inserts responses instead of itself

this way i have one template fragment with repeater, and don't have to add hx attributes to the last one,

i just have separate fragment that i append to response which will trigger new load on enter view.

having html 5 native autocomplete with <datalist> tag

just server side rendering it with all country names is yay

inserting thymeleaf templates by css selector

https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#appendix-c-markup-selector-syntax

this way i can insert <script> tag from index page, without declaring it as a fragment, because i'll want is static anyway.

and can share 'dark mode' js code between pages

building docker image

First off: using nix docker tools, and sbt assembly to create 'uber jar' now 'nix build .#countries-page-image' builds an image and symlinks it to ./result

$ docker load < result loads the image

and it can be started $ docker image list $ docker run -d -p 9090:8080 <image-id>

deploying to render.com

need to auth the docker cli, then tag an image with my repository name $ docker login $ docker tag 141 efim1234/rock-paper-scissors:latest $ podman push localhost/efim1234/countries-page:latest docker.io/efim1234/countries-page:latest

and now render.com, when creating "new service" can find "efim1234/countries-page:latest" as public image and use it

using browser history

with either server side HX-Push -> "some-url" or hx-push-url="true" in the html side

so that url is put into address bar, and browser save the body into history

and now my website has forward and backward navigation

only bug - the 'filter by region' for some reason doesn't maintain the selected value

Continued development

In future project i'll probably want to lean and use go. For smaller binaries of the server, using PocketBase as embedded backend functions, and maybe having a better chances of just doing some real world small projects.

Useful resources

• htmx documentation and examples https://htmx.org/docs/#introduction
• thymeleaf documentation https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#introducing-thymeleaf
• TailwindCSS documentation https://tailwindcss.com/docs/installation
• heroicons: MIT licensed svg icons https://github.com/tailwindlabs/heroicons
• render.com for providing free hosting for services from docker images