teleren/devto huggingface dataset:
Provision and Deploy webapp using AWS Amplify
Tags: aws, amplify, cloud, webdev
Published: 2020-11-06 22:44:42

[Click here for Original Post](https://www.narenvadapalli.com/blog/connecting-aws-amplify-for-deployment/)

## AWS Amplify Console

You Need to sign in to AWS account by clicking on on https://aws.amazon.com/amplify/. Once the credentials are provided, should see welcome screen like the following

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

## Connecting Github (source code)

Since the code for my website is already hosted on [github](https://github.com/narenandu/narenvadapalli_dot_com), we choose `From your existing code` option as shown and `Github`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5w0dmlj1ylassnlspp0c.png)

### Choose the repo

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

### Choose the branch

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

## Adding in the custom environment variables

Once we hit the `Next` button, there will be App Settings and under `Advanced Settings`, there is a provision to add the custom env vars that we want to secure from exposing them in source code. I have `Google Analytics` connected to my website to track the insights in to the audience. More details here: [Adding Google Analytics to personal website](https://www.narenvadapalli.com/blog/google-analytics-to-personal-website/)

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

## Connecting the deployment to custom domain

As per https://docs.aws.amazon.com/amplify/latest/userguide/custom-domains.html, by default the deployment happens at the custom url in the following format

```
https://branch-name.d1m7bkiki6tdw1.amplifyapp.com
```

This step enables us to connect any custom domain to the deployment process. This step will take time as it has to issue SSL certificates and then verify the ownership, finally propagates the DNS records
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kjbh4i7luxg8kvx38wzh.png)

## Domain Activation

If the SSL certificate issued successfully and the ownership is verified, Domain will be activated

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

## Potential Issue

SSL Configuration step could just be not moving forward and stuck for more than 1 hour

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

### Fix

Just delete the custom domain and restart the process

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pqknmciuygan8g1p9o19.png)
Ridiculously Rapid Software-as-a-Service (SaaS) development with Observable, Firebase and Stripe
Tags: saas
Published: 2020-11-06 22:41:06

Despite Observable being targeted at the visualization community, I find the rapid feedback and reactive model a delight to work with, and, a huge productivity booster. So much, in fact, that I have started building customer facing software with it. My productivity is boosted because there are no toolchains or deployment steps interrupting me. If I am unsure of the behaviour of the program, I can open a cell and play, immediately. I can iteratively refactor, right in the browser, without context switches. It is magical. It's applied Bret Victor, FFS.

In short, Observable is an amazing tool for trying out ideas, including, business ideas. 👀

As it turns out, it is possible to make money, right inside Observable. In this tutorial, I will walk you through the bare essentials fo building a SaaS product. Login, persisting customer data, security, implementing a backend, periodic jobs and charging money. As will also share my low effort tips to make things pretty, easily build UIs and some help hiding Observable's warts when building SaaS.

Read the full interactive tutorial at
https://observablehq.com/@tomlarkworthy/saas-tutorial
Day 251: Test of Time
Tags: hiphop, code, coding, lifelongdev
Published: 2020-11-06 22:30:25

_liner notes_:
- Professional : Whew this day flew by quick. Hung out at the second day of the conference. Tried to network and speak with developers as much as I could. Between breaks, I would work on my next blog post and reviewing the documentation for one of our SDKs. Towards the end of the day, got to play Among Us with some of the team. haha Good Times.

- Personal : Went through a bunch of tracks for the radio show. Got to do a demo of my new project with some local meetup organizers. I was able to walk them through the dashboard and they were able to stream a test event. Found a couple of bugs, but not anything serious. I think we'll be streaming events soon.

![View of a forest in Telluride, CO, United States with yellow and green leaves on the trees with a mountain range in the background with a purple tinted top because of the sunset](https://dev-to-uploads.s3.amazonaws.com/i/zefzim478gti6g1yqgmq.jpg)

Going to finish up listening to tracks for the show tomorrow. Maybe even start working on the bugs that came out when testing my project. There was also a feature I wanted to add so I may work on that. I want this project and my other projects to stand the test of time and help folks out.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube -81hqCjw7D4 %}
Creating a profile README on GitHub
Tags: github, readme, generate, markdown
Published: 2020-11-06 22:28:51

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/criando-um-readme-de-perfil-no-github-801a2758519c)

GitHub now allows you to create a repository with your username and the readme for that repository is displayed on your profile page.

# In practice

First access your GitHub profile and create a new repository with your username, mine was like this.

https://github.com/walternascimentobarroso/walternascimentobarroso

After the project has been created, add a readme, and use the markdown to make your readme excellent.

## Shield

