teleren/devto huggingface dataset:
Configuração e instalação do Nuxt 3
Tags: nuxt3, vue, beginners, programming
Published: 2023-02-02 20:08:00


![logo nuxtjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9m1epcb2yd6af2b1csl5.png)

O Nuxt 3 é uma ferramenta poderosa para desenvolvimento de aplicações Vue.js. É uma abordagem baseada em framework que oferece uma série de recursos para ajudar você a criar aplicações avançadas com facilidade. Neste artigo, vamos cobrir os passos para configurar e instalar o Nuxt 3.

## Instalação do Nuxt 3

A maneira mais fácil de instalar o Nuxt 3 é usando o CLI (Command Line Interface) Nuxt. Para fazer isso, você precisa ter o Node.js e o NPM (Node Package Manager) instalados em sua máquina. Depois de instalá-los, você pode executar o seguinte comando no seu terminal:

`npx create-nuxt-app nome_da_sua_aplicacao`

## Configuração do Nuxt 3

Após a instalação, você precisará configurar o Nuxt 3 para atender às suas necessidades. A configuração principal é feita no arquivo nuxt.config.js, localizado na raiz da sua aplicação. Nesse arquivo, você pode especificar configurações como o título da sua aplicação, descrição, etc.

## Inicialização do Nuxt 3

Depois de configurar o Nuxt 3, você pode iniciá-lo executando o seguinte comando no terminal:

`npm run dev`

Isso fará com que o Nuxt 3 inicie em modo de desenvolvimento, permitindo que você visualize sua aplicação em seu navegador.

## Conclusão

Como você pode ver, a configuração e instalação do Nuxt 3 são simples e diretas. Além disso, o Nuxt 3 fornece uma série de recursos e opções para ajudá-lo a criar aplicações avançadas com facilidade.
Fig Scripts: Build internal CLI tools really fast
Tags: bash, programming, devops, git
Published: 2023-02-02 19:47:30

Hey everyone! I'm [Brendan](https://www.linkedin.com/in/brendanfalk), founder of [Fig](https://fig.io?ref=devto). Fig makes the shell easier and more collaborative.

Today we are launching Fig Scripts, a ridiculously easy way to build and share internal CLI tools. You can build a workflow like the below in < 1 minute! 

