teleren/devto huggingface dataset:
React Fast Refresh in Django-react
Tags: react, django, webpack, webdev
Published: 2021-02-04 12:19:48

## My Journey
While trying to add hot module replacement in a Django-react app I found out that there are 2 ways of adding it.
 
a) Using `django-webpack-loader`. 

Cons: 

* Required too many changes.
* It's not easy to add.

b) Using `react-hot-loader` + devServer:{ writeToDisk: true }

Pros: 

* Minumum code change required. 

Cons: 

* If you are using --hotOnly then after sometimes react-hot-loader breaks then you have to reload the whole page to check your changes.
* If you are using --hot then instead of component re-render most of the time page reloads.

## React Fast Refresh
Development experience with React Hot Loader was not good. That's why I tried to replace it with React Fast Refresh and it was a success. Create React App also use it now. 
Some key points:

* it will re-render a React component when we edit a module that exports only React components
* it will reload all React components that import a non-React module and the module itself when we edit it
* it will do a full reload when we edit a module outside of the React tree
* it will continue working once we resolve a syntax or a runtime error without having to reload manually
* local state will be preserved for function components and Hooks out of the box
* local state won't be preserved for class components

## Setup

1. First, install the react-refresh and @pmmmwh/react-refresh-webpack-plugin libraries.

2. Add `react-refresh/babel` in babel plugins.

```
 {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: ["react-refresh/babel"],
        },
      },
```

3. Add `HotModuleReplacementPlugin` and `ReactRefreshWebpackPlugin` in webpack plugins.

```
  new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin({
      overlay: {
        sockPort: 8090,
      },
    }),
```

4.Set webpack devServer config to this

