teleren/devto huggingface dataset:
Azure DevOps Pipelines e Release - Build And Push to ECR With Deploy to ECS Fargate PT-1
Tags: azure, devops, aws, docker
Published: 2024-01-19 00:45:33

## Meu Primeiro Post!

Para começar, escolhi um tópico com pouca documentação.

## Pré Requisitos:
- Extensão instalada no Azure DevOps: [AWS Toolkit for Azure DevOps](https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-vsts-tools)
- AWS ECR já criado
- Credencial programática no AWS IAM criada

Em Pipelines, vou exemplificar no modo clássico e também com o `azure-pipelines.yml`.

### Modo Clássico

1.**Build Image:** utilizará o `docker@2`

![Primeira Task Docker Build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zk3qp95zincidkxpp6ab.png)

2.**Push to ECR:** utilizará a task `AmazonWebServices.aws-vsts-tools.ECRPushImage.ECRPushImage@1`

![Segunda Task ECR Push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1w8p6ismm2zy5dd76yp.png)

### Modo YAML utilizando `azure-pipelines.yml`

```
trigger:
  branches:
    include:
    - refs/heads/master
name: $(date:yyyyMMdd)$(rev:.r)
jobs:
- job: Job_1
  displayName: BuildAndPush
  pool:
    vmImage: ubuntu-latest
  steps:
  - checkout: self
    fetchDepth: 1
  - task: Docker@2
    displayName: build
    inputs:
      repository: $(DOCKER_REPOSITORY_NAME)
      command: build
      Dockerfile: Dockerfile
      tags: $(Build.BuildNumber)
  - task: AmazonWebServices.aws-vsts-tools.ECRPushImage.ECRPushImage@1
    displayName: 'Push Image: '
    inputs:
      awsCredentials: 
      regionName: us-east-1
      sourceImageName: $(DOCKER_REPOSITORY_NAME)
      sourceImageTag: $(Build.BuildNumber)
      repositoryName: $(DOCKER_REPOSITORY_NAME)
      pushTag: $(Build.BuildNumber)
```

Obs. Lembre-se de armazenar as variaveis, na aba `Variables`


### Criar Service Connection AWS

Após instalar a extensão, clique em `Project Settings` (ícone no canto inferior esquerdo) e, em seguida, em `Service Connections`. No botão New Service Connection, selecione "AWS" e insira o **Access key ID** e a **Secret access key**. Defina um nome em Service Connection name, principalmente se usar mais de uma conta AWS, e clique em **Save**.

