teleren/devto huggingface dataset:
useNavigate tutorial React JS
Tags: programming, javascript, react, webdev
Published: 2021-10-28 06:27:53

Hi guys !.

In this post we will learn how to use the useNavigate hook in React JS. useNavigate is part of React Router and has replaced useHistory, although it is similar to useHistory, but with more useful features.

**useNavigate** is a new hook introduced in React Router v6 and it is extremely useful and easy to use.

### Uses:
   1. Go to the previous or next pages
   2. Redirect user to a specific Url

> Check out my [blog](https://salehmubashar.com/blog).

-----------------------------------------------------------------

##Step 1:
Install React Router as useNavigate is part of the react router dom package. Install using the following 2 commands:

>Note : useNavigate is only available in React Router Dom v6

`npm install history@5 react-router-dom@6`

##Step 2:
Import **useNavigate** from React Router using the following code. This line of code can be added in any react class or function (however we are using a functional component in this example).
```javascript
import { useNavigate } from 'react-router';
```
##Step 3:
Now we will assign the useNavigate() function to a variable for ease of use. Add the following code:
```javascript
let navigate = useNavigate();
```
##Step 4:
Now you can use the variable name anywhere to navigate to a page, previous page or next page.

####Example 1:
Redirect user to another page:
```javascript
function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home')
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}
```
In the above code, the navigate('/home') is used to redirect the user on button click.

####Example 2:
In this example, we will see how to redirect to previous page:
```javascript
function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate(-1)
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}
```
####Example 3:
In this example, we will see how to redirect user to the next page (in history)
```javascript
function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate(1)
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
```

As you can see in the above two examples, -1 is used to go to the previous page while 1 is used to go to the next page.

-----------------------------------------------------------------

Check Out my latest tutorial on [Hubapages](https://discover.hubpages.com/technology/React-and-Firestore-A-Complete-TutorialPart-2)

Thank you all for reading this post!
If you learnt something new, you can buy me a coffee to support my work! 
Cheers! 🎉

<a href="https://www.buymeacoffee.com/salehmubashar" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-violet.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
🦊 GitLab Cheatsheet - 9 - GitLab API
Tags: gitlab, cheatsheet, tutorial, beginners
Published: 2021-10-28 06:23:28

Here is a new GitLab cheatsheet after a (too) long time away 😄 This new one speaks about GitLab API. 

<a href="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-9-API.jpg" alt="9 - GitLab - API" target="blank">

<img src="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-9-API.jpg" alt="9 - GitLab - API" />

</a>

I will create others cheatsheet. Tell me if you have comments or suggest about those cheatsheet 😃.
Nebula Explorer: A Tool to Visualize Graph Data Easily
Tags: database, opensource, devops, programming
Published: 2021-10-28 06:11:10


![Nebula Explorer](https://user-images.githubusercontent.com/90186547/139035653-d03f7c75-f6b2-47eb-ac55-a32351c6429d.jpg)
Nebula Explorer is a visualization tool of the Nebula Graph ecosystem. With it, you can easily access Nebula Graph, and then query and retrieve graph data via GUI without having to learn nGQL. It can display graph data as a graph on a canvas for you to visually analyze data.

##Querying Graph Data

![Querying Graph Data](https://user-images.githubusercontent.com/90186547/139034825-447c58a9-27d8-40fa-84ec-31cb0a018a95.png)

Nebula Explorer provides various methods for querying graph data. For example, you can specify a VID list or tags (with their indexes) to query vertices, or specify one or more VIDs to query a subgraph. When the queried vertices are retrieved, you can select one or more for further exploration. For example, you can query for the shared neighbors and the related paths of each pair of vertices. Through progressive queries, you can improve and enrich the data on the canvas for further graph analysis.

![Querying Graph Data](https://user-images.githubusercontent.com/90186547/139036362-29b7520c-6e59-46b1-8d6a-a9802cadc511.png)

##Displaying Graph Data
When the graph data is retrieved, you can manipulate it on the canvas flexibly, including drag-and-drop, zoom-in or zoom-out, click-and-drag, and marking vertices with colors or icons. Nebula Explorer enables you to have fun with the graph data model by providing various features.

![Displaying Graph Data](https://user-images.githubusercontent.com/90186547/139036868-adcac1fe-8b97-4acb-8e69-25af5a936ace.png)

##Roadmap
Besides querying and exploring data, Nebula Explorer will support graph computing in the future, which will enable the Nebula Graph users to use appropriate methods to query and analyze graph data in various business scenarios.

Currently, Nebula Explorer is only available for Enterprise users. If you are interested, please send an email with “Require Dashboard” as the subject to inquiry@vesoft.com.

If you encounter any problems in the process of using Nebula Graph, please refer to [Nebula Graph Database Manual](chrome-extension://gfbliohnnapiefjpjlpjnehglfpaknnc/pages/pdf_viewer.html?r=https://docs.nebula-graph.io/2.6.0/pdf/NebulaGraph-EN.pdf) to troubleshoot the problem. It records in detail the knowledge points and specific usage of the graph database and the graph database Nebula Graph.
How to perform non updating upserts in Prisma
Tags: nextjs, database
Published: 2021-10-28 06:05:35

In our example yesterday, we are [pushing specific playlists to our database](https://daily-dev-tips.com/posts/nextjs-posting-data-to-postgres-through-prisma/). However, if we add a playlist twice, we will see that the URI is not unique and exists already.

There are several ways to go about this.
And for this example, I want to look at doing a non-updating upsert.

This means we check if the URI already exists. If this is the case, we perform an update.
If it doesn't exist, we perform the creation.

The small caveat here is that we push an empty update object.

This will result in the API returning the old existing object without updating it.

## Upsert in Prisma

To perform an upsert in Prisma, you can use the `upsert` command.
It takes a where a query that should query on a unique field.

Then it comes with both the update and create functions like so:

```js
const playlist = await prisma.playlist.upsert({
  where: {
    uri: uri,
  },
  update: {},
  create: playlistItem,
});
```

And there you go. This gives us a super good way only to create this if it doesn't exist functionality.

You can find the complete example based on the Spotify database on [GitHub](https://github.com/rebelchris/next-spotify-login/tree/upsert-data).

### 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)
Next js country-code/lang-code prefix
Tags: nextjs
Published: 2021-10-28 06:02:23

Hello everybody, my client ask me to have country-code/lang-code prefix in my routes. We should save in local storage users country-code and lang code preference and then every time he comes to site, we should redirect him to selected country-code/lang-code prefix (en/en-US) Also he can choose country/ language at any time so i should be able to redirect him to new country-code/lang-code at any time. So is this even possible in nextjs ?
Join us for deploy, DigitalOcean's virtual conference
Tags: cloudnative, kubernetes, startup, webdev
Published: 2021-10-28 05:49:58

Calling all developers! DigitalOcean is preparing for another deploy conference, the virtual event for global development teams. Join us on [November 16th and 17th](http://deploy.digitalocean.com/), as technical experts from DigitalOcean share practical takeaways on using cloud technologies to grow your business. With a focus on cloud native applications, you'll walk away with Kubernetes starter kits, time-saving security tips, and robust tooling setups to build your software with ease. 

Cloud native applications — apps that are built and run to take full advantage of all the benefits that cloud computing offers — have risen in popularity in recent years because they’re easier to scale, allowing builders to quickly and efficiently launch, support, and grow their businesses. This November, we’ll focus on how builders can accelerate the development of cloud native apps, especially among startups and small-to-medium-sized businesses. 

#Best practices and business growth: sessions for all builders
We’ll kick things off with a message from DigitalOcean’s CEO, Yancey Spruill, where he will share his thoughts on all the product enhancements we’ve made this year and highlight some customers who have built robust and scalable businesses on DigitalOcean. His keynote will be followed by presentations from engineers, customers, and other experts that are building technologies and businesses powered by the cloud. 

Through keynotes and product demos, you’ll get the tools you need to find success with cloud services. We’ll cover a variety of topics including setting up Kubernetes clusters to best practices for critical operations like logging, security monitoring, backup, and more. You’ll hear real stories from other builders, sharing their startup journeys and how scrappy developer teams are using DigitalOcean to meet their business goals. And you’ll learn how you can build your business more efficiently with managed cloud services.

deploy runs November 16th and 17th, with a four-hour conference block on each day. Use the [full agenda](http://deploy.digitalocean.com/agenda) to plan your day and star your favorite sessions to create a custom viewing schedule.

#Content and community: get involved with other developers
Event attendees will have another opportunity to connect, converse, and collaborate with developers around the world in the deploy Discord server. Chat in real-time with attendees, speakers, and DigitalOcean executives to get insight on any of your business challenges. On conference day, we’ll open up additional rooms where you can play games and video network with other conference attendees.  

We’re thrilled to be a part of this amazing community and can’t wait to connect with everyone at the event!

[RSVP Here](http://deploy.digitalocean.com/)
Am Starting This Blog
Published: 2021-10-28 05:36:27

Today I took the initiative to create a blog, now that blog contains my daily notes in studying computer science and technology. here's my blog link, https://www.maskiky.com

at first I saw. For sure, there are quite a number of blogs out there, covering every achievable topic. You know what? I do not care. This blog is not even for anyone to read. There are a variety of different reasons why I started it.

Bro, why?



Before I started planning this blog, then I asked myself:

you really want to have hours of your time for this blog ?

Why not just play the game? or watch netflix?



Here I have goals, among others:



Aim ?



- Learn to write

- improved language skills

- my projects that I have worked on

- Cultivate and hone the skills I have

- Play the game less, although it's a bit difficult (a little).



What do you expect?

- Write articles every day max 3 articles

- Share useful knowledge



What topics will be written on?

- Computer science and technology



That's all for now, the most important thing is to start first
Adobe Photoshop on the web 😯 What's the tech?
Tags: news, webassembly, photoshop, javascript
Published: 2021-10-28 05:19:35

![Adobe Photoshop on the web](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsyj2u8smxlrkdipdh62.png)

Photoshop is one of the most useful programs in the world if you are the sort of person that tends to work on graphic design as well as a variety of other photography related things. This program as well as Illustrator have become mainstays of the graphic design and marketing industries.

Recently Adobe announced adobe photoshop and illustrator will launch the web version (currently in beta). Even they don't need to write entire project from scratch.
WebAssembly and its C++ toolchain [Emscripten] (https://emscripten.org/) have been the key to unlocking Photoshop's ability to come to the web, as it meant that Adobe would not have to start from scratch, but could leverage their existing Photoshop codebase. Photoshop that are written in C++ can be ported directly to the web without requiring a rewrite in JavaScript. 


![Emscripten](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ku1rja4dgdxdi1a3mqxw.png)

Photoshop is a famous large, and feature-rich application with hundreds of user interface elements that support dozens of workflows. The application is built by multiple teams using a variety of development tools and practices, but its different parts need to be brought together into a cohesive, powerful whole. To meet this challenge, Adobe turned to Web Components and the [Lit library](https://lit.dev/). Photoshop's UI elements come from [Adobe's Spectrum Web Components](https://opensource.adobe.com/spectrum-web-components/) library, a lightweight, performant implementation of the Adobe design system that works with any framework, or no framework at all.

Access Photoshop Web (beta) and [learn more](https://helpx.adobe.com/photoshop/using/photoshop-web-faq.html)

Update 1st Oct, 2023
Available now at https://photoshop.adobe.com/
How to debug iPhone Safari on Windows
Tags: webdev, beginners, mobile, css
Published: 2021-10-28 05:12:01

## Motivation
Want to ensure that your website & web application works across different screen sizes and devices? One of the must-dos is to check that it works well on iPhone Safari(as you know, people tend to stick with the defaults and one does not simply tell the user to download another web browser .-.).

Here's how I debugged a display issue on my website and hopefully it will save you some time when sh*t happens :)

---

## Setup
- Problem: something wrong with your website, perhaps due to CSS or JS, but you don't know why.
- Tools:
  - iPhone with Safari
  - Windows
  - iTunes
  - Inspect

---

## Steps
You may be testing your website on your iPhone Safari browser, you realized something is wrong and you want to access the debug console to check any relevant error messages. One available tool is [Inspect](https://inspect.dev/)(not affiliated, just something that worked)
- Create an account (free 30 days trial)
- Download the installer for your OS
- Setup and connect your iPhone according to the instructions given
- Debug!
- DONE

After setting it up, I was able to discover an error message in my debug console: 
>"ResizeObserver loop completed with undelivered notifications" 

...Which I have no idea what that means. So, what else can be done?

If the above does not solve your problem, you might want to find out if you have accidentally introduced a CSS feature that is not yet supported.
To do this, you may want to search for the feature on [caniuse](https://caniuse.com/). Here is how I found out that the `CSS property: aspect-ratio` is not fully supported on all iPhone Safari:
- Check [caniuse CSS property: aspect-ratio](https://caniuse.com/mdn-css_properties_aspect-ratio)
- Check your iPhone Safari Settings (as you will see, there are a ton of properties and features that are experimental and not enabled by default)

- Go to settings -> Safari
![settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0viz6zxcaddyw7uh2h55.jpg)
- Go to Advanced
![advanced](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umov6yn2oryp975khwc4.jpg)
- Enable Web Inspector(will be required if you use a tool like Inspect)
![details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpated0dzg6i2m5u3wp1.jpg)
- Check if you are ahead of your time (Experimental Features)
![experimental](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbkg6iv0hldp64c0bwny.jpg)

- Cry over hours of wasted time

That's all. Go back to coding...
(Compilation) Front-End Most Commonly Asked Interview Questions [HTML, CSS & Javascript]
Tags: html, css, javascript, career
Published: 2021-10-28 05:09:00

Are you ready for your next front-end role 💼 💻 or are about to start a career as a front end developer/engineer? If so, here is a video 🎥 of most commonly asked HTML, CSS and JS questions in one video that will definitely help you out. 

I took my previous post/video and remastered it spending over 100+ hours 🕒 to make the video more appealing, interesting, and fun so it can be used repeatedly hopefully for many generations to come. Hope you enjoy!

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

If you want to support me - [Buy Me A Coffee](https://www.buymeacoffee.com/letscode77)

{% youtube npcNFM9SQTg %}
Git – What is the difference between push.default “matching” and “simple”

Tags: softwaretestingcompany
Published: 2021-10-28 05:00:45

Struggling with git push.default, not sure what is the difference between push.default “matching” and “simple”. Hope this blog will helps you out! Lets start with what is git push?

git push - can push all branches or a single one dependent on this configuration:

Configuration 1 – Push all branches

git config --global push.default matching

It will push all the branches to the remote branch and would merge them. If you don’t want to push all branches, you can push the current branch only.

Configuration 2: Push only the current branch

git config --global push.default simple

It will push branches one by one. It Mostly connected with current branch.

It will push all the branches to the remote branch and would merge them. If you don’t want to push all branches, you can push the current branch only.

push.default
Defines the action git push should take if no refspec is explicitly given. Possible values are:

nothing – do not push anything (error out) unless a refspec is explicitly given. This is primarily meant for people who want to avoid mistakes by always being explicit.
current – push the current branch to update a branch with the same name on the receiving end. Works in both central and non-central workflows.
upstream – push the current branch back to the branch whose changes are usually integrated into the current branch (which is called @{upstream}). This mode only makes sense if you are pushing to the same repository you would normally pull from (i.e. central workflow).
simple – in centralized workflow, work like upstream with an added safety to refuse to push if the upstream branch’s name is different from the local one.
matching – push all branches having the same name on both ends. This makes the repository you are pushing to remember the set of branches that will be pushed out.
https://www.fleekitsolutions.com/difference-between-push-default-matching-simple/
5 very useful Chrome Extensions
Tags: webdev, beginners, productivity, chrome
Published: 2021-10-28 04:13:00

In this article we are going to look at some useful chrome extension which can be very handy as a developer. So let's dive in.

**Note -** *Now you can add chrome extension to your microsoft edge browser*

### [1.Buster](https://cutt.ly/GRFxCrv)

Buster is a browser extension which helps you to solve difficult captchas by completing reCAPTCHA audio challenges using speech recognition. Challenges are solved by clicking on the extension button at the bottom of the reCAPTCHA widget.

![buster](https://cutt.ly/wRFxHu3)

### [2.CSS Peeper](https://cutt.ly/PRFcufb)

CSS Peeper is a CSS viewer tailored for Designers. Get access to the useful styles with our Chrome extension. Our mission is to let Designers focus on design, and spend as little time as possible digging in a code.

![css-peeper](https://cutt.ly/sRFcfpx)

### [3.Coder's Calendar](https://cutt.ly/dRFcmYM)

It Shows a list of live & upcoming coding Contests happening on various popular competitive programming websites with the feature to add these events to your Google Calendar.

It currently support Codechef, HackerEarth, Hackerrank, Topcoder, Codeforces, CSAcademy, AtCoder, LeetCode, Kaggle, etc.

![calender](https://cutt.ly/pRFcDxD)

### [4.Gitako - GitHub file tree](https://chrome.google.com/webstore/detail/gitako-github-file-tree/giljefjcheohhamkjphiebfjnlphnokk)

It is a file tree for GitHub. It can do more than just that, it has many features such as Instant file search and navigation, Fold source code etc.

![gitako](https://cutt.ly/sRFvc6r)

### [5.OneTab](https://cutt.ly/NRFbqob)

Whenever you find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once.

![one-tab](https://cutt.ly/LRFbyXD)

### Conclusion

So these are some cool and awesome chrome/edge extension that can be very useful to you in daily life. This is gonna be a serious in which I'll provide more useful extension, so follow for more.

<blockquote>
<p>You can now extend your support by buying me a Coffee.😊👇</p>
</blockquote>
<a href="https://www.buymeacoffee.com/j471n"><img src="https://cdn.buymeacoffee.com/uploads/project_updates/2021/05/918bc0ffae9a1865553d54bc11e65c4b.gif" alt="Buy Me A Coffee" loading="lazy" width="400"></a>

### Also Read 

- [10 CSS Resources that you should bookmark](https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6)
- [Some Strange Concept of JavaScript](https://dev.to/j471n/some-strange-concept-of-javascript-4icc)
- [Glassmorphism Loading Animation](https://dev.to/j471n/glassmorphism-loading-animation-4n2m)
Welcome Thread - v148
Tags: welcome
Published: 2021-10-28 03:55:58

---
title: Welcome Thread - v148
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Baby polar bear saying "sup"](https://media.giphy.com/media/ypqHf6pQ5kQEg/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**