teleren/devto huggingface dataset:
HTTP VS HTTPS ???
Published: 2021-08-04 05:07:05

Hello Techies...
Today we are going to discuss about a very interesting topic, that is HTTP vs HTTPS
We all are living in the tech world. We all are aware of URL's But did you observe that some of the URL's starts with HTTPS and few starts with HTTP Now we are going to discuss the difference between them

A website that uses HTTP has http:// in its URL, while a website that uses HTTPS has https://.

HTTP ( Hypertext Transfer Protocol )
HTTP is a protocol it's a prescribed order and syntax for presenting information and it is used for transferring data over a network. Most information that is sent over the Internet, including website content and API calls, uses the HTTP protocol.

IS HTTP SECURE ?
Many of us have a doubt that Is accessing HTTP linked website safe? Now I am going to clear your doubts
If you are just browsing the web, looking at YouTube and watching movies, TV shows , HTTP is fine. However, if you’re logging into your bank or entering credit card information in a payment page, it’s imperative that URL is HTTPS. Otherwise, your sensitive data is at risk.

HTTPS ( Hypertext Transfer Protocol Secure )
HTTPS full form itself tells us that its a secure prototype. The S in HTTPS stands for "secure." HTTPS uses TLS (or SSL) to encrypt HTTP requests and responses  

IS HTTPS SECURE ?
Yes, It's for sure.
If you still have doubt in it. 
I'll show you an example

If a hacker is attacking a website and if it is a HTTP website He could access the data some thing like this

HTTP/1.1 200 OK
Date: Wed, 30 Jan 2019 12:14:39 GMT
Server: Apache
Last-Modified: Mon, 28 Jan 2019 11:17:01 GMT
Accept-Ranges: bytes
Content-Length: 12
Vary: Accept-Encoding
Content-Type: text/plain

Hello World!

If a hacker is attacking a website and if it is a HTTPS website He could access the data some thing like this

t8Fw6T8UV81pQfyhDkhebbz7+oiwldr1j2gHBB3L3RFTRsQCpaSnSBZ78Vme+DpDVJPvZdZUZHpzbbcqmSW1+3xXGsERHg9YDmpYk0VVDiRvw1H5miNieJeJ/FNUjgH0BmVRWII6+T4MnDwmCMZUI/orxP3HGwYCSIvyzS3MpmmSe4iaWKCOHQ==

Did you observe the difference?????

Suggestion : Better to use a website containing a URL with HTTPS

                                                 -Vivek Malla
Hello Everyone! This is my First Dev Post & Generative Art Work
Published: 2021-08-04 04:25:35

Hi, this is my first Dev Post here.

I'm not expected to make a big splash or anything.
But I was encouraged by my bootcamp instructor and career counsellor to make blog posts on places like here or github (see my repository based on the uploaded images below) since it might help me into a career in tech or coding.

After being burnt out during the previous wave of this pandemic, I decided on a career change from the healthcare sector, an undertaking I am not taking lightly of.
I am currently attending a coding bootcamp based in Montreal, Canada and the pace there is not easy. I don't expect to learn too many things, except for the very basics, but I'll be leaning more on its career support for technical interviews (which I have no experience or familiarity in).

Fortunately, I have taken some coding classes back in high school 10+ years ago (e.g. Turing, MS Visual Basic) so learning a few tricks and shortcuts here and there with JS, Python, and some few other tidbits of other languages are just rusty skills I have used in the past, but not polished in a long time.

While I would have loved to just keep self-learning and learn to code on my own time, I've only recently completed my rehab therapy (for occupational burnout), and feeling more confident in working again. With that said, unemployment payments and personal savings (originally set aside for a future big purchase) is my only sources of income, which soon will go dry in the coming months.

Having said that, the time needed to maintain self-paced learning and discipline has just accelerated and I felt like coding bootcamp is now my marathon shot into this career.