Para não alongar demais este post, criarei a [Parte 2 - Deploy da imagem no AWS ECS Fargate](https://dev.to/lucasbehrooz/azure-devops-pipelines-e-release-build-and-push-to-ecr-with-deploy-to-ecs-fargate-pt-2-26lb).
Getting Started with React Hooks
Tags: react, staticwebapps, javascript, webdev
Published: 2024-01-19 00:31:31

## Introduction

React Hooks is a popular JavaScript library used by developers to create interactive and dynamic user interfaces. Introduced in 2018, Hooks provide a new way of writing components in React without the need for classes. This revolutionary concept has simplified the development process and has gained significant popularity in the coding community. This article will discuss the basics of getting started with React Hooks and its advantages and disadvantages.

## Advantages

1. **Simplified Syntax**: With React Hooks, developers can write functional components instead of class components, making the code more concise and readable.
2. **Improved Code Reusability**: Hooks allow developers to reuse stateful logic across components, making it easier to manage and maintain code.
3. **Easy to Learn**: React Hooks have a short learning curve, allowing developers to quickly grasp the concept and implement it in their projects.

## Disadvantages

1. **Dependency on Community**: Since React Hooks are a relatively new concept, there is a limited amount of documentation and resources available compared to class components.
2. **Backwards Compatibility**: Hooks cannot be used in older versions of React, necessitating developers to update their applications.

## Features

1. **useState()**: Allows functional components to have state.
2. **useEffect()**: Helps to perform stateful logic and side effects.
3. **useContext()**: Gives access to the nearest ancestor context.

### Example: Using the useState Hook

```jsx
import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

This example demonstrates the basic usage of the **useState** hook to add state to a functional component, allowing it to track the number of times a button is clicked.

## Conclusion

React Hooks have transformed the way we write components in React, offering a more straightforward and efficient approach to coding. While it may have some limitations, it is constantly evolving, and with the support of a vast community, it is expected to become an essential part of the React ecosystem. With the advantages it offers, React Hooks are definitely worth exploring and implementing in your projects. So, if you haven't already, go ahead and get started with React Hooks to enhance your React development experience.
Next.js Codebase Analysis <> create-next-app <> Execute the local setup
Tags: webdev, opensource, javascript, nextjs
Published: 2024-01-19 00:23:37

You need to do read this prerequisite: [Next.js Codebase Analysis <> create-next-app <> Create a local folder](https://dev.to/ramunarasinga/nextjs-codebase-analysis-create-next-app-create-a-local-copy-1n59) before you continue with this next steps.

## Execute the local setup
When I copied a package into a new folder and executed the npm run build command. I ran into weird issues.

![pnpm install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycz3ql4wgrear8xd8kkp.jpeg)
1. Pnpm not found

I had to install pnpm.

2. Missing typescript

Not sure why I got this error but I was able to resolve it using [this link](https://github.com/vercel/ncc/issues/622)

![Missing typescript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r053348aos2zcgfn8u2e.jpeg)

3. Boss fight — TS2353: Object literal may only specify known properties, and ‘retries’ does not exist in type ‘Options’.

Any typescript error is a video game boss fight to me. You get the joke!

![TS error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx7fyscoe04r8skbczm2.jpeg)

I found few useful links listed below, but trying them did not magically fix the issue

1. https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/60193
2. https://stackoverflow.com/questions/64583681/object-literal-may-only-specify-known-properties-and-retries-does-not-exist-i

Let me know in the comments what you think about this issue.

But I ended up removing the retries altogether from the create-next-app.ts. Keep in mind Next.js has MIT License hence I made the bold move to make those changes and document them here in this article.

Once I removed the retries, the error was gone. I do not recommend doing this. There must be a good reason why the original authors have retries in place. I have removed it to understand the internal workings of create-next-app without spending a day or two just because I could not get retries options to be type safe.

You need to sometimes decide if the fix you are after is really worth it in the grand scheme of things.

This code ready for execution is available here

## Execution

Change create-next-app to create-my-app and then run npx create-my-app.

![create-my-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpeow7mfdw8lag9gloyk.jpeg)

Your playground is now ready for experiments.

## Conclusion
I had to remove retries because of typescript error, I do not know how to fix it yet, my goal is to understand how create-next-app works and I would not worry much about an option that is about retrying. End outcome over temporary setback.

I am building a platform that explains best practices used in open source by elite programmers. Join the waitlist and I will send you the link to the tutorials once they are ready.

If you have any questions, feel free to reach out to me at ramu.narasinga@gmail.com
How to Enhance Senior Collaboration?
Tags: discuss
Published: 2024-01-19 00:00:00

---
published_at : 2024-01-19 00:00 +0000
---
How can collaboration and team focus be best prioritized in senior software engineering roles? What steps can organizations take to ensure promotions align with these values?
Follow the DEVteam for more discussions and online camaraderie!
{% embed https://dev.to/devteam %}
Modules Status Update
Tags: puppet, community
Published: 2024-01-30 17:59:11

---
title: Modules Status Update
published: true
date: 2024-01-19 00:00:00 UTC
tags: puppet,community
canonical_url: https://puppetlabs.github.io/content-and-tooling-team/blog/updates/2024-01-19-modules-status-update/
---

## Happy Friday!

Wishing you a Happy Friday filled with laughter that echoes into the weekend! Embrace the joy of today and let the weekend vibes begin! Exciting things are brewing behind the scenes – stay tuned! We’re hard at work on some fantastic projects and can’t wait to share them with you soon. 🚀 #StayTuned

## Community Contributions

We’d like to thank the following people in the Puppet Community for their contributions over this past week:

- [`puppetlabs-kubernetes#666`](https://github.com/puppetlabs/puppetlabs-kubernetes/pull/666): “Update devcontainer format + Ruby vscode extension”, thanks to [jorhett](https://github.com/jorhett) and the following people who helped get it over the line ([deric](https://github.com/deric))

## New Module Releases

- [`puppetlabs-concat`](https://github.com/puppetlabs/puppetlabs-concat) (`9.0.2`)
DevX Status Update
Tags: puppet, community
Published: 2024-01-30 18:00:15

---
title: DevX Status Update
published: true
date: 2024-01-19 00:00:00 UTC
tags: puppet,community
canonical_url: https://puppetlabs.github.io/content-and-tooling-team/blog/updates/2024-01-19-devx-status-update/
---

## Cold Friday!

I don’t know how is it for you but over here, we have been freezing for a few days already! Waking up to a white frosty street is something I would enjoy a bit more in December rather than January. But oh well, at least its Friday, and with it comes our latest blogpost.

### Ghent

We finally got our engineers Gavin Didrichsen and David Swan sorted with plane tickets and appropriate accommodation as they prepare to attend the upcoming Ghent Config management camp. If, by any chance, any of you is attending the conference too, this will be a perfect opportunity to meet part of the team in person and share your opinionsand ideas with us. We hope to see you there!

### Rubocop

We have started work around our Rubocop versioning on tools. We are actively upgrading our tools to consume Rubocop 1.50 while addressing some minor forgotten cops. This should improve the general health state of our Tools while, hopefully, making life a little bit easier for anyone who wants contribute to them. For now, we only have one or two tools but you can expect more repositories to get the same treatment in the following week.
Tests can assert multiple things
Published: 2024-01-26 20:33:21

---
title: Tests can assert multiple things
published: true
date: 2024-01-19 00:00:00 UTC
tags: 
canonical_url: https://www.oliverdavies.uk/archive/2024/01/19/tests-can-assert-multiple-things
---

Similar to "a method should only have one return statement", I've seen similar advice when working with tests: "Tests should only have a single assertion".

I don't think this is true, and in my experience, you need multiple assertions to have a thorough test.

And, whilst similar assertions add some duplication, they can make the intent clearer and give better error messages.

Instead, I focus on one test case per test.

If I'm testing the following:

- A blog page exists.
- Only post nodes are visible.
- Only published posts are visible,
- Posts are returned in a specified order.

These will be split into separate tests - making it easier to read and maintain the code and have faster execution times by running only the tests I want with the minimum amount of code in each - regardless of how many assertions are in each.

 P.S. Are you still using Drupal 7 and don’t know what’s involved to upgrade to Drupal 10? [Book a Drupal 7 upgrade consultation call](https://www.oliverdavies.uk/call) or [an upgrade roadmap](https://www.oliverdavies.uk/drupal-upgrade).
Expo SDK 50 Release 🚀
Tags: react, reactnative, expo, universalapps
Published: 2024-01-18 23:38:27

Today we’re announcing the release of Expo SDK 50. 

SDK 50 is a very chunky and ambitious release that includes React Native 0.73. Thank you to all the contributors and to everyone who helped with beta testing.

Learn more in the [full article on the Expo Changelog](https://expo.dev/changelog).

And please join our [live stream on January 31st](https://www.youtube.com/live/cKFSVUo3AnI?si=RY5xZ4n6rmxgtNmH) at 10:30am PT for a walkthrough of what’s new.
(Part 3/N) Terraform: Create Image Resource
Published: 2024-01-18 23:33:16

In this podcast, Krish continues the Terraform series by bringing another resource under Terraform's management without using the import block. He demonstrates how to create and modify a Docker container image using Terraform. He also explores the process of destroying resources and discuss some limitations and considerations.

## Takeaways
- You can bring existing resources under Terraform's management without using the import block.
- Terraform allows you to modify the configuration of resources and apply the changes.
- Destroying resources in Terraform can sometimes result in errors, but they can usually be resolved.
- The next episode will focus on using Terraform with AWS and explore other cloud providers.

## Chapters
00:00 Introduction and Recap

06:12 Bringing a Resource Under Terraform's Management

15:24 Modifying Configuration and Destroying Resources

17:08 Summary and Next Steps

## Video
{% embed https://youtu.be/w1foAG-liSQ %}

## Transcript
https://products.snowpal.com/api/v1/file/23f18b61-c92e-424f-91de-0962a1f66fa3.pdf
Embracing JavaScript: A Tale of Love, Challenges, and Endless Creativity
Tags: javascript, react, database, programming
Published: 2024-01-18 23:32:26

I embarked on my coding journey in late November last year, diving headfirst into the world of programming. The language that became my gateway into this realm was JavaScript. Little did I know that JavaScript would become both the love of my life and my greatest challenge.

A Love Affair with Code.js
My journey began with the exploration of code.js—an aptly named library that opened my eyes to the endless possibilities of coding. With it came the discovery of other essential tools and frameworks like Express, Inquirer, and FileSystem (fs). These tools became my companions as I delved deeper into the intricate world of web development.

Exploring Web APIs and Mobile Applications
As my understanding of JavaScript grew, so did my curiosity. I ventured into the realm of Web API implementation, exploring how to seamlessly integrate external data into my applications. Mobile applications, with their unique set of challenges, became my next conquest.

At this point, I find myself with a half-baked app. It features the powerful Mapbox for mapping functionalities, a meticulously designed UI that could rival the most sophisticated interfaces, and cleverly crafted overlays on the map. However, it's not just about aesthetics. I am currently focused on polishing user interactions and fine-tuning the backend processes.

JSON: The Placeholder for Data
In the process, I've embraced JSON as a temporary placeholder for user data storage. It's serving its purpose well, allowing me to focus on refining the app's functionality without committing to a more permanent solution just yet.

The Joy of Learning
In conclusion, my journey with JavaScript has been nothing short of a rollercoaster—filled with highs of creative euphoria and lows of debugging despair. Despite the challenges, I'm having a blast. The joy of bringing ideas to life through code is unparalleled.

The Road Ahead
As I round out the edges of my JavaScript skills, I can't help but look ahead. The next language on my horizon is Java. It beckons as the logical next step in my coding odyssey.

In the grand tapestry of programming languages, each one offers a unique perspective and a fresh set of challenges. JavaScript, with its quirks and nuances, has been my first love, and it will always hold a special place in my heart.

As I eagerly anticipate the adventures that lie ahead, I'll forever cherish the memories of my early coding days—struggling with syntax, celebrating small victories, and falling in love with the magic of turning lines of code into tangible creations.

Here's to JavaScript—the love that keeps me up at night and the force that propels me forward in this incredible journey of becoming a coder.

Happy coding!

Charles Tiffany
Introducing Multiple Conversations 💬 & Keyboard Shortcuts — Griv
Tags: chatgpt, productivity, macos, ai
Published: 2024-01-18 23:28:03

> _Griv is a snappy ChatGPT client for your Mac. Invoke it with a hotkey and harness the power of AI within your workflows. Get it at https://grivhq.com_

You use LLMs such as ChatGPT 🤖 for various tasks throughout the day, and the context may differ significantly for each task. Therefore, you may need to initiate new conversations 💬 with ChatGPT frequently.

We understand that and to address it, we are excited 🥳 to announce that we are bringing support for multiple conversations to Griv. Additionally, we have added keyboard shortcuts ⌨️ to facilitate easy navigation for all the common actions within the product.

Following are comprehensive instructions 📝, complete with screenshots 📸, to understand how these new features work.

### 💬 Multiple Conversations

With this new version (v.2.2.0), you’ll be able to start more than one conversation in the product. Here are the steps to do it.

**Step 1:** If you’re not using Griv, download it 🛜 at https://grivhq.com. If you’re already using Griv, it will automatically download the latest version (within 24 hours if it hasn’t already done so).

**Step 2:** Hit the ‘Menu’ icon on the top left to open the sidebar.

> 💡_Pro tip, use the shortcut (⌘+\\) to open the sidebar_


![Menu Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kezb2o6lckm0vfoa9o4e.png)

**Step 3:** Hit the ‘New Chat’ button to start a 🆕 conversation.

> 💡_Pro tip, use the shortcut (⌘+N) to start a new conversation_

![New Chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz7xzwomlxeuoh5sfqkr.png)

**Step 4:** You’re all set 🎉. You have successfully started a new conversation!

### ⌨️ Built for your keyboard

Effortlessly breeze through your tasks with lightning-fast keyboard shortcuts ⚡️.

**Launch Griv:** ⌥+Space (Option+Space)

**Toggle the sidebar:** ⌘+\\ (Command+Backslash)

**Send Message:** ↵ (Enter)

**Create New Message:** ⌘+N (Cmd+N)

Ready to unleash your productivity? Download Griv at https://grivhq.com.

Contact support@starlabs.ai ✍ for any questions or feature requests.
TypeORM | Query Builder
Tags: typeorm, query, builder, database
Published: 2024-01-18 23:09:42

** Hello, Everyone! In this post I am going to discuss an important concept about typeOrm ** 

Suppose we have two entities like below

**1. User Entity:**

Assuming a simple `User` entity with a one-to-one relationship with the `Phone` entity:

```typescript
import { Entity, PrimaryGeneratedColumn, Column, OneToOne, JoinColumn } from 'typeorm';
import { Phone } from './Phone';

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;

  @Column()
  email: string;

  @OneToOne(() => Phone, { cascade: true, eager: true }) // Assuming a one-to-one relationship
  @JoinColumn()
  phone: Phone;
}
```

**2. Phone Entity:**

```typescript
import { Entity, PrimaryGeneratedColumn, Column, OneToOne } from 'typeorm';
import { User } from './User';

@Entity()
export class Phone {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  number: string;

  @OneToOne(() => User, user => user.phone)
  user: User;
}
```
**Here's a guide using TypeORM Query Builder for user and phone entries, along with API examples:**

**1. Import necessary modules:**

```typescript
import { DataSource, EntityManager, QueryBuilder } from 'typeorm';
import { User, Phone } from './entities'; // Import your entity classes
```

**2. Get a reference to the EntityManager:**

```typescript
const entityManager = dataSource.getEntityManager();
```

**3. Insert user:**

```typescript
async function insertUser(user: User) {
  const queryBuilder = entityManager.createQueryBuilder();
  await queryBuilder
    .insert()
    .into(User)
    .values(user)
    .execute();
}
```

**4. Find user:**

```typescript
async function findUser(userId: number) {
  const queryBuilder = entityManager.createQueryBuilder(User);
  const user = await queryBuilder
    .where('user.id = :id', { id: userId })
    .getOne();
  return user;
}
```

**5. Insert phone and join with user:**

```typescript
async function insertPhone(userId: number, phone: Phone) {
  const queryBuilder = entityManager.createQueryBuilder();
  await queryBuilder
    .insert()
    .into(Phone)
    .values(phone)
    .execute();

  // Join the phone with the user (assuming a one-to-one relationship)
  await entityManager.createQueryBuilder()
    .relation(User, 'phone')
    .of(userId)
    .set(phone);
}
```

**6. Find user with phone joined:**

```typescript
async function findUserWithPhone(userId: number) {
  const queryBuilder = entityManager.createQueryBuilder(User);
  const user = await queryBuilder
    .where('user.id = :id', { id: userId })
    .leftJoinAndSelect('user.phone', 'phone')
    .getOne();
  return user;
}
```

**API examples:**

**Route for inserting a user:**

```javascript
app.post('/users', async (req, res) => {
  const user = req.body;
  await insertUser(user);
  res.status(201).json(user);
});
```

**Route for finding a user with their phone:**

```javascript
app.get('/users/:userId', async (req, res) => {
  const userId = req.params.userId;
  const user = await findUserWithPhone(userId);
  res.json(user);
});
```

Thank you
5 Essential Substack Newsletters for Every Developer to Subscribe To 💌
Tags: webdev, beginners, newsletters, career
Published: 2024-01-18 22:52:30

I love reading newsletters.

But let's be honest, many are just a waste of time.

If you want to boost your developer career, here are the 5 that are truly worth your time:

## 1. [High Growth Engineer](https://careercutler.substack.com/)

I like this newsletter because it addresses common questions software engineers have. Jordan's journey, transitioning from a Junior to a Senior Engineer in just 2 years, is genuinely inspiring.

## 2. [Work Chronicles](https://workchronicles.com/) by @_workchronicles

Whenever I feel stressed or overwhelmed, I turn to this newsletter. Its fantastic comics never fail to lift my mood and help me realize that my struggles are shared.

## 3. [The Developing Dev](https://www.developing.dev/) by @ryanlpeterman

This newsletter is a treasure trove of valuable resources, including templates, insightful tips, and recommendations. It is an excellent guide for navigating your career and provides valuable insights on maximizing your impact.

## 4. [Engineering Leadership](https://newsletter.eng-leadership.com/) by @gregorojstersek

This newsletter is mainly for more senior engineers, but it would still be relevant to junior devs. It delves into often overlooked aspects of software engineering, offering insights on being business-minded and strategies for growing into leadership positions.

## 5. [Elevate](https://addyo.substack.com/) by @addyosmani

I recently found this newsletter, and I'm thrilled with the content. @addyosmani, a fantastic developer, shares his powerful insights on various subjects.

---

Thank you for reading this post 🙏.

Leave a comment 📩 if you have other newsletter recommendations!

And Don't forget to Drop a "💖🦄🔥".

If you like articles like this, join my **FREE** newsletter, **[FrontendJoy](https://frontendjoy.substack.com/)**, or find me on [X/Twitter](https://twitter.com/_ndeyefatoudiop).