teleren/devto huggingface dataset:
Building Better Authentication with Clerk
Tags: webdev, javascript, beginners, podcast
Published: 2021-10-06 16:58:57


Original: https://codingcat.dev/podcast/1-37-building-better-authentication-with-clerk

{% youtube https://www.youtube.com/watch?v=8tBlnQfWVQM %}

## Questions

1. Why did you start building Clerk?
  1. I noticed your other co-founder is also Sidoti, any relation?
2. [Clerk just raised 4M in the seed round to build the next-gen authentication and user management platform for developers.](https://clerk.dev/blog/clerk-raises-for-next-gen-auth)
  1. Does it feel like this allows you to stay more focused on the product?
3. Does Clerk compete with Firebase and Auth0 for user authentication or can you use it in conjunction?
  1. [https://docs.clerk.dev/frontend/integrations/firebase](https://docs.clerk.dev/frontend/integrations/firebase)
  2. [https://docs.clerk.dev/frontend/integrations/hasura](https://docs.clerk.dev/frontend/integrations/hasura)
4. Does Clerk do Authorization and Authentication?
  1. What does Clerk do differently with User Management?
5. Support for frameworks other than React? (Node SDK / Serverless)

## Links

* [Clerk Careers](https://apply.workable.com/clerk-dev/)
* [Clerk with Firebase from James Perkins](https://www.youtube.com/watch?v=YcXvZ-nPXXQ)
* [Bubble - No code integration](https://bubble.io/)
How to useContext in React?
Tags: beginners, javascript, react, webdev
Published: 2021-10-06 16:14:33

In this post I'll **quickly** explain why and how to `useContext` in React. First let's look at the why!

Let's say we want to pass a value from the root component to a nested component 3 levels down in the following structure:

```
App
  - Child
    - ChildChild
      - ChildChildChild
```

We know it can be done using props as follows:

```react
function App() {
  const myColor = 'blue'
  return (
    <>
      <Child color={myColor}/>
    </>
  )
}

function Child(props) {
  return (
    <>
      <ChildChild color={props.color} />
    </>
  )
}

function ChildChild(props) {
  return (
    <>
      <ChildChildChild color={props.color} />
    </>
  )
}

function ChildChildChild(props) {
  return (
    <>
      {props.color}
    </>
  )
}
```

But what if we could skip the first and the second child and go straight to the third child? We could do that with `useContext` as follows:

```react
const AppContext = React.createContext()

function App() {
  const color = 'blue'
  return (
    <>
      <AppContext.Provider value={color}>
        <Child/>
      </AppContext.Provider>
    </>
  );
}

function Child() {
  return (
    <>
      <ChildChild/>
    </>
  )
}

function ChildChild() {
    return (
      <>
        <ChildChildChild/>
      </>
    )
  }

function ChildChildChild() {
  const newcolor = React.useContext(AppContext)
  return (
    <>
      {newcolor}
    </>
  )
}
```

Isn't this much cleaner? We start to see its utility once we separate the components into their individual files.

As mentioned in the [React docs](https://reactjs.org/docs/hooks-reference.html#usecontext), a component calling `useContext` will always re-render when the context value changes.

Here's a quick example of that:

```react
const AppContext = React.createContext()

function App() {
  const [color, setColor] = React.useState('blue')
  setTimeout(() => {
    setColor('green')
  }, 2000);

  return (
    <>
      <AppContext.Provider value={color}>
        <Child />
      </AppContext.Provider>
    </>
  );
}

function Child() {
  return (
    <>
      <ChildChild />
    </>
  )
}

function ChildChild() {
  return (
    <>
      <ChildChildChild />
    </>
  )
}

function ChildChildChild() {
  const newcolor = React.useContext(AppContext)
  return (
    <>
      {newcolor}
    </>
  )
}
```
When we use `color` as a state and then update the state after 2 seconds, the `ChildChildChild` component re-renders to say `green`.

I hope this helps to make `useContext` a bit easy to grasp for anyone learning React.
Android Simplified. Documenting code
Tags: java, android, tristan
Published: 2021-10-06 16:55:58

#Introduction
- At the best of times the Android documentation can be overwhelming and confusing, at the worst of times it is very overwhelming and very confusing. This series hopes to boil down topics and make them less complex. All the information I used for this blog post can be found [HERE](https://www.oracle.com/ca-en/technical-resources/articles/java/javadoc-tool.html#format)

###Real world example
- For a real world example of how to document Android code I would recommend looking at the open source WordPress Android app, which can be found [HERE](https://github.com/wordpress-mobile/WordPress-Android). It is also worth noting that each project will have its own format for documenting code.

- If you have not done so yet, I highly recommend checking out the open source WordPress Android app, which can be found [HERE](https://github.com/wordpress-mobile/WordPress-Android). I know it sounds redundant to tell you again, but I can not stress this enough, `REAL WORLD EXAMPLES ARE THE BEST TO LEARN FROM`.

###A Doc Comment
- So, as I am working on releasing a second version of my app, I often come across old code that I have written and have no idea what is going on. I often find myself losing a lot of time trying to figure out what everything does. Obviously, this is a sign that I need to do some proper documentation. I am now using two type of documentation for my project:

**1) self documenting code:**  I am now making an effort to name everything properly, that means not more method names, such as, `doTheThing()` and `f()`. All variables, classes, methods, interfaces and so on, are now much more literally named for their purpose.

**2) Doc comments:** this form of documentation has been the most helpful to me. I am following the rules of `Javadoc` which state every class and method should have a `Doc comment`. The doc comment also consists of two parts

- 1) The first part of the doc comment is the description, where the first sentence of the doc comment is used for the description of whatever we are commenting

- 2) the second part of the doc comment are the `block tags`. There are many block tags but the 4 main ones that I use are, `@author` which states who created the class, `@version` which states what eversion of the class I am working on, `@param` which is used to describe the parameters a method takes, and `@return` which describes the return type of a method. 

- I know this post seems brief but if you are a beginner like me, proper documentation can really elevate your projects to the next level.


#Conclusion
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/TristAndroidDev).
How i became a Lead-developer
Tags: leadership, career, discuss
Published: 2021-10-06 16:54:16

I would like to talk about my experience to become a Lead-developer. In fact, I didn't see the thing coming. I went through many experiences and projects, and project after project, in a slowly way, i came to say my thoughts and tell people advice to handle situations. One day, project manager take me 'officially' on top of the team, and I realize it. The only problem, at the time, I didn't put a word on this role, so i kind just 'did' what i can about it.
At the time, I would have liked someone to give me some advice, because my first experience i made mistakes, and I wasn't conscious at the time that role could have influence on people. Since 3 years, someone else has the same role, and it's really helpful to daily discuss.

What about you? Did someone give you some advice? Or it was just a natural and logical thing to become a lead-dev?
LaTeX: More on Multicolumn and Page Breaking
Tags: codenewbie, latex
Published: 2021-10-06 16:46:41

Hello, how are you today?

In this post I talk about how to modify the `multicolumn` package and how to create new pages or avoid break pages 


## `multicolumn` Package

We talked about this package [here](https://dev.to/latexteada/latex-boxed-math-and-multicolumns-f3l) and we have a notion on how this package works but, do you know that you can customize a little this package? 

> These commands **must** be in the preamble 

- `\setlength{\columnsep}{Xpt}` to set the spacing between columns to `X` pt
- `\setlength{\columnseprule}{Xpt}` to set a column separator of `X` pt

**Before**

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgpg2mxf0igkbm02uyxt.png)

Produces

![Screenshot from 2021-10-06 10-54-32](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t17v9xf5g3a7arseozdq.png)
 
**After**

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xf05l0g8jc4ohn10cu6o.png)

Produces

![Screenshot from 2021-10-06 10-58-02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slb5hlw6e0lnh31qwpyy.png)

## Page Breaking 

- We can use `\nopagebreak` to avoid breaking the page at that point
- We can use `\newpage` to print the remaining contents (from the point where we declare the command) of our document on a new page


This is all for today, thanks

Do not forget to follow me on Twitter `@latexteada`

Greetings :)
How to Write a Class Object to CSV
Tags: python, csv
Published: 2021-10-06 16:32:54

# The Problem

Given a class such as


```python
class Student:
    def __init__(self, student_id, first_name, last_name):
        self.student_id = student_id
        self.first_name = first_name
        self.last_name = last_name
    
    def __repr__(self):
        return f"Student({self.student_id!r}, {self.first_name!r}, {self.last_name!r})"

    # Other methods...
```

Given a list of these objects:


```python
my_students = [
    Student(1048, "John", "Adams"),
    Student(2517, "Karen", "Goodman"),
    Student(3131, "Anna", "Karenina"),
]
```

Our goal is to write them into a CSV file with 3 columns: ID, first, last name. What is a Pythonic way to do that?

# The Solution

At first, we might want to create a function which converts a `Student` object into a `tuple` and use that:


```python
def student_to_tuple(student):
    return (student.student_id, student.first_name, student.last_name)

with open("students.csv", "w") as stream:
    writer = csv.writer(stream)
    for student in my_students:
        row = student_to_tuple(student)
        writer.writerow(row)
```

This method works, but if we can modify the `Student` class, we can do better. By creating an `Student.__iter__` method, we can work directly with `csv.writer`:


```python
class Student:
    def __init__(self, student_id, first_name, last_name):
        self.student_id = student_id
        self.first_name = first_name
        self.last_name = last_name
        
    def __repr__(self):
        return f"Student({self.student_id!r}, {self.first_name!r}, {self.last_name!r})"
    
    def __iter__(self):
        return iter([self.student_id, self.first_name, self.last_name])
```


```python
my_students = [
    Student(1048, "John", "Adams"),
    Student(2517, "Karen", "Goodman"),
    Student(3131, "Anna", "Karenina"),
]

with open("students.csv", "w") as stream:
    writer = csv.writer(stream)
    writer.writerows(my_students)
```

A couple of notes

* the `__iter__` performs almost the same task as `student_to_tuple`, but it returns an iterable instead of a tuple. 
* The `csv.writer` will iterate through this `Student` object to get the cells in a row, thus trigger the `__iter__` method
* We can now use the `.writerows` method to write all the objects in one step.

# Reading Them Back

Now that we successfully wrote the list of students to a file, how do we read them back?


```python
with open("students.csv") as stream:
    reader = csv.reader(stream)
    for row in reader:
        student = Student(*row)
        print(student)    
```

    Student('1048', 'John', 'Adams')
    Student('2517', 'Karen', 'Goodman')
    Student('3131', 'Anna', 'Karenina')


# Conclusion

By adding a simple `Student.__iter__` method, we allow a `csv.writer` object to work directly with `Student` objects.
Data Science Course Subscription
Tags: datascience, python, programming, machinelearning
Published: 2021-10-06 16:24:46

We offer 4 courses currently, about 20hrs of content, with 1 additional course (Linear Algebra, Probability, and Statistics for Data Science) being added by end of month (end of October 2021) and one additional course in about a month (Nov 2021).

http://www.mydatacareer.com

Regards,
MDC
Is it a bad practice ?
Tags: php, goodpractices, oop, needhelp
Published: 2021-10-06 16:03:28

---
title: Is it a bad practice ?
published: true
description: 
tags: #php, #goodPractices, #oop, #needHelp
cover_image: https://images.unsplash.com/photo-1611890798517-07b0fcb4a811?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1171&q=80
---

Is it a bad pratice to do that : 

```PHP
<?php
class Foo
{
    public $propertie_Excplicitly_Defined;

    public function __construct()
	{
		$this->propertie_Excplicitly_Defined = "Hello";

}

$bar = new Foo();
$bar->propertie_Not_Excplicitly_Defined = "World";

```
And if it's, why?

I have to pass a new variable to an object whose structure I cannot modify, and I didn't find a better way to do it. So is it bad or is it ok ? And if it's bad, do you have an idea about how i should do ?

Thanks a lot
Schema changes and data migration in BigQuery
Tags: googlecloud
Published: 2021-10-06 15:58:51

A few months ago, I had to perform data migration in BigQuery. I hope that you already know what is BigQuery, if not, google it. It’s a nice tool provided by Google if you want to store huge amounts of data at a low cost. 

At the first sight, it does not sound too difficult and I immediately started to write a SQL query that would just read from one table and store the data in another table. Hey, what can be difficult in this 🤷 The trick was that the new table, had a slightly different schema, and the original data needed to be changed a bit to “fit” in the new table. 

Inside BigQuery tables, you can store nested data, it supports having columns of type `RECORD`, it’s something like a table inside another table. And they went the extra mile and made BigQuery support arrays of `RECORD`s, pretty neat if you ask me.

So, back to the problem. In my case, in the old table, one of the columns from a `RECORD` was of type `STRING` but in the new one, it was of type `INT64`. So, I had to cast that column first, before being able to store it nicely in the new table. 
Let’s say you have a table named order with the following schema:
```JSON
[
  {
    "name": "id",
    "type": "INTEGER"
  },
  {
    "name": "store",
    "type": "STRING"
  },
  {
    "name": "lines",
    "type": "record",
    "mode": "repeated",
    "fields": [
      {
        "name": "id",
        "type": "INTEGER"
      },
      {
        "name": "item",
        "type": "STRING"
      },
      {
        "name": "qty",
        "type": "STRING"
      }
    ]
  }
]
```
You can see the column `lines` which are of type `RECORD` and it’s also `REPEATED`, meaning it’s a list of records.
So, in my case, the column `qty` from `lines` record, in the new table was of type `INT64`, but you can see in the old one is of type `STRING`. How do we reach that column with SQL and cast that column?
We need to use `REPLACE` to first unnest the `RECORD`, then convert it to an `ARRAY` and perform the casting. The SQL query looks like this:
```SQL
SELECT * REPLACE(
    ARRAY(
        SELECT AS STRUCT l_items.* EXCEPT(qty)
        FROM UNNEST(lines) as l_items 
    ) as lines,
)
FROM `project_id.dataset_id.order`
```
In the query above, I used the `EXEPT` operation to not include that column at all in the result, so that the new table to have that column empty. This worked fine in my case since because of the wrong type, there was no data, and was no point in casting the column at all. But, if you need cast is, you just need to replace the EXCEPT part, with the proper SQL operation.

So, what if you have to cast a column from a list of records inside another list of records and so on? You just use the same technique and apply recursion to do this. And of course, I had this situation and I had to write this recursive SQL to exclude a column, but hey, nothing it’s easy in this life... It took me around 3 hours to write to SQL, cause' I'm not the most skilled in SQL, but, I got the job done 💪.

That’s it, folks!
Unterschiedliche Header mit dem Kadence Theme erstellen - Conditional Headers
Tags: wordpress, kadencewp, wordpressthemes
Published: 2021-10-17 09:47:19

---
title: Unterschiedliche Header mit dem Kadence Theme erstellen - Conditional Headers
published: true
date: 2021-10-06 15:56:10 UTC
tags: WordPress,KadenceWP,WordPressThemes
canonical_url: https://bloggerpilot.com/kadence-conditional-headers/
---

![Kadence Conditional Header](https://bloggerpilot.com/wp-content/uploads/2021/09/kadence-conditional-header.png)

Kürzlich erschien ein neues Update für das Kadence Theme und...

Der Original-Artikel erschien auf [Unterschiedliche Header mit dem Kadence Theme erstellen - Conditional Headers](https://bloggerpilot.com/kadence-conditional-headers/).

Ich benutze WordPress jetzt seit etwas mehr als einem Jahr und ich weiß inzwischen genug darüber, wie es funktioniert, um einen eigenen Header für meinen Blog zu erstellen. Allerdings habe ich darüber nachgedacht, eine dieser Kopfzeilenänderungen vorzunehmen, die man auf vielen WordPress-Blogs sieht. Ich habe zum Beispiel mit dem Gedanken gespielt, eine Kopfzeile zu erstellen, die eine Schriftfarbe anzeigt, die sich nach dem Inhalt richtet, der im Blog veröffentlicht wurde. Ich habe gesehen, wie andere Blogger das gemacht haben, und würde das auch gerne tun. Ich möchte nur wissen, wie ich das auf Kadence machen kann.
Golang 101: Diziler (Arrays)
Tags: go, arrays
Published: 2021-10-06 15:51:59

Diziler aynı türden verileri tutmak için uygundur. İndis (index) değerleri `0`'dan başlarlar.
```golang
package main

import "fmt"

func main() {

	// Dizi tanımlama
	var i [4]int
	fmt.Println("Boş dizi:", i)

	// Değer atama
	i[3] = 100
	fmt.Println("Atama sonrası:", i)

	// Dizi boyutu
	fmt.Println("Dizi boyutu:", len(i))

	// Diziye tanımlarken değer atama
	x := [5]int{1, 2, 3, 4, 5}
	fmt.Println("Dizi:", x)

	// Çok boyutlu dizi
	var y [2][3]int
	for i := 0; i < 2; i++ {
		for j := 0; j < 3; j++ {
			y[i][j] = i + j
		}
	}
	fmt.Println("2 boyutlu dizi: ", y)
}
```
```
Boş dizi: [0 0 0 0]
Atama sonrası: [0 0 0 100]
Dizi boyutu: 4
Dizi: [1 2 3 4 5]
2 boyutlu dizi:  [[0 1 2] [1 2 3]]
```
[çalıştır!](https://go.dev/play/p/OOiqDZNzkjA)

## Dizi Tanımlama
```golang
	var i [4]int
```
4 değer alabilen `integer` bir dizi tanımı yukarıdaki gibi yapılır.

## Diziye Değer Atama
```golang
	i[3] = 100
```
Dizinin 3. elemanına (*indis'ine*) değer atanması

## Dizi Boyutu
```golang
	fmt.Println("Dizi boyutu:", len(i))
```
Dizideki eleman sayısı `len` ile bulunabilir.

## Diziyi Tanımlarken Değer Atama
```golang
	x := [5]int{1, 2, 3, 4, 5}
```
Değişken tanımlarında olduğu gibi dizi tanımlarında da tanımlama ve değer atama işlemleri birlikte yapılabilir.
Python challenge_8
Tags: python, programming, webdev, challenge
Published: 2021-10-06 15:28:22

###Counting syllables

####level of challenge = 3/10

- Define a function named count that takes a single parameter.
- The parameter is a string. 
- The string will contain a single word divided into syllables by hyphens, 
- Such as these:
    "ho-tel"
    "cat"
    "met-a-phon"
    "ter-min-a-tor"

- Your function should count the number of syllables and return it.
- For example, the call count("ho-tel") should return 2.

Hint:

The trick is to realize that the number of syllables is the number of times the - symbol appears, plus one.
You'll have to count hyphens, then. Use a loop to iterate over each letter, or use the .count() method.

```
# My solution

def count(word):
    new_word = word
    count_syllables = new_word.split('-')
    return len(count_syllables)
print(count("ho-tel"))
```

```
# Another solution

def count(word):
    syllables = 1
    for letter in word:
        if letter == "-":
            syllables = syllables + 1
    return syllables

# using the count method
def count(word):
    return word.count("-") + 1

# using split
def count(word):
    return len(word.split("-"))
```

Add your solution in the comment :)
Scary? or Annoying? or Frustrating? Select Box
Tags: codepen, programming, webdev, showdev
Published: 2021-10-06 15:18:43

<h1>Scary? or Annoying? or Frustrating? Select Box</h1>

<h2>Description</h2>

<h3>Dreadful Dropdowns</h3>

<p>Although looking simple, and innocent on the outside, this is an example of UX that developers must not do. I'm also feeling frustrated whenever I'm trying to select an item from this select box. Yes, I felt guilty, but this is the theme of the #CodepenChallenge so I could do nothing but to obey the rules.</p>

<p>This is really fun to do. I had a hard time to think of something that is not really convenient to use, but on the other hand, a little bit fun. Yes I said fun because basically, I put a mini game inside the select box.</p>

<h2>Creation</h2>

<p>I didn't use any JavaScript frameworks this time, because I don't want to put re-render function along side <code>requestAnimationFrame</code>.</p>

<p>I put the codes inside the <code>class</code>, so that the functionality will be reusable. Although, I don't know if anyone would desire to put this kind of abomination inside their system (lol).</p>

<p>There are few simple algorithms that was used for this idea:
- Collision; Between the selector (Fire) and the option (Asteroid).
- Angled movement; I don't know how to say it, but basically moving diagonally knowing the angle
- Random; There are lots of random algorithms used here, especially when displaying the option.</p>

<p>I put a "game" twist in this challenge, because I really want to learn how to develop a game. Also, I'd like to improve my thinking of an idea for a game. Creating objects is also fun. It's really good for my practice.</p>

<p>I created the images using <a href="https://www.aseprite.org">Aseprite</a>. I really enjoy creating sprites in pixel art, or 8 bit. I'm still learning how to create though.</p>

<h2>Resources</h2>

<p><a href="https://www.aseprite.org">Aseprite</a></p>

<p><a href="https://fonts.google.com/specimen/Roboto">Roboto</a></p>

{% codepen https://codepen.io/takaneichinose/pen/NWgZbWj %}