teleren/devto huggingface dataset:
[Todo App made with Flutter]
Tags: appwritehack
Published: 2022-05-07 12:18:08

[Instructions]: # (To submit to the Appwrite Hackathon on DEV, please fill out all sections.)


### Overview of My Submission

I recently came to know about appwrite and wanted try it out. I saw some todo examples but couldn't find any example for flutter, sooo...I made one❤

### Submission Category: 

Wacky Wildcards


### Link to Code

https://github.com/Prince921/To-do-app


### Additional Resources / Info


### Screenshots/demo

Landing Screen

![landing](https://user-images.githubusercontent.com/68752253/167253736-c711ba98-a37d-4088-8e66-95d035bce250.png)

Authentication Screen

![authentication](https://user-images.githubusercontent.com/68752253/167253732-26e229a4-a148-4154-ada0-7f9d08aa4c05.png)

Todo List Screen

![todo_list](https://user-images.githubusercontent.com/68752253/167253738-fcf52e55-ea29-4894-88a5-6baecd4f7b90.png)
Getting understand "useReducer in React" from real life sample
Tags: javascript, react, beginners, frontend
Published: 2022-05-07 12:07:35

💖 For those who have learned about [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer), but still can't get when you should use intuitively

### 💎 I implemented toggle button by useState
```javascript
const [showMenu, setShowMenu] = useState<boolean>(true)

// when I want to show/hide toggle button
setShowMenu(!showMenu)
```

### 💎 But I realised there is better way by useReducer
```javascript
const [showMenu, toggleShowMenu] = useReducer((prev) => !prev, true)

// when I want to show/hide toggle button, that's all!
toggleShowMenu()
```


**If you had like this experience "real life example of useReducer", make a comment please 😎**
How to get more people fund your opensource project
Tags: opensource
Published: 2022-05-07 12:01:36

---
title: How to get more people fund your opensource project
published: true
description: a pattern of sponsorship recruitment
tags: opensource
//cover_image: https://direct_url_to_image.jpg
---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0gjcuksludk6amohtkr.png)
 
Access to all Pro examples; Remove the React Flow attribution; Prioritized Bug Reports and Feature Requests

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

TypeScript source code is only accesssible to sponsors

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hpe9ubwp9kxh54dk462.png)
 
TypeScript source code is only accesssible to sponsors

The pattern is:

* anyone can npm install for free
* make examples exclusive for sponsors
* make source code exclusive for sponsors
* has better chance to get your feature request implemented
Can I Have Multiple DMARC Records on My Domain?
Published: 2022-05-07 11:54:23

![Multiple DMARC Records on Domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xqv685d2avg58mvpolw.png)
Can you have multiple DMARC records on a single domain? The answer is no: a domain **MUST NOT** have multiple DMARC records, otherwise DMARC processing fails to function on that domain.

A DMARC record is a TXT record in the DNS starting exactly with "v=DMARC1", followed by a list of DMARC tags.

A DMARC check starts by fetching all TXT records starting exactly with "v=DMARC1" on a domain, a process known as policy discovery:
* if no such record is found, DMARC processing stops;
* if multiple such records are found, DMARC processing stops.

For example, if you have 2 TXT records on yourdomain.com:

| Record Type   |  Name            |  Value         |
|---------------|:-----------------|:---------------|
| TXT           |  yourdomain.com  | v=DMARC1; p=reject; rua=mailto:5b0afb40319f1@ag.dmarcly.com; |
| TXT           |  yourdomain.com  | v=DMARC1; p=none; rua=mailto:5b0afb40319f2@ag.dmarcly.com; |

DMARC policy discovery terminates and DMARC processing is not applied to incoming email messages.

This means that if you have multiple DMARC records on a single domain, the intended DMARC policy can fail to apply and DMARC reporting can fail to function.

In order to fix this issue, you need to keep only one valid DMARC record and remove all others on the domain.

#### Monitoring DMARC records

Now that the validity of DMARC settings is crucial to DMARC authentication, you might want to receive alerts when a DMARC setting is messed up, so that you can take action to fix it as soon as possible.

DMARCLY's domain monitoring feature allows you to do exactly that. In order to monitor your domain:
1. [log in](https://dmarcly.com/login) to the dashboard;
2. go to DNS Records => Domains, add your domain;
3. go to Reporting and Alerts => DNS Alerts, create a recipient with your email.

Related posts:
* [Can I Have Multiple DKIM Records on My Domain?](https://dmarcly.com/blog/can-i-have-multiple-dkim-records-on-my-domain)
* [Can I Have Multiple SPF Records on My Domain?](https://dmarcly.com/blog/can-i-have-multiple-spf-records-on-my-domain)

Original post: [Can I Have Multiple DMARC Records on My Domain?](https://dmarcly.com/blog/can-i-have-multiple-dmarc-records-on-my-domain)
JavaScript Tips and Tricks Part -II
Published: 2022-05-07 11:27:19

Hi @all, 

I have come back with a second part of JavaScript Tips and Tricks.
You can see the first part here :
[JavaScript Tips and Tricks!](https://dev.to/jagroop2000/top-javascript-tips-2613)

So, let's go with Jin 🧡  :

<img width="100%" style="width:100%" src="https://media.giphy.com/media/SY8asU9xWlmgFolmSs/giphy.gif">

**Top Tips and Tricks :**

**Check if Property Exist in Object:** With the help of in keyword in JavaScript, we can check that whether a property existed in JavaScript object or not. **For Example:**

```
const BTS = { name: 'Kim Seok-jin', stageName : 'Jin'};
console.log('name' in BTS); 
console.log('age' in BTS); 

OUTPUT :
true
false
```
**Easy Exchange Variable :** During the initial period of learning programming, everyone went through swapping numbers using **temp** variable or using some mathematical calculation. But one can do this easily in JavaScript using destructuring.** For example :**

```
var a = 12;
var b = 6;
[a,b] = [b,a]
console.log(a,b) ;

OUTPUT :
6 12
```

**Shorten the Console log** : If you're fed up with typing console.log()  to check data or for debugging, then don't worry, I will share my personal shortcut way to shorten the console log. Here it is :

```
var BTS = console.log.bind(document)
BTS("JIN's  Epiphany song is the best")
```

**Convert Number to Binary** If you want to convert a number into binary number then no need to use or remember mathematical formula, I will be sharing a simple trick as :

```
var num = 2000;
console.log(num.toString(2));

OUTPUT :
11111010000
```

**Remove duplicates from arrays using Set :**  It is a very simple yet effective method of removing duplicates from arrays using a simple one-liner.

```
var BTS =['J-Hope','Jin' ,'JK', 'RM' ,'J-Hope' ,'JK' ,'V' , 'Jimin' ,'V','Jin' ,'Suga' ,'Suga','Jimin']

console.log(...new Set(BTS));

OUTPUT :
J-Hope Jin JK RM V Jimin Suga
```
That's all for this post, me with BTS  come with another informative posts.
How to install wordpress online?
Tags: webdev, wordpress, devops
Published: 2022-05-07 11:06:06

[How to install WordPress online?](https://www.sonoretech.com/comment-installer-wordpress-en-ligne-guide-complet/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bifvv3hkct5aajha6vi9.jpg)) To create a new website, can seem like a difficult task. What if I don't know how to create a website ?

Will setting up your website be very complicated, and will it take a long time to start writing your first blog post ? Fortunately, the process required to install WordPress is very simple, and even a complete beginner who is not tech-savvy can easily perform it [red full guide](https://www.sonoretech.com/comment-installer-wordpress-en-ligne-guide-complet/)
How to join AWS Community Builders Program | SWAG Kit Unboxing | Program Benefits 2022
Tags: aws, swag, cloudskills, cloud
Published: 2022-05-07 11:03:20


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stt5o9ehnzyak0xhfo78.jpg)
This is my first post on dev.to :)

The **AWS Community Builders** program offers technical resources, mentorship, and networking opportunities for AWS technical enthusiasts and new leaders who are passionate about sharing knowledge.

The program will accept a limited number of members per year but All AWS builders are welcome and encouraged to apply.

What do you get by participating in the program?

- Access to AWS product teams and information about new services and features
- Mentorship from AWS experts
- AWS Credits 
- Opportunities to connect with unique group of people

Everyone also gets a **welcome pack**. If you want to know what was in my package, watch the video:
https://www.youtube.com/watch?v=RiMuMzN5kS4

{% embed https://youtu.be/RiMuMzN5kS4 %}


{% embed https://youtube.com/shorts/92gbzpBAHmg?feature=share %}

If you are interested and would like to know more, see the program's website:
https://aws.amazon.com/developer/community/community-builders/

Of course, I also encourage you to **visit my blog**: 
https://lepczynski.it/en

There you will find a lot of **tutorials** that will show you how to use the AWS cloud and take you **step by step to the next level**.
Tech Notes
Tags: opensource, javascript, webdev, beginners
Published: 2022-05-07 10:49:39

## OPEN SOURCE BEGINNING

[Tech Notes](https://harshit-paneri.github.io/Notes-Web/) Basically  a web based application. In which user can save or delete their temporary notes.
Their code is open, Code repository is on [Github](https://github.com/harshit-paneri/Notes-Web)


Make issue , work on it , send PR , I will definitely merge good PR's
Announcing Chakra UI Svelte
Tags: javascript, chakraui, react, svelte
Published: 2022-05-07 10:28:40

## Introduction
I'm so excited to share what I spent the better part of April building - Chakra UI implementation in svelte. This is an implementation of the popular [Chakra UI](https://chakra-ui.com) just as we have for [Vue](https://vue.chakra-ui.com). I'm currently working on proper documentation for it. However, the package follows the Chakra UI React style guide.

## What is Chakra UI?
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. I fell in love with Chakra UI last year when I first tried the framework. Being more of a svelte lover, I was looking for [implementation in svelte](https://github.com/chakra-ui/chakra-ui/issues/819) but didn't find any. So, I set out to create it.

It took me a whole month of testing components and checking style practices. I was also looking into [Chakra UI React source](https://github.com/chakra-ui/chakra-ui). I wanted the implementation to be so closely related to React. And at the moment, I've completed about 13 components.

## Release Info
- Current Stable Prerelease Version: 0.0.2-next.2
- [Github](https://github.com/elcharitas/chakra-ui-svelte)
- [NPM](https://www.npmjs.com/package/chakra-ui-svelte)
- [Demo Website](https://chakra-svelte.vercel.app)

## Getting Started
To get started, simply install the package with
```sh
pnpm i chakra-ui-svelte
```
You may optionally install the svelte-icons package. It's the only icon package I've tested so far with chakra-ui-svelte. It's fairly stable and I have the plan of fully supporting it later on.
```sh
pnpm i svelte-icons
```

### Sample Application
Let's try building a sample app, shall we?
First, we need to import the ChakraProvider component which handles themes and other global configurations.
```
import { ChakraProvider } from 'chakra-ui-svelte';
```
Now we can go on ahead and use the provider to handle some of the stores which chakra-ui-svelte provides by default. and import other packages
```html
<script>
  import { Box, Button, ChakraProvider } from 'chakra-ui-svelte';
</script>

<ChakraProvider>
   <Box>Hello Box</Box>
   <Button> Hello Button </Button>
</ChakraProvider>
```
### Styling Components
We can also customize our components just like we do  in Chakra Ui React.
```html
<script>
  import { Button, Icon } from 'chakra-ui-svelte';
  import FaGithub from "svelte-icons/fa/FaGithub.svelte";
</script>
<Button
    as="a"
    p="0"
    mx="3"
    size="xs"
    bg="transparent"
    href={"https://github.com/elcharitas/chakra-ui-svelte"}
    target="_blank"
    rel="noreferrer"
    ariaLabel="Chakra UI on Github"
    variant="ghost"
>
    <Icon as={FaGithub} />
</Button>
```

## Final  Thoughts?
Sadly, there isn't any proper documentation at the time of this writing. However, a demo is available [here](https://chakra-svelte.vercel.app). I'd be updating the page with documentation in the coming week.
Please leave feedback and feel free to contribute to the package.

This post first appeared [here](https://elcharitas.wtf/blog/announcing-chakra-ui-svelte)
The growing role of QAOps and Why it matters?
Tags: sqa, qaops, codequality, softwareqa
Published: 2022-05-07 10:25:29


The main idea of introducing the QAOps framework is to integrate the continuous testing in DevOps with the Continuous Integration (CI)/Continuous Deployment(CD) pipeline rather than performing software testing at indefinite intervals.
QAOps framework increases the collaboration between the QA engineers and developers. Therefore, QA engineers must work closely with software developers, operations personnel and everyone involved in the CI/CD pipeline.

### Technologies and Tools for QAOps:
Below are the technologies and tools that are used as part of the QAOps process.

Automation Tools: Selenium (with all programming languages: Java, Python, C# and JavaScript, etc.), Provar, Protractor, WebdriverIO, Katalon Studio, Tricentis Tosca, and others.
Performance Testing Tools: JMeter, BlazeMeter, WebLoad, LoadRunner, Tricentis NeoLoad, etc.
Mobile apps Automation Tools: Appium(with all programming languages: Java, Python)
API Testing & Automation Tools: SoapUI, Postman, Runscope, Rest Assured(Java) and Requests(Python), etc.
CI/CD Tools: Jenkins, CircleCI, AWS CodeBuild, Azure DevOps, Atlassian Bamboo, or Travis CI, etc.

### Life Cycle of QAOps:

QAOps highly uses the idea of continuous testing, such as CI/CD pipelines, and have the following 3 phases:  

1. **_Trigger:_** The trigger phase refers to creating correct test cases which is suitable for testing the technicality of the product without wasting time in building unnecessary test cases. The tests cases are designed in such a way that includes all the aspects of the software testing.
2. _**Execute:**_  The parallel tests which are approved in the trigger phase are executed in this phase. It is performed consecutively with the Trigger phase by executing the tests designed in the previous phase to ensure the quality of the product.
3. _**Report:**_ The report phase is the final phase in the QAOps process which includes reporting the outcomes of the trigger and execute phase. The entire brief of the process is generated with a detailed description as a final report.

### Conclusion‍
Executing or implementing QAOps can give your organization an upper hand over your competitors in the software development industry, and QAOps paves the road to faster software delivery when correctly designed and implemented. It gives a better customer experience without any quality compromises.


##### References: 

1. https://www.techcrackblog.com/2020/09/what-qaops-means-and-why-it-matters-for.html
2. https://www.mstsolutions.com/technical/quality-assurance-ops/
3. https://www.itmagination.com/qa-ops-quality-assurance-in-the-age-of-agile-methodologies
4. https://blog.knoldus.com/not-heard-about-qaops-yet/
5. https://saucelabs.com/blog/operationalizing-quality-assurance-operations-qaops
Can You Use A Template For Your Web Development Portfolio? 🤔
Tags: career, webdev, html, beginners
Published: 2022-05-07 10:12:52

{% embed https://youtu.be/CW0P6aaCzsE %}

In my latest **[Youtube Video](https://www.youtube.com/watch?v=CW0P6aaCzsE)**, you will understand the importance of using a template for your portfolio website and why you should use one to build your own portfolio website instead of building your portfolio website from scratch 🤯

Make sure to watch the **[Youtube Video](https://www.youtube.com/watch?v=CW0P6aaCzsE)** and also make sure to **Like** the **[Youtube Video](https://www.youtube.com/watch?v=CW0P6aaCzsE)** & **Subscribe** to my **[Youtube Channel](https://www.youtube.com/channel/UCIb8_J9lqtiWGMIOdQ5DVsg)** for more **Amazing** content related to **Web Development** and **Self Taught Developer** Journey 🙌

---

Please do me a favour by **Reacting** to this post with 
❤️ + 🦄 and also bookmark 🔖 it for your future reference ✅

---

**Connect/Follow** me on Social platforms like Twitter, Linkedin where I regularly post Tips💡+ Guides📜 + Resources 🌟 related to Web Development and Programming 👨‍💻


![RammCodes Social Follow Request Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a5vzbe9atsgmoll0oih.png)

### 🐦 **[My Twitter](https://twitter.com/rammcodes)**
### 👨‍💼 **[My Linkedin](https://www.linkedin.com/in/rammcodes/)**
### 🌐 **[My Website](https://rammaheshwari.com)**

---

Press the **Follow** button to stay updated with my content 🚀

Thanks for your **Support** ❤️
TIL: Accessibility resources
Published: 2022-05-07 17:27:02

---
title: TIL: Accessibility resources
published: true
date: 2022-05-07 10:00:00 UTC
tags: 
canonical_url: https://sarahabd.com/blog/til/accessibility-resources/
---

Hi there,

I decided to start TIL (Today I Learned) series !

Rodrigo, author of [Mathspp](https://mathspp.com/) blog, give me envy to do so with his TIL series, as I told him, I will do that to help me to remind me some stuff and share what I discovered to everyone who can be interested on. I’m dedicating my first TIL of a great series to him I hope.

I started to create a dark mode for Django project and I face to an interesting issue : accessibility.

This is something I’m aware of, but I discovered I have so many things to learn ! Even my website is really bad for accessibility.. but I learned some ressources very useful which deserve to be written somewhere.

Accessibility concern many cases : _Tritanopia_, _Deuteranomaly_ and so on.

[Whocanuse](https://whocanuse.com/), is based on the same purpose of [Caniuse](https://caniuse.com/) but for accessibility and contrast.

It’s really useful to see the simulation of color for each type of vision and contrast with another color. It really helps me to better adjust color contrast.

Note: you can also see color contrast and ratio in devtools of Chrome :

 ![devtools chrome contrast](https://sarahabd.com/static/9fbb014ebed953b7d6eaac2309f2d4a4/01e7c/devtools-chrome.png)

You also have [Kontrasto](https://kontrasto.netlify.app/), created by Thibaud Colas, which have a deep interest in accessibility 🙂

Really nice to see a way to improve accessibility with images.

I also discovered [Link Contrast Checker](https://webaim.org/resources/linkcontrastchecker/) which is a website to see the contrast for links to be sure there are no violation for accessibility.

I find [accessibility checklist](https://www.a11yproject.com/checklist/) which can be a good start to make you website more inclusive and see some point you missed.

As I am a big fan of pipelines, there are also tools to check accessibility with desktop extension or in continuous integration:

- [aXe](https://www.deque.com/axe/)
- [pa11y](https://pa11y.org/)
- …

That’s it for now! I hope it will be useful for someone.
Call to JSF servlet externally
Tags: jsf
Published: 2022-05-07 09:59:05

Hi Champs,
We have a JSF application built on JSF1.2. 
Can we call JSF servlets(FacesServlet) from external world like we can call a java servlet or a rest api get call from any web app or web client?
We do not want to big changes to existing JSF application.

Your help will be much appreciated.
Thanks,
Subhash
$PSScriptRoot is your friend...
Tags: powershell, shell, cli, beginners
Published: 2022-05-07 09:49:02

Had to learn this lesson the hard way yesterday. I was working on a script that uses relative paths to the folder where the script is. 

I want to use the script from a jenkins Job. The job executed the script from different folder than the scripts own folder and suddenly none of the relative paths where found. 

Checkout this script doSource.ps1:
```powershell
#The Path asscociated with the . changes when you run it from another folder
Resolve-Path . 
#Script Root doesn't change
Resolve-Path $PSScriptRoot
```
And what happens when i run it: 
```powershell
PS F:\data\ps-scripts> .\doSource.ps1

Path
----
F:\data\ps-scripts

F:\data\ps-scripts

PS F:\data\ps-scripts> cd..
PS F:\data> .\ps-scripts\doSource.ps1

Path
----
F:\data

F:\data\ps-scripts

```

So, if your are using relative paths in your script $PSScriptRoot is your friend.
Can You Give Me Some Recommended Courses or Articles about NextJS that is Free ?.
Tags: nextjs, ask, discuss, javascript
Published: 2022-05-07 09:46:00

I am starting to learn next js, cause of my company that I work on suggest me to have such skill in next js and typescript. I do my own research and yap few other companies are requiring their web developer to learn this technology. Thank you for your suggestions, I appreciate it bro.
Restaurant Menu With Filter Option using HTML, CSS, and React JS
Tags: html, css, react, javascript
Published: 2022-05-07 09:35:08

Hello friends, today in this blog, you will learn how to create a restaurant menu with a filter option using HTML, CSS, and React JS. In our previous blog, we saw how to create a button to download images using HTML, CSS, and Javascript. Earlier, I shared many projects related to [javascript](https://incoderweb.blogspot.com/search/label/Javascript), you can check if you want, and don't forget to check [HTML, CSS, and Javascript projects](https://incoderweb.blogspot.com/search/label/HTML%20CSS%20Javascript%20Mini%20Project).

In this design [Restaurant Menu With Filter Option], there is a menu and some product cards as you can see in the image above. When you click on any menu button products will be filtered according to category.

##You may like these:

- [Create a random quote generator](https://incoderweb.blogspot.com/2022/05/create-random-quote-generator.html)
- [Random Password Generator](https://incoderweb.blogspot.com/2022/04/random-password-generator.html)
- [How to Detect User Location](https://incoderweb.blogspot.com/2022/03/how-to-detect-user-location.html)
- [Responsive Image Lightbox Design ](https://incoderweb.blogspot.com/2022/04/responsive-image-lightbox-design.html)

If you are unable to understand or felling difficulty understanding so you can check the source code and preview it as well.

Preview is available [here](https://incoderweb.blogspot.com/2022/05/restaurant-menu-with-filter-option.html).
Different Ways to Create Website for Client as Freelancer
Published: 2022-05-07 09:15:25

1. Do it with website builder/CMS if website you will create is simple enough or mainstream like ecommerce, company profile, etc.
2. Custom web development, If website you will build like Learning Management System, Job Seeker like upwork

Common Tech stack to building website
1.Website Builder - wix, squarespace, webflow
2.CMS - Wordpress
3.LAMP - Linux Apache Mysql Php
4.MEAN, MERN and MEVN - Mongodb Expressjs (Angular,React,Vue) Nodejs
5.Jamstack - Javascript API Markup
This week’s newsletter is out! (07-05-2022) - The Big Sandwich
Tags: javascript, tech, webdev, discuss
Published: 2022-05-07 09:10:55

---
title: This week’s newsletter is out! (07-05-2022) - The Big Sandwich
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

The Big Sandwich

https://markjgsmith.substack.com/p/mark-smiths-newsletter-07-05-2022?s=w

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)