teleren/devto huggingface dataset:
Cara Mengintegrasikan Mapbox ke React
Published: 2021-09-24 22:51:30

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8no9yj2298r8syrs409.png)
 
Hallo teman-teman! :grinning: . Akhirnya saya kembali lagi menulis blog namun platform yang saya gunakan saat ini adalah Dev To. Ada beberapa alasan kenapa saya akhirnya memilih platform ini untuk blog saya. Mungkin saya akan tulis alasannya pada beberapa blog kedepan. 
Mari kembali ke Mapbox. 

Mapbox adalah sebuah package penyedia peta online yang berbasis di Amerika Serikat. Mapbox disini berperan sebagai pengganti google map dan saat ini banyak perusahaan atau individu beralih ke mapbox.

Untuk menggunakan mapbox pada React, teman-teman harus menginstal terlebih dahulu module mapbox. Berikut link instalasi [doc]("https://www.npmjs.com/package/mapbox-gl")

```sh
npm i mapbox-gl
```

Kemudian teman-teman perlu hook seperti `useRef` dan `useEffect`. Berikut snippet code untuk menampilkan mapbox pada React.

```sh
import "./styles.css";
import Mapboxgl from "mapbox-gl";
import { useEffect, useRef } from "react";

export default function App() {
  const map = useRef(null);

  useEffect(() => {
    Mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN || "";
    map.current = new Mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [101.52045303099948, 25.069771049083982]
    });

    map.current.zoomTo(19.5);
  },[]);
  return (
    <div>
      <div id="map" ref={map}/>
    </div>
  );
}
```

Demikian blog untuk kali ini. Teman-teman bisa follow akun media soaial Surya Tech.

Selamat mencoba. :clap:

