This repo hosts an 11ty starter project for receiving meaningful feedback (e.g. from coworkers, clients, etc).
Before continuing, you can check out a live demo of the repo here.
I've documented the motivation for this project in
src/about.md, but you can also see it below:
Click here if you dare...
Corporate style feedback processes can often be cold, invasive, and ultimately unfulfilling.
Typically feedback gets collected in the form of a performance review, which your manager, along with your manager's manger, and you manager's manager's manager (you get the point) have access to, even though it may be something you consider quite personal.
Further, the possibility that those in positions of power may read this feedback can influence both what the feedback-giver writes and how the feedback-receiver copes with the process as a whole. Reviews can cause anxiety, stress, and fear.
In a sentence: traditional reviews can be awful.
Giving and receiving feedback should be a sincere moment of mutual exchange, support, and learning! Both sides should feel as comfortable and safe as possible while fulfilling their parts.
This site in turn hopes to provide a quick-and-easy means of attracting and receiving sincere, helpful feedback. While ideally such a process would take place in person, for a lot of us that isn't an option. Using this site over a video call however could be a decent alternative.
The feedback process implemented on this site is inspired by an amazing post by Chelsea Troy titled Attracting Feedback, in which she goes into great detail explaining the benefits of using a goal-based feedback process.
If you haven't read this post yet, I highly encourage you to do so before the next time you plan on asking for feedback. Also note, if you're preparing to give feedback, Chelsea has written other in-depth posts that look at all sides of the feedback process.
Read on for more of the nitty-gritty. Otherwise, try deploying it to your own Netlify instance now!
Under the hood
First, let's give credit where credit is (majorly) due. I used:
- Ideas from Chelse Troy's post on Attracting Feedback.
- Code from Andy Bell's Eleventy course.
- Code from Josh Comeau's post on 3d buttons.
- SVGs from Teeny Icons.
- Generated background SVG from Components AI.
- Netlify for deploying, hosting, and form submission.
- Eleventy for everything else.
The templating system used is Nunjucks and the styles are written in SASS (with a Gulp task set up for compilation).
As such, any customizing beyond the goals themselves will most likely take place in either template (html) or scss files.
To set your own goals and self-evaluations, edit the
goals front matter in
If you don't want to provide self-evaluations, you can leave the
selfEval fields blank.
Also note that I make some promises to the feedback-giver in the list in
src/index.md. You should edit those if you don't also want to commit to them.
I made things simply as how I like them, knowing full well that I have an odd sense of taste and folks would def want to change the colors, sizing, etc.
To facilitate this, I declare up front some css variables in
src/scss/critical.scss that you can easily change.
For fonts, you can download whatever font set you want and place them in
src/fonts, which will automatically get passed through to
dist/fonts on build. Then, you can edit the
@font-face rulesets in
Similarly, for images you can replace whatever you want in
src/images/ and they will get passed through to
dist/images. Note, since I'm just using a few svgs, I didn't set up any image optimmization task.
In general, I tried to keep things as simple and lightweight as possible. If you notice any glaring mistakes / issues, please let me know!
First clone the repo:
git clone https://github.com/tmns/11ty-feedback.git my-feedback-site
Navigate to the directory:
Install necessary packages:
Start the local dev server:
That should result in some console output that looks a bit like this:
Using gulpfile gulpfile.js Starting 'default'... Starting 'sass'... Finished 'sass' after 318 ms Finished 'default' after 325 ms [...]  [Browsersync] Access URLs:  ------------------------------------  Local: http://localhost:8080  ------------------------------------  UI: http://localhost:3001  ------------------------------------  [Browsersync] Serving files from: dist
At which point you should be able to access a local version of the project at
You will probably also want to change the values in