teleren/devto huggingface dataset:
How to use Typescript Package in Javascript React?
Tags: javascript, typescript, react
Published: 2023-01-08 20:53:12

Introduction:
With the popularity of typescript, more newly developed npm package uses Typescript and the existed project mainly uses Javascript as the development language.  It is important to add typescript for an existing React App project.
Setup:
Install typescript:
 npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Created a file with js extension. 
Warning: It will cause error if you directly use ts extension.   
Here is a demo code from re_point/react-page-slides
`
import React from 'react';
import {ISlideConfig, PageSlides, SlideParallaxType} from '@re_point/react-page-slides';

export const MainPage = () => {
    const slides: ISlideConfig[] = [
        {
            content: <div>first page content</div>,
            style: {
                backgroundImage: 'url("public/photo/photo_1.jpg")'
            }
        },
        {
            content: <div>second page content</div>,
            style: {
                backgroundImage: 'url("public/photo/photo_2.jpg")'
            }
        },
        {
            content: <div>third page content</div>,
            style: {
                backgroundImage: 'url("public/photo/photo_2.jpg")'
            }
        },
    ];
    return (
        <PageSlides
            enableAutoScroll={true}
            transitionSpeed={1000}
            slides={slides}
            parallax={{
                offset: 0.6,
                type: SlideParallaxType.reveal
            }}
        />
    )
};
`Change export const MainPage = () to const MainPage =()
add export default MainPage at the end
How I think about log levels
Tags: logging
Published: 2023-01-08 20:03:00

---
title: How I think about log levels
published: true
description: The six log levels I expect, two more than most folks, and when they should alert
tags: logging
published_at: 2023-01-08 20:03 +0000
---

I recently had a moment to think about how I use log levels. I've used logging in various frameworks and standard libraries across many languages. While some levels are standard, not all tools expose the same levels and not all tools have all of the levels I've come to want.

|Level|Meaning|Alert|Enabled in Production|
|---|---|---|---|
|trace|Emit practically every variable in scope or "got here" type messages|Never|Only in madness|
|debug|Emit critical variables or function entry/return|Never|When unable to reproduce behavior in lower environments|
|info|Critical section entry/exit, expensive section input parameter or return inspection|No|Yes for you code, No for dependencies|
|warning|Recoverable, accounted-for problems that could be expensive en masse|Yes, when exceeding a frequency threshold, a human should intervene at their convenience|Yes, except to silence an alert when it's been triaged and cannot be immediately fixed|
|error|Unaccounted-for problems or critical dependency failures, but not grave enough to halt|Yes, a human should intervene ASAP|Of course|
|fatal OR critical|Unaccounted-for, unexpected failures that must stop the process emitted moments before exit|Absolutely, a human must intervene before the process can restart|Absolutely|

I've generally colored them with ANSI colors in log output like this:

* fatal/critical: ⚫🟥 black text on red background
* error: 🔴⬛ red text on black background
* warning: 🟡 yellow or gold text on a transparent background
* info: 🔵 blue text on a transparent background
* debug: 🟢 green text on a transparent background
* trace: 🟠 orange text on a transparent background

These colors work for my non-colorblind eyes. There are color schemes that are probably better to account for those for whom my colors aren't differentiable, so think of them and comment if you have one you like.

I'm doing mostly data pipelines for the last few years but even in my web service days, these were the levels we wanted and rules we followed. One team even looked into [aspect-oriented programming](https://en.wikipedia.org/wiki/Aspect-oriented_programming) in order to get the level of granularity we wanted for trace logging once.