Enough about me, one of the project I have done in this repo (you can check all my other repos, though mostly they are from the coding bootcamp I am currently attending as of August 2021) is about using JS to create an animated art of shapes, varying in sizes, colors, opacity, border radius, and adjustable user interaction to manipulate them.

https://github.com/bcha92/js-consolidation_optional-1.git

Cheers,

Brandon
Create a Circle Shape with Letters
Tags: nextjs, javascript
Published: 2021-08-04 04:14:13

[sample]

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


The component itself is very simple.
Using `div` tag and some `span` tags for letters.

`DisplayCircle.js`
```js
import styles from "./DisplayCircle.module.css";

export const DisplayCircle = () => {
  return (
    <div className={styles.container}>
      <span className={`${styles.circle} ${styles.circle_1}`}>h</span>
      <span className={`${styles.circle} ${styles.circle_2}`}>e</span>
      <span className={`${styles.circle} ${styles.circle_3}`}>l</span>
      <span className={`${styles.circle} ${styles.circle_4}`}>l</span>
      <span className={`${styles.circle} ${styles.circle_5}`}>o</span>
      <span className={`${styles.circle} ${styles.circle_6}`}>w</span>
      <span className={`${styles.circle} ${styles.circle_7}`}>o</span>
      <span className={`${styles.circle} ${styles.circle_8}`}>r</span>
      <span className={`${styles.circle} ${styles.circle_9}`}>l</span>
      <span className={`${styles.circle} ${styles.circle_10}`}>d</span>
      <span className={`${styles.circle} ${styles.circle_11}`}>!</span>
      <span className={`${styles.circle} ${styles.circle_12}`}>🌎</span>
    </div>
  );
};
```

For this component, the main part would be `css`.
The point is to calculate the degree for each letter.
In this case, I use 12 letters so each degree should be 30 deg (360 / 12 = 30) and start from `0 deg`.

`DisplayCircle.module.css`
```css
.container {
  position: relative;
  width: 300px;
  height: 300px;
  font-size: 30px;
  text-align: center;
  margin: 0;
  transform: rotate(-80deg);
}

.circle {
  position: absolute;
  top: 0;
  left: calc(50% - 15px);
  display: inline-block;
  width: 30px;
  height: 150px;
  transform-origin: center bottom;
}

.circle_1 {
  color: red;
  transform: rotate(0deg);
}

.circle_2 {
  transform: rotate(30deg);
}

.circle_3 {
  transform: rotate(60deg);
}

.circle_4 {
  transform: rotate(90deg);
}

.circle_5 {
  transform: rotate(120deg);
}

.circle_6 {
  transform: rotate(150deg);
}

.circle_7 {
  transform: rotate(180deg);
}

.circle_8 {
  transform: rotate(210deg);
}

.circle_9 {
  transform: rotate(240deg);
}

.circle_10 {
  transform: rotate(270deg);
}

.circle_11 {
  transform: rotate(300deg);
}

.circle_12 {
  transform: rotate(330deg);
}
```

If you want to display a different text message, what you will need to do is to add letters to the component and calculate the degree and modify css.



Codesandbox is here
https://codesandbox.io/s/festive-shirley-90u8m?file=/components/DisplayCircle/DisplayCircle.module.css:0-856
6 Ways you can make side-income as a developer
Tags: money, developer, sideincome, sideprojects
Published: 2021-08-04 04:10:09

Don’t worry. I’m not going to tell you to start a blog.



## 1. Shopify App/Themes



Shopify is a massive market. For many, it can feel saturated. But is it really? Let’s say you price your app at $25 subscription and you have 100 shops using it. That’s a solid $2.5k right in your pocket each month.


There are online shops opening left, right, and center. If you can come up with an idea that solves a particular pain point for shopkeepers, it can be easy money.


## 2. WordPress Plugins/Themes


For non-developers, WordPress is still one of the main go-to for blogging. Theme development is one of those things that’s been around for so long that you might find it hard to compete and make any actual money.