Try it out [here](https://fig.io?ref=devto) or watch this [quick demo video](https://www.loom.com/share/c3fa97d40ca2476aa140dba3abe456d3).

![Fig Scripts demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62673ak5ibxd62sey9w6.gif)

**Why did we build this?**
There is surprisingly a lot of friction involved in building an internal CLI. Instead of writing business logic, most of your time is spent on boilerplate: integrating with the CLI framework, reading/validating user input, working out how to distribute/update your tool, tracking usage and errors, even adding colored output... This is stupid. You should be spending your time writing your business logic, not doing boilerplate!

**How does Fig Scripts work?**
We’ve built a platform to build, distribute, and manage your internal scripts and CLI tools. We handle all the boilerplate, you focus on writing your business logic.

Some key features are:
- Jupyter-notebook style interface with multi-language support (bash, python, js/ts...)
- Easy input definition: Fig out-of-the-box terminal UI library makes accepting user input easy. We even generate the CLI flags for you.
- Instant cross-device sync: Changes are instantly provisioned to everyone on your team.
- Built-in usage monitoring and error reporting: See how frequently scripts/subcommands are used and what the most common errors are.


**What's next?**
Coming soon, we are going to add integrations with popular developer infrastructure (like AWS, Docker, GitHub), cron jobs, new cell types (like markdown), more language support, and the ability to run scripts in the cloud.

**Our ask**
It’s still early, there are kinks, but we think what we have is really promising. I'd love to hear any feedback on what we’ve built! 😊
How can I get draggable items to stack on top of each other using react-draggable?
Published: 2023-02-02 19:46:05



Hey! Check out my PR: https://github.com/VEuPathDB/CoreUI/pull/140/files

In it I've added a general purpose draggable panel component which renders its children into a panel that can be repositioned by users via drag and drop. To accomplish the dragging/dropping, I depend on `react-draggable`. I was surprised to see that when I dragged items, the most recently dragged item WAS NOT on top of the other items. Here's what I discovered was happening:

https://youtu.be/bjXWnhiJR0s

YouTube: {% youtube bjXWnhiJR0s %}
Send an SMS Message From an Excel Spreadsheet
Tags: beginners, community, sms, vba
Published: 2023-02-02 19:03:41

## Introduction

Microsoft offers a way to add new functionality to Office applications such as Microsoft Excel to prompt and interact with the user in ways specific to your business needs. You can perform these tasks and accomplish more by using Visual Basic for Applications (VBA). It is a simple but powerful programming language that you can use to do such things as get your contacts from Microsoft Outlook into a Microsoft Excel spreadsheet.

In this blog post, we'll use VBA in Microsoft Excel to send an SMS Message. Just enter the cell phone number and text to be sent and press a button to send it! You could modify the code to add additional functionality your business may require, such as scheduling. Let's get started!

> To continue reading the full article, please [click here](https://mcrump.me/excel)

Conclusion

If you have questions or feedback, join us on the [Vonage Developer Slack](https://developer.vonage.com/community/slack) or send me a Tweet on [Twitter](https://twitter.com/mbcrump), and I will get back to you. Thanks again for reading, and I will catch you on the next one!
Why setup is important as software developer
Tags: beginners, setup, productivity, career
Published: 2023-02-02 19:03:39

As a beginner software developer, having the right tools and configurations in place is essential for success 💻. This process is known as "setup", and it is critical for beginners to understand its importance 🤔. In this blog post, we will explain why setup is important for software developers in simple terms.

**1. Consistency:** When everyone on the team sets up the same way, everyone is using the same tools and configurations 🔧. This helps avoid problems that can come from using different versions of tools or dependencies 🤯.

**2. Efficiency:** A properly set up environment can help you work faster and be more productive 🚀. You won't waste time setting up and can focus on writing code and solving problems 💡.

**3. Collaboration:** When working with others, having a consistent setup is key 🔑. This helps everyone work together effectively and share code 🤝.

**4. Reproducibility:** If you need to work on a project later, having a clear setup process makes it easy to get started again 💪. It also helps others pick up the project if needed 🙌.

**5. Debugging:** Debugging means fixing problems in your code 🔧. With the right tools and configurations in place, it is easier to find and fix bugs 🐛.

In conclusion, setting up your development environment is important for consistency, efficiency, collaboration, reproducibility, and debugging 🔍💡🚀🤝💪. As a beginner software developer, taking the time to set up properly can make a big difference in your experience and success 🎉. This blog post was optimized for search engines like Google and platforms like dev.to, making it easier for beginners to find the information they need to start their journey in software development 🚀.
Path-based routing on an Application Load Balancer
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-02-02 19:00:09

[33/100] #100DaysOfCloud Today, I created a path-based routing on an Application Load Balancer where it routes to different web pages based on the path in the URL.

A path-based routing on an Application Load Balancer where the default routing is to a target group named main with two instances assuming it as the instances that host the main page. There are two other target groups names football and cricket with two instances each assuming these two are instances that hosts for football and cricket page. When the ALB url has a path '/football' or '/cricket', it routes it to the football or the cricket webpage respectively.

I had tried to do this a few times but always ended up getting some sort of errors. The webpage never loaded when I add the path to the url. I tried to figure out and solve it but always failed and ended up doing something else as I was short on time. Today, I decided to do it no matter what and find the problem. 
I figured that if the instances in the target group that are routed based on path have their index.html file in a directory named after the path name in /var/www/html, then it works perfectly.
For example, I have a target group that routes based on path value '/football'. I created a directory in /var/www/html named football and moved the index.html file to that directory.

- Each listener has a default rule, and you can optionally define additional rules. Each rule consists of a priority, one or more actions, and one or more conditions. You can add or edit rules at any time.
- You can use forward actions to route requests to one or more target groups. If you specify multiple target groups for a forward action, you must specify a weight for each target group. Each target group weight is a value from 0 to 999. Requests that match a listener rule with weighted target groups are distributed to these target groups based on their weights.
- You can use path conditions to define rules that route requests based on the URL in the request (also known as path-based routing). The path pattern is applied only to the path of the URL, not to its query parameters.

For more information on Listeners rules and other types of routing for your Application Load Balancers, check out this [documentation](https://docs.aws.amazon.com/elasticloadbalancing/latest/application/load-balancer-listeners.html#path-conditions)

You can try do it by yourself by following the steps from the link below: [GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/033/Readme.md)
LeetCode #121. Best Time to Buy and Sell Stock with JavaScript
Tags: javascript, algorithms, leetcode
Published: 2023-02-02 18:48:19

Solutions to LeetCode's [121. Best Time to Buy and Sell Stock] (https://leetcode.com/problems/best-time-to-buy-and-sell-stock/description) with JavaScript.

## Solution 1
```js
/**
 * @param {number[]} prices
 * @return {number}
 */
const maxProfit = (prices) => {
  let maxProfit = 0;
  for (let i = 0; i < prices.length - 1; i++) {
    for (let j = i + 1; j < prices.length; j++) {
      let profit = prices[j] - prices[i];
      if (maxProfit < profit) {
        maxProfit = profit;
      }
    }
  }
  return maxProfit;
};
```
- Time complexity: O(n^2)
- Space complexity: O(1)

The Time complexity of this solution is O(n^2), so I'll find another solution.

## Solution 2
```js
/**
 * @param {number[]} prices
 * @return {number}
 */
const maxProfit = (prices) => {
  let maxProfit = 0;
  let stockToBuy = prices[0];

  for (let i = 1; i < prices.length; i++) {
    if (stockToBuy > prices[i]) {
      stockToBuy = prices[i];
    }
    const profit = prices[i] - stockToBuy;

    if (maxProfit < profit) {
      maxProfit = profit;
    }
  }
  return maxProfit;
};
```
- Time complexity: O(n)
- Space complexity: O(1)

I was able to change the for loop to one and shorten the time complexity to O(n).
An In Depth guide on deploying fastapi to AWS ec2
Tags: python, fastapi, deployment, aws
Published: 2023-02-02 18:40:35

---
title: An In Depth guide on deploying fastapi to AWS ec2
published: true
description: I have made a video on how to deploy a python fastapi app to AWS EC2
tags: python, fastapi, deployment, aws
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy8zyhaw3qed15ebryhf.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-02 18:35 +0000
---

{% youtube E5IhKYT7ecU %}


In this video, I would like to show you in-depth details on how to deploy a python Fastapi app to an AWS EC2 with Nginx, supervisor and uvicorn.  Also I have added timeline marks to easily navigate through the video 

The configuration files and sample application can be found in the github repo: https://github.com/ShobiExplains/fast...

The readme also contains some commands that you can use. https://github.com/ShobiExplains/fast...

Follow me on twitter : https://twitter.com/ppshobi

Please post your comments, doubts and Please subscribe and share the video.
Take Your JavaScript to the Next Level: Why Array Methods & Promises Are Essential for Beginner Developers
Tags: javascript, basics, arrays, promises
Published: 2023-02-02 18:00:03

---
title: Take Your JavaScript to the Next Level: Why Array Methods & Promises Are Essential for Beginner Developers
published: true
description: Learn the essentials of Array Methods and Promises in JavaScript. This beginner-friendly guide features two videos that show the power and versatility of these essential tools. Take your coding skills to the next level now!
tags: JavaScript, Basics, Arrays, Promises
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6skgbryz0856b9cgabry.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-02 17:52 +0000
---

As a beginner in JavaScript, it can be overwhelming to decide which topics to focus on first. After mastering the basics of the language, it is highly recommended that you dive into learning about array methods and promises. These are powerful and essential tools for any JavaScript developer and will greatly enhance your ability to write efficient and effective code.

Array Methods

JavaScript arrays are a fundamental data structure in the language and their methods allow you to perform a wide range of operations on the data they contain. From sorting and filtering data to transforming it, the array methods are an indispensable tool in your JavaScript toolbox.

Some of the most commonly used array methods include **`sort()`**, **`filter()`**, **`map()`**, and **`reduce()`**. Each of these methods serves a specific purpose, but when used together, they can create powerful combinations for working with your data.

Check out this video to learn about these as well as **may other** array methods.

{% youtube https://youtu.be/junyAP7Ct0U %}

Promises

Promises are a fundamental aspect of JavaScript and are used to handle asynchronous code. This is important because JavaScript is a single-threaded language and you need to be able to perform tasks that take time to complete (such as making an API call) without blocking the rest of the code from executing.

Promises provide a way to represent the eventual outcome of an asynchronous operation and they provide a means of handling errors and results. This makes your code more maintainable, readable and efficient.

Check out this video to learn more about promises in this beginner-friendly video… and also find out a cool tip to boost the performance of your asynchronous code.

{% youtube https://youtu.be/SZ63LWK8wLY %}

Array methods and promises are two of the most important topics for beginner JavaScript developers to master. By learning how to use them, you will greatly enhance your ability to write effective and efficient code and you will be well on your way to becoming a proficient JavaScript developer.
Introducing Avatarify AI: the AI-powered profile photo generator
Tags: ai, svelte, machinelearning, typescript
Published: 2023-02-02 17:45:26

Are you tired of having the same old boring profile photos? Look no further, Avatarify AI is here to revolutionize the way you present yourself online. Developed by independent developer Emanuele Pavanello, Avatarify AI is an open-source SaaS that uses AI to generate custom profile photos based on your desired look. 

To get started, simply log in with your Google account or use a magic link. Upload at least 10 photos of yourself from different angles and watch the AI do its magic. The AI model, based on the recently open-sourced "Stable diffusion" model, will learn your unique features and generate up to 100 custom profile photos for you to choose from. The model is capable of recognizing and generating photos for Man, Woman, Couple, Dog, Cat, and Child.

But that's not all. Avatarify AI takes it a step further by allowing you to customize the style and theme of your generated photos. With inspiration from the prompts available on [lexica.art](https://lexica.art/), the possibilities are endless. All you need to do is pay a one-time fee of €9.99 (currently 40% off with promo code LESS40) to get started. 

The frontend of Avatarify AI is written in Svelte and TypeScript in strict mode, and the TypeScript types related to the database are automatically generated using the Supabase CLI. The authentication, user data, and photo storage are managed through Supabase to avoid manual backend and database management. The project is continuously integrated with Vercel pipelines. 

So what are you waiting for? Give Avatarify AI a try and let the AI help you stand out from the crowd. The project is open source, and the developer is actively looking for engagement through stars, issues, and pull requests on [GitHub](https://github.com/epavanello/avatarify-ai.com).

Check it out now on [avatarify-ai.com](https://avatarify-ai.com/).
Dynamic RESTful API Design with HATEOAS 🚀
Tags: restful, api, hateoas, express
Published: 2023-02-02 17:42:24

---
title: Dynamic RESTful API Design with HATEOAS 🚀
published: true
description: Discover the power of HATEOAS in RESTful API design. Learn why it's crucial for dynamic and scalable APIs, and how to implement it with Node.js and Express. Upgrade your API game today!
tags: RESTful, API, HATEOAS, Express
cover_image: https://149351115.v2.pressablecdn.com/wp-content/uploads/2022/02/280222-Stack-Overflow-API-Debugging-1200x630.jpg
---

Are you tired of constantly having to update your API every time you make changes to your server-side code? 💩 HATEOAS (Hypermedia as the Engine of Application State) is here to save the day!

In this article, we'll dive into what HATEOAS is all about, why it's crucial for RESTful API design, and how to implement it in a Node.js/Express application 🚀.

What is HATEOAS, you ask? 🤔

HATEOAS is a key principle of RESTful architecture that ensures a client interacts with a server-driven application through hypermedia links within resource representations. This means that the client receives a resource representation that includes links to related resources. The client can then dynamically navigate the application's state using these links, without having to hard-code a fixed set of interactions.

Why is HATEOAS Important for RESTful API Design? 🤔

By using HATEOAS, APIs become more flexible, scalable, and maintainable. The client doesn't have to know about all the possible interactions in advance. Instead, it can discover available resources and interact with them dynamically through the hypermedia links provided by the server. This makes updates to the API much easier, as the server can add or remove links without affecting the client.

How to Implement HATEOAS in a Node.js/Express Application 💻

Let's take a look at a simple book library API as an example. First, we'll create a book resource representation that includes hypermedia links. Here's an example of what this could look like:

```json
`{
  "id": 1,
  "title": "To Kill a Mockingbird",
  "author": "Harper Lee",
  "links": [
    {
      "rel": "self",
      "href": "/books/1"
    },
    {
      "rel": "collection",
      "href": "/books"
    }
  ]
}` 
```

In this example, the "self" link points to the current book resource, and the "collection" link points to the collection of all book resources.

Next, we'll create a `GET /books/:id` endpoint to retrieve a book resource:

```javascript
app.get('/books/:id', (req, res) => {
  const book = books.find(book => book.id === parseInt(req.params.id));
  if (!book) return res.status(404).send('The book with the given ID was not found.');
  res.send(book);
});`
``` 

And that's it! By including hypermedia links within resource representations, clients can dynamically discover available resources and interact with them.

In conclusion, HATEOAS is the missing piece for making RESTful APIs truly dynamic and user-friendly. So, go ahead and add some 🔗 to your API resources – it'll make things easier for your clients and keep your API up-to-date. 

As always, happy coding! 💻
How to pass a challenging Frontend Interview in 2023 Part 1
Tags: frontend, react, javascript, interview
Published: 2023-02-02 17:38:58

Sooo theres a lot of tricky parts to passing any coding interview, but there are some hacks and some solid practices. While chat gpt does offer a lot hacks, it can also be a good source to ask about leetcode questions to better understand the problem, the data structure theory behind it, and also to understand the syntax of other people's solutions.  

Yes, chat gpt, yes, but also just you and your own journey as a frontend developer. Whether you're focused on react, vuejs, svelte, typescript, or just plain old vanilla javascript, there are a lot of challenges to wrapping your head around what is happening. 

My first suggestion is to gain a more overarching understanding of whatever you are learning. This means the general concepts and procedures.

The second suggestion is to use flash cards to better remember the terms and syntax around what you are learning. Hand written and color coordinated spiral ruled index cards are very helpful. You can also add tabs that further breakdown the flash cards. 

The other way to do flash cards is using cram.com
Here are some frontend orientated flash cards I am developing:
https://www.cram.com/flashcards/jan-23-22-13350658

I hope these help.
For more helpful thangs follow me on twitter:
www.twitter.com/adamtimuraslan
First Terminal Project
Tags: python, construction, projectmanagement, github
Published: 2023-02-02 17:34:10

## Why??

Being a civil engineer working on construction management I've gone through dozens of different softwares to organize and manage communication regarding construction drawings. 

Since trying to shift my career into software engineering, I decided to start with trying to build my own little terminal project to learn python. 

## What is does?
This script main idea is track construction drawings with their revision, add new revisions, new Request For Information (RFIs) and related them to each consultant (subject). 

The menus would guide you to what you need (like information and status of items and if you wanna add or change something).

##Link
https://github.com/andreftardin/dwg_manager.git

## Thanks!
It looks basic but I took it as a big thing having little time to manage between working, having 2 toddlers and learn. Thanks all for the support!
How to classify monkeys images using convolutional neural network , Keras tuner , and transfer learning ? (part1)
Tags: python, cnn, deeplearning, ai
Published: 2023-02-02 17:31:51

Hi,

Ready to take your AI skills to the next level ? 
This 5-part Tensorflow tutorial will teach you everything you need to know about classifying monkey species images using the latest techniques in deep learning. 
From understanding image data to building a powerful Convolutional Neural Network model, this tutorial covers it all. And with the help of Keras Tuner hyper-parameters, you'll learn how to optimize your model for maximum accuracy. 
Finally, witness the magic of Transfer Learning as you see your image classification skills soar. 

Start your journey to AI mastery now.

Link for the tutorial is here : https://bit.ly/3czlNOr

I also shared the Python code in the video description.

interested in learning modern Computer Vision course ? you can cover this course here  : http://bit.ly/3HeDy1V
Perfect course for every computer vision enthusiastic

Oreily  come up with this book . the best book for learning Deep learning based on Tensorflow-Keras. This is the link : https://amzn.to/3STWZ2N


Enjoy
Eran

#Python #Cnn #TensorFlow #Deeplearning #ai #computervision