teleren/devto huggingface dataset:
4Steps to Create react dev env with Docker for Beginner🐳
Tags: docker, react, vscode, beginners
Published: 2020-09-09 07:24:36

In this article, I will introduce you to how to create react dev env with `Docker`. Actually there are 5 steps (including step0), but you can skip `Step0` since it's not necessary for people who don't use VScode and don't want to install a new VScode extension. 

### Step0 Install an extension, `Docker` on VScode (optional)

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


### Step1 Create `Dockerfile`

```zsh
$ mkdir react_docker
$ cd react_docker
$ touch Dockerfile
```

```
FROM node:12.18.0-alpine
WORKDIR /usr/src/app
```

### Step2 Create docker-compose.yml
docker-compose.yml must be under `react_docker` folder.
```zsh
$ touch docker-compose.yml
```

```yml
version: '3'
services:
  react:
    build:
      context: .
      dockerfile: Dockerfile
    environment: 
      - NODE_ENV=development
    volumes:
     - ./:/usr/src/app
    command: sh -c "cd myapp && yarn start"
    ports:
     - "3000:3000"
    tty: true
```
If you want to use a different app name, you need to change 2 things. 
1. `cd myapp` --> `cd your-react-app-name`
2. `npx create-react-app myapp` --> `npx create-react-app your-react-app-name`

### Step3 Build the image
This step will take some time.
```zsh
$ docker-compose build

# javascript
$ docker-compose run --rm react sh -c 'npx create-react-app myapp'

# typescript
$ docker-compose run --rm react sh -c 'npx create-react-app myapp --template typescript'
```

### Step4 Start react app
This step may take some time 
```zsh
$ docker-compose up -d

# stop
$ docker-compose stop
```

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

Open VScode and click the `Docker` icon in the sidebar.
You can check the docker's status. Of course, you can do the same thing with Terminal/iTerm.

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


Now, we can start developing the react app.

Happy coding with react and Docker!!!
Golang Web - HTTP Cookie
Tags: go, programming, backend, webdev
Published: 2020-09-09 07:18:34