```
 devServer: {
    port: 8090,
    hotOnly: true,
    writeToDisk: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization",
    },
  },
```
(Optional):
Sometimes if webpack-dev-server skips files to write on disk, then set  
```` 
publicPath: "/static/" 
``` 
to 
``` 
publicPath: "/http://localhost:8090/" 
```
Source code is available [here](https://github.com/TheSTL/django-react-fast-refresh-boilerplate)

## Demo
![react-fast-refresh](https://user-images.githubusercontent.com/50075905/106893122-16d48c80-6713-11eb-94a7-372e9c9f0141.gif)
The best app for conducting free online classes
Published: 2021-02-04 12:01:33

Hello all, 

Teaching online is very difficult. Are students paying attention? Have they grasped concepts or sleeping at leisure? These queries take a toll on tutors.

Multiple apps are overkill for 30 minutes class. One app for scheduling. Different communication apps to reminder. Email or phone to share assignment & results. Jamboard for white-boarding. Manually reminder to even pay attention. 

This complete exercise makes mental tall on teachers. We've built Standupmeet for teaching and training.

**Collaborative Whiteboard:**
Super easy to draw objects. Showcase any documents on a whiteboard. 

**Cohort Based Education:**
Implement true peer learning with Standupmeet. Create multiple study zones and divide students.

**Take Instant Quiz or Poll:**
Are students paying attention? Have they grasped the concept? Take the instant quiz and learn where students are in learning.

**Integrated Library & Assignments**
I don't need to force students to use Google Drive or dropbox. During classes only, they can upload assignments in the library.

Share Screen, Video Conferencing
You don't need to use different apps for sharing a screen or video conferences. 

Standupmeet is now live. Signup for free now and share your feedback.
You say you want a [web development] revolution?
Published: 2021-02-04 11:49:22


For too long now web development has trundled along, leaving a bunch of disenfranchised creative people clinging to various "communities". People who thought they were getting involved in something exciting, something where they could express their creativity, only to left dead in a ditch by "big tech" companies. Don't fear! Like the Yo-Yo, things come back around. At Stellisoft, we're starting the Indie Developer fight back.

One of, if not *the*, major problem with web development is the disparate nature of it these days. Do you use Vue? React? Preact? Angular? Alpine? Coconut? Sausage? Pineapple? What does it matter? It's what you're actually developing that matters surely? You could spend your entire life following the development of libraries and frameworks, buying T-shirts, attending events and wind up building nothing of any worth whatsoever.

I'm not levelling all the blame at the easily lead souls that do this. I understand, I've found myself doing it more than once. Effective marketing is a powerful tool. However, if anything interesting is going to happen in the sphere of web development ever again, we need to take a step back and start to find our way out of the rabbit hole.

I've built the foundations of a platform that removes the vice of becoming obsessed with extra-curricular programming activities and focuses exclusively on development. We're launching on Product Hunt today. I hope you come and find us and not just follow what we're doing, but get involved! It won't be a revolution without you.
Big O Notation - What is it?
Published: 2021-02-04 11:24:25

In plain English, Big O is a way to describe how complex and algorithm is using algebraic terms. It is a fundamental tool for software engineers and computer scientists to analyze the cost of an algorithm. When using Big O, we express the runtime of an algorithm in terms of - how quickly it grows in correlation to the input, as the input gets larger. When calculating Big O, we default to assuming the worst case scenario of the algorithm. We do this because the worst case is when it matters the most. 

Constant time:
An algorithm that runs in constant time( or O(1) ), relative to its input. Simply, no matter the size of the input, this function will always require 1 step.

Linear time:
An algorithm that runs in linear time ( or O(n) ), grows at a steady pace, in direct proportion to the size of the input data set. N is the number of items that are given to us in the array. Simply, the number of items in the array is the number of times the array will print or the number of steps the function will have to take.

Quadratic time:
An algorithm that runs in quadratic time ( or O(n²) ), usually involves nested iteration over the data set. Simply, the performance of this algorithm is proportional to the square of the size of the input data set.

There may be times when we want to optimize an algorithm to use less memory instead of (or in addition to) using less time. Talking about memory cost is similar to talking about time cost. We look at the total size (relative to the size of the input) of any new variables we are allocating. Most of the time when we talk about memory cost, we’re talking about additional space, so there is no need to include space taken up by the inputs. There are always trade-offs when deciding to save memory or time, it’s up to the creator to choose which is more important in each scenario.

Big O is a complex topic, I tried my best in explaining the basic fundamentals of it. I hope you learned a little and enjoy the read. Thanks for stopping by!
How to fix "SMTP Error (-1): Connection to server failed." in rouncube webmail
Tags: help, smtp, roundcube
Published: 2021-02-04 11:00:18

---
title: How to fix "SMTP Error (-1): Connection to server failed." in rouncube webmail
published: true
description: 
tags: help , smtp , roundcube 
//cover_image: https://direct_url_to_image.jpg
---
aks storage - volumes explained in plain english in less than 5 minutes
Tags: beginners, kubernetes, aks, storage
Published: 2021-02-04 11:15:02

---
title: "aks storage - volumes explained in plain english in less than 5 minutes"
published: true
description: "aks storage - volumes explained in plain english in less than 5 minutes"
tags: beginner, kubernetes, aks, storage
cover_image: https://www.azuremonk.com/assets/blogposts/video/volumes.png
---

{% youtube o7UTiRTfk-M %}

This is the ridiculously simple animated explanation of Azure Storage Options - in less than 5 minutes. In part 1 of the video we will cover : 

Volumes and Volume Mounts
Different Kinds of Volumes - Azure Files, Azure Disks, EmptyDir, Secrets and ConfigMaps
Step by step creation of Azure Files and Azure Disks Volumes

In part 2 of the video we will discuss --

Persistent Volume (PV)
Persistent Volume Claims (PVC)
Storage Classes


For more animated Azure videos and simplified Azure content and podcasts please check out https://www.azuremonk.com/video​ #aks​ #azure​ #azurein5minutes​ #aksstorage​ #azuredisks​ #azurefiles​ #k8s​ #aksvolumes​ #volumetypes​ #emptydir​ #secrets​ #configmaps​ #persistentvolumes​ #persistentvolumeclaims​  #pvc​ #persistentvolumes​ #pv​ #storageclasses​



https://www.azuremonk.com

AKS (azure kubernetes services) in plain english 

#aks​ #azure​ #azurein5minutes​ #aksstorage​ #azuredisks​ #azurefiles​ #k8s​ #aksvolumes​ #volumetypes​ #emptydir​ #secrets​ #configmaps​ #persistentvolumes​ #persistentvolumeclaims​  #pvc​ #persistentvolumes​ #pv​ #storageclasses
aks cni explained in plain english
Tags: kubernetes, aks, cni
Published: 2021-02-04 11:13:25

---
title: "aks cni explained in plain english"
published: true
description: "aks (azure kubernetes service) networking model- cni explained in plain english"
tags: kubernetes, aks, cni
cover_image: https://www.azuremonk.com/assets/blogposts/video/cni.png
---

{% youtube A-eH_fu-pXg %}


This is the ridiculously simple animated explanation of Azure Kubernetes Services Networking model - Azure CNI in less than 5 minutes. We will cover 

Azure CNI 
IP address requirements
Advantages of using CNI


For a super simplified explanation of Azure Kubenet networking model check out part 1 of the video - https://www.youtube.com/watch?v=lwJDyJUVnxs


For more animated Azure videos and simplified Azure content and podcasts please check out https://www.azuremonk.com/video​ #aks​ #azure​ #azurein5minutes​ #aksnetworking​ #networking​ #kubernetes​ #k8s​ #kubenet​ #cni​ #azuremonk​ #services​ #pods​ #overlay​ 

https://www.azuremonk.com

K8s in plain english 

#kubernetes #k8s #deployments #explained #cka #ckad #azuremonk #kubernetesinplainenglish #podsinplainenglish #deploymentsexplained #kipe
GitHub Campus Experts Application Are Open !!
Tags: github, expert, application, free
Published: 2021-02-04 10:55:06

## Who are Campus Experts ?
> Campus Experts are student leaders that strive to build diverse and inclusive spaces to learn skills, share their experiences, and build projects together. They can be found across the globe leading in-person and online conferences, meetups, and hackathons, and maintaining open source projects.

## Why You Should Join ?
> As local leaders, Campus Experts know the challenges students on their campuses face. With the GitHub Campus Experts training, you’ll learn technical and professional skills—like public speaking, technical writing, community leadership, and software development—that will help you build a strong technical community, teach valuable skills, create new opportunities for your student community, and position your institution within a global community of student leaders.

## The Process
> 1- Get the GitHub Student Developer Pack
> 2- Complete the application form
> 3- Submit a video resume
> 4- Welcome to the program!
> 5- Complete the training

## What are the eligibility requirements?

> - Be at least 18 years of age.
> - Validate your student status through the GitHub Student Developer Pack.
> - Be enrolled in a post-secondary formal education institution.
> - Be a GitHub user for at least six months.
> - Not be enrolled in the GitHub Campus Advisors Program.

## Ready To Apply ?
> Apply at [GitHub Campus Experts Program](https://apply.githubcampus.expert/application)

> Source [Github Education](https://education.github.com/experts)
Run Laravel Dusk Tests via Gitlab (Self-hosted) CI/CD using DigitalOcean Docker 
Tags: gitlab, ci, cd, docker
Published: 2021-02-04 10:45:08

#### Step 1: Create DigitalOcean (DO) Droplet
This is a fairly simple step. 
From DO dashboard > Click on Create > Droplets > Marketplace > Choose `Docker`.

#### Step 2: Install Gitlab Runner
- Login to Droplet via SSH
- Run the following to install gitlab runner
```sh
curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh | sudo bash
```
```sh
sudo apt-get install gitlab-runner
```
#### Step 3: Register gitlab-runner

- Login to your self-hosted Gitlab
- Navigate to `<gitlab-url>/admin/runners`
- Copy `URL` and `Registration Token`
- Login to Docker install via ssh
- Run the following command to register

```sh
sudo gitlab-runner register
```
It will ask you the following questions:

##### Enter the GitLab instance URL (for example, https://gitlab.com/):

```sh
Enter the url you received from gitlab runner page
```

##### Enter the registration token:

```sh
Enter the TOKEN you received from gitlab runner page
```

##### Enter a description for the runner:
```sh
Enter anything to identify the runner
```

##### Enter tags for the runner (comma-separated):
```sh
docker
```

You can anything and this will be used later in `gitlab-ci.yml` file

##### Enter an executor:
```sh
docker
```
Here you have to enter `docker`

#### Step 4: Configure `gitlab-ci.yml`

- Create a `gitlab-ci.yml` file in the root folder of your repository.
- Feel free to custom the content of `gitlab-ci.yml`, following file is for `laravel` `dusk` tests:
```yml
stages:
	- test
