teleren/devto huggingface dataset:
Comments on Ajax and WebSocket
Tags: javascript, webdev, beginners
Published: 2021-03-13 14:08:42

Hi, everyone!
This post is for my previous post 'Two ways to post data without reloading'. The contents written there are very nice and/or curious. All the techniques are correct. However, I have overcome troubles and difficulties and have learned a lot of new knowledges since I have posted it. I introduce you some new ideas.

Let's start with WebSocket.
In the previous post, we used a *dummy* span to emit a message to a specific person. Namely, a message is emitted to everyone through the dummy span. But the span is not displayed with CSS 'display:none'. And then the message is copied to a specific person.

I noticed a more simple way. It is to use a *global variable*.
```javascript
var message;
socket.on('message receive', (msg) => {
    message = msg;
});
```
In this way, the variable *msg* is substituted for the variable *message* and the *message* is *locally* displayed.
The point is, in WebSocket, the examle above is Socket.io, *all things* written within the function of 'socket.on' are globally emitted. On the one hand, even if the message goes through inside 'socket.on', it is locally displayed if it goes outside that.
You can use this way for both the client- and the server- sides.

Next, I comment on the difference between Ajax and WebSocket.
One is, of course, Ajax is always locally posted and on the one hand, WebSocket is normally globally emitted.
This means that Ajax doesn't need to use the technique above on the server-side.
Actually, NOT 'doesn't need to use', BUT 'cannot use'. This is (one of )the difference(s) between Ajax and WebSocket!
Namely, if you sent a message "Hello" using Ajax POST, the code on the server-side
```javascript
var message;
app.post('/ajaxpost' (req, res) => {
    message = req.body.message;
    console.log("A: " + message);
});
console.log("B: " + message);
```
returns 'A: Hello' and 'B: undefined'.
Well, above is the example of Express.js.
So, Ajax is *always* locally. But if WebSocket, you can.

Safe Journey!
Logical assignment operators in JavaScript
Tags: javascript, discuss
Published: 2021-03-13 13:49:04

---
title: Logical assignment operators in JavaScript
published: true
description: I created a video about ES2021's new features
tags: #javascript #discussion
cover_image: https://i.ytimg.com/vi/Fq-ewX2Ma50/maxresdefault.jpg
---

I just created a video on YouTube about logical assignment operators.

This time, I tried to keep some of the "bad takes" and go with an edutainment video instead of just explaining about the concept.

I'd love to know what you think!

[Here's the video](https://www.youtube.com/watch?v=Fq-ewX2Ma50)
Crud Table In Angular Material With Local Storage(edit/save/delete)
Tags: angular, css, javascript, webdev
Published: 2021-03-13 13:48:40

In this crud, we simply used an angular material table component. Here we used button components to make an action in the particular table row for update data or delete entire data.

We used local storage to store our new data or changes with the help of input fields. here we also used keyup method to show input values in the console. Also, we use the JSON parameter for pass values in input fields. In this crud, we used to edit, save and delete functions and also used stringify for exchange data to input to table.


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/crud-table-in-angular-material-with-local-storageedit-save-delete/)
Study of Html5 for Beginners - Part 1
Tags: html, webdev, beginners, codenewbie
Published: 2021-03-13 13:36:42

Hey! I hope everyone is okay and doing great with their activities.
Today I am going to discuss with all the beginners who are learning about front end with html5 and css3, I am sharing some basics about html5 that may help you.

So first of all What is <strong>Html</strong>?

It is a <strong><q>Hypertext Markup language</q></strong> and the primary language for developing web pages.

Now, What is <b>Html5</b>, and how it is different compare to HTML?

well, the answer is <q>Html5 is the new evolution and standard of Html that define new technologies with new functionalities with a markup language with Internet technology</q>.
1: It defines the structure of the web page
2: It consists of a series of elements represented by tags.
3: It tells the browser how to display the content
4: Browsers do not display the HTML tags, but we use them to render the content of the page.

