Show HN: Learn Blender shortcuts with lots of tiny videos

https://hollisbrown.github.io/blendershortcuts/

by hollisbrown • 2 years ago

171 46 2 years ago

hollisbrown.github.io

I've used blender for more than a decade and now ask myself what the best way to teach it would look like.

Video generally seems the best format to explain how to solve a specific problem, but its not exactly great for larger collections of small bits of information – like blender shortcuts.

This is why I made this video/text hybrid website from scratch. If you're a blender user or have experience in teaching others, I'd be very happy to hear your thoughts on it.

I'm also posting this here because I assume many of your are professional web developers. I'm a learning hobbyist and wondering if there are any issues with the way I built the website.

Thanks!

Github: https://github.com/hollisbrown/blendershortcuts

degosuke• 2 years ago

Great idea! For better retention maybe it can be done as an anki deck?

hollisbrown13• 2 years ago

I knew about analog flash cards for learning but thanks for bringing anki to my attention!

Do they support tiny videos instead of images? Because I think this is essential especially for beginners who generally don't know the names of operations.

rsanek• 2 years ago

yes -- you can both embed them as a hosted video (YouTube / HTML) or use their built-in video player with [sound:filename.mp4]

MrDisposable• 2 years ago

This is great, thank you. I have a Markdown file for Blender shortcuts I learned, but this seems to be more useful for remembering them.

(BTW, found a typo: Seperate should be Separate)

hollisbrown13• 2 years ago

Thanks for pointing it out, that reminds me I should probably run the entire website through a spell checker / AI at least once.

Avisite• 2 years ago

I have been using blender for years now, but still learned some useful shortcuts thanks to this. this is a great way to teach shortcuts, and is perfect for a quick reference on a second monitor.

I might suggest a compact view as an option to try to fit more on screen at once, or just increasing the density.

hollisbrown13• 2 years ago

Cheers, happy to hear that!

There already is a "collapse" button if you bring up the menu top right (maybe its too subtle?). Default browser zoom out (Ctrl -) should also work fine, so you can see all shortcuts at once, e.g. on a second monitor or on a beamer, if you're teaching a group of people.

colinwilyb• 2 years ago

What is a beamer? A video projector?

geuis• 2 years ago

This is awesome!

I'm not a professional user of Blender, but it's my only tool for working with and creating models for 3D printing. Never could develop a liking for Fusion360, though I recognize the advantages that CAD programs give.

My biggest tip and gripe as a Mac user is to get a decent mouse button remapped utility and combine that with creating a Mac specific settings save file. For whatever reason, MacOS to this day doesn't recognize the extra mouse buttons that Windows does. Like Button4 etc.

Even today, "middle mouse" button is one of the weirdest default choices Blender could make. The middle finger of either hand is an assisting finger, not primary. The index and ring fingers are stronger and it's weird to assign actions that require persistent pressing to a finger that has less strength than the other fingers.

With a multi button mouse you can remap the middle button to the thumb. It's infinitely a better and more intuitive choice.

Also, Blender's trackpad support on MacOS is horrendous, despite the amazing advances we keep getting everywhere else with each new release.

I would love to see a new feature that is a voluntary checkbox for Mac users that enables a key binding layout dedicated to us.

prox• 2 years ago

I think you can remap everything in Blender.

Also my logitech mice come with remapping programs, does it come with one on mac?

ilkke2• 2 years ago

Do check the settings! IIRC blender specifically has a toggle between a 2-button and 3-button mouse. Maybe even single button is possible, I remember using ctrl and alt with a stylus.

alanbernstein2• 2 years ago

What sort of things do you print?

I like the idea of using blender, but I'm under the impression it wouldn't work well for the kind of things I work on, which require precise, adjustable measurements, and parametric design. (Like, custom hardware to mount thing A onto thing B)

hollisbrown13• 2 years ago

Blender is mainly for visualisation, but I've used it for 3D printing. You can set up models in a parametric way by using modifier stacks (e.g. screw, solidify, subdiv etc) or geometry nodes, but I imagine other software is more advanced in this regard, or needs less customization and thought.

owenpalmer• 2 years ago

I adore this format, fantastic idea. I would love to see it for other programs as well. This is an Anki deck waiting to happen!

anon012012• 2 years ago

Beautiful!

Instead of adapting to Anki, you could add your own JS script to this page, which picks a random sample from the array of tiles, highlight it in white, and you need to press the corresponding shortcut to go to the next sample (using a dictionary). You could memorize the time-to-press to generate a finale score (if you're motivated to do so).

I had implemented that algorithm to memorize videogames shortcuts. This could be a nice challenge for your skills! Maybe you could make another page for "VS Code" and that'd be niiiice.

hollisbrown13• 2 years ago

Thanks, and thanks for sharing, I love the idea and will think about it. Even though my intuition says it would be more productive if I put more time into adding content and polish to the existing concept, and people openend the actual software to practise their muscle memory.

I won't make this for other software, because I don't have that level of expertise for anything else. I've spent years helping other blender users, this is why I feel confident to author the information in this particular case.

maroonblazer• 2 years ago

Love your site!

I googled your name and 'blender' but didn't find any training resources online. I'm a new Blender user and am on the hunt for resources beyond BlenderGuru's Donut tutorial (which is great, btw).

Do you create any Blender educational content?

bonniesimon• 2 years ago

I wish there were something similar for Davinci Resolve

neovive• 2 years ago

That would be great! I usually search and end up on YouTube. Most videos for specific features are longer than needed when you only need to see how to do something quickly.

grues-dinner• 2 years ago

One JS file, one HTML file, one CSS file. Perfection.

rikroots• 2 years ago

I'm also posting this here because I assume many of your are professional web developers. I'm a learning hobbyist and wondering if there are any issues with the way I built the website.

I ran Lighthouse over the site. Excellent scores!

The one improvement I would suggest is to increase the contrast between your text and background. Currently the text is a little hard to read.

Have great fun coding!

hollisbrown13• 2 years ago

Thanks! I wasn't aware of tools like Lighthouse, will have a look into how it rates things.

Will also take a critical look at contrast again, thought it would be sufficient, and it quickly gets overwhelming in this layout.

me_bx• 2 years ago

Hi, the site looks nice.

It's not working as intended on firefox, though, when autoplay is disabled (this might be the default now, I'm not sure).

