DEV Community: Dina

QuizCraft: Test Your Knowledge Right from Your Terminal

Dina — Fri, 31 Oct 2025 10:17:37 +0000

Ever wanted to test your knowledge without leaving your terminal? Meet QuizCraft, a beautiful Terminal User Interface (TUI) quiz application that brings interactive quizzes right to your command line!

Why QuizCraft?

As developers, we spend most of our time in the terminal. Whether you're waiting for a build to complete, taking a quick break, or just want to learn something new, QuizCraft lets you challenge yourself without switching contexts.

Features

🎨 Beautiful Interface: Colorful and intuitive TUI powered by @clack/prompts
📚 Multiple Categories: Linux, DevOps, Docker, Kubernetes, Programming, and more
🎚️ Difficulty Levels: Choose between Easy, Medium, or Hard questions
💡 Instant Feedback: Get explanations for each answer
📊 Score Tracking: See your performance with detailed results
⚡ Lightning Fast: No browser needed, runs entirely in your terminal

Quick Start

Getting started is super simple:

1. Get Your API Key

First, grab a free API key from quizapi.io

And set it as env variable:

export QUIZ_API_KEY=your_api_key_here

2. Install QuizCraft

npm install -g quizcraft

and start playing:

quizcraft

Or run it without installing:

npx quizcraft

That's it! Follow the interactive prompts to:

Select a category
Choose difficulty level
Pick number of questions
Start answering!

Tech Stack

QuizCraft is built with modern Node.js tools:

@clack/prompts: For beautiful CLI prompts
chalk: Terminal string styling
axios: HTTP requests to quizapi.io
dotenv: Environment configuration

Contributing

QuizCraft is open source! Check it out on GitHub and feel free to:

Report bugs
Suggest features
Submit pull requests
Star the repo ⭐

What's Next?

Some ideas for future enhancements:

🏆 Local leaderboard
⏱️ Timed quizzes
📈 Progress tracking over time
🎨 Custom themes
🌐 More quiz sources
📊 Detailed analytics

Try It Now!

Don't just read about it, try it yourself:

npx quizcraft

Happy quizzing! 🎯

Join Hacktoberfest 2024 and Make Your First Open Source Contribution!

Dina — Sat, 05 Oct 2024 01:15:05 +0000

It's that time of the year again! Hacktoberfest is here, and it's the perfect opportunity for developers, especially beginners, to dive into the world of open source. If you're new to coding or open source, Hacktoberfest is a fantastic way to learn, grow, and give back to the community.

Why Contribute to Open Source?

Real-World Experience: Contributing to open source lets you work on real projects with real-world problems. It’s a great way to build your portfolio.
Learning Opportunities: You'll get to learn from other developers, see how large codebases are structured, and understand how collaborative development works.
Networking: Open source communities are full of talented people. It's a great way to make connections, ask questions, and get advice.
Feel Good: It’s rewarding to know that your code is helping others!

My Project: Talk Timer – Perfect for Beginners

I have a small open-source project that’s Hacktoberfest eligible and beginner-friendly! It’s a Next.js app called Talk Timer. This app is a simple timer for talks, with configurable warning and end times. You can also toggle full screen mode using the F/f key to keep things distraction-free during presentations.

Demo: https://talk-timer.vercel.app
Github repo: https://github.com/dnafication/talk-timer

If you're just getting started with open source or want to contribute to something simple, there are beginner-friendly issues up for grabs in this project. Whether you're comfortable with JavaScript or want to dip your toes into the world of React and Next.js, there’s something here for you.

How to Get Involved

Fork the Repo: Head over to the Talk Timer repository on GitHub, fork it, and get started.
Check the Issues: All the issues are currently beginner friendly and hacktoberfest ready. These are small, manageable tasks that you can tackle as your first contribution.
Make Your Contribution: Submit your pull request and you’ll be well on your way to completing Hacktoberfest!
Learn Along the Way: Don’t worry if you get stuck; feel free to ask questions. I am happy to help and the open source communities are welcoming and love helping new contributors.

Hacktoberfest is a wonderful opportunity to start your open source journey. Take the leap, and let’s make this month one of growth and contribution!

Happy coding! 🚀

Cover Photo by Yurii Khomitskyi on Unsplash

Motivation to Contribute

Dina — Tue, 31 Oct 2023 22:10:18 +0000

