teleren/devto huggingface dataset:
UX Research
Tags: ux, development, storybytes, empathy
Published: 2023-02-24 12:18:02

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gn77ubedkulik4z1c50.png)
A vital factor in the success of a product is lying in Usability. It’s not about how I, as a producer, use it - it’s about how our end users use it to make their life easier. Alfred Adler is a known psychologist from the 19th century. One of his quotes is, “Empathy is seeing with the eyes of another, listening with the ears of another and feeling with the heart of another”. This explains the core principles of User research. User research focuses on understanding user behaviours, needs, and motivations through observation techniques, task analysis, and other feedback methodologies. This field of research aims to improve the usability of products, services, or processes by incorporating experimental and observational research methods to guide a product’s design, development, and refinement. Designers, developers and product owners are not experts in everything, and usually, they work building products that they use in a particular manner which doesn’t represent a real user. So to succeed, you have to put your feet in somebody else’s boots and create a meaningful product for the user. Selecting your research strategies from various techniques will help you shape your product to perfection, making and serving your customer and business more effectively. You can find many techniques to help you find a design solution to a problem. These methods can be used a different times of the process. Integrating UX research can boost user satisfaction by improving the product’s usability. Additionally, research can benefit the development of the product by reducing development time and production costs.
CodePen Designs - 41 : Traffic Run Game with Three.js
Tags: codepen, css, design, webdev
Published: 2023-02-24 16:27:00

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---

---

## Video Tutorial

Don't miss the amazing video we've embedded in this post! Click the play button to be inspired

{% youtube  p6t7Iprd-38 %}

---

---

### Codepen Design - 41

<p>Three.js video tutorial explaining the source code</p>

<p>Youtube: <a href="https://youtu.be/JhgBwJn1bQw" target="_blank">https://youtu.be/JhgBwJn1bQw</a></p>

<p>In the tutorial, we go through the source code of this game. We cover, how to set up a Three.js scene with box objects, how to add lights, how to set up the camera, how to add animation and event handlers. We also add textures with HTML Canvas and learn how to draw 2D shapes in Three.js then how to turn them into extruded geometries.</p>

<p>Check out my YouTube channel for other game tutorials: <a href="https://www.youtube.com/channel/UCxhgW0Q5XLvIoXHAfQXg9oQ" target="_blank">https://www.youtube.com/channel/UCxhgW0Q5XLvIoXHAfQXg9oQ</a></p>

<p>The game in the video is heavily inspired by the mobile game Loop Driver: <a href="https://apps.apple.com/us/app/loop-drive-crash-race/id992442150" target="_blank">https://apps.apple.com/us/app/loop-drive-crash-race/id992442150</a></p>

{% codepen https://codepen.io/HunorMarton/pen/ExNzWqm %}


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)
- Sudoku Game And API
[https://sudoku-game-and-api.netlify.app/](https://sudoku-game-and-api.netlify.app/)

---
---
Getting started with dbForge Studio for PostgreSQL
Tags: postgres, database, dbforgestudio
Published: 2023-02-24 16:13:21

Would you like to have one application that contains all the necessary tools for your daily PostgreSQL database operations and is very easy to use? We can offer dbForge Studio for PostgreSQL, an integrated environment that will help you solve many tasks related to database development, administration and management - https://www.devart.com/dbforge/postgresql/studio/getting-started.html

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ekyrvpldgy93fsh5c2i.png)
Our vision for Momoguro
Tags: nft, web3
Published: 2023-02-24 16:08:57


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yma206y42bypmljm3tj.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2o5xx317qejoeqozgq0t.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90hja5o2lvibvy5zack8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ep33rh55q1xicwk00u1k.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b79ap7nwlrujzcwpsu1q.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vq02pu8smbuwf3oljlly.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kqimg5i4n6fgfmdv4wd.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p74oueby2srzn2q8nz3e.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h2sga0a9qpjqqc8001k.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psn4b8cs912a61k945um.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0hmu0g9jb7jqsdiveih.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2hgcxdpidtfiycwfp50.png)
An Overview of Apache AGE: A Powerful Graph Database Plugin for PostgreSQL
Published: 2023-02-24 16:06:22

Apache AGE is a PostgreSQL extension that adds graph database functionality to PostgreSQL. It is a free, open-source project aimed at providing graph data processing and analytics capabilities to all relational databases. In this article, we will discuss the features and benefits of Apache AGE.

## Features of Apache AGE

- Graph Database Plugin for PostgreSQL: Apache AGE provides PostgreSQL users with the ability to query and visualize graph data within a relational database.
- Hybrid Queries (OpenCypher and SQL): AGE supports hybrid query technology that allows users to perform queries for relational data and graph data simultaneously.
- Fast Graph Query Processing: AGE allows for fast indexing and efficient query processing.
- Graph Visualization and Analytics: AGE provides visualization of both graph and relational data to help users understand data better.


