teleren/devto huggingface dataset:
Top 5 Games you can make by apache age graph database
Tags: apacheage
Published: 2023-04-09 04:42:06

Apache Age is an open-source extension to PostgreSQL that provides support for graph databases. Here are some game ideas that could be built using Apache Age graph database:

1. Trading card game: With Apache Age's support for graph data structures, you could create a trading card game where players collect and trade cards representing characters, objects, and locations, each with their own unique properties and relationships. The graph database could store the relationships between these cards, including their strengths, weaknesses, and abilities, and enable complex gameplay mechanics.

2. Role-playing game: Apache Age's support for complex data relationships makes it an excellent choice for building a role-playing game where players create and customize their own characters, and explore a vast network of interconnected locations and characters. The graph database could store the relationships between these elements and help generate new quests and storylines as players progress through the game.

3. Adventure game: Apache Age's graph data structures can be used to create an adventure game where players navigate through a complex network of interconnected locations, objects, and characters. The graph database can store the relationships between these elements and help players navigate through the game world.

4. City-building game: Apache Age's support for graph data structures can be used to create a city-building game where players build and manage a complex network of interconnected buildings, roads, and other structures. The graph database can store the relationships between these structures and help generate new challenges and events as players progress through the game.

5. Puzzle game: Apache Age's support for graph data structures can be used to create a puzzle game where players must solve complex puzzles by manipulating a network of interconnected nodes. The graph database can store the relationships between nodes and help generate new puzzles as players progress through the game.

Overall, Apache Age's support for graph data structures makes it a powerful tool for building complex games that involve many interconnected elements, and could enable game developers to create unique gameplay experiences that go beyond the capabilities of traditional game engines.
MongoDB
Published: 2023-04-09 04:16:22