Market places like ThemeForest can feel like they’re taking more than the hassle it takes to get a theme past their submission criteria.


Sell a few dozen or two at $29-$45 per month and you’re set for a good passive income stream.


## 3. A productivity tool



Productivity tools are the essence of getting things done. Make something, launch it, set it up with a free trial and then upgrade into a subscription model. It just needs to solve a productivity problem that’s annoying enough to be worth paying for.



## 4. Make something that matters to you



The thing about being a developer is that we solve problems. Surely, there’s something annoying in your life that you can solve for yourself.


It’s like one of those projects we get back in school — you know the kind that tells you to come up with an idea to solve some major world issue like poverty and hunger.


Except you’re taking it down a notch and just focusing on yourself.

If you find a tech-based solution, you can either open-source it and monetize through sponsorship. Or, you can sell it as a once-off or subscription model.


The possibilities are endless. You just need to stop, figure out what’s annoying in your digital life and solve it. Chances are, you’re not the only one experiencing it.


## 5. Gumroad projects

Digital assets can be traded as commodities. This includes graphics, icons, themes, and plugins.

Gumroad just saves you the hassle of starting up an online store to sell them. It’s free — unless you want lowered fees.


Then there’s a small price for a subscription. Even then, the free account fees are still decent in general. You’ll still need to do your own marketing to get the sales. By the end of it all, you’ll pick up a few new skills at the very least.


## 6. Externalize your knowledge


There are platforms out there like Udemy, Skillshare, and Teachable that can help you double-bank on your knowledge if you can commit to externalizing it.
Days of the Week - React-Day-Picker Part 2
Tags: react, javascript, reactdaypicker
Published: 2021-08-04 03:03:57

Last week, I began making improvements to my Counting Cookies application including adding an interactive calendar made by Day React Picker. This is all in anticipation of deploying the project for consideration by Chingu. I was able to incorporate the calendar and display current records by highlighting the days.

As I left off from last time, I had some ideas on other features I wanted to add along with the calendar. Users would be able to click a date on the calendar and it would be displayed in the record input form. I was also hoping users would be able to click a date with an existing record and the record card would display on top. 

This took some experimenting as I originally tried defining a handleClick function that would render the record but that became a dead end. As I am prone to try multiple options, I also tried having a Link component that was similar to the list of links I had originally written but had the same results. In the end, I had to customize the calendar that would display a link to each individual record. This involved creating a separate Calendar component to avoid having extraneous code that primarily involves code from clogging the DailyRecords component.

This wasn’t my fondest solution simply because it made some of my previous work pretty obsolete, but I was excited by the idea of cookies filling up a calendar. While I mirrored the example given by the developer of Day Picker, I had to make some adjustments to handle my records. It followed a similar concept to the SelectedDays option for Day Picker, as the records would be mapped over and any record’s date that matched the date being rendered would be displayed as a link. Now a user can easily view a daily record by clicking on the cookie of a desired date. Plus, the correct dates are being selected on the calendar rather than being a day early with the default selected days option.

```
<div style={cellStyle}>
                <div style={dateStyle}>{date[8] + date[9]}</div>
                {this.props.records.map(function(record) {
                    if (record.date == date) {
                        return (
                        <div style={birthdayStyle}>
                            <Link to={`/users/${record.user_id}/records/${record.id}`}>Cookie</Link>
                        </div>
                        )
                    }
                })}
            </div>
```

There are still cosmetic issues that I’d like to address including the daily record form and the card. The biggest task I’d like to conquer is using session storage to persist the users login status as refreshing the page or clicking to a link to add a new record is redirecting to the root page, or login. I’ve written in the past about developing a login feature as my original project didn’t have the capabilities, and while I completed the basic functionality, I obviously have more to add so a user can have a viable experience with Counting Cookies.
Smart Contract Summit #1: Featuring 200+ leading DeFi, NFT, and blockchain projects
Tags: blockchain
Published: 2021-08-04 03:49:52

