teleren/devto huggingface dataset:
tmux resize-panes
Tags: cli, linux, tmux
Published: 2021-07-20 12:57:11

---
tags: ['cli', 'linux', 'tmux']
title: tmux resize-panes
status: published
published: true
canonical_url: https://waylonwalker.com/tmux-resize-panes/
series: tmux
---

Resizing panes in tmux can be quite difficult in default tmux, I use a set of keybingings to help resize panes in the rare occasions that I do need just a bit more space.  I set the keybinding to the same as my split navigation bindings but shifted. They are very vim like (h,j,k,l).

``` bash
# resize panes
#―――――――――――――――――――――――――――――
bind -n M-H resize-pane -L 2
bind -n M-L resize-pane -R 2
bind -n M-K resize-pane -U 2
bind -n M-J resize-pane -D 2
```

Most often when I need to resize panes I just grab the edge of the pane with my mouse.  Yes the mouse, its not that often that I actually need to change the size of a pane.

``` bash
# Enable mouse control (clickable windows, panes, resizable panes)
set -g mouse on
```

https://waylonwalker.com/tmux-nav-2021/

> for more information on how I navigate tmux, check out this full post

---


Be sure to check out the full youtube playlist and subscribe if you like it.

https://www.youtube.com/playlist?list=PLTRNG6WIHETB4reAxbWza3CZeP9KL6Bkr

---

