teleren/devto huggingface dataset:
[Desafio] - Medição de Utilização de Recursos duma API
Published: 2022-07-20 14:17:45

> Conteúdo original [nesse tweet](https://twitter.com/zanfranceschi/status/1549757514639704064)

---

Ei dev,

Desafio de backend/infra:

- Escolha um endpoint importante duma API que ajudou a desenvolver.

- Descubra a média de requests/segundo em horários de pico.

- Descubra quantos nós servem estes requests, qual tamanho, e consumos de cpu e memória nos picos.

cc @sseraphini

![grafana dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2amurwikopth8b86iait.png)
Why do I think snapshot tests are a bad idea
Tags: discuss, testing, javascript, webdev
Published: 2022-07-20 13:53:00

When testing your code you’ll come across a lot of different problems to solve. Unfortunately, an application does usually not work with strictly pure functions and without any side effects at all. So we have to mock stuff, or simulate environments, inject dependencies and a bunch of other things. If you’ve ever worked on the frontend side and tried to write tests you will have noticed that it is particularly hard to test components. One possible solution are snapshot tests.

## What is snapshot testing?
The idea of snapshot testing is pretty simple. You create your component and take a snapshot if you’re done. From now on the test will fail when it detects any change in the output of the component. In those cases you have two possible solutions: Fix the component to behave as before or create a new snapshot.

## What is wrong with snapshot testing?
Well, it sounds intriguing, does it not? But there are some problems with snapshot testing.

First of all, snapshot testing assumes the component was doing the right thing when the snapshot was taken. This might lead to a false sense of security. Also, snapshot tests do not say anything about the expected behaviour of a component. It’s just a simple “It does what it did before”.

And then you’d have to think about what should happen if s snapshot test fails in the future. When you’ve changed the component has been changed, then of course it should fail. But do you know if it does now what it should do? No, not based on the snapshot test. What does a developer do now? He/she just assumes everything is okay with the changes, updates the snapshot and pushes the change. Done.

So, the only thing a snapshot test is able is to notify of changes that happened in the component. Well, duh, that’s what you’d expect when a developer works on the code.

## What should you do instead?
Plain and simple: Write specific tests for specific expected behaviours. Try to catch edge cases and improve the tests as you go. And especially make sure you write tests for all bugs and issues you find in the future.

Of course, we can not assume developers will think about all the possible edge cases and error states. Snapshot testing won’t catch those either. To test for ‘unpredicted’ behaviour there are techniques like random tests or fuzz testing (fuzzing).

## Are snapshot tests always wrong?
No. As long as you make sure they don’t replace ‘normal’ tests. They can be helpful in addition to your usual tests to check for unexpected changes which you might not have caught otherwise. Beyond that their usefulness is in my opinion very limited, especially since they might even fail on small ‘technical’ changes - like whitespace - which would not have any impact on the functionality or actual presentation of a component.

Thanks for reading. I'm curious to hear your take on snapshot testing below. Did I miss some use cases? Let me know.
What is your favourite coding language?
Tags: discuss, programming
Published: 2022-07-20 14:05:09

# What is your favourite coding language and why?

Few minutes ago cames in my mind, that I would like to know what is from other peoples their favourite programming language and why is that the favourite language. 



## What is my favourite coding langauge and why?

I love to code in Python because it's simple & easy, I writen many projects in Python. Python is the perfect programming language for me, and you can write many many things like little tools in Python in few minutes, hours etc.
Go SDK open source feedback
Tags: go
Published: 2022-07-20 14:02:35

Hey everyone!

Our open source project now includes a Go SDK + Message journey! ’d be happy if there are Gophers here that loves new challenges and can check it out! We are aiming to find a way to make developers lives easier by creating an easy and fast message broker!! I would love to get some of your feedbacks :)
 

https://github.com/memphisdev/memphis.go
How to focus a child component input from parent component in React
Published: 2022-07-20 13:34:14