Hello I'm Dina 👋, a senior backend developer primarily working with Node.js. Today, I want to share my thoughts on Hacktoberfest and my recent experiences contributing to open source projects.

In our fast-paced lives, it can be challenging to find the time to give back to the open source community. While it's relatively easy to get started with open source contributions, making a meaningful impact often requires a substantial commitment of time and effort. Understanding the project and effectively communicating with maintainers are important components of successful open source contributions.

This year, my motivation for Hacktoberfest was to learn and contribute to a simple Swift/SwiftUI related project that I stumbled upon. While I'm excited about this endeavor, I also realize that it will take some time for me to complete my pull request and truly make a difference in the project.

In addition, I made contributions to two other projects during the time. First, I contributed to Verto.sh, which is an excellent resource for finding popular open source projects with beginner-friendly issues. It simplifies the process of discovering new projects and making your first contributions.

I also made a small contribution to Verdaccio, a lightweight Node.js private proxy registry. While it may not be a massive contribution, it's a part of my journey to give back to the open source community and contribute in ways that align with my skills and interests. It's the hours that dedicate to the tool/project of your choice that matters. It gives me a sense of fulfilment.

Hacktoberfest is a fantastic opportunity to engage with open source projects, learn new things, and connect with the global developer community. It's a reminder that every contribution, no matter how big or small, is valuable and appreciated by maintainers and fellow developers. As we wrap up this year's Hacktoberfest, I'm grateful for the chance to give back and look forward to more open source adventures in the future.

Let's keep the spirit of open source alive, learn, and grow together. Happy hacking!

Building Iterators

Dina — Mon, 04 Apr 2022 01:36:06 +0000

As programmers, one of the very first thing we learn is "the loop". There is always an array or list or collection which needs to be looped through, an object or map or dictionary whose keys and values require traversing. Iterations are key programming concept.

Arrays and Maps are collections of things and it should to be defined explicitly prior to iterating. You can start out with an empty array or a declaration and you can push items to it. Example:



const things = ['headphone', 'keyboard', 'mouse']
const friends = {
    tomo: 'nuxt expert',
    jt: 'writes nasty sqls',
    deco: 'the leader',
    van: 'php guru'
} 

things.push('cables')

// one of the ways of iterating arrays
for (const thing of things) {
  console.log(thing)
}

// iterate the key of objects
for (const name in friends) {
  console.log(`${name} - ${friends[name]}`)
}

There are many ways of iterating over an array or an object. To name a few:

for(const i = 0; i < arr.length; i+=1)
for...of MDN
for...in MDN
while() MDN
Array.forEach MDN
Array.map MDN
Array.filter MDN
Array.reduce MDN

One thing about arrays or objects(Map, Set etc) is that you kind of know what you are getting. You could push things into an array but you know what you pushed. Its not dynamic. If something is in array, its there for good until you remove it. Also, its taking up that space in the memory.

Iterator protocol

What if you had a dynamic array that calculated what value you get in the next iteration? What if that worked based on a formula that you've built? You need to use iterator pattern. You'll notice that its very simple to implement. Its a protocol that is well known among JS programmers and also followed in other languages too. An iterator is an object that has next() method. Calling next() function on the object gives us the iterator result which is an object with two properties - done which is a boolean to hold the status of the iterator and value to hold whatever you want to return. Let's build a simple range iterator. This range iterator will allow us to create a range of numbers by providing a start, end and step.



// iterator protocol: an agreed interface
function numberRangeIterator(start, end, step) {
  let index = start
  return {
    next() {
      if (index > end) {
        return { done: true, value: 'thanks for using me' } // value is optional here but you can use it to return meta info
      }
      const value = index
      index += step
      return { done: false, value }
    }
  }
}

const iterator = numberRangeIterator(3, 30, 3)
let iteratorResult = iterator.next()
while (!iteratorResult.done) {
  console.log(iteratorResult.value)
  iteratorResult = iterator.next()
}

You see? Its very simple and yet powerful. Two things to note:

the next function should return and object with done: true to indicate that there are no more elements. But it's not mandatory, you can have an iterator that runs forever!
you can have done: false or return just {value} and above code will just work fine.



function randomNumberIterator() {
  return {
    next() {
      return { done: false, value: Math.random() }
    }
  }
}

const rIterator = randomNumberIterator()
let rIteratorResult = rIterator.next()
while (!rIteratorResult.done) {
  console.log(rIteratorResult.value)
  rIteratorResult = rIterator.next()
}

