teleren/devto huggingface dataset:
2020-11-06 | My new backup approach
Tags: learninpublic, beginners, webdev, career
Published: 2020-11-07 08:00:01

---
title: "2020-11-06 | My new backup approach"
description: "Summary of my day"
published: true
tags: ["LearnInPublic", "Beginners", "Webdev", "Career"]
series: "miku86 Diary"
canonical_url: "https://miku86.com/blog/day-2020-11-06"
---

I did two mentoring sessions in the morning, talking about life, some MongoDB details and Cypress testing. Love the mentoring setting, it's really open-minded and most mentees are professionals in other fields (finance, engineering).

Then I started a 7h stint of rethinking my approach to managing my data. What to do if my device breaks? If we don't have backups, the data is lost. That's why we create backups (I hope you do!).

My approach is at least "fragile". After every boot my `home` directory gets backup-ed into a directory outside my `home` directory. That's fragile; if the drive dies, the backup is also gone. That's why I move the folder _manually_ on an external drive. The time between creating and moving it to the external drive is a weak spot. The bigger the gap, the higher the probability to lose data. Currently my gap is embarrassingly high, probably 30 days. But I don't want to plug in my external drive all the time. That's why my plan is to put it online. But yes, private data in the cloud, I know... that's why I will encrypt it locally.

So my first sketch looks like this:

```
/home
|--> external drive (daily, unencrypted (simple to access, someone would have to break into my house))
|--> cloud (daily, encrypted (you don't get my data))
```

All this should be as app-agnostic as possible and FOSS. I'm very data minimalistic, meaning I only own 20GB of data. Current problems are the slow encryption (30 minutes with 7z with a i7 CPU). Uploading 20GB of data with 25mbit/s needs like 2 hours. So incremental backups are probably a better solution. My next step is to find a simple solution I can automate with a bash script. I will have a look into [Borg](https://github.com/borgbackup/borg) and [Rclone](https://github.com/rclone/rclone).

---

Any ideas about the approach?
Any ideas about some good tools?
Array Tool SmartContract on XinFin XDC Network
Tags: blockchain, arraytool, xinfin, xdc
Published: 2020-11-07 07:49:13

Check the smartcontract for Array Tool written in Solidity language. Deployment on XInFin XDC is extremely easy and transaction cost is extremely low in compare with Ethereum.

Copy the code for Array Tool

`pragma solidity ^0.4.24;
contract ArrayTools {
    function _combineArray(uint256[] _array) internal pure returns(uint256) {
        uint256 fullAmount;
        for(uint256 i = 0; i < _array.length; i++) {
            require(_array[i] > 0);
            fullAmount += _array[i];
        }
        return fullAmount;
    }
}`
Create and deploy an Express NodeJS with UI using Vercel (Free)
Tags: webdev, javascript, node, tutorial
Published: 2020-11-07 07:48:36

---
title: Create and deploy an Express NodeJS with UI using Vercel (Free)
published: true
description: 
tags: #webdev #javascript #node #tutorial
cover_image: https://images.unsplash.com/photo-1555963153-11ff60182d08?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1024&q=80
---

*Disclosure:* I have no affiliation or investment in any company mentioned in this post. This is just my experience.

I assumed you have some experience with NodeJS, ExpressJS and signed up with Vercel.

Vercel (zeit) has been working fine for me for a while. The problem is there are different ways on the internet to set it up and most of them doesn't work for me anymore, maybe due to changes from Vercel. But I'm glad this setup works now.

In this article, I just want to share my experience and github repository which you can use it to create your own Express NodeJS App and deploy it to Vercel.

*Github repository link:*
- https://github.com/ngduc/vercel-express

### Set up & Deploy with Vercel

```
$ npm install vercel -g
$ npm install
$ vercel
```

- Vercel will generate ".vercel" directory, don't share or commit this one.
- After deploying, open your URL like this:
  - http://YOUR-VERCEL-APP-ID.vercel.app
  - Example: https://vercel-express-3.ngduc.vercel.app

