teleren/devto huggingface dataset:
Async/Await in JavaScript
Tags: async, await, promise, javascript
Published: 2021-06-18 14:45:13

Async functions are brought to JavaScript by ES8 (ES2017) and are used to facilitate the management of asynchronous operations. Async functions use Promises under their own skin.

To use this feature to manage an asynchronous operation, we first use the `async` keyword when defining a function. We always write the word `async` at the beginning of the function definition:
```
const users = async () =>{ }
```
When we use `async`, we have another keyword called `await`. When the `await` keyword is at the beginning of a expression, our code waits for the output of that expression to be specified and then goes to the next lines. We use await as follows:
```
const users = async () => {
     let users = await getUsers();
     console.log(users);
}
```
One thing to keep in mind is that the `await` keyword should only be used within a function that uses the `async` keyword at the beginning. Otherwise we get an error.

The next point to keep in mind is that if the expression in front of the `await` is not a Promise, it will automatically become a resolved Promise when it is done.

The output of an async function is always a Promise and we can treat it like a Promise.

```
const users = async () =>{
   let users = await getUsers();
   return users;
}

users.then(console.log); //list of users
```

P.S.: Async code is simpler and more readable than the Promises we had to use with chain methods.
Learning Python - Week 2
Tags: python, learning
Published: 2021-06-18 15:29:22

So this week I learned about creating functions, control flow (if else/elif statements) and for loops. It was a slow week for me so I will only be talking about functions and their scope. I only got through a few lessons but next week I will be talking a lot more about these areas.

For me, creating functions and understanding them seemed a lot easier than learning about functions in the other languages I know even though it is very similar. You would set it up like a function you would see in JavaScript, but for me this looks like a method in Ruby. You would pass a parameter when defining a function and you would pass an argument when you are outputting like so:

```
def greet_person(value = “your name”): # passing a parameter of value with a default value
	“””
	DOCSTRING: This returns a greeting / This section is also comments
	INPUT: value
    OUTPUT: Hello… name
	“””
	print(“Hello “ + str(value) + “, this is the greet_person function”)

greet_person()
greet_person(“Evan”)
greet_person(23)
```
The three greet_persons are different examples. The first will just print the default value and place it in the string, the second will put Evan, and the third will change the integer to a string and put 23. The second and the third are passing in arguments which will change the parameter value and place it in the string. Anything outside of this function would be considered the global scope and anything inside the function is considered the local scope. So if I have a variable of age that is set to 23 and a function increase_age that also has a variable of age that is set to 30, I will not get the increase_age function age if I just print(age) outside of the function. I would end up getting the original age outside of the function, 30.
```
age = 23

def increase_age():
	age = 30
	print(age)

print(age) # returns 23 because it calling the age variable outside of the function - global scope
increase_age() # returns 30 because it is inside the function - local scope
```
Sorry if this got confusing to read but this is what I learned this week. This wasn’t all I learned but this is what really stood out to me. Python is a lot of fun and I am enjoying it. Come back next week!
[GIT] Please enter a commit to explain why this merge is necessary
Published: 2021-06-19 07:21:26


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


This often appear when you are working on merging branches to the main one. So, how can we solve this problem ?

1. finish the commit message
2. press `esc`
3. press `:wq` to write and quite
Getting started  with #100daysofcode -day0
Tags: challenge, 100daysofcode, beginners
Published: 2021-06-20 03:11:14

Today i will be accepting a 100 day challenge because i was not able to give my 100% on my skills 
*Hopefully i will be sharing my journey with you amazing people 
i will be learning HTML css and javascript and then react.js and node.js
Developed an app to transcribe and translate from images
Tags: develop, application
Published: 2021-06-21 00:11:14

Hey guys,

I developed an application that you can easily get a transcription and translation from images. 

