teleren/devto huggingface dataset:
HOW TO PREVIEW AN UPLOADED IMAGE WITH REACT.JS
Tags: react, javascript
Published: 2023-04-29 18:07:17

As a developer, if your file upload component is a customized one, or you want users of your platform to be able to preview their uploaded image, i am going to explain how you can achieve that in few steps.

**REQUIREMENT:**
create a react project using this command:
`npx create-react-app image-upload-preview`

- **STEP 1**
*Create a react component*

```
import react from 'react'

export default function ImagePreview(){
return <div></div>
}
```

- **STEP 2**
*Add a file input component*
```
*import react from 'react'*

export default function ImagePreview(){
return <div>
   <input type='file' name='image' />
</div>
}
```

- **STEP 3**
*install this library to preview your uploaded image*

`npm install mrcandie-react-preview`
```
import react from 'react'
import Preview from 'mrcandie-react-preview'

export default function ImagePreview(){
return <div>
      <input type='file' name='image' />
      <Preview />
</div>
}
```
**STEP 4**

*Extract uploaded image file using react useState hook*
```
import react, {useState} from 'react'

export default function ImagePreview(){
const [image, setImage] = useState('')
return <div>
      <input type='file' name='image' onChange={(e)=> 
            setImage(e.target.files[0]} />
            <Preview />
</div>
}
```
**STEP 5**
*Pass the uploaded image/file as a prop to the Preview component*
```
import react, {useState} from 'react'

export default function ImagePreview(){
const [image, setImage] = useState('')
const [imageUrl, setImageUrl] = useState('')
return <div>
      <input type='file' name='image' onChange={(e)=> {
            setImage(e.target.files[0]} />
            }
       <Preview file={image} />
</div>
}
```
**FINAL STEP**
*Voila! Your uploaded image is previewed*;
```
import react, {useState} from 'react'

export default function ImagePreview(){
const [image, setImage] = useState('')

return <div>
      <input type='file' name='image' onChange={(e)=> {
            setImage(e.target.files[0]} />
            }
      <Preview file={image} />
</div>
}
```
read more about mrcandie-react-preview documentation [here](https://www.npmjs.com/package/mrcandie-react-preview)
Getting Started with a Career in Platform Engineering
Tags: career, devops, platformengineering
Published: 2024-01-12 02:02:16

---
title: Getting Started with a Career in Platform Engineering
published: true
date: 2023-04-29 17:51:46 UTC
tags: careers,devops,platformengineering
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/1*BRUIlx4kRFyk0e8TN3bJUA.jpeg)](https://augustokrosa.medium.com/getting-started-with-a-career-in-platform-engineering-fc422a34e056?source=rss-fab031e08990------2)

For those interested in getting started in a career in Platform Engineering (DevOps)

[Continue reading on Medium »](https://augustokrosa.medium.com/getting-started-with-a-career-in-platform-engineering-fc422a34e056?source=rss-fab031e08990------2)
The Mind-Blowing Potential of Quantum Computing: Could it Revolutionize Drug Discovery and Put an End to Online Hackers?
Tags: quantumcomputing, news, mindblowing, exciting
Published: 2023-04-29 17:22:26

Are you ready for a glimpse into the future? The world of quantum computing is nothing short of mind-blowing, and the potential it holds for revolutionizing our lives is nothing short of amazing. From drug discovery to cybersecurity, quantum computing has the potential to solve problems that once seemed impossible to tackle.

Imagine being able to discover new drugs in a matter of months, rather than years. This breakthrough could save countless lives and improve healthcare outcomes. Quantum computing enables us to simulate the behavior of molecules much faster than traditional computers, which would significantly speed up the drug discovery process and help us find the most promising drug candidates. With quantum computing, we could be on the cusp of a medical revolution.


![Drug Discovery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfyco3iwk26s0pbdw5sc.png)


But the potential of quantum computing extends beyond healthcare. In a world where cybercrime is rampant and personal information is constantly at risk of being hacked, quantum cryptography offers a new level of protection. By using the principles of quantum mechanics, we can ensure secure communication that's practically unbreakable. It's a game-changer that could put an end to online hackers and keep our information safe.

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

Of course, quantum computing isn't without its challenges. Scientists are still working on scaling up quantum computers to handle complex simulations and making them more reliable. But with continued research and development, we could see a world where quantum computing is the norm and problems that once seemed insurmountable can be solved faster than ever before.

As young people who will be inheriting the future, it's exciting to think about how quantum computing could change our world for the better. The possibilities are endless, and the future is brighter than ever before. So, are you ready to be a part of this technological revolution? Keep your eyes on the horizon, because quantum computing is just the beginning.

_All images used belong to their respective owners._
Unleashing the Power of Data Analytics with Apache AGE: The Synergy of Graph Databases and Machine Learning - Part 2
Tags: datascience, analytics, machinelearning, postgres
Published: 2023-04-29 17:07:28

## Common Use Cases
**1. Social Network Analysis:**
Apache AGE can be used to analyze user behavior and preferences in social networks, as well as identify relationships between users. Combined with machine learning techniques like collaborative filtering, this can improve recommendations, identify influencers, and detect fake accounts or bots.

**2. Fraud Detection:**
Graph analytics can help uncover hidden connections and suspicious patterns in financial transactions. By integrating machine learning, you can enhance the accuracy of fraud detection models and predict potential fraudulent activities.

**3. Recommendation Engines:**
Combining machine learning techniques like collaborative filtering with Apache AGE's graph analytics capabilities can allow you to recommend products or services based on user behavior and preferences.

**4. Supply Chain Optimization:**
Graph analytics can model complex supply chain networks and reveal inefficiencies, while machine learning can predict demand, optimize inventory levels, and improve routing decisions.

## Best Practices for Maximizing Your Data Analytics Potential with Apache AGE

1. **Start small and iterate:** Begin with a small dataset and iterate as you gain more experience with Apache AGE.
2. **Use standard graph algorithms:** Employ standard graph algorithms like variable length and edge traversal to analyze graph data.
3.** Use indexes:** Improve query performance and reduce execution time by using indexes.
4. **Optimize query performance:** Use appropriate data types, avoid complex subqueries, and use appropriate indexing to optimize performance.
5. **Use appropriate data modeling:** Ensure data consistency and accuracy with proper data modeling.

## Related Articles

[_Unleashing the Power of Data Analytics with Apache AGE: The Synergy of Graph Databases and Machine Learning - Part 1_
](https://dev.to/adeelahmed2k01/unleashing-the-power-of-data-analytics-with-apache-age-the-synergy-of-graph-databases-and-machine-learning-part-1-18od)
[_Unleashing the Power of Data Analytics with Apache AGE: The Synergy of Graph Databases and Machine Learning - Part 3_](https://dev.to/adeelahmed2k01/unleashing-the-power-of-data-analytics-with-apache-age-the-synergy-of-graph-databases-and-machine-learning-part-3-27bd)

## Contribute to Apache AGE
Apache AGE website: [https://age.apache.org/](https://age.apache.org/
)

Apache AGE Github: [https://github.com/apache/age](https://github.com/apache/age)
Embracing Imposter Syndrome
Published: 2023-04-29 17:06:21

> This article was originally posted to [my personal blog](https://brianmorrison.me/blog) on 04/16/2020.

If you’ve been writing code for any length of time, you’re probably not unfamiliar with Imposter Syndrome. Wikipedia defines Imposter Syndrome as;
> \*\*…\*\*a psychological pattern in which one doubts one’s accomplishments and has a persistent internalized fear of being exposed as a “fraud”.
A big part of why most developers (especially newbies) experience this is because our industry is uniquely deep. In the sense that the more you learn, the more you realize you don’t know, and the more you fear that you should know it and that others will view you as somewhat inferior to them. Most folks are terrified by this. I’m going to present a different twist and encourage you to embrace it.
### Imposter Syndrome as a Good Thing
![](https://brianmorrison.me/img/n/embracing-imposter-syndrome/60f31bc6-1110-4fdf-ba7b-f9e83a32dcf8-image.png)
It might sound crazy, but hear me out. If you are worrying about not knowing enough, that means that you care enough to want to grow. Whether that’s to impress others or yourself. Desired to grow in any positive area of your life is never a bad thing! I’d encourage you to acknowledge that the reason you’re scared at all is because you KNOW there is something you don’t fully understand.
Learn to acknowledge these cues and do something about it. Try to identify what exactly it is about a specific topic that’s causing it, and do what you need to do in order to understand the topic fully. Then try and engage in intelligent conversations with others in the field. If you’re worried about speaking with the ones you work with, there is no shortage of people on the internet who would be willing to chat about these things.
Side note: I host a Discord community & we would love to chat with you about any and all things coding 😉. – [fullstack.chat](http://fullstack.chat)
Putting this concept into practice will do wonders for both your knowledge and confidence as a developer.
And as always, happy coding! 😁 💻
Nodist: Running multiple version of NodeJS on Windows
Published: 2023-04-29 17:06:00

> This article was originally posted to [my personal blog](https://brianmorrison.me/blog) on 04/11/2020.

Ever work on different projects that depend on different versions of Node? I recently ran into an issue where I had one project that depended on Node 10, and another (this website actually) depend on Node 12. Put me in an interesting situation. I wasn’t about to go and uninstall/reinstall versions of Node every time I switched projects. So I did a little digging and discovered a project called Nodist.
Nodist allows you to quickly swap out the active version of Node on your box. Here are some of the commands I personally use. To get started, head over to the releases page of the Nodist project [here](https://github.com/nullivex/nodist/releases) and install the latest version.
## Setting your Active Node Version
In Nodist, there is the concept of the global version & the local version. The global version is the node version that’s used by default. I set mine to the latest (12 at the time of this writing) by issuing the following command in my terminal;
```
nodist global 12
```
One of the neat things about Nodist is you don’t need to install a version manually. When you set the version, Nodist will automatically download and install the latest dot release of Node for that major release. You can also set the entire version if you want;
```
nodist 12.16.2
```
If you’re working on a project that requires a different version, you can set it on the directory level using;
```
nodist local 10
```
Now whenever you issue Node & NPM commands in that directory, it will use the version specified instead of the global version.
## Setting the NPM Version
If you want to use different NPM versions, you can also use Nodist to set that as needed;
```
nodist npm global 12
nodist npm local 10
```
You can also set NPM to whatever version matches the version of Node you have set;
```
nodist npm global match
```
Using Nodist makes swapping out versions of Node & NPM much easier than trying to tackle it manually. Head over to the repo to view the full documentation [here](https://github.com/nullivex/nodist).
Publishing a Vue App to AWS CloudFront CDN
Published: 2023-04-29 17:05:43

> This article was originally posted to [my personal blog](https://brianmorrison.me/blog) on 02/16/2020.

In the previous article of the series, we uploaded a Vue To Do app to AWS S3. Today, we'll learn how to CloudFront to optimize performance of our app. This tutorial can be applied to any S3 bucket though, the process is actually the same.
## What is CloudFront
CloudFront is AWS's Content Distribution Network (or CDN). The purpose is to distribute your app or website to the 200+ distribution points around the world. When a user requests your content, AWS will serve it from the closest distribution point to the user, which results in quicker load times.
## Connecting CloudFront to S3
Lets start by opening CloudFront in the AWS Console. Once there, click Create Distribution. Select Get Started under Web if it asks.
![](https://brianmorrison.me/img/n/publishing-a-vue-app-to-aws-cloudfront-cdn/81f33a2c-9578-4e24-9a59-2e08d0403dc0-image.png)![](/img/n/publishing-a-vue-app-to-aws-cloudfront-cdn/5dbf8d07-ee91-4660-a305-f4dfa36a7820-image.png)![](/img/n/publishing-a-vue-app-to-aws-cloudfront-cdn/a2d1d8e4-b34e-4fea-9c93-087fbd6b882b-image.png)
You'll be presented with a form to complete at this point. Normally you'd need to specify a URL for your Origin (or where your content is originally stored at), but CloudFront integrates nicely with S3 so when you click that box, it will show your current buckets. Select the S3 bucket you wish to publish. Set **Viewer Protocol Policy** it to **Redirect HTTP to HTTPS,** then scroll down and set **Default Root Object** to **index.html.** Finally, click Create Distribution.
![](https://brianmorrison.me/img/n/publishing-a-vue-app-to-aws-cloudfront-cdn/c87e23c9-276e-4a2b-9ae1-b61af696b5e0-image.png)![](/img/n/publishing-a-vue-app-to-aws-cloudfront-cdn/31e2dbdc-5818-4393-8d06-2857600d86dc-image.png)![](/img/n/publishing-a-vue-app-to-aws-cloudfront-cdn/21dea917-da3a-46fe-bc52-0f2c6af78f70-image.png)
You'll be brought back into your list of CloudFront Distributions. It takes a while for AWS to distribute your content, so wait until the Status shows **Deployed**.
![](https://brianmorrison.me/img/n/publishing-a-vue-app-to-aws-cloudfront-cdn/fb5f0f37-1354-46cb-9549-a91bf6dccb9d-image.png)
Now of we copy the Domain Name listed in the table and paste that into a new tab in our browser, we should see our app again!
![](https://brianmorrison.me/img/n/publishing-a-vue-app-to-aws-cloudfront-cdn/05ea2571-a39a-499f-aedb-ac291aa7af98-image.png)
In the last article of this series, I'll cover how you can use GitHub actions to automate this process every time changes to your code are made!
Script-Scheduler: A cron based NodeJS script runner
Published: 2023-04-29 17:05:26

> This article was originally posted to [my personal blog](https://brianmorrison.me/blog) on 02/03/2020.

One of the things that I do on a fairly regular basis is try to find ways to automate various processes in my life. To do this, I’ve used a combination of PowerShell scripts running on my server, Microsoft Flow (now called Power Automate), and IFTTT. Well Microsoft has started increasing Flow prices (and they made the HTTP connector Premium), and deploying PowerShell scripts sometimes can be a pain to do since I’m using the Windows Task Scheduler to manage them. I was looking for an easier way to port some of this functionality to something I can run in a Docker container and deploy using standard CI/CD tools.
My solution is what I’ve come to name **script-scheduler**. It’s a way to have small NodeJS scripts to run a set interval using cron expressions. What the framework does is recursively pull in a directory of specially formatted scripts and schedules them to run based on their cron expression. Here is a sample of what I am currently using in one of my projects;
```
// Import the package.
const scheduler = require('@brianmmdev/script-scheduler')
// This is the directory where all my scripts live.
const baseDir = `${__dirname}/scripts/`
// Pass it into the scheduler.
scheduler.run(baseDir)
```
A basic script is composed of three main components;
- A cron expression.
- A function.
- An optional enabled flag.
Here is an example of a script that could be run;
```
module.exports = {
    enabled: true,
    schedule:  \"*/1 * * * *\",
    fn: function () {
        var date = new Date();
        console.log('This script will run every minute!', date.toLocaleString());
    }
}
```
There is plenty more polish that can be added to this thing, but it is in a working state so I figure why not publish it for others to use. Check it out at the links below;
- Github Repo: [https://github.com/bmorrisondev/script-scheduler](https://github.com/bmorrisondev/script-scheduler)
- NPM Package: [https://www.npmjs.com/package/@brianmmdev/script-scheduler](https://www.npmjs.com/package/@brianmmdev/script-scheduler)
Feel free to comment (or better yet, contribute) as you see fit. Happy coding!
Tools and Online Learning Sites for Mastering Algorithms and Data Structures?
Tags: discuss, job, career, developer
Published: 2023-04-29 16:57:05

 
Hello, dev.to community! Today, let's engage in a discussion about resources for mastering algorithms and data structures. Which resources have been most helpful in honing your algorithmic and data structure skills? 

**The Significance of Algorithm and Data Structure Education:**

Algorithms and data structures are essential in software development, enabling efficient and optimized solutions. A solid understanding of algorithms helps us solve complex problems, while proficiency in data structures enhances data management and manipulation.

**Engaging Online Learning Sites to Explore:**

- LeetCode: Have you used LeetCode for algorithmic practice and interview preparation? How has it benefited your algorithmic skills?
- HackerRank: Share your experiences with HackerRank and how it contributed to your algorithmic and data structure expertise.
- CodeSignal: Have you tried CodeSignal? How has it improved your algorithmic skills?
- Educative: Share your insights on how Educative's courses enhanced your understanding of algorithms and data structures.
- Coursera: Have you taken Coursera courses on algorithms and data structures? How did they contribute to your learning experience?


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

**Common Patterns and Strategies:**

Brute Force: Sometimes, a straightforward approach of trying all possible solutions can be effective, especially for smaller problem sizes. However, it's crucial to identify when to optimize beyond brute force to handle larger inputs.

Two Pointers: This pattern involves using two pointers or indices to traverse an array or list simultaneously. It is particularly useful in scenarios such as finding pairs or subarrays with specific properties.

Sliding Window: The sliding window technique involves maintaining a dynamic window over a sequence of elements. It proves valuable for optimizing operations like substring matching, subarray sums, or finding longest/shortest contiguous subsequences.

Depth-First Search (DFS) and Breadth-First Search (BFS): These graph traversal algorithms help explore and search through connected elements efficiently. DFS is great for exploring deeply, while BFS is useful for breadth-first exploration.

Dynamic Programming: The dynamic programming strategy involves breaking down complex problems into smaller overlapping subproblems and caching the results to avoid redundant computations. This technique is particularly helpful in optimizing time and space complexity.

Greedy Algorithms: Greedy algorithms make locally optimal choices at each step, aiming to achieve the global optimum. While they may not guarantee the optimal solution in every case, they often provide efficient and acceptable results.


I will appreciate to share the experience of other people in the topic and recommendations.

Update:
Neetcode.io is a really good resource
Make salary calculator using Chat GPT and Excel
Tags: chatgpt, javascript, html, css
Published: 2023-04-29 16:40:36

In this blog post, we will explore how to make a salary calculator using Chat GPT and Excel. A salary calculator is a tool that can help employees or employers determine their net income after taxes and deductions. With the help of Chat GPT, we can create an interactive and user-friendly salary calculator that can be used by anyone with basic Excel skills.


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

The first step in making a salary calculator using Chat GPT and Excel is to gather the necessary information. We need to know the employee's gross salary, any pre-tax deductions, and their tax filing status. Once we have this information, we can create a formula in Excel that calculates the employee's net income after taxes and deductions.

Next, we can integrate Chat GPT into Excel using the Power Automate platform. Power Automate allows us to create a chatbot that can interact with users and provide them with personalized results. We can create a chatbot that prompts users for the necessary information and then uses the Excel formula to calculate their net income.

## Here the full video tutorial:
https://youtu.be/ab0OWqaLZCo

Finally, we can test and refine our salary calculator to ensure that it is accurate and user-friendly. We can use feedback from users to make improvements and adjustments to the chatbot and formula.

With the help of Chat GPT and Excel, we can create a powerful and interactive salary calculator that can help employees and employers make informed decisions about their finances. To see an example of how to create a salary calculator using Chat GPT and Excel, check out the YouTube video linked above.
Exploring ChatGPT’s Capabilities in Creating and Optimizing SQL Queries for Oracle
Published: 2023-04-29 16:20:29

This article explored how ChatGPT-4 can help you create SQL queries and evaluate their performance. Using ChatGPT-4, you can not only improve the quality of your SQL queries, but also use its capabilities to evaluate and optimize query performance - https://blog.devart.com/create-and-optimize-oracle-queries-with-chat-gpt-4.html

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