teleren/devto huggingface dataset:
How to deploy Next.js app to production 🚢
Tags: jamstack, nextjs, javascript, webdev
Published: 2021-10-17 16:47:20

_This article was originally published on [my newsletter](https://www.tuomokankaanpaa.com/newsletter) last week. I publish previous week's newsletter here on the blog. If you want to read these as soon as they are published, [sign up](https://www.tuomokankaanpaa.com/newsletter) for the newsletter!_

Ahoy,

This week was pretty Jamstack focused for me. This was because of two reasons.

## Jamstack conf

The [Jamstack conf](https://jamstackconf.com/) was held 6.10-7.10 as a virtual conference. The first day was full of talks and the second day was dedicated to workshops. I wasn't able to participate on the workshops but I got a good dose of Jamstack watching the first day talks.

If you missed the conference, no worries! You can find the videos of the talks from this playlist: [https://www.youtube.com/playlist?list=PL58Wk5g77lF-XaNacKxWk7yOKgeCMveAS](https://www.youtube.com/playlist?list=PL58Wk5g77lF-XaNacKxWk7yOKgeCMveAS).

## How to deploy Next.js app to production

This week's video on the [Youtube channel](https://www.youtube.com/tuomokankaanpaa) was also about Jamstack, well Next.js to be more specific.

In the video I show you how to deploy your Next.js application to production (using Vercel) and setup the deploy in a way that it automatically deploys your app when ever there is updated code in your Github main branch.

Setting it up is one of the easiest setups I know, because Vercel does all the heavy lifting and all you pretty much have to do is point Vercel to your Github repo and you are good to go.

{% youtube vFjlw3LaAcw %}
[📹 View on Youtube](https://www.youtube.com/watch?v=vFjlw3LaAcw)

## Non-coding stuff

While not working on coding stuff, I did some reading and actually read one whole book this week (rocking the Kindle!). The book I read was [Take Your Shot](https://amzn.to/3DBBDQD) by Robin Waite.

I liked the book a lot because it teaches business skills but in an interesting and captivating way. The book uses storytelling as a way of teaching which in my opinion is a great. You are entertained by the story but at the same time you learn a bunch. One other book that uses this kind of approach marvellously is [The Wealthy Barber](https://amzn.to/302w7aZ).

I warmly recommend reading Take your shot and Wealthy Barber if you haven't already!

That's it for this week!

Cheers,
Tuomo
Array.prototype.sort()
Published: 2021-10-17 16:39:22


Syntax: 
arr.sort(function)

Description: 
The sort method in javascript, allows you to arrange the elements in an array in place. 

By default, the sort method arranges the elements from smallest to the largest value, and alphabetic order. 



Example 1: Strings 
This example takes an array of names. By using the sort method, the names will be arranged in alphabetic order. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvzjyf3x43jq4y76fkrn.png)
Output:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otg0cpt0jf9fco47qdqz.png)
 


Example 2: Numbers 
This example takes an array of grades, and arranges the numbers from lowest to the highest value.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lxl78v4kkqppgb40hl4.png)
It is important to note that only the first instance of a value will be sorted. For example, if the array has a value that is a double digit, the first number will only be sorted. In this example, those values are 23 and 51.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fw7a85skicfwh8edejv8.png)

To get an accurate output, we would use a compare function.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b97dgbs2fptgchsm0gvj.png)
 
    
The sort method takes a comparison function as a parameter. 
This compares the values in the array, by subtracting one value to the next value. It decides which value will go to the right of the array (the higher numbers) or the left of the array(the lower numbers).

The will allow us to get an accurate output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0y1x2xnwryw14mykxbtr.png)
Read and Write using firebase(realtime database) in React JS
Tags: javascript, firebase, beginners, webdev
Published: 2021-10-17 16:20:19

Hi everyone,
             here i am going to show you how to use firebase in react js 

First install firebase 
```javascript
npm i firebase
```
create config file
```javascript
import "firebase/auth";
import "firebase/database";
import { initializeApp } from 'firebase/app';
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUT_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSENGER_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const database = getDatabase(app);
```
if you don't know how to download this config go to this link <a href="https://firebase.google.com/docs/database/web/start">Firebase web-setup</a>

