teleren/devto huggingface dataset:
Features To Look Out For In Future JS Versions
Tags: javascript
Published: 2021-08-08 07:03:38

I'm am sooooo excited... some of my favourite typescript features are on the horizon. So without further ado, let's get started


###Class Fields
Class fields include private methods and accessors(like `get` & `set`), public and private instance fields, static class fields and private static methods. Let's look at them:

1. Private Methods & Fields

```javascript
class Man {
  // Private Field
  #name = '';

  // Private Getter
  get #x() {
    return #xValue; 
  }
  
  // Private Setter
  set #x(value) {
    this.#xValue = value;
  }

  // Private Method
  #clicked() {
    this.#x++;
  }

  constructor(name) {
    this.name = name;
  }

}
```

2. Static Private Methods & Fields
Just like we have saw private instance fields and methods earlier, we can do the same for `static` fields & methods.

```javascript
class ColorFinder {
  static #red = "#ff0000";
  static #green = "#00ff00";
  static #blue = "#0000ff";
  
  static colorName(name) {
    switch (name) {
      case "red": return ColorFinder.#red;
      case "blue": return ColorFinder.#blue;
      case "green": return ColorFinder.#green;
      default: throw new RangeError("unknown color");
    }
  }
 
}
```

###Top Level Await
I bet most of us have used `async` IIFEs(Immediately Invoked Function Expression) a.k.a IIAFEs for using `async/await` in the top level of a module in this fashion:

```javascript
(async () => {
  // Async code
  await axios.post('https://xyz.com');
})()
```

Using this, we can simplify this code to:

```javascript
// That's it... no catch!
await axios.post('https://xyz.com');
```

That's it for this post! I hope you liked it. Checkout my [twitter] (https://twitter.com/akashshyam11) where I post tips, tricks and memes for developers. Bye for now 🤘
Framework VS Library
Tags: beginners, todayilearned, programming
Published: 2021-08-08 06:52:39

Let us start with the similarity between the two that is they both are *reusable code* written to solve a common problem and make sure the code is DRY. Assume some developer who encountered a particular problem with the program and realized that it is a very common issue and requires a lot of time and effort to resolve, so he created a library or a framework to solve the issue once and for all. 

Now to the main difference between the two can be explained with the term *Inversion of Control* (IoC) which simply means who controls who during the development process or in simpler words it defines the relationship between the library, framework, and code.

![Inversion of control](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2oqnolebf0e2nonss8l.jpeg)

### Code Controls Library

A piece of code that you require multiple times, but you must use the library to keep your code DRY. Most programming languages support libraries like React in the case of JavaScript. With a library, you can choose where to use it in your code and adjust it according to your code.

Compare this library to an actual library where you can go and pick up any book that you want and read it. In the same way, you can choose any library that suits your need and use it in your code by calling specific functions.

### Framework Controls Code

A framework defines the architecture for your program and uses the code when needed. It is a collection of libraries that work together. Angular is an example of a JavaScript framework. 
A framework provides most tools required to build an application and tells you where to put your code. 

We can understand it by thinking of a blueprint for a building as a framework. The blueprint is how the building is planned to be constructed and the people who are going to live in it have to adjust according to it. 

Basically, it controls your code which means it is in charge.

### To sum it up

There may be other small differences between the two but the main difference we need to know is the inversion of control i.e. **who controls who**.

* Code controls library 
* Framework controls code
About lazyness, automation, types and functional languages
Tags: opinion, functional, types, elm
Published: 2021-08-08 06:03:38

There is that famous quote attributed to Bill Gates that says: **"I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it."**

I think it is a stretch, but it makes sense, I guess. The term _lazy_ is a little too much and could be replaced by "person that optimizes its time".

I'm not saying on the workaholic sense or productivity freak. I'm talking about the person that wants to use their time most efficiently at times. Avoiding repetitive tasks and trying not to worry about things that can be taken care of in an easier way.

Automating a task, making it easier to execute, delegating worries, all this looks like a way to value and enrich time.

