teleren/devto huggingface dataset:
All about HTTPS (part-1)
Tags: tutorial, beginners, todayilearned, learning
Published: 2021-07-10 09:41:12

## Why do we even need HTTPS protocol?

When you arrived at this post, do you see any green pad lock on your address bar of the browser just in front of dev.to? Let me tell you what is it and why is it there?

This green lock represents that the site is using HTTPS as its protocol and is relatively more secure than when it is not there.

We need HTTPS for mainly three reasons:

**1. Privacy**
Lets talk about Privacy first. Lets say we have three people Alice, Bob and Candice. Alice is trying to send messages to Bob and the message is not encrypted meaning plain text. If we don't have HTTPS an evil person like Candice who is jealous of their friendship can listen on the communication and also can capture the messages potentially for doing evil things. 

 ![privacy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlm1i0k4b89nyyrx77kx.gif)
 
Privacy means that no one can eavesdrop on your messages. The green padlock on the URL bar of our browser tells us that there is no one watching over our shoulder. 

**2. Integrity**
Second comes Integrity. Lets suppose when Alice sends another message to Bob unencrypted saying some nice words, but before it reaches Bob Candice intercepts the message and updates it with bad words about Bob and forwards to him, ruining their friendship. This is called man-in-the-middle attack. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6u8t90fd7jw2km55n52.png)
 
Integrity means that the message is not manipulated on the way to its destination. 

**3. Identification**
Lets take the same example from above. Identification means that Bob can check that this message is indeed coming from Alice. A digital signature attached to a message can identify the sender. And when you are browsing the web, identification means that the site that you are visiting is indeed the one you think it is.
 HTTPS, via SSL certificates, ensures you are connected exactly with the receiver you would expect. This SSL certificate is valid and has been issued by a legitimate Certificate Authority. You are good to go.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pfnv0ye0h8p748pbx8a.png)
 

