teleren/devto huggingface dataset:
DPS909 Blog :LAB 8 Automated Testing
Tags: opensource, beginners
Published: 2022-11-11 20:01:00

## Overview

One very important part of software development is test automation since it creates an automatic process for one or multiple types of tests to run without the need for manual intervention.
Testing helps a large community of developers (or even a single developer) keep a piece of software evolving in the right direction. Without tests, it's easy to break existing code, introduce unexpected bugs, or ignore important edge cases.
On my application [ag-ssg](https://github.com/anshul137/ag-ssg) I have used tools for automating my tests when working on a JavaScript/TypeScript codebase is [JEST](https://jestjs.io/).

Jest is one of Facebook's open-source projects that is both under very active development and is also being used to ship code to everybody on [Facebook.com](Facebook.com).

## Learned from this lab

- general concepts and terminology of software testing
- unit testing and integration testing

## Set Up a Testing Framework

 To get Started with [JEST](https://jestjs.io/).

```
npm install --save-dev jest
```
Let's get started by writing a test for a hypothetical function that adds two numbers. First, create a sum.js file:

```
function sum(a, b) {
  return a + b;
}
module.exports = sum;
```
Then, create a file named sum.test.js. This will contain our actual test:
```
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
```
Add the following section to your package.json:
```
{
  "scripts": {
    "test": "jest"
  }
}
```
Finally, run `yarn test` or `npm test` and Jest will print this message if your code has passed all the implemented test 

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

This is the first time when i have used the JEST to test my code. I have learned alot that how we cannot use the `import` statement when we are creating the `.test.js` file it will give us the syntax error  we manually need to configure `JEST` so that it can work with the `import`statement in the code.

## Why to use  Jest

List feature of jest

- Simple and fast, ideal for prototyping.
- It allows the generation of code coverage reports simply by adding the argument —-coverage to the command line.
- Error reporting during test execution is rich and valuable.
- Documentation and the community around the tool are really good.  


```
Thanks
```
VSCode Snippet for Reducing Boilerplate Memorization in Elixir
Tags: elixir, vscode, tooling
Published: 2022-11-11 19:51:23

If you have been writing software in Elixir for quite some time, you might feel that Elixir code can feel like it has a lot of boilerplates or configurations code. Elixir is one of the most fun programming languages I have ever used! And I wish I could use it for all of my software projects but to think that I could just rely on Elixir to do all of my projects is kind of naive for a software developer. I have been building software in many programming languages throughout my software development career and when I found myself switching between these languages, I often forgot the boilerplates or configurations code that exist in Elixir.

I have tried to anticipate this by creating sample projects so the next time I need to write code in Elixir (such as `GenServer` or `GenStage` code) I could just copy-paste from them. Initially, I thought this solution is enough however when I found myself needing to open other projects just to copy-paste boilerplates or configurations code that I forgot, it kind of lowered my mood to code a little bit. Have you experienced this as well?

In order to solve this simple issue yet impacting my coding productivity significantly, I decided to create my own snippet to assist me to code in Elixir that could reduce the need for me to memorize these boilerplates or configurations.

# The Snippets

The snippets that I created are as follow:

## `genserver`

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

## `genstage.producer`

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

## `genstage.consumer`

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

## `genstage.producerconsumer`

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

Notice that VSCode is quite clever in that you don't have to type the complete snippet for it to show the autocomplete.

# GitHub Repo

If you found the snippet to be useful and perhaps can help you in becoming more productive as well, feel free to find and use the snippet definition in this [GitHub Repo](https://github.com/abiwinanda/ex-snippet). You might not need all the code that is generated from the snippet so feel free to remove some of them once generated.

For now, the snippets could help in generating boiler plates when creating `GenServer` and `GenStage` code however other elixir modules such as `Supervisor`, `ConsumerSupervisor`, `Broadway`, etc have their own boiler plates as well hence I am definitely going to add more snippets in the near future. If you think you have some ideas to improve them, you are welcomed to add more snippets or modify them :).
Swagger-as a documentation tool
Tags: go, api, swagger, help
Published: 2022-11-11 19:23:49

Hi so this is my first post here on DEV. I've heard about Swagger so many times and everytime i want to use it, to contribute to Open source, i get so confused. Most of the blogs suggest how it is so great for lot of things development,testing,documentation and whatnot. i wish i can just explore swagger for say, one of it's feature maybe for writing api documentation. I get overwhelmed by the blogs that i get online and finally i just drop the idea . Please drop by and say hi,I would love to hear how other people learnt it or are learning it as self taught programmers.
![Hi](https://media.makeameme.org/created/hi-5c5c41.jpg)
HostRooster - Web hosting that scales from easy to expert
Tags: hosting
Published: 2022-11-11 19:21:33

HostRooster is a world-leading provider of shared, business, VPS, dedicated web hosting, SSL certificates, domain names, SEO, and email marketing services. Headquartered in London, England, the company was founded in 2022. HostRooster is giving regular people all around the world the chance to start and grow successful businesses by making it easy for them to go online.

HostRooster is where people go to give their business a name, construct a high-quality website, get clients, make sales, and organise their operations. Our goal is to provide our clients with the resources they need to turn their imagination and hard work into tangible results.

We provide web hosting with personality. As a technology and product innovator, HostRooster is able to provide customers with innovative products and services designed to complement their existing businesses. HostRooster aims to serve customers ranging from individual freelancers to Fortune 500 companies around the world.

[https://hostrooster.com](https://hostrooster.com)
Micro.Blog Raindrop Collection
Tags: microblog, curation, webdev, rss
Published: 2022-11-11 19:11:26

One could justifiably call me a hypocrite given 1.) how much I've been publicly criticizing American tech culture's shear gluttony lately, 2.) the [true extent](https://raindrop.io/davidblue "David Blue on Raindrop") to which I have used and continue to use [Raindrop.io](https://help.raindrop.io/about/ "About Raindrop") in the past few years. (*Just the text* of my bookmarked URLs amounts to a 60mb+ HTML file, and by default, the service scrapes at least one "snapshot" for every single one.)  

Somehow, I don't think I really gave the subject of this platform (Micro.Blog, Micropub, generally,) my true attention at length until just a few weeks ago. Since then, I've gathered many related World Wide Web hyperlinks on the subject - as I [always do](https://raindrop.io/davidblue/software-13387666 "David Blue's "Software" Raindrop Collection") - and today, it seems my interest crossed whatever not-all-that-interesting psychological threshold exists within me, and a [**Micro.Blog-specific Raindrop Collection**](https://raindrop.io/davidblue/micro-blog-29059844 "David Blue's "Micro.Blog" Raindrop Collection") was born.

There's more! If you'd like, subscribe to [the collection's RSS feed](https://raindrop.io/collection/https://tools.applemediaservices.com/app/1253201335/feed "RSS feed for David Blue's "Micro.Blog" Raindrop Collection") and/or - if you're already a Raindrop user and would be interested in [collaborating on the collection](https://help.raindrop.io/collaboration/ "Raindrop Collection Collaboration Documentation") with me, please do [give me a shout](https://davidblue.wtf/contact "David Blue's contact card")!
What is Virtual DOM? What are the differences between virtual and real DOM?
Tags: react
Published: 2022-11-11 19:05:19

Virtual DOM is a virtual representation of the real DOM. Basically, it’s just a copy of the real DOM.
The main difference between them is- a virtual DOM object has all the same properties as a real DOM, but it can't display a page into the browser directly, just like the real DOM.

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

In summary, here’s basically what happens when we try to update the DOM in React:

i.	The entire virtual DOM gets updated.
ii.	The virtual DOM gets compared to what it looked like before we updated it. React figures out which objects have changed.
iii.	The changed objects only get updated on the real DOM.
iv.	Changes in the real DOM cause the screen to change.
Cheat sheets to Streamline the Development Process
Tags: development, cheatsheets, tools, webdesign
Published: 2022-11-11 19:15:06

---
title: Cheat sheets to Streamline the Development Process
published: true
date: 2022-11-11 19:04:00 UTC
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozz160hkwzgz8p3amgr7.jpg
tags: Development,cheatsheets,tools,webdesign
canonical_url: https://charlesmiller.tech/cheat-sheets-to-streamline-the-development-process/?utm_source=rss&utm_medium=rss&utm_campaign=cheat-sheets-to-streamline-the-development-process
---

 **Looking for ways to streamline your development process?**

There are usually hotkeys associated with our common tasks that a lot of users don’t even think about using. I’ve gathered a few of my frequently visited cheat sheets to share as well as a link to devhints for anything else you may need.

- [Markdown](https://www.markdownguide.org/cheat-sheet/)
- [Bash](https://github.com/LeCoupa/awesome-cheatsheets/blob/master/languages/bash.sh)
- [MongoDB](https://www.mongodb.com/developer/products/mongodb/cheat-sheet/)
- [React.JS](https://upmostly.com/ultimate-reactjs-cheat-sheet)
- [Next.JS](https://blog.wrappixel.com/next-js-cheat-sheet/)
- [Git](https://www.interviewbit.com/git-cheat-sheet/)
- [TypeScript](https://www.typescriptlang.org/cheatsheets)
- [devhints.io](https://devhints.io/) – for everything else…if it’s not here then it’s probably not available

**Feel free to star this on [GitHub](https://github.com/charlesmiller0412/WebDevelopmentResources) as I will be frequently updating this repo.**

_Stay well everyone!_

The post [Cheat sheets to Streamline the Development Process](https://charlesmiller.tech/cheat-sheets-to-streamline-the-development-process/) appeared first on [Charles Miller](https://charlesmiller.tech).
Two dot vs three dot diff and log
Tags: git, github, programming
Published: 2022-11-11 19:00:55

What do dots mean when it comes to git diff and log? How can you use dots between revisions to show pull request diffs and logs?

This article aims to answer those questions: https://www.dolthub.com/blog/2022-11-11-two-and-three-dot-diff-and-log/
Role of CSS in form validation
Tags: javascript, forms, webdev, programming
Published: 2022-11-11 18:33:08

`:valid` selector - selects elements with a value that validates as per the element settings

`:invalid` selector - selects elements with a value that won't validates as per the element settings

Both works on form input elements like
1. Input elements with min & max are applied
2. Email type input with legal email
3. Number fields with numeric value etc. 

```html
<style>
    * {
        box-sizing: border-box;
    }

    .html-validation {
        margin: auto;
        width: 30%;
        border: 1px solid green;
        box-shadow: 5px 5px 8px green;
        border-radius: 5px;
        padding: 20px;
    }

    label {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: block;
        text-align: center;
    }

    input {
        width: 100%;
        padding: 10px;
        margin: 10px 0px;
        border-radius: 10px;
    }

    input:invalid {
        border: 1px solid red;
    }

    input:valid {
        border: 1px solid green;
    }

</style>
<form class="html-validation" action="#0" method="post">
        <label for="firstName">First Name</label>
        <input name="firstName" type="text" required>
        <input type="submit">
</form>
```

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

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

Styles are applied as soon as the input becomes valid or invalid.

There are few other CSS selectors which does similar kind of work are:

`:optional` - Selects all non-required elements in form and if we apply styles using this selector then applied to all optional elements in the form.

`:required` - Opposite to optional and selects all required elements in the form.

`:in-range` - selects elements with value specified is within the range - mostly applicable for input elements with max and min specified.

`:out-of-range` - Opposite to in-range.

`:readonly` - selects elements which are specified with readonly attribute

`:read-write` - selects elements which are readable and writable. As such  not mentioned as disabled and readonly.

`:checked` - Selects all checked elements. Checkboxes and radio buttons, options.

`:hover` - selects any element when user hovers over it

`:visited` - applicable for links when user clicked and visited it.

`:active` - selects when user selected it.

`:disabled` - selects all elements with attribute mentioned as disabled

`:focus` - Selects focused element

`:empty` - selects elements with no children
Amazon S3 - Business continuity and Disaster recovery
Tags: s3series, businesscontinuity, disasterrecovery
Published: 2022-11-11 18:31:41

### Business Continuity: 
Keeps business functioning despite significant disruptive events. 

### Disaster Recovery: 
Natural or Human made event that causes an impact to business.

### S3 for Business Continuity and Disaster Recovery:
S3 provides 99 point 11 nine's durability. Stored across min of 3 AZs (except S3 One Zone-IA storage class).

### S3 Object Lock:
Immutable data (regulatory requirement). Replication - Increase availability.

### Versioning:
Multiple variants of object.
Recovery from unintended user actions and application failures.
Overwrite creates new version. Deletion creates a delete marker instead of removing object.
Default - unversioned. But once enabled, can't return to unversioned state. Versioning can be suspended to stop accruing new versions.

Even in unversioned (default state)- all objects have version ID (null). Upon enabling versioning, the existing objects unchanged .ie. their version ID remains same (null). Delete Object (without versionID)-delete marker is set. And when we retrieve (current version) - 404 returned.

### Removing delete markers:
Delete (Object + versionId)

### S3 Lifecycle management:
Transition actions, when objects transition to another S3 storage class.
Expiration actions, when objects expire (versioning enabled)-S3 expires objects by adding delete marker. 
Best practice: Move non-current version to Glacier class then delete after 1 year.

### S3 Object lock:
Only in versioned buckets.
WORM-Write Once Read Many model. Prevent objects from deleted/overwritten for fixed time/indefinitely.
_Retention period_ - time object can't be overwritten/deleted. _Legal holds_ - No expiration date.
Configure bucket for Object Lock. Both can be at object level.

Versioning auto enabled when you create bucket with S3 Object Lock. S3 Object lock protection also moved between storage classes during Lifecycle transitions.

Indefinite locking-use Legal holds (because no retention period). Apply/change object lock operations for even billions of objects using $3 Batch operations.

### Object Lock retention modes:
_Compliance mode_ - Immutable until retention period. No one can delete/overwrite including root user. Also retention period cannot be edited. Delete entire AWS account to delete the file.
_Governance mode_ - Specific users given permission to alter retention settings/delete objects.

### Object Replication:
Replicate all objects or subset (use prefix/tags).
Replicates objects in same storage class as source object (default settings - but can specify different storage class for replicas).
Default, replicates tags, Object Lock settings. 99.99% of objects replicated in seconds.

### S3 Multi-Region Access Points:
Request --> Multi-Region Access Points --> Request routed to less latency (closest) region (enable cross-region replication)
Region1
Region2
Learn HTML for Beginners !
Published: 2022-11-11 18:20:12

**Hi there** 👋
My name is Mufid, today almost anyone can create and develop a website (web development) without understanding coding. In fact, it's also important to learn basic HTML in order to understand the foundations that make up a website.

That's why, you need to learn HTML. So, your abilities are not limited by the features and templates that are already available. So, you can create functionality that neighboring websites don't have. Interesting right?

**What is HTML?**
HTML (Hypertext Markup Language) is a combination of two terms: _hypertext_ and _markup language_. What the hell is that?

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

Hypertext is a document containing links that allow users to link to other pages. While markup language is a computer language that consists of a set of codes to organize the structure and present information.

So, HTML is a markup language for creating website page structures.

**Tools for Learning HTML**
1. Text Editor for Writing Basic HTML
The place to write HTML language is in the text editor. There are many text editors that you can use to learn HTML. Starting as simple as Notepad++, to Visual Studio Code.

2. Web Browser to View HTML Results
A web browser is a software for viewing the results of your HTML learning. It's not complicated, you can use a browser that is already on your laptop or computer. For example, Google Chrome, and Firefox.

Oops, wait a moment, the material is not finished, wait for tomorrow
I will upload every 2 times a week, namely Saturday and Sunday.

Thank you
Print Image Dimensions on Upload
Tags: webdev, javascript
Published: 2022-11-11 18:17:54

First we need a simple HTML input:

```html
<input type="file" id="file" />
```

and then we add the javascript:

```js
var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {
    var file, img;


    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function() {
            alert(this.width + " " + this.height);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
        img.src = _URL.createObjectURL(file);


    }

});
```

This shows the uploaded image's WxH in an alert.
Argon Dashboard BS5 - Free Theme for Django
Tags: webdev, django, opensource, appseed
Published: 2022-11-11 18:16:48

---
title: Argon Dashboard BS5 - Free Theme for Django
published: true
description: Modern template for Django Admin Interface coded on top of Argon Dashboard, an open-source Boostrap 5 design from Creative-Tim.
tags: webdev, django, opensource, appseed
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knvrhkfgv51frc565r8l.jpg
canonical_url: https://blog.appseed.us/django-admin-argon-dashboard-pypi/
---
Hello Coders!

This article presents [Argon](https://github.com/app-generator/django-admin-argon-dashboard), an open-source [PyPi Package](https://pypi.org/project/django-admin-argon-dashboard/) that integrates a pixel-perfect design from `Creative-Tim` in **Django**. The product aims to install to any Django project a modern design with a minimal configuration effort. Might be important to say that the product covers the admin section (reserved for superusers) but is also usable in the public space for common users.

> Thanks for reading! 🚀

- 👉 [Django Argon Design](https://github.com/app-generator/django-admin-argon-dashboard) - the public repository
- 👉 [Django Argon Dashboard](https://github.com/app-generator/django-argon-theme-playground) - playground project

---

As mentioned in the project README, in order to use the theme we need to execute two simple steps:

> **Step #1** - Install the package via `PIP`

```bash
$ pip install django-admin-argon-dashboard
```

---

> **Step #2** - `Configure the project` to use the design

```python
    INSTALLED_APPS = (
        ...
        'admin_argon.apps.AdminArgonConfig',  # <-- NEW
        'django.contrib.admin',
    )
```

Once the file is saved, we should see the effects on the admin section of the website, reserved for superusers.

![Django Admin Argon - Free PyPi Package.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rpx96wen8i0i72mzbjo.gif)

---

## Video Presentation

For a complete review of the product feel free to access the presentation published on YouTube.

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

---

> `Thanks for reading!` For more resources and support, please access:

- 🚀 Free [support](https://appseed.us/support/) provided by AppSeed (email & Discord)
- 👉 More [free apps](https://appseed.us/apps/open-source/) crafted in Flask, Django, and [React](https://appseed.us/apps/react/)