There is no way to know that the videos are videos, so the tips looks like a bunch of images. Clicking on them has no effect.

The only way to play a video seems to right-click on it, and select 'Play'.

You might want to add a 'play' button overlay on the videos thumbnail images, and/or show the controls by default...

Hope this helps,

hollisbrown13• 2 years ago

Thank you very much for pointing this out, if a play button can be a fallback for those users only I'll put it in there.

I'm a bit weirded out by this being the default even for muted videos. Does that somehow save bandwith because you only get sent one frame of the video? Because otherwise a muted video is just a series of images, and they dont block images by default, right?

sjagoe• 2 years ago

I turn off autoplay globally because it's been abused for so long by some news sites, for example, that autoplay a video and then pin it to follow you as you scroll the article.

I find any autoplay, even muted or no audio, to be more of a distraction then helpful in general.

That said, I'm happy to make exceptions for well designed and intentioned sites, and so have allowed it on yours.

akovaski• 2 years ago

In case anybody is wondering, Firefox doesn't block muted videos by default. The above poster had changed their settings to block muted video, which can be overridden per site.

butz2• 2 years ago

As a user with media autoplay blocked I find this website hard to use. Please consider adding play/pause buttons for each video or just keep video playback controls visible. And with blocking disabled, all videos are loaded at once, and when everything is playing at once it makes it harder to concentrate on one thing. You should consider adding some kind of lazy loading. Sad that loading="lazy" is not natively supported on videos yet.

hollisbrown13• 2 years ago

thanks! If a fallback is possible, I'll put it in.

Any pointers how to go about the lazy loading? I want to keep it simple

butz2• 2 years ago

No simple (native) solution yet, as far as I know. While iframe has loading="lazy" support, it probably will be detrimental to accessibility. Could be a fun experiment, though. Maybe try setting preload to "none" on video? But this might be overridden by autoplay attribute.

Solution that would require more work involves removing autoplay attribute from videos and using IntersectionObserver to check when video is inside viewport and start playing it.

ilkke2• 2 years ago

Great idea and execution, with the shortcut keys doubling as models. Certainly gets my visual memory engaged. Works great on Firefox android. Only thing I could wish for is sections like selection, sculpting, etc. Thanks for making this.

hollisbrown13• 2 years ago

Check out the filter in the top right corner menu. I think its too subtle and most people are missing it.

The content is focused on modeling though, now that it has a tag system I might add other sections like sculpting, animation...

jithinraj• 2 years ago

This format is awesome and helps eliminate the fear of starting by making learning shortcuts easy and interesting.

alanbernstein2• 2 years ago

Excellent work. At first glance, I'd say this is The Right Way to do documentation for complex GUI design applications.

I hope it catches on, because the lack of quickly accessible/searchable info like this is part of what keeps me from learning new GUI tools. One example is Fusion 360, which seems like a great way to design 3d printed parts. Instead I just keep plodding along with openscad, because it takes me more time to learn one design step in fusion, than to just quickly write up a first draft in code.

hollisbrown13• 2 years ago

Thank you! I'm honestly surprised I haven't found anything similar, or maybe I haven't looked hard enough.

Then again, blender is way more shortcut-oriented than any other software I've used, one of the reasons I like it so much.

acutesoftware• 2 years ago

Very well done - it took me several attempts to get the hang of Blender and I still only know / used half those shortcuts. Thanks for the easy to use tips!

baby• 2 years ago

Can people list similar things for other tools? This would be useful from vscode to photoshop!

wonger_• 2 years ago

This is excellent. Wish I had this reference when learning Blender in high school. I'm sure 3D modeling classes would love this if they knew about it.

senectus1• 2 years ago

this is really good work, any chance of an anchored index ? so I can search for what i want and maybe even pin the things that I have common issues with?

hollisbrown13• 2 years ago

not sure if I understand correctly. Ive already put in anchors for every tile, you should be able to click on one and get a shareable URL to send someone to the same tile. Index?

monlockandkey• 2 years ago

Good concept!

The important thing to know when learning hotkeys is how to perform the same action using application UI.

Otherwise the keyboard becomes an obscure medium for discovering application functionality

Etherlord87• 2 years ago

I've been using Blender for over 5 years. I'm also active on Blender.stackexchange.com and when I help someone there and write instructions, I'm always confused how to navigate to a particular thing using a menu (mostly because some operators' place is ambiguous e.g. "select" vs "mesh" vs "vertex". I think there's a lot of users like me, for efficiency you're just supposed to use shortcuts.

You wouldn't use a menu in notepad to cut/copy/paste, select all etc. right?

It's funny how, when I actually look in the menu, I discover some new things added in recent versions of Blender.

chalcolithic• 2 years ago

Incredible! Before I've seen it I would never have guessed that something like that could be so good!

i_am_a_squirrel• 2 years ago

This is so useful! I just started learning blender and I wish I had this a week ago!

Show HN: Learn Blender shortcuts with lots of tiny videos

Related Stories