## AGE Viewer
AGE Viewer is a web-based user interface for Apache AGE. It provides data visualization and exploration, allowing users to enter complex graph queries and explore the results expressed in graph and table data. The viewer is designed to handle large graph data sets and supports various graph algorithms.

In conclusion, Apache AGE is an open-source project that extends PostgreSQL to support graph data processing and analytics. It provides users with a powerful graph database plugin that allows them to read and write graph data in nodes and edges. With its hybrid query technology and fast graph query processing, Apache AGE is a great tool for organizations that want to gain deeper insights into their data. And, with AGE Viewer, users can easily explore their data using an intuitive web interface. 

Check out Apache AGE at their [website](https://age.apache.org/) or on [Github](https://github.com/apache/age).
Big Data for Engineers - Chapter 1: Introduction
Published: 2023-02-24 16:00:17

Magnitude is an interesting concept. We have a good feeling about measuring real world objects:

- Our height -> meter
- Driving Cars -> kilometers 
- Size of Earth -> megameters
- Distance of Earth to Sun -> gigameters 
- Distance of Jupyter to Sun -> terameters 
- Entire Solar System -> petameters 
...... 

However, we seem to fail to appreciate the magnitude of data: we take 1GB, 1TB for granted, without thinking what a large number that is. 
In terms of bytes, approximately: 

- kB = 1,000 B
- MB = 1,000,000 B
- GB = 1,000,000,000 B
- TB = 1,000,000,000,000 B
- PB = 1,000,000,000,000,000 B
- EB = 1,000,000,000,000,000,000 B
- ZB = 1,000,000,000,000,000,000,000 B
- YB = 1,000,000,000,000,000,000,000,000 B

kilobyte, megabyte, gigabyte, terabyte, petabyte, exabyte, zettabyte, yottabyte. Isn't that impressive? 

To understand the importance of learning big data, we discuss 3 V's. 

## 3 Vs of big data
### Volume 
The volume of data stored is increasing exponentially. In 2021, it's around 100ZB. 

### Variety
Data exists in various forms:
- trees (JSON, XML)
- unstructured (text, pictures, audio, video) 
- cubes 
- graphs (neo4j, Oracle PGX) 

### Velocity 
How fast can we process data? Three factors affect the velocity: capacity, thoughput, latency. 

From 1956 to 2021, capacity has increased by a factor of 200,000,000,000, throughput by 10,000, latency (decreases) by 150. So the throughput and latency cannot catch up with the capacity. 

However, if we do parallel or batch processing, we may reduce that gap.
Paracetamol.ts💊| #18: Explica este código TypeScript
Tags: typescript, javascript, spanish, webdev
Published: 2023-02-24 15:56:57

## **<center>Explica este código TypeScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark> </center>
¿Cúal de las siguientes sintaxis de enum es una buena practica?

```ts
//A
enum diasDeLaSemana{
 ...
};

//B
enum diasdelasemana{
  ...
}

//C
enum dias_de_la_semana{
  ...
}

//D
enum DiasDeLaSemana{
  ...
}
```

- A. `A`
- B. `B`
- C. `C`
- D. `D`

Respuesta en el primer comentario.

---
Updating relative time in UI with Nuxt3
Tags: webdev, javascript, tutorial, vue
Published: 2023-02-24 15:52:53

I bumped into this problem when working on a side project - [aihairstyles.com](https://aihairstyles.com?r=devto). When users generate a new set of styles, I want to show them when that set was generated, relative to now. I also want that time to update dynamically as time goes on, without the need for them to refresh the page. Finally, I want to use this logic throughout my app in lots of places.

I solved it with a combination of global state, date-fns library and a small plugin I wrote.

## 1. Create a state variable to hold a "ticker"
In my `useState.ts` file, I'm adding a variable that we'll update later via a plugin.

```
export const useTicker = () => useState<any>('ticker', () => new Date().getTime())
2. Create a plugin to update this ticker at a given interval

// globalTicker.client.ts

export default defineNuxtPlugin(nuxtApp => {

  // updating a global ticker in useState that can be used to auto-update times in the UI

  const ticker = useTicker()
  
  const TICKER_INTERVAL = 30000; // milliseconds

  setInterval(() => {
    let newVal = new Date().getTime();
    ticker.value = newVal
  }, TICKER_INTERVAL);
  
})
With this plugin, every 30 seconds the ticker will update (30000 milliseconds).
```

## 3. Install date-fns library (or a lib of your choosing)
I used to use moment.js, but date-fns is my go-to now as it's smaller and can be tree-shaken. But use whatever makes you happy.

```
npm install date-fns --save
```

## 4. Create a composable that exports a relative time function
As I mentioned, I wanted this logic throughout my app in lots of places, so creating a composable was the way to go.

To do this, I created a file called `useDateHelpers.ts` in my `/composables` directory.

```
// /composables/useDateHelpers.ts

import formatDistance from 'date-fns/formatDistance'

export const relativeDate = (date:string) => {
  console.log("date:", date)
  const ticker = useTicker()
  return formatDistance(new Date(date), ticker.value)
}
```

Notice we're importing our global ticker and using it, making our function's return value reactive in Vue's eyes.

## 5. Finally, use the function in our components
Then, in the html, we use this function and pass in the created_date and the global ticker variable. In the code below we have a for-loop that loops over all image sets.

```
<!-- rest of preview page ) -->
    
<h2 class="gradient-text-1 text-2xl">
	{{preview.data.style}}
</h2>
<p class="text-sm muted mb-3">
    {{ relativeDate(preview.data.result_data?.created_at)}} ago
</p>

<!-- rest of preview page -->
```

The result? We have relative time updating in our UI.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50adte89ui4znkx365ti.gif)

I think it works quite well. 

Any suggestions for improvement? Let me know :)

