A week of returns. I returned to the WTF “Co ten Frontend” training and I returned to the Strip Expotentation project. In the first case, I promised myself that I would finish the training as soon as I immersed myself in React. I haven’t delved into React yet, but I’ve spent a lot of time learning about CSS. In the second case, I felt that it could be done better. Especially since two people tested the application and found a few elements for improvement.
Let’s start with this week’s trivia
Spending my time reading posts in various frontend groups, I started to wonder why the participants recommend SVG graphics with such fascination. What is so interesting and worth recommending about this format. Now I know. These are graphics that can be freely edited using CSS code. You can edit individual elements, the entire graphics, and add reactivity to events to the graphics. This gives a lot of possibilities and explains the fascination with this format among frontend users.
Another interesting topic for this week was Open Graph. If you’ve ever wondered where Facebook takes photos from after adding a link to the website, it is thanks to the information placed on the website in Open Graph format. Interestingly, FB even provides a page to test how the portal will download data from the Open Graph format and how it will be displayed. It’s good to know how things happen on the internet.
What did I improve in the Strip Expotentation project?
The first thing is how the results are displayed. It annoyed me that the digital results show up on the same line as the text. It didn’t look pretty. For a long time I tried to insert into JavaScript to break a line, but I failed. Eventually, I wrapped the text and digital results into separate divs and now it looks like I wanted. I also improved the layout of the input form and changed the font settings to add more responsiveness.
The second element for improvement, even more important, was the validation of the input data. I wanted to limit the range of numbers and powers to input. Mainly because the program only works well in terms of natural numbers. However, with large natural numbers, the result is unreadable, and the calculations themselves strain the equipment, and errors or loops occur. Therefore, I decided to introduce restrictions.
Initially, I wanted to use the pattern attribute, which allows HTML input validation but found that it can only be used when entering text-type data into the form.
The only thing left for me to do is to enter numbers on the HTML side and validate using conditions on the JavaScript side. So I did, and the site is dealing with out-of-range numbers, spitting out elegant information that some number of power is out of range. Well, that’s a good thing. The last element is to pack what the function returns according to the input into an elegant function, but for that, I need to dive deeper into JS. So far beyond my abilities.
To sum up, the week was not very intense, but I am very happy with it because I managed to improve the elements that irritated me the most in the project Undress magnifying. Of course, the design can be further sanded, but at the moment I think it’s OK.
