teleren/devto huggingface dataset:
Two ways to configure preview environments
Tags: cicd, tooling, previewenvironments
Published: 2022-09-19 07:20:26

---
title: Two ways to configure preview environments
published: true
date: 2022-03-24 00:00:00 UTC
tags: cicd,tooling,previewenvironments
canonical_url: https://jhall.io/archive/2022/03/24/two-ways-to-configure-preview-environments/
cover_image: https://jhall.io/images/bn-coming-soon-cinema.jpg
---

Are you able to test a partial or completed feature _before_ you merge it?

In other words, do you have some way to run your work-in-progress from a feature branch?

This is a huge advantage for a number of reasons. Perhaps most obvious, it reduces cycle time, and lets you work in [smaller batches](https://jhall.io/posts/2022-02-24-small-batches/). It’s also a great way to show incomplete or proof-of-concept work to stakeholders, or even customers.

I’ve worked with many companies that don’t. Many have something they call “staging”, which is usually where code goes _after_ being merged, but before being made generally available to customers. There are historical reasons for such an arrangement, but it has limited to no relevance in a modern software delivery.

 ![](https://jhall.io/images/staging-gitflow.png)

The gold standard for a prereview environment would be one that’s created on the fly for each pull request. If you have 8 devs, each with an open PR, that means you have 8 running prereview environments. This approach requires a bit of up-front effort, and isn’t always easy for certain legacy applications. But it’s practically always worth the effort, because of the surprising productivity boost it provides.

Another option is to just replicate (or repurpose) your “staging” environment as a “prereview” environment, and push to it willy nilly.

If you need to test something you’re working on, just force-push it to your “prereview” branch. Maybe announce your intention on Slack first, in case a colleague is already using the prereview environment.

 ![](https://jhall.io/images/preview-trunk.png)

If you don’t have a preview environment of some kind, what’s standing in your way? Send me an email and let me know!

Or if you haven’t already, take my free email [Lean CD Bootcamp](https://jhall.io/lean-cd-bootcamp/) to help you get there sooner.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to control [limit] network bandwidth in linux 🐢
Tags: bash, network
Published: 2022-03-23 13:13:30



![](https://images.pexels.com/photos/3799830/pexels-photo-3799830.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)

this article will help you limit your network bandwidth using [wondershaper](https://github.com/magnific0/wondershaper) tool !!

## Why to limit bandwidth?

there are a lot of reasons you would do that,
it is very useful when you are trying to :

1. control your internet quota or
2. throttle internet connection to know how certain app or service work on slow connections .
3. have more than one wifi adapter and need to control the speed each one connects to internet 
4. any other reason IDK about 🤷🏻‍♂ !  

so here we go 

## 1. install wonder shaper tool 


```bash
sudo apt install wondershaper  [On Debian/Ubuntu]
sudo yum install wondershaper  [On CentOS/RHEL]
sudo dnf install wondershaper  [On Fedora 22+]
sudo pacman -S wondershaper [ on Archlinux and based systems]
```

## 2. find your interface name

you need to find your wifi card id that you will limit by running this command 

```bash
ifconfig
```

output will be like 
```
br-85a34b55f6de: flags=4099<UP,BROADCAST,MULTICAST>  mtu 1500
... other stuff 

lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536
... other stuff 


wlp2s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
... other stuff 

```
so here my wifi adapter name is 'wlp2s0' and lo is wired ethernet , you should know the one you need by other info like the ip or data usage , but if you have one wifi adapter it is usually wlp2s0.

## 3. run this command with your adapter name 

```bash
sudo wondershaper -a wlp2s0 -d 4000 -u 1024
```
with the -d argument represents download speed in kb and -u represents upload speed in kb

## 4. to clear the limit and have full internet speed you run 

```bash
sudo wondershaper -c -a wlp2s0
```
you also need to run this command before applying any new limit on the same adapter 

## 5. I've made shell scripts to help you switch easily between high speed and low speed 
you can find them in 👉🏻 [this gist](https://gist.github.com/egyleader/ef17e951014f5236bf9f6c3dba665863)
Setting Up My Windows Dev Environment
Published: 2022-03-23 23:40:00

---
title: Setting Up My Windows Dev Environment
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

A bit of context for this post, I prefer UNIX environments for development work, and previously only used Windows for gaming/general use. But having recently (when I wrote this originally in October 2021) started a new job at a company that uses a Windows environment for development, I found myself having to learn to adapt. For future reference, I'm documenting what things I have installed and need for development. I'm also open to suggestions and changes for useful things if you have any

## VSCode
My code editor of choice.

## Windows Terminal
Installed from the Microsoft Store, this is just a nicer experience than plain Powershell in my opinion.
Mike Larah wrote a good [post](https://endjin.com/blog/2020/05/5-tips-for-an-awesome-windows-terminal-experience) on customising this

## Chocolatey
A package manager for Windows
Allows you to install software from the command line, works similar to `apt-get` on UNIX machines.
[link here](https://chocolatey.org/)

## Docker
`choco install docker-desktop`

## WSL
Mainly because Docker requires it:
[link here](https://docs.microsoft.com/en-us/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package)
Docker Desktop will also prompt for this to be updated.
Page to page loading in next.js
Tags: nextjs, tutorial
Published: 2022-03-23 22:49:53

I am a huge advocate of minimalist websites, I don't hate heavily overly designed websites with animations and designs but they have a place. Talking of animations, one thing you do want is a way to handle moving between pages and loading data.

## Handling loading through next/router

One great feature of `next``/router` is the ability to tap into the events that happen during a route change. This means you can use these to handle loading. So what are the events we need? We need route change events

```
routeChangeStart
routeChangeComplete
routeChangeError
```

With these three events and `useEffect` and `useState` you can handle each route change on your application. For example

```
function Loading() {
  const router = useRouter();

  const [loading, setLoading] = useState(false);

  useEffect(() => {
      const handleStart = (url) => (url !== router.asPath) && setLoading(true);
      const handleComplete = (url) => (url === router.asPath) && setTimeout(() =>{setLoading(false)},2000);

      router.events.on('routeChangeStart', handleStart)
      router.events.on('routeChangeComplete', handleComplete)
      router.events.on('routeChangeError',  handleComplete)

      return () => {
          router.events.off('routeChangeStart', handleStart)
          router.events.off('routeChangeComplete', handleComplete)
          router.events.off('routeChangeError', handleComplete)
      }
  })
  
  return loading && (
    <div>loading</>
  )
}
```

### What is happening?

Now you have an example to look at, let us talk about what we are doing to make a loading function. First we are setting a state of `loading` as a boolean. This allows you to easily swap between it is and is not loading, we are then using `useEffect` to power the checks. The `useEffect` here has two functions one to handle the starting and one to handle when it is finished, we then use the `router.events` mentioned above to decide what function should run. If we are starting, it should run handleStart which sets loading to true. Otherwise it's finished and we should set loading to false.

Finally we have a conditonal renderer that only shows if it is indeed loading.
What success means
Tags: discuss
Published: 2022-03-23 22:24:22

#### This will be a small post until I have more ideas on what to post

## Success to me

To me, success isn't about money, fame, or anything, if you have a goal, and you even complete some of that goal, that's what success is. For example, if you have this cool idea you want to make from scratch like a Discord bot, once you have made that bot, that's success. 

### Success in terms of programming

Some of us programmers expect to get a lot of money from this, don't lie I know you want that. That may be what success means to you, programming something big and having it take off, but just because something doesn't take off the way you expected doesn't mean you didn't succeed. Even if you complete the first page of a website you wanted to make that is success. Success doesn't need to be this big thing. Set goals for yourself and achieve those goals, now that is success. If you have an idea, make that idea a reality! Don't let anyone talk you down from it.
Illustrated Snapshot Testing
Tags: testing, react, productivity, codequality
Published: 2022-03-23 22:15:17

First, I want to say that for many cases you don’t need to use snapshot testing. You can find a good article here: [What Are Proper Use Cases For Snapshot Testing React Components?](https://www.chakshunyu.com/blog/what-are-proper-use-cases-for-snapshot-testing-react-components/). 

Second, if you are interested in software quality and testing then it is better to know about tools and concepts although some of them are rarely used.

Let's take a look at how snapshot testing works ( example is in Jest ):
`expect(component).toMatchSnapshot();`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfoqu1eq93yfc5jr79xn.png)
 
The process:
![Snapshot testing process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x950kgxwfdcy2jc7yzfb.png)
 
 

The result:
![Snapshots are code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pq9aajnyopamokfuwhe8.png)
 

![Nextjs snapshot testing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka17ka3a16uai6wgpnmb.png)
  

Some tips:
- Visual regression testing tools take screenshots of web pages and compare the resulting images pixel by pixel.
- With Snapshot testing values are serialized, stored within text files, and compared using a diff algorithm and this is why it's made.
- Commit snapshots and review them as part of your regular code review process.

![Snapshot testing Visual regression testing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aoncc6g46lj38rnpjw0p.png)
 
**Resources:**

[Jest Snapshot Testing](https://jestjs.io/docs/snapshot-testing)
[Youtube](https://www.youtube.com/watch?v=sCbGfi40IWk)
[Snapshot testing React components with Jest](https://medium.com/@luisvieira_gmr/snapshot-testing-react-components-with-jest-3455d73932a4)
How to manage interests on dev.to
Tags: dev
Published: 2022-03-23 22:00:22

Hi, I have been wondering gow you can modify the tags you are interested in Forem. I remember entering them during setup and now I can modify their weights, but I do not see a way to add new ones.

Am I blind, is this hidden somewhere or is the final test that you can only change them via a hidden API:) ?
Google Chrome Developer Tools – Part 3
Tags: debugging, javascript, technology
Published: 2022-03-30 13:44:56

---
title: Google Chrome Developer Tools – Part 3
published: true
date: 2022-03-23 21:58:08 UTC
tags: Debugging,JavaScript,Technology
canonical_url: https://bugfender.com/blog/google-chrome-developer-tools-part-3/
---

This is the last part of the Google Chrome Developer tools article. In this post we will share show you more of the new Developers Tools that Google has added to Chrome. Remember that Google Chrome Dev Tools is a set of powerful tools that help developers to build better webs.

If you haven’t done it yet, you can read [the first article of the series](https://dev.to/bugfenderapp/google-chrome-developer-tools-part-1-jjk) and [the second one](https://dev.to/bugfenderapp/google-chrome-developer-tools-part-2-2g38).

## Device Emulation

If you want to test how your site works on different devices, you can use the device emulation available in Google Chrome that provides a list of common devices you can use for testing.

<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/E8Vrzpc181o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

## CORS Errors

Probably, while writing a new app that uses a custom API, you have faced the CORS error. You can easily debug CORS errors using Google Chrome.

<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/Yt07-2Ey-5c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

## Copy CSS declaration

Check how you can easily copy CSS styles to use in your JavaScript applications.

<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/id6f6R9n34M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

## Where To Go From Here…

I hope you found the article insightful! In this first article, we have covered the last 3 of the new Dev Tools, if you want to learn more about all the tools offered by Google Chrome, you can check [the first article of the series](https://dev.to/bugfenderapp/google-chrome-developer-tools-part-1-jjk), [the second article](https://dev.to/bugfenderapp/google-chrome-developer-tools-part-2-2g38) or you can check the official Google Chrome link:

[https://developer.chrome.com/docs/devtools/](https://developer.chrome.com/docs/devtools/)
Paracetamol.js💊| #84: Explica este código JavaScript
Tags: javascript, webdev, spanish, beginners
Published: 2022-03-23 21:38:35

## **Explica este código JavaScript**
Nota que en la línea `edad:7,` termina con `,` pero no hay ninguna sentencia del objeto `perro` después 😯

```js
const perro = {
  id:1,
  nombre:"Boby",
  edad:7,
};
```

**A.** El código es incorrecto, no es posible escribir una `,` al final de una sentencia de objeto.
**B.** El código es correcto, esta característica de javascript se denomina **Trailing commas** y es perfectamente válido.

Respuesta en el primer comentario.

---
Testing and Mocks
Tags: go, testing, systems, architecture
Published: 2022-03-23 21:22:07

## 🔥 Hot Take 🔥

- Any library which provides an interface to a dependent resource should also provide a mock of the interface.
- As a library evolves, so too should its mocks.
- These mocks should handle most standard cases, and attempt to avoid solving edge cases.
    - Edge cases should be handled by a mocking tool, or by the consumer creating their own custom mock.
- Having the library be opinionated about mocks helps keep testing and usage more consistent across consumers

---

Testing can be difficult to do. Mainly it can be difficult to find the effort to write a test for a new feature you’ve added which has coupling with necessary dependencies. Worse, as a system evolves the number of dependencies often grows and their interfaces change. To have a solid basis of social/solitary unit testing effective mocking of these resources is essential.

*There are libraries which are able to generate methods for interfaces of dependent resources. I have a couple of gripes with these.*

### Mainly...

...they can often be overly complex and have an API surface area beyond any need we would have. I don’t want to count the number of times when talking with another engineer about how to test something that a bike shedding session is started scouring the mock library api. Often the problem with these libraries is that they are trying to address every use case their consumer might encounter.

I will admit that these mocks can unblock writing tests in a system that is unknowable and tightly coupled. They’re extremely useful in these scenarios when we just *want tests*. However, most of the time it’s best to detangle the coupling and understand the system better. After all, tests are giving us assurance that our features work, don’t we want the assurance of understanding our system and potential side effects of features? Yes, we do.

### An Alternative

Any library which provides interface to a dependent resource could provide an opinionated mocking of the interface. Usage of this mocking would still requires understand of the system and any unhandled effects that a generated mock could not. Instead of interacting with a mock where you must provide the response, you can interact with the resource in your test as you would in code.

An additional benefit is a single source of truth for mock. Given a lib with semantic versioning, the mock can be tied to the version of the interface. A downside to generated mocks is that the consumer usually generates their mocks based off the dependencies interfaces and stores them locally. If a generated mock is sufficient for a dependency, the maintainer could determine that, generate and provide a single source of mocking truth for consumers.

To see more hip-shot thoughts on this, read the hot-takes at the top.

---

I think I’ve said everything I want on this topic.

What is your experience using generated mocks vs mocks provided by a library?

Or perhaps, what has your experience been writing mocks vs generating mocks?
DECK V4 for Windows is here 🎉 💖
Tags: webdev, productivity, php
Published: 2022-03-23 21:21:53

We are finally here with the windows version of DECK V4.
Here is all you need to know.

## How and where to get DECK on your windows system?

- Go to the [DECK Windows Download page](https://get-deck.com/download-windows/). 

- Hit the Download button and install.

Yeah, It's just one click away... 😃

## Why delay on the releasing windows?
Since working on V4, we have focused on a faster and smoother experience on each OS platform. So we are happy to announce that now **DECK** is using **WSL2** for the windows version, which can provide a speedier experience.

So if you are a windows lover and a web developer, [try DECK today](https://get-deck.com/download-windows/) 💜.
Let's play voice Tic Tac Toe
Tags: hackwithdg, react, javascript, firebase
Published: 2022-03-23 21:20:49

### Overview of My Submission
As we all are sometime tired to write a lot code and don't want to make hands dirt on keyboard & just wanted to relax, Well I have a game which you can play without keyboard, Yes its true, here is "Tic Tac Toe" voice game, its a simple game on which you can create account just by enter any name then create a room for game, the other person he/she is your friend or not can enter the game and you both can play voice Tic Tac Toe.
How to use it? 
* Step 1: Create account by enter any name or number
* Step 2: Create a room if you want or join a room from a list after create account
* Step 3: To play I have divided the boxes in such indexes
11,12,13
21,22,23
31,32,33
user just need to say e.g. "one one", that all.
* Fact: I am still working on it to make it better.
* Update (3/29/2022) : I have fix the issue most users was facing, now try it and a feedback would be helpful, I am also adding new game. (guess the alphabet).
* Update (3/31/2022) : I have update a new UI for game, you guys can check it out, also i am still doing some development on a other game which will be available in this web App.


### Submission Category: 
* Gram Gamers
* Wacky Wildcards

### Link to Code on GitHub
{% embed https://github.com/zainbinfurqan/dev-x-deepgram %}

### Link to the tool live demo
https://voice-tictactoe.herokuapp.com/

### Additional Resources / Info
* instruction video: https://streamable.com/reby7z 

 
Small demo of game 
![Game demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0buqyivs5zwv1lskqe9p.gif)
./bin/commits-since-last-production-deploy
Tags: heroku
Published: 2022-03-23 21:10:53

When you work in a team, with multiple people taking on responsibility for moving work into production, it can mean that you are never 100% confident whether the current `main`/`master` branch has been fully deployed or not. What's running on prod?

Or rather, what's **NOT** running on prod yet?

Can I deploy my new commits merged into `main` through to production because they are all mine, and mine alone?

Or are there some gnarly new contributions that have been foisted on to the shared work branch, and you thoroughly want to review them before you take responsibility for sending them off into production, and potentially causing problems for customers, support team, and then the dev team in a few minutes or hours?

I wrote a script to that I have started adding to every Heroku-hosted project `./bin/commits-since-last-production-deploy` that is shown below and [hosted on a Gist](https://gist.github.com/drnic/b0be3d3bb27abb5635955bf93bed1b6a).

To compare the current branch against a specific Heroku application:

```bash
./bin/commits-since-last-production-deploy -a myapp-stg
```

Any additional args are forwarded on to the `git log` command, such as `--oneline`:

```bash
./bin/commits-since-last-production-deploy -a myapp-stg --oneline
```

If you have a default `heroku` remote so you can `git push heroku HEAD:main` like a wild thing, then you can drop the `-a` flag:

```bash
./bin/commits-since-last-production-deploy
```

The script is below, and is [hosted on a Gist](https://gist.github.com/drnic/b0be3d3bb27abb5635955bf93bed1b6a)

```bash
#!/bin/bash

help() {
  echo "Usage: ./bin/commits-since-last-production-deploy [-a myapp ] [ -h ]"
  exit 2
}

if ! command -v heroku &>/dev/null; then
  echo "Install 'heroku' CLI"
  exit 1
fi

if ! command -v jq &>/dev/null; then
  echo "Install 'jq' CLI"
  exit 1
fi

while getopts 'a:h' opt; do
  case "$1" in
  -a)
    appname="$2"
    shift 2
    ;;
  -h | --help)
    help
    exit 2
    ;;
  esac
done

last_deploy_result=$(heroku releases ${appname:+-a $appname} --json | jq -r ".[0].description")

if [[ $last_deploy_result =~ ^(Deploy (.*)) ]]; then
  sha="${BASH_REMATCH[2]}"
  git log "$sha"..HEAD "$@"
else
  echo "Last deploy to production did not succeed"
  echo "--> $last_deploy_result"
  exit 1
fi
```

Fundamentally, this runs `heroku releases` on your app, gets the Git SHA-1 that was deployed, then compares it against the list of commits on the current branch.

If you see no output, then there are no new commits that are not yet on production. You are free. Production is all yours. BWAHAHA.