teleren/devto huggingface dataset:
Introducing Async Channels
Tags: javascript, library, async, channels
Published: 2021-10-09 13:44:04

## What?

Channels are queue-like objects _(First In First Out)_ that their `enqueue` (send) and `dequeue` (get) functions are asynchronous (`async`). By passing them between asynchronous functions we can synchronize operations between said functions.

## Why?

Let's say we want to process a large chunk of data _(simulated by a several lorem-ipsum paragraphs)_.
Some of the processes that we want to perform on that data are fast, while other are time (and resource) consuming.
To avoid overwhelming our infrastructure, we want to make not to send data to a process that isn't ready to accept new data. In other words, we want to implement [back-preasure](https://medium.com/@jayphelps/backpressure-explained-the-flow-of-data-through-software-2350b3e77ce7).
This is where **Async Channels** come into play.

When you `send` (or `get`) a message to (or from) a channel, it returns a promise.
For `send` requests, it will resolve if the channel has available buffer, or (if not), after a `get` is performed on the channel.
And on the opposite side, a `get` request will resolve if there is buffered message on the channel, or after a `send` request is made.

## How?

Below is an example usage of **async_channels**, where long processes are simulated by calling `sleep` (a helper function that returns a promise that is resolved after `n` seconds).

{% codepen https://codepen.io/Eyal-Shalev/pen/xxLKjwR default-tab=js,result %}

<hr />
You can view the documentation on [eyal-shalev.github.io/async_channels](https://eyal-shalev.github.io/async_channels)
{% github eyal-shalev/async_channels no-readme %}
Docker Interview Questions for 2022
Tags: docker, devops, career, programming
Published: 2021-10-09 13:46:14

There’s a lot more to application creation than just drafting code! They entail a lot of behind-the-scenes work, such as the use of various frameworks and technologies at different stages of their lifecycle, making the process more complicated and difficult.

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

List of [Docker Interview Questions for DevOps](https://www.techgeekbuzz.com/top-docker-interview-questions/)

1. What do you understand by the term Docker?
2. What do you understand by virtualization?
3. Name the latest version of Docker.
4. What do you understand by containerization?
5. Explain hypervisors used in VMs in simple terms.
6. Differentiate containerization and virtualization.
7. Explain Docker containers in simple terms.
8. Explain Docker Images in simpler terms.
9. What do you understand by Docker hub?
10. Explain in simple terms the architecture of Docker.
11. Explain the uses of a Dockerfile in Docker.
12. Explain the Docker container life cycle.
13. What do you understand by Docker Compose?
14. What do you understand by Docker Swarm?
15. Explain the functionalities of Docker Swarm.
16. Explain the architecture of Docker Swarm.
17. Explain the working of Docker Swarm.
18. Why should you use Docker?
19. What can you use Docker for?
20. What is the Docker engine?
How to make a good looking button with Tailwind CSS
Tags: tutorial, tailwindcss, css
Published: 2021-10-09 13:36:14

---
series: Making components with Tailwind CSS
---
> Tailwind CSS is a utility based framework. Which is great in many ways. However, Tailwind CSS does not have a default set of components for you to get started with.

> This is a series that will show you how to build various common UI components with Tailwind CSS

Today, we're going to be learning how to make a (good looking) button with Tailwind CSS.

Let's start by making a button
```
<button type="button">Button</button>
```

Let's add some padding and margins
```
<button type="button" class="m-2 px-8 py-2">Button</button>
```

Next, we can add text and background colors
```
<button type="button" class="m-2 px-8 py-2 bg-indigo-500 text-white">Button</button>
```

We should give our button rounded corners
```
<button type="button" class="m-2 px-8 py-2 bg-indigo-600 text-white rounded-lg ">Button</button>
```

Let's give our button a small shadow
```
<button type="button" class="m-2 px-8 py-2 bg-indigo-600 text-white rounded-lg  shadow-sm">Button</button>
```

It is important that we add `:hover` and `:focus` styles to our button
```
<button type="button" class="m-2 px-8 py-2 bg-indigo-600 text-white rounded-lg  shadow-sm hover:bg-indigo-500 focus:ring-2 focus:ring-indigo-200">Button</button>
```

Here's what our button should look like now 👇 
{% codepen https://codepen.io/chaudhs769/pen/LYjYpJG default-tab=result %}

## Making 10 css classes 1
{% comment 1ilh9 %} Thank you so much @afif. This comment gave me inspiration to add this section to my article. There are too many classes on this button. However, thanks to the `@apply` directive, we can make this one class. We can simply take all our classes and "apply" them to one class.
```css
.btn {
@apply m-2 px-8 py-2 bg-indigo-600 text-white rounded-lg  shadow-sm hover:bg-indigo-500 focus:ring-2 focus:ring-indigo-200;
}
```

Now, after rebuilding your css, you can replace all those classes with one class in your button.
```html
<button type="button" class="btn">Button</button>
```
Thanks for reading and I hope you liked the article! 😊
Generate offline documentation of reactjs in 5 minutes
Tags: react, javascript, opensource, tutorial
Published: 2021-10-09 13:35:27

When it comes to learning a new language, framework or library, the first and important source of help comes from the documentation provided by the respective websites. But it is often difficult to go through the complete documentation immediately. And during development we need to refer to the documentation very frequently.

Having an offline version of the documentation may help to find the information faster and whenever required. Also, it helps to work offline without any distractions from the facebook notifications.

In this post, let's build the offline documentation for reactjs.

## Getting the source code
The documentation for reactjs is available on [reactjs.org](https://reactjs.org) website. The source code for this website is available as a github repository [here](https://github.com/reactjs/reactjs.org).

Fireup a cmd, clone this repository and cd into the directory
```bash
git clone https://github.com/reactjs/reactjs.org
cd reactjs.org
```
Open the code editor of your choice. If using vscode, just enter
```bash
code .
```

## Understanding the tech stack
Once we have the source code, we can see many configuration files there. The most important ones that quickly gives us all the information we need are

1. `gatsby-*.js` - these files tells us that [Gatsby](https://www.gatsbyjs.com) is used for generating the static HTML for the website.
1. `yarn.lock` - it is using yarn as the package manager.
1. `vercel.json` - the website is hosted on [vercel](https://vercel.com)

## package.json
Perhaps, `package.json` is the one file that any webdev will start looking at when they start working on a new project. Once we open this file, we can see the dependencies of the projects and the scripts used.

From the file we can see the following scripts.

![Scripts in package.json file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gp4tckr7h8wfmvhggsj8.png)

Luckily, we have the **build** script that we require to build the static HTML.

## Commands
Now we have enough information to generate the documentation.

1. Install all the dependencies using the `yarn` package manager.
    ```bash
yarn install
```
1. Run the build script using
    ```bash
yarn build
```
    This will generate the required static HTML, js, css and all assets in the **public** folder.
1. Serve the documentation generated in **public** folder
    ```
cd public
python -m http.server // simpler
// Or if you prefer nodejs
yarn add global serve
serve
```

**Congratulations!** We now have reactjs documentation available offline.

If you would like to have offline documentation for any framework/library you require, please tell us in the comments.

Happy coding!
Look into Node.Js Interview Questions
Tags: node, career, programming, question
Published: 2021-10-09 12:33:57

Node.js is a cross-stage server-side JavaScript runtime climate that is a very incredible stage for applications. Node.js is lightweight when contrasted with different adversaries that make it very proficient for the advancement of information escalated huge scope applications, for example, video web-based locales, and other web applications. 

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

Node.js is very like Ruby's EventMachine and Python's Twisted yet a stride in front of them. It has an occasion-driven design that has the ability of nonconcurrent I/O tasks, which makes it equipped for dealing with numerous simultaneous solicitations. 

One of the principal up-sides of Node.js which makes it more famous is that it runs on different stages like Windows, Linux, macOS, Unix, and some more.

#### List of [node js interview questions for freshers](https://www.techgeekbuzz.com/top-node-js-interview-questions/) & experienced professionals.

* What can you tell me about Node.js?
* Highlight some of the key features of Node.js?
* Is Node.js completely based on a single thread?
* What does event-driven programming mean?
* Define “I/O” operations?
* How Node.js works?
* Name the various API functions supported by Node.js?
* What do you understand by the control flow functions?
* Explain NPM.
* What are the two arguments that async.queue takes as input?
* State the difference between Node.js vs Ajax?
* Describe the advantages and disadvantages of Node.js?
* What are the types of streams present in Node.js?
* Name some of the popularly used libraries in Node.js?
* What is libuv?
* Mention the types of modules offered by Node.js.
* What do you know about callback hell?
* What is package.json?
* Does Node.js support multi-core platforms?
* Explain the role of the request process in Node.js.
* What is the chaining process in Node.js?
Boxing and Unboxing in C#
Tags: csharp, programming
Published: 2021-10-09 12:44:17

### What boxing is?
As Microsoft's documentation [explains](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/types/boxing-and-unboxing), boxing is the process of converting a value type to the type object or to any interface type implemented by this value type. In simple words boxing is the process of converting a value type to reference type. When boxing take place the CLR it wraps the value inside a System.Object instance and stores it on the managed heap. Boxing is implicit conversion process.

#### Example
```csharp
int num = 22;
object _object = num;
```

### Unboxing
Unboxing as you can already imagine is the exact opposite process, meaning the process of converting a reference type to value type. Unboxing is an explicit conversion process and a to step operation. First it checks the object instance to make sure that it is a boxed value of the given value type and then copies the value from the instance into the value type variable.

#### Example
```csharp
int num = 22;
object _object = num; // Boxing
int _int = (int)_object; // Unboxing
```

#### What about performance
In relation to simple assignments, boxing and unboxing are computationally expensive processes. When a value type is boxed, an entirely new object must be created and allocated into memory. Likewise the cast required for unboxing is also expensive process and can take four times as long as an assignment.
Flutter Fall Event
Published: 2021-10-09 12:35:26

[Original Post From raywenderlich](https://www.raywenderlich.com/28213725-announcing-our-flutter-fall-event-featuring-flutter-apprentice)

Google နဲ့ Raywenderlinch တို့က​စီစဥ်တဲ့ Flutter Fall Event ဆိုတာ Flutter လေ့လာရလွယ်ကူအောင် စီစဥ်ပေးထားတာပါ။ Information အပြည့်အစုံကို [ဒီမှာ](https://flutter.dev/apprentice-giveaway) သွားကြည့်လို့ရပါတယ်။ ဒီ event မှာပါဝင်ချင်ရင် ဒီ post မှာဖော်ပြထားသလိုပါဝင်လို့ရပါတယ်။ ကိုယ်တိုင်တစ်ယောက်ထဲလုပ်ချင်ရင်လဲ​ရသလို Google Developer Group - Yangon (GDG Yangon) မှာ တခြားသူတွေနဲ့အတူပါဝင်လို့လဲရပါတယ်။ 

{% youtube NVzIALG7CUc %}

အရင်ဆုံးအနေနဲ့ ဒီ event က Flutter Apprentice ဆိုတဲ့စာအုပ်ပေါ် အခြေခံပြီး ပြုလုပ်သွားမှာဖြစ်ပါတယ်။

![Flutter Apprentice Book](https://assets.alexandria.raywenderlich.com/books/be0da83c17e547776b6ff910c5109b836d4b642faedff5a9a04d18d4375714e0/images/ad5295501b90ad84026582f5d9a8996c1cb9713176e6c390088fa8e67829b5c5/w594.png)

ဒီစာအုပ်ကို ၃လတာ အတွင်း free access ရနေမှာဖြစ်တယ်။​ ဒီထဲမှာ အခြေခံ ကနေပြီး နောက်ဆုံး app release လုပ်တဲ့ထိ ပါသွားမှာဖြစ်တယ်။ 

1. [www.raywenderlich.com](www.raywenderlich.com) ကိုသွားပြီး register လုပ်ဖို့လိုပါမယ်။ 
2. ပြီးရင်တော့ [Book](https://www.raywenderlich.com/books/flutter-apprentice) ကိုစပြီးဖတ်ပြီး tutorials တွေစလုပ်လို့ရပါပြီ။

အပတ်စဥ်လဲ Google Flutter Team က Youtube ကနေ Q&A sessions တွေကို လုပ်သွားပေးဖို့ရှိပါတယ်။ [ဒီမှာ](https://www.youtube.com/playlist?list=PL4dBIh1xps-HAaadBRWQobCO_IJ4gMOG2) သွားကြည့်လို့ရပါတယ်။ မြန်မာစံတော်ချိန်နဲ့ဆို ဗုဒ္ဓဟူးနေ့ ည ၁၀ခွဲတိုင်းမှာဖြစ်ပါမယ်။

|Date|	Homework|	Live stream topic|
|--|--|--|
|October 6+|	Sign up for free access! Check out the first live stream for details.	|| 
|October 13|	Read chapters 1, 2|	Getting started|
|October 20|	Read chapters 3, 4|	Widgets|
|October 27|	Read chapters 5, 6|	More widgets|
|November 3|	Read chapters 7, 8|	Navigation|
|November 10|	Read chapters 9, 15 (1st half)|	Data persistence|
|November 17|	Read chapters 10, 11|	Networking & serialization|
|November 24|	Read chapters 12, 13|	State management|
|December 1|	Read chapters 14, 15 (2nd half)|	Streams|
|December 8|	Read chapters 16, 17, 18|	Deployment|
|December 15|	Read chapter 19|	Firebase|
Can AI Write Blog Posts For Bloggers?
Tags: wordpress
Published: 2021-10-05 14:08:27

![Can AI write Blog Posts for Bloggers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90s474hxl507v0ydble2.jpg)

Today's online content market is extremely competitive. Many bloggers are struggling to get traffic. Therefore, they need great content that can bring more visitors, but they don't have enough time to write it.

That's how the idea of Jarvis was born. The tool uses GPT-3 technology that helps bloggers to write blog posts in a fast and easy way. It can save time, which bloggers can spend on other important tasks.

There is a tool available called Jarvis that can write blog posts for you. [Click here to read Jarvis Review](https://blogginglift.com/jarvis-ai-review) 

##The pros of using AI

- helps to avoid writer's block issue
- save time for
- it speeds up the production

##The cons of using AI 

- sometime it writes irrelevant content. So, it's your responsibility to manually check it before publishing.

##Final Words About it
Yes,  AI can write blog posts for bloggers. It's like hiring a personal writer who will make high-quality content for you. The tool uses GPT-3 technology, which is a modern artificial intelligence language algorithm, helping to generate sentences based your inputs.

To put it in simple words, Jarvis is a tool that you can use to make writing blog posts easier. You can automate the process and reduce your workload.
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2021-10-09 12:00:02

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12596ec99e0.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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:___ What sits on a pirate's shoulder and calls, "Pieces of seven, Pieces of seven"?

___A:___ Parroty error.
 -->
Learn about the Google Cloud Platform ✔️
Tags: googlecloud, beginners, webdev, showdev
Published: 2021-10-09 11:32:01


#Introduction

Google Cloud Platform is a way to access Google’s
infrastructure to create your own server
And applications(simplified answer).
Google Cloud Platform (GCP), a collection cloud computing services that was launched by Google on 7 April 2008.
GCP offers a variety of tools and services that help with managing infrastructures, configuring networks and provisioning servers.

#What is the importance of GCP?
is the third largest Cloud Service Provider (CSP), behind Amazon's AWS, and Microsoft Azure.
##There are some point of GCP:-
###Scalability
GCP however, allows for extreme ease of scaling up or down.Downscaling is one of the biggest drawbacks to cloud computing.

###Pricing
In its pricing philosophy, Google has four key elements,
Google's GCP services are priced at the lowest price on the cloud market compared to other providers.

###Sub-hour billing
The bill is only made for the requested time. GCP, for example, doesn't round the hour to the next hour if services are requested for half an hours, unlike other CSPs.

###Sustained Use Discount
Google offers a 25% discount if you use the product for a sustained period of time.

###GCP
This allows you to specify the exact amount CPU power and memory required for your application, and be billed accordingly.GCP also offers a variety of cloud services that can be used to build applications, manage infrastructures, provision servers, and store data. GCP is accessible by cloud administrators and developers via dedicated or public networks.

### Integrated Services: 
Multiple APIs, AI, ML, IoT and Compute Engine, Databases, Big Data analytics Developer tools Security, Storage, can all be used simultaneously.

###Quick Collaboration:
 GCP allows quick collaboration for all users. Multiple users can simultaneously access and edit the project files.


For unused data, the redundant backup facility can be accessed.

Employees can work anywhere and have full access to all information from any device. 

Data is also stored in the cloud so employees can work remotely.

Full control and flexibility in technology and data management for users.
.
.
.
I hope this is help to you learn a Googlecloud platform..
CSS Text STROKE Animation
Tags: html, css, codenewbie, webdev
Published: 2021-10-09 11:29:54

This is simple and easy animation for text to show loader-side. Here we try to make this animation using CSS properties and HTML.

In this element, we used some CSS important properties to make the text transparent. To make animation we use a keyframe to specifies rules using inside CSS styles.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source code](https://w3hubs.com/css-text-stroke-animation/)
develop & implement some of the most common uses of puppeteer via pptr.io
Tags: puppeteer, opensource, hacktoberfest, showdev
Published: 2021-10-09 11:05:30

## background

in case this is the very first time you're hearing about **puppeteer**, i'd highly recommend googling what it does first and also refer to the [official documentation](https://developers.google.com/web/tools/puppeteer) to get a quick sense of what it's all about.

here's a video from the docs that should help you get started too —

{% youtube lhZOFUY1weo %}

## intro

a couple days ago, i launched [pptr.io](https://pptr.io) with the purpose to deliver a free & open source api that runs puppeteer as a service — think of it a spin-off of the original [pptraas.com](https://github.com/GoogleChromeLabs/pptraas.com) (defunct) tool.

the entire service is powered by [vercel](https://vercel.com/?utm_source=pptr-io&utm_campaign=oss) — specifically, it's [serverless functions](https://vercel.com/docs/concepts/functions/introduction) offering.

as of this post, the api is able to deliver the following —
1. capture a [screenshot](https://github.com/choraria/pptr-io#screenshot) from a given url
2. fetch [metrics](https://github.com/choraria/pptr-io#metrics) of a page
3. get a timeline [trace](https://github.com/choraria/pptr-io#trace)
4. render page as a [pdf](https://github.com/choraria/pptr-io#pdf)

...more to be added soon :wink:

i've ensured to keep the documentation as simple as possible and you can find all you need on that here —

{% github choraria/pptr-io %}

## contribute

i'm actively working to —

1. partner with folks who'd want to add more methods to the api.
2. check-in with the community on some feedback & inspiration on what new can be done.

## discuss

feel free to reach out in case you have any cool problem statements that you'd like to see solved using this api —

{% twitter 1444732327133806595 %}
How to make a good looking text input with Tailwind CSS
Tags: tutorial, tailwindcss, css
Published: 2021-10-09 11:02:33

---
series: Making components with Tailwind CSS
---
> Tailwind CSS is a utility based framework. Which is great in many ways. However, Tailwind CSS does not have a default set of components for you to get started with.

> This is a series that will show you how to build various common UI components with Tailwind CSS

Today, we're going to be learning how to make a (good looking) text input with Tailwind CSS

First, we can start by creating an `<input>` element

```html
<input type="text" placeholder="Enter some text..."></input>
```

We should definitely add some margins to the element.

```html
<input type="text" class="m-2" placeholder="Enter some text..."></input>
```

As you can see, our input looks pretty blank.
This is because Tailwind CSS removes default browser styles. We can give our input a default look by installing the `@tailwindcss/forms` plugin. Use npm or yarn to install the plugin in your project.

```
# Using npm
npm install @tailwindcss/forms

# Using Yarn
yarn add @tailwindcss/forms
```

Then add the plugin to your tailwind.config.js file:
```
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}
```

We should give our input a border radius
```html
<input type="text" class="rounded-lg m-2" placeholder="Enter some text..."></input>
```

The border is pretty dark, so we should give it a lighter shade of gray.
```html
<input type="text" class="border-gray-300 rounded-lg m-2" placeholder="Enter some text..."></inpu
```

It would also be nice to add some shadow to our `<input>`
```html
<input type="text" class="shadow-sm border-gray-300 rounded-lg m-2" placeholder="Enter some text..."></input>
```

Now we can add the focus styles. We change the ring-width to 2 when it is focused and change the border and ring colors.
```html
<input type="text" class="shadow-sm border-gray-300 rounded-lg m-2 focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400" placeholder="Enter some text..."></input>
```

Here's what our input should look like now 👇 
{% codepen https://codepen.io/chaudhs769/pen/KKvKpyW default-tab=result %}

Thanks for reading, and I'll be releasing some more posts soon!
Announcing a new series: Making components with Tailwind CSS
Tags: tailwindcss, css
Published: 2021-10-09 11:02:19

---
series: Making components with Tailwind CSS
---
Tailwind CSS is a utility based framework. Which is great in many ways. However, Tailwind CSS does not have a default set of components for you to get started with.

I have decided to build a series that will show you how to build good looking UI components with Tailwind CSS