The latest articles on DEV Community by Maria Edwards (@mariaedwards). https://dev.to/mariaedwards 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%2F1370109%2F9200f5ee-d69c-426e-81ac-076d22546484.jpeg https://dev.to/mariaedwards en Maria Edwards Thu, 28 Mar 2024 00:29:05 +0000 https://dev.to/mariaedwards/css-art-grape-j5d https://dev.to/mariaedwards/css-art-grape-j5d <h2> Inspiration </h2> <p>As a frontend engineer, you seldom encounter artistic CSS, so participating in this challenge was a rare treat. It also made me hungry for grapes, haha! </p> <h2> Demo </h2> <p><iframe height="600" src="https://codepen.io/balzzac/embed/OJGjNON?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Journey </h2> <p>I want to admit that I cheated a little bit with the stem using a realistic-looking svg. My first draft utilized the <code>clip-path</code> property. However, its effect was quite cartoonish, so I dumped it.</p> <p>The submission utilizes the following CSS properties: </p> <ol> <li> <code>display: grid</code> was quite handy in creating the distribution of berries.</li> <li>Gradients, shadows, and filters to create a somewhat photorealistic grape.</li> <li>CSS variables.</li> <li> <code>:nth-child</code> selector to introduce a little variety for the berries' shapes and sizes.</li> <li>CSS animation so you could "squeeze" those berries.</li> <li>Units - <code>vh</code> and <code>%</code> - to create responsiveness. </li> </ol> frontendchallenge devchallenge css cssart Maria Edwards Tue, 26 Mar 2024 23:50:43 +0000 https://dev.to/mariaedwards/closures-in-179-characters-445n https://dev.to/mariaedwards/closures-in-179-characters-445n <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fspgbcx49hg0akgekphfi.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fspgbcx49hg0akgekphfi.jpg" alt="Image description" width="800" height="599"></a></p> <h2> Explainer </h2> <p>A closure is like a backpack with gear (variables) from a general store (outer scope) and a specialized store (local scope). Once you start hiking (function runs), you can access the gear anywhere.</p> frontendchallenge devchallenge javascript webdev