test:
  stage: test
  image: chilio/laravel-dusk-ci:php-7.3

  variables:
    MYSQL_ROOT_PASSWORD: root
    MYSQL_DATABASE: laravel
    DB_HOST: mysql
    DB_CONNECTION: mysql
    DB_DATABASE: laravel
    DB_USERNAME: root
    DB_PASSWORD: root

  services:
    - name: mysql:5.7

  script:
    - cp .env.example .env
    - composer install
    - configure-laravel
    - start-nginx-ci-project
    - php artisan key:generate
    - php artisan dusk

  artifacts:
    paths:
      - storage/logs
      - tests/Browser/screenshots
    expire_in: 7 days
    when: always

  tags:
    - docker
```

- Pay attention to `tags`, you must apply the tag that you have entered while registering the `gitlab-runner`.
Let Them Sort
Tags: growth, search, organize, productivity
Published: 2021-03-02 12:00:45

---
title: Let Them Sort
published: true
date: 2021-02-04 10:39:19 UTC
tags: growth,search,organize,productivity
canonical_url: https://x-team.com/blog/let-them-sort/
---
You think Google is the world's best search engine because it's good at _searching_? You're wrong. Google is the world's best search engine because it's good at _sorting_. Imagine Google had to search all their indexed webpages every time you Googled something. See you in a million years, because that's how long your query would take.

Instead, Google's algorithms sort [hundreds of billions of webpages](https://www.google.com/search/howsearchworks/crawling-indexing/#:~:text=Organizing%20information%20by%20indexing&text=The%20Google%20Search%20index%20contains,on%20every%20webpage%20we%20index.) so that they can find what you're looking for almost immediately. No one quite knows how they do it, but everyone knows they do it incredibly well.

Of course, it's not just Google's algorithms that can sort well. Other search engines, email providers, operating systems, apps, and many websites have ways of organizing and sorting information so you don't have to.

Strangely, we still do. We spend hours organizing our emails, our computer files, our notes, and more. Not only that, but we often agonize over how to organize our stuff. The more stuff we have, the worse it gets. D\*mn you, [Big O](https://en.wikipedia.org/wiki/Big_O_notation)!

We're so used to organizing things in the physical world that we mistakenly believe we have to do the same thing in the digital world. We don't. Searching is almost always faster than sorting. So if you can search, search. Let the [trillion-dollar companies](https://ycharts.com/companies/GOOG/market_cap) sort for you.
[Dev Meetup] Threshold Signatures for Dapps on Ethereum
Tags: ethereum, blockchain, meetup
Published: 2021-02-04 10:26:27

What are threshold signatures? How are they relevant to blockchain applications? Come hang with us and let’s take a deep dive into the cryptography behind threshold signatures and the way they are being applied to Ethereum projects.

Today, we’re very excited to have [Ari Rodriguez](https://github.com/superarius), the cryptographer from [Gelato](http://gelato.network/) join us and talk about building blocks of threshold signatures.


<h3>📍When & Where</h3>
The meetup will be held in the [Gelato Zoom](https://zoom.us/j/96305018619) on Thursday, February 4, 2021, from 12:00 PM to 12:30 PM ET / 6:00 PM to 6:30 PM CET.
> Add event to your [calendar](https://calendar.google.com/event?action=TEMPLATE&tmeid=MnQ1YWlkNXV1MW9mOXF0NTNnYTU4YXF1YW0gY19rN3BhNGkyampndTdtYm52dnFyZnA2YmI2MEBn&tmsrc=c_k7pa4i2jjgu7mbnvvqrfp6bb60%40group.calendar.google.com).

<h3>📅Schedule</h3>
- 12:00–12:05 PM: Welcoming address
- 12:05–12:25 PM: Ari — Building Blocks of Threshold Signatures
- 12:25–12:30 PM: Q&A

<h3>Our Guest Speaker: Ari Rodriguez</h3>
Ari is a cryptographer and software engineer based in New York City. He has worked with a number of start-ups on nascent cryptographic technologies including threshold encryption, multi-party computation, and smart contract design and development.

Hope to see you soon! 

------

Gelato is a protocol that automates smart contract executions on Ethereum. We are building the infrastructure of reliable automation on top of Ethereum and with it a key part of the Web3 middleware stack, enabling trustless, automated flows of money between all smart contracts and upcoming Layer 2 networks.


► Check out what we’ve been working on at 🍦 https://gelato.network/🍦
Data Science Course in Mumbai
Tags: datascience
Published: 2021-02-04 10:21:29

ExcelR offers Data Science Course in Mumbai with expert trainers having 10+ years of experience with 100%placement assistance.

You can reach us at :

ExcelR- Data Science, Data Analytics, Business Analytics Course Training Andheri

Shree Padmini Building, 301, Teli Galli Cross Rd, Sanpada Society, Andheri East, Mumbai, Maharashtra 400069

+917732003007
Reverse thinking
Tags: writing, productivity
Published: 2021-02-04 10:15:44

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mox7cyaf2b18wi7kgz4n.jpg)

Sekali-sekali mikirnya dibalik. Mungkin Anda akan cara pandang baru. 

#365figures

04-02-21
100 Algorithm Challenge - Explained and solved- Algorithm 1(Easy)
Tags: javascript, algorithms, datastructures, typescript
Published: 2021-02-04 10:09:46

**Problem - AbsoulteValuesSumMinimization**
 
Given a sorted array of integers a, find an integer x from a such that the value of

`abs(a[0] - x) + abs(a[1] - x) + ... + abs(a[a.length - 1] - x)`

is the smallest possible,If there are several possible answers, output the smallest one.

**Example**

For a = [3, 5, 9], the output should be
absoluteValuesSumMinimization(a) = 5.

For a = [2, 4, 7, 6], the output should be
absoluteValuesSumMinimization(a) = 4.

For a = [2, 4, 7, 6, 6, 8], the output should be
absoluteValuesSumMinimization(a) = 7.

**Understanding the problem**

 * abs stands for absolute.
 
 >Simply above problem states, we have to pick a 
 >number (x) from _sorted array (a)_ so that if we sum the 
 >absolute of difference of every element in a array with x,
 >that sum number will be minimum as compare to every other x.
 
*Explaining the english with example*

> a = [3, 5, 7]

>First we pick x, lets pick every element 
> let x = a[0] = 3; 
> lets calculate the abs of difference of every element with x
> 
> abs(a[0]-x) + abs(a[1]-x) + abs(a[2]-x)
> abs(3-3) + abs(5-3) + abs(7 - 3) => 0 + 2 + 4 => 6
> we got 6 by picking x as 3.

> a = [3, 5, 7]
 
> Now let x = a[1] = 5; 
> lets calculate the abs of difference of every element with x
> 
> abs(a[0]-x) + abs(a[1]-x) + abs(a[2]-x)
> abs(3-5) + abs(5-5) + abs(7 - 5) => 2 + 0 + 2 => 4
> we got 4 by picking x as 5.

> Now let x = a[2] = 7; 
> lets calculate the abs of difference of every element with x
> 
> abs(a[0]-x) + abs(a[1]-x) + abs(a[2]-x)
> abs(3-7) + abs(5-7) + abs(7 - 7) => 4 + 2 + 0 => 6
> we got 6 by picking x as 7.

So Hope you understood the problem, In the above case, the number which yeilds minimum result is the absoluteValuesSumMinimization i.e *5*, 

*_Oh! Wait, Wait, Wait... But this thing has a name which we all understand.... *MEAN Value*_*

**Yup that is mean value**

Okay lets Solve it !! Using TS Code

Algorithm

> To find mean value array must be sorted, which is in our case
>
> Next we find if total numbers of element in array are even or 
> odd,On dividing with 2, if even then we have two mean values, we > take the smaller one, if odd then there is only one mean value.
> 
>
> if odd then we will get the value in fraction, 
> Math.floor() to rescueeee !!
 
**TS Code**

Okay! Lets code.

```
function absoluteValuesSumMinimization(a: number[]): number {
  //Find if the total numbers are ever or not.
  const isEven = a.length % 2 === 0;


  return isEven ? a[a.length / 2 - 1] : a[Math.floor(a.length / 2)];
}

