teleren/devto huggingface dataset:
Redis Hackathon: NK-Microservices
Tags: redishackathon
Published: 2022-08-06 07:47:00

### Overview of My Submission

This project started out as an initiative to better explain how microservices and deploying Microservices work. As a matter of fact, few years ago, DevOps and Microservices were still a blackbox. In this regards, I developed this microservices project, composed of a Gateway Service, Backend Service, ArangoDB (persistent storage), and Redis (Caching). 

The main purpose of this project is to highlight the importance and complexities of distributed systems, and highlight how different components interact with one another.

In addition to that, the project contains multiple deployment modes, with the aim of showcasing different ways of deploying a Microservices project


### Submission Category: 

MEAN/MERN Mavericks.


### Language Used

Node.JS


### Link to Code

- Documentation: https://github.com/automation-lb/nk-microservices-deployment

The repository above contains all the information needed to download and deploy the project.
🆕Femil's Portfolio📢
Tags: portfolio, vite, react, animations
Published: 2022-08-06 07:45:12

## TOC
   🤞[What I built](#description)
   ⚒️[Tech stack](#tech-stack)
   😎[Preview](#preview)
   👁️[Screenshots](#screenshots)
   ✍️[Description](#description)
   🧑‍💻[Source Code](#source-code)
   🙏[Thanksgiving](#thanksgiving)

##🤞What I built<a name="description"></a>
>Hey folks, 
 This is going to be the announcement of my new portfolio. I've been working on this for the last two months and I think it is finally ready to launch.

##⚒️Tech stack <a name="tech-stack"></a>
>1. Framework : Reactjs + vitejs
2. Packages : axios, gsap, react-router-dom

##😎Preview <a name="preview"></a>
>[Portfolio](https://femil-savaliya.netlify.com/)

## 👁️Screenshots <a name="screenshots"></a>
![welcome](https://res.cloudinary.com/ddw/image/upload/v1659766642/blogsImg/New%20Portfolio/Screenshot_2022-08-06_114358_lmfkbz.png)

![hero](https://res.cloudinary.com/ddw/image/upload/v1659763706/blogsImg/New%20Portfolio/Screenshot_2022-08-06_105635_zcemqa.png)

![about](https://res.cloudinary.com/ddw/image/upload/v1659766643/blogsImg/New%20Portfolio/Screenshot_2022-08-06_114414_gsvg5q.png)

![projects](https://res.cloudinary.com/ddw/image/upload/v1659766975/blogsImg/New%20Portfolio/download_4_1_ddc405.png)

![blogs](https://res.cloudinary.com/ddw/image/upload/v1659766642/blogsImg/New%20Portfolio/Screenshot_2022-08-06_114624_ap27tj.png)

![contact](https://res.cloudinary.com/ddw/image/upload/v1659766642/blogsImg/New%20Portfolio/Screenshot_2022-08-06_114649_wrzuts.png)


## ✍️Description <a name="description"></a>
>- The landing page needs all the details you need to get to know me in the professional formats - LinkedIn, Github etc.
- Fully responsive with animation & !hover effect
- Component wise structure

## 🧑‍💻Source Code <a name="source-code"></a>
>[Code](https://github.com/Femil32/Portfolio_2.0)

## 🙏Thanksgiving <a name="thanksgiving"></a>
![muhaa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l3yncgezcsmrue1cwu0.gif)
>I hope you like this guys 🙌.
All feedback is precious ❤️.
How to not overengineer in software development
Tags: tutorial, productivity, beginners, design
Published: 2022-08-06 07:40:00

![OverEngineering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5nbu6ge5bnmxq9hh170.jpg)

Software development is becoming increasingly complex with the need to address different variables such as security, compliance, latency, reliability, recovery and so on.. software development is also becoming easier with growth of various tools, better technologies, automation, cloud and so much more..

> So... how to make it simple ?

_Software development becomes simple when you engineer the problem just enough and make proper use of tools/technologies to solve it._

## Don't assume
Most of the complexity, technical debt, improper design, incorrect behavior and many more problems arise due to improper communication and lack of common understanding among the team.

> Ask the question, is this going to be X or Y ? do not make an assumption and build on top of it, make sure everyone has a common understanding and are working towards the same goal.

## Understand your end goal
Do no focus just on the implementation and what cool tech/tools you can use, think of the end goal and find out if there is a better approach, a simpler approach which would solve your problem and get you to the end result.

> [Best example ever](https://www.youtube.com/watch?v=W_WSGHIPSrM)

## You can't do anything about it ?
We often think of various scenarios/blockers/bottlenecks which could be caused by factors out of our control (such as another team, a resource you need access to, dependency with another system) and try to solve them. While these are very good pro-active and essential measure to be able to work towards a goal smoothly, sometimes it becomes too much and leads to lot of resources being spent in vain.

> Try to bring it up and voice out what is needed to the levels required, but do not put more than what is required, instead think of what else can be done which is under your control.. if none, then wait for it 😄.

## Let's make it generic and futuristic
Everyone loves creating software that is futuristic and is applicable across various domains, but the effort required to do so keeps increasing as the design becomes more fancier.

> Generic/futuristic software code is really good, but do evaluate the value it generates vs the effort put, are many people/teams going to be benefited with some more effort ? Yes ? Go for it.

## Timebox
While we have to spend time to explore and solve lot of problems, it might lead to the trap of getting lost and not knowing when to quit thus overengineering and overthinking.

> Timebox what you are going to explore, once you hit your timer think about 'are you on the right track ? do you see any outcome with some more effort and time ?' and decide what to do next based on your answer to that question.
Javascript Tagalog - Nullish Coalescing Operator
Tags: nullish, tagalog, javascript, filipino
Published: 2022-08-06 07:37:39

**Ano ngaba ang Nullish Coalescing Operator**

Ang Nullish Coalescing ay isang pperator syntax ng javascript.
Mukha siyang ganto na nasa gitna ng dalawang values
```Value ?? Value```
Mamimili siya sa dalawang values kung ano i rereturn niya,

---

**if left side is null or undefined kukunin niya right side
if left side is <u>not</u> null or undefined kukunin niya is left side**

---

Eto mga samples if null or undefined left side:
![ Javascript Tagalog ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcxs3yywdx3zvzt19olm.png)

Eto mga samples if hindi null or undefined left side:

![ Javascript Philippines Tagalog ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v81c8ahg192l9e8k6doi.PNG)

---

eto yung comparison niya sa short circuiting sa || ('OR operator')
may kinalaman kasi sa pagiging falsy value ng empty string **''** or the number **0** na otherwise iba ang behavior sa || operator

![ Javascript Philippines Tagalog ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyfqljnnbmjjbg8oku9b.PNG)

---

**More tagalog Javascript Learning Resources:**
https://javascript-methods-in-tagalog.vercel.app/
RESTFul -Web-services
Tags: webdev, java, api, microservices
Published: 2022-08-06 07:32:22

https://stackoverflow.com/q/73237688/19692346



I have created a project on RESTFul Webservices.

The Post method works fine, generates user id but when i use get, put and delete method it does not work...

gives me null pointer exception...though i have not defined anything related to it.

I have tried to understand the reason why the methods do not work, tried using different logics, but nothing works hence unable to fix it.

Please help me resolve the issue or guide me how to resolve it

Github link: [1]: https://github.com/Chay81/Mobil-App-WS
Database setup using XAMPP
Tags: database, sql, php, programming
Published: 2022-08-06 07:31:12

This is a short introduction to help you setup and test access to your database using a local web server (XAMPP). For more information on SQL commands, please refer to database textbook(s).
(Please let me know if you find any errors or omissions in the document —Upsorn Praphamontripong, 27-January-2022)
XAMPP is an open source package that is widely used for PHP development. XAMPP contains MariaDB, PHP, and Perl; it provides a graphical interface for SQL (phpMyAdmin), making it easy to maintain data in a relational database.

## read also : [phpmyadmin sql dump pass password passwd pwd](https://professional-writer0.blogspot.com/2022/08/phpmyadmin-sql-dump-pass-password.html)

If you have not installed XAMPP, please refer to XAMPP-setup to install and set up XAMPP.

Assuming that you have already set up XAMPP

Start the database server ("MySQL Database")
Start the PHP environment ("Apache Web Server")
Note:  phpMyAdmin  runs on a PHP environment. To use  phpMyAdmin  to manage databases, Apache Web server must be started.

Reminder: be sure to stop the server when you are done. Leaving the servers running consumes energy and may later prevent the servers from starting (in particular, MySQL server).

## Access phpMyAdmin

Open a web browser, enter a URL   http://localhost   to access XAMPP dashboard
Select  phpMyAdmin  tab

Alternatively, you may access  phpMyAdmin  via the XAMPP manager / controller, click  Go to Application  button to access XAMPP dashboard.

The main page should look similar to the following

## **[read more How do I import a .SQL file into xampp?](https://professional-writer0.blogspot.com/2022/08/how-do-i-import-sql-file-into-xampp.html)**
Important Tools For Web Developers
Tags: webdev, beginners, programming, tutorial
Published: 2022-08-06 07:16:00

## An ultimate list of resources for Web developers.
Top 5 must use tools

1. Royalty-free Images, Videos and Illustration
2. Icons and Fonts
3. UI Design Tools
4. Design ideas
5. Learning Platform

**1) Royalty-Free Images, Videos and Illustration**
Some Website You can get Royalty-Free Images, Videos and illustrations that you can use for your landing pages and background images.

- Unsplash
- Pexels
- unDraw
- Coverr

**2) Icons and Fonts**
Some Website You can get Free Vector Icons and Fonts that you can use for your Websites.

- Flaticon
- Animated icons
- Font Awesome
- Google Fonts

**3) UI Design Tools**
Some Free, Online UI Design Tool For Developers

- Figma
- Zeplin
- Adobe XD

**4) Design ideas**
Best Trending Web Designs that will help you to get your ideas

- Awwwards
- Dribbble
- Behance

**5) Learning Platform**
Some online learning platform that offers free coding classes in programming languages including Python, Java, JavaScript, Ruby, SQL, C++, HTML, and CSS. Start with these free programming classes: Introduction to HTML.

- w3schools.com
- freeCodeCamp
- Theodinproject
- MeM.Dev
Tik Tok Clone using next js.
Tags: javascript, webdev, nextjs, mongodb
Published: 2022-08-06 07:00:00

A full stack tiktok clone project build using nextjs.

This is not a fully finished project it's just a demonstration.

**_Clone, fork, edit do whatever you need._**

Source Code : **[github](https://github.com/prajyu/TikTok_Clone.git)**

Working APP: **[APP](https://tiktokclone-prajyu.vercel.app/)**

Let me know what you think of this project 🙂.
Firestore error: Error: Value for argument "data" is not a valid Firestore document. Input is not a plain JavaScript object.
Tags: firebase, node, javascript, webdev
Published: 2022-08-06 06:52:00

Hello!!
I'm trying to use firestore as database of my service api. But it was occured error like below.

```
Error: Value for argument "data" is not a valid Firestore document. Input is not a plain JavaScript object.
```

Approach

```javascript

import { DocumentData, FirestoreDataConverter, QueryDocumentSnapshot } from '@google-cloud/firestore'

export const converter = <
    AppValue extends object
>(validator?: (value: AppValue) => AppValue): FirestoreDataConverter<AppValue> => {
    return {
        fromFirestore: (snapshot: QueryDocumentSnapshot<AppValue>) => {
            let data = snapshot.data()
            Object.keys(data).forEach((key) => {
                // @ts-ignore
                if (typeof data[key].toDate == "function" && typeof data[key].seconds == "number") {
                    // Timestamp型は扱いにくいのでDate型に強制変更
                    // @ts-ignore
                    data[key] = data[key].toDate()
                }
            })
            return data
        },
        /*
        * Async Await syntax don't support!!
        *
        * Fix like below
        * toFirestore: (value: AppValue): DocumentData => {
        **/
        async toFirestore: (value: AppValue): DocumentData => {
            if (validator) {
                return validator(value)
            }
            return value
        }
    }
}

export default converter

```
2357. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-08-06 06:20:04

```
class Solution {
 public:
  int minimumOperations(vector<int>& nums) {
    unordered_set<int> seen(begin(nums), end(nums));
    return seen.size() - seen.count(0);
  }
};

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/make-array-zero-by-subtracting-equal-amounts/
2358 . Leetcode Solution in Cpp
Tags: cpp
Published: 2022-08-06 06:18:06

```
class Solution {
 public:
  int maximumGroups(vector<int>& grades) {
    // Sort grades, then we can seperate the students into groups of sizes 1, 2,
    // 3, ..., k, s.t. i-th group < (i + 1)-th group for both sum and size.
    // So, we can rephrase the problem into:
    //   Find the max k s.t. 1 + 2 + 3 + ... + k <= n

    //  1 + 2 + 3 + ... + k <= n
    //         k(k + 1) / 2 <= n
    //              k^2 + k <= 2n
    //   (k + 0.5)^2 - 0.25 <= 2n
    //          (k + 0.5)^2 <= 2n + 0.25
    //                    k <= sqrt(2n + 0.25) - 0.5
    return sqrt(grades.size() * 2 + 0.25) - 0.5;
  }
};

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/maximum-number-of-groups-entering-a-competition/
2359. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-08-06 06:15:00

```
class Solution {
 public:
  int closestMeetingNode(vector<int>& edges, int node1, int node2) {
    constexpr int kMax = 1e5;
    const auto dist1 = getDist(edges, node1);
    const auto dist2 = getDist(edges, node2);
    int minDist = kMax;
    int ans = -1;

    for (int i = 0; i < edges.size(); ++i)
      if (min(dist1[i], dist2[i]) >= 0) {
        const int maxDist = max(dist1[i], dist2[i]);
        if (maxDist < minDist) {
          minDist = maxDist;
          ans = i;
        }
      }

    return ans;
  }

 private:
  vector<int> getDist(const vector<int>& edges, int u) {
    vector<int> dist(edges.size(), -1);
    int d = 0;
    while (u != -1 && dist[u] == -1) {
      dist[u] = d++;
      u = edges[u];
    }
    return dist;
  }
};

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/find-closest-node-to-given-two-nodes/
2360. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-08-06 06:12:18

```
class Solution {
 public:
  int longestCycle(vector<int>& edges) {
    int ans = -1;
    int time = 1;
    vector<int> timeVisited(edges.size());

    for (int i = 0; i < edges.size(); ++i) {
      if (timeVisited[i])
        continue;
      const int startTime = time;
      int u = i;
      while (u != -1 && !timeVisited[u]) {
        timeVisited[u] = time++;
        u = edges[u];  // move to next node
      }
      if (u != -1 && timeVisited[u] >= startTime)
        ans = max(ans, time - timeVisited[u]);
    }

    return ans;
  }
};

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/longest-cycle-in-a-graph/
458. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-08-06 06:03:51

```
class Solution {
 public:
  int poorPigs(int buckets, int minutesToDie, int minutesToTest) {
    return ceil(log(buckets) / log(minutesToTest / minutesToDie + 1));
  }
};

```
#leetcode
#challenge:
Here is the link for the problem:
https://leetcode.com/problems/poor-pigs/
HTML fallback images on error
Tags: html, webdev
Published: 2022-08-06 05:52:00

The other day I encountered some issues with images for external sources not loading.

I saved a link to someone's Twitter profile image in this case. When the user changes this image, it doesn't auto reflect the new one.

So I decided to look into fallback images.
And it's surprisingly easy.

What we want to achieve:

- Load the image
- If it doesn't load, show the fallback

> Note: Alternatively, you could decide to remove the image

## HTML on error fallback images

Let's set up a sample HTML experiment.

```html
<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-163822.jpeg"
/>
```

This will load an [Photo by Pixabay from Pexels](https://www.pexels.com/photo/yellow-blue-red-pink-purple-green-multicolored-open-umbrellas-hanging-on-strings-under-blue-sky-163822/) (a stock image site).

This will work perfectly, but now let's try and destroy it by randomly adding some numbers to the image.

```html
<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-00000.jpeg"
/>
```

With this, we get the super annoying broken image.

![Broken image](https://cdn.hashnode.com/res/hashnode/image/upload/v1658904232633/3hpuI-Kw4.png)

So what can we do when this happens?
We can use the `onerror` attribute on the image to set a fallback.

It works like this:

```html
<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-00000.jpeg"
  onerror="this.onerror=null; this.src='https://images.pexels.com/photos/159868/lost-cat-tree-sign-fun-159868.jpeg'"
/>
```

We use the `onerror` to set the error to null and set the src of the image to a fallback.
In our case, a photo of a missing cat.

> Note: It's not a great practice to rely on external images. You ideally want to have the fallback image locally in the file system, so it's a reliable fallback.

You can see it in action in the following CodePen.
The first image loads, and the second one is broken.

{% codepen https://codepen.io/rebelchris/pen/VwXMMZo %}

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
How to create AWS Free Tier Account?
Published: 2022-08-06 04:56:00

REGISTER FOR AWS FREE TIER ACCOUNT
Step 1. First Open your web browser and navigate aws.amazon.com/free 
Step 2. On middle-click on Create a Free Account

![First Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fv9lpw853mn0n7h1bu93.png)



Step 3.Enter the details for your AWS account and click on Continue

- Email address: 
- Password: Type your password.
- Confirm password: Authenticate the password.
- AWS Account name: you can also enter after you sing up. Go to 
account settings.


![Enter the credentials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xadfp20i7o1jl8sz61r2.png
)

Step 4. Contact Information
Select your AWS type, Enter your personal details and Select the checkbox stating Accepts the Terms and condition and then click on Create Account and Continue

Note:  Later on this process, on your mobile, verification code will receive.  

![Enter Contact Information](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2icvbt3gtvjhxtmpsqg8.png)

Step 5. Payment information: Enter credit card /Debit Card info and billing address and click on Submit.


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

Step 6. In this step, you will redirected to your credit/debit card payment verification screen, It will charged 2 INR(depend on country) and mostly it will return back to account in 24/48 hours.

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

Step 7. Phone verification: Through text message or voice call verification 

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

Step 8. After clicking on Send SMS or Call me Now, you will immediately receive a call or SMS from Amazon, for verification code, Enter your code then click on Verify Code.

Step 9. Support plan: Select Basic Plan as you are looking forward to create Free tier account or Select your suitable plan then click continue.

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

Step 10. Registration Confirmation page.
You will received an email confirmation that your account activated. It may take over 30 minutes to 1 hour sometime. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s836qkgrx95j4z76ieft.png)
Hire+Plus! For Employees Here's how I built it (UI - Launch)
Tags: react, webdev, programming, tutorial
Published: 2022-08-06 04:51:00

## Launch Route Page
**inside `routes > launch > launch-page.tsx`**
Basic launch page info with 2 links that redirect either to the `Developers` section of the app or the `Recuiters` section of the app. 

```javascript
import { Link } from 'react-router-dom';
const Launch = () => {
	return (
		<section className="text-gray-600 body-font">
			<h1 className="text-center text-2xl md:text-4xl my-10">
				What features are you looking for?
			</h1>
			<div className="container px-10 py-5 mx-auto">
				<div className="flex flex-wrap -mx-4 -mb-10 text-center">
					<div className="sm:w-1/2 mb-10 px-4">
						<div className="rounded-lg h-64 overflow-hidden">
							<img
								alt="content"
								className="object-cover object-center h-full w-full"
								src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870"
							/>
						</div>
						<h2 className="title-font text-2xl font-medium mt-6 mb-3">
							For Recuiters
						</h2>
						<p className="leading-relaxed text-base font-color">
							Easily search and view candidates, manage candidates through our
							Project Management board, best of all post jobs for free!
						</p>
						<a href="https://hire-plus-employer-v1.vercel.app/">
							<button className="flex mx-auto mt-6 text-white bg-indigo-700 border-0 py-2 px-5 focus:outline-none rounded">
								GET STARTED
								<span style={{ marginLeft: '10px' }}>&#10095;</span>
							</button>
						</a>
					</div>
					<div className="sm:w-1/2 mb-10 px-4">
						<div className="rounded-lg h-64 overflow-hidden">
							<img
								alt="content"
								className="object-cover object-center h-full w-full"
								src="https://images.unsplash.com/photo-1551434678-e076c223a692?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870"
							/>
						</div>
						<h2 className="title-font text-2xl font-medium mt-6 mb-3">
							For Developers
						</h2>
						<p className="leading-relaxed text-base font-color">
							View the latest jobs posted by hiring companies, create and manage
							your profile to show off skills, and apply for jobs you want!
						</p>
						<Link to="/app">
							<button className="flex mx-auto mt-6 text-white bg-indigo-700 border-0 py-2 px-5 focus:outline-none rounded">
								GET STARTED
								<span style={{ marginLeft: '10px' }}>&#10095;</span>
							</button>
						</Link>
					</div>
				</div>
			</div>
		</section>
	);
};

export default Launch;

```

### Screenshot

![Launch page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jskvv13ex349j7pvnkx4.png)

That's all for the UI/Launch portion of the project, stay tuned!