[![Image from Gyazo](https://i.gyazo.com/eec97dbffb7364afd24f2e9a2e0372b8.gif)](https://gyazo.com/eec97dbffb7364afd24f2e9a2e0372b8)

URL→https://pictranslator.info/

* This article is the fifth week of trying to write at least one article every week.

Past articles are listed below.

- [React + TypeScript: Face detection with Tensorflow](https://dev.to/yuikoito/face-detection-by-using-tensorflow-react-typescript-3dn5)
- [UI Components website Released!](https://dev.to/yuikoito/ui-components-website-released-2g8e)
- [I made 18 UI components for all developers](https://dev.to/yuikoito/i-made-18-ui-components-for-all-developers-17l6)
- [Image Transformation: Convert pictures to add styles from famous paintings](https://dev.to/yuikoito/image-transformation-convert-pictures-to-add-styles-from-famous-paintings-24ml)

## Functions

- Automatically gets the language of the user's browser and sets it as the default language. (EN, DE, FR, ZH, JA)
- Transcribe with the click of a button
- Translates to the default language (the language of the user's browser) with the click of a button.
- If need to change the language, it is possible to change the language.
- Transcribed or translated text can be easily copied with the click of a button.

## Points to consider

I tried to make it as simple as possible! So, you can understand it without any description.

As a result, it looks like this.

![スクリーンショット 2021-06-20 21.46.29](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzjeckxcs571sv6uplqa.png)

When you drag an image, you can select the Transcribe or Translate button like this.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdrmw6j273omryhe6ev4.png)

Initially my application needed selected which language you want to translate.
However, I was wondering if I wanted to translate an image, it might be bother to select language before translating. If your browser language is English, of course you want to translate to English, not to Japanese, Chinese or others. So I decided to make it possible to translate into the user's browser language with just one button.

Of course, if the language displayed is different from your native language (or the language you want to translate is different), you can use the button on the upper right to convert it to a different language.

If you need to translate or transcribe from images, please use this!

Also I posted this to Product Hunt!↓

https://www.producthunt.com/posts/pic-translator



🌖🌖🌖🌖🌖🌖🌖🌖

Thank you for reading!
I would be really grad if you use this website and give me any feedback!

🍎🍎🍎🍎🍎🍎

Please send me a message if you need.

yuiko.dev@gmail.com
https://twitter.com/yui_active

🍎🍎🍎🍎🍎🍎
How to resolve the "Could not create MokListXRT: Out of Resources" Debian boot error on Dell computers
Tags: debian, dell, uefi, boot
Published: 2021-06-20 18:56:55

Uh oh, you just rebooted your Debian Dell machine to effect a system update, only to get the following error message:

![Debian error message reading "Could not create MokListXRT: Out of Resources"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwkdwuqf9o4tjsqqh2ko.jpg)

```
Could not create MokListXRT: Out of Resources
Something has gone seriously wrong: import_mok_state() failed: Out of Resources
```

You can resolve the above by doing [this](https://askubuntu.com/questions/1333492/21-04-uefi-boot-fails-could-not-create-moklistxrt-out-of-resources#comment2302242_1333772).
Boost your productivity with this app
Tags: tooling, productivity
Published: 2021-06-20 21:30:43

I'm one of those people who loves to be constantly looking for apps to help me with my productivity. The overwhelming majority of people who know me personally know that I love being as productive as possible and to be honest, if I can do more than one thing in a single application, I'm more than satisfied.

However, I am fully aware that it depends on the needs of everyday life, sometimes we need an application that is good with whiteboards, other times we need an application that helps us take notes on something.

I personally like an application that is solid enough to get away with in everyday life and I don't care if it's totally perfect in some respects.

And with all these aspects in mind, this week I'm going to talk a little bit about [Whimsical](https://whimsical.com).

![dashboard](https://res.cloudinary.com/dj5iihhqv/image/upload/v1624223969/flow_tx6cqx.gif)

Without any doubts, Whimsical has been a game changer for me. With a single application it is possible to do everything related to productivity, to the point that I have not used another application.

I usually like taking notes, brainstorming and to create low fidelity wireframes for my personal projects. In the first two I mentioned, Whimsical is great, just how I like it, simple and fast.

However, if we talk about wireframe creation, the difference with its competitors is notorious, however I don't see Whimsical as a design application. But for what it takes, it's super convenient, with great quality mockups and I like the idea of having ready-made elements to put in our UI.

![wireframe](https://res.cloudinary.com/dj5iihhqv/image/upload/v1624223257/wire_miqsmo.gif)

I'm fully aware that many will prefer certain applications for certain cases, but I think this is a good alternative for those who want to handle several things in a single application and it's amazing to know that I only need to use one app to save my day.

But the use of Whimsical is quite vast, it's not just tied to brainsorms, docs and wireframes. We can do more things like sticky notes and flow charts. Not to mention some templates that you have at your disposal to start the project ideation process as quickly as possible.

![templates](https://res.cloudinary.com/dj5iihhqv/image/upload/v1624223835/templates_mhtphj.gif)

One of the favorable aspects of this application is the learning curve, which in my opinion is almost nil if you've used similar applications in the past and if you haven't in less than five minutes you start to understand how everything works because it's very intuitive.

## What about yout?

What is the application that helps you the most in your daily life?
What is a relational database?
Tags: database, webdev, beginners, codenewbie
Published: 2021-06-20 22:32:14

When you develop functional websites and web applications. A major requirement to hold customer data is a persistent data storage.

This will be  key to allowing useful interaction and so it is foundational to learn about databases to be a web developer. 

#### What is a database?

A database is storehouse for types of data and is usually a server or computer. A database is developed to model all your data in tables and columns to be easy to read and retrieve way. 

#### What is a relational database? 

A relational database is a type of database that consists of data that is relational. The database is structured in a way to create a relationship from one unit of data to another. 

#### What is a relational database management system?

A relational database management systems(RDMS) is software that is used to manage a relational database. This includes creating database administrators and all the functions of managing the data.

#### What is SQL?

SQL is a structured query language for managing your data in a database management system. This language gives your the power to read and write to a database and create advanced queries to analyze your data in useful ways. 

#### Learn More

Deep dive into [Non-relational databases](https://docs.microsoft.com/en-us/azure/architecture/data-guide/big-data/non-relational-data)

Popular relational database management systems:
* [SQLite](https://www.sqlite.org/index.html)
* [MySQL](https://www.mysql.com/)
* [PostgreSQL](https://www.postgresql.org/)

#### Let's chat about databases
We briefly described a relational database, relational database management systems, and the database query language (SQL). If you enjoyed this post feel free to leave a comment about your experience working with databases.

Happy Coding,
Terry Threatt
How to Create a TypeScript Project with ExpressJS the Simplest Way!! By SilvenLEAF 
Tags: javascript, typescript, node, silvenleaf
Published: 2021-06-21 02:47:34

If you are wondering how to create a TypeScript BackEND project, fear not my brave knight. It's way easier than you can ever imagine!! Let go!

### Step 1
First init our project by running **npm init -y** on our terminal, it'll create a package.json file. Then let's install these packages by running the following command on our terminal
```bash
npm i typescript ts-node express @types/node @types/express
```
typescript is the core package for typescript, ts-node is the typescript version of node for runnig .ts files just as we do with node app.js, in this case we do, ts-node app.ts. @types/node and @types/express has all the types for node and express respectively. You say why? Well typescript is all about type na :)

## Bonus Step
Now let's install some helping dev stuff
```
npm i --D nodemon ts-node-dev
```
ts-node-dev package binds nodemon with typescript. The typescript version for **nodemon app.js** is **ts-node-dev app.ts**

Now let's update our package.json file 
```json
  ....keep others unchanged
  "main": "app.ts",
  "scripts": {
    "start": "ts-node app.ts",
    "dev": "ts-node-dev app.ts"
  },
  ...keep others unchanged
```

## Step 2
Run the following command, it'll will create a tsconfig.json file.
```
tsc --init
```

## Step 3
Let's create an express App
Write these on the app.ts file that we created
```typescript
import express, { Request, Response } from 'express';
import path from 'path';




// -------------------firing express app
const app = express();
app.use(express.json());
app.use(express.urlencoded({extended:false}));
app.use(express.static(path.join(__dirname, 'client/build')));




// -------------------routes
app.get('/home', (request: Request, response: Response)=>{
  console.log(request.url)
  response.json({ message: `Welcome to the home page!` })
});



// --------------------Listen
const PORT = process.env.PORT || 5000;
app.listen(PORT, ()=>{
  console.log(`Server running on PORT ${ PORT }`);
})
```

Yippie, our very first typescript express app is ready. Let's run and test it

Type either **npm start** or **npm run dev** and then go to the **localhost:5000/home** and test it out yourself. Enjoy!
Scientific.net Number of reads WebHook 
Tags: scientificnet, researchpaper, publications
Published: 2021-06-21 12:53:24

In the meantime i've coded a small webhook to retrieve the number of reads from a paper published on scientific.net and insert it to any author/ researcher webpage:

HTML frontend code:
```html
<script src="js/jquery-3.4.1.min.js"></script>
   <small id="include-aef-stats">
         <script>
             $(function(){ $("#include-aef-stats").load("kernel/loadstats.php"); });
         </script>   
    </small>
```
loadstats.php backend code:
```php
<?php
$url = "https://www.scientific.net/Paper/GetDownloadsAndVisitorsCount?paperId=523460";
$scientificNetCounter = file_get_contents($url);

echo $scientificNetCounter." reads on A.E.F. website" 
?>
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsms64et8pbkx97dzze9.png)
How to conditionally select array or array of objects in Javascript ?
Tags: javascript, tutorial, programming, webdev
Published: 2021-06-21 18:18:18

If you have ever come across a use case where you have multiple arrays like below,
```
const array1 = [1,2,3];
const array2 = [4,5,6];
const array3 = [{ a: 1 }, { b: 2 }];

```
What if you want the resultant array to conditionally include one or more arrays, one way to do it
```
const arrayWeWant = [];

if(condition1) {
 arrayWeWant.push(array1);
}

if(condition2) {
 arrayWeWant.push(array2);
}

if(condition3) {
 arrayWeWant.push(array3);
}
```
well that's not a bad approach, but we can do better

```
const arrayWeWant = [
  ...(condtion1 ? array1 : []),
  ...(conditon2 ? array2 : []),
  ...(conditon3 ? array3 : [])
];

```

It's a much cleaner way isn't it.

Happy to share!😊
Implement reverse scrolling effect on webpage
Tags: webdev, html, css, scrolling
Published: 2021-06-21 18:52:59

Hey guys, when you create a website, the browser loads it at the top of your design, and viewers scroll down. But what if your design is more interesting the other way around? What if you'd like a page to start at the bottom and scroll up?  In this blog you'll learn how to implement reverse scrolling on your website in just 3 steps...


**1. Start with just 7 lines of HTML:**
>*Create panels/ sections inside one main container. I created 5 but you can create as per requirement.*
```
<div class="panelCon">
   <div id="pane-5" class="panel">Section 5</div>
   <div id="pane-4" class="panel">Section 4</div>
   <div id="pane-3" class="panel">Section 3</div>
   <div id="pane-2" class="panel">Section 2</div>
   <div id="pane-1" class="panel">Section 1</div>
</div>
```

**2. Few lines of CSS:**
>* _Set the height of each panel to viewport height._ 
* _Set the position as fixed of main container and bottom as 0. Set the body height as (100*Number of panels)vh._
* _Below you can see height of body is set as 500vh as I have created 5 panels._
```
body {
  margin: 0;
  padding: 0;
  height: 500vh;
}
.panelCon {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99990;
}
.panel {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  line-height: 35px;
  text-transform: uppercase;
}
#pane-1 {
  background-color: pink;
}
#pane-2 {
  background-color: #e8e8e8;
}
#pane-3 {
  background-color: red;
}
#pane-4 {
  background-color: pink;
}
#pane-5 {
  background-color: yellow;
}
```

**3. Finally, just 3 lines of JS:**
>*Inside onScroll function of window, increase the bottom value but in negative* 😉
```
$(window).on("scroll", function () {
  $(".panelCon").css("bottom", $(window).scrollTop() * -1);
});
```

and you're done.

.

**Don't want to follow the steps? Below is Github link for you :)**
Demo: https://tbaveja.github.io/reverse-scrolling/
Code: https://github.com/tbaveja/reverse-scrolling

.

Thanks for reading !


> Connect with me on LinkedIn:
https://www.linkedin.com/in/tarun-baveja-000a9955/
Creating Python's Input Function In Ruby
Tags: python, ruby, function
Published: 2021-07-13 07:23:30

---
title: Creating Python's Input Function In Ruby
tags: python, ruby, function
description: A tutorial showing how to implement python's input function in Ruby. The input function is used to get user's input
published: true
canonical_url: https://www.kudadam.com/blog/python-input-ruby
cover_image: https://kudadam.sirv.com/blog/ruby_input.png
---

[Repost from my blog](http://kudadam.com/blog/python-input-in-ruby)

[Ruby](https://www.ruby-lang.com/en) is a general-purpose programming language and it's syntax is close to Python's own. 
When I started learning Ruby, I was marveled at it's simplicity.
Since I was coming from a Python background. I found it very easy to learn. Because of it's similarity in syntax, I wanted some of Python's function in Ruby.
One of the functions I wanted to implement was the `input()` function. The reason was that, Ruby unlike Python, you will need to use both `puts` and `gets` if you want to get a user's input whiles displaying text in Ruby. 

## Creating our function
Well, to create this function in Ruby is very simple. Just open your Ruby file and type the following code inside
```ruby
def input(prompt ='')
    puts prompt
    return gets
end
```
## Explaining the function

Well, so as we can see, the function is just four lines of code. Pretty simple huh!
The function was made to just replicate Python's own so they work in the same way.
The `input` function takes an optional parameter called prompt. On the next line, the `puts` method displays the `prompt` to stdout and then the `gets` method retrieves any user input and returns it.

## Trying out the function

In order to use the method we just created, make sure the code is in the same file as the one you are working with.
```ruby
name = input("What is your name?")
print "Hello " + name
```
In our example, we called our function with the string _"What is your name?"_ and the value was stored in the variable `name`. On the next line, we printed 'Hello' + name.

See, that wasn't hard! :smile:
How to view source code of a website on mobile device
Tags: website, html, browser
Published: 2021-07-13 07:29:24

---
title: How to view source code of a website on mobile device  
tags: website, html, browser
published: true
description: A tutorial showing how the view the source code of any website on your mobile device
canonical_url: https://www.kudadam.com/blog/website-source-code-mobile
cover_image: https://kudadam.sirv.com/blog/code_image.jpg
---

Most of the times, when we visit a nice looking website, we always want to look at it's HTML source code. On desktop browsers, we simple just right-click and click on "view page source" from the context menu but there's no option like this on mobile devices. So then, how do we view the source code on a mobile device?

If we are to observe carefully, whenever we click on "view page source" on a desktop browser, it opens a new url in this format `view-source:https://path/to/url`.
If we apply this same trick on a mobile device, it works as expected.

## Steps to view source code

1. Visit the website which you want to view it's source code.
![A screenshot of Google's homepage](https://kudadam.sirv.com/blog/view_source_code_of_website_on_phone_img_1.png)

2. Click inside the address bar and append `view-source:` before the url of the website.
![view source being highlighted](https://kudadam.sirv.com/blog/view_source_code_of_website_on_phone_img_3.png)

3. Click the send button and the page will load with the source code of the file.
![Google's website](https://kudadam.sirv.com/blog/view_source_code_of_website_on_phone_img_2.png)


__NB:__ Even though I used Chrome's mobile browser, the method is the same in all the major browsers.
This is an OpenPGP proof
Published: 2021-07-13 15:37:30

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/4C0F1D12323E3F0BF7F19123AAC34E954E9ADFDE) to [this dev.to account](https://dev.to/edo78). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: 4C0F1D12323E3F0BF7F19123AAC34E954E9ADFDE]