<h2>Basics Tag in Html5:</h2>
![Tags of html5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymuanob9vfvkzcdwu3jr.PNG)



<h2>Benefits of Html5:</h2>
1: It supports Video and audio.
2: Display clean content on the web page with the use of advanced semantics.
3:It contains storage features like Databases, application cache, and web storage.
4: This new version helps us to write descriptive and semantic code clearly.
5:It has javascript web worker API, which allows browser interface and application to run in multiple threads.

These are the 5 basic benefits of html5 but you can find more at https://dzone.com/articles/top-10-major-benefits-of-html-5

I will talk about the Html5 elements and will look deep into the elements and use them on our document to see how they work to manage the web page content.

<i style="color:orange;">Take Care, Bye Bye</i>

<h3>Resources:</h3>
https://dzone.com/articles/top-10-major-benefits-of-html-5
https://www.w3schools.com/
Vuejs dynamic components
Tags: vue, html, beginners, javascript
Published: 2021-03-13 13:21:19

Vue dynamic components enable users to switch between two or more components and even retain the state of data when switching back to the initial component.

###Some use cases are as follows:
 * Show or hide nested components based on the application state.
 * Tabbed interface like bootstrap tab pill.
 * You can even achieve router functionality without using the Vue router **(not recommended for large projects)**. For eg. on click of the home link, we can load the home component dynamically.

###Declaring a dynamic component:

Vue provides a special element to place dynamic components called **'component'**. You can pass props too.

**Syntax:**
```
<component v-bind:is=”currentComponent” :prop1='foo' :prop2='bar'></component>
```
Here **currentComponent** is the data property that returns the component name which needs to be mounted.

To maintain the state of the data object of components while switching between them we can use a special element called **'keep-alive'**.

**Syntax:**
```
<keep-alive>
      <component v-bind:is="currentComponent" :prop1='foo' :prop2='bar'/>
</keep-alive>
```

###Full example:
```
<template>
  <div id="app">
    <keep-alive>
      <component v-bind:is="currentComponent" />
    </keep-alive>
    <button v-on:click="mountOne">One</button>
    <button v-on:click="mountTwo">Two</button>
  </div>
</template>
<script>
import One from './components/One.vue'
import Two from './components/Two.vue'
import Three from './components/Three.vue'
export default {
  name: 'app',
  components: {
    One,
     Two
  },
  data (){
    return {
      currentComponent:'Three'
    }
  },
  methods: {
	mountOne(){
		this.currentComponent = 'One';
	},
	mountTwo(){
		this.currentComponent = 'Two';
	}
  }
}
</script>
```
Create first bank APP
Tags: tailwindcss, nextjs, react, lovereact
Published: 2021-03-13 13:08:22

Hi, friends!
It's my first post in DEV Community and first prictice in English.

About me.
I'm young web developer, now I work in thin middle position in Top-10 Russian IT company. But I like write new project and lern new package.

APP
My favor choise in React family packages is Next.JS, Vercel company workers done very good prod framework. I like file-system routing, static generation and more rules in this technology. In 2020 more time listen at my teammates about TailwindCSS, then was time to choise CSS framework I take this.

Why I create bank app? I love finance scope in this you have write personal accaunt, use insurance, stocks , news and more API's.

I watch tinkoff Bank in Russia and inspire me to work.

Sorry, if I don't interesting writter. But I learn and take experience in English.
Thx.
Tracking Database Changes in Django
Tags: django, database
Published: 2021-03-13 13:04:46

First, the credit of the cover photo is for https://matomo.org/

When working in mission-critical applications, it is critical to know when and how an object (DB row) got here. 

