teleren/devto huggingface dataset:
CSS Variables
Published: 2022-01-08 09:32:36

Today, I came across an Hashnode article on CSS variables and realized I have quite forgotten a lot about CSS. This was among the first things I learned when I joined the tech world but I almost could not remember how to use CSS variables. How disappointing is the human memory!! 

What I learned: 
- You can create a global variable ( covers all sections of the page) or a scoped variable to a specific region eg. for a section or div. 

Here is the link to the codepen I did on the same. https://codepen.io/3sther-m/pen/eYGjqWm

Simple but its something new I learned; I step at a time.
How to set-up Rails Hotwire  live reload
Tags: rails, hotwire, javascript, tutorial
Published: 2022-01-08 09:25:31

1. [Install Gem](#1-install-gem)
2. [Run install script](#2-run-install-script)
3. [Listen to file changes](#3-listen-to-file-changes)


---


This tutorial will explore a modern way to [live-reload](https://github.com/kirillplatonov/hotwire-livereload) a rails app set-up with __css-bundling__ (tailwind) and __js-bundling__ (esbuild).

---

## 1. Install Gem

Add to `Gemfile`
```rb
group :development do
  gem "hotwire-livereload"
end
```

```bash
bundle install
```

---

## 2. Run install script

```bash
rails livereload:install
```

---

## 3. Listen to file changes

View, helpers, and assets files are listened for by [default](https://github.com/kirillplatonov/hotwire-livereload#configuration).

If you use rails's `css-bundling` and `js-bundling` gems, find the bundled JS and CSS file `app/builds`.

The app/builds folder includes:
- `app/builds/application.css`
- `app/builds/application.js`

An additional watch process is needed to re-build the JS and CSS file after changes (see [docs](https://github.com/rails/jsbundling-rails#javascript-bundling-for-rails)). Tailwind, for example, uses a Just-in-time compiler to only add classes to the CSS that are being used in your application. This requires specifying an additional path to listen for any (Just-in-time) changes.

```rb
# config/environments/development.rb

config.hotwire_livereload.listen_paths << Rails.root.join("app/assets/builds")
```
2nd day.
Published: 2022-01-08 08:55:57

2/365
No one...so only me, for now trust i write this second day report! wow.
**I have to be constant**
Yesterday i finish the scripting python module on tryhackme , and i watch a little part of a udemy's course, today i need make more , today i want finish the module about introduction to web hacking and finish the first 1-2 chapter of the course! i hope so!
the mood song of the day:  [Viva La Vida - Coldplay](https://www.youtube.com/watch?v=dvgZkm1xWPE&ab_channel=Coldplay)
#9 - Twin Prime CodeWars Kata (6 kyu)
Tags: javascript, tutorial, webdev, 100daysofcode
Published: 2022-01-08 08:43:13

##Instructions

A twin prime is a prime number that differs from another prime number by 2. Write a function named is_twin_prime which takes an int parameter and returns true if it is a twin prime, else false.

**Example:**
> given 5, which is prime
> 5+2=7 which is prime 
> 5-2=3 which is prime
> Hence, 5 has two prime twins and its a Twin Prime.

---

> given 7, which is prime
> 7-2=5 which is prime
> 7+2=9 which is not prime
> Hence, 7 has one prime twin, and its a Twin Prime.

---

> given 9, which is not prime 
> Hence, 9 is not a Twin Prime

---

> given 953 , which is prime
> 953-2=951 , which is not prime
> 953+2=955 , which is not prime 
> Hence, 953 is not a Twin Prime.

##My solution:

```javascript
function isTwinPrime(n){
  
function isPrime(x){     
      let d = x-1;
      while (d > 1){
        if ((x % d) == 0) return false;
        d--;
      }
      return x > 1
}

  if(!isPrime(n)) return false
  
  if(isPrime(n-2) || isPrime(n+2)){
    return true
  }
  
  return false
  
}

```

##Explanation
I started doing a function that took a number as a paremeter and looked if it is an prime number or not.

After that I used a conditional that checked if the original number is prime, if it's not it'll return false.

Then I used another conditional for checking if the number two numbers before or two numbers after the original number are primes, if any of those are primes, it returns true.

Else it returns false

Comment how would you solve this kata and why? 👇🤔

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/59b7ae14bf10a402d40000f3)
Build a Video Conference App from Scratch using WebRTC,Websocket,PHP +JS Day 2
Tags: webdev, webrtc, php, javascript
Published: 2022-01-08 08:39:40

In this video we'll cover how to set up websocket server

{% youtube A9kg3lpmsfs %}

In this video we'll cover how to create the Register Page

{% youtube -SmSJsdxKQs %}

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Inspired by the future: Vision UI Dashboard React (Open Source Version)
Tags: react, webdev, javascript, css
Published: 2022-01-08 08:36:56

Inspired by the future: Vision UI Dashboard React (Open Source Version).

An Open Source MUI Dashboard that comes with 70+ prebuilt innovative design blocks. Join the future with Vision UI.

https://simmmple.com/product/vision-ui-dashboard-react


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh4p3gop3c2i2qb722lz.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76e1jrgctjqfiibgwz27.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve47fl0fsa8xpeh9d94n.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbjvdw6zehxdc235hego.png)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fszli59okb04ssu0rvze.png)
(Solved): PhpStorm Terminal UnauthorizedAccess Error in Windows 10/11 
Tags: phpstorm, terminal, errors, vaahcli
Published: 2022-01-08 08:28:41

If you are receiving error similar to :
```sh
[...] cannot be loaded. The file [...] is not digitally signed. You cannot run this 
script on the current system. For more information about running scripts and setting execution policy, see about_Execution_Policies at
https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ vaah cms:t
+ ~~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

```


Simply run following command in the `phpstorm` `terminal`:

```
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
```
Football Prediction Site with Blog Functionality
Tags: atlashackathon
Published: 2022-01-08 08:26:25


### Overview of My Submission
The project is divided into two segments: the frontend and backend. They were essentially put into two repository: [The frontend](https://github.com/bonarhyme/rhymebet) and [The backend](https://github.com/bonarhyme/rhymebet-backend). 

The project is called rhymebet, it is an online football prediction site to help people make people place smarter bets.

### Submission Category: 
The category chosen is the fifth and it is "Choose Your Own Adventure"


### Link to Code

{% github https://github.com/bonarhyme/rhymebet-backend %} and {% github https://github.com/bonarhyme/rhymebet %}


### Additional Resources / Info

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ivh6ckflvxiifigkxva.PNG)
FM Whatsapp update 2022 - FmWhatsapp latest version
Published: 2022-01-08 08:00:53

FM Whatsapp is the latest rage in whatsapp updates by Facebook. It is basically a plugin app which adds some extra features to the original whatsapp App for Android phones.

Download FM Whatsapp today!

Everything you love about WhatsApp plus so much more.

FM Whatsapp is an extended version of WhatsApp Messenger modified specifically to be used with your Facebook account...The FM stand for Facebook Messenger so it will not work without being connected first to Facebook. There are multiple changes added but all you need to know that this app supports many country codes at once unlike other apps, This makes it unique and easier if you have contacts from different regions or just want to connect with friends around the world by knowing their region.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qez774j7v0by3uuf9v6.jpg)

FM Whatsapp has been update. This update includes bug fixes and performance improvements.

What are you waiting for? Download FM Whatsapp today!

Features of FM WhatsApp include:

- Send Read Receipts (70% battery saving)

- Custom notifications sounds per chat! - Ability to delete sent messages for everyone ! - Disable delivery reports! - Disable typing indicators ! - Ability to Forward More Media at Once ! - Ability to choose who can call you back when busy/away/don't answer + AutoReply custom status & ability to toggle the + send Auto Reply Messages only once! - Ability to change App theme from white or black with dark mode option! Get it now!!!

Note: Before downloading the app, please note that first you should un-install original whatsapp & facebook apps, And then install FM Whatsapp.

Also note that this app is not available in [fmwhatsappdownload.com](https://fmwhatsappdownload.com/) since its modified version of an original app made by WhatsApp Inc, So download it just from here. Enjoy!
What is a closure in Javascript?
Tags: javascript, java, script, programming
Published: 2023-04-20 17:35:13

---
title: What is a closure in Javascript?
published: true
date: 2022-01-08 08:19:51 UTC
tags: javascript, java, script, programming
canonical_url: https://shiva.hashnode.dev/what-is-a-closure-in-javascript
---

## Introduction

In JavaScript, internal and external functions exist, and internal functions can access local variables of external functions. Also, **even after the outer function is destroyed, the inner function can access the variables of the outer function.** Closures take advantage of this property. Let's look at an example.

**💡Function Example**

```
function outter() {
  let title = 'hello everyone';
  return function () {
    alert(title);
  };
}

inner = outter();
inner();

```

The above code defines the outer function , returns the function to the inner function , and stores the execution result of the outer function in the inner variable.

🔍 Example code execution result

```
hello everyone

```

When you run the code, a warning window 'hello everyone' is displayed as shown in the picture above. 'coding everybody' is the value contained in the title, which is a local variable of the external function. The properties of the closure that can be seen in the example above are

```
inner = outter();

```

In the above code, the outer function returns the inner function, even though the outer function is terminated.

```
inner();

```

Afterward, when the inner function is called, the title variable existing in the outer function can be accessed.

> In other words, the characteristic of closures is that not only can the external function containing the internal function be accessed but also the external function and local variables of the external function can be accessed through the internal function even after the external function is terminated.
Hello everyone,test my fist blog
Published: 2022-01-08 08:09:56

What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?
DOM guide for beginners #1
Tags: html, javascript
Published: 2022-01-08 07:46:33

## What is DOM?
DOM is a document object model which is created by browser while rendering html. In simple words from line `<!Doctype> to </html>` in a `HTML` file is DOM/document. It basically refer to as tree like structure of HTML. Html has a family like structure which includes ancestors, decedents, parents, children, grandchildren, great grandchildren and so on.  It is used to manipulate html by js.

## What are the things you should know before learning DOM?
`TAG` `ELEMENT` `ATTRIBUTE` `NODE`

## TAG
`<h1></h1>` --------------> This is tag

## ELEMENT
`<h1>.....any text....</h1>` ------------------> This is element

## ATTRIBUTE

- All HTML elements can have attributes
- Attributes provide additional information about elements
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name="value"

`<a href = "google.com" height:100px width:100px></a>` ----------->  href, height, width is attribute.

## NODE

Everything written in HTML is node. 



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pddodojqwte8741521lm.gif)
JWT in WordPress - Connect Mobile Apps with WordPress
Tags: wordpress, php, programming
Published: 2022-01-08 07:45:14

## What is Simple JWT Login?
Simple JWT Login is a **FREE** WordPress plugin that allows you to use a JWT on WordPress REST endpoints.


The main purpose of this plugin is to allow Mobile apps, or other websites to access the content from a WordPress website via REST endpoints in a secure way.


## Some Awesome Features.

- **AUTO LOGIN**: You are able to auto-login into a WordPress website with a JWT.
- **REGISTER USERS**: API endpoint that allows you to register new users in WordPress.
- **DELETE USERS**: Delete Users with JWT.
- **AUTHENTICATE USERS**: API endpoint to Generate a JWT, refresh JWT and invalidate JWT.
- **LIMIT ACCESS BY IP ADDRESS**: Limit access to Simple-JWT-Login only for specific IP addresses.
- **CREATE USERS WITH DIFFERENT ROLES**: You are able to create multiple users with different roles on the same endpoint.
- **INTEGRATES WELL WITH OTHER PLUGINS**: This plugin works well in combination with other plugins that extends the WordPRess REST API.
- **ALLOW JWT USAGE ON OTHER ENDPOINTS**: Add a JWT to requests for other api endpoints and you will act as an authenticated user.
- **PROTECT ENDPOINTS**: Protect endpoints for being accessed without a JWT. This way, you can limit the access to your endpoints only to authenticated users.
- **CORS SUPPORT**: CORS support for your API endpoints.
- **RESET PASSWORD**: You can request password change via API call.
- **CHANGE PASSWORD**: You can change users password with an API call.

## How the plugin looks like?

- **Plugin Dashboard**:
![Dashboard](https://github.com/nicumicle/simple-jwt-login/blob/master/wordpress.org/assets/screenshot-1.png?raw=true)

- **General Settings**
![General Settings](https://github.com/nicumicle/simple-jwt-login/blob/master/wordpress.org/assets/screenshot-2.png?raw=true)


## How to install the plugin?

Here’s how you install and activate the Simple-JWT-login plugin:

1. Go to the Plugins menu in WordPress and click Add New
2. Search for 'Simple JWT Login' and select Install Now
3. Activate the plugin when prompted

Or
1. Download the plugin from https://wordpress.org/plugins/simple-jwt-login.
2. Upload the zip file in WordPress
3. Activate the plugin

## SDK
Currently I've implemented only the PHP SDK, that can be found here: https://github.com/nicumicle/simple-jwt-login-client-php

I'm planning in the near feature to release a JS SDK.  

## Documentation
You can find more details about the plugin on https://simplejwtlogin.com

## Contribution
Any feedback is welcomed. Feel free to:
- create a topic on https://wordpress.org/support/plugin/simple-jwt-login/ 
- or create an issue on https://github.com/nicumicle/simple-jwt-login
How to fix “corrupt history file” in zsh
Tags: zsh
Published: 2022-01-08 07:38:20

I use Z shell or zsh in my computer. A few days ago i get error “corrupt history file”, so how to fix it, follow this step:

move to home directory
`cd ~`

move the .zsh_history file into another .zsh_history_old file
`mv .zsh_history .zsh_history_old`

write all printable strings into a new .zsh_history file
`strings .zsh_history_old > .zsh_history`

reload the history
`fc -R .zsh_history`
machine learning
Tags: machinelearning
Published: 2022-01-08 07:27:43

Machine learning has become a hot topic around the world today.
Machine learning has affected the world today and is advancing day by day and taking over technology.
If you are interested in learning the machine and its algorithms and applications, click on the link below
[https://bigpro1.com/en/machine-learning/](https://bigpro1.com/en/machine-learning/
)
AI Coding Language
Published: 2022-01-08 07:21:03

Artificial intelligence is here to stay and it's taking over more than just our jobs. Now, A.I. has its own coding language and experts predict that it will be ubiquitous in the next decade!

In this post we talk about why AI needs a specific programming language, what characteristics of an AI programming language we should expect to see, and some predictions for the future of this revolutionary technology.
The Better Way of Sending Data to the Backend
Tags: javascript, webdev, node, database
Published: 2022-01-08 07:11:03

If you are a front-end developer, who ever worked on picture uploading, video uploading or audio uploading to the backend, then you should know that uploaind these types of data is a slow process, and it even becomes laggy when a large data is being upload at once. 

When we want to upload a picture or audio to the backend, we can't just send it to the backend in their original format. Every picture or audio, has a binary format, which is first being converted to base64 format in the frontend, which is then being sent to the backend, and if you want to get the data again from the backend, then you can't show it on the frontend, in their base64 format, which means that with every GET request, the backend have to convert the data from the base64 to the binary, and then it perfomrs GET request.

You can cleary see, that it's a two time conversion. First from binary data to base64 data and then again from base64 to binary data, and eventually this process takes large data to upload slowly. 

But, there's always a solution. What we have to do instead of converting it to base64 in the frontend, is sending binary data directly to the backend, which means that even backend don't have to convert it in any way, which makes the process fast. 

But, now the question is that how to do that? 

You can use `FormData()` constructor to send binary data directly to the backend. 

At first, you have to create an instance of the formdata. 

```javascript
var formData = new FormData();
```
and then you have to append the data to the formData.

```javascript
formData.append('username', 'Chris');
```

Let's take an example. 

```javascript
const sendAudioAsync = (audioChapter, index, audioBookId) => {
    message.warning(`Uploading audio ${index}`);

    const sendingAudio = new FormData();
    sendingAudio.append('audio', audioChapter?.audio); 
    sendingAudio.append('size', audioChapter?.audio?.size); 
    sendingAudio.append('name', audioChapter?.audio?.name); 
    sendingAudio.append('title', audioChapter?.title); 
    sendingAudio.append('time', audioChapter?.time);
    sendingAudio.append('index', index); 
}
```
The above example is the real time example of the client I am working for, in which I have to send audio and its detail to the backend, and I used `FormData` to send it. 

FormData is always in key value pair, and you have to put a name and the data as key value pair, if using FormData to send binary data directly to the backend.

<a href="https://www.buymeacoffee.com/manasmishra" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="21" width="114"></a>
Find the days between the two timestamps
Published: 2022-01-08 06:50:54

startDate = 2021-12-20T06:30:00.000Z
endDate = 2022-01-10T07:30:00.000Z

` var date1 = moment(startDate).format('DD/MM/YYYY')
  var date2 = moment(endDate).format('DD/MM/YYYY')
  const date3 = new Date(date1.split('/')[2],date1.split('/')[1]-1,date1.split('/')[0])
  const date4 = new Date(date2.split('/')[2],date2.split('/')[1]-1,date2.split('/')[0])
  var timeDiff = Math.abs(date4.getTime() - date3.getTime());
  var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
  console.log("diffDays", diffDays)`