[Instagram](https://www.instagram.com/suryatech/).
Day 459 : Somehow Someway
Tags: hiphop, code, coding, lifelongdev
Published: 2021-09-24 21:59:56

_liner notes_:
- Professional : Thought today was going to be a chill day to go into the weekend. My plan was to have a couple of meetings with some folks and then get ready for a live stream later in the day. Cool. Like I said, that was MY plan, my laptop had something else in my mind. Some reason the live stream got moved up like an hour which conflicted with one of my meetings. No problem, I can log on afterwards. My meeting ends and my computer starts to get really slow. Thought I could just restart and everything would be fine. Nope! haha Computer was still show and low on battery even though it's been plugged in all day! Somehow someway, we were able to do the live stream, I wasn't able to show everything I wanted, but we can do that next time. I did get to demo some of the projects I've been working on. Now I'm tired. haha. 

- Personal : Last night, I went through a bunch of tracks for the radio show. I also mocked up some of the pages that will be in my new side project. Now I'm thinking astro.build may be a good option to make the site. There will be a few static pages (just HTML and CSS) and a goal of astro.build is to ship as little JavaScript as possible. Oh, and I noticed that the web component on my latest side project wasn't showing up. Ended up that I was pulling the latest version of a library and something changed and it broke my web component. So I just set the version for the one I was using and it started working again. Glad I thought to check that before rewriting my code. Didn't get to watch "Boruto" though.

![A misty field at sunset in Maple Ridge, BC, Canada with a few trees and mountains in the distance.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcll36ul5tg1a6yqsji1.jpg)

I'm going to finish up the prep work of the radio show. There's some stuff I want to test out for my side project. Maybe I'll set up the starter project. Definitely want to watch an episode of "Boruto" though. haha.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 5sARWdJ3j94 %}
Headless Chrome - What is it?
Tags: headlessbrowser, headlesschrome, todayilearned
Published: 2021-09-24 21:13:07

## What is Headless Chrome?
Headless Chrome is a headless browser. Great answer! But what is a headless browser? 😉

## What is a headless browser?
A headless browser is a browser without a graphical user interface (GUI). Instead of controlling the browser's actions via its GUI, headless browsers are controlled programmatically using the command line interface (CLI).
In essence, a headless browser is a type of software that can access webpages without presenting it the actual web page graphically to the user and can pipe content of the webpages to another program. Unlike a normal browser, nothing will appear on the screen when you start up a headless browser since the programs run in the backend.
But why would one want to control the browser without the GUI?

## Why do we need headless browser?
A headless browser is a great tool for automated testing and server environments where you don't need a visible UI shell. Some examples are listed below:
* Search engines use headless browser to render pages, generate dynamic content, and index data from Single Page Application (SPA).
* SEO tools use headless browser to analyze websites and make suggestions on how to improve it.
* Monitoring tools use headless browser to monitor JavaScript execution time in web apps for performance diagnosis
* Headless browsers can be used to generate PDFs of web pages on the backend server.
* Headless browsers provide automated testing of web applications.

## What are the common types of headless browsers beside Headless Chrome?
* Firefox headless mode
* PhantomJS
* Zombie.js
* HtmlUnit
* Splash
* Electron
* NightmareJS
A good way to set up SSH keys for Git on Macbooks
Tags: bash, security, programming
Published: 2021-09-24 20:58:53

---
title: A good way to set up SSH keys for Git on Macbooks
published: true
description: Notes from yet another flawed attempt to setup SSH keys on a Macbook.
tags: bash,security,programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oiysg80zvejwugyniedm.jpg
---

# Motivation for this article

At least once or twice a year, I either set up new SSH keys for access to a new Git repository or else I set up the same keys on a new Macbook. Every time, I feel like I learn something new and this last time, I finally felt like I got it right. These are the notes.

# Creating an SSH keypair

Creating a keypair is the easy part. Generally, you can follow exactly whatever help documentation is provided by your particular Git platform, whether that's [GitHub](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account), [Gitlab](https://docs.gitlab.com/ee/ssh/), or [Bitbucket](https://support.atlassian.com/bitbucket-cloud/docs/set-up-an-ssh-key/).

# The Password Problem

Once you create the keypair, and store it into the platform, the first problem occurs, which is that you always have to enter your password to unlock the key.

For a long time, I would add the following to my `.bashrc` or `.zshrc`, simply because other developers told me to do this.

**Don't do this.**

```shell
# BAD IDEA: adding the following to the .zshrc file
eval $(ssh-agent)
ssh-add
```

The main reason not to do that is that although this lets you avoid entering your SSH key password every time you try to use the git cli, it still requires you to enter your password every time you open a new terminal.

## The solution

At some point, I read Danila Vershinin's excellent article [Proper use of SSH client in Mac OS X](https://www.getpagespeed.com/work/proper-use-of-ssh-client-in-mac-os-x). It blew my mind 🤯 because I didn't realize that Mac OS has a built-in integration between the [Keychain](https://support.apple.com/guide/keychain-access/welcome/mac) and OpenSSH.

You can use this integration with a one-time configuration ("set it and forget it").

First, add the following to `$HOME/.ssh/config`:

```
UseKeychain    yes
AddKeysToAgent yes
```

Next, add each key with the `-K` argument, which is Mac-specific and will save the key password into the Keychain.

```shell
$ ssh-add -K ~/.ssh/<<YOUR_KEY_FILE>>
```

That's all there is to it. 

## Conclusion
This is a good way to set up SSH keys for Git on Macbooks. There's also a way to configure for multiple keys and multiple Git platforms which you can check out [here](https://stackoverflow.com/a/17158985/16879897). 

If you have anything to add, I'd be glad to hear it in the comments below. 👍
React Native Mobile Apps, Integrating Expo Camera, Supabase Buckets and Image Upload
Tags: camera, supabase, reactnative, video
Published: 2021-09-24 20:56:36

{% youtube RmlekGDv8RU %}

Working with expo camera in React Native to take pictures and upload the images to Supabase Bucket. We also created an UI to show the thumbnail of the photo as a way to see the image.

Join with me on my journey of refreshing my memory with React Native and building mobile applications

Video Series - React Native Refresher
------------------------------------------------------------
Part 1 - Intro to Working with React-Navigation - https://youtu.be/uqH00SEmKxg
Part 2 - React Navigation Drawer Navigator And Authentication Flow - https://youtu.be/5e67b0PBcn4
Part 3 - Authentication And Supabase Login - https://youtu.be/aBuB-Q6vHDE
Part 4 - Authentication, Supabase, And React Hook Form - https://youtu.be/ZU3lXTm9nVY
Part 5 - Supabase Create Account, And React Hook Form - https://youtu.be/lu1JzyBfSOQ
** Part 6 - Expo Camera, Supabase Buckets and Image Upload - https://youtu.be/RmlekGDv8RU

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W31U7HM)
My first contribution  
Tags: opensource, github, contribution
Published: 2021-09-24 20:52:50

This week, for the first time, I contributed to another project for code update. It was about allowing markdown file and turning it into HTML regarding their syntax.

First, I created a new issue to let the project's owner know that I updated his code. After that, I created a new branch with my issue number and did [clone](https://git-scm.com/book/en/v2/Git-Basics-Getting-a-Git-Repository) my [partner's git repository](https://github.com/DerekJxy/My-First-SSG.git).

Second, I took a look at the code. For me, the code was easy to read and understand. It wasn't a complicated process, but some lines came along with the new line when I sliced the line. So it took a while to realize what the problem was and solve it. Plus, I had forgotten so many javascript syntax and functions I struggled a little bit. But, other than that, his code was clear, and I just texted him when I had any confusion. What I did was pretty much using his code snap and added if-statements for the file type and feature of markdown heading syntax. 

Finally, I [added](https://git-scm.com/docs/git-add) all the files that I made changes, [committed](https://git-scm.com/docs/git-commit) and [pushed](https://github.com/git-guides/git-push) to my new branch, [issue-19](https://github.com/jjung99/My-First-SSG.git). The process of git was smooth. I didn't have trouble with git throughout this lab. I think the [week-2 lecture ](https://www.youtube.com/watch?v=xHR_owLgiEU)  helped me understand how git works and how to use it appropriately (effective use of git)

When my pull request was merged, I felt good and achieved something from what I contributed. Throughout this lab, everything related to git wasn't a problem. I felt more confident and comfortable using git now, although I wanted to avoid it a month ago.
My work creating a custom web component with open-wc so far...
Published: 2021-09-24 20:46:11

So far developing the "Easy-Button" the expereince has been pretty smooth, after checking out some docs on lit element I was able to create a base button with different styles based on attributes provided. The style our group has gone for is a button that is intended to replicate the look of the easy button from staples. By default you get a red round circle with a silver border. 

If you apply an attribute of buttonText you can set the text on the button, with the perspective attribute our button shifts to give more of a three dimensional look, the gradient attribute changes the base red color of the button to a light to darker red gradient, the link attribute sets the href link for the button click event, the disabled attribute changes the color of the button to a dark color and eliminates the hover pointer effect and disables any link provided. Finally we have also included @lrnwebcomponents/simple-icon/lib/simple-icon-lite.js" in our project to make adding icons to the button very easy.

At first when developing this button we didnt understand how to change the button styles and functionality based on provided attributes. Coming from other programming languages like C#, Java, and python we thought we would have to make use of the constructor but found it easiest to style our button ussing pure CSS. We also needed to figure out conditional rendering for attributes like icon and link, which we tried to do originally using regular if statements but after doing some research on the lit element docs found a much easier inline way of computing this. 

in the future we want to add attributes for onclick functions, scaling of the button, and possibly adding sound effects for clicks.

https://github.com/spb5732/Button
Working with Other Project
Tags: opensource
Published: 2021-09-24 20:44:57

## Introduction 
[Project Repository](https://github.com/mkim219/suhheeKim_OSD_release0.1_create_ssg/tree/issue-18)
The second lab of open-source development is contributing and submitting the pull requests to the classmate’s repository that we have worked on Static Site Generator (SSG) on previous application release. I have continued to work with Suhee Kim who is my partner for reviewing my SSG application on previous lab. 

## [Filed Issue](https://github.com/mkim219/kimchi-ssg/issues)
I have created an issue #18 for supporting markdown files to generate HMTL files. 

## Implementation 
I have experienced working with JavaScript language and Node.js before and have chance to review her code in lab 1. The implantation details are: 
* Create a function that contains series of Regex
* The Regex allows to replace markdown syntax to HTML tag 
* the markdown syntax to be converted into HTML tag is following: 
      * heading 1 ~ 6
      * block quote
      * italic and bold
      * newline

## [Pull Request](https://github.com/suhhee1011/suhheeKim_OSD_release0.1_create_ssg/pull/19) & Revision
After I submit the pull request to the issue #18 branch and ask her to review the code. However, the workflow of pull request is unfamiliar for me. My professor, David Humphrey, helped me and my partner to verify workflow of pull request in detail. As lab 2 instruction indicates that it is almost guaranteed that they will ask you to make changes. Yes, that is right. I have only implemented single markdown file input, not considered markdown file in the folder with text files. Also, there is undefined error message while my partner was reviewing and testing the code. Those are two issues to revise in order to get my partner approve to merge.

It is very similar process that I reviewed my partner’s pull request. I have found the dist folder where converted HTML files will be placed should be created in main directory, not the relatively change by folder input for converting text and markdown file to HMTL file. Another thing is my partner committed unnecessary files so that I asked her to remove those folders and files and create gitIgnore to add those folders and files. My partner found an error herself that I could not found. The error was that she supposed to write the code italic HTML tag as `<i></i>`, not the `<b></b>`. 

## Conclusion
Throughout this lab, I have learned how to create a pull request properly, how to update my pull request after got feedback from others and how to add detail review on files changed in GitHub page when I review the other’s pull request.
Thoughts on Github Copilot 🤖
Tags: github, webdev, review, books
Published: 2021-09-24 20:43:43

_This article was originally published on [my newsletter](https://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://tuomokankaanpaa.com/newsletter) for the newsletter!_

Ahoy,

So [Github Copilot](https://copilot.github.com/) was announced couple of weeks ago. I got into the waiting list as soon as it was announced and just the other week I finally got in.

I started to use it right away and after one week of using it I found some problems I kept running with it but also quite a few benefits that using it has.

I ended up making a video where I explain my thoughts on it. You can watch the video on my [Youtube channel](https://youtube.com/tuomokankaanpaa).

On the non-coding front, last week I mentioned that I was watching SEAL team on Netflix. Well, just yesterday I finished the last season so right now I am not watching anything.

I am actually glad that I'm not in the middle of binge watching any series, because I really want to concentrate more on reading.

I have always liked physical books but recently I have been leaning towards on buying a [Kindle](https://amzn.to/38X2GIJ). I think it would make me read more, when I don't have to carry a book around and it would be more effortless to read with Kindle than from physical books.

So we'll see if I end up buying one, but until that, I will be reading the physical books I have in my book shelf that have been waiting to be read for too long. I am going to start by reading Kevin Mitnick's [Ghost in the Wires](https://amzn.to/3yYLH3k). It has been sitting on my shelf for too long.

If you have any good book recommendations or if you have experience using Kindle, just hit reply on this email. I would love to hear from you!

That's all for this week!

Cheers,
Tuomo
Working with React, Monorepo, Typescript and Lerna 👨‍💻
Tags: webdev, react, typescript, monorepo
Published: 2021-09-24 20:35:37

_This article was originally published on [my newsletter](https://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://tuomokankaanpaa.com/newsletter) for the newsletter!_

Ahoy,

It has been a while since my last email. The reason for why I haven't been sending many emails lately is, that I have been concentrating on my [Youtube channel](https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw).

But I miss writing these emails to you. So I am going to be more active in sending these emails going forward!

The past week I worked on setting up a new Javascript project that uses a [monorepo](https://en.wikipedia.org/wiki/Monorepo) structure. In the process I learned about [Lerna](https://lerna.js.org/) (a tool for managing Javascript projects with multiple packages) and how to setup multiple packages using React & Typescript and how to share code between those packages.

I [uploaded a video](https://www.youtube.com/watch?v=zQUpNa1hZIA) about the process, so if you are interested you can check it out on my channel.

While not working on videos or code, I have just been watching series from Netflix. I am currently watching SEAL team. I pretty much have watched a whole season in the past week, luckily there is still couple of seasons left.

That's it for this week!

Cheers,
Tuomo
Invoke React components from data-attributes
Tags: webdev, react, html, webpack
Published: 2021-09-24 19:59:15

## Motivation
I have an ASPNET CORE MVC + jQuery application and I need to gradually migrate some components to React!

Since we already have the data from the ViewModel, I would like to pass it to the React component.

##Proposal
Why not use data attributes?
I created a data attribute structure that can be read in React and invoke my components (Lazy) with their properties.
That way, I don't need to write javascript code every time to bind 'react' to html.

## Requisites
* Webpack
* Webpack chunk
* React

My structure of data-attributes
``` html
  <div data-js-component="FavoriteButton"
	   data-js-props='{
		  "favorite": @Model.Document.Favorite.ToString().ToLower()
	  }'>
  </div>
```
* data-js-component: string (name of component to scan and invoke)
* data-js-props: json (all properties of initial state)


My React Component
``` react
import React from 'react';

export default function FavoriteButton({ favorite }) {
  ...
  ...
}

```

###My InvokeComponents: 
####How to Works
First, register your components with their respective path to lazy import on 'components' object.
It will be searched for [data-js-component] in the html. When the element is found, it will be read from the 'components' object.
The [data-js-props] will be cast to json and pass to React Component found.
``` react

import { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom';

const InvokeComponents = (function() {

    //register here your components
    const components = {
        DocumentFavoriteButton: lazy(() => import('./Documents/DocumentFavoriteButton')),
        FavoriteButton: lazy(() => import('./FavoriteButton'))
    }

    const elements = document.querySelectorAll('[data-js-component]');

    for (const element of elements) {
        const { jsComponent, jsProps } = element.dataset;

        const ComponentFound = components[jsComponent];
        let props = JSON.parse(jsProps);

        ReactDOM.render(
            <Suspense fallback={<p>...</p>}>
                <ComponentFound {...props} />
            </Suspense>,
            element
        );

    }
})();

export default InvokeComponents;

```

Now, register your InvokeComponent on _layout cshtml page:
``` html
<script src="/dist/Components/InvokeComponents.js" asp-append-version="true"></script>
```



And finishing, modify your webpack.config like this to support chunk used on lazy.

``` json
  output: {
        path: path.resolve(__dirname, 'wwwroot'),
        publicPath: '/',
        chunkFilename: '[hash].[name].js',
        filename: '[name]'
    },

```
Matrix Console Screensaver
Published: 2021-09-24 19:36:42

![Console Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65v6e43gszamyxmp8wro.png)
[GitHub Repo](https://github.com/sagordon-dev/digital-stream.git)
```python
# digital_stream.py
#   This program emulates a screensaver in the style of the Matrix movie's visuals.
# by: Scott Gordon

import random
import shutil
import sys
import time

MIN_STREAM_LENGTH = 6
MAX_STREAM_LENGTH = 14
PAUSE = 0.1
STREAM_CHARS = ['0', '1']

# Density can range from 0.0 to 1.0
DENSITY = 0.02

WIDTH = shutil.get_terminal_size()[0]
WIDTH -= 1  # To prevent newline

MATRIX_GREEN = '\033[92m'

print('***** Digital Stream *****')
print('Press Ctrl-C to quit.')
time.sleep(2)

try:
    columns = [0] * WIDTH
    while True:
        for i in range(WIDTH):
            if columns[i] == 0:
                if random.random() <= DENSITY:
                    columns[i] = random.randint(
                        MIN_STREAM_LENGTH, MAX_STREAM_LENGTH)

            if columns[i] > 0:
                print(MATRIX_GREEN + random.choice(STREAM_CHARS), end='')
                columns[i] -= 1
            else:
                print(' ', end='')
        print()
        sys.stdout.flush()  # Make sure text appears on the screen.
        time.sleep(PAUSE)
except KeyboardInterrupt:
    sys.exit()  # Exit with Ctrl-C
```
[Verify my Python Skills](https://www.ziprecruiter.com/verify-skill/4503e8d7/v1:U2FsdGVkX1_152EixXHax2wfw4gQwNUJSv5nGKvKtuf2WWCxEaFnb7D2NoSapcIT2_cQ4blZPVk/#UHl0aG9u)

Photo by <a href="https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Markus Spiske</a> on <a href="https://unsplash.com/s/photos/the-matrix?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>