teleren/devto huggingface dataset:
My Personal Website *Update* Added SolanaPay
Tags: webdev, css, career, programming
Published: 2022-02-07 18:40:03

##**Website update**

Yoo, so I posted a link to my personal website a few weeks back in a blog on here, and I'm just giving an update on it.

I added an "app" button in the top right of the Nav to show some of the apps that I will be testing out on here.

Right now, the app is [SolanaPay](https://solanapay.com), which is a Customer to Merchant payment rail. It's a POS system essentially, without the intermediaries. 

The app is live (currently set up to have payments sent to my wallet, feel free to try😉.) and from the beginning screen you see is where the "merchant" would enter the amount for the sale, then click generate payment code, which generates a QR code; which then the customer would scan from there wallet and pay. I recommended using [Phantom Wallet](https://phantom.app) which already has the built in Solana Pay QR scanner in it.


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

##**Check it out! [https://coreystevens.xyz/](https://coreystevens.xyz/)**
How to make a badge component in CSS (using transform: translate())
Tags: css
Published: 2022-02-07 18:33:41

Since you are here, probably you already know what a badge is, but anyway let me explain it first.
![0.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1644258700410/AExtbECSz.png)
Badges are used to highlight an item's status for quick recognition. There are many use cases of the badge:
1. you must have seen that when we have something unread on WhatsApp, Twitter, Quora, etc. a badge icon with a number appears on the top right of the app to let us know how many messages are unread.
2. or to show how many items are there in our cart of an e-commerce website.

There are many ways using which we can make a badge. Here we'll see how easy it is to make the badge component using the translate function of the transform property. If you don't know what it is, read my blog here.

so, let's get to the code because as the saying goes "talk is cheap, show me the code".

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            background-color: red;
            height: 22px;
            width: 22px;
            display: flex;    /* to center the content inside red circle */
            border-radius: 99rem;
            justify-content: center;
            align-content: center;
            transform: translate(-100%, -90%);    /* only thing we need */
        }
    </style>
</head>

<body>
    <img src="notification.svg">
    <p>2</p>
</body>
</html>
```
![1.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1644258159785/7xzOcLX4U.png)
![2.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1644258171179/RHWTOEs3I.png)
![3.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1644258181697/mkbeQ292S.png)

You can see ☝️ how seamlessly we moved the red circle around the icons using the transform property.

That's all folks.


**I write one article every day related to web development (yes, every single f*cking day). Follow me here if you are learning the same.**

**my Twitter handle:** @therajatg

**If you are the Linkedin type, let's connect**: https://www.linkedin.com/in/therajatg/

**Have an awesome day ahead 😀!**
I finally used method-swizzling
Tags: ios
Published: 2022-02-12 16:27:23

---
title: I finally used method-swizzling
published: true
date: 2022-02-07 18:29:34 UTC
tags: iOS
canonical_url: https://www.rockandnull.com/i-finally-used-method-swizzling/
---

 ![I finally used method-swizzling](https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDN8fG5hdHVyZXxlbnwwfHx8fDE2NDQyNTg0OTI&ixlib=rb-1.2.1&q=80&w=2000)

It was long ago when I wrote an article about method swizzling (**[To swizzle or not to swizzle?](To%20swizzle%20or%20not%20to%20swizzle?)**) in which I was describing how it works in Objective-C and whether I would use it or not.

Frankly, my experience with method swizzling was experimental and I never worked on a project that was using it. Also, I found it amusing that I still agree with myself from 4 years ago (a rare occasion), that I would never use it in a commercial project.

Last week there was a request from the design team that one developer from our team, should go throughout the app and log font family, weight, and size for every `UILabel`. I know you can't even think the hustle, going from screen to screen, trying to find all the possible scenarios that a `UILabel` is shown, and then going back to source code to find what font was used and log it.

My software developer instincts kicked in. I would rather spend hours trying to solve this problem with code than doing this task manually. "I wouldn't be a software developer if I wanted to do such boring tasks", I thought to myself.

But, sometimes doing a boring task is inevitable, so I gave myself one hour to come back with a "code" solution otherwise I will start the task manually.

And as Bill Gates said: "I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.", I came up with the following solution, because I am becoming lazy when there is a boring task!

```

extension UILabel {
    static let classInit: Void = {
        guard let originalMethod = class_getInstanceMethod(UILabel.self, #selector(setter: UILabel.text)),
              let swizzledMethod = class_getInstanceMethod(UILabel.self, #selector(setter: UILabel.swizzledText))
       else { return }
       method_exchangeImplementations(originalMethod, swizzledMethod)
    }()

    @objc var swizzledText: String? {
        get {
            text
        }
        set {
            self.swizzledText = "\(self.font.fontName) \(self.font.pointSize)"
        }
    }
}

```

What this snippet of code does, is replacing the original text of each label with the font name(which includes weight) and size. So, you make a build, send it to the team and anyone can browse the app and log all the necessary details. Simple as that.

The purpose of this article is to encourage the exploration of "different" concepts, even when you think that you would never use them. You never know when they might come in handy.

Happy coding!!
Week 4: Starting with React Native
Tags: webdev, javascript, react, opensource
Published: 2022-02-07 18:26:15

## PR got merged !
My [PR](https://github.com/Seneca-CDOT/telescope/pull/2706) merged to `master`. Yay !. Look back on the changed that I made,I'm adding 4 lines of code but learning ton of things.First I kind of getting used to using `pnpm` when I have to`install` and `remove` packages for testing. I also learn why and how we gonna `pin` our dependency so as we have a stable deployment of the app everytime, follow my understanding and researching if the `package` or the `project` unless they have a security hole that need to be fixed otherwise we want to `pin` them to have a stable version everytime we deploy our application. Also since I kept installing dependencies and removing and rebasing with the `upstream/master`. My `pnpm-lock.yml` file ask me to `resolve` some of the `conflict` and after reading and searching in the docs I come through this [link](https://pnpm.io/git#merge-conflicts) as the solution where I just need to delete the `pnpm-lock.yaml` and `reinstall` all the dependencies again.

Like I said in week 3 post, I was ask to write a `test` which I did not feel comfortable since I have less than 3 times writting test ever since. But it quite enjoytable to be honest. I already got the basic concept of `jest` and have to work on it before so I did not have a hard time refreshing how to implement the test 

## Get the react native ball rolling
We have some basci UI and the splash screen running for the react native app. For my next goal will be having all the post loaded on the app. I have been doing bit of research and wonder if we gonna use the `parser` service which is in construction or the [react-native-rss-parser](https://www.npmjs.com/package/react-native-rss-parser)

Here is my work for this week 
[PR-1](https://github.com/Seneca-CDOT/telescope/pull/2841)
[PR-2](https://github.com/Seneca-CDOT/telescope/pull/2825)
Understanding truthy and falsy in JavaScript
Tags: javascript, webdev, programming, beginners
Published: 2022-02-07 18:12:47

We know that variables in JavaScript can hold a Boolean value of true or false. As well as this, other JavaScript values equate to **truthy** or **falsy**. What does this mean? Variables that don’t have a Boolean data type are still treated in a similar as true or false. There are 7 falsy values in JavaScript and everything else it Truthy

## Falsy
The 7 Falsy values are 
- false
- 0
- 0n:  zero as a BigInt
- “”: empty string 
- null
- undefined
- NaN

We can check that the values are treated as false by assigning some falsy values to variables. Then using the `!` operator we can console log if the statement is not true. Here we say if not test1 and not test2 and not test3 log "falsy".
 
```
const test1 = "" // empty string
const test2 = 0 // zero
const test3 = parseFloat("hi") // NaN 

if(!test1 && !test2 && !test3){
  console.log("falsy")
} // logs falsy
``` 



## Truthy

Truthy values are everything that’s not in the above list. We can use similar code as above to check. You can see that even **empty objects and arrays are truthy**

```
const test1 = "hi" // non-empty string
const test2 = 2 // non-zero number
const test3 = {} // empty object

if(test1 && test2 && test3){
  console.log("truthy")
} // returns truthy
```

## The truth is out there: truth vs truthy

It is important to bear in mind that truth and truthy are not the same thing. As is also the case for falsy and false. While an `if` statement will work the same whether something is true or truthy, if you were to use `===` to check the equality the results would not be the same.

```
const test1 = "hi" === true // test1 is false
const test2 = 2 === true // test2 is false
const test3 = [] === true // test3 is false
```

If you need to you can turn falsy results to false and truthy results to true using `!!`. While `"hi"` is truthy `!"hi"` is false not falsy. Therefore `!!"hi"` is the opposite of false and is true, not truthy. 

## Applications 

There are many use cases for truthy and falsy values. It can be very helpful when dealing with user input and catching errors as you can check whether something is `null`, `undefined` or `NaN`. You can also use it to check that a submitted form field is not blank as empty stings are falsy. There are of course plenty of other ways to do this but it is a useful thing to know.
Plot Cheatsheets: Interactive notebooks for learning  visualization with JavaScript
Tags: javascript, datascience, visualization, data
Published: 2022-02-07 18:25:42

[Observable Plot](https://observablehq.com/collection/@observablehq/plot) is a robust JavaScript library to help you quickly visualize tabular data. With its concise API, you can easily layer multiple representations of your data into customizable graphics. 

To help quickly grasp the universe of possibilities of the library, the [Plot Cheatsheets](https://observablehq.com/@observablehq/plot-cheatsheets?collection=@observablehq/cheatsheets) offer an interactive way to explore the API. For example, want to understand all of the ways to adjust the spacing of your graphic? Reference the [Layout cheatsheet](https://observablehq.com/@observablehq/plot-layouts-cheatsheet?collection=@observablehq/cheatsheets) to see all the ways to space out your chart:


![layouts cheatsheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3g15v0i42574zfedhea.png)

Looking for the right color? Explore color schemes using the [Colors cheatsheet](https://observablehq.com/@observablehq/plot-colors-cheatsheet?collection=@observablehq/cheatsheets):

![colors cheatsheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wni3i86q8kjsrmbfuoz4.png)

The cheatsheets provide offer both an interactive reference and printable PDF for each of the foundational concepts of the library: [Marks](https://observablehq.com/@observablehq/plot-marks-cheatsheet?collection=@observablehq/cheatsheets), [Scales](https://observablehq.com/@observablehq/plot-scales-cheatsheet?collection=@observablehq/cheatsheets), [Transforms](https://observablehq.com/@observablehq/plot-transforms-cheatsheet?collection=@observablehq/cheatsheets), [Layout](https://observablehq.com/@observablehq/plot-layouts-cheatsheet?collection=@observablehq/cheatsheets), and [Colors](https://observablehq.com/@observablehq/plot-colors-cheatsheet?collection=@observablehq/cheatsheets). The single-page views offers a quick scan through the set of possibilities:


![marks cheatsheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kqij3iy41pn2yasnxyb.png)

[Click here](https://github.com/observablehq/plot-cheatsheets/raw/main/plot-cheatsheets.pdf) to download the full set of PDFs.

While Plot can be used in any JavaScript project, it works especially well on [Observable](https://observablehq.com/), which is free for individuals to use. For context, Observable is a collaborative, web-based platform for data practitioners and the decision makers they empower. Our hope is to unite disparate data analytics, visualization, and science tools in order to help them make better decisions using data.
How To Be Sheriff In Huge Open Source Project
Published: 2022-02-07 18:12:17

I'm presently involved as a kind of maintainer in this massive [project](https://github.com/Seneca-CDOT/telescope). You can read [more here](https://dev.to/aserputov/how-to-be-a-maintainer-of-the-huge-open-source-project-33ef).

First of all, wait wait wait, what means [sheriff](https://wiki.mozilla.org/Sheriffing/Sheriff_Duty)?

Sheriffs help steward and manage the project's infrastructure and ensure that the team can function optimally at all times. Their primary role is to help developers shepherd their code through the review process to be landed cleanly and do so without breaking any tests, CI automation, or infrastructure.

In this post, you will follow the process of being the sheriff 
from my experience:

> Where to start? Issues are always an answer. 
> Can I approve changes? Let's break production.
> The pros/cons? Sleep schedule. 

### Where to start? 

The telescope is enormous and consists of different parts like monolithic backend, frontend, and many services.

It's complicated to know all the parts of the code and be actively involved in each issue. Still, if you will ever join any open-source, your step zero, of course, should be the architecture of the app, but after this, run into open issues and try to read code that the contributors are implementing in recent changes. This way, you will understand what they are doing and learn things about the issue. It can be challenging. Also, it can take plenty of time and energy to comprehend something, but as my professor told me, we review code not to check it only but to ask questions about something we don't understand.

### Can I approve changes? 

At first, I didn't even know that I could merge changes into the main repo, and this hit me when our production and development stages broke because of a new dependencies update. After a few hours of arduous searching around the source code, the issue was solved. There are three things to remember before merging: 

 - wait for at least two approves(three even better)  
 - check all the CI 
 - rebase all commits into one 

### The pros/cons?

 - Communication 
 - Team meetings
 - 24/7 support, so the system won't fall

Being a sheriff was a wonderful time because I was actively involved in the project and noticed how it consistently progressed. Of course, it was a lot of communication around each issue, and on the one hand, it helped. On another, it isn't. For me, a team meeting was a bit stressful at first, but I got along in a time. We divided our responsibilities with my partner, so monitoring the system wasn't so complicated. The best and worst parts of the open-source project seemed like communication. 

#Conclusion

⚠️ Repo for future first work: [here](https://twitter.com/aserputov/status/1490435738911088641)

#Links

🖇 Follow me on GitHub https://github.com/aserputov
🖇 Follow me on Twitter https://twitter.com/aserputov

p.s This post was made for my OSD class Lab ? I'm out of the count.
How to create a testnet account on Flow 🚀 
Tags: web3, blockchain, tutorial, flow
Published: 2022-02-07 18:09:47

1. Open a new terminal or go to [repl.it](repl.it) and sign in, then create a new **Bash** sandbox.
![bash repl.it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95i5tqiak4h3plxn423i.jpg)
3. Type `sh -ci "$(curl -fsSL https://storage.googleapis.com/flow-cli/install.sh)"` inside **main.sh**.
![flow cli command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk73hjz1xw8fmcxzj99i.jpg)
4. Click the green button to execute the code that will install the Flow CLI.
![execute code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqxxa5fllbexcs8enbb4.jpg)
5. On the console type `flow keys generate > keys.md` to save your keys 🗝️ to a file.
![generate keys from the console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd47upic10az1d1gzc5q.jpg)
6. Click on **Code**, then **Files**, open `keys.md` and copy the text below **Public Key** 🗝️. Store your private and public key somewhere safe before deleting this file in order to protect your keys.
![open file with your keys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1ghzbuquk20t1raorfb.jpg)
7. Visit the [Flow faucet](https://testnet-faucet.onflow.org/fund-account) to paste the public key 🗝️ on the **Public Key** field and submit the form to create your account.
![flow fauce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dgxpgn39e1ssz8zdufe.jpg)

8. Congratulations! if you followed the previous steps you shall see your testnet account address on the screen. Click on **View Account** to see your account information on Flow View Source.

![testnet account created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zzlof816omh2e8l546j.jpg)
_Testnet account information available at Flow View Source._
![flow view source](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csgx7jmnm23ypoy6ijdq.jpg)

**Challenge:** Fund your account again through the [faucet](https://testnet-faucet.onflow.org/) by clicking the **Fund account** button and  entering your testnet account address. Then search the address on [Flow View Source](https://flow-view-source.com/testnet) and verify that your balance was bumped 1000 FLOW. 

![challenge solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8rre1k8bpue0y07zksk.jpg)

🚀 Get started building on Flow reading the [documentation](https://docs.onflow.org/) or [try Cadence on the playground](https://play.onflow.org/).
Learn HTML Flexbox by playing this game - Flexbox Froggy
Tags: html, beginners, webdev, tutorial
Published: 2022-02-07 18:03:38

In this video we take a unique approach to learning HTML flexbox by playing a game called Flexbox Froggy. It's the easiest way to learn flexbox and it's a lot of fun. 

Flexbox makes it easy to create layouts and arrange HTML elements into rows and columns. Learn how to use FlexBox properties like justify-content align-items, align-content, order, flex-wrap, flex-direction in this video.

{% youtube XSCtAFnqYqQ %}
197. 上升的温度
Published: 2022-02-07 17:50:59

#197. 上升的温度
SQL架构
表 Weather
```sql
+---------------+---------+
| Column Name   | Type    |
+---------------+---------+
| id            | int     |
| recordDate    | date    |
| temperature   | int     |
+---------------+---------+
```
id 是这个表的主键
该表包含特定日期的温度信息
 

编写一个 SQL 查询，来查找与之前（昨天的）日期相比温度更高的所有日期的 id 。

返回结果 不要求顺序 。

查询结果格式如下例：

```sql
Weather
+----+------------+-------------+
| id | recordDate | Temperature |
+----+------------+-------------+
| 1  | 2015-01-01 | 10          |
| 2  | 2015-01-02 | 25          |
| 3  | 2015-01-03 | 20          |
| 4  | 2015-01-04 | 30          |
+----+------------+-------------+

Result table:
+----+
| id |
+----+
| 2  |
| 4  |
+----+
```
2015-01-02 的温度比前一天高（10 -> 25）
2015-01-04 的温度比前一天高（20 -> 30）
5 JavaScript Libraries that makes working with JS magical
Tags: javascript, webdev, beginners
Published: 2022-02-07 17:46:21

The Benefits of working with JavaScript are endless. In this post we will look at five amazing JavaScript Libraries which are easy to work with and with an awesome documentation to guide you through the process.

## 1 Anime.js
Work with particle animation, timings, animate SVG, animate on scroll, and much more amazing stuff that you can do with Anime.js .

Me after looking at codepens made using this library:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1639467347747/jgSfOxhTx.gif)

[Codepens with Anime JS](https://codepen.io/collection/XLebem?cursor=ZD0xJm89MSZwPTEmdj0z)

[Anime.js](https://animejs.com/) 

## 2 Granin.js
Make animated Gradient Animations using simple JavaScript. Granin.js is very easy to use and simple. There is not much complex animation you can do Granin.js, but it gets the job done with gradients.

[Granin.js](https://sarcadass.github.io/granim.js/index.html)

## 3 AOS
The AOS in this Library literally stands for Animate On Scroll. Nothing much, Just animate your element while scrolling by adding a simple class on the element and you are good to go.

[AOS](https://michalsnik.github.io/aos/)

## 4 Mousetrap
Are you looking to add shortcut keys in your web app then this library is the one for you. This Library has made process of invoking functions when the certain key or combination of keys are pressed very simple. I have personally used it in my web app to save the current progress in the app with alt+s. This library worked out great.

[Mousetrap](https://craig.is/killing/mice)

## 5 fullPage.js
Ever been to a website where there is no scroll bar on the right but page still scrolls vertically? Amazing huh? fullPage.js is all about making this effect possible. This JS library is easy to use and comes with multiple examples for you to take your inspiration from.

[fullPage.js](https://github.com/alvarotrigo/fullPage.js/)

<br />

<br />

<br />
Hey, Everyone If you liked this article then make sure you head over to my [Twitter](https://twitter.com/vivekthedev/) where I post daily programming threads on Python, JavaScript Web Development and Open Source
Monster 1.31 released
Tags: javascript, dom, node
Published: 2022-02-07 17:44:16

---
title: Monster 1.31 released
published: true
description: Monsterjs Release  
tags: javascript, dom, nodejs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l94ut36gdeyvuz85q1bj.png
series: Monster-Release
---

Today we released the latest edition of our Monster project. Monster is a collection of javascript classes that we need for daily work in [our](https://www.schukai.com/en/) web projects.

Besides small helper functions and classes, it also provides useful functions to enable reactive programming.

Monster is available via jsdelivr and npm.

Only the highlights are described here. The full functionality can be found in the [documentation](https://monsterjs.org/en/doc/1.31.0/).

## document and window ready

With jQuery there was always a simple call to check if the document was already loaded. 

```javascript
$( document ).ready(function() {
  // Handler for .ready() called.
});
```

But with vanilla you always have to listen for events or query the document ready status. So we have that in our lib too there are two new promises.

```javascript
domReady.then(()=>{
    // do something
}).catch(e => done(e));
```

and ...

```javascript
windowReady.then(()=>{
    // do something
}).catch(e => done(e));
```

_hope you enjoy it!_



## References

- [windowReady](https://monsterjs.org/en/doc/1.31.0/Monster.DOM.html#.windowReady)
- [domReady](https://monsterjs.org/en/doc/1.31.0/Monster.DOM.html#.domReady)
- [npm](https://www.npmjs.com/package/@schukai/monster) 
- [jsdelivr](https://www.jsdelivr.com/package/npm/@schukai/monster)