teleren/devto huggingface dataset:
Trabalhando e otimizando testes com mocks de componentes
Tags: testing, vitest, e2e, programming
Published: 2024-03-22 03:59:53

Usar mock nos testes unitários é uma mão na roda quando se trata de otimizar os testes e até mesmo o desenvolvimento deles.

Como dito, quando falamos em mock, nada mais é do que criar uma implementação simbólica de uma função, hook, componente, seja como for. Esse será o ponto de partida. Claro que vale a pena verificar o que vale ou não a pena criar um mock, correto?

Primeiramente, vou ta explicando como funciona um mock de um componente, isso já vai valer para muita coisa, trago no próximo exemplo alguns métodos mais avançados, como `mockImplementation`, `mockImplementationOnce`.

Vamos lá, no react as vezes trabalhamos com muito componentes e às vezes eles já foram testado. Então, fica redundante durante um teste a gente tá chamando ele novamente, isso vai acontece muito se você usa composition pattern.

## Exemplo:  

```
import MenuButton from '../ui/MenuButton';

// ... Componente que usa o MenuButton
```
Aqui estamos importando esse `MenuButton` no menu, e sem seguida iremos testar no caso atual. Esse meu menu tem sua implantação interna e como agora iremos testar somente a ação de está sendo renderizado com as props recebidas, vamos mocar a importação do componente `MenuButton`.

```
vi.mock('MenuButton', () => ({
  MenuButton: () => <div data-testid="menuButton">menuButton</div>
}));

describe('Menu render', () => {
// ... teste
```

Assim fica o mock desse componente, veja que no primeiro argumento passamos o path e o segundo o que iria retornar, no caso, uma função que retorna um jsx. Então, agora na hora que o teste estiver sendo executado na DOM o que vai aparecer sera no Mock. 

```

// SEM MOCK
 ✓ src/components/Menu/Menu.test.tsx (1)
   ✓ Menu render (1)
     ✓ should render correctly

 Test Files  1 passed (1)
      Tests  1 passed (1
   Duration  725ms
   
// COM MOCK

 ✓ src/components/Menu/Menu.test.tsx (1)
   ✓ Menu render (1)
     ✓ should render correctly

 Test Files  1 passed (1)
      Tests  1 passed (1)
    Duration  523ms
```

Como pode ver, um componente relativamente simples mas com um mock tivemos um ganho de tempo e performance 

e isso, por hoje.
What's New With Lagoon: Build Warnings
Tags: builds, logs
Published: 2024-03-22 02:27:29

