Hoe: kopieer na die knipbord op die web
Aangesien ek baie kodegidse en artikels met kodebrokkies op hierdie progressiewe webprogram sal skryf, is dit noodsaaklik dat die volgende take gedek word wat die gebruiker benodig:
- goeie leesbaarheid van die kode
- eenvoudige en duidelike optrede om die ingekapselde kode te kopieer
Dit is die slotsom wat benodig word vir nuttige kode-voorbeelde. Maar kan ek dit verbeter?
Verbetering van betrokkenheid
Om my app se kopie-na-klembord-funksionaliteit te verbeter, het ek nagedink oor hoe om die klik op die kopieerknop lekkerder te maak, aangesien 'n aangename gebruikerservaring (UX) die goeie newe-effek het om betrokkenheid te verhoog.
Ek het met die volgende vorendag gekom: wat as die app op 'n kletsagtige manier "antwoord" wanneer die gebruiker na die knipbord kopieer? Die ervaring sou onmiddellik meer persoonlik wees. Met behulp van 'n arrogante en snaaragtige taal het die boodskappe wat voorsien word ook 'n unieke karakter.
Kom ons kyk na die finale uitslag:
I'm a code example, sort of.
Click on the button in the bottom right corner to copy.
Soos u kan sien, is die hiërargie van bo tot onder as sodanig:
- Nabootsing van 'n inheemse venster met vensterknoppies
- inhoud
- handelinge (soos op skrif slegs die kopie-na-klembord)
Die implementering
Wanneer die gebruiker die kode na die klembord kopieër, word 'n ewekansige keuse uit 'n voorafbepaalde reeks teksbrokkies vir 'n kort tydjie vertoon. Die ewekansige keuse word gegenereer vir elke voorbeeld van die kode. Om die kompleksiteit te verminder, kan die teks nie gewaarborg word in die omvang van die artikel nie. Tog is daar b / c redelik baie stringe om uit te kies, botsings het 'n lae waarskynlikheid.
En dit gaan daaroor! Ek hoop dat u van hierdie klein UX-verbetering vir kopie-na-klembord-aksies hou, miskien het dit u ook geïnspireer vir UX-veranderinge in u eie app!
- Tom