{% post https://dev.to/waylonwalker/how-i-navigate-tmux-in-2021-2ina %}

> Also check out this long form post for more about how I use tmux.
Faced issues on WSL2 with IntelliJ
Published: 2021-07-20 12:34:11

!! still updating !!

## when setting up Java project with JDK in Ubuntu on WSL2
The following error occured during initializing a Java project.

```
Unable to load class 'com.android.ide.gradle.model.GradlePluginModel PluginClassLoader
```

This is a known error, and the corresponding issue is [this](https://youtrack.jetbrains.com/issue/IDEA-265256?_ga=2.107588738.1041133390.1626758216-1328920011.1626758216).

The simple solution is disabling Android plugin installed default.
Working with legacy React apps
Tags: react, legacycode, testing
Published: 2021-07-20 12:20:52

---
title: Working with legacy React apps
published: true
description: How to work effectively with legacy React apps
tags: reactjs, legacycode, testing
//cover_image: https://direct_url_to_image.jpg
---
Working with legacy code can be challenging especially when code is lacking in test coverage.  In his must read book [Working Effectively with Legacy Code](https://www.goodreads.com/book/show/44919.Working_Effectively_with_Legacy_Code) author Michael Feathers talks about a refactoring technique Extract Method for tackling large methods. 

I have successfully used this technique many times to enhance or add features to complex React components and adding test coverage.

##Example
We are given a task to fix bug in a LoanCalculator component. It's a huge file with complex logic and no test coverage. We have identified the cause of bug and ready to make changes.  

```
function LoanCalculator(props) {
  ...
  lots of lines of code
  ...

  if (someCondition) {
    // bug is here 
    // fix: props.x + props.y
    return props.x - props.y;
  }

  ...
  more code
  ...
}
```  

The recommended way is to create tests for LoanCalculator when possible before making any code changes. In our case we don't understand the logic enough to create tests for whole file.   

**Step 1**: Start by extracting the lines for bug fix into a separate method. Notice that we are doing a named *export* for someCalculation function. This refactoring enables us to start creating tests for our newly extracted method. 

```
// bug is here 
// fix: props.x + props.y
export function someCalculation(x, y) {
  return x - y;
}

function LoanCalculator(props) {
  ...
  lots of lines of code
  ...

  if (someCondition) {
    return someCalculation(props.x, props.y);
  }

  ...
  more code
  ...
}
```  

**Step 2**: Add tests to cover and set expectations for someCalculation function.
```
/* file: LoanCalculator.spec.js */
import {someCalculation} from './LoanComponent';

describe('LoanCalculator', () => {
  it('someCalculation should return sum of x and y', () => {
    const result = someCalculation(2,3);
    expect(result).toEqual(5);
  });
});
```

**Step 3**: Now that we have a failing test we can apply the bug fix.
```
export function someCalculation(x, y) {
  return x + y;
}
``` 

**Step 4**: The test we created should we passing now. 

By using the Extract Method refactoring technique we were able to reduce complexity in LoanComponent component and add test to go along with our bug fix.

Hope you find this article useful. Please share your feedback.
Microservices master thesis: Current research areas?
Tags: help, discuss, microservices
Published: 2021-07-20 12:10:01

Hey, i want to write my master thesis soon and i am currently looking for a topic that i could focus on.

I am also working full-time, so it'd be optimal if i can combine work with the thesis. At work, we currently rewrite an application from scratch using microservices (it used to be a monolith).

So i am trying to find a topic in the microservices area.
I would like to focus on one specific aspect/challenge/problem of microservices.

I started looking into some topics:
- Observability (Logging, Metrics, ...)
- Service Discovery
- Service Orchestration
- Fault Tolerance
- Build/Deployment Automation
- Testing Automation
- Data Consistency
- (Inter-)Service Communication
- Self Adaption / Self Healing
- ...

I did not really dive deep into those topics yet, i am just trying to collect some papers and get a general overview.

My goal would be to find and focus on an area, that has multiple approaches and solutions, compare them and develop a guideline in which scenario each of those solutions would be best suited. Or some area thats actively beeing researched on or has "future work" left to do, that i could practically work on.

Does anyone have an idea, what topic could be interesting in regards to microservices? Preferably a problem, that has multiple approaches and not something where there is only one "solution", that basically everyone in the industry follows.

I highly appreciate any tips :)
Syspree Solutions - Digital Marketing Agency in Mumbai

Tags: website, marketing
Published: 2021-07-20 12:03:19

Empower your business and achieve your digital goals with SySpree, a leading web design company in Mumbai and reputed as the top digital marketing agency in Mumbai

At SySpree, we craft tailored websites and digital solutions that REACH, IMPACT, and SELL. Our experience assures you of unparalleled expertise, technical robustness, and creative brilliance. With an unmatched blend of technology and innovation, we deliver an unrivaled user experience and interface for a unique competitive advantage.

A website is the beginning of an online presence. Our digital solutions transform it into a valuable business asset with top-notch SEO and Social Media Marketing.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yf8c4b07apvy40d2ebq.png)
Laravel 8 "TDD" test driven development examples
Tags: laravel, tdd, tutorial, examples
Published: 2021-07-20 12:03:16

<h2>This is the best Git repo I found regarding TDD laravel 8, code is clean and neat.</h2> You will find lots of use cases.

<a href="https://github.com/BookStackApp/BookStack/tree/master/tests"><h1>LINK</h1></a>

If you have some materials you find time worthy, please share with me.

{% link https://dev.to/pajkiclab/side-job-get-paid-for-testing-sites-1aaj %}

I post digested informations I wish had access to on one click.
You can follow me on: <a href="https://twitter.com/LabPajkic">Twitter</a> and <a href="https://github.com/Pajkic-lab">Github</a>.

Do you find TDD helpful and why? Write me a comment.
Daily Developer Jokes - Tuesday, Jul 20, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-07-20 12:00:27

---
title: "Daily Developer Jokes - Tuesday, Jul 20, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Jul%2020%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12595d30baa.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How does a programmer open a jar for their significant other?

___A:___ They install Java
 -->
Understanding Cache
Tags: development, devops, cache
Published: 2022-09-12 23:27:21

---
title: Understanding Cache
published: true
date: 2021-07-20 12:00:00 UTC
tags: Development, DevOps, Cache
canonical_url: https://johandejong.dev/blog/understanding-cache
---

In a world where websites need to be fast and everyone shouts to optimize everything, there is one thing which is always mentioned: "cache". But what is it, how does it work and which layers of cache are there?  
  
Read full article at [https://johandejong.dev/blog/understanding-cache](https://johandejong.dev/blog/understanding-cache)
Join the AWS Community Builders program!
Tags: aws, cloudskills, cloud, switzerland
Published: 2021-07-20 11:53:22

Are you building on AWS in Switzerland? Would you like to be recognized as an expert and level up your skills, through interaction with your peers? Would you be excited to receive benefits, like AWS free credits, direct interactions with AWS teams, unique training opportunities, cool SWAG and many more?

The AWS Community Builders program offers technical resources, mentorship, and networking opportunities to AWS enthusiasts and emerging thought leaders who are passionate about sharing knowledge and connecting with the technical community.

Check what current members of the community are publishing on dev.to: https://dev.to/aws-builders

Apply today to become an AWS Community Builders member and join an amazing Swiss and global community of builders:
https://aws.amazon.com/developer/community/community-builders/
Web Development BootCamp 2021
Tags: showdev, webdev, codenewbie
Published: 2021-07-20 11:48:54

Hey fam, I recently started a web development Bootcamp on my YouTube channel where I will cover `VS Code`, `HTML`, `CSS`, and `JavaScript` in a beginner-friendly manner. Two videos are already up. If you would like to join, here is a link to my channel: https://youtube.com/c/chaoocharles
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5tr6eav57bz11slngv7.png)
Avoid using inline css styles
Tags: html, css, webdev, beginners
Published: 2021-07-20 11:18:05

---
cover_image: https://public-image-container.s3.ap-southeast-1.amazonaws.com/newinlines.png
---
While developing a website we can add styles in various ways. We can write css styles in a css file and import it in html file, write in `<style>` tag of `<head>` or write inline style within each element of the `<body>`. I would like to share some problems with inline styling.

#### Lack of reusability
Using the same css class multiple times should be one of the major aim in adding style to a website. As our project gets larger if we do not use same class for same type of styles, there is a good possibility of writing redundant styles which unnecessarily makes the project larger. If we write inline style, we can never use it multiple times which breaks the `DRY` principle.

#### Inability to use css selectors
We cannot use css selectors while writing inline styles. Selectors like `before`, `after`, `hover`, `focus` etc are very much useful for styling which we simply cannot use in inline styling.

#### Difficulty in code readability
In a large html file there will be a lot of elements. If in addition there is inline styles then it becomes very much difficult for someone to read and understand that html code. Inline style hampers code readability a lot.

#### Lack of writing media queries
Web developers now-a-days must make the website responsive. In order to make the site responsive writing `media queries` is a must where different css rules are applied based on screen width. Inline style does never allow us do that.

#### Maintenance problem
Suppose you are dealing with an html file containing inline css styles. In that case you have to face difficulties in debugging and adding new codes which can be recovered by simply going to the element class in css stylesheet very easily.

#### No scope of caching
Browsers cache external stylesheets so that those can be loaded easily for further rendering but inline styles cannot be cached since those are with the html code segment. So everytime you visit a webpage inline styles need to be loaded with html.

All of these issues are seen while using inline styles. If the project is larger, using inline styles is not a good idea. Inline styles can load css faster which is negligible. We can use inline styles in smaller projects though.
Cypress tips&tricks: Find Dynamic Table Selectors
Tags: engineeringmonday, testing, cypress, automatization
Published: 2021-07-20 10:55:08

In my world, developers can't always make your selector unique or custom just for you to catch them in your cypress test like in Cypress [best practice doc](https://docs.cypress.io/guides/references/best-practices).
But there is a trick I use in my tests when I need to catch dynamic table index or row index. This happens when my tests want to select some elements that are the same for all data in table like edit or delete button.
Like in this case -> 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fb3ilwl33l881irvqfs.png)
Edit icon has a dynamic selector so I need to get rowKey to click on a specific row.

My solution: 

1. First make sure you can use __cy.contains()__ method on some unique element. You can do this on creating this data element in your test or make deal with developers to create test data or fixtures with unique ID or some other property.
2. After catching this element we can use __.then()__ function where magic is happening.

Here is a snippet from my code for example:
```javascript
cy.contains("Unique Data")
      .should("be.visible")
      .then(($el) => {
        console.log($el);
        let elRowKey = $el[0].parentElement.dataset.rowKey;
        cy.get(
          '[data-row-key="' +
            elRowKey +
            '"] > :nth-child(4) > [data-test=edit-email-template] > .anticon > svg'
        ).click({ force: true });

        cy.get("[data-test=disable-delete-tooltip]").click();
        cy.get("[data-test=confirm-delete-button]").click({ force: true });
      });
```
In __then()__ function we pass __$el__ which contains all kinds of data so I use __console.log()__ to see and search 
a specific data I can use to help myself.
After finding elRowKey in __$el__ properties I simply use __cy.get()__ function to get a specific icon on that row using string concatenation with variable in which I put my rowKey.

This way I always get my rowKey on element I want to delete or edit, I hope I helped with this trick and make sure you comment on the post if you find better solution.

Tnx <3
Changing the world with Blockchain
Tags: blockchain, ethereum, bitcoin, nft
Published: 2021-07-20 10:35:44

I recently came across an article by a retired executive titled *'Introduction to NFTs - How they are Going to Change the World...'* and I said cool, I've gotta read this. 

I'm a new full stack developer with a passion towards blockchain technologies. I had known about cryptocurrency since the early days of **Bitcoin**, but no I'm not some genius who bought in for 20 dollars to now be a millionaire. While the joy of waking up one day to your alt coin being up 2,000% sounds great I find the real excitement to be in the technology behind these currencies.

This brings me back to that 'article' (if I could use air quotes I would). Like I said, I was excited to see what this high level executive had to say about NFTs and their potential to change the world, you know, because I believe this technology can be used to change the world. Instead I read three paragraphs that NFTs are ways to display various forms of art and that [Beeple](https://www.instagram.com/beeple_crap) (love his work) sold an NFT for 69 million dollars... *WHAT?!?!* How is that going to change the world? Welcome to the world of art, people will pay tons of money for the ownership of famous art. Yes, with these tokens being controlled by smart contracts an artist will be able to receive royalties of any subsequent sale, which I fully support, but we're not changing the world here.

Sorry for the rant but all that to say I was annoyed and while I'm clearly not the strongest writer I decided to start this blog, **welcome**, to highlight blockchain projects and use cases where this technology can be, and is being, used to change the world. 

I'll be exploring blockchain projects and companies such as [Cardano](https://cardano.org/), [Reserve](https://reserve.org/), [Civic](https://www.civic.com/), [Dapper Labs](https://www.dapperlabs.com/), [Decentraland](https://decentraland.org/) as well as use cases that range from medical record access, to ending blood diamonds, to people able to make a living in the 'metaverse'. 

Each week I will post a new article about some blockchain idea that can actually change the world. So follow along while we learn the bigger picture of blockchain technology and send along any projects you may be working on or have heard about so I can share them here!

--Christian

[Twitter](https://www.twitter.com/toolatetocrypto)
DAY 1 Of Training: HTML AND CSS
Tags: html, css
Published: 2021-07-20 10:31:46

Yesterday was my first day of Training under Ryaz. I am very helpful to the community as well as the mentors who have guided me with every step.

Yesterday task was to follow the tutorials of component libraries HTML5 and CSS3 and to make a website. Component Libraries that I explored were:

* Typography
* Containers
* Links
* Lists
* Navbar
* Header
* Section
* Footer

![screenshot-127.0.0.1_5500-2021.07.20-15_53_08](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va8pkayma28f74bvnkq4.png)


During the task I have encountered many new things I would like to share:

[Undraw](https://www.undraw.co/illustrations) - A good website always follow some kind of pattern, design that will match the theme of your website. Undraw offers various illustrations to beautify the website. For example - illustrations like "programming" or "gaming" or what-not, Everything is provided for free. It also comes with color selector to match the theme of your project.

[Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors) - It offers variations of colors to users so as to match with the theme of the project. A user can also customize the colors as per there need.

[Google fonts](https://fonts.google.com) - As I have already mentioned, A good website always follow some kind of pattern, design to beautify your website. But not only fonts or illustrations alone can do that work. A great part of making a good website is to focus on Fonts. Selecting the perfect font is a difficult job. Google fonts helps the user to find there perfect font and also offers various font styles and widths to go by. A user can simply selects the font and can import these fonts into the project.

These are some new things that I have learnt and I am definitely visiting it again in future.
O que é TDD?
Tags: womakerscode
Published: 2021-07-20 10:23:11

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ryscmqtvkgmbh6ihg3k.gif)
TDD significa Desenvolvimento Orientado por Testes (Test Driven Development), e trata-se de uma prática de desenvolvimento de software onde a codificação das funcionalidades começa a partir da escrita de testes unitários. Essa técnica foi criada por Kent Beck e é um dos pilares do XP (Extreme Programming).

O TDD consistem em um ciclo apelidado de Red, Green, Refactor. Que funciona da seguinte maneira:

1. Escrevemos um teste para uma funcionalidade a qual queremos implementar. Ao executar esse teste ele deve falhar, pois ainda não temos a implementação e assim passamos pelo step red.

2. Após o nosso teste falhar implementamos a funcionalidade e executamos o nosso teste novamente, porém dessa vez o teste passa com sucesso, com isso passamos pelo step green do TDD.

3. Com os testes funcionando chegamos ao step refactor. Como o próprio nome já diz, nesse momento devemos refatorar nosso código procurando pontos a melhorar e aplicando boas práticas de programação.

Esse ciclo pode se repetir quantas vezes o desenvolvedor julgar necessário e a cada nova implementação é interessante que todos os testes que já estão em funcionamento sejam executados, pois assim é possível validar que todos os testes continuam funcionando e que a nova implementação não impactou nas funcionalidades já desenvolvidas.

Os principais benefícios do TDD são:
* Maior cobertura de testes unitários
* Testes são executados com maior frequência 
* O código se torna mais limpo
RouteManager UI coding patterns: Arrays
Published: 2021-07-20 06:29:00


> This is a non-exhaustive list of the coding patterns the [WorkWave RouteManager's](https://www.workwave.com/route-manager/) **front-end** team follows. The patterns are based on years of experience writing, debugging, and refactoring front-end applications with **React and TypeScript** but evolves constantly. Most of the possible improvements and the code smells are detected during the code reviews and the pair programming sessions.

*(please note: I do not work for WorkWave anymore, these patterns will not be updated)*

*(last update: 2022, March)*

- [Prefer Array.map / Array.filter over Array.reduce](#prefer-arraymap-arrayfilter-over-arrayreduce)
- [Use Array.some](#use-arraysome)
- [Use label and breaks](#use-label-and-breaks)
- [For...of](#forof)

## Prefer Array.map / Array.filter over Array.reduce

Sometimes, you don't need `Array.reduce` and both `Array.map` and `Array.filter` are more readable.
```ts
// ❌ don't
const evenNumbers = [1, 2, 3].reduce<number[]>((acc, item) => {
  if(item % 2 === 0) {
    acc.push(item)
  }

  return acc
}, [])

// ✅ do
const evenNumbers = [1, 2, 3].filter(item => item % 2 === 0)
```


## Use Array.some

A lot of times, we forget using `Array.some`.

```ts
// ❌ don't
const someCustomOff = !!customs.find(mode => mode === 'off')

// ✅ do
const someCustomOff = customs.some(mode => mode === 'off')
```

## Use label and breaks

Controlling nested loops is easier with labels.

```ts
// ❌ don't
for(const route of routes) {
  for(const order of route.orders) {
    for(const pod of order.pods) {
      if(pod.id === selectedId) {
        foundPod = pod
      }
    }

    if(foundPod) {
      break
    }
  }

  if(foundPod) {
    break
  }
}

// ✅ do
routeLoop: for(const route of routes) {
  for(const order of route.orders) {
    for(const pod of order.pods) {
      if(pod.id === selectedId) {
        foundPod = pod

        break routeLoop
      }
    }
  }
}
```

## For...of

Classic `for` loops allow using `continue` and `break`, precious to save computations in long loops. `for...of` is the most complete `for` loop because support `Map`, `Set`, and `Promises`.


```ts
// ❌ don't
for(let i = 0; i < array.length; i++) {
  const item = array[i]
  /* ... rest of the code... */
}

// ✅ do
for(const item of array) {
  /* ... rest of the code... */
}
```