DEV Community

Cover image for CodePen November challenge: WebDataRocks experience
Juliia Nikitina
Juliia Nikitina

Posted on • Updated on

CodePen November challenge: WebDataRocks experience

Greetings, fellow coders! Today, I'm excited to share with you the results of my coworker's adventures in the November CodePen challenge. But before we dive into the dashboards, let's explore the essence of this monthly coding riddle.

Overview of the CodePen Challenge

So, picture this: a monthly shindig where you get handed a theme and a task, and you gotta flex your coding muscles to whip up a coding masterpiece. Each week - new task. Each month - new theme. All year round - rendezvous with your own creativity and coding skills. It's like a coding rollercoaster โ€“ fast, a little scary, but hella exciting.

The November theme was Style Trends, and this coding odyssey unfolded through Bento Style, Neo-Brutalism, Y2K Style, and the mystical Gradient Glow๐Ÿ˜. Besides the task, you get a list of ideas and resources to read more about the theme and look for inspiration.

My fearless friend and coworker Nadia dove headfirst into the November chaos and tamed each of these styles into a dashboard using the template provided in the task and our free web component - WebDataRocks - a JavaScript library for creating pivot tables.

And I'm here to present you the results of her dedicated work and explore these trends with you. So let's start with the week #1!

Bento Style

Our journey commences with Bento Style โ€“ an ode to digital minimalism. The dashboard echoes the Japanese art of bento box arrangement, emphasizing simplicity, order, and elegance. It's a good thing to consider when working with reports and data analytics as it structures the information, doesn't look overwhelming, and is also stylish - the perfect combo!

And my coworker conjured up a dashboard that's cleaner than Marie Kondo's closet! Everything is in its place, no clutter allowed. Each element is meticulously placed, creating a harmonious user experience. It's a testament to the principle that less is often more.

Immerse yourself in the tranquility of the Bento Style demo.

Bento Style dashboard

Neo-Brutalism

Next in line is Neo-Brutalism โ€“ a stylistic rebellion against conventional norms. Characterized by raw, unpolished aesthetics, the dashboard resembles a digital Rubik's Cube. The clash of colors and intersecting lines creates an unconventional yet oddly captivating beauty.

Emerging in the mid-20th century, Neo-Brutalism challenges the status quo with its raw and authentic expression. Softening all the brutality with a pastel palette, you get a pretty motivating sports dashboard.

Neo-Brutalism dashboard

Y2K Style

Hold onto your flip phones because we're diving into Y2K Style! Picture my coworker, adorned in butterfly clips and a fluffy hoodie, channeling the spirit of the turn of the millennium. Actually, you don't have to imagine - here it is!

A Y2K styled collage

Nadia was so excited about this theme that she also dressed in Y2K style! What a dedicated person๐Ÿคฏ...

The dashboard pays homage to this era with cute, bright colors, bold fonts and patterns, and a modern twist. Y2K Style emerged as a bridge between the analog and digital worlds, embracing both the nostalgia of the past and the excitement of the future. Dive into this nostalgia dashboard yourself on CodePen.

Y2K Styled dashboard

Gradient Glow Style

The grand finale brings us to Gradient Glow Style, a digital dreamscape illuminated by neon lights and vibrant gradients. The use of gradients and glowing elements has its roots in early web design, evolving into a modern trend that adds depth and vibrancy to digital spaces.

Nadia's dashboard captures attention with a deep, calm green gradient, and the matcha-colored accents soften the seriousness of the report.

Immerse yourself in the glow of creativity

Gradient Glow Styled dashboard

Conclusion

And there you have it โ€“ a month of coding exploration spanning four distinct styles, each revealing the depth of creative possibilities and a nod to the history that shaped them. It's not just about the code; it's about translating ideas into a visual tapestry that echoes the spirit of each stylistic era.

Kudos to my coworker for turning code into art! I hope you also got inspired by her creations, and until the next coding adventure, happy crafting, fellow devs! ๐Ÿš€๐Ÿ’ป

Top comments (0)