teleren/devto huggingface dataset:
เขียน Go ต่อ Oauth ทุกค่าย
Tags: go
Published: 2021-11-02 14:48:12

ก่อนหน้านี้เคยสงสัยว่าเวลาไปเขียน Frontend มันจะมี lib ให้ไปยิง Oauth2 กับ Facebook ง่ายๆเลย แล้วถ้าจะเขียนด้วย Go มันจะมี lib ง่ายๆแบบนั้นบ้างไหม

วันนี้ก็หาเจอละครับ มันคือเจ้าตัวนี้ github.com/markbates/goth

โดยในหน้า git จะมีบอกว่ามี example ให้ดูด้วยนะ https://github.com/markbates/goth/blob/v1.68.0/examples

พอเปิดเข้าไปดู โอ้โห ตัวอย่างมันต่อทุกค่ายเลย ผมก็เลยทดลอง Facebook โดยวิธีลองก็แสนจะง่าย ก็ copy เจ้า example มาทั้งไฟล์เลย ซึ่งมันมีแค่ไฟล์เดียวคือ main.go

จากนั้น สิ่งที่มันต้องการก็คือ Facebook App ID กับ App Secret โดยให้เอาไปใส่ในค่า env แบบนี้

```sh
FACEBOOK_KEY={Facebook App ID}
FACEBOOK_SECRET={App Secret}
SESSION_SECRET=123
```

ค่า SESSION_SECRET ใส่อะไรลงไปก็ได้
ส่วนที่หน้า Facebook for Developers ก็ให้ตรวจสอบค่า

App Authentication ว่าอย่าให้มันเป็น Native or desktop app?

จากนั้นก็

```sh
go run main.go
```

เสร็จแล้วมันจะ serve ที่ port :3000 บนเครื่องเรา ก็ทดลองเปิด

http://localhost:3000

จากนั้นก็ไปลองกด Login with Facebook ดูโลด

จบการทดลอง
Can you make it even smaller?
Tags: typescript, javascript, webdev
Published: 2021-11-02 14:47:01

I have this pubsub implementation and I was just curious about how would you reduce it any further.

I'm talking about the implementation, not the TypeScript part.


```typescript
type Observer<T> = (payload: T) => void;

export interface Publer<T> {
  subscribe<K extends keyof T>(
    channel: K,
    observer: Observer<T[K]>,
  ): () => void;
  unsubscribe<K extends keyof T>(channel?: K): void;
  publish<K extends keyof T>(
    channel: K,
    ...a: T[K] extends undefined ? [] : [T[K]]
  ): void;
}

export const publer = <T>(): Publer<T> => {
  const eventMap = new Map<keyof T, Set<Observer<any>>>();

  return {
    subscribe: (channel, observer) =>
      (eventMap.get(channel)?.add(observer) ||
        eventMap.set(channel, new Set([observer]))) &&
      (() => eventMap.get(channel)?.delete(observer)),
    unsubscribe: (channel) =>
      channel ? eventMap.get(channel)?.clear() : eventMap.clear(),
    publish: (channel, ...[payload]) =>
      eventMap.get(channel)?.forEach((observer) => observer(payload)),
  } as const;
};
```

This is the smallest way I could come up with.

```typescript
interface Events {
  login: { token: string }
}

const pubsub = publer<Events>();

const unsubscribe = pubsub.subscribe('login', ({ token }) => {
  // Payload is inferred based on the event name
})

// Payload is required based on event name
pubsub.publish('login', { token: "ABC" });
```

I would love to see what other ways to make it even smaller you guys think of. Cheers!
HTTPS Domain Forwarding for Free via Netlify
Tags: codenewbie, webdev, beginners, tutorial
Published: 2021-11-02 14:39:09