### app/index.js

- If you're using Typescript, build your source directory, output to "app"
- Update package.json: "main": "app/index.js"

### vercel.json

- Map API routes (/api/...) and static (UI) routes (/...).

Now you have a full-stack web application deployed to the Internet using Vercel! Happy coding!

*Links:*
- This official article describes more in details about Vercel and Express - https://vercel.com/guides/using-express-with-vercel
- Github Repo - https://github.com/ngduc/vercel-express
📢 Express subdomain routing
Published: 2020-11-07 07:17:45

<div>One day I ran into a problem of how to setup and test express-subdomain lib locally. And after 1 hour of research I resolved my problem :D Here is my solution:


</div><div>Firstly need to add a couple lines to your /etc/hosts file:
</div><div>
<pre style="padding: 10px;">127.0.0.1 example.myapp.dev
127.0.0.1 example.dev</pre>

</div><div>And then I created live node js script
</div><div>
<pre>//connect express
var express = require('express');
var subdomain = require('express-subdomain');
var app = express();

app.use(express.json());

//set sub routing
app.sub_test = express.Router();
app.use(subdomain('sub_test', app.sub_test));

//top level routing
app.get('/', (req, res) =&gt; {
  res.send('Index page')
});

app.get('/index2', (req, res) =&gt; {
  res.send('Second index page')
});

//subdomain routing
app.sub_test.get('/', (req, res) =&gt; {
  res.send('Subdomain index')
});

app.sub_banana.get('/index2', (req, res) =&gt; {
  res.send('Subdomain index2')
});

//start server
var http = require('http');

var port = 3000
app.set('port', port);

var server = http.createServer(app);

server.listen(port);</pre>

</div><br><br><a href="https://exceed-team.com/tech/express-subdomain">Express subdomain routing | Exceed Team Blog</a>
Open Contributions - A source to satisfaction
Tags: hacktoberfest
Published: 2020-11-07 07:13:23

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


<!-- ### [Intro Heading] -->
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
### Background
Hey! This is Pratik, A computer engineer by profession and a innovation enthusiast. I love to works across stacks covering C#.Net, Python, C++, Android, Arduino. I keep brain storming over problems of common people near me and come up with Arduino or Android prototypes. I love ML, AI and AR and always keep prototyping softwares bringing ML and AR together.

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here → -->
Yes I am not that old in open source!
### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->
Completed the event with 4+ PRs making way to Hacktober swags

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->
I contributed to repos related to C#.Net stack projects


### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
This was my first hacktoberfest and no next will be the last! I will look forward to open source my own projects and include them in coming fests for my fellow new contribution enthusiasts.
Chrome Extensions every designer must use🎨
Tags: beginners, design, productivity
Published: 2020-11-07 07:09:03

If you’re looking to add some extra handy tools to your everyday workflow, you’re in the right place.

I've compiled a list of few Google Chrome extensions I use daily and will help with all kinds of things as you’re browsing the web like identifying fonts and color hex codes, designing for accessibility, and even testing responsive designs.

__Here we go:__

💠 [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en)

Do you ever stumble upon a nice looking font while browsing the web and then spend way too much time searching for the name and details? 

WhatFont  is a huge time-saver letting you hover over a web font with your mouse and instantly providing the font details–from font name, font family, weight, size, line-height, to the hex code for the text’s color. The best part is, WhatFont also provides a link to the downloadable font via Typekit so you can instantly add it to your font library.

💠 [Spectrum](https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb)

Spectrum is a tool with which you can instantly test your web pages for different kinds of color vision deficiencies.

Simply click on the chrome extension in your browser window and use the drop-down menu to select a specific color deficiency. The web page you are on will then change in appearance so you are viewing it through the eyes of someone with the selected deficiency.

💠 [ColorPick Eyedropper]
(https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en)

ColorPick Eyedropper  is extremely useful if you were previously saving images and importing them into your software to pick out color codes. 

Now, you can save time by hovering your mouse over any part of your browser to get the hex code for the desired color straight away. This is a great color picker that will save you loads of time.

