teleren/devto huggingface dataset:
How to create a polymorphic button in React
Tags: react
Published: 2022-08-10 13:40:06

Today I want to show you how to build a polymorphic button. In other words, a button that may be a button, a external link or a link (route). For that I'll build a IconButton but it can be applied to anything else.

Instead of going with an approach like [this](https://dev.to/frehner/polymorphic-button-component-in-typescript-c28) which requires a lot more work, I will use [RadixUI Slot](https://www.radix-ui.com/docs/primitives/utilities/slot) component (~800B).

### Implementation example:
/components/button-icon/ButtonIcon.tsx
```jsx
import React from 'react'
import { Slot } from '@radix-ui/react-slot'

type AsButton = {
  asChild?: false
} & React.ComponentPropsWithoutRef<'button'>

type AsSlot = {
  asChild?: true
}

type ButttonIconProps = {
  children: React.ReactNode
} & (AsButton | AsSlot)

const ButtonIcon = ({ children, asChild, ...props }: ButttonIconProps) => {
  const Comp = asChild ? Slot : 'button'
  return (
    <Comp
      className="flex h-12 w-12 items-center justify-center rounded-lg border border-[#4A5465] bg-[#252932]"
      {...props}
    >
      {children}
    </Comp>
  )
}

export default ButtonIcon
```

As you can see the code is much cleaner than [this](https://dev.to/frehner/polymorphic-button-component-in-typescript-c28) implementation

### Usage sample
/pages/index.tsx
```jsx
import type { NextPage } from 'next'
import NextLink from 'next/link'
import ButtonIcon from 'components/button-icon'
import { AppleIcon, FbIcon, GoogleIcon } from 'components/icons'

const HomePage: NextPage = () => {
  return (
    <div className="flex h-screen w-screen items-center justify-center bg-gray-600">
      <div className="flex h-80 w-full max-w-sm flex-col items-center justify-end rounded-md bg-gray-800 p-4">
        <div className="mt-4 flex gap-4">
          {/* link (route) */}
          <NextLink href="/account" passHref>
            <ButtonIcon asChild>
              <a>
                <AppleIcon />
              </a>
            </ButtonIcon>
          </NextLink>
          {/* external link */}
          <ButtonIcon asChild>
            <a
              href="https://www.linkedin.com/in/gabrielmlinassi/"
              target="_blank"
              rel="noreferrer"
            >
              <FbIcon />
            </a>
          </ButtonIcon>
          {/* button */}
          <ButtonIcon onClick={() => alert('clicked')}>
            <GoogleIcon />
          </ButtonIcon>
        </div>
      </div>
    </div>
  )
}

export default HomePage
```

Stackblitz live code
{% embed https://stackblitz.com/edit/github-hjypmo-xdd7rs?file=pages%2Findex.tsx %}
How to become a self-taught professional Front-end Developer! (30 days).
Published: 2022-08-10 13:40:00

How to become a self-taught professional Front-end Developer!
1. Desire mindset.
2. Time scheduling.
3. Get an Idea about UX/UI design. ( https://youtu.be/c9Wg6Cb_YlU )
4. Learn about How the web works in browser. (https://www.youtube.com/watch?v=hJHvdBlSxug)
5. Learn Complete HTML and CSS. ( https://www.youtube.com/watch?v=G3e-cpL7ofc&t=2692s ).
6. Visit  w3schools and read A to Z about HTML and CSS. It will sharp your brain to memorize HTML and CSS
7. Build 5 projects with HTML and CSS. You can clone popular website's homepages like Google, Facebook, Twitter,  showwcase, etc.
8. you can visit dribbble and Behance to see other designs and learn about color and fonts. 
9. How the JavaScript engine works in browser. ( https://www.youtube.com/watch?v=LLxNAw4CVTs )
10. Learn JavaScript. ( https://www.youtube.com/watch?v=DqaTKBU9TZk).
11. Visit  w3schools and read A to Z about JavaScript. It will sharp your brain to memorize about JavaScript.
12.  You have to choose one JavaScript framework/ library to make it easy in your life. but I will recommend to learn javascript concept for react. ( https://www.youtube.com/watch?v=m55PTVUrlnA ). 
13. Now your turn to learn React. ( https://www.youtube.com/watch?v=bMknfKXIFA8&t=15s ).
14. Now build some frontend projects. You can forgot about some HTML tag or CSS or Javascript callback. Don't worry, It's natural. From now you have to forget about tutorial hell and you have to be familiar with those technology's official documentation. For HTML and CSS I will recommend the MDN website. 

**Let me know If you follow this step in twitter : [iamaliahad](https://twitter.com/iamAliAhad)**

Congratulations. If you full fill in those steps.  Remember practice makes a developer perfect. You have to practice again and again.
Typescript WTF Moments 5: const a = 'a' is not equal to const a = 'a' as const and const a:'a'='a'
Tags: webdev, typescript, programming, tutorial
Published: 2022-08-10 13:31:00

---
series: Typescript WTF Moments 
---

normally we can skip type annotation because we know that typescript will infer the type for us

but turn out the with or without type annotation does make a real different

```ts
const a = 'a' // 'a'
//    ^?
const c = [a] // string[]
//    ^?

const a1 = 'a' as const // 'a'
//    ^?
const c1 = [a1] // 'a'[]
//    ^?

const a2:'a' = 'a' // 'a'
//    ^?
const c2 = [a2] // 'a'[]
//    ^?
```
notice that c is `string[]` while c2 and c3 are `'a'[]`

[playground](https://www.typescriptlang.org/play?#code/MYewdgzgLgBAhjAvDA5HFMD0nXoFDYxEwB6A-HqJLMEjANpwC6WO0ATgJZgDm9TBHMXJ5K4aPACMdNBjgQYVCYVmDipCkprTkjSSxXp+a4RTHV4AJgBcsmela4UJoiK2LLdRpYM5ZxwlMgA)

**this is work as intended**, read the explanation [here](https://stackoverflow.com/a/73309987/5338829)
Drive an app with Google Sheets
Published: 2022-08-10 13:26:00

Build a website full of catalogued books to inspire you to read what's on your shelves.
  
Use a Google Sheet to drive your site and deploy it online for others to see.
  
Get cover images for each book from [OpenLibrary](https://openlibrary.org/dev/docs/api/covers).

## Connect to Google Drive

We'll use a Google Sheet full of data from my library to drive an app that showcases a random book. We’ll start from a blank page and build up an app that uses:

* The open-source [Anvil editor](https://anvil.works) to create our app
* A [Google Sheet](https://docs.google.com/spreadsheets/d/1jG4LZw5W87tc_OPLia7RnmR5rs9HpGjm8uRDMPTBzLk/edit?usp=sharing) with library book information
* HTTP API queries to the [OpenLibrary covers database](https://openlibrary.org/dev/docs/api/covers)

And we'll do it all with nothing but Python.

[Get started!](https://anvil.works/learn/tutorials/sheets)
Dynamic NFT minter bot using Solidity and Python
Tags: web3, nft, python, solidity
Published: 2022-08-10 13:22:19

See my article on Medium to learn about dynamic NFTs.

https://coinsbench.com/how-to-create-a-dynamic-nft-minter-bot-using-solidity-and-python-pt-1-c719a37b5b1f
i3lock alternatives
Tags: devjournal, i3, tutorial, tooling
Published: 2022-08-10 13:17:38

i3lock is the default screen lock that comes with i3wm

they are other options, I simply list them. Make your own opinions.

## i3lock fancy

https://github.com/meskarune/i3lock-fancy

i3lock with more feature:

> This is an i3lock bash script that takes a screenshot of the desktop, blurs the background and adds a lock icon and text

## i3lock-color

https://github.com/Raymo111/i3lock-color

many features, mostly a configurable version of i3lock.


## betterlockscreen

https://github.com/betterlockscreen/betterlockscreen

> fast and sweet looking lockscreen for linux systems with effects!


## xsecurelock

https://github.com/google/xsecurelock

> X11 screen lock utility with security in mind 

## xss-lock
https://bitbucket.org/raymonad/xss-lock

> Use external locker as X screen saver.

## slock

https://tools.suckless.org/slock/

- suckless
- so very basic, but that's the idea of suckless movements.

## Further readings

Once again, interesting further readings are available on Arch Linux wiki pages:

- https://wiki.archlinux.org/title/Session_lock
API to Use in Carbon Footprint Offset
Tags: beginners, api
Published: 2022-08-10 13:08:14

Environmental problems are becoming more and more urgent nowadays and the humanity is seeking a solution. A lot of companies focus their efforts on finding new ways to fight climate change. One of them is carbon footprint offset. It’s not a secret that humans produce a huge amount of carbon dioxide into the atmosphere and that it affects the environment and increases the global warming. So the smart way to deal with it is to compensate the damage that you brought upon.

The main sources of carbon emissions are burning of oil, coal and gas. So when people drive their cars or travel they emit carbon dioxide into the atmosphere. Not to give up travel and driving altogether, some companies came up with the idea how to reduce the harm. They calculate the amount of CO2 emitted after each trip and find the methods it can be reimbursed with.

Typically it will require a lot of work, but modern technologies allow us to save time and energy. In this case we can use an API to collect the necessary data we need for calculation.

AwardWallet Email Parsing API is able to retrieve data from travel emails and structure it to fit the needs of calculating formula. The process is done automatically. The emails are either sent to the company’s inbox, or a customer might allow parsing emails directly from the inbox, which will of course make the process even more effortless.

So if you are thinking about starting a company that will calculate the carbon footprint or you want to add it as a feature to your existing app, email parsing API has already done half of the work for you. 

AwardWallet API supports thousands of email formats, so you can rest assured that all the emails will be parsed correctly and the information is complete.
How I Use Obsidian to Organize my Life and Writing
Tags: tips, obsidian, notetaking, notes
Published: 2022-08-23 12:04:19

---
title: How I Use Obsidian to Organize my Life and Writing
published: true
date: 2022-08-10 13:05:44 UTC
tags: tips,obsidian,notetaking,notes
canonical_url: https://lucas-schiavini.com/how-i-use-obsidian-to-organize-my-life/
---

[…]it’s where my post ideas come from and where I write details on things that I’ve learned.

![](https://cdn-images-1.medium.com/max/1024/0*OeQ3B6IIPVIEQIxy.png)

Everything starts with my Daily Note. For those unaware of Obsidian, it comes straight out of the box with a Daily Note Plugin that takes as input a template, and every day it uses the template to generate the note for that day.

Here’s what my template of it Looks like.

![](https://cdn-images-1.medium.com/max/1024/0*mcBMuV-m_enOstkP.png)

So you can see there are some “permanent” links on it but don’t worry, every day you can change the template, and it takes effect the very next day.

The way I use it though, I change the template every time I finish a project listed on the **Long Term ** part.

And on the **Thoughts** section is where I write anything I might think is note-worthy during the course of a day. It’s where my post ideas come from and where I write details on things that I’ve learned.

Here’s how my daily note looks today.

![](https://cdn-images-1.medium.com/max/1024/0*0KJOMwBA6UC8vTon.png)

On the bottom part of the page, you can see a link just after the word “Week”.

If I click on the Week link “2022-W32” here’s where we go.

![](https://cdn-images-1.medium.com/max/1024/0*2HqImXtK1BcMxsdb.png)

Here we start to see the power of Backlinks that all these new-age Gurus are talking about.

The importance of making your notes “Linked” is precise because I can, on this page for the Week, see all the daily notes that refer to it.

That way I go by each day grabbing what I think is interesting.

I do this review every Sunday, that is where each week starts.

Then I normally get enough nice notes to compile them into posts.

### Another Example of The things I Write on my Obsidian Vault

I just finished reading [Anti Fragile](https://www.amazon.com/Antifragile-Things-That-Gain-Disorder/dp/0812979680) and using [The Zettelkasten Method](https://lucas-schiavini.com/little-bits-zettelkasten-method/) I write zettels for each idea in the book.

![](https://cdn-images-1.medium.com/max/1024/0*mldx6fPkiENH2v3O.png)

As you can see, on my Anti Fragile page, I have all the zettels that are connected to it, as also the daily notes that referred to it.

That is it, if there are any other questions leave a comment down below or reach out to me on my [Twitter](https://twitter.com/LucasSchiavini).

Thanks again for reading and I will see you in the next one 🤗🤘🐶.

Like what I write and want to receive monthly emails with the best articles? Just subscribe [here](https://lucas-schiavini.com/#/portal).

_Originally published at_ [_https://lucas-schiavini.com_](https://lucas-schiavini.com/how-i-use-obsidian-to-organize-my-life/) _on August 10, 2022._
Is a good idea by Scanning all Serial Ports and sent ATZ At command in order to scan for a modem?
Tags: help, seria, modem
Published: 2022-08-10 12:49:38

As I ask at Stackoverflow:
{% stackoverflow 73306603 %}

I need to detect all serial ports in order to detect a modem. At the provided software is from an Open-Source project that does that and I need to know whether this approach is a rather good to adopt or it may have some mishaps.
xautolock alternatives
Tags: devjournal, i3, tooling, tutorial
Published: 2022-08-10 12:48:00


In the previous articles of the series, I describe how I played with [`xautolock` to use the corners feature](https://dev.to/ccoveille/xautolock-corners-5161)

There are other tools than `xautolock` available that you can use to handle the screensaver behavior.

## xautolock

- Simple
- corners feature
- notifier feature
- detectsleep
- not unmaintained

## xss-lock

https://bitbucket.org/raymonad/xss-lock

- basic

## xidlehook 

https://gitlab.com/jD91mZM2/xidlehook

- --not-when-audio feature
- --not-when-fullscreen feature

## xssstate

https://tools.suckless.org/x/xssstate/

- very basic
- suckless

## Further readings

Once again, you can refer to Arch Linux wiki pages for getting information, even if you are not using Arch Linux distribution.

- https://wiki.archlinux.org/title/Power_management#xss-lock
- https://wiki.archlinux.org/title/I3#Screensaver_and_power_management
- https://wiki.archlinux.org/title/Session_lock
Creative Personal Portfolio Website Using HTML CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-08-10 12:46:05

{% youtube BbCLWdF3Bnc %}

Creative Personal Portfolio Website Using HTML CSS JavaScript

This video will show you how to build a personal portfolio website using html css javascript

[Live Website](https://codewithsadee.github.io/smith-portfolio)
[Github Repo](https://github.com/codewithsadee/smith-portfolio)

---

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)

---

🔗 Essential links
-----------------------------
[Download the starter file to practice](https://drive.google.com/file/d/10diqzBzNkoNeRex5nt1zzdCV4E239W8K/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
5:25 - File structure
5:51 - Project initial
11:51 - Header
21:48 - Hero section
32:04 - Portfolio section
40:09 - Skills section
45:09 - Timeline section
48:24 - Price section
54:11 - News section
57:39 - Contact section
1:06:13 - Footer
1:08:52 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
Dash Platform Sprint 88 Review – Summary
Tags: web3, opensource, blockchain, programming
Published: 2022-08-10 12:46:00

Hey there! Here's DCG's 88th Sprint Review. Slowly but surely, we're coming closer to the platform release :)

Enjoy watching it. Or reading the takeaways down below. 
{% embed https://youtu.be/kRoE5bj3Q84 %}

## TenderDash

**Goal:** Same block execution

**Why we need this**

- Better UX. Increase data insertion time (H instead of H+2)
- Reduce network load. There is no need to produce extra blocks to provide signature on proofs
- Reduce node IO. in case of next-block, RocksDB snapshots need to be created every block to provide signed state (H-2) 

**What we planned**

- Implement same-block execution **_in progress_**
- Update vote-extension spec part for ABCI++ in **_review / on hold_** 
- Validator key verification **_in review / on hold_**

**What’s Next**

- Implementation: same-block execution (multiple sprints)
- Backport remaining code from Tendermint master
- Important notes:
- Tendermint v0.35/v0.36 discontinued due to unstable network (p2p) layer
- test and stabilize on Tenderdash side

## GroveDB

**Goal:** Worst Case Costs and GroveDB Replication

**What we planned**
- GroveDB Replication **_done_**
- Worst case costs **_in progress_**

**What’s Next**

- Efficient references
- Continuation on Worst Case Costs

## SDK

**Goal:** Rework chain synchronization process (SPV) SDK repository documentation update

**What we planned**

- Block Headers Synchronization with 1 stream **_done_**
- POC of chain synchronization with storage **_done_**
- Unit tests **_15%_**
- Integration tests **_20%_**

**What’s Next**

- Support for multiple parallel block headers streams 
- Consensus rules fine tuning for different networks
- Intermediate QA for the block headers synchronization
- Integration and unit tests

## Protocol

**Goal:** Release v0.23 for testnet

**What we planned**

- Release and deploy v0.23 to devnet **_done_**
- Fix fee distribution bugs **_in progress_**
- Withdrawal transitions **_in progress_**
- Platform test suite browsers tests fail with NoAvailableAddressesError in CI **_in progress_**

- Dashify rust dashcore lib (addresses - magic numbers…) **_in review_**

Implement special transactions in rust dashcore lib
- Provider transactions (registration, service, registrar, revocation) **_in review_**
- Coinbase transaction **_in review_**
- Asset Lock **_in review_**
- Credit Withdrawal **_in review_** 

**What’s Next**

- Continue on fee system
- Release Platform v0.23
- Continue work on withdrawals
- BLS Rust Bindings
- Special transaction BLS payload signing
- HTTPS for DAPI

## Rust port update
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg6898q3cm6faszzvvc5.png)

**The plan**

- Integrate RS-Drive with DPP done
- Bring all changes from v23 into the Rust DPP port - **_in progress 3/17_** - 2 **_finished and in review_**, 1 being **_worked on_**
- Make previous JS DPP tests work with Rust DPP binding
- Integrate Rust DPP into SDK, Drive, DAPI and test suite
screensaver vs dunst
Tags: devjournal, i3, tooling, tutorial
Published: 2022-08-10 12:27:00

This article will be about how I configured my screensaver script to disable `dunst` notification.

## Initial setup

Please check the [`xautolock article`](https://dev.to/ccoveille/xautolock-corners-5161) I made.

Here is the screen lock script I was using for `~/bin/lockscreen.sh`

```shell
#!/bin/sh

set -e

# enable the lock screen
i3lock -c 272d2d -i ~/Documents/wallpaper-lockscreen.png
```

## Problem

When my computer is locked, because of a meeting or a lunch break, the notification are still received by the notifier, in my case `dunst`

Each notification has a short timeout, you are supposed to see them when working, but when your computer is locked you don't see them

so here is what to do

```
#!/bin/sh

# pause notifications
dunstctl set-paused true

# enable the lock screen
i3lock --nofork -c 272d2d -i ~/Documents/wallpaper-lockscreen.png

# restore notifications
dunstctl set-paused false
```

Please note the usage of --nofork with `i3lock`. Without it, the script simply exits when `i3lock` is launched, so the notifications won't be paused.

## Better implementation

I love using trap, it's a good way to avoid problem.

```
#!/bin/sh

# using trap make sure to restore dunst even if something fails
# restore notifications when script ends
# this command is defered when the script ends
trap "dunstctl set-paused false" EXIT

# pause notifications
dunstctl set-paused true

# enable the lock screen
i3lock --nofork -c 272d2d -i ~/Documents/wallpaper-lockscreen.png
```
App Flutter - Sign in with Azure B2C
Tags: flutter, azure, mobile, help
Published: 2022-08-10 12:45:18

I am trying to integrate my Flutter app with azure identity. 
I'm using the following library: aad_oauth 0.4.0.
In particular we are trying to use B2C, but without obtaining particular results.

When I click the "Login" button, the page remains blank and the following message appears in the debug console:

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

I also show you the configuration parameters used:

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

We can't understand if it's a configuration parameter problem, or a library problem.
We look forward to your support.

Good day and good job.
If Harry Potter Taught Me Anything, It's That The Power of Teamwork Can Defeat Even Voldemort
Published: 2022-08-10 12:36:45


![Spongebob-Imagination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f9n9jcnblzwym3li28a.jpg)

####Collaboration: the subject of today's blog post, and an immensely valuable tool in the context of software development.


---


You know, it's kind of strange going from planning/designing/programming small projects in an isolated environment to working with other people. In a recent Develop Carolina workshop we were tasked with solving Codewars challenges in a pair programming exercise. Prior to this experience, pair programming was not something I had really experienced before. I have become quite used to sitting alone in a quiet room, listening to synthwave, and becoming absorbed entirely by the trial/error process of problem solving with no feedback from anyone else. As much as that probably sounds like a hip way to spend a Friday night, it's a really limited experience. If my brain gets hung up on something ("uhhh what's that method that does that thing..."), I have to awkwardly Google around until I find some sort of foothold to climb my way out of the hole I'm in. If I have no idea where to go next, I stumble around until I (hopefully) trip over the answer. With pair programming, there's another brain there to attack the problem. My weaknesses may be their strengths, and we are fortified in our togetherness. Challenges can be solved more effectively through collaboration. And while, yes, coding with someone watching was initially a nerve-wracking and kind of awkward experience, the pros far outweighed the cons when all was said and done. I'm looking forward to honing these skills.

In terms of my overall fellowship project (the "umbrella project"), collaboration and communication will continue to play a vital role in my success. I am so lucky to be paired with a teammate who exemplifies excellent communication, and am grateful to learn from her strengths in my areas of weakness. Though I have done my fair share of group projects throughout my 20+ years of schooling (cue mild existential crisis and feeling super old) and my fair share of professional teamwork within the healthcare setting, this is something entirely new to me. Looking ahead to working within my host company, I'm excited to observe the way that an actual real-world software team(TM) works together to solve actual real-world problems in an actual real-world software company, and to take those lessons with me as I work towards being a valuable team member myself.

---

Alright, relatively short for my verbose nature, but that's all I've got for today. Here's one more memetastic representation of the last few days for the road:


![Distracted boyfriend meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lllq8p05k5uyh74yjsg.jpg)

<3