While I cannot think of when you'd use the iterator above, I just wanted to demonstrate an iterator that can generate random numbers infinitely.

Iterable protocol

Iterable protocol goes one step further by defining a standard within JS language for any object to return an iterator. An iterable is an object that implements an iterator method called [Symbol.iterator]. The best thing about using iterables over the iterator which we talked about above is that it allows us to use JS native apis for looping over the array such as for...of. Let's build our numberRangeIterator as an iterable.



class NumberRange {
  constructor(start, end, step) {
    this.start = start
    this.end = end
    this.step = step
  }
  // for an object/class to classify as iterable
  // it has to implement [Symbol.iterator]
  [Symbol.iterator]() {
    let index = this.start
    return {
      next: () => {
        if (index > this.end) {
          return { done: true }
        }
        const value = index
        index += this.step
        return { value }
      }
    }
  }
}

const myRange = new NumberRange(3, 30, 3)

for (const num of myRange) {
  console.log(num)
}

It was almost the same amount of code to define the iterable class and we reused most of our code. However, the beauty is in the way we consume the iterator. Using for...of makes it look so clean and concise. I prefer this over the while loop above. But it doesn't stop here. There are other ways you can consume this iterable. You can use it with spread operator.



const myRange2 = new NumberRange(5, 20, 4)
console.log(...myRange2) // prints 5 9 13 17

Or, destructure and assign it



const myRange2 = new NumberRange(5, 20, 4)

const [first, second, third] = myRange2
console.log(first, second, third) // prints 5 9 13

There are other JS built-in APIs that accept iterables where you can pass your iterables such as Array.from(iterable), Set([iterable]), Promise.all(iterable) and even stream.Readable.from(iterable).

Read more about iterators here. You can pretty much treat it like your regular array but dynamic in nature and it will calculate your values only when it needs to. Things get a bit hairy though, when you start getting into the territory of async iterators but that is for another day.

Learning TypeScript? try Deno

Dina — Thu, 31 Mar 2022 01:47:03 +0000

Deno is modern, fast and secure runtime that supports TypeScript and JavaScript natively. It is very simple to setup and use. It is very welcoming to JS developers because its very easy to get started.

Install

As simple as brew install deno on a mac and choco install deno on a windows machine. Detailed instruction on installation is here.

Run

Deno can run any JS or TS file hosted on the internet.

$ deno run https://deno.land/std/examples/welcome.ts

Or, let us write any valid TypeScript file locally

// save this as welcome.ts

interface Account {
  id: number
  displayName: string
  version: 1
}

function welcome(user: Account) {
  console.log('Welcome,', user.displayName)
}

welcome({ id: 1, displayName: 'Dina', version: 1 })

Save the file above and run it directly as shown below. Deno takes care of compiling and executing the code. To start out, you don't have to deal will .tsconfig files or running tsc etc. psst, if you are in a hurry and want to learn TS and not interested in Deno, you could use TS repl and execution environment called ts-node

$ deno run welcome.ts

Check file:///Users/dina/dev/try-deno/welcome.ts
Welcome, Dina

Developer Experience

Deno offers a great DX by providing tools like code linters, formatters and test runners all in the deno executable.

Lint

$ deno lint

(prefer-const) `order` is never reassigned
let order = new Order()
    ^^^^^
    at /Users/dina/try-deno/design-patterns/state.ts:106:4

    hint: Use `const` instead
    help: for further information visit https://lint.deno.land/#prefer-const

Found 24 problems
Checked 25 files

Format

$ deno fmt

/Users/dina/try-deno/design-patterns/decorator.ts
/Users/dina/try-deno/design-patterns/state.ts
Checked 30 files

Test

$ deno test feature.spec.ts

My Two Cents

I don't think Node.js is going away any time soon. Deno is a great alternative but its still under heavy development. Node.js has a huge ecosystem of libraries and utilities which are yet to be converted or made available to Deno. Good thing is introduction of Deno has led to maturing of Node.js since there wasn't many competition to it before. What slice of web is deno going to get? only time will tell. 👋

AWS S3 Iterator in TypeScript

Dina — Thu, 14 Jan 2021 02:32:26 +0000