It is common to use [shield.io](https://shields.io/) to create small images to improve the readme layout, creating some medals.

## Emoji

For a more elegant layout we can use emoji, for references we have both [Emojipedia](https://emojipedia.org/) and [EmojiCheat](https://www.webfx.com/tools/emoji-cheat-sheet/).

## Hit Counter

To mark how many visits your profile is receiving you can use the links:

https://visitor-badge.laobi.icu/
https://hitcounter.pythonanywhere.com/
https://hits.dwyl.com/
https://github.com/arturssmirnovs/github-profile-views-counter

## Quotes
How about adding quotes to your readme dynamically?

For this use the link below

https://github.com/shravan20/github-readme-quotes

for more information read the project readme or this post

https://dev.to/imshravan/github-profile-readme-animated-dynamic-quote-generator-4le6

## WakaTime Details

If you want to include more data in your readme, a great option is https://github.com/anmol098/waka-readme-stats

## Inspirations

If you need some examples of inspiration, this repository has several.

https://github.com/coderjojo/creative-profile-readme

## Generator

And finally, if you are not up to your creativity at the moment, you can use the generators below:

https://rahuldkjain.github.io/gh-profile-readme-generator/
https://arturssmirnovs.github.io/github-profile-readme-generator/

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊
xLayers #sketchnote
Tags: webdev, javascript, design, opensource
Published: 2020-11-06 21:26:37

Hey! Do you know [@xlayers_](https://twitter.com/xlayers_ "xlayers_ Twitter")?
An oos project that seeks to make designers' and developers' lifes better :-)

Thank you [@wassimchegham](https://dev.to/wassimchegham "Wassim") for this initiative and for giving me the opportunity to be part of it!

Here's my #sketchnote about it

![Sketchnote](https://dev-to-uploads.s3.amazonaws.com/i/q8e7mfgxgeb6hat8bl3l.jpeg)

You can join us and also support our work from [github.com/xlayers/xlayers](github.com/xlayers/xlayers "xlayers GitHub") 

Thank you [@GitHub](https://twitter.com/github "GitHub Twitter")
Map and Reduce in Python
Tags: python, mapreduce
Published: 2020-11-06 21:18:12

# Map / Reduce in Python 

To understand the concept, please refer to this paper of Google: [link](http://research.google.com/archive/mapreduce.html)

In python 2, `map()` and `reduce()` are both built-in functions. However, since Python3, `reduce()` is no longer a built-in function, one should import it from `functools` module.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4rs1h2d3ygevfb607m7f.PNG)



`map()` applies a function to all the items in an input list and returns an iterator object. Such like:

```python
>> a = map(lambda x:x+x, [1,2,3,4,5])
>> list(a)
Out: [2, 4, 6, 8, 10]
```
`reduce()` performs a rolling computation to sequential pairs of values in an input list and returning the result. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w8c8qt1605q2k71pgg05.png)
```python
reduce(f, [x1, x2, x3, x4]) = f(f(f(x1, x2), x3), x4)
```

Here is an example written by myself today:
```python
from functools import reduce # only in Python 3

DIGITS = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9,'.': -1}

def char2num(s):
    return DIGITS[s] 
    
def str2float(s): 
    L = map(char2num, s)
    r = reduce(func,L)
    print(r)
    return r[0]

def func(x, y):

    if type(x) == int:
        if x == -1:
            return (0 + y, 0.1)
        elif y == -1:
            return(x, 0.1)
        else:
            return (x*10+y, 1)
    elif type(x) == tuple:

        if y == -1:
            return(x[0], 0.1)
        else:
            if x[1]< 1:
                res = x[1]*0.1
                return(x[0]+y*x[1], res)
            else:
                res = 1
                return(x[0]*10+y, res)
            
if __name__ == "__main__":
    #print('str2float(\'123.456\') =', str2float('123.456'))
    if abs(str2float('123.4') - 123.4) < 0.00001:
        print('测试成功!')
    else:
        print('测试失败!')
        
    if abs(str2float('123456') - 123456) < 0.00001:
        print('测试成功!')
    else:
        print('测试失败!')
        
    if abs(str2float('0.123456') - 0.123456) < 0.00001:
        print('测试成功!')
    else:
        print('测试失败!')

```




reference:
1. [https://www.liaoxuefeng.com/wiki/1016959663602400/1017329367486080](https://www.liaoxuefeng.com/wiki/1016959663602400/1017329367486080)
2. https://book.pythontips.com/en/latest/map_filter.html
Here I am
Published: 2020-11-06 20:43:22

Following the national lockdown applied recently in Europe, I am obliged to cancel my flight back to China. Thus I will stay at home in Paris for the next 4-6 weeks. In order to better take advantage of this period, I decide to create my account here to summarize my previous work experiences and learn new stuff. Meanwhile I would like to note as well some odds and ends of my daily life. Stay safe, stay strong! Stay foolish, stay hungry!
Hacktoberfest
Published: 2020-11-06 21:15:15

To support open-source contribution a program "HactoberFest" is held by DEV and Digital Ocean in collaboration with Github every year.
GitHub is a version control platform where you can share your projects and can also contribute to other projects, for that you have to open a pull request.

Alt Text
HactoberFest is an event based on opening 4 pull request to encourage open source contribution. And as an award by DEV and Digital Ocean swags are given to them. These swags includes tree/t-shirt, stickers and badges.

How to Join this Event?
To participate, register at the official site: hacktoberfest.digitalocean.com Make sure you are connected with your GitHub account. Then, submit at least four pull-request (PRs) to any public GitHub repository.
I've Made $1844 in October of 2020
Tags: freelancing, contracting, entreprenuership, development
Published: 2020-11-06 20:10:52

![I've made $1844 in October of 2020](https://dev-to-uploads.s3.amazonaws.com/i/36ge3sc40fo36gqeijrn.png)

Welcome to the first issue of Adem's Freelance Journey. 

When I first started freelancing I didn't have anyone to turn in for advice. I've had to learn everything myself.

And no one shared the "dirty" parts of running a freelance business.

So I want to change this.

I'll try to be as open as possible in these posts and share the struggles of everyday life as a freelancer.

I'll try to write these posts every month.

I'll NOT share any sensitive information about my clients.

With this said let's get started.

**TL;DR made $1844 for ~ 70 hours of work on three different projects. Have two other projects in the pipeline.**

## Income

I've made $1844 this month.

This seems pretty low for a freelance software developer and honestly, it is.

September was a super-busy month so I burnt down a bit this month and didn't feel like working a lot. 

## Projects

### Client #1 ($1739 for ~49 hours of work)

I've been working on this client's project every Monday, Wednesday, and Friday as a part-time developer. 

I charge him $35 an hour which is lower than my usual rate of $50 an hour. The reason I'm charging so low is the founders of this company are ex FAANG employees, they have a super cool and useful product and they're gaining a lot of traction in their niche. 

The problem is they're 100% bootstrapped so they can't pay me my usual rate but it's fine for now.

### Client #2 ($105 for 3 hours of work)

Client #2 is also a bootstrapped SaaS company. 

It's run by one person with half a dozen freelancers. 

I'm charging this client $35 an hour because we've been working for quite a while and the work I do is pretty chill so there's no real reason to increase my rate. 

We've done a lot of work during September and I didn't hear back from him until a couple of days ago so that's why I've worked with him for only 3 hours.

### Client #3 ($0 for ~18 hours of work)

Client #3 doesn't like paying freelancers hourly so we agreed on $1000 for about 20 hours of work.

I've already charged him $300 dollars and I expect to invoice him the rest sometime next week.

It's a classic board game made in React and WordPress.

## Future leads

Work was slow the first three weeks of October.

I was about to start scouring IndieHackers, Reddit, and HackerNews for new opportunities.

Fortunately, Client #2 reached out if I'm available to do some work on his side project which I've accepted.

Also, Client #3 is pretty satisfied with the current state of the project and he's planning to hire me for another project once we're finished with the current one which is pretty cool.

## Conclusion

I hope this post was fun to read as much it was fun for me to write it.


I'm looking forward to reading your feedback so please don't be shy in the comments.


If you want to read these updates as soon as I write them, you can [sign up for my newsletter](https://adems-freelance-journey.carrd.co/).


Thanks for reading,
Adem
How to install the Kristall Gemini client on Raspberry Pi OS
Tags: raspberrypi, kristall, gemini
Published: 2020-11-06 21:08:37

[Kristall](https://github.com/MasterQ32/kristall) is an open source client for [Gemini](https://gemini.circumlunar.space/), a protocol and set of technologies for lo-fi, high performance hypertext.

There are no binary builds for the ARM architecture of the Pi and you need to install some Qt5 related packages. This post documents how I got things running on standard Raspberry Pi OS on a Raspberry Pi 400.

```
git clone https://github.com/MasterQ32/kristall.git
cd kristall
sudo apt-get install qt5-default qtmultimedia5-dev libqt5svg5-dev
make
./kristall
```

Beyond this point you could copy `kristall` to `/usr/local/bin` or wherever you want to run it from, as well as install the desktop file to get things into the application menu:

```
sudo mv kristall /usr/local/bin/
cp Kristall.desktop ~/.local/share/applications/kristall.desktop
update-desktop-database ~/.local/share/applications
```
3 simple steps to connect your Express and React apps
Tags: webdev, react, express, javascript
Published: 2020-11-06 20:42:03

---
title: 3 simple steps to connect your Express and React apps
published: true
description: Three simple steps to connect your Express and React apps in your local
tags: webdev, react, express, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/v7ne98k8cqo760iuokd3.jpg
---

Having your frontend and backend in two separate repositories rather than combining both is a common enough pattern. Follow the steps below to connect your React project that is running on port 3000 with your Express server that is running on port 4000.

## 1. Add a proxy in your frontend
In your React app, open up `package.json` and add the following line anywhere:

```javascript
// React app, package.json

"proxy": "http://localhost:4000"
```
This will let your React app know that when you do fetches that look like they're for resources on the same server, for example `fetch('/')`, it will look for that endpoint on the proxy server you specified, i.e. your Express server.

## 2. Add an API endpoint

Add an example endpoint:

```javascript
// Express repo, app.js

app.get("/hello", (req, res) => res.send("Hello World!"));
```

And an example fetch request:

```javascript
// React repo, src/App.js

useEffect(() => {
  const fetchResource = async () => {
    const response = await fetch("/hello");
    const responseVal = await response.text();
    console.log(responseVal);
  };

  fetchResource();
}, []);
```

## 3. Try it out!

Start up both servers in localhost. Again, your React app will run on port 3000 and your Express server will be on port 4000.

![React app in localhost](https://dev-to-uploads.s3.amazonaws.com/i/zw5xeutmwh8m3fg2jzx2.png)

![Express app in localhost](https://dev-to-uploads.s3.amazonaws.com/i/tuqag4unm4ca3qt96vv2.png)

Since the `fetch` method is wrapped in a `useEffect`, it will run as soon as the React server starts and the page is rendered. You can now open up the console in the frontend and see that the pinged endpoint's response is being logged correctly.

![Console showing hello world](https://dev-to-uploads.s3.amazonaws.com/i/41byuzeidtsxhs7x40xj.png)

## Common issues

* If you see "You need to enable JavaScript to run this app" as a response, chances are you forgot to add the proxy in `package.json`.

* If the browser network tab shows that the url specified in the `fetch` doesn't exist (a 404 error), try replacing localhost with 127.0.0.1 as the proxy value.

* If it's anything else, write it down in the comments.

Thanks for reading! Until next time 👋
_Cover photo by Hans-Peter Gauster on [Unsplash](https://unsplash.com/s/photos/connection?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)_
Top 3 Image compression tool for web/mobile apps.
Published: 2020-11-06 21:03:45

I recently got interested in compressing images on the client-side while I was working on a client project.
so I searched on google for the best online compression tool, after spent much time figuring out what is the best tool for using compression.

so here is the list of the best website I found:

1) TinyPng
It is a great online tool for compressing images, you can compress PNG, JPEG types image
link: https://tinypng.com

2) mozJpeg
It is also a great tool for compression images but the good thing is you can compress images without quality loss, also you can edit and resize your images online with this tool.
Another Best feature is its technology is browser-based(means you images won't be upload) so you don't need to worry about the privacy of your images, and save a lot of your bandwidth.
https://mozjpeg.com

3) compressjpeg
it is just like the tinyPng tool, it provides good results but there is a google ad.
you can compress both types of images PNG and JPEG.
https://compressjpeg.com


I provide you the links you can use any of these tools to compress images for web/mobile apps etc
but I recommend you to use https://mozjpeg.com because it is best for me and after using it you'll like it


Thanks
Prevent Cross-Site Request Forgery (CSRF) Attacks
Tags: security, csrf, attacks
Published: 2020-11-06 20:45:43

Learn how CSRF attacks work and how to prevent Cross-Site Request Forgery vulnerabilities in your Web applications by exploring a practical example.
[Read more...](https://auth0.com/blog/cross-site-request-forgery-csrf/?utm_source=facebookgroup&utm_medium=sc&utm_campaign=csrf)
Building Payment Provider Integrations on Solidus
Tags: rails, ruby, solidus, ecommerce
Published: 2020-11-06 20:10:46

{% youtube pWznleqof8s %}

Peter Berkenbosch gives us the rundown on payment provider integrations with Solidus.

"Building Payment Provider Integrations"
Providing a detailed step by step technical insight on how to integrate payment service providers in your Solidus storefronts. Focus mostly on the Solidus Payment internals, but also touching the surface of development support tools and best practises.
Web2py python wramework main features
Tags: web2py, python, wramework, main
Published: 2020-11-06 20:29:44

<div>The core list of the main <b>Web2py</b> features are:</div><ul class="u"><li>cookies</li><li>request</li><li>cache</li><li>internationalization</li><li>errors / tickets</li><li>GAE</li><li>SQLite</li><li>MSSQL</li><li>MySQL</li><li>Postgres</li><li>Oracle</li><li>FireBird database abstraction</li><li>etc.</li></ul><div>* It doesn't need to be enabled-just unzip and click on it-and you can build it in your browser.</div><br><br><a href="https://exceed-team.com/tech/web2py-python-wramework-main-features">Web2py python wramework main features | Exceed Team Blog</a>