97 lines
2.7 KiB
Org Mode
97 lines
2.7 KiB
Org Mode
* Frontend Mentor - Results summary component solution
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: frontend-mentor---results-summary-component-solution
|
|
:END:
|
|
This is a solution to the
|
|
[[https://www.frontendmentor.io/challenges/results-summary-component-CE_K6s0maV][Results
|
|
summary component challenge on Frontend Mentor]]. Frontend Mentor
|
|
challenges help you improve your coding skills by building realistic
|
|
projects.
|
|
|
|
** Overview
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: overview
|
|
:END:
|
|
*** The challenge
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: the-challenge
|
|
:END:
|
|
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
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: screenshot
|
|
:END:
|
|
[[screenshot-mobile.png]]
|
|
[[screenshot-desktop.png]]
|
|
|
|
*** Links
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: links
|
|
:END:
|
|
- 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
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: my-process
|
|
:END:
|
|
*** Built with
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: built-with
|
|
:END:
|
|
- Semantic HTML5 markup
|
|
- TailwindCSS
|
|
- Flexbox
|
|
- CSS Grid
|
|
- Mobile-first workflow
|
|
- Go Server Side Rendering
|
|
- Nix for building and docker image creation
|
|
|
|
*** What I learned
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: what-i-learned
|
|
:END:
|
|
**** restarting server of file watch
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: restarting-server-of-file-watch
|
|
:END:
|
|
go doesn't have built in restart on file watch, and there are separate programs that do that
|
|
|
|
#+begin_src bash
|
|
wgo -verbose -file .go -file .gohtml -file tailwind.config.js tailwindcss -i ./input.css -o public/out.css :: go run main.go -p 1234
|
|
#+end_src
|
|
|
|
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
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: continued-development
|
|
:END:
|
|
Further things to learn: getting data from forms, general go things - coroutines, utilizing sqlite, embedding PocketBase
|
|
|
|
*** Useful resources
|
|
:PROPERTIES:
|
|
:CUSTOM_ID: useful-resources
|
|
:END:
|
|
- 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
|
|
|
|
|