teleren/devto huggingface dataset:
Jest for React Native
Tags: react, jest, reactnative, javascript
Published: 2022-02-05 05:13:14

This is an article on how to setup jest in react-native with support for vscode.

The base setup of react-native
`npx react-native init unittest`


Installing the additional dependencies
`yarn add --dev @testing-library/react-native @testing-library/jest-native`


Extend your jest config in **package.json**, 
```json
{
  "preset": "react-native",
  "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"]
}
```

You're ready to write unit test cases for react-native, let's setup your vscode.

Intellisense is important for code completion, create a **jsconfig.json** file in your project root directory.
Add the following contents in it.
```json
{
    "typeAcquisition": {
        "include": [
            "jest"
        ]
    }
}
```

Install types to support autocompletion.
`yarn add @types/jest`

Lets add a plugin to vscode, which makes testing easier, [Jest Test Explorer](https://marketplace.visualstudio.com/items?itemName=kavod-io.vscode-jest-test-adapter)

Let's write some test cases.
Create a folder structure as below,

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

<br/>

A Sample React Native component, Banner.js
```jsx
import React from 'react';
import {View, Text} from 'react-native'

const Banner = () => {
  return (
    <View>
      <Text>Banner</Text>
    </View>
  )
}

export default Banner;

```


A Sample test file for the component, Banner.test.js
```jsx
import React from 'react'
import { render } from '@testing-library/react-native';

import Banner from './Banner'

describe('Banner', () => {
  it('renders correctly', () => {
    const { getByText } = render(<Banner />)
    const textField = getByText('Banner')
    expect(textField).toBeDefined()
  });
})
  
```

After adding the file, you can see three options in your file, This provides us the ability to validate a single test case without having to write special commands, debug them.

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

<br/>

It also gives us a look at the tree structure of all the test cases in your project and run them as a whole.
![tree structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5iqzwe22ncrpkeiw95d.png)

So its a wrap, Hope you find this useful and effective to work with.

Talk to me on twitter [droidmakk](https://twitter.com/droidmakk)
Program Verification with Hoare Logic and Dafny
Tags: formalmethods
Published: 2023-01-05 22:28:24

---
title: Program Verification with Hoare Logic and Dafny
published: true
date: 2022-02-05 05:06:42 UTC
tags: FormalMethods
canonical_url: https://brandonrozek.com/blog/program-verification-hoare-logic-dafny/
---

In the recitations that I’m giving for [Principles of Software](/ta/spring2022/csci2600/), we are going over reasoning through code using Hoare Logic and the program verifier Dafny. Microsoft Research designed Dafny to be similar to writing imperative code. The main difference is that you need to supply (pre/post)-conditions and the code to verify. Here’s an example of how to reason about a simple statement by hand:

```
// Precondition: x > 0
x := x + 1;
// Postcondition: x > 1

```

Given the fact that x is greater than zero before the code begins, we can deduce that if we increment it by one then it must be greater than one! Though to showcase Dafny, we’ll look at a slightly more interesting (albeit famous beginner example) which is the absolute value:

```
method abs(x: int) returns (y: int)
    requires true
    ensures y >= 0
    ensures x >= 0 ==> x == y
{
    if (x < 0) {
        y := -x;
    } else {
        y := x;
    }
}

```

The `requires` clause is otherwise known as the precondition or what is known to be true before the method executes. For the case of absolute value, we do not need to constrain any of the integer inputs, so we can put `requires true` or not even include that line.

The `ensures` clause is otherwise known as the postcondition or what you want verified to be true after the method executes. In there we have two conditions: the output must be positive, and if the input was positive then the output equals the input.

Then finally the code goes in the method body.

Now you can actually verify it line by line through the use of `assert` statements. Here’s the same method again but with assertions:

```
method abs(x: int) returns (y: int)
    requires true
    ensures y >= 0;
    ensures x >= 0 ==> x == y
{
    if (x < 0) {
        assert x < 0;
        y := -x;
        assert y > x;
    } else {
        assert x >= 0;
        y := x;
        assert y == x;
    }
}

```
Docker Secrets
Tags: containers
Published: 2023-01-05 22:28:45

---
title: Docker Secrets
published: true
date: 2022-02-05 04:59:13 UTC
tags: Containers
canonical_url: https://brandonrozek.com/blog/docker-secrets/
---

I try to keep secrets such as passwords and keys out in their own separate files so that I can `.gitignore` them and commit the rest of my configuration. With `docker-compose` we can do that with the `env_file` field. Here is an example with a postgres configuration:

```
database:
  image: postgres:13.4
  container_name: database
  hostname: database
  env_file:
    - Volumes/database/docker.env
  volumes:
    - Volumes/database/var/lib/postgresql/data:/var/lib/postgresql/data

```

Then in `Volumes/database/docker.env` I can have a file with the secrets as key-value pairs:

```
POSTGRES_USER=user
POSTGRES_PASSWORD=389ed93045c84cc0828c4310e6ef76ce
POSTGRES_DB=database

```
Mount Object Storage Locally using S3 Fuse
Tags: storage
Published: 2023-01-05 22:29:02

---
title: Mount Object Storage Locally using S3 Fuse
published: true
date: 2022-02-05 04:39:25 UTC
tags: Storage
canonical_url: https://brandonrozek.com/blog/s3-fuse/
---

On most cloud providers, object storage is cheaper than paying for the equivalent size in block storage. Using FUSE, we can mount S3 compatible object storage with the command `s3fs`. Do note, that there are a few downsides with mounting object storage as documented on their [README](https://github.com/s3fs-fuse/s3fs-fuse/blob/master/README.md):

- random writes or appends to files require rewriting the entire object, optimized with multi-part upload copy
- metadata operations such as listing directories have poor performance due to network latency
- non-AWS providers may have eventual consistency so reads can temporarily yield stale data (AWS offers read-after-write consistency since Dec 2020)
- no atomic renames of files or directories
- no coordination between multiple clients mounting the same bucket
- no hard links
- inotify detects only local modifications, not external ones by other clients or tools

Lets get started by installing `s3fs`:

```
# For Fedora
sudo dnf install s3fs-fuse
# For Ubuntu/Debian
sudo apt install s3fs

```

We’ll then need to edit `/etc/passwd-s3fs` with our object storage access and secret keys:

```
AccessKeyHere:SecretKeyHere

```

Then we need to set it so that only root can read `/etc/passwd-s3fs`

```
sudo chmod 600 /etc/passwd-s3fs

```

Now we can test to see if we can access our bucket:

```
sudo s3fs bucketname \
	/mnt/mountpoint \
	-o url=https://us-east-1.linodeobjects.com \
	-o allow_other

```

If we’re successful we should be able to access `/mnt/mountpoint`.

To unmount:

```
sudo umount /mnt/mountpoint

```

To mount automatically during reboot, add the following to `/etc/fstab`:

```
bucketname /mnt/mountpoint fuse.s3fs _netdev,allow_other,url=https://us-east-1.linodeobjects.com 0 0

```

After editing `/etc/fstab` you can run `sudo mount -a` in order for it to load and mount any new entries.
Create Virtual Environments When Working on Projects
Tags: python
Published: 2022-02-05 04:05:20

Do you want the packages or libraries to be installed in a separate folder, so that you don't want to mix up with other files inside your system?

The best ways is to create an environment where you can store all the packages for your project. 

A [virtual environment](https://docs.python.org/3/library/venv.html#venv-def) is a Python environment such that the Python interpreter, libraries and scripts installed into it are isolated from those installed in other virtual environments, and (by default) any libraries installed in a “system” Python, i.e., one which is installed as part of your operating system.

We can do it in just two steps in windows machine:

1. Create the environment:

```
$ python -m venv env
```
***** env is an environment name, you can give it any name.

2. Activate the virtual environment 

```
$ .\env\Scripts\activate
```

Now we can install any packages inside it. For example if you want to install django in the environment, you can do it by

```
$ pip install django
```
Your downline with 1,000, 10,000 or 50,000 followers
Tags: javascript, social, webdev, typescript
Published: 2022-02-05 03:54:26

Do you love using the internet to meet and talk to new people? If
so, there is a good chance that you have heard of **[social networking
](https://www.digistore24.com/product/420307/shankar858)**websites before.
If you have not, you will want to familiarize yourself with them because they
are rapidly becoming the most popular way to [communicate with others](https://www.digistore24.com/product/420311/shankar858)
online.
How to monitor Redis with Prometheus and Grafana | Docker
Tags: grafana, docker, prometheus, redis
Published: 2022-02-05 03:54:08

For this example we will use Docker compose to be able to run all the services

1. Docker Compose 

```yaml
version: "3.9"
services:
  grafana:
    image: grafana/grafana
    ports:
      - 3000:3000
  prometheus:
    image: prom/prometheus
    container_name: prometheus
    ports:
      - 9090:9090
    volumes:
      - ./prometheus.yml:/etc/prometheus/prometheus.yml:ro
  redis:
    image: "bitnami/redis:latest"
    ports:
      - 6379:6379
    environment:
      - REDIS_REPLICATION_MODE=master
      - REDIS_PASSWORD=my_master_password

  redis-exporter:
    image: oliver006/redis_exporter
    ports:
      - 9121:9121
    restart: unless-stopped
    environment:
      REDIS_ADDR: "redis:6379"
      REDIS_USER: null
      REDIS_PASSWORD: my_master_password
    links:
      - redis
      - prometheus

```

2.Prometheus File Settings (prometheus.yml)

```yaml
global:
  scrape_interval:     15s
  evaluation_interval: 15s

scrape_configs:
  - job_name: prometheus
    static_configs:
      - targets: ['localhost:9090']
  - job_name: redis-exporter
    static_configs:
      - targets: ['redis-exporter:9121']

```

3.Run Docker Compose

```bash
docker-compose up
```

4.Check status of Prometheus and Redis Exporter

```bash
http://localhost:9090/targets
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlg4mj321zfym6367o26.png)

5.Visit Grafana Dashboard

Default

User: admin
Password: admin

```
http://localhost:3000
```

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

6.Add data source


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

Save and test

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

7.Import Redis Dashboard for Prometheus

For this we will use a Dashboard created by the community

![Redis Dashboard for Prometheus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyjebor9f45ruldyyo7l.png) 

https://grafana.com/grafana/dashboards/763


8.Import JSON or code


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


![Import JSON of code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qrs0kwslyaw37y1j2gu6.png)

Code: 763

JSON:
https://grafana.com/api/dashboards/763/revisions/3/download

9.Dashboard 

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

Code of example (GitHub Gist)
https://gist.github.com/nelsoncode019/722727fdba11d846e39dc99f8064f7fe
Trying to remember the first time I encountered Unit Of Work...
Published: 2022-02-05 03:39:19

... and actually, I hugely misunderstood it because of how it was named. I remember thinking, how can that be a unit of work when many "units" of work (i.e. multiple database statements/tasks) was attached to it. I always thought of "unit" as a singular or individual thing, but obviously, a unit can be a collection also.

I'm half-convinced that there should be a better term to replace Unit Of Work, but I can't think of one.
Mindset
Tags: theodinproject
Published: 2022-02-05 03:25:42

Managing your mindset while working through TOP is extremely important, more so than following any other single strategy. The first few sections of the curriculum (the ones about mindset) do a fine job covering how to manage the difficulty, and it can be beneficial to reread those sections when running into difficult times.

# Get Gritty
There are many technical exercises involved when learning to program; they can be overwhelming and often make a learner feel as if they’re hitting roadblocks over and over. This feeling is something everybody doing the course should expect. The countermeasure for giving up when things get rough is grit, something every prospective programmer MUST develop. Read about grit here: https://en.wikipedia.org/wiki/Grit_(personality_trait).
Things will get hard, so spend some time with the articles at the beginning of TOP and get comfortable with encountering difficult things.

# Take the time you need
Avoid rushing through the curriculum; rushing is a surefire way to burn out. Using the Pomodoro technique can help you stay on task while ensuring that you take the breaks you need. Hard deadlines should be avoided as well, as they will make skipping and rushing very attractive. Moving through the curriculum without having the prerequisite understanding of the previous topics will make each subsequent lesson more and more difficult to learn properly as you dive deeper into the course.
A small contribution
Tags: rust, beginners, programming, tutorial
Published: 2022-02-05 03:13:00

Hi everyone,

Today I was working on adding some HTTP requests to an existing Rust project.

I didn't really know anything about Rust (or Cargo) and something like this would've definitely saved me some frustration and allowed me to get moving more quickly.

https://github.com/peetss/rust-reqwest-example

Maybe if you are looking to try out Rust this might be a nice and easy way to get started.  Who doesn't like making HTTP requests?

To be fair, most of this code came from a [stackoverflow](https://stackoverflow.com/questions/66409193/errors-with-reqwest-example-in-rust-playground-and-local-machine) post, I just turned it into a project that you could import into your IDE of choice.

At the end of the day we are all just standing on the shoulders of giants anyways, right?
A TOP Strategy Guide
Tags: theodinproject, programming, beginners, learning
Published: 2022-02-05 03:09:38

# Becoming a TOP Success Story

The Odin Project is known to be very intense, but also has a track record of helping learners find consistent success. Its intensity is the “secret sauce” that helps people become strong developers. TOP is not easy, and for good reason. It strives to help learners get exposure to all the necessary skills to become a successful developer. The specific technical skills (i.e. hard skills) that you need to pick up are obvious, but it can be easy to overlook or neglect the equally important "soft skills" like mindset and communication. This guide will explain some strategies that have been employed to great effect by successful TOP learners. These strategies will help you develop both hard and soft skills.

With this first section, we'll be covering mindset.
Scoping variables to a single file in Scss without @use
Tags: scss, sass
Published: 2022-02-05 02:50:50

---
title: Scoping variables to a single file in Scss without @use
published: true
description: Prevent yourself from accidentally overriding global variables in Sass.
tags: Scss, Sass
//cover_image: https://direct_url_to_image.jpg
---

Traditionally, any variable declared outside of a selector in Scss has a global scope, and variables declared inside of a selector have a local scope:

```scss
$global-variable: 10px;

.some-class {
  $local-variable: 5px;
}
```

Global variables can cause problems in large projects because you can accidentally overwrite them from any file.

For example, let's say you had a variable called `$grid-gutter-width` with a value of `16px` in a `_variables.scss` file. You could accidentally override that variable in another file:

```scss
// _some-other-file.scss

$grid-gutter-width: 40px;

.fancy-column {
  padding-left: $grid-gutter-width * 0.5;
  padding-right: $grid-gutter-width * 0.5;
}

.fancy-row {
  margin-left: $grid-gutter-width * -0.5;
  margin-right: $grid-gutter-width * -0.5;
}
```

This would overwrite the `$grid-gutter-width` variable for every subsequent use, setting the value to `40px` instead of `16px`. Something like this could potentially break the entire layout of the site.

While new versions of Scss prevent global scoping by using the [@use rule](https://sass-lang.com/documentation/at-rules/use), LibSass-based versions of Scss like `node-sass` and Hugo's Scss don't support this feature.

## Limiting the scope using `@at-root`

So how can you scope a variable to a single file in older versions of Scss? You can wrap the file in an `@at-root` rule:

```scss
@at-root {
  $grid-gutter-width: 40px;

  .fancy-column {
    padding-left: $grid-gutter-width * 0.5;
    padding-right: $grid-gutter-width * 0.5;
  }

  .fancy-row {
    margin-left: $grid-gutter-width * -0.5;
    margin-right: $grid-gutter-width * -0.5;
  }
}
```

The [@at-root](https://sass-lang.com/documentation/at-rules/at-root) rule in Scss causes everything within it to be emitted at the root of the document instead of using the normal nesting. It's typically used to escape from a nested context, but in the example above we can use it to enclose a new local scope.

By setting the`$grid-gutter-width` variable within the `@at-root` block, we can overwrite its value in that file without overwriting it elsewhere in your stylesheet.
Fixes and documentation
Published: 2022-02-05 02:48:53

This week I spent some time helping other students getting acquainted with [Turborepo](https://turborepo.org/) by running a meeting and answer questions. It was a good exercise since I don't get to present very often and I was reminded that having to explain something to others is one of the best ways to learn. I'm happy that there is excitement around Turborepo and that more people are getting involved.

After the meeting I wrote a small documentation page ([Issue](https://github.com/Seneca-CDOT/telescope/issues/2737), [Pull Request](https://github.com/Seneca-CDOT/telescope/pull/2813)) for how we use Turborepo within [Telescope](https://telescope.cdot.systems/) to be able to explain the basic commands to newcomers.

### CSS Fix

We have recently finished the mobile version of the GitHub info sidebar and it looks great but, after every new feature there are always bugs trailing behind.

One [bug](https://github.com/Seneca-CDOT/telescope/issues/2778) resurfaced recently. There was a horizontal overflow at certain window sizes that was caused by the addition of `display: 'flex'`. We used the flex layout for the mobile view but we don't need it for the desktop view.

To [fix](https://github.com/Seneca-CDOT/telescope/pull/2839) this I put `display: 'flex'` and `flexWrap: 'wrap'`  inside of `theme.breakpoints.down(1205)` to use flexbox only for the mobile view (Window size smaller than 1205px).

### Towards Telescope 2.7

There is an ongoing [issue](https://github.com/Seneca-CDOT/telescope/issues/2677) that I am trying to address: moving the [Satellite](https://github.com/Seneca-CDOT/satellite) repo inside Telescope to complete the monorepo. I haven't been successful so far, so I will ask other students to collaborate on this one, and maybe it can be done by Release 2.7.

Finally I am looking to expand my knowledge of Docker so I assigned myself to this [issue](https://github.com/Seneca-CDOT/telescope/issues/2835) about modifying one of our containers to use a smaller image. I like everything that has to do with optimization and speeding up workflows, so this seems like a great fit.

There's a lot of activity within the Telescope community so I'll be on the lookout for more issues to hack on.
React Ecommerce Website with Dark Mode Toggle
Tags: react, html, css, webdev
Published: 2022-02-05 02:15:33

## You can get the template from the link proivided in the description of the video.

### Technologies Used :
+ React
+ CSS

### Libraries and Assets Used :
+ React Icons
+ Scroll Reveal for Animations
+ Sass for scss

## To learn how to create this template watch the complete video. You can get the template for free from the link provided in the description of the video.

{% youtube 47Uqypjo7_c %}

## Please do like the video and subscribe to the channel. It helps and motivates me to create more content like this.

## If there are any room for improvements please let me know. You can also fork the repository and give me a merge request if you can implement something more.
what is concat() in javascript
Tags: javascript, programming, beginners, webdev
Published: 2022-02-05 02:05:08

`concat()` is a method in used in javascript to concatinate two strings or two arrays.

1. it does not change the existing string/arrays
2. it returns a new string/array
3. it joins two or more strings/array

below is an example of string concatination


![string concatination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jdf0iu2deuewvnts12k.png)

lets look at how we can use `concat()` method to join two arrays


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