_An earlier version was originally posted [here](https://www.reddit.com/r/programming/comments/106c2px/logging_practices_i_follow/j3hyx4w/)._
Starting... now
Tags: beginners
Published: 2023-01-08 20:05:00

Well, it didn't take long to fall of the horse. Yesterday I put off my coding obligation until evening, which is when there was a rare heavy dose of family drama. 

I had trouble concentrating, so I just didn't execute my daily plan. 

In the past when I break a streak I've been embarrassed. That embarrassment was its own obstacle to getting back on track. Part of getting back up is admitting that I fell in the first place. 

Well, I'm not letting something silly like that keep me down. I'm back
Mastering API Testing and Exploring the Power of Postman: A Comprehensive Guide
Published: 2023-01-08 19:55:08

## Efficient API Testing with Postman

Testing APIs with Postman is a crucial step in the development process. It allows you to ensure that your APIs are functioning correctly and returning the expected results.

One of the key features of Postman is the ability to create collections of API requests. These collections can be organized into folders and subfolders, making it easy to group and organize your API tests.

One way to use Postman for API testing is to create a collection of test cases. For each test case, you can specify the API endpoint, the request method (e.g. GET, POST, PUT, DELETE), and any necessary request parameters or headers. You can then use Postman's built-in assertions to verify that the API response meets your expectations.

Another useful feature of Postman is the ability to create environments. This allows you to define a set of variables that can be used across multiple requests in a collection. This is particularly useful if you need to test your API with different sets of data, such as different users or different input values.

In addition to testing individual API endpoints, Postman also provides tools for testing the overall performance of your API. You can use the built-in runner to send multiple requests concurrently, helping you to identify bottlenecks and optimize the performance of your API.

Overall, Postman is a powerful tool for testing APIs, with a range of features that make it easy to set up, run, and analyze your API tests. Whether you're working on a small API or a large, complex system, Postman can help you ensure that your API is performing at its best.


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

---

To use Postman for API testing, you can follow these steps:

1. Install Postman on your computer.

2. Create a new request in Postman. You can choose from various request methods such as GET, POST, PUT, DELETE, etc. depending on the purpose of your request.

3. Set the request URL to the API endpoint that you want to test.

4. Add any necessary headers, query parameters, or body data to the request.

5. Send the request and view the response.

6. Examine the response to see if it meets your expectations. You can use the built-in testing and validation features in Postman to automate this process.

![Postman UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxoew10r3b3tqhkea6my.gif)

---
Need Help With An Example of Clean, Elegant code VS Bad, Messy Code
Tags: programming, beginners, discuss, agile
Published: 2023-01-08 19:50:07

Evening everyone,

I currently teach a programming class and am teaching them from Scratch, my current batch of students are all exceptionally clever but end up doing a huge massive chunk of code for something that could really only take a handful of lines of code.

When I sat with them and talked about how you should think about how clean, elegant code is far more impressive than huge chunks of code that’s all over the place - it seemed to fall on deaf ears. I think they’re currently thinking the more code they have on the screen the more epic their program is.

What I wanted to bring them in their next class is an example of code (hopefully for the same problem) showing a really messy and bad piece of code, and also the clean, elegant solution to show the point I am trying to make.

Does any one have any examples they could point me in the direction of? It can be a really basic problem and solution, I just want to show how say, sure you could write 200 lines of code to do one thing, but a bit of thought could lead to say 25-50 lines doing the same thing, far more efficiently and cleaner.

Thanks in advance!
Composables with Nuxt 3
Tags: webdev, javascript, beginners, programming
Published: 2023-01-08 19:46:30

{% embed https://www.youtube.com/watch?v=cWX4b2qD6sg %}

Composables in Vue 3 and Nuxt 3 are a way to create reusable, modular pieces of code that can be easily composed together to create complex functionality. They are similar to components in Vue 2, but have a few key differences that make them more powerful and easier to use.

One major difference between composables and components is that composables are fully reactive, meaning that they can automatically update themselves whenever the data they depend on changes. This makes it much easier to build complex, reactive applications, as you don't have to worry about manually managing state or writing boilerplate code to handle updates.

Another advantage of composables is that they are much easier to test than traditional components. Because they are just plain JavaScript functions, you can easily unit test them without having to mount them to the DOM or simulate user interactions. This makes it easier to write high-quality, reliable code that is less prone to bugs and errors.

In conclusion, composables are a powerful new feature in Vue 3 and Nuxt 3 that make it easier to build complex, reactive applications. They are fully reactive, easy to test, and can be easily composed together to create complex functionality. Whether you are a seasoned Vue developer or new to the framework, composables are definitely worth checking out.

Guillaume
GEEE Nai
Published: 2023-01-08 19:21:40

GEE Nairobi is a unit in GDG Nairobi focusing in using GEE to build sustainable products for climate change. It consists of a team of innovative change-makers learning and developing environmentally suitable products collaboratively. They leverage mapping tools and technology to make a significant contribution to climate change and environmental sustainability. The community is actively learning, and collaborating with various industry experts like developers, climate scientists, industry experts, and local communities to spur impact at a wider scale. Our openness to collaboration solidifies our mission to create a more sustainable future for our planet and its people using Google Technologies.
We achieve our mission by organizing and participating in various events;
Speaker sessions provide a knowledge sharing moment from experts discussing their experiences with the community. 
Our participation in GEE summits presents an opportunity to hear the latest updates about mapping technologies and learn how other experts in the community are using Google Earth Engine and other Mapping tools for impact.
I'm back!
Tags: devjournal
Published: 2023-01-08 19:18:44

Sorry for leaving without saying anything. I started university again, and was a bit overwhelmed with the amount of work I had to do. I thought I could continue writing while going to school, but I have grossly overestimated my abilities. As work started piling up, I found myself focusing more on schoolwork than writing.

After the term ended, I had a chance to reflect about the past four months of school. What are my priorities? What are my goals? Why did I even start writing? Hours turned into days, and days turned into weeks. I realized that I must keep writing, because this gives me a sense of purpose and mission. I want to become a positive influence in the developer community, no matter how big or small I get. I genuinely enjoy helping others out, and I have helped many of my university friends with homework and projects. It's a commitment for sure, but I am willing to set aside time to develop my personal brand and provide valuable help that can make someone's day. I felt a sense of void when I ghosted away from this platform and the developer community. I want to keep helping new developers learn, and I want to get feedback from more advanced developers so that I can improve my craft.

The blog has mostly been exclusive to the Go programming language, but I decided to open up the range of topics. I still love Go, and it is still my bread and butter language, but I think to help many new developers, writing about other topics such as C++ or Python would be very helpful as well.

If there are any topics that you'd want me to write about, please comment below!

Thank you so much for your patience.

Jacob
Day 2: The 3 cloud areas I'm learning right now
Tags: cloud, agile
Published: 2023-01-08 19:14:18

There are so many areas of cloud computing to understand that you'll never be done.

At the moment, these are the three cloud computing topics that I am studying:

## Topic #1: How do you create a cloud architecture?

In my current projects, I'm working towards a career as a cloud architect, which I'm interested in.

I'm both curious and fascinated by the various considerations, constraints, and opportunities that each architecture necessitates/provides. It feels more like art because no two pieces of architecture are identical.

Over the following year, I plan to learn more about architecture and be able to better help with the development of customized architectures and problem-solving.

## Topic #2: How to use Infrastructure as code and DevOps to automate everything?

Last year, I worked on a project that entirely automated its infrastructure using DevOps pipelines and infrastructure as code (IaC).

I was fascinated by this since, while I had used Terraform previously, I had never encountered such automation. This can make everyone's lives easier because it saves a lot of time. I'm now learning to use Terraform and Docker to automate environments and infrastructure.

In my upcoming projects, I intend to use more automation through IaC and pipelines to make life easier for everyone involved. This makes me really excited!

## Topic #3: How to introduce agile to companies?

Cloud computing and organizational agility go hand in hand.

The cloud enables you to accelerate development, shorten development cycles, and cut development costs. As a result, cloud computing is a primary target for implementing agile ideas and processes. Using agile is a logical step, especially in the fast-moving modern world of technology.

I want to obtain an agile certification and talk with organizations about their reasons for hesitating to adopt agile to understand how to adopt it in businesses. This allows me to understand them better and assist them in implementing these new technologies.

---

It would be great to connect with other people who are interested in these same topics—so if any of the above resonates with you, feel free to reach out!
I Failed the AWS Solution Architect Associate Exam...
Tags: aws, failed, cloud, roadtodevops
Published: 2023-01-08 19:06:06


I recently took the AWS Solution Architect Associate exam and, unfortunately, I failed. I was devastated at first, but upon reflection, I realized that there were a few key mistakes that I made leading up to the exam that contributed to my failure. Here are the top three reasons why I failed, and what I learned from each experience.

I didn't spend enough time studying.
I'll be the first to admit that I didn't put in as much study time as I should have for this exam. I had a busy schedule leading up to the exam, and I allowed myself to get caught up in other priorities. I thought that my previous experience with AWS would be enough to carry me through, but I quickly learned that this was not the case.

Lesson learned: When it comes to technical exams, it's important to set aside dedicated study time and stick to a study schedule. Don't rely on your previous experience alone; you need to put in the time to review the material and practice the skills that will be tested on the exam.

I didn't focus on the right areas.
As I was studying for the exam, I found myself getting bogged down in the details of certain services and not paying enough attention to the big picture. I was so focused on memorizing all of the details of a particular service that I lost sight of how that service fit into the overall AWS ecosystem.

Lesson learned: It's important to understand the specific features and capabilities of each AWS service, but it's equally important to understand how those services work together to solve real-world problems. Make sure to study both the individual services and the broader concepts that tie them together.

I didn't practice enough.
In addition to not studying enough, I also didn't practice enough. I spent a lot of time reading through the documentation and going through tutorials, but I didn't actually get my hands dirty and try things out on my own. As a result, I wasn't as comfortable with the AWS console and the various services as I should have been.

Lesson learned: Practice makes perfect. It's one thing to read about a service or a feature, but it's another thing entirely to try it out for yourself. Make sure to get hands-on experience with the various AWS services before taking the exam.

In conclusion, my failure on the AWS Solution Architect Associate exam was a result of not studying enough, not focusing on the right areas, and not practicing enough. I learned a lot from this experience and I plan to take what I've learned and apply it to my future studies. If you're planning on taking this exam, I hope that my mistakes can help you avoid making the same ones. Good luck!
7 🔥 programming repos you'll wish you knew sooner 👩‍💻
Tags: github, webdev, beginners, programming
Published: 2023-01-08 18:42:43

GitHub is an absolute goldmine of quality learning resources.

Here is the list of the best 7 repos to learn.


## Coding Interview University


- Complete computer science study plan to become a software engineer

- Multi-month study plan, organized well



## Web Dev For Beginners by Microsoft 



- 24 Lessons, 12 Weeks, WebDev course

- Created by devs at Microsoft



## Developer Roadmap


- 22 interactive software development roadmaps

- Incredibly helpful resource for pathway guidance



## Free For Dev 


- list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops

- Free tier plan details for an endless list of DevOps services



## Realworld

 
- See how the exact same website Medium.com clone is built using different frontends and backends.

- Helpful for understanding other technologies in depth



## Tech Interview Handbook


- Curated coding interview preparation materials for busy software engineers

- Practice questions, interviewing techniques, and more




## Free Programming Books


- Free learning resources In many languages

- Good UX, organized well


Happy learning 


🎥[Repos links:](https://youtu.be/6y8tCoaypg0)

###Bonus:

#### 15 Free Harvard Courses🎓📣🔥🎉

🎥[Courses links:](https://www.youtube.com/watch?v=mdlS34KDlCk&t=2s)

#### Python top free courses from Coursera🐍💯🚀

🎥[Courses links:](https://youtu.be/2VRXU2H4q0c)


### Connect with Me 😊

#### 🔗 Links

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mahmoud-el-kariouny-822719149/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Mahmoud42275)
Serve a static app with nginx
Tags: nginx, react, ubuntu, hosting
Published: 2023-01-08 18:32:30

# What is Nginx?

NGINX is open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more. 

It started out as a web server designed for maximum performance and stability. In addition to its HTTP server capabilities, NGINX can also function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load balancer for HTTP, TCP, and UDP servers.

In this article I'm going to show you how you can serve a static app like react using nginx.

Let's get started 🚀



## 1. Install Nginx (Ubuntu)

```
sudo apt update
sudo apt install nginx
```

## 2. Deploy your react app

Clone your react app

```
git clone https://github.com/<your username>/<your react app repo>.git
```

Install packages

```
sudo yarn install
```

Build the app

```
sudo yarn build
```


## 3. Create an Nginx configuration file

```
cd /etc/nginx/sites-available
```

```
sudo nano react.conf
```

Paste this codes

```

server {
    listen 80;
    server_name your_IP_or_Domain;
    root /home/username/path_to_your_react_app/build;
    index index.html index.htm;
    location / {
        try_files $uri/index.html=404;
}
```

Create an nginx virtual host file.
we are going to do this by creating symlink to our config file for nginx to recognize it

```
sudo ln -s /etc/nginx/sites-available/react.conf  /etc/nginx/sites-enabled
```

Now that we are done with our configurations, let's test it.
To test if the configurations have no errors we run the command below.

```
sudo nginx -t
```

if successful, you should see this in your terminal 🦾

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


let's test our static app.

_this restart our nginx service_

```
sudo service nginx restart
```

Then open your browser and visit your_ip or domain as used in 
our config file.

You should see the app running  ✨

## Some helpful resources

- [Installing nginx on ubuntu](https://ubuntu.com/tutorials/install-and-configure-nginx#2-installing-nginx)

- [About nginx
](https://www.nginx.com/resources/glossary/nginx)



can check the article [here](https://amanieric.com/blog/serve-a-static-app-with-nginx) as well
Youtube Two Click MP3 Downloader - Termux!
Tags: termux, android, bash, python
Published: 2023-01-08 18:11:04

Hello guys, I wanna share my bash script with you. The script does the required installation for two click mp3 dowloader.

With this installation you will be able to download mp3 files straight from youtube!

It takes just two clicks. click share button(1) and select termux(2) and see the magic it will be saved on your Music folder in your root directory.

You can check it out:

[**https://github.com/mustafazaimoglu/Termux-TwoClickMusicDownloader**](https://github.com/mustafazaimoglu/Termux-TwoClickMusicDownloader)

it uses python, yt-dlp and ffmpeg.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9etbv3yr60oa4ikjgfr.jpg)
How to add window alert on screen or Sweet Alert ?
Published: 2023-01-08 18:01:51

**Use Library**
- Sweet Alert 

```
https://sweetalert.js.org/guides/
```
- Add the CDN link 
`
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
`

## Complete Code

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sweer Alert</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
  </head>
  <body>
    <center>
      <h1>Sweet Alert</h1>
      <p>
        Link :
        <a href="https://sweetalert.js.org/guides/" target="_blank">
          Sweet Alert Website</a
        >
      </p>
      <button onclick="alertFunction()">Alert Function</button>
    </center>
    <script>
      alertFunction = () => {
        swal("Sweet Alert", "on Click function ", "success", {
          button: "OK",
        });
      };
    </script>
  </body>
</html>

```

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