Dry Run (Testing)

a = [3, 5, 7]
absoluteValuesSumMinimization(a);

isEven = 3 % 2 = 1 === 0 => False

then,

the false part of the statement return will run,

a[Math.floor(1.5)] => a[1] => 5

returns 5;

so the mean is 5
```

Okay thats it, Thank you.
Keep Coding.


**Refrence**

This is the course I am taking on udemy, I am writing these series for my better understanding.
*[100 Algorithm Challenge Course](https://www.udemy.com/course/100-algorithms-challenge/)*
API Testing using vREST NG - Download/Installation on Windows/Mac/Linux
Tags: api, testing, vrestng, vrestio
Published: 2021-02-04 09:58:24

Watch our video on the download and installation process of the vREST NG Application in the video series "API Testing using vREST NG".

If you are using Windows OS, then follow the link below:
https://youtu.be/7Cpyk8ArvT8

For Mac OS: https://youtu.be/wV0euEzR00U
For Linux: https://youtu.be/G4iu7mwHjyE

Playlist: https://youtube.com/playlist?list=PLmua155_WrDzt1AbB6iV5Lsw_Z7QrzZZ0

If you found the video helpful then please share it with your friends and colleagues.

We will soon be releasing more videos on how you may validate your APIs using vREST NG. So stay tuned with us.
My Portfolio
Tags: portfolio, javascript, css, webdev
Published: 2021-02-04 09:58:04

Hello fellow devs & creators 🙋‍♂️
Need some feedback on my portfolio on which I can improve upon.
Also, it would be great if you all can suggest what more can be added.

tech stack 👀: html, css, vanilla JS, js libraries

p.s: if you like it, you can make one for yourself too.
🎯 Source Code : https://github.com/alok722/alokraj.tech
🌍 URL : https://alokraj.tech/
{% github alok722/alokraj.tech %}
Place to Dowload test files
Tags: testing, testfiles
Published: 2021-02-04 09:51:11

Where do you download test data from?

I recenty had to find such a page because, to be honest to google for different images with different sizes and to look for videos and other formats I found it to be really time consuming.

After googling some time I came upon https://www.learningcontainer.com/

There you can find different file types with sizes. You can find the below and much more
* images
* videos
* audio
* text 
* pdf

Also made a short video with this if you do not want to read the article and just watch somenthing https://www.youtube.com/watch?v=5UGCJG2QRG8