teleren/devto huggingface dataset:
The Flux architectural pattern using useReducer, the Context API, and Sagas
Published: 2020-11-07 17:40:18

Just in case, here is a nice diagram about the generic Flux pattern in React.

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

## So, why am I writing about this?

It demonstrates the combination of :

- `Context` API and `useContext` hook
- `useReducer` hook
- [`useReactSaga` custom hook](https://www.npmjs.com/package/use-react-saga)

---

[Demo Link](https://confident-turing-f05f43.netlify.app/) | [GitHub Repo](https://github.com/boostup/react-context-api-multiple-reducers-mulitple-sagas)

---

## But why, you ask ?

Because I can ;)

No, but seriously, because I needed to make sense of Redux, of the Context API, and more generally, the Flux Pattern, and of async actions.

Also, to me, it is important to understand as many React functions or third-party packages as I include in my apps, and `useContext` and `useReducer` being shipped defacto with React is a plus, versus having to include a whole bunch of packages that revolve around the Redux ecosystem.

So this demo allows to demonstrate that the `redux` and `react-redux` packages are no longer required dependencies to implement the Flux Pattern in React, in a way that makes both sense and is scalable with combined reducers to handle endless future slices of state.

## Word of caution

What this demo does not demonstrate though, is if this combination mimicking redux will be as performant as redux.
And this, I do not know myself, as this is very experimental. I wouldn't recommend using this in production ;).

## Notes

This demo depends on a tiny package called `use-react-saga`.

All it is, is a custom hook for React which depends on the `redux-saga` package, which is something I wanted to experiment with as the next natural evolution step after `redux-thunk`, for async actions.

---

## Addendum

After the perusal of the installed packages in the `node_modules` directory, I have come to realize that there is a `redux` directory in there!! After perusing the `yarn.lock` file, `redux-saga` packages has it as a dependency.

So this demo does NOT unfortunately demonstrate that adding Redux as a dependency can be avoided. Fortunately, it is only [2kB, including dependencies](https://www.npmjs.com/package/redux)!

So this demo only goes to shows how **unavoidable** `redux` is when it comes to making stable apps ;)

In the particular case of this demo, if I wish to remove it as a dependency, I must implement Sagas myself. Is it worth it ? I'll leave it up to you to decide.

Finally, I should mention that I do not hold a grudge against Redux, I just wanted to evaluate the Context API as a potential replacement, since we see so many articles on this topic, but they all show very small unscalable demos or POCs which were never convincing to me.
Javascript Brush up
Tags: javascript, kylesimpson, digdeeper, becurious
Published: 2020-11-07 18:20:10

I have started brushing up my javascript concepts with great author "kylesimpson" book https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md who else wants to join with me.

If something interesting if caught up we will go post it here.

Please comment any other best resources to brush up JS concepts
  #Learn #implement #share
Angry Birds - like Physics game in 15 minutes with ZIM!
Tags: physics, angrybirds, zim, box2d
Published: 2020-11-07 18:14:25

We have made an Angry Birds type game in 15 minutes at 66% the size of P5js and MatterJS.  Here is the example https://zimjs.com/five/slingshot2.html.

```javascript
// here is a circle that will fall to the ground:

new Circle().center().addPhysics();

// amazing! 
// Or we can start with physics to set gravity, borders, etc.

const physics = new Physics();
// and drag things in physics
physics.drag();
```

---

The YouTube videos for the Code in Five Minutes series are here:

{% youtube ATfMF25i608 %}

---

{% youtube xe8k5ts-Ufk %}

---

{% youtube NUHIniq6p3c %}

---

If you have not checked out the Canvas recently - you simply must!  Here is the [ZIM&nbsp;Dev&nbsp;Site](https://dev.zimjs.com) and some [In-depth&nbsp;Guides](https://drabstract.medium.com/) by Dr&nbsp;Abstract including [Your Guide to Coding Creativity on the Canvas](https://drabstract.medium.com/your-guide-to-coding-creativity-on-the-canvas-ada0996298f6).
Have you ever code when you were high? 🥃🤪
Tags: discuss, watercooler
Published: 2020-11-07 18:11:42

---
title: Have you ever code when you were high? 🥃🤪
published: true
description: 
tags: discussion, watercooler
cover_image: https://media.giphy.com/media/sdEkeWpiaGz0A/giphy.gif
---

As all Americans must be partying right now and the festive season is coming soon, I hope you all are able to able to handle your alcohol and weed.

So what have you ever tried coding when you were high. If yes, how has your experience and I hope it wasn't production where you pushed. 😅
Pointers in Go
Tags: pointer, go
Published: 2020-11-07 17:34:01

---
title: Pointers in Go
published: true
description: Pointers in Go
tags: pointer, go, 
//cover_image: https://direct_url_to_image.jpg
---
Go is a call-by-value language, meaning it will use a copy of each function arguments in function calls, if we want to update a variable we need to pass its address using a pointer.

Go pointer syntax are similar as C.

__Pointer basics__
Get address of a variable using `&` operator
Derefence using pointer `*` operator
```go
// int variable
year := 2020
// we can get address using & op
year_add := &year
fmt.Println("Val of year: ", year)
fmt.Println("Address of year: ", &year)
fmt.Println("Val of year using pointer: ", *(&year))
```

__Function call by value__
```go
func call_by_val(year int) {
  year = year + 1
}
call_by_val(year)
// year won't be updated as it uses a copy in call_by_val function
fmt.Println("Call by val res: ", year)
```

__Function call by reference__
```go
func call_by_ref(year *int) {
  *year = *year + 1
}
call_by_ref(&year)
// here it will update the variable as we pass the address of the variable
fmt.Println("Call by ref res: ", year)
```

__Method with Pointer Receiver__
When using pointer receiver in methods, Go compiler does implicit conversion to match the type of receiver argument with receiver parameter.
To explain different use cases I will use a `Point` type and some methods as follows
```go
type Point struct {
  X, Y int
}
func (p *Point) Scale(factor int) {
  p.X = p.X * factor
  p.Y = p.Y * factor
}
// pointer receiver param
func (p *Point) Print() {
  fmt.Println("X: ", p.X, ", Y: ", p.Y)
}

// receiver param of type Point, any change won't be reflected on receiver argument
func (p Point) ScaleVal(factor int) {
  p.X = p.X * factor
  p.Y = p.Y * factor
}

// value receiver param
func (p Point) PrintP() {
  fmt.Println("X: ", p.X, ", Y: ", p.Y)
}
```
* Use case 1: both uses same pointer type
No implicit conversion
```go
p := Point{X:2, Y:3}
p_ptr := &p
Scale(p_ptr, 2)
// this will print the scaled point
Print(p_ptr)
```

* Use case 2: receiver param is of type pointer 
```go
// receiver arg is of type Point, compiler implicitly get &p to match type with receiver param
p.Scale(2)
p.Print()
```

* User case 3: receiver argument is of type pointer
```go
// receiver param is of type Point but receiver arg is a pointer, compiler dereference the receiver but any mutation won't be reflected on receiver arg
p_ptr.ScaleVal(2)
p_ptr.PrintP()
```

Here is the full example in [repl.it](https://repl.it/@ShaikhulIslam/pointersingo#main.go)
Open Source on-premises shipping API
Tags: opensource, multicarrier, shipping, api
Published: 2020-11-07 18:01:46

Handling the logistics pertaining to your business or organization in this modern age calls for a leverage of technology and automation. The different parties involved in the supply chain lifecycle of a product enjoy peace of mind and a sense of control when there is visibility. And that can only be achieved when the logistics parties are connected and in sync.

Integrating with a shipping carrier can be very challenging because of their technology choices and long and complex documentations. Added to that, the multi-carrier strategy becomes expensive to adopt as it requires a higher development and maintenance cost.

Purplship is an Open Source platform focused on making it easier for you to integrate with one or multiple shipping carrier services to your existing application.

#### Modern API

Businesses who need to integrate directly with their carriers without third parties Saas are left with the pain of integrating with every single carrier. Purplship modernizes under a single interface the shipping APIs when Saas is not the preferred way

#### Specialized lightweight documentation

Carrier’s web service docs are long and complex because of all the various shipping service requirements and use cases. Purplship breaks down into simple modules, freight, packages and document APIs to present specialized lightweight documentation that only covers your needs.

#### Complete control with Open-core

Saas providers offer limited integrations of the carrier’s capabilities. Purplship lets you build whatever you need–and keep your data on-premises.

We are very enthusiastic at the opportunity to empower software developers for a digitally connected supply chain. We are looking forward to your comments, feature requests, votes and contributions. If you find bugs, please let us know in the issue tracker.

To learn more:

* [Follow purplship on Github](https://github.com/PurplShip/purplship-server)
* Ask us anything at hello@purplship.com
* [File any bugs you find with our Issue tracking system](https://github.com/PurplShip/purplship-server/issues)

Thank you so much for reading all the way here,

Best regards,

The Purplship Team
HoneyBees Game of Life
Tags: hacktoberfest
Published: 2020-10-25 02:47:22


So I am a student of Lambda School and have finished the Core Web Developers part of the course and have been working with Computer Science or more specifically Python for the last unit.  I can tell you I am NOT a fan of python.  

For the end of the 1st Computer Science Unit we have our usual end of unit Build Week (or in the part time program build weeks) and our project was to create our own version of Conway's Game of Life.  

My name Melissa in Greek means Honeybee, so I wanted to change up the grid from boring 'ol square cells to hexagonal cells.  Well building a hexagonal grid in react wasn't too hard since there was a cool npm package I could use.  Being able to to click single hexagon cells proved to be a bit interesting. I was able to click the grid and change the whole grids color but that wasn't what I wanted to do.  With some help from fellow students, and even my instructor, I was finally able to get just the single hexagon cells to click on their own.  

Building the logic for the actual Game of Life however certainly proved to be more difficult that I realized and currently as of this post still not done.  Since I needed to have a working application by the end of the Build Week I chose to add the boring square grid.  Now don't panic I am not giving up on the hexagonal grid just yet.  Like I said though I needed to turn in a working application.  And I did.  

So what I did was create pages in my application the boring square ones and then the hexagonal one.  Check out the project here:
http://game-of-life-by-melissa.vercel.app/

Now by now you are wondering what this has to do with Hacktoberfest. Well https://thecodingtrain.com has a game of life challenge on their site so although I had to do this for my school that doesn't mean I can't submit my version to their git repository and with luck eventually their site as well.  So I did.  

I am very proud of this project even as it stands as it is as of this post.  I refuse to give up on that Hexagonal Grid.  I may even add more pages for other versions.  Who knows.
What Kind of Backlinks Are the Beneficial for SEO?
Tags: seo, business, mobile, marketing
Published: 2020-11-07 17:55:53

Backlinks play a vital role in the success of your website’s SEO. Some SEO experts like fourcreeds say that backlinks to the popular and authoritative sites play an outsized role in whether your SEO swims or sinks. Your search engine results pages (SERPs) placement is strongly and strongly affected by the amount and consistency of your website backlinks. And although most forms of backlinks (although to varying degrees) boost the credibility and rankings of a site, others can hamper your SEO efforts.
To know more visit: <a href="http://fourcreeds.com/"><b>FourCreeds</b></a>
Best Android Games Under 100MB
Published: 2020-11-07 17:32:40

There are a lot of Android Games, which are great but underrated.
Here are some of the <a href="https://dailywalker.xyz/best-android-games-under-100mb-in-2020-for-free/">Best Android Games Under 100Mb</a> that you can play in 2020.
1. Nova Legacy
2. Hunter Assassin
3. 2048 Balls (3d)
4. Stickman Hook
5. Endless Combat
6. Parkour Race

You can also check out <a href="https://dailywalker.xyz/loudest-portable-bluetooth-speakers/">Loudest Portable Bluetooth Speakers</a> which are excellent for gamers to play audio.
Contrast Challenge - CSS animation
Tags: codepen
Published: 2020-11-07 17:32:26

<p>An ode to contrast</p>

<p>This is a codelab-design experience to show the importance of contrast to usability, accessibility and hierarchy.</p>

<p>Here is a very good article about <a target="blank" href="https://medium.com/picsrush/web-design-tips-contrast-c73daf595606">Contrast</a>.</p>

<p>I implemented this in 2 ways:</p>
* with CSS animation, randomizing the word in white with JS
* with a user input to increase and decrease the background size

With CSS animation:</p>
{% codepen https://codepen.io/gayarabello/pen/ExyeOXr %}

You can see a controlled version by user input here:
{% codepen https://codepen.io/gayarabello/pen/OJXoBNY %}
How I got into coding.
Published: 2020-11-07 17:15:23

Ever since I was very young, I would buy electronic toys and after I played with them for sometime I would start to dismantle them. I collected the electronic parts, like boards, motors, gears and stuff with the hopes and dreams of building something with them someday. _I even built a "flying" bird cage that did not fly using an unused bird cage (RIP birdy) and lots of electronic parts I collected. While it's 'wings' flapped it wasnt enough._
One day Someone introduced me to computers and even built me a PC to take home. I had it before I had a smartphone in my life. For a few years that computer meant nothing more than something to play games in and an excuse to make easy friends. My memories are faded but somehow I learned about coding. Even before I took Computer Science as my subject in my 11th and 12th I was learning to code by myself. I even took a tiny c/c++ course before I started my 11th. For some people this won't sound so good, but I could fail in every subject and not worry about it as I would do well in CS. Sure I worried a bit for all the social and parental pressure that was around me. I just wanted to learn coding and didn't know why they were force feeding me everything else. 
I'm not a coding wizard, ninja or prodigy. I still am quite novice in coding. I don't know what the journey ahead is like for me but I'm very thankful to the person that introduced me to playing games on a computer and building me a computer to take home. It really set a positive direction in my life that I really needed. 
Thanks for reading :)
A new Way to assign variable in Cpp 10
Tags: cpp, tutorial, computerscience
Published: 2020-11-07 17:03:46

A new way to assign variable in cpp is:

`datatype variable name(any data)`

```
#include<bits/stdc++.h>

using namespace std;

int main(){

int b = 11;
int a(10);

cout<<"new way to print "<<a<<endl;

cout<<"old way to print "<<b<<endl;
}
```

Output shown here:

```
➜  ~ g++ test.cpp 
➜  ~ ./a.out      
new way to print 10
old way to print 11
```
What is Computer Network?
Tags: beginners, cisco
Published: 2020-11-07 16:40:44

A computer network is a set of devices connected through links. A node can be computer, printer, or any other device capable of sending or receiving the data. The links connecting the nodes are known as communication channels.

Computer Network uses distributed processing in which task is divided among several computers. Instead, a single computer handles an entire task, each separate computer handles a subset.

Following are the advantages of Distributed processing:

Security: It provides limited interaction that a user can have with the entire system. For example, a bank allows the users to access their own accounts through an ATM without allowing them to access the bank's entire database.

Faster problem solving: Multiple computers can solve the problem faster than a single machine working alone.

Security through redundancy: Multiple computers running the same program at the same time can provide the security through redundancy. For example, if four computers run the same program and any computer has a hardware error, then other computers can override it.
Web safe fonts interactive directory
Tags: showdev, webdev
Published: 2020-11-07 16:15:42

Check out my imitation of [Google Fonts](https://fonts.google.com/) website, where you can browse and select a font for your project. The only difference, my website is just for web safe fonts.

You can find it at [web-safe-fonts.vercel.app](https://web-safe-fonts.vercel.app/).

![Screenshot of web safe fonts.](https://dev-to-uploads.s3.amazonaws.com/i/2eixky4g1n04s6dkac9y.PNG)

You can find the code at [GitHub](https://github.com/gautemo/web-safe-fonts). It was created with Vite and Vue 3, which is a blast! I also tried out Vercel for the first time, which was just as easy as Netlify and Firebase hosting.

If you find any web safe fonts that are missing, give me a heads up in the comments, create an issue, or send a pull request. ✌
create-react-app boilerplate error
Published: 2020-11-07 16:13:55

Hello everyone, I am facing a problem with ReactJS with `create-react-app`.

I was using `yarn create react-app <my-project>` to create new react project, then `cd` into `<my-project>` to execute `yarn start` command. The command does not show any error but when I open it in browser using `http://localhost:300` it shows `hook.renderers is undefined` in *Firefox 82.0.2*. Please refer to the image for more information.

![Picture](https://dev-to-uploads.s3.amazonaws.com/i/i1rx4ygr26jruo0f8tyu.png)

I have tried all solution from google search result but it does not help.

Please help me provide some hint or solution. Thank you very much!

Environments:
- Node: v14.15.0
- yarn: 1.22.4
Turning caching performance on Magento 2.x
Tags: magento, caching, performance
Published: 2020-11-07 16:12:48

(I just move this old blog from Medium to dev.to)
Full page cache (FPC) with Varnish & others with Redis

The same with most popular article. This post just mentioned more about plan & server configuration as a specific case for a small project.
## Problem
Magento is a big framework, it needs a lot of system resource to initialize instance, running, processing the requests, reading the cached files/media files (Catalog)/static resource files (JS, CSS, template images). The build-in cache of Magento is not good for handling many requests, however it better for a dev env because your computer will cooler than running the web without cache.
Our instance is running on EC2 with small plan.

Magento `app/etc/env.php` configuration:
> MAGE_MODE: default|developer

Those reasons are why we must be considering to have another-faster-cache-engine. In case, we follow this one — Redis.
[Use Redis for the Magento page and default cache | Magento 2 Developer Documentation](https://devdocs.magento.com/guides/v2.3/config-guide/redis/redis-pg-cache.html)

## After installed Redis
It looks better than before. So, we revised session to Redis, faster than file, of course. The backend cache with Redis faster than as well.

The comparison:

> **Without FPC (build-in backend cache + session in files):**
Home page: 2.6 requests/sec
Product list: not updated yet
Product detail: not updated yet
Search: not updated yet
Sample API: not updated yet

> **With build-in FPC (build-in backend cache + session in files):**
Home page: 4.5 requests/sec
Product list: not updated yet
Product detail: not updated yet
Search: not updated yet
Sample API: not updated yet

> **With Redis for all FPC, backend cache, session:**
Home page: 11.5 requests/sec
Product list: not updated yet
Product detail: not updated yet
Search: not updated yet
Sample API: not updated yet

## Varnish
Very fast, at least x10 times of Redis FPC. Because the first request will touch your system, your DB, your engine then the Varnish making cache data for all HTML of rendered page. The second users just access to the cached-version of HTML website. Nothing be threats for your server anymore.

But, I’m still facing problem: 503 backend load failed, it’s investigating. Not done yet.

I already left this product. Just write here as my experience.

## Read more

1. [Magento 2.3.1 has released with announcement that it has supported for Redis 5 and PHP 7.2.x](https://devdocs.magento.com/guides/v2.3/release-notes/ReleaseNotes2.3.1OpenSource.html)
2. [Architecture: Magento on AWS](https://docs.aws.amazon.com/quickstart/latest/magento/architecture.html)
FlytLabs
Tags: javascript, python, machinelearning, startup
Published: 2020-11-07 16:07:07

Hello,

My name is Ben Kronoff. I'm the founder of FlytLabs expirmental development, located at https://flytlabs.dev.

I've just made a plan outlying the function and sound operation of the divisions of this group. It outlines how different projects will communicate and work in harmony to achieve a greater, more solid public understanding and service - and this has always be derived from the search, and need of public interest. 

Kindly check out our projects. We're looking for more developers in anything from ML and AI to Javascript to React and Python and beyond. If you feel the projects on our website are sufficient for capturing a crowd of public interest and would like to see yourself be apart of creating the framework which will lead the company forward to investor relations and on, kindly message me or reach out to ben@flytlabs.dev. I'll share this plan with you and hopefully we can move forward under a mutual and shared understanding which will provide immense power to the potential of our creations.

Thanks for your time. I know some of you will find great value in this. I hope to speak with you soon.

Ben
Hacktoberfest 2020 Badge
Published: 2020-11-07 16:01:38

Hello Community!

I just wanted to know does anyone have any idea regarding the 2020 Badges for Hacktoberbest to be rolled out to our profiles?
This was my first time completing the event. So, I do,t have the slightest of an idea about how long it takes and what's the procedure to get the Badge featured on my profile.
Do you Read your Reading List?
Tags: discuss, watercooler
Published: 2020-11-07 15:49:07

Today I went through my reading list and noticed this:

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

Does it look like HTTP 404 to you? It certainly does to me, but it's the actual number of articles that are there. 

It's a nice metaphor though. 

https://dev.to/readinglist should be the most important part of DEV, along with https://dev.to/new 
but I often forget about it.