teleren/devto huggingface dataset:
Drag oops Drop!
Tags: react
Published: 2021-03-11 04:12:05

There are many Libraries you can find out there for drag and drop, But ... most of these libraries are made for lists! So? What's wrong with lists well they are great for sortable lists, like the todo apps where you have a bunch of lists where you can move them in a two-dimensional drag and drop grid meaning you can move things up and down or right and up:(.
In this blog I'm going to show you how to move things Dynamically meaning moving vertically in a list so we can transfer them to a different list or column!
lets go!

the library that I found is "https://github.com/clauderic/react-sortable-hoc"
with this library, you can drag and drop horizontally or vertically or in a grid and sort it in the way you want:)!
if you look at the Link you will see a sortable item component and a sortable list, we will wrap the sortable list in a sort of container and we wrap the sortable item in sortable elements! also, you will see sorted! what's that?
well, when we move things around we are changing the order of their states too:S
so this will update the state to show which element is in which state.



well we have the time to go step by step...and here we go:
1.
`` $ npm install react-sortable-hoc --save``
2.now import it in your file 
``import {SortableContainer} from "react-sortable-hoc";``
3. a tip before the next step if you have a list of items like boxes probably you have the items too which you were mapping through the boxes, at this point, I will make them two separate files like a dragBoxList and drag box!
4.inside your dragBoxList we will need the :
``const DragBoxList = SortableContainer(({boxes, removeBoxes})) => {
return()``
5. the remove boxes was just an option if you want to delete or remove the boxes.
6. so now our dragBoxList is just a reference to the component that is wrapped into the portable container.

We are not done yet! we need to go to our drag box and make it a sortable element.
7.so in your drag box file we will import:
``import {SortableElement } from "react-sortable-hoc";``

8. again the 4th step:
``const DragBox = SortableElement(props => {
return()}``
Now the drag works but still not ready. you can drag it but the drop still needs work since we didn't teach the box how to work;).
In docs, we can see in sortableList every element needs a index. index={index}
When mapping through your items or boxes:

9.
``{boxes.map((box, i) => (
<DragBox
index={i}
key={box.name}
/>
);
}``
10.now we have vertical drag and it's not saving the changes.
let's specify axis="XY" 
now we have drag vertical and horizontal still no save.
The LAST PIECE!
in the docs, there is onSortEnd that you can copy and paste with the new index and all stuff no need to bind because its using class property syntax, old index, and a new index.
I hope now you can Drag and Drop:D
How to get data from API and show static data from server using NextJS?
Tags: discuss, question, nextjs
Published: 2021-03-11 03:31:41

It'd be simple to write a React app in 3 minutes to get the weather data from https://api.weather.gov/gridpoints/TOP/31,80/forecast and show it on the page, except we cannot show the data if it is a search engine looking into our page.  


Example: https://codesandbox.io/s/quizzical-hooks-wdd9u?file=/src/App.js

In other words, if we `curl` our page, we won't be able to see the weather info.  Anybody know how to do it in 5 minutes using NextJS?  Any other alternatives other than NextJS?  Many thanks.
Server Side Rendering With Angular
Tags: angular, seo, universal, ng
Published: 2021-03-11 03:23:54

This book covers preparing an angular application for indexing in a search engine. In order to prepare the content for google or bing one must be able to render the content of the database and server on the client with the Angular Universal Library!

Check out my new book here: 

https://www.lulu.com/en/us/shop/brendan-mulhern/angular-2-mastering-googles-front-end-framework/ebook/product-7dqz7r.html?page=1&pageSize=4


Thanks for reading!
Industry 4.0 Buzzword
Published: 2021-03-11 02:38:42

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

I see every other page or group having industry 4.0 buzzword and when I see the content, they are either teaching python, or pi or conventional plc/scada.


In reality, there's no single industry that has implemented 10% in Pakistan of what industry 4.0 has to offer. Most are just teachers or students by profession. So if they have not done the real industry projects, how can they teach? I have been approached by top freelancers for IIoT strategy and projects and even I'm taking continues help from Germans and Americans for better execution. IIoT is not just deploying the pi and monitor thru app. Iot can be, for a small home but IIoT is a complete ecosystem.

Industry 4.0 and IIoT means to make industry paperless (digitisation), centralised, secured, with all plant floor data being captured, merge with IT (SAP), analytics and ML for future trends / predictions for better decision making. 

IIoT or industry 4.0 for manufacturing, includes, field instrumentation, plc, dcs, scada, HMI, Profinet, Io link, asi, canbus, mes, sap, iot, machine 2 machine comm, digital twin, machine learning, deep  learning, cloud computing and more. It's a complete eco system, an evolution (step by step) not a revolution (sudden). 

My first session on IIoT would be at UET soon (online),With collaboration of tech communities.

Why I stay true to this journey is many goras look upto me for Pakistan market, If I start claiming like others, it would only leave the bad impression. 

Im excited for this journey as IIoT would be dominating in few years in Pak as well. Already approached by software companies as they realize the market share but don't have the right skillset for engineers or the solution, a single software woudnt solve the industrial probs. This is where more demand for engineers would rise and I'll prepare each one of you InshaAllah.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mp7o2uu8dazfwissg0n3.jpeg)
Attaullah
attaullahshafiq10@gmail.com
www.github.com/attaullahshafiq10
¿Que es react-icons?
Tags: react, javascript, icons, espanol
Published: 2021-03-11 02:03:29

![](https://miriali.github.io/css/img/Infografias/react-icons-1.jpg)
![](https://miriali.github.io/css/img/Infografias/react-icons-2.jpg)

También disponible en: [Miriali_Dev](https://miriali.github.io/)
How to make a new file or directory in vim
Tags: vim, terminal, nerdtree, files
Published: 2021-03-11 01:48:02

There are many ways to create a new file or directory in vim tho. Either vanilla UNIX Shell command, with vim itself, or with the plugin. We will go through all of these.

# 1) `UNIX Shell command`

First, you need to enter command mode with `ESC`, and then;
```
:! touch new-file.txt
:! mkdir new-directory
```
These will create the directory and file in **CURRENT working directory**, which is the directory when you started your current vim process in the beginning.

When in doubt, always use `:!pwd` to check your current working directory.

# 2) `vim-eunuch plugin`

A great plugin for these actions is [vim-eunuch](https://github.com/tpope/vim-eunuch), which gives you a lot of sugar for the UNIX shell commands. Here's the latter example, using `vim-eunuch`:
```
:Mdkir new-directory
```
same as step 1, but easier to type. There is no need to call external commands with `!`.

# 3) `Explore mode`

Explore mode is really cool. There are two ways two open `Explore mode`. Type one of these commands;

1. `:Sexplore`
2. `:Explore`

For `:Sexplore`, it will be like this;
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bu8smkt8m3kqni6k7u6q.png)
to this
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en341zv1h6t0tfkjc3k0.png)
For `:Explore`, it will be like this;
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38eqdhacaz8j8cndjucm.png)

The difference is where the `explore mode` opens. You need to choose one that is better for you.
> note: I'm using the NERDTree plugin.

Then, you can easily navigate to whatever sub-directory you like by ;
- typing `j` or `k` to move the cursor
- press `Enter` to enter a sub-directory
- press `-` to go up a level of directory

Now, you can type;
> `d` to create a **directory**
> `%` to create a **file**

# 4) `Using NERDTree`

This is my favorite because I am using NERDTree for my Neovim setup. Follow these step;

1. Navigate to the directory where you want to create the new file/directory.
2. Press `m` to bring up the **NERDTree Filesystem Menu**. This menu allows you to create, rename, and delete files and directories. It will be like this;
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trzqhbf8u73y1qxyij6s.png)
3. Type `a` to add a child node and then simply enter the filename.
4. You’re done! 🥳

> note: To create a directory follow the same steps but append a `/` to the filename.

That is why I love this step.

---
resources;
[1](https://stackoverflow.com/questions/37255222/how-to-make-a-new-directory-and-a-file-in-vim) [2](https://sookocheff.com/post/vim/creating-a-new-file-or-directoryin-vim-using-nerdtree/) [3](https://stackoverflow.com/questions/2888975/how-to-create-a-directory-using-nerdtree)
First Post --> Useful Websites
Tags: resources, websites, top10
Published: 2021-03-11 01:22:27

Hi All,

First, hope you're doing safe and well

Here a list of what I have of some different resources and hope you can find it useful

Top 10 Sites for your career
1. Linkedin
2. Indeed
3. Naukri
4. Monster
5. JobBait
6. Careercloud
7. Dice
8. CareerBuilder
9. Jibberjobber
10. Glassdoor

10 Tech Skills in demand

1. Machine Learning
2. Mobile Development
3. SEO/SEM Marketing
4. Data Visualization
5. Data Engineering
6. UI/UX Design
7. Cyber-security
8. Cloud Computing/AWS
9. Blockchain
10. IOT

11 Sites for Free Online Education

1. Coursera
2. edX
3. Khan Academy
4. Udemy
5. iTunesU Free Courses
6. MIT OpenCourseWare
7. Stanford Online
8. Codecademy
9. ict iitr
10 ict iitk
11 NPTEL

10 Sites to learn Excel for free

1. Microsoft Excel Help Center
2. Excel Exposure
3. Chandoo
4. Excel Central
5. Contextures
6. Excel Hero b.
7. Mr. Excel
8. Improve Your Excel
9. Excel Easy
10. Excel Jet

10 Sites to review your resume for free

1. Zety Resume Builder
2. Resumonk
3. Resume dot com
4. VisualCV
5. Cvmaker
6. ResumUP
7. Resume Genius
8. Resumebuilder
9. Resume Baking
10. Enhancy

10 Sites for Interview Preparation

1. Ambitionbox
2. AceThelnterview
3. Geeksforgeeks
4. Leetcode
5. Gainlo
6. Careercup
7. Codercareer
8. InterviewUp
9. InterviewBest
10. Indiabix
Book notes: Clean Code - Chapter 9
Tags: books
Published: 2021-03-11 01:03:39

### Chapter 9 - Unit Tests

* We should try to write _clean_ tests, meaning that we should make the tests as easy to maintain as the functions they are testing. If the functions are changing as business needs evolve, so should the tests.

> Test code is just as important as production code. It is not a second-class citizen. It requires thought, design, and care. It must be kept as clean as production code. 

* Tests enable bold changes to the code base.

^ This is kinda obvious, but I'm keeping it here to remember myself.

* Clean tests should be as elegant as clean production code. They should be designed to be read.
* Tests should follow the BUILD-OPERATE-CHECK pattern.
* There are things you can do in a testing environment that you cannot in production. But they are not related to code cleanliness, but to resource usage.
* We should try to minimize the assert statements per test.
* We should have one concept per test.

F.I.R.S.T. rules:

* Fast: Tests should run fast, so people always want to run them.
* Independent: You should be able to run any test independently.
* Repeatable: Tests should run in any environment.
* Self-validating: Tests should have a boolean output, you should not have to think or investigate to know if it passed.
* Timely: Tests should be written just before production code.
moovie.js - Movie focused HTML5 Player 
Tags: javascript, webdev, design
Published: 2021-03-11 01:00:18

Hey,

In my professional work, a few years ago, I worked on a project where the objective was to make reviews of films and trailers, working through API's that brought everything together.

The problem is that the subtitles were not always synchronized with the audio and it was very difficult (if not impossible) to find a player that could adjust in real time (at least without wierd plugins and hacks).

A few days ago I started working on a project called "moovie.js", which is basically a standard HTML5 video, that allows you to <b>adjust the offset manually in real time</b> and has full support for <b>.vtt</b> and <b>.srt</b> caption files.

The goal is to keep all the standard features of a native player but with a little bit of magic :P

Im still working on it, but you can see the progress here:

Github: <a target="_blank" href="https://github.com/BMSVieira/moovie.js">moovie.js</a>

I hope it is useful for someone, feel free to use it! : D
Day 37: Time Format Converter
Tags: 100daysofcode, javascript
Published: 2021-03-11 00:46:15

```javascript
const timeConverter = time12h => {
  const [time, modifier] = time12h.split(" ");
 
  let [hours, minutes] = time.split(":");
 
  if (hours === "12") {
    hours = "00";
  }
 
  if (modifier === "PM") {
    hours = parseInt(hours, 10) + 12;
  }
 
  return `${hours}:${minutes}`;
};
```
Console output:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t15sp5y3ntauz8pkbeua.png)

Of course, instead of using a custom function, you can simply use [moment.js](https://momentjs.com/). 

With moment.js, the same function can be reduced to a single variable in a single line of code:

```javascript
var timeConverter = moment("05:00 PM", 'hh:mm A').format('HH:mm')
```
Updates from the 81st meeting of TC39
Tags: javascript
Published: 2021-03-11 00:37:50

There were many items in the agenda, this post mainly focuses on feature proposals

__Stage 3__

* [Temporal](https://tc39.es/proposal-temporal/docs/): Provides standard objects and functions for working with dates and times.

P.S: It's intended to be shipped behind a flag while some changes are worked out.

* [Error Cause](https://tc39.es/proposal-error-cause/): Enhancing errors with a distinct `"cause"`.

__Stage 2:__

* Array [find from last](https://github.com/tc39/proposal-array-find-from-last#motivation): Proposal for `.findLast()` and `.findLastIndex()` methods on array and typed array.

__Stage 1:__

* [Module Fragments](https://github.com/littledan/proposal-module-fragments#motivation): JavaScript module fragments are a syntax for named, inline JS modules, which can be used for bundling multiple modules into a single JavaScript file.

__Bonus:__

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Just love how these smart humans collaborate!<a href="https://twitter.com/wSokra?ref_src=twsrc%5Etfw">@wSokra</a> Reported Unexpected execution order with multiple parents <a href="https://t.co/6dxkBPuhIy">https://t.co/6dxkBPuhIy</a> on TLA.<a href="https://twitter.com/guybedford?ref_src=twsrc%5Etfw">@guybedford</a> makes the changes in the spec for DFS invariant extension.<a href="https://twitter.com/_codehag?ref_src=twsrc%5Etfw">@_codehag</a> reviews the spec and drafts <a href="https://t.co/SME9KC2ULh">https://t.co/SME9KC2ULh</a> <a href="https://t.co/7YTfGpY8lT">pic.twitter.com/7YTfGpY8lT</a></p>&mdash; Hemanth.HM (@GNUmanth) <a href="https://twitter.com/GNUmanth/status/1369753974941777921?ref_src=twsrc%5Etfw">March 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Random Select for Sequences in Python
Tags: python
Published: 2021-05-22 17:02:27

---
title: Random Select for Sequences in Python
published: true
date: 2021-03-11 00:00:00 UTC
tags: python
canonical_url: https://tech.serhatteker.com/post/2021-02/random-select-for-sequences-in-python/
---

Python has `built-in` functions for picking item(s) randomly from a sequence.

## Single

For a single item you can use `choice`:

```python
# select.py
from random import choice

fellowship = (
    "Mithrandir",
    "Frodo",
    "Legolas",
    "Aragorn",
    "Gimli",
    "Sam",
    "Boromir",
    "Pippin",
    "Merry",
)


def main():
    selection = choice(fellowship)
    print(f"selection: {selection}")


if __name__ == "__main__":
    main()
```

Output:

```bash
selection: Mithrandir
```

## Multiple

For multiple selections you can use `choices` or `sample`:

```python
# select.py
from random import choices, sample

fellowship = (
    "Mithrandir",
    "Frodo",
    "Legolas",
    "Aragorn",
    "Gimli",
    "Sam",
    "Boromir",
    "Pippin",
    "Merry",
)


def main():
    selection = choices(fellowship, k=3)
    print(f"selection: {selection}")

    selection = sample(fellowship, k=3)
    print(f"selection: {selection}")


if __name__ == "__main__":
    main()
```

Output:

```bash
selection: ['Gimli', 'Merry', 'Pippin']
selection: ['Boromir', 'Aragorn', 'Legolas']
```

For more info look at: [python - random for sequences]


All done!




[python - random for sequences]: https://docs.python.org/3/library/random.html#functions-for-sequences
"Hotfix" is a dirty word
Tags: devops, release
Published: 2021-03-17 17:19:18

---
title: "Hotfix" is a dirty word
published: true
date: 2021-03-11 00:00:00 UTC
tags: devops, release
canonical_url: https://jhall.io/archive/2021/03/11/hotfix-is-a-dirty-word/
---

“Hotfix” doesn’t have a single, specific definition, but Wikipedia [describes](https://en.wikipedia.org/wiki/Hotfix) one as “a single, cumulative package that includes information that is used to address a problem in a software product (i.e., a software bug).”

When it comes to version control systems, we usually see a slightly different usage of the word. I’ve usually seen it used to describe any sort of “quick fix” that’s applied directly to an existing software release, rather than going through a team’s normal software release process.

I’ve seen this take many forms, several of which I’ve been personally guilty of:

- Hacking on code on a live, production server
- Deploying code changes to production before it’s added to version control
- Creating a bug fix branch off of a “release” branch (as opposed to mainline or even `develop`)

One might assume that the goal in each case is to get the work done as quickly as possible, to restore production to a working state. But I’ve often seen these changes fail to get merged into mainline properly. Or the change that does get merged into mainline differs in some way from the version deployed. Sadly I’ve seen this happen too often even when attempting to follow [GitFlow’s hotfix prescription](https://nvie.com/posts/a-successful-git-branching-model/#hotfix-branches).

All of these supposed short cuts are really bad ideas!

![“That was a bad idea”](https://jhall.io/archive/images/bad-idea.jpg)

The whole reason that a software release process exists in the first place is to ensure that everything necessary for software to be safely and reliable released occurs. Any exception to this process means the process isn’t working.

If going through the normal channels takes too long to fix urgent bugs, fix the normal channels. Don’t shortcut them!
LiteDB with Blazor sample app
Tags: development, frontend, blazor, litedb
Published: 2021-03-11 13:44:57

---
title: LiteDB with Blazor sample app
published: true
date: 11/03/2021 10:45:00 UTC
tags: Development,Frontend,Blazor,LiteDB
canonical_url: https://blog.rodrigojuarez.com/2020/11/28/litedb-with-blazor-sample-app/
---

My LiteDB with Blazor demo app is at [https://blazorlitedb.herokuapp.com](https://t.co/f20eEDZSbl?amp=1)

Source code available at [https://github.com/rodrigojuarez/blazorlitedbdemo](https://github.com/rodrigojuarez/blazorlitedbdemo)
How to change the URL of a webpage without reloading using Javascript?
Tags: javascript
Published: 2021-03-11 00:00:00

---
  title: How to change the URL of a webpage without reloading using Javascript?
  published: true
  tags: JavaScript
  date: Thu Mar 11 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-url-of-webpage-without-reloading-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-7b6cb44eebc96e849d93558d3211d93d.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-url-of-webpage-without-reloading-javascript)
  
To change the URL of the webpage without reloading, you can use the `replaceState()` method in the global `window.history` object in JavaScript.

```js
/* Change URL without reloading webpage 📝*/
window.history.replaceState({}, "", "/new-url/hello");
```

- The first argument is of an `object` type, where you can define some states you need to about the current URL.
- The second argument is of a `string` type to change the title of the webpage (or the name that should be shown in the tab of the browser), but nowadays most browsers will ignore this argument. So we are passing an empty string.
- The third argument is of a `string` type where we change the URL without reloading the webpage.

For example,

Let's say our URL was `https://melvingeorge.me/blog/hello-world-blog` before changing like this,

![before url is changed](https://melvingeorge.mebefore-url-changed)

Now let's use the `replaceState()` method to change the url to `https://melvingeorge.me/info`. It can be done like this,

```js
// Change URL to /info
window.history.replaceState({}, "", "/info");

/*
    RESULT: https://melvingeorge.me/info
*/
```

Now the URL looks like this,

![after url is changed](https://melvingeorge.meafter-url-changed)

Now the URL is changed. Yay! 🥳

### 🔴 NOTE: You can change the URL of your current origin only. You cannot change the complete URL to a different domain name like `https://www.google.com/search`.

```js
// 🛑 This won't work if you are in melvingeorge.me website
// The method will throw an error here
window.history.replaceState({}, "", "https://www.google.com/search");

// You need to be on the google.com website to do this
```

Play with code in [Codesandbox](https://codesandbox.io/s/change-url-of-webpage-without-reloading-qp96l?file=/main.js).

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

---
Quick and dirty server
Tags: webdev, macbook, server
Published: 2021-03-11 15:16:38

---
title: Quick and dirty server
published: true
date: 2021-03-11 00:00:00 UTC
tags: webdev, macbook, server
canonical_url: https://thomasxbanks.com/articles/quick-and-dirty-server/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m94ai99a6iwww6k2zkhi.jpg
---

I often find myself working on proof of concepts that consist of (at most) an `index.html`, `style.css`, and `index.js`.

It always seems overkill to have some kind of "local server" plugin imported into the project - especially because I use a MacBook Pro and it has [Python](https://www.python.org/) installed by default.

A neat little trick for serving a static site without additional dependencies is this…

1. Navigate to the folder you want to serve
2. `python -m SimpleHTTPServer`
3. Open `http://localhost:8000`

What if PORT 8000 is in use?

Pass a different port number like this: `python -m SimpleHTTPServer %%PORT_NUMBER%%`

If you want it to be _even simpler_ - stick this somewhere in your bash config!

```bash
srv() {
  python -m SimpleHTTPServer
}
```

It doesn't come with any of the fancy stuff that other "local server" plugins might come with like hot reloading or compiling Scss but, if all you want is a small static site launching, why reach for another dependency?