Now that we know the why, the [next step](https://dev.to/akashkumarsikarwar/all-about-https-part-2-2hnd) is to understand symmetric and asymmetric encryption.
I created a real life project on Next.js : cinemovies.in
Tags: nextjs, typescript, cinemovies
Published: 2021-07-10 08:58:50

WEBSITE LINK - https://cinemovies.in.

Hi, I have created this torrent movie browsing and download website using next.js, typescript.

It's based on yts.mx public API.

I keep it simple and clean ad free experience with dark mode feature. Any suggestions will be appreciated.

And yes, bookmark it too for latest good movies for weekends.
Module 8 - Making apps with Grid
Tags: javascript, html, css, scrimba
Published: 2021-07-10 08:42:22

[**Module 8**](https://scrimba.com/learn/frontend) is completed and time to share my experience!

**First Part** is to remind how to use flexbox and its many properties, nearly everything was covered and it ended with making a simple flexbox card (which thanks to *interactive code* you can do fully yourself!).

![Scrimba interactive Flexbox card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r93k62x3ufjly79egxk5.png)

**Second Part** was about using flexbox and various APIs at once to solidify your skills. In this part you will see how 4 different websites are done and with every website you will have a challenge to make it better. 
![Scrimba Interactive Hex API note](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a6nq6v7zsvmyi9m8xvm.png)

**Third Part**, just as the first one was made by a great teacher, [Kevin Powell](https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw). Finally we learn about Grid. This part covers most properties, gives great explanation to how even more complicated properties like auto-fill work and gives you an easy opportunity to play with them. 

**Forth Part**, which is also the last one repeats the pattern of joining new layout tool with various APIs. You get another 5 websites built and you need to use both grid and your async skills to improve the website. 
![Scrimba Pokedex Website code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umzfs40vwzo68kvvdl19.png)

This module is nice to get started with Grid, refresh your API skills and you could even learn flexbox quite well if you didn't know how to use it before (I would still advise you to learn from [Module 5] (https://dev.to/dgx32123/responsive-design-338g) if you want to learn it solidly).  
Despite many challenges, it's still **not enough** to really make it stick so further practice is essential. If you want to know even more about Grid check out Complete Guide to Grid on [CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) or very popular [Dev Post](https://dev.to/mustapha/css-grid-illustrated-introduction-52l5) and make a cool website!
Set & persist Google DNS server in WSL2 | Notes
Tags: notes, wsl2
Published: 2021-07-17 19:05:35

---
title: Set & persist Google DNS server in WSL2 | Notes
published: true
date: 2021-07-10 08:15:48 UTC
tags: notes,wsl2
canonical_url: https://abhi.page/notes/set-persist-google-dns-server-in-wsl2/
---

Here is how you setup an alternative DNS server (like. Google DNS) on WSL2 and persist it between WSL restart:

1. Create the WSL config file (if it does not already exist): `/etc/wsl.conf`
2. Enter the following lines to preserve the DNS config between restarts:
```
[network]
generateResolvConf = false

```
3. Shutdown WSL and start again by running the following command in Windows terminal: `wsl --shutdown`
4. Edit (or, create) the file `/etc/resolv.conf`:
  1. Comment any other line that starts with “nameserver”.
  2. Enter the following lines:
```
nameserver 8.8.4.4
nameserver 8.8.8.8

```
5. Restart WSL again after running the following command in Windows terminal: `wsl --shutdown`

* * *

[**Read on abhi.page**](https://abhi.page/notes/set-persist-google-dns-server-in-wsl2/)
Standing on the Shoulders of Giants [RE#3]
Tags: programming, architecture, productivity, leadership
Published: 2021-07-10 08:09:30



Have you ever heard words like below?

- "We'd better off not using design patterns."
- "Design patterns introduce *complexity* and we want to keep things simple."
- "Those patterns are just for *huge codebases*."

Undoubtedly, the more experienced a developer is, the more knowledge on design patterns/anti-patterns, common pitfalls, and best practices they posses. So, you can weigh the technical superiority of a company/team/developer with their appreciation for [*standing on the shoulders of giants.*][standing]

So, if your answer was positive, recalibrate your technical expectations from your current workplace.

[standing]: https://en.m.wikipedia.org/wiki/Standing_on_the_shoulders_of_giants

---

***About Regular Encounters***
*I've decided to record my daily encounters with professional issues on a somewhat regular basis. Not all of them are equally important/unique/intricate, but are indeed practical, real, and of course,* ***textually minimal.***
Python, Machine Learning Algorithm, C#, Asp.net programming language, MySQL, MSSQL
Tags: machinelearning, python, csharp, php
Published: 2021-07-10 08:07:01

I am Software engineer and also Research Student if anyone person interested make project in machine learning algorithm or c#, asp.net, php programming language and also any management system software if anyone person want to make project so I can make anyone person and I am doing work in fiverr and up work
What are your opinions of the Web Animation API (WAAPI)?
Tags: webdev, discuss, javascript, typescript
Published: 2021-07-10 07:48:37

I recently learned [Matt Perry](https://twitter.com/mattgperry) the creator of Framer Motion, Popmotion, and Pose is creating another [animation library](https://twitter.com/mattgperry/status/1412121262449627140?s=20) based on the Web Animation API. 

{% twitter 1412121262449627140 %}

Similarly, last year I created [@okikio/animate](https://www.npmjs.com/package/@okikio/animate) an animation library based on the Web Animation API. 

So, I am wondering is there any actual interest in a an animation library that uses the Web Animation API?
Format a number to any currency using Javascript
Tags: javascript, react, reactnative
Published: 2021-07-10 06:53:32

This article will explain you how to convert a number to any currency like - INR, USD, EUR etc using the Javascript international number format API- Intl.NumberFormat.

###Basic Usage-
`var number = 3500;`

If you don't specify any locales, it will return the  formatted number based on your location.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhk5oktku419zsbed8xz.png)

I am from India , so it returned the Indian formatted number.

###Format number using locales-

You can specify location to format number according to it.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytnxzds27fb32h9r2fr8.png)

###Format number to any currency using locale-

To convert number to currency you need to mention the **style**  and the **currency** format-
1. style= currency
2. currency=  USD, INR, EUR etc 

#####For Indian currency-
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uw5yae0hfmrpe4gsj3q.png)

#####For US dollar currency-
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8fagby23tx3ddfu0y0u.png)




Using this Intl.NumberFormat you can also format other number like- km/hr, litres, etc,

 
If you liked this content you can support me by following me on twitter and Instagram for more such contents-

[Twitter - https://twitter.com/frontend_jsx](https://twitter.com/frontend_jsx)
[Instagram - https://www.instagram.com/frontend.jsx/](https://www.instagram.com/frontend.jsx/)
My javascript / tech / web development newsletter for 2021-07-10 is out!
Tags: javascript, tech, discuss
Published: 2021-07-10 06:50:31

---
title: My javascript / tech / web development newsletter for 2021-07-10 is out!
published: true
description: A roundup of all the best javascript, tech and web development links posted to my linkblog in the past week
tags: javascript, tech, webdev, discuss
---
In this week’s edition:

Music albums derived from games, software engineering formal methods, the shadow dom, the business of digital transformation

https://markjgsmith.substack.com/p/mark-smiths-newsletter-10-07-2021

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Copy in Windows - Paste it on Android(clipboard Sync)
Tags: android, howto
Published: 2021-07-10 06:45:43

If your are a mac user and using Apple Eco system than this post is not for you.

Now if you are using a window machine, than you definety faced this problem of coping on desktop/laptop and paste it of your Andoid device.
there is no system software provide by window to do so,
But don't worry Here, I going to share with you a mothod and you can do it by just in simple 3 steps.


**step:1** [Download Clipbrd Beta](https://play.google.com/store/apps/details?id=com.clipbrd&hl=en_IN&gl=US) from Google Play Store
![Download Clipbrd Beta android](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ah35u3oeu1udwttuxbti.jpeg)


**step:2** [install Clipbrd Beta chrome extension](https://chrome.google.com/webstore/detail/clipbrd-beta/febnkhppinonnjgfjdigiipdajophkkk) from Chrome Web store
![install Clipbrd Beta chrome extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdgbvs4sisk5x202cbuf.jpg)

**step:3** sign in with same Email id on both(chrome extension and Android App)

Now all set to go
open Clipbrd Beta on android and turn on sync and also turn on sync in your windows chrome.
If you find this helpful give a ❤
Generating Flutter app icons automatically
Tags: flutter, ios, android
Published: 2021-07-10 06:11:55

Coming from Ionic, it's pretty straightforward to [generate app icons](https://daily-dev-tips.com/posts/ionic-resources/) for your app. While doing some research, I learned it's easy for Flutter as well!

Today we'll learn how to automatically generate App Icons for iOS and Android-based on one image source!

The idea is that apps need many different sizes of App Icons for all kinds of devices and resolutions.
Yet, we don't want to make all these images ourselves.

## Adding the flutter_launcher_icons plugin

Flutter is built in a way we can easily add plugins.
For this one, head over to your `pubspec.yml` file and add the following line to your dev_dependencies.

```yaml
dev_dependencies:
  flutter_launcher_icons: '^0.8.0'
```

Then we need to install this plugin by running:

```bash
flutter pub get
```

## Adding our app icon

For our base icon to work, I would suggest having a logo that is 1024x1024px in size. Also, don't use alpha or transparency in this image (for iOS). For Android, you can use transparency.

However, for this demo, I'll use one generic image.

Place this image in a folder called `images` at the root of your directory.

I made this basic image for my app icon just to demo how it will look.

![Basic app icon](https://cdn.hashnode.com/res/hashnode/image/upload/v1625379130988/ToaBUOP7J.png)

Head back over to the `pubspec.yml` file and add the following configuration.

```yaml
flutter_icons:
  android: true
  ios: true
  image_path: 'images/icon.png'
```

We could also specify a specific image for iOS or Android:

```bash
flutter_icons:
  image_path_ios: 'images/icon-ios.png'
  image_path_android: 'images/icon-android.png'
```

To generate the icons, we can run the following command.

```bash
flutter pub run flutter_launcher_icons:main
```

Now when we run the application on our simulator, we should see the app icon we defined.
I also opened up the Xcode assets to showcase all the different sizes that have been created.

![iOS app icons in Flutter](https://cdn.hashnode.com/res/hashnode/image/upload/v1625379576412/iGxjCZN1E.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
The great Dev Campaign 🎊💯🙏🙏
Published: 2021-07-10 05:58:40

This is a plea to every developer out there who loves code as much as I do, I have a youtube channel that I love with my heart and soul 🤗... Sadly my pc recently crashed and cannot be fixed😭💔... I can't let my dream die here not now not ever. Please if you can this is a fundraiser link to buy me a coffee☕ https://www.buymeacoffee.com/FortuneCodes  or PayPal fortunelangat54@gmail.com any amount will be appreciated 🙏❤️❤️. We aren't all financially enabled so if you can't donate I'll appreciate if you would subscribe and get me to monetization and pliz share this post Kindly. This is my pride and joy💪🥲.https://youtube.com/c/FortuneDevAcademy Hope I'll be back soon producing coding videos soon. Any help is appreciated, signing out pleading, Langat Fortune.
LinkedList Questions: Reverse a Linked List - Recursive version
Tags: algorithms, cpp, codenewbie, linkedlist
Published: 2021-07-10 05:51:03

In this series of posts, I will discuss coding questions on the `LinkedList` Data structure.
The posts in this series will be organized in the following way,

1. Question Link ❓
2. Possible Explanation 📝
3. Documented C++ Code 🧹
4. Time and Space Complexity Analysis ⌛🌌

## The Question

Given the `head` of a singly linked list, reverse the list, and return the reversed list.

[https://leetcode.com/problems/reverse-linked-list/](https://leetcode.com/problems/reverse-linked-list/)

> 💡 Give yourself at least 15-20 mins to figure out the solution :)

## Explanation

Its bit **tricky** so pay your atmost attention,

The idea is to make *current* node's successor( `cur→next` ) point to *current* and there by reversing the list. (Here, we are under assumption that the list after current node is already reversed ).

Lastly, we will return the last node's pointer as the new `head` of our reversed linkedlist.

See the recursion animation to make things more clear, 
{% youtube nkxfM3fYaG8 %}

## C++ Code

### Definition of Linked List

```cpp
//Definition for singly-linked list.
struct ListNode
{
    int val;
    ListNode *next;
    ListNode() : val(0), next(nullptr) {}
    ListNode(int x) : val(x), next(nullptr) {}
    ListNode(int x, ListNode *next) : val(x), next(next) {}
};

```

### Solution

```cpp
ListNode *reverseList(ListNode *head)
    {
        /*
        *Approach
            -Let's say list is n0 -> n1 ->... "nk" -> nk+1 -> ...n->null
            -when we are on nk, we assume nk+1 <-...n i.e. the list ahead is reversed 
        */

       //* When 1. list contains 0 or 1 node, 
       //* 2. head is pointing last node
        if (head == nullptr || head->next == nullptr)
            return head;

        ListNode *last = reverseList(head->next);

        //note: To make sure this works, we need to make sure:
        //> head->next and head exits (base condition)
        head->next->next = head; //! crux

        head->next = nullptr;
        
        return last;
    }
```

## Complexity Analysis

### Time Complexity: O(n)

We will visit every node once.

### Space Complexity: O(n)

The size of recursion stack as we will go **n** levels deep.

## References:

[https://leetcode.com/problems/reverse-linked-list/solution/](https://leetcode.com/problems/reverse-linked-list/solution/)
ampy 執行輸出中文的問題
Tags: micropython, adafruit
Published: 2021-07-08 11:51:35

如果你有使用 ampy 執行 MicroPython 程式, 可能會發現如果你的程式有輸出中文, 就會變成亂碼, 例如執行這個只有 print 的程式：

```python=
print('測試')
```

執行結果如下：

```
>ampy -p com6 run test.py
������
```

如果你將輸出結果轉向到檔案, 像是：

```
>ampy -p com6 run test.py > ttt.txt
```

再用文字編輯器開啟這個文字檔, 你會發現可以正常看到輸出的文字：

![](https://i.imgur.com/PobojMH.png)

文字編碼也是 UTF-8 沒錯, 這表示程式的輸出是正確的, 只是可能原本單一中文字的多個位元組被切開成一個一個位元組後當成多個字元顯示, 所以變成無法正常顯示的 6 的字元了。

這個問題只會出現在 1.1.0 版的 ampy 上, 如果我們回頭去看原始碼, 會發現在 [pyboard.py 中有一個函式](https://github.com/scientifichackers/ampy/blob/dd4ca50b57c3bd24decc8ca8059be8d9ee48a1a0/ampy/pyboard.py#L51)如下：

```python
def stdout_write_bytes(b):
    b = b.replace(b"\x04", b"")
    stdout.write(b)
    stdout.flush()
```

其中的參數 b 是一個 bytes 物件, 通常的長度只有 1, 就是從序列埠讀取 MicroPython 程式執行結果的下 1 個位元組, 而 0x04 是 MicroPython 通知結束的特殊數值。這裡為了讓程式執行結果可以經由 USB 傳輸線串流顯示到電腦端, 所以採取了每收到 1 個位元組就立刻清除緩衝區強迫輸出到螢幕上的方式。這個方式對於一般的英數字沒有什麼影響, 可是若是中文字, 在 UTF-8 的編碼下, 至少會有 2 個位元組, 上述作法會把多個位元組拆散, 視為多個字元顯示, 因而造成個別位元組都是無法正常顯示的字元。

要解決這個問題, 最簡單的方式就是把函式中清除緩衝區的哪一行去掉, 改成這樣：

```python
def stdout_write_bytes(b):
    b = b.replace(b"\x04", b"")
    stdout.write(b)
    # stdout.flush()
```

讓位元組連續輸出, 不要硬去清除緩衝區, 系統就不會認為個別位元組是單一字元了。執行結果如下：

```
>ampy -p com6 run test.py
測試
```

您可能會擔心把清除緩衝區的動作去除, 這樣會不會要累積一大堆輸出結果後才會在畫面上看到結果？那我們也可以這樣做, 依據 [UTF-8 編碼的規則](https://zh.wikipedia.org/wiki/UTF-8#%E6%8F%8F%E8%BF%B0), 每收到一個完整的 UTF-8 編碼的字元就清除緩衝區強迫送出字元, 將同一函式改寫如下：

```python
utf8Char = b""
counts = 3
def stdout_write_bytes(b):
    global utf8Char, counts

    for i in b:
        curr = b'' + b    
        if curr==b'\x04':                 # end of output
            return;
        elif curr <= b'\x7f':             # 1-byte UTF-8 char
            utf8Char = curr
            counts = 0
        elif b'\xC0' <= curr <= b'\xDF':  # 2-bytes UTF-8 char
            utf8Char = curr
            counts = 1
        elif b'\xE0' <= curr <= b'\xEF':  # 3-bytes UTF-8 char
            utf8Char = curr
            counts = 2
        elif b'\xF0' <= curr <= b'\xF7':  # 4-bytes UTF-8 char
            utf8Char = curr
            counts = 3
        elif b'\x80' <= curr <= b'\xBF':  # 1 byte in a UTF-8 char
            utf8Char = utf8Char + curr
            counts = counts - 1
        
        if counts == 0:                   # 1 UTF-8 char readed
            print(utf8Char.decode('UTF-8'), end="")
            counts = 3                    # reset count
            utf8Char=b''

```

這樣就可以使用 ampy 執行含有中文輸出的 MicroPython 程式了。
Style Your Bash Terminal Without ZSH
Tags: fancygit, terminal, linux, tweaks
Published: 2021-07-10 05:31:58

Tweak your Linux terminal in a minute, without using ZSH.

## Begin Tweaking

Copy this line of code:

```bash
curl -sS https://raw.githubusercontent.com/diogocavilha/fancy-git/master/install.sh | sh
```

Open `Terminal` and paste the copied command there and press enter.

![Bash Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g30k45bf8s0qaavc0tw0.png)

After this command completes, quit your terminal and open it up again.

Voila!

![Bash Terminal - FancyGit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qniyo9edlvpkt30mytwu.png)

You've already tweaked your terminal!

## Further Modification of Already Modified Terminal

I'm not really a fan of this look, so I'm going to modify it a bit.

There's many themes available on the `fancygit` repository.

![Fancygit themes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73ulshhjs3li4lj2y6vf.png)

I like the `fancygit human` theme, so I'd open a terminal and enter this exact command.

Now my terminal looks like this:

![fancygit human](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3m1f0wddsmwfh0gncll.png)

But I'd rather it not show the time.

What are you waiting for, open your terminal, we're going to fix it from there.

On your terminal and enter this command:
```bash
fancygit --help
```

A help menu would appear with all the options available for `fancygit`.

![Fancy-Git Help](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4y7atoy55x42npxlbsr.png)

We can see that the command `fancygit --disable-show-time` would remove the time, so we just copy it and then quit the menu by pressing `q` and paste the copied command.

![Customize bash terminal theme with fancygit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcfagaas94kp1ksyt2gz.png)

Done. We're done.

[Fancy-Git | Github](https://github.com/diogocavilha/fancy-git)
[@shafiemoji | twitter](https://twitter.com/shafiemoji)
How Trakka Uses Predictive Analytics to Prevent Unplanned Downtime
Tags: maintenance
Published: 2021-07-10 05:14:14

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4m6ocp8qhosxpusf73t.jpg)
Forestalling gear disappointments and diminishing spontaneous support is basic to efficiency and the primary concern. Prescient upkeep with Trakka® will help better oversee hazard in your support activity, take out impromptu hardware disappointments, and increment by and large consistency, efficiency, and security. 

Profound Industry Expertise and Predictive Maintenance Technology 

[DINGO](https://www.dingo.com/) utilizes an extraordinary blend of individuals, innovation, and information to give noteworthy bits of knowledge that further develop resource wellbeing, increment efficiency, and broaden resource life. How can it function? 

Gathering Data 

With Trakka's consistent combinations and in-field information assortment abilities, all constant and cluster condition observing information can be ingested into one stage and broke down at the same time. We make the information assortment measure basic by utilizing pre-designed interfaces to associate with your current information sources and IT framework. 

Boosting Asset Health 

Trakka consolidates prescient investigation with work process the board, including shut circle, nonstop observing, and activity following. Issues stay open and are firmly followed until your hardware gets back to its typical working state. This methodology expands resource accessibility, further develops resource wellbeing, and upgrades asset usage.