Also, I'm actively building [aihairstyles.com](https://aihairstyles.com?r=devto), would love feedback on that too 🙏🏼.

Chris
Skill section or not?
Tags: help, discuss, webdev, portfolio
Published: 2023-02-24 15:44:55

I have a portfolio: https://vulcanwm.is-a.dev and I've seen many portfolios with a Skill Set List.
I want to implement that in my own portfolio, with each skill being a different colour. The colour will represent how long I’ve been using the skill for (eg. Green for 3+ years, Blue for 2+ years).

Should I add a skill set to my portfolio, and if I add it should I add the colour system to it too?
🤖 Ask questions to OpenAI API from CLI
Tags: openai, gpt3, php, cli
Published: 2023-02-24 14:10:15

Hello! 👋 😃

I want to show you a small application that I have developed.

It is a command-line interface (CLI) application that uses OpenAI's GPT-3 to generate human-like text responses to user input. The application is written in PHP and is designed to be simple and easy to use.

You will need an OpenAI API key to use the application, which you can get by signing up on the OpenAI website.

It is a simple open-source project that demonstrates the power of OpenAI's GPT-3 language model to build a CLI application.

The link to the GitHub repository is:

https://github.com/maurobonfietti/chat-open-ai-cli

🥳 I hope you like it. Now ask exciting questions to OpenAI API from the CLI 🤖.
Integrate New Relic with Google Cloud Platform
Published: 2023-02-24 15:43:12

## > Make GCP network monitoring easy using New Relic Cloud Flow logs.

By using our network monitoring solution to monitor VPC flow logs from across your GCP environments, you can:

Monitor and alert on network traffic from within your VPC in New Relic.

Visualize network performance metrics like bytes and packets per second, as well as accepts and rejects per second across every TCP or UDP port.

Explore flow log deviations to look for unexpected changes in network volume or health.

Diagnose overly restrictive security group rules or potentially malicious traffic issues

Start monitoring your GCP Cloud Flow Logs here

Get Started Guide

Learn more about setting up GCP VPC Flow Logs in New Relic.

Sign up today for a free New Relic account to take advantage of the 100 GB/month of data ingest, one full-platform user, and unlimited basic users offering to get started with network monitoring as part of the observability journey.
My First Blog
Tags: productivity, news
Published: 2023-02-24 15:15:23

Writing is a journey of discovery and dialogue with yourself. Some people tell me: "Writing is not the outcome of thinking; it is the medium in which thinking takes place." So if you want to learn something new, just convey this new idea through pressing or squeezing your thinking out on your laptop screen. That's really interesting.

Sometime, we get stuck writing. Starting to write is really difficult for everyone, especially for a non-English speaker like me. So, the first, keep it as simple as possible. Talk about your life incidents, your thoughts on various subjects. Once you will start doing that, you will get a clearer picture of what you actually want to talk about. Improve your English vocabulary, your expression matter as well. Google Translate, Grammarly, ProWritingAid can help you avoid issue and benefit your blog. And come on, don't think like who would want to read your blog. Be confident.
New aqua AI features
Tags: tooling, product
Published: 2023-02-24 14:56:19

aqua, a test management tool, is releasing something fascinating this March - aqua's new AI features. 

Dig deeper and find out how AI will streamline the testing process and reduce the manual efforts for QA via: https://www.linkedin.com/feed/update/urn:li:activity:7034892280805105664