Elm, for instance, is a very restrict programming language. It is strongly typed, immutable, and has controlled side effects. What it demands when you develop inside these constraints, pays off by guaranteeing the correctness of your software and the tranquility of not having runtime errors.

When I use Elm it may look like it is hard to follow its rules and limitations, but I'm choosing the path of least resistance there. After all the computer can aid me to write better software without overloading my brain. If it can perform this kind of task (by using static analysis for instance) I don't have to waste my time and mental bandwidth with it.

Elm is one example but there are other languages out there like Haskell, Rust, PureScript, and many more.

When choosing a tool you can value its popularity, expressiveness, who is funding it, etc. But for me, I will always choose to value my time when I can.
Learn Materialize-CSS by building an eCommerce site.
Tags: react, javascript, firebase, css
Published: 2021-08-08 05:58:55

#This is an e-commerce website for selling gym equipment online
1. Frontend is deployed on Firebase
2. For backend also used firebase
3. Source code is uploaded on GitHub

### Live Preview : [Click Me](https://gym-equipment-b8ac7.web.app/)

###GitHub Repo : 
{% github Aman2221/GYM_ECOMMERCE %}
YouTube: https://youtu.be/J_R1cyrefM0
Learnings :
1. Firebase authentication.
2. How to add google Login.
3. react-context-API.
4. How to add admin login.
5. Materialize-CSS

if there are any errors, please consider sharing
Thank You❤️️❤️️
Database Management System: Introduction
Tags: computerscience, tutorial, dbms
Published: 2021-08-08 05:41:21

Database Management System (**DBMS**) is one of the core subjects in computer science. It deals with the storage, retrieval, modification, and deletion of *data.* 

Your favorite query language, *SQL*  plays a vital role here!

There are lots of interesting things to discuss in this subject, it is one of the easiest as well as an important subject. The only caveat is that sometimes, terminologies used in this subject can be daunting and hard to swallow 😅 

But worry not, I will explain things in the most simple manner possible. Let's start with some basic terms that you need to be familiar with,

## Basic Terms
![Image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgle6a68f03oyvjdleq8.jpg)
### Data

Any fact that can be recorded or stored. eg: text, numbers, images, videos, etc.

### Database

Collection of **related** data.

Traditionally, a database contains only text and numbers. fun fact, such databases are called *Traditional Database.*

There are different  types of databases,

1. Multimedia Database: to store videos, songs, etc. The best example is Youtube's Database.
2. Geographic Information System(GIS): to store data of interspace recorded by satellites and rockets.
3. Realtime Database: Databases that need to be updated frequently. For example , your favorite **firebase**.

### Database Management System (DBMS)

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

It a software used to define, construct and manipulate data.

> 💡 A good analogy: *database* is a **book** 📖 while *DBMS* is a **pen 🖋** and *data* is the **ink**.

DBMS acts as an **intermediary** between the *application* code and the *database*. It ensures specified constraints (restrictions) by not letting the application directly access the data inside the database.

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

### Database system

> ⚠ The terminology is loose in the sense Database system is referred to as DBMS usually.

Database System is Database + DBMS. For example, MySQL, PostgreSQL all are database systems. 

## Why not an Operating System for all of this?

A question might arise, why do we need DBMS at all? We already have O.S. which does a lot of stuff for us, why not this one too?

Simply put, this will make your system super slow a.k.a boot times will be horrible.

The reason is whenever we want to access the database, we will ask the operating system which will cause the O.S. to switch from user mode to kernel mode (overhead!) to make system calls like write, read, etc. This makes the entire process of even the data retrieval super slow!
Introducing animated-web-components
Tags: contributorswanted
Published: 2021-08-08 05:40:33

## TL;DR
Hello! I have recently began developing a library that uses web-components to wrap content and provide several basic animations. I am very excited and have big plans for the future, as I believe a lot of people can benefit from this. 

This is my first time doing a project of this kind, and I would like to grow a community around it, where other people can share their ideas and help me grow the project.

If you're interested, please check it out [here](https://github.com/edvilme/animated-web-components)

Any type of feedback, comments and everything is greatly appreciated :D

## A little backstory