function for store new data
```javascript
function writeData() {
    const db = getDatabase();
    const postListRef = ref(db, 'users/'); //
    const newPostRef = push(postListRef);
    set(newPostRef, {
      username: item,
    });
  }
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xv0040n2jpeeypqxalj7.png)
 
function for delete data
```javascript
const Deletedata = (e) => {
    const db = getDatabase();
    remove(ref(db, `users/${e.key}`));
  }
```
code for fetch data
```javascript
const Ref = ref(database, 'users/',);

  useEffect(() => {
    onValue(Ref, (snapshot) => {
      const data = snapshot.val();
    });
  }, [])
```

```javascript

```
Xcode, Builds, Macros and plist
Tags: appdev, blog, code, ios
Published: 2021-10-18 12:45:12

---
title: Xcode, Builds, Macros and plist
published: true
date: 2021-10-17 16:07:44 UTC
tags: appdev,blog,code,iOS
canonical_url: https://itscoderslife.wordpress.com/2021/10/17/xcode-builds-macros-and-plist/
---

I have decided to summarize whatever new I learnt in the week.

This week I learnt about how to define macros for Swift and Objective-C / C/C++. I was trying to modify the jenkins pipeline script to add parameters to existing set of macros. based on the type of git branch.

Hypothetical example: The requirement is to create builds either for developers, Internal testing, beta or production. This will be categorized based on branch type.

- If the build is built for feature or bugfix branch then it will be a developer build.
- If its for a PR or master(main) branch then it would be for internal testing.
- If its for a beta / staging branch then it would be for beta testing.
- If its for a release branch then it would be for production.

So now we have 4 types of builds. Based on the type of build I want to set the configuration at runtime. For example: Fetch data from endpoints but domain would different for each build type.

There is no one way to achieve this. Let’s take the macros way first. Set the macros while creating the build using xcodebuild command.

To set the macros while using xcodebuild command we use **GCC\_PREPROCESSOR\_DEFINITIONS**

GCC\_PREPROCESSOR\_DEFINITIONS=”$GCC\_PREPROCESSOR\_DEFINITIONS <macro\_name>=1″ // this works for Objective-C and C/C++

But this cannot be read by Swift code. So what about Swift? We use **SWIFT\_ACTIVE\_COMPILATION\_CONDITIONS**

SWIFT\_ACTIVE\_COMPILATION\_CONDITIONS=”SWIFT\_ACTIVE\_COMPILATION\_CONDITIONS <macro\_name>”

For Swift we should not append `**`=`1**` to macro\_name.

I spent half a day to figure out how to pass macros to Swift via command line and then figure out we aren’t supposed to give `=1`. Phew.

There is another way to solve our first requirement. Using **Info.plist** , by adding parameters to Info.plist of the app. We use ` **plutil** ` to add, replace, remove and extract keys and values from a plist.

- plutil – **replace** <key\_name> -string <value> <path/to/the/plist> // replaces if there are any exists or inserts
- plutil – **insert** <key\_name> -string <value> <path/to/the/plist> // inserts, but fails if already exists
- plutil – **remove** <key\_name> <path/to/the/plist> // removes any key value pair if the key exists
- plutil – **extract** <key\_name> xml1 -o – <path/to/the/plist> | sed -n “s/._(._)<\/string>.\*/\1/p” // the piped regex is to get the string value

Instead of `-string` you can give any data type which property lists accept.

Important thing to note: Do not modify Info.plist after the build is successful. The code-sign throws error or your package is marked as malicious and could not be installed.

So modify the Info.plist just before the **xcodebuild** command is executed.
Conceptual Database Design with ER Model
Tags: database, ermodel, databasedesign
Published: 2021-10-17 15:53:41

Conceptual Database Design with ER Model is one of the most important topic in Databases. Whenever a programmer wants to develop a database the ER Model is the basic thing he starts with.

ER Model Def. ER Model shows relations between the objects/entities in a database. Wikipedia definition of ER Model HERE. There are three basic things in an ER model
   Entity
   Attributes
   Relationships

Read more at https://hecodesit.com/conceptual-database-design-with-er-model/
Completing my second Hacktoberfest (2021)
Tags: webdev, hacktoberfest, programming
Published: 2021-10-17 15:38:11

### Intro

I have successfully completed this year's 4 pull requests to contribute towards the open-source code and community and engage in Hacktoberfest of this year. Just like last year it was a very good experience and was even easier after already being familiar with the rules and workflow from last year.
I enjoy getting to contribute to some cool open-source projects and helping them grow, as well as improving my skills and learning something new in the process.

### Contributions

This year I focused more on projects' maintenance rather than building new features or fixing bugs like I did last year. I realized many projects lack the required maintenance due to the fact that it's often overlooked by other hacktoberfest participants as dull or insignificant. In other words, I decided to do some "dirty work".
On two repositories I contributed by migrating their package, library and dependency versions to the newest versions. This had not been done for a long time due to the fact that the upgrades introduces many breaking changes which required time and effort to be fixed and adjusted. I did just that, and I think it is important to keep all dependency versions up to date often not just because of new updates but also because of security concerns. 
In my opinion my best contribution was to {% github bemusic/bemuse no-readme %} which is "an open-source, online, web-based rhythm game. It plays songs in BMS format".
I contributed by updating and refactoring a large chunk of code in a file which had numerous code smell reports from SonarQube. I successfully managed to fix the code smells and refactor the code such that it was more readable, manageable and did not contain any code smells.

### Conclusion
My experience this year was again very thrilling and I'm excited to be a part of an amazing open-source initiative. I encourage anybody who is having self-doubt or second thoughts about contributing to open source to step out of the shadow and make their first step towards open-source. It is intimidating at the start but it's very much worth the effort. It is important that we have this kind of initiatives that remind us how great open-source can be and keep us motivated to support many more open-source projects.
Day 32/100 Coding Challenge
Tags: 100daysofcode, 100daysofcodechallenge, programming, codenewbie
Published: 2021-10-17 15:35:18

Today made some updates on my current projects and finally got advanced on stuck ones. Made some progress also on my lessons and hopefully no more interruptions. Suddenly after acquiring 4 PRs , I got a partial small win in submitting the requirements.

![prs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27fgz98s7q54b0ncqhvj.png)


{% medium https://medium.com/@smittenaf301icu/day-31-100-coding-challenge-87ebeee121e2 %}
Idea for a VS Code Extension [RE#9]
Tags: article, productivity, extension, javascript
Published: 2021-10-17 15:40:34

---
title: Idea for a VS Code Extension [RE#9]
published: true
date: 2021-10-17 15:30:00 UTC
tags: article, productivity, extension, javascript
canonical_url: https://babakks.github.io/article/2021/10/17/re-009-idea-for-a-vs-code-extension.html
series: Regular Encounters
---

Recently, I was editing our Gitlab CI pipeline. In our repositories we use Makefiles to define common actions (like building docker image or deploying onto production environment). To be exact, these actions are defined as _phony targets_ in Makefile terminology.

While doing my task, I tried, several times, to invoke the auto-format command as I usually would when coding but every time I did it a message popped saying no formatter was installed for Makefiles. I remember searching for some extension, but nothing I found on the subject. That is a real frustration for any **obsessive** developer. 🤦

Since Makefiles are among common tools for project automations, I think it’s a good idea to develop a Makefile formatter extension for VS Code or any other popular IDE/editor.

* * *

**_About Regular Encounters_**  
_I’ve decided to record my daily encounters with professional issues on a somewhat regular basis. Not all of them are equally important/unique/intricate, but are indeed practical, real, and of course,_ **_textually minimal._**
Asp.net core Http Request HttpClientFactory Giriş.
Tags: dotnet, csharp
Published: 2021-10-17 15:15:03

Bu serinin bir önceki yazısında HttpClient dependency injection olarak geçtik. Bir önceki yazımızdaki yöntemdeki kod çalışır ama tercih edilmemesi gereken bir yöntemdir. HttpClient oluşturacaksak aşağıdaki yöntemler ile oluşturmalıyız : 

1.) IHttpClientFactory di olarak kullanmak.
2.) Named HttpClient Factories
3.) Typed HttpClient Factories

Not : Neden HttpClientFactory var diye merak ederserniz aşağıdaki post'ları okuyabilirsiniz : 

https://www.aspnetmonsters.com/2016/08/2016-08-27-httpclientwrong/
https://www.stevejgordon.co.uk/introduction-to-httpclientfactory-aspnetcore
https://www.danieldonbavand.com/httpclientfactory-net-core-2-1/

Şimdi gelelim nasıl doğru bir şekilde Http Request yapabileceğimize : 


1.)  IHttpClientFactory di olarak kullanmak.

Öncelikle şu linkteki yazıyı okuyalım : https://dev.to/mustafasamedyeyin/aspnet-core-http-request-giris-132a

Linkteki bütün adımları tamamlayalım çünkü linkteki örneğin devamı yapacağız.

a.) IHttpClientFactory  kullanmak için yapacaklarımız çok basit :

WeatherForecastService'de HttpClient olan yerleri IHttpClientFactory olarak değişteceğiz. Daha sonra _httpClient üzerinden CreateClient() metodumuzu çağırıp get,post,put,delete işlemlerini istediğimiz gibi yapabiliriz.

WeatherForecastService.cs class'ımızı aşağıdaki gibi değiştirelim
```
public class WeatherForecastService
    {
        private readonly IHttpClientFactory _httpClient; //Burası değiştirildi
        public WeatherForecastService(IHttpClientFactory httpClient)//Burası değiştirildi
        {
            _httpClient = httpClient;
        }
        public async Task<string> GetWeatherForecast()
        {

            var response = await _httpClient.CreateClient()//Burası değiştirildi
                .GetAsync(@"https://localhost:5001/WeatherForecast");

            if (response.IsSuccessStatusCode)
            {
                return await response.Content.ReadAsStringAsync();
            }
            else
            {
                return "Yanlış bir şeyler oldu.";
            }
        }
    }
```

b.) Şimdi ilk başta api uygulamamızı "dotnet run" ile ayağa kaldıralım. Daha sonra mvc uygulamamızı "dotnet run" ile ayağı kaldıralım.

Gördüğünüz üzere : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv41zepxtk891ddmva95.png)

Data'larımızı yine api'den getirebildik.

Bu yazıda "IHttpClientFactory di olarak kullanmak." yöntemini gördük. Bir sonraki yazımda "2.) Named HttpClient Factories" adlı başlığı inceleyeceğim.

Bir dahaki yazımda görüşmek dileğiyle.

En iyi dileklerim ile.

Mustafa Samed Yeyin.
Show your favourite goodreads quotes on your Github Profile Readme
Tags: showdev, github, profilereadme, vercel
Published: 2021-10-17 15:01:41

---
title: Show your favourite goodreads quotes on your Github Profile Readme
published: true
description: Show a random quote from your Goodreads Account on your GitHub readme.
tags: showdev,github,profilereadme,vercel
//cover_image: 
---


I wanted to show my goodreads favourite quotes 📋 on my github Profile  Readme in a random order, but Random Quotes widget provided by goodreads cannot be used directly on markdown.

So, I built a simple service that renders the goodreads  quotes (from random quotes widget) as a SVG Image thus, compatible with github Markdown, hosted on vercel.

Try it,If you found it useful. give it a star🌟.

Source: https://github.com/prakashsellathurai/Goodreads-Random-Quotes-Badge


Example:
![](https://camo.githubusercontent.com/03b6f3675c4a618a74e30b88be9f640eb3b586e8c40e7b28507e8d4a011f71b6/68747470733a2f2f676f6f6472656164732d72616e646f6d2d71756f7465732d62616467652e76657263656c2e6170702f67657462616467653f676f6f64526561647355726c3d68747470733a2f2f7777772e676f6f6472656164732e636f6d2f757365722f73686f772f3130353930333438372d7072616b6173682d73656c6c61746875726169)
Stage 4: Nullish Coalescing Operator
Tags: javascript, webdev, programming, productivity
Published: 2021-10-17 14:58:30

**Motivation**
When performing property accesses, it is often desired to provide a default value if the result of that property access is `null` or `undefined`. At present, a typical way to express this intent in JavaScript is by using the `||` operator.

    const response = {
	  settings: {
	    nullValue: null,
	    height: 400,
	    animationDuration: 0,
	    headerText: '',
	    showSplashScreen: false
	  }
	};

	const undefinedValue = response.settings.undefinedValue || 'some other default'; // result: 'some other default'
	const nullValue = response.settings.nullValue || 'some other default'; // result: 'some other default'

This works well for the common case of `null` and `undefined` values, but there are a number of falsy values that might produce surprising results:

    const headerText = response.settings.headerText || 'Hello, world!'; // Potentially unintended. '' is falsy, result: 'Hello, world!'
	const animationDuration = response.settings.animationDuration || 300; // Potentially unintended. 0 is falsy, result: 300
	const showSplashScreen = response.settings.showSplashScreen || true; // Potentially unintended. false is falsy, result: true

The nullary coalescing operator is intended to handle these cases better and serves as an equality check against nullary values (`null` or `undefined`).

**Syntax**
_Base case_. If the expression at the left-hand side of the `??` operator evaluates to undefined or null, its right-hand side is returned.

    const response = {
	  settings: {
	    nullValue: null,
	    height: 400,
	    animationDuration: 0,
	    headerText: '',
	    showSplashScreen: false
	  }
	};

	const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // result: 'some other default'
	const nullValue = response.settings.nullValue ?? 'some other default'; // result: 'some other default'
	const headerText = response.settings.headerText ?? 'Hello, world!'; // result: ''
	const animationDuration = response.settings.animationDuration ?? 300; // result: 0
	const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false

**Specification**
-   [https://tc39.github.io/proposal-nullish-coalescing/](https://tc39.github.io/proposal-nullish-coalescing/)
Stage 2: Record and Tuples
Tags: javascript, webdev, react, programming
Published: 2021-10-17 14:58:09

Record (Analogous to objects) and Tuple (Analogous to arrays) are the new types that are coming soon in JavaScript.

**Syntax** 
Notice the # before curly braces or square bracket. This is the Syntactical difference between objects/arrays and records/tuples.

```javascript 
const record = #{
    foo: "FOO",
    bar: "BAR"
};
const tuple = #["FOO", "BAR"]
```

**Deep Immutability**
Record and Tuple are deeply immutable, unlike `Object.freeze`. The value of a record/tuple or the values inside nested record/tuples cannot be changed once it is defined. 

```javascript
const record = #{
    foo: "FOO",
    bar: "BAR",
    foobar: #["FOO", "BAR"]
};
const tuple = #["FOO", "BAR", #{foo: "FOO", bar: "BAR"}]

record.foo = "BAR" // Error
record.foobar[0] = "BAR" // Error
tuple[0] = "BAR" // Error
tuple[2].foo = "BAR" // Error
```
**Deep Equality**
IMO this is the best feature of record/tuple. In objects and arrays, you can only compare by their reference but in a record or a tuple, you can compare by its values. It is also possible to compare values of nested record/tuple

```javascript
const record2 = #{foo: "FOO", bar: "BAR", foobar: #["FOO", "BAR"]}
const tuple2 = #["FOO", "BAR", #{foo: "FOO", bar: "BAR"}]

record.foobar === #["FOO", "BAR"] // true
tuple[2] ===  #{foo: "FOO", bar: "BAR"} // true

record === record2 // true
tuple === tuple2 // true
```

**Features same as Object/Array**
You can use them just like you use objects and arrays.
Computed property names, shorthand notation, spread operator, Destructuring, rest operator.
```javascript
const f = "foo"
const bar = "BAR"
const values = #{a: 1, b: 2}

const record = #{
    [f]: "FOO",     // Computed property names
    bar,            // Short hand notation
    ...values       // Spread operator
};

console.log(record.foo == "FOO") // true
console.log(record.bar == "BAR") // true
console.log(record.a == 1) // true
console.log(record.b == 2) // true

const { foo: destructedFOO, ...rest } = record //  Destructuring and rest operator

console.log(destructedFOO == "FOO") // true
console.log(rest.a == 1) // true
console.log(rest.b == 2) // true
console.log(rest.bar == "BAR") // true
```

**Limitations**
Cannot use Record and Tuples on `lhs` while destructuring, symbol key not supported in the record, the nested Object/Array/Class can not be converted to record.
```javascript
// Using a record or tuple literal on the lhs is a SyntaxError
const #{ a, b } = #{ a: 1, b: 2 } // SyntaxError
const #[a, b] = #[1, 2] // SyntaxError

// Record and Tuples only support primitive data types 
const record = #{ instance: new SomeClass()} //Error
const record = #{ object: { a: 1}} //Error
const tuples = #[new SomeClass()] // Error
const tuples = #[1, [2]] // Error

// Records can only have String keys, not Symbol keys
const record = #{ [Symbol()]: #{} }; //Error
```