This evening GoDaddy reminded me of an unused personal domain, `alvinlim-writer.com`, which is due to expire late next year. Several years ago I had used it for my personal website, and it still appears as a search result on Google. As such I decided to forward this domain to my current website [alvinlim.dev](https://alvinlim.dev).

I had previously done this with another domain via [GitHub Pages](https://dev.to/alvinqingxing/https-domain-forwarding-for-free-via-github-pages-bf6), but this time I decided to go with Netlify as I suspected doing so would be easier.

So first I created a bare bones `index.html` file containing a meta refresh tag that would load my target URL:

```
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="refresh" content="0; URL=https://alvinlim.dev">
  </head>
  <body></body>
</html>
```
Then in Netlify I deployed this `index.html` file as a running website. Usually I deploy projects to Netlify by connecting to the appropriate repo on GitHub, but for this I just clicked the `Sites` tab and dragged and dropped the folder containing the `index.html` file into the following button:

![Folder upload button on Netlify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opojtof0c9ceftkaieoq.png)

Once the `index.html` file was deployed as an active website -- just a few seconds later -- Netlify gave me the option to set up a custom domain for this website. This was my opportunity to connect my old domain `alvinlim-writer.com` to this `index.html` file which would automatically redirect the user to my current website [alvinlim.dev](https://alvinlim.dev).

To set up this custom domain, Netlify gave me the A and CNAME records that I would need to set up in my domain name registrar, in this case, GoDaddy. In GoDaddy, I set up the Netlify A and CNAME records in my `alvinlim-writer.com` management panel, and almost immediately the URL pointed to the website I had set up in Netlify! Which meant typing [alvinlim-writer.com](https://alvinlim-writer.com) in the browser would automatically redirect you to [alvinlim.dev](https://alvinlim.dev).

From my recollection, setting this up on Netlify was much easier than doing the same on GitHub Pages. Having said that, setting up HTTPS domain forwarding on [GitHub Pages](https://dev.to/alvinqingxing/https-domain-forwarding-for-free-via-github-pages-bf6) can't be described as a difficult task either!
Opera pianist looking to get into coding! 
Tags: beginners, codenewbie
Published: 2021-11-02 14:38:33

Hi everyone! My name is Natasha and I have been a pianist for 21 years. I am now 26, and in my first professional job as an opera pianist at an opera house and am looking to leave the opera industry to pursue coding full time. 

I am a very green #codenewbie and would love some advice on where to start. I am looking into bootcamps and free resources and would like some advice on any free/affordable bootcamps that I could try. My end goal is to get a job in coding in the next year or so but am completely lost on where to begin. I would also love to know your story and how you came into coding!
OOP In Real Life!!
Tags: oop, webdev, programming, beginners
Published: 2021-11-02 14:12:20

Object-oriented programming (OOP) is a computer programming model that organizes software design around data, or objects, rather than functions and logic. An object can be defined as a data field that has unique attributes and behaviour.

OOP focuses on the objects that developers want to manipulate rather than the logic required to manipulate them. This programming approach is well-suited for programs that are large, complex and actively updated or maintained.
Four Pillars of Object-Oriented Programming are listed below:

## 1. Inheritance

The real-life example of inheritance is child and parents, all the properties of the father are inherited by his son. They have the same features but are not the same, they are identical.

![father and son](https://media.giphy.com/media/QynB4olOZE6oLJEywS/giphy.gif)

## 2. Polymorphism

An example of Polymorphism can be visualized by the duties performed by a Man. Man is only one, but he takes multiple roles like – he is a dad to his child, he is an employee, a brother and many more. This is known as Polymorphism.

![Man](https://media.giphy.com/media/l0MYAF049SqFc247K/giphy.gif)

## 3. Encapsulation

One of the real-world examples of encapsulation is Capsule, as capsule binds all its medicinal materials within it, similarly in java encapsulation units (class, interface, enums etc) enclosed all its data and behaviour within it.

![Capsule](https://media.giphy.com/media/EOtPRaVsLA2uA/giphy.gif)

## 4. Abstraction

We all use an ATM for cash withdrawal, money transfer, retrieve min-statement, etc in our daily life. But we don’t know internally what things are happening inside ATM when you insert an ATM card for performing and kind of operations.

![ATM](https://media.giphy.com/media/3o6UBl6P4Ey0zkqbnO/giphy.gif)

---

Did you find it helpful? Let me know your thoughts in the comments below!

## Let's connect!

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [LinkedIn](https://www.linkedin.com/in/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

---

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)

![Buy Me a Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0ikih5nlsqs0oops11e.png)
Using continue keyword to convert binary to decimal. No use of array, string or any pre-defined conversion. Complexity O(log n)
Published: 2021-11-02 14:10:24

So this post is just to show a different approach to convert binary to decimal.
I would like the community to make this code better in terms of complexity. If possible 😜😝

```
#include<iostream>
#include<math.h>
using namespace std;
int main()
{

    int n;
    cin >> n;
    int count=0;
	int sum =0;
    for(int i=n;i>0;i=i/10)
    {
       int rem = i%10;
        if(rem==0)
        {
            count =count +1;
            continue;
		}
        else if(rem==1)
        sum = sum + pow(2,count);
        count =count+1;
	}
    cout << sum <<endl;
}
```

Time Complexity : O(log  n)
Correct me guys if I'm wrong!
Thanks.....
Responsive Navbar Using HTML/CSS With Toggle JavaScript
Tags: javascript, html, css, webdev
Published: 2021-11-02 14:08:56

Making a responsive navbar using HTML and CSS is easy but if we want clickable on the mobile view side. Then we have to use JavaScript or jQuery. But quite possible to make a responsive navbar only using CSS and HTML.

So here we made responsive Navbar Using HTML/CSS With Toggle(icons) JavaScript. In this navbar, we used nav tag and ul, li list tag with CSS display properties. Also, we used CSS media queries to make this navbar responsive and user-friendly.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source code](https://w3hubs.com/responsive-navbar-using-html-css-with-toggle-javascript/)
Terraform tips for newcomers
Tags: terraform, beginners, sre, devops
Published: 2021-11-02 13:47:20

Terraform is quite large. You have a lot of possibilities do to with, and here are some tips to help you with your scripts.

# Conditionnal Expressions
```
condition ? true_val : false_val
```
If quite simple, it looks like ternary condition in Java for example.
If the condition is true, the **true_val** will be used, otherwise it will be the **false_val**.

*example*
```
var.a != "" ? var.a : "default-a"
```

Terraform documentation : https://www.terraform.io/docs/language/expressions/conditionals.html

---

# Conditionnal/Multiple resources
```
resource "xxx" "yyyy" {
  ....
  count            = "${var.a == "a" ? 1 : 0}"
}
```
To create some elements depending conditions, or to create multiple instances of a resource, we can use **count**.

Mixed with a conditional expression we can defined how much elements the script needs to create. So if you're defining a case were the script must create 0 instances, so you have a conditionnal resource.

Documentation : https://dev.to/tbetous/how-to-make-conditionnal-resources-in-terraform-440n

---

# Local values
```
locals {
  service_name = "forum"
  owner        = "Community Team"

  name = "${var.env}-xxxx"
}
```
**locals** is an object with static values *(which can't be overrided by variables)* or can help to create some values from the variables inputs.

It can be really useful to avoid redefining a value in multiple resources.

Terraform documentation : https://www.terraform.io/docs/language/values/locals.html

---

I hope it will help you! 🍺
Making the most boring website ever with TypeScript, NestJs, React and others. Part 7. 
Tags: react, typescript, node, webdev
Published: 2021-11-02 13:43:01

_This series is about making a generic website for a local business with TypeScript, NodeJs, NestJs, Prisma, React and NextJs. I'm trying to make my videos quite short, about 10 minutes each (except for the first one), while putting as much content there as I can. [Here](https://www.youtube.com/playlist?list=PL7b0cPjh8z6K_4qLNu_QdE3RpiU6omViC) is the full playlist._

Today we will implements validation both on the server and the client. And also add a couple of new fields to the Appointment model.

Enjoy :)

{% youtube seCTFau-0WA %}
HTML5, CSS3 and JavaScript logo in SVG
Tags: javascript, css, html, webdev
Published: 2021-11-02 13:39:23

Sometimes it can be difficult to find the HTML5, CSS3 and JavaScript logo in SVG vector format.

Well, tired of constantly searching, I have created this little article for you to have:

The logo of these three web languages downloadable in SVG format and optimized, at the highest quality with [SVGOMG](https://jakearchibald.github.io/svgomg/).

## JavaScript Logo.
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630"><path fill="#f7df1e" d="M0 0h630v630H0z"/><path d="M423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/></svg>
```

## CSS3 Logo.
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 520"><path fill="#0c73b8" d="M41 460 0 0h451l-41 460-185 52"/><path fill="#30a9dc" d="m226 472 149-41 35-394H226"/><path fill="#ecedee" d="M226 208H94l5 57h127zm0-114H84l5 56h137zm0 261-124-33 7 60 117 32z"/><path fill="#fff" d="M226 265h69l-7 73-62 17v59l115-32 26-288H226v56h80l-6 58h-74z"/></svg>
```

## HTML5 Logo.
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 520"><path fill="#e34f26" d="M41 460 0 0h451l-41 460-185 52"/><path fill="#ef652a" d="m226 472 149-41 35-394H226"/><path fill="#ecedee" d="M226 208h-75l-5-58h80V94H84l15 171h127zm0 147-64-17-4-45h-56l7 89 117 32z"/><path fill="#fff" d="M226 265h69l-7 73-62 17v59l115-32 16-174H226zm0-171v56h136l5-56z"/></svg>
```
Business as a Service
Tags: business, freelancers, changingcareers, learningtocode
Published: 2021-11-02 13:19:51

---
title: Business as a Service
published: true
date: 2021-11-02 13:16:13 UTC
tags: business,freelancers,changingcareers,learningtocode
canonical_url: https://medium.com/@bass41992ben/business-as-a-service-c21c1035d5d4
---

![](https://cdn-images-1.medium.com/max/1024/0*U582dfgD6k1L53Lu)
_Photo by Markus Spiske on Unsplash_

Recently I was able to put into words a behavior or pattern I noticed about myself.

I left my previous career/work in June 2020 and started learning to code. While I was doing that I was working a part-time job. In January I got my first full-time developer job. I got my 2nd job in June of this year.

All that to say, all three of these jobs hired me to do a very specific task/job. But at all three of these jobs, while doing my job, I longed more and more to be doing something different because the job that I was hired to do, from my perspective, was not the job that needed to be done. Why? Because there are bigger issues and I am just a body. As helpful as I may be in being another body to try to solve an issue, there are underlying problems that would be worth solving first.

So how is this about business? For all of my life and for a lot of recent history, if you were hired to do a job, do that job or move on. That is the way we have lived. Business school has taught us that there is a very specific way of ‘succeeding’.

But, to be honest, I hate traditional business. I hate traditional marketing.

Traditional Business/Marketing says, “I have what you need and if you don’t get it you will miss out.” Traditional Business/Marketing is manipulative. Traditional Business/Marketing has the ‘success’ (i.e. more money) of the business itself in mind.

Business/Marketing, as it should be, “We do this (the business or the people the marketers are trying to reach) and if this aligns with what you want and what would be best for your business, then we can work together.” Don’t waste anyone’s time. Don’t waste your own time.

Seth Godin says this often, “If you are for everyone, you are for no one.” In our day and age specializing in something and offering it as a service is more approachable than ever before because you can connect with more people than ever before. _But because you can connect with more people than ever before means that you will likewise find more people than ever before who you/and your business/company/product is not for._

And that is ok. Maybe you need to hear that today. That it is ok to not be ‘for’ everyone. That does not mean you hate others. That simply means you know who you are trying to serve and who does not want your service. If you try to please everyone, you will please no one and you will run yourself into the ground.

Do Less by Focusing on ‘Who You Are For’ with your business & product.
Responsive Personal Portfolio Website with HTML CSS JS - Part 2
Tags: css, javascript, webdev, beginners
Published: 2021-11-02 13:05:50

{% youtube EOtRjEeP6zk %}

How to create Responsive personal portfolio website with html css js

In this video series, 
I will show you how to build a Complete Responsive Personal Portfolio Website using HTML CSS JavaScript. 
🌟 Website features
---------------------------------
+ 5 pages
+ Fully Responsive and mobile friendly
+ Awesome Page Navigation
+ Filterable item showcase

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)
🕐 New videos Every Friday & Tuesday

---

📹 Recommended Videos
---------------------
[Part 1](https://dev.to/codewithsadee/responsive-personal-portfolio-website-with-html-css-js-part-1-3dlg)

---

🔗 Essential links
-----------------------------
Images : [image.zip](https://drive.google.com/file/d/1CZZcnaOEVDDneSve6qpSUoyAfEBuPrqD/view)
Font : [Poppins](https://fonts.google.com/specimen/Poppins?query=poppins)
Ionicon : https://ionic.io/ionicons
How to use ionicon : https://youtu.be/TTrYjLOJeKs
Source Code : https://www.patreon.com/codewithsadee

---

⏱️ Timestamp
------------------------
0:00 - Demo
0:57 - New Variables and default style
2:34 - Resume section
16:23 - Media queries
18:17 - Page navigation functionality

---

👤 Like - Follow & Subscribe Me
----------------------------------------------------
Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
Guardando seus segredos com segurança
Tags: secrets, keepass, keybase
Published: 2021-11-02 13:01:49

# Segredos

O gerenciamento de senhas pode ser complicado quando temos vários serviços (e-mail, redes sociais, github, API´s, certificados digitais, orkut :-) , etc).

A regra é usar senhas complexas, *pass phrases*, cuidando pra não incluir dados pessoais, como aniversário, apelidos, nomes de conhecidos, etc que possam ser "adivinhados" por engenharia social.

E quando você cria sua senha super exclusiva e segura, encontra sistemas que expiram as senhas periodicamente e impedem que a reutilize.

Então, em nosso socorro, existem ferramentas para criar, gerenciar senhas, como o [KeepassXC](https://keepassxc.org/). Além de armazenar usuários e senhas, a ferramenta permite documentar e adicionar arquivos, como exemplos de requests/responses de API, arquivos de chaves, certificados digitais, etc. O KeepassXC armazena todas essas informações em um arquivo local criptografado (database .kdbx).

Existem outros, mas esse é um que eu gosto de usar e me atende muito bem. KeepassXC é open-source, roda em Windows, Linux, e Mac. É facilmente instalado. Siga o link acima e sucesso!

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

Ok, já resolvi o meu problema com muitas informações de autenticação e esbarrei em outro: Quando eu uso em mais de uma máquina, preciso me preocupar com a distribuição e sincronização do meu database por todas as minhas máquinas.

[Dropbox](https://dropbox.com), [Google Drive](https://drive.google.com), [OneDrive](https://onedrive.live.com) poderiam ser uma opção, mas eu gostaria de algo mais hipster. Brincadeira. Se estamos falando em segurança de informação, dá pra confiar nos grandes players? Talvez.

Aí, encontrei o [Keybase](https://keybase.io), que, entre outras coisas, permite um sistema de [arquivos](https://keybase.io/docs/kbfs) em nuvem e [criptografado](https://keybase.io/docs/crypto/kbfs).

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

Então, vamos por mãos à obra.

## Instalação

Acesse o site do [Keybase](https://keybase.io/download), escolha seu ambiente (macOS, Windows ou Linux), faça o download e instale normalmente. Siga as instruções de instalação e depois crie seu usuário com uma senha segura ;-)

Depois do keybase devidamente instalado, acesse as opções de arquivo:

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

E clique em "Yes, enable" para instalar o Dokan Library, que permitirá montar o sistema de arquivos em uma unidade do sistema (K: geralmente, no Windows, e /keybase no Linux e no macOS)

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

## TODO: Continuar
🔥Build a Stunning Portfolio website with React JS
Tags: react, tutorial, javascript, webdev
Published: 2021-11-02 12:56:16

Hi there👋,

I wanted to build a portfolio which is different and unique with design and little bit animations.
Here is the Demo Link:
https://react-portfolio-sigma.vercel.app/

For this project I have used these libraries,
▶️ React JS
▶️ Framer-motion for Cool transitions and animations
▶️ Styled-Components
▶️ Particle JS
▶️ React Router

First I have created design in Figma, and used some of it's awesome plugins and resources. I have listed all the resources used in this website in the github ReadMe file.

Here is the tutorial how I have created this website!

{% youtube jcohAIaSy2M %} 

Things that I have learned building this project,
▶️ Complex Styling with Styled-components
▶️ How to create Page Transition effects using Framer-motion
▶️ How we can leverage advantages of component structure
▶️ How to use ParticleJS in React JS for awesome background effects
▶️ Uses of Lazy and suspence in reactJS to make components load faster
▶️ Many awesome pure CSS animations.

> You can use this portfolio and if you want to use it else where small credit would be appreciated (not compulsory), just check license of all images and other assets before using it commercially.

I will try to improve it's speed and performance.
Feel free to try different designs and animations with it and you can also tag me or share your link in the comments.

Any suggestions are welcomed!

#### Share your portfolio in the comments, So that all the other people/beginners can get the different ideas as well as inspiration.

### You might also like these website templates:

- A beautiful portfolio template in ReactJS => [here](https://codebucks.gumroad.com/l/hsTPD)
- NFT collection landing page in ReactJS => [here](- A beautiful portfolio template in ReactJS => [here](https://codebucks.gumroad.com/l/hsTPD))

### Thanks For Reading😄

Feel free to visit my youtube channel: 
####[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)

Follow me on Instagram where I'm sharing lot's of useful resources!
####[@code.bucks](https://www.instagram.com/code.bucks/) 😉