DevTools, Fetch API w/FormData, Design, And Other Updates

I started writing this post 13 days ago, so here’s another mishmash of things I’ve been working on or discovered recently.

DevTools Hot Tips

Came across some stellar tips for using the browser’s dev tools, particularly the biggest one which is awesome!:

Up/Down arrow keys increment/decrement by 1
ALT (or OPTION) + Up/Down arrow keys increment/decrement by 0.1
SHIFT + Up/Down arrow keys increment/decrement by 10
CTRL + Up/Down arrow keys increment/decrement by 100

I also found out today that just like you can toggle pseudo-selectors (like :hover, :active and so on), you can toggle a class on/off an html element in dev tools too!

🤯

Fetch API Resources

A while back I wrote about different ways of doing HTTP requests. Well I'm working on implementing this in the app now and in Codebar the other day, I learned about a few more resources to keep on the shelf:

HTTP Requests & Forms

Did you know you can send a whole form’s data as part of an HTTP request? I didn’t! Turns out there is a native FormData() Constructor which will grab all of the data from a form. Then you can select the form using a query selector and give the whole thing an event handler, avoiding the need to trigger a server request to submit the form data. There’s a bit about this in the David Walsh post (above) too.

Design Resources

Today I had another mentoring session, this one all about what to think about to improve and/or work with someone to work on the design of the site. I got looooaaaadds of information (including a couple of books I already had my eye on!) including these tidbits & resources:

User Testing

Get as much user feedback as possible (ideally with testing) so that you have a clear idea on how people use the site, what elements are important, improvements that can be made, etc, before engaging a designer on a project.
- Another exercise worth doing: card sorting, to determine which features/elements are most important on a page. This can be done solo, or with users if you have them.
When doing user testing, give them specific tasks to complete and see if they can accomplish them.
It’s better to get in situ tests where you get feedback & reactions immediately, rather than doing general after-the-fact surveys.
Look for online communities where your target demo hangs out to get free testing (Facebook groups, forums, etc.), otherwise there are paid options like:
- fivesecondtest.com
- usertesting.com
Gudie to User Research is another great resource on this topic

Design Inspiration

land-book.com
lapa.ninja (landing page ninja)
GDS Design System - the style guide for .gov.uk pages which are fantastic examples of user-friendly, intuitive, accessible design
SiteInspire
Empty states - design inspiration for when you don’t have something to show
BeamBox.com - great example of illustration in design
One way to frame what you want out of a design is to look at sites you like and say what you like about them…then reverse it for your site and say how it’s not accomplishing what you want. Likewise, look at sites you don’t like and explain what you don’t like about them.

Book recommendations:

Other Stuff

Sharing the website in 2 days! FINALLY!!! (even though I don’t think it’s ready and feel like I’m putting a baby into a pool of great whites 😅)

Up Next

Finishing touches & tweaks on the site this weekend for soft launch on Monday.

* This is an affiliate link so if you use it then buy something on Amazon, I get a cut. Yay! This is the only affiliate link on this site until I decide to maybe add more.