teleren/devto huggingface dataset:
Test your tests
Tags: tdd, qa, agile
Published: 2022-06-29 13:18:34

---
title: Test your tests
published: true
date: 2022-02-06 00:00:00 UTC
tags: tdd,qa,agile
canonical_url: https://jhall.io/archive/2022/02/06/test-your-tests/
---

One complaint I often hear lodged against the idea of Test-Driven Development (TDD), or sometimes more broadly against automated testing in general, is the idea that the tests could be wrong, too!

If you have an assertion that proves that calling `Add(1,2)` returns `5`, then you’re only testing that your code is actually wrong.

Obviously, this sort of thing _does_ happen at times. I’m sure we’ve all seen a case where some unit test asserted something wrong… and the code happily satisfied the assertion.

But this is usually pretty rare. Especially if you’re doing TDD.

Why?

Because TDD has a built-in “check” bit.

The basic pattern when doing TDD is often called “Red - Green - Refactor”. Spelled out, that is:

- **Red:** Write a test that fails (triggers a **red** light in your test suite)
- **Green:** Write the minimal amount of code that can cause the test to pass (make the test suite **green** again)
- **Refactor:** Now simplify the code _and_ tests to be as simple as reasonable.
- Repeat.

The **Red** stage of R/G/R is the TDD check bit. It’s the part that tests that the test “works”. If you [write a test that doesn’t turn red](https://jhall.io/archive/2022/02/05/the-importance-of-seeing-red/), your test is broken!

This won’t detect every possible broken test, obviously. But it’s a really good start!

* * *
_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 embed YouTube videos into dev.to posts
Tags: dev, devto, youtube
Published: 2022-02-05 23:47:15

---
title: How to embed YouTube videos into dev.to posts
published: true
description: Just one line of code to embed YouTube videos into your dev.to posts
tags: dev, devto, youtube
---

First, go to the Youtube video you'd like to embed and have a look at the url, it should look something like this:

```
https://www.youtube.com/watch?v=<your-video-url>
```

Right after the `v=` part you should find your video id, so for example in the following case `l4kFO6VQPfA` would be our id:

```
https://www.youtube.com/watch?v=l4kFO6VQPfA&t=1s
```

Now, create a new post on dev.to and add the following liquid tag:

```
{% youtube <your-video-id> %}
```

So, in our example it would be:

```
{% youtube l4kFO6VQPfA %}
```

**Important:** Do not copy other parts of the url. For example in our case we did not copy `&t=1s` at the end of the url.

Hope this was helpful :-)

## Links