Nobody likes dealing with broken builds, so we’ve tried to make it easier with Lagoon. Lagoon now has the ability to identify potential issues with the build, and highlight them as warnings without failing. This is also a way for the Lagoon team to inform you of pending deprecations and changes to functionality. For example, if we make a change to a setting in `lagoon.yml`, and there’s something you need to change, the warning will mention it, so you’ll be able to change it before it becomes a breaking change. You’ll still want to resolve these issues ASAP, but they shouldn’t stop your build. If you’re not sure how to resolve them, as always, you can reach out to your Lagoon administrator or [the Lagoon community](https://docs.lagoon.sh/community/discord/). 

Here's a screenshot with an example of a build warning. You can see that the log will have a tag indicating that the build was “Completed with warnings,” and when you expand the log, you’ll see the warning message. Message text will vary depending on the warning, but this gives you an idea. 

![Screenshot of Lagoon log with build wanings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpgwjxek8va3rxaqjt6k.png)

At the bottom of the log, you can also see how many warnings were in the build:

![Screenshot ofo bottom of Lagoon log with count of build warnings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mul70j9m3wiv4z106shy.png)

We’ve also updated our docs with some common issues, so take a look at [Lagoon Build Errors and Warnings](https://docs.lagoon.sh/using-lagoon-the-basics/lagoon-build-errors-and-warnings/) and [Common Docker Compose Issues](https://docs.lagoon.sh/concepts-basics/docker-compose-yml/#common-docker-compose-issues).

We hope this makes your workflow smoother! Let us know by chiming in on [the Lagoon Discord](https://docs.lagoon.sh/community/discord/). 

And don’t forget our [2024 Community Survey](https://dev.to/uselagoon/2024-community-hours-survey-50m5)! Tell us how the Lagoon community can best serve you.
Unleashing Creativity with React: A Journey Through Unconventional UI Design Patterns
Published: 2024-03-22 03:35:05

**Introduction**:
React has long been celebrated for its flexibility and power in building dynamic user interfaces. In this article, we'll embark on a journey beyond conventional UI design patterns, exploring innovative techniques to unleash creativity and elevate user experiences using React.

**1. Dynamic Data Visualization with React and WebGL:**
   - Introduce the concept of using WebGL within React applications to create stunning, interactive data visualizations.
   - Showcase examples of leveraging libraries like Three.js or React-three-fiber to render complex 3D graphics directly within React components.
   - Discuss best practices for integrating WebGL into React projects while maintaining performance and accessibility.

**2. Exploring Motion Design with React Spring:**
   - Dive into the world of motion design and animation in web applications using React Spring.
   - Demonstrate how to bring interfaces to life with fluid transitions, gestures, and physics-based animations.
   - Provide code examples and tutorials for implementing common motion design patterns, such as parallax scrolling, page transitions, and draggable elements.

**3. Reinventing Navigation with React Router Transitions:**
   - Challenge traditional navigation paradigms by incorporating seamless transitions between pages using React Router Transitions.
   - Walk through the process of creating custom transition animations for routing events, enhancing user engagement and continuity.
   - Highlight advanced techniques for orchestrating complex navigation transitions, such as nested animations and route-based animations.

**4. Crafting Immersive Experiences with React VR:**
   - Push the boundaries of user experience design by integrating virtual reality (VR) capabilities into React applications.
   - Explore React VR frameworks like React 360 to build immersive 3D environments, virtual tours, and interactive storytelling experiences.
   - Discuss practical use cases for React VR, from e-commerce product visualization to educational simulations and beyond.

**5. Embracing Creative Constraints with React Native:**
   - Challenge traditional notions of mobile app design by embracing the constraints of React Native.
   - Showcase examples of innovative UI design patterns tailored specifically for mobile platforms, leveraging React Native's component-based architecture.
   - Share insights on optimizing performance and usability in React Native applications, with a focus on cross-platform compatibility and native integrations.

**Conclusion:**
By embracing unconventional UI design patterns and harnessing the full potential of React, developers can transcend traditional boundaries and create truly memorable and immersive user experiences. Whether it's leveraging WebGL for data visualization, mastering motion design with React Spring, or exploring the realms of VR with React 360, the possibilities are endless. Let your creativity soar and inspire the next generation of React developers to push the boundaries of what's possible in web and mobile development.
Social bookmarking submission in SEO
Tags: seo, socialbookmarking, offpageseo, backlinks
Published: 2024-03-22 02:32:23

[Social bookmarking submission](https://seosmartkey.in/400-free-social-bookmarking-sites-list-2024/) is a practice in SEO (Search Engine Optimization) where website URLs or pages are submitted to social bookmarking sites for indexing and sharing. These submissions can potentially drive traffic to the submitted sites and also help in improving their search engine rankings. Here's a brief overview of how social bookmarking submission works in SEO.

## Social bookmarking submission in SEO

Selection of Social Bookmarking Sites: SEO professionals typically identify relevant social bookmarking sites that have good domain authority and user engagement. Examples include Reddit, Pinterest, Digg, StumbleUpon (now Mix), and Delicious (although it has been discontinued).

Creation of Accounts: Before submission, accounts are created on these social bookmarking sites if not already present. This is necessary for submitting URLs and participating in the community.

Submission Process: Once accounts are set up, URLs of web pages or websites are submitted to these social bookmarking platforms. This submission usually involves providing a title, description, and relevant tags or keywords to categorize the content.

Engagement and Sharing: To enhance visibility and engagement, it's common practice to engage with the community on these platforms. This involves commenting on other submissions, upvoting or liking content, and sharing relevant submissions.

Impact on SEO: Social bookmarking submissions can potentially impact SEO in several ways:

Backlinks: Each submission usually includes a link back to the website being promoted. These backlinks can contribute to the website's link profile, potentially improving its search engine rankings.

Traffic Generation: If the submitted content resonates with users, it can drive direct traffic to the website.
Indexing: Search engines often crawl social bookmarking sites frequently, which can lead to faster indexing of the submitted URLs.

Quality vs. Quantity: It's essential to focus on quality rather than quantity when it comes to social bookmarking submissions. Submitting to irrelevant or low-quality sites solely for the purpose of creating backlinks can have a negative impact on SEO. Instead, prioritizing high-quality, relevant submissions that add value to the community is more effective in the long run.

Monitoring and Analysis: SEO professionals typically monitor the performance of their social bookmarking submissions using analytics tools. This helps in assessing the impact on traffic, rankings, and overall SEO strategy effectiveness.

In summary, [social bookmarking submission](https://seosmartkey.in/400-free-social-bookmarking-sites-list-2024/) can be a valuable component of an SEO strategy when done strategically and with a focus on quality and relevance. However, it's essential to adapt to changes in search engine algorithms and user behavior to ensure effectiveness over time.
Create Local MySQL using Docker Run
Tags: mysql, docker
Published: 2024-03-22 02:39:19

---
title: Create Local MySQL using Docker Run
published: true
description: Easy step to create local mysql container using docker run command
tags: mysql,docker
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-03-22 02:26 +0000
---

This is just a rant writing. Because how difficult tutorial out there just to setup this kind of thing. So I'm here to summarize for you (reader) how to get it done.

Simple! Run:
```bash
docker run --name mysql-local -p 3306:3306 -e MYSQL_ROOT_PASSWORD=admin -d mysql
```
- `mysql-local`: Your container name, feel free to change it.
- `-p 3306:3306`: Expose container to localhost, so we can connect with UI (ex: DBeaver).
- `-e MYSQL_ROOT_PASSWORD=admin`: `root` user password, adjust with your preference.
- `-d`: Detach mode
- `mysql`: Image name

This will automatically pull the image if not pulled yet.

## Connecting into interface (or else)
After this, maybe you need to access via UI. Here is the setting:
- Host: localhost
- Port: 3306
- User: root
- Password: admin

## Maybe you will need this
1. When connecting, maybe you will get error `Public Key Retrieval is not allowed`. If you are using DBeaver, search for driver properties/setting. Change `allowPublicKeyRetrieval = true`

## Closing
That it and Thank You.
Sablon Kaos Surabaya
Tags: programming, career, mobile, design
Published: 2024-03-22 02:17:25

Gimana nih, teman-teman yang hobi banget bikin kaos keren? Hari ini gue mau bagiin info seru nih tentang jasa sablon kaos dari brand keren bernama [Sablon Kaos Surabaya](https://sablonkaossurabaya.id/jasa-sablon-kaos-surabaya-berkualitas/). Gak nyangka ya, gue udah puluhan tahun ngejadiin kaos jadi bahan kanvas buat kreasi orang-orang.

Dulu, pas baru mulai, persaingan di bisnis sablon kaos tuh super ketat. Tapi gue yakin sama kualitas cetakan gue, jadi tetep semangat terus. Sampe sekarang, gue udah kerja sama sama brand gede kayak Erigo dan Indomaret buat proyek-proyek keren.

Brand ini emang juaranya kalo soal bikin kaos yang personal banget. Mereka ngerti banget cara bikin kaos jadi bener-bener sesuai sama keinginan pelanggannya. Gak cuma itu, kualitas cetakannya juga top banget, bikin kaos jadi keliatan lebih keren dan eksklusif.

Gak cuma itu doang, mereka juga punya variasi bahan kaos yang keren banget. Mulai dari katun yang lembut, sampe yang lebih ringan kayak polyester. Jadi, buat lo yang lagi nyari jasa sablon kaos yang bener-bener bisa diandalkan, **Sablon Kaos Surabaya** ini pilihannya!

Nah, itu tadi info seru dari gue tentang jasa sablon kaos dari **Sablon Kaos Surabaya**. Gak sabar kan buat bikin kaos keren bareng mereka? Yuk, langsung aja cek website mereka buat dapetin kaos impian lo!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/403e3p06fvwksqjyf40t.jpg)
my code
Published: 2024-03-22 01:53:53

Show more on: https://dev.to/imnotleo/en-la-fila-del-cine-47k8 

Puedes ver mas en: https://dev.to/imnotleo/en-la-fila-del-cine-47k8

```
#ifndef cine_hpp
#define cine_hpp

#include <iostream>
#include <assert.h>
using namespace std;

class fila {
    
    class node {

  int _data;
  node *_next;

  public:

    node(int);

  int data() const { return _data; } //cual es el dato
  node *next() const { return _next; } // cual es el siguiente apuntador
  node *back() const { return _back;
  void next(node *p) { _next = p; } // cambia el siguiente ap
  };
    
  int n; // Capacity of stack
  int s; // Size of stack

  node *init; // Inicio de nodo

public:

  fila(int);
  ~fila();

  void push(int);
  int pop(void);
  int top(void);

  int capacity() const { return n; }
  int size() const { return s; }

  bool full() const { return s==n; }
  bool empty() const { return s==0; }

  void print();
};

#endif /* cine_hpp */
```

```
#include "cine.hpp"

    fila::node::node(int x) {
        _data = x;
        _next = nullptr;
    }
    
    fila::fila(int c){
        
        n = c;
        s = 0;
        init = nullptr;
    }
    
    fila::~fila(){
        
        while(init != nullptr) {
            
            node *p = init;
            init = init -> next();
            delete p;
        }    
        
    }
    
    void fila::push(int x){
        
        assert(!full());
        node *p = new node(x);
        p -> next(init);
        init = p;
        s++;
    }
    
    int fila::pop(){
        
        assert(!empty());
        while(!empty()){
            int x = init -> data();
            node *p = init;
            init = p -> next(); 
            delete p;
            s--;
            return x;
        }
    }
    
    int fila::top(){
        
        assert(!empty());
        return init -> data();
    }
    
    void fila::print(){
        
        node *p = init;
        cout<<"["
        while(p != nullptr){
        cout << p -> data() << " ";
        p = p -> next();
        }
    cout << "]" << endl;
    }
    
```

```
#include <iostream>
#include "cine.hpp"

int main(){
    
    srand((unsigned) time(nullptr));
    
    fila fila(20);
    
}
```
Writing A Language In a Game
Tags: gamedev, languagedev
Published: 2024-03-22 01:31:42

## Intro
For the past while I've been busy developing a game I plan to sell. This game is called [CompNerdSim](https://chigbeef.itch.io/compnerdsim) and I've just added the most interesting update so far.

## The Premise Of The Game
Before we get into the update, why do we need a language? Well, in the game, you write code to make money. With that money you get a plane ticket to travel and see your girlfriend (which is the win state). So if we're writing code to make money, I have to first create a language for people to code in.

## Enter: Slither
No, it's not Python, it's Slither. To get started writing Slither, pull up BScode. Now that you have your favorite IDE open, let's take a look at Slither!

![An if-else statement in Slither](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lujcfv4353s0se8qtf41.png)

Look at that if statement. Even an else? How great is that! We can print objects to the console using `out`, and clear the console at any point using `clear`. I know, you're pretty much sold already, but let me show you some more features first.

## Looping
We all need ourselves a for loop, so, here's what they look like.

![Finding the first 3 prime numbers in Slither](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipitusz73z3oduh1cnf4.png)

Wow, look at those prime numbers, and look at those for loops. Nesting even works, as you would hope. Everyone (except Python lovers) are probably also excited that true and false aren't capitalized!

## Type Casting
Now what's the point of having types if I can't switch between them. Luckily for you, I've thought about this and have implemented it.

![Type casting in Slither](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vcb4ae58miengmerd46.png)

So easy to use!

## Future
Now, I know what type of people are probably reading this, and no, currently you are unable to write DOOM in this language, however, here are the future plans for Slither.

- Functions
- Structs
- Pointers

Pointers is going to be fun, because depending on how I implement it, I could provide no safety, which would make the game very fun.

I also have graphics planned for the future. This means you'll be able to write games (DOOM?) in Slither, and have them show up on screen! Then you'll be able to sell these games in a future update.

## But... Why?
I could've made any other game, why did I choose a game like this?
Simple, it makes me a better game developer, and better and language design. I also think that this game will be enjoyable to play, and educational. It will also give people another perspective on language design, and really make them question what good language design is.

If you want to keep track of this project, I'm going to sell it on [Itch](https://chigbeef.itch.io/compnerdsim). The planned release date is in August, but if development goes fast enough, this could be sooner.
And if you want to support the project, give me your ideas! Does a part of the game look terrible visually? Or does a game mechanic not make sense? Make me know!
Back on the grind
Tags: go, aws, blog, motivation
Published: 2024-03-22 01:12:58

## Long journey back

I'm making this post to document that I'm back to my ways of studying and learning. I had a bit of a downfall in life for about 16 months. Played a game called New World and got lost in life for a bit. To give you guys context I have 3 AWS certifications and made this [website] (http//:gwresume.com). In the last 16 or so months I had a job for maybe 2 or so months. Still don't have a job, Currently things are kinda rough for me right now but I'm not going to let that stop me.

## Learning

I started to dig deep into the programming language(golang). It seems like I enjoy coding in go. I'm not going to say I'm proficient in it but go is a joy to code in. The reason I chose to learn go was because of its speed. Go and cloud computing go really well together, and go is good with a lot of other stuff as well. Another thing about go is its not too hard to learn either.

## Tools

I wanted to shed some light on the text editor that I really enjoy using. The text editor I use is Kate(KDE Advanced Text Editor). [Kate's website](https://kate-editor.org/). Kate does support LSP's(Language Server Protocol) which makes Kate very powerful. Kate is  really light weight and very responsive. Also has a very configurable UI. Also I've switched to linux full time for about 4 months now. My linux distro is Fedora at the moment. Needless to say im a big fan of linux.

## Goals

My goals are first and foremost get a job. I would love to work with go and AWS or any other cloud provider. My other goal is to restructure my website. I want to take terraform out of the picture and use go with the aws cdk. I'm also thinking about implementing htmx to rebuild the website.

## Outro

Whoever does take the time read this, first thing is thank you, the second thing is you can't give up. I know especially in tech right now the job market is in weird state right now. But that's not stopping from me applying to jobs. Remember you miss 100 percent of the shots you don't take.
signed-off-by at PyCharm
Tags: git, cloudforet, opensource, beginners
Published: 2024-03-22 00:58:38

# DCO(Developer Certificate of Origin)
 
The Developer Certificate of Origin (DCO) is a lightweight mechanism for verifying that contributions to a software project are made with the consent of the contributor and that the contributor has the right to make those contributions.

# Signed-off-by

When you commit message in PyCharm, always check **"Sign-off commit"**


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


## Commit messages with "Signed-off-by"

```
commit 9ca152c989e413adc68508a50d86c
Author: Choonho Son <choonho.son@snu.ac.kr>
Date:   Fri Mar 22 09:42:06 2024 +0900

    commit by pycharm

    Signed-off-by: Choonho Son <choonho.son@snu.ac.kr>

commit 359eb2ef5274ae2f53ce9c055053
Author: Choonho Son <choonho.son@snu.ac.kr>
Date:   Fri Mar 22 09:16:37 2024 +0900

    commit by pycharm
```
Code Reviews
Tags: codereview, backenddevelopment
Published: 2024-03-22 00:42:05

Looking back on my two-year journey as a software engineer, one of the areas where I experienced most growth is code review :mag:. I knew next to nothing about code reviews when I started my current job in 2022. Thanks to my supportive team members and online resources, I’ve adopted a personal mantra on code review: **I Choose the Intent to Learn** :sunflower:

One of the biggest challenges I faced during my early days is my own insecurity. When I was assigned as a reviewer, I would think to myself I don’t really think I have anything useful to add because I am still new to everything! I’d have the urge to automatically approve when the pull request creator is a senior engineer, since I believed that I had nothing to comment on a PR of a senior developer. 

During a one-on-one meeting with my manager, I shared my feelings about code reviews and he kindly pointed out that I don’t need to provide constructive feedback for every pull request, and it is absolutely okay for me to ask clarifying questions if I don’t understand a particular line of the code :yellow_heart:

It was then that I realized that my intention was a bit off when code reviewing. I had the intention of trying my best to spot any potential flaw and therefore providing a _useful_ review. However, code reviewing is not limited to a one-directional activity where one side purely gives and the other side purely receives. It can be a two-directional activity if you set the intention to learn while you review others’ code.

This mindset shift drastically reduced my anxiety around code reviews and also taught me the power of our mindset and intention :sparkles:. When I choose the intent to learn, I also find it easier to give constructive feedback since my mind is open and calm.

I’ll keep updating this post as I move along in my career 😊

Resources for Code Reviews:



1. [Google Code Review Guide](https://google.github.io/eng-practices/review/reviewer/)
2.  [Code Review: Best Practices -- Course](https://www.pluralsight.com/courses/code-review-best-practices?clickid=1VrwKWXCoxyPWtuSoX3spRgcUkHUTCTtRWvCXc0&irgwc=1&mpid=27795&aid=7010a000001xAKZAA2&utm_medium=digital_affiliate&utm_campaign=27795&utm_source=impactradius)