teleren/devto huggingface dataset:
How I Built My Portfolio
Tags: react, github, nextjs
Published: 2020-04-19 21:16:01

Hello, everyone :)
Link: [Github](https://github.com/DaxSoft/daxsoft.github.io)
Site: [Website](https://daxsoft.github.io/)

-----

I have been using Next.js for a while. And my portfolio on Github was very outdated. For this motive, I have creating a new other using Next.JS. By far the most annoying thing to resolve was the problem of exporting the application to work with the Github Pages. There are not that many of tutorial or example, that explains in a clear way.

Then, if you guys want to, check out the source code of the website :)

-----

# Features

Things that I was seeking on have in my portfolio:

- Clear and simple
- Shows up my project that I have on Behance
- Shows up the projects on my Github
- Be the host of some project's documentation

-----

# Behance

I don't want to have any time that I publish a new project on Behance, go on my portfolio then edit some sort of file or anything like this to display the info of this project. 

Then, I have use the Puppeteer to scrape my projects on Behance, grab the pictures and some statics, and generate a json file.

With the Github Actions, I will automate this process using some sort of CRON time.

----

# Github

Using the Github's API, I could get my project list that it's mine (not forked).
I have created some sort of 'To-Do' for this website, in which is getting the list of open issues from the Github repo. and displaying on Website.

----

# Github Project's Documentation

Every project of mine that have on his description from the Github repository, the keyword '#docs'. It will be available on Website to see the documentation.
With the Github's API, I can went into this repositories, look at if it haves a folder named 'docs', then it will render on the website, using React Markdown.

----

Well, for while is it :)
I built a simple rest API with node and a Raspberry Pi
Tags: raspberrypi, restapi, ubuntu
Published: 2020-04-19 21:14:04

This was a lot of fun for me and I will be updating this more as I go!

I installed ubuntu server on a raspberry pi 4. 

From var/www/html

```bash
mkdir api && cd api
```


```bash
sudo npm init -y
```


```bash
sudo npm install express
```


```bash
touch index.js && sudo nano index.js
```

For now I am going to just make one GET response to test.

```javascript
var express = require('express');        
var app = express();                 
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
var port = process.env.PORT || 8080;  
const router = express.Router();
router.get('/', function(req, res) {
    res.json({ message: 'API is Online!' });   
});

app.use('/api', router);
app.listen(port);
console.log('Listening on port ' + port);
```

`control x` to save and quit 

from the root

```bash
node index.js
```
now from postman

```
`http://your-server-ip:3000/api` 
```

You will see 

```bash
API is online
```
Largest Prime Factor 600851475143
Published: 2020-04-19 21:13:18

import math
prime=[]
def pf(n):
        while(n%2==0):
                prime.append(2)
                n/=2
        for i in range(3,int(math.sqrt(n)),2):
                while(n%i==0):
                   prime.append(i)
                   n/=i
        if(n>2):
             prime.append(n)
        print(max(prime))
pf(600851475143)
Front-end Reading in Depth Week - 17
Tags: fingerprinting, Destructuring, JavaScript, angular
Published: 2020-04-19 21:06:32

1. Data fingerprinting in JavaScript
2. Destructuring with JavaScript: Instructions
3. Next.js vs Gatsby.js: Choose the right React framework 
4. Component communication in Angular

https://annacoding.com/news/rpBEU6KQaAysDZ5RPRP41/Front-end-Reading-in-Depth-Week-17-[19-04-2020]
Front-end Weekly News Week - 17
Tags: postmarketos, microsoft, github, fedora32
Published: 2020-04-19 21:04:16

1. Running postmarketOS on iPhone 7
2. Fedora 32 will be delayed due to bugs
3. GitHub completes the acquisition of npm
4. Microsoft announces extended support for earlier versions of Windows 10
https://annacoding.com/news/59V7SVDRQOp3lNucLrAD7h/Front-end-Weekly-News-Week-17-[19-04-2020]
Day-7 Sort Array by Parity
Tags: python, challenge
Published: 2020-04-19 20:33:59

---
title: Day-7 Sort Array by Parity
published: true
description: 
tags: #python #challenge
---
This problem statement is a part of the introduction to data structures Arrays -101 section in Leetcode.

##### Problem Statement
Given an array A of non-negative integers, return an array consisting of all the even elements of A, followed by all the odd elements of A.

You may return any answer array that satisfies this condition.

```
Example 1:

Input: [3,1,2,4]
Output: [2,4,3,1]
The outputs [4,2,3,1], [2,4,1,3], and [4,2,1,3] would also be accepted.
```

Note:

1. <= A.length <= 5000
2.  0 <= A[i] <= 5000

##### Solution Approach
1. Iterate over the list.
2. Add even elements to list 1. Add odd elements to another list.
3. Add odd elements to the list of even elements by using extend.

```
class Solution:
    def sortArrayByParity(self, A: List[int]) -> List[int]:
        even_values = []
        odd_values = []
        for x in range(0, len(A)):
            if A[x] % 2 == 0:
                even_values.append(A[x])
            else:
                odd_values.append(A[x])
        even_values.extend(odd_values)
        return even_values
```

##### Learnings
1. Time complexity - O(n), space complexity - O(n)
2. Time complexity of extending is 0(k) - k is the length of list to be extended.

#### TODO
Optimize space complexity further from O(n) to O(1). Write an in-place solution.
How to Open a CodeSandbox Project Without a Browser Preview
Tags: codesandbox, tooling
Published: 2020-04-19 20:48:06

---
title: How to Open a CodeSandbox Project Without a Browser Preview
published: true
description: Learn how to prevent immediate code execution in CodeSandbox so you can fix bugs that lock up the browser.
tags: CodeSandbox, tooling
---

From time to time, we all write really bad code. Sometimes, that code is a poorly-written JavaScript loop that completely locks the main thread and prevents anything else from working in that browser tab. If you're working in a standalone text editor, this isn't a big deal: you kill the browser tab, fix your code, then reopen the browser tab to see if your code works. 

However, if you're using CodeSandbox, your code is execute in the same tab as the editor. This can make it impossible to fix the bug that's locking the main thread. Thankfully, CodeSandbox has an undocumented way of getting around this.

**If you append `&runonclick=1` to the end of a project's URL, it will prevent the code preview from running until you click into the preview window.** This will allow you to fix your buggy code before it locks up the main thread.

At the time of writing this post, there is no way to do this through the UI.

Thank you to [garethx](https://github.com/garethx) for posting this solution to a [GitHub issue](https://github.com/codesandbox/codesandbox-client/issues/3527)!
Python Zero to Hero - Ep.3 - Python Basics 2 (bool, list, dict)
Tags: python, beginners, tutorial, video
Published: 2020-04-19 20:37:15

---
title: Python Zero to Hero - Ep.3 - Python Basics 2 (bool, list, dict)
published: true
description: Today we learnt another 3 types of Python objects: Boolean (bool), List (list) and Dictionary (dict). I also explained a bit about mutability and hashable in Python.
tags: python, beginner, tutorial, video
---
Today we learnt another 3 types of Python objects: Boolean (bool), List (list) and Dictionary (dict). I also explained a bit about mutability and hashable in Python.

You can get the slide deck [here](https://bit.ly/PythonBasics2) and the example code and homework form [GitHub here](https://github.com/Cheukting/python02hero). Ask questions at my [Twitch channel](https://t.co/7sqvTilzF1?amp=1)

Also, check out Naomi Ceder's [Twitch channel](https://t.co/hXhTu0ZIG8?amp=1) for more beginner's (slightly more advance) tutorial.
Anime.js and GSAP analogue v0.0.2a
Tags: codepen
Published: 2020-04-19 20:28:46

<p>This is analogue of Anime.js and GSAP animation engines.
{Have not a name} v 0.0.2a.
Now all plugin parameters can be set in JSON format and it can display his version.</p>

{% codepen https://codepen.io/duboloms/pen/yLNdeyv %}
COVID-19 Live Updates PWA
Tags: react, codenewbie, javascript, devlive
Published: 2020-04-19 19:49:55

Today i made a COVID-19 Live updates Progressive Web Apps(PWA) using react,
For COVID-19 data i use API( https://api.covid19api.com/ ) it is really useful
and Live API.
Through the API i made this website.
🔗 Website(PWA) : https://covid-19-807c4.web.app 

I upload source code to my github 
👉 https://github.com/TANTANMOY/covid-19
Dart - A statically-typed Language?
Tags: dart, flutter, staticvsdynamic, staticprogramming
Published: 2020-04-19 19:31:07

[Dart](https://dart.dev/) - an emerging programming language developed by Google - is gaining attention for building cross-platform applications. [Flutter](https://flutter.dev/) (a famous UI software development kit, also developed by Google) relies on Dart too.

## Statically Typed
According to its [documentation](https://dart.dev/faq), Dart is **statically typed**, just like its chicks C++ and Java. Variables are statically typed at compilation time. This means if you try to store a string in an integer variable, it would not accept it *"Nah man, not your type of place xD."* But Dart does the favor of preventing the programmer to explicitly specify the data type of the variable. It checks the stored data in the variable at the time of initialization and assumes the data type of variable to be the same as that of the stored data.
```
    var num = 10;   // num is inferred as int
    num = 'A String'; // Error - storing a String in an int variable
