Special kind of "inputs"
I was wandering around in my imagination palace thinking about things I can't do actually with frontend technologies. Then, I opened the door and there were the gmail special kinds of input
21 Replies
Then, I am here, asking: does anyone know a tutorial about how to do the above inputs? (No, they are not real emails)
Being more specific
Inputs which after tapping enter will be like tags and then allow you to enter more emails
And special buttons which would bold the text, align it in the center, left, right
Put a stroke in the middle or bellow of the text, change font-size, font-style
And do this be visible in the input field
You can start by looking at how gmail does it
inspect tool is a trusty tool
check what those inputs are, are they actual inputs? what about the tags?
then, try breaking it down in parts, you're unlikely to find a "how to make gmail inputs" but you're far more likely to find "how to make a text editor" tutorials
(cause that's basically what the email compose thingy is)
Is that he dont do videos about js, do him?
This would involve js
he did say he would do some js at some point 🤔
ew don't look at what gmail does, it's cursed
I thought in a method, but Idk if it would be accessible
eh, try it
do it and figure out if it's accessible, and if not think about why
and how you'd fix it
all about testing things out
I was just about to say this
Google is like the worst
They make the best content (about code and practices) and the worst code around them.
I thought in putting a div there with a paragraph, where when a user clicked would refer to a hidden input box
But if there are hidden input box then it is not accessible / secure right
this is for the uh...tags? pills? the
TO: fieldyea I was going to say to many moving parts atm
break it down start with one
yup, break down the problem into smaller problems
the tool tip wysiwyg is like a whole week of learning for me lol
to make it work well and accessible
you get good at this and you will be a great dev. I guaran fircking tee you
Hide the input box behind the div with the paragraph.
And the things to change the paragraph while typing
and then when clicking in the button it would wrap a semantic tag for such purpose or change it's style for font-size or font-family
100x this
code is just boxes in boxes
I mean ... blocks in loops
<,<;;
Same apply though you have to start with the first box
yup
In a description webmail from outlook I looked how it was done
I'm not a front-end dev and have not touched the FE in ages but here's my immediate thought
not gonna give it too much thought after this lol
It has paragraphs with the atributte contenteditable
But is this good for a form?
Would it be more proper with actual html inputs…
a simple normal input (accessible yay) and when it finished typing the email (either an enter with auto-fill or a space) you add the pill BEFORE the input (a simple <p> is fine and also accessible) and remove that email from the input (you'd have to keep some state btw) then...if the user tries to delete when the input is empty you check if there's a pill already there and if there is you turn it back into a regular input (add the text to the input tag and remove the pill) and allow the user to either completely delete it or just edit it.
rough rough idea please do think it over lol
don't quote me on it tho 😎 ask the FE devs 
I haven't answered a single question in #front-end in ages now that I think about it lmao
yup
again...all about breaking it up into smaller problems :)
best damn thing you can learn in your career
I haven't answered a single question in #front-end in ages now that I think about it lmao
yup
again...all about breaking it up into smaller problems :)
best damn thing you can learn in your careerI'll do it for fun after work