Amazon Simple Storage Service (Amazon S3) is a very popular object storage service that offers industry-leading scalability, data availability, security, and performance. It allows you to virtually store unlimited number of files (objects). AWS provides JavaScript SDK to interact with S3 APIs. You can use aws-sdk to do variety of things like getting the list of objects in an S3 bucket, upload an object, download the object etc.

While working with it recently, I figured it would be handy to use the Iterator pattern to fetch files from s3 in a loop using for await...of. So came up with a basic implementation below. Please provide your feedback

Downside of this pattern or the code above is that only 1 file is processed at a time as we are awaiting the download of the file and processing it before moving to the next iteration. We could use Promise.all with regular loops. Do you guys think its doable in this pattern?

One improvement I definitely want to see is to only load next set of keys when we are running out of objects in the keysList instead of loading all (currently using loadKeys() function). Can someone fork and build that out? 😉 ciao!!

Best thing about JMeter is JSR223

Dina — Thu, 13 Aug 2020 07:24:32 +0000

My favorite part of JMeter is anything starting with JSR223. Why? Because it allows me to do anything literally! You have the raw power of a programming language such as Groovy, JavaScript, Java etc. JSR223 kind of opens the window of JVM (Java Virtual Machine) for you to access and fiddle with through use of other scripting languages. You are not writing a full fledged Java plugin which is what you would do if you are doing something for JMeter. JSR223 scripting languages allow you to quickly hack up a process, control flow or other things you would want to do as part of your scripting process.

JMeter exposes control flow into your script through Controllers and actual task is carried out by Samplers. Listeners do the job of recording the results and processing them. Its better to stick to as much of the JMeter tree for your general JMeter scripting. But lets say you want more which is why you are snooping around JMeter APIs to figure out how you can jump into its invocation lifecycle and do something in between. JSR223 [pre|post] processor allows you to do that.

Do you want custom code in samplers? JSR223 sampler or pre or post processor. Any customization in assertions? there is JSR223 assertions. What about results? and timers? you got it, there are equivalent JSR223 capabilities.

This will be a series of posts on tips and tricks in Apache JMeter scripting. Lets start by talking about SampleResult today. API documentation has one line to say about SampleResult which is to the point!

This is a nice packaging for the various information returned from taking a sample of an entry.

You can access SampleResult in PostProcessor, Assertion and Listener. You access it as prev variable which is injected by JMeter when the script is executed. It is a java object which contains all the information related to the Sampler that it is attached to. Add it as shown in the figure below:

Paste in following code and then run the script. You will see the output based on if your sampler was successful or not.



if (prev.isSuccessful()){
  log.info("sampler passed")
  // do something here
}
else {
  log.info("sampler failed")
  // do something else
}

Let's go through some of the common useful functions which allow access to different attributes of the Result object.

prev.getResponseDataAsString() Gets the responseData of the SampleResult object as a String. This is the actual response body for HTTP sampler. Example: if your sampler is sending request to https://jsonplaceholder.typicode.com/users/1, this function will return the response body which looks like



