teleren/devto huggingface dataset:
How to Make NFC web app like dot.card or Tappy Card.
Tags: javascript, webdev, beginners, react
Published: 2022-01-22 23:01:12

So I am pretty new to front end web development. My first learning project is to build a web base app like dot.card that can program NFC card and users can create a unique profile. The profile link is linked to the card (I dont know how it works but I am hoping I get ideas here. 

The way dot.card nfc and QR code card works is that it is programmed when scanned to direct to user to the web app where he creates signs up and create profile and automatically the generated link it connected to the nfc card and qr code. How is this possible? Is it done using the serial number of the card? How is printed qr code and nfc card automatically linked after user sets profile without scanning the card?

Pls I need ideas. Thank you!
Show Your Work!
Tags: webdev, showdev, vue, laravel
Published: 2022-01-22 22:35:17

My wife got me this awesome book by Austin Kleon titled, ["Show your Work!".](https://www.amazon.com/gp/product/076117897X/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=076117897X&linkCode=as2&tag=solcompany-20&linkId=445239168b9dc3f789daede16426c461) The book is super easy to read and I highly recommend it. The title is pretty clear, but the point of the book is how to share your work and use that as a way to get discovered.

Here is me sharing my work.

The past few months I've been working on a project with [Garden Gate Nursery](https://gardengatetrees.com) that soon will be finished. It's an inventory program that will help plant nurseries track inventory as it comes and goes from their nursery and generate orders & quotes for customers.

It will be fully integrated with QuickBooks Online & Desktop to generate invoices for orders and track sales. We may integrate with the QuickBooks Payments API as well to be able to charge customers through the app.

It is built on Laravel utilizing Inertia JS as a connector with the backend and Vue on the frontend. I'm using Tailwind CSS for the styling and Daisy UI for some components.

{% youtube XR1rS-CCfx0 %}

This video is a fast forwarded version of all the updates I took while working on the project. You can see the progress I made on the app and how it evolved over time! All in under 10 minutes.
Assymetries of Dark Patterns
Tags: webdev, design
Published: 2022-01-22 21:48:42

[Dark Patterns in choice architecture](https://theelementsofchoice.com/) are traps designed to get users to sign up or purchase something they don't really want. When newspapers make it very easy for a new subscriber to sign up for their newspaper on their website, but make you call and stay on hold only to be pressured when you try to cancel, this is a dark pattern. This "assymetry" with the ease of signup and difficulty cancelling is nickname a roach motel, because you can check in, but can't check out.

[This practice will get you in trouble!](https://www.ftc.gov/news-events/press-releases/2021/10/ftc-ramp-enforcement-against-illegal-dark-patterns-trick-or-trap) So avoid doing it when you design a website.
SPO600 LAB 01
Tags: beginners, programming
Published: 2022-01-22 21:36:35


Selecting my Repositories with different licenses.

## The repos I have selected:

[React – MIT license]( https://github.com/facebook/react)

[Linux - LGPL-2.0 and others]( https://github.com/torvalds/linux)


## React procedure to accept code:

React and Facebook made a code of conduct and a guide on how to contribute to their projects.
[How to contribute to React](https://reactjs.org/docs/how-to-contribute.html).


Steps needed to Contribute:

- Semantic Versioning:

There is patch versions for critical bugfixes.

Minor versions for new features or non-essential changes.

Major versions for any breaking changes.

- Branch Organization:

They submit all the changes to the main branch; they don’t use separated branches for developments.

To do that they use a series of tests to make sure nothing breaks when code is accepted.

- Feature Flags:

Breaking changes and experimental features are gated behind a feature flag.

-Bugs

Bugs can be found on [Github Issues](Issues · facebook/react (github.com))

## Successful Patch 

[Pull 23111](https://github.com/facebook/react/pull/23111)

First the user explained the bug. Then he needed to sign a CLA to contribute.
The user requested a review from the team.
Sizebot compared the size of this commit with the previous commit.
A member of the React team reviewed his changes and approved the PR.

The procedure to accept the code was done using github.

---

## Linux procedure to accept code:

Specific guideline on how to contribute can be found in [Maintainers guidelines](https://github.com/torvalds/linux/blob/master/MAINTAINERS).
-Test
They make clear that you should test your changes before submitting it, on as many people as possible.
Releasing Alpha versions, it into the net and wait for feedback.
Send the code to one of the maintainers so they can review it.

-Compile
They enforce to make sure the changes compile corrects in different configurations.
An example of Successful patch:
[Pull 27]( https://github.com/torvalds/linux/pull/27)

This is an old Patch, the user just described the bug and submitted the fix, with was accepted.
Nowadays, if an user wants to submit a PR, the KernelPRBot shows them how to do it properly.

The procedure to accept the code was done using github.


## Findings:

As a newcomer, I found React repository way more organized and friendly than Linux one.

Everything was well documented, and they had a website to teach how to collaborate.
web3 Frontend Starter Kit
Tags: web3, blockchain
Published: 2022-01-22 21:36:09

**Se tem curiosidade e quer entender um pouco mais sobre web3/Smart Contracts, essas são as ferramentas que você vai precisar.**

[Truffle Framework](https://trufflesuite.com/)

Truffle é o framework usado para desenvolver smart contracts,

Ele oferece ferramentas para gerenciamento, implementação, migração, gestão de rede e um console para desenvolvimento.

[Ganache](https://trufflesuite.com/ganache/)

Ganache é um blockchain pessoal, usado para desenvolvimento local, simulando o comportamento de uma blockchain pública.

[Solidity](https://docs.soliditylang.org/en/v0.8.11/)

Solidity é uma linguagem de alto nível, orientada a objetos e usada na implementação de smart contracts.

[Metamask](https://metamask.io/)

Uma boa parte dos navegadores hoje, não permite conexão a blockchain, aqui entra o Metamask, uma extensão do Chrome que nos permite conectar a uma rede blockchain.

[Web3.js](https://web3js.readthedocs.io/en/v1.7.0/)

Biblioteca de javascript que se comunica com Ethereum, usada para desenvolvimento frontend.
☂️ Storm - Codevember Day 6
Tags: codepen
Published: 2022-01-22 21:01:15

<p>A simple React weather app that replicates the feel of a <a href="https://en.wikipedia.org/wiki/Shin_Megami_Tensei:_Persona_4">certain popular RPG</a> that's known for its strong sense of visual style. </p>

<p>Used the <a href="https://www.wunderground.com/">Weather Underground</a> for the API as it was the only one I could find that offered historical data (for free).  Kinda regret doing it as the response fields were somewhat inconsistent naming wise. 
One positive here is that they offer IP based geolocation so you don't need to ask the user for <code>navigator.geolocation</code> permission or use a third party service like <a href="https://freegeoip.net/">freegeoip.net</a></p>

<p>Some possible enhancements could be: </p>

<ul>
<li>Storing celsius/fahrenheit preference in <code>localStorage</code> and restoring it on subsequent visits</li>
<li>Allowing the user to input a city name</li>
</ul>

{% codepen https://codepen.io/harunpehlivan/pen/qBPexJJ %}
Set Data Structure in JavaScript
Tags: javascript, beginners, webdev, programming
Published: 2022-01-22 19:12:03

**Map, WeakMap, Set** and **WeakSet** these 4 are new Data structure which was introduced in ES6.

Before diving deep into these DS, let's first understand **What is DS?**

> **Data structures, at a high level, are techniques for storing and organizing data that make it easier to modify, navigate, and access.**

Data structures are like container, which hold data ( primitive, object, etc.) and these container's have their own constraint/rule/pattern to access, modify, delete their data.

> **DS are not limited to particular programming language only. Data structures are used in almost all areas of computer science and programming, from operating systems to basic vanilla code to artificial intelligence.**

Now, let's come to our topic,

Before Set & Map, JavaScript only have inbuild **_Array_** and **_Object_** DS. but in some scenarios this both not perform well and we needed to manually add extra functionality for getting things done. and therefore this new DS are introduced.

## 1. Set

_**Set**_ DS hold only unique data. so Set guaranteed of no data is duplicated.

E.g. 
![Set Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w35ycmbsoi4tup2jpseg.png)

1. In above example, we have passed array of duplicate values to Set constructor but when we logged Set value, it returned only object with unique value's

> Note : Set is object type not array type. that's why return value is object.

2. In above example, I used shortcut way of initialization of Set via array. [click here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) to read more detailed information of Set

3. Set are implemented with [Iterator protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) [Symbol.iterator] that means Set are by default Iterable object. so we can iterate the Set value with **_[for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)_** loop

![Iterating Set](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p29ah8rhr356pvqahiup.png)

## Advantage's of Set over Array

- Set hold only unique data (no duplicate value are allowed)
- Time Complexity of searching element in **_Set_** is constant i.e. **_O(1)_**. where as in Array it's linear i.e. **_O(n)_**.

## Real time Application

- Suppose you have user list. where some user's name are repeated. then with the help of **_Set_** you can easily remove duplicate name

![username demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9x95wbrcaa6jpe4u9o2u.png)

- Searching for particular user name in huge list ( e.g. 5_00_000 records) because with array it take time **_O(n)_** complexity. but with **_Set_** we can quickly find user name 

![Time complexity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9va7ucpoge9zmt1v2lg.png)
_(output in time may varies machine to machine)_


## Refernces :

1. https://exploringjs.com/es6/ch_maps-sets.html
2. https://www.freecodecamp.org/news/how-to-use-javascript-collections-map-and-set/
Flexbox World Clock
Tags: codepen
Published: 2022-01-22 20:54:50

<p>Some light flexbox practice. 😀 My sister, brother and I live in the three cities listed on this "world clock". The background gradient is meant to depict the time of day in each place! I plan to redo the clocks when a better design inspiration strikes me.</p>

{% codepen https://codepen.io/harunpehlivan/pen/bGoXLad %}
Reading List: Email Marketing Basics
Published: 2022-01-22 20:43:56


### Strategies



* [7 Effective Email Marketing Strategies to Generate More Sales](https://alite-international.com/7-effective-email-marketing-strategies-generat-sales/)
* [Email Marketing Strategy: A Data-Driven Guide to Email in 2021](https://www.superoffice.com/blog/email-marketing-strategy/)
* [Email Marketing: How to do it, Strategies, Tools, & Examples](https://neilpatel.com/blog/beginners-guide-email-marketing/)
* [Email Marketing Strategy and Tips for Successful Campaigns | Mailchimp](https://mailchimp.com/email-marketing/)
* [10 Tried-And-True Email Marketing Tactics That Actually Work](https://www.forbes.com/sites/theyec/2020/09/11/10-tried-and-true-email-marketing-tactics-that-actually-work/?sh=3f5f54007a33)
* [What is Email Marketing Strategy: Definition, Tips, Video](https://sendpulse.com/support/glossary/email-marketing-strategy)
* [8 Effective Email Marketing Strategies, Backed by Science](https://buffer.com/resources/8-effective-email-strategies-backed-by-research/)
* [Email Marketing: The #1 Ridiculously Easy Way To Grow Your Business - OptinMonster](https://optinmonster.com/beginners-guide-to-email-marketing/)
* [https://mailchimp.com/email-design-guide/](https://mailchimp.com/email-design-guide/)

### Building Email List

* [Email List Building: 13 Proven Methods to Grow Your Email List](https://popupsmart.com/blog/email-list-building-methods-beginners)
* [Email Marketing Beginner to Advanced Roadmap 2021 | Popupsmart](https://popupsmart.com/email-marketing/#how-to-build-an-email-list)
* [How to Build Your Email List in Less than an Hour | Mailchimp](https://mailchimp.com/resources/how-to-build-your-email-list/)

### Basic questions

* [How much can you earn from your newsletter? ](https://www.getrevue.co/profile/the_week_in_newsletters/issues/how-much-can-you-earn-from-your-newsletter-557696)
* [Options to start a paid newsletter ](https://www.getrevue.co/profile/the_week_in_newsletters/issues/options-to-start-a-paid-newsletter-292557)
* [How much is your newsletter worth?](https://www.getrevue.co/profile/the_week_in_newsletters/issues/how-much-is-your-newsletter-worth-285518)
* [Risks and rewards of a paid newsletter ](https://www.getrevue.co/profile/the_week_in_newsletters/issues/risks-and-rewards-of-a-paid-newsletter-280186)
World Clock v2
Tags: codepen
Published: 2022-01-22 20:38:42

<p>My siblings, my folks and I are all living continents apart! Thus it was high time I redesigned my <a href="https://codepen.io/harunpehlivan/full/bGoXLad">world clock</a> to include the day of the week and the weather* where we all live! 
The weather data was fetched with the help of an async function to cut down on promise chaining. 
Design inspired by <a href="https://dribbble.com/harunpehlivan">Figure It Out dribbble</a>.</p>

<p>*weather data will appear permitting I haven't maxed out the requests on my <a href="https://openweathermap.org/price">free API key</a> 🙈</p>

{% codepen https://codepen.io/harunpehlivan/pen/abLeqVq %}
Create a Unique S3 Bucket Name Using CloudFormation
Tags: aws, s3, cloudformation
Published: 2022-01-22 20:29:34

An Amazon S3 bucket name is globally unique, and the namespace is shared by all AWS accounts. This means that once you create an S3 bucket named “**my-test-bucket**”, you or anyone else cannot create a bucket with the same name even in any other AWS regions or accounts until you delete that bucket.

This is particularly challenging when you are creating S3 buckets using CloudFormation and you want to reuse the template multiple times (e.g. when you are deploying your application in different AWS accounts).

To help with bucket naming, here is a template to create an S3 bucket with a unique name using CloudFormation:

```
Parameters:
  BucketPrefix:
    Description: Value that will be prefixed to the bucket name

Resources:
  S3Bucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: !Join 
        - '-'
        - - !Ref BucketPrefix
          - !Ref AWS::AccountId
          - !Ref AWS::Region
          - 'bucket'
          - !Select 
            - 0
            - !Split 
              - '-'
              - !Select 
                - 2
                - !Split 
                  - /
                  - !Ref AWS::StackId

```

In this template, we used [CloudFormation pseudo parameters](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/pseudo-parameter-reference.html) **AWS::AccountId**, **AWS::Region** and **AWS::StackId** to create a unique bucket name. 

The **AWS::StackId** helps give your bucket a random name. The [CloudFormation intrinsic functions](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference.html) **Select** and **Split** were used to select the last range of the CloudFormation Stack ID.
SPO600 W1
Tags: beginners, programming
Published: 2022-01-22 20:29:25

## Hi There,
Long time no see. This time instead of talking about my adventures in open source I will talk about binary Data representation as I am learning more about it on SPO600 at Seneca College.

SPO is about portability and optimization of software, and to enter this world there is some terminology that we should make clear first and then let’s talk a little about binaries, in a way a normal human being would understand it.

## Basic Terminology list:

-	Portability and Porting: 

Portability is the act of making a software work on different operational systems.

Porting is the act of making a software working from one operational system to another.

 
-	Benchmarking: 

Benchmarking is the act of measuring the software performance in a controlled ambient so it can be compared with other software.


-	Optimization:

Optimization is the action evaluating ways to make the software perform better.

Optimization can be related to different aspects as speed, storage, power and others.

 ---







## Now, lets talk about Binary?

Basically, it is the language that the computer uses to communicate. Of course, there is a very deep and advanced explanation to this but for now we just need to understand that if we type `“Hello World!”` it will be converted to:
```
01001000 01100101 01101100 01101100 01101111 00101100 00100000 01010111 01101111 01110010 01101100 01100100 00100001
```
In the “computer world”.

Maybe it makes no sense for us right now, but this is how the computer understands it.

## How can we represent different types of Data?

Now that we know how the computer read and write, another question maybe comes to mind: 

> How can we translate things like Characters, Audio and Images to binary so computer can understand and reproduce it?

-	For Characters: 

They first are encoded as integers, where each integer represents a character in an ASCII table for example.

![ASCII](https://www.alpharithms.com/s3/assets/img/ascii-chart/ascii-table-alpharithms-scaled-1024x610.jpg)

-	For Audio:
As we learned, audio is just vibration in the air. These vibrations can be measured and converted in numbers; a process called Pulse Coded Modulation. Because raw audio consumes a lot of storage, it is usually compressed.

![PCM](https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Pcm.svg/250px-Pcm.svg.png)
 
-	For Images:
Colors are converted on RGB values using [metamerism](https://en.wikipedia.org/wiki/Metamerism_(color)). 

![metamerism](https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Metamerism_spectrum_example.svg/800px-Metamerism_spectrum_example.svg.png)


## Finally

I know this was a very superficial explanation of very deep topics, but my goal here is not to give you a lecture, just give you an update on what I am learning now.
Our perception on how the computer works is a illusion, behind the screen everything is ones and zeroes. And to think how we could convert sound and image into numbers is an interesting topic.

Thank you for reading this,
And see you next time!
How to use Bitly to shorten URL with Laravel
Tags: laravel, bitly
Published: 2022-01-22 19:33:09

---
title: How to use Bitly to shorten URL with Laravel
published: true
description: How to use Bitly to shorten URL with Laravel without any package.  
tags: laravel, bitly
//cover_image: https://direct_url_to_image.jpg
---

Today's post we will see how to use Bitly to shorten URL with Laravel without any external package in easy way.

## Prerequisites:

• A Laravel project.
• An Account on [Bitly](https://bitly.com).

## Step 1: Get token from Bitly

After login in Bitly go to [this](https://app.bitly.com/settings/api) page and enter your password then click `Generate token`

![Generate token in Bitly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yiph8mqmkuf7jv5t89da.png)

## Step 2: Create Service for Bitly

Now go to your Laravel project and in `app` directory create a folder called `Services` and inside it create a file called `Bitly.php` will contains this:


```
<?php

namespace App\Services;

use Throwable;
use Illuminate\Support\Facades\Http;

class Bitly
{
    public static function convert($link)
    {
        try {
            $response =  Http::accept('application/json')
                ->withToken('6ec991aXXXXXXXXXX40c996d88afa')
                ->post('https://api-ssl.bitly.com/v4/shorten', 
                    "domain" => "bit.ly",
                    "long_url" => $link,
                ]);

            $body = $response->json();

            return $body['link'];
        } catch (Throwable $e) {
            return 'invalid url';
        }
    }
}
```

In `withToken` put your token that you get from Bitly 

- In this class I used `Http` which is `guzzlehttp/guzzle` package that comes with Laravel by default.

- `$body` have several information you can use it, just `dd($body)` and see if they help you.

- I used `try|catch` for the purpose of anyone entering an invalid URL.

> For sure you can create config file for the token and put it in `.env` file.


## Step 3: Use Bitly service

Now go to your controller and use Bitly class, something like this:

```
use App\Services\Bitly;

class BitlyController extends Controller
{
    public function __invoke()
    {
        $link = Bitly::convert('https://dev.to');

        return $link;
    }
}
```

The `$link` will return the Bitly short url use it as you want.
Notification Panel
Tags: webdev, css, javascript, tutorial
Published: 2022-01-22 19:19:51

In this article, we are going to build a notification panel style with CSS and will toggle the button with JS. It's very simple to do, just follow the below code. 


### Preview

![preview](https://imgur.com/S60LlTA.png)


**Requirements-**

To get all the icons you can Sign Up to the [FontAwesome](https://fontawesome.com/). It has various types of icons that are free to use, you can also upgrade to the paid version if needed.


### HTML

```html
<div class="container">
  <button class="icon">
    <i class="fas fa-wifi"></i>
  </button>
</div>
```
I'm showing just a single icon button (`.icon`), but there are more than just one. And you can add as many you want.

### CSS

```css
:root {
  --icon-bg: #212121;
  --icon-fg: gray;
}

* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.icon {
  all: unset; /* removing all the pre defined style */
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  padding: 0.5rem;
  border-radius: 999px;

  display: grid; /* making icon center horizontally and vertically */
  place-items: center;

  background: var(--icon-bg);
  color: var(--icon-fg);
  border: 2px solid transparent;

  transition: background 200ms ease-in-out;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* Removing Blue Highlight box */
}

/* To Prevent Hover on smaller Devices */
@media screen and (min-width: 500px) {
  .icon:hover {
    border: 2px solid white;
    box-shadow: 0 0 20px -5px white;
  }
}
/* Change the bg and fg */
.active-icon {
  --icon-bg: white;
  --icon-fg: black;
}
```

### Javascript

```js
const icons = document.querySelectorAll(".icon");
// Adding an event listener to the icons to change the active status
icons.forEach((icon) =>
  icon.addEventListener("click", () => {
    icon.classList.toggle("active-icon");
  })
);

```

{% codepen  https://codepen.io/j471n/pen/QWqeOjg %}

[![codepen](https://imgur.com/R1eBvYU.png)](https://codepen.io/j471n/pen/QWqeOjg)

### Wrapping Up
If you enjoyed this article then don't forget to press ❤️. If you have any queries or suggestions don't hesitate to drop them. See you. 

#### You might be interested in -
- [Colorful Rain with JS](https://dev.to/j471n/colorful-rain-with-js-514j)
- [Creative Hover Menu with CSS](https://dev.to/j471n/creative-hover-menu-with-css-513c)
- [Image Slider with JS ](https://dev.to/j471n/image-slider-with-vanila-js-22bf)