Now Live [last update, I hope] Latest project (recipe collection)

[robcsaszar]

Project URL

https://theskullery.net/

Hi everyone,

Last weekend I got finally sick of looking for recipes for the stuff I cook often and keep forgetting where I found them on, as well as keeping tabs on what I changed/substituted. I've been keeping them on Google Keep until I found a solution but I never did.
So naturally I thought to use this as an exercise and delve into something completely new to me.
Here's my own website, currently hosted on Docker, deployed with Jekyll. I know Docker isn't the best solution for this but I will be the only one using the website, along with close friends.
theSkullery

Can you please give me some feedback on it? Anything goes!
It's not completely done yet, but it's good enough for me to share and get some constructive criticism. :)
Thanks!

 

[Mike Rees]

Looks clean. I especially like the checkboxes, and the fact that the page scrolls to the next item when you check something off. Super useful, I wish more recipe sites used something like that

 

[robcsaszar]

Looks clean. I especially like the checkboxes, and the fact that the page scrolls to the next item when you check something off. Super useful, I wish more recipe sites used something like that

Thank you, I'm glad you like it! 😀

 

[adam]

Wow, beautiful, love it! Only minor points and some ideas as you grow:

• Would be nice if the search was an input and hitting enter took me straight to your search page
• It wasn't clear what the camera icon did under your recipe image, it just linked me to unsplash homepage which was a bit confusing
• Perhaps a subtle container around ingredients would help to make this section a little more readable, a light yellow background with dark brown text might look a little like a sticky note shopping list and keep it more obviously separate from the instructions
• When checking items off it would be helpful if the opacity of the item was lowered a bit so it is easy at a glance to see what's next
• The subscribe button on homepage links directly to an XML feed, not a great experience for those (most) who don't use, I think RSS is great but expected down the bottom and perhaps you could have a mailing list for new recipes instead

As your collection grows perhaps you could add a favouriting feature saving in local storage.

 

[robcsaszar]

Wow, beautiful, love it! Only minor points and some ideas as you grow:

• Would be nice if the search was an input and hitting enter took me straight to your search page
• It wasn't clear what the camera icon did under your recipe image, it just linked me to unsplash homepage which was a bit confusing
• Perhaps a subtle container around ingredients would help to make this section a little more readable, a light yellow background with dark brown text might look a little like a sticky note shopping list and keep it more obviously separate from the instructions
• When checking items off it would be helpful if the opacity of the item was lowered a bit so it is easy at a glance to see what's next
• The subscribe button on homepage links directly to an XML feed, not a great experience for those (most) who don't use, I think RSS is great but expected down the bottom and perhaps you could have a mailing list for new recipes instead

As your collection grows perhaps you could add a favouriting feature saving in local storage.

Thank you for your feedback! :D

• Search: that makes sense from a user experience point of view - it will definitely be changed;
• Camera: it's meant to be image credit (since I'm not a food photographer, I will mostly have external photos of the food on there => would either a tooltip "Image credit" or a mini-badge be better here?
• Container color: this is the second time I'm getting feedback on this so I think that's going to get changed first;
• Checkbox opacity: I've actually had this idea myself, as well, consider it done;
• Subscribe: yes, I am, as I write this, trialing a Formik form for subscription (I still have to figure out the mailing list for new recipes but that's an awesome idea)
• Favoriting: same here, excellent idea, I just have to figure out how I can achieve this

Planned, or rather, ideas that I have so far:

• Ability of adding your own recipe (will be public), you will be able to see a list of the ones uploaded by you
• Dynamic scaling of recipe ingredients

As for other stuff I have to do (I added the stuff from you):

• Find a solution for the slow-loading images
• Subscription box
• Optimize search page
• Cuisine/Diet popup on hover in main page

Also, one question: is it obvious that one can click on the tags in each recipe in order to see more recipes with the same tags?

 

[adam]

Awesome stuff! I think the text 'Image Credit: {author}' that is linked is more clear and standard. I wasn't sure if perhaps it opened the photo full size or if I could upload my own etc. I knew the tags were clickable yeah. It might be fun if the hero image background that's currently pasta rotated through a few different random images each time the page was refreshed.

 

[blaq]

deployed with Jekyll

Hugo has always been my favorite ...and hey I like the design.. looks perfect ..
One suggestion though ... add static rich snippets.

 

[robcsaszar]

@Adam I did some changes to the website. What do you think now? :)
My biggest issue right now is the 'favoriting part', since I'd very much like for my visitors not need to sign in. An idea would be on the /chef/ page, as in, 'this chef's favorite recipes:'. This way you'd only be able to see and save your favorites once you've submitted a recipe yourself.

 

[adam]

@Adam I did some changes to the website. What do you think now? :)
My biggest issue right now is the 'favoriting part', since I'd very much like for my visitors not need to sign in. An idea would be on the /chef/ page, as in, 'this chef's favorite recipes:'. This way you'd only be able to see and save your favorites once you've submitted a recipe yourself.

Nice work!

For favouriting you could add a like button to each post which when clicked adds/removes the recipe title and URL slug in to a JSON array stored in the users local storage.

Have the button check the slug in the array to show as active or not.

Then on your /chef/ page you could just iterate through this array to create a list of favourites.

I use a similar implementation on Hoard.fyi | Curated tools & resources for web designers, developers & makers – in a nutshell.

 

[JacobHegwood]

Absolutely one of the easiest to use recipe websites I've ever used. Love everything about it!

 

[robcsaszar]

