teleren/devto huggingface dataset:
await Promise !== coroutine
Tags: javascript, webdev, programming
Published: 2021-07-25 11:10:59

Yeah this is a sister post of [Inversion of Inversion of Control](https://dev.to/3shain/inversion-of-inversion-of-control-212p). In that post I've illustrated the idea of coroutine (which invert the inverted control back) implemented by async/await. However, here I'd like to investigate it in depth and conclude that async/await syntax is not strictly coroutine.

Let's see an example.

{% twitter 1417800541133058050 %}

The code:

```js
const nextFrame = () => 
new Promise(resolve => requestAnimationFrame(resolve));

(async function animate() {
  while (true) {
    // ... maybe we should add an exit/break condition
    // lovely in-control-render-loop
    await nextFrame();
  }
})();
```
But it has a problem: **Your code is not executed in rAF callback synchronously but a micro-task callback**. So intuitively you get zero benefit from using rAF.

> Ironically you might never notice this as some implementations do cover the case. See [Timing of microtask triggered from requestAnimationFrame](https://github.com/whatwg/html/issues/2637)

It's due to the spec of Promise: always trigger a micro-task. But in a real coroutine, **the control is expected to be resumed at a specific point, synchronously.** The rAF is such an example, and some libraries/frameworks would use black magic side-effect-ish global variable to store context informations in a synchronous procedure. (And luckily JavaScript is single-threaded, otherwise...). Anyway **we need control back immediately, not delegated by a micro-task**.

Someone may ask: why a Promise must be asynchronous? Can't we have a synchronous Promise? (off-topic: the executor function in Promise constructor is executed synchronously.) The answer is: it could be but it shouldn't be. Having an asynchronous model simplifies the design, as Promise represents the eventual result of an asynchronous operation. For a Promise we only concern the **value** (and/or **reason for no value**). So a Promise just tell you "I'll eventually give you a value but not sure about when it's available (and doesn't necessarily to be in a micro-task.)". Even a fulfilled/rejected Promise notifies the value asynchronously, to make the design **consistent**. So you know the callback in `.then` is always deferred. Otherwise,
```js
// not runnable code, for illustration purpose
aMaybeSyncPromise.then((x)=>{
  // assume an error is thrown in callback
  throw 'Oops!!';
  // or access a closure variable
  doSomething(y); // 'y' is undefined if sync
});
// ... original flow of control
let y;
// ...
```
a sync and async callback give different behavior.

So let's go back to coroutine. Can we have a proper coroutine in JavaScript? Of course, by Generator. You can implement your own scheduler, and decide when to return the control back. (But it doesn't seem to be easy as it is described 😅. I planned to list some implementations here but none of them is Promise-free). I'll continue on this topic.
Mac in minutes - How I set up new machines
Published: 2021-07-25 03:02:51

Fresh installations are my guilty pleasure. While I could spend days configuring it to make it my own the realities of life often prove that time is often of the essence, making getting productive fast important.

In this blog post, I share how I do this quickly, and the settings that make life easier. The secret sauce - Homebrew, a package manager for MacOS. With this, we save hours that might have been spent scouring the net for download links.


## Installing Homebrew

To install, simply use run:
*command from their [home page](https://brew.sh/)*
```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

BONUS TIP: keep all your applications up to date with the following:
```bash
brew update ; brew upgrade ; brew cleanup ; brew doctor ;
```

## For Everything Else
```
brew install --cask bitwarden visual-studio-code firefox google-chrome iterm2 alfredbrew install --cask bitwarden visual-studio-code firefox google-chrome iterm2 alfred
```
How To Install Node.js and NPM on Ubuntu
Tags: linux, node, npm, programming
Published: 2021-07-25 11:09:52


### Introduction
Node.js is an open-source, JavaScript runtime environment on Chrome’s V8 that lets you effortlessly develop fast and scalable web applications. It utilises an event-driven, non-blocking I/O model that makes it lightweight, efficient and excellent for data-intensive real-time applications that run across shared devices.

### Installation

The easiest way to install Node.js and npm on Ubuntu is using Ubuntu repository, To install the Node.js and npm from the Ubuntu repository open terminal (Ctrl + Alt + T) and run the following commands 

```sh
$ sudo apt update
```
```sh
$ sudo apt install nodejs npm
```

The above command will install a number of packages in order to compile and install native addons from npm.

Once it is done verify the installation by running :
```sh
$ nodejs --version && npm --version
```
```sh
v12.21.0
7.5.2
```

In output you should see the Node.js and NPM version respectively. 

> At the time of writing, the Node.js version and NPM version included in the Ubuntu repositories is 12.21.0 and 7.5.2 respectively 

### Uninstall Node.js

Sometimes, you may want uninstall Node.js. You can do that simply by running the below commands on your terminal. 
```sh
$ sudo apt-get remove nodejs npm
```
```sh
$ sudo apt update
```

### Conclusion
That is it, In this article we learned,

* What is Node.js
* How to install Node.js using Ubuntu repository
* How to install NPM using Ubuntu repository
* How to uninstall Node.js.

I hope you found this articles helpful. If you need any help please let me know at comment section

Let's connect on  [Twitter](https://twitter.com/suhailkakar)  and  [LinkedIn](https://www.linkedin.com/in/suhailkakar/)  

👋 Thanks for reading, See you next time
My LGMVIP experience
Tags: webdev, react, html
Published: 2021-07-25 10:54:52

Hey, Guys how you all are doing I hope you all are doing well. Recently I have enrolled for an intership program at Letsgrowmore.

So here I would like to share my internship experience at Letsgrowmore. In this internship program, they have given us three tasks out of which we have to do two tasks to get the internship certificate. So, let's go through my tasks.

Task1:- In task one we have to build a single-page application I have introduced all the features in these project like carousels, cards, newsletters, swiping video section, swiping Gallery section contact section, and at last a footer. It was a challenging task because we have to made these pages mobile responsive also and to make it responsive I have used Bootstrap. I really enjoyed making this project I have put all my efforts and skills to make this project.
[Task-1 Code](https://github.com/Jatikbhardwaj/LGMVIP-WebDev-Task-1)
[Task-1 Video](https://www.linkedin.com/posts/jatik-bhardwaj-502b30206_task1-intern-css-ugcPost-6819643775653044224-DDFe)

Task-2:- In this task we have to build a landing page that contains a button (get users) when a user clicks on it, it fetch user data in the form of cards and while the API is fetching data its show loader that indicates that the data is loading.
[Task-2 Code](https://github.com/Jatikbhardwaj/LGMVIP-WebDev-Task-2)
[Task-2 Video](https://www.linkedin.com/posts/jatik-bhardwaj-502b30206_task2-letsgrowmore-intern-activity-6824928895737831424-Grfq)

At last I would like to thank [Letsgrowmore](https://letsgrowmore.in/) for boosting up my skills and I recommend all of you guys to visit [VIP-Letsgrowmore](https://letsgrowmore.in/vip/) and take benefits from these free organization.
Thank You,
[Jatik Bhardwaj](https://www.linkedin.com/in/jatik-bhardwaj-502b30206/)
Free TailwindCSS components to build UI faster
Tags: tailwindcss, css, react, components
Published: 2021-07-25 10:41:06

As a frontend developer often times we want to just spit out a decently looking UI in a short span of time. The advent of Tailwind CSS has already made our jobs easier but wouldn't it be even better if we could use pre-built good looking components and that too for FREE?

That's right, this is a compiled list of free Tailwind CSS components and templates that you can use directly in your side projects or any project for that matter :)


> 🚨 NOTE: Please save this post as I will be updating the list as and when I stumble upon more free resources 🚀.


## 1. [Tail-kit](https://www.tailwind-kit.com/)
Tail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 2.0. It's all compatible with React, VueJS and Angular applications.
* [Setup](https://www.tailwind-kit.com/started)
* [Components](https://www.tailwind-kit.com/components)
* [Templates](https://www.tailwind-kit.com/templates)

Extra: You can even make a request for a component [here](https://www.tailwind-kit.com/request). Isn't that just amazing 🥳 ?

## 2. [Kimia-UI](https://kimia-ui.vercel.app/)
Provides fully customizable UI Components compatible with Next.js, Gatsby and create-react-app.
No installation needed, Just copy and paste a component you want to use
* [Setup](https://kimia-ui.vercel.app/configuration)
* [Components](https://kimia-ui.vercel.app/components/accordion)
* [Templates](https://kimia-ui.vercel.app/templates/dashboards)


## 3. [Mamba UI](https://mambaui.com/)

Mamba UI is a free, open-source collection of beautiful UI elements based on Tailwind CSS that make it easy for anyone to build a website in minutes.

* [Setup](https://mambaui.com/docs)
* [Components](https://mambaui.com/components)
* [Templates](https://mambaui.com/templates)

## 4. [Meraki UI](https://merakiui.com/)

Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.
* [Components](https://merakiui.com/)

## 5. [Tailblocks](https://tailblocks.cc/)

Ready-to-use Tailwind CSS blocks
60+ Blocks, Responsive, Dark Mode Support, Color Variations

* [Components](https://tailblocks.cc/)

## 6. [Salvia-Kit](https://www.salvia-kit.com/)

Built with Tailwind CSS, they are fully customizable and without external dependencies. Each dashboard has 4 variants. one for create-react-app, Next.js, Vue with vite and Nuxt.

* [Components](https://www.salvia-kit.com/dashboard/all)


---
## NEW ADDITIONS:
---


## 7. [DaisyUI](https://daisyui.com/)

Clean HTML with component classes
Customizable and themeable
Pure CSS, No dependencies

* [Setup](https://daisyui.com/docs/install)
* [Components](https://daisyui.com/components/alert)


--- 
Thankyou everyone! that is it for now, but I will be updating this list, you can also contribute to this exhaustive list by commenting below or by reaching out to me on [twitter](https://twitter.com/vikrantbhat1022)🐤, and I will add them here with credits :)
Day 3/100
Tags: programming, webdev, javascript, 100daysofcode
Published: 2021-07-25 10:20:33

The third day of the challenge and the schedule did go haywire😓... Slept late at night and consequently woke up late and then went on to revise what I learnt in the past 2 days, practiced some basic array problems and made one more project ( A jokes website). The same concept of APIs was used. Had a tough time recollecting all the previously learnt topics, but in the end... I came out on top😉.Also made a list of tasks to be performed in the upcoming days. My consistency was tested today ... But I am pretty contented that the process continued. 

Check out my portfolio: https://aliasgarkc.netlify.app/
Аннотация типов в миксинах
Tags: python, pycharm
Published: 2021-07-25 10:10:28

При написании кода я стараюсь устранить все замечания линтера PyCharm. Но с миксинами сделать это не так просто
Возьмём для примера, вот такой миксин:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk95truy8s38wwl60b0k.png)
Линтер не доволен, т.к. не понимает при чём тут `self.request`. Этот вопрос я решал просто, я просто затыкал рот линтеру.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dedtxrzmfjod9a9ueg3.png)
Линтер доволен и молчит, даже если есть явная проблема.
В конце концов, безмолвный линтер стал проблемой, и я решил разобраться в вопросе. Я заглянул в [документацию mypy](https://mypy.readthedocs.io/en/latest/) из которой узнал, как можно решить множество замечаний линтера связанные с типами и аннотацией, но не для миксинов. К счастью, я не первый кто задумался об этом, и хоть не с первого раза, я нашёл ответ на StackOverflow, но вам я его не покажу, т.к. не могу найти его снова. Зато я могу показать, как выглядит то, что в итоге получилось:
``` python
from typing import TypeVar

T = TypeVar('T')


def mixin_for(_: T) -> T:
    return object
```
Функция `mixin_for` позволяет сказать линтеру к какому классу будет подмешиваться миксин.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhhqv9x9dygpc2gbmqym.png)
Заодно получаем автодополнение кода.

На этом всё.

## Глоссарий
* миксин - mixin, примесь
* линтер - linter, статический анализатор кода
How To Reach Clients for your digital product
Tags: webdev, javascript, startup, tutorial
Published: 2021-07-25 10:00:08

when it comes to making sales online, you will need a couple of stufss.
1. a product to sell.
2. a brand to sell that product under.
3. a strategy to sell it.
4. a perfect pitch.
5. this post.
 
Today, we will be talking about the 3rd step, that being, the strategy.
I am also an entrepreneur and i can safely tell you that there's always going to be some sort of trial and error along the way.
No certain strategy works for every market or for every product.
One kind of Strategy that worked for me was cold calling potential customers and pitching them the product over call.
here's how you do it. go to social media of your choice, i used instagram, search with the relevant hashtags which will give you a bunch of posts made by potential customers.
approach them through DM and try to get in touch with them over voice call.
the next is simple, make sure you have your product pitch ready, and blow their minds with it and make the sale.
happy Earning.
My Name is Mahdi Khan @mahdikhan786
Full Tutorial #14: Creating a Login Page with Blueprint.js | Microservices Chat App Using React, Node and GraphQL
Tags: react, node, webdev, javascript
Published: 2021-07-25 09:58:18

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

Part 14 of the Microservices Chat App is here! In this episode, we start building out the Login interface using a mix of Styled Components and Blueprint.js:

{% youtube lzqbKfFrqVo %}

Happy coding!

Source code: [https://github.com/lucaschen/microservices-chat-demo](https://github.com/lucaschen/microservices-chat-demo)
Types of Machine Learning: Recommender Systems
Tags: article
Published: 2021-08-03 19:04:52

---
title: Types of Machine Learning: Recommender Systems
published: true
date: 2021-07-25 09:51:48 UTC
tags: Article
canonical_url: https://reinforcement-learning4.fun/2021/07/25/types-of-machine-learning-recommender-systems/
---

Recommender systems are a category of Machine Learning algorithms that predict a user’s rating or preferences over a collection of items.

Recommender systems algorithms include: Collaborative filtering Content-based filtering Session-based Session-based recommender systems  Reinforcement learning for recommender systems include: Multi-criteria recommender systems Risk-aware recommender systems Mobile recommender systems
#4) Explain Implicit Type Coercion in JavaScript❔
Tags: javascript, beginners, webdev, career
Published: 2021-07-25 09:43:07

💠The process of automatic or implicit conversion of values from one data type to another.

💠It takes place when the operands of an expression are of different data types.

##String Coercion
✅It occurs when ' +, -, /, * ' operator is used.

✅When a number is added to a string, the number type is always converted into string type.

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



✅When a number is divided, subtracted or multiplied to a string, the string is always converted into number type.👇
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmeyz2hu8m85gaf35fd4.png)
 

##Boolean Coercion
✅When a Boolean is added to a Number, the Boolean value is converted to a number.

✅A Boolean value can be represented as 0 for *false* or 1 for *true*.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jto4c0ewqgyfhy1gx6c.png)
⚠All values except *0, 0n, -0, "", undefined, null, NaN* are truthy values.


##Equality Coercion
✅The '==' operator compares values but not types.

✅Returns *true* because both 'a' and 'b' are converted to the same type and then compared. Hence the operands are equal.👇

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9uxj5cinzzk6p00e8lc.png)
✅Returns *false* as string 'true' is coerced to NaN which is not equal to 1 or true in Boolean, so returns false.👆
__________________________________________________________________
Document.createDocumentFragment()
Tags: codesandbox, javascript, performance, frontend
Published: 2021-07-25 09:40:45

## What is it?

It is an object, which is ready to have nodes inserted into it.

`let fragment = document.createDocumentFragment();`

## When to consider using it?

When you need to add a lot of nodes to `Document`.
Adding them one by one in sequence may result in a lot of calculations, such as adjusting the position of the screen each time(reflow)

For example, when you will add a lot of `<li>` elements

## What's good about it?

Better performance

> Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry)

[Document.createDocumentFragment() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment)

## Demo

{% codesandbox fh939 %}
Build Your Android App with HTML, CSS, JS
Tags: html, css, javascript, android
Published: 2021-07-25 09:31:33

In this post, we'll be settings up [RearGen](https://github.com/ThirashaPraween/RearGen) to build your first android app with HTML, CSS, and JS.

As you know to become an android developer, first, you have to learn about android studio, java, XML, and Gradle. after that android developers move to any other framework to build apps with more ease and more platform support.

RearGen is a pre-developed framework tool that developers or non-developers can use. It's working with native based backend and the tool made with python. If someone wants to build an android web app to their hosted website. RearGen is the best selection for that. RearGen makes a signed android app to your hosted website with additional features like a no-internet connection window, pull and refresh button, splash screen, etc.

Although, If someone can't host their mobile responsive website, they can develop the app with HTML, CSS, and JS. This feature is called In-app development. You can develop your mobile app with basic HTML, CSS, and JS knowledge. otherwise, you can use third-party CSS and JS library, templates, and any other browser-supported things. Below I listed the main features in RearGen.

- Running with native code base backend
- Fast and easy
- Build less than 5MB app
- More customisation
- Connection lost window
- Pull and refresh facility
- No SSL bypass
- High quality rendering
- Develop with HTML / CSS / JavaScript
- Generating support
- Live testing
- Live installing
- Recollecting feature
- Full debugging details
- External CSS and JavaScript libraries supported
- Third party library support

## Installation
First, you need to download the latest [RearGen](https://github.com/ThirashaPraween/RearGen) release or LTS release from GitHub or clone the repo. After that, install supported JDK 8 or JDK 16 or whatever supported version on your computer. then, follow the [Start Development](https://github.com/ThirashaPraween/RearGen#start-development) instructions on my GitHub.

_These are sample splash and home screens. you can code whatever you want. Also, you can find out this sample RearGen mobile app on [Play Store](https://play.google.com/store/apps/details?id=tpw.creator.reargen)._

Splash Screen             |  Home Screen
:-------------------------:|:-------------------------:
![splash ss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2zs0v9snyi8jtfyitit.png)  |  ![home ss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cj1lr297g70hn68q2q09.png)

## Using custom template or library
To use a custom template, place the template files in the `src` folder in the RearGen root directory. those instructions you can find out on my [RearGen](https://github.com/ThirashaPraween/RearGen) GitHub repository.


![N|Solid](https://i.imgur.com/brTmrW7.png)
RearGen does not come with mobile-responsive components. So fornyKit is also known as RearGen Material Kit handles HTML elements as android responsive components. Try [fornyKit](https://github.com/ThirashaPraween/fornyKit) to your RearGen project.


Happy coding🎉!
HapiJS: Routing notes
Tags: hapij
Published: 2021-07-25 09:28:09

---
title: HapiJS: Routing notes
published: true
description: Notes on routing in the Hapi framework
tags: hapij
---

I've slowly been exploring [HapiJS](https://hapi.dev/) as an alternative to the standard use of Express.

Routes are built in the Hapi by passing a Route configuration object to the `server.route` function. The object is validated when the route is being constructed so you do get some feedback if you pass the wrong values.

Binding the handler to the route seems to make the assumption that the route is going to be bound within the server declaration (as you may need to access the server object).

Surprisingly path generation seems to be string-based with no in-built equivalent of Flask's `url_for`.

There is a recommended plugin [akaya](https://github.com/felixheck/akaya) but by default it generates absolute URLs and was very confused on the Glitch project I was using to test it.

I didn't find the documentation about the route object that helpful when I needed something beyond the usual key elements.
Pagecloud - Free Drag and drop website builder
Tags: beginners, webdev, productivity
Published: 2021-07-25 08:50:49

Pagecloud makes it easy for creators and businesses to build beautiful, high-performing websites and online stores. Whether you want to find your voice, live your passion or grow your business, our platform helps you do it quicker and with boundless creativity.

## What is Pagecloud?

PageCloud is a software as a service, cloud-based web development platform and drag and drop website builder. 

Also read - [Free Website Builder](https://hubsadda.com/free-website-builder/)

## Features of Pagecloud:

- Website templates
- Build with Sections
- Library of elements
- True drag and drop
- Design freedom
- Smart Guides
- Sections
- Headers & Footers
- Mobile customizations
- Unlimited fonts
- Shortcuts
- Advanced design

[Try Pagecloud Pro for free](https://pagecloud.grsm.io/dev)