teleren/devto huggingface dataset:
Testing a HTTP Error Handler Utility Hook
Tags: testing, typescript, react, errorhandler
Published: 2022-01-11 14:53:12

### Subject Under Test
A utility hook provides an HTTP error handler that sends errors to a message context. A message snack bar component would show errors in toasters for end users.

### Behaviours
1. it takes an optional message to be prepended to error messages returned from the server

2. it takes an optional translator for localisation

3. it clears the JWT token if the server returns 401 Unauthorised Error

4. it sends an error alerting the user to log in to an account with the required permissions if the server returns 403 Unauthorised Error

5. it sends extract error messages from `response.data` when applicable

6. it sends "Server connection failed" if no response is received

7. if the above fails, it logs out error as-is in the console

### Code

{%gist
https://gist.github.com/rexebin/71416657c6842d756fb732dad43932df
%}

### Notes

1. `TestComponent` shows a way the error handler hook could be used. It is a component designed to facilitate the tests.

2. `setup` function mocks `axios` and renders the above component inside a `MessageProvider` which is not mocked.

3. `userEvent` is used to trigger the HTTP call, which was mocked to reject with an error object. It has to be wrapped inside an `act` block as it updates the states in the message context.

4. `findBy` queries from `@testing-library` is async by design, and we do not have to do anything extra in the tests to wait for async operations. 

5. in the last test, I use `waitFor` from `@testing-library` as there is nothing be found by `findBy`. Note: do not forget to await for `waitFor` as I did.
7k ⭐️ GitUI
Tags: rust, git, terminal, performance
Published: 2022-01-11 14:43:19

GitUI - your friendly #git GUI for the terminal - just breached the 7000 ⭐️ barrier on GitHub! Thanks for all your support and motivation ❤️


![github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zva5ciqn4k2vdkb13eek.png)

see https://github.com/extrawurst/gitui
Thirty Days of Rust: Day Two
Tags: 30days, rust, challenge, programming
Published: 2022-01-11 14:43:01

Yesterday was just a warmup, but today actually felt easier than yesterday, probably because I didn't really have to convert types like yesterday. Instead, I wanted to play around with the standard input, so I made a little calculator.
## Code
```rust
//src/main.rs

use evalexpr::*;
use std::io;

fn main() {
    let mut line= String::new();
    println!("Enter your expression: ");
    io::stdin().read_line(&mut line).unwrap();
    print!("{}", &(&line[..]));
    let out = eval(&(&line[..])).unwrap();
    println!(" = {:?}", out);
}
```
The only other thing I needed was the `evalexpr` crate, so I installed version 6 in `Cargo.toml`, and ran the code. It worked. I had done a bunch of troubleshooting to get to this point though.
### Troubleshooting
The first crate I tried before `evalexpr` was just `eval`, but for whatever reason I couldn't get it working with the same style of code. I probably could've tinkered around a little more but if I'm being honest I didn't understand what the documentation was trying to tell me, and `evalexpr` worked right away. I'm sure it was just a silly mistake on my part though.
I also had to figure out how to get from a `String` to a `&str`, which lead me to stack overflow, finding two questions that gave me this function and this expression (`&(&line[..])`) to print the type and change the type:
```rust
fn print_type_of<T>(_: &T) {
    println!("{}", std::any::type_name::<T>());
}
```
So I used the function for debugging, and the expression to switch the type so eval could actually evaluate it. It's worth mentioning that I'm not sure that part was necessary with the new crate because I did this in an attempt to fix the problem I had with the old crate.
## Conclusion
Again, I'm enjoying myself so far. This is a cool language that I understand why so many people love. I don't know how much I will integrate Rust into my workflow after this challenge, but I'm guessing it'll make its way in given what the experience has been like so far.
SQL JOIN IN SQL
Tags: sql, data
Published: 2022-01-11 14:38:04

Hi guys,
These days I work with SQL Execution plans, when I have to detailed analysis of exactly my query execution, I realize don't have a difference between the two ways to get data from two tables on the match field.
In this post, I mention INNER JOIN
\#type 1
```
SELECT
	u.UserName
	,w.Name
FROM dbo.Users u, dbo.Wallets w 
WHERE u.UserGuid = w.UserGuid
```
with 
\#type 2
```
SELECT
      u.UserName     
     ,w.Name
FROM dbo.Users u
JOIN Wallets w on u.UserGuid = w.UserGuid
```
If I execute the query above with the execution plan then I have the plan below:
\#type 1
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c8fojvdkj5oxbkvogii.png)
\#type 2 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5nqr4k9v7w1qxj4r9lw.png)
> Just example for this post 😁😁

