teleren/devto huggingface dataset:
Don't become complacent
Tags: agile, pairprogramming, kanbanboard, shiftleft
Published: 2022-09-24 18:25:00

---
title: Don't become complacent
published: true
date: 2022-09-22 00:00:00 UTC
tags: agile,pairprogramming,kanbanboard,shiftleft
canonical_url: https://jhall.io/archive/2022/09/22/dont-become-complacent/
---

I was recently introduced to the concept of [Tickets don’t move left (TDML)](https://agilefixer.com/2017/02/20/agile-board-usage-why-tickets-shouldnt-move-left/), and the question of whether this is a good practice.

It got me thinking. And I won’t go into a detailed analysis of TDML, instead I want to focus on what became my conclusion, because I think it applies to many things:

> If TDML helps your team identify and fix problems, you should use it. But don’t become complacent with TDML as the new status quo.

Immediately after saying this, I realized that this advice can apply to almost anything.

“Should we use a kanban board?”

> If a kanban board helps your team identify and fix problems, you should use it. But don’t become complacent with a kanban board as the new status quo.

“Should we try 1-week sprints instead of 2-week sprints?”

> If a 1-week sprints help your team identify and fix problems, you should use them. But don’t become complacent with a 1-week sprint as the new status quo.

“Should we estimate with story points?”

> If a story points help your team identify and fix problems, you should use them. But don’t become complacent with story points as the new status quo.

“Should we pair program?”

> If a pair programming helps your team identify and fix problems, you should use them. But don’t become complacent with pair programming as the new status quo.

“Should we eat ice cream every afternoon?”

> Yes. Yes, we should. Rocky Road, please.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Environment Variables in GitHub Docker build-push-action
Tags: docker, buildx, github
Published: 2022-09-25 07:35:52

---
title: Environment Variables in GitHub Docker build-push-action
published: true
date: 2022-09-22 00:00:00 UTC
tags: docker, buildx, github
canonical_url: https://justin.poehnelt.com/posts/environment-variables-in-docker-build-push-action/
---

I recently ran into an issue where I was required to pass environment variables into a Docker container. I was using the [docker/build-push-action](https://github.com/docker/build-push-action) to build and push the container and everything was working fine until I needed the `SENTRY_AUTH_TOKEN` environment variable as part of the build step for my NextJS application.

The solution has two parts.

1. Pass the secret as a build argument in the [docker/build-push-action](https://github.com/docker/build-push-action) step.
2. Modify the multi-stage Dockerfile to use the build argument as an environment variable.

### GitHub secret to build-args

This part was easy.

```
- name: Build and push
  uses: docker/build-push-action@v3
  with:
    context: .
    build-args: |
      "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}"
```

### Dockerfile

The Dockerfile change is also straightforward.

```
# The SENTRY_AUTH_TOKEN is used to upload the source maps to Sentry
ARG SENTRY_AUTH_TOKEN
ENV SENTRY_AUTH_TOKEN ${SENTRY_AUTH_TOKEN}
```

The `ARG` and `ENV` lines must be in the same stage of the Dockerfile that requires it. If you have multiple stages, you’ll need to add the `ARG` and `ENV` lines to each stage.

❗ ❗ ❗ The `ARG` value will be accessible to anyone that has access to the Docker image. If you are using a private registry, this is not a problem. If you are using a public registry, you should be careful about what you pass as an `ARG`.

And it works! 🎉
Caching Playwright Binaries in GitHub Actions
Tags: playwright, github, actions, cache
Published: 2022-09-25 07:37:52

---
title: Caching Playwright Binaries in GitHub Actions
published: true
date: 2022-09-22 00:00:00 UTC
tags: playwright, github, actions, cache
canonical_url: https://justin.poehnelt.com/posts/caching-playwright-in-github-actions/
---

I’ve always enjoyed using Playwright, but never want to wait for the binaries to download. I’ve tried a few different strategies to speed this up, but the one I’ve settled on is to cache the binaries in GitHub Actions.

The primary issue that I’ve had with caching the binaries is that while the binaries can easily be cached, the operating system dependencies must also be installed if not present. The key bits are in the following steps of my GitHub workflow.

```yaml
- uses: actions/cache@v2
  id: playwright-cache
  with:
    path: |
      ~/.cache/ms-playwright
    key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
- run: npm ci
- run: npx playwright install --with-deps
  if: steps.playwright-cache.outputs.cache-hit != 'true'
- run: npx playwright install-deps
  if: steps.playwright-cache.outputs.cache-hit == 'true'
```

And it works! 🎉
  
![Output for the GitHub action with Playwright browser binaries cached](https://justin.poehnelt.com/images/playwright-caching-K2LKAMWU_L-600.jpeg)    

If you don’t do this properly, you might run into the following error.

> Host system is missing dependencies to run browsers.

  
![Missing dependencies to run browsers](https://justin.poehnelt.com/images/playwright-missing-dependencies-to-run-browsers-SJj0xZM__5-400.jpeg)    

Without any caching, the build took 1 minute and 43 seconds. With caching, but still installing the host dependencies, the time was 45 seconds, plus about 17 seconds for cache loading/saving, leading to a reduction of about 40 seconds for every build.

![Build time without caching](https://justin.poehnelt.com/images/playwright-build-time-without-caching-5jUEIYCu14-400.jpeg)
How To Sync Data Between Two Databases
Tags: sql, database, linux
Published: 2022-09-21 23:56:37

How can we sync two databases, both copying all initial data, and then finding new and updated subsequent records and delta copying these records?

### The Automated (and Free) Solution

[Redactics](https://www.redactics.com?utm_campaign=delta_database_syncs&utm_medium=web&utm_source=devto) will do this running in your own infrastructure, and is free for developer usage (and we are working on open sourcing our developer-focused offerings). It is a pure SQL solution making it extremely lightweight. Delta updates approach near realtime replication (and are lightweight enough to handle aggressive table operational concurrency), and are fast enough to run every few minutes or so for many use cases.

### The Homemade Solution

If you want to do this yourself, here is an approach that works well:

1. Ensure that each of your tables you wish to sync have numerical primary keys, as most SQL-based databases do (typically auto-incrementing).
1. Then, considering that new primary keys will always be increasing in size, for identifying new rows you can just create SQL queries to search for records with larger primary key values than your last primary key.
1. For updates, ensure that your master tables have an updated date field that is updated each time the record is updated. Then, you can use SQL to search for last updated dates newer than your most recent update. It is okay if you need to search for dates a little older than the present time because there generally is no harm in re-applying the same update to existing data.
1. If you want to write new data to your target database, you'll need a strategy to prevent conflicting primary keys. An approach we like is creating a new column called something like `source_primary_key`, generating CSVs (without headers) using the above two approaches (one CSV for new rows, one CSV for updates), and then piping this CSV into awk to remove the primary key column, and move its value to your source_primary_key column. For example, if your primary key column is your first column and your source_primary_key your fifth column: `cat /path/to/csv.csv | gawk -vOFS=, -F "," "{print $2,$3,$4,$5,$1}" | [your SQL client]`. We found [this library](https://github.com/dbro/csvquote) necessary for handling data that contains quotation marks.
1. For row deletions we generally recommend soft deleting records, which would be treated as an update, since setting the value of a `disabled` field to true would also update this row's last updated date.

Please let me know if you have any luck with either approach!
Python Functions
Tags: python, programming, beginners, 100daysofcode
Published: 2022-09-21 23:55:36

Functions are a convenient way to group our code into reusable blocks.

In Python defining a function looks something like this.

```python
def function_name():
    #function tasks go here 
```

- _def_ keyword indicates the beginning of a function. 
- Following the function name is parenthesis ( ) that can hold input values. 
- A colon : marks the end of the function
- Similar to loops and conditions in python, code inside a function must be indented to indicate that they are part of the function. 

## Calling a function

Now, to call a function you must type out the functions name followed by ( ) parentheses. This does not need to me indented. 

```python
function_name()
```

## Parameters & Arguments

Function Parameters allow our function to take in data as an input value. 

Heres an example 
```python
def welcome_guest(name):
  print("Welcome to our Airbnb!")
  print("We are excited to have you come stay with us" + name)
```
We would use our parameter by passing an argument to the function like this 

```python
welcome_guest("Sam")
```
This would output:

```python
Welcome to our Airbnb!
We are excited to have you come stay with us Sam.
```
Here is a visualization of the distinction between a parameter and an argument

![This is a diagram representing a distinction between a parameter and an argument](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wln90gv1etalvzacx3e.png)
Reflect on Lab 2.
Published: 2022-09-21 23:47:01

**My forked git repo: https://github.com/liutng/pdrozd-ssg**
**Original git repo from Piotr: https://github.com/P-DR0ZD/pdrozd-ssg**

In Lab 2 I forked Piotr's GitHub repo and I added markdown language support to his project, then I tested the already-existing functions to make sure that I didn't break anything. After knowing all functions are working well, I updated the documentation accordingly. In the end, I created a Pull Request to ask Piotr to review my code and allow my code to be merged into the main branch of his repository.

In order to get my pull request accepted, I contacted Piotr on Slack asking him nicely to review my modification of the code. After his testing, he found a few indentation issues on the final output HTML, although it doesn't affect the final output, he still asked me to provide a fix to it. After having the indentation issue fixed, he finally accepted my PR and the markdown feature is added to the original repository. 

During this lab I noticed that I made 2 mistakes, the first one is the fact that I neglected the part where we are supposed to create an issue branch first before we start coding, which means I directly modified the main branch on my forked repository which violates the git flow of how functions should be added, so I had to backup my code and delete the forked repository to fork it again. The second issue I had was that I didn't read his code carefully which causes my indentation issue. 

The lesson I learned from this lab is that, as software engineers, we should always read the documentation carefully, because most of the software requirements are conducted through documents, if we don't read it carefully, we will have to rework a lot which takes a toll on our working efficiency.

Also Piotr forked my repo and added functions to it. During the testing of his code, I found an issue about the input file of md, after talking to him on Slack, I found out it was an issue with the extension of the testing files, after fixing the issue and having the existing functions tested without any problem, I accepted his Pull Request and annotated the PR with some detail information.
Configure Vultr CORS to accept direct uploads from Active Storage
Tags: rails, cors, vultr, s3
Published: 2022-09-21 23:20:25

When I configured Rails' Active Storage to use Vultr Object Storage everything looked fine but when I tried to upload some images from Action Text I got red messages in the console. Something was not working ok.

I went to Rails Guides, to Active Storage Overview and then to Direct Uploads. In section [9.2 Cross-Origin Resource Sharing (CORS) configuration](https://edgeguides.rubyonrails.org/active_storage_overview.html#cross-origin-resource-sharing-cors-configuration) they offer some information on how to configure CORS for the main services but... where's Vultr?

Turns out Vultr has an API that's compatible with a subset of the S3 API. Luckily they share CORS configuration. And they even have a [wiki page explaining how to configure it](https://www.vultr.com/docs/how-to-apply-cors-policies-to-vultr-object-storage-buckets/).

I'm just writing this here in case the official information disappears from the internet.

In order to configure this thing you can use a tool named [s3cmd](https://s3tools.org/s3cmd). It's available from [brew.sh](https://formulae.brew.sh/formula/s3cmd#default).

Before uploading the configuration to Vultr you have to configure the tool. Vultr has all the steps on [it's wiki](https://www.vultr.com/docs/how-to-use-s3cmd-with-vultr-object-storage) but I'm going to copy here the basics.

Run the configuration script:

```
$ s3cmd --configure
```

Ignore the region, and set `ewr1.vultrobjects.com` as the S3 endpoint. The DNS-style template for accessing a bucket is `%(bucket)s.ewr1.vultrobjects.com`.

Now you have to create an xml file with the content:

```
<CORSConfiguration>
<CORSRule>
    <ID>Get and put from/to Vultr Object Storage</ID>
    <AllowedOrigin>http://example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>Origin</ExposeHeader>
    <ExposeHeader>Content-Type</ExposeHeader>
    <ExposeHeader>Content-MD5</ExposeHeader>
    <ExposeHeader>Content-Disposition</ExposeHeader>
    <MaxAgeSeconds>3600</MaxAgeSeconds>
</CORSRule>
</CORSConfiguration>
```

You can add as many `AllowedOrigin` as you need. Maybe with `https`, `www` subdomain, ...

And then run the command:

```
$ s3cmd setcors RULES_FILE.xml s3://BUCKET_NAME
```

This should be enough to both upload and get images from the buckets.
Removing duplicates
Published: 2022-09-21 22:52:15

Challenge
Given an integer array nums sorted in non-decreasing order, remove the duplicates in-place such that each unique element appears only once. The relative order of the elements should be kept the same.

Since it is impossible to change the length of the array in some languages, you must instead have the result be placed in the first part of the array nums. More formally, if there are k elements after removing the duplicates, then the first k elements of nums should hold the final result. It does not matter what you leave beyond the first k elements.

Return k after placing the final result in the first k slots of nums.

Do not allocate extra space for another array. You must do this by modifying the input array in-place with O(1) extra memory.

**Solution**
The initial approach I took was the  filter and indexOf method on the array to sort the unique elements

However this approach gave me slight challenge so I had to think a little hard to create a new algorithm to solve it.

Algorithm

- Check the first two arrays for duplication

- if they are duplicates, replace the second array index with the next array index

- if they are not duplicates, leave arrays the same
Understand synchronous Vs asynchronous code in Js
Tags: javascript, beginners, codenewbie, webdev
Published: 2022-09-21 22:43:14

**Synchronous code** runs step by step where each step has to wait for previous one to be executed.

Example:

```
console.log("Hello Friends");
console.log("Hello");
console.log("Nice to meet you");
```

Here each line will execute then next until all finish.

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

**But for asynchronous code** it doesn't respect order stuff ,it get executed out of sequence.
Example:

```
console.log("Hello");
setTimeout(()=>console.log("Wait for 3 Second"),3000);
console.log("See you again");
```
First line will execute and last while for second one it has to wait for 3seconds to it will execute last.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2kd2v34xwu7ptzn5wo4.png)
I'm grateful that you took the time to read my writing, and I hope it will help you develop. Let's collaborate to brighten the future. All of my primary profiles are available on [My Github](https://github.com/twizelissa)
#10daysofcodechallenge by Ingressive for Good (#Day 1)
Published: 2022-09-21 22:10:18


I've just begun a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 1 of the challenge.

Let me briefly describe how the challenge works before I share my experience with you. From September 21 through October 30, 2022, the challenge is to solve one common algorithm problem every day for ten days.

Today's algorithm problem was "Removing duplicates from a sorted list". It is the 26th algorithm challenge on "Leetcode.com"

I'll now share my experience. This was a little difficult for me because I had never really dealt with algorithm issues before. To do this, I had to understand the two pointer algorithm's basic principles. I created a solution utilizing nested for loops, which worked on my local system but was rejected by Leetcode since it did not adhere to their specifications.

For my final solution, I created a variable to act as a position pointer and a for loop to iterate through the array. At each position of the pointer, the loop is run to compare the value at that position and the pointers position; if they are the same, the values at the two positions are swapped, and the pointer is incremented. The last sorted array, where "n" is the "final pointer value," is returned if its first "n" elements are unique.

I utilized javaScript to solve the issue, which had a runtime of 88 milliseconds and consumed roughly 44.4 MB of memory.
27-React File Manager Chapter XXVII: The Final Chapter
Tags: react, typescript, mongez, javascript
Published: 2022-09-21 22:06:59

---
title: 27-React File Manager Chapter XXVII: The Final Chapter
published: true
description: 
series: File Manager React Mongez
tags: react, typescript, mongez, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nh2nxz1ab50gp1l2vzct.png
# Use a ratio of 100:42 for best results.
---

To this point, we've just moved through the project from a very easy steps to harder and advanced steps.

## Low Level Code

There was a lot of low level code here specially in the kernel and the core, but we've managed to make it as simple as possible.

## Event Driven Architecture

We've used the event driven architecture to make the code more flexible and easy to maintain.

## Hooks

We used numerous hooks either builtin hooks in React our created our owns.

## Typescript

The project is fully written in typescript which will make it much cleaner.

## Eslint and Prettier

We've used eslint and prettier to make the code more readable and consistent.

## Code Refactoring

We wrote a lot of code, and we've refactored it many times as well, so you can see how refactoring should be done properly.

This will also tell you that you should not thinking about the best code but the least quality should not be **compromised**.

## Testing

The only thing we didn't do in this project is the testing, but we'll use TDD in the next project.

## What's Next?

Well, at this point i'll continue developing the project by my own in my free time, I'll go over the other features that i mentioned in the first chapter and do more improvements.

## You can help me

If you like this series, you can help me by sharing it with your friends, and if you want to support me, you can do it by buying me a coffee.

You are more than welcome to contribute to the project by opening issues or pull requests.

## Project Repository

You can see the entire project files and each chapter standalone in [Github Repository](https://github.com/hassanzohdy/file-manager-react)

## Tell me where you are now

If you're following up with me this series, tell me where are you now and what you're struggling with, i'll try to help you as much as i can.

Salam.
A word of warning when writing C# benchmarks
Tags: csharp, beginners, programming
Published: 2022-09-21 21:57:39

I wrote [a post on the free, open source tool BenchmarkDotNet](https://dev.to/glsolaria/you-need-to-know-about-benchmarkdotnet-kok) but I wanted to mention a common pitfall that you might fall in to if you are not careful.

The warning is simple: when writing benchmarks, always use the results of your calculations. 

Consider these benchmarks ...

```csharp
[Benchmark(Baseline = true)]
public void Sqrt1()
{
    for (var ii = 0; ii < N; ++ii)
        Math.Sqrt(ii);
}

[Benchmark]
public double Sqrt2()
{
    double result = 0;
    for (var ii = 0; ii < N; ++ii)
        result = Math.Sqrt(ii);
    return result;
}
```

If we look at the results of the above benchmarks ...

| Method |       N |       Mean |    Error |   StdDev | Ratio | RatioSD | Rank |
|------- |-------- |-----------:|---------:|---------:|------:|--------:|-----:|
|  Sqrt1 | 1000000 |   291.8 us |  5.79 us |  6.66 us |  1.00 |    0.00 |    1 |
|  Sqrt2 | 1000000 | 4,006.9 us | 55.00 us | 51.45 us | 13.64 |    0.29 |    2 |

How can `Sqrt2` be almost 14 times slower than `Sqrt1`? The answer lies with the JIT compiler ...

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

[SharpLab](https://sharplab.io/) is another great tool that will show you what the JIT compiler will do initially. In the case of `Sqrt1`, it will compile out dead code because the result of the square root isn't used so it doesn't need to run the instructions to perform the square root. 

So be careful with how you write your benchmarks otherwise you may not be measuring what you think you are measuring!
14G Day 1 - Remove Duplicates Leetcode Challenge
Published: 2022-09-21 21:42:18

I achieved this using the while loop and the splice method for JavaScript arrays.

I stored the index of the first and second elements in the array in the variables, `current` and `next` respectively. I looped through the array at every element, checked if the current element is equal to the next element. If this returns true, I use the splice method to remove that element. On the other hand, if it returns false, I set the `current` variable to the next index and subsequent the `next` variable.

At the end of the loop, I return the length of the array.
Webpack source-map don't work!
Tags: webdev, javascript, beginners, programming
Published: 2022-09-21 21:41:26

My webpack doesn't work on google chrome.

For some reason devtool is not working at google chrome, if anyone knows how to resolve, give me a help!! I tested a lot of stuff and it didn't work, more than 10 answers from stackoverflow, tutorials, videos, etc. I'm lost! 

For people who didn't test in Firefox, maybe it's working there, so you don't need to stop your projects...