#intervue: Nada Rifki, Co-Creator of the Vue Dark Mode Design System

We #intervued Nada Rifki, freelance JavaScript developer and co-creator of a design system for Dark Mode enthusiasts 🌚

Vue Dark Mode Minimalist Design System
icon-eye-dark Created with Sketch. 15.492

Read about how she built Vue Dark Mode, and why she thinks React is like a bowl of spicy peanut noodles, while Vue.js is more like a chinese street barbecue. 🍜

About #intervues: This article series gives you insights about creators from the Vue.js community. You can learn about their journey, stack, and projects.

Nada Rifki
Freelance JavaScript Developer & Co-Creator of Vue Dark Mode
icon-location Created with Sketch. Nantes, France

Can you tell us who you are and what you're currently doing?

Hello, my name is Nada Rifki, it's been a year now that I've quit my job as a digital marketer and started to code. After going through all (literally all) Code School courses, I fell in love with Vue.js. I am now a full-time freelance building modern applications with Vue.js, Nuxt.js and NativeScript. πŸ™‚

What made you start building Vue Dark Mode?

I wanted to work from home for a long time. Becoming a freelance developer was a good way for me to achieve this objective. I am a big believer of learning by doing so I started to think about an open source project I could work on.

Building and packaging reusable components was an interesting challenge for a beginner to get my hands dirty.

What did the process of building it look like?

Last summer, I started to work on Vue Dark Mode with my husband (Julien). He was designing a few basic components with Sketch and we built them one by one so I could learn the different patterns.

As the library grew and because we couldn't find any dark mode UI library made with Vue.js, we figured that it would be a good idea to share all our components with everyone.

We submitted the project on Reddit and Hacker News and we got 10,000 unique visitors on the Github repository in less than 48 hours.

Have there been any particular challenges throughout the project?

At first, I really had no idea about how I could package the library on NPM. Julien took care of this aspect and we ended up using a library bundler called bili. It took me a long time to understand the process of why we should use a bundler, what is rollup, webpack but it was fun. 😊

I wrote an article about this process if you are interested: How to Build Your First Package & Publish It on NPM.

What's your current stack?

When I do some freelance work, I usually use:

  • Vue.js or Nuxt.js for web apps.
  • NativeScript for mobile apps.
  • Laravel for the API.

What motivated you to get started with Vue.js?

After comparing Ember, React, Angular and Vue.js, the answer was obvious for me: Vue.js is the framework that fits best my needs. If I had to make a comparison:

  • React was definitely not for me, I see it as messy like a bowl of spicy peanut noodles. It works great, but it's all mixed up. Well… To be honest, I should just say that I don’t really like JSX. πŸ˜„
  • I found that Angular was neat and clear but it was not a big crush for me.
  • However, Vue.js gets the job done, you don't have to be a master to ship awesome stuff real fast. Besides, it's one file one component philosophy fits perfectly with how I structure code in my mind. You pick and choose what you need, it's hassle-free like a delicious chinese street barbecue.

Of course, all of this is subjective. But I found that it was easier to get up and running with Vue. πŸ™‚

What are your favourite Vue.js components and frameworks?

I also wrote a whole article with all my favourite Vue.js and Nuxt.js open-source packages: My Favorite Vue.js & Nuxt.js packages for 2019

(Editor's note: There are a lot of gems in Nada's list – go check it out!)

Who in the Vue.js community inspires you?

Um... It's hard to answer straight with one name. I mean I learned a lot with Gregg Pollack (since his Code School-days), but I think if I have to say inspiring, I'd choose Jen Looper. Not just because she's someone to look up to in a male-dominated industry, but also because she didn't come from an engineering background (the lady has a PhD in French Studies) but shows that through putting the work day in and day out you can also be a significant contributor.

Are there any other projects you made with Vue.js that you want to show off?

I am working on a few projects for some customers (things should be released in a few weeks). I will probably add a few more components on Vue Dark Mode and rework my portfolio. πŸ™‚

Where can people learn more about you and your work?

You can find my work on my portfolio, but since I started freelancing I wish I had more time to release my new one!

However, I still find some time to write. You can find my most recent articles on the Progress/Telerik blog.

I am also available for freelance work if you need help on your projects. Feel free to reach me on my portfolio. πŸ™‚

Similar Articles
#intervue: Valia Walsk, Full-Stack-Developer & avid Vue.js-learner
25.06.2019  •  in #Intervue
What is it like to start out with Vue.js when you're relatively new to frontend development? We interviewed Full Stack Developer Valia Walsk to find out!Β She shares her experiences and favourite resources with you.
#intervue: Jonathan Johnson, Creator of the Webpack Bundle Analyzer Packtracker
16.07.2019  •  in #Intervue
In this part of our #intervue series, Jonathan Johnson shares his journey of building packtracker.io, a Webpack Bundle Analyzer built with Rails and Vue.js. Read on to find out about his process and challenges.