(backstory: The idea is that parties interested in my services would see my profile, and contact me regarding potential jobs, or for hiring purposes. In the past Ive spent time going back and forth with clients and not getting any job, or starting projects without a solid requirements list. Should I send a follow up email to the person that fills out the form to remind them to reach out to me with their project requirements document? Or send a pdf file to them as an email attachement? Ive applied to various companies but have never gotten an interview. So im trying to freelance)
Hey, this looks really nice and itās obvious youāve put a lot of work into it. A few issues though that jump out at me right away:
It is not very keyboard accessible. I canāt click the āPushā button with the keyboard and I canāt close any of the pop-ups with the keyboard. I would highly recommend you always check to make sure you can utilize all of the functionality with the keyboard only. Also, Iām not seeing any keyboard focus indicators for the four links in the boxes.
The small white text on the main page is very faint for me, to the point that I can barely read it. This might be a little dependent on the OS/browser. On Windows it is slightly brighter than on my Linux box. Regardless, the font you are using doesnāt seem to be as strong as other fonts and thus even though you have the color set to #FFF it doesnāt feel like it, especially on that background. It improves if I crank the font-weight up to at least 700. Just so you think Iām not making this up, below is a pretty accurate pic of what Iām seeing. Youāll notice that the āINTROā link looks better. Thatās because I set the font-weight to 700 just for a comparison.
Ahh, I see now that you have the font-weight set to 300. I would definitely reconsider that. White on a light gray background needs to be much brighter and heavier.
I would not change the text in the h1 heading on the Push button click. Headings are important for accessibility and changing them like that, especially an h1, has the potential to cause confusion for people using a screen reader.
ill fix those things if you believe it really makes a diffenrence for someone to hire me, however, fyi even my windows machine is not fully keyboard accessible.
regarding the post topic, ie the form behavior:
Does it have to be async in the server, and should I await on something or its not necessary? like right now it just sends me the info, but the form does nothing afterwards. I think I should also display a message to the user that the info is being sent and then either successfully recieved or failed to recieve their email. then I think i should just clear and close the form?
I can know if ive successfully recieved their email if I get to the end of the try block yes? how can I follow through with an email to the user after Ive succesffully recieved his message sending him a note such as āthank you for contacting me, in order to proceed to the next step please reply to this email with have a projects requirements list, along with a budget and timeline for your project.ā
and also those boxes you were speaking about before, shouldnāt they become routes?
Well, you are usually competing against a lot of other people to get a job so I would think that you would want every advantage you can get. Keyboard accessibility is one of the major accessibility checkpoints. You donāt have to make your page more accessible if you donāt want to, but then you better hope that the person evaluating your portfolio isnāt dependent upon using the keyboard
I would suggest to you that accessibility is about the user, not about getting hired. But having good web accessibility is certainly something that can help show your knowledge and help sell it.
As for the form I would add resize: vertical to the textarea and give the buttons some focus indication. I might also suggest something a little nicer than an alert for the feedback message. Maybe something like a Snackbar/Toast type thing.
Sorry guys, I would like to get to all these good recommendations, I should have been clearerā¦ I appreciate the suggestions however my problem has to do with the form-server files I shared in my original post.
I wish to send a reply to the client as soon as Ive successfully recieved his message, Ive done the following:
server:
mailform:
It works in that the emails are sending and im recieving the follow up message, however I have the server error:
error headers already sent.
I know this from php it happens like when you try to send the user somewhere else after youve already sent out some html
ie. header(āLocation: http://www.example.com/ā);
because you cant send out the headers twice
excuse if what I wish to do is covered in some challenge in the curriculum, please refer me to it.
Ill do it, but I need to figure out how to send back more than one response to my client side from my server side code, so basically the user can getting two notifications
first:
notification:
success ive recieved your message
or:
fail ive not recieved your message, please check your internet and try again
if the first notification is not fail then=>
second
success ive sent you a reply please check your email or spam
or:
fail Ive recieved your details but am unable to reply, please send me an email at @marketingdesigncoding with your project requirements list
Can you please tell me where/how i can see the text sent from the server:
`email sent succesfully sedngrid the msg ${msg}`
all I see on the client side is this:
console.log('msg',msg))
is there a way to see the text āemail sent succesfully sedngrid the msgā that I wrote in the send method?
The second question I have Is reguarding the flow. please confirm what I am guessing is true:
First I see the first catch block returning, and then the second catch block returning.
So basically the first try succeeds and then it goes into the second try when it tries to send the response the second time (not allowed) it falls into the second catch block which returns and then control goes back to first catch block which returns.
obviously this all happens after the two mails are sucessfully sent.
is there a way to pass the data over a block of then? or use it more than once? or like once its used once its finished?
for example, I am not able to console.log(data) and then use it in the next then block afterwards or resolve a setTimeout and then pass on the data.
also, what about the variable theHosting what will that change to on a the server? although I see it is still working on the live server even though its set to localhost:4000
Edit: I guess once its used you cant reconsume itā¦ so I just log the data in the same then blockā¦
iād love to hire you but my first name is only four letters long.
more over, itās better, and common practice, to not give any validation information until the user as attempted to fill out a field.
the problem now is that if user clicks submit each form field should also be validated. The code at the top of SaadKahn will become very repetitive.
I thought to solve for this by hiding that submit button with value invalid entirely, i.e only showing a submit button if all fields are validā¦ but I thought a form without a submit button just looks wierd.
That red colour looks a little aggressive to be honest, and it already shows while Iām still typing. I often see it done like this with contact forms, and I always want to yell at the form āJesus Christ, canāt you wait until Iām finished filling out the field before you complainā.
The opposite approach is a friendlier way to handle this: show a green tick as soon as the input is valid, instead of showing something aggressively red while the input is still invalid.
As for the submit button, Iād grey it out a little and remove pointer events, until the form is ready to be sent, and then give it a nice green or blue colour.
I think they were trying to point out that you put an unnecessary minimum string length limit on the first name.
Actually, I see that the input field is for āfull nameā. Still, Iām guessing maybe some people might just go by a single name and it might be less than five characters long.
I have one other suggestion, but thatās not related to the form: The first thing someone reads about you when they look at your page is that youāve been coding for 3 years without interview, while others sometimes get hired within 6 months. I totally understand how that can be frustrating, but I think it sends the wrong message to display your frustration so prominently.
A potential employer doesnāt want to know about your pain or how they can make your life better, theyāre looking for someone who makes their life better by solving their problems. And ideally that would be someone with a positive attitude whoās easy to work with.
So Iād maybe change that a little and focus more on āIāve been coding for 3 years, Iām a professional who will solve your problems, Iād love to work with you, letās get in touchā or something like that. Just an idea.
Ill take that advice. I realize it makes me look like a sour apple. I wanted to add some text changing while the background svg changed and that was the first thing that came to my mind. Because I was reading all these articles about āI succeeded in getting a job as a software engineer with no prior experience and only 6 months of self studyingāā¦ (bbsmooth answered this already on another thread, not necessary to delve into too much here)
And people saying they had applied and were rejected but at least given coding interviews. Yet ive never even been contacted, never had a coding interview. Just some people off facebook asking me to build them drag and drop wordpress/wix websites. No dev skills necessary, no real thought process.
So Ill fix that negativity, and add some more features and then get back to this thread.
Well not a sour apple so much, but itās setting the focus on you instead of what you can do to help the client. Just be positive and approachable, youāre advertising yourself with a portfolio, and we all know that ads are lies