```
## Dynamically Typed
Its sound type system makes it faster to compile; thus providing better performance and dev experience. But this doesn't limit the Dart's benevolence here. It also supports **dynamically typed** programming that allows the program to change the type of the variable at runtime just like its side-chick Javascript. So you can play with the data type of your dynamic variable just like you want to and Dart won't haunt you.

So, there are two ways to declare a dynamic variable. You can either use a **dynamic** keyword instead of var while defining a variable or you can just define a variable without initializing it. These ways, the variable created will act as a dynamically typed and you can change its data type whenever and wherever you want.
You can try it yourself @ [DartPad](https://dartpad.dartlang.org/)
```
    // Leaving variable uninitialized creates a dynamic variable
    var anyThing; // anything has no data type it is dynamically typed
    anyThing = "A String"; 
    // anyThing data type is String after the above instruction

    anyThing = 20; 
    // anyThing data type is int after the above instruction


    // Defining variables with dynamic keyword create dynamic variables
    dynamic data = "I'm a Dynamic Variable"; // Data is a String 

    data = 20.5; // Data is a double now 
```
I made a Text-to-handwriting tool to write my college assignments for me 🤓
Tags: showdev, html, css, javascript
Published: 2020-04-19 18:50:29

Hi everyone, I hope you all are safe and doing fine! 

I prefer typing over writing and college told us to write some assignments and I was bored.

So instead of spending 1 hour to write assignments, I spent 3 hours to build a tool that writes assignments for me 🎉. It is called [Text-to-handwriting](https://github.com/saurabhdaware/text-to-handwriting) (see... I'm really good at naming my projects)

Text to Handwriting converts text content to an image that looks like handwriting. So this is what the output looks like:

## Output
![A picture of output from text-to-handwriting that looks very close to the picture taken of handwritten paper](https://dev-to-uploads.s3.amazonaws.com/i/ikkj6js77uyo7m0rd1ud.jpeg)

## Features
- Draw diagrams
- Change font-size, ink color, spacing, etc.
- Upload font button for custom handwritings (so you can create a font of your handwriting from other online tools and upload the font file)

## URLs
### Tool 
https://saurabhdaware.github.io/text-to-handwriting

### GitHub
Do ⭐ the repository 
{% github https://github.com/saurabhdaware/text-to-handwriting %}

### Twitter
Do share it with your twitter fam 🕺🏻
{% twitter 1242426542510067712 %}

--- 

Thank you for reading 🐨🎉 Let me know your thoughts comments. 

You can follow me on [Twitter @saurabhcodes](https://twitter.com/saurabhcodes) and on [GitHub @saurabhdaware](https://github.com/saurabhdaware)

Bye! stay safe and remember we are going get through this 🌻
Multithreading Dashboard App pushing the capabilities of Webapps to new limits
Tags: javascript, html, css, motivation
Published: 2020-04-19 18:28:49

https://www.youtube.com/watch?v=8lqNVaoGNdU

source: https://github.com/neomjs/neo/tree/dev/apps/covid

fully MIT licensed => build something shiny on top of it :)
How to connect to Twilio Video room with Python
Tags: twiliohackathon, python, django, coding
Published: 2020-04-19 18:22:04

Hello, I am using Twilio programmable video REST API. 

I have been able to create rooms, but how to connect to the rooms is a problem for me. 

I am using Django (Python) but the example I saw in the Twilio docs is in JS. 

Any help to achieve this with python?
Thanks
My first NLP kernel for Text Classification
Tags: machinelearning, datascience, beginners, showdev
Published: 2020-04-19 18:16:53

I built a Kaggle kernel for Text Classification. Text Classification is a part of Natural Language Processing in which text data is classified into different classes.

I have built a model based on the Multinomial Naive Bayes which is built in the Scikit-learn(sklearn) python library. The sklearn library is also used for feature extraction using TF-IDF method. One more important library being used is the Natural Language Toolkit (nltk) which is used for preprocessing and lemmatization of text data.

The dataset used is having headlines from different news sites and is used for classification as clickbait or non-clickbait.

![clickbait](https://dev-to-uploads.s3.amazonaws.com/i/bxur437k3px77y8w3mo0.jpg)

The link to the kernel is [here](https://www.kaggle.com/amananandrai/clickbait-detector-naive-bayes-classifier).

Please share your views in the comments below about improving the kernel.
Also, please upvote the Kernel on Kaggle so that I can make more such models in the future.
String.split() in Javascript
Tags: javascript
Published: 2020-04-19 17:56:33

`split` is a method used on strings to as the name implies, break the string at the specified breakpoint. The pieces are converted to values in an array.

## Syntax
```js
'string'.split(breakPoint);
```

`split` looks for a point in a string that matches the `breakPoint` provided, and at those points splits the string.

## Return value
The returned value is an array whose values are the pieces of the broken string.

## Format of breakpoints
Breakpoints allow two formats: strings and regex. Let's see them in action.

### String breakpoints
#### Example 1

```js
const str = 'String.split() in Javascript article, (yeah'
const pieces = str.split('(');
console.log(pieces);
// Expected output
// [ 'String.split', ') in Javascript article, ', 'yeah' ]
```
As you'd notice, the string is broken at points which matches '('. You'd also notice that the pieces do not contain this value anymore. You can think of it like this: `split` replaces the breakpoints with a break.

#### Example 2
```js
const str = 'String.split() in Javascript article'
const pieces = str.split(' ');
console.log(pieces)
// Expected output
// [ 'String.split()', 'in', 'Javascript', 'article' ]
```

As seen above, the spaces (' ') are replaced with breaks

### RegExp breakpoints

Just like string breakpoints, `split` breaks the strings at points that matches the regex.

#### Example 1

```js
const str = 'String.split() in 1b in 1c in Javascript article'
const regex = /\d{1}.{1}/
const pieces = str.split(regex);
console.log(pieces)
// Expected output
// [ 'String.split() in ', ' in ', ' in Javascript article' ]
```

The regex matches strings with one number (`\d{1}`) and one character (`.{.{1}`), hence those points are replaced with breakpoints. We can't use string breakpoints for such cases because of the various combinations of letters and characters.

#### Example 2

```js
const str = 'String.split() in 1b in 1c in Javascript article'
const pieces = str.split(/.{2}in.{2}/);
console.log(pieces)
// Expected output
// [ 'S', 'split(', '', '', 'avascript article' ]
```

The regex matches points that begin with two characters and ends with two characters with the string 'in' in-between. Points 'tring.', ') in 1', 'b in 1' and 'c in J' matches the regex and the string is broken at those points.

## Wrap Up

The best breakpoint to use depends on your use case. If you want to be overly specific, string breakpoints are easy to use. Regex breakpoints come with a bit of complexity but very effective.

Thanks for reading : )
ugly code that works...
Tags: coding
Published: 2020-04-19 17:47:54

---
title: ugly code that works...
published: true
description: 
tags: coding
---

As one of the co-founders of CrossBrowserTesting I wrote a LOT of code. We started in 2008 and went from nothing to first customer in maybe 9 weeks.

So I wrote a lot of code fast.

Fast forward to now. It is 2020 and a lot of the code I wrote back in 2008 and later is still running. It has been massaged and changed a bit by much smarter employees but a good portion of what powers CBT today is my ugly and quickly written code.

None of it is great. About the only thing that I can say about the code that is good, is that it has lasted. And continued to work. And that ugly code helped us sell the business.

Do not be afraid to write ugly code that works.
10+ Best CSS LOADER For Front-end Developers
Tags: css, javascript, webdev, beginners
Published: 2020-04-19 17:46:59

---
title:10+ Best CSS LOADER For Front-end Developers
published: True
description: 
tags: #css #javascript #webdev #beginners
---


<p>1.CSS only stairs loader.</p>
{% codepen https://codepen.io/ispal/pen/mVaaJe %}


<p>2.I tried different animations for CSS loaders. Pick what you want ;)</p>

{% codepen https://codepen.io/GeoffreyCrofte/pen/vFBIh %}

<p>3.CSS loader that uses a sass map for defining colors.</p>

{% codepen https://codepen.io/hexagoncircle/pen/eZawWv %}



[<p>If You Like This Article then check Out more CSS loader available here <h3><b>gscode.in</b></h3></p>](https://gscode.in/css-loader/)

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



<p>4.Fancy single element pure css loader &amp; spinner</p>

{% codepen https://codepen.io/jenning/pen/MbmyBy %}

<p>5.... a Sassy SVG snippet.</p>

{% codepen https://codepen.io/rgg/pen/LNyXer %}

<p>6.Exactly like every loader/spinner icon made ever lol</p>

{% codepen https://codepen.io/derekmorash/pen/grvOZx %}

<p>7.Exactly like every loader/spinner icon made ever lol</p>

{% codepen https://codepen.io/derekmorash/pen/grvOZx %}

<p>8.I made this for a health care web app.</p>

{% codepen https://codepen.io/anycircle/pen/gseIK %}


<p>9.All loaders are animated with pure SVG animation. </p>

{% codepen https://codepen.io/nikhil8krishnan/pen/rVoXJa %}

<p>10.CSS loaders</p>

{% codepen https://codepen.io/RRoberts/pen/pEXWEp %}

<p>11.loaders</p>

{% codepen https://codepen.io/zslabs/pen/YwygoQ %}

<p>12.Some simple CSS loaders ...</p>

{% codepen https://codepen.io/aaroniker/pen/omvYNZ %}

[<p>If You Like This Article then check Out more CSS loader available here <h3><b>gscode.in</b></h3></p>](https://gscode.in/css-loader/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p6msetng7gezwxktgsjz.png)
History of Internet in hindi (इन्टरनेट का इतिहास)
Published: 2020-04-19 17:46:04

History of Internet in hindi (इन्टरनेट का इतिहास)
सबसे पहले सन 1969 में अमेरिका के रक्षा विभाग में  Advance Research Project Agency (ARPA) नाम का नेटवर्क लांच किया गया जिसका प्रयोग गुप्त सूचनाओ को भेजने के प्रयोग में लाया गया. सन 1971 में सबसे पहला Email Ray Tomlinson ने भेजा था | जैसे जैसे इसके फायदे का पता चलता गया वैसे वैसे ही इसका इस्तेमाल बढता गया. भारत में इन्टरनेट 80 के दशक मे आया.

इंटरनेट का उपयोग
आज इन्टरनेट के प्रयोग का दायरा बहुत ही ज्यादा असीमित हो चूका है. अपने प्रारंभिक दौर में इन्टरनेट का दायरा बहुत ही ज्यादा सीमित था और इसका प्रयोग वैज्ञानिक और रक्षा विभाग से सम्बंधित कार्यों कि सूचनाओं के आदान प्रदान के लिए ही किया जाता था.

लेकिन जैसे जैसे इन्टरनेट की पहुच में आम आदमी आया इसके उपयोग का दायरा बढ़ता ही चला गया और आज असीमित क्षेत्रों में इसका उपयोग होने लगा और इन्टरनेट आज हमारे जीवन एक अभिन्न हिस्सा बन चूका है. आज इन्टरनेट का उपयोग कई चीजों में होगे लगा जैसे :

मनोरंजन के लिए
बैंकिंग के लिए
किसी भी डॉक्यूमेंट को मेल के माध्यम से ट्रान्सफर करने के लिए
आपस में बात चीत करने के लिए
नए दोस्त बना सकते है
online पढाई कर सकते है
घर बैठे शोपिंग कर कर सकते है
न्यूज़ पढ़ सकते है
मोबाइल, बिजली, phone का बिल जमा कर सकते है.
बिज़नस के प्रचार प्रसार के लिए.
विज्ञापन के लिए
किसी भी प्रकार की जानकारी के लिए इत्यादि
Internet ke labh aur hani in hindi
जहाँ इन्टरनेट के बहुत से फायदे है वहीँ इसके बहुत सारे नुक्सान भी है फायदे कि बात करें तो इन्टरनेट के माध्यम से जहाँ आप बैठे बैठे online banking, इलेक्ट्रिक बिल, online tv movie, game, शोपिंग, विडियो कालिंग, फाइल शेयरिंग से लेकर और पढाई तक कर सकते है वही इसकी कुछ हानियाँ भी है.

कुछ लोग इसके आदी हो जाते है और दिन दिन भर इससे चिपके रहते है जिससे उनकी आँखों की रौशनी कम हो सकती है, साथ यह लोगों ही स्मृति यानि याद्दाश्त को भी बहुत प्रभावित करता है साथ ही इन्टरनेट का इस्तेमाल करने से वायरस का भी खतरा रहता और कुछ हैकर आपकी निजी जानकारी को भी चुरा सकते है जो आपके लिए आर्थिक रूप से हानिकारक हो सकती है.

Intranet Kya hai? Intranet Meaning in Hindi - https://www.techzyan.com/
Internet ki Speed Kaise Badhaye - https://www.360samachar.com/

सामान्य प्रश्नोत्तरी :
Q. इन्टरनेट क्या है?
A. इन्टरनेट एक दुसरे से जुड़े कई कंप्यूटरों का जाल है जो राउटर एवं सर्वर के माध्यम से दुनिया के किसी भी कंप्यूटर को आपस में जोड़ता है.
Q. इन्टरनेट को हिंदी में क्या कहते है?
A. इन्टरनेट को हिंदी में “अंतरजाल” कहते है.
Q. इन्टरनेट का मालिक कौन है?
A. इन्टरनेट का व्यक्तिगत कोई भी मालिक नहीं है.
Q. इन्टरनेट कि खोज किसने की?
A. इंटरनेट की खोज के पीछे कई लोगो का हाथ था.
Q. भारत में इन्टरनेट कब आया था?
A. भारत में इन्टरनेट 80 के दशक मे आया.
npm ERR! Cannot read property 'match' of undefined
Tags: npm, errors, node
Published: 2020-04-19 17:28:18

Some time back, I downloaded a react-tutorial-project from GitHub and tried to install the dependencies with the command `npm install`. It threw the following error and I couldn't install the packages.
```
PS C:\Users\Sewwandi\Desktop\reactjs-tutorial-master> npm install
npm ERR! Cannot read property 'match' of undefined

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Sewwandi\AppData\Roaming\npm-cache\_logs\2020-04-19T15_32_14_320Z-debug.log
PS C:\Users\Sewwandi\Desktop\reactjs-tutorial-master> 
```
If you had the same error code, there is a quick workaround. Follow the following steps.

**First step**
Delete `node_modules` and *lock-file*. (`package-lock.json`, `yarn.lock`)

**Second step**
Run `npm install` again.

If there are any issues, feel free to share them in the comments section :)