teleren/devto huggingface dataset:
Reducing nodes in Dom using Fragment - React js
Tags: react, javascript, webdev, 100daysofcode
Published: 2021-12-30 10:42:14

I want to create a component but with minimal nodes added to the dom. How do I do that plus what's the effect of extra/unnecessary nodes getting added to the dom?

Hello my dear reader, welcome to today's tips and tricks in React. Briefly, we'll see discussing about React fragment, what it is and how it's used. Enjoy 😊

_Fragments let you group a list of children without adding extra nodes to the DOM._ - React official website.

React Fragments serve as a cleaner alternative to using unnecessary divs in your code.

Using divs in Fragments place, you tend to get UI malfunctions and unnecessary nodes added to the dom.

The question now is, how do I use it⁉️

```javascript
import React from "react";
<React. Fragments>
  <h5>Applying Fragments</h5>
  <p>This is a simple way of doing it</p>
</React. Fragments>
```
Or better still

```javascript
<>
  <h5>Applying Fragments</h5>
  <p>This is a simpler way of doing it</p>
</>
```

Not using fragments:
```javascript
<div>
  <h5>Not applying Fragments</h5>
  <p>This is the casual way of doing it</p>
</div>
```

When you render the dom for the first two, you get something like this, which is cleaner:

```html
<h5>Applying Fragments</h5>
<p>This is a simple way of doing it</p>
```

But for that with `div`, you get something like this, which can cause certain inconsistency in your UI:

```html
<div>
  <h5>Not applying Fragments</h5>
  <p>This is the casual way of doing it</p>
</div>
```

The difference between the first two, i.e `<React. Fragments>...</React. Fragments>` & `<>...</>` is that, just in case you want to pass a `key` prop maybe after mapping through an array, you can achieve that only with `<React. Fragments key={...}>...</React. Fragments>` and not the other one.

For more info on React fragment, kindly read the official docs: https://reactjs.org/docs/fragments.html

Have you been using fragments or you're just getting to know if it? Let me know in the comment section.

Kindly drop a like and share if it helped.
What type of apps / development projects are you involved in, whether as a professional, a hobbyist or a student?
Tags: discuss
Published: 2021-12-30 10:41:52

---
title: What type of apps / development projects are you involved in, whether as a professional, a hobbyist or a student?
published: true
description: We are running our Q1 2022 Developer Nation Survey
tags: discuss 
//cover_image: https://direct_url_to_image.jpg
---

