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
No description
21 Replies
Pi, a future fluent jp speaker
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
ErickO
ErickO•14mo ago
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)
Pi, a future fluent jp speaker
Is that he dont do videos about js, do him? This would involve js
ErickO
ErickO•14mo ago
he did say he would do some js at some point 🤔 ew don't look at what gmail does, it's cursed
Pi, a future fluent jp speaker
I thought in a method, but Idk if it would be accessible
ErickO
ErickO•14mo ago
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
b1mind
b1mind•14mo ago
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.
Pi, a future fluent jp speaker
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
ErickO
ErickO•14mo ago
this is for the uh...tags? pills? the TO: field
b1mind
b1mind•14mo ago
yea I was going to say to many moving parts atm break it down start with one
ErickO
ErickO•14mo ago
yup, break down the problem into smaller problems
b1mind
b1mind•14mo ago
the tool tip wysiwyg is like a whole week of learning for me lol to make it work well and accessible
ErickO
ErickO•14mo ago
you get good at this and you will be a great dev. I guaran fircking tee you
Pi, a future fluent jp speaker
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
b1mind
b1mind•14mo ago
100x this code is just boxes in boxes I mean ... blocks in loops <,<;; Same apply though you have to start with the first box
ErickO
ErickO•14mo ago
yup
Pi, a future fluent jp speaker
In a description webmail from outlook I looked how it was done
ErickO
ErickO•14mo ago
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
Pi, a future fluent jp speaker
It has paragraphs with the atributte contenteditable But is this good for a form? Would it be more proper with actual html inputs…
ErickO
ErickO•14mo ago
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 PepeLaugh 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
Pi, a future fluent jp speaker
I'll do it for fun after work
Want results from more Discord servers?
Add your server