teleren/devto huggingface dataset:
SEND MAILS USING HTML ONLY
Tags: html, programming, webdev
Published: 2021-12-08 09:38:49

**Do you know we can send email using html tags only!!
lets begin...**

## Html Email tag
HTML **< a >** tag provides you option to specify an email address to send an email. while using **< a >** tag as an Email tag, you will use 
**mailto:email address** (we are not using http) along with href attribute.
Below is the pictorial code of above explanation 👇


![HTML EMAIL TAG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0d47qc875mekwa31hng.jpg)

Booom!!! you're done.

**BONUS👻**

**Send Multiple email**
Html tag also provide multiple option to send email to multiple email address.
see below 👇


![multiple tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0tt475fa3ufphdhxlpn.jpg)

**Add CC & BCC**
Html5 also allows you to add **CARBON COPY(CC) and BLIND CARBON COPY (BCC)** fields when you open the new mail with the help of href attribute.

![CC AND BCC TAG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msjzhhcnoezokkzmgh9x.jpg)

**Add Subject**
Email is nothing without subject right 🤔, Don't worry in Html5 we can add a subject using **Subject** key within **< a >** tag.
below is the code 👇

![Subject tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4sccwb3rmj6xj67mu2k.jpg)

So let's sum up our whole learning in one example below!!!

![All in one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wv7nfoclb8sca4lr6c0.jpg)

**Thank you!!!**
Any suggestions is appreciated.

Do check my previous posts you will find it useful..
Placeholder title
Tags: actionshackathon21
Published: 2021-12-08 09:25:49

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
https://github.com/bonifasiustrg/GithubActions2021
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)


### Submission Category: 
Run python script
[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)