For that, we created [django-model-tracker](https://github.com/mkalioby/ModelTracker) a Django application that handle tracking Django Models changes with the username of the user who did the change, then the admin team can view the changes and restore the object to an older state.


## Installation 
1. Install the package from pip
    `pip install django-model-tracker`
1. In the `settings.py` add ModelTracker to INSTALLED_APPS.
    ```python
INSTALLED_APPS = (
     '....',
    'ModelTracker',
    '....'
    )
```
1. Run the migrations for  the application 
   `python manage.py migrate ModelTracker`

## Tracking your models

To track a model, you need to change the inheritance from `models.Model` to `ModelTracker.Tracker` e.g 
```python
from ModelTracker import Tracker
class Employee(Tracker.ModelTracker):
    name=models.CharField(max_length=255)
    ....
```
When you save an Employee object, you can pass the username as follows
```python
emp=Employee()
emp.save(request.user.username)
```
Notes: 
1. If you don't pass a username, ModelTracker will check pick the username from a ModelTracker middleware `(ModelTracker.middleware.ModelTrackerMiddleware)`
1. You can pass username as `None` to skip saving the tracking info.
1. The username is a string so you can give names for the management commands as you like.
1. There is second optional parameter which `event_name` which can be used a tag the change.

This is a quick tour for `django-model-tracker`, you can find more information on the [GitHub Repo](https://github.com/mkalioby/ModelTracker)
When writing code ...keep it simple!
Tags: codenewbie, codereview, codequality
Published: 2021-03-13 13:04:32

I'm tired of people thinking that writing code is for geniuses.
The main goal is to translate an idea into a working program. That's it. What you add to that is just to show off.
Even if you are a genius, you can't run an entire company by yourself. 
Keep in mind that not everyone who will work with you has the same level of understanding as you.
Keep it simple. 
- The Idea
- The task
- The algorithm
- The code

The funny thing is that simple code programs always work well.
Have a nice weekend
Creating a Twitter Bot with Go
Tags: go, twitter, tutorial, github
Published: 2021-03-13 13:02:55

I keep experimenting with go and bots, so this week I decided to create a Twitter bot. It's not the typical bot that just publishes things or does some scraping, this one will react to mentions; each time someone mentions the bot, it will reply with a "hello". This is possible through the [Account Activity API](https://developer.twitter.com/en/docs/twitter-api/enterprise/account-activity-api/overview) of Twitter, which will call our service for every new event related to our bot.

## Brief explanation

The code is pretty simple and straightforward, so I will not get into too many details; there are 3 endpoints on our server:

### POST `/webhook/twitter`

This is where the behavior of our bot lives. So, in my case is only replying with "hello", but here is where you would make any customization in case you clone/fork it.

### GET `/webhook/twitter`

For security reasons, Twitter requires us to have an endpoint that will solve a CRC request. So we follow [Twitter guidelines](https://developer.twitter.com/en/docs/twitter-api/enterprise/account-activity-api/guides/securing-webhooks) and that's what this endpoint is doing.

### POST/GET... `/`

Nothing fancy. Just returning "Server is up and running" for you to make sure that the *server is up and running*.

## Fork it, clone it, use it!

Feel free to [clone/fork the repo](https://github.com/JosemyDuarte/TwitterGoBot) and customize it to your need. You will find instructions to deploy it on [Heroku](https://heroku.com/) or even try it on your machine if you want.
What is rimraf and how to use it in Node.js
Tags: beginners, node, javascript, codenewbie
Published: 2021-03-13 13:00:38

The `rimraf` command is an alternative to the Linux command `rm -rf`. It allows you to do deep recursive deletion of files and folders.

## Global `rimraf` installation

You can install `rimraf` globally using `npm`. It’s a common module, so you can install it on any operating system that supports `npm`. Windows, Linux, macOS - you shouldn’t have any issues here.

```shell
> npm install rimraf --global
```

Now you can use the command `rimraf` from the command line.

```shell
> rimraf ./node_modules
```

Such a call will delete the directory `node_modules` and all its content.

## Using rimraf in the Node.js project

Also, you can save `rimraf` in your current Node.js project and use it in JavaScript code.

```shell
> npm install rimraf --save
```

This becomes handy when you need to delete some data that became obsolete.

```javascript
import rimraf from 'rimraf';

// ...
// ...
// ...

.finally(() => {
        rimraf(`./${userIdFolder}/`, () => console.log(`DELETED ./${userIdFolder}/`));
      });
```

Such a call can be attached to the Promise chain and will delete users' data when the processing is over and we don’t need it anymore.

[Learn Full Stack JavaScript](https://js.coderslang.com)
Daily Developer Jokes - Saturday, Mar 13, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-03-13 13:00:12

---
title: "Daily Developer Jokes - Saturday, Mar 13, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Mar%2013%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258f2759b6.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*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 did the server say to his client who was having a bad day?

___A:___ Everything's going to be 200
 -->
Big Data, What's the Big Deal
Tags: datascience, bigdata
Published: 2021-03-13 12:50:54

#What is Big Data?
A huge amount of data is being generated on daily basis from different devices connected through internet. This data is being stored mostly in clouds by businesses and they use this data to enhance their business activity.

#How big is Big Data?
As of 2021 our entire digital universe is estimated to be more than 44 zettabytes of data and almost 2.5 quintillion bytes(**A quintillion is a million times a trillion**) of data are produced by humans every day. It is expected that *463 exabytes of data will be generated each day by humans as of 2025*.
It's huge right? Even I am in astonishment, as I am writing this.
It is even more interesting to know that almost 90% of the total data has been generated in the last two years alone.

#What we do with these data?
Well well well!! hold your breath.
What if I told you that the data generated out of your device is actually used to create an exact copy of yours? You won't believe right? But this is what it is. They track each and every move you make on internet and your each action is stored in the form of raw data. Data Scientists use these data and shape up a human behavior exactly like you and this is know as Data modeling. Then businesses use these models to manipulate you through different means, be it notifications, ad, suggestions etc.

But, not everything businesses does are bad. In fact majority of the cases are for greater good of humankind. One such example is the use of big data in Medical/Life sciences industries. In the year of 2020 the Corona Virus pandemic had disrupted every possible thing human can think of except internet. Medical industries worked closely with the governments and Hospitals across the world to ensure the track of the rising COVID cases. The data generated by the Hospitals were analyzed and industries started predicting which are the places that needs special attention. Data from all the COVID victims who were admitted in hospitals were collected and efforts were being made on how to detect pattern among the various COVID cases, how to minimize the spread of virus, for what age group the virus is affecting more, in which climate the virus grows stronger and so on. While medical teams were working day and night in treating people and taking care of their immunity power, tech industries were busy getting the data together to help people in every way possible. Even, while making the COVID Vaccine the test results and side effects of each volunteers were recorded in the form of data and were analyzed by various healthcare professionals across the world to improve the quality of vaccine.

####If you got some interest in Big Data and want to know more, check out these links
1. https://www.sas.com/en_in/insights/big-data/what-is-big-data.html

2. https://www.ibm.com/in-en/analytics/hadoop/big-data-analytics
eloquent relationships in 8 pics
Tags: laravel, php, webdev
Published: 2021-03-13 12:23:34

here's the laravel eloquent relationships in simple example([from docs](https://laravel.com/docs/8.x/eloquent-relationships)).

1- one-to-one
![one-to-one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cctic2gjkeb88astqvi3.png)
2- one-to-many
![one-to-many](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op0bfd4coutqk3cf6yms.png)
3- many-to-many
![many-to-many](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itsnwpkiwxcdvd0k5qxu.png)
4- has-one-through
![has-one-through](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcr62h2nxkuu69lcblkm.png)
5- has-many-through
![has-many-through](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9693778m82y5wo08j6n4.png)
6- one-to-one-polymorphic
![one-to-one-polymorphic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwn6bmaidw11rrk6g3m5.png)
7- one-to-many-polymorphic
![one-to-many-polymorphic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adff4o3hcghsigknk16v.png)
8- Many-to-many-polymorphic
![Many-to-many-polymorphic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/befiomn4w37dheg1p674.png)

## edit
9- has-one-of-many
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iafvxbx5hi7g2ha5l1m6.png)
Why Supernal is a Failure
Tags: node, javascript, badcode
Published: 2021-03-13 12:19:57

I've released an announcement to my staff over at inkthought labs internally why I think that my 2 projects branded under inkthought labs are failures. 

Giving some context to people who don't know what inkthought labs or the project is. Supernal is also a Discord bot with the concept of a non-bloated and fast solution to Discord tasks.   

Here's an excerpt:  

> Supernal a bloated piece of s***. I'm astonished that I have hacked together such an unoptimised bot.

Let's talk about code bloat. In Supernal, this is the reminder function that executes every 5 seconds. It utilises a Mongoose "cursor" and a for loop, which basically loads all the documents to cache, and allows you to go through them one by one. Kind of like tabs in your browser.  

![Code Image](https://cdn.discordapp.com/attachments/804938313215246376/806817584908468244/carbon7.png)  

Already looking bloated.  

Over 30 lines just for this.  

Plus, it's located in the main file.  

This is an unscalable solution to check a MongoDB database, which is not even located locally.  

In Supernal code, there are a lot of lines to even process a command. That's why the ping is high, about a second to even process a command.  

Although the project was bootstrapped with [create-discord-app](https://github.com/DevSnowflake/create-discord-app), I've since then added all kinds of junk to the main file, causing slow response speed. The "message" event runs through tons of checks - including whether you are blacklisted from using the bot and others. This queries a database, which again is async, which takes time. This completely slows down the process.  

What can I do to solve this?  

Perhaps by reducing the number of database queries. But then I'm not quite sure what to do with the reminder function. (Let me know in the comments). I could also fix the blacklist and prefix database query issue by using loading to the cache. 

Now, the bot has detached from the original idea of a non-bloat.  

I'll talk about my other bot in another article. See you then.
5 Tips for Newbies in Software Engineering 
Tags: codenewbie, webdev, career, computerscience
Published: 2021-03-13 12:15:26

Everyone wants to have a good job!

❓ But do you know the competition is getting harder day-by-day?

So...

## What do you need to do?

You need to STAND OUT!

### What does this mean to you as a software engineer?

<br />

## 📚 Work on your concepts: 

Data Structure & Algorithms, System Design, Ins and Outs of the language you are working on

## ⭐ Open-source contributions:

Start contributing to the open-source projects, they'll give you an idea of the things in the real-world

## 📁 Have a good portfolio: 

Work on having some good projects in your portfolio, it will add value to your profile overall

## 🧑‍🤝‍🧑 Join communities:

Join software communities around you. It'll help you network with people, which even may help you land a job!

## 🔗 Build meaningful connections: 

Stay humble and help others. It'll help you build meaningful and long-lasting connections.

If you work on these 5 areas, it'll help you a lot in the long run.

🧐What else would you like to add?
WYSIWYG editor for react js
Tags: help, react
Published: 2021-03-13 12:03:32

### I am making a blog using react js but can't find a WYSIWYG editor.
###### I have found some but there are some issues:-

1. Draft.js: Don't know where to start
2. React-Quill: can't add plugins for image resize, embed, auto-link, and many more
3. Braft Editor: no plugin for embeds like tweets or GitHub gist
4. TinyMCE: just started exploring it
Mozenda Vs. Proxies API
Published: 2021-03-13 11:59:47

The world of web scraping is varied and complex, and Proxies API sits at one of the most crucial junctions. They are allowing web scrapers/crawlers to bypass IP blocks by using a single API endpoint to access our 20 million-plus high-speed proxies on rotation.
One of the questions we get frequently is how we are different from services like OctoParse or Diffbot. Many times it is like comparing Apples and Oranges. Still, when we send this comparison table to our customer's developer team, their CXO, their marketing, or SEO team, they typically get it quite quickly if we are a convenient service or not.

So here is how we are different from Mozenda.

Mozenda competes with Diffbot in the enterprise space. With Mozenda, you can scrape text, images, pdf, and other content using a simple point and click feature.

It allows the export of data in a variety of formats like TSV, CSV, XML, XLSX, or JSON or through their API.