In my previous article, I have discussed how to [call a child component function from a parent component](https://www.codingdeft.com/posts/react-calling-child-function-from-parent-component/). In this article, we will see how to focus an input that is in the child component when a button in the parent component is clicked.

## Project setup

Create a react project by running the following command:

```bash
npx create-react-app react-focus-child
```

Update the `index.css` with the following styles:

```css
body {
  margin: 1rem auto;
  display: flex;
  justify-content: center;
  max-width: 800px;
}

.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

button {
  margin-bottom: 1rem;
}
```

## Creating the child component

Now create a child component with an input box:

```jsx
import React from "react"

const ChildComp = () => {
  return (
    <div>
      <input />
    </div>
  )
}

export default ChildComp
```

## Creating a ref and passing it to the child

We will be making use of the [useRef hook](https://reactjs.org/docs/hooks-reference.html#useref) to reference the child input box.
So let's create a reference in the parent component:

```jsx
import { useRef } from "react"
import ChildComp from "./ChildComp"

function App() {
  const childInputRef = useRef(null)

  return (
    <div className="App">
      <ChildComp childInputRef={childInputRef} />
    </div>
  )
}

export default App
```

In the child component, we need to receive the passed prop and set it to the input element:

```jsx
import React from "react"

const ChildComp = ({ childInputRef }) => {
  return (
    <div>
      <input ref={childInputRef} />
    </div>
  )
}

export default ChildComp
```

## Focusing the child input

Now in the parent component, let's create a button and add an `onClick` handler and focus the input:

```jsx
import { useRef } from "react"
import ChildComp from "./ChildComp"

function App() {
  const childInputRef = useRef(null)

  const focusChild = () => {
    childInputRef.current && childInputRef.current.focus()
  }
  return (
    <div className="App">
      <button onClick={focusChild}>Focus child</button>
      <ChildComp childInputRef={childInputRef} />
    </div>
  )
}

export default App
```

Now if you test the application, you will be able to see that the input is focused when the button in the parent component is clicked.

## Source code and Demo

You can download the source code [here](https://github.com/collegewap/react-focus-child-) and view a demo [here](https://react-focus-child.vercel.app/).
STYLING DATA TABLES
Published: 2022-07-20 12:56:18

 How To Style Data Tables

1. The First row uses the earth table header elements the rest of our table the actual data in our table uses td for table data.
2.Then We begin by targeting these elements over in our CSS then we create a new area or create a comment.
3.Table style within any table element, look for the table header elements and let's it override their text-line to be left.
4.We will want to give the table header an alternate background color so that it stands out from the actual data in the table.
5.So to do that within the same wheel will say background color then, I will paste in the hexadecimal color code for a green that we are using elsewhere on the page.
6.Then you will make the text white, and let's also gives it a text shadow so it pops.
7.You will then not want any blur on the shadow and we will use a transparent black value.
8.Then next we add a border around each table header element and each table data or cell.
9.So to do that we are going to want to select both the table header elements comma.
10.Let tack on another selector and all of the tv elements border, so we want a border on all for concerns.
11.The top, bottom and left, we want the border to be one pixel thick.
12.We want it to be a solid line, we don't want it to be dotted or dashed.
13.And we want to use a color that same green value color.
Is Git Great? #healthydebate
Tags: git, healthydebate, discuss, github
Published: 2022-07-20 12:35:28

Git is ubiquitous in our developing world, but is it OK to talk about the trade-offs?

Some things I have noticed:

- poor learning curve. Really, it's usable mostly because of GitHub/GitLab
- even after 10+ years using it, I consistently hear that I'm using it wrong, that I should git-rebase stuff, follow the conventions for git commit messages, branches, etc... Can't we relax about [so-called "best practices"](https://dev.to/jmfayard/discuss-are-best-practices-overrated-5b10) and focus on the task at hand?
- too many features that often get in the way. The mark of a great tool is that it's so good at doing its job that you can forget about it. On the other hand, I feel that we are spending a disproportionate amount of attention and energy baby-sitting git. 
- documentation mostly useless because to accomplish something, you have to know already what command you need to use. On the other hand, that's a gold mine for content creators. [So many common tasks need a translation in plain English.](https://dev.to/t/git/top/infinity)
- git is horrible for certain use cases like managing technical documentation. I'm positive that if Wikipedia had been powered by git, it would have plateaued at 10,000 articles today instead of 10,000,000
- more importantly, a macho culture has formed around git where if you use a GUI or don't understand something, it's not because it's poorly explained in the documentation, or too complex, or has a poor UX. Nope, it's simply because you are too mediocre a programmer. I imagine that's a logical legacy from Linus Torvalds, who would have probably responded in a public email that if you don't get something, it's because you are too stupid. That's a convenient way of not addressing the issues.

What are your thoughts?
Two Pointer Technique
Tags: leetcode, algorithms, java
Published: 2022-07-20 12:40:41

**When to use:** Optimal way to solve problems related to arrays, strings and linked list in O(N) time.

**Arrays/Strings:** Two pointers, each starting from the beginning and the end until they both meet. 
Example Problem: [Two Sum II - Input Array Is Sorted](https://dev.to/tammyvocs/two-sum-ii-input-array-is-sorted-43hm)

```java
class Solution {
    public int[] twoSum(int[] numbers, int target) {
        // use two pointer technique because the input is sorted.
        int start = 0; 
        int end = numbers.length - 1;
        int [] result = new int [2];
        
        while (start < end){
            int sum = numbers[start] + numbers[end];
            
            if (sum == target){
                result[0] = start + 1;
                result[1] = end + 1;
                break;
            }
            
            if (sum < target){
                start++;
            } else {
                end--;
            }
        }
        return result;
    }
}
```

**Linked List:** One pointer moving at a slow pace, while the other pointer moves at twice the speed.
Example Problem: [Linked List Cycle](https://dev.to/tammyvocs/linked-list-cycle-5fl8)

```java
public class Solution {
    public boolean hasCycle(ListNode head) {
        
        if(head == null){
            return false;
        }
        
        ListNode slow = head; 
        ListNode fast = head;

        while(fast != null && fast.next != null){
    
            slow = slow.next;
            fast = fast.next.next;
            
            if(slow == fast){
                return true;
            }
        }
        return false;
    }
}
```
Add Flutter View to Native Android Application
Tags: flutter, application, android, view
Published: 2022-07-20 12:40:34


How to integrate the flutter app into the existing android app?

Today you will learn how to add Flutter views to android native components like activity or fragment.

With the add-to-app feature, we can add flutter UI to our existing app, as it’s not always possible to migrate the whole app into Flutter all at once. We can add the Flutter project as a library or module to our Native app.

Here's what you will learn in this post.

You will learn to implement a simple demo application in android which will have two Flutter pages. On the first page, we'll show a list of users, and the second screen will be the user detail screen.

Then we will embed the flutter module in our android native application as an AAR Library.

The article is divided into 4 logical steps to make understanding easier.

Create Flutter module
Generate AAR files from the module
Integrate the flutter module into the android app
Configure Activity to make use of Flutter view

For implementation,[visit our blog](https://blog.canopas.com/add-flutter-view-to-native-android-application-3747edb83e62) to read full version of this article.
Linked List Cycle
Tags: leetcode, algorithms, java
Published: 2022-07-20 12:39:00

**Leetcode Problem:** [Linked List Cycle](https://leetcode.com/problems/linked-list-cycle/)

**Objective:**

Given head, the head of a linked list, determine if the linked list has a cycle in it.

There is a cycle in a linked list if there is some node in the list that can be reached again by continuously following the next pointer. Internally, pos is used to denote the index of the node that tail's next pointer is connected to. Note that pos is not passed as a parameter.

Return true if there is a cycle in the linked list. Otherwise, return false.

---
**Pattern: Two Pointer Technique**

---
**Approach:** 

1. Edge case: If input is null then the list is empty so a cycle does not exist. 
2. Create two pointers both starting at head. One pointer moving at a slow pace, while the other pointer moves at twice the speed.
3. If the slower pointer ends up catching up to the faster pointer then return true because there is a cycle. 
4. If the faster pointer reaches a null then return false because there is no cycle.

---
**Big-O Notation:** 

Time Complexity: O(n) 
We have iterate n times for each element. 

Space Complexity: O(1)
We do not use any additional data structures for storage. 

---
**Code:**

```java
public class Solution {
    public boolean hasCycle(ListNode head) {
        
        if(head == null){
            return false;
        }
        
        ListNode slow = head; 
        ListNode fast = head;

        while(fast != null && fast.next != null){
    
            slow = slow.next;
            fast = fast.next.next;
            
            if(slow == fast){
                return true;
            }
        }
        return false;
    }
}
```
Setup Tailwind CSS Intellisense in VS code
Tags: beginners, css, tailwindcss, webdev
Published: 2022-07-20 12:32:29

**Holla,**

- Tailwind is utility-first framework which gains popularity in very short period of time.
- It makes quicker to write and maintain css code of your project.
- According to tailwind css official website, it is highly customizable, low-level CSS framework.
-  It also enables to build complex responsive layout more easily.

There are lots of extension available in VS code, to easily integrate tailwind class it also provides an extension which allows us to user its built in classes faster.

**Tailwind CSS IntelliSense** is an extension available in marketplace which is provided by **Tailwind Labs**.

**We will see how we can install it and use it in VS Code**

1. Open Extension Marketplace of VS Code
2. Search Tailwind CSS Intellisense and install and after installation make sure you have tailwind config file named as named `tailwind.config.js` or `tailwind.config.cjs` in your workspace to activate it.
3. Configure it in settings or you can edit settings.json file

```
On Windows/Linux — File > Preferences > Settings
On macOS — Code > Preferences > Settings
```

**Add these settings**
```
"tailwindCSS.emmetCompletions": true,
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
   "strings": true
},
"css.validate": false,
```

That’s it, reload VS code and start using it.

**_Thank you for reading_**
:unicorn: :heart:
Which Programming Language should I learn as a complete beginner?
Tags: beginners, programming, career, webdev
Published: 2022-07-20 12:26:00

Which Programming Language should I learn as a beginner? 

This is one of the most frequently asked question in the Coding Community and since there are thousands of Programming languages to choose from, it is no wonder that it's really overwhelming for someone with very little knowledge related to the field. Obviously, the Internet is filled with enough Videos and Articles about this topic. In this post, I will be sharing with you my opinion regarding the topic.

My answer to the question is not going to be like learn Python, JS, or any other languages. I would rather suggest you something different.

Firstly I would suggest you to learn some programming fundamentals.

The best way to start is by watching Havard’s CS50 Course which is free and available on youtube. Watch the first video of the playlist.

{% embed https://www.youtube.com/watch?v=4zy0z5W0-w4&list=PLhQjrBD2T380Xnv_v683p6UjiKJZe13ki %}


Also don’t miss Crash Course’s Computer Science.

{% embed https://www.youtube.com/watch?v=tpIctyqH29Q&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo %}

The above-mentioned courses really give you an amazing advantage over directly jumping into writing some lines of code without knowing some fundamentals. They teach you what you are about to learn, why you should learn them and all. They are the perfect introduction for a beginner to the programming world in my opinion. I really love the Crash Course’s CS and I am currently watching it. It is filled with great informations that I recently discovered and had answers to some of my burning questions about programming and also answers to some questions that I never thought about. At times the course can be a bit complicated as a complete beginner but just keep going. You don't have to watch each and every video on the playlist, just watch those that interests you.

Something that you need to know as early as possible is that, coding is a huge field. It’s not that you learn a programming language and now you know everything from making Websites to Mobile Apps to Desktop Application to Game Development and so on. For every Programming field, be it Game Development, ML/AI or anything, some specific set of tools and technologies are involved. So before jumping into a programming language you first need to decide the field that interests you the most. Below I have listed some  Programming Language for specific fields. Decide your field of interest and select your choice of Programming language. 

Frontend Web Development: Javascript
Backend Web Development: Python, PHP, Javascript, Java
Machine Learning and AI : Python, Java, C++, R, Javascript
Mobile App Development : Javascript, Java, Dart
Game Development : C++, C#, Java

Thank you for making to the end of the article. Please forgive me for any English or Grammatical related failures in the article. 

Thank You!!!
Introducing the Learnitive Education
Tags: beginners, laravel, webdev, discuss
Published: 2022-07-20 12:13:14

## The Learnitive Education

The [Learnitive Education](https://edu.learnitive.com/) (Learn + interactive) is an advanced e-learning platform that not only gives you the opportunity to watch lessons with video, but also allows you to execute codes and commands inside your browser! 

![Learnitive App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9is3uh3p6d1iu5xyw98.png)

**Get the latest news!** [@learnitive](https://twitter.com/learnitive)

The Learnitive's mission is to inspire and develop people to achieve their goals in **Science, Technology, Engineering and Mathematics (STEM)**. It enables learners to illuminate their soul of scientific curiosity through bite-sized interactive learning experiences.

## The Learning Platform 👌

Being a digital content marketplace, [edu.learnitive.com](https://edu.learnitive.com/) allows you to create or learn awesome video courses, interactive text-based courses, projects, quizzes, assessments and so on. It offers interactive courses featuring slick, in-browser coding environments to make the learning quick and efficient.

![Learnitive IDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/et25s9k7hv1jotsb00wz.png)

Learnitive Education courses **offer playgrounds ([example](https://edu.learnitive.com/course/Python-Regular-Expressions/lessons/1790/read))** and challenges that execute right in the browser so that you can jump right in, stay immersed, and practice as you go. You can start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud! Watch this [video](https://youtu.be/NPdLOJLDbbU). 

## For the Community ❤️ 

The **Learnitive forum** is a community platform where you may ask questions and discuss various topics related to a course. You'll have the opportunity to participate in course discussions and ask/answer any topic. It is a great way to learn and increase your visibility within the community. Why wait? Join now! 


## The Technology Stack

We have used the following technoloy stack to make the platform as much interactive possible.

**Web front-end:**

PHP and Laravel Framework 8.0+, JS, Jquery, NodeJS, Typescript, BS 4.5+
DB: MySQL
Lesson Editor: EditorJS (customised)
Image Editor (Draw.io)
Teminal capture: ASCIINEMA
Charts: ChartJS
HTML5 players: plyr and mooviejs

**Back end:**

   - IDE: Judge0 YML, Ruby on the Rails (Customised)
   - Live terminals: TTYD (C++ customised)
   - Docker
App: Java + Kotlin
Host: Multiple Digital Ocean Droplets and Spaces. 


## The Future

**Learnitive Education** aims to be an alternative to Udemy, but with more empahsis on STEM only, so it aims to be more like a Codeacademy or Educative version of the Brilliant or Khan Academy.

---

Feel free to join or comment if you like at [Learnitive Education](https://edu.learnitive.com/)
Display Snowflake data into a visualization format in my page
Published: 2022-07-20 12:07:29

I want to display Snowflake data into a visualization format in my page (react page). I am able to create a sample data in snowflake. But, I want to embed visualized snowflake data in my React page. I read about visualization snowflake data through charts and looked at Snowflake Snowsight, but looks like they are not satisfying my requirement. I want to display / embed visualized Snowflake data in my own React page. Please guide how to achieve this?