#**So, is there no difference here?**
A Curious Case of Junior Developer
Tags: codenewbie, beginners, webdev
Published: 2022-01-11 14:31:31

Hey readers, let us see this scenario, many of us had faced this scenario in our learning phase.

##Start

You may heard many advice saying that you must have your portfolio website to showcase your work yourself to the world and to build a personal brand. And after hearing that advice you starts to gear up your thoughts and decided to make a cool and professional looking portfolio website.

So, after you have decided that you need a portfolio website, you starts to search YouTube for best developer portfolio website examples or something related to it and binge watching it till 2:00 am in midnight and stops when you see your data pack is over.

After it you sets on a particular design for your portfolio and as soon as you starting to code, you came across a tutorial for designing the website using Figma or Adobe XD. Now you watched that video and follow it to create a design for your website. Your design looks very cool and professional. Now you sit and started coding to make your design a reality.

After two-three hours of coding the HTML and CSS for your website you think that why i am not getting the design that i have created in Figma. You restlessly try and debug the code to make it work. After some time you say **yes i have started creating my website and *it sucks*, now i need some rest so, i *solve the bugs next day*.**

But that ***next day*** never comes in a while. During some random thoughts you reconcile your memory about your unfinished portfolio and you again started coding. But instead of fixing the bugs in older project, you created a new file and started coding from scratch. And again you stuck in the same cycle of trying to fix the bugs and left it unfinished and restart it again.

So, you think why am i doing all this? Was i be able to do it or not? And then you decided to do it again. But this time you are able to complete your portfolio website in just two month and host it.

##End

Now you readers think that why am I telling this sad story to you all but the thing is all the above mention events are happened with **me.** Yes, I binge watched like 10 to 12 YouTube video for find ***inspiration.*** And i found myself in so called '*tutorial hell*'. In general this happens with majority of beginners. They fell in tutorial hell and think that they need to be perfect or need to know it all to make a portfolio or in general became a developer.

So if don't want to fell in tutorial hell then start your favorite code editor (mine is VS Code) and start coding your portfolio website.

In my next post I will share my journey of what i did different last time to finally complete my portfolio website and how i got myself out from tutorial hell.

*So, until then keep coding....*

