The latest articles on DEV Community by Shi Ya (@osshiya). https://dev.to/osshiya https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1876984%2F2884fb8f-a5b4-49ec-ad89-ee3d02902f35.jpg https://dev.to/osshiya en Shi Ya Sun, 15 Sep 2024 17:08:56 +0000 https://dev.to/osshiya/css-art-space-44b8 https://dev.to/osshiya/css-art-space-44b8 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-09-04">Frontend Challenge v24.09.04</a>, CSS Art: Space.</em></p> <h2> Inspiration </h2> <p>I've loved space since I was a kid. The fascinating blackness of the space and the mysteries surrounding its beautiful planets have always captivated me. Of all celestial bodies, planets with rings intrigue me the most - they're mesmerizing. Today, I decided to recreate one of my favourite planets, Jupiter.</p> <h2> Demo </h2> <p><iframe height="600" src="https://codepen.io/osshiya/embed/ZEdNvYE?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Journey </h2> <p>The end result definitely exactly what I visualized in my mind, and so I still have a long way to go. This process taught me a lot, especially about working with 3Ds in css which is something absolutely new to me. Overall, it was a fun and spontaneous learning session.</p> <h2> Reference </h2> <p><a href="https://stackoverflow.com/questions/35142819/achieving-a-planet-with-rings-effect-with-css" rel="noopener noreferrer">https://stackoverflow.com/questions/35142819/achieving-a-planet-with-rings-effect-with-css</a></p> frontendchallenge devchallenge css Shi Ya Mon, 05 Aug 2024 00:04:04 +0000 https://dev.to/osshiya/css-art-favorite-recreation-28nn https://dev.to/osshiya/css-art-favorite-recreation-28nn <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-07-24">Frontend Challenge v24.07.24</a>, CSS Art: Recreation.</em></p> <h2> Inspiration </h2> <p>Recently, I picked up an old hobby—Minesweeper. It’s so addictive that I find myself playing for hours every day. It brings back memories of the good old days when I would play Minesweeper on Windows. I played so much that I would see mines exploding in my mind’s eye even after closing my eyes at night. Now that my favorite Minesweeper game is no longer available on Windows, I play it on Google, which features a really cool garden design. However, unlike before, I no longer experience those vivid mine explosions when I close my eyes. To rekindle that feeling, I decided to create my own Minesweeper board where it's all mines.</p> <h2> Demo </h2> <p><iframe height="600" src="https://codepen.io/osshiya/embed/jOjmQGK?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Journey </h2> <p>The process of working on this prompt was quite tedious, given the complexity of handling multiple grids. Implementing JavaScript and performing the necessary calculations were key challenges, but they were also areas where I learned a great deal and I am particularly proud of.</p> <p>Using JavaScript also required me to manage CSS dynamically through code. This inspired me to create a more interactive experience with hover and click actions. I further enhanced the project by adding simple animations to mimic the explosion of tiles.</p> <p>Looking ahead, I hope to develop more elaborate animations for the explosions, aiming to recreate the impactful effects I remember from earlier versions of the Minesweeper.</p> frontendchallenge devchallenge css