Before the pandemic, I would often make my girlfriend (yup, I defied the programmer nature lol) hand-made popup greeting cards. I have always enjoyed the process of creating (be it programming, design and even origami), so I have a great time doing them. My girlfriend really likes them as well. 

However, when the pandemic started, it became increasingly more difficult for us to see each other often. While I could make a physical card and ship it to her house, I wanted to challenge myself into doing something different (I also find constantly receiving packages can become annoying, even if in good faith).

I decided to web versions of such cards, making them as dynamic and animated as possible. I have done a few, and each time I have had to "reinvent the wheel" by reimplementing, debugging and improving simple functionality (e.g., a simple typing animation can be more challenging than it seems. Think Regex challenging). 

I read about web-components and how they make it *super* easy to implement new functionlity. I thought there should be a way to implement such animations with such ease,
So I created one.
$100,000 giveaway for creators: #1 Kunming.io Fans & Subscriptions Contest
Published: 2021-08-08 05:39:41

![Kunming.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqbb74n9me158d2pozpb.png)

This is the First Kunming.io Fans & Subscriptions Contest and we welcome every member to join with this contest.  You will win a real cash award up to $50,000 if you are ranking in first place of this contest.  You can find out the details with the below  #1 Kunming.io Fans & Subscriptions Contest rank list.

## Who can join this contest and how much do I need to pay for this contest?
As you have sign up as a member/user with Kunming.io and publish some contents as a content creator and you can join this contest for free.

## What is a content creator?
A content creator is a professional who crafts digital media assets — text, images, zip files, video, or audio — for a specific audience. 

What skills do you need to become a content creator?
Primarily you’ll need excellent communication, relationship building, and storytelling chops. Learning SEO, mastering marketing on Kunming.io, and building a portfolio can all come in handy, though.

## How to become a content creator?
You need to build assets such as a decent-sized audience and a commendable body of work to become a sought after content creator in your niche. But it starts with honing your craft by creating something regularly and putting it out to your audience, then learning from the feedback you receive. 

## When the contest start and when it ends with date and time?
The contest will start at August 8, 2021 and end with December 31, 2021.

## How do I receive my cash prize if I rank in the list?
January 31, 2022, We will send the cash prize to your Paypal account or your bank account after confirmed about you have following Kunming.io Terms of use, Privacy Policy, Security Policy, No Spam, No Robots, etc.

## How do I win the contest?
Try to use your specialty, To publish some contents such as photos, videos, audios, zip files, texts and programming languages codes, etc. To collect your fans/subscribers as many as you can and provide first-hand exclusive and valuable information for your subscribers which allow them to subscribe your page as a paid subscription. And reach the contest Requirements  (Minimum Fans & Minimum Earnings), then you will win the contest and award cash prize.