Credits for [cover photo](https://unsplash.com/photos/weRQAu9TA-A?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink)
Coder AV
Tags: webdev, programming, productivity, opensource
Published: 2022-01-11 14:30:27

_**_Curious about tech. # love it. Make Mistakes. Learn. Keep grinding._
**_
def success(dedication, persistence, passion):
dedication += 1 # dedicate yourself
persistence += 1 # be persistent
passion = True # have passion
if passion == true:
magic = dedication + persistence
return magic
else:
magic = 0
return magic
Go Programming - Redis EP.2
Published: 2022-01-11 14:29:48

### Go Programming - Redis EP.2

Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache, and message broker.

Source Code: https://github.com/codebangkok/golang

### ติดตามผลงานได้ที่
Page: https://fb.com/CodeBangkok​
Group: https://fb.com/groups/msdevth​
Blog: https://dev.to/codebangkok
YouTube: https://youtube.com/CodeBangkok
Twitter: https://twitter.com/surasuk612
Go Programming - Redis
Tags: go, redis
Published: 2022-01-11 14:29:00

### Go Programming - Redis

Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache, and message broker.

Source Code: https://github.com/codebangkok/golang

### ติดตามผลงานได้ที่
Page: https://fb.com/CodeBangkok​
Group: https://fb.com/groups/msdevth​
Blog: https://dev.to/codebangkok
YouTube: https://youtube.com/CodeBangkok
Twitter: https://twitter.com/surasuk612
Airbnb Search App with Testing Data from MongoDB
Tags: atlashackathon, javascript, react, mongodb
Published: 2022-01-11 14:29:00

### Overview of My Submission

This is a simple full stack demo app that was built with:
>  Frontend: React, Material UI, Google Maps Javascript API
> Backend: Express (Node.js), MongoDB Atlas
> Database: MongoDB

This app makes use of the sample data sets of Airbnb, provided by MongoDB. It demonstrates the use case of geoWithin operator to perform geographical search in a smooth and fast way. Wanted to create an autocomplete (real time retrieval of database index field), but came across this available test dataset from the documentation ([geoWithin - MongoDB Atlas](https://docs.atlas.mongodb.com/atlas-search/geoWithin/)), and found out that this geoWithin is more powerful than I thought. 

### Demo

In this app, user can search type in the keyword and pin the desired location (right click on the map), and while you type, it is retrieving data on the pre-indexed fields from MongoDB and presenting them as suggestions to the users. Creating different types of index fields were easy, as I found on YouTube the exactly thing that I wanted to do.

Basically, both the search filters (keyword and the location selected) were combined to produce the search results. If you right click and select the location, it will try to find in a circle shape (you can define in your GeoJSON), and with a radius of 10km (you can also define thsi in GeoJSON). By providing keywords, it will further filter down those properties that match the "name" field of the property. 

### Submission Category: 

E-Commerce Creation / Own Adventure

### Link to Code

{% github https://github.com/OhDylan/airbnb-data-app %}

### Additional Resources / Info

Click on the link to check out this demo app:
[Live Demo](https://airbnb-app-data-app-frontend.vercel.app)

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

{% youtube https://www.youtube.com/watch?v=B8kn69IMOQg %}

[Follow me on Medium](https://dylanoh.medium.com)
Docker: Simplicidade e praticidade - Parte 2
Tags: angular, docker, tutorial
Published: 2022-01-11 14:27:03

Na [parte 1](https://dev.to/tarcisio/docker-simplicidade-e-praticidade-parte-1-26b0) dessa série de posts, eu mostrei como baixar a imagem de um container, depois mostrei como _montar_ um container, apagar esse container e por ultimo como deletar a imagem.

Neste post eu começo mostrando como montar uma imagem.
> Melhor que isso, vou mostrar como **_dockerizar_**
 uma aplicação Angular, ou seja uma imagem que roda uma aplicação Angular.

#### Cenário: Dockerizar uma aplicação Angular com Nginx
Já vou deixar [código fonte](https://github.com/tarcisiocorte/dockerizar-app-angular) pronto aqui que ai já fica mais fácil pra quem quiser estudar.

Na raiz da aplicação Angular, crie um arquivo Dockerfile.

```
# Primeiro passo: compilar e builder código Angular
FROM node:14.17.0 as build
WORKDIR /usr/local/app
COPY ./ /usr/local/app/
RUN npm install
RUN npm run build

# Segundo passo: usar o nginx como server
FROM nginx:latest
COPY --from=build /usr/local/app/dist/app-demo /usr/share/nginx/html

# Exportar a porta 80 que é padrão
EXPOSE 80

```
Tenha em mente aqui que você precisa do NodeJs e Angular instalados na sua máquina para gerar essa imagem.
No meu caso, instalados nesse momento eu tenho o NodeJs v14.17.0 e Angular v12.0.5.
Agora, vamos rodar o comando para gerar a imagem.

```
docker build -t app-demo:v1 .
```
Detalhe: podemos, ao invés de ter um arquivo chamado Dockerfile, poderiamos ter um arquivo chamado dev.dockerfile e outro qa.dockerfile ou/e também mais um chamado prod.dockerfile, então poderia executar o mesmo comando, mas para um arquivo especifico:

```
docker build -t app-demo:v1 ./qa.dockerfile
```
Imagem pronta, então vamos rodar esse container.

```
docker run -d -p 8080:80 app-demo:v1
```
No comando acima, estamos rodando o container e direcionamos a porta 80 do container para a porta 8080 da máquina que esta rodando o container.
Abra o navegador e digite o endereço `http://localhost:8080/`


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

### Conclusão
Nessa continuação de uma série de posts, fiz novamente a demonstração de como é fácil criar containers Docker.
Usar arquivos Dockerfiles é sem dúvida uma das maneiras mais praticas e fáceis de se instanciar containers.
Solidity Programming
Tags: blockchain, ethereum, solidity
Published: 2022-01-11 14:26:20

### Solidity Programming

Solidity is an object-oriented programming language for writing smart contracts.

Source Code: https://github.com/codebangkok/golang

### ติดตามผลงานได้ที่
Page: https://fb.com/CodeBangkok​
Group: https://fb.com/groups/msdevth​
Blog: https://dev.to/codebangkok
YouTube: https://youtube.com/CodeBangkok
Twitter: https://twitter.com/surasuk612
Testing a HTTP Client Adaptor Hook useClient
Tags: testing, typescript, react, hooks
Published: 2022-01-11 13:30:06

### Subject Under Test(sut)
A HTTP client adaptor that wraps axios's get, post, patch and delete methods, adding JWT token to all requests if a token is found.

This adaptor hook exists for the following reasons:

1. it acts as an adaptor to `axios`, so that in the future, I could replace `axios` without touching any other code

2. it adds base URL, JWT and default headers to HTTP calls for conveniences

### Behaviours
1. the hook returns a set of methods for making HTTP calls
2. it prepends base URL
3. it adds JWT token to headers if a token is found
4. it adds default headers
5. it accepts custom headers and overrides default headers
6. it accepts custom options and passes them to HTTP requests

### Code

{%gist
https://gist.github.com/rexebin/687438922cba145e15b38ceaa8c9c8ef
%}

### Notes
1. mock `axios` so that tests don't make actual HTTP calls

2. JSDOM implements `localstorage`, and there is no need to mock it.

3. `setup` uses `renderHook` from `@testing-library/react-hooks`, which wraps the hook in a component and return a `result` object with `current` property set to whatever the hook returns.

4. `setup` also mock the return of `axios.get` method and returns the mocked axios object for assertions.

5. included tests only test `get`. Other tests are similar, so they are left out in this blog post for simplicity.
Objects animation when visible in window viewport
Published: 2022-01-11 14:24:18

I used to hard-code proper height for javascript function to animate object with property `window.pageYOffset`. It mostly worked well but sometimes created problems, for example with viewing page on mobile phones.
Better way to solve this problem is to use `getBoundingClientRect()` - this method returns the size of an element and its position relative to the viewport. So if you write `getBoundingClientRect().top` you will get distance in pixels from bottom of viewport to top of selected object.

Example of use of this method:
 `if (document.getElementById("container").getBoundingClientRect().top < 0) {
document.getElementById("container").style.backgroundColor="black"}
else {document.getElementById("container").style.backgroundColor="white"}`

In this case if top of "container" will touch beginning of our viewport background color of this object will turn to black.
Feel free to use my code.
Playwright Tutorial for Beginners 10 - Configuration
Tags: beginners, playwright, softwaretesting, qualityassurance
Published: 2023-04-16 17:21:35

---
title: Playwright Tutorial for Beginners 10 - Configuration
published: true
date: 2022-01-11 14:14:00 UTC
tags: beginners, playwright, softwaretesting, qualityassurance
canonical_url: https://blog.zt4ff.dev/playwright-tutorial-for-beginners-10-configuration
series: Testing with Playwright
---

There are options to configure how Playwright functions in our test.

In this tutorial, we will not focus on these configurations options rather, we will majorly focus on how to configure Playwright.

How can we configure Playwright?

## Global configuration

Create `playwright.config.js` or `playwright.config.ts` in the root of your project. When you run the test normally, Playwright automatically picks up the configuration file and make use of it.

For instance:

```
// @ts-check

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  use: {
    headless: false,
    video: 'on-first-retry',
  },
    projects: [{ name: 'chrome', use: { ...devices['Desktop Chrome'] } }],
};

module.exports = config;

```

### Using a separate file for configuration

We can have a different `js` or `ts` file for configuration.

Why would we ever need this? It makes sense when we want to run how to test in different ways (using different configurations). For instance, where we want to run a test using all device types and also want to run the same test using only chrome with code coverage.

So run your test with the `--config` flag to define the path to our config file:

```
npx run playwright test --config=test/chrome_coverage.config.js

```

## Local configuration

We can use `test.use` to override some options for a file or a `test.describe` block:

```
const { test } = require('@playwright/test');

test.describe('override config options', () => {
  test.use({ headless: false });

  test('some test', async ({ page }) => {
    // ..
  });
});

```
Top 10 Python Frameworks for Game Development 2022
Tags: python, gamedev, programming, machinelearning
Published: 2022-01-11 14:10:55

## Top 10 Python Frameworks for Game Development
In this blog, i have discussed about Top 10 Python Frameworks for Game Development . Top 10 Python Frameworks for Game Development.

Pygame
PyKyra
Pyglet
Panda3D
Kivy
PyOpenGL
Cocos2d
[Click Here](https://codexashish.blogspot.com/2022/01/top-10-python-frameworks-for-game.html)
To read the full blog, click on the link above or search my website (**CodesAshish**) on Google. I used to upload blogs related to programming and coding on my website. So Please visit once.

**Thankyou**
Saving Millions of Images Series [Part One]
Published: 2022-01-11 13:49:01

Working with images is hard if you are a developer. Especially if you have a lot of them. Let's face it problem by problem. The first one - is how having a lot of images will affect your SEO.

Below I saved the most interesting articles around this issue. Feel free to read it and become a master of Google searches!

While most of those articles will talk about **ALT** attributes, there are other things to consider. A lot of things to consider, to be honest.

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

_OMG I love this image so much. Reminds me of how bad were my teachers of HTML in my university. They fired me, so the hate is mutual)_

**Additional Resources**

* [Image SEO: How to optimize your alt text and title text • Yoast](https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/)
* [https://www.wix.com/blog/photography/write-seo-friendly-alt-text-images](https://www.wix.com/blog/photography/write-seo-friendly-alt-text-images)
* [Google Images SEO Best Practices | Search Central](https://developers.google.com/search/docs/advanced/guidelines/google-images)
* [Beginner's Guide to Image SEO - Optimize Images for Search Engines](https://www.wpbeginner.com/beginners-guide/image-seo-optimize-images-for-search-engines/)
* [Alt text, name and title text optimization - Image SEO](https://imageseo.io/image-seo-alt-title-name-figcaption/)
* [https://blog.hubspot.com/marketing/image-alt-text](https://blog.hubspot.com/marketing/image-alt-text)
* [Alt Text - Moz](https://moz.com/learn/seo/alt-text)
* [Image SEO and Alt Tags: 7 Advanced Image Optimization Tips](https://www.semrush.com/blog/image-seo/)
* [11 Important Image SEO Tips You Need to Know](https://www.searchenginejournal.com/on-page-seo/image-optimization/)
* [Alt Text for SEO: How to Optimize Your Images](https://ahrefs.com/blog/alt-text/)
* [ALT tag and SEO: optimize your images! (Full guide)](https://smartkeyword.io/en/seo-on-page-images-alt-attribute/)
* [Google Images SEO Best Practices | Search Central](https://developers.google.com/search/docs/advanced/guidelines/google-images)
* [Image Sitemaps | Google Search Central](https://developers.google.com/search/docs/advanced/sitemaps/image-sitemaps)
* [Get more useful information with captions on Google Images](https://blog.google/products/search/get-more-useful-information-captions-google-images/)
* [https://web.dev/fast/#optimize-your-images](https://web.dev/fast/#optimize-your-images)
* [Images | Web Fundamentals | Google Developers](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images)

But it’s not the only thing that you should be worried about. Uploading images, resizing them, displaying proper images is necessary, you still need to save and story them properly. We’ll talk about it in our next article from this series.
How Much is Software Developer Salary in Turkey by 2022? 6,000 TL VS 30,000 TL
Tags: javascript, programming, tutorial, discuss
Published: 2022-01-11 13:46:28

Based on my 15 years of software developer experience, I went to many job interviews to learn the 2022 [software developer](https://www.teknobu.net/yazilim/yazilim-makaleleri/) salaries in the market, got offers for the next year and learned the salaries of my friends around me for you.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsjz265bm61juno0ev6c.jpg)
First of all, I went to 3 companies to interview as Junior C# and React Native Developer for 1 year. The offers I received ranged from Net 6,000 TL to 8,000 TL for both languages.

This time, I went to the interview as a 5-Year Middle Developer. Here, however, the prices differed a little. While one firm offered 8,000 TL, another offered 10,000 TL, and the last company I went to offered 13,000 TL.

The 10-year Senior Developer prices start from 12.000 TL for 2022 and range up to 20.000 TL. The company that only gave 20.000 TL wanted me to be the team leader. In other words, it is necessary to undertake a number of tasks in order to move the prices to a higher band.
Finally, I tried to be hired as an _[Architect ](https://www.teknobu.net/)_for 15 years. In 2 of these, I came to the proposal stage. In one of these, I received an offer of 30.000 TL for the position of CTO. In the other, I got an offer of 25,000 TL as a flat developer.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fim2rqhgx2rkgfm0yvh.jpg)

Apart from these, my friend who works as an Android developer with the same experience in different companies receives a salary of 11,000 TL while writing with Kotlin, while the friend who writes with Flutter receives a salary of 12,000 TL.


You can be a light to fellow software developers by [writing ](https://www.teknobu.net/)your experience and your salary in the new year in the comments.