SmartCon is back and bigger than ever this August 5-7. Join us for 3 full days of keynotes, workshops, panels, and AMAs with 200+ industry-leading speakers across the #DeFi, #NFT, and #blockchain ecosystem. We have a limited number of complimentary tickets, so sign up today to connect with thousands of developers, researchers, and entrepreneurs across the industry: https://smartcontractsummit.io
Smart Contract Summit #1: Featuring 200+ leading DeFi, NFT, and blockchain projects
Tags: blockchain
Published: 2021-08-04 03:46:52

Smart Contract Summit #1 (SmartCon) is the premier blockchain industry conference that brings together dApp developers, Web 3.0 entrepreneurs, node operators, researchers, enterprises, and community members across the DeFi space and broader smart contract ecosystem. To stay updated and find out first about the summit’s speaker lineup, follow the SmartCon #1 website: https://smartcontractsummit.io
Import Export CSV/EXCEL File In Laravel
Tags: laravel, import, export, csv
Published: 2021-08-04 03:30:54

In this post we will see import export CSV/EXCEL file in Laravel. We will simple create import data to CSV, xls file and also we can import data to database using CSV file in Laravel 7 application.

Using this example we can easily import and export CSV file in Laravel and download the excel & CSV file from the database using the maatwebsite/excel composer package. maatwebsite/excel provide easy way to import and export using database model.

So, let's Start

```
Step 1: Create new project in Laravel
Step 2: Database Setup
Step 3: Install Package
Step 4: Create Some Dummy Records Using Tinker
Step 5: Create New Route
Step 6: Add Controller
Step 7: Create Import Class
Step 8: Create Export Class
Step 9: Create Blade File for View
```

---