### Yaml File or Link to Code
github https://github.com/bonifasiustrg/GithubActions2021/tree/main/.github/workflows
[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{%github https://github.com/bonifasiustrg/GithubActions2021/tree/main/.github/workflows %}` to share a GitHub repository)
How To Check If Array Is Empty In TypeScript
Tags: array, empty, javascript, typescript
Published: 2021-12-08 09:12:06

When processing JSON responses in TypeScript, how do you safely check if a variable is an array and is not empty?

Let's say we get a response from an API (in this example, it's [Kontent API](https://docs.kontent.ai/reference/kontent-apis-overview)):

```js
const blogPosts: BlogPost[] = (await deliveryClient
  .items<BlogPost>()
  .type("blog_post")
  .toPromise())?.data?.items
```

We expect that response to be an array of `BlogPost` objects. Also, note the `?.` notation that allows us to unwind the response and select just the data we need. If the response doesn't have the expected format, we will get `null` instead of `undefined` error.

Therefore, we first need to check if the response is a defined array:

```js
if (!Array.isArray(blogPosts)) {
  throw new Error("Response has a wrong format")
}
```

The `Array.isArray` function will catch all possible values:

```js
// all these calls return false
Array.isArray(undefined)
Array.isArray(null)
Array.isArray({})

// DON'T DO THIS
// as there is no need for checking the variable separately
if (blogPosts && Array.isArray(blogPosts)) { }

// DO THIS
// Array.isArray() is doing the null and
// undefined check automatically
if (Array.isArray(blogPosts)){ }
```

*Note: Check [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) for more information.*

Then, we check if the array contains any items via `.length` property:

```js
if (blogPosts.length == 0) {
  throw new Error("Response contains no items")
}
```

And that's it. 💪

The full code looks like this:

```js
const blogPosts: BlogPost[] = (await deliveryClient
  .items<BlogPost>()
  .type("blog_post")
  .toPromise())?.data?.items

if (!Array.isArray(blogPosts) || blogPosts.length == 0){
  throw new Error("No data")
}

// all good here
console.log(blogPosts)
```

You can also wrap the code in `try/catch` block to make sure you also catch errors from network communication.

If you need any help with processing your Kontent data, [join our Discord](https://bit.ly/kontent-discord)! 😎
Python Cheat Sheet
Tags: python, programming, beginners, tutorial
Published: 2021-12-08 09:08:09

#Welcome back to new post (Actually it isn't a post )
In this post I will give a link to python cheat sheet so you can access it whenever programming in python.

[Download cheat sheet](https://www.mediafire.com/file/2rzjm0yl8x9t1uy/Python_Cheat_Sheet.pdf/file)

I hope this cheat sheet may help you.
Be safe and do take very good care of yourselves .
Thanks for reading!
How to use .env file in a React Native Application
Published: 2021-12-08 08:52:00

Using environment file (.env) to configure most critical variables like database credentials, api keys, is the most common practice in software development. In this post, we are going to see how to create and use .env file in react native.

First, we need to install and use a babel plugin called <b>react-native-dotenv</b>. Install this plugin under your project root directory using the command below;
```javascript
npm install react-native-dotenv
```
This babel plugin lets you inject your environment variables into your react-native application.

<b>.env file</b>
Create .env file under your project root directory and example looks like below;
```
APP_NAME=MyRNApp
COMPANY_EMAIL=yyy@xxxx.com
API_KEY=myapikeyisplacehere
```

Create if you don't have <b>babel.config.js</b> file under your project root directory, and add the following code
```javascript
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ["module:react-native-dotenv", {
      "envName": "APP_ENV",
      "moduleName": "@env",
      "path": ".env",
      "safe": false,
      "allowUndefined": true,
      "verbose": false
    }]
  ]
};

```

<b>How to access and use environment variables in your components</b>
```javascript
import React from 'react'
import {View, Text} from 'react-native'
import {APP_NAME, API_KEY, COMPANY_EMAIL} from '@env'

const App = () => {
return (
   <View>
    <Text>My App name is {APP_NAME}</Text>
    <Text>My API Key is {API_KEY}</Text>
    <Text>Company email is {COMPANY_EMAIL}</Text>
   </View>
);
}

export default App;
```

**Output on your emulator or phone device screen**
```
My App name is MyRNApp
My API Key is myapikeyisplacehere
Company email is yyy@xxxx.com
```
As you can see the above output, we have been able to load environment variables,APP_NAME, API_KEY and COMPANY_EMAIL into our react native application.

**NOTE:**
If you are using Typescript, create a file **env.d.ts** or **env.d.tsx** in your project root directory and then define module '@env' in it forexample;

```typescript
 declare module '@env' {
    export const API_URL: string;
    export const APP_MAJOR_VERSION: string;
    export const APP_MINOR_VERSION: string;
    export const APP_PATCH_VERSION: string;
 }
```

And that's the basic example of how you can use a .env file in a react native application. Thank you for reading through this article.
Circular Navigation
Tags: codepen
Published: 2021-12-08 08:51:53

<p>From CODROPS <a href="http://tympanus.net/Tutorials/CircularNavigation/index2.html" target="_blank">http://tympanus.net/Tutorials/CircularNavigation/index2.html</a></p>

{% codepen https://codepen.io/juslwk/pen/xgbDB %}
Sideproject Update - Fluenticons v2
Tags: vue, javascript, webdev, programming
Published: 2021-12-08 08:46:18

So, last February I had made a small weekend project and last month I released a version 2 of it. 

[Fluenticons](https://fluenticons.co) is an icon viewer for Microsoft fluent icons. It has over 4000+ open beautiful icons which you can use in your projects.

Fluenticons is now sponsored by Iconfinder, sign up and get $10 worth of credits (via the banner in fluenticons).

### What's new in v2?

- No more hacks, I've used actual SVG's now, so I was able to add some new features like manipulating them.
- You can copy snippets for SVGs, Vue component, React Component, HTML Image.
- You can download SVGs, PNGs, WEBP, Vue component, React Component now.
- Manipulate colors to see how the icon looks.
- More performant, loads way too fast now. (Scores 100 on Lighthouse Yay!!). Was surprised to see the site loading in 600ms when I moved from vercel to cloudflare pages.

### What's next?
- Make an advanced editor like adding frames behind the icons. Inspiration - Bakery & Iconscout's Icon Editor (requires a lot a math, which I am not good at.)
- Make a npm package for others to use the components in their own web projects, probably looking a web component, maybe like boxicons.

### Tech stack
Nuxt.js
Tailwind Css.
Hosted on cloudflare pages.
Kafka Summit London 2022- Call for Papers closes soon
Tags: apachekafka, conference, callforpapers
Published: 2021-12-08 08:18:20

[Kafka Summit](https://www.kafka-summit.org/) is the [fandabidoziest](https://www.collinsdictionary.com/dictionary/english/fandabidozi) conference dedicated to Apache Kafka® and event streaming. The [Call for Papers](https://sessionize.com/kafka-summit-london-2022/) (CfP) closes in less than two weeks - and we would love to hear from Kafka users, architects, operators, and anyone with an interesting Kafka story to tell. 

To get an idea of the kind of talks that Kafka Summit audiences enjoy check out the [programmes from previous Summits](https://www.kafka-summit.org/past-events). Whether it's tales from the trenches, abstract architectural anecdotes, or scintillating stories of streams, we want to hear from 👉️ YOU 👈️. 

We're keen for involvement from everyone in the Kafka community - you don't need to be a seasoned speaker to submit. In fact, we would love to hear from more first-time speakers. 

To support speakers both old and new we've got resources [📕](https://rmoff.net/2020/01/16/how-to-win-or-at-least-not-suck-at-the-conference-abstract-submission-game/) [🎥](https://www.youtube.com/watch?v=N0g3QoCuqH4) on writing a good abstract, and would be delighted to offer help reviewing it before you submit - [we're holding an "office hours" next week](https://dev.to/confluentinc/kafka-summit-office-hours-for-abstract-writing-2kgc). If your talk is accepted and you'd like help preparing and rehearsing your talk we'd be happy to help support that too. 

Remember: the CfP closes in less than two weeks (2021-12-20 at 23:59 GMT) - so [submit](https://sessionize.com/kafka-summit-london-2022/) without delay! If you have any questions, please do feel free to contact me directly - `robin@confluent.io`. 

_P.S. Here's a little-known fact about CfPs: at this stage you don't need to have written the talk itself - just the abstract. If your talk is accepted then you need to write it :)_
Build Products to learn coding.
Tags: javascript, beginners, react, webdev
Published: 2021-12-08 08:11:13

Hello Dev Friends.
I wish before starting with programming I would have known that it is one of the tools to change the world.It is not just about learning a programming language.In one of my previous blogs I have written about How to think while building Applications but here I want to talk about how to think about what to build.

If you are a beginner then most probably you might be scrolling through the tutorials online to find out what you should build next.There are several ideas out there on the internet.And the most obvious advice we have heard is to "Build, Build and Build Projects".

So,here are my points:

1.After you reach a comfortable level in coding,do not search for the projects on internet for a minute and think about what YOU would like to build for your own and not just for learning.

2.Start with a known problem if not a very complex one.

3.Jot down the features you would like to add to the application.

4.Finalise the UI.

5.Once you are done with the solution then start coding.

6.My advice would be to code it completely without looking at any tutorial to see how others have done it. Ofcourse, Google when you are stuck.

7.Once you are ready with version 1,think about what more features you would like to add to it further.

8.Also think about it as a Product so you can also make a mobile app or PWA or just a web application with a deployed link.

For example,I thought of building a Phonebook to store contact details category wise.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hb5yu1ub9o9020wb0340.JPG)
[Live Project Link](https://hardcore-lovelace-7dc6d0.netlify.app/)

It is a known and easy problem.I have used React for building it and Bootstrap for UI.
[Github Repository Link](https://github.com/kritika27/phonebook-react)

Let me know what you have build.

Happy Coding :)
You can follow me on [Twitter](https://twitter.com/kritikasri27) and [Github](https://github.com/kritika27).
Advent of PBT 2021 - Day 8
Tags: challenge, testing, webdev, javascript
Published: 2021-12-08 08:01:47

---
title: Advent of PBT 2021 - Day 8
published: true
description: Advent of Property Based Testing - Day 8
tags: challenge,testing,webdev,javascript
//cover_image: https://direct_url_to_image.jpg
---

> _Advent of PBT 2021 — Learn how to use property based testing and [fast-check](https://github.com/dubzzz/fast-check) through examples_

Our algorithm today is: **hasDuplicates**.
It comes with the following documentation and prototype:
```ts
/**
 * Check if an array contains two equal values
 * Comparison operator in use is `Object.is`
 *
 * @param data - Array of data
 *
 * @returns
 * `true` if `data` contains two values such as
 *        `Object.is(data[i], data[j])` is `true`
 * `false` otherwise
 */
declare function hasDuplicates<T>(data: T[]): boolean;
```

We already wrote some examples based tests for it:
```ts
it("should not detect any duplicates in empty array", () => {
  expect(hasDuplicates([])).toBe(false);
});

it("should not detect any duplicates when array has distinct values", () => {
  expect(hasDuplicates([1, 2, 3, 4])).toBe(false);
});

it("should detect duplicate when array has one", () => {
  expect(hasDuplicates([1, 2, 3, 1])).toBe(true);
});

it("should detect duplicate when array has many", () => {
  expect(hasDuplicates([1, 2, 2, 1, 3])).toBe(true);
});
```

How would you cover it with Property Based Tests?

In order to ease your task we provide you with an already setup CodeSandbox, with examples based tests already written and a possible implementation of the algorithm: https://codesandbox.io/s/advent-of-pbt-day-8-2nziy?file=/src/index.spec.ts&previewwindow=tests

You wanna see the solution? Here is the set of properties I came with to cover today's algorithm: https://dev.to/dubzzz/advent-of-pbt-2021-day-8-solution-4c2j

---

[Back to "Advent of PBT 2021"](https://dev.to/dubzzz/advent-of-pbt-2021-13ee) to see topics covered during the other days and their solutions.

More about this serie on [@ndubien](https://twitter.com/ndubien) or with the hashtag [#AdventOfPBT](https://twitter.com/search?q=%23AdventOfPBT).
UI Dev Newsletter #86
Tags: html, css, javascript, webdev
Published: 2021-12-08 07:51:17

## Links


[Responsive Layouts, Fewer Media Queries](https://bit.ly/3GmEbU3)
Temani Afif shows how to replace multiple media queries with only one CSS declaration, resulting in more maintainable code.


[Small Wins for Accessibility and Resilience](https://bit.ly/31oRnsJ)
Callum Hart explains how providing more context to screen readers and improving default styles could improve accessibility.


[Don’t Forget the “lang” Attribute](https://bit.ly/3Gkf8Rg)
Michelle Barker explains why the lang attribute is essential.


[Microsoft’s new Windows prompts try to stop people downloading Chrome](https://bit.ly/3lDRt6H)
Tom Warren writes about new prompts in Edge that steer people away from Chrome.


[CSS Custom Properties and !important](https://bit.ly/3poXyF2)
Bramus Van Damme explains how does !important work when used with CSS Variables.


[Dan Abramov on Interview Tour](https://bit.ly/3Gds8Ik)
Ben Awad shares an interview with Dan Abramov where Dan answers questions about let vs. const, centering a div and computer science.


[Advent of Code](https://bit.ly/3DuAZ71)
Eric Wastl shares Advent of Code, an Advent calendar of small programming puzzles for various skill sets and skill levels.


[RTL Styling 101](https://bit.ly/3rDsbJs)
Ahmad Shadeed shares an extensive guide on how to style for RTL in CSS.


## Self-promotion

[Advent of UI Components](https://bit.ly/3GjNq7u)
I am building a new UI Christmas component for every day of advent. 🎄


**Happy coding!**

[Subscribe to the newsletter here!](https://buttondown.email/starbist)
FlaskCon 2021 Links
Tags: flask, python, flaskcon
Published: 2021-12-08 07:50:20

---
title: FlaskCon 2021 Links
published: true
description: Whole FlaskCon 2021 contents.
tags: flask, python, flaskcon
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l78pfcoto8rryqfcy2cx.png
---

FlaskCon 2021 / https://youtube.com/c/flaskcon

This edition hosted another round of great Flask content, coupled with the inclusion of Podcasts. Have fun watching!

---

Flask-Multipass - A pluggable authentication framework for Flask by Adrian Monnich
https://youtu.be/j37wYpiYRQY

Debugging flask application within a docker container using VSCode by Ashok Tankala
https://youtu.be/VjIYcJVZCP0

Enabling multi-tenancy with werkzeug by Abdeali (Ali) Kothari
https://youtu.be/EP0GaIQvr0c

Building Scalable APIs Using Flask and Docker by Emma Donery
https://youtu.be/sbdQPA60BjI

Application config management: Lightweight but enterprise-ready by Abdeali (Ali) Kothari
https://youtu.be/01zPKbRpgOo

Hassle Free Desktop Apps with Flask by Alin Climente
https://youtu.be/RApsKoC1a7s

Whole stream with QnA
https://youtu.be/-KyYRB0ffns

---

Making Location-Searchable Sites Using Geocoding and Elasticsearch by Jay Miller
https://youtu.be/KZnXjvtgABc

Dockerizing Flask For Production by Nico Plyley
[ speaker out ]

Testing Flask Applications with pytest by Patrick Kennedy
https://youtu.be/OcD52lXq0e8

Improve the efﬁciency of your Flask app's frontend by Randy Duodu 
https://youtu.be/CvZQ6bfpL00 
[ audio not good, in livetream talk to be found with good audio,
will send updated link soon ]

Building Secured Flask Apps by Randy Duodu
https://youtu.be/F3jCc_RMHMU 
[ audio not good, in livetream talk to be found with good audio,
will send updated link soon ]

HTMX + Flask: Modern Python Web Apps, Hold the JavaScript by Michael Kennedy
https://youtu.be/kNXVFB5eQfo

Whole stream with QnA
https://youtu.be/LCDa3RftUu0

---

Workshop: Building An Awesome SASS App by Sumukh Sridhara
https://youtu.be/biURI5jLGzM

Workshop: Packaging a Flask App: Deep Dive Into The Wheels of Packaging by Alexander Hultner
https://youtu.be/DThFxooHEJk

---

Podcast: How To Leverage Flask To Win Hackathons by Anush Krishna V 
https://youtu.be/dKD0rwTJ3IA 

Podcast: Building And Shipping Flask Side Projects Fast With Abhishek Kaushik 
https://youtu.be/LGGQ-zRt14k 

Podcast: Experience Learning Flask With David Carmichael 
https://youtu.be/xsZpLVdEsDk

---
Deploy to Heroku by Github Actions 
Tags: actionshackathon21
Published: 2021-12-08 07:38:43

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow: {% github https://github.com/paxF3E/whybzz %}
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)


### Submission Category: DIY Deployments


[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)


### Yaml File or Link to Code
https://github.com/paxF3E/whybzz/blob/hosted/.github/workflows/deploy-to-heroku.yml 
[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info
I suppose many other projects on Github must have been using this simple workflow, so I guarantee that the implementation is not copied, but done solely by me after going through basic Actions documentation.

### About Project
This is my first workflow which I implemented using Github Actions for a project I was working on. A discord bot for personal use, but for every commit, I have to manually Deploy the newer version from either Heroku CLI/Dashboard. So, to automate this task, I have finally implemented a workflow, and I'm glad that this was my first step towards Github Actions.
How to plot graphs in Python using Matplotlib
Tags: python, programming, tutorial
Published: 2021-12-08 07:33:13

Hello, I am back with another article on **Graphs** in Python.


To plot graphs we will be using two python libraries
- **matplotlivb**
- **numpy**

Let's go on to code,
- Importing libraries
```py
import matplotlib.pyplot as plt
import numpy as np
```
- Entering values plotted on the graph
```py
x = np.array([200, 400])
y = np.array([0, 100])
```

- Plotting them
```py
plt.plot(x, y)
```

- Displaying Graph
```py
plt.show()
```

* * *

### Make sure to check out the video
{% youtube https://www.youtube.com/watch?v=B-JQRL3qTr4 %}