teleren/devto huggingface dataset:
.Env, .gitignore, and protecting API keys
Published: 2021-02-15 14:15:03

Environment files, .gitignore, api_keys and how to use them took longer than it should have to fully 'click' for me.This blog post will hopefully be a good starting ground for others. 

TL;DR: 
- files in .gitignore don't get uploaded onto github 
- keep your api_key in the your .env file ; have your .env file included within your .gitignore file 
- access your api_key with REACT_APP

#API Keys
First off, API keys are, or can be, a unique identifier (think like a password) used to authenticate the identity of the developer. Sometimes the api_keys are included within the get/post/delete request. Please note that different platforms use API_keys in different manners. 

As an example:

```
fetch(`https://testing.com/api/v4/webhook/add?token=1234abc`
.then(response => response.json() 
.then(data => console.log(data))

```

From the above fake snippet, we can see that within the fetch request, we have the "token=1234...", which is an example of how api_keys can be imbedded within the get URL.

#**How can we protect this?** 

#.gitignore 
Put simply, this is a file dedicated to keep track of what files NOT to upload onto Github, so the whole world wont see the various information contained therein. 

#How to set up? 
When we creating our own new repository on Github, we have the option to create a .gitignore file. 


If we didn't initially do this, we could also quite simply 
````
touch .gitignore in our root directory
```

Ok - we have a basic overview of api_keys, and .gitignore... how does the .env file fit into all this? 

#.ENV
Short for environment variable. Within the context of api_keys and .gitignore files, it is essentially a variable that we don't want other users/ developers to see. 

It is vital that the api_key remains within the .env file and is not known to the outside world. There are countless stories on the internet with developers not securing their api_keys within the .env, and being charged $$ from the api provider. 

Key to note, when creating the .env file, it must be done within the root directory, and not within the src files!

#How to add .env in our .gitignore file? 
````
#in our .gitignore file 
.env
``` 

````
#within our .env file
REACT_APP_api_key= "your_api_key_here" 
```
Within the above code snippet, the REACT_APP must be used, per the REACT docs. 
https://create-react-app.dev/docs/adding-custom-environment-variables/

When we want to access the api_key within our app, such as when making a fetch request to the api_server: 
```` 
#below is how to access to api_key from our .env file. 
Notice how the below matches the variable in the .env file?
process.env.REACT_APP_API_KEY}
``` 
So, to put this all together in an example fetch request

````
#wherever we are making our example fetch requests... 
fetch(`fetch(`https://testing.com/api/v4/webhook/add?${process.env.REACT_APP_API_KEY}`
.then(response => response.json() 
.then(data => console.log(data))
````
There we have it - a super quick guide on gitignore, .env, and how to incorporate them into your React app.
AbstractMark, the modern markdown language.
Tags: javascript, markdown, abstractmark
Published: 2021-02-15 14:04:55

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u8ds2sc2je7yr24snruh.png)

# Introduction
Have you ever considered creating a website or post with custom CSS styling and even more features and keep the source as clean as traditional Markdown language? If you are, AbstractMark will be a good markup language for you! Indeed, you'll be able to create a well-designed website just by using AbstractMark itself!

AbstractMark is a lightweight markup language designed to inherit the traditional syntax and add supports for styling website and using a constant syntax (which means in most cases, there'd be only one syntax, ex: there's only one way to bold a text, `**Bold text**`).

> FYI, AbstractMark is different from [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) editor. AbstractMark inherited from Markdown to use AbstractMark-formatted file which are `.am` and `.abstractmark` extended file.

# Quick Start:
For now, which is the early development progress for JavaScript Implementation, you can both try it on [our playground](https://abstractmark.netlify.app/playground) and AbstractMark CLI by installing AbstractMark globally on npm package manager which is documented [here](https://github.com/abstractmark/javascript#abstractmark-cli).

# Overview 
Overview of AbstractMark syntaxes that are not supported in traditional markdown language
- Class
  - Defining class and its styles which are CSS-based.
    
    ```
    ---define
    .className{
       //styles here
    }
    .otherClass{
       //Other styles here
    }
    ```
    
  - Using class on an element
    
    ```
    Element {.className}
    ```
    
    For example: `# Heading {.className}`
- Inline style
    `element {key: value}`, example: `# Hello World {color:red}`
- External stylesheet
    `stylesheet: (stylesheet link)`
- External JavaScript
    `script: (external script link)`

# Links
GitHub: https://github.com/abstractmark
Documentation site (in progress): https://abstractmark.netlify.app/
Playground: https://abstractmark.netlify.app/playground
Cheatsheet: https://abstractmark.netlify.app/cheatsheet

# Development Progress
For now, AbstractMark has been implemented on JavaScript language and released its beta version, besides, CLI has been built on top of JavaScript is available now. Of course, we'll implement it in other languages, but we need not only contributors but also maintainers! Please [reach us](https://github.com/abstractmark) if you are interested. Development progress will be also posted as a blog monthly on dev.to :) Stay tuned!

Please drop a star on GitHub or consider using it if you like to :)

{% github abstractmark/abstractmark %}
When to Use React Fragment
Published: 2021-02-15 13:49:33

---
title: When to Use React Fragment
published: true
description: Employing this simple syntax can produce cleaner DOM output.
tags: 
//cover_image: https://direct_url_to_image.jpg
---
I'm sure anyone that's written anything with React has gotten the error `Adjacent JSX elements must be wrapped in an enclosing tag`. Simply put, a React component can only have one HTML element at its root. So if you want to display an `h2`tag and a `p` tag in the same component, you need to wrap them in something. (Part of the reason I love [Svelte](https://svelte.dev/) is that you can put as many elements as you want in the root of a component.) To solve this error most people do this:

```javascript
const MyComponent = () =>  {
  return (
    <div>
      <h2>Title</h2>
      <p>Some text.</p>
    </div>
  )
}

export default MyComponent
```

But the problem is that when you just use a lot of `div`s you create very convoluted DOM output. This image shows the code from one post in a Facebook feed:

![Screenshot (192)](https://dev-to-uploads.s3.amazonaws.com/i/vzdzaa0qozx5ctvlnl1v.png)

The thing is React has built-in syntax that can help fix this. It's the fragment: `<>`. You can use it in place of a `div` or other HTML tag. So our above code example becomes:


```javascript
const MyComponent = () =>  {
  return (
    <>
      <h2>Title</h2>
      <p>Some text.</p>
    </>
  )
}

export default MyComponent
```

So when should you use a fragment? **You should use a fragment anytime you don't need a DOM element for display purposes.** The only time you should use a DOM element is when you need it for styling purposes or semantic needs (like wrapping content in an `article` element).

Why does this matter? Because it's less DOM that has to be rendered and diffed on re-render, so it can be faster. Also modern CSS features like `flexbox` and `grid` work so much better when there are fewer elements.
Swipeable list component for react
Tags: react, showdev, webdev, news
Published: 2021-02-15 13:37:28

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cqk3vvnvxn0sb21nnswl.gif)

I've created a react component that imitates iOS and Android swipe actions. It works both with mouse and touch events so it should be OK on mobile.

There are several props that can change behaviour of this component and tried to used as much as possible [Compound Components](https://kentcdodds.com/blog/compound-components-with-react-hooks) and hooks. I was wondering how these react patterns will work in a module.

You can find this component on [GitHub](https://github.com/marekrozmus/react-swipeable-list), check how this work on [this site](https://marekrozmus.github.io/react-swipeable-list/) or try it on [CodeSandbox](https://codesandbox.io/s/github/marekrozmus/react-swipeable-list/tree/main/examples).

Still working on "Microsoft Outlook" version so stay tuned :)

All comments are welcome :)
Day 16: Pascal's Pyramid
Tags: 100daysofcode, python
Published: 2021-02-15 13:33:50

Pascal's Pyramid is the 3-dimensional version of Pascal's Triangle. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/basq4jqox994wk1qjp9s.png)

Like in Pascal's Triangle, each number is the sum of numbers above it. The cap of the pyramid (Row 0) is 1. In Row 1, the three numbers are 1, just as in the triangle, because it is the sum of numbers above it. Each number in the following rows is the sum of the numbers above it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cv1kk6kv9d45i1sw5mj7.png)

```python
from functools import lru_cache

@lru_cache(maxsize=None)
def trinomial_coefficient(l, n, k):
    if l < 0 or n < 0 or k < 0:
        return 0

    head = (n == 0 and k == 0)
    bottom_left = (n == l) and (k == 0)
    bottom_right = (n == l) and (k == l)

    if head or bottom_left or bottom_right:
        return 1

    return (trinomial_coefficient(l-1, n-1, k-1) +
            trinomial_coefficient(l-1, n-1, k) +
            trinomial_coefficient(l-1, n, k))


def pascal_pyramid(l):
    rows = list()
    for n in range(l+1):
        coefficients = list()
        for k in range(n+1):
            coefficients.append(trinomial_coefficient(l, n, k))
        rows.append(coefficients)
    return rows

for row in pascal_pyramid(5-1):
    print(row)
```
Ant Design has its GitHub repo deleted
Tags: opensource
Published: 2021-02-15 13:32:04

Hey guys, I've just found that Ant Design has its GitHub repo deleted.
![image](https://dev-to-uploads.s3.amazonaws.com/i/kuuo27r1y9trtmy1venc.png)
![image](https://dev-to-uploads.s3.amazonaws.com/i/3qm55dfpodkk7pccdf7x.png)
And this is the official response to the deletion:
![image](https://dev-to-uploads.s3.amazonaws.com/i/lmuskgvqisrjvsjd9ftr.png)
By the time I sent this post, it still remains `404 Not Found`.
Puppeteer on Lambda! Updated and better.
Tags: lambda, aws, puppeteer
Published: 2021-05-27 19:24:13

---
title: Puppeteer on Lambda! Updated and better.
published: true
date: 2021-02-15 13:09:00 UTC
tags: Lambda,aws,lambda,Puppeteer
canonical_url: https://javascriptwebscrapingguy.com/puppeteer-on-lambda/?utm_source=rss&utm_medium=rss&utm_campaign=puppeteer-on-lambda
---

[Demo code here](https://github.com/aarmora/puppeteer-on-lambda)

<iframe title="Puppeteer on Lambda!" width="640" height="360" src="https://www.youtube.com/embed/upbxQek0H1Q?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Uploading directly to Lambda has a size limit of 50MB.

This makes it difficult for Puppeteer, which is a very large library. Uploading your code to s3 and then updating your function from there increases this size limit to (I think) 250MB!

I use 7zip and typescript and here is my scripts that I use to upload to Lambda.

```
"scripts": {
    "zip": "tsc && 7z a -r function.zip ./dist/* node_modules/",
    "sendToLambda": "npm run zip && aws s3 cp function.zip s3://chrome-aws && aws lambda update-function-code --function-name puppeteer-on-lambda --s3-bucket chrome-aws --s3-key function.zip"
  },
```

## Looking for business leads?

Using the techniques talked about here at [javascriptwebscrapingguy.com](https://javascriptwebscrapingguy.com), we’ve been able to launch a way to access awesome web data. Learn more at [Cobalt Intelligence](https://cobaltintelligence.com)!

The post [Puppeteer on Lambda! Updated and better.](https://javascriptwebscrapingguy.com/puppeteer-on-lambda/) appeared first on [Javascript Web Scraping Guy](https://javascriptwebscrapingguy.com).
Daily Developer Jokes - Monday, Feb 15, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-02-15 13:00:23

---
title: "Daily Developer Jokes - Monday, Feb 15, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Feb%2015%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125994c8f5a.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q___: Did you hear what the clumsy cryptographer did to their password?

___A___: Made a hash of it.
 -->
[Video] Adding Sign Language to your online event
Tags: a11y, onlinevents, signlanguage
Published: 2021-02-15 12:06:23

After the [blogpost](https://dev.to/azure/adding-sign-language-interpretation-to-your-online-event-3c6g) Maya and me where invited to the Microsoft Reactor to talk about how you can add sign language to your online event.

{% youtube sWMUY87VdA0 %}

Henk Boelman (Cloud Advocate) and Maya de Wit (Sign language interpreting consultant) will look into how you can make virtual events more inclusive by adding sign language interpretation. We will explore what sign language interpretation is, lessons learnt and conclude with some tips how you can practically add sign language interpretation to your online event.
Enums in PHP8.1
Tags: php, enums, php81
Published: 2021-02-15 11:36:15

---
title: Enums in PHP8.1
published: true
description: PHP8.1 adds Enums to the language, this is how you can use them projects once 8.1 is released.
tags: php, enums, php81
//cover_image: https://direct_url_to_image.jpg
---

At University I had used Java quite a bit and found Enums a great way to express data that I knew wasn't going to change and was super useful in many types of applications. However, when I got started with PHP and it didn't have Enums I was slightly surprised. However, that is going to change with PHP8.1 as Enums are coming to PHP!

To use Enums in our applications we will be able to do something like this:
```
enum Case {
  case Open;
  case Active;
  case Closed;
}
```
And then in a class that uses the `Case` Enum we would be able to do something like this: `$caseStatus = Case::Open;`

I know for sure I will be using Enums in my applications when I can.

Hope you enjoyed, catch you later!
Parcel-Tailwind Template
Tags: javascript
Published: 2021-02-15 11:24:40

# A [Template Repo](https://github.com/manavm1990/parcel-tailwinds-starter)

This might be for you if at least _most_ of the following is true:

- You want to build a simple Single Page Application using [ParcelJS.](https://parceljs.org/) ✅
- You don't love writing a whole lot of custom CSS but also don't want the bloat/limitations of Bootstrap, etc. so you want to use [Tailwind CSS.](https://tailwindcss.com/) ✅
- You are using [VS Code](https://code.visualstudio.com/) and want a nice theme, font, extensions and settings preconfigured to handle your linting, and even appreciate AI-driven 🤖 code completion from [Kite.](https://www.kite.com/) ✅
- You appreciate robust linting such as comes with [AirBnb's ESLint configuration](https://www.npmjs.com/package/eslint-config-airbnb-base)...but maybe want it toned down just a little bit. ✅
- You appreciate a starting point for a robust architecture 🏗️ that adheres to some common patterns so it's easier to think 🧠 about things like 'separation of concerns' and 'single source of truth' ✅
- You're tired 😫 of reading this and just want to [go use the dang thing](https://github.com/manavm1990/parcel-tailwinds-starter/generate) with a simple `npm install` followed by an `npm start` ✅
Bityard Review — The world’s simplest exchange for crypto derivatives
Tags: exchange, cryptocurrency, bitcoin, ethereum
Published: 2021-02-19 03:25:38

---
title: Bityard Review — The world’s simplest exchange for crypto derivatives
published: true
date: 2021-02-15 11:21:16 UTC
tags: exchange,cryptocurrency,bitcoin,ethereum
canonical_url: https://medium.com/coinmonks/bityard-review-the-worlds-simplest-exchange-for-crypto-derivatives-57311965c9f
---

[![](https://cdn-images-1.medium.com/max/2600/1*vcHtzxNWDMPCzD2BOEgaIA.png)](https://medium.com/coinmonks/bityard-review-the-worlds-simplest-exchange-for-crypto-derivatives-57311965c9f?source=rss----721b17443fd5---4)

Founded in 2019 in the tech capital of Asia, Singapore, Bityard is a crypto derivatives exchange,

[Continue reading on Coinmonks »](https://medium.com/coinmonks/bityard-review-the-worlds-simplest-exchange-for-crypto-derivatives-57311965c9f?source=rss----721b17443fd5---4)
Upload pictures quickly using PicGo
Tags: github
Published: 2021-02-15 10:59:48

Hello dev.to! This is my first post on dev.to.
Today, I am going to talk about uploading pictures quickly.

## Preparation
You need to prepare:
1. the installed PicGo app which can be downloaded [here](https://github.com/Molunerfinn/PicGo/releases/tag/v2.3.0-beta.4). Make sure to download the application for your OS.
2. a GitHub account
3. a GitHub token that I will introduce later.

## Operation
### Open the app
OK, assume you are fully prepared, and now you can open the PicGo app. 
And it looks like this (sorry for Chinese):
![image](https://dev-to-uploads.s3.amazonaws.com/i/x0aremge0j2cy0leqtfc.png)
### Config
#### Choose "Github" from sidebar
It's here:![image](https://dev-to-uploads.s3.amazonaws.com/i/gcagpiqz26xrqi4s6cdy.png)
Click it.
#### Config the repo, token and branch
The interface looks like this:![image](https://dev-to-uploads.s3.amazonaws.com/i/serrzp8xf5xf526v9c78.png)
Note that your interface should be blank.
##### GitHub token
You can generate a token [here](https://github.com/settings/tokens/new). You will have to enter your GitHub password.
So you can see this:![image](https://dev-to-uploads.s3.amazonaws.com/i/e4eml84mngrzci39bubz.png)
Input `PicGo` in the `Note` part.
**And, your scope should contain `repo`.** ![image](https://dev-to-uploads.s3.amazonaws.com/i/a75b2wtfqwz4z5xenj8w.png)
Also, you can choose other scopes as more as you like. Then, click the `Generate Token` button at the bottom. It's a green one, like this: ![image](https://dev-to-uploads.s3.amazonaws.com/i/7fr1ffn3paip38lmykcj.png)
After that, you can see a freshly-generated token.
![image](https://dev-to-uploads.s3.amazonaws.com/i/snufqgki8n475o7q1ywy.png)
Make sure to copy that and save that to a safe place. You won’t be able to see it again!
##### GitHub repo config
Now, you can create a repo on GitHub [here](https://github.com/new). Make sure to choose the `Add a README file` in the `Initialize this repository with:` part.
![image](https://dev-to-uploads.s3.amazonaws.com/i/hm7sj7bpfkrq0lg9iwj2.png)
Then, click `Create repository` down below.
### Final part
Enter your repo detail and token in the PicGo interface.
The repo name should be entered as `username/repo name`.
For example, if your username is `user` and your repo name is `pic`, you should enter `user/pic`.
Then, enter `main` as the branch.
After that, enter the token that was generated beforehand.
Finally, click `Submit`.
Then it's over!
## Using PicGo
Return to the `Upload Part`, and click onto the part that says "Click here to upload", and choose a picture. If your upload is successful, you can find that there's a Markdown code in your clipboard.

Happy Reading! Remember the ❤.
Daily.Dev : The Best Chrome extension for sourcing programming news in tabs
Tags: webdev, productivity, news, chrome
Published: 2021-02-15 10:56:28

## Concepts

![Alt Image](https://res.cloudinary.com/practicaldev/image/fetch/s--hbaa08kB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/jzcqz1w3ocaygnj4tdw9.gif)

Daily is the perfect place to discover development articles with no effort. It will help you boost your knowledge and save time. Simply open a new tab, and you're all set for the day.

![Alt Image](https://assets.website-files.com/5e0a5d9d743608d0f3ea6753/5fd0d43251b7337b07c310ad_Card%201.png)

Daily is a paradise for any developer! Want to see news on web development? No problem. Machine learning? You got it. Easily select your desired topics, and we will take it from there. Oh, and you can also adjust the look and feel to boost your productivity.

![Alt Image](https://assets.website-files.com/5e0a5d9d743608d0f3ea6753/5fd0d70b03dc3a4ed731b84d_List%20View.png)

Save interesting articles for later read and cure your information overload. Daily helps you manage your content seamlessly. Bookmark a piece you like and followup on it on your browser and mobile anytime.

![Alt Image](https://assets.website-files.com/5e0a5d9d743608d0f3ea6753/5fd0d504c21eb67ef4030cdf_Card%203-p-500.png)



## Link

[https://daily.dev/](https://daily.dev/)

[https://chrome.google.com/webstore/detail/dailydev-news-for-busy-de/jlmpjdjjbgclbocgajdjefcidcncaied](https://chrome.google.com/webstore/detail/dailydev-news-for-busy-de/jlmpjdjjbgclbocgajdjefcidcncaied)