Fonts show up in the "preview" area in a much bigger font size when they are selected, compared to the font size of the list of the fonts for browsing.

The application allows users to change the placeholder text in the preview area by typing on the keyboard to make it possible to visually assess combinations of glyphs in a font.

But, it also supports a unique feature for changing the placeholder text, without typing on the keyboard.

Requirements

The application should run without errors.
The application should have an identity of its own, designed by you. You should give in a one-to-three sentences description of your design choices on the application's identity.
You should pick a number of fonts between 50-100 from fonts.google.com as per your artistic tastes. You should give in a one-to-three sentences description of your collection's merits.
You should include the fonts as CSS @font-face at-rules locally.
The user should be able to browse among the fonts. Font browser should list the fonts in their own type faces (e.g. "Courier" item in the list should appear in the Courier type face).
Selecting a font in the browser should bring the font up into the preview area with a much bigger font size which is up to you.
Preview area should present the selected font with a placeholder text which you can specify freely. You should give in a one-to-three sentences justification of your selection of the default placeholder text.
Preview area should enable an interaction for changing the placeholder text by typing on the keyboard.
Preview area should support the Glyph Rounding feature which is explained as follows: The letter under the mouse cursor is incremented/decremented by one letter at a time on mouse wheel movement. Opposing directions of movement should result in opposite interactions. Incrementing by one letter means replacing the current letter with the one just after it in the alphabet. Decrementing by one letter means replacing the current letter with the one just before it in the alphabet. The alphabet being: "a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z" in cyclic order. So, before "a" is "Z" and after "Z" is "a".
There should be a way of browsing in the previous font preview history. Which has the same functionalities as the font browser except changing the preview history.
The application should be written in plain JavaScript ES6, HTML5 and CSS3 without any external package dependencies.

Installation and Submission

You can start working on the project by cloning this repository and entering into the "Font Fountain" directory. Then, issue npm ci which will install dependencies for the development. Running npm run dev will bootstrap the application, welcoming you with a quote from Edsger W. Dijkstra.

Submission

You are expected to submit your work as a single zip file alongside with all of the original files in their original file structure as they are provided to you. So, do not delete any files or directories.

Please name your zip file using the template ff_<name>_<surname>.zip and send it to hr@technarts.com with an appropriate subject. Humans will read it.

Some of the requirements above asks from you some written answers. You should place them at the end of this README.md file. Anything you want to convey to us about your implementation can also be placed at the end of this README.md file.

Assessment

We want to assess multiple aspects of your skills. You are not expected to be perfect. But you are expected to show your sense of quality by paying attention to:

Architecture

Of your realization of this project. We will seek for well-thought abstractions, carefully designed user experiences. We take notice when we see cleverly opened paths for interactions to occur almost naturally and we have an eye on information findability and understandability.

Visual Design

You should show your sense of "beautiful" in a purposeful manner so that your visual design choices make sense.

Engineering

What tools you invent, use and reuse to make yourself able to implement the project is extremely important.

Implementation

Your code should be open to extensions. In a code base, where there are unnecessary complexities, this is tough job.

Your choices of names for variables, functions, classes etc. should reflect your architectural design.

Comments will help us understand when things get hot.

How do you handle exceptions? More importantly, what do you consider as an exception in your implementation?

Your implementation should work without performance issues on a moderate hardware which is more than necessary for this project's requirements.

FAQ

Here are some self-answered questions that may help.

I hate this kind of stuff. Why are you taking my precious time?

Yes, I understand you and respect your attitude on this. But our experiences taught us that unless you see somebody on the job, way more precious times get lost. This should also be understandable on your behalf. Maybe you can think of this as an opportunity to tackle with a well defined problem.

Alright. I accept the challenge. But you completely lost me, I haven't even the vaguest sense of what to do.

Well, if you accept the challenge, you are expected to write the JavaScript, HTML and CSS codes for the application described in the Requirements section. When we run npm run dev we should be seeing an application about fonts. Which is there to help facilitate font selection by providing a preview functionality with the unique feature of Glyph Rounding.

Nope. Still lost. Any help?

Alright, here is an example layout for you. You can use it to realize the project. It is described in a very high level fashion:

That "Glyph Rounding" thing gets on my nerves. Can I refuse to implement that feature?

We do not recommend not implementing that feature because it is the juicy part of the project. Nevertheless, your submission will still be considered without it, if it is the only thing missing.

I have access to some intelligences that are itching to help me. Am I allowed to get assistance from intelligences other than mine?

It depends on the type of the activity those intelligences perform while assisting you in doing your task. Let's analyze the issue a little bit deeper:

For the sake of brevity, we will refer to those "Other Intelligence"s as "OI". An OI can be anything you gain intelligent support from. It can be a friend or mentor of yours. It can be your cat, dog or it can be an LLM.
Let's suppose that OI does all the job, i.e. thinking, designing & making. Surely the motivation is yours. It just does what you say. You initiate the act, have the job done, consolidate the various outcomes if they still need to be put together in a meaningful way. Eventually you have the task ready for submission.
Or, suppose the OI does the thinking part and maybe it also provides a design as a realization of the thoughts it produced. You do all of the coding following the guides & artifacts you obtained from the OI and you are proud of the work you have done. You put everything in a zip file and prepare for the submission part.
Reversely, suppose you do the thinking & designing part. This is where the intellectual value is located after all, right? You co-implement with the OI or the OI takes care of itself and voila, you are ready.
Finally, suppose that you think, you design, you do. Get assistance from the OI or from any source of knowledge in the form of retrieving information.

Now, in the scenario #1, we had better interview the possessor of the OI if it is a human being.

In the scenario #2, although it is clear that you certainly know how to use the keyboard and a code editor, we cannot assess some of your most critical cognitive skills such as thinking and designing.

Scenario #3 shows some of your potential but we need to get to know you in full action. This is the place you need to show your full potential, not some part of it.

The last scenario, scenario #4, is the only one which makes it worthwhile to interview you considering the submission you have made. Because only when you do the act of thinking, designing and doing all on your own you show your full agency on this task which is what we need to measure for the position you have applied for.

As for the retrieving information, this is the part related to "knowing". Since one cannot "know more" without external sources of information it is perfectly fine to get informed from any reliable source of information. The technical details of getting informed, learning and ultimately being more knowledgable are irrelevant as long as they are legitimate.

README.md

Font Fountain

Project Specification

The Project: What and Why?