Cookie is a small data piece of data stored on the users computer by the web browser while browsing a website. So in this chapter we will learn how to create and access cookie in Go, so let`s do it.

# PRACTICE
Create file main.go and registration two route.

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

The variable cookieName contains a string, it later on for using as a name cookie.
- Route / work as to create new cookie 
- Route /delete have a work for to delete cookie and then redirect to route / until new cookie created.

Ok, so now create function handler ActionIndex(), in this function the data is a string random to save in the cookie.

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

The cookie can be access from method .cookie() belong objek *http.Request. This method return two informations.
- Objec Cookie
- Error, if have

Ok, so next create function handler ActionDelete(), this handler for deleted cookie with name cookieName and redirect to route / to create a new cookie.

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

# TESTING
Run this program and see the result

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

Finally! Hope your enjoy it.
Next.js 9.5 - Stable Incremental Static Regeneration
Tags: nextjs, react, jamstack
Published: 2020-09-09 07:07:56

One of the benefits of State Site Generation is that we can keep our site static generated at build time and put all site files distributed to global edge CDN. The result is a fast, reliable, and safe browsing experience.

However, suppose we need to fetch the dynamic data frequently, and the data source didn't provide any webhook mechanism to rebuild the site. In that case, we need to rebuild the site for every data update manually. It will be tedious tasks to do so.

To enjoy both worlds, static site generation, and dynamic data fetching without manual site rebuild. Next.js has introduced - Incremental Static Generation feature.

All you need to do is add the revalidate inside getStaticProps return

```javascript
export async function getStaticProps () {
  return {
    props: await getDataFromCMS(),
    // we will attempt to re-generate the page:
    // - when a request comes in
    // - at most once every second
    revalidate: 1
  }
} 
```

To showcase this great feature, the next.js team has created an example [https://reactions-demo.now.sh/](https://reactions-demo.now.sh/)

![Demo](https://images.prismic.io/kickstartapp/dd1ed6c0-8011-41f2-b8e7-6c5a915a7f9c_demo.gif?auto=compress,format)

By updating the reaction in GitHub, the next app will revalidate and rebuild the page in no time!

Thanks for reading! You can follow my [twitter](https://twitter.com/csytim) or [blog](https://kickstart.app/blog) for more news.
Zero-Knowledge Proofs, zkRollups, and Ethereum Layer 2 Scaling Solutions
Tags: zeroknowledgeproofs, ethereum, blockchain, scaling
Published: 2020-09-09 07:04:15

Zero-knowledge techniques are mathematical methods used to verify things without sharing or revealing underlying data. 

"Zero-knowledge proof or zero-knowledge protocol is a method by which one party (the prover) can prove to another party (the verifier) that they know a value x, without conveying any information apart from the fact that they know the value x." -- [Wikipedia](https://en.wikipedia.org/wiki/Zero-knowledge_proof)

In the Ethereum blockchain ecosystem, Matter Labs is bridging the gap between cutting-edge academic research on Zero-Knowledge Proofs and their applications in usable products. It started out of scientific curiosity, the joy of engineering, and a deep conviction: The most impactful way to improve the world today is to provide an open and free alternative to its existing, deeply flawed financial system. Recently, Matter Labs helped Reddit with their bake-off scaling challenge. 

If you're interested in ZKP or just curious to learn the possible scaling solution for Ethereum, we have an AMA with Matter Labs' CEO Alex Gluchowski on Thursday at 8:30 AM ET. 

Hope you can join us! 

More details: https://medium.com/ethplanet/ethplanet-ama-with-alex-gluchowski-from-matter-labs-6364d2257d52
Activate setup
Published: 2020-09-09 07:01:35

<a href="https://canon-com-ij-setup.sitey.me/">canon.com/ijsetup</a> offers the Printer Setup download link where you can install the printer setup further. <a href=”https://safe-webroot.sitey.me/”>webroot.com/safe</a> Install webroot on new computer-Activate highly rated Webroot antivirus in your PC, Andriod or Laptops.</a>. <a href=”https://nuance-dragonnaturallyspeaking.sitey.me/”>Dragon Naturally Speaking</a>is the solution for all the business, home and other projects in the world of writing, typing and documents making.<a href=”https://setup-office-setup.sitelio.me/”>office.com/setup</a> gives multiple options to activate and register setup for everything you work on office products.
React bootstrap 4
Published: 2020-09-09 06:59:15

Bootstrap is a front-end framework for easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, and many others.

How to install React bootstrap 4 

one can use the following command to install bootstrap-4-react and use it in react app

```javascript
npm install --save bootstrap-4-react
```
one can get more information 

https://react-bootstrap.github.io/
source: <a href="http://askavy.com/react-bootstrap-4/">React Bootstrap 4</a>
My First Web App!
Tags: webdev, github, sideprojects, showdev
Published: 2020-09-09 06:58:23

I thought of using my time during this pandemic to learn and create something new. [Good First Issues](https://goodfirstissues.com) is the result of this!

It searches and aggregates issues labelled as _Good First Issues_. It also allows users to search issues based on the repo's programming languages and issue labels (e.g. "for beginners"). This is also my first foray into GitHub actions (used this to schedule my script to collect issues and populate my database).
How to Get the Root State type from your TypeScript React application.
Tags: javascript, typescript, react, redux
Published: 2020-09-09 06:57:55

One of the primary benefits of TypeScript is its static type checking, ensuring that the variables in your code are receiving the right things.

There are many instances in your application where you need to grab the type of the state, especially if you are using Redux and combining different state reducers into one root reducer.

Here is a quick guide to ensuring you always have the latest type of your state in your TypeScript React application!

# Where Your Root State Lives in Redux
For those using redux, the state of the application doesn't live inside components necessarily, which is the case normally. Rather your components are connected to a 'store' of the global application state and get their information from that.

In most cases, you will have many 'reducers' that reduce certain state change actions, and these reducers will combine into a 'root reducer', that will combine all the states. It will look something like this:

`rootReducer.ts`
```
import { combineReducers } from 'redux';

import userReducer from './..';
import shopReducer from './..';

