teleren/devto huggingface dataset:
Bundle environment variables in create-react-app at launch time (not build time)!
Tags: react, docker, typescript, nginx
Published: 2022-02-19 17:09:07

<p align="center">
    <img src="https://user-images.githubusercontent.com/6702424/154800287-c8433ac4-26c1-43fb-9507-46cd0b6e751a.png">  
</p>


## Motivation

Create-react-app [supports environment variable](https://create-react-app.dev/docs/adding-custom-environment-variables/) but they are bundled at build time when `yarn build` is run.  
If we want to change anything like the URL of the backend the app should connect to, we have to rebuild, we can't ship customizable Docker image of our CRA apps.  

The solution would be to be able to do:  
```bash
 docker run --env FOO="xyz" my-org/my-create-react-app
 ```
Then access `FOO`:  
- In the code like `process.env["FOO"]` 
- In `public/index.html` like `<title>%FOO%</title>`

[`cra-envs`](https://github.com/garronej/cra-envs) does just that, in a secure, performant and type safe way.  

## Features

- ✅ No impact on the startup time.
- ✅ No impact on the Docker image size.  
- ✅ Require no network connection at container startups.
- ✅ Secure: It only injects the envs declared in the `.env` file.  
- ✅ It works like you are already used to. It just changes **when** the envs
- ✅  EJS support in `public/index.html` ([few peoples knows](https://github.com/facebook/create-react-app/issues/3112#issuecomment-328829771)).  
This enables for example to conditionally [preload one font or another](https://github.com/garronej/cra-envs-demo-app/blob/e1aa8067b52a563bc5db18558e7ed7746a56c9c0/public/index.html#L6-L21)  
- ✅ (Optional) Type safe: An env getter is generated so [you know what envs are available](https://user-images.githubusercontent.com/6702424/154802407-92d2d0b7-b74c-4b35-a2b5-5c27c26d5127.png) are injected.  


## Usecase example

<p align="center">
	<img src="https://user-images.githubusercontent.com/6702424/154810177-3da80638-93c3-4a41-9710-13541b9d8974.png" />
</p>

[Onyxia-web](https://github.com/InseeFrLab/onyxia-web) is a create-react-app distributed as a [Docker image](https://hub.docker.com/r/inseefrlab/onyxia-web/tags).  

Sysadmins that would like to deploy Onyxia on their infrastructure can simply use
[the official Docker image](https://hub.docker.com/r/inseefrlab/onyxia-web/tags) and provide relevant environnement variable to adust the theme/branding of the website to their usecase.  

Here are two deployment example:  

<p align="center">
  <a href="https://datalab.sspcloud.fr">
    <img src="https://user-images.githubusercontent.com/6702424/154809580-b38abbc2-d7be-4fc2-ad7d-b830d88f3a57.png">  
  </a>
  <a href="https://garronej.dev">
    <img src="https://user-images.githubusercontent.com/6702424/154809578-4aaa5501-e356-484b-8a95-c2a59e287cf9.png">  
  </a>
</p>
<p align="center">
        <sub><sup><em>Click on the social media preview to access the websites</em></sup></sub>
</p>


# Documentation

This is the link to the repo: https://github.com/garronej/cra-envs  

Find 👉[**here**](https://github.com/garronej/cra-envs-demo-app)👈 a demo setup of:  
`cra-envs` + `create-react-app` + `TypeScript` + `Nginx` + `Docker`
Construct Golang Struct Using Optional Function
Tags: go, beginners
Published: 2022-02-19 17:19:10

---
title: Construct Golang Struct Using Optional Function
published: true
date: 2022-02-19 17:00:17 UTC
tags: golang,beginners
series: "Sunday Snippet"
canonical_url: https://clavinjune.dev/en/blogs/construct-golang-struct-using-optional-function/
---

 ![Sunday Snippet #5 construct golang struct using optional function](https://clavinjune.dev/img/sunday-snippet/image.png "Sunday Snippet #5 construct golang struct using optional function")

Using optional function to allow user optionally set attributes

```go
package main

import (
	"bytes"
	"encoding/json"
	"fmt"
)

// ExampleOptFunc sets Example's optional attribute
type ExampleOptFunc func(*Example)

// WithAttr1 sets Example's OptionalAttr1 as true
func WithAttr1() ExampleOptFunc {
	return func(e *Example) {
		e.OptionalAttr1 = true
	}
}

// WithAttr2 sets Example's OptionalAttr2 as i
func WithAttr2(i int) ExampleOptFunc {
	return func(e *Example) {
		e.OptionalAttr2 = i
	}
}

// WithAttr3 sets Example's OptionalAttr3 as s
func WithAttr3(s string) ExampleOptFunc {
	return func(e *Example) {
		e.OptionalAttr3 = s
	}
}

// Example is an example struct with some optional attributes
type Example struct {
	Name          string `json:"name"`
	OptionalAttr1 bool   `json:"optional_attr1"`
	OptionalAttr2 int    `json:"optional_attr2"`
	OptionalAttr3 string `json:"optional_attr3"`
}

// NewExample creates Example ptr
// requires name
func NewExample(name string, opts ...ExampleOptFunc) *Example {
	e := &Example{
		Name: name,
	}

	for _, opt := range opts {
		opt(e)
	}

	return e
}

// String returns json-encoded string
func (e *Example) String() string {
	var b bytes.Buffer
	enc := json.NewEncoder(&b)
	enc.SetIndent("", "  ")
	_ = enc.Encode(e)
	return b.String()
}

func main() {
	e := NewExample("example",
		WithAttr1(),
		WithAttr2(100),
		WithAttr3("testing"))

	fmt.Println(e)
	// {
	//   "name": "example",
	//   "optional_attr1": true,
	//   "optional_attr2": 100,
	//   "optional_attr3": "testing"
	// }
}
```
First time being Sheriff
Published: 2022-02-19 16:49:50

Oh, not that Sheriff guys, this [Sheriff](https://github.com/Seneca-CDOT/telescope/wiki/How-to-be-a-Sheriff). On the side note, I seriously need to add things I've learned to a list to remind myself.

## Being sheriff

I was a lot of work for sure, I had to manage the repo, move issues/PRs forward, assign them to the right people, reorganize milestones, and I went even further reviewing most of the PRs submitted this week. Here's what I've learnt: 
* React Context through [Diana's PR](https://github.com/Seneca-CDOT/telescope/pull/2947), and a chance to look at [Abdul's PR](https://github.com/Seneca-CDOT/telescope/pull/2764) on React custom hooks that I didn't look
* How does Telescope use JWT to authenticate 
* How does auto deployment server [inject variables](https://github.com/Seneca-CDOT/telescope/pull/2863) that are only determined during run time
* How do we [use turbo repo](https://github.com/Seneca-CDOT/telescope/issues/2736) in telescope, and plan to transform and manage Telescope as a monorepo

And of course, gained more knowledge on how Telescope works as a whole. 

The hardest part wasn't reviewing work from other contributors (though it was hard reading and understanding them), it was organizing issues and PRs into correct milestones, there were a lot of them :D. 

## Breaking production

We can't seem to just have a zero in our version number 😃. There were a number of bugs but one of them was critical. We're changing the way both Satellite and Telescope use `JWT` because we've introduced Supabase to our project. Basically, we changed Satellite to use `JWT_SECRET` instead of `SECRET` but [Joel's PR](https://github.com/Seneca-CDOT/telescope/pull/2957) forgot to change the variables in `env.staging` and `env.production` which resulted in this error 

```
  if (!options || !options.secret) throw new Error('secret should be set');
                                   ^

Error: secret should be set
    at module.exports (/home/node/app/node_modules/express-jwt/lib/index.js:20:42)
    at isAuthenticated (/home/node/app/node_modules/@senecacdot/satellite/src/middleware.js:8:10)
    at Object.<anonymous> (/home/node/app/src/routes/register.js:17:3)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/node/app/src/routes/index.js:8:25)
```

## My contribution: 

I [wrote a simple test](https://github.com/Seneca-CDOT/telescope/pull/2903) for the dependency-discovery service which required me to refactor an export of the module to mock one 
of the functions so that we wouldn't rely on the `deps.txt` file. 

I managed to fix renovate bot issues and my parser service is very close to be merged. Oh, please Tue, remember to remove unnecessary dependencies next time you work on something similar 🙃.
Rapyd Developer Newsletter: February, 2022
Tags: fintech, payments, programming, ecommerce
Published: 2022-02-19 16:48:45

**[Explore Community](https://community.rapyd.net)**

##**Discover**
**[Sam Newman, Where We Are Going We Don't Need Servers](https://community.rapyd.net/t/rapyd-devtalk-sam-newman-where-we-are-going-we-dont-need-servers-video/1440)** `/devTalks`
In this on-demand Rapyd DevTalk join the community as we hear from Sam Newman while he talks about the serverless future.

**[RapydBytes: Save Card Details During Checkout Process](https://www.youtube.com/watch?v=8uGKCs1pA9U)** `/videos`
Learn how to generate the hosted checkout page, save card details while making a payment, test in Postman, retrieve customer details, and list payments.

**[How to verify Webhook Signature with PHP script?](https://community.rapyd.net/t/how-to-verify-webhook-signature-with-php-script/1382)** `/community`
See what the community is talking about with our collect and disburse API.

**[Apple Pay](https://docs.rapyd.net/build-with-rapyd/docs/apple-pay)** `/docs`
Apple Pay is now available to EU clients that have iOS, iPadOS, and macOS users using Safari.

**[Save Card Details (toolkit)](https://docs.rapyd.net/build-with-rapyd/docs/save-card-details-with-rapyd-checkout#save-card-details-using-checkout-toolkit-method)** `/docs`
Embed the Save Card Details Toolkit into your webpage for a seamless user flow.

##**Changelog**

[Show me the video](https://youtu.be/-qlyytsbbwA)📺

The Client Portal has been redesigned to reflect an improved customer experience, a more modern look, and faster performance. See Client Portal [Guide](https://docs.rapyd.net/client-portal/docs/client-portal-overview) for more information.

The Card to Card Payment has been updated to add the ability to reuse destination cards and transfer funds to saved cards. Rapyd’s Card to Card Payment method moves funds from one cardholder to another. Refer to [Card to Card Payments](https://docs.rapyd.net/build-with-rapyd/docs/card-to-card-payments) or [Card to Card object](https://docs.rapyd.net/build-with-rapyd/reference/card-to-card-object) for more information.

Rapyd Verify is now available to clients domiciled in the UK to gather business details for KYB (Know Your Business) verification. Refer to [Hosted Page Use Case](https://docs.rapyd.net/build-with-rapyd/docs/rapyd-verify-hosted-page) for more information. 

##**Share**
Let us know what you would like to see more or less of in this newsletter, or take this short [survey](https://rapyd.sjc1.qualtrics.com/jfe/form/SV_3avr0lw9WjuJNWK). Have what it takes? Then apply to become a Rapyd [Champion](https://docs.rapyd.net/build-with-rapyd/docs/developer-champions).

Talk code with us on [Twitter](https://twitter.com/RapydPayments) or [community](https://community.rapyd.net/).
I have made a Funnel website with just HTML CSS
Tags: beginners, css, github, 100daysofcode
Published: 2022-02-19 16:29:51

Hello dear DEV community, I am [Atul](https://atulcodex.com) currently I'm working on a challenge which is 10 responsive websites with HTML & CSS.

![Course funnel website with HTML CSS](https://i.ibb.co/6n3PDrF/course-funnel-website-atulcodex.png)

This challenge is inspired by [Florin pop's](https://www.florin-pop.com/) challenge which is hosted on youtube.

The actual goal of this challenge is to remove fear from our minds that we can make much much and much better responsive websites without using [Javascript](https://dev.to/t/javascript).

So this is 4th website from our challenge I have already designed other 3 catchy websites which are as follows.

{% link https://dev.to/atulcodex/fitness-website-with-html-css-4p1d %}

{% link https://dev.to/atulcodex/furniture-store-responsive-landing-page-with-html-css-2glb %}

{% link https://dev.to/atulcodex/headphone-responsive-landing-page-with-html-css-5fi0 %}

### I have recorded this video also to show you guys.

{% youtube 0zZ8aVvHoYw %}

To be honest I haven't designed the UI UX of this Course funnel website. I have taken design inspiration from cartflow website templates which are WordPress based website templates but I have designed them with only HTML and CSS.

## Checkout the open source repository

{% github https://github.com/atulcodex/Course-funnel-website %}

Now lets take a look on the features of this course funnel website
- HTML5 & CSS3
- No framework
- Funnel ready design
- Responsive Template
- Free icons used
- Pixel Perfect
- Clean & Unique Design
- Easy to customize
- Retina Ready
- Unlimited Colors
- Boxed or Wide layout
- SEO friendly
- Super fast loading speed


[![Course funnel website template](https://i.ibb.co/vwN8cgW/live-demo.png)](https://course-funnel-website.netlify.app/)

Now I am waiting for your feedback and responses about my work and ideas in the comment section. Another 6 projects pending on my bucket list. You will get a notification for that to make sure you are already following me. That's it for now I will see you in the next DEV post.

### Cheers atul ☺️
Some CSS Questions
Tags: css
Published: 2022-02-19 16:25:19

1.How will you make font size responsive?
-If we specify text size with vw unit, it will be changed with respect to the screen size.
-We can also change font size with media queries.
-also declaring the value with rem can also make fonts responsive if the root value of the browser changes.
 11.What are CSS Sprites?
-The mechanism of combining multiple images into one larger image is called CSS sprites. Gmail uses such technique. A sprite generator pack can be used to achieve the objective.


2. What are Vendor-Prefixes?
-Browser vendors add some experimental CSS and JavaScript APIs. It is done to inspire developers to try out new ideas. But in reality we see that sometimes these prefixes breaks code. 
Some common prefixes are -webkit-(chrome), -moz-(firefox), -o-(opera), -ms-(IE, ME)

3.What is tweening?
-Sometimes there is a frame that is produced between two images, this mechanism is called tweening. It is an illusion that makes an impression that the first image is naturally transitioned into the second image. Almost all forms of animation use this technology. This effect can be produced with CSS3 with Transform values such as matrix, convert, rotate and scale.

4.How is inheritance implemented in CSS?
-When a child class get holds off, the assets that the parent element posses is called inheritance. It easily defines the hierarchy in CSS from top to bottom. Usually, if the class-name in parent and child are the same, then child class will override the property.

5.What does the embedded stylesheet mean?
-A reserved space which specify the style sets for the HTML text in a singular location. It is put into effect when the styles are embedded inside HTML tags.

6.What is a declaration block?
-Declaration block in CSS is the space where one or more declaration takes place separated by semicolon. Each declaration contains a CSS property name and value assigned to it and then separated by a semicolon. Declaration blocks look like this

h1{color:white;}
p{text-align:center} 

7.What is RWD?
-RWD stands for Responsive web design. This idea is implemented to make a webpage fit to any kind of screen available and make the page readable.

8.What is the difference between visibility: hidden and display: none?
-visibility hidden means the element is there but can not be seen. But it will consume no space.
-Display none means the element is hidden, but it will take up some space, hence the layout will be affected.

9.What is the ruleset?
-The phenomenon where two selectors are combined is called a ruleset.
1

## 

> 

### 
0.How case-sensitive is CSS?
-CSS is not usually case-sensitive, except for the URLs and font families. But when XML is used, the declaration with XHTML DOCTYPE CSS is case-sensitive.
How to Airdrop yourself SOL tokens on Solana devnet using Python
Tags: python, solana, blockchain, web3
Published: 2022-02-19 15:40:20

This is going to be a pretty quick tutorial, we are going to see how we can airdrop ourselves some SOL tokens on devnet using Python. So let's get started!

First of all, you would need Python 3.6+ installed, now install [Solathon](https://solathon.vercel.app), which is an easy to use and powerful Python SDK for Solana:
```bash
pip install solathon
```

Now, create a `main.py` file and add the following code:
```python
from solathon import Client

client = Client("https://api.devnet.solana.com")
```
Here, we are simply initializing a devnet client, now we would need to specify some variables, have a look into the following:
```python
from solathon import PublicKey
from solathon.utils import sol_to_lamport

public_key = PublicKey("your_public_key")
amount = sol_to_lamport(1)
```
Here we are creating our public key object using Solathon's `PublicKey` class by passing our wallet's public key as a string; then we are specifying the amount we wish to airdrop ourselves. Note that we are using `sol_to_lamport` function from Solathon; that is because the standard unit for amounts on the Solana blockchain is `lamports`. However, since we are more familiar with using SOL token, we can use this function for easy conversions. Another thing to remember is that you can airdrop yourself 2 SOLs at once.

Now comes the last part, we will use the `request_airdrop` method from `Client` to get ourselves one SOL:
```python
response = client.request_airdrop(public_key, amount)
print(response)
```
And that's it! Here is the full code:
```python
from solathon import Client, PublicKey
from solathon.utils import sol_to_lamport

client = Client("https://api.devnet.solana.com")
public_key = PublicKey("your_public_key")
amount = sol_to_lamport(1)

response = client.request_airdrop(public_key, amount)
print(response)
```
As you can see, it's quite easy to airdrop yourself some SOL tokens using Python and Solathon SDK. Hopefully this tutorial was helpful and you learned something new; feel free to ask questions if any. See you soon next time! Thanks for reading.
Git reflog is an alias for git log -g
Tags: git, cli, todayilearned
Published: 2022-02-19 15:05:54

---
canonical_url: https://waylonwalker.com/til/git-reflog-is-an-alias/
published: true
tags:
- git
- cli
- til
series: til
title: Git reflog is an alias for git log -g
---

Right inside the git [docs](https://git-scm.com/docs/git-reflog#_description), is states that the `git reflog` command runs `git reflog show` by default which is an alias for `git log -g --abbrev-commit --pretty=oneline`

This epiphany deepens my understanding of git, and lets me understand that most
`git log` flags might also work with `git log -g`.


## full or short format

Here are some git commands for you to try out on your own that are all pretty similar, but vary in how much information they show.

``` stat
# These show only first line of the commit message subject, the hash, and index
git reflog git log -g --abbrev-commit --pretty=oneline

# similar to git log, this is a fully featured log with author, date, and full
# commit message
git log -g
```

## add files

If I am looking for a missing file, I might want to leverage `--name-only` or
`--stat`, to see where I might have hard reset that file, or deleted it.

```
git reflog --stat git log -g --stat --abbrev-commit --pretty=oneline

git reflog --name-only git log -g --name-only --abbrev-commit --pretty=oneline
```

## example

Here is an example where I lost my `docker-compose.yml` file in a git reset, and got it back by finding the commit hash with `git reflog` and cherry picked it back.

``` bash
❯ git reflog --name-only
0404b6a (HEAD -> main) HEAD@{0}: cherry-pick: add docker-compose
docker-compose.yml
3cfcab9 HEAD@{1}: reset: moving to 3cfc
readme.md
9175695 HEAD@{2}: cherry-pick: add docker-compose
docker-compose.yml
3cfcab9 HEAD@{3}: reset: moving to 3cfc
readme.md fd74df3 HEAD@{4}: commit: add docker-compose docker-compose.yml
3cfcab9 HEAD@{5}: reset: moving to HEAD
readme.md
3cfcab9 HEAD@{6}: commit (initial): add readme
readme.md
```

This just proves that its harder to remove something from git, than it is to get it back.  It can feel impossible to get something back, but once its in, it feels even more impossible to get it out.
New open-source repository collation
Tags: opensource, python, javascript, algorithms
Published: 2022-02-19 15:03:47

[KnowledgeHub](https://polaron3d.com/Hub/)

We will be pulling datasets from arxiv, ieee, github, gitlab, and bitbucket on a weekly basis. All open source about topics that relate to the Polaron World Engine. The repositories are ranked by multiple factors that reflect popularity therefore already in  usefulness order (descending; with most popular on top). We hope to bring an additional scanner/locator tool into the vast organised chaos of the open source world.

Please visit from time to time and have a look around.

[KnowledgeHub/point-clouds](https://polaron3d.com/Hub/point-clouds/)
[KnowledgeHub/lidar](https://polaron3d.com/Hub/lidar/)
[KnowledgeHub/ray-marching](https://polaron3d.com/Hub/ray-marching/)
[KnowledgeHub/ray-tracing](https://polaron3d.com/Hub/ray-tracing/)
[KnowledgeHub/structure-from-motion](https://polaron3d.com/Hub/structure-from-motion/)
[KnowledgeHub/voxels](https://polaron3d.com/Hub/voxels/)
Ava and React Testing Library
Tags: javascript, webdev, testing
Published: 2022-02-19 14:54:15

The other day I needed to test a React hook with [Ava](https://github.com/avajs/ava), which lead me to try to use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/), and it took me a few minutes to figure out the best way to do so because the documentation to do so was spread over several pages.

I'm working with npm, so adjust commands as needed. First, set up some packages:

```bash
npm install react react-dom
npm install --save-dev ava @testing-library/react \
  global-jsdom jsdom
```

Now we can write a basic test. This is a trivial example, but shows how everything comes together.

```javascript
import "global-jsdom/register";

import React from "react";
import test from "ava";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";

test.afterEach(cleanup);

function Button() {
  const [state, setState] = React.useState("Hello");

  return <button onClick={() => setState("World")}>{state}</button>;
}

test("setState", (t) => {
  render(<Button />);

  const button = screen.getByText("Hello");
  fireEvent.click(button);

  t.not(screen.getByText("World"), null);
});
```

The crucial bits for getting this all working:

* `import "global-dom/register";` sets up jsdom globally in our tests.
* `test.afterEach(cleanup);` makes sure that React Testing Library gets cleaned up after each test.

The rest is just normal React Testing Library usage.
JavaScript is single threaded programming language. What does it mean?
Published: 2022-02-19 14:45:09

Single threaded programming language simply means that the language can execute only one task at a time. 

Let us say there are three functions in our code.

```
function add (a,b){
   console.log(a+b);
}

function subtract (a,b){
   console.log(a-b);
}


function multiply(a,b){
   console.log(a*b);
}

```

when all these functions are called like below

```
add(1,2);
subtract(3,2);
multiply(4,1);
```
These functions runs on a sequence, first the add function gets executed, then subtract function gets executed and then finally multiply function gets executed.

The add function runs before subtract function and it blocks the execution of subtract function until the execution of add function is completed.