Learning-HTMX/17-results-summary-component-go

• Frontend Mentor - Results summary component solution
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
      • restarting server of file watch
      • setting up static routes with default go web server
      • generating template and returning it as response of go route
      • embedding files into the binary for portability
      • using css variables to set custom colors in TailwindCSS
      • getting cli arguments in the go program
    • Continued development
    • Useful resources

Frontend Mentor - Results summary component solution

This is a solution to the Results summary component 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:

• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Bonus: Use the local JSON data to dynamically populate the content

Screenshot

Links

• Solution URL: https://github.com/efim/Learning-HTMX/tree/master/17-results-summary-component-go
• Live Site URL: https://efim-frontentmentor-results-summary-go.onrender.com/

My process

Built with

• Semantic HTML5 markup
• TailwindCSS
• Flexbox
• CSS Grid
• Mobile-first workflow
• Go Server Side Rendering
• Nix for building and docker image creation

What I learned

restarting server of file watch

go doesn't have built in restart on file watch, and there are separate programs that do that

wgo -verbose -file .go -file .gohtml -file tailwind.config.js tailwindcss -i ./input.css -o public/out.css :: go run main.go -p 1234

and doing tailwind first, because server embeds the output css file, so it's needed for the build step

setting up static routes with default go web server

generating template and returning it as response of go route

embedding files into the binary for portability

using css variables to set custom colors in TailwindCSS

getting cli arguments in the go program

Continued development

Further things to learn: getting data from forms, general go things - coroutines, utilizing sqlite, embedding PocketBase

Useful resources

• https://pkg.go.dev/text/template#example-Template-Block main go templating documentation
• https://pkg.go.dev/net/http main default server documentation
• https://nixos.wiki/wiki/Go - packaging Go
• https://golangdocs.com/command-line-arguments-in-golang command line arguments