teleren/devto huggingface dataset:
Choosing Your Technology Stack: Why Front-End Development May be the Best Option
Published: 2023-03-19 05:36:40

✨ [**Watch on YouTube**](https://youtu.be/xpmFALAnP8s)

I have six years of professional experience as an engineer. While most of the time I've been a front-end developer, my first two jobs were full-stack positions. Coming from these two types of experience, I believe focusing on the front end would be the most reliable career trajectory for most of us. However, with lots of knowledge and experience, you can succeed as a generalist too. By either being a product engineer and getting significant equity early on or by building your projects and being able to cover basic back-end needs.

If I had to start my engineering career over, I would pick front-end rather than full-stack or back-end. It's hard to be good at both disciplines as a beginner or to make an effective resume with back-end projects without UI. It is easier to get going with the front end since it's more interactive, and you will get more encouragement seeing your work alive in the browser. Also, there are more open front-end positions, so you might have an easier time getting your first job as a UI engineer.

From my observations, in the current stage of technology, a full-stack developer would spend the most time doing front-end work. APIs usually don't change as often as the UI. Server-side logic can stay the same for a long time, while the interface constantly evolves due to various reasons, such as feedback, analytics, or new purely UI features. While both disciplines experienced lots of technological progress, I've noticed that when building a new feature, it takes less time to add an endpoint than to make a UI according to a Figma design.

If you want to pursue a full-stack route, I recommend getting very good with TypeScript since you will use it for both ends. While there are other languages for server-side tasks, having TypeScript across the stack will be more comfortable for both a team and a solo operator. People expect better and better interfaces, so having profound CSS knowledge will make you more effective at tackling UI tasks. For libraries or frameworks, the most reliable choice is to stick to React and continue with NextJS, which could be a full-stack tool considering API routes and Vercel.

To cover basic dev-ops needs, you can pick the combination of AWS and Terraform for hosting and managing your server-side infrastructure. Take a closer look at AWS Lambda for running APIs, S3 for storage, and DynamoDB as a no-SQL database. Terraform will allow you to control AWS resources by writing code, so you don't have to click through the web interface and later can recreate a setup for a new app by reusing your existing configs. Libraries for making NodeJS API don't have much difference. I found Apollo Server handy for making GraphQL API, and Prisma comfortable for SQL databases.

To become a faster software developer, check out my productivity app at [increaser.org](http://increaser.org/).
Days6_What the elif this is?
Published: 2023-03-19 05:26:36

"elif" is short for "else if" in programming languages such as Python, C, and others. It is a control structure used to evaluate multiple conditions simultaneously. If the first condition is not met, then the next condition will be evaluated, and so on, until one condition is met or the final "else" condition is executed if no previous conditions are met. For example, in Python:
```
#Days_4 "What the elif this is?"
#
#17 MARCH 2023

def exercies_1():
  print("SECURE LOGIN")
  username = input("Username >")
  password = input("Password >")
  if username == "Mark" and password =="123456":
    print("welcome Mark!")
  elif username =="Suzanne" and password =="123456":
    print("Hey there Suzanne")
  else:
    print("Go away!")

def exercies_2():
  season = input("What is Your Favorite season?")
  if season == "spring":
    print("Ah! The birds are chirping and flowers blooming")
  elif season == "summer":
    print("The Leaves are Changing and the air is crisp. Enjoy!")
  elif season == "winter":
    print("Stay warm bye the fire and watch the snow fall")
  else:
    print("I don't know that season.plase try again")
def exercies_3():
  Name = input("Enter Your Name: ")
  Password = input("Enter Your Password: ")
  if Name == "Ari" and Password =="12":
    print("Hello",Name,"How Are You?")
  elif Name == "Wira" and Password == "123":
    print("Holla",Name,"How are You?!...")
  elif Name == "Saputra" and Password == "123":
    print("heii Mr", Name,"How are You?!...")
  else:
    print(Name,"Name Or Password is Worng!...")
  
def call():
  exercies_1()
  exercies_2()
  exercies_3()

call()
```
Complete list of Markdown syntax
Published: 2023-03-19 05:20:32

Markdown is a lightweight markup language that allows users to easily format text for web content, without needing to know complex HTML tags or coding. 

Created by **John Gruber** in 2004, Markdown has become a popular choice among bloggers, writers, and developers for creating clean, easy-to-read content.



**Headers**: Use one or more hash symbols (#) at the beginning of a line to create headers of different sizes.

**Emphasis**: Surround text with asterisks (*) or underscores (_) to create italicized or bold text.

**Links**: Surround the link text with square brackets [] and the link URL with parentheses ().

**Images**: Similar to links, but with an exclamation mark (!) at the beginning.

**Blockquotes**: Use a greater-than symbol (>) at the beginning of a line to create a blockquote.

**Lists**: Use hyphens (-), plus signs (+), or asterisks (*) at the beginning of a line to create unordered lists, or use numbers to create ordered lists.

**Code blocks**: Indent lines by four spaces or surround the code with three backticks `.

**Inline code**: Surround code with a single backtick (`).

**Task lists**: Use hyphens (-), followed by brackets [] containing an x for a completed task or a space for an incomplete task, followed by a space and the task description.

**Strikethrough**: Surround text with two tilde symbols (~).

**Autolinks**: Wrap URLs or email addresses in angle brackets (< >).

**Escaping characters**: Use a backslash () in front of a character to escape it and include it as regular text.
CSS Border-Radius Tutorial
Tags: webdev, beginners, html, css
Published: 2023-03-19 05:10:43

**Code**

``` html
<!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>Box - Radius</title>

    <style>
    #box {
      border: 2px solid blue;
      width: 400px;
      /* padding: 25px; */
      /* border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px; */

      /* border-radius: 30px 100px; */

      border-radius: 100%;
    }

    #circle {
      border: 2px solid brown;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-color: blueviolet;
      outline: 3px solid blue;
      outline-offset: 8px;
    }
  </style>
  </head>

  <body>
    <h1> Yahoo Baba Box Radius </h1>

    <div id="box">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eaque
      iusto soluta esse quis omnis? Debitis a fugit dicta natus.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eaque
      iusto soluta esse quis omnis? Debitis a fugit dicta natus.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eaque
      iusto soluta esse quis omnis? Debitis a fugit dicta natus.
    </div>

    <div id="circle">

    </div>
  </body>

  <script>
  let circle = document.getElementById("circle");
  circle.contentEditable = true;
</script>
</html>
```

**Output**
![Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9dsf8c169pml69bmw0v.png)

Thank You.
You can follow us on:
[Youtube ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)
CSS Overflow Tutorial
Tags: html, css, webdev, beginners
Published: 2023-03-19 05:07:36

**Code**

``` html
<!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> Overflow </title>

  <style>
    #box {
      border: 1px solid red;
      width: 500px;
      height: 500px;
      /* overflow: hidden; */
      overflow: auto;
    }

    img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>

  <h1> Yahoo Baba CSS Overflow </h1>

  <div id="box">

    <img src="/11/aksh.jpg" alt="">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae, dicta! Consectetur laudantium rerum quod nam, ullam adipisci fuga vero incidunt repudiandae ratione totam officiis molestias fugiat minima illo voluptatem itaque voluptate accusamus sequi id, recusandae deserunt. Asperiores aperiam aut iusto1.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae, dicta! Consectetur laudantium rerum quod nam, ullam adipisci fuga vero incidunt repudiandae ratione totam officiis molestias fugiat minima illo voluptatem itaque voluptate accusamus sequi id, recusandae deserunt. Asperiores aperiam aut iusto2.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae, dicta! Consectetur laudantium rerum quod nam, ullam adipisci fuga vero incidunt repudiandae ratione totam officiis molestias fugiat minima illo voluptatem itaque voluptate accusamus sequi id, recusandae deserunt. Asperiores aperiam aut iusto3.
  </div>
</body>

</html>
```

**Output**
![Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs1unswpio3hp8uysz9d.png)

Thank You.
You can follow us on:
[Youtube ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)
CSS Box-Sizing Tutorial
Tags: webdev, beginners, html, css
Published: 2023-03-19 05:05:03

**Code**

``` html
<!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>Box - Sizing </title>

  <style>
    #box {
      border: 10px solid red;
      width: 500px;
      padding: 350px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>

  <h1> Yahoo Baba Box-Sizing</h1>

  <div id="box">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!ld ll
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!ld ll
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!ld ll
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!ld ll
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!
  </div>
</body>

</html>
```

**Output**
![Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dljxp2pqx3vlza3wwyw2.png)

Thank You.
You can follow us on:
[Youtube ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)
tips for improving web development skills
Published: 2023-03-19 04:56:47

As a web developer, it's important to keep your skills sharp and up-to-date. With new technologies and trends emerging all the time, it can be challenging to stay on top of everything. However, by consistently working to improve your skills, you can become a more effective and efficient developer. Here are some tips for improving your web development skills:

**Learn from others**

One of the best ways to improve your skills is to learn from other developers. Whether it's through online courses, mentorship, or attending conferences, there are many opportunities to learn from experienced developers in the industry. By studying their techniques and approaches, you can gain new insights and techniques that can help you improve your own work.

**Practice, practice, practice**


Like any skill, web development requires practice to master. Try working on personal projects or contributing to open-source projects to gain more experience. This will give you an opportunity to apply your skills and experiment with new technologies without the pressure of a client project.

**Stay up-to-date with the latest technologies**


Web development is constantly evolving, with new technologies and tools emerging all the time. Staying up-to-date with the latest trends and best practices is essential for improving your skills. Subscribe to newsletters, read industry blogs, and follow thought leaders on social media to stay informed about the latest developments in web development.

**Get feedback**


Feedback is essential for improving your skills. Whether it's from clients, colleagues, or online communities, getting feedback on your work can help you identify areas for improvement and refine your techniques. Be open to constructive criticism and use it as an opportunity to grow as a developer.

**Collaborate with others**


Collaboration is a great way to improve your skills as a web developer. By working with other developers, you can learn new techniques, gain new insights, and improve your communication and collaboration skills. Look for opportunities to collaborate on projects, participate in online communities, or attend meetups to connect with other developers.
Secret handling in modern cloud-scale enterprise applications
Tags: security, cicd, secrets, infosec
Published: 2023-03-19 03:45:25

Can the experts here please help me understand how secrets (certs, keys, etc) are managed and monitored in large enterprises? 

Particularly interested in the scenario when there are multiple application teams across several business units that use different vaults to store secrets.

Thanks a lot!

https://www.surveymonkey.com/r/SKZYLK6
Demystifying DevOps: A Beginner's Guide to Achieving Continuous Delivery
Tags: devops, automation, continuousdelivery, agile
Published: 2023-03-19 03:16:43

Welcome to the world of DevOps! DevOps has become an essential part of modern software development practices. It is the art of combining Development and Operations to achieve seamless delivery of software products. In this article, we will discuss what DevOps is, its benefits, and how it works.

**What is DevOps?**
DevOps is a cultural and technical movement that aims to bring Development and Operations teams closer to achieve a shared goal: delivering high-quality software quickly and reliably. It involves breaking down silos between different teams, improving collaboration, and adopting a continuous delivery approach.

**Benefits of DevOps:**

- Faster delivery: With DevOps, software can be developed and delivered faster, without compromising quality.
- Improved quality: DevOps practices ensure that the software is tested and validated continuously, resulting in higher quality products.
- Better collaboration: DevOps fosters better communication and collaboration between teams, reducing errors and improving overall efficiency.
- Reduced costs: DevOps practices help teams identify and fix issues earlier in the development cycle, reducing the cost of fixing them later.

**How does DevOps work?**
DevOps is a continuous process that involves several stages, including planning, development, testing, deployment, and monitoring. Here's a brief overview of how it works:

1. Planning: The Development and Operations teams work together to plan the features and requirements of the software product.
2. Development: The Development team builds and tests the software product using agile methodologies and version control systems.
3. Testing: The software is tested continuously, using automated testing tools, to ensure its quality and performance.
4. Deployment: The software is deployed to the production environment, using automated deployment tools, to ensure that it is delivered quickly and reliably.
5. Monitoring: The Operations team monitors the software in the production environment, using automated monitoring tools, to identify and fix issues quickly.

Practical Examples:

- Implementing CI/CD pipelines to automate the entire software delivery process, from code changes to deployment.
- Using containerization technologies, like Docker, to package and deploy software in a consistent and reliable manner.
- Adopting Infrastructure as Code (IaC) practices to manage and automate infrastructure deployments.

DevOps is not just a buzzword; it's a mindset that has revolutionized the way software is developed and delivered. If you're new to DevOps, I encourage you to explore its benefits and practices further. Start by implementing simple automation tools, like CI/CD pipelines, and gradually work your way up to more complex practices. Let's embrace the DevOps culture and build better software products together!
GitHub CLI: Your Secret Weapon for Slaying Code Reviews
Tags: github, git, programming, tutorial
Published: 2023-03-19 02:40:03

![a screenshot for github cli](https://miro.medium.com/v2/resize:fit:700/1*j_Y8Rf0rZd39jK2JvNs5Iw.jpeg)

Hey there, fellow coders! You know what’s worse than getting feedback on your code? Having to switch between multiple tabs and tools just to make a pull request. It’s a real pain, right? But fear not, my friends! I’m here to introduce you to **GitHub CLI** — the fun and easy way to improve your code quality in just five minutes.

## Create pull requests with ease:

Creating pull requests can be a pain, but with GitHub CLI, you can create them from the comfort of your command line. No more switching between browser tabs and copy-pasting information! You can create a pull request with just a few commands, like this:

`gh pr create --title "Added new feature" --body "This feature will improve user experience" --assignee @joh`

## Request code reviews:

Requesting code reviews is essential to ensure that your code is up to par. With GitHub CLI, you can request reviews from your peers without leaving your command line. You can even specify a due date for the review, so everyone knows when to get it done. Here’s an example command:

`gh pr request-review --reviewer @jane --due-date 2023-03-21`

## Check pull request status:

You don’t want to be the person who constantly checks the pull request page to see if anything has changed. GitHub CLI makes it easy to check the status of your pull requests directly from your command line. Here’s how you can do it:

`gh pr list --state open`

This will list all of your open pull requests, along with some essential information like the title, author, and state.

## Respond to code review comments:

Code review comments are essential for improving your code quality, but they can be overwhelming to keep track of. GitHub CLI allows you to respond to code review comments directly from your command line. Here’s how you can do it:

`gh pr review 123 --comment "Thanks for the suggestion, I'll make that change"``

This command allows you to respond to a specific comment on a pull request.

## Merge pull requests:

When your code has been reviewed and approved, it’s time to merge it into the main branch. GitHub CLI allows you to do this directly from your command line, without ever leaving your cozy terminal. Here’s how you can do it:

`gh pr merge 123`

This command merges the pull request with ID 123 into the main branch.

## In the end

In a nutshell, GitHub CLI is a lifesaver for developers who want to streamline their code review process. It’s like having a superpower that allows you to create pull requests, request code reviews, check pull request status, respond to code review comments, and merge pull requests — all from the comfort of your command line. So next time you’re about to submit a pull request, remember to channel your inner superhero and use GitHub CLI to save time, improve your code quality, and have fun while doing it!

- [GitHub CLI | Take GitHub to the command line](https://cli.github.com/)
Integration with ChatGPT API
Tags: chatgpt, api, node
Published: 2023-03-19 00:37:56

---
title: Integration with ChatGPT API
published: true
tags: ['chatgpt', 'api', 'node']
canonical_url: https://sevic.dev/notes/chatgpt-api-nodejs/
---

ChatGPT is a large language model (LLM) that understands and processes human prompts to produce helpful responses. OpenAI provides an API to interact with the ChatGPT model (`gpt-3.5-turbo`).

### Prerequisites

- OpenAI account
- Generated API key
- Enabled billing

### Integration

Below is an example of interacting with ChatGPT API based on a given prompt.

```js
const handlePrompt = async (prompt) => {
  const response = await axios.post(
    'https://api.openai.com/v1/chat/completions',
    {
      model: 'gpt-3.5-turbo',
      messages: [
        {
          role: 'user',
          content: prompt,
        },
      ],
    },
    {
      headers: {
        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
      },
    }
  );
  return response?.data?.choices?.[0]?.message?.content;
};
```