const rootReducer = combineReducers({
    user: userReducer,
    shop: shopReducer
});
```
# Grabbing the State from the Root Reducer
If you remember, the rootReducer describes the state of your redux application. To grab the type, simply write the following export:
```
export type RootState = ReturnType<typeof rootReducer>;
```

* `export type`: so you can use the state type in other places
* `RootState`: name of the type
* `ReturnType<>`: returns the type of the return inside the <>
* `typeof rootReducer`: the complicated redux type of the reducer that we will let TypeScript decode.

The benefit of this is that the type is not fixed; you can add or remove your reducers from the root reducer and your root state will update accordingly!

Thanks for reading :)
What the heck is RPC ? 
Tags: beginners, webdev, javascript, java
Published: 2020-09-09 06:54:03

Do you know about RPC ?

##Background:
For communication between front-end client and back-end server we have different ways :

1. REST APIs
2. GraphQL
3. RPC

These days GraphQL is being quite used due to lower network hits & less communication between mobile team, front-end and back-end developer. Still we don’t make the whole app using graphQL but try to follow hybrid approach of using REST APIs + GraphQL as per use-cases.

##What is it ?
RPC (Remote Procedure call) is same as calling a function in Javascript, Python etc taking a method name and arguments. It is like executing a block of code on another server.
RPC is just a bunch of functions, but in the context of an HTTP API, that entails putting the method in the URL and the arguments in the query string or body.

##There are few specifications for it like:
1. XML-RPC
2. JSON-RPC

Slack has provided its RPC based Web API : 
>  https://api.slack.com/web

Its is most often used in “Microservices” based architecture where these microservcies communicates with each other via RPC calls.

Do you think if there are any performance gains if we are using it ?
Is there any limitation or challenges of using it ?
Do share in comments
Top 5 Free TYPO3 Gallery Extensions 2020
Published: 2020-09-09 06:48:26

Almost every TYPO3 website uses images and TYPO3 Gallery Extension makes it easy to display those images in an attractive way.

To help you find the perfect gallery extension, we’ve compiled a list of the best TYPO3 Gallery extensions, with their feature lists.

Find the best way to display your TYPO3 images with this roundup of the best TYPO3 Gallery Extensions.

Ready to dive deep? Let’s go! In this article, you'll read

- Our Criteria for the Best TYPO3 Gallery Extension
- TYPO3 Gallery Extensions
- All In One Gallery
- Camaliga: CArousel/MAp/LIst/GAllery
- Generic Gallery
- Grid Gallery TYPO3 Extension
- Media Gallery TYPO3 Extension

Read the complete blog at - https://t3terminal.com/blog/typo3-gallery-extension/
What Happens When You Type in a URL with HTTPS ?
Tags: https
Published: 2020-09-09 06:41:10

Thanks @William's post for HTTP work.
And based on @William's post , I've write the HTTPS work steps and using the workflow diagram . 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q5apsh58krolnfommoik.png)
Hope you enjoy it. 

Thx.
مزیت های هاست اشتراکی

Published: 2020-09-09 06:37:36

مزیت های هاست اشتراکی

برای کاربران و مشتریان همواره این سوال وجود دارد که چرا باید از هاست اشتراکی استفاده کنند و به چه دلیل نیاز دارند تا این نوع از هاست را خریداری کنند. در پاسخ به سوال باید بگوییم که هاست های اشتراکی مزیت هایی هم دارند که در ادامه به آن می پردازیم:

-   مقرون به صرفه
    

یکی از اصلی ترین مزیت های هاست های اشتراکی این می بادش که مقرون به صرفه هستند و شما با استفاده از هاست های اشتراکی می توانید با هزینه خیلی کمتر از یک سرور، وب سایتتان را ایجاد کنید.

-   سرور های قدرتمند
    

سرور و فضایی که هاست های اشتراکی روی آن قرار دارند از دیگر موارد حائز اهمیت می باشد. هاست های اشتراکی معمولا روی سرور های قدرتمندی ارائه می شود.

  

در این قسمت سعی کردیم تا به دو نکته کلیدی از هاست های اشتراکی به شما معرفی کنیم.

[https://www.iranserver.com/web-hosting/](https://www.iranserver.com/web-hosting/)
هاست بخریم یا سرور؟

Published: 2020-09-09 06:37:17

هاست بخریم یا سرور؟

اینکه برای وب سایتتان هاست خریداری کنید یا سرور کاملا بستگی به شما دارد که چه استفاده از آن وب سایت داشته باشید. برای مثال اگر شما یک وب سایت فروشگاهی پربازدید دارید، بهتر است که از سرور های مجازی و یا حتی سرور های اختصاصی استفاده کنید. اما اگر یک وب سایت با بازدید متوسط یا کم بازدید دارید، می توانید از [هاست](https://www.iranserver.com/web-hosting/) استفاده کنید. یکی از مزیت های هاست این می باشد که بسیار مقرون به صرفه است و می توانید به راحتی از آن استفاده کنید.
هاست اشتراکی چیست؟

Published: 2020-09-09 06:36:59

هاست اشتراکی چیست؟

زمانی که می خواهدی [هاست](https://www.iranserver.com/web-hosting/) خریداری کنید، این سوال برای شما به وجود می آید که هاست اشتراکی چیست؟ در پاسخ به این سوال باید بگوییم که هاست های اشتراکی، همانطور که از اسمشان پیداست، فضای میزبانی اشتراکی هستند. این به این معناست که تمام منابع سرور در اختیار شما نیست و با مشترکین دیگر به اشتراک گذاشته شده است و ممکن است که روی یک سرور هاست اشتراکی، 5 سایت به صورت همزمان میزبانی شود.
چرا به هاست نیاز داریم؟

Published: 2020-09-09 06:36:27


چرا به هاست نیاز داریم؟

یکی از سوالاتی که همواره برای کاربران پیش می آید این می باشد که چرا به [هاست](https://www.iranserver.com/web-hosting/) برای وب سایتشان نیاز دارند و چه دلیلی دارد که از هاست استفاده کنند. در پاسخ به سوال باید بگوییم که شما برای اینکه بتوانید وب سایت یا فروشگاه اینترنتی را روی اینترنت نمایش دهید، نیاز دارید تا یک فضای میزبان یا هاست داشته باشید. اما انتخاب هاست متناسب با وب سایت همواره یکی از مواردی می باشد که اهمیت فراوانی دارد. یک هاست یا فضای میزبانی مناسب دارای ویژگی های زیر است:

-   پشتیبانی دارد
    
-   از سخت افزار های بروز استفاده می کند.
    
-   دارای نرم افزار های بروز می باشد.
Manage Your Organization Effectively Using Salesforce Integration Services

Tags: salesforceintegrationservices, organization
Published: 2020-09-09 06:25:18

One of the biggest hurdles that small and large [businesses](https://www.cloudanalogy.com/) face is customer relationship management. Companies have spent millions to develop customer management and provide better services efficiently. However, with the introduction of software as a service (SaaS), this hard work has been simplified. SaaS provides a great platform to manage data efficiently in a mutual database. Because the Salesforce Company offers SaaS applications, you can take advantage of Salesforce integration services to simplify the data management and customer administration process.

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

Manual data management has become a tedious process and significantly hampers the productivity and development of a business. As managing large amounts of data gradually becomes a tedious task, the demand for efficient data integration services increases. The cloud-based SaaS application provider offers a custom Salesforce connector that helps organizations maintain a large database, records, import leads and export data, and generate reports for analysis and evaluation, on a daily basis, weekly or monthly. With the integrator, you can improve the accuracy of your work, minimizing paper use and saving valuable time.

The [Salesforce integrator](https://www.cloudanalogy.com/) offers more efficient online solutions that can help keep data in sync. All local and local users can access the services without any hindrance. Businesses can easily share data through a variety of other channels and sources, 24 hours a day, 7 days a week. SaaS applications are generally very easy to use, so they can be easily adapted by employees of any company.

**What are the advantages for the company?**
Salesforce integration services are the best alternatives for any company that uses cloud-based solutions, where they need to manage a large amount of data. It offers an instant and seamless process to manage and funnel data with other sources used by the company. The integrator offers various companies and enterprises the necessary independence as well as the flexibility to carry out their operations in a transparent manner. By using a cloud-based solution, companies can offer their employees the ability to access a wide range of online data applications, thus avoiding all circumstances caused by geographic restrictions.

Therefore, Salesforce Integration Services opened new ways for companies to minimize overhead and administrative expenses, while improving overall performance and efficiency. Because the Salesforce connector is integrated with the cloud-based solution, you won't have to spend more to take advantage of the services.
Exhibition of my best discoveries about fractals developed in GLSL
Published: 2020-09-09 06:14:21

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

http://glslsandbox.com/e#67425.0

The mandelbrot set fascinated me intuitively. Doesn’t this fractal look like the silouette of a bee? :)

Homepage: https://sites.google.com/view/necips/
Are there any easy-to-use tools for creating sketches? 
Tags: help, discuss
Published: 2020-09-09 06:06:16

This is the kind of output I'm expecting:

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zj7m9ukxa3yz4xz4lrbe.jpg)
Weekly web development update #41
Tags: weekly, webdev
Published: 2020-09-09 06:01:55


______

##[Shortcuts.design](https://shortcuts.design/)
[![Shortcuts.design](https://shortcuts.design/Shortcuts.designlaunch01.png)](https://shortcuts.design/)
A shortcut reference for the most important tools of designers.

______

##[Omatsuri](https://omatsuri.app/)
[![Omatsuri](https://wweb.dev/weekly/screenshots/omatsuri.jpg)](https://omatsuri.app/)
A nice collection of open-source browser tools.

______

##[ztext.js](https://bennettfeely.com/ztext/)
[![ztext.js](https://wweb.dev/weekly/screenshots/ztextjs.jpg)](https://bennettfeely.com/ztext/)
Easy to implement, 3D typography for the web, which works with every font.

______

##[Previewed](https://previewed.app/)
[![Previewed](https://wweb.dev/weekly/screenshots/previewed.jpg)](https://previewed.app/)
A website to generate mockup previews on various devices.

______

##[Morphing SVG With react-spring](https://css-tricks.com/morphing-svg-with-react-spring/)
[![Morphing SVG With react-spring](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/react-spring-svg-morph.gif)](https://css-tricks.com/morphing-svg-with-react-spring/)
A nice article by Mikael Ainalem about SVG animations in React.

______

##[Selecto.js](https://github.com/daybrush/selecto)
[![Selecto.js](https://wweb.dev/weekly/screenshots/selecto.jpg)](https://github.com/daybrush/selecto)
A component that allows you to select elements in the drag area using the mouse or touch.

______

##[Arwes](https://arwes.dev/)
[![Arwes](https://arwes.dev/static/img/arwes.jpg)](https://arwes.dev/)
A futuristic sci-fi and cyberpunk graphical user interface framework for web apps.

______

##[Meta Tags](https://metatags.io/)
[![Meta Tags](https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png)](https://metatags.io/)
A website to edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter, and more.

______

##[7 Practical Tips for Better Microcopy](https://learnuxd.io/posts/7-practical-tips-for-better-microcopy)
[![7 Practical Tips for Better Microcopy](https://www.learnuxd.io/img/7-tips-for-better-microcopy/share.png)](https://learnuxd.io/posts/7-practical-tips-for-better-microcopy)
Some good tips for improving the copywriting of your website.

______

##[CSS Values](https://cssvalues.com/)
[![CSS Values](https://cssvalues.com/images/social.png)](https://cssvalues.com/)
A web app to search the syntax and all possible values for any valid CSS property.

______

##[Tailwind Ink](https://tailwind.ink/)
[![Tailwind Ink](https://wweb.dev/weekly/screenshots/tailwind-ink.jpg)](https://tailwind.ink/)
An AI palette generator trained with the Tailwindcss colors.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Making a Social Commitment for a Certification 
Tags: watercooler, motivation, yearinreview, committolearn
Published: 2020-09-09 06:00:21

I read somewhere that making a public announcement can make one feel obligated/motivated to work towards a goal. 

Here, I make a social commitment that I will be attempting a certification that I have been delaying (for a while) on 9-Oct-2020!

Let's see what happens!