Absolutely one of the easiest to use recipe websites I've ever used. Love everything about it!

Thank you! I'm really glad you like it.
Do you have any comments or remarks on the user-experience? :)

 

[xtbhyn]

The website is delicious!
Clean and simple 😎😎

Here are my thoughts:

• I feel the text in the header should be a little brighter. The contrast with the background is low. It would be great if you could reduce the characters per line on line 2.

• Tags like "dinner", "lunch" do not add sufficient value according to me since we can't control when and what people eat 😬. Instead I think this space should be used to convey relatively important info like cooking time, veg/non-veg, skill level etc.

• I love the checklist approach to the ingredients and directions 👏👏 It might be just me but the checkbox borders should be a bit darker especially the ones under the "Directions" section

Loved this project :)

 

[robcsaszar]

The website is delicious!
Clean and simple 😎😎

Here are my thoughts:

• I feel the text in the header should be a little brighter. The contrast with the background is low. It would be great if you could reduce the characters per line on line 2.

• Tags like "dinner", "lunch" do not add sufficient value according to me since we can't control when and what people eat 😬. Instead I think this space should be used to convey relatively important info like cooking time, veg/non-veg, skill level etc.

• I love the checklist approach to the ingredients and directions 👏👏 It might be just me but the checkbox borders should be a bit darker especially the ones under the "Directions" section

Loved this project :)

Thank you, clean and simple is what I was going for! 😊

• I increased the opacity from 0.5 to 0.7, I was worrying about that as a matter of fact but you're the first one that's brought it up.
• Regarding the tags, I agree, the 'lunch', 'dinner', etc. tags will be changed to something the in the likes of 'mains', 'sides', 'snacks'. The tags/meals/categories part will be completed by this weekend, I think.
• Oh yeah, I've tried styling the checkboxes a while ago but for some reason I failed and then I moved to something else so I just let it be until I got a bit wiser 😁. I'll give it another shot, though, as I don't really like them on mobile.

Appreciate the feedback!

 

[CoryRunn]

What a great idea! I don't cook much from recipes, but I'm always pulling out the one recipe I use for homemade Taco seasoning. It's a pain finding that piece of paper each time lol.

Hm, maybe I'll had it to your list 🌮

 

[Lloople]

Wow that website looks awesome and it's super easy to use! Well done right there 👏👏

 

[avena]

Hey, this is cool! I am definitely needing some cookies recipes :D

 

[Gummibeer]

Hey,
because your page hasn't any dynamic/interactive content - which isn't bad, it's perfect because it focuses on what it is about: your recipes!
I would recommend you to use any kind of static page generator and Zeit/Vercel - it's free and super fast. There are also tutorials for search which could be done via algolia or a simpler search running in a free Vercel FaaS.
Right now the search is super slow, which is bad for a search done while typing. If it would be faster I like search while typing because I don't have to wait for result pages.
And with Vercel you could use something like Airtable or any other API as CMS and inject the data while building. For sure you could also use simple MD/JSON files in repo.
Right now I play with 11ty and have to say that it's pretty cool! No setup/overhead and it supports multiple and even custom template engines and every data from.simple MD files to JS promises doing API calls.
Only the build of assets (JS/CSS/IMG) seems to be done separated - which is okay for me.

 

[robcsaszar]

What a great idea! I don't cook much from recipes, but I'm always pulling out the one recipe I use for homemade Taco seasoning. It's a pain finding that piece of paper each time lol.

Hm, maybe I'll had it to your list 🌮

Nice! I'm looking forward to it, I recently managed to get some hari masa flour and really want to try out some tacos! 😁

Wow that website looks awesome and it's super easy to use! Well done right there 👏👏

Thank you very much! 🙇‍♂️

Hey, this is cool! I am definitely needing some cookies recipes :D

Appreciate it! I still need to put some of my own stuff on there as right now I'm still working on some final stuff but I definitely have some cookie recipes. 😁

Hey,
because your page hasn't any dynamic/interactive content - which isn't bad, it's perfect because it focuses on what it is about: your recipes!
I would recommend you to use any kind of static page generator and Zeit/Vercel - it's free and super fast. There are also tutorials for search which could be done via algolia or a simpler search running in a free Vercel FaaS.
Right now the search is super slow, which is bad for a search done while typing. If it would be faster I like search while typing because I don't have to wait for result pages.
And with Vercel you could use something like Airtable or any other API as CMS and inject the data while building. For sure you could also use simple MD/JSON files in repo.
Right now I play with 11ty and have to say that it's pretty cool! No setup/overhead and it supports multiple and even custom template engines and every data from.simple MD files to JS promises doing API calls.
Only the build of assets (JS/CSS/IMG) seems to be done separated - which is okay for me.

I'm currently using Jekyll for building based on MD files and the search is a simple Jekyll search container. But that's very odd that the search is slow for you... 😭 May I ask what browser you've tried it in? I've tested in Opera, Chrome, and Firefox on desktop and mobile and it's instant for me. 😮

 

[Lloople]

Search for me is really really fast, to be honest, both in Chrome and Safari (Mac & iOS)

 

[Gummibeer]

I'm currently using Jekyll for building based on MD files and the search is a simple Jekyll search container. But that's very odd that the search is slow for you... 😭 May I ask what browser you've tried it in? I've tested in Opera, Chrome, and Firefox on desktop and mobile and it's instant for me. 😮

I've tested it on my Huawei P10 Chrome v81 - on desktop I see that it's a JS onpage search, no request is done - strange. 🤔