{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

prev.getResponseHeaders() Returns the response headers as string. Example:



Content-Type: application/json; charset=utf-8
Content-Length: 509
Connection: keep-alive
Set-Cookie: __cfduid=444; expires=Sat, 12-Sep-20 06:14:43 GMT; path=/; domain=.typicode.com; HttpOnly; SameSite=Lax
X-Powered-By: Express
X-Ratelimit-Limit: 1000
X-Ratelimit-Remaining: 999
X-Ratelimit-Reset: 1597292781
Vary: Origin, Accept-Encoding

prev.getResponseMessage() Example: OK, Created, Not Found etc.
prev.getResponseCode() returns 200, 400 or other HTTP codes. List of HTTP codes
prev.getResponseData() Same as getResponseDataAsString() but returns byte[].
prev.setSuccessful(true or false) to mark the sampler pass or fail.
prev.isSuccessful() returns true/false based on result status. This is to check the status.
prev.getUrlAsString() return the URL for HTTP Request samplers.
prev.isResponseCodeOK() Another method to check the response code.
prev.setIgnore() to ignore the result and don't show it in results.

You get the idea. What this script box allows you to do is anything. You can check the results and inverse the result (if you want to), do additional task based on the result of the Sampler, transform the results and do some calculations based on the response etc. The result is endless. Hope you find this useful. I will see you next week with other tips in JMeter World.

Reuse Serverless Deployment S3 buckets

Dina — Mon, 27 Jul 2020 06:50:58 +0000

Serverless framework does a lot of magic (not in a bad way) to make your life easy while deploying serverless projects. Serverless or sls in short, packages your application and uses s3 bucket to deploy your application. It doesn't ask you what the name should be, but infers it based on your service name and some random strings to come up with the S3 bucket name. Just give name which exists in your s3.



service: cool-service

provider:
  name: aws
  runtime: nodejs12.x
  region: ap-southeast-2
...

If your serverless.yml looks like above, you might get a bucket name like cool-service-prod-serverlessdeploymentbucket-<random string>. No problem with that. All good! If you have 1000 serverless projects in one account, you will need 1000 s3 buckets for sls deployment and you cannot have more than 1000 s3 buckets in an AWS account. That's when you would think of reusing the s3 buckets. And here is how to do it by using a key in the serverless.yml file.



service: cool-service

provider:
  name: aws
  runtime: nodejs12.x

  deploymentBucket:
    name: all-service-deployments # Deployment bucket name. Default is generated by the framework
    maxPreviousDeploymentArtifacts: 10 # On every deployment the framework prunes the bucket to remove artifacts older than this limit. The default is 5
    blockPublicAccess: true # Prevents public access via ACLs or bucket policies. Default is false
    serverSideEncryption: AES256 # server-side encryption method
    sseKMSKeyId: arn:aws:kms:us-east-1:xxxxxxxxxxxx:key/aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa # when using server-side encryption
    sseCustomerAlgorithim: AES256 # when using server-side encryption and custom keys
    sseCustomerKey: string # when using server-side encryption and custom keys
    sseCustomerKeyMD5: md5sum # when using server-side encryption and custom keys
    tags: # Tags that will be added to each of the deployment resources
      key1: value1
      key2: value2

It will store all your deployment packages in subfolders in the s3 bucket.

Ensure npm package is updated

Dina — Sun, 26 Jul 2020 03:12:14 +0000

Do you install your private node modules as below?



// package.json

"dependencies": {
  "private-module": "git+ssh://git@github.com:private-module.git#v5.5.5"
}

If yes, chances are when you upgrade the package version to #v5.5.6, and do npm install, your package-lock.json wont be updated and neither the actual files inside node_modules. To ensure the update, I am having to manually update the package-lock file. Has anyone faced this?

Running WASM on node.js

Dina — Mon, 20 Jul 2020 09:48:48 +0000

Getting started with Web Assembly is super easy with SSVM. It allows you compile high performance Rust functions into WebAssembly (wasm file), and call them from Node.js/deno applications. So, you get best of both worlds.

While manual installation has its perks and also headaches, I prefer docker image for quick tests and ssvm is easy to setup in Docker. Ensure you have docker installed to go through following steps.

Steps:

Clone the repo: https://github.com/second-state/rust-wasm-ai-demo

$ git clone https://github.com/second-state/rust-wasm-ai-demo.git

Go into the cloned directory rust-wasm-ai-demo and do the following.

# create the Dockerfile
$ cat >> Dockerfile <<EOL
FROM ubuntu:20.04
ARG DEBIAN_FRONTEND=noninteractive
ENV RUSTUP_HOME=/usr/local/rustup \
    CARGO_HOME=/usr/local/cargo \
    PATH=/usr/local/cargo/bin:$PATH
RUN apt-get update \
    && apt-get install -y tzdata \
    && apt-get -y upgrade && apt-get install -y build-essential curl wget git vim libboost-all-dev
RUN curl -sL https://deb.nodesource.com/setup_14.x |  bash \
    && apt-get install -y nodejs \
    && npm install -y -g ssvmup --unsafe-perm \
    && npm install -y ssvm \
    && npm install express express-fileupload
RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
EOL

# build the image
$ docker build -t ssvm-nodejs:v1 .

# run the docker container exposing port 8080 which is 
# where express server is listening. 
# also mounting the current directory to `/app`
$ docker run -p 8080:8080 --rm -it -v $(pwd):/app ssvm-nodejs:v1

## ---------------------------------------- ##

# when you run above command, 
# you will be in the container's shell:

$ cd /app

# build the WASM bytecode 
$ ssvmup build

# install node dependencies
$ cd /app/node
$ npm init -y
$ npm install express express-fileupload

# run the webserver
$ npm start

If all went correctly, you should have a running web server with Image Recognition capability. Point your browser to http://localhost:8080 and enjoy. 😊

Reference Repos: