teleren/devto huggingface dataset:
My learning plan 2020
Tags: learning, programming, beginners
Published: 2020-05-29 10:55:59

---
title: My learning plan 2020
canonical_url: https://blog.bipinr.com/my-learning-plan-2020/
published: true
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/21pojm9qii3fczthfk98.png
description: Here is the list of things I would like to learn in 2020
tags: learning, programming, beginner
---
This is a list of things I want to learn in 2020 and why these subjects interest me. These are not in any order, so I may try to learn things based on my interest and as I time permits. I know this is a pretty extensive list, so I'm trying to achieve as much possible. I believe some I can learn as part of my work.
* I want to learn [Angular](https://angular.io/), this is a very popular framework and I could use this at my work too. An added advantage, the latest version of angular uses [typescript](https://www.typescriptlang.org/) and I can pick up some typescript when learning angular.
* Learning [React](https://reactjs.org/), another popular framework. I tried to learn some basics and found this very interesting. React is also used in building cross-platform apps using [react native](https://reactnative.dev/) for mobile and [electronjs](https://www.electronjs.org/) for desktop.
* I want to learn [Adobe Photoshop](https://www.adobe.com/in/products/photoshop.html) and [Adobe Lightroom](https://www.adobe.com/in/products/photoshop-lightroom.html) because I'm also a photography enthusiast and want to be better in photo editing.
* I want to learn [vue.js](https://vuejs.org/), this is another front end framework for web design that is gaining a lot of traction.
* Master [SOLID](https://en.wikipedia.org/wiki/SOLID) principles, is fundamental for any good application architecture. I have a good understand of SOLID principles and try to follow these in my application architecture, but no always.
* Learn [Kubernetes](https://kubernetes.io/), because of this industry-acclaimed container orchestration system.
* Complete Harvard [CS50](https://online-learning.harvard.edu/course/cs50-introduction-computer-science) course, this is a great course to refresh your computer science basics and is considered to be the best.
* Learn a bit of [Python](https://www.python.org/), python is a favorite for folks in data analysis, AI, and Machine learning. These are areas I would like to learn at some point in the future. So learning a little bit of Python will benefit me. I'm hoping I can lean this as part of the CS50 course.
* I want to learn [golang](https://golang.org/), I have a heard lot about golang and how this is being used increasingly more these days.
* Learning [Nodejs](https://nodejs.org/en/), I know a little bit of nodejs already. I worked on a personal project using nodejs, but did not get time to learn it properly and finish my project.
Webpack plugin for fetch data at build time
Tags: webpack, javascript, react, opensource
Published: 2020-05-29 10:53:58

---
title: Webpack plugin for fetch data at build time
published: true
description: maybe you might to fetch data at build time
tags: webpack, javascript, react, opensource
---

## About Static Source Data

The goal of this module is we want to show data in page from API Servie (e.g. Landing Page, About us), we don't want to fetch data in run time (using `fetch` or `axios`) because that make user waiting for loading data. It's ok for often chagning data to use fetch at run time but for rarely changing data, it might be better in some case if we can fetch data at build time.

### Why don't we hardcode content?

We want to use data from API service because we might use CMS for non-technical person to update data (headless cms is good for this) and client fetch updated data via API service.

## Who's suiable for this module

- You want to show data which rarely updated in page (e.g. Landing Page, About us) and don't want to fetch at run time.
- You don't want to hardcode content in html because it takes time due to require collaboration of developer and non-technical person for updating content.
- You want to implement CMS or use headless CMS service for non-technical person update content. That ways, client need to fetch data via API servie somehow.
- You don't want to keep track content file in your workspace.

if you're interested, you can look at our github.

https://github.com/20Scoops-CNX/static-source-data
Simple Rules to Master 'this' Context
Tags: javascript, beginners, webdev
Published: 2020-05-29 10:50:23

When I was learning JS for the first time, the first difficult thing to grasp was **this**. Yes! you won't believe it but that is what I felt. 
So in this article I will do my best to explain 3 basic rules that I learned at that time which will make you master the `this` context in browser environment.
A quick side note before we proceed, many issues of **this** context are actually solved in ES6+ standard and so I will be using ES5 to demonstrate it.
Consider following example and guess What's `this` pointing too?

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

Well to `car`. If you have guessed it right then you are at a good place. Let me change this abit and guess what is `this` pointing to?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9clj1celmky1cv2j2kvz.gif)

Well to **Window** object. Yes! you heared it right. You didn't expect it to see but trust me it does! 
Now consider following example and guess what is `this` pointing to?

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

In this case it will point to 'c' object. Now if I change this abit more guess what it is pointing to?

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

It is pointing to **Window** object! Isn't this weird? it is, specially if you have came to JS from other languages such as C#. 
This is getting boring let me break it down into following rules.

# Rule of Thumb for `this`
1. **Dot call operator**: If you see a dot call operator e.g `car.beepBeep()`, `this` will be pointing to whatever is in the left side of '.' operator
2. **`new` keyword**: If you are invoking a function with constructor e.g `var c = new Car("Some Car!")` then the context within your constructor will be i.e c (in our case)
3. **`call` or `apply`**: Finally if you are using `call()` or `apply()` function then the context will be whatever you pass in first argument e.g `car.beeBeep.call(otherCar)`. In this case the context will be **otherCar**
4. In JS functions don't know where they live, they only know how they are called. So if none of the above rules apply then `this` will be pointing to **global** or **window** object
Extract key values into an array
Published: 2020-05-29 10:07:01

## Use case

> You have an array of objects and want to pull out all the values related to the `amount` into an array.

## What will happen

We will be creating a [Higher-order function](https://dev.to/damcosset/higher-order-functions-in-javascript-4j8b) that can be used with the [`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) method. The method will then loop through the items in an array and pull out all the values for a specific key.

## Data structure

*<small>I am providing a Vanilla JS and Typescript example, the interface can be ignored if you are using vanilla JS</small>*

```ts
interface Data {
  id: string
  amount: number
}

const arr: Data[] = [
  { id: "a-a-a-a", amount: 5 },
  { id: "b-b-b-b", amount: 50 },
]
```

## Method - Vanilla JS

```js
export function getKeyValues(key) {
  return (acc, cur) => acc.concat(cur[key])
}
```

## Usage

```js
const amounts = arr.reduce(getKeyValues("amount"), [])
// -> [5, 50]

// Because the method is a HOF, we can create separate methods to use later
const getAmounts = getKeyValues("amount")
const getIds = getKeyValues("id")

const amounts = arr.reduce(getAmounts, [])
// -> [5, 50]

const ids = arr.reduce(getIds, [])
// -> ["a-a-a-a", "b-b-b-b"]
```

## Method - Typescript
```ts
// Type definition for a `.reduce` method
type ReducerHOF<A = any[], C = any> = (
	accumulator: A,
	current: C,
	index: number
) => A

/**
 * Extracts the values for a specific key
 *
 * @export
 * @template T
 * @template K
 * @param {K} k
 * @returns {ReducerHOF<T[K][], T>}
 */
export function getKeyValues<T, K extends keyof T>(k: K): ReducerHOF<T[K][], T> {
	return (acc, cur): T[K][] => acc.concat(cur[k])
}

/*
For our example;
T = Data
K = "id" | "amount"
Return type, if K == "id" -> string[]
Return type, if K == "amount" -> number[]
*/
```

Here we use [Generics](https://www.typescriptlang.org/docs/handbook/generics.html) to add type safety to the method. For example, with vanilla JS you'll be able to get the values for the key `comments`. Which will return an array of `undefined` values; not ideal. Of course, you can expand the method to check if a key exists; it will also provide you with autocomplete options within your IDE.

## Usage

```ts
const amounts = arr.reduce(getKeyValues("amount"), [])
// -> [5, 50]
```

## Takeaways

This method allows you to pull out the values of any key in an array of objects. Using Higher-order functions allows you to encapsulate functionality to make more maintainable and readable code.

---

Thank you for reading my article, it really means a lot! ❤️ Please provide any feedback or comments, I'm always looking to improve and have meaningful discussions.

👋 until next time!
Post Makers - Week 10
Tags: bootcamp, forhire, jobhunt, quarantine
Published: 2020-05-29 10:28:29

This marks the 10th week since graduating from the Makers Academy. To think that almost the same time has elapsed since starting the course is crazy. It feels so much longer in many ways, but also like a snap of the fingers.

It has been hard - as it has been for everyone. Going from the crazy fast pace of the Makers curriculum, to sitting inside the same 4 walls every day is certainly a massive change, but with regards to my coding, I am beginning to understand that it has been a blessing in disguise. 

I have the freedom to take projects at my own pace, study hen i feel like it, and more importantly just code. When I was first thinking of starting this journey, i spoke to many friends (and friends of friends) who were in the industry - and the same advice kept coming up. "There is no shortcut to time" they would say, no matter who I spoke to. I am only truly understanding that message now, 9 months in. 

I now understand what to type into stack overflow, how to change the code to see a different response, and how to debug more effectively. I don't panic when my tests are flashing red, or the endless console errors fill the screen...instead it feels like a bit of a game now, and has become truly fun. I still want to throw my macbook out of the window often, and curse whoever created the 'rules' for React apps, but quickly I know that I can overcome the issue. Also i have come to notice more that issues mean you are learning and expanding your bag of tricks, it is going to be there for the rest of my career! 

The bottom line is there is indeed no shortcut to time. I honestly feel i think differently about discussions in life now. Everything seems like a conditional, and every problem has a solution, even if you don't know it then and there. I am having crazy/structured dreams where i feel like i dream in code...but i'll leave that for another post.

Everyone stay safe and fingers crossed this mess will be over soon.

I'm off to Durham this weekend....

David
Laravel - redirect user based on usertype
Tags: laravel, laravel7
Published: 2020-05-29 10:23:54

---
title: Laravel - redirect user based on usertype
published: true
description: laravel redirect user based on usertype
tags: laravel, laravel 7
---

https://therichpost.com/laravel-7-how-to-redirect-authenticated-users-based-on-user-type/

Thank you
How front-end will take a step forward soon?
Tags: javascript, webdev, docker, webpack
Published: 2020-05-29 10:01:45

Before a web developer starts working on a web app he needs to choose what framework to use, set up whole environment with tools like docker and webpack. It's already a lot to do before we start working on actual code. And that's not the end. At some point of our project we going to find out that we are working on something similar to what we worked on before. Another contact form, calendar, login page.

So here is my 3 steps solution:

Framework - that  has been developed as part of something bigger. It has to be simple and generic. Assists you in following the simple design rules. It will let you start with a static PoC and notifies you (live) what might need to be customised to turn it into valuable product. Instead of writing glue code all over again, you'll code only what matters i.e. features

IDE - Fully compatible with the framework. It will assist you with repeatable tasks and automate your development processes. No docker, no webpack, no initial setup. Everything done by IDE.

Components - They will let you reuse code to save time and keep your UI consistent. No more writing the same peace of code again. Just use component created by yourself, or one from repository.

Of course is much easier to say than do. That's why we need your support. Visit our framework repository and leave feedback to let us know what do you think about whole idea.

https://github.com/gluecodes/gluecodes-framework
MAKE A PICTURE VIEW FRAMEWORK WITH HTML
Tags: css
Published: 2020-05-29 09:47:55

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tutorial Membuat Gambar Berjalan dengan CSS</title>
      <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <h2 align="center"> Tutorial Membuat Gambar Berjalan dengan CSS </h2>
  <div id="background-wrap">
    <div class="x1">
        <div class="image">
            <img src="logo.png" />
        </div>
    </div>
</div>
</body>
</html>

body {
	background: #00b4ff;
	color: #333;
	font: 100% Arial, Sans Serif;
	overflow-x: hidden;
}

/* KEYFRAMES */
@-webkit-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@-moz-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

/* ANIMATIONS */
.x1 {
	-webkit-animation: animateCloud 10s linear infinite;
	-moz-animation: animateCloud 10s linear infinite;
	animation: animateCloud 10s linear infinite;
}
🎂Happy 7th Birthday React - what are you earliest memories?⚛️
Tags: discuss, react, javascript
Published: 2020-05-29 09:32:57

The initial version of React was released 7 years ago today and its popularity has grown ever since with 150,000 stars, and used in over 3 and a half million repositories hosted on GitHub! 🎉

What is your first memory of using React or what was it that first got you interested in the library? 

For me it was watching Dan Abramov's talk titled [Hot Reloading with Time Travel at React Europe 2015](https://www.youtube.com/watch?v=xsSnOQynTHs) on YouTube, it blew my mind! 🤯, to be watching this I must have at least started looking at React but have no memories of it. 

Would love to hear yours?
QuickPublisher - Easily create and monetize your blog without ads
Published: 2020-05-29 09:27:48

Hi everyone. 

I have been working on new blogging platform called QuickPublisher. Its main purpose is to provide users with a simple interface to easily create and monetize their blog.

Before starting my platform I tried using other platform in the hopes of saving myself the time of creating a platform. Unfortunately I found these platforms to be more or less the same. I couldn't seem to find a platform with a simple yet powerful interface where I could design my articles in a custom way, whilst monetizing my blog without the use of ads.

As you can see, I was a bit picky with my requirements. But I believed that it could be easily achieved.

All these inspired me to tackle the challenge of developing a blogging platform to provide such features.

I developed QuickPublisher using a combination of the following: PHP, C, HTML, CSS, Javscript (Jquery), MSSQL and a bit of Python.

I also used a different architecture as the traditional MVC style couldn't meet my needs. I call it Rerouter - Application Engine - Model - Render(view) - Rerouter. I'll create a separate post to dive further into this architecture.

My main challenge was providing a standard monetization module without the use of ads. There two things I despise. Ads and windows OS.

I ended up collaborating with Microscriptions.Inc(A monetization startup). I then integrated it with my platform to provide my users with ability to to do what they love while making some money too.

Today, I have 320 users and 265-daily active users. While this started as a side-project, I'm slowly taking it full-time due to the amount of feedback received.

The website link is https://www.quickpublisher.online

I also published QuickPublisher on ProductHunt via https://www.producthunt.com/posts/quickpublisher-2

I am also a member of indie-hackers via https://www.indiehackers.com/product/quickpublisher
Unity Share Project
Tags: unity3d, gamedev
Published: 2020-05-29 08:56:17

Create Unity Organization after signing up.

Go to Unity Editor and click the button in right top corner that says "Collab". It asks you to select the organization you want to share this project. After that you can check that Collaborate is enabled from services.

Click Collab button again (now it should have blue box with white arrow) and write the first commit.

This is similar to Git and there is no reason to use Unity's Collaborate feature unless you don't know how to use Git and you don't have interest or time to learn the basics.
Fix a transitive npm dependency vulnerability
Tags: npm, vulnerabilities, javascript
Published: 2020-05-29 08:50:09

Thanks to community, from time to time, npm reports about vulnerabilities found amongst the installed dependencies. Our team works on a SPA based on react, webpack, storybook, babel, and so on, pretty basic setup nowadays. We strive to keep the number of vulnerabilities as small as possible. But sometimes it is not that easy to fix them.

The transitive dependency or, in other words, the indirect one might be located very deep in the tree. For example, on March 6th, 2020 a ~~kind of vulnerability~~ vulnerability in `kind-of` package had been [found](https://www.npmjs.com/advisories/1490). All of a sudden, we ended up with more than **38000** of low-level vulnerabilities, reported by `npm audit`.

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

We didn't have it in our `package.json` file, but obviously it was used by a ton of packages deep in the tree. For example, take a look at this path to `kind-of`:

```
jest>jest-cli>@jest/core>@jest/reporters>jest-runtime>jest-config>@jest/test-sequencer>jest-runner>jest-jasmine2>@jest/environment>@jest/transform>jest-haste-map>jest-util>@jest/fake-timers>jest-message-util>micromatch>nanomatch>kind-of
```

The standard recommendation given by the `npm audit` is to run 
```
npm update  package-name --depth=N
```
To be honest, I haven't seen it working yet. Sometimes this command does nothing, sometimes it does "so much" that it hangs forever.

So, the only way to fix it for us was to do it manually. Exploring `package-lock.json`, we noticed that a vulnerable version (6.0.2) was installed multiple times by different packages. In order to get rid of the vulnerabilities, we had to update all occurrences of `kind-of`:
1. `npm install -D kind-of@6.0.2` - install 6.0.2 to remove duplicates on the next step
2. `npm dedupe` - remove duplicates of 6.0.2
3. `npm update kind-of` - fix vulnerability upgrading to 6.0.3
4. `npm uninstall kind-of` - remove the direct dependency

After these manipulations, we saw a much better picture:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oa9ttkvkqqlo8qulpryt.png)

In that case, it was rather simple to identify duplicates and find out how to dedupe dependencies. But in more complex cases we find it very useful to use [discovery.js](https://github.com/discoveryjs/quick-start-tutorial). See it in action [here](https://discoveryjs.github.io/quick-start-tutorial/)

P.S.
Don't pay attention to the rest of the vulnerabilities. We are already working on them ;)
Selecting Programming Languages Depending on the Task
Tags: programming, 1c, productivity, computerscience
Published: 2020-05-29 08:45:52

Friends, let us bring to your attention the publication by an experienced 1C developer on Selecting Programming Languages Depending on the Task.

Learn how to navigate in a variety of programming languages from low-level to domain-specific ones. 

Find out about the role and place of 1C  in the full spectrum of programming languages.

[Here is a full text of the topic] (https://medium.com/@andrey.kalyakin/selecting-programming-languages-depending-on-the-task-c20fa4bb1b5f?sk=df1bf2aa04d3c0135c729b103e053943)
Setup Belkin Range Extender | Belkin.Setup | http://belkin.range
Tags: computerscience
Published: 2020-05-29 08:44:46

Before initiating the setup process, you have to make sure that the respective extender is ON and you hold the particular SSID or the wireless network name along with the Wi-Fi password. You have to implement the following steps for setting up the Belkin range Extender device wirelessly
visit https://belkinrangesetup-extender.com/ 
First, you have to plug in the respective range extender device in power inlet. Now, you need to make use of the Wi-Fi capable device and then locate and connect in Belkin.setup network. After getting connected to Belkin.setup then kindly continue the next step. In this step, you have to launch the web browser and then type http://Belkin.range. Alternatively, you can make use of http://192.168.206.1 for accessing the respective web-based setup page of the range extender device.

After you get connected, it’s time to open the “Get started” button and you have to click on it and it would start searching for your SSID. In this step, you have to choose the wireless network and then click on “NEXT” button. After getting connected, you have to enter the respective network password and then you need to click on “next.” You have to choose the network depending on the usability and then you need to repeat the previous step.

In this step, you have to select the network that you prefer to extend. You have to tap on “create extended network” button and then proceed further.

Now, the configuration process has now been completed for your Belkin Range extender device and voila! You’re ready to go.

If you want to know about Belkin WiFi Range Extender, then you can contact the Belkin customer care service.
python3 yum
Tags: python2, python3, yum
Published: 2020-05-29 08:33:59

---
title: python3 yum
published: true
description: 
tags: python2, python3, yum
---

```
  File "/bin/yum", line 30
    except KeyboardInterrupt, e:
                            ^
SyntaxError: invalid syntax
```
```
$ sudo vim /bin/yum
#!/usr/bin/python -> #!/usr/bin/python2
```


```
  File "/usr/libexec/urlgrabber-ext-down", line 28
    except OSError, e:
                  ^
SyntaxError: invalid syntax
```

```
$ sudo vim /usr/libexec/urlgrabber-ext-down
#!/usr/bin/python -> #!/usr/bin/python2
```