## MonogoDB Resources
1. [MongoDB Roadmap](https://roadmap.sh/mongodb)


2. [MongoDb Tutorial For Beginners in Hindi code with Harry] 
   (https://www.youtube.com/watch?v=oSIv-E60NiU&t=1455s)

3. [Medium MongoDB Roadmap article] 
  (https://medium.com/swlh/mongodb-developer-roadmap-for-2021- 
  bec3eb10891d)

4.[Start Here - Intro to MongoDB](https://learn.mongodb.com/courses/start-here-introduction-to-mongodb)

5.[MongoDB ALL in One](https://learn.mongodb.com/catalog)

6.[MongoDB Node.js Developer Path](https://learn.mongodb.com/learning-paths/mongodb-nodejs-developer-path)


7.[mongoDB GFG Complete Guide](https://www.geeksforgeeks.org/mongodb-tutorial/)

8.[MongoDB crash course in 2021 in Hindi ](https://www.youtube.com/watch?v=22oqSaTsn08)


## MonogoDB Project Resources

1.[Top Node Js Projects](https://www.mygreatlearning.com/blog/top-node-js-projects/)
    
2. [Top 10 Node JS Projects Ideas (With Source Code)](https://www.interviewbit.com/blog/node-js-projects/)

3.[Top 7 Node.js Project Ideas For Beginners](https://www.geeksforgeeks.org/top-7-nodejs-project-ideas-for-beginners/)


4.[Top10 Node.js Projects for Beginners (with Code)](https://codedamn.com/news/nodejs/top10-node-js-projects-for-beginners-with-code)

5.[10 MongoDB Mini Projects Ideas for Beginners with Source Code](https://www.projectpro.io/article/mongodb-projects-ideas/640)

6.[12 Top MongoDB Project Ideas & Topics For Beginners](https://www.upgrad.com/blog/mongodb-project-ideas-topics-for-beginners/)

7.[nodejs REact Native news app](https://www.youtube.com/watch?v=XPjBiSdP93Y&list=PLVRD5onwuyGDhzXRB3zjdhAByP4upIjQx&index=4)
conic-gradient vs svg,img
Tags: css, gradient, frontend, webdev
Published: 2023-04-09 03:38:19

`<div class="span">G</div>`
**and css**

```
<style>
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Red+Hat+Display:wght@800&display=swap");
    .span {
      width: 200px;
      height: 200px;
      background: conic-gradient(
        #eb4132 0% 24%,
        #4086f4 24% 38%,
        #31aa52 38% 63%,
        #fbbd00 63% 86%,
        #eb4132 86% 100%
      );
      padding-left: 57px;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 162px;
      font-family: "Red Hat Display", sans-serif;
    }
  </style>
```
Displaying NFTs on Ethereum
Published: 2023-04-09 03:36:55


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

_If you have automatic NFT detection enabled, MetaMask will automatically fetch any NFTs you have on Ethereum._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zkq23bnjam44hwcgv6l.png)
If you're on Ethereum mainnet and have NFT autodetect turned on, head to the 'NFTs' tab on your homepage. MetaMask will automatically display any detected NFTs.

If you don't have NFT detection turned on, you'll see a prompt under the NFTs tab that will take you to Settings > Experimental to turn it on. Head there to toggle it.

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


## Adding NFTs manually
In some cases, you may want to add an NFT manually. This could be, for example, because you have NFTs on EVM-compatible chains that MetaMask supports like Polygon ,Ethereum.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5d7xzmbsjaiz3nuwzccd.png)
Git Hub access
Tags: beginners, access, pullrequests, pushapprovals
Published: 2023-04-09 03:31:19

Hey, I am a beginner. Created git hub repo. Check marked to allow access with reviews and approvals without knowing the outcomes. Created a branch to test drive the branching. Modified the branch pushed to merge with the main. And now stuck with reviews and approval that apparently has to come from other than the creator part. How to solve it? Can not find the access in settings again to change the merge and approvals. What to do?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9ck9i6km3oedqs0s8ne.png)
Different Ways to Fetch API in ReactJS
Tags: javascript, react, api
Published: 2023-04-09 03:04:32

Fetching data from an external API is a common task in modern web development. ReactJS provides several ways to fetch data from an API, including using the built-in fetch API, third-party libraries, and GraphQL. In this blog, we will discuss these different ways to fetch data in ReactJS.



## 1. Using the Built-in Fetch API

The built-in fetch API is a native JavaScript method that can be used to fetch resources from a server. In ReactJS, we can use this method to fetch data from an API by making a GET request to the API endpoint. We can then use the response data to update our state and render the data in our React components.

```
import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}

```


## 2. Using Third-Party Libraries

There are several third-party libraries available for fetching data from APIs in ReactJS. Some popular options include Axios, SuperAgent, and jQuery. These libraries provide a simplified interface for making API requests and handling the response data. By using a third-party library, we can often reduce the amount of boilerplate code required to fetch data from an API.

```
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => setData(response.data));
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}
```

## 3. Using GraphQL:

GraphQL is a query language for APIs that provides a more efficient, powerful, and flexible alternative to REST. In ReactJS, we can use GraphQL to fetch data from an API by defining a query in our component and then executing that query using a GraphQL client library. By using GraphQL, we can fetch only the data we need and avoid overfetching or underfetching data.

```
import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_DATA = gql`
  query GetData {
    items {
      id
      title
      description
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_DATA);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      {data.items.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}
```
Three JS Examples : 6. Three JS Animation Skinning Blending
Tags: css, animation, threejs, design
Published: 2023-04-09 02:59:00

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.  

[Three js docs](https://threejs.org/docs/)

---
 

## Three JS Animation Skinning Blending
---

{% youtube 43uAU5oCtIk %}


 ---
### [Source code](https://democoding.netlify.app/threejs/three-js-animation-skinning-blending)

---

{% gist https://gist.github.com/amitSharma7741/febf0d9ce1fbb143c3f6b290eb031182 %}
 
---
---
## For more information

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

2. Subscribe my Youtube Channel 
[https://www.youtube.com/@democode](https://www.youtube.com/@democode) 

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

4. Follow me on Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

5. Check out my Facebook Page 
[Programming memes by Coder](https://www.facebook.com/programmingmemesbycoders)

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

 

---
---

{% instagram CoukQjbuwW3 %}
Webthat Launch
Tags: startup, beginners, launch
Published: 2023-04-09 01:27:41

🚀 Exciting news, everyone! Webthat.io version 2.0 is officially launched! 🎉 

Our mission has always been to prioritize user experience, and with version 2.0, we're taking things to the next level!

You can expect in-depth reviews, daily news updates, and exclusive discounts and coupons from our software partners. 

💻💰 But what really sets Webthat.io apart is our commitment to community. We believe that together, we can create a better online experience for everyone. 🤝

Thank you all for choosing Webthat as your go-to source for all things tech. We're proud to serve a community of passionate tech enthusiasts, and we can't wait to see how version 2.0 takes your experience to new heights. 🙌

Come check out [Webthat](webthat.io) version 2.0 now, and let's explore the future of tech together!
Solving the sticky hover effect on Mobile with TailwindCSS
Published: 2023-04-09 01:13:10

Here is the video explaining the concepts of avoiding using hover on device not supporting the feature: https://youtu.be/uuluAyw9AI0.
This just talk about the CSS approach.

For Tailwind, the team has developed a configuration in the `tailwind.config.js` file that only support hover when needed:
```javascript
// tailwind.config.js
module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  },
  // ...
}
```
How I Work With Laravel Projects
Tags: laravel, jomlaunch
Published: 2023-04-09 00:57:51

## JomLaunch

[JomLaunch](https://www.facebook.com/jomlaunch/), Menghimpunkan professional ICT tanahair (Bringing together ICT professionals in the country - Malaysia).

Developers always leave their side projects unfinished. So we created JomLaunch! JomLaunch started as a deadline that we share together to complete, launch and showcase our side projects. No longer it is tucked under the bed. No longer it is left to dry under the sun.

**CELEBRATING TECHIES IN MALAYSIA SINCE 2015
146 PROJECTS LAUNCHED**

Each JomLaunch edition, 16 - 20 projects were chosen from 4 categories — Commercial, Personal, Open Source and Community. More than 3,200 participants have attended JomLaunch and counting. Each year, the number grows and they consists of Developers, Tech / IT Students, Aspiring Entrepreneurs and Industry Representatives.

Reference from [JomLaunch](https://jomlaunch.my/about/) site.

## POCKET TALK AT MYSTARTUP LOUNGE (POWERED BY CRADLE)

I've submitted topic for the talk and been chose to be in Pocket Talk slot.

The topic for an hour talk is about how I usually work with Laravel projects, how I write codes, managing, structuring, planning for maintainable codes.

The outline of the topic:

1. Routes
2. Helpers
3. Artisan Commands
4. Action
5. Processor
6. Services
7. Queue
8. Exceptions
9. Unit Tests
10. Packages
11. Automate
12. VS Code Extension
13. Other Tool

[Slide Presentation](https://bit.ly/jomlaunch-2022-pocket-talk-nhm
)
Discovering the Power of Collections in .NET with Categorization with Examples in C# — Part 1
Tags: programming, tutorial, beginners, dotnetcore
Published: 2023-04-09 00:34:19

There are lots of ways to manage collections of objects in programming. In .NET, you have access to a set of standard collection types for storing and manipulating data.

There are resizable lists, linked lists, sorted and unsorted dictionaries, and arrays. Arrays are part of the C# language, but the other types of collection are classes you can instantiate. Using my experience, I’m going to explore the different collection types provided by .NET and how you can use them effectively in your C# applications.

.NET programmers need to know how collection types are categorized.

- Let’s start with interfaces that set the standard for how collections should work.
- Next, you’ve got these ready-to-use collection classes like lists and dictionaries.
- Finally, you’ve got base classes for building custom collections that do exactly what you want. Picking the right collection type for your code starts with knowing these categories.


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

If you are interested in reading, you can check the full article at https://admirlive.medium.com/discovering-the-power-of-collections-in-net-with-categorization-with-examples-in-c-part-1-208bb920c6e5.

Cheers! 👋
Project 2 Week 1 Update
Published: 2023-04-09 00:34:13

### Part 1 (code)
#### github: https://github.com/JeffTaylor108/software-card
#### vercel: https://software-card.vercel.app/

### Part 2 (writing)
#### Include images of how you are conceiving the API for the elements involved and the names:
badge-card
#####
![image](https://user-images.githubusercontent.com/122399913/226200060-6eab77c4-95d9-4c94-8048-3600b2d3bd65.png) 

#### What properties do you think you'll need
- title
- creator
- topic
- icon

#### What sort of information will need to come from the backend to make this work?
Keywords associated with each badge, such as tags, topics, creators, focus areas, etc.

#### Either using a screen cast, taking screen shots, links to your code, show how you'll apply concepts from the Homework
![image](https://user-images.githubusercontent.com/122399913/226200761-7fb92e99-5b14-4bd2-b5cd-abdfe497cea3.png)
![image](https://user-images.githubusercontent.com/122399913/226200790-b9431134-0a1d-4786-9a0a-bfc20673d86d.png)

#### Relate it to what you'll have to do in order to pull this off for Project 2
I will have to give searchable properties to each badge on the backend in an ArrayList, which can be accessed from the API and then return the matching badges on the front end
Project 2 Week 4 Update
Published: 2023-04-09 00:33:52

#### How many elements did you end up going with? Why did you break it up that way?
I went with 3 elements: a search bar component, a badge component, and a badge list component containing the badges that were retrieved from the api. All 3 of these elements were included in an overall web page component creating the general layout of the page, but I wouldn't technically consider that an element. I broke it up that way because it seemed like the most intuitive way of breaking up the elements of the original web page.
#### What was the hardest aspect of this?
Wiring up the search function was by far the hardest part of this project. Most of the time I spent on the project was trying to get that feature to work.
#### What part of this project was easier than you expected?
Everything was pretty much as difficult as I imagined it if not harder. The only part that didn't cause me much difficulty was getting the HTML and CSS to look like the original web page.
Setup Soroban Dev Environment On Windows(Ubuntu-WSL)
Tags: soroban, sorobanathon, stellar, guide
Published: 2023-02-04 06:12:59

Hi! in my first post here,i will post about how to setup Soroban Dev Environment On Windows(Ubuntu-WSL). Here is the step-by-step :

##1. Install WSL and Ubuntu
To install WSL, open the `command prompt` as administrator and run this following command:
```  
wsl --install
```

![Installing WSL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6t26k536tnozspa9091q.png)
If the command doesn't install the Ubuntu distro automatically, use this command to install it: 

```  
wsl --install -d ubuntu
```
After installation, open Ubuntu and set up your username and password.

![Setup Ubuntu Username and Password](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a26mu8hgpp47elfyyw4.png)

Run this command to update everything:
```  
sudo apt update && sudo apt upgrade
```

>**Note: You need administrator privileges to run the `wsl` command in the command prompt.**

##2. Install Rust

Soroban smart contracts is written in Rust. To install Rust, use this following command 
```  
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
And install the wasm32-unknown-unknown target with this command:
```  
rustup target add wasm32-unknown-unknown
```


##3. Install GCC Compiler

The GCC (GNU Compiler Collection) is a collection of compilers and libraries for various programming languages. It is needed to install Soroban-CLI. Use this following command to install it:
```  
sudo apt install build-essential
```
## 4. Install Soroban-CLI

Soroban-CLI is the command-line multi-tool for interacting with Soroban contracts. Use this following command to install it:
```  
cargo install --locked --version 0.6.0 soroban-cli
```
After installation, run the `soroban` command. If everything is working fine, you should get an output similar to:
```  
$ soroban
soroban 0.6.0
https://soroban.stellar.org

USAGE:
    soroban <SUBCOMMAND>

OPTIONS:
    -h, --help    Print help information

SUBCOMMANDS:
    contract      Tools for smart contract developers
    config        Read and update config
    serve         Run a local webserver for web app development and testing
    events        Watch the network for contract events
    lab           Experiment with early features and expert tools
    version       Print version information
    completion    Print shell completion code for the specified shell

    gen           Generate code client bindings for a contract
    xdr           Decode xdr
    version       Print version information
    completion    Print shell completion code for the specified shell
```  

##Closing
Your Soroban Development Environment on Windows(Ubuntu-WSL) already set! 🎉🎉 And you can start tinkering with soroban smart contracts(write contracts,deploy,invoke,etc)
Installing Elixir
Tags: elixir, beginners
Published: 2023-04-09 00:08:57

As I said previously, I want to make my posts very short and concise and this is not going to be the exception.

If you're using Windows, I highly recommend install WSL so you will have the best of Linux and Windows at the same time.

Having said so, the commands I show here will work for MacOS, Linux and Windows(WSL).

I highly recommend installing Elixir with `asdf` since if you are lucky enough to work with Elixir in a professional project, you might find yourself changing the version several times, so for me, this is the best option for doing it so. So this guide will show you how to do it with `asdf`

The first thing you're going to do is install Homebrew (I know, you can install it directly as [the official web page](https://asdf-vm.com/guide/getting-started.html) says, but I think it's way easier using Homebrew instead)

So, step 1. Install Homebrew:
```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

Remember to add brew to your `.zshrc` `.bashrc`... file (or the one you're using).
```
export BREW_HOME="/home/linuxbrew/.linuxbrew/bin"
export PATH="$PATH:$BREW_HOME"
```

Step 2, install asdf:
```bash
brew install asdf
```

Step 3, add Erlang and Elixir plugin with asdf:
```bash
asdf plugin-add erlang https://github.com/asdf-vm/asdf-erlang.git
```
```bash
asdf plugin-add elixir https://github.com/asdf-vm/asdf-elixir.git
```

Step 4, install the latest Erlang and Elixir versions (or the one you want)

```bash
asdf install erlang 25.3
```
```bash
asdf install elixir 1.14.4
```

And that's all, you can change locally or globally your Elixir version with a single command.

Remember to add to your `.bashrc` (or the one you're using) the shims from `asdf`

```bash
export PATH=~/.asdf/shims:$PATH
```

You can [type](https://dev.to/calbertora/iex-n38) `iex` at your terminal to make sure that everything went well:

```bash
iex
Erlang/OTP 24 [erts-12.0.4] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [jit]

Interactive Elixir (1.13.1) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)>
```

Note: as you might see I have Elixir 1.13.1 and Erlang 24.

Edit 1:
I added the `.bashrc` to the files to add the Homebrew variables

I added the shims path.

---
Thanks for reading! My goal is to make Elixir accessible and easy to understand for everyone. If you have any questions or feedback, please don't hesitate to reach out. And be sure to check back regularly for more articles on https://dev.to/calbertora, as I strive to make each post as clear and readable as possible.