> **_[Read More : Import Export CSV/EXCEL File In Laravel](https://www.techsolutionstuff.com/post/import-export-csv-excel-file-in-laravel)_**

---

You May Also Like :

- **_[Read More : Laravel Clear Cache Using Artisan Command](https://www.techsolutionstuff.com/post/laravel-clear-cache-using-artisan-command)_**

- **_[Read More : Laravel Datatable Example Tutorial](https://www.techsolutionstuff.com/post/laravel-datatable-example-tutorial)_**

- **_[Read More : Laravel AJAX CRUD Example Tutorial](https://www.techsolutionstuff.com/post/laravel-ajax-crud-example-tutorial)_**
I wanted to create something that may or may not useful.
Tags: laravel, vue
Published: 2021-08-04 02:51:17

I really envy people who can come up with ideas for creating something. I wonder if they are geniuses. Are they monsters or ghosts?


For a while, I've wanted to make something, preferably something interesting. but I haven't been able to come up with any good ideas. I have read some books like "How to Come Up with Ideas," but I just couldn't find any good ideas. At that time, I found Masayoshi Son's invention notebook.


>  If you see "clock" in the first book and "refrigerator" in the second book, think of "refrigerator with clock" or "clock with refrigerator. And so on, until you come up with an idea that has potential.



"I see. "I see. I can come up with ideas by writing words on multiple cards and combining them. Then I'll try to make that.


I made it anyway.

![Gacha Gacha English](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu4z9tryuuckjexdhbgt.gif)

Gacha Gacha English Words and Gacha Gacha Japanese!

https://5seconds-en.com/en-words/gacha



It's easy to use. Press the "Gacha Gacha" button and three words will come out. And then Tweet it.

I wondered if I should get a domain name, but I didn't get one because it was related to the 5-second English that I made before. I didn't know how to pass data from Laravel asynchronously, and I didn't know how to pass data to Twitter, so I wasn't sure if I could do it before I made it, but it was much easier and quicker than I thought. I was a little worried before I made it, but it was a lot easier than I thought it would be.
I'll try to improve it.
Surely you Jest?
Published: 2021-08-04 01:34:08

It's been a busy busy week for me. Somehow I'm managing the time to be able to try and learn new thing weekly. Honestly, I'm amazed...although I do wish there was more time in the day to try my hand at more things and carve out more time for myself. Alas, we do what we can with what we have and this week I started trying my hand and testing in JS with the jest framework.  

Jest can be thought of as a testing framework that is designed to ensure correctness of any JS codebase. So far in my experience, I've been practicing with the keywords of describe, test, expect and to be. Since I'm in my early stages of working with this framework, I will only talk about the describe function today.

Describe()
-Takes in two arguments, a string of the name of the function and a function. The block of the describe function is usually home to the test function. In certain cases you can even have multiple test functions called within one describe block. Below is an example of how describe could be used. 

```
describe("ten()", () => {
 
  });
```

The describe function has a string as the first argument. The string is ten(). After this string is given to identify the name of the function we're testing, we now have to test it. Next week we'll combine this example with the test function and really start to see some cool things. Happy Coding.
Installing k3s in a cluster of three nodes
Tags: kubernetes, k3s, cluster
Published: 2021-08-04 01:20:15

---
title: Installing k3s in a cluster of three nodes
published: true
description: Step-by-step tutorial to install Kubernetes k3s in a cluster of three nodes
tags: kubernetes, k3s, cluster
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://diddledani.com/tutorials/kubernetes-k3s/k3s/
series: k3s
---

To get going with Kubernetes (K8s) we need to install a distribution of K8s. For this tutorial I will use [K3s by Rancher Labs](https://k3s.io).

You should replace my username and node names in the instructions below. For reference, my username is `dllewellyn`, and my nodes are named as follows:

- k8s-1
- k8s-2
- k8s-3

## Start the first node

1. Login to the first node:
   ```bash
   ssh dllewellyn@k8s-1
   ```
1. On the first node run the K3s installation script that automates everything - enter your sudo password if you are prompted:
   ```bash
   curl -sfL https://get.k3s.io | sh -
   ```
1. Get the token for joining more nodes to the cluster - save this somewhere you can easily copy and paste:
   ```bash
   sudo cat /var/lib/rancher/k3s/server/node-token
   ```

![Screenshot of terminal output of installing the first node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ipbws1idebu3haxq415.png)

## Start the second node
1. Login to the second node in a new terminal session:
   ```bash
   ssh dllewellyn@k8s-2
   ```
1. Install and join the node to the primary node we installed above - if your second node cannot resolve the primary node's name to its IP address then use the IP address directly - Replace `mynodetoken` with the node-token you saved above:
   ```bash
   curl -sfL https://get.k3s.io | K3S_URL=https://k8s-1:6443 K3S_TOKEN=mynodetoken sh -
   ```

   - `K3S_URL` is the URL of your primary server in the cluster.
   - `K3S_TOKEN` will be used to authenticate the new node when joining the cluster. It must match with the token in the file `/var/lib/rancher/k3s/server/node-token` on the primary server.

![Screenshot of terminal output of installing the second node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l35mh40r0xi6tkilifxn.png)

## Start the third node

This is done exactly the same way as the second node, so the steps are omitted. Repeat the same steps you used for the second node, ensuring that you are in a session on the third node:

```bash
ssh dllewellyn@k8s-3
```

![Screenshot of terminal output of installing the third node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/567d5b9eybjs0wr508ag.png)
docker@mac
Published: 2021-08-04 00:48:24

brew install docker docker-toolbox docker-machine
brew services start docker-machine
docker-machine create --driver virtualbox default
docker-machine ls
docker-machine env default
eval $(docker-machine env default)
docker-machine stop default
brew services stop docker-machine

docker ps
docker container stop [CONTAINER ID]

docker stop $(docker ps -aq)
docker rm $(docker ps -aq)

docker images -a
docker rmi


docker build -t apachewww .
docker run -dit --name my-running-app -p 80:80 apachewww