Provide Typing Speed Testing App for /examples Folder

[bikathi]

Description

Hi, my pr includes code for a bare bones typing speed testing tool (analysis Not Included), this I feel will be a good starting point for many people looking to learn by example.

The example uses TailwindCSS for styling so it can also serve as a good starting point for those who want to use Yew with Tailwind. I have also added sample logic for uploading and reading data from a text file, which should serve as a good example for users who want to do things related to file uploads. Feel free to ask any.

PS: See the GH Pages live link here: https://bikathi.github.io/typing-speed-test/ and a screenshot below:

[github-actions]

Size Comparison

Details

examples	master (KB)	pull request (KB)	diff (KB)	diff (%)
async_clock	98.471	99.194	+0.724	+0.735%
boids	167.342	167.557	+0.215	+0.128%
communication_child_to_parent	91.493	91.740	+0.247	+0.270%
communication_grandchild_with_grandparent	102.606	102.851	+0.244	+0.238%
communication_grandparent_to_grandchild	98.964	99.209	+0.245	+0.248%
communication_parent_to_child	88.821	89.068	+0.247	+0.278%
contexts	103.934	104.188	+0.254	+0.244%
counter	85.499	85.751	+0.252	+0.295%
counter_functional	85.766	86.014	+0.248	+0.289%
dyn_create_destroy_apps	88.579	88.800	+0.221	+0.249%
file_upload	97.831	98.043	+0.212	+0.217%
function_delayed_input	91.099	91.561	+0.462	+0.507%
function_memory_game	169.749	169.927	+0.178	+0.105%
function_router	330.131	330.347	+0.216	+0.065%
function_todomvc	162.195	162.442	+0.247	+0.152%
futures	237.559	238.091	+0.532	+0.224%
game_of_life	104.179	104.395	+0.216	+0.207%
immutable	193.012	197.890	+4.878	+2.527%
inner_html	79.965	80.212	+0.247	+0.309%
js_callback	107.369	107.859	+0.490	+0.457%
keyed_list	179.716	179.960	+0.244	+0.136%
mount_point	83.186	83.433	+0.247	+0.297%
nested_list	112.989	113.231	+0.242	+0.214%
node_refs	90.832	91.078	+0.246	+0.271%
password_strength	1751.676	1751.908	+0.232	+0.013%
portals	92.329	92.577	+0.248	+0.269%
router	303.819	304.045	+0.226	+0.074%
suspense	111.678	112.224	+0.546	+0.489%
timer	88.174	88.361	+0.188	+0.213%
timer_functional	95.899	96.031	+0.132	+0.137%
todomvc	142.264	142.513	+0.249	+0.175%
two_apps	85.226	85.473	+0.247	+0.290%
typing-speed-tester	N/A	799.074	N/A	N/A
web_worker_fib	132.932	133.676	+0.744	+0.560%
web_worker_prime	185.158	186.084	+0.926	+0.500%
webgl	82.522	82.746	+0.224	+0.271%

⚠️ The following example has changed its size significantly:

examples	master (KB)	pull request (KB)	diff (KB)	diff (%)
immutable	193.012	197.890	+4.878	+2.527%

[bikathi]

Hi, Sorry for the multiple commits. I have been fighting with clippy, cargo fmt and my computer in general. Was wondering how best to combine the commits into one since it's the lasts one that really matters for such a PR

[Madoshakalaka]

Hi, Sorry for the multiple commits. I have been fighting with clippy, cargo fmt and my computer in general. Was wondering how best to combine the commits into one since it's the lasts one that really matters for such a PR

no worries, we squash your commits into one when we merge

[WorldSEnder]

o/ I like this as a showcase of what yew can do. We try to use examples usually to show specific capabilities of what can be achieved (apart from todomvc which is a very popular "hello world" app for frameworks). What would say is specifically shown by this example that can not be found in other existing ones or maybe does it show better than existing ones? (Your experience as a learner is valuable here in case you perhaps used some part of another example that can be clarified here). If the purpose is just to have a good start point for tailwind, that is fine too, just thinking you may faced other challenges when implementing it :)

[bikathi]

Hi, sorry for the late reply. My example was built from scratch and not based on anyone else's examples. In writing this example, my aim was mainly to showcase that Yew can easily be integrated with some of the popular libraries in the JS world hence my choice for Tailwind. Moreover, I learnt about the Elm-like architecture for creating components which I have showcased a bit of across the library. Finally, as a new-to-Rust person (kind off), I am still struggling with the ownership model particularly when it comes to closures, and here, I forced myself to use and showcase a few. I also never knew how clippy works until I opened this PR, and I had to fight with it, so I have added a new tool to my Rust stack.