teleren/devto huggingface dataset:
How to Build Real-time Weather App Using Vanilla JavaScript and API
Tags: css, javascript, beginners, tutorial
Published: 2023-03-02 14:26:40

{% youtube QMwyNnjAils %}

In this video, I'll show you how to build a real-time weather app using vanilla JavaScript and the API. This weather app will be responsive and will use the latest weather data from the API.

If you're looking to build a weather app that is both responsive and powered by the latest weather data, then this video is for you! By the end of this video, you'll have built a responsive weather app that uses the API!

[Source code](https://www.patreon.com/posts/weatherio-app-79447611?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link)

[Figma UI](https://www.patreon.com/posts/weatherio-app-ui-79447705?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link)


⏱️ Timestamps
-----------------------------
0:00 - Demo
8:09 - Starter file
9:27 - Html Css: Project initial (css variables and reset)
17:45 - Css: Material Symbol for Icon
20:17 - Html Css: Header
41:38 - Html Css: Current Weather
52:25 - Html Css: 5 Day Forecast
57:17 - Html Css: Today's Highlights
1:09:32 - Html Css: Hourly Forecast
1:15:56 - Html Css: Footer
1:19:36 - Html Css: Loading
1:21:37 - Html Css: Error 404
1:24:06 - Css: Media queries
1:42:30 - OpenWeather: Signup and API key
1:44:36 - Javascript: All fetch url configuration
1:52:06 - Javascript: All module configuration
2:02:14 - Javascript: Route configuration
2:09:30 - Javascript: Search toggle for mobile device
2:13:03 - Javascript: Search API integration
2:23:16 - Javascript: Current weather API integration
2:41:17 - Javascript: Air pollution API integration with Today's highlight section
2:50:36 - Javascript: Forecast API integration with Hourly and 5 Day forecast section
3:07:07 - Javascript: Error 404
🗞 Rapyd Developer Newsletter: February 2023
Tags: payments, finech, api, rapydnews
Published: 2023-03-02 14:24:37

Hey fellow developer, 👋🏻

Here is a list of February happenings just for you.  

----

## Events 👩🏻‍💻
[**Read about**](https://community.rapyd.net/t/meetup-recap-make-money-with-software/58454) an amazing meetup event in London that took place. 

**Question:** What meetups or events will you be attending in 2023? 
[**Let us know**](https://community.rapyd.net/t/what-developer-events-and-conferences-will-you-be-attending-in-2023/58460) 

----

## Changelog ♻️
[**Rapyd Business Account (RBA)**](https://docs.rapyd.net/client-portal/docs/onboarding) is available to clients in Hong Kong and the United Kingdom. RBA clients can access features including corporate cards, and virtual accounts. 

[**Interchange Plus Pricing Report**](https://docs.rapyd.net/client-portal/docs/interchange-plus-pricing-report) now includes interchange and scheme fees (calculated from the prediction) in addition to Card information like debit/credit, transaction regionality, and platform type. This addition will help clients match any reported fees to the transactions and reconcile.

----

## Discover 🔍
[**Rapyd Changelog: RBA Update, Reports**](https://www.youtube.com/watch?v=Q3zUr81-SdU) `/video`
Walkthrough the latest Rapyd updates in the Client Portal. 

[**Flutter vs. React Native: Which Is Best?**](https://community.rapyd.net/t/flutter-vs-react-native-which-multi-platform-mobile-development-tool-is-best/58403) `/article`
Learn what multi-platform tool is best to build a hybrid mobile app.  

[**Subscriptions**](https://youtu.be/i1thRJ3doK4) `/video`
Learn how to set up a subscriptions payment in Client Portal.

[**Women in DevOps: Building Leaders**](https://community.rapyd.net/t/women-in-devops-building-leaders-in-tech/58419) `/community`
Learn from Rapyd’s Ronit Kerner and her developer career in DevOps.

[**Building a Fintech App: A Step-by-Step Guide**](https://community.rapyd.net/t/building-a-fintech-app-a-step-by-step-guide/) `/article`
Follow the steps to learn how to build a fintech app.

---- 

## What is Rapyd? 🤔
[**Rapyd**](https://rapyd.net/developers) is an API first, developer focused company. The [**Rapyd Dev Community**](https://community.rapyd.net) makes it easier to get started building payment and fintech experiences that makes global commerce possible.

---- 

## Want to share? 🤝
[**Submit content ideas**](https://forms.gle/R5enobo8bMZE6PQr9) for the monthly Rapyd developer newsletter. 

----

[**Subscribe**](https://go.rapyd.net/dev-newsletter) to the Rapyd Newsletter and get inbox updates.
Act like a cat! - Calling the OpenAI API from Ruby
Tags: chatgpt, ruby, openai
Published: 2023-03-02 14:16:01


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

I heard that ChatGPT API has been released.
You can call it easily from Ruby.
I wrote a mini desktop tool using GPT-3.5-turbo.

## Requirements

- https://github.com/AndyObtiva/glimmer-dsl-libui
- https://github.com/alexrudall/ruby-openai
  - Get your API key from https://beta.openai.com/account/api-keys

## Script

```ruby
require 'glimmer-dsl-libui'
require 'ruby/openai'

class ChatGPT
  class Message < Struct.new(:role, :content)
    def role_color
      [role, color]
    end

    def content_color
      [content, color]
    end

    def color
      case role
      when 'System' then :gray
      when 'Human' then :green
      when 'CatGPT' then :brown
      else raise
      end
    end
  end
  attr_reader :history

  def initialize
    @client = OpenAI::Client.new(access_token: ENV['OPENAI_ACCESS_TOKEN'])
    @history = [Message.new('System', 'Act like a cat')]
    call('Hi gpt 3.5 turbo!')
  end

  def call(query_text)
    res = @client.chat(
      parameters: {
        model: 'gpt-3.5-turbo',
        messages: generate_message(query_text)
      }
    )
    str = res.dig('choices', 0, 'message', 'content')
    history << Message.new('Human', query_text)
    history << Message.new('CatGPT', str)
  end

  def generate_message(query_text)
    m = history.map do |m|
      case m.role
      when 'CatGPT'
        { 'role' => 'assistant', 'content' => m.content }
      when 'Human'
        { 'role' => 'user', 'content' => m.content }
      when 'System'
        { 'role' => 'system', 'content' => m.content }
      end
    end
    m.push({ 'role' => 'user', 'content' => query_text })
    p m
  end
end

class Chat
  include Glimmer
  attr_accessor :entry_text

  def initialize
    @chatgpt = ChatGPT.new
  end

  def launch
    window('CatGPT - Glimmer DSL LibUI', 400, 400) do
      vertical_box do
        table do
          text_color_column('role')
          text_color_column('content')
          cell_rows <=> [@chatgpt, :history,
                         { column_attributes: { 'role' => :role_color, 'content' => :content_color } }]
        end
        horizontal_box do
          stretchy false
          entry do
            text <=> [self, :entry_text]
          end

          button('GO') do
            stretchy false
            on_clicked do
              @chatgpt.call(entry_text)
            end
          end
        end
      end
    end.show
  end
end

Chat.new.launch
```

Meow, thank you for reading to the end.
Have a purr-fect day!
What to test in the frontend?
Tags: testing, fronten, react, reactnative
Published: 2023-03-02 14:05:42

## What to test?

Testing software is not an easy task. Even senior developers struggle to make it clear what needs to be tested. If you don't know what you are going to test, your tests are probably wrong.

In this article, we are going to give you practical examples of what to test in your frontend code, this applies to any framework. The important part is the concept.

## Integration Tests
Tests ensure your code behavior is correct.
It ensures that when given some initial program state, you ended up with a given final state.
Integration tests are the best cost benefit test that you can have.
Integration tests, tests the code like the end user would test it.
When doing Integration tests, you just test public interfaces, you don't test internal functions.

## Testing against the DOM

You should not test the implementation but the behavior

You test like the end user

For instance, imagine a login screen with email and password inputs and a submit button

The test should input the email and the password, then click in the submit button.

You should assert the API was called with the inputted data.

---
Let's see what exactly you should test in your frontend code, given some scenarios.

## What to test in a Component?

- validate the component renders without bugs and throwing errors
- validate the DOM has the elements you do expect
- validate the DOM does not have the elements you do not expect
- validate if the external API requests are being called correct
- validate that Relay/GraphQL requests are correct and being called with the right values

## In Conclusion
I hope these practical examples makes your tests making more sense to you.
This is how Woovi tests, and this avoids many regressions and silly bugs.

Always start with the simplest test case, the happy case, and keep adding more and more edge cases to squish bugs.

---
Woovi
[Woovi](https://www.woovi.com) is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are [hiring](https://woovi.com/jobs/)!

---
Photo by <a href="https://unsplash.com/es/@amayli?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Amélie Mourichon</a> on <a href="https://unsplash.com/s/photos/design-system?orientation=landscape&utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Practical Backward Compatibility example
Tags: backward, compatibility, architecture, database
Published: 2023-03-02 14:05:35

Backward compatibility is when your new code/data works well with the old code/data.

Backward compatibility let you validate if the new code/data works as expected, before removing the old code/data.

In addition, backward compatibility is safer than hard migrations and breaking changes

## Example of using backward compatibility and not using

Imagine that you decide to move some refund status from status to another field `refundStatus`

To check if a transaction was refunded or not, you would have this code

```jsx
const isRefunded = transaction.status === TRANSACTION_STATUS.REFUNDED;
```

if you do not care about backward compatibility, your new code would be:

```jsx
const isRefunded = transaction.refundStatus === TRANSACTION_STATUS.REFUNDED;
```

The problem is the code above is that you assume that all the transaction status was already migrated to `refundStatus`.
This is a valid assumption if you have a few transactions in a database.
However, at scale you can have millions of transactions and the migration will take a long time.

You need to deploy both backend and frontend to ensure that your new code works as expected

- you run the migration first
- deploy backend and frontend

The time between the migration and the release will make the old `transaction.status` do not work.
So nobody will be able to check if the transaction was refunded or not.

Another approach is like this:

- deploy backend and frontend
- you run the migration first

The time between the release and finishing running the migration will make `transaction.refundStatus` not exist.
So nobody will be able to check if the transaction was refunded or not.

The only way to make sure this code will work is to make it backward compatible

```jsx
const isRefunded =
  transaction.refundStatus === TRANSACTION_STATUS.REFUNDED ||
  transaction.status === TRANSACTION_STATUS.REFUNDED;
```

---

[Woovi](https://www.woovi.com) is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are [hiring](https://woovi.com/jobs/)!

---
Photo by <a href="https://unsplash.com/@jcraice?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Julia Craice</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Introducing Procedural Generation For My Game
Tags: algorithms, programming, opensource, news
Published: 2023-03-02 14:00:00

In this week's devlog for my new game [Escape The Wave](https://github.com/EmilienLeroy/EscapeTheWave), I focused on the procedural generation of the map. It was a challenging but instructive process, and with the help of ChatGPT and a lot of research, I was able to successfully generate a map for my game!

## Exploring Procedural Generation Methods

The objective of my game is to generate an island with randomly placed walls that have spaces for the player to pass through. To achieve this, I first researched various procedural generation methods. The first method I tried was perlin noise, which uses noise values to determine the position of each tile. While this method was easy to implement, it didn't allow me to control the form of the generated map to match my specific needs for the walls.


![noise1](https://cdn.hashnode.com/res/hashnode/image/upload/v1677447580590/d7acebce-e050-432f-aa8c-a5b86dd63443.gif?auto=format,compress&gif-q=60&format=webm)

![noise2](https://cdn.hashnode.com/res/hashnode/image/upload/v1677447596806/71e90dca-46ed-4e1d-b6a3-35040c3d5974.gif?auto=format,compress&gif-q=60&format=webm)


Next, I experimented with the walker algorithm, which is often used to create dungeon-like environments by creating rooms and links between them. I attempted to use this method to generate walls, but the result was inconclusive.

![walker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lowss7kt5lp9jrxi78he.gif)

## Developing a Custom Algorithm

Ultimately, I decided to create my own algorithm inspired by the two previous methods. I began by creating a 2D array with a predefined size, filling it with zeros to represent water. Then, I added an island by placing a circle in the center of the array with a radius equal to one-quarter of the array size. I filled this circle with ones to represent grass. To improve the form of the island, which initially resembled a simple circle, I used perlin noise and added water depending on the noise value. To ensure that the island did not become an archipelago, I applied the noise only on the border of the circle. 

![island](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygjd6vwnhjfaadfdp6o3.gif)

Finally, I added walls with a simple pattern, removing the middle of any wall larger than six tiles to ensure that the player could pass through all walls.

![map](https://cdn.hashnode.com/res/hashnode/image/upload/v1677447744965/193c1858-8b1a-4a41-ace4-bff3691c71ba.gif?auto=format,compress&gif-q=60&format=webm)

> You can find the full algo [here](https://github.com/EmilienLeroy/EscapeTheWave/blob/4c86896b3c7923159a6795f52652288af4f32f20/entities/world/world.gd)

## Conclusion

Overall, the procedural generation of the map was a challenging but rewarding process. I am excited to continue developing my new game and to see how the generated map will enhance the player's experience.
Latin x Python: The End?
Tags: devjournal, webdev, python, opensource
Published: 2023-03-02 13:56:19

It's been more than a month since I started working on Discipulis and I have a major announcement!

I've been learning Next.js for about 2 weeks now, and I've realised that Discipulis would benefit more if it was *coded in Next.js* instead of Flask. This would make it **much faster** and **more accessible**.

So I've started recreating Discipulis to *Next.js*.
I'm going to start a new series titled **Discipulis** and I will write about my journey making a Next.js website about Latin!

Check out what I've made so far in Next.js: [discipulis in next.js](discipulis.vercel.app).
Check out Discipulis-NextJS's GitHub repo:
{% embed https://github.com/VulcanWM/discipulis-nextjs %}

If you want to follow my journey, make sure to follow me so you get updated whenever I post a new blog.
Thanks for supporting me with my Latin x Flask Project.
Overengineering
Tags: productivity, programming, webdev
Published: 2023-03-02 13:53:48

Over engineering - проблема каждого.
Термин подразумевает создание более сложных вещей, чем этого требовалось. Ресурсы тратятся на менее важные вещи. Время проходит неэффективно. Ожидания не оправдываются, и ты огорчаешься. Узнаешь себя?

### Откуда это берется?
- Задача нечетко определена. Нет ясности, зачем ты это делаешь. Какую проблему решаешь? Решаются другие проблемы или тратится время на ненужное.
- Плохая коммуникация. Бизнес меняется. Завтра появляются новые требования или задача устаревает. Если мы вовремя не получим обратной связи, мы потеряем время.
- Перфекционизм. Все готово, но не идеально. Мы тратим время на поиск ошибок и задерживаем сроки.
- Иррациональное мышление Мы пытаемся предвидеть будущее и облегчить работу. "Один раз сделаю и больше не буду трогать годами." Но мы смотрим слишком далеко и тратим время на "что если".

### Последствия
- Тратим больше времени. Время = деньги. Потеряли время - потеряли деньги.
- Наше "Изобретение" нужно поддерживать. Чем дальше от даты создания, тем меньше помним, как это работает.
- Не уложились в сроки. Задача устарела. Снижается мотивация и эффективность.

### Выход
- Не выдумывай и не планируй слишком далеко. Разработка решает проблемы бизнеса. Сделай требования прозрачными.
Дай бизнесу, что он хочет, в кратчайшие сроки и получи обратную связь. Думай над оптимизацией, если это актуально. Почитай про Закон Парето.
- Обзаведись критическим мышлением. Что мы решаем? Какой самый важный сценарий? Можно ли сделать решение проще и выполнить требования? Почему мы выбрали этот подход? Какие альтернативы мы могли бы выбрать?
Angular Interview Questions : ChatGPT Answers
Tags: angular, framework, javascript, typescript
Published: 2023-03-02 13:38:12

---
title: Angular Interview Questions : ChatGPT Answers
published: true
description: {% embed https://medium.com/@mmmsonu/angular-interview-questions-chatgpt-answers-3306eaedda4c %}
tags: #angular #framework #javascript #typescript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-02 13:34 +0000
---
Postman Data Driven Testing using Newman CLI
Tags: postman, testing, api, tutorial
Published: 2023-03-02 13:24:02

API testing is a crucial aspect of modern software development, and data-driven testing is an effective technique to test APIs with varying input data. Newman CLI is a powerful tool that can be used to automate API testing and perform data-driven testing. Let’s see how we can do that –

### What is Newman CLI?
Newman CLI is a command-line tool developed by Postman that allows you to run Postman collections from the command line. It provides a way to execute Postman collections in an automated and continuous manner, making it a popular tool for API testing and integration testing.

### Prerequisites
1. Create a Postman collection with the requests to be tested.
2. Optionally, write tests for each request to validate the expected results.
3. Export the collection so that it can be accessed by Newman CLI.
4. Prepare a data file in CSV or JSON format to provide different input data for each test run.

---

### How to do Data Driven Testing using Newman CLI?
To conduct data-driven testing with Newman CLI, you must execute the collection with the `newman run` command and then use the `-d` flag to provide the data file. Here’s an example:

`newman run sample.postman_collection.json -d data.json`

The above command will run all the iterations and return similar results –

![newman cli data driven test run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99b6zwt8c2twcrr2r4cn.png)

---

### To learn more, check out the video below –
{% youtube vmTyNFAmFAY %}

### Conclusion
Data-driven testing is a powerful technique to test APIs with varying input data. Newman CLI is a powerful tool that can be used to automate API testing and perform data-driven testing. With Newman CLI, you can easily perform data-driven testing and catch bugs and issues early in the development cycle.

---

👩🏻‍💻 Unleash Your Full Potential and Take Your Career to the Next Level with SDET-U Academy👇🏻
[Join Academy](https://bit.ly/3Vcqv69)

📧 Subscribe to my [mailing list] (https://automationbro.com/mailing-list) to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well - 
- [Twitter](https://twitter.com/automationbro)
- [LinkedIn](https://www.linkedin.com/company/automation-bro)

...

Thanks for reading!
Netex, Varlık Bilgileri Nasıl Güncellenir?
Tags: netex, agizleme
Published: 2023-03-02 13:21:00

- Liman arayüzü açılır.
- Menüye girilir.
- Menüde sunucunun alt başlıklarında bulunan Netex eklentisinin içine girilir.
- **Machines** sekmesine girilir ve bilgileri güncellenmek istenen makinenin sağında bulunan kalem logolu butona tıklanır.
- Ekrana gelen sayfada:

**Name:** Varlığa verilmek istenen isim girilir.
**Owner:** Varlığın sahibinin adı yazılır.
**Location:** Varlığın konum bilgisi girilir.
**Category:** Varlığın kategorisi girilir.
**Authorization Status:** Varlığın yetki durumu girilir.



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



- Bilgiler girildikten sonra **Submit** butonuna tıklanır ve **Machines** sekmesinde bilgileri güncellenen makinenin solundaki  **">"**  butonuna tıklanır ve makinedeki güncellemeler izlenir.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5uq0eme9z60dnefotus.png)
Resolvendo problemas no HackerRank: Entre gato e rato
Tags: javascript, beginners, programming
Published: 2023-03-02 13:19:26

Olá, seja bem vindo a mais uma etapa do Resolvendo problemas no Hacker-Rank,nessa sessão iremos ver 2 gatos e uma caçada de um rato, eles estão em posições diferentes. Quem será o vencedor desse embate.


**Cats and the Mouse -**

Nosso problema se dá de 3 animais em posições diferentes. 2 gatos estão atrás de um único rato, porém estão os 3 em posições. Dependendo da posição um gato irá chegar ao gato primeiro, ou vice versa, e caso os dois estejam vindo de mesma distância eles entraram em briga e o rato escapará.
Vejamos um exemplos para compreender melhor:

- x =2 // posição Gato1
- y =5 // posição Gato2
- z =4 // posição rato

No caso acima, observando em posição de números, quem estaria mais próximo de agarrar o rato? O segundo gato, o gato 2, pois o rato está a apenas um de distância enquanto para o gato 1 estaria a dois de distância.

O problema nos diz que o primeiro input será z(podemos ignorar), que representa o número de consultas e logo após na segunda linha em primeira posição o gato1,segunda como gato2 e terceira como o rato. Na última linha o mesmo se segue:

```
2
1 2 3 //1=gato1,2=gato2 e 3=rato
1 3 2
```

Vejamos agora a resolução desse problema:

```
function catAndMouse(x, y, z) {
  //x=catA,y=catB and z= mouse
  const catA = Math.abs(x-z);
  const catB = Math.abs(y-z);
  
    if (catA > catB) return "Cat B";
    else if (catB > catA) return "Cat A";
    else return "Mouse C";
}
```

No código acima após a criação da função que guarda os parâmetros que usaremos, criamos uma variável que receberá o nome de catA que irá pegar o valor absoluto entre x(gato1) e z(rato). O mesmo se dá para o caso do catB.

Feito isso, criamos um if onde se catA(ou gato1) for menor que catB, o programa retornará uma string ("Cat B") indicando que o gato2  venceu esse impasse. O mesmo se dá no `else if` contrário a situação anterior e também um `else` onde caso nenhum dos casos acima seja verdadeiro, o vencedor será o rato.

Vejamos o resultado:

```
2
1 2 3
1 3 2


//Cat B
//Mouse C
```

Assim, concluímos mais um desafio. Nos encontramos em breve no próximo _Resolvendo problemas no HackerRank_.