teleren/devto huggingface dataset:
Giveaway! Three copies of Florin Pop's ten ways to make money as a developer
Tags: watercooler
Published: 2020-12-25 05:01:38

First of all!

Merry Christmas everyone! 🎄

To me, Christmas is all about giving back, and I consider myself quite fortunate to have a job during these crazy times.

So what better way to give back to the community than to give you the ultimate resource on how to make money as a developer.

[Florin Pop](https://twitter.com/florinpop1705) is an absolute legendary developer, whom I respect massively.

He launched his e-book ["Ten++ Ways to Make Money as a Developer"](https://gumroad.com/l/makemoneydev/launchtwitter) eBook.

![Ten++ ways to make money as a developer](https://cdn.hashnode.com/res/hashnode/image/upload/v1608460916803/UbavLyN7m.jpeg)

It's an amazing resource on how you can turn yourself into a business.

I'm not giving away just one copy, not just two, but three copies!

All you have to do is fill out this 3 question form!

[Fill out this form to compete](https://forms.gle/iAwb8mEpp6Y1gqkD7)

I hope everyone has such a wonderful and amazing Christmas! 🍾

> You can participate the whole 25th. Winner will be announced 26th 4PM CET

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Circular access of Array in JavaScript
Tags: javascript, webdev, beginners, 100daysofcode
Published: 2020-12-25 04:53:53


The formula you see is part of modular arithmetic. I plan digging into this stuff to see what practical things for our coding I can find! Tell me in the comments if you want more of these techniques!


### What is this basically? 

An abstract technique which is super simply but I've found it **so many applications!** Let's get to know 'em in detail. 

**For example:**

Let's say that we've the following array: ['a','b','c']. If we try to access it at position **0** it returns `'a'`. Position **1** returns `'b'`.
Position **2** returns `'c'`. Position **3** returns *undefined*, since we don't have an element at position **3**. 
In this normal case, every index greater than **2** returns *undefined* because it was not found in the array. 
But what if, instead of returning *undefined* at position **3**, it started from the beginning again and returned `'a'`? And then, for position **4**-`'b'`? Position **5**-`'c'`? Position **6**-`'a'` and  so, until infinity... ♾

**That is not matter of the index you try to access, it always gives an existing next element.**
<hr>

### Now let's see the codes

```javascript
const arr = ['a', 'b', 'c']

//REALITY
arr[0] //=> 'a'
arr[1] //=> 'b'
arr[2] //=> 'c'
arr[3] //=> undefined
arr[4] //=> undefined
arr[5] //=> undefined
arr[6] //=> undefined
arr[7] //=> undefined

// GOAL: 
arr[0] //=> 'a'
arr[1] //=> 'b'
arr[2] //=> 'c'
arr[3] //=> `a`
arr[4] //=> `b`
arr[5] //=> `c`
arr[6] //=> `a`
arr[7] //=> `b`
```

<hr>

### Implementation
Once you've understood what it does, the implementation is just a formula which you don't even have to understand :) Just use it. Here it is: 

```javascript
// EXAMPLE

arr[(1 % n + n)%n]
arr // the array which you access
i // the index of arr you're trying to access
n // the length of arr
```



```javascript
const arr = ['a', 'b', 'c']
const i = 5 //index you wanna access
const n = arr.length

arr[(i % n + n) % n] // => 'c'

//At the end it works as if: 
//['a', 'b', 'c', 'a', 'b', 'c', 'a', ...♾]
//  0    1    2    3    4    5    6   ...♾
```

<hr>

### Example Use
Let's say that we have a function which has to return the next element from an array with unspecified length. Simple. 

We could hardcode it with a ternary or switch or if/else but we don't have to. Here's my solution using the circular array access: 

```javascript
const choosePos = (currentPos, chooseFromArr) => {
    const i = chooseFromArr.indexOf(currentPos)+1
    const n = chooseFromArr.length
    return chooseFromArr[(i % n + n) % n]
}

const arr = ['post1', 'pos2', 'pos3', 'pos4']
choosePos('post1', arr) // => pos2
choosePos('post2', arr) // => pos3
choosePos('post3', arr) // => pos4
choosePos('post4', arr) // => pos1
```

<hr>

Thanks For Reading.
✨ How to make your React app a PWA with Create React App 4
Tags: react, pwa, javascript, webdev
Published: 2020-12-25 04:49:05

## Welcome back developers 👋.


Create React App or `react-scripts` is a great tool to scaffold out our React Apps. And one of the best parts of it was that we got a readymade `serviceWorker.js` file with it which would help us make the React app offline so easily.

But with the `react-scripts` version 4, whenever we use the command `npx create-react-app app-name`, we don't get the service worker file. 

But no worries, we can easily generate a React App with the service worker file again, but we have to use a template. So instead of just running `create-react-app`, we should add a flag to it and this is how the new command looks like

### Creating a new app

```sh
# JavaScript
npx create-react-app app-name --template cra-template-pwa

# TypeScript
npx create-react-app app-name --template cra-template-pwa-typescript
```

And that will generate two service worker files, one of them will be for the registration, and the other one the service worker itself.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608870407516/txmAzwTVQ.png)

In the `index.js` file, you'll get the import and the `.unregister()` method as before

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608870545324/U33bSJkjz.png)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608870552189/1EoRJ7qx_5.png)

You can simply change the `.unregister()` to `.register()` to register the service worker and now, when the app is built, it'll be capable to run offline. You'll see a button on the right side of your address bar if you are using Chrome or Edge or any other Chromium based browser.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608870691567/rWKeKE-XI.png)

On installing, it'll cache your app and it'll be able to run, even if you are online.

### Converting an existing app

To convert an existing app, you can simply copy the code, create the required files and paste it from  [a gist](https://gist.github.com/max-programming/3c2eb5647eec0f074f6fcc9cdecbc288) that I created.

Also consider checking out the video on this topic if you want.
{% youtube Iur-3V2W3P4 %}

I hope this post helped you, make sure to 💙 like it and share it to others.

💬 Let me know your React apps which are PWAs in the comments.

Thanks for reading! ✌
Laravel's firstOrCreate Model Method
Tags: laravel, eloquent
Published: 2020-12-25 04:34:46

While working on an application, you might have a need, initially to search from the table for an instance. And if it does not exists you need to explicitly create a new record and save in the table. Laravel provides a method `firstOrCreate()` which comes handy, that performs both actions, searching or creating new and return that instance. So that you can just start working with it. This method is worth using.

In this article, we will see an example of `firstOrCreate()`, a similar one like [firstOrNew()](https://meshworld.in/laravel-first-or-new-model-method/)( that retrieves the first instance if it exists or creates a new model instance without saving actually in the table).

## `firstOrCreate()`

The `firstOrCreate()` method helps to find the first **model** that matches the specified constraints or **create a new** model instance one if does not exists with the matching constraints.

### Syntax

```php
  Model::firstOrCreate(array $attributes = [], array $values = [])
```

- It gets the first record matching the attributes or create a new one
- It searches the model with the matching attributes that are passed as the first parameter
- If a matching model is not found, it creates and saves a new Model after applying any key-value pair passed as the second parameter

### Example without `firstOrCreate()`

```php
$uuid = request('uuid');
$device = Device::where('uuid', $uuid)->first();

if ($device === null) {
  $device = new Device(['uuid' => $uuid]);
}

$device->operating_system = request('operatingSystem');
$device->version = request('version');

$device->save();
```

### Example with `firstOrCreate()`

```php
$device = Device::firstOrCreate('uuid', request('uuid'));

$device->operating_system = request('operatingSystem');
$device->version = request('version');

$device->save();
```

Read the complete post on our site [Laravel's firstOrCreate Model Method](https://meshworld.in/laravel-first-or-create-model-method/)

Read others post on our site [MeshWorld](https://meshworld.in)

Happy 😄 coding

With ❤️ from 🇮🇳
🎅🏾 Happy Holidays: Ionic Framework Video and Blog Tutorial Dump from 2020
Tags: ionic, javascript, vue, react
Published: 2020-12-25 04:23:57

####[See My Upcoming Book On Ionic & Vue JS](http://bit.ly/ionicvuebook)
---
There is a little bit of everything here showing how to use [Ionic Framework](https://ionicframework.com/) with either [VueJS](https://ionicframework.com/docs/vue/overview) or [ReactJS](https://ionicframework.com/docs/react) to build something amazing. 

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

This is just a sampling; there is additional content available on my [YouTube Channel](https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg), please take a look, like, and subscriber and leave a comment or suggestion.


{% twitter 1342162023858241539 %}

{% twitter 1342082353368330241 %}

{% twitter 1342098206704996355 %}

{% twitter 1342157339760193538 %}

{% twitter 1341841658091073538 %}

{% twitter 1342082353368330241 %}

{% twitter 1342098206704996355 %}

{% twitter 1342125387917250561 %}

{% twitter 1342175718965469187 %}

{% twitter 1342191571060609025 %}

{% twitter 1342205986497560589 %}

{% twitter 1342233347137921024 %}


<div>
  <a href="https://ko-fi.com/W7W31U7HM">
  <img src="https://www.ko-fi.com/img/githubbutton_sm.svg" data-canonical-src="https://www.ko-fi.com/img/githubbutton_sm.svg"  height="30" alt="Medium" /></a>
 </div>
 <br/><br/>
Quick Guide for Building Yocto Using WSL (Windows SubSystem for Linux)
Tags: linux, yocto, wsl
Published: 2020-12-25 03:59:19

Hello there, 

> Penny: Here's the question, why?
> All the group: Because we can!

As said by the geeky characters in Big Bang Theory TV Show, to relate check this video.

[![Because We Can!](http://img.youtube.com/vi/WlGIxof7w5I/0.jpg)](http://www.youtube.com/watch?v=WlGIxof7w5I)

So, if you want to build Yocto like me on Windows using Windows Subsystem For Linux (WSL), let's go on. 

# Make sure you have WSLv2 
Please follow [this guide](https://docs.microsoft.com/en-us/windows/wsl/install-win10) from Microsoft to enable WSLv2.

# Follow Yocto Quick Guide
Yocto provide a quick build guide that you can follow easily. [Check it here](https://docs.yoctoproject.org/3.2.1/singleindex.html#yocto-project-quick-build).

# Screenshot of build 
Currently, I am running the build it will take some time, I will let you know once it is finished.

![Building Yocto on WSLv2 - Ubuntu 20.04](https://dev-to-uploads.s3.amazonaws.com/i/ycimkl895jnbceadd98l.png)

I will keep you posted, bye ;)
AppGallery and HMS Core Enable Game Developers in Vietnam
Published: 2020-12-25 03:42:35

On November 19 2020, Vietnam's Huawei Developers Day ended in Hanoi. The theme of the seminar was Unlock the global market, focusing on the game field, attracting nearly 60 leading game developers from Vietnam.

Huawei Advertising Network: Leading Game Revenue Growth Strategy in Vietnam

Maintaining the ability to develop revenue is critical for long-term games. But when foreign giants make up a large share of their investment in the domestic market, this becomes a difficulty for Vietnamese developers. In this case, for game developers who want to grow in the long term, expansion into the international market is an inevitable trend.

To address this issue, Huawei AppGallery, a mobile app store, has invested in the development of Huawei's advertising network. For developers, multiple sources of revenue can be realized, even for free applications. In a short period of time, developers can establish advertising partnerships with Huawei. They can integrate Ads Kit of HMS Core to gain profits from advertisements in video game applications. Ads kit will enable developers to have high-quality promotions from advertisers in more than 220 countries.

One of the guests at this event, Mr. Dang Thanh Long, Chief Technology Officer of Segu Company, a well-known developer, said, "Huawei AppGallery is a huge partner for us and will help us quickly realize our desire to bring value to global users through mobile apps and make life better, Happier. "With the advantages of Huawei AppGallery, Vietnamese developers will no longer rely on a single market for revenue. Instead, they are entirely proactive in looking for opportunities to increase sales and penetrate global markets.

Local policy support and technical support: Huawei AppGallery Plus HMS Core

The local developer support policy is an innovation of Huawei AppGallery's competitive edge. “The Huawei Developer Fund” established to help developers obtain resources and reinvest game quality and content for long-term development. From the technical perspective, the HMS Core can be connected to applications to meet four key requirements, including graphics development, network acceleration, technical innovation, and monetization. In this process, the Vietnamese technical team and local experts will also be provided, to help them overcome language barriers and cultural differences when releasing games in the marketplace.

In addition to improving the content discovery and recommendation system, Huawei AppGallery also highlights the difference in revenue sharing rates between the app store and developers. Specifically, by working with Huawei AppGallery, developers can earn up to 90% of the revenue from ads on their apps. This share will continue until the end of 2020 and will reach 80-20% by 2021.

Huawei AppGallery will become a very good platform for developers in Vietnam who want to achieve long-term growth and gain access to the international market, and HMS Core will help its applications achieve more functions after integration.
Adding a Favicon to an Azure Website
Published: 2020-12-25 03:23:43

First, you need to generate a favicon.ico file. Fortunately, the team (person) at [Favicon.io](https://favicon.io/favicon-generator/) have made this very easy and enjoyable. 

Next, replace the favicon.ico in the wwwroot folder of your application with the newly created favicon.ico.

Note that I did not add this link to my _Layout file: <link rel="icon" type="image/x-icon" href="favicon.ico"> - and when I did it stopped working.
Book Recommendation app using React
Tags: react, beginners
Published: 2020-12-25 03:00:42

If you love reading books, you can build a React app to recommend all the books you like across various genre using React.js. This is a beginner level React project.
In this book recommendation app, there are two genres- Fiction and Non Fiction. You can add as many genres as you want. When the user clicks a particular genre, a list of books will be recommended along with the rating, description of the book and the link to buy.
Let's build!

Let us create an object to store all our books and store lists of all the books that we'd want to recommend. The code snippet for the same can be seen below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b9myk4so5mg3wvz8pywo.png)
 
Let us now convert the object to an array. The syntax for the same is `Object.keys(ObjectName)`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0crw2g9dkuinkswkk7gg.png)

We will now use useState hook to display one genre by default. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wl4fs9m2roq796rxlnbe.png)

We will now render both the genre on button click using map(). In this case, it will render fiction and non-fiction. On button click, we will call the function `bookInputHandler(bookCategory)` where we are passing `bookCategory` as the parameter.

We will now define the `bookInputHandler` function. In the `bookInputHandler` function, we will set the bookCategory using useState hook.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xzyv093kzvcg1c63n12x.png)

We now render all the details of the books in a particular genre that is the title, image, description, link to buy.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zz1vi7xnm0mijozpeq3j.png)

And finally, we display the details on the browser using JSX.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0kracotyajyn19yab426.png)

We have now built our very own book recommendation app using React.

You can view the finished app [here](https://8h1t6.csb.app/).
You can view the source code for the complete app [here](https://github.com/AishwaryaKaranth/neog-book-recommendation-react/tree/main/src).

Thank you for reading!
Deploy Next JS app on AWS Amplify within 5 minutes with CI/CD
Tags: beginners, nextjs, tutorial, aws
Published: 2020-12-25 02:41:20

---
series: AWS Amplify
---
You can deploy static apps/website on AWS using S3 or Amplify. I prefer AWS Amplify and in this tutorial, I am going to quickly show you how you can deploy your Next.js app on AWS Amplify within 5 minutes with CI/CD.

I assume you already have next.js app ready, if not please [clone this sample app](https://github.com/mubbashir10/next-js-aws-amplify-demo).

#### Step 1:
From the AWS console, go to "AWS Amplify"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eoj12heidqzinxr4tg4w.png)

Once you are on the AWS Amplify homepage, select "Get started"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/709gour9moetafm4qni4.png)

After that, under the "Deliver" section, click "Get started"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uofr0oio0gb0l46u7xf1.png)

#### Step 2:
Select GitHub and then click "Continue" - it will ask you to authorize Github, if you need help please read [step 1 of my previous article](https://dev.to/mubbashir10/aws-proton-tutorial-sample-nodejs-app-2f9k)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s79b4exsl7oi8xxey5pf.png)

#### Step 3:
Select repo, branch and then click "Next"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1dad488gbn0qq6juerw9.png)

#### Step 4:
AWS Amplify will generate a build script for you automatically, but you will need to change it a little. Click on the "Edit" and change the `build` and `artifacts` sections:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/whdnf1tnqmk9x83yxb2b.png)

The final build settings should look like this: 👇🏽
```
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run export
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
```

Once you have updated the build settings, click "Save"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ajegxnn0hlzpiso0q2qz.png)

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

#### Step 5:
Click "Save and deploy"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wqjnoevo9h5sghxb9m54.png)

That's it. Once all the stages have been passed, you can click the link and see your app in action.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g9lb5gpwdp5slwgcfsbc.png)

To test whether CI/CD (technically only CD) is working, make changes to your app and push them to your repo. They should be live after all the stages have passed.

______
**ℹ️ Notes:**
- If you are not using `yarn`, please change the build settings accordingly (with `npm`)
- We are using [Next.js static export](https://nextjs.org/docs/advanced-features/static-html-export)
- You can use the same procedure for hosting any front-end/static app (React, Vue, Angular, etc.) - even you can deploy Nuxt.js app
- If you don't want to use `static exports` and need SSR then [read this](https://aws.amazon.com/blogs/mobile/ssr-support-for-aws-amplify-javascript-libraries/)
Project 1, Week 4, Day 5
Published: 2020-12-25 01:47:04

Missed a few days this week with no real progress to show. That's the whole reason I started writing my progress down, so as to not quit a project just cause it's not going at the rate it should. 

I'm still going to continue to make this project work. There are two major advantages to this approach:

* You'll always get a project done
* When you choose projects, you'll choose the ones you really want to do. Not just for the novelty of having done a project.
ทำความเข้าใจ quoted expression ที่มี dot (.) ของ Elixir
Tags: elixir
Published: 2020-12-25 01:39:15

สรุปเงื่อนไขของการ quote expression ที่มี dot (.) ของ Elixir

เมื่อวานเจอเคสที่ว่าถ้าเรามี Map แบบนี้

```elixir
a = %{Body: "Hello"}
```

ที่ key เป็น atom แต่ว่าขึ้นต้นด้วยตัวใหญ่ แล้วถ้าเราอยากใช้ syntax ที่ใช้ dot ในการ access ค่าใน key นี้

ปกติเราก็เขียนแบบนี้

```elixir
a.Body
```

แต่ว่าพอเขียนแบบนี้แล้วดันได้ error

```
** (CompileError) iex:10: invalid alias: "a.Body".
If you wanted to define an alias, an alias must expand
to an atom at compile time but it did not,
you may use Module.concat/2 to build it at runtime.
If instead you wanted to invoke a function or access a field,
wrap the function or field name in double quotes
```

เลยสงสัยว่าทำไมมันมอง `a.Body` เป็น alisas แล้วไปพยายามไป expand `a.Body` ให้ได้ atom ค่านึงออกมา

เราสามารถทำความเข้าใจว่า Elixir มันแปลงโค้ดเราไปเป็น AST (Abstract Syntax Tree) อะไรได้โดยใช้ special form macro `quote` เช่นเคสนี้เราลองใช้ quote กับ `a.Body` ได้แบบนี้

```elixir
a = %{Body: "Hello"}

quote do
  a.Body
end
```

AST ที่ได้ออกมาเป็นแบบนี้

```
{:__aliases__, [], [{:a, [], Elixir}, :Body]}
```

ในขณะที่ถ้า key ขึ้นต้นด้วยตัวเล็กจะได้ AST อีกแบบ

```elixir
a = %{body: "Hello"}

quote do
  a.body
end
```

```
{{:., [], [{:a, [], Elixir}, :body]}, [no_parens: true], []}
```

เพราะ quote แล้วออกมาได้ต่างกันนั่นคือเหตุผลว่าทำไม `a.Body` ถึงถูกเอาไปจัดการ alias expand

ซึ่งกฎตรงนี้มีคำอธิบายใน document ของ quote ที่นี่ https://hexdocs.pm/elixir/1.11.2/Kernel.SpecialForms.html#./2-quoted-expression เอาไว้ว่า ถ้าใช้ `.` จะทำให้ quote ได้ 2 แบบโดยเงื่อนไขอยู่ที่ ค่าทางขวาของ `.` ถ้าค่าทางขวาขึ้นต้นด้วยตัวใหญ่ จะมองเป็น alias ถ้าเป็นตัวเล็ก จะได้ AST ที่เป็น qualified calls ปกติ

ทีนี้ถ้าเรายังอยากใช้ `.` เพื่อเป็น qualified calls สำหรับ access ค่าใน map ก็ยังใช้ได้ ถ้ากลับไปอ่าน error จะมีคำแนะนำอยู่คือใช้ double quote ครอบเอาไว้แบบนี้

```elixir
a = %{Body: "Hello"}

a."Body"
```

ซึ่งถ้า quote ดูก็จะได้แบบนี้

```elixir
a = %{Body: "Hello"}

quote do
  a."Body"
end
```

```
{{:., [], [{:a, [], Elixir}, :Body]}, [no_parens: true], []}
```


<a href="https://www.buymeacoffee.com/weerasak" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>