teleren/devto huggingface dataset:
Create A Microsoft Azure Static Web App
Tags: azure, devops, staticwebapps
Published: 2023-04-15 14:48:17


In the second week of our SCA cloud school journey, we were given the task to create a static web app in Azure.

In this article, I will be showing how to create one in azure in less than 5 mins.

**What is an Azure Static Web App?**

According to Microsoft, it is a service that automatically builds and deploys full stack web apps to Azure from a code repository.

What do you need to create an azure static web app?

- An Azure Account 
- A github account

Now let's dive into this tutorial:
- Firstly, go to your [Azure portal](https://portal.azure.com/) and search for "Static Web Apps" and click on the + button to create a new one.

- So now it's time to fill in your basics details and'give github the authorizations. Then select your preferred github repository.


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

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

- Once you've done this, under the "Build details", select "custom" for the build preset. For me, my "index.html" was stored in the "Src" folder, so I put /src for my app location. 

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

- Then click review + create and you'll see this. Click create

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

- Once it's finished deploying, click go to resource and you'll see these details of your deployed static web app. Click the link under URL.


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

- That's it! You can view your deployed app on the URL. If nothing is showing at the beginning, give it like 2 minutes and refresh the site.

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

- You can also tweak the code to make changes on the site.

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

- Lastly make sure you delete the application or any other resources running, if not you'll receive unnecessary bills. 

I got charged like $10 because I left my VM running for a week😩😩
Best Practices for Debugging Node.js Applications
Tags: webdev, javascript, programming, node
Published: 2023-04-15 14:32:49

Node.js is a powerful platform for building server-side applications in JavaScript. However, like any other software, Node.js applications can have bugs and issues that need to be debugged to ensure their proper functioning. In this article, we'll go over some of the best practices for debugging Node.js applications.

- **Use Debugging Tools:** Node.js provides several built-in debugging tools that can help developers find and fix issues in their applications. These tools include the Node Inspector, which allows developers to debug their Node.js applications in Chrome DevTools, and the Node.js Debugger, which allows developers to debug their applications using the command line.

- **Enable Debugging Mode:** When running a Node.js application, developers can enable debugging mode by adding the --inspect or --inspect-brk flag to the command. This will allow developers to attach a debugger and debug the application in real-time.

- **Use Logging:** Logging is a useful technique for debugging Node.js applications. Developers can use console.log() to output information to the console, or they can use more advanced logging frameworks like Winston or Bunyan to log messages to a file or a remote server.

- **Break the Code into Smaller Pieces:** Breaking the code into smaller pieces makes it easier to debug. When a bug is found, developers can isolate the problematic code and test it separately to find the root cause.

- **Write Tests:** Writing tests can help developers catch bugs early on in the development process. Unit tests, integration tests, and end-to-end tests can all help catch bugs before they become larger issues.

- **Use Debugging Middleware:** Debugging middleware can be used to capture and log errors and exceptions in a Node.js application. Examples of debugging middleware include Express's error-handling middleware and Connect's errorHandler middleware.

- **Monitor Performance:** Monitoring the performance of a Node.js application can help developers identify issues that are causing slow performance or bottlenecks. Tools like New Relic, AppDynamics, and Dynatrace can all help monitor the performance of a Node.js application.

In conclusion, debugging Node.js applications can be challenging, but by following these best practices, developers can make the process easier and more effective. By using debugging tools, enabling debugging mode, using logging, breaking the code into smaller pieces, writing tests, using debugging middleware, and monitoring performance, developers can find and fix bugs quickly and efficiently.

Thanks for reading...
**Happy Coding!**
test post
Tags: laschicasdeltech
Published: 2023-04-15 14:19:25





Some test content

What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Knowledge base or documentation site builder
Tags: staticsite, nextjs, markdown, documentation
Published: 2023-04-15 13:34:20


Use https://nextra.site/ 

- Uses Markdown (.md files). You can write all your content in Markdown
- Easy way to organize pages and folders 
- Full-text search, zero-config needed.
- Static site built with simple set of tools
- Uses Next.js

powered by https://vercel.com/ 

*Sites using this tool for their documentation:*
- https://developer.gsmtasks.com/ developer documentation site for https://gsmtasks.com
- https://www.promptingguide.ai/ 

*Installation/Getting Started:*

1. git clone https://github.com/shuding/nextra-docs-template
2. cd nextra-docs-template
3. npm install
4. npm run dev
5. go to your site on your local at http://localhost:3000/


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

made one simple update to the /pages/index.mdx to link to my dev.to profile. See the screenshot of the documentation site built under 2mins from the git repo mentioned in step #1 above!


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

Happy Documentation site building!
Read/ Query Edges from Apache AGE
Tags: apacheage, graphdatabase, database, postgres
Published: 2023-04-15 11:05:40

In Apache AGE, we can query the edges in very much different ways depending on our need.

**Undirected Edges Query**
`SELECT * FROM cypher('graph_name', $$
MATCH (:Person)-[edg]-(:movie)
RETURN edg
$$) as (edg agtype);`

**Explanation:**
In the above query, we are using `MATCH (:Person)-[edg]-(:movie)` to get all the edges that are either from `Person` `node` to `movie` `node`, or from `movie` `node` to `Person` `node`.

**Outgoing Edges**
`SELECT * FROM cypher('graph_name', $$
MATCH (:Person)-[edg]->(:movie)
RETURN edg
$$) as (edg agtype);`

**Explanation:**
In the above query, we are using `MATCH (:Person)-[edg]->(:movie)` to get all the edges that are made from `Person` node to `movie` node. We can specify any particular `edge` type by using `MATCH (:Person)-[edg: Directed]->(:movie)`. We will get only those edges from `Person` node to `movie` node in which `Person` has `Directed` the `movie`.

 Similarly, for **Ingoing Edges**, our Query will look like this:

`MATCH (:Person)<-[edg]-(:movie)`

`MATCH (:Person)<-[edg: Directed]-(:movie)`


**Match on Node's attribute**
`SELECT * FROM cypher('graph_name', $$
MATCH (:Person {name: 'Oliver Stone'})-[edg: workedIn]->(movie)
RETURN edg
$$) as (edg agtype);`

**Explanation:**
Here in this Query, we have `MATCH (:Person {name: 'Oliver Stone'})-[edg: workedIn]->(movie)`, we are querying all the edges in which `Person` named `'Oliver'` has worked.

**Get attribute of Edge**
`SELECT * FROM cypher('graph_name', $$
MATCH (:movie{title: 'Wall Street'})<-[r:ACTED_IN]-(:actor)
RETURN r.role
$$) as (role agtype);
`
**Explanation:**
Here in this query, we are using `RETURN r.role` to get only the information about the `role` of actors who acted in `movie` with `title` `Wall Street`. 

**Multiple Edges**
`SELECT * FROM cypher('graph_name', $$
    MATCH (charlie {name: 'Charlie Sheen'})-[:ACTED_IN]->(movie)<-[:DIRECTED]-(director)
    RETURN movie.title, director.name
$$) as (title agtype, name agtype);`

**Explanation:**
Here in this query, we are using multiple edges. We want to get `movie` `title` and `director's` `name` of all the movies in which 'Charlie Sheen' has acted.
Firstly, we have `(charlie {name: 'Charlie Sheen'})-[:ACTED_IN]->(movie)` to get all movies in which 'Charlie Sheen' has acted. Secondly, we are connecting it with `DIRECTED` edge by uings `<-[:DIRECTED]-(director)` to get information about the director (i. e his `name`).

**Conclusion:**
These are a few very commonly used Queries to get data from different relations. Using this pattern of Query make it simple for us to dig deep into complex relations easily without worrying about complex joins logics. This is one of the beauty of Apache AGE.

For more details visit: https://age.apache.org/overview/

**AGE Github Link:** https://github.com/apache/age

**AGE Viewer Github Link:** https://github.com/apache/age-viewer
My Favorite apps is Visual Studio Code.
Published: 2023-04-15 13:31:29

In addition to being used in programming, to memo a meeting, draw class diagram with PlantUML.

Visual Studio Code is able to use many extensions.
Someone out there has created usefulextensions, and the more famous ones have a lots of comments.

By the way, I like "Markdown All in One".
Becouse, I use markdown both for taking notes and for thinking alone, so having such an extensioin makes it less stressful.
Write a web scraper to get news from Hacker News
Tags: javascript, webdev, programming, beginners
Published: 2023-04-15 13:09:27

[https://medium.com/@juancurti/write-a-web-scraper-to-get-news-from-hacker-news-6ba318b8ee55](https://medium.com/@juancurti/write-a-web-scraper-to-get-news-from-hacker-news-6ba318b8ee55)

https://medium.com/@juancurti/write-a-web-scraper-to-get-news-from-hacker-news-6ba318b8ee55
Assertions In Dart And Flutter Tests: An Ultimate Cheat Sheet
Tags: dart, flutter, testing, programming
Published: 2023-04-15 12:43:15

Whether you are creating unit, widget, or integration tests for Flutter applications, the end goal of any test is asserting that the reality matches the expectations. Here is an ultimate cheat sheet for assertions in Dart and Flutter tests with many details explained!

![Assertions in Dart and Flutter tests: an ultimate cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shf02a970o87k9h6nvuu.png)

Find the high-res image [here](https://github.com/foxanna/tests_assertions_cheat_sheet/blob/main/cheat-sheet.png).

And read all the details in these two posts:

- [Assertions In Dart And Flutter Tests: An (Almost) Ultimate Cheat Sheet](https://invertase.io/blog/assertions-in-dart-and-flutter-tests-an-ultimate-cheat-sheet)
- [Assertions In Dart And Flutter Tests: An (Now For Sure) Ultimate Cheat Sheet](https://invertase.io/blog/assertions-in-dart-and-flutter-tests-now-for-sure-an-ultimate-cheat-sheet)

All the code is available on [GitHub](https://github.com/foxanna/tests_assertions_cheat_sheet) or in the interactive [Zapp](https://zapp.run/github/foxanna/tests_assertions_cheat_sheet/tree/main/test_assertions).

---

Hi! 👋🏻 I’m Anna, Google Developer Expert in Dart and Flutter. Follow me on [Twitter](https://twitter.com/AnnaLeushchenko), [GitHub](https://github.com/foxanna), [YouTube](https://www.youtube.com/@foxanna), [Medium](https://medium.com/@foxanna) to get notifications about my latest work.
Best landing page fonts?
Tags: design, webdev, discuss, frontend
Published: 2023-04-15 12:39:16

**Hi everyone!**

I'm currently working on [LandingPageFonts.com](https://landingpagefonts.com/), a place where you can see fonts used by successful companies, and I really want to hear what your favorite fonts to use on landing pages are? Maybe you can even show up on the page as a source!  

**Have a wonderful day!**
Understanding Closures in JavaScript
Tags: javascript, programming, beginners, webdev
Published: 2023-04-15 11:56:57

A **closure** is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives us access to an outer function's scope from an inner function. In this post, we'll take a dive into closures, explaining what they are, how they work, and how to use them in our code.

#### What is a Closure?
A closure is created when a function is defined inside another function and it has access to the variables of the outer function, even after the outer function has returned. This is because the inner function retains a reference to the environment in which it was created.

![Game of Throne reference about how the North and Closures remember](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hk6op8l7x5uct2ck5gf.png)

#### Why Use Closures?
Closures can be used to create private variables and functions. This is useful for writing more robust and organized code especially in complex projects where code organization is critical.

![Side Eye Meme on how closures work](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63apv4ag59n0999fyt8r.png)

#### How Closures Work?
To understand how closures work, it's important to understand the concept of [scope](https://www.w3schools.com/js/js_scope.asp) in JavaScript. Every function has its own scope, which defines the variables and parameters that are accessible within that function. When a function is defined inside another function, it has access to the variables and parameters of the outer function, but not the other way around.

Here is an example to see how closures work:
```javascript
function outer() {
  let count = 0;
  
  function inner() {
    count++;
    console.log(count);
  }
  
  return inner;
}

let closureFunction = outer();
closureFunction(); // Output: 1
closureFunction(); // Output: 2
closureFunction(); // Output: 3
```

In this example, the _outer_ function creates a variable `count` and defines an inner function _inner_ that increments and logs the value of `count`. The _outer_ function then returns the _inner_ function. When we call `outer()`, it returns the _inner_ function which we assign to a variable **closureFunction**. When we call `closureFunction()`, it logs and increments the value of `count`.

![Spongebob Meme on understanding closures](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mcymvx8iq13p5xbrfte.png)

Closures are a powerful feature that can help us write more robust and organized code. By utilizing closures, it is possible to generate private variables and functions, which can help avoid unintended modifications to shared state.
The Future of Mobile App Development
Tags: webdev, mobileappdevlopment, appdevlopment, websitedevlopment
Published: 2023-04-15 11:53:04

Mobile app development has come a long way in recent years, with advancements in technology allowing for greater functionality and flexibility. As we move into the future, the potential for mobile apps is only set to grow. In this post, we'll take a look at the current state of mobile app development, and what we can expect in the years to come.

**Current Trends in Mobile App Development**

One of the biggest trends in mobile app development today is the move towards cross-platform development. Developers are increasingly using tools like React Native and Xamarin to create apps that work across both iOS and Android devices. This allows them to save time and resources, while also reaching a wider audience.

Another trend is the rise of cloud-based apps. With more and more users accessing apps on multiple devices, the need for cloud storage and synchronization has become increasingly important. Developers are leveraging cloud technologies to create apps that can seamlessly switch between devices, without losing any data or functionality.

**The Future of Mobile App Development**

Looking ahead, there are several key areas where we can expect to see significant growth and innovation in mobile app development.

One area is the integration of artificial intelligence (AI) and machine learning (ML) technologies into apps. This could include everything from voice assistants to predictive analytics, allowing apps to provide more personalized experiences for users.

Another area of growth is the Internet of Things (IoT). As more devices become connected to the internet, the potential for apps to interact with these devices and provide new functionalities is enormous. From smart homes to wearable devices, the IoT presents a huge opportunity for app developers.

Finally, we can expect to see continued innovation in the areas of augmented reality (AR) and virtual reality (VR). With the growing popularity of AR and VR technologies, developers are finding new and exciting ways to incorporate these technologies into mobile apps. From gaming to education, the possibilities for AR and VR apps are virtually limitless.

**Conclusion**

As we've seen, mobile app development is a rapidly evolving field, with new technologies and trends emerging all the time. Whether you're a developer or a user, it's an exciting time to be involved in the world of mobile apps. With so much potential for growth and innovation, the future of mobile app development looks brighter than ever.
Count Number of Times an Item Appears in an Array
Tags: javascript, beginners, array
Published: 2023-04-15 11:32:23

JavaScript array methods are very powerful functions(methods) that have abstracted a lot of their functionalities. These methods help developers ease the manipulation of arrays to achieve the desired result.
check [array methods](https://javascript.info/array-methods) for a list of some array methods in JavaScript.

For example; imagine you are working with the array below and are required to count the number of times each element in the array appears.

```
const data = [
  'car',
  'car',
  'truck',
  'truck',
  'bike', 'SUV', 'van','car',
  'walk',
  'car',
  'van',
  'bike',
  'walk',
  'car',
  'van',
  'car',
  'truck',
];
```

A couple of array methods can be used to get the desired result.

### Count the number of items using `reduce()` method

```
//set the result to a variable
let itemsObject = data.reduce((accumulator, item) => {
  if (accumulator[item]) {
    ++accumulator[item];
} else {
    accumulator[item] = 1;
}
return accumulator;
}, {})


//USING TENARY OPERATOR
let itemsObject = data.reduce((accumulator, item) => {
 return accumulator[item] ? ++accumulator[item] : (accumulator[item] = 1), accumulator
}, {})


console.log(itemsObject)
/*
 {
  bike: 2,
  car: 6,
  SUV: 1,
  truck: 3,
  van: 3,
  walk: 2
}
*/

```
`reduce()` is a method that helps in getting the number of occurrences of each item in an array.

### Count the number of items using `for of` loop
The `for of` loop is a modification of the `for loop`. It makes it easier to iterate through iterables such as arrays, maps, strings etc. It functions operates just like the `forEach()` method. The major difference between the `for of` loop and `forEach()` method is that, the `for of` loop is more compatible with `async ` functions.
```
//initialize an empty object to store the items
let countVal = {};
for (val of data) {
  if (countVal[val]) {
    countVal[val] += 1;
  } else {
    countVal[val] = 1;
  }
}

console.log(countVal)
/*
 {
  bike: 2,
  car: 6,
  SUV: 1,
  truck: 3,
  van: 3,
  walk: 2
 }
*/
```
## Conclusion
Several other array methods can also be used to accomplish this task, however, if you need to count the number of items present in an array, using the `for of` loop is preferable because of its compatibility with `async` functions. The `reduce()` method is also a good option to use.