Can I change the jquery to plain js and how do I send the errors back to the form
Hello,
I have this challenge
Task:
Develop a shortcode that will output a simple contact form. This contact form, when submitted, will use wp_mail to send the email.
Requirements:
Shortcode needs to have fields: Subject (input), Email (input), Message (textarea),
Sanitize all fields before being used for sending it,
Use wp_mail to send the email
Style it and enqueue style only on pages where the shortcode is
Display errors on top of the form
I found a tutorial that does almost that but it works with jquery.
Now my question are :
1) is there a way I can convert the jquery to plain js.
2) How do I make it work that if there is a validation error I can show it also above the form.
Code of the tutorial : https://gitlab.com/roelofwobben/short-code-form
ping @ἔρως
3171 Replies
you do not have the make it all
but if you can let me see how things could work i will be happy
well, submit_contact_form can be way better written
https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData#form <-- this accepts a form and does all the work for you
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/mycustomForm.php?ref_type=heads#L22 <-- why did you remove the form?
also, this should be inside a view
https://developer.wordpress.org/reference/functions/load_template/
if you check the source code, you can see that it basically just does a
require $_template_file;
it also has the wp_before_load_template hook, which probably can be used to enqueue your javascript code and styles
you're also submitting the form to an url inside a plugin
instead, you can submit to the current page, or use the ajax fileI deleted the form because the author of the video said we do not need it because we are using ajax
that's the dumbest thing i read all day
oke
you need the form
so back to the drawing table 😢
that author is drunk
or rewrite a lot
rewrite a nice chunk, yes
but it's not that hard
can we do that piece by piece
yes, we can
so first step is to make the form tag back ?
second thing would be i think find out how I can make the action to say I need the process file I think
no no
I will not do that for now.
Tired after a very ad night
lets start with the form
oke, so use the form tag
Easy fix
kinda
because whoever's tutorial you read was just waffling about and doing the dumbest things
also, everything has the name of the tutorial
add_shortcode('contact_form','ideapro_contact_form'); <-- like this
instead of ideapro, use something unique to you
for example, ideapro_contact_form could be roelof_contact_form
then create a folder called "templates" and create a file called "form.php"
replace the whole thing with this:
now, you have a php file that can output the form
you should add the shortcode inside an init hook, like this:
that should output the formoke
and the form template schould include a form tag
So I have to find out what the action then should be
it's not a "should"
it's a "must"
a form without a form isn't a form
it's just a bunch of disjointed fields with no meaning at all
oke
So form.php must look like this :
`
or must I change the $content to a echo ?
and what will be the action ?
no, just pure html in that file
the action can change
but, for now, just leave it at
. or javascript:void(0)oke, changed everything that you asked for
DO you need to check it so I "have" to put the new code on gitlab
would be great, yes
done
much better
now, style it how you want it
oke, maybe change it to the form I really wanted
Then I can use the css in the css directory
just make it look how you want it
oke
moment, I have to check if it is looking as I wanted
oops. I made somewhere a error :
Should File not be Dir ?
yes, should be
DIR
__DIR__oke,
Form looks well now
and updated the repo
What I still miss is the arguments of the shortcode
I thought the purpose was to use
[custom_form subject="I have something to say to you" ] yes, you can do that
but, i made a boo-boo
oke
For me things looks to work well
use this instead
inside the template, you can access the
$args variable, which will have the keys defided in this chunkoke
right now not so very important
I rather like to work on the validation part which I not understand well
you can do
var_dump($args) inside the template
validation should be the last thingyes. it seems to work
nice
now, you can do something, inside the template file
so I can
value = " <?php echo $atts[' subject"] ?> " ? not yet
at the top of the template, you can do
$atts = array_replace([...], $args['atts']);only that
inside the first array, put all the default values you want for all
attsnot have to do <?php before it ??
yes, you have, but that's implied
as well as the closing
?> before the htmloke, done that
can you commit it then?
done
😂
[...]
you're supposed to add the default values there??? Did I not iisten well
for example, if you want to take a subject, add the key there
I want all three to be empty as default
then you don't have to do anything
but there's things you still need to do on the form
by the way, don't add a title
<div class="container"> <-- don't use this generic class
you can allow setting the classes, and add a data-attribute to it
something like this:
oke, but I think I break then the css
yes, you will break the css
😦
but then you use
[data-shortcode="contact_form"] instead of the class🙂
or, come up with better (and more unique) class names
"container" is a very generic name, and will conflict with others
i know some people have aversion to css attribute selectors
not me
but I made a typo I think somewhere :
send the code here
This part
the parser d not like the ] after the ...
you need to add the
class key on the first array, without the ...???
[...] represents an array that should have the attributes you want to handleoke,
so I have to add
subject => "", email => "' , message = "" yes, and the class, if you decided to do what i said
sorry, im still confused
just do what you think im saying
even if it is wrong
it's very late here so im heading to bed
Hopefully I have a good sleep after 3 - 4 bad nights
yes, it's best to stop and rest
by the way, if you use vscode, install the intelephense extension
I use vs code for every coding job
I have now this :
but that breaks the whole form
it shouldn't
if all you changed is that line, it shouldn't have done anything
it does
see this screenshot
but as I said Im heading to bed
I will commit the code so far
that's the
data attribute vs the class
if you used this, then that result is expectedoke, but as far as I know I also changed the css
Thanks so far
you're welcome
and I hope we can work tomorrow further on this
learned a lot
and hopefully we can figure out what broke the form
and if I make the first line well
GN
goodnight
found something
See you hopefully tomorow
you need to add it to the array
https://wordpress.stackexchange.com/questions/165754/enqueue-scripts-styles-when-shortcode-is-present <-- this will be important for tomorrow, but DONT IMPLEMENT IT YET
oke bosss
and I wonder if we should not santize the data before we are going to display the data
This seems to work but I do not know if it's right
but if I have to do it, I would use the
has_shortcode and have to think about the first argumentyes, but you sanitize when showing it
you won't need to think about that
oke
I will wait on further instructions
but is my atts line good or not ?
it could be better formatted, but that's fine
happy to hear
Then I did that well
you did
now, you have to make it useful
yep
Like show the parts in the form
I think I can use something like this :
yes, but use the
esc_attr function to output all attributes, including the data atttribute from yesterdayAndrew Nacin
WordPress Developer Resources
esc_attr() – Function | Developer.WordPress.org
Escaping for HTML attributes.
oke
So i have to look like this :
?
yup
done
commit it so you can check things ?
always commit
and it's not because of me
oke, committed and pushed
good
now, remove that h1
your form shouldn't have to handle titles
done
value="<?php echo esc_attr($atts['messsage']) ?> " > <-- by the way, don't do thismoment, I think I made a typo on the message part
remove all whitespace inside the value
hmm, I have to dive into something
I see now a error message that "message" cannot be found as a key
show me the errors
messsageSo this line
just look at the key
tip: double-click a word in vscode, and it will highlight all the places where that word shows up
looks well now
are you sure?
yep
see this screenshot :
form looks well to me
and what was the issue?
a s too much in the word message
yup, you have "messsage"
had
🙂
don't forget to commit
so now 3 things to do
- validation
- take care that the css is only loaded when the shortcode is used
- sending the data by wp-mail
you're not done yet
committed and pushed
you still need to make your text translatable
ALL OF IT
4 things to do
have to think how to do that
https://developer.wordpress.org/reference/functions/esc_html__/
you use this function
anything that's text, in your form, goes through that function
the
$domain should be the same prefix you use for everythingso domain should be "mycustomForm" I think
yes
but you have to use the same domain for EVERYTHING
anytime you call that function, you need to use the same domain
oke, then I have to think where in the form I have to use that function
anywhere where you have text
also the text that the user has entered in the shortcode ?
no
so only the labels and the button at this moment ?
that's user provided and should be already translated
yup
by the way, fix the indentation of your code
and don't forget to commit everytime you make a change
yes, boss 😛
it this what you mean
it's a php function
actually, you should use
esc_html_e
it automatically outputs the value for you, so, no echo neededoke
this better :
a lot better
now, you're using ids, which is perfectly fine
however, there's a bit of a problem: ids are required to be unique
oops
and now there are not 😢
kinda
one way to make unique ids is to use a timestamp
and in your css, don't rely on ids
oke, I was thinking about re-using the shortcode-tag
I checked real fast and Im not using id 's in my css
that works too
it's pretty smart
you learned me that trick yesterday on the container thing
yup, i remember
after dinner I m looking how to do that
it's easier than you might think
I have this :
and this :
firs idea is to use it like this :
that will almost work
but I hear for me wife that dinner is ready
go eat
yes boss 😛
lol
one try
nope, almost there
😦
and I see that on the input I never use that id
so two things to change
😢
yup
but now dinner time
but there's something you can change after dinner
sorry, I do not see it
The only thing I can think of is this :
`
well, you're almost there
read carefully on what you're doing there
As far as I see it , I take the for tag
open it
put the shortcode into it and join it with the text "_input"
and close it
and where are you closing it?
I thought after the _input text
or do I have to use a extra " ?
and what's here?
the last character of that string
what does the syntax highlight is doing?
never tried
try it
first I wanted to be sure that i understand what you mean
i don't want to tell you the answer
i want to show you the tools to find it yourself
write it for just 1 label
I did
and the part " _input " is red
can you send a screenshot?
and when I try
everything seems to be allright
for ="<?php echo esc_attr($args['shortcode_tag']) ?> . _input" <-- is this inside or outside php?the `. _input" is outside PHP
which means, it is html
what's the output in the browser?
this ;
so not good
so it seems that it has to be inside PHP
or
remove the characters you don't want
yes, this gives the rigth answer :
that works too, but it's better to just have it how you had before, but without the
.??
for ="<?php echo esc_attr($args['shortcode_tag']) ?>_input"As far as I know I never tried it without the .
try it
works also
and it is lot cleaner
and it's a tiny tiny tiny tiny tiny tiny tiny tiny tiny tiny tiny bit faster
LOL
instead of concatenating a string and then outputting it, you're just outputting everything
now I can do the same with adding the id to the input
no
not yet
wjich is also forgot 😦
esc_attr($args['shortcode_tag']) <-- you will repeat this, so, store it in a variableso something like :
at the top, yes
right after the $atts variable ?
yup
Can we also do something like this :
I find that more clean ?
yeah, you SHOULD do that
yes
and then the label could be something like this :
yeah, and the id too
also, remove the space on the
for
while you can add spaces, you shouldn't do it??
for =" <-- the spaceoke
don't forget to commit
so it should be something like this :
yup
pfff
I have still a lot to learn
way easier than you expected, no?
will change the rest and commit
after you commit, you have a bug to fix
it is easy but sometimes I do not see how to fix things
like how to make the for unique
i know, it comes from practice
and some - one who wants to learn you that things
practicing goes a lot further than you imagine
I know
I learn the best by doing things instead of just reading things
but you said I have a bug 🥲
yes, you forgot the
domain argumentoke, I have to read back where I have to put it
it's the 2nd argument
oke, I have to use it on the
esc_html partnope
???
I read back and on that function you talked about domain
you should enable the wordpress stubs
and vs code is complaiing on almost all wp functions that it is a unknown function 😦
still confused
this
you say to add somethimg
intelephense.stubs <-- click on "add item" then add wordpressI did but stiill this :
restart vscode
I already did
funny it does not know that function but when I hover over it , it gives back that I need a domain
looks to me now that I need a domain on the
esc_html_e part
so commited and pushedyup, that's where you need the domain
I thought or I mean I said that earlier and then you said no
you're right, i misread it
What is next on the big list ?
oke i was confused but everyone can make mistakes
have you tried to run your code?
yep
and it seems to run fine
nice
except when I press the submit it reloads the page and that is normal
commit and push
and I miss a line under the input , have to look good with css where that one is gone
I did already 🙂
one thing you can try, which goes against wordpress' guidelines, is the short
echo syntax
you can use <?= ... ?> instead of <?php echo ... ?>that is oke
this one is for a challenge and is never meant to use in real
alright, then use that
and fix your indentation
done and done
good
i will insert some bias here: use tabs instead of spaces, for indentation
oke
then I have to change some setting in PHP
in php?
no in vs code
sorry
also changed
good
now, you need to handle the css file
https://wordpress.stackexchange.com/questions/165754/enqueue-scripts-styles-when-shortcode-is-present <-- remember this?
aha
I thought I did handle the css file here :
if you do not mind, I take a shower . Be back in 30 min
take your time
I have read that page but confused what now the right way is
it's fine, i will help you in a bit
The author of the challenge says use
has_shortcode
but that page said there are better waysbut i have a much better idea
BRB in about 30 min
alright
and im back
So you wanted to learn me a better way to take care that the css is onlky loaded when the shortcode is used
yes
instead of enqueing the css, just register it
oke
then, inside
roelof_contact_form, you can enqueue the cssis that explained in the page you linked to
not really, not exactly
oke, I do not know what to think of that
is a way I never saw or heared from
it's kinda like how the post shows, but you only enqueue once
you can add a static variable to keep track of if it is the first time you run the function
oke
can we do that step by step
I have now this :
you mean something like :
and then in the form do this :
That seems to work
I can find the css in the page where I use the shortcode and I cannot find the css in a page where the shortcode is not used
Another point solved
What is there still on the list ?
latest code is now on gitlab 🙂
I will look at this but goto bed in a hour
Tomorrow time to work on my first template at "work"
sorry, got distracted with overwatch
not a problem
get-style <-- this isn't unique enoughI have the rest of the month to finish this challenge and then a new one gets send
oke
is
get-rw-custom-form-style better ?yes, that is better
but remove the
getoke
changed
committed and pushed
tomorrow work on the next points
?
just one thing
wp_enqueue_script( 'my-script'); <-- you didn't use this
i copied it from the post
but you didn't enqueue the css, only registered itcorrect, I did not know if we are going to use js for client validation
we can, but that's for later
are you sure the css works?
yes
I did this in form.php
no, don't do it there
do it in the function that calls the form
o, I understand that I had to do that
no, no
it's in the function
this one :
yup
have to think then where I must put the code then
on top
before the
ob_start()
?yes
still works
what happens when you use it twice?
Tommorow work on the client or the server validation ?
or is there another thing to do
tomorrow, it's submitting and validating
css is one time loaded
and is still working
nice then
and the ids are duplicated?
I knpw that is it submitting and validating
But as far as I know yiou can do server and client validation
no no, you MUST do server-side validation
chips, the ids are the same on both forms
it's mandatory, not optional
you can do something simple
So work to do how to solve that ;:'(
add a static variable with a count
I know , The most/best way as far as I know is first client validation and if that is successfull do server validation and then send it with wp_mail if the server validation is also successfull
oke, I will think about how to do that tomorrow
Right now very tired
Thanks for the lessons
alright, go rest
you're welcome
I hope im a good student
and not a F -one if you live in the USA
you've been doing well, so far
you mean, asshole?
I mean a F student like in fail
you said A
Here in the netherlands we give grades from 1 - 10
Where 1 is very very bad and 10 excellent
you edited it 🤣
Yep
I go then for a 6
GN
im not from usa, we use the same scale here
goodnight
GN
and like I said i go for a 6 or 7
i think a 7 is fair
where do you live then ?
I live in the Netherlands
portugal
nice country
I was there some 30 years ago in a small city called Felguras If I write it well
it was a small city near Porto
I had there a pen friend
you're close, it's felgueiras
i had to google that, just to be sure
oke
Csn I try to make a client validation in plain js tomorrow
After I have figured out that counter part ?
and now realy going to sleep
you can, yes
oke, first find out how to work with the counter this afternoon
This morning time for work
I wonder if I can add the counter variable here :
like this :
`
I do not think so because the variable counter is then still unknown
second idea was to add this in form.php
but then counter is on both 1
so back to the drawing board this afternoon
you are mixing javascript and php, and even that is wrong in javascript
do this in the function that renders the shortcode
then you can add this
there are some improvements to be done today, but thats for later
that was my first idea to use this one :
but I do not see how I can make it work that counter is 0 except when it has already a value
I hope your boss will not be angry because you help me now
i dont have schedules, and work from home
Im still thinking in the load_templates part
looks the most logical area because I have to use the value in the template file
no, above the enqueued style
thats where you add the static variable
always declare global and static variables at the top
oke, so it willl be something like this :
something like this ?
but is counter then known in the form.php file ?
no, just a static variable
that code wont work
everytime you run the shortcode, it will start from 0
oke
did some google
and found this :
This better ?
yes, but now, you need to pass the counter to the theme template
but, i would do something better
i would pass a variable called "prefix", which has the name of the shortcode and the counter appended
then where you used the shortcode variable for the names, replace with the prefix variable
I hope I understand you well here :
that seems to work but it also breaks my css totallt
it breaks on this line :
which now says
contact_form1 and contact_form2
Where the css is looking at
This why I still doubt if developing is for me
try to solve one problem and run into multiple morethats because you changed on the data-shortcode, but i said the name (i meant id and "for")
oke, I had to because the shortcode tag does not exist
or shouldi make a prefix and shortcode part as argument
as earlier I have problems to see what you exactly wants from me
that one should stay as it is
the rest, you can use the prefix variable
oke
so like this :
`
Then it works fine
so now writing the js for the client validation
so also add a call to the js file
the same way as did with the css
will costs me I think a few days
it will be easier than you think
but yes, the javascript file should be included the same way
I know
I did thiis earlier client validation
but also I have nog much energy because I had corona and stilll have some mental problems
so I cannot be coding for long on a day
its fine, i will be off available in 5-6 hours
oke
And give it uo for today
Done this :
but I do not see the error messaages so I do something wrong and I do not have the energy to find out why
be back online maybe if my daugther is too bed after 20:00 hours
you have a terrible mistake there
you should only handle the submit of the form, not a click on buttons
???
is that not the same by pressing the button I want to submit
I do it all the time with js
no, its not
one is a click on a button
the other is a form that is being submitted
you can submit a form in many different ways
chips, then some body has learned me very very wrong things in js
for example, the enter key or the send key on some virtual keyboards
oke,
So I have to find the form and make a eventlistener on submit ?
yup
and guess what?
all forms have a common data attribute
so, its not as hard as you may think
oke,
I changed the code to this :
that wont work because you are selecting any form, and not the ones you want
I call it a day
and maybe leave devloping at all
My "mentors" has learned me the last 3 years more bad things then good things I see more and more
how about you take a break?
im working now, and you need to rest your head
I will do that
in a hpur I have to bring my daugther to sport and having dinner
So now computer till about 20:00 hour (Amsterdam time)
At the moment no idea how I can take care that the right one is choosen
then focus on her for that time
I will do that
but I think the last 2 - 3 days you saw why im always get stuck at this sort of stuff
yes, but you also lack practice
which is fine
The onlu way I can be in the right form is getting the id
and as far a I know I cannot get that without the button push I think
and then we could fetch the subnmitting
you can get all the elements with the data- attribute, then select the forms that are children
oke, but how do I then know which form is submitted
you dont need to
the
this or event.target will have the formI do not
But that can mean that on a wrong form some validation errors are shown
nope
aha, so I know the form already
exactly
you dont need to find the form, it will be given to you
oke, back to experimenting to see this in real
you have to totally other way of thinking that I learned
after you implement that, i have something for you to add
but that is oke
so tomorrow
1) find all forms
2) find out what e.target contains
2) find out what e.target contains
today, you will add a reset button, with a few lines of php, css and 1 line of html
hmm, for e.target to be found there has to be a event ?
yes, the form submit
oke, I will try the reset button this evening or tommorow
good, we can try it later
?? now im confused
because for the submit I need the form but for the form I need a event
Now really time for a break
in 20 min I have to go
for the form to work, you need 1 thing, a button of type submit
thats it
and I have that
I did that in my old code and then you said that is wrong
yes, because you added a click event to the button
what if the form is submitted by pressing enter? or the send key on android?
pffff
that is why you change the code to listen to a submit event on the form, instead of a click on a button
yep
makes sense?
I did then this :
but that was also wrong
Can we talk tomorrow or maybe this evening for a very short time
yes, because
form is a nodelist, not a form
sure, we canYep when we use queryselectorall we get anode list
So now make a evenlistener on all form with as event the submit?
I have to wait a hour now
I have this :
but I cannot see
e because the browser reloads all the time
Is there a trick this can workdocument.querySelectorAll('[data-attribute="contact_form"]') <-- this should be the data attribute you defined for the shortcode
then, you can select the form
addeventlistener <-- this doesn't exist
addEventListener <-- this is the correct spellingI did that as far as I know
compare with what's there
sorry, but for me it is the same
or do you mean
data-shortcode against data-atributeyes
if it isn't exactly the same, then it won't match
and you will never find any forms or divs or anything
yep, now I can see what e exactly is
and think about the next step
and what's the next step?
Find out which of the two forms im using or are submnitting
e.target
target is not working because it is empty 😢
if it is empty, something is wrong
it is empty right now
you're on "i"
target will be afterI use now this js code :
just try to type
e.target instead of eoke
I see then this :
so still not the id of something I can indentify the form
you don't need one
oke,
so then the next step would be to find out what value subject has ?
no
what you will do is super simple
oke, still confused how you want me to handle this
make sure the
email field has the email type
make sure all required fields have the required attributeo, I thought I had to check if subject is for example not empty
and that email is a valid email
and so on
you can do that
do you want to implement it from scratch?
that was my idea
alright, well, then it will be a bit harder, but it's fine
that is why I made a check if subject has a length of more then 2
my 2 cts are that validation takes care that a userr cannot enter things we do not want
like a empty subject or so
or a very long subject
that's something you can implement
first, you need to implement an element that will display an error message
I have already placed this :
above the form tag
as the requirements wanted me to do
on top of the form? and not on each element?
yep
pity that is what the challenge wanted
then you should check all fields, and store all errors in an array
then, show all the errors after
if the array with errors is empty, then just let it submit or you submit via ajax
that is also my idea
and it was in the code I posted earlier
so still I think I have to find a way to see what is filled in the subject field of the form that is submitted
and thinking how to do if I know only the whole form with e.target
there's 2 ways:
1-
form.<field_name>
2- form.querySelector('[name="field_name"]')for the submit I also need your help
you don't need anything else besides a form
so something like this :
that wont work
there's no
<subject> elementthen tomorrow I have to find out how I can display the messages on the right places
also, instead of your comments, use jsdoc
and in php, use phpdoc
but that's for last
sorry I mean this :
did you add a class to the field?
never used jsdoc or phpdoc so no idea how those work
yep
I added that class
why did you add the class?
because I learned to do it like that on my "work" to heal from mental problems
so for every part I need to add :
do you use the class in css?
I do not use that class in css
that's sorta the idea
then the class is useless, and you can target the element by the name
then I have to add a name
right now the input does not have a name
a name is a requirement
all fields must have a name
oke, then I have to think well on a name
and the id in that input should end in
_subject
keep the ids descriptive
what's that field?it is the subject
then why don't you call it
subject?and I thougth the id was well yesterday
it's not descriptive enough
i didn't notice it
this better :
no, just
_subjectthen I have to dive into js how querySelectors work with the name field
input is redundant and only fills space
it's a css selectorso something like this better :
it is better
but, you can also do
form.subjectnope
when I do :
I see this :
that's because it's just
form.subject
console.log that
gives a message that subject is null
no, not that
read this carefully
This is my html
still very confused
this gives the same errror message
So I think we misunderstood each other now
and what's in the
form?in the
form variablea lot of things
but no subject or whatever name
show me the console log
that's not a form
that's a div
pfff
Then maybe this is still wrong ?
you have to select the form inside the div
??
it's not wrong, just incomplete
pfff, I call it a day \
I m more and more confused
i know, javascript makes it easy to get lost
you are a good teacher but it is sometimes hard for me what you exacrtly wants
must i place another querySelector to find the form
no
think about css selectors
how would you style the
form inside that div?normally I would use the form tag
but that, alone, selects all forms, which is wrong
but here I make a div around it which I use [data-shortcode] in the css
that's correct
so, how do you select the form inside it?
I would do
form.querySelector('form') no
that's not css, that's javascript
think only about css
oke
you're using css selectors to select elements, right?
then I would do
exactly
so, use that in the javascript
oke, you mean like this :
yup
when you stop and think about it, you can "un-confuse" yourself
oke
I have now this :
and now, the code works?
do you use the
.form class in your css?nope
remove the class
done
your
form variable should have the correct form nowyeo
form.subject gives now this :
nice, now you should have easy access to all elements
it isn't the best idea, but it works and it's easier for you
yep I think I can do now
form.subject.value yup, you can
oke, time to sleep
and tomorow think how I can show the errors in the feedback div
GN
just push errors into the variable
and thanks for the lessons
goodnight
I did
nice
first I want to be sure that I can show that message
before I can check if the email and so on is valid
that is a easy one I think
i think that that's a good idea
oke
I see now the validation errrors .
If the javascript is allright , I will make the css so you can really see the messages.
UPdated the repo and I hope you are happy
Next thing will be figure out how I can check if a email is right
I think I need some sort of regex for that L;(
hmm, still some sort of error
on the second form there is no error found
I assume that querySelector find the first one but not the second
querySelector only selects 1 element
well, you can use a basic regex to verify the email, and then do a better test in the server
I know, but when I do QuerySelectorAll I got them all
But then I have to figure out which one
what are you trying to do?
I try to display the validation errors on the right form
I cannot work for 2 hours because I get proffesional help for my problems
you just need to select the right div and throw all errors there then
preferably in a list
oke, I know use a p tag
i wouldnt use a paragraph, but a list
oke, first I wanted to see how to solve the prpblem that the error message is shown in the right form
Do you have any hints ?
yes: everything you need is inside the form
oke,
I tried this :
`
but then I see a message that the errorDiv is null
So please some help ?
js validation is working
see this:
I only need your help on taking care that it is on the right form
And how I can take care that the data is not send to the backend when the client validation fails
sorry, super busy at work and house chores
you should show everything in a list
also, white on red is painful to read
you should try the colors that bootstrap 5 or tailwind use
you take care of the right form by using the form variable. you stop the form from submitting by using
e.preventDefault();
there are 3 things you can do now:
1- submit to the same page
2- submit to ajax using an action
3- submit to an hardcoded urlnp
this can wait
I use the form variable already but then nothing works
as I posted the latest code here
you mean I have to choose how to submit from javascrript
or do we talk about submitting to the backend
I have tried number 3 and I think that is the easiest choice
we can then reuse the code in the process directory
yes
yes
it's the 2nd worst option, in my opinion
oops
I was hoping it was the best choice
but all options have negative effects anyway
there is no best
this better with the colors :
a little
but as I said first I hope to solve that the second form also shows the errors messages
I cannot make that work 😢
Alerts - Official Tailwind CSS UI Components
Alert examples for Tailwind CSS, designed and built by the creators of the framework.
try the colors from that
this is going to need a tiny rewrite
oke
I was already thinking of that
it's not what you think
I tried to solve it with the current code but could not make it work as I wanted
your code has 1 issue: all the names are the same
for all elements
oke, so we have to do the same as we did with the id's ?
so a change in the html of the form ?
did you push the code?
I thought i did but to be certain I push the code again
can you pin this?
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L7 <-- use jsdoc
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L48 <-- you're not using the form
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L38 <-- same here
I tried that already today and see then this message :
that's because you did something wrong
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/templates/form.php?ref_type=heads#L8 <-- hint
can that be because the user-feedback is outside the form ?
from inside the form, you're trying to get an element that's outside the form, right?
yes and when I do this inside the code works vey fine
and that costed me a whole day to find out
😢
you spent 1 day to learn that you need to pay attention where things are in the dom
you can't just chuck it to the f*ck it bucket and expect it to work
everything has to be carefully laid out and you need to think about what you do
Then we can think how we can make it work that if the client validaton fails there must be send no data to the server
but that only comes from trying
that should be what happens now
yep, you learn the best by trying, failing and try again
exactly
but it makes it also very very frustatiing because I doubt then a lot about myself
that's why you need to learn how to debug
and you can only learn to debug when you learn to pay attention to your code
I think I made the same "mistake"" then yesterday when you asked me about the form thing
I still thinking how to solve it in js but you mean look at css
that's because you're mixing stuff
and getting stuck at a way I think this can be solved
and forget that there are more ways to solve a problem
most important
you forget to stop and look at what you did and what you're trying to do
and by not doing that, you implement the wrong "fix" - but actually add different bugs
yep
by the way, im not "shitting" on you or something
or trying to bully you
for the jsdoc stuff I have to dive into how that works
Like I said i never worked with jsdoc or phpdoc
I know
im showing you what you did wrong, why it is wrong, how you can improve and then you can fix it without me
you should, it will help you massively
and I really appriciate the time and patience that you have for me
if you type
/**, vscode should type a bit for you
you're welcomeyou are the first real person who really try to help me to get into wordpress development
this is just general development, with some sprinkles of wordpress
wordpress is just php, but with extra bloat and functions
and i did learn some stuff too
for example, i didn't knew you could register the styles and css, instead of enqueing
That is developing. You never stop learning
things like css changes a lot
precisely
and there will be new versions of js or php who does things different
Or like wordpress the developers change the ide from pure php to react (gutenberg)
i strongly dislike the guttenberg stuff, but metabox makes it easy to write blocks
I make last month as a challenge my first block and I found it not very difficult
But I think if you look at it, you stll find a lot of issues
probably, but that's how everything is
still googling what to put here :
just
@type arrray<string> ?https://jsdoc.app/tags-type
check the examples
I did
and I think it schould be
pff discord messed up my indentation 😦
can you take a screenshot of the mouse hovering the variable name?
well, that's not proper jsdoc syntax
im surprised it works
😦
that's the example
oke
changed it to
`
that's still not proper syntax
hmm
look at the example
I was looking at this ;
look at what you have
i know, but get into good habits
yep, you example says I could be a string or a array of strings
yup
that's right
in my code it can only the the array of strings
yes, that's right too
wait, I can also be empty
an empty array is still an array
it's an array of strings, with 0 or more strings
and according to the text I can use
string [] to indicate that it is a array of stringsyes, you can
other languages use it
so sorry, I do not see what I do wrong
well, the "proper" syntax is the horrid
Array.<String>
that's all
it's not wrong what you've doneoke, changed it and see no difference on the hover
but to go back to my question
you shouldn't
you did nothing wrong, by the way
what is then "better" then using a fixed url for the submitting to the server for the server validation when the client validation is a success
oke, I got the feeling I did something wrong
well, you didn't do anything wrong
I was hoping we could re-use my process/index.php file
well, i wouldn't keep that name
that can easily be changed
but you said of the 3 that was the 2th second worst solution
I was also looking at that ajax thing but im totally do not have knowlegde or xp with it
all solutions have downsides
as always 🙂
these are the solutions:
1- submit to the same page
2- submit to ajax using an action
3- submit to an hardcoded url
there's no "best" solution
there's the worst one, which is #2
and with 1 , you do everything in 1 file and I like so seperate things
so still Im thinking of 3
sadly, it's the best option
for you, that is
i would implement 1 and 3, but, it's for a challenge, so, 3
with 1 you make more functions in the mycustomForm.php file ?
or in the form.php file ?
or in a functions.php file
and you use the same function to submit
oke, but for the challenge that would not work
bcause I cannot send the functions.php with the submission
so yes, 3 is then the best option
it actually works, because when you submit to yourself, you can detect it
??
oke, then we have to rewrite this line :
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/process/index.php?ref_type=heads#L7
I do not like that part
calm down
because I cannot return more then 1 validation error
breathe
lets implement the javascript to submit first
oke, I only tell what I see what im thinking what is wrong with my current soluton
??
I thought we did with the addeventlisteners
no, that's to do client-side validation
oke, I wait and see
right now , I have no idea what your way of working is
i just go with whatever there is, because i can use anything
oke,
but you were talking about js to submit first
yes
and I rather use plain js becuase im most familiar with
and for that, you can use either xhr or fetch
i recommend fetch
yes. I know js fetch with a lot of .then 🙂
you can make it a lot easier
but with fetch we need a url and we cannot know on which url the site is where he plugin is used
yep, you can use await 🙂
this is where we can be sneaky
you can set the form action to the url you want to submit the form to
yes I have seen that
you can also get the plugin url with wordpress
in my old code I use process/index.php as action
yes, with plugin_dir
now, we can do the same
yup
or something like that
oke
still no idea how the action and js fetch work together so im waiting
basically, you use fetch to send the post request to the url in the form action
sorry, sounds still abracadabra to me
if you read it slowly, you will see that i gave you the answer
if you do not mind, I will sleep about it
i dont mind it at all
Right now I still not see it at all
it's fine
sleep on it
it's a shitty pillow, but it's fine
I know
but my brain in not working properly because im more tired then yesterday
i understood, it's fine
just rest
and even with google. I do not see how fetch and the action can work together
tomorrow, you will see
I hope.
Most of the examples I find is using admin.php to handle this
i know, but that isn't a good option
GN and I see you tomorrow afternoon or tomorrow evening
I think I use the morning to sleep a lot
goodnight, and rest well
you too
thank you
YW
or do you mean something like this :
and that in the js file ?
something close to that, yes
pfff, again almost
yes
invert the logic and your code will be more readable
also, since you will never have a negative length, you just need to check if it is falsy or truthy
oke
So I can do :
no, you need to check the length
if the length is truthy, just return
changed it
now better ?
if you show the messages and return, you dont need the else
oke
So like this :
and I think you want a post fetch ?
yup
you should actually have the code to show the errors in a function
oke, that schould not be a big problem
and it looks I need some sort of Formdata
so we can use it in the fetch
and figure out the url of the fetch
I seem to remember you do not liked my old formdata function
I do not like it because it is jquery
you can create a form data by passing the form into the constructor
constructor ??
We do not have one at the moment as far as I know
I think you are going faster then I can
try checking the mdn page for the formdata object
you will understand what i meam
mwan
mean
yep
As I read it fast , It the same as I did in my function
yes, but you can pass a form to it
yep, I saw it on another mdn page but there they used a class and our form does not have a class or id
or can I just do
because we know that form contains one of the forms on the page
all it needs is a form with inputs
???
the formdata only needs a form
I thougth the form variable holds only the form
yes, it does
it shoukd
should
and the formdata is what you send over fetch
oke
so I have now this :
I did not fill in the url because you did not like the
./response/index.php urlyou cant await: the function needs to be async
yes. I saw the errror message
VS code makes now the whole loop async
but I think that is not good
send here the code
code is pushed to the repo
i cant see it now, only in about 1-2 hours
o
wierd
im on my phone
and working
oke
We can wait till your home and have eating
im always at home
oke, me too
except on Mondag an Friday Morning
or I can do it like this which I think it is a cleaner solution
Which one do you like the most ?
this won't work
^ this will probably work
oke, so we should go for the second approach
then I also hope we will agree on the url
the url is kinda up to you
but in this case, it just needs to be the form action
oke, and the form action is now still #
yes, but you can change it
maybe make a file called backend-validation.php ?
it's not validation
you'll be submitting
oke, submit-backend.php ?
i wouldn't include "backend" on any name of anything
hmm, then at the moment i out of ideas for a better name
but if I enter it on the action is my fetch then working ?
not yet
there's something you can improve
pfff
and again no idea what
you're creating a form data - which has all the values from all inputs
but you're also accessing all inputs manually
I wonder more and more if this is something for me
Maybe I should stick with just frontend wordpress things with gutenberg
so, why don't you use the formdata and get the values from there?
instead of javascript and php, you will do javascript and php?
no php, just some json work on theme.json and just click and add the things I need
For my first template I do not need any php or javascript
but how do you mean use the formdata from there
In the backend validation I will using that data
dude, forget that the backend exists, for now
just front-end
instead of you manually getting the values for all the inputs, for the validation, you can use the formdata
oke, I could but then I think I have to rewrite the js
barely
because right now the formdata is used when all the validation is a success
yes, but you can move it to the top
oke
I think it can be
then I have to rewrite this part to :
yup, you just need to grab the values from the formdata
I think I need to see how the formdata looks like
you should read the mdn page about it
oke
When I use this , it seems to work:
`
I see the validatiion errors again
it should
nice!
tomorrow work on the server validation ?
Or am I going to fast?
tomorrow, it is server side validation
Oké could i name it submit.php
that's a much better name
oke,
Them I will make a file called submit.php
in that fle sanitaze the formData
and make a check
I have to see how I then make a error-message when the validation fails
I can use WPError and return that mabe
GN
you must use a wp_error object, and then you simply send it in json
otherwise, send a success message
goodnight
I think I can send a success message when the mail is send . not earlier
you either send an error before sending the email
an error after sending the email and it fails
or a success after the email sends
Can I do this :
no, you cant
thats why you use the form action
oke, and how do I do that ?
the form action now looks like this :
`
Did some google
this better :
that is much better
almost: the first argument is the path to the file inside the plugin directory
by using
__FILE__, you are referring to the template fileoke, so it should be
__dir__nope
if that is good , then I have to find out in which format the submit function gets the data
^ should be that
it gets as an x-url-encoded string
yes, it is in the root of the plugin directory
then you need to put that
sorry, but this looks good to me :
you need to remove the slash
oke done
that should be it
oke, then now find out how that x-url encoded string looks like
that is what the fetch sends
so I know how I can make this part works :
in submit.php
yes
but you need to load the wordpress environment
yep, like this :
yup, depending on where $path is
path was on the tutorial this:
that should work
oke, then now google how I can get the contents out of that x-url encoded string
I have no idea because that has no variabe that holds things
just ignore it for now
try to submit
???
I thought I did with this code :
does it work?
nope, something is broke
the form is all messed up
and now its looking well
and submitting is not working
not a very clear message 😦
or could it be that submit.php does not send anything back
then it works
it means that whatever is being sent isnt json
yep, it is this line
it is expecting json back from the submit.php file but so far am I not in the code
when I delete that line.
I see no error messags but also nothing seems to be happening
and a status of 200 in the network tab so the submittng seems to work
and I see this
which also looks well to me
what did it send?
???
it send the data that I put into the form in text/html format if I may believe the headers
dont believe the headers
oke
what's returned from the server?
so it I understand things right I can use things like
sorry, I now have the guess the answer
No idea where you are heading to
sorry
im just heading for you to check that the server isnt returning an error
it does not
like I said earlier the server gives back a 200 oke respons
and what else?
sorry, still no idea what you try to ask and what schould be the headers
not the headers
the content
the headers can say it is a png
or even that it has no content
oke
but what that have to do with reading the values of the form in submit.php
I try to solve that "problem"
you already did that
once you send the formdata, its done
the server does it all automatically
oke,
you just have to use the
$_POST variable
thats itStill confused how then to make this work :
`
thats it
also, trim the result
but, you should only do it when presenting the text
if you're not presenting, just stop
dont use that function
oke
de requirements said that I have to use that function
I have to sanitaze anything
Then I can do :
and how did I do so far :
if it's allright, I have to figure out how to convert this to json and send it back to the fetch
and figure out how to handle the json from there
Because in the end I can be two things
A Error or a Success
time for a break
you can send data with wp_send_json
found that out
Code looks now like this :
`
now think how to handle things in the fetch part
check the data being sent from the server
then adapt it to fit the function that shows all the errors
oke
but as I said the response can be a Error json or if the mail is send a Success
I mean I have to figure out which 2 it is
The errrors schould be in red and suceess in green
oops, I forget to check the nonce
back to google to see how I can check that one
wp_check_nonce
or something like that
first, make sure you understand how an error message looks like
then worry about the success message
then worry about implementing in javascripf
that is what I try to do
First think hpw to display the response here
or here :
\
chips. still something is wrong here :
code :
and there has to be a error because I deleted the nonce in the form
and again no clue where things go wrong and the error message does also not give any clue
any clues ??
hmm
It seems that the nonce check is not working
no idea why not
There is at the moment no nonce avaible
have you checked what the server is returning?
as I looked at the response tab it seems to return the whole page
makes me more and more confused
I have said it has to return the errors object
whats the action in the form?
show it in the element inspector
I also did this :
`
but do not see any output
did you checked the action?
its correct there
can you add a console.log before the fetch?
and show the form action there?
he. when I click on the url I see this :
thats later
Then I see this :
so looks good to me
is the website in http or https?
I think http
then can you check?
if I look at this page it is http
Laragon - portable, isolated, fast & powerful universal development environment for PHP, Node.js, Python, Java, Go, Ruby.
Pretty URLs
One of useful features of Laragon is Auto Virutal Hosts Just put your project (ex. mysite) in the Document Root (C:\laragon\www) and click “Reload“ button, you’ll have this pretty url:http://mysite.te
if you click to edit the website url, is it http or https?
http
if I change it to https I get a message that the site is not safe
thats fine
🙂
and somehow it looks like this line is not good
thats because it will throw an error if it doesnt exist
you need to protect your code the same way you did with the $atts array
you can even apply the trim to all values in the post variable
oke, so use
esc_attr ?no
thats sanitization
or do you mean this :
but why do I have to protect it. I check the values after it and when it's not valid , I make error messages
sorry, I totally do not understand what this has to do with that the json returned is not in a good format
well, you have to assume that
$_POST is empty
and that means that it can have anything
you have to make sure that it has the keys that you needoke, so just as thet say never trust a input from a user
yes
also, garbage in garbage out
that's why you don't sanitize
just cut it from the root
oke, so i have do again the array_replace thing ?
if it is invalid, it's garbage
yup
hmm, then I have to think about the last argument
what last argument?
there's 2, and they are both arrays
or can I do something like this :
?
?
yup
oke
So I can do :
well,
atts is a terrible name
for this situation, that isoke
also, why are you repeating the code?
I want to make it work first
Do I repeat things ?
so the last part can be deleted ?
^ repetition
because wanted the values into variables so I can use that in the checks
you already have the values in variables
oke , so I can delete it
the variables are, currently,
$atts and $atts and $attsoops. that is not good
yes, you're repeating
as far as I know I can do this :
that's not valid php
hmm, do we not miss the nonce thing
yes
I think I call it a day
This makes me very frustating and very stress full
And that is something I do not need at the moment
i know what you mean, just take a break and relax
I will
and will think if this is what I really wanted
You are a good teacher but all the problems makes me crazy
I think this challenge is more then I can chew
you lack practice and experience
that's all
you've improved on your google skills
oke, but I still do not see why the array destructing is not good
but with experience, you will be able to do this basic stuff by yourself
Looks good to me when I google
because it doesn't exist in php (at least not 7.4 and older)
there's a proposal for the syntax, but don't think they implemented everything in it
also, why are you separating all the array keys into variables?
that's something i see lots of people do, more often than not for no reason at all
as I said earlier. then I can check the variables if theyt have a good length or if they are a valid email
okay, but lets imagine that the array destruction assignment works
like I do here :
what do you expect to happen if there's 5 keys? or 2 keys? or 50 keys?
Then I have a very big problem
why
$subject instead of $array['subject']?
why duplicate values all over the place?wtith 5 I can make it work the same way but with 50 it will be a very very big line
you have to remember that you have absolutely no control at all what-so-ever in what you receive
oke, so lets name it $array instead of $atts ?
I do not, even if the form has fixed fields ?
i would call it
data or post or request_data or post_data or something more explicit
anyone can send anything to your script, including nothing at allpfff, I see more an more that on waht he calls junior challenge has a lot of things I would not think of
this is an intermediate challenge, in my opinion
but im not a junior yet and no idea if I ever will be a junior
well, that's up to you
do you want to finish or give up?
for the intermediate, He makes it that the fields has multiple unknows fields and store it on a custom object
that's a tiny bit more advanced
oke so for $subject I can now do
$data['subject']
for me a challenge I do not want to try
first learn to make a custom object with fixed fields before I m going to try on dynamic fields
maybe in a few monthsmaybe, but you need practice
a lot of practice
I have now this :
`
I need to add that nonce part somewhere in the array_replace
and figure out the right way to check it
but for now I will take a break tiill tomorrow afternoon if I have then energy
strlen($data['subject']) <-- this has to be with the mb_strlen function
strlen basically counts bytes
if someone sends a poop emoji, it's 1 character, but strlen counts as 4changed on both places
$data['emai'] <-- watch out for misspells
install the cspell plugin to avoid those
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
im not telling you this to speak bad of your englishCan I do this :
and then change the check to this :
im telling you this because you will have bugs that take hours to debug, just to see that there's something wrong
i would verify the nonce anyways, even if it is empty
to avoid timming attacks
???
And how do I do that
wp_verify_nonce($data['nonce'], 'submit_contact_form') <-- just thisas I see it I verify it in the if then ?
yes
and in fact, you should verify it at the top
wait, no
verify at the bottom
then it is possible to do a timming attack on the nonce
should I not be
!wp-verify ,,, yes, it should
because I want to place a error when it's failing
just verify it at the bottom
oke, then we have this part
is this good ?
you don't need the return, but yes
I wanted to check if the $errors has a value but it is a WP-error obejct
but, make ALL your errors translatable
this is perfect
this looks better :
nice, it works!
yep, no error messages again
now I can look how response looks like 🙂
probably responsive enough
damned
but, you didn't finish the backend stuff
the old error back
`
that's what i told you
oke, I was expecting a message that the nonce is not good
because the nonce is not existing
if I see that I was thinking about the part of sending the email
what did you get?
that stupid annoying error that the json is not good
what did the server sent?
this :
a response object
that's not what you get from the server
that's what you get from
fetchoke
what's in the network tab?
this
what's in the 3rd tab?
this:
and the 4th tab?
so in English : no payload for this request
that's weird, but okay
the form :
also very very wierd
so, there's something wrong with the server
oke, big problem
I use laragon and that one makes the server and so on
if you access the url directly, what do you get?
what is the url directly ?
this
go to that url
then I see this :
so it looking everything is then wrong 😦
this looks better
but when I try it on the form
I see the same wierd outcomes
I see the same wierd outcomes
🤔
did you try making sure it is a post request?
yes
console.log() the
form.actionthat's not how you use that function
https://developer.wordpress.org/reference/functions/plugin_dir_url/
read the documentation on it
form action is :
you will see the error right away
just read it
I did
and I think it schould be :
what's the name of the first argument?
the file name
and what are you passing?
A DIR
yup, which is "wrong"
it "works", but isn't what you want
oke
When I do this :
I see on the 3th tab my data
and on the 4th tab nothing
you have an error here: the extra
;
show me3th tab
4th tab
not good
the submit is gone from the action part
so back to the manual
^ add this
https://stackoverflow.com/questions/35325370/how-do-i-post-a-x-www-form-urlencoded-request-using-fetch <-- took it from there
i hate the
fetch weird thingy, always gives some sort of issueI call it a day
I have this as action
and it gives me on the 3th tab
and this one the 4 th tab
that is bad data
im surprised that php didnt return an error 400
im still thinking that the action is wrong
but I have no clue what it schould be at the moment
no, it shouldn't be
so this is good :
when I look in my html the submit is totally missing from the action
and I saw this example
but then I get a 404
wierd and stupid php server
no, it's you who's being a dummy
but that's due to lack of practice
thanks for the compliment 😛
<form method="post" action = "<?php echo plugin_dir_url( 'submit.php') ?>"> <-- stop putting whitespaces all over the attributes
<form method="post" action="<?php echo plugin_dir_url( 'submit.php') ?>"> <-- this
stop putting __dir__ inside the function
echo plugin_dir_url( 'images/placeholder.png' ); <-- thisthat is a example of the page you linked too
you have to read the documentation and pay attention, specially to the examples
wait, sorry
you're right, im wrong
i taught you wrong
oke
your action gives me back this :
you had it right before
that's still wrong data
yep
but what is now the right one ?
show me the generated html
just the form html
yeah, the action is wrong
probably because of what i told you
<form method="post" action="<?php echo plugin_dir_url( __FILE__ ), 'submit.php' ?>">
but, better yetand whenI do that
<form method="post" action="<?php echo esc_attr(plugin_dir_url( __FILE__ ) . 'submit.php') ?>">
^ use thatthen I get a 404
show the html
and when I change it do
__DIR__ I see the form back as answerralright, show me the html
oke
it now adding a templates part which is not good
that's the wrong url
and when I change to
I got this as url
__DIR__I got this as url
then use whatever produces this
but then the 4th tab is showing garbish
very very wierd
and it makes totally no sense to me
but as I said I take a very very big break
it's showing garbage because of the
fetch
did you push?nope, I can push to the repo
push it
did it
the problem is here
try this
sorry a 404
that's because the
url is not a string
you're passing a form elementoke, so I have to hardcode the url
?
because in myCustomForm.js the url is not known
no, you just pass the
form.action as the 2nd argumentyes, that was the trick
I now see the error mesage I expect
finally
tomomrow on my list
Make the email
Try to send it
because right now I know that everything is oke
well, making the email is stupid easy
I know
I think I can borrow the code from the tutorial
NO
BAD BAD BAD
then check if the mail is really send and send that back to the client
oke, then I have to find a better tutorial or explanation to make the email
you do the same thing you did to render the form
but you use the output for the email
oke, so make a html template for the email
Also that I have to find out how to do that
the exact same thing you did for the form
but you use it for the email
wp_mail($to,$subject,$message); <-- then use this to send the emailI hit the shower and goto bed
Otherwise Im not awake when I have to goto work tomorrow morning to work on learning to make block themes
dude, you should hit the shower and go to bed
but you aint learning any "block themes" tomorrow
im not ?
How do you know what I do at "work"
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/mycustomForm.php?ref_type=heads#L16
remember this?
from me, you won't be learning it tomorrow
IM work on converting a html template to a block template
at work? yeah, you do you
but im talking about this thingy you're doing
at home I work on this annoying problem
🤣
"annoying"
that will be tomorrow afternoon, evening or in the weekend
I have to see how many energy I have at any moment
GN
you're almost done
don't give up on the finishing line
yep, annoying too much things that eats up at lot of time
I won't
but as I said I have to see how my energy is at any time to see what I do at a moment
it does, but that's lack of practice and experience
and a good mentor who teaches me things step by step
pty you do not like react otherwise we could look at my first challenge where I had to make a custom componet which displays a testimonal Card
IM sure it cannot work with multiple Cards and I know it will not work when placing in a group
GN
it's not that i don't like react, it's just that there's better things for me to learn, like svelte
and im always so tired after work
goodnight
Svelte I tried also , just liek Vue and React
Svelte has the most readable code , Never tried the new version where the introduce runes
it this good
almost
the variables will be different
you need to pass it the post data
So change
$atts to data
and do we really need the content part ?no, it will be empty
you wont need the prefix either
oke
?
looks good to me
but load_template doesnt return anything
you have to capture the output
oh, and YOU MUST WRITE THE EMAIL IN HTML4 WITH LITTLE/NO CSS
assuming you care about compatibility with garbage outlook
I know I have to capture the output
Can I do :
then for the email I then have to find a html4 template
THe form uses a lot of css
yes, you can do thay
that
you should look for a good email template
What do you think of this one
http://leemunroe.github.io/responsive-html-email-template/email.html
we can use it I think without the button and some other text
so much css
try to send that html in an email to an outlook account
oke, then I have to look further
Take a break and could not find a better template
email templates are a hell because every email reader has other things that they can or cannot do
yup
and in the end, you have to implement with tables because of outlook
Chips i forget hoe to do that with tables. I like flex more
So i really hope we Will find something
I connotatie find anyrhing
its stupid hard to make emails
so, just do a single-page website, basically
oke, but the challenge said we have to send the data by email
Could we not make a plain text one
as the code from the tutorial does
so stuck again and that with the flnisch in sight
you can have a plain text email, but that is ugly af
you could also make something super basic in pure html too
I know
I have to think how I can make that super basic one
a table
thats it
I found a lot of nice ones but thet all use inlne css toa make it look better
oke
so a table where at once site the name of the property is and on the other side the data entered
I think without some css it is still loking ugly
that is fine
but test it yourself
many look like absolute 🍑 on outlook
oke
what do you think of this one then : https://codepen.io/timtoews/pen/bGGZjdL
it's nothing spectacularly gorgeous or anything, but, it seems alright
lots of inline css, but, it's fine
oke, if you find here a better one we use that : https://codepen.io/tag/email-template?cursor=ZD0xJm89MCZwPTM=
https://jsfiddle.net/yfx7r9jp/1/ <-- if you need inspiration on how to layout with tables and styling with font
Kevin Powell's challenge #1 - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
over 700 lines for not a whole lot :/
it has a whole css reset in it
it looks good, but writting in that will be absolutely miserable
We can use a sort of card
how about this one?
I have seen that one too
Could be also fun
i can see this being a lot easier than all others
have to think how to make the text
Maybe something of this :
as header ;
the buitton we do not need because I do not want any action of the user
🤔 you can just use variables
Yes i could instead the name use the email variabele and add the subject somehow.
Have to think hoe because my english is not so good
well, you have the data sent from the form
Yep i know
Like i said earlier how to use these in a good english sentence(s)
just write lorem ipsum
Lol
hey, you gotta start somewhere
That is right
so, just go for it
Oké boss
🫡
And still think i m a 7 student?
i do, yes
you search stuff, accept advice, improve, implement, get frustrated and rest, but don't give up
Happy to hear
Like i said earlier myself a lot
Not much self cofidience
well, you won't be confident until you do it more often
oke
just keep practicing
oke
I wrote the firs attempt to make the email pretty.
I hope I did a good job
For me time to sleep
@import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700|Open+Sans:300,400,600,700); <-- do not use this
of all the bad ideas, that one is one of the worst
it isn't your fault, but it's horribleoke, I just copied it from the example
but it is deleted
i know
i didn't notice it
np
fonts like that should never be part of emails
also, google fonts violates gdpr
google uses the ips and sells that data to advertisers and others
oke, never learned that
a court in germany rulled against google on that
when I solve some Front End Mentors challenge , it is told to include google fonts in the css or in the head
you can leave the font-family as it is
that's for convenience
oke
so next would be to set up a mail server and try to send a email tomorrow ?
this is why google now offers an option to download the fonts
🤣
😂
are you insane??? 😂
just use fakemail
no im pleasantly disturbed.
is that a plugin ?
no, it isnt
it's an exe that fakes being an email server
oke, just another round to google
xampp already comes with it
maybe you can find it online and set it up
I do not use xammp but laragon
i know
hmm there is something wrong with the nonce thing
yes, it's missing a
(oke
this was the test:
🤣
time to sleep
I still do not see it
https://developer.wordpress.org/reference/functions/wp_nonce_field/
read this carefully
I will do it tomorrow
maybe I see it .,
Right now I totally do not see what I did wrong
the name of the field is different
really time to sleep
that should be it
still the same stupid error
but you're forgetting the first argument of
wp_nonce_field???
the action
oke I think I got that now
and now a lot of other errors to solve tomorrow
yes, for tomorrow
its easier than you think
yes
I made a error here :
yup
that's one
the args['data'] is wrong
have to think tomorrow well what it schould be
it's what you pass to the template function
that would be a data variable
if I did this well
that's out of context, but looks like it
I mean to paste this :
yes, you did it right
$prefix = esc_attr($args['prefix']);
$shortcode = esc_attr($args['shortcode']) <-- except this
???
it fails on the array_replace on the second argument is null
that should be right
so it looks to me that
$args['data'] is wrong somehow$data has to be an arraythat's what i said
here
sorry , it late
the error is talking about this :
that's kinda right
im totally confused
it is for certain this one :
$data doesn't exist on line 3 of email.phpreally time to sleep
oke but $args also not
$args has to exist
$args['data'] may notoke
tomrrow I will look what it should be
just do a var_dump of everything
so
???
I will do tomorrow
I almost fall asleep behind the computer
just go to sleep
you won't do anything today
i say to do not give up, but im not telling you to torture yourself
I know
then go to sleep
It in my character to want to solve it now
rest well, and we do it tomorrow
you won't solve it now
I cannot stand that its not working
you will waffle about like an uncooked chunk of batter
YOU HAVE TO
it's important to learn to stop
and this is your cue to stop
stopping, resting and solving
that's how it works
awake after a bad night because of the proffesional help that I got yesterday
But this looks good to me :
this is the args variable
oke, data looks also well to me
so the problem is this line :
`
it does not know email
and alsp subject but it seems that it displays some empty string for it
hmm, everything seems to work except I see this:
but there is no $email on that line
there is no$email at all in the submit.php
and wp_mail gives me :
but it is with a email catcher solved
but it is with a email catcher solved
and I like it :
now find out why wp-mail fails and how I can make a fail or success json file
and then find out how I can know if I need to display a fail or success message
I think the best way would be the iterate the array or json
and if that works clean up de css and make the toaster look nice
and then finally ship it
wp-mail probably fails because you dont have anything to send emails
oke
then I have to think how we return back a success or a fail/error message
or we can :
wp_send_json
you have to shape the success message to look like the error message, but indicate a success
oke, so like this :
and after that we can do :
and submit.php is also ready ?
no, just send a wp_error when it fails
and no, no redirect
no redirect ??
he
there is something wrong with when its not a success
that's the output of the email
yes., I expect only the error message back
can you show me the code?
the whole file ?
of course
you have to capture the output and pass it to the email function
oke, I thought I did it here
nope, you forgot
oke, then back to the manual to see how I can capture it
we've did that before
???
Did we
As far as I know this is the first time we using wp_mail to send a mail
time for dinner
and mu brain is not doing what I hope. It's very foggy
take a break, you moved forward on your own and that is really good
yes, we did
???
not with wp_mail as far as I know
no, but we did before for something else
got the feeling that you try to find me this :
because there we send something to the server
nope
where did you used the template function before?
on 2 places if I have it right
one is here in the head file :
and here :
but I think that is not what you asked me
because we do not fetch the data or outcome
so im still in the dark
in this one, what's around the function call?
a,
ob_start and a ob_flush ?
and that one is not on the email template thingyes
yup, exactly
but you have to use it, because the template function doesn't do it for you
oke
can I use it around the wp-mail ?
Otherwise I have to think well how to change the wp-mail call to include that
no, you cant
you have to get the output before you call the mail function
oke, more thinking to do
it's not much thinking
you just move it outside the mail function
oke, but what schould I then place instead of it
wp_mail needs the data to send
a variable with the output
oke, I will think and sleep about it
Right now I have this :
but still fail totally to see how I can a variable here
what's happening on this one?
it loads and execute the template
and what's around it?
a buffer
paste the code here
which code ?
the code around what's displaying the form
I did that already
i'm talking about the code around this
yes
Im too
then paste it here
that is this code :
that's the email, not the form
oke, sorry
but i was going to ask for that code anyways
now, compare both
what's different there?
the "word"
return is missing on the first onehow about this: make me a list of all the differences between both pieces of code
this is important
and the function is called
ob_end_flush instead of ob_flushoh, you got there!
that's right, the function is different
changed it
but, you can't return the value, which means that ... ?
I have to put it into a variable
exactly, and give it to the email function
which is the question I asked a few minutes ago
How to do that
replace return with the variable
did it already
but still do not see the error mesage that the mail has failed
I see the whole email and still at the submit.php file
what do you have now?
can you send the code?
of the whole file
of course
no
just the part around the email function
I will be away for the rest of the evening
See your remarks tomorrow
that should be it
wp_send_json(["Error", "Mail cannot be send"]); <-- you should send an errornope, still see only the form on submit.php here locally
and the site still stays on the submit.php url 😢
wierd
When I look at the email send I see this :
so the email variable is not used and the message is gone
I think we have to change the content-type to text/html somehow
weird 🤔
https://developer.wordpress.org/reference/functions/wp_mail/
i made a mistake
ob_end_flush must be ob_get_clean insteadoke
right now I see a white page on the submit url
good
as you should
except an error message
When I do this :
the email looks good to me
oke, but how do I get my form back so I can show the messages
you don't
you send the email over the
fetchbummer
so the user never sees the message if the email is send or not
not happy about that
that's the job of the javascript and json
oke but as the user do not see the messages the json has no meaning
one of the requirements was that the user sees the form and above it the messges
that's what the javascript does
you don't do it from the other file
I understand but right now after the form is send the empty submit page is shown
and not the messages if the email is send or not
And the requirements said I have to do that
if the form is submitted, it should show the errors sent from json, or a success message
in javascript
like I said that is not what the requirements of the challenge is
THere is a stated that the messages are shown above the form
I told you that several times
then implement it
you received the message in javascript
you have half implemented already
That is why I want to use a redirect to the form with wp_redirect($atts['refer'] )
that's not going to work
but you told me not to do that
i told you not to do that because that wont work
oke
then I have to think how to make it work
maybe again use the load-template thing ?
no, you do it in javascript
oke, then I have to think how
I know the form is in form.php or in the page where the form is used
did you checked the json you get?
yep
on the answer tab no data on the network thing on the answer tab
nothing at all?
nothing at all
you probably have an error somewhere
vscode should tell you where
also nothing to find
in that submit file, by the way
no red lines
you didnt enable the wordpress stubs
I did as far as I know
check it
that's not the wordpress stubs
it's a vscode setting
or do you mean the plugin
yes
i installed this ones :
why?
because I thought and you told me to use them
do you have intellephense installed?
yes
no, that's some random plugin
oke
which one do you then mean ?
oke
installed it
uninstall all the other random stuff
oke
no problems found
now, enable the wordpress stubs
go to the plugin settings
you should have a huge list of items with names
at the end, click "add item" and type
wordpressyou mean in this page ?
no, in the settings
vscode settings
it was already enabled
and still no problems found
and the functions now are showing without yellow lines?
sorry, yes
I told you some minutes ago that there were no probems found
and there the yellow lines disappear
good
something is weird then
and the 3tab is still empty
yep
again
all the code is pushed
i will check in a bit
oke
take your time
here almost time to sleep
take a break
I will
I cannot do anything at the moment
have no clue where to look
same, but im playing overwatch at the same time
oke
I have nothing wth games
but if you enjy it , much joy with it
try commenting out the output buffers
he
when I do it like this :
then I see again a message that data is unknown here :
this one :
I thought we solved that one
code seems to be very fragile and I think that is not good
add a var_dump() before it
dump the $args variable
you misspelled the key somewhere
seems well to me
can you take a screenshot?
not there
that's bad that it does that, but that's not where you're supposed to see it
I agree
the error messages are very very cryptic
i disagree
you're doing it wrong
that's why the variable doesn't exist
???
add this to the top
same problem when I add this to the top of the mycustomForm.php
oh, wait, you're doing it kinda right
add
(array) before $_POSToke
I have to look again where I used that
and then, you need to throw an error when it isn't a post request
oke
where ?
because I still see the same annoying error
right at the top of the submit file
oke, I will tr y it tomrrow
feel very tired
the problem is that you're trying to access
$_POST when you're doing a GET requestyour sure
yes
If I change $POST to GET I get a lot of validation errrors
because you're doing it wrong
keep it at
$_POSTGood morning
how do you mean this then ?
when you access a link in the browser, it's a GET request
yes
So in the same function we did the post we also have to write a get fetch ?
nope, I get now a 500 error when I do this:
and still a error message that data is not existing which makes totally no sense
and this gives me also a 200 error :
but no fetch on the network tab
is the wp_send _json not wrong ?
if I read it , it sending back to a ajax request but as far as I know we are not using ajax
I try to find out why I do not see a get request in m y network tab
any hints
did you push to your gitlab?
oops. I forgot
last version is now pushed
this is wrong
you're sending a post request
then you do nothing with the result
and then, you send another get request
oke, how do we do it then
1 single fetch - the send_to_backend
im still try to figure out what you mean with this line :
that was when you accessed
submit.php in the browser
not from the code
what you do in the code won't be what you do by accessing the url in the browseroke
then there I make a thinking error
more like a misunderstanding
oke, so now I have to figure out how and where to make the redirect so I can show the output in the form
you don't make any redirects
that's why you wrote everything in javascript
yep. I see it now
I still see the form and not what I had that the browser stuck at submit.php
what do you mean?
chips. now I get a 500 error back on submit.php
and this error :
damned
again this annoying error :
you didn't do what i told you to do with the submit.php file
sometimes I seems to be gone and then it pops out again
What do I forgot then ?
task for you to do:
- detect if it isn't a POST request
- create a wp_error with an http 400 error code
- send the error over json
this, at the top of the submit.php file
so like this :
`
instead of adding an error, you can set it in the constructor
oke
but yes, that should work
you mean like this :
"this is not a post request" <-- instead of this, just say "Bad Request"
also, it's 400, not 499canged
and now, what do you get?
only a get request
🤔
but the function does a post request
that's literally impossible
and as answer the form as html
show me
that's the wrong url
but
the initial is "document"
🤔
did you submit the form?
yep
you sure?
oke, did I again and see now the 500 back
not funny
what's the error?
same stuipid error as before
that's literally impossible
can you push the code?
and this is the beginning of the submit.php code
of course
psuhed
i will test this in a local server
oke
I have to leave because my daugther needs to go to sport
so from 16.30 till 18,30 im not behind the computer
that's alright
i found one big issue
you're still using
ob_end_flush??
where then
I cannot find it on subnit.php
in the plugin file
oke
oke, so it has to be this :
if so , still the same 500 error
// return ob_end_flush(); <-- this is wrong as well
you have to replace ob_end_flush with ob_get_cleanoke, but you told me a few minutes ago to comment that out
no, i just said it is wrong
oke
changed it but still that annoying 500 error
that's fine, can you push?
I did
and I have to leave as I said\
that's fine
I will read your coments after it
well, the form doesn't work at all
there's no event listener here
the url is misspelled
after fixing the name, it's working
you have a bug: even valid emails are invalid
Wierd on the frontend i see the validatie errors
yes, but it's always invalid
wait, i see the problem
the default value contains a space!
Oké i used [email protected] and that worked
Oké did not noticed that
the validation work, if you delete the space that shouldn't be there
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/templates/form.php?ref_type=heads#L15
Will charge that woensdag i home again
value="<?= esc_attr($atts['subject']) ?> "
the subject, email and message have the same issue
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/submit.php?ref_type=heads#L41 <-- you have a space here
which causes this weird 💩 in the output
and then you get this, which is correct:
because "data" doesn't exist - you wrote " data"Oké so all mu problems are space related
yes
if you use spaces to indent, start using the tab key
Lot of workshop to to thuis evenweg then
just small stuff, don't worry
Evening stupid phone
keyboards on phones suck
Yep and you have a sort of spelling control and that sucks more
i disable that
I have not found out how
is it an iphone?
Do you work with wordpress for work
No android
i do, yes
Oke
you have to get into the settings of your keyboard
Front ot back or full stack?
full stack
Woud be a Dreams of me
Bit i thinl om too old to grt a wordpress job snd mu problems causes that i can only work for 8 hours a week
8 hours a week is very little for any job
Exactly
but it isn't very little for personal projects
if you make something that generates money for you, you don't have to worry
So i think it would be a nicehoo y
Nice hobby
it would
We see what the future Will bring
yes, because you need to practice first
90% of your project is basic html, css, javascript and php
Practice a lot
the other 10% is wordpress specific
and on those 90% is where all your troubles are at
if you know how to program, you can work on php by your own
Oké i practice now for 2 tears with html css snd js
it's the mindset to grab previous solutions to previous problems and apply them on different situations
for example, you had to grab the output of the form template and use it
but you struggled to do the same for the email template
even if the solution is 99.9% the exact same
but this will come from practice
Yep a problemen i know
it is, but the gears will fit when you have to solve the same problem more and more often
I hope
it will, you need practice
We see
practice would also help you find these issues i just pointed out to you
In 1 or 2 weeks i Will get a New chalkenge
just worry about finishing this one
Every 1 week if a month i get a New challenge
I not worrying. One problem at the time
exactly
you can do this
I hope you are richt. It do not feel like that at the moment
I doubt if developing is for me
that's something only you can answer
I know
Maybe i want too fast. Another working point for me
everybody wants to see results now
oke,
now a 200 but still the form that is send back and not the json
push it
did you remove the var dumps?
nope, I found one at submit.php
you will find 2
dont search manually
use the vscode search functionality
oke, both are deleted
same problem
it still seems the form is send back instead of the json
which is wierd with a get request
how are you testing this?
fill in the form on the site
and submit it
did you fix the javascript?
as far as I know I did fix the javascript to the orginal
did you fixed the path?
in the form ?
the javascript file path
have to look back where and what was wrong
moment
take your time
the url is now :
<form method="post" action="http://myblog.test/wp-content/plugins/mycustomForm/submit.php">
which looks well to methe javascript url
looks also well to me :
sorry. no idea what you mean with that
it's actually wrong
look at the name of the javascript file
and compare the name in that path
chips, stupid details
but wierd that I saw the front end validation error
that file provides that
hmm, still the get gives back the form
and stilll this annoying error :
`
Any idea what causes that json error and why the form is send back instead of the json
Why can a Get request give back a form
makes totally no sense to me
did you push it?
yes
the message still has the space
i see the problem
this is the problem
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/submit.php?ref_type=heads#L38
you're not capturing the output of the template
and you removed the
$headers variable
and on line 44, you're not sending a wp_error objectmoment, with message you mean here :
textarea doesn't have a
value field
you put the content inside the tagsand line 44 needs to be like this :
yes, for now, that's enough
oke
and the text area has to look like this :
no spaces!
let me fix it for you
<textarea id="<?= $prefix ?>_message" name="message" required><?= esc_attr($atts['message']) ?></textarea>still the annoying json error
and the network tab is totally empty now
push it
pushed
give me a bit
and now no front end validation errors anymore
take all the time you need
no
never knew it existing
hmm, I have to look then how to store changes
now after a page refresh everything seems to be gone
and how I can edit then my plugin
you can change it to store in the browser
yep
but then you cannot see what I do
so it looks not a good colleberation tool
the idea is to use a different server
on a different wordpress install
oke
and with this, i also don't have to use xampp to test your stuff, so, a win-win for me
still do not see how I can help me to make this very annoying challenge work
your plugin does have a very bad issue
running it with no arguments just crashes the site
oops. the front end validation schould fetch that one
but since I changed the name of the js file the front end validation stop working
😦
you didn't fix anything i told you to fix on the submit.php file
I did not
you did not
then I think I totally misunderstood what you wanted
im totally confused now
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/mycustomForm.php?ref_type=heads#L18 <-- you see what you're doing in this line?
I fairly think I did everything you asked for
but that is not in submit,php
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/submit.php?ref_type=heads#L38 <-- you see what you have in this line?
yes
I have the admin email
and the email adress I want to send to
and then the template
that is as far as I know what you asked
when I told me to get rid of the ob_start part
but look at what you're doing to the template, in both files, and compare the differences
i never told you that, because that's the wrong thing to do
what i did say was that i told you the wrong name of the 2nd function, which i told you the correct function after
oke, then I have to look that up
totally confused now
dude, simply do the same you did in that file, but instead of returning, you save in a variable and pass it to the email
so like this :
because yesterday you told me to get rid of the ob-stuff or do you want it back now ?
look at how you're getting the output in the file i pointed to
i never told you to get rid of it
all i said was that i told you the wrong function
and to replace the name of it
yesterday you did, when we are looking why things were not working
yeah, for debugging
for just a short bit
but it's fine, add it back
oke
I have to see how to place it back
it's the same as the other file, but instead of returning you save in a variable
still the same annoying json error
when I do this :
and the 500 error back
did you push?
yep
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/submit.php?ref_type=heads#L39 <-- you added the bug back
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/submit.php?ref_type=heads#L45 <-- also, what's this doing here?
as far as I understand it schould send the email and so on to the email form file
https://developer.wordpress.org/reference/functions/wp_mail/
wp_mail( string|string[] $to, string $subject, string $message, string|string[] $headers = ”, string|string[] $attachments = array() ): bool
this is what the function needsoke
I think some pieces of the load-template were left behind
the 500 error is gone
but the json error stays 😦
yup, you left the array behind, re-created the call and you left the same bug
did you push?
also solved
I had to add a suceess message
there's a slightly better way, but that's a nice hack
this still do not look well to me
I know it is a hack but had to try something 🙂
that's just a page load
oke
because this looks well to me :
it does
What is then a better way ?
wp_send_json(['success' => true])thanks
on the form I see now these errors on the console
in Engissh I cannot be a focus on a non valid element with as name
_wponce weird that the browser is doing that
move the nonce field to the end of the form, instead of the top
oke
I see the same error on
_wp_http_refer
Try to find out why the front end validation does not work suddenlydid you push?
did it right now
seems to me that the js file is not used at all
and that only the submit is used
no, you're just missing the last step
handing the response from the server
I know but that should not influence the front end error messages shown
of the front end validation messages
it should
you literally don't have that part implemented
I thought I had in implement here :
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L6
and where do you use it?
is it before or after you send the request to the server?
if its right before
just before
then the answer from the server isn't being handled yet
which means, you didn't implement the last step
??
you're in the last step: handle the response from the server
oke
if it is a success, show a success
if it is an error, show errors
oke
so the part of show_errors in the js file I can delete
that part is never send back to anything
which part?
that's the client-side errors
you're going to be handling the server-side errors
yep, and now they are never shown
they are
and I try to find out why
set the message field to 1 character and the error shows
then I see this :
and not the errors I made
that's the html5 validation
exactly
if it has the
required attribute, it shows thatat a wierd way I do not understand the client validations are never shown
because the form wasnt submitted
??
and why did I work before we implemnt the server validation
one isn't related to the other
it works
just put 1 character in the name, a valid email and 1 character in the message
then it works
when you make everything empty it does not work
wierd
it works
but it's the browser doing it, instead of the javascript
oke
my idea was to make it work that if a user makes a invalid entry the front end would catch it
now nothing happens
not even a server validation error
when a user entered a empty form
I have to think well how to solve this one
remove the required
then it works well
oke, then now add the stuff to catch the server validation errors
then look if I really need all the css I have
and make nice css and html to show the errrors
and then finally done
agree ?
Thinking of making a sort of toaster or whatever it is called for every error of success message
and im happy I do not see any server validation stuff 🙂
after 3 days frustating work this part finally works
and I have to look how to get rid of the old error messages
when submitting after making a error
that will be tomorrow and after that stuff
showing everything at the top is fine
I kmow
but if someone enters a non -valid email and after that enters a valid one
the error mesage on the top stays visible
and that is not good
you can delete it on every submit
that was I thought also
but I cannot know if the error div is there
it is now made when there is a submit
and there is a error
will think about it tommorrow
head is tired
and I find it also wierd to add when there is no error yet
got more and more the idea that this code is not right
why create a element when it can be already there
but for now GN
goodnight and rest
we do it tomorrow
oke
Have a idea
Could we not take care that the front end validation returns also json.
Then we can have a seperate function for it because the front and back schould almost be the same
or, just get the response from the server and shape it into what the frontend needs
can also
but as I say it will be then a lot of duplicate
not if you dont send to the server
the idea is super simple:
- clear the errors/success
- validate client side
- has errors? show and exit
- send to server
- has errors? bash them until they fit the front-end error format, show and exit
- no errors? show success
thats the workflow you need for this
ok4,
then I have to think about point 1 and the last 2 points
yup, but it is easier than you imagine
oke, when im not so tired I will think how to solve point 1
I have to code but I think on the wrong place
and some code is not right
its fine, you can wait for me
??
do you mean we can work together on this for example this evening ?
after i leave from work, yes
oke
then im sure I understand what you mean
just rest your mind for now
I will
getting proffesinioal help is hard work
But what I do not see is how I can check if a div exist
Otherwise I does not make sense to delete it
you dont
you can check if a div is in the body or if it has children
have to think about the last part
could be a solution
it's a lot easier than you think
yep., found out that you can do
element.hasChildren
so something like this :
🤮
innerhtml
dont do that
please please please dont
i would just hide the div then remove all the children
Sorry
What can i then use beter?
Oké have to look how to remove the children
or something like that
oke
then I would be something like this :
yup
but first, i would add a class to hidr it
hide
otherwise, the browser will have to re-render very frequently and can cause reflow issues
oke
right now the userfeedbackDiv is al the time there as a empty div
hide it by default
but we can hide it with css and make it visible when there are messages
I will do that after dinner
no, make it visible by removing a class/attribute to hide it
I think we mean the same
yes, but im being pedantic
im not saying that
but the code works without a problem
now thinking how to make the class hidden
I know how to do this with css
pushed for point 1
I hope you are happy
i will check in a bit
take your time
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L53 <-- you have a bug
you're saying that the constant is an array of strings
however, it is a node or null
const userFeedbackDiv = form.querySelector('.user_feedback'); <-- this is repeatedThen it is a node
you're saying it is an array of strings: https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L50
I know that it exists because I put it into the html
So it can never be null
oke, then that part needs to be changed
I have to think in what
it's a div element
oke, then I have to dive into that js thing to see how I can tell that
What do you think is beter Element or HTMLElement ?
DivHTMLElement
oke
and I think because of the duplication I make it a global one
you can't
what you can do is to do nothing
yes, I see
or, move the constant outside the event listener, as you should
I cannot do it because I do not know the form
yep I can move it outside the evenlisteners
yup, that's where it belongs
Changed it also
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L3 <-- this can move under the constant, and assign it to a constant with the same name as the function
then, renove the form argument, and remove the form argument where you call the function
??
That part is not in a function as far as I see it
function showErrorMessages(messages, form) {no no, that stops right before the loop
push it then
pushed it
the line i pointed out didn't change
line 3
yep, because I do not see what to change
assign it to a constant, with the same name as the function
oke
line 3 looks now like this :
then you said , delete the form
but then the first div is not found
not yet
now, grab the whole function, and move it under the constant you created with the div
oke, you want the function be on line 49 ?
yes
oke,
never done that , a function in a function
does not know if the code is more readable
but I changed it that way
now, remove the form argument from the function declaration and where the function is called
oke, did that
can you push?
yep
fix the indentation and then add a
; on line 46done and done
hmm now no front end messages anymore
any errors?
nope , not on the console
I see now this
when I submit a empty form
and that seems backend validation
let me try it
do you ever pull code?
2 hours ago, you added back a bug you fixed yesterday
no
yes
you added a bug
maybe I copy sometimes old code back
probably
just make sure that the css and javascript file have the same spelling
I thougth I solved that bug then
yesterday
but it's back
oke
I changed it to :
push it
but still the same "problem"
any errors?
done
no errors on the console
what's this?
I do not see it
did you refresh it without keeping the cache?
and it makes no sense to me
I think so
I see on my network tab that cache is disabled
Still wonder why the userFeedbackDiv is undefined
There is a div with a class user_feedback
or the const should be the culprit
it's not
the
classlist is undefined
you misspelled it
with proper jsdocs, you wouldn't misspell it
you left it on line 52thanks
the front end messages are back
this is why i bug you about indentation and formatting the code
and should bug you more about documentation
the only thing still on the list of me is to make them look pretty and that every message has his own div
oh, no no no
you're not done
oke
np
instead of line 17, you should have it hidden by default, with the class already in the template
also changed
now, under the constant. create a function to clear the contents of the error messages
oke
I had that function
no idea where it has gone then
doesn't matter now, you would have to move it there anyways
found it back on line 52
that's not a function
it's a piece of code
inside a function
???
piece of code inside a function
oke
so like this :
I thought so
you're close
really close
the while stays red
you added it before where you declare the constant
??
is userFeedBackDiv then known ?
I do not think so
show me the code
🤦♂️
you did exactly what i said you did
🤣
yep , and I still found it wierd
but maybe I oversee something you did not
i said under the constant
aka: under
userFeedbackDivyep, there was it he first time
before, it was inside the event handler
and then you said
oke
i said this
because that's what you did
I have now this :
that's why it's red
is it still red? it shouldn't
and the line stays red without a reason
show me
yep
that's not red
that's orange
and it's orange because you're searching for that
oke
now the error messages stay on the screen 😦
because you aren't done
so we have to use that function somewhere
wait, the function isn't done
you have to add the
hidden class before you remove the children, inside the function you created
also, don't call it removeChilds because that's not what the function does
i mean, it does that, but that's not it's purpose
the purpose is to reset the user feedbackdone
so, something like
resetUserFeedback is a lot betterno no
before
first, you hide it, then you remove the children
that order is EXTREMELLY important
oke
looks now like this ;
good
fix up the intentation on the entire file
oh, and add jsdocs everywhere
i know it's boring as fuck, but you have to do it
oke, on every function ??
and constant ??
every function, constant and variable created
oke
Task for tomrrow
today low on energy
I hope I can find the types on everything
you will be able to
I hope so
by the way, call the function inside the form submit, as the very first thing
and then we are going to look where that reset function must be used
it's just after the
e.preventDefault();oke
it seems to me that we are making the code complicated
but it is working again
what is the advantage of making functions inside functions with variables
instead of seperate ones ?
performance and less repetition
oke
Nobody has learned me this before
you don't have to re-re-re-re-re-re-re-re-re-re-re-.....-re-fetch the same element from the dom
on my work they are happy with seperate functions
but I heared that the persons who has to learn you something have to have very basic knowlegde about html css and js
on some things I already know more then them 😦
knowing more than them is good
but also frustating because when I do a complex js challenge there is nobody who can help me to solve it
im more and more on my own
🤣
as a example
I use theme.json for declaring colors and so on
the person who is called a wordpress experts never did that
He changes colors on the styles tab
the joys of suffering from success 😂
i write scss
and I think he nevers had made a template from nothing and he has to learn me wordpress 😢
just because he doesn't know how to write php, js and css, doesn't mean he doesn't know how to use wordpress at an advanced level
I wonder if I ask simple questions as why I cannot make thinsg center vertically
or he said gutenberg has no slider
I used google and found 3
no slider?
he said it
and I use now a slider in my hero section 🙂
what do you mean with a slider?
and on most things he said there is a plugin for
for example this one : https://nl.wordpress.org/plugins/gutenslider/
eedee
Plugin Directory
WordPress Slider Block Gutenslider
Slider plugin for Gutenberg. Create a image slider, video slider, fullscreen slider with this powerful slider block and add any block on top.
sorry for the rant but I had to get this of my chest
oh, a slideshow
yes, it doesn't have one by default
but you can add it with plugins and stuff
I used that one
is it any good?
first challenge for template learning is to convrt this one to a wordpress block theme
https://www.free-css.com/free-css-templates/page293/bricker
Bricker Free Website Template | Free CSS Templates | Free CSS
Preview of the Bricker Free CSS Template from Vision Design
I got a working with some text
nice
im now half way the first page
If you want I can put my template also on gitlab
But it will be Monday
Next Friday I got a taste of Blender
blender sounds really fun, but it isn't for me
for me no idea Never tried it
I noticed when I do developing work ,
I end up very much in my head instead of in my body
and that is not healty for mental health
no, it isn't
but you also overcomplicate and freak out super easily
I know
I think I set the bar very high for me
you do, but then you don't do important (but simple) things like indentation
you have the bar super high in some places, but not high enough in others
I know
still learning to be nicer to myself
and learning how to get more peace in my mind and body
a process of trail and error
peace in your mind is the most important
I know
plan for tomorrow
do the jsdocs
and think how I can make the backend in the right format
looks to me they were but we convert it to json
something else you should do: lock the button to avoid submitting 10000000 times
and also give feedback to the user that the form is sending
so I have to find a way to convert it back then
yep, therefore I think I need to iterate through the backend response
you have to grab what the server returns and make it compatible with your function
and then look if I need to use the error class or success class
yep, that is a array of strings
that is what the feedback function needs
it is
but it isn't all
it's an array within and object within an object
you mean the backend response
?
and every object has a code for success or fail and a message
Like I said I have to look well into this
first the jsdoc
then the converting
yes, jsdoc
you should do phpdoc as well
one problem at the time
it will help you
yes
pity I cannot see the contents in a console like js can
but since javascript is what's giving you the most problem, i asked it first
you can
would sometimes be easy
it isn't easy on windows, but you can
oke
surprised
but for now GN
goodnight
I use always var_dump but that push it into the browser
yes, but you can write to an error log too
but that's for tomorrow
go rest
yes boss
🫡
I messed up the code somehow.
I added as much jsodc and phpdoc as I could
But when I now open the site I get a nonce error
As far as I know that one should be when submitting the form not with showing the form
latest code is pushed
problem solved
oke
we get this back
from the backend
I have to think well how I can make it work because showErrorMessages takes in a array of strings
and here no string
and this is a error message from the backend :
This one is easier
because there is a message but as I said the display takes only the message I have to think how I can use the status We have three different inputs 1) from the front end a array of strings 2) Success from the backend (a object) 3) Fail from the backend( a array of strings or a object( depending on 1 or more errors)
because there is a message but as I said the display takes only the message I have to think how I can use the status We have three different inputs 1) from the front end a array of strings 2) Success from the backend (a object) 3) Fail from the backend( a array of strings or a object( depending on 1 or more errors)
you need a different function to render the success
could also be a solution
but I was thinkig about 1 function because the showing the errors and showing the success has a lot of duplicate except the class
then you will have to take an extra argument in the existing function, and rename it to something better
That is what I already thought and then with a if then make a error or a success class
but first I have to figure out oif I get a object or a array of object
Then I could send the status and the messages
that works too
so a few small steps and the code is done
then find good css for the messages
Clean up the css
and Ship it
basically, yup
finally
so 2 - 3 days work for me 🙂
hmm first problem
How can I re-use the reset and show errors when they under it declared in the loop for a submit event ?
latest code is pushed
not really
it will be faster
well, you can use the same way
it doesnt change a lot
Can I
I tried this :
but I see then a message that resetUserFeedback is not known
you're doing it wrong
the function to send a request to the backend should do NOTHING ELSE
here, you are trying to break that
oke, changed that code to the end
and I get this one :
so it looks like the fist argument needs to be a array
solved
yup, it needs to be an array
is it working?
almost
the problem I have now is this code :
when there is only a sucess errorDivElement is not nilll
so I think I check for that and if so I do a querySelector for the success class
but first a late lunch
and when I solved that one I have to see how to do this for a error
Thinking of iterate throught it and get all messages out of the objects
and then I can do the same as a success
that part is working
I know its ugly colors but I first want to make things work
Everything seem to work
Pushed the latest code
if you do not find any problems then clean up the css ,make the messages nice and find a way that a user cannot submit multiple times
and then we finally finished
i have a simple way: disable the submit button
but you know what's even better? a spinner on the button
looks good a spinner
I have to google again how to achieve that
so something like this : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loading_buttons
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
you can do something a lot simpler
on the ::before, set a width and height of about 1.5em
then, set the border to about 0.25em white
and the top, set to something like dark blur
blue
on an infinite linear animation, rotate it 360 degrees
that I can do
but do we not need some code to or display submit or display the spinner ?
and the before you mean the before of the button ?
i didnt say "before", i said "::before"
its a very importance difference
you can display the spinner when the button is disabled
and that is as simple as setting the button to disabled before clearing the messages, and after you receive an answer
looks complicated
thinkng now to go for the simple solution
its only complicated in your head
you simply grab the submit button
then, inside the submit handler, simply set the disabled attribute to itself, or set the property to true
in the css, simply add the styles to add the spinner when the button is disabled
oke
you can do it
I know I can
I onky have to find some mental and fysical energy to do it
Yesterday and the day before yesterday I had some energy.
Today totally no energy
Stupid body and mind
means you need a break
Think I need a lot of breaks today
but that is what it is
just take the break
im busy with it
tomorrow the spinner and I see when the css is on my list
im already very very happy that the plugin works
and yes, I know there are some issues but they can be easily solved
so many manu thanks for your patience with me
I think im not the easiest student
there are much much worse students
i know that if i explain something to you, usually 3rd time's the charm
oke, and Im sure that there are also a lot of better students
even if the code comes out looking like it went through a woodchipper...
🙂
you still do something and move forward on your own
and that is important
yep, im following my way and that is the only good way
you still have the difficulties ive pointed out before, but you get there with time
we see
there are ways better than yours and mine, and sometimes, its good to use those ways
I learned that I make the best progress small steps at the time
I mean my way in life
same here
work to do :"
- make the spinner
- clean up the css
_ make the messages nice
- make the form empty after submit and sending the email
all easy stuff
the last one is just
form.reset()oke, then I was overthinking that one also
and for the 3th one I will google for some inspiration
well, just use the colors from taileibd
tailwind
and reduce the HUGE border radius to 5 or 7px
oke
its easier than you think
we see
like i said one problem at the time
exactly, one at a time
and for the toasters
The soft ones of this page : https://preline.co/docs/toasts.html
Preline
Tailwind CSS Toasts | Preline UI, crafted with Tailwind CSS
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
yup
or any that you like
I liked these
But no idea if its looking well with the form
one way of finding out is trying out
THERE! that's how you find out!
see? now you're getting it
🎉
you're evolving
Yep and that is good in life
it is very good
it also means you won't need as much help too, and can find stuff yourself
Hope so
Curious what the New one Will be and if and how i can imprive ny react component
But as i aaid earlier one problemen at the time
yes, you need to finish this one first
Exactly
And in small steps
yes, small steps is important
Learned that the hard way
So you think.im could be a goed junior at my old age?
yes, you just need to practice more to be a solid developer
That is why i found the site that sinds you a challenge once a month
it is a good start
To learn wordpress and practice
Maybe later i xan make small projects for clients
you still need a bit more of practice, but yes
That is what i mean
oh
well, you're pretty close
https://jsfiddle.net/kguhyte8/ <-- by the way, i made you an example of how you can implement the spinning
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Thanks i Will study it
looks easy
it's easier than you thought, right?
yep
but that will be , just as the toaster colors, tomorrow
maybe if I have the energy I can do all 4 last points
otherwise I will be Friday afternoon
you should rest today, we can do it tomorrow
exactly
im wathing tv but I hate commercials
as we say here: tomorrow is still a day
so, you have time
I have , the person who made the challenges say make them in your own time in your own pace
for me it is alll about learning and having fun
What do you think about this :
one "problem"
if I do this : then the form stays at the input that is given by the shortcode Is that right ? and is that what we want ?
if I do this : then the form stays at the input that is given by the shortcode Is that right ? and is that what we want ?
that code will never do what you want because an error is still an object
you have to see what the server returns on an error and on success
I know that already
if there is a error the backend returns a array of object and when it is a success it returns a object
this still wont work as an array is an object
oke
now im confused because yesterday you told me that empty a form is just easy as form.reset()
And now you are saying it will not work
im talking about the
ifwierd. that I then see the right color on a error or a success
thats weird indeed, but dont change if it works
you are right
I forget to test the case that if the nonce is not right
and I got a message mail is send
so back to the drawing table
how to check if it's a object or a array of objects
😦
you are overthinking
just check what the success and error responses have
??
or do you mean somethhing like this :
nope, it does not work
pity
success returns this :
I see now this error message in the console :
hmm, it schould return a array there :
chips, it is still a Promise
this is supposed to work
but it doesnt work because you are doing something wrong
Yep i know. Somewhere it changed from a object to 's promise
the problem is here :
this gives a promise and not the expected output
so this lime :
will not work because it expect a array
The only thing I changed is delete the
console.log(data)
back to the manual how to solve this
Any hints
?you are awaiting the json
remove the await
not good
backend-response is still a promise
maybe use a
.then somehow
see also here :
wierd , when I do a console.log in the async one I see this :
very wierd
it looks like the console.log is getting the value but backend-response do not
async is very confusing
I can do this :
but then backend_response keeps to be a empty array
that's not how it works
did you push?
moment
I pushed now
alright, i will check in a bit
as always take your time
done and done
that should do it
oke
nope.
still this message :
that's a bug you added
the response may or may not be an array
When it is a error it is as far as I know always a array
if it is an array, you know it's an error, so, just assume it's errors and pass imediatelly to the function
showErrorMessages <-- this onewhen it is a error on the backend It is in this format
as far as I can see backend_response is still a promise here
i will test in a bit
after i finish eating
take your time and enjoy your meal
I will bring my daugther to bed
alright, take your time too
I will
i see quite a lot of stuff
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L14 <-- still has await
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L82 <-- still doesn't have async
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L140 <-- the
then shouldn't be there. you should just read the returned value. or, just plop the fetch there
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L145 <-- this doesn't belong here
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L149 <-- this doesn't belong here
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L151 <-- you don't check if it is an array or not, but you shouldn't anyway as the data should be sent to showErrorMessages anywaysFirst three are already changed
it looks like the last version is not pushed
sorry
that's why you gotta make sure you always push
last point I cannot send it to errorMessages yet because it is not in the right form
That is why I try to take the messages out of all the objects and then send to errorMessages
then check if it is an array
if it isn't, convert to an array
by the way, i can't submit the form
the nonce field isn't there
and why schould I check if its a array ,
Im sure it is
yep, I deleted the nonce check to see if the errrors on the backend were working
and now it looks like not
and the most wierd is that it has worked at a point
and now not
and im not seeing why not
did you fix what i told you?
I did not make the change for checking for a error
that's fine, and everything else?
the rest I changed and it did not fixed the problem here
im still seeing this ;
show me the response from the server
you mean that I still get a promise
or the error object ?
the response from the server
I can only find this :
that's not the answer from the server
response
I hope you mean this :
close, but no
that's the console, showing me a promise
you mean this :
still the wrong tab
this is when I console.log
data
okethis
you mean this :
I do not see that in my tabs
yes, but when you submit the form
I did that
did not change anything
still see the same on the network tab
that's because you selected to only show html
while you're doing a fetch
which is also known as ajax
but used to be called xhr
oke
then I see this :
which is the expected response
and as I said several times It is a array
no, it isn't
it's an object
or an associative array in php, but an object in js and json
he . [ ] looks a array to me
yes, but it's inside an object
it's the data property
oke
so we have to send the object and then the data object to the function back ?
none
you have to access the data property
that's all
oke
then I have to think how i change this line then
you don't
that's just it
oh, you need the await
moment
if it doesn't work, remove the await
you just said we need to access the data property
yes
but it isn't in that line
and as far as I know we do not do it at the moment
so I try to find out how and where we schould do that
where are you checking the errors?
here :
can you narrow it down?
so we could do in on the messages line
there we need the messages
show me what you have in mind
I was thinking of this:
do it
but why the
['data'] and not .data?I did it and see this :
is it a promise?
if I look at the networktab not
but the compiler says it is
then remove the
await i told you to addoke
O , that one was without the await
then add it
with the await I see this :
can you push it?
yep
and I take a shower
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L13 <-- you're not returning anything
oke
I see now a error field without any text
so we getting closer
did you push?
nope
push it
did it
oke, the messages line is not good
messages is empty
is it puking itself with an "data is undefined"?
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L13 <-- this can just be
return response.json();
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L145 <-- you misspelled messageyes , finally working again
and now really hit the shower
tomorrow I will try if the success is working and the front end validation
and then add the spinner
you do have a fair bit to cleanup in your
showErrorMessages
looks like a dare devil went buckwild there and stuff's not pretty 🤣
but go shower, rest, watch something, sleep and we finish this tomorrowoke boss
🤣
oke, could not sleep
So I tested and all messages appear as I wanted
tomorrow the spinner 🙂
GN
goodnight
But how so a bug cleanup.
We made the code ourselves
there's still a fair bit to be done
oke
im ready when you are ready
and I still have to implement that spinner 🙂
you can start there
oke,
So set the disabled on submitting and set the disabed to false when the server sends back the response
Did implement it as I thought you told me
but the button has all the time a disabled color
will push the code
i will check later
as I said many times take all the time you need
well, this time, i have no choice because im working
work is also important
yes, but tiring
specially when i woke up 3 hours late
ooo, that is not good
here time for dinner/supper
We can also work tomorrow or Sunday if you want some rest
i still need to work 2 hours
oops
then you are working very very late
just a little
a little. 2 hours work from 19: 22 is 21:22 and I find that very very late
it is late, but im 1 hour behind you
oke
then it is still late
I think in the Netherlands nobody is working after 18:00 hours
yeah, i hate working past 6pm
Success
Just watching tv with my family
enjoy the tv
im procrastinating
Your online human
Only human
is that a series?
No
I try to tell you that procrasting is normal because you are a human
I Will see when you are going to help me with the last pieces
well, i procrastinated an hour and a half, so far 🤣
Nothing wrong with that
Take some rest and we see when we can end thuis
No hurry
im just hurried for work 😦
sleep a lot my friend
i will need
exactly
your healt is much and much more important then everything
for me it is almost bed time
for me, its screaming time
screaming time ?? how so ??
so, basically, i had to replicate wordpress' url handling in laravel
so i can get the same url for the posts, from laravel and wordpress
pfff, who has thought that was a good idea
I will tomorrow look for myself why the disableling is not working
I do not see the messages anymore
oke, line 86 is too blame
🤣
it's good that you're finding your blunders before i look into it
button.addAttribute('disabled'); <-- you're right, this is the line to blame 😂yep, if I delete it , everything is working
yup, it's because there's no
addAttribute
it's setAttributeso I use the wrong function or the right function on the wrong place
none
you tried to use a function that doesn't exist
oke, a little buit further
I see the errror messages but the button stays disabled
it works
now only find why I do not see the spinner
but here time to sleep
and I think also for you
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L135 <-- it's because of this
still early for me
just 9pm
oke
for me its is 22:10 so almost time to sleep
I can delete it but then the code runs the backend code even if there are errors
that's not the problem
the problem is that you aren't removing the attribute there
oke, but that is the part above it
you pointed to the return
🤔
this is a mistery for tomorrow then
I will sleep about it what is wrong with this line
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L85 <-- this is wrong
it's
e.submitter
or just find all submit buttons inside the form
this is better because the button may be outside the formoke, I try to find the button and now there is only 1 at a form
just rest, we finish tomorrow
oke
GN
goodnight
just rolled out of bed and ready to solve the last bugs
did you try the changes i told you?
yep and still no spinner
did you push?
yes
did I jisy again to be certain
you still didn't fix this
Can be, I never tested it against a empty input
But I expect that the front end validation would take that
if not, I have to think well how to do it then
you have to extract all errors
I thought I did
when I do a empty shortcode I see this :
surprising Did not expect to see that
yeah, because ... the
$atts variable is an empty string when there's no attributes
🤦♂️
just don't try to understand that
cast it to an array and it fixes thisI thought I did that
You told me a few days ago to do so
only in the form.php or also in the email.php ?
yep solved that case
yup, 1 bug down
1 more to go
oke
hopefully it is not a difficult one
it's not
do this: try to get as many server-side errors as you can
and then, compare the structure of the errors that you receive
hmm, then I have to think well how so
most validation errrors are already found by the front end validation
the exact same way i did to show you what the server returns
comment it out for a short while, while you debug the server side validation
oke, that is simple
you can also edit and re-run the request in firefox
you can even try to use something like postman
oke
then I see this :
which looks well
and it also shown well on the form
did you push?
here a beter view :
are you sure we're running the same code?
just pushed
I deleted all the if then 's in the myCustomForm.js
i see what the problem is
and checked they are the backend validations
compare line 12, 28 and 59
of myCustumForm.js ?
submit.php
line 12 : $error = new WP_Error(400, "Bad request") ;
line 28: $errors = new WP_Error();
line 59 : wp_send_json(new WP_Error("Error", "Mail cannot be send"));
do you see the difference?
yep, but that are all different cases
on line 12 there is a fixed error
On line 28 I made the object so I can add the error messages later
and on line 59 I send a wp-error with the statuscode of Error with a fixed message
here's what you can do
create the same error
at the top, what you're doing for line 28
and then, just add the error to it, and where you have to stop you send the error
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/submit.php?ref_type=heads#L56 <-- by the way, the
array() format is super old school - from php 5.3 and olderso something of this :
yup
oke, so I have to make 2 lines of this one :
yup
and for this one I think I cannot make 2 lines
it's fine
oke
that one isn't an error
oke, pushed it
test it
make sure it works on your end
for me it still works , even before this change
I changed the text so I could see the difference between front and back validation
for me, it failed on sending the email, so, try there
force it to fail
wierd, for me it even comes to sending a email
could it be a browser thing
I use FF all the time
I forced it to fail by sending a empty form
and it works?
yep
I send you the screenshots a few minutes ago
and I see the same before we changed the error code
so I cannot reproduce your problem sorry
are you sure you pushed?
i still see this in gitlab
wierd, IM fairly sure I commited but I will try again
try it
still see this when I send a empty form
still not the error you see
this is the last error
when the email fails to send
o, wait then I have to fill in the form
moment
nope, still working here
no errors on both cases on a empty form and on a filled in form
you mean on line 50
line 50 and 63
we used
send_json_errors instead of send_jsonyup
and you're trying to send an error on line 63, right?
yep
no change
not for you
still see a message that the email is send in green
you aren't reaching that part of the code
you are right
Right mow he email is send
remove the
! and see if you get an errorhave to think how to make it work that the email is not send
yep, I see a message that the email is not send
as expected
if you see it, it means that it isn't breaking the javascript
I agree
now the annoying part why the spinner is not working ?
After dinner/supper
push it
oops, and we introduced another problem
when success I see this error message in the console :
put the front end back validation back and the !
pushed all the code
alright
you do have a bug
that line
I see it
put the ! on the wrong place
yes, you put it there when it should be nowhere
oke have to think well where it should be
you shouldn't be
you dont need it
oke
and the mail sending is working again
yup, that should be everything
oke
one problem left
I still wonder why I do not see the spinner when the button is disabled
Still thinking that it is a css problem but I could be false
i know why it's happening
im not
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/css/mycustomForm.css?ref_type=heads#L177-208
this hunk of junk
in those lines, replace the
::before with ::afteroke
thanks
I see now the spinner but a litle time
But that is oke
so call it a day and ship it
that's because the response is way too fast
try artificially slowing it down
exactly
firefox has network tools for it
but like I said I see it
so it is oke
you should be super close to being done
So ship it ?
pfff. super close it not good
just as you said im super close with some code
😢
you need to do just some tidying up and you're done
oke
where do I do the tyding up
I will that do tomorrow , almost time for a quiz on tv that I like to watch and try it myself
well, php and css need some tidying, that's mostly it
that is almost 90% of my code ;'(
it's just small stuff
oke, tell it and I Will do it or in the commercial breaks or tomorrow
just proper error messages, proper error codes
better formatting of your code
just a few small things in css, like stuff that doesn't belong there
and a minified version of the css and javascript
the error messages could use a touch
you have non-translatable strings, which is bad
just small stuff
this is usually done by a compiler step, but that's not for today or tomorrow, so, you can ignore this if you think it isn't needed
oke, no problem to do that tomorrow
I think im the whole afternoon and a piece of the evening online
formatting is already done by vs code
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/submit.php?ref_type=heads#L26 <-- but it can't fix stuff like this stray comment
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/templates/email.php?ref_type=heads#L8 <-- and the missing
<html> elementdone and done
schould there also not be a
</html> then in the email.php ?you have to write valud html4 code
that means the body, title, html, doctype
all those have to be present
and the text on line 63 doesn't belong there
the indentation on that file is ... artistical
line 63 of the email.php ?
yes
the last line
is deleted
and alll the other is added
and what is wrong with the identition
I use always 4 speces or a tab
that's what's wrong
use tab
just tab
oke,
Then I have to look where I use spaces
oke, if I did things well then it is all tabs now
I thought I deleted everything I do not need in the css file
the file is fine for now
oke
surprised me because you said :
line 1 to 10 is forcing the font for all the document
and line 12 to 23 exist in most resets, but you can limit it to just the form
and what is wrong with forcing a font
I use it all the time with front end mentors challenges
oke, but I do not use a reset here
Can we do the translation of the error mesages in the
WP_errror.add part of at another place ?
and minifyiung i never did so I have to google how to do thatyou must translate there
oke, and how about the css ?
GN
for the css, the 2 changes ive told should be enough
goodnight
even without a reset ?
if I delete the two then I see the spinner the whole time
Hmm, even with that part I see the spinner
so still somewhere a problem in the css
😢
and the translation part of the error message like this :
?
and should we also not translate and escape this part of the email
the
__ is a functionoke
also, it is a php function, not javascript
yes, you should translate this too
oke, im a little confused how to make that __ part work
but can we first make the spinner work right
I see it now also when opening the site
So I think the css is still wrong
you have to hide it by default, and then show it with
display: inline-block when it's supposed to be visiblestill no luck
now I do not see the spinner
did you push?
did I just
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/css/mycustomForm.css?ref_type=heads#L237 <-- this only works in sass
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/css/mycustomForm.css?ref_type=heads#L222 <-- you're still showing it by default
oke, looking better
I think my computer is too fast to see the spinner
that's likely
just throttle the requests
I think and hope iti is allright now
push it, and i will tell you
is pushed
you didn't add the css to show it
still not fixed
I thougt I enabled it here :
`
in the css
and I have to look how to make the key frames work
I know I used it before with css
^ this is the compiled/minified version of the css for the spinner
format it properly and it will work
That part worked
now the internatiolisation of the error messages
I have to google how that must look like
you did this before
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/templates/form.php?ref_type=heads#L17
start with the email
yep, but do I really have to escape it after some many checks
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/templates/email.php?ref_type=heads#L10 <-- you should include the head here
ALWAYS
stupid js with php
is now working
that is wrong
like, really really wrong
I thought
it's close, but still wrong
that already
again close 😢
when sending to javascript, you can just send the raw string
no need to encode it
that's javascript's responsability
oke
I understand that it I need to do it there
just use
__ instead of esc_html_eso
?
close
you're opening a php tag inside php
oke
so
yup, that's right
nope,
compiler is not happy when I do
oh, right, i see the mistake
look where the comma is
me too and solved it
I can do the same witht the email template
or can I better use esc_htm_e there ?
in the email template you do the same you did in the form
but for ALL the text
oke
will work on it
alright
something like this :
close
😢
what you receive from the user has to be encoded into html, but CAN'T be translated
and
$data is what you receive from the user
no
what you had before for the $data was fine
wait, no, it wasn't fineno it was not
subject is red
and that is mostly not good
<?= $data['subject'] ?> <-- you had this, which is even scarierclose
remove the 2nd parameter from
esc_html
also, don't forget to echo the valueoke
that should do it
also done
and it works?
css done internatiolisation done
I will try now
🤞
looks well
seems also to work
by the way, you may want to remove the shitty colors i've set for the button
except it looks if message uses another font
I do not mind the colors
that ugly blue is ugly
oke, I will try to find a better color
just remove the colors i added
oke
and I try to find out why the font is different on the text fields and text-area
I find that ugly
just use the font you want
I did but you told me yesterday to get rid of it
you can set the font for the messages
yep
and then it looks better
pushed the last version and I hope you are happy
so no minification on the css and js ?
for a small project like this, just for you, don't think it is worth it
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L92 <-- you forgot the data type
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L87 <-- why are you setting the button to be an inline block in js?
hmm, have to think about that
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L107 <--unnecessary comment
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L121 <-- also unnecessary
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L129 <-- same here
moment, I can give a respons so quick
for the button we have to set it somewhere to make the spinner work
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L141 <-- you're missing the data type here
it's set in css
oke, deleted
and for the data-types I have to think which type and how do I tell it in js or phpdoc
in jsdoc
This good :
you forgot the
@
it's @typeoke
I m thinking what the type is here
the 2nd parameter is a string
and you're forgetting the names of the parameters
so it looks like this :
that comment is in the wrong place
??
you're describing a function, but you have it on a variable
oke, I have to think about it
Im bad in languages like English, German and so on
what you have is almost perfect for the function definition
but you're calling the function
I know
Im thinking how to describe it better
maybe something like
`
it's fine, you can't describe it any better
not me
this is what the function does
changed all you wanted so far
show me
pushed it
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L135 <-- still in the wrong place
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L104 <-- the comment is still there
??? what is then the right place
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L89 <-- there's no jsdoc here
on the function definition
sorry, still confused
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L38 <-- missing return type
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L31 <-- missing return type
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L67 <-- missing jsdoc
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L63 <-- this comment isn't needed
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L58 <-- type missing
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L45 <-- type missing
Does the showErrorMessages have a return type ?
yes: it returns nothing
you can use
void for thatoke
so the first two have a return type of void ?
if they don't return anything, yes
if i did not overlooked something , every change is made
I think you are going far and far beyond what the person wanted that made this challenge
well, i want you to have good habits
if it was just to get it done, we could half-ass it and just move on
I think the author wants it done half-ass but that is also not my way of working
as far as I know he or she looks if its works and if so , you get ppints
yeah, but if you half-ass everything, you will get the habit of half-assing everything
then it's a vicious cicle of half-assery which is hard to break
good habits have to be set from the beginning
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L51 <-- stuff like this: it has mixed quotes
you should fix it, and it takes 1 second to do it right the next time
yep, as I see in many wordpress people.
They use something like elementor, buy a template, change some colors and call themself wordpress developers
but if nobody tells you, you won't know, and will still just flop about on quotes
For me , they are not
eh, they are designers at best
but it's also important to show you what's a good comment and a bad comment
I think you are a wordpress developer if you can make a template from the beginning or make plugins with php or react from the beginning
i agree
but you need to start with good habits from the beginning
you can't just face-plant into everything
so im still not a wordpress developer , Cannot do all three at the moment
you're doing something, so, it counts
but still learning
you're not grabbing a theme and changing colors
but any comments on our project
nope, at "work" im making a block template from a html template
cost a lot of time to learn but also it is fun
I say "work" because it is not a payed job but a way for me to get into a normal way of living and gettng help with it
sp to overcome my mental problems like aniexity
i get what you mean
but still, you need good habits from the beginning, and apply them no matter what
i agree
ship it or can I change more
there's still some things
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/templates/email.php?ref_type=heads#L45 <-- the message can have multiple lines
correct
when the message is shown there, it won't have multiple lines
oops
back to the drawing table
either put it inside a
<pre> or just run the message through nl2br()I think after the esc_html ?
yup
done
no, the other way around
??
you said after the
esc_html ?yes, i was thinking in the order the functions are called
they are called right to left
oke
a(b(c())) <-- this will call a after b and b after cyep, I agree
perfect!
lot of fun when you try clojure 🙂
then it looks like
(a(b(c()))) oh yeah, it's fun
^ any reason why you have 2 rows?
yep, one for the things like "subject" and one for the answer that the user entered
but these are empty
oke, I will delete both
no no, they are used for spacing
but why 2 instead of 1 with 100px height?
no idea
I just copied the template and changed what I thought needed to be changed
alright
We can try ?
sure, try it
After dinner I have to look how I can see the email
Laragon has a email catcher but I see then html
didn't knew that
nope, I cannot see the email 😦
how did you saw the emails before?
nope
at my computer outlook is started but no mail to see
I wlll try my own mail adress
nope, nothing recieved
looks like I need a sort of mail server to really see the emails 😦
yup, you do
how did you sent the other test emails?
I did not use a mail server
but found a way to see them
and it looking well to me
then that's good
another check for shipping it 🙂
did you merge?
i mean, push
not yer
moment
pushed
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/submit.php?ref_type=heads#L31 <-- you should trim all the data
to clear out whitespaces
trim $POST like this :
close, but no
it's an array, so, you have to use either a foreach loop or an array_map
i would just use the foreach loop
that's not how you do a foreach
I saw it , compiler is not happy
and with good reason
compiler is not happy with my foreach
did you checked the documentation?
yep, I read this page :
https://www.php.net/manual/en/control-structures.foreach.php
and what's saying there?
I have to use
unset
Wonder if I not bring this outsideyes, it has to be outside
compiler is happy now
no, the other way around
and you loop the data, not the post
I know but then I see this one :
Does not make any sense to me
Compiler thinks both are a array
so it looks i need two foreach loops then
wit this code the compiler is happy
the compiler is happy but it doesn't do anything
😢
as i said, you have to loop through
$datanearly there
but there's a problem: the data will be lost
that's not a pointer variable: it's just a copy
and another problem: you could have an array instead of a string
How so can it be a string
you can send arrays over post
oke
but still I do not get your point
my point is that your code will stop working
and since you're only handling specific keys, you can do something cool
i will show you
so, instead of looping the values and stuff, you loop the keys
and only overwrite the value if it exists and is a string
oke, I get the feeling that you ask me beyond I ever learned PHP or developing
i did
this is something beyound
that's why i wrote it for you
I get the feeling that I again hit a wall I cannot go beyond it
that's why i showed how to jump over it
and that is not a nice feeling and that is why I quit many many languages
this is a personal preference thing, as this can be done in many ways
and I still need the unset ?
it doesn't matter
oke
Now I see what you mean
if its empty or not a string do nothing with it otherwise trim it
yup, and set it to the data array
yep, that part I also forgot
but also, it only checks the keys you're interested in
but also I could not do it in my code 🙂
anymore to learn
you are not easy to make happy when its about coding
I love it and sometimes I hate it
as i said, i have to pass good habits to you, and that also means holding myself to an higher standard
I like it, deep in my heart I want to do it good
But I have to keep myself from doing things perfect
when receiving user input, nothing short of "perfect" is acceptable
Even if I know this plugin will never be used in real
that's why im being so nitpicky in that specific area
but maybe in the far future it will
maybe, but you still need to learn to never trust ANYTHING that comes from users
I know that already
and that there are users that can mess with the sending to the backend
That is why I wanted client and backend validation
yup, and you have it now
and did the nonce check
as you should
so a user cannot send data from outside to my site
they still will try, but it's fine
So I think I did there a good job
you gotta protect your butt
yep
you did
and 100 % protection is I think impossible
so ship the project or is there more to learn ?
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/submit.php?ref_type=heads#L31 <-- bug: domain is missing
oke,
I have to google where there must be a domain
2nd argument
also, if you put your mouse hover a function, it shows information about it
your sure there must be a domain
array_replace gives me
array_replace(array, replace_array) oke
but I do not use
__ there
you don't?
but that is not line 31
🙂
but you are right
🤣
changed it
and saw that I forget the internationalisation on one of the items
so all changed
the bad request wasnt translated too?
yep
we have then a little problem on customForm.js
what is it?
I do this :
that is never translated
or I must there mix php and js there ?
you're right, it isn't translated
but no, you don't
I hope there is a way
there is
would be a pity if all is translated and that not
https://developer.wordpress.org/reference/functions/wp_localize_script/
there's this solution
oke,
I will read that when my head is more clear
it's a heavy bunch of reading
but if I read it fast this could be a solution
basically, yes
I will play with it tomorrow afternoon if I have energy
Tomrrow morning im "fighting" with gutenburg to make my first template
Thanks again with all your patience
and I hope im still a 6 - 7 student
don't worry, you are
thanks
just rest and we can try it tomorrow
I seems the world is more confident about what I can then me
I doubt a a lot about myself lately
Time to hit the shower
we all doubt ourselves sometimes
the trick is to keep going
oke
and I saw that I have a lot to learn and sometimes I have to work slower instead of faster what is in my character to wanted to go fast
well, if you go fast without knowing what you're doing, you're just making a mess
yep and forget things like the domain
exactly
and learning cost time
you know what costs even more time?
a lort of time and trail and error
go fast and make a lot of bugs that cannot be easilky found
or make your code into such a mess than you have to discard it and start over
this is why the good habits are important
I had that a lot
but that is also a part of learning
know when youy can better start all over again
because you took a wrong path to solve a problem
that happens to everybody
but a good developer will know what to do, if possible
tomorrow make the last translation work and hopefully then done
We worked I think 2 weeks now on it
something around that
and you though it was a tiny thing?
I thougth yes because it is a junoir challenge according to the maker
but you werent a junior: you were a beginner
which is fine
i m a super beginner which is maybe to eager to learn
all you see is the finish line, but you don't see where you're putting your feet
🙂
so in other words, I look at the goal, and forget to enjoy the ride
you just go for it
you're blinded by the finish line
I know, that is why not trying for 4 years to go back to a job
Is one of the working points for me now
yup, but you will get there, so, don't worry
we see
what the future will bring
we will see
but now, just rest
yes boss
🫡
LOL
but seriously, resting is important
I know I learned it the hard way
and still learning
i know
Can you help me why the message is not found
latest code is on the repo
I see a green area but the text seems to be missing
works again
Now I can als translate all the front end validation errors 🙂
if it is right all messages are translated
new code is pushed
i will check it later on, after work
all oke
hopefully everything is allright
i hope so too
How was your working day ?
still have 45 minutes to go
and im way too tired to focus
... and the neighbour is drilling right next to me ...
not good
i was not so productibe today
Had to delete a part of the template and start over again
Hopefully Friday I Can make a great loop
im now I think 20 hours and still 50% of the front page
but learn a lot
learning a lot is important
its never a waste of time to learn something
yep
and like I said learning cost time
and a lot of trying , fail and try again with sometimes some help
yup, but that is all part of the process
exactly
Take good care of yourself and I see when you have time to see if our project is up to standard
I say this because I think you are tired because you said you can concetrate
i am very tired, but i was doing, basically, grunt work
o , sounds not good
it's not
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L91 <-- nitpick: this is indented with spaces
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L44 <-- this function could be named
showMessages instead
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L41 <-- you forgot the status param
but for this, you can do something better: call it type and then only use lowercase letters
then, instead of this, it can be just errorDiv.classList.add(type);
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L64 <-- this is absolutely useless, as errorDivElement is just errorDiv, but you go the long way to get it
everywhere you use errorDivElement. just use errorDivWith the status im not complete sure it can be replaced
The renaming is not working
then we also have to rename this one :
a few lines earlier
no, do not rename this!
at least, not yet
first, it has to work
Then I cannot rename
ErrorDivElement to ErrorDiv
because it already existit's not a rename
it's a delete
that constant shouldn't exist at all
this is what you're doing:
1- create element
2- add to the form
3- fetch the element created in point 1 using a css selector
oke, but how do i then make a difference between a error and a success div
Both does not exist at that moment
easy: you create a div, add the class in the way i told you and ... done
that's it
oke , so add the class to the ErrorDiv
but then we can delete this whole part
`
^ just this
oke, I think I finally undertand what you mean
basically, you're fetching an element that you already have in a variable
so, the fetching is extra useless work
yep, when I do what you said it still working
but, it's still not perfect
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L58 <-- you see this line?
this a a good example where im stuck in my own thinking pattern
yep, I see it
move it after the
forEach
the last line in the functiondone
push it
done
something is not right
when I do a empty form I see the spinner
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L40 <-- this is no longer to show error messages, just general messages
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L69 <-- you moved the wrong line
and I see this mesage in the console:
you need to swap line 68 and 69
then line 56 goes between line 69 and 70
ke
yep, working again
push it!
oke
done
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L55 <-- this comment is useless
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L59 <-- this comment is plain wrong: you're receiving a paragraph and not a div
you also don't need the other comments inside the
forEachmoment, I do not understand the last change
why the comment is wrong
I see it , I think
it's not wrong
it's just not needed
is this better :
no
that's worse
😢
HTMLParagraphElement
document.createElement('p').constructor.name <-- if you need to know the type, you can do something like this, in the browser consolethanks
also changed
but I thought you were tired and wanted some rest today
instead of working with me
and pushed
I'm helping you just a little
i can rest after
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L73 <-- you forgot the
e param with type SubmitEvent
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L17 <-- and here, it's also missing the HTMLFormElement type for the form variablethis good :
wront type, and the message can be skipped
you know, the description
also, don't add
- to the description
it will render as 2 dashesoke, I was also thinking of MouseEvent but it could also be a KeyBoardEvent
it's neither
it's what i told there
it's not mouse or keyboard, as there's other ways to trigger the event
sorry, missedit
that's alright
just remember that there are other input devices, like touch screens, joysticks, enter key in a virtual keyboard and even just "touching" something in vr
exaclty
that's why it's not a mouse or a keyboard event
makes sense?
totally make sense
I cannot test if my cod work with touch screens and so on but that is oke
if it uses the submit event, then yes
and pused
pushed
changed
but check it everywhere, as you did this mistake in multiple times
oke
changed
https://jsdoc.app/tags-returns <-- the return types have to be
{between braces}
and that goes for {void} toochanged
but does the compiler or whatever anything with the jsdoc ?
See never messages that the type is missing or not right
the ide does, and will show weird squigly lines if you don't do it right
also, it helps you to catch errors
imagine you try to use
e.submitter on a click event
that doesn't make sense, as the e.submitter is only available in a submit event
and vscode will inform you of itoke,
All cases I do not see the squigly lines
yes, because (by default) it assumes it's
any, which accepts any valueoke
that's why you should write the data types
since javascript doesn't let you set any
yep, any is not good
it's good, sometimes
but when you expect a list of forms, it helps you to say that you're treating it as a form
last version is pushed
it also helps in autocomplete
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L126 <-- this is wrong
now im suprised
yesterday you told it allright
we worked on that part
i actually told you that it was wrong where it is
you can check it
but don't try to fix it yet
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L8 <-- you're missing the return value here
This better :
`
:/ almost
you're right, it returns a promise
but, it also doesn't return a promise
??
wait , i can also return a object
everything is an object
it's like
any, but more uselessoke, I mean a object that holds a success or error messages
yup, but wait a bit
I do that
I just try to tell you what im thinking
I try to figure out the
also doesn't return a promise partwell, it's an async function, so, automatically returns a promise
but also, it's returning a json object
so it needs to be this :
`
no
put the promise back
oke
sometimes it is very hard to understand what you exactly wants
because this is a very complex and (very terrible) area of jsdoc
oke do you mean
promise<json> ??that's very close, but no
because it is now
Promise<any> you actually have to create your own type, which is very ... irritating
hopefully it is not down in the rabbits hole
it is 😦
but i will write it for you
Can I run ? 😛
you can run and hide, but you can't escape 🤣
chips
too late
just like my own deamons.
I could run for more then 50 years but thet have all catch me ':'(
it's fine, im just testing it
np
here's the disgusting mess
this goes on the very very very top of the js file
/** @type {ServerResponse} */ <-- this is the type you use and receiveso like this :
you removed the comment for
all_forms?I did
you shouldn't
I thought there were never was a comment
i though so too
that has a type of
NodeListOf<HTMLFormElement>
you have to separate it with 2-3 new linesnow, the function returns a
Promise<ServerResponse>all changed
wait, you're not done
Can we quit for today
I have to send a important document for my daugther
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L131 <-- just set the type of this to
ServerResponse and you're doneis that really needed
it's good to be explicit
it looks the compiler has already figure that out
it did, yes
but the code is also read by humans
and humans won't know, at a glance, what's the type of it
oke
and also add the formdata and form.action ?
no
that has nothing to do with that
oke
you're documenting the type that the variable will have
so it have to look like this:
perfect
wait no
@type {ServerResponse}
types between {braces}
if i didn't do it, fix it tomorrowI did that already
nice
and pushed the last version
let me check
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L14 <-- no braces
https://gitlab.com/roelofwobben/short-code-form/-/blob/main/js/myCustomForm.js?ref_type=heads#L117 <--
{Array.<String>}
and that's all i seealso changed
then it's done
and pushed
oke, then I can submit it and hopefully the author of the challenge aprroves it also
I expect a new challenge somewhere this week and the results of these challenges
there's stuff that can be improved, but, honestly it's a rabbit hole with no end
yep, I know
test it and, if it works, ship it
the problem of developing
I can always be improved
but the "client" wants to see a result somewhere
then test to see if it is working, and then push
it seems to work
a empty form I see error messages
and a valid form I see the mail is send message
so I ship it
ship it
Thanks
you're welcome
and I hope I may ask you again if there is a php challenge
I hope there will be a sort of template challenge 🙂
not gonna lie, this has been very draining, as i hate teaching
i like to help, don't get me wrong
For both is has been draining
GN and again thanks
it has
but, you first should try to implement it yourself
instead of grabbing someone else's half-assed work as a base
maybe I will afte some days rest
you need it
maybe the next challenge is again a php problem
hopefully
then I could use this a a sort of example
could also be a react problem or a php template problem or a Gutenberg template problem
we see
you can do a lot of things with wordpress
we will see, but for now just rest
yep
a few busy days the next few days
so no developing
good, you need to rest a little
no. rest a lot
that's even better
and also rest a lot because of the grunding work
i will rest at least 8 hours
I hope I can rest so long
the last three days im always awake in the middle of the night
with some stress in my mind or body
now the stress should be a lot less
could be, we see which part the developing is
sleep
that's where
Oh my goodness, you should get “KPow Discord Helper of the Year”! This is a crazy long and complicated thread. You rock!
thank you, it was very tiring as it was a re-write from a heap into something that could pass a peer review
it's not perfect, there's tiny tiny things that can be improved (like some capitalizations and the name of the plugin and stuff), but it's just nitpicky stuff
for an exercise, and teaching good habits, i think we fulfulled the objective
if I could I would give him 1000 or more points
its fine, dont worry about it
I do not worry
did you submit it already?
yep
I send the url of the repo to the author of the challenge
Do you want to change anything then?
well, if you can sneak 2 edits
always
in the submit.php file, all your errors have the first parameter as
"Error"no idea when he or she is looking
that is a very terrible code
oke, is there then a better statuscode like 200 for example
I know 200 is wrong
the purpose of that argument is to share a short code
something like "validation" or "email-send"
its something both humans and js code can understand
oke, I have to think about which code then
I find validation not a very good one
i just told you 🤣
why not?
of the two validation is then I think the best
for my it is a error because there was something wrong
i know, but you are already something that says that its an error
you're saying that there was an error with the code "Error"
just imagine that you want to handle the email error in a different way than the validation errors
for example, imagine that the email error blocks the form permanently (dont do that)
oke, I think I need to change my css then also
no, you dont
you are right
i know i am
Old problem that in such a "big" problem I loose what does what
you're throwing away the value, in the forEach
you just grab the .message and shove it into an array
all changed
can you send the link here?
discord search is garbage on mobile
of the repo ?
yes
moment, gitlab is acting wierd with a access code
take your time
I have to
as lomg as I do not have a verification I cannot log in
oh, that stuff
yep the annoying 2MFA stuff
get in with the help of google
also done
and now, you just need to change the name of the plugin
that needs a lot of changes because all the domanins needs to be changed
but I was thinking about chancing the name
maybe
rw_form ?no, the domain is fine
you can change it to that
but its fine if you dont
im just talking about the plugin name, so we dont go into another rabbit hole
I have no problem with chancing the name
I think the custom_form is often used
but I cannot think of a better name then
rw_form or rw_shortcode_form
any better suggestions ?
Thinking if everything is approved to look if I can put the plugin dir to github
Gitlab makes me crazy with the verification mailsthe 2nd one is finr
fine
but the first one is fine too
Then I go for the second one
it is more clear that a shortcode is used for the form
also changed and pushed
thats fine by me
as long as the plugin name isnt the stupid tutorial you followed
🤦♂️
🙂
using a div as a form ...
urgh
that is the downside of following tutorials
as a beginner you need them to learn something
but you never know how good or bad the author is
yes, but sometimes you land in gold, and other times you go face-first into a pile of manure
i know the pain
which is why i avoid tutorials and just get my hands dirty
or if the tutorial is still valid with all the fast changes to gutenberg for example
usually, it is
I would but sometimes I have no clue how to begin and/or structure code
i read documentation on it
maybe wise to also learn the old php way of making templates these days
or better stick to FSE and gutenberg ?
you kinda did: everything was shortcodes and template parts
until guttenberg was added and now wordpress uses blocks instead
I mean for front end
my "mentor" says only learn gutenberg
and im making a template with it
it is a struggle but I learn
I can image that a lot of companies still wanted the old way
and do not want to convert to gutenberg
you just learned the "old" way
its still used, as its a lot easier to inplement and doesnt require react in any way
oke,, just one things less to learn
but I m sure I have to keep on practizing
so I could make this one also with just PHP : https://wpchallenges.beehiiv.com/p/wp-challenge-1-block-development
I made that one with react but I wonder if It works when I do multiples ones in one page
that site is hard to look at
that is the wordpress site of the author of the challenges
my eyes feel like they have needles inside 😦
it hurts to look at
here is a screenshot
I find this a reall y really ugly site
https://www.speelotheekdewissel.nl/
i have to tilt my phone to look at it
it is a volunteer organisation that runs a toy library
my dream is to make a better looking site with maybe a possiblity to keep track of members, toys and which members has lend which toy
but it will take a very very long time to be at a level I can make such a site
well, if you're messing with people's stuff, it is a big responsability
What do you think of this site : https://visie-groep.nl/
That is the company that helps me to get my life in a good direction
Visie Groep
Ontwikkel jezelf bij Visie Groep - Visie Groep
Ontwikkel jezelf bij Visie Groep. Dit kan zowel op persoonlijk vlak zijn als werk-gerelateerd of een combinatie daarvan.
I like it
time for lunch . In 30 min a proffesional is here to help me
so not online till 14.30 (Amsterdam time)
it makes me hungry, thinking about peanut butter and jam
the site of my remarks ?
the site
but i like it
how do you make you hungry ?
It is about helping people
i know, but i cant read anything because of the language barrier
so, i noticed the colors and "oh, this looks like purple jam"
oke
sorry , the site is not in English
no idea of that can be implement easiliy
but they work in a small area of the Netherlands
so no real use for other languages
and im not the person that is administrator
its fine lol
did you change the plugin name?
yep
and if good , it i is pushed
looks good to me
did you fix this?
on local it is fixed
and no sign that I did not save things
and git status gave that everything is up to date
very wierd
sorry, one change is not pushed and I cannpt push it because of the stupid verification mail
that is a pain
im sure there's a better config for your repo
Yep i think move it to github
One repo for all plugins or a separate for everry plugin
And delete all my html css and js repos
I do not get any of the mails
I miss then the history
But thuis is not working
Or move to bitbucket
github has history
also, there are ways to setup gitlab to never request your stuff, but that's for #os-and-tools
Done with history : https://github.com/RoelofWobben/rw_shortcode_form
GitHub
GitHub - RoelofWobben/rw_shortcode_form
Contribute to RoelofWobben/rw_shortcode_form development by creating an account on GitHub.
and now with the change you asked for
nice!
github has a importer for gitlab 🙂
interesting
i actually though about having my own gitlab instance, but holy balls this thing is annoying
but anyways, i will check your changes later
now the first project and I can work from github 🙂
is oke
and my first react project is moved : https://github.com/RoelofWobben/rw_testimonialCard
GitHub
GitHub - RoelofWobben/rw_testimonialCard
Contribute to RoelofWobben/rw_testimonialCard development by creating an account on GitHub.
i will check in a bit
as I said many times , take your time
i sm
sm
am
... phone keyboarfs suck
kryboards
...
LOL
The react you do not have to do something with it
i will check it out anyways
oke
your life, your choices
I know you do not like teaching and you do not like react
its not a matter of liking or not react
its a matter of being easy to make code thats unreadable to me
react is amazing at a lot of stuff, but dont think that websites is one of those things
This is not a website but a plugin/component that you can use to make a nice page
but i agree for me react is the worst readable code from the js frameworks that I know
so, website stuff
and when you use tsx, then it's just vomit inducing
and then do tailwind in the mix 😛
I think im old-skool. I like my css. js ,html in seperate places or files
i like it separated too
and I hope I can be a good full stack wordpress developer in the future
practice and you will
yep, that is why I do the wp-challenges to get practice a lot
for myself I find it difficult to make up a challenge for msyself
you're doing the right thing
Happy to hear
was the only site I could find that has "real" wp problems
it seems like a good site
we see
the only thing that bothers me , that he does not look at the quality
just checks if the code works
not my style
and you never know when you get a new challenge
he says first week of the month
should be soon then
yep
first the result from the challenge we made together
and then a few days later a new one
I find it very good of a person to make up such challenges
and then every month for a junior, medior and senior
I cannot do that
i can't do that either
but, lets wait for the challenge response
yep
im doing it right now
Cannot do more at the moment
just rest then
yep, going to watch tv
or you have remarks on one of my projects
no, so far, not really
🙂
If I have time I think im going to test if the Card works when there are more then 1 card
but as you said first rest. Had a busy day
yes, first rest
rest a lot
the only thing i would say that you should have done was to let the user pick an image
that was the part that what not in the challenge and that is why I did not do it
it's kinda the most important part, but i get it
This what is what is given :
and if I test it on 2024 theme I would not work in a group
and I did not test it when there are more then 1 card
Will that do somewhere this week
Now time to sleep
no idea if it's difficult to change it so that the user can change the image
i don't know either
O< I thought you knew everything 🙂
Did some testing on the card
Two cards work
but as soon as I put a Card in a group in the 2024 theme , I cannot change any text
No idea why that happens
and if I may believe this tutorial a image upload is not so difficult
https://awhitepixel.com/wordpress-gutenberg-add-image-select-custom-block/
AWhitePixel
A White Pixel
How to Add an Image Select in Your Custom WordPress Gutenberg Block...
This tutorial explains how to add an image select or upload button for the Media Library inside Inspector for your custom WordPress Gutenberg block.
so much bs just to pick an image 😦
yep
maybe there is a better way but then I have to google more
Checked the group problem also on 2023 but it stays
Both on 2024 and 2023 I cannot change the text if I put the card in a group
i wouldnt worry about it
oke
makes me very curious why and did I do something wrong
you didnt do anything wrong
Oke
still wonder what then causs this because in the real world this plugin is not usable
its fine, its an exercise
I know
but for me things have to be working andI know this is not working
but I let it go because I have no clue why
No error messages or whatever
yeah, just rest
ignore it, let it go
I have to
so no trying if Ican make a image upload so a user can change the image ? 😢
do you want to do something cheeky?
you can use a block content tag that only allows adding images
you mean a shortcode that we did in the last 2 weeks
then im using react and php together
no no
or a react component that allows that
Would be I think a lot difficult
<InnerBlocks/>
you can set the
allowedBlocks to only allow imagesNever worked with that one
I know for a acccordion challenge I saw some one using it
So for me then first find out what it does and how it works
and have to find out how to save the images then
what it does: allows adding blocks inside your block
this takes a json array with the blocks you wanna add
oke
For me it would be a image upload block
but is innerblock for beginners like me ???
its for everybody
looks more a senior or medior task
looks harder than it is
oke
but what is then the advantage of using innerblocks with imageupload then direct use image upload ?
if you want to allow other blocks, with an option of the user picking the layout as well, you can do it easily
oke, so I could make it work that a user can choose a layout instead of hardcoding one like I did
you made me curious
So there goed the rest
🙂
lol sorry for ruining your rest time
but yes, thats the idea
you can also allow links and paragraphs and studf
NP
I can even take care that the user can change the font-size, font-colors, background-color
if I dream big
thats way too far
but nice to have
and as far as I know not very diffucult to do
is just adding this to the block.json
`
nice
if im doing this , I think I start over again with things
try it
so I know for certain that old code is not teasing me
And the new challenge that can be there in any time
?
when do you think it will come?
Somewhere this week
tomorrow or friday then
last time I got the results and 2 days after it a new challenge
But as I said earlier he says somewhere in the first week of a month
so it could be even Saturday or Sunday
and i have then till 31th to solve it
But if its takes more time , also not a problem
He says take all the time you need to solve a challenge
innerblocks looks not so difficult as I read the page of it
i told you, its very simple
sorry
but lets see what he says about your plugin
but as I see it , you can make very dymanic blocks with it
I still like your idea and then add the css part
so the user can make a card as he/she likes
you can do so much with it
yep, I know
That is also a pitfall because you can always add or improve things
but at a certain point, you have to say it is good enough
This one seems also be fun :
it is the medior challenge of the block
but I think I have to learn a lot more to do that one
for today Rest and watch tv
GN
that sounds a lot easier
goodnight
for me it sounds difficult
I have to learn SSR, apiFetch and how to make REST API endpoints
everything is way easier than you think
We will see
I had in mind to do first the junoir one to get more confident and then try the medior one
And in the far far future even try to senior ones
you will get there, dont worry
im not worry
When I do not get there it is also good
but I can always dream big
the senior one is to make a accordion
I have a nice one with html so maybe later this year I can build it with wordpress
I will try to take small steps and see where it brings me
this is the medior of the form challenge
Then I have to look how to make a custom post type
and a custom post type
and this is senior one :
so still a lot to learn
but that is oke
maybe somewhere in the future
this is basic stuff
oops So I still now know basic stuff
So a very lot to learn
but first the innerblocks challenge or the challenge that is send hopefully soon
yes, do it first
and then I can look if there is time to do another one
the medior one of block challenge looks also a good one to try
and now really GN
goodnight, and rest
Thanks
GM
if I hear nothing this week, what is a nice one to tackle ?
thats a good question
I could do the card but then with innerblocks, the second form one or the second card one
which one seems more interesting?
Hsve to think about it. Can learn from all three
its best to wait for the next challenge
Oke
and this way, you rest and spend time with your daughter
That is correct
did you got any feedback?
nope
totally no emails
frustatingf
its fine
??
its normal to take a few days to give feedback
oke
we see
still waiting on feedback of the Card one and that i submit some 2 - 3 weeks ago
I can say good bye but he is the only one to have practice in wordpress
probably is overwhelmed
but as I said we have still some more to choose
Can be, I think some 4 - 6 persons work on his challenge
and i doubt its just 4-6 answering it
????
im sure they have more than 4-6 submissions for each exercise
No idea
i have no idea too
Found back a email of january where he stated this:
so it seems that not much people work on these challenges
yeah, that isnt surprising
is it ?
i mean, where will you find a full team that just produces wordpress challenges?
No where
Hé is only one and i think it is a one man shop
maybe im the only one to solve that challenge and he waits for more
that doesnt make sense, as doing 1 is faster than many at the same time
yep
I know there is one who had done all three of the form challenges
that is crazy
but probably experienced
Totally no idea
I only know his name Igor Benić
yep a xp one
WordPress
Igor Benic (@ibenic) - WordPress user profile
WordPress Developer who loves to develop themes and plugins. In my free time I am working on personal projects built upon WordPress.
Ever heard of him ??
nope, i didnt
I also not
So wait and wait
I hate to be waiting and be depend on someone
GN
Tomorrow work further on the template and in the afternoon another proffesional to help me to get better mental
so not much coding even if it was needed
goodnight
i know it sucks, but you can't do much
I know and I hate it
in 30 min leave for working at the template
what? o.O
What do you not understatement?
this
oke, i mean that in 30 min I have to leave to goto work and "work" on my template challenge there
and you managed to work on it?
yep three divs readu
I can put it on github also when you want to see it
that will then be on Monday
you can put it when youre free
No the code so far is on a place where i casnot work at home
oh, alright
so Monday I can put it on github
put it up when you can
oke
Did you ever made a template with just Gutenvberg and a child-theme ?
or are you more the php way ?
and maybe choose anothrt challenge
It looks like there will no new one this month
maybe this one :
I think I need some categories and posts ?
With a standard install of wordpress there are not much of both
just php for me, im not too big on react
yup, wordpress doesnt have any posts by default, just 1 page
oke, if I do that , I have to see how then tests this plugin
maybe this one to make fake posts : https://nl.wordpress.org/plugins/fakerpress/
Gustavo Bordoni
Plugin Directory
FakerPress
FakerPress is een schone manier om nep- en dummy-inhoud te genereren voor je WordPress, ideaal voor ontwikkelaars die tests nodig hebben
you can just write them yourself
could
no idea how many categories and posts per category I then need
2-3 is fine
Oké so 4 posts
yup, should be enough
Oke
First sleep and tomorrow or monday i Will see what i do
oh, yeah, that's a good idea
But this one looks not so complex
Gn
goodnight
Do not know if that challenge is for me
I have googled a lot but do not see how I can fetch the posts of a catergory with SSR
I can use the API as I did with the categories but that is not SSR
Or I can use the WP_query
if you use php, to get you the categories, just use the
WP_Queryclassoke but the requirements says this:
and I believe because this is a gutenberg component, I have to use react
I think here is explained good how SSR works : https://gutenberghub.com/how-to-create-dynamic-server-side-gutenberg-block/
Gutenberg Hub
How to create dynamic server-side WordPress Gutenberg block - Guten...
In this tutorial, we’re going to create a dynamic Gutenberg server-side block. Pre-requisites As always, Here are some recommended pre-requisites […]
still no news about new challenges 😢
angry at my choice to make it in react ??
lets hope he says something soon
no, it doesn't make a difference to me
yeah, you will have to use the api then
luckly, the api is very easy to use
This night or tomorrow I have to find out why the code gives no respons on the backend
It still looks like categories is empty
@ἔρως any hints here ?
dont you have to await it, to get an answer from
apiFetch?if I look at these examples , it does not like I have to use await
https://developer.wordpress.org/block-editor/reference-guides/packages/packages-api-fetch/?utm_source=wpchallenges.beehiiv.com&utm_medium=referral&utm_campaign=wp-challenge-1-block-development
WordPress Developer Resources
WordPress Developer Resources
@wordpress/api-fetch – Block Editor Handbook | Developer.WordPress....
Utility to make WordPress REST API requests. It's a wrapper around window.fetch.
try it
before the set Categories or before the categories in the html?
you know what?
now, i don't know
this is react, and i don't know react
no problem
but I see a interesting error message :
It seems there is no route for the url and the POST methos
wierd because when I do :
in the browser I see a answer
you probably miswrote it
I will try to solve this tomorrow
When I try this :
I see error mesage that the response is not a valid json respons
you're probably hitting cors issues or something
i have no idea
And this seems to be valid json to me :
Time to sleep
maybe tomorrow I will understand this
it does look valid to me too
so why do I get the message that is is not valid
But now really time to sleep and read more about apiFetch in wordpress GN
But now really time to sleep and read more about apiFetch in wordpress GN
goodnight
@ἔρως did you ever see a message that the json is not valid
yes, usually when html is sent with the json
oke
Here I do not have a clue why this error message is shown
or why the route is not found
With some help I solved it this wa
and that works?
yep
I see now a json respons
Have to think now how to get the "name" field out of all and stick in a sort of state
this is where my knowledge is very very limited
mine also
google helps sometimes
thats good, because i cant help a lot with react
not a problem
I find it a pity that you do not want to learn to make plugins in react
But your life , your choices
its not that
i work, then i want to relax
and there are easier tools to do it anyway
oke
also well
yeah, i sometimes only get to relax at 7pm, which is really awful
ooo
I much earlier
I work now from 9 till 11 and hopefully soon from 9 till 1
9am to 11pm?
no 9am till 11 am so 2 hours
and the wp challengesI do in my free time
oh, thats good thrn
then
and I hope to get back till 9am till 1 pm
and that pays more?
it pays nothing
Our counsil pays the company and I get benefits from the counsil of my city
the purpose it to get me back to a payed job
but then I have to make some big steps
yeah, that sorta sounds like a good deal
but yeah, just work your way up to the 4-5 hours
it is my plan
I was around 4 hours work but then the operation and corona hit me
yeah, corona was devastating
so again trying to come back
But as I said earlier I have good help
it's good to have some help
how's it going?
good
i mean, the react thingy
still busy
im now trying to find out how I can take a name out of this :
this seems not to be working
why are you awaiting a response?
because I wait on a respons from the wordpress api
here is the whole code :
I try to remember how I did the same in js
https://developer.wordpress.org/block-editor/reference-guides/packages/packages-api-fetch/ <-- the example of the api is different from what you're doing
but you're using
fetch now?oops
you need to pay attention to these things
chips, and now that annoying invalid json again ;'(
check what the server returns
this :
that's in a promise
which means, that's not what the server returned
and nothing to be found in the network tab
check the filters
I did
the only thing I can find is this :
but that does not bring us closer to the solution
that's a post request to ajax
im sure that that wasn't your code
your code is the ones that say
fetch on the initiator columnon all that ones I see no payload for this request
Time to sleep here
because it doesn't have a payload
it's a
GET request
those don't have payloadsit getting more wierd
not really
I see now this :
and that seems to be the answer
that looks normal
and I see now this error :
but that returns an array
yep and also no clue where it is
but for now GN
goodnight
sorry that I was so rude but I was very tired after 2 nights bad sleep
dude, you werent rude
oke
just relax
Oke, I will do
but I doubt if I go on with this challenge
After 4 days still working on the apiFetch thing
i think it stems from your misunderstanding on how a fetch works
i notice some gaps in your knowledge in that area
I think I know how fetch work but not with react
maybe I have to find a good course on react and fetch
the fetchApi and fetch work the exact same way
both fetch something and return a promise
oke
you should take a break and learn a little about fetch and xhr
oke
im saying this so you understand how it usually works
I know
because i see you doing strange stuff like awaiting a json from a response
you do not want to harsh me but want to understand what im doing
no, i want you to understand what you are doing wrong, by making you learn the right way
only bummer that the error message from react are vaque
well, if you await a json inside of a non-async arrow function, all you get is a promise
so, in the end, you're creating new promises from data you already fetched
im sure that that will confuse you and anybody
oke
but the function is async
but still I get a message that I use the hooks the wrong way
but if I google I see that every answer do it this way
this seems to work :
the only thing is that categories is still empty
Time to dive into xhr
i would just brush through it, as fetch will be the more useful for the most part
I know
but the challenge says I have to use apiFetch
but I see that the categories are read in but not displayed on the return part
and I have to understand why
got it working
gives now this :
Now I can try to put that into a drop down menu 🙂
problem for tomorrow
i will read that a little better later on
np
this challenge is not running away
i really can't understand what may be wrong
in the new code nothing is wrong
the only thing I did was to delete that Edit was also a async method
so, it's working now?
and I forget to assign categories
yep
this is working
nice!
now I get a array with categorie names
tommorrow look how I can put these categories in a drop down
choose a category put it also in a state
and then I have to look how I can find all posts with that category
and make a nice display
and then I think ready 🙂
that shouldn't be too hard
no idea
me neither
Right now no idea how I can fetch all the posts with a category but google knows a way I think
Right now Im thinking I need a wp-query
but we see
you can pass the category ids
?? pass to what
to the
GET request for the postsoke
so the same way as I did with api-fetch ?
yup
could work
it should work
I have to take some steps first to get there
oh, yeah, you still have quite a bit to get there
one step at the time
and look if the api has a url for getting the posts of a category
and I have to change my code
Right now the category id is not saved in the state
i have no idea how hard it will be to implement
not hard
I have to look again what the response is
and change the set to a {} I think
where thet key is the id and the value the name
that's not hard then
I have to look how to make this work
I see now this error :
`
I have think how to solve this
I think I have to change the start value of the state
but like i said I have to think to what
oke
options is this :
oke
the problems was in the render
so now I can use the id of the category 🙂
Time to sleep
solution was to change the map to this ;
I go early to bed because tomorrow I get a MRI of my heart
and have to be early at the hospital
and yes there is a endpoint
nice! you're basically reducing the amount of data that you pass around, which is nice
you really need to sleep
yes, boss
and I see when I can and will work on this
i don't understand 80% of the code you show, so, i can't help a ton
np
I understand it
maybe I can make it clear with some jsdocs ?
of course after the hospital
or explain to you what the code does ?
i look at it and understand most of it
but the expectations of what it should do is what gets mr
me
It should ask the api for all categories , take the name and id out of the response and store it in a variable categories
Edit.js takes care of the server side and render.js is the client side
for a better explanation : https://developer.wordpress.org/block-editor/getting-started/tutorial/?utm_source=wpchallenges.beehiiv.com&utm_medium=referral&utm_campaign=wp-challenge-1-block-development
WordPress Developer Resources
WordPress Developer Resources
Tutorial: Build your first block – Block Editor Handbook | Develope...
In this tutorial, you will build a "Copyright Date Block"—a basic yet practical block that displays the copyright symbol (©), the current…
is it working?
My code yes
Did not change anything today
so, its done?
No No
Like I said I have done nothing
I only give a respons to what you said that you do not understand 80% of my code
no developing today. Had a MRI and a very very bad night so I rest a lot today
yeah, i wont ask anything about this, so you dont get distracted with any codigo
np
the mri was at 8,30 so for me the past now
now wait 10 days for the results 😦
still, you gotta go slow so you dont overwork yourself
yep I know
that is why I decided to do not coding today
good
thanks
still learning to keep my own boundaries
having boundaries is very important to be a healthy developer
i know, even if I not get a job as as developer, it is healty for every humna
it is, and thats why im taking a break today as well
💯
and I do not think I see a new challenge of wp-challenges this month
he seems to be gone after mid February
time for a late dinner
that's actually sad
the being gone, not the dinner
we see
if its really so, it is very sad
it;s te only site I know with "real" wordpress challenges
But I see he posts still on Twitter
But no respons if you send him a email for a long time
maybe he's just overwhelmed
could be
as lomg as he writes nothing nobody knows
but I have still 2 to go 🙂
lets see how it goes
nothing more then I can do
yup, besides having your dinner
that is also the past
we had chips
so time to watch tv and sleep early I hope
and tomorrow I try to make the drop down for the categories and store also that
yup, save it for tomorrow
I see how I feel tommorrow
if you don't feel like it, just relax
exactly
GN
goodnight
selectbox is working
Now time to find out how wp - api can help me figure out which posts are in what category and I like to use the per-page option
so back to the manuals
you can just set the
categories parameter with the ids you need
by the way, use the _fields parameter to reduce the amount of stuff you get from the api???
this is the right url: http://learn.test/wp-json/wp/v2/posts?categories=1
and if it;s possible I want also include the
per_page parameter
or do you mean :
i dont think that that's right but i cant check now
😢
wordpress has a few query parameters you can set, and one of them is
_fields
when you search, wordpress has to render all the content for you, but you only need a few fields
with that, you can say the fields you need and reduce the memory usage and increase performanceoke
I have to google
and look how I can make the per-page and category dymamic and how the url must look like
or can I do :
then I have to only find where that _fields` part must be placedWordPress Developer Resources
WordPress Developer Resources
@wordpress/api-fetch – Block Editor Handbook | Developer.WordPress....
Utility to make WordPress REST API requests. It's a wrapper around window.fetch.
you're doing it wrong
oke, i looked at that one but do not see how to deal with 2 things
The category and the number of posts a page
those are query arguments
oke, I see it now
the api is pretty weird, i know
so I can do :
basically, that's it
Changed it to my situation
pressed enter to soon
page-number <-- this wont work😢
better use then
pagenumber
?
and we have that _fields thing
I have to figure outdo you want to subtract
number from page?
easy
check what the browser returns when you visit the api, in a new tab
firefox helps a lot here, btwI see a lot
now, pick the fields you need
for example, do you need the
_links?nope
all the things beginning with _ I do not need
you probably just need the id and the title
not the id
Im thinking of date, title, author, content
well, you want to select a post, right?
is not in the assignment
so, what do you need to do with the posts then?
it is only stated to display the posts , not a link to another page
oh, then yeah, that should be enough
this is stated :
that's perfect
so, the
_field can just be an array with thisso maybe I can use the id to make the title a link
if you want
you don't need it
but that link never would work 😦
you have the
link propertyso rather make a nice maybe even a sort of blog posts template
but you were talking about the _fields thing
yes, to limit how much junk comes from the api
I can then use that for the categories thing
There is also a big junk
that I do not need
yup, it reduces the api response time as well, and makes your plugin feel more responsive
oke ,
So I can do :
no, it's an array of strings
you still didn't fix the page minus number
oke
that's an array of
Uncaught exception: undefined variable date
strings have quotes`
perfect
wait, no
you have
_fields= instead of _fields:oke
but I can do the same with thr category part
now I get the date I wanted and a lot of junk
WAUW
if this work , then I only have to write some html can css to display the posts
and then ready
yup, that should be it
a new record for me
A plugin in a few days instead of a few weeks
the other one was a big re-write of something that was very very badly written
this one, you're doing most/all from scratch
that's the difference
Then if there no new challenge I can even try this one :
that will be a new PHP challenge
So more difficult for me 😦
so, basically, that's to implement contact form 7
no idea
I do not know all plugins
it's a contact form plugin that does exactly what's in the challenge
LOL , so he looks at existing plugins and make a challenge
in this case, he might have though about it by himself
But I can try after I did the react one and a break after solving it
a break is always a good idea
or somewhere in the future
but first solve this one
yes, it shouldn't take too long
no idea
I have to think of a nice layout
and im not a designer 😢
but you are right , I solved almost all the challenge 🙂
maybe there is a future for me as a wp developer
but still enought to learn
and practice, practice and practice
practice is the most important
if i were you, i would just add a centered h1 with the title, the date under and then the excerpt
(not the content, as the content can be massive and have lots of plugins)
maybe I will
you can then add a
read more link, but it should be automaticoke,
then I can use the except instead of the content
yup
which is a lot shorter
also, if the post has the same block in it, i don't know if it will create an infinite loop, so, excerpt wins
oke
so if I have to post I can make a loop with some div to display it ?
what do you mean?
I have asked for all the posts of a category
that will return a div
so I thought I could some sort of loop to display all the posts
oh, yeah, you have to
so some work to to the next few days
and i have to look how I can make it work the the posts are not "loaded" before a category is chosen
what do you mean?
When a user has not chosen a category
then in my opoion there must be no posts shown
yes, you can show something saying "select a category"
for example
I will see how I can make that work
you should be able to, it doesn't sound hard
we see when I get there
maybe it is small problem, maybe not
yeah, we see when you get there
GN
tomorrow morning working on the template for 2 hours
Hopefully I get the first page ready
im sure you will be able to do it
goodnight
GN
one remark
I was thinking of this layout for the posts
https://wordpress.com/theme/ron?tab_filter=blog
without the image
try it, and see how it goes
that is my plan
go for it, it's a good plan
thanks for the confidence in me
you're welcome, im just trying to get you to keep going
I m still going with sometimes my own ideas
I like to make good code and I like it when things look well
I like to make good code and I like it when things look well
as long as you format your code properly and don't cram everything into a single line, it will be fine
oh, and proper documentation and indentation
oke, that I also have to change
this one does not have jsdoc
you should get into the habit of using it
unless you use typescript
then you can just use typescript's stuff
no idea if wordpress understands TS
I have played with TS
no, but the compiler does
but don't know if react supports it
I think so
im not sure if it does, but its fine
oke, this seems to work :
now lunch and sleep a lot
that looks good to me
🙂
i will check in a bit
and I have a problem
I do this :
but now the compiler thinks Category is a string where I think it must be a array of a string and a int
Have to think how to solve that one
on the phone, discord just shows an attachment
so, i will check latwr
later
no problem
the prpblem is on the onChange part
i will see what i find
in about 3 hours
take all the time you need as I said many times before
i know
i just wish i was napping
but napping is what got me here: working late
then do it
I slept the whole afternoon because of a busy week
working late is never good 😢
Code can wait
yeah, but i have legal obligations to fulfill
😭
Bummer
I hope for you that it will not take much time
i finally got free
and used my accrued overtime
pfffff
i almost go to bed and you are just ready of work
crazy
it's my fault anyways
why do you have this:
instead of just this:
did not know if that worked
I will change that tomorrow
the api returns an array, and you defined which fields you're receiving from the api
how do i know it returns an array? because you're running
.map on it
and you're just re-creating the object you receive
save yourself the workoke not smart
and if you don't know if it works, just try
the worst that can happen is ... not working
yep, and both ways I learn something 🙂
yup, but you save yourself a ton of work
and you save battery as well
my own battery ?
That one is totally empty
The computer battery is not a problem
I use a desktop computer 🙂
on a mobile phone, battery is a premium
🙂
if you can shortcut stuff and save some work, consider it
Im old skool. I use my mobile for calling and for seeing how I must ride with my car
So then I use google maps
Still wonder why on line 85 the onChange
Category is a strimg
Hopefully I see it tomorrow when my brain is more relaxed
onChange A function that receives the value of the new option that is being selected as input. If multiple is true the value received is an array of the selected value. If multiple is false the value received is a single value with the new selected value. Type: function Required: Yesnotice this detail:
[...] that receives the value of the new option [...]that's why it's a string https://developer.wordpress.org/block-editor/reference-guides/components/select-control/
bummer
BEcause of the apiFetch I need there the id of the category
and with your changes the categorie drop down is empty 😢
he, response look well
but when I do :
categories stays empty
see this screenshot :
first is the response
and second is the categories
so weird 🤔
yep, I think we are hit by the wierd reactivity of react
but I agree puttningg back the map is also wierd because we have the data already in the right form
yeah
it's so strange
js frameworks are strange in this sort of things
but just ike you do not have any clue how to proceed
I have a idea
we have this :
but the examples on the page looks like this :
`
so I think I have to change some code
This is a little bit better :
but the drop-down keeps to be empty
but the two console log's are not both the sam
why are you using
.then when you await?you are right
await is removed
that won't work now
but you should be able to move the
setCategories inside the thenyep, I saw it
Everything is empty now
chips, when I do this :
the drop down is still empty
this is not funny anymore
why do you have a
catch?because it is needed by the try
otherwise you get a error
and when I try this :
I do not see the drop down at all
and also no errors whatever
very annoying
promises have the
catch method:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch
use that insteadsorry, im confused now
What do you want exactly
I do not think I can mix a react promise with a js promise
there's no such thing as a "react promise"
https://react.dev/reference/react/use <-- this just links to the mdn article
still very confused
how?
it's very straightforward
it's just a promise
there's nothing special to it
I do not see what exaclty to change at my code
dont use a try catch
oke
I do not see how to make it work with the page you were reffering to
check the examples
I did
then extrapolate the example to your situation
and that part I do not see
dinner time
yeah, take a break
you will realize it's way easier than what you're thinking
oke
I did this:
and see now a message that setCategories is undefined
which makes no sense because I defined it a few lines before it
i think it's best if you ask in #front-end
because i really have no idea
I also not
also, you're misusing the
.catch
but it's fineI almost at the point I throw the towel
finding errors is fine
it happens
I know
but fighting against errors that does not make sense or no errors at all is very frustating
it is
Make a topic
Discord
Discord - A New Way to Chat with Friends & Communities
Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.
hopefully someone give a respons
yeah, hopefully
wordpress can sometimes be a pain
I almost have my first page ready but m y margins get overwritten by a faulty margin
And I have to find out Monday how to solve that
I see more and more that Wordpress is fine except when you want to do sometimes that is already defined in a parent theme
then it is a pain in the ass to make things work
but all we can do it wait
nah, this is just react/js misunderstandings
and i don't know how to help you because i dont use react
totally not a problem
thank you
yw
I see that you really try to help me
maybe I could have better tried the form one where you said that form 7 must be re-created
no, no
you're learning react
it's a very popular ... thing
yep
some love it and some hate it
but I think wordpress does not learn you standard react
looks like to me that theyt took a small portion out of it
and changed some things
it "requires" you to stick to a specific way of doing things, so it works the way you intend
time to watch tv and parcitate in a quiz 🙂
yes, just relax
yep, cannot do more at the moment
it's not just that
it's just so you don't get too frustrated
im already that
I hate that I cannot solve this
i dont have enough knowledge to help you on it
I know and that is not a problem
that's good
I asked also on reddit .
My code seems to be good
But the drop down stays empty 😢
are you getting any data?
it seems I do
then check if you do
when I do
console.log(response) I see the categorieswhere do you put it?
between the call and the setCategories line
then check inside whatever renders the categories
I will
first a lot of sleep
yes, it's late for you
not for you ??
it is here almost 10 o clock so not very late
almost 9pm, which isn't late at all
i agree
i usually sleep at 5-8am on weekends
that is very short
oh, no, i start sleeping at that time
i usually sleep until 1-6pm
oke
I slept last evening almost 12 hours
From 11 pm till 10 am
Is your family happy with the strange sleeping pattern ?
if I may ask
i live with friends
oke
I have a family with a wife and a daugther
if i had one, i wouldn't have the same sleeping pattern
who knows what the future will bring
yup, who knows?
only time
if you said before 2000 that in the next 5 years I would find my wife, getting married, get a child and move to another part of my country
I would say you are crazy and it all happened
stuff can change really quickly
yep
to the good or to the bad
but GN
and I hope that tomorrow someone has a hint why things are not working
lets see
but don't stress over it
goodnight
Seems that I need the map after all
After 2 days no other solutions found on this channel and reddit
I will wait for more responses
if the map works, use it
I think I will
but I agree with you , it is doing the same as we already have
so very wierd we need it
very very weird indeed
i don't know why the behaviour, but it's react
yep
and on stackoverflow I see the same sort of solution
that is even weirder
I have asked even there to see if there is another solution
https://wordpress.stackexchange.com/questions/424202/why-is-my-drop-down-empty
WordPress Development Stack Exchange
Why is my drop down empty
For a wordpress challenge I need to make a dropdown with all categories and I need to use apifetch
So I have this :
/**
* Retrieves the translation of text.
*
* @see https://developer.wordpress....
for now GN
tomorrow hopefully my first blcok template page ready
hopefully someone answers
goodnight
yeah, nobody is going to answer it
not to be mean or anything, but, the question there needs more details
bummer
which details do it need more ?
how's it being used in the block? what are you trying to do? do you have any errors? does the api send anything?
currently, all you have is a code dump, which is nearly impossible to answer
changed it and I hope it is now good enough to be answered
GN
hopefully it is enough
goodnight
we see
and otherwise I will make the map back
just add it back, if it works
Another question :
Im thinking to do the form one
But little confused.
in the simple one we did :
and then in the plugin :
but if I read the hints I have to use now :
To define the fields
Does that mean the shortcode will now be
[my_form] ?no, thats completely different
the stuff you add to the shortcode will be in the $args variable
I saw that already
and when I use the apply_filter I think I do not need the args one because I cannot define it on 2 places
well, it's not that
it's just that it doesn't exist outside the shortcode function
still confused.
When I do it on 2 places I can get two different things on forms
and that is not good
what do you mean?
let's say I make a shortcode like this : `[form message= "message"]
But on the apply_filters I do :
then I have a difference. So I think it can lead to wierd bugs
those have nothing to do one with the other
oke
I try to see how I can begin this one :
but I think I stick on the junior ones
and wait till a new one comes along
I still miss a lot of practice or xp to deal with the medior ones 😦
oh, thats completely different
how so, this is a medior challenge of wp-challenges
and I fail to see what to change to make my old form to a solution of this challenge
the way that contact form 7 does this is a post with specific shortcodes
you dont need to go that far
I know
but I try to see what the challenge exactly wants
shortcodes can receive content
because there is talking about extending the old form it looks to me I need a shortcode and the apply-filter
you can make shortcodes just for inputs and stuff
one for a textarea
one for radio buttons
one for checkbox
then the shortcodes come inside the final shortcode
oke, I have to let this sink in
alright
I think I pass . IM afraid to get into a big rabbit hole
its alright, i get it
im get more and more the feeling that plugin work is not for me.
but as I said I will wait for another beginners one
shortcodes are super annoying
I know. I read that most of them could be replaced by react component(s)
Wordpress can be easy but as soon as you want to dive deeper it can be very difficult for a beginner like me
the worst is that most content online is only teaching the basics
and there are some things where wordpress really falls on it's face
yep
and most worst is that some content is made by people who do bad stuff and/or have no idea what they are doing
and im stuck between the basics and some advantage stuff
and forms are a hell in many languages
I do not know if this is a good tutorial : https://tommcfarlin.com/custom-filters-with-shortcodes/
Tom
Tom McFarlin
Using Custom Filters with Shortcodes | Tom McFarlin
Even if you’ve never used either the API or the functionality before, it’s easy to begin implementing custom filters with shortcodes.
but if I understand it well the apply_filters can overwrite the parts I wrote on the shortcode
i will check it after work
Oke
im sure there's an easier way
I could not find any the last few days
i will check in a bit
oke totally no hurry
i don't see how it can help
NP
i mean, it is neat that you can do what's in the blog, but that's it
oke
I was looking how I could make the challenge work
and that could be a path
try it
maybe it will work
oke