I just published my new side project

Looks really nice, good job :)
However on smaller screens there's a double scrollbar that I don't find super nice, is it deliberate?

Hi,

Nice work! Looks like you included a lot of functionality in a small space of time.

I’ve had a look at the demo in Safari on iOS and just wanted to suggest a few things:

• The hamburger menu on the tasks page and the arrow to submit a task on the task creation page cannot be focused using a screen reader. I haven’t tried on desktop but it may be that these are not keyboard operable either. Idealy use a native <button> element. Otherwise, if these are custom buttons created from <div> or <span> elements or similar, you need to ensure they can receive DOM focus using tabindex=“0”. See the Mozilla tabindex article. Note that you will also have to build in the appropriate roles, states and device independent event listeners too. See Developing a Keyboard Interface in the WAI-ARIA Authoring Practices 1.2

• The filter items in the navigation menu itself are not exposed as links. The iOS screen reader, VoiceOver, only announces them as plain text (I was able to open the menu, then turn the VoiceOver screen reader on to access these). Again, these are likely created using generic <div> elements so ideally use a native anchor element (<a href=“#”>) or add the ARIA role=“link”. If taking the latter approach you still need to build in the appropriate behaviours as previously mentioned.

• Also, when viewing the demo, content behind the demo page is not hidden from assistive technologies. So I can still place screen reader focus (VoiceOver) on the landing page elements while viewing my tasks or creating a task. I saw others mention a modal so perhaps this fills the entire screen on iOS and elements behind are not hidden. One method is to use aria-hidden=“true” on a container that is a sibling of the modal container. You would also have to restrict keyboard focus. See the description of a modal in the WAI-ARIA Authoring Practices 1.2

• Particularly on the create a task page, there appears to be poor contrast with the placeholder text and the button text. As a minimum you should aim for 4.5:1 for regular size text and 3:1 for larger size text (18pt or 24px / 14pt bold or 19px bold). See Contrast (Minimum) in the Web Content Accessibility Guidelines 2.1

• Visually the buttons to complete tasks look like checkboxes so it is a little disorientating that the task immediately disappears when these are tapped. It would be clearer if visually these were more obviously buttons. However, the ability to select multiple tasks and then press another button to complete them would be a useful feature.

• I would also say that it seems a bit counterintuitive that the back arrow is used to submit the task rather than cancel. I would either swap these buttons around so the arrow signifies forward progression, or ideally explicitly label it as ‘submit’ or similar.

UX can be improved. Try to destroy any traditional popup modals and traditional form inputs. It's not easy fighting with the forms-monster. You can always open up a new UI prototyping project with either Adobe XD, Figma or Framer and invite people on the board for collaboration.

Hey there, noticed a few minor things that you should be able to fix pretty quickly. It's quite nitpicky though.

• When hovering "Try the demo" or "Contact" in your header, the hover effect pushes the other items to the right side. As a short .mp4 (no clue how to embed it here): i.imgur.com/DvU9jIy.mp4
• The text in your mobile header isn't vertically centered and I can't unsee it
• Why can't I select a date when creating a new task? I have to save it first and then edit
• When I try to click out of the "new task modal", it says I shall enter a title first.. but I want to close it. Clicking outside of a modal should be the cancel action.
• As others said the orange sure is an interesting choice. I'd personally get rid of it asap and just use a white bg for the modal
• Why do I have to save the title first before I can save a new task? Seems like an extra step that doesn't really need to be there
• There are still some console.logs :D
• Your startpage has an email field but no hint to any data-privacy/usage of that mail cough cough gdpr

Other than that pretty neat for a few days of side-project'ing. What are your future plans with the site? Monetize or open source?

Cheers from the opposite side of germany

Pretty sweet! The icons look pretty nice and the draggable feature is super smooth :D

I'm learning React and the MERN stack right now. What technologies did you use to make this? How will you set up user authentication? Are you using Firebase?

Thanks :-)

Really nice, I'll not point any bugs or stuffs like that, because major of people already did that, what I want to propose is, since this is a side project and you are learning stuffs, try to build your own drag and drop, will be challenging and funny and you'll learn how to do It :D

Hey, I tried your side project and to be honest the design is super clean and looks good and kind of matches the theme I guess you were trying to achieve. Here are some things you can add and improve:

1. Storing the Todos in Some Type of Database(Postgres).
2. Using Google/GitHub/Twitter/Facebook/Discord OAuth to avoid storing passwords in the database
3. Have an API to implement most of the security there.

Other than that I really like the project.

That orange modal is a very interesting color choice I must say.

Since you know the due date on some of the tasks would be nice if you could see the tasks in a calendar view. Personally I like looking at calendar to get a good sense of time.

Other than that for 5 days of work it looks good so far so good job. :)

This is awesome. I am in the process of building something similar but more tracker focused and habit forming. I really like the functionality of what you built here. Looks good. Keep up the great work.

Nice. Since it's a side project, you can publish it here too: mysideproject.rocks