Share your input [here](https://www.developereconomics.net?utm_medium=post&utm_source=dev_to&utm_campaign=trends) and shape the developer ecosystem!
Plus there are fun swag draws every week for survey respondents.
Public Solving: Checking the sleighs automatically
Tags: javascript
Published: 2021-12-30 10:32:25

The elves build and try a lot of different sleighs for Santa. Because of the number of sleighs, they are looking for an automated report.

[Click here to view the original puzzle](https://github.com/devadvent/puzzle-20).

Each sleigh is already being tested, so they have the data available.
It's up to us to check if each system check is passing. If so, we should return a specific letter.

The checks pass if a value is above 90%.
The result should be an alphabetically sorted string.

If all checks fail, we should return an `X`.

## Creating the sleigh system check

I won't describe the solution for this one but rather walk you straight through my implementation.

The sleigh has multiple attributes, but they are not sorted.
So I decided to start with a `checkMap` object.
This object will keep all the checks in alphabetical order and contain their letter value.

```js
const checkMap = {
  accelerometer: 'A',
  breaks: 'B',
  compass: 'C',
  gyroscope: 'G',
  humiditySensor: 'H',
  langdingSuspension: 'L',
  navigation: 'N',
  pressureSensor: 'P',
  temperatureSensor: 'T',
  windSensor: 'W',
};
```

I want to loop over these checks and add a letter if the value passes the inspection.

Once again, I'll be using the [`reduce` method](https://daily-dev-tips.com/posts/javascript-reduce-method/).

We have to extract the object keys so we can loop over them.

```js
const checks = Object.keys(checkMap).reduce((output, check) => {
 // Do check
}, '');
```

The check is actually the easy part as a value is valid if over 90%.

If that is the case, I add a letter to the output array.

```js
const checks = Object.keys(checkMap).reduce((output, check) => {
	if (sleigh[check] >= 0.9) {
	  output += checkMap[check];
	}
	return output;
}, '');
```

What happens here is that if the sleighs check for the current check is above `0.9` (90%), we add the letter for that check to our array.

Now we just need a check if this `checks` string is empty.
If so, all checks must have failed, and we should return an `X`.

```js
return checks.length ? checks : 'X';
```

Let's see how we did by running the test.

![Test turning green](https://cdn.hashnode.com/res/hashnode/image/upload/v1640059456655/wJS1ELvOQ.png)

That's it!
We got there, and we can now safely evaluate all the sleighs.

Do let me know what you would do differently in this solution.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
How to Create Your ICO Successfully With SmartContract?
Tags: icodevelopmentcompany, development, discuss, beginners
Published: 2021-12-30 10:26:50

ICO represents Initial Coin Offering which is like an IPO, it is the offering of cryptocoins or cryptotokens in exchange for FIAT currency. It assists new businesses with raising cash flow to develop their projects.however, the achievement of the project depends on a number of things, including the idea, demand, innovation, and the team.

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

## How to create Your ICO?

Here ICO creation process is very doubtful and confusing to you if you are not experienced in it But It is very easy for a Professional ICO development company so Developcoins helps you set up and launch a successful ICO campaign.

- Business Logic Plan & Idea
- Make a Good ICO Team
- Market Research  
- Company Registration  
- Create Your Token
- Prepare your Whitepaper  
- Launch ICO Website
- Preparing Offer and Terms For Investors 
- ICO Launch 
 

## Benefits of Our ICO Development,

No set criteria for investors.
No third-party inclusion or direct deals are offered
An open ICO-based platform is accessible for each investor.
Gives an extraordinary chance for investors across the globe
Helps an organization to develop cryptocurrency with token/coin sales in the initial stage of fundraising.
The return rate for the expected investment and token sales for the investors.
An expansion in the worth of circulated tokens/Coins leads to a higher profit return in the future. 

## Why Did You Choose Developcoins For ICO Development? 
 
Developcoins is a leading provider of [ICO Development Company](https://www.developcoins.com/ico-development) as well as  White Paper Creation and Digital Marketing services so all three services in one place so don't wait. Our Expert Developers have been working in the field for over 10+ years so we Delivered your project On time with Smart Contract. Nowadays many Business people choose ICO Fund Raising because it's rising up investors’ interest. We have Successfully launch your Tokens/Coins within less than ONE minute using different Blockchain networks for clients’ ICOs, we will take care of everything that’s associated with your ICO.
 
 
We provides,

24/7 Technical support
Skillful blockchain developers
Multiple token standards
Increased security
Quality assessment
 
Need help setting up your ICO campaign? Hire professional ICO developers  at Developcoins.

Explore Here -> [https://www.developcoins.com/ico-development](https://www.developcoins.com/ico-development)
Book A Free Consultation via Call/Whatsapp: +91 9843555651 
Telegram - https://t.me/Developcoins
TypeScript developer tries Kotlin again
Tags: typescript, kotlin
Published: 2021-12-30 10:25:04

Im getting there with Kotlin, try something 3 times and it might start to click. Here is my 5 seconds Rosetta stone on Kotlin classes

## Comparisons

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

Lets break the above down
### Kotlin
```kotlin
// this is an annotation 
@MongoEntity
```
### Typescript
```ts
// this is a decorator 
@MongoEntity
```
---
### Kotlin
```kotlin
// This class inherits from ProductBase but the primary constructor must be called, (Kotlin classes have more than 1 constructor) 
class PrivateProduct : ProductBase()
```
### Typescript
```ts
class PrivateProduct inherits ProductBase { constructor() {super()}  }
```
---
### Kotlin
```kotlin
// the property called 'public' is a Boolean and it is initialised but you can prefix `lateinit` which is equal to the `!` in typescript
val public: Boolean = false
```
### Typescript
```ts
class PrivateProduct inherits ProductBase {
    public readonly public: boolean = false;  
}
```
---

## Final thoughts
What I like about Kotlin is most of the nice ES6 features have equivalent or near to concepts, destructuring, promises, reactive programming (alright thats nothing to do with ES6), array methods with predicate all that stuff its here in Kotlin, making the learning curve really nice for an experienced JS developer and even less for Typescript friendly JS developer.

Its very fast too, also I am writing an app using [Quarkus](https://quarkus.io/) - a web framework which has **very very very** fast hot reload, so I don't even miss this feature.
angular pwa: how to implement pwa for angular application
Tags: angular, pwa
Published: 2021-12-30 10:23:46

## References 

- [How to add pwa for your angular app](https://angular.io/guide/service-worker-getting-started)
- [Explain pwa in pure](https://web.dev/customize-install)
- [How to add install button to your app](https://web.dev/promote-install)

## Implement PWA for Angular Application

- Step 1: Create angular project
- Step 2: Make it pwa
- Step 3: Run and Test your website
- Step 4: Create your own bussiness login with PwaService
    + Force Update
    + Create your own install pattern

### Step 1: Create angular project
```bash
ng new angular-pwa-demo
```

### Step 2: Make it pwa
```bash
ng add @angular/pwa
```

### Step 3: Run and test your website
```
# build
npm run build 

# serving your web
# npm install -g http-server
http-server -p 8080 -c-1 dist/angular-pwa-demo -o

```
> Warning: For some reason I don't know why, but trust me, you can avoid so much wasting time asking Google =))
- You can see it on 
- `http://127.0.0.1:8080` # work => remember to use this
- `http://192.168.1.17:8080` # not work
- `http://172.17.0.1:8080` # not work

### Step 4: Create your own bussiness login with PwaService
```js
import { HostListener, Injectable } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class PwaService {
  readyInstall$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  installed$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  deferredPrompt: any = null;

  constructor(private swUpdate: SwUpdate) {
    // force update
    this.swUpdate.available.subscribe((event) => {
      window.location.reload();
    });

    window.addEventListener(
      'beforeinstallprompt',
      this.onBeforeInstallPrompt.bind(this)
    );
    window.addEventListener('appinstalled', this.onAppInstalled.bind(this));
  }

  onBeforeInstallPrompt(event: any): void {
    console.log('🚀 onBeforeInstallPrompt');
    // Prevent the mini-info bar from appearing on mobile
    event?.preventDefault();
    // Stash the event so it can be triggered later.
    this.deferredPrompt = event;
    this.readyInstall$?.next(true);
  }

  onAppInstalled(event: any): void {
    console.log('🚀 onAppInstalled');
    this.deferredPrompt = null;
    this.installed$.next(true);
  }

  async install() {
    const promptEvent = this.deferredPrompt;
    console.log('install', promptEvent);
    if (!promptEvent) {
      return;
    }
    promptEvent.prompt();

    const result: boolean = await promptEvent.userChoice;
    console.log(result);
    if (result) {
      this.deferredPrompt = null;
      this.readyInstall$.next(false);
    }
  }
}
```
Host Your Fastapi server on Heroku for Free...
Tags: heroku
Published: 2021-12-30 10:17:17

## Create a Fastapi project

for that install some pip packages

```bash
pip install fastapi
```
and you need a ASGI server for production
here we use `uvicorn`
```bash
pip install uvicron
```
and you need an another package named `gunicorn`
```
pip install gunicorn
```
## write some code
Here we have to create a file for our python code. so create a file named `main.py` and write some code like this
```python
from fastapi import FastAPI

app = FastAPI()


@app.get("/")
def read_root():
    return {"Hello": "World"}


@app.get("/items/{item_id}")
def read_item(item_id: int, q: Optional[str] = None):
    return {"item_id": item_id, "q": q}
``` 

## Run the code
```
uvicorn main:app --reload
```
this will run your app in localhost and the default port will be 8000. Here `main` is the filename and `app` is the fastapi object.

Next is adding some stuffs for hosting.

## Create requirements.txt

for creating the file just run:
```
pip freeze > requirements.txt
```
it will create the file and contents like be this
```text
anyio==3.4.0
asgiref==3.4.1
certifi==2021.10.8
charset-normalizer==2.0.9
click==8.0.3
fastapi==0.70.1
gunicorn==20.1.0
h11==0.12.0
idna==3.3
pydantic==1.8.2
requests==2.26.0
sniffio==1.2.0
starlette==0.16.0
typing-extensions==4.0.1
urllib3==1.26.7
uvicorn==0.16.0
```
Its the list of packages need to run your app.

## Create Procfile
create a file named `Procfile` without any extensions and paste the below code
```
web: gunicorn -w 3 -k uvicorn.workers.UvicornWorker main:app
```
this contain the running script for execute your app
here main is the python file name and app is the fastapi object. so it can be changed..

Now the app is ready for deploy.

Create a Github Repo and push the code to it
and create a new heroku app linked with the respective github repo in heroku dashboard.

After bulid finished in heroku just go to `your-app-url/docs` for get your api documentation
Redux vs. Recoil
Tags: react, javascript, webdev, redux
Published: 2021-12-30 10:13:12


Did you ever think why Facebook chose the name "Recoil" for their new state management library?

Well, it's just my assumption, but I think that the primary purpose of Recoil is to cause people to recoil from Redux.

Seriously now, there are a bunch of differences between Recoil and Redux. I am not going to cover them all in this post.

One main difference is the way we manage the global state object.

In Redux, we have one big object called "store."
When we want to change our store, we must return a new object (we can't just modify the previous one).

On the contrary, Recoil doesn't have one state object. Instead, our state is split into tiny particles called "atoms." Each atom is a small object containing only part of the state.

In my opinion, the transition from the big scary global store to the tiny atoms is fantastic.

First of all, why do I need to modify a vast object when I want to make only a tiny change in my state? That doesn't make sense.

Second and most importantly, our code is more maintainable when splitting our state into atoms. It's easy to get around and find stuff when we have a sharp separation of concerns.

I mean, that is what React is all about—splitting our app into small maintainable components.

---

While writing this post, I was thinking - when we change our codebase (in Github, for example), we keep track of changes in the "Redux way."

Every time we commit changes to the current branch we are working on, a new modification hash is generated for us. Very similar to the way Redux keeps track of the global store.

The whole world is going towards a component-driven development architecture. Micro-services on the backend and React on the frontend, and I'm asking myself why we still keep track of changes the old way?

Wouldn't it be more innovative to track changes on each component independently and decoupled from the rest of the source code? Like in Recoil, we modify each atom regardless of the rest of the global state.

The good news is that there's already a tool tailored to build your application the component-driven way. Its name is [Bit](bit.dev). It lets you keep track of each component individually and handles all of its dependencies for you.

Imagine writing a component once and using it in ten (or more) applications. Updating your component with a new version will cause those applications to update with a new version of that component.

---

- For more posts like this [follow me on LinkedIn](https://www.linkedin.com/in/nitsan-cohen/)

- I work as frontend & content developer for [Bit](bit.dev) - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).
2021 Rewind 
Tags: devjournal, webdev
Published: 2021-12-30 09:44:57

It's Rewind time ! 2021 has been such an amazing year. I learned quite a few new stuffs. Apart from academic studies, I was involved in web & app development.

here's my 2021 summarized ⏪,

**January**: I worked on covid-hotspots, A app that shows Covid-19 data for user's geolocation. Learned Javascript, TypeScript and API

**February**: Completed Python for Everybody course, learned automating stuff with python

**March**: Programming.

**April**: here's where thing got interesting, at IEEE Student Branch-BIT Mesra's Lead, Finally stopped procrastinating, made a portfolio website - with light/dark mode feature and completed other tasks.

**May**: Learned web scraping with BeautifulSoup, selenium, and made a Job Scraper with Flask as backend, again in IEEE lead.

**June**: Learned React & Node.

**July**: Can't remember, procrastinated.

**August**: participated in Major League Hacking hackathon, developed Vaccinater, app that sends Notification with vaccine availability in user's location to email & sms.

**September**: Data structures , Earned 4 ⭐ on Hackerrank

**October**: Hacktoberfest, maintained repo for IETE BIT, resolving conflicts , merging PRs, creating Issues. nice experience. learned.

Learned basics of Machine Learning at Society for Data Science BIT Mesra. Algorithms like Linear, Logistic Regression, KNN, Random forest, Decision Tree.

**November**: loading...

**December**: Learned React Native-firebase, Building an app for a Hackathon. (RN is cool)

Looking forward to another year of doing.
Thanks to Mentors like Angela Yu, Brad Traversy, NetNinja for amazing Tutorials ❤️
Thanx to my friends who were constant help ✨, You know who you are !

Find me on 
Github: https://github.com/mayukhpankaj 
Linkedin Post: https://www.linkedin.com/feed/update/urn:li:activity:6882235583062691840/


Happy new year 🎉🥳
REST API (RESTful) running on an Enterprise class system
Published: 2021-12-30 09:40:21

How to easily implement a web application based on flask microstructure using Apache HTTP Server?

[https://en.euro-linux.com/blog/rest-api-restful-running-on-an-enterprise-class-system/](https://en.euro-linux.com/blog/rest-api-restful-running-on-an-enterprise-class-system/)
Accessibility testing
Tags: qa
Published: 2022-01-24 17:21:56

---
title: Accessibility testing
published: true
date: 2021-12-30 09:27:41 UTC
tags: QA
canonical_url: https://apiumhub.com/tech-blog-barcelona/accessibility-testing/
---

Hi, in this article we will talk about Accessibility testing.

## What is Accessibility testing?

Let’s start with the definition of what is Accessibility testing, is defined as a type of Software Testing performed to ensure that the application being tested is usable by people with disabilities like hearing, color blindness, old age and other disadvantaged groups. Importance for this type of testing covers:

- Easy and efficient access to users with disabilities
- Improves maintainability and efficiency
- Satisfied existing and future legal requirements

## Types and causes of disabilities.

There are many types of disabilities that people may experience at one time or another in their lives. These are some of the most common disabilities:

- Physical Disability
- Cognitive Disability
- Eyesight/Vision Disability
- Hearing impairment
- Temporary Disability

## Measure of Accessibility feature.

How Web Accessibility is Measured? There are web accessibility standards, like Web Content Accessibility Guidelines (WCAG), etc. Evaluating the Accessibility of a Website:

- Content
- Size
- Code
- Mark-up languages

## Examples of Accessibility testing cases.

Among others some basic tests should verified:

- Page title
- Image text alternatives (“alt text”)
- Headings
- Contrast ratio (“color contrast”)
- etc

## Scenarios to check under Accessibility testing.

- If the labels are correctly written
- If the audio/video content is properly audible/visible
- If the color contrast ratio is maintained
- If the short keys are provided for the menu
- If a meaningful multimedia caption is provided

## Tools to be used.

From my experience for the web used next tools:  
1) Chrome DevTools.  
2) Chrome accessibility test under audit tab for scanning the whole page (Chrome Lighthouse)  
3) MacOs built-in accessibility features, from System Preferences  
4) JAWS, as a screen reader for windows  
5) For IOS, accessibility inspector (Xcode built-in)  
6) For Android can be activated VoiceOver from System Preferences

## Conclusion:

Accessibility testing helps in making your application disabled friendly.