teleren/devto huggingface dataset:
Ultimate 2021 List of CSS Frameworks and Component Libraries for Angular, React, Vue and Svelte
Tags: angular, svelte, react, vue
Published: 2021-03-29 00:38:29

Styling can be tricky and sometimes it's nice to have some handy CSS classes, Web Components or CSS Classes at the ready to create attractive responsive designs. Below I've aggregated some of the best options in many categories.

## General Purpose CSS Frameworks

- [Bootstrap](https://getbootstrap.com/)
- [Tailwind](https://tailwindcss.com/)
- [Tachyons](https://tachyons.io/)
- [Foundation](http://foundation.zurb.com/)
- [UIKit](http://getuikit.com/)
- [Materialize](http://materializecss.com/)
- [Bulma](http://bulma.io/)

## Minimalist Frameworks

- [PureCSS](http://purecss.io/)
- [Skeleton](http://getskeleton.com/)
- [Milligram](https://milligram.github.io/)
- [Spectre](https://picturepan2.github.io/spectre/)
- [BaseCSS](https://getbase.org/)

## Animation Frameworks (CSS or JS)

- [Animista](https://dev.to/weeb/10-of-the-best-css-animation-libraries-31d7#animista)
- [Animate CSS](https://dev.to/weeb/10-of-the-best-css-animation-libraries-31d7#animatecss)
- [Vivify](https://dev.to/weeb/10-of-the-best-css-animation-libraries-31d7#vivify)
- [AnimeJS](https://animejs.com/)
- [AniJS](http://anijs.github.io/)

## Native Web Component Libraries

- [Shoelace](https://shoelace.style/)
- [Elix](https://component.kitchen/elix)
- [FAST](https://www.fast.design/)
- [AMP](https://amp.dev/)
- [EON](https://eonjs.org/)

## React Component Library

- [Material Kit React](https://www.codeinwp.com/go/creative-tim-material-kit-react/)
- [Ant Design](https://ant.design/docs/react/introduce)
- [StoryBook](https://storybook.js.org/)
- [MaterialUI](https://material-ui.com/)
- [React Bootstrap](https://react-bootstrap.github.io/)

## Vue Component Library

- [Vue Material Kit](https://www.codeinwp.com/go/creative-tim-vue-material-kit/)
- [Vuetify](https://vuetifyjs.com/en/)
- [Buefy](https://buefy.org/)
- [Fish UI](https://github.com/myliang/fish-ui)
- [Quasar](https://quasar-framework.org/)

## Angular Component Library

- [Angular Material](https://github.com/angular/material)
- [Ng-Bootstrap](https://github.com/ng-bootstrap/ng-bootstrap)
- [Price-Ng](https://github.com/primefaces/primeng)
- [Clarity](https://github.com/vmware/clarity)
- [NG Zorro](https://github.com/NG-ZORRO/ng-zorro-antd)

## Svelte Component Library

- [Svelte Materialfy](https://madewithsvelte.com/svelte-materialify)
- [Carbon](https://madewithsvelte.com/carbon)
- [Svelte Material-UI](https://madewithsvelte.com/svelte-material-ui)
- [Smelte](https://madewithsvelte.com/smelte)
- [Notus Svelte](https://madewithsvelte.com/notus-svelte)
Express local-passport & passport-oauth Complications
Tags: help
Published: 2021-03-29 00:23:05

Hey, sin my web application i'm currently using an OAuth strategy that uses the user object within the passport session. I'm looking to create a password page (similar to shopify's password page) but i'm running into the issue where these two authentication methods are overwriting eachother. How would i go about renaming the user object to something else in passport-local ?
What made me choose to be a Software engineer .
Tags: beginners, javascript, codenewbie
Published: 2021-03-29 00:14:42

After some bad choices I made in my short life, I think I finally made a good one :).
I always had a pretty quick idea of how to use computers but never did anything with it.
I guess I needed to try some other things first in the past 20 something years, like being a bartender, a cook, a court house type writer and many more...

It was always fascinating to see how developers communicated with their computers and how they solved problems with it, so I said to myself many times that I want and I can do it.

In the beginning of 2020 a world pandemic bursted into our lives without knocking and it just sat in our living room without asking (so to speak). So, as this pandemic forced me to sit in my living room with her for quite a while, I started to think about "Web Development" more and more. Finally, after a friend from El Salvador, long time web developer, called me I decided it was time.
After my friend made me try it (and when I say "made me" it only took him about 5 seconds) I went on "Codecademy". I took the Web developer path and guess what, I fell in love with it right away.

The "Web developer" path started beautifully! 
HTML, CSS I got this!
And then I met the almighty JavaScript and I was terrified!
All those commands and syntax got me really scared and I almost gave up but I also had this big urge to crack it and understand it.

I started to google some courses about JavaScript and then I saw all those schools who do "Coding bootcamps" and I started to get interested. All of a sudden I realized that as much as web development it's fun, I wanna solve those big problems even more!
So I signed up to "Flatiron school" to become a Software engineer  and so far I'm very happy with my choice. 
And here I am, writing my first blog post about it and it's just the beginning! 
 
So good luck to me! 💪🏼😊
Speed Code: Movies App UI with Nativescript and Angular
Tags: showdev, animations, angular, nativescript
Published: 2021-03-29 00:01:22

I started a new series on Youtube where I record my process of building Mobile App UIs, focussing on the visual parts of the App. The current series is using _Nativescript_ and _Angular_ to build a hybrid App.

Here is a short gif of what the App looks like so far 

![Gif of the demo app's UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hnfwoin2l9035pzs1rq.gif)

Check out the full videos below 👇

## Part 1: Pages and Layouts 

{% youtube EUf3pQUHc74 %}

## Part 2: Drawers, Bottomsheets, and Animations

{% youtube W-Swidr53u4 %}

If you liked the videos you can subscribe to my [channel](https://www.youtube.com/channel/UC9uzjUqDPKdsgos3aPO0W7A) for more videos, or follow me on [twitter](https://twitter.com/williamjuan27), where I post more or less the same kind of things 😀

Let me know what you think. What features you want to see implemented next, a new design or different tech stack you want me to try out. Either way, let me know your thoughts 😀😀
Web Monetization category in Gamedev.js Jam 2021
Tags: gamedev, webmonetization, javascript, html
Published: 2021-03-29 14:49:35

---
title: Web Monetization category in Gamedev.js Jam 2021
published: true
date: 2021-03-29 00:00:00 UTC
tags: gamedev, webmonetization, javascript, html5
canonical_url: https://enclavegames.com/blog/gamedevjs-jam-2021-web-monetization/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjjo1nvshlhmkqtquhqj.png
---

We’re happy to announce the [Gamedev.js Jam 2021](https://gamedevjs.com/jam/2021/) that will run online between April 13th and 26th 2021 will have a **Web Monetization category** this year, with **cash prizes** and [Coil](https://coil.com/?ref=end3r) memberships for the best entries.

This extra category is optional, and unlike the regular voting based on criteria by other devs participating in the jam, **Web Monetization** will be judged by dedicated experts - those will be announced in the coming days.

There will also be extra prizes for this specific category, on top of the regular ones:

- 1st place: $300 cash
- 2nd place: $250 cash
- 3rd place: $200 cash
- 4th place: $150 cash
- 5th place: $100 cash

Beside cash, there will also be 10 [Coil](https://coil.com/?ref=end3r) memberships for 6 months each (worth $5 a month) for the ten best entries in the category. This means the total prize pool will be exactly $1300 ($1000 cash and $300 Coil memberships).

Make sure to [join the Jam via Itch.io](https://itch.io/jam/gamedevjs-2021), and remember that the platform supports **Web Monetization** , so on top of winning prizes, you will be able to earn money from people playing your games.

This is the second edition of the jam, after [Gamedev.js Jam 2020](https://end3r.com/blog/2020/05/gamedev-js-jam-2020-post-mortem/), but the first one with the Web Monetization category. There were, however, two editions of the [Web Monetization category in js13kGames competition](https://js13kgames.com/webmonetization) that runs yearly since 2012.
How to change the permissions of a file asynchronously using Node.js?
Tags: node
Published: 2021-03-29 00:00:00

---
  title: How to change the permissions of a file asynchronously using Node.js?
  published: true
  tags: Nodejs
  date: Mon Mar 29 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-permissions-on-file-asynchronously-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-54cdf4c42b7839cf7a5b24374b4d25f9.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-permissions-on-file-asynchronously-nodejs)
  
To change permission on a file asynchronously, you can use the `chmod()` function from the `fs` (filesystem) module in Node.js.

Let's say I have a file called `myFile.txt` and want to change the permission to `775`. Here you can use the `fs.chmod()` asynchronous method and pass:

- a path to the file as the first argument
- the mode or permissions to allow as the second argument such as the `775`. The permission can either be an octal number or a string. My choice is to go with the octal number as it is easy to understand. Also, make sure to prefix the `775` with `0o` which is the convention to write the octal number in Node.js and many other programming languages. To understand what the number `775` means [click here](#understand-permission)
- and a callback function as the third argument which will get invoked when the permissions are changed for that file. The callback function will receive an `error` as the argument if any.

It can be done like this,

```js
// require fs (filesystem) module
const fs = require("fs");

// change permission of myFile.txt to 775
fs.chmod("myFile.txt", 0o775, (error) => {
  // in-case of any errors
  if (error) {
    console.log(error);
    return;
  }

  // do other stuff
  console.log("Permissions are changed for the file!");
});
```

See the above code live in [repl.it](https://replit.com/@melvin2016/change-permissions-of-a-file-asynchronously-using-nodejs)

That's it 😃.

<a name="understand-permission"></a>

### Understand what the `775` octal number means?

You may be wondering what is `775`, it can be summarised like this:

- the first value `7` means to give `read`, `write` and `execute` permission to the owner of the file.
- the second value `7` means to give `read`, `write` and `execute` permissions for the group.
- the third value `5` means to give only `read` and `execute` permission for others.

So to put it simply the leftmost value is where we define the permission for the `owner`, then the permission for the `group`, and the permission for `others`.

### FULL LIST OF PERMISSION VALUES

- `7` - read, write, and execute
- `6` - read and write
- `5` - read and execute
- `4` - read only
- `3` - write and execute
- `2` - write only
- `1` - execute only
- `0` - no permission

### Feel free to share if you found this useful 😃.

---
How to do a postmortem without any preparation
Tags: postmortem, productivity, devops
Published: 2021-03-31 07:51:08

---
title: How to do a postmortem without any preparation
published: true
date: 2021-03-29 00:00:00 UTC
tags: postmortem, productivity, devops
canonical_url: https://jhall.io/archive/2021/03/29/how-to-do-a-postmortem-without-any-preparation/
---

There’s a good chance you’re familiar with the general concept of a postmortem: a meeting that happens after an incident, to determine root causes and remediation steps.

But if you’ve never done one before, the prospect can seem a bit daunting. This is why I’ve written the [Zero-prep Postmortem guide](https://jhall.io/posts/zero-prep-postmortem). It’s written with the intention of being followed the first time you read it. That is, if you find yourself sitting in a conference room to do a postmortem, and you have no idea where to begin, you can just follow the guide as you read it, and conduct a useful postmortem with zero preparation.

Of course, if you have time to read it before hand, you’ll enter your postmortem with a better sense of the meeting, and can potentially get more out of it. But this is optional.

If you’ve never done a postmortem before, I encourage you to bookmark the page. The next time your team experiences an incident, you’ll be prepared to guide them through a successful postmortem.
Monetize your content with Coil
Tags: coil, monitize, pwa, web
Published: 2021-03-29 11:15:06

---
title: Monetize your content with Coil
published: true
date: 29/03/2021
tags: Coil,Monitize,PWA,web
canonical_url: https://www.elian.codes/blog/monitize-your-content-with-coil/
---

# Monetize your content with Coil

Ads are annoying and I would never place advertisements on my own website or blog. [Coil](https://coil.com) adds a new way to get paid for every second someone spends on your content.

Last week I published my backlog of blog posts over on [Dev.to](https://dev.to/elianvancutsem). Since then I got over 800 views and reads on my posts, which is awesome! While scrolling through some settings and extensions I came across an extension called Coil, which would micro-monetize my content. Doesn't hurt to try I thought to myself...

## What is Coil

Coil offers a subscription of $5 per month, Coil will then spend that $5 over the sites you visit that support web monetization. You can add support for web monetization on your own websites or blog by just adding the support header in the meta tags on your website (which I'll demonstrate below).

## Get paid by Coil

Coil will payout a little bit roughly every second spent on you monetized content. Great, but how do I add support to my website? You can read the full docs on it [here](https://coil.com/creator), but it isn't really that hard. To get your pointer is easy, but to explain that here would take too long. Read the guide on that [here](https://developers.coil.com/#Example)

It comes down to getting your payment pointer and adding it to your site like the following:

```
<html>
  <head>
    <meta name="monetization" content="$ilp.uphold.com/gH9RGFW9ijRA">
  </head>
</html>

```

Of course, it's also not that hard to add it in something like [Nuxt](https://nuxtjs.org) where you don't have access to a static HTML file:

```
// nuxt.config.js
 head: {
    title: 'Elian Van Cutsem',
    htmlAttrs: {
      //
    },
    meta: [
      { charset: 'utf-8' },
      { name: "monetization", content: "$ilp.uphold.com/gH9RGFW9ijRA" },
      { hid: 'description', name: 'description', content: 'Elian Van Cutsem' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],
  },

```

Easy money, right!

Oh yes, you shouldn't be scared to keep the pointer secret. It will show up in the browser anyway and will always point to your wallet, so don't worry that someone will steal your pointer.
[New Feature] JavaScript Nullish coalescing operator (??)
Tags: javascript
Published: 2021-03-28 23:40:50

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
This can be contrasted with the logical OR (||) operator, which returns the right-hand side operand if the left operand is any falsy value, not only null or undefined. In other words, if you use || to provide some default value to another variable foo, you may encounter unexpected behaviors if you consider some falsy values as usable (e.g., '' or 0). See below for more examples.
The nullish coalescing operator has the fifth-lowest operator precedence, directly lower than || and directly higher than the conditional (ternary) operator.
#javascriptdevelopers
#javascript
#vanillajs
Why use Web Components?
Published: 2021-03-28 23:23:59

Component structured web pages are nothing new in 2021, yet you can still find tons of websites and content management systems not taking advantage of all their benefits. Today, I will be going over why large companies should start using web components to build their sites, and the major benefits they provide.

## Shadow DOM
Web components use the Shadow DOM to separate the document model for component from the rest of the DOM it is in. It works similarly to a video element or iframe where the element's attributes and CSS can't be changed by the rest of the page, and likewise, it's own attributes can't change the rest of the page. This is useful for large companies as they have thousands of developers who are all creating their own pages and components. If you want to interchangeably use components on a page, you won't need to worry about messing up the styling of the rest of the page.

## Ease of Use
Although there are some new standards and practices to learn, once you're up and running, you can simply add or create new custom elements to your page with ease. Once a custom element has been published, you can add it into the top of your HTML page with a script tag using the module attribute. This means you don't have to worry about anything going on under the hood, and you don't need a build sequence to use the element. You can simply add it and start running with it. This is especially huge for large companies, as anyone can publish a custom element like a standard logo for their company and then everyone who needs to use the logo on a page just adds the custom HTML to their page after initializing the module. 

## Custom Elements don't rely on huge projects
This is a fairly straightforward point, but it seems like most people don't take into account how big of a deal this can be. Many web development frameworks and projects can have version breaking changes that sometimes require completely rewriting your system. On top of this you usually need other tooling to help keep your component versions consistent across large sites. With custom elements, you're creating everything with mostly vanilla JS, and you're not going to rely on companies that create frameworks like React or Angular. This is important for large companies who have many developers making different sites, as a single change won't break everything. You can also use different methods for making sure all of your custom elements are running the correct versions.

As you can see, there's some major benefits to using web components. It's important that these standards continue to be adopted by smaller players in the web development community, so that we can continue to build a future web where components are easily shared and work for free.

## Video Demo
{% youtube zYVV5Ei6YVw %}
Core web vitals
Published: 2021-03-28 22:51:56

In 2020 the Core Web Vitals are three metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). 

Each metric measures a different aspect of user experience: **LCP** measures perceived load speed and marks the point in the page load timeline when the page's main content has likely loaded.

**FID** measures responsiveness and quantifies the experience users feel when trying to first interact with the page; and **CLS** measures visual stability and quantifies the amount of unexpected layout shift of visible page content.

Each Core Web Vitals metric has associated thresholds, which categorize performance as either "good", "needs improvement", or "poor"

Largest Contentful Paint: 
* Good: <2500ms
* Poor: >4000ms
* Percentile: 75

First Input Delay:
* Good: <100ms
* Poor: >300ms
* Percentile: 75

Cumulative Layout Shift:
* Good: <0.1
* Poor: >0.25
* Percentile: 75

Additionally, to classify the overall performance of a page or site, google uses the 75th percentile value of all page views to that page or site. In other words, if at least 75 percent of page views to a site meet the "good" threshold, the site is classified as having "good" performance for that metric. Conversely, if at least 25 percent of page views meet the "poor" threshold, the site is classified as having "poor" performance. So, for example, a 75th percentile LCP of 2 seconds is classified as "good", while a 75th percentile LCP of 5 seconds is classified as "poor".
How to change the baseUrl via command line with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-03-28 22:43:14

## Learn a simple technique to perform automated tests in different environments, overwriting the Cypress configuration

Resuming the series "**Pinches of Cypress**", I decided to bring a simple but recurring theme in discussion forums about testing automation.

Imagine that you need to run the same set of **end-to-end tests** against a local development environment, in a staging environment, and then in production.

Let's say the URLs for the environments are as follows:

- http://localhost:8000
- https://example.com/my-app-staging
- https://example.com/my-app

And in the **Cypress** settings file, the `baseUrl` property has the value `http://localhost:8000`. That is, it points to the local development environment.

In the `package.json` file, we could have the following scripts:

```json
"scripts": {
  "test": "cypress run",
  "test:staging": "cypress run --config baseUrl=https://example.com/my-app-staging",
  "test:prod": "cypress run --config baseUrl=https://example.com/my-app"
}
```

Finally, at the terminal, or even in a **continuous integration pipeline**, execute the following commands to run the tests against the different environments.

- `npm test` (or `npm t` - short version) - to run tests against the local development environment
- `npm run test:staging ` - to run the tests against the staging environment
- and `npm run test:prod` - to run the tests in production

That's it!

And just as `baseUrl` can be overwritten, so can other configurations.

___

Tell me, what else would you like to see in the series "**Pinches of Cypress**"?

___

This post was originally published in Portuguese on the [**Talking About Testing**](https://talkingabouttesting.com/2021/03/26/como-mudar-a-baseurl-via-linha-de-comando-com-cypress/) blog.
___


Would you like to learn about **test automation with Cypress**? I was hoping you could get to know my online courses on [**Udemy**](https://udemy.com/user/walmyr). Happy testing! 🎉
Migrate phone number to 10 digits Côte d'Ivoire in JavaScript
Published: 2021-03-28 22:25:19

Something very interesting on sunday coding,
I solved my personal problem by translating ARTCI  project PNN into  javascript.
https://github.com/aurellemeless/cipnn/tree/main
I can now by the web migrate my Côte d'Ivoire contacts.
You can check the repo and add you contributions. comments and commits are welcome.