## How do I get started?
Please sign in, go to your page, publish some contents and invite your friends to join as your subscribers which contents you publish is valuable and worth to subscribe for you . If you still do not have an account, you can [click this link](https://kunming.io/signup) and follow it to sign up one.

## More Questions?
Please add comments to ask with this post. Thank you!

## The Kunming.io Team

[Read More >>>](https://kunming.io/docs/post/1549)

![Kunming.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbjivdmta2nbq3syd5aq.png)
Managing global packages with Yarn
Published: 2021-08-08 02:40:02

``Yarn``是一个包管理工具，通常是用来维护一个项目（project）或者一个工作空间（workspace）需要用到的组件，当然如果安装在特殊目录下，并且设置运行命令的``PATH``指向这个目录，就可以实现全局安装组件或者命令的方法。

首先确认``Yarn``本身已经正常安装：

```
yarn --version
```

确认一下全局组件安装在哪个目录，之后对于全局组件的操作，一方面可以通过``yarn global``来操作，另外一种方式，其实也可以直接到这个目录操作。

```
yarn global dir
```

接下来我们以安装``hexo-cli``为例，先看看是否已经在本地安装，``yarn list``返回全部的结果，可能有点多，我们需要增加一个过滤条件。

```
yarn global list | grep "hexo"
cd `yarn global dir`
yarn why 'hexo-cli'
```

再判断这个组件的最新版本是多少，在``yarn info``后面增加第二个参数，就可以获取相应的属性：

```shell
yarn info hexo-cli version --silent
```

全局安装一个组件

```
yarn global add hexo-cli
```

全局卸载一个组件

```
yarn global remove hexo-cli
```

## 总结

全局安装组件的优点就是使用方便，而且多个项目共用组件减少空间占用，如果自己用是没有问题的，但如果是在项目中使用，就会出现使用版本不一致的问题，这个时候就要考虑放到project或者workspace中。
Symfony on steroids with NumberNine CMS
Tags: symfony, php, cms
Published: 2021-08-08 05:33:17

Web agencies and freelancers don't need to waste precious time on project setup and configuration anymore. With [NumberNine](https://numberninecms.com)'s installer, you'll be able to start working on a Symfony app in seconds.

Copy/paste this installation one-liner in your terminal, given that you have [Docker installed](https://www.docker.com/products/docker-desktop):

```bash
docker run --rm --pull=always -t -e HOST_PWD=$PWD \
    -v $PWD:/srv/app -v /var/run/docker.sock:/var/run/docker.sock \
    numberninecms/installer myproject
```

Boom! Done.

One minute later, even without any prior knowledge of Docker, here's what you get:

* The latest Symfony version (`symfony/web-skeleton`)
* The latest NumberNine version
* The latest PHP, MySQL, Nginx, Redis, Maildev and blackfire versions running as Docker containers
* A [PHP Docker container](https://numberninecms.com/developers/docker.html) with Cachetool,  Composer 2, APCu, Xdebug 3, make, and zsh
* A self-signed SSL certificate for `myproject.localhost` and HTTPS access
* A ready-to-use website with all CMS features

## Simplicity in mind

NumberNine is a CMS which focus on simplicity of use, both for the end-users and the developers. It automates most of the tedious steps of setting up a new Symfony project, while also easing the maintenance by the clients in charge of their content.

For instance:

* Have you ever used `MakerBundle` to create user, registration form, etc.?
* Have you ever created some CRUD controllers for your entities?
* Have you ever installed `VichUploaderBundle` or implemented file upload?

If you answered yes to any of these questions, you'll most probably find benefits using NumberNine. All these are core features.

What's more? It's still a Symfony app, which means that you can develop things that won't interfere with the CMS, the Symfony way. NumberNine acts like an additional CMS layer, so you get the best of both worlds.

## Some features

You'll find on [this page](https://numberninecms.com/developers/features.html) an exhaustive list of features, but the most notable are:

* Client-side image resizing with high quality downscaling algorithm
* Granular user management with capabilities assigned to roles
* WYSIWYG extensible page builder
* Shortcodes
* Relationships between entities
* Menu creation
* Easy Twig theming with inheritance (core -> theme -> app)

It's MIT license, totally free to use.

You can star it on Github if you like it.
{% github numberninecms/cms no-readme %}

The developer documentation is at [https://numberninecms.com](https://numberninecms.com).

## Bonus video trailer

{% youtube GcDZgwmVSSM %}


## Read more

{% post numberninecms/split-your-symfony-views-into-multiple-controllers-with-numbernine-cms-2nj0 %}
How much Dart is required to get started with Flutter development?
Tags: dart, flutter, beginners, vscode
Published: 2021-08-08 05:26:32

You want to be a **Flutter Developer**? If yes then this article is the best article for you. In this article, I will help you to get basic ideas about Dart and Flutter, then we will know about the concepts that will help us to *learn Dart faster* and to *get started with Flutter quickly*.

What we will cover?:-

     * What is Dart?
     * What is Flutter?
     * Why Flutter uses Dart?
     * How much Dart is required for Flutter development?

![Flutter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6xrernmyh4dkt9s3b0e.jpg)

## What is Dart?
**Dart** is a client-optimized programming language for apps on multiple platforms. It is developed by Google and is used to build apps for mobile, desktop, web, etc. It is an object-oriented, class-based, garbage collected programming language with C style syntax.

## What is Flutter?
**Flutter** is an open-source UI software development kit created by **Google**. It is a declarative UI framework for creating composable UI. It is generally used to **develop apps for Android, iOS, Mac, Windows, Linux, Google Fuschia, and also for web** from single code base.

## Why Flutter uses Dart?
Flutter uses Dart as Dart allows Flutter to avoid the need for a separate declarative layout language like JSX and XML. The layout of Dart is declarative and programmatic and it makes it easy for developers to read and visualise it very easily and effortlessly.

## How much Dart is required for Flutter development?
So finally after getting ideas about the Dart and Flutter now we will know about the Dart concepts that are required for Flutter development. To learn Dart faster just clear the following concepts. These concepts are enough to get started with Flutter development.

   * Variable, Data Types and Function
   * Control Flow and Exception
   * Classes and Generics
   * Operators, Asynchronous and Libraries

So these are the **Dart concepts that you need for Flutter Development**. Hope this blog article is helpful to you. This is my first article on Dev Community, please support me and find me on [Instagram](https://www.instagram.com/invisionchip/), [LinkedIn](https://www.linkedin.com/in/invisionchip/) and [GitHub](https://github.com/chipinvision).
How to Write TypeScript Interfaces in JSDoc Comments
Tags: typescript, jsdoc, javascript, interfaces
Published: 2021-08-08 05:19:17

> Updated 2023-07-23 to clarify that jsdoc comments support **object types**, not **interfaces**. Thanks to [Matt Pocock](https://twitter.com/mattpocockuk/status/1682059208412344326?s=20) for the pointer.

I like writing web apps without any build step, just vanilla `.js` files.  But I still like the type-checking that TypeScript provides.  Thankfully [TypeScript supports type-checking `.js` files via JSDoc comments](https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html).

But how do you write out interfaces without a `.ts` file? The tl;dr is you can write an object type in a JSDoc comment, or you can write an interface in a `.d.ts` file and import that into your `.js` file. Let's dig into each option.

## Interfaces in a .ts file

First, let's look at an example in a `.ts` file.

```ts
interface Address {
    street: string;
    city: string;
    zip: number;
}

interface Customer {
    name: sting;
    email: string;
    address: Address;
}
```

## Option 1: Object Types in a JSDoc comment

An [object type](https://www.typescriptlang.org/docs/handbook/2/objects.htm) isn't exactly an interface, but for most use cases it behaves the same way.

> The main difference is interfaces support [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) but object types do not.

Writing those same interfaces in a `.js` file would look like:

```js
/**
 * @typedef Address
 * @prop {string} street The street
 * @prop {string} city The City
 * @prop {number} zip The zip code
 *
 * @typedef Customer
 * @prop {string} name The Customer's name
 * @prop {string} email The Customer's email
 * @prop {Address} address The Customer's address
 */
```

And then you can apply that interface to an object using the `@type` annotation:

```js
/** @type {Customer} */
const theCustomer = { ... }
```

Boom :boom: now you've got type-checking and intellisense on your data model right in a vanilla `.js` file.

## Option 2: import interfaces from a .d.ts file

The other option to define interfaces is to put them in a `.d.ts` file and import that into you `.js` file.

```ts
// models.d.ts

export interface Address {
    street: string;
    city: string;
    zip: number;
}

export interface Customer {
    name: sting;
    email: string;
    address: Address;
}
```

And then in your `.js` file you can import those types:

```js
/**
 * @typedef { import("./models").Customer } Customer
 */

 /** @type {Customer} */
const theCustomer = { ... }
```

This is my preferred approach as I find writing types in `.d.ts` files to be more terse than writing types out in jsdoc comments. But I like having both options available to use interchangeably.

### Related Posts

- [Type Guards in Javascript Using JSDoc Comments](https://goulet.dev/posts/type-guard-in-jsdoc/)

> Hopefully you found this post helpful, if you have any questions you can find me [on Twitter](https://twitter.com/wes_goulet).
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 13
Tags: php, javascript, webdev, tutorial
Published: 2021-08-08 04:28:09

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will create account class

{% youtube jhzK3cwn-c8 %}

In this video,we will create a functionalities to validate email
{% youtube 0ue1840lKU4 %}

If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)