- [My YouTube channel](http://www.timoernst.tv)
- [My Blog](https://www.timo-ernst.net)
- [My Twitter](https://www.twitter.com/timo_ernst)
Azure Virtual Machines
Tags: azure, az204
Published: 2022-02-05 23:46:42

Azure Virtual machines and what makes it different ?

first we will discuss what is Azure virtual machines and what is consists of :

> 
An Azure virtual machine gives you the flexibility of virtualization without having to buy and maintain the physical hardware that runs it
> 
there are 3 common ways to use Azure Vms :

1.Development and test.
2.Applications in the cloud.
3.extended datacenters.


Azure virtual machines Components : 



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

1. Resource Group
2. Vm size
3. Network
4. Images [Ubuntu - Windows] 
5. Virtual Disk [ Storage ]

But How To Create Vms :
there are four ways to create resources in Azure 



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

1. Azure Portal 
2. Azure CLI
3. Azure Powershell[Az Module]
4. Azure ARM Templates

but Note Azure Portal Cannot create VM Programmatically

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

Note the Order of these steps when you create Vms Programmatically 

1. Create Resource Group 
2. create the Virtual Machine 
3. Ensure Remote Access Port is open 
4. retrieve the public IP address


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

first let's create a VM using Azure CLI :


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

notice the different in creation Vm with windows image and Ubuntu image 


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

then Enable Remote Access 


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

Let's Create a VM using Azure Powershell ,
main advantage of powershell [Az Module ]

idea of storing variables in powershell script


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

and finally create a VM with ARM Templates 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czvzhfcy10vshcicjyo0.png)
How to Enable Autoplay for SwiperJS React
Tags: swiper, react, javascript
Published: 2022-02-05 23:38:48

---
title: How to Enable Autoplay for SwiperJS React
published: true
description: In this quick video tutorial I will explain how to activate the autoplay feature in Swiper for React.
tags: swiper, react, javascript
canonical_url: https://www.timo-ernst.net/blog/2022/02/06/how-to-turn-on-autoplay-for-swiper-react-enable-javascript-carousel-tutorial/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui4wkemf4j4aarukzz2w.jpg
---

I'm often asked how to activate the autoplay feature in Swiper React carousel galleries, so I made a quick 5 minute tutorial video about it:

## Turn on autoplay for Swiper React video

Was this video helpful? If so, why not subscribe to my [YouTube channel](http://www.timoernst.tv) so you don't miss on the next tutorial video :-)

{% youtube tmNtM0Gin-E %}

## Links

- [Source code](https://github.com/valnub/swiper-autoplay)
- [My YouTube channel](http://www.timoernst.tv)
- [My Blog](https://www.timo-ernst.net)
- [My Twitter](https://www.twitter.com/timo_ernst)
Personal Blog Website using HTML CSS JS
Tags: css, javascript, beginners, tutorial
Published: 2022-02-05 23:15:38

{% youtube HtRTmkd5Nsg %}

How to make personal blog website using html css javascript

In this video, I will show you how to create (mobile-first responsive) personal blog website.

[Live Website](https://codewithsadee.github.io/devblog-personal-blog-website/)
[Github Repo](https://github.com/codewithsadee/devblog-personal-blog-website)
[Source Code](https://drive.google.com/file/d/1R95l6ny2e9GwgQ2OTbGuPxg_1z8hZdN1/view?usp=sharing)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)
🕐 New Videos Every Week

---

🔗 Essential links
-----------------------------
[All Images](https://drive.google.com/file/d/1dIhdwJ4Q8kyaQojuR8spC95APned2z2q/view?usp=sharing)
[Html Text](https://drive.google.com/file/d/1sbOYzD1KXronY9jqaRuqZBYw6ZdkBszt/view?usp=sharing)
[Font - Inter](https://fonts.google.com/specimen/Inter?query=inter)
[Ionicon](https://ionic.io/ionicons)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
4:37 - File structure
5:03 - Html initial
5:47 - Css variables, reset & base style
10:40 - Header section
19:56 - Hero section
24:52 - Blog section
37:06 - Aside
40:26 - Footer
45:26 - Navbar javascript
47:14 - Media queries
1:08:49 - Light/Dark mode

---

💜 Like - Follow & Subscribe Me
-----------------------------
Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
IAANSEC - BrickRoll (Official Write Up)
Tags: security, ctf, tryhackme, thm
Published: 2022-02-05 22:44:40

# Witness the Rick Astley Experience NOW!
*Developed by L0WK3Y*

## Intro

***"Odd, I clicked on the Rick Astley Simulator icon but it didn't.... Wait...OH MY GOD MY EARS!!!"***




In this IAANSEC CTF you will be tasked with analyzing the Rick Astley Experience binary. This room will test your cryptography, stenography and malware analysis skills. Have fun and good luck!

*(Quick note, majority of flags are Rick Roll lyrics and are separated with an underscore "_". Lastly I HIGHLY recommend using Procmon to solve this CTF)*

## Questions

## Task 1: The Rick Astley Experience

### Where is that God awful music coming from?

![img](https://i.imgur.com/AwFNKjC.png)

### What happened to my wallpaper?

![img](https://i.imgur.com/mLZ4eeE.png)

### What is the name of the program causing havoc?

![img](https://i.imgur.com/kyfVy79.png)

### What file is created when the executable is ran without internet access?

![img](https://i.imgur.com/IACdcG2.png)

### What is the key to decode the sus.txt flag?
*(It was in the directory of the first flag)*

![img](https://i.imgur.com/AwFNKjC.png)

### What is the sus.txt flag?
*(I recommend using https://www.dcode.fr/rot-cipher to solve this flag, don't forget the underscores!)*

![img](https://i.imgur.com/bAgLQ0z.png)

### I hate getting into arguments...
*(Decode the base64 for the flag)*

![img](https://i.imgur.com/Gi4wuZm.png)
Monster 1.30 released
Tags: javascript, dom, node
Published: 2022-02-05 22:30:55

---
title: Monster 1.30 released
published: true
description: Monsterjs Release  
tags: javascript, dom, nodejs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8j8ikt70109kr9v892c5.png
series: Monster-Release
---


Today we released the latest edition of our Monster project. Monster is a collection of javascript classes that we need for daily work in [our](https://www.schukai.com/en/) web projects.

Besides small helper functions and classes, it also provides useful functions to enable reactive programming.

Monster is available via jsdelivr and npm.

Only the highlights are described here. The full functionality can be found in the [documentation](https://monsterjs.org/en/doc/1.30.0/).

## Configuration via script tag

Besides the possibility to specify configurations of CustomElements by attribute, the configuration can now also be specified by script tag.

```javascript
<script id="config1" 
        type="application/json">
{
   "key": "value"
}
</script>

<monster-tag 
   data-monster-options-selector="#config1">
</monster-tag>

```

_hope you enjoy it!_



## References

- [npm](https://www.npmjs.com/package/@schukai/monster) 
- [jsdelivr](https://www.jsdelivr.com/package/npm/@schukai/monster)
Ask questions
Published: 2022-02-05 22:15:43

As a newbie coding student, it is easy to get stuck.  I am quickly learning - especially as a newbie - how easily you can get stuck on a problem for hours.  Something I have had to become more comfortable with is asking questions.  I think there is always a fear of not appearing capable when you ask for help.  However, you will have more success learning to code by asking questions.  As a coding student, keep in mind this helpful strategy encouraged by the coding program I attend.  First, research the problem, second reach out to fellow students, and finally ask your instructor.  By this point, you will be able to formulate a thoughtful question that shows your capabilities.
Tips For Replacing a Proxmox Boot Drive In A Pool
Tags: proxmox, zfs
Published: 2022-02-05 21:46:13

(My first post!)
Recently one of my ProxMox SSD boot drives (in a RAID 1 pool) stopped working.
After I physically replaced the bad SSD, there was no longer any device reference to it (**_zpool replace_** would fail using the old reference). The instructions I found say that you should either use /dev/sdx or /dev/disk/by-id/xxxx when referring to the old drive in a zpool command. I noticed that the 

```
zpool status rpool
```

Returned a sequence of numbers for the old drive instead of the device name. Let's say it showed 1234567890.

```
zpool replace rpool 1234567890 /dev/disk/by-id/new_drive_id_xxxxxxxxxxxx
```

That worked! It should now attach and resilver the new drive. However, in my case the new drive had been automatically formatted without the BIOS/EFI partitions. If my original SSD ever failed, the new SSD would fail to boot.

I had to detach the new drive

```
zpool detach rpool /dev/disk/by-id/new_drive_id_xxxx
```

Then I went into the web interface, _carefully_ selected the new drive, and chose "Wipe Disk". Then I followed the standard instructions:

```
sgdisk /dev/disk/by-id/orig_drive_id_xxxx /dev/disk/by-id/new_drive_id_xxxx
sgdisk -G /dev/disk/by-id/new_drive_id_xxxx
zpool attach -f rpool orig_drive_id_xxxx-part3 new_drive_id_xxxx-part3
```

This cloned the partitions onto the new drive. Then I waited for the resilver to end by checking with

```
zpool status rpool
```

Then I setup the 512 MB EFI partition (check if your BIOS supports EFI)

```
proxmox-boot-tool format /dev/disk/by-id/new_drive_id_xxxx-part2
proxmox-boot-tool init /dev/disk/by-id/new_drive_id_xxxx-part2
proxmox-boot-tool refresh
```

Otherwise if you use GRUB:


```
grub-install /dev/disk/by-id/new_drive_id_xxxx
```

Then reboot.

---

References:
[How To Replace Dead Physical Disk From Proxmox PVE For ZFS Pool Easily](https://dannyda.com/2020/05/16/how-to-replace-dead-physical-disk-from-proxmox-pve-for-zfs-pool-easily/)

[How To Find A Drive's Real Name](https://dannyda.com/2020/05/21/how-to-find-drive-name-real-name-for-dev-sdb-dev-sdc-from-proxmox-pve/)

[ZFS Boot Disk No Longer Bootable](https://forum.proxmox.com/threads/zfs-boot-disk-no-longer-bootable-after-rpool-resilvering.77040/)

[ZFS Administration](https://pve.proxmox.com/pve-docs/chapter-sysadmin.html#_zfs_administration)

[Sysboot ProxMox Boot Setup](https://pve.proxmox.com/pve-docs/chapter-sysadmin.html#sysboot_proxmox_boot_setup)

[Host Bootloader](https://pve.proxmox.com/wiki/Host_Bootloader)

In case you need to track down the device by UUID:

[Linux uuid storage devices](https://linuxhint.com/uuid_storage_devices_linux/)
How to become a self taught web developer
Tags: webdev, beginners, programming, tutorial
Published: 2022-02-05 21:15:32

It’s been too long I have been researching for how to become a full stack developer by yourself I thought of sharing my experience with you all.

Many people ask the question “How to start developing?” because when you are beginner, you don't know nothing about coding.

So, I decided to write a quick introduction to web development: How to start creating websites and apps even if you are a complete noob.

## Let’s start with the basic
Everyone that want to become a great developer need to know at least the basics of HTML and CSS. These technologies are understood by the most famous chromes(Google Chrome, Firefox, internet explore, Brave and others). HTML will help to add elements and text and CSS will add style to it.

In addition you need to know javascript, because javascript technology beacause it will make the website more interactive and that language is understanded by chrome too.

## Frameworks
After you learn the basis, you should learn a framework. Frameworks are created by developers to make your life easier, saves your time in different ways, makes you improve your good programming practices, ensures optimal maintenance and evolution, in addition, it has an entire community willing to help you.

You can learn a css framework like bootstrap or materialize but you need to know a javascript framework, the most popular is React, Angular and Vue and you should definitely pick one of them to learn at some point in your career. These technologies can considerably facilitate the automation of programming processes.

## Git and GitHub
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Git tracks the changes you make to files, so you have a record of what has been done, and you can revert to specific versions should you ever need to. Git also makes collaboration easier, allowing changes by multiple people to all be merged into one source. Thats why you should learn how to use git.

## Backend
After know how to build things in frontend, you should learn backend, pick a backend language like Nodejs(recommended), python or other if you don't wanna use javascript.

The role of the backend is related to servers, databases, security, structure, content management and updates.

If you pick Nodejs you must learn express, a Node framework, case you chose python, learn Django. That creates abstractions of routes, middlewares and many other functions to facilitate the creation of both API's and SPA's.

## Conclusion
Never stop learning, that is the start of your journey and you always have things to learn and apply. I hope you like your journey. Good luck, God bless you!
Check my Twitter @samuelbelatte plz 😀
DeepMind's AlphaCode Won't Steal Your Job Either
Published: 2022-02-05 20:59:18

*Another new fancy AI tool. We keep getting closer to the singularity. But not on programming.*

> TL;DR: Wait until machine learning solutions solve real business problems.

[Alphabet's DeepMind](https://deepmind.com/about), [Microsoft's Github](https://copilot.github.com/), and [OpenAI](https://openai.com/blog/gpt-3-apps/) are leading the Artificial Intelligence coding segment.

With different approaches, they try to solve coding challenges.

They use [transformer-based](https://en.wikipedia.org/wiki/Transformer_(machine_learning_model) language models to generate code.

> AlphaCode [achieved](https://deepmind.com/blog/article/Competitive-programming-with-AlphaCode) an estimated rank within the top 54% of participants in programming competitions by solving new problems that require a combination of critical thinking, logic, algorithms, coding, and natural language understanding.

Deep Mind's product was trained and competed against humans at [Codeforces](https://codeforces.com/) contests.

With overfitting claims, it outperformed several people at those contests.

[Results](https://github.com/deepmind/code_contests) are available online.

A careful look at the datasets shows basic algorithmic solutions with output code full of [code smells](https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc) many human counterparts make.

Variables with [bad names](https://dev.to/mcsee/what-exactly-is-a-name-part-ii-rehab-20gd), [Lots of ifs](https://dev.to/mcsee/code-smell-36-switch-case-elseif-else-if-statements-h6c), [too long methods](https://dev.to/mcsee/code-smell-03-functions-are-too-long-4hji), [global functions](https://dev.to/mcsee/code-smell-17-global-functions-4b82) are some examples of these smells many code reviewers would not approve.


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

The three current solutions (AlphaCode, [GitHub Copilot](https://dev.to/mcsee/why-github-copilot-is-not-a-treat-for-your-job-180a), [GPT3](https://dev.to/mcsee/i-ve-recently-learned-about-gpt3-this-is-my-journey-2kik)) focus on competitive programming, an area where performance is the ultimate goal and readability is not important. 

# The final frontier

Model [domain entities](https://dev.to/mcsee/the-one-and-only-software-design-principle-3086) and business behavior instead of boring and repetitive algorithms full of code smells.

Try to understand the entities and the behaviour on your simulation software.

# References

{% post https://dev.to/mcsee/why-github-copilot-is-not-a-treat-for-your-job-180a %}

{% post https://dev.to/mcsee/i-ve-recently-learned-about-gpt3-this-is-my-journey-2kik %}

# What should you do?

Stop competing against smarter machines than you.

[Learn](https://dev.to/mcsee/what-is-wrong-with-software-5pa) and [model](https://dev.to/mcsee/the-one-and-only-software-design-principle-3086) rich domains.

You will [keep your job](https://maximilianocontieri.com/most-programmers-are-losing-our-jobs-very-soon) for a few more years...
Day 12/100 Java
Published: 2022-02-05 20:49:08

Happy Weekending!

Day 12/100

**Language:**
JAVA

**Time Period Spent:**
2hrs

**Course Taken:**
Udemy: Java Programming Masterclass - Tim Buchalka

**Todays Learning:**

- Object Oriented Programming:
	- Classes Part
		- Private Variables
		- Private Methods
		- Public Methods

- Code Challenge:
	- Sum Calculator
	- Person

**Additional Notes:**
Another productive day. I'm looking forward in creating and learning about constructors tomorrow. I can safely say that learning the Django Python library has prepared me for this moment. It was not as frightening as I anticipated.
Custom React Hook - useIntersection with Intersection Observer
Tags: react, hook, javascript, typescript
Published: 2022-02-05 19:41:38

This hook is an updated version from my previous [Post](https://dev.to/anxiny/easy-lazy-loading-with-react-intersection-observer-api-1dll)

```tsx
interface IntersectionHookInit extends IntersectionObserverInit {
// In case I want to add something
}

type OnIntersection = (isIntersecting: boolean, ob: IntersectionObserver) => boolean | void;

const DefaultOptions: IntersectionHookInit = {
    root: null,
    threshold: 0,
}

// Most of time we only need ob until intersecting, so return false here to disconnect ob. 
const DefaultOnIntersection: OnIntersection = (isIntersecting, ob) => {
    if (isIntersecting) return false;
}

export function useIntersection(onIntersection: OnIntersection = DefaultOnIntersection, options: IntersectionHookInit = DefaultOptions) {
    const [isIntersecting, setIsIntersecting] = useState(false);
    const elemRef = useRef<null | Element| undefined>(null);
    const setElem = (elem:any) => {
        elemRef.current = elem;
    }

    useEffect(() => {
        if (!elemRef.current) return;
        let isUnmounted = false;
        const ob = new IntersectionObserver(([entry]) => {
            if (isUnmounted) return;
            const isElementIntersecting = entry.isIntersecting;
            if (onIntersection(isElementIntersecting, ob) === false) {
                ob.disconnect();
            };
            setIsIntersecting(isElementIntersecting)

        }, { ...options })
        ob.observe(elemRef.current);
        return () => {
            ob.disconnect();
            isUnmounted = true;
        }
    }, [elemRef.current, options]);

    return [isIntersecting, setElem] as const;
}
```

Usage:
```tsx
export function LazyLoad(props) {
    const [isIntersecting, ref] = useIntersection();
    return (
        <div ref={ref}>
            {isIntersecting ? props.children : null}
        </div>
    )
}
```

Thanks for reading!