Become our client and be the first to experience aqua AI👉 https://aqua-cloud.io/
Missing "key" prop for element in iterator
Tags: nextjs, netlify, vercel, react
Published: 2023-02-24 14:54:56

> Hey Guys, I am new in next.js, and i get an error while uploaded my next.js in Vercel and Netlify, Can anyone help me ?

`import Link from "next/link";
import { withRouter } from "next/router";

function Navbar({  router }) {
const  navs = [
    { text: 'Home', href:'/'},
    { text: 'About', href:'/about'},
    { text: 'Portfolio', href:'/portfolio'},
    { text: 'Contact', href:'/contact'},
  ];


  return (
    <nav className="navbar">
      <div className="container">
        <Link href="/" className="Logo">Rahmad.</Link>

        <ul className="nav-links">
          {navs.map(nav => ( 
          <li><Link href={nav.href} className={`nav-item ${ router.pathname == nav.href ?  'active' : ''}`}>{nav.text}</Link></li> 
          ))}
        </ul>
      </div>
     </nav>
  );
}

export default withRouter(Navbar);`
HOW TO DEPLOY A LINUX VIRTUAL MACHINE.
Published: 2023-02-24 14:50:09

STEP 1
login to your Microsoft azure account and go to "search resources" and search and click on "virtual machines"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbycp9orbhnzkn0xs9ik.png)

STEP 2
Click on create and choose "azure virtual machines"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zhilkoyefi1ahyc6i9j.png)

STEP 3
-Create a resource group.
-Give the virtual machine a unique name 
-Choose a linux server[Ubuntu server 20.04 LTS - x64 Gen2]
-You can choose either "password" or "SSH Key". I chose password and filled in a username and password. Then click "review and create"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncugsxdjqhqplyc79he5.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63t84c5w39ouzo7tibnp.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04owkkh0gsu3b73gtgur.png)

STEP 4
Make sure the validation passes and click on "Create"
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucr6ysftllklp5bldv97.png)

STEP 5
Click on "Go to resource"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ftoph7lut5t4hayer5p.png)

STEP 6
Click on the public IP address and extend the idle timeout to 30 minutes, then click save.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vsj1t34cb3iul8nodmx.png)

STEP 7
Click on connect and click on SSH

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4v09tp5ib7zsnsw0tfj.png)

STEP 8
Copy the code in box 2 and paste it in box 3. Then copy the command in line 4

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8y0clnll6hk1g6wn3smi.png) 

STEP 9
Search for windows powershell on your computer and open it

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpgdonoipjp0noe2eg8i.png)

STEP 10
-Paste the command you copied, then delete "-i chmod 400 .pem"
-Click enter and run the remaining code.
-PowerShell is going to ask you to connect to serve Virtual Machine, type yes and Click enter

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qbvflr8uea8j7064e86.png)

STEP 11
-Enter the password you used earlier and click enter
-LINUX VIRTUAL MACHINE DEPLOYED!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0g819egydzrt99rwt12f.png)
Using Shortcut as a project management tool
Tags: delivery, agile, tools
Published: 2023-02-24 14:28:06

---
title: Using Shortcut as a project management tool
published: true
description: Notes on working with the agile project management tool Shortcut
tags: delivery, agile, tools
---

I recently had the chance to work with a group that were using the [Shortcut](https://www.shortcut.com/) project management tool which I hadn't used before.

I came away with a positive impression, as the tool combines the flexibility of Trello with some of the reporting features you get with Jira but without the nightmare complexity of configuration.

The basic structure of the tool is pretty much the same as Trello, you have columns and cards and the cards can be organised into a hierarchy of epics and stories and assigned to teams, tagged and so on.

Work moves across the board in a Kanban-style with automatic tracking as the card progresses through the stages. It's possible to integrate with things like Github but its not that sophisticated so a Story is assumed to equate to a single PR by default for example. Although I haven't tried to do anything with it there is an API that you can use to integrate with existing CI/CD pipelines.

The features that make Shortcut stand out over Trello is that all boards exist within the same projects so multiple views into the work can be consolidated in "Roadmap" and planning views that actually provide a handy overview of overall progress and across multiple streams of work.

The reporting may be slightly fixed in its format but it's actually enough to be actionable and compared to trying decode what people have setup in Jira it is a bit of a dream to have an opinionated standard setup.

Building a product backlog is less elegant, you can pile every idea into a card and have a work process to move an idea into a state where it is ready to icebox or work on. I didn't use this area enough to really get a handle on it but it felt that something was lacking here, like a more dedicated review and collaboration screen.

Overall though Shortcut brings everything that is good about lightweight management tools with a richer feature set and less Atlassian cruft.