💠[Sizzy]
(https://chrome.google.com/webstore/detail/sizzy/nfhlbmjiiogoelaflfclodlkncbdiefo)

Gone are the days where you’re forced to go through the tedious process of testing out your web designs for each and every screen they will be viewed on (iOS, Android, tablets, etc.)

With Sizzy , a responsive web design tester, you can preview your design on multiple screens at once as you work. All you have to do is input the website URL and filter what devices you’d like to preview the design on.
_

PS: If you are a Designer/ Developer or simply someone who loves technology, come [Join our Discord Server](https://discord.gg/5XetPWg)
Get in touch with people of similar interests. Also, We host exclusive daily giveaways for everyone. 
_

That's it for now.
DA07 Sessions
Tags: learning, design, architecture
Published: 2020-11-07 07:06:20

# 本篇主要讲Session，这个并不是web里面用到的session，而是一个更宽泛的概念。

# What is Session?

Session is the **state** of an application during the time a user is interacting with it.

Session is temperary data that is useful only during the time a user is interaction with the application.

Web service是stateless的，但是我们的应用需要是stateful的，这里就会用到session。但是对于一个server，可能会与大量的client链接，每一个client都会发送请求，这会使server需要存储大量的数据来保持stateful。所以，我们有不同的session：

* client session state
* server session state
* database session state

# Client Session State

Store session state on the client.

一共有三种实现方法（或者说以下三种都是client session）:

* URL parameters，does not scale well
* hidden fields，比如隐藏的<input>标签。This data is sent in **serialised** form.
* cookies，

## Pros and Cons

### Pros

* Resilience: server failures 不会对其造成影响；
* Clustering: works well with server clusters

### Cons

* Scalability: 不适合数据量较大的情况，因为所有的数据都会在请求中发送给server
* Security：不安全，因为涉及到传输数据

# Server Session State

Keep the session state on the server system in a serialised form. 数据加存储在server的内存中。

实现的方法是：server maintain a map of objects indexed by the session ID.

## Pros and Cons

### Pros

* 简单易于实现

### Cons

* Clustering：如果server是分布式的，那么会需要考虑一致性的问题

# Database Session State

Store session data as committed data in the database.

Session state is maintained in the database based on the session ID.

实现的方法可以是在表中加一个字段，或者再创建一个表

## Pros and Cons

### Pros

* 避免了分布式server带来的一致性问题

### Cons

* 性能不好
* 难以实现
AWS Architect
Tags: aws, awsarchitect
Published: 2020-11-07 06:55:47

**AWS**
Amazon Web Services (AWS) is an Amazon cloud service, which provides services in the form of building blocks, these building blocks can be used to create and deploy any type of application in the cloud.

These basic components or services are designed to work with each other and result in sophisticated and highly scalable applications.


[Amazon Web Services](https://tekslate.com/aws-tutorials) is the world's most popular and best-adapted cloud platform, offering more than 175 full-featured services. From the fastest-growing startups to the largest companies, major government agencies, and there are millions of customers using the AWS platform to seamlessly manage their data and grow their business seamlessly.

**AWS Benefits**
It offers profitable services where you only have to pay for what you use. There are no long-term or up-front commitments.

Users do not have to worry about the maintenance or operation of data centers.
Offers faster deployments.
It offers high scalability, users can expand or reduce capacity according to requirements.
Users can deploy their applications in various regions of the world with just a few clicks.
It allows organizations/companies to use familiar operating systems, databases, programming models, and architectures.

**What are the applications of AWS services?**
Hosting of web pages
Search engines
Social networks
Academic computing
Media sharing (image / video)
Mobile and social apps
Application hosting / SaaS hosting
Development and test environments
Content delivery and media distribution
Storage, backup, and disaster recovery

[Learn Aws Architect Training Online](https://tekslate.com/aws-architect-training)
Smallest C++ Application
Tags: cpp, beginners, computerscience, oop
Published: 2020-11-07 06:49:15

---
title: Smallest C++ Application
published: true
description: Writing the smallest C++ application
tags: cpp, beginner, computerscience, oop 
cover_image: https://images.unsplash.com/photo-1472457897821-70d3819a0e24?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1649&q=80
series: Programming 101 with C++
---

Even though it looks deceptively simple, this is a complete program and there are a few things we can learn from it. I would encourage you to write this code in your editor and try to run it before proceeding.

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

* C++ is **case sensitive** and is partial towards lower case letters
* { and } are not ( and )
* {} are called the curly braces and () are called the round braces or *parenthesis*
* **;** at the end of most lines of code 

## Compiler and Linker Errors

![Error](https://images.unsplash.com/photo-1578328819058-b69f3a3b0f6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjE3MzYxfQ&auto=format&fit=crop&w=1867&q=80) 

The compiler assumes you are trying to make sense. Error messages can sometimes be misleading and difficult to understand in the beginning

As a new developer, it is best to **make deliberate mistakes** with this simple program, miss a semi-colon and see what happens.

* There can be both compiler and linker errors in code
* Compilers also give **warnings**
* Warning don't stop your application from running but they should not be ignored

> Don't ignore warnings.

Sometimes when we get multiple errors, it is best to fix the first one and compile again. It is likely that the first error is causing the others.

Please leave out comments with anything you don't understand or would like for me to improve upon.

Thanks for reading!
Master Closures in Javascript.
Tags: javascript, webdev, tutorial, beginners
Published: 2020-11-07 06:44:32

In this tutorial lets learn about Closures in Javascript.

This article will help you get over the technical jargon of the term closure and will enable you to explain what a closure is to anyone. 

In Simple words,

#### A function within a function , can use the variables of the parent function.


If you have been using javascript higher order functions like map, reduce they are what closures are.


First lets see an example of closures in form of an user defined function.

```
function closurefunction() {

var number = 1;

function innerfunction(){

alert(number);

} 
innerfunction()
}
closurefunction()
```

Now when we call closurefunction, the innerfunction is returned.

The inner function here uses the parent closurefunction's 'number' variable. 
 
In programming, local variable of one function can not be used in another function.

But when we use a function within a function, we can access the outer function's variables inside the inner function. This is called closure in programming.    
 

Now an example with a higher order funtion called map,

```
const array1 = [1,2,3]

const array2 = array1.map(function(el){

return el*2;

}
```

In the above example, array2 takes map has a function, and map function returns another function which uses the parent 'map' function's data and returns it.

The ES6 form of above code,

```
const array1 = [1,2,3]

const array2 = array1.map(el => return el*2 )

```

#### <u>Summary:</u>

A function which is returned inside another function can use the outer function's variables.


#### <u>My Personal Experience:</u>

 I have been using Higher order functions like map, filter for a long time without knowing that they are called closures. If you did the same comment below!


### Thank you for reading!

If you like this article, Unicorn this one! Heart/Like this one and save it for reading it later.



### <u>My Other Articles: </u>



- [Universal CSS properties everyone must know](https://dev.to/gautham495/universal-css-properties-everyone-must-use-4kie)

- [Create-react-app](https://dev.to/gautham495/creating-a-new-react-app-with-create-react-app-4e9m)

- [Git for beginners](https://dev.to/gautham495/basic-git-knowledge-for-beginners-m4p)

- [Change headers in react with react-helmet](https://dev.to/gautham495/changing-headers-in-react-with-react-helmet-d0d)

- [Know How to apply box-shadow on all four sides.](https://dev.to/gautham495/know-how-to-apply-box-shadow-on-all-four-sides-43pn)
 
- [Simple CSS Selectors](https://dev.to/gautham495/simple-css-selectors-for-beginners-2i44).

- [CSS Pseudo Elements](https://dev.to/gautham495/css-pseudo-elements-for-beginners-53ob).

- [CSS Pseudo Classes For Beginners](https://dev.to/gautham495/pseudo-classes-for-beginners-3lc0
).

- [Free Illustrator and Design Related Websites every Web Designer must know.](https://dev.to/gautham495/free-illustrator-and-design-related-websites-every-web-designer-must-know-69l)
Day 6 of 100 - React, Nodemailer, Heroku
Tags: 100daysofcode, react, node, heroku
Published: 2020-11-07 06:43:39

As one would expect - the end of the first week in a 100 days of React challenge is something that starts to involve a backend. I followed [this tutorial](https://medium.com/swlh/create-an-enquiry-form-in-react-and-send-email-using-nodejs-1c0cd590dce1) by the awesome Yogesh Chavan, a master of React tutorials hidden behind the Medium.com paywall.

##Project & Packages
The projects uses the nodemailer package to send emails, plus express to start the Node server, and react-bootstrap for some simple styling.

This was a great tutorial for where I am with these technologies because I have used all of them before in bits and pieces but don't have a lot of recent experience using React with a Node backend. Plus Nodemailer just makes sending emails with Node so easy.

Lastly, this little lesson was my first introduction to creating stateful functional components with the React useState hook. Classes are convenient but sometimes it feels like we are writing a bunch of extra syntax just to use state, so this was a very worthwhile introduction.

##The Takeaway
I will probably come back to this project because there was so much new about it. Probably most of all it was cool to see my first app (in a long time) deployed with a Node server to Heroku- and just work.

FYI: For anyone thinking of doing this who hasn't deployed to Heroku in a while, follow this fantastic up-to-date tutorial on how you can deploy a React app with a backend on Heroku real fast: [link](https://www.freecodecamp.org/news/deploy-a-react-node-app-to/).

See for yourself:
https://react-nodemailer.herokuapp.com/

github: https://github.com/jwhubert91/nodemailerReact

I just started a Twitter! It's neat. I of course follow by the ancient tenet follow-4-follow so follow me below:
www.twitter.com/jwhubert91
Overcoming procrastination 🤓
Tags: overcoming, webdev, procrastination, learning
Published: 2020-11-07 06:34:19

You know the scene–you have a challenging task ahead of you, so you avoid thinking about it until the last minute. You sit down to finally do the task, and you become distracted by checking emails, Instagram feeds, ANYTHING that keeps you from actually doing the task.

Sound familiar?

At its core, procrastination is avoidance. We usually avoid things that are challenging because of fear, self-doubt, anxiety, or low self-confidence. When we are anxious or fearful, our emotions and behavior are hard to regulate, so we end up doing everything we can to avoid the “spinning” sensation and distract ourselves with something more fun and mindless. We fall prey to pesky instant gratification to soothe ourselves, but the problem is that procrastinating only makes the anxiety worse. It doesn’t go away. We just numb it, and then it comes back stronger!

So that, there are some tips to overcome procrastination. 

1-Think of the reward. 
Try reminding yourself about how good it will feel when you finally check that item off your list. Ruminating about doing something is 10 times harder than actually doing it, and when you finally finish the task, you’ll feel great! 

2-Give yourself compassion. 
Many times, we actually feel bad about procrastinating. We beat ourselves up so much that we procrastinate even more. Try acknowledging how hard it is to get started and then say some encouraging phrases to yourself to get motivated. Read here about self-compassion and the growth mindset.

3-Avoid the “When I Feel Like It” trap. There will never be a time when you feel like doing something you’re avoiding. Don’t fall into that trap.

4-Break the task up into digestible parts. 
My dad used the phrase “One bite at a time” to remind me to make a difficult task a lot easier for myself. Break the task up into smaller tasks, and then get the easiest one checked off your list. You’ll start to feel better as it you make it through, step by step.

5-Don’t multi-task. 
Research shows that as much as we wish we could multi-task well, we actually don’t do it effectively as humans. Push distractions out of the way, and focus on one small task at a time.

Learning to stop procrastinating can change your life by allowing you to place all that ruminating energy elsewhere. You’ll learn to focus on process, not perfection and find that you will persevere.