teleren/devto huggingface dataset:
Unit testing CloudFlare's wrangler worker
Tags: opensource, testing, node, javascript
Published: 2022-11-19 10:00:39

Hey there! Today, I've been working on unit testing a CloudFlare's `wrangler` worker. It is a new topic for me, and I decided to dive into it by unit testing it. Hope you can get something useful for yourself.

## Prehistory

[My Photohub](https://github.com/humphd/my-photohub) is Seneca's starter project, where students build it from scratch, lead by David Humphrey. It is designed to create repos in user's GitHub accounts with their own website, and to do so, they decided to use cloud workers on CloudFlare. And such, [unit tests were needed](https://github.com/humphd/my-photohub/issues/13) for the worker.

## Working and some challenges along the way

Firstly, I needed to add all proper dependencies for testing. Since the worker was written using Node.js, I decided to go with Jest. There weren't things to configure, so I just went ahead with regular configuration. 

For unit testing, I used guidance at [worker docs](https://developers.cloudflare.com/workers/get-started/guide/). First strange thing I encountered was that file path for `unstable_dev` had to be written from root directory perspective, and not the test file location. Embarrassingly, I spent around 10 minutes to understand that, having to reverse-engineer it.

I set the test to expect the login form on GET fetch, but there was another issue. Apparently, jest does not have regular JS Response objects built-in. For that, I installed another dev-dependency called `isomorphic-fetch` that provided an alternative and imported it into the test file using `require('isomorphic-fetch');`. After that, I was done with GET fetch.

POST fetch, on the other hand, was not as simple as returning a simple HTML form. It was connecting to GitHub on users behalf and creating a repo. I didn't feel like I could fit all that into a unit test, so I asked other contributors if they thought it could be possible. Sometimes, we just need other's opinion on a certain matter.

After all changes have been committed, I opened a [pull request](https://github.com/humphd/my-photohub/pull/18) and reached out for feedback.
PostgreSQL do different equality predicates make a difference?
Tags: yugabytedb, postgres, performance, sql
Published: 2022-11-19 12:47:26

Recently I wondered whether the usage of different equality predicates ('=' and 'in') in a query would differently costed, and thus could lead to different plans.

Example table:
```sql
create table eq ( id text primary key, f1 text );
create index eq_f1_i on eq(f1);
```
Fill table with arbitrary data:
```sql
insert into eq 
select id::text, id::text from generate_series(1,10000) id;
```

Now let's see what '=' predicate does:
```sql
yugabyte=# explain select * from eq where id = '42';
                            QUERY PLAN
-------------------------------------------------------------------
 Index Scan using eq_pkey on eq  (cost=0.00..4.11 rows=1 width=64)
   Index Cond: (id = '42'::text)
``` 
And let's see what the 'in' predicate does:
```sql
yugabyte=# explain select * from eq where id in ('42');
                            QUERY PLAN
-------------------------------------------------------------------
 Index Scan using eq_pkey on eq  (cost=0.00..4.11 rows=1 width=64)
   Index Cond: (id = '42'::text)
```
The cost is identical, and actually the condition for the usage of the index is transformed to be identical in both cases (for both '=' and 'in', the condition becomes '='). There is no difference here.

I cannot see any reason how that could be, but maybe there's a difference when it's not on a primary key, and thus on YugabyteDB needs a 'secondary index'?
'=' predicate:
```sql
explain select * from eq where f1 = '42';
                             QUERY PLAN
--------------------------------------------------------------------
 Index Scan using eq_f1_i on eq  (cost=0.00..5.22 rows=10 width=64)
   Index Cond: (f1 = '42'::text)
```
'in' predicate:
```sql
explain select * from eq where f1 in ('42');
                             QUERY PLAN
--------------------------------------------------------------------
 Index Scan using eq_f1_i on eq  (cost=0.00..5.22 rows=10 width=64)
   Index Cond: (f1 = '42'::text)
```

There is no difference between using the '=' or the 'in' predicate for equality. Because SQL is a declarative language, the predicate is "translated" to what it's supposed to be doing, and costed. And besides being executed the same, it's also costed the same, so switching between '=' and 'in' will not flip plans.

The tests were conducted on a YugabyteDB version 2.13.2.0b135 database. Testing on PostgreSQL version 13 also shows completely identical cost for both equality predicates.
OPPORTUNITY FOR ARTISTS TO MINT THEIR MUSICNFTS
Published: 2022-11-19 12:40:09

If you’re a musician and you’re looking into minting your song/album into a MusicNFT, where you can take control back over your art and price it yourself, come to Halleluaih! 
We’re a marketplace for music copyrights, come join us! 
[](https://halleluiah.xyz/)
No grind no glory - AquaHub #6
Tags: webdev, community, career, opensource
Published: 2022-11-19 11:42:36

Another week has passed! Here I am with the newest weekly blog to share what progress we've made at AquaHub.

- [🔥 First contributor](#first-contributor)
- [🚀 The UI progress](#the-ui-progress)
- [🐳 Future hosting](#future-hosting)

## 🔥 First contributor
An **awesome moment** happened right in the middle of a development session.
A person joined and offered help in the development of AquaHub. He began working on the `README.md`, finished it and created a Pull Request. After that he contributed some grammar fixes as well.
Even if it doesn't sound like much, it means a lot to me and was an amazing feeling.
If you read this **thank you!**

## 🚀 The UI progress
This week I fully committed into the UI and was working on different stuff like login page and it's functionality and the projects page. Little spoiler here:

![AquaHub projects page preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkxks7lqhjawu2ax46vv.png)

## 🐳 Future hosting
One of the next steps it the **hosting** and **staging hosting** as well. I'm currently working on the configuration files and need to write a custom script to initialize our current backend **PocketBase**.

**Thanks for reading!**
<a href="https://www.buymeacoffee.com/jannisdev" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-blue.png" alt="Support me" height="20" width="80"></a>
Automate project tree with protree
Tags: javascript, productivity, programming, opensource
Published: 2022-11-19 11:11:51

**Intro**
Some projects use a tree structure in their README file as some form of good documentation, which may look something like this```
.
├── file1
├── file2
└── dir1
│   └── file3
└── dir2
    └── file4
```
**The Issue**
The documentation may be forgotten by some developers, and if they remember, it may be a noisy process to move through the new files and then to align those tree characters `└── ├──`  correctly.

**Protree Automation**
protree is a CLI tool build with JS to help in building the project tree structure. Protree can create a tree for your project and add it to your markdown with the `code block` format. Once you add new files to your project, all you have to do is run protree, and all changes will be handled automatically.

**Usage**

> I will assume that you have a project with come folders in it.

1- First install protree
```
npm i protree
```

2- Command form 
```
protree path out
```

3- Add script to your `package.json` file

```
{
...
"protree" : "protree . README.md"
...
}
```

4- Add a protree `comment` in your README.md file in the place you want the tree to be in

```
<!-- protree -->
```

5- Run command

```
npm run protree
```

**Ingoring files**
By default, protree ignores the `.git` and `node_modules` directories.
It is possible to exclude more files from being included in the tree structure by creating a `.ptignore` file and adding all the ignored files to it.
The `.ptignore` file works similarly to the `.gitignore` file. You can ignore files or patterns of files, for example, `*.json` files.

Feel free to read more about [protree](https://github.com/ahmed-sudani/protree#readme).
Visual Studio Code run python script with arguments
Published: 2022-11-19 11:09:46

I am trying to transition from pycharm to visual studio code mainly because of the remote ssh support. This has nothing to do with my issue but I had to say it.

So in pycharm you would right click the python file/script that you would like to run/debug and select Modify Run Configuration .... and then just fill the Parameters field just as you would do from command line when running it.

What is the similar approach to Visual Studio Code?

I've read something about right-clicking the default project and select Properties but I don't have a project, I just have my files in the explorer tab from the remote location I'm connecting through ssh.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0rel57frbanqw1vaihf.png)
Refreshing myself on react (after a long break)
Published: 2022-10-20 21:08:19

It's been a hot minute since I have touched react. And it's got me a little nervous that my understanding of it will be poor. So, I am coming up with a game plan to both refresh my react skills and get good enough to be paid for them 🤞💰!

*1. Go back through an AMAZING [Udemy](https://www.udemy.com/course/react-tutorial-and-projects-course/) course I made it part of the way through awhile back. My favorite part about the course are the mini projects that one does after going over a concept or two. What I like to do is add a feature that the course doesn't require which in turn forces me to figure things out by myself all the while using the mini project as a guide.

*2. I built a project in react I called G.E.M -global earthquake monitor. It is by far my most advanced project and the one I take the most pride in. It plots all earthquakes around the world for the past month on a google map, updating in real time. The larger the circle the more powerful the quake. Different colors correspond to how recent a quake is and each quake is clickable so you can get data about it. Data like the magnitude, time and place (epicenter) and was it felt by people. Unfortunately it's broken and I need to first hone my react skills in order to figure out how to fix it.

*3. After step two above is completed I may either add features to that project or build something else new cough cough react native cough!

I figure after going through either most of or all of the react course and fixing my project and adding features or building something else I "should" have entry level skills to pay the bills. Either way it's gonna be fun and I hope you follow along as I grow to be a better programmer!

If you would give me a follow, I'll be posting updates as I make progress. Feel free to give suggestions of anything you would change or add to my game plan. Thanks for reading!
MySQL Window Functions
Tags: mysql, database, mysqlide
Published: 2022-11-19 11:03:32

---
title: MySQL Window Functions
published: true
description: How to use the various MySQL window functions in MySQL?
tags: #mysql #databases #mysqlide
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtpoyrr5hwa1lgzvmapd.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-19 10:44 +0000
---
To query databases and get the appropriate results, it is essential for database developers to extend their query capabilities. That's why MySQL window functions come into play.

Let's learn how to use the various MySQL window functions in MySQL, and find out the best IDE on the market to help you deal with them easily - https://www.devart.com/dbforge/mysql/studio/mysql-window-functions.html
How to Make Login Page in bootstrap 5 | Modal Login Form bootstrap 5
Tags: tutorial, html, css, javascript
Published: 2022-11-19 10:43:21

in this video tutorial, we will learn how to make a form in bootstrap 5, inside the tutorial you will learn How to make a Modal Login Form using Bootstrap 5. 

I've used Bootstrap 5 classes and also some custom CSS properties to manage the modal box responsive. You can watch the complete tutorial, hope you will learn to understand step-by-step usage of Bootstrap with custom CSS3.

Hope this tutorial is helpful and beneficial for you.

{% embed https://www.youtube.com/watch?v=44MJGtqptoY %}
Firebase + Reactjs = Fireactjs, the open source framework for building user portals
Tags: react, firebase, opensource, webdev
Published: 2022-11-19 10:32:50

Most web applications require user authentication to access their features. As a web developer and a technical founder, I just wished that there was a package allowing me to skip all the development work to set up the user sign-up, sign-in, change password and other basic user functions in minutes. So I created an open source project called [Fireactjs](https://fireactjs.com) to do that.

![Fireactjs Screenshot](https://fireactjs.com/fireactjs_laptop.png)

## Why Fireactjs

- Setup in minutes
The project allows you to setup a Reactjs application with user authentication features in just a few minutes. It fast-tracks your development process by days to weeks. You don’t need to worry about the authentication features like sign-up and sign-in anymore.
- Extensible and customizable framework
The framework is component-based so you can easily extend the application by adding new components to it, or replacing the out-of-the-box components (e.g. template components) to customize the application.
- Support single sign-on without coding
With a simple JSON object as configuration, you can switch on and off the single sign-on methods including Google, Microsoft, Facebook, Twitter, Github and Apple without any coding work.
- Out-of-the-box features
    - User sign-up
    - User sign-in (email and password)
    - Single sign-on (Google, Microsoft, Facebook, Twitter, Github and Apple)
    - Reset password
    - User profile info
    - Change name
    - Change password
    - Change email
    - Verify email address
    - Delete account

## Resources

- Website: [https://fireactjs.com/](https://fireactjs.com/)
- npm package: [https://www.npmjs.com/package/@fireactjs/core](https://www.npmjs.com/package/@fireactjs/core)
- Github: [https://github.com/fireactjs/core](https://github.com/fireactjs/core)
- Demo: [https://demo.fireactjs.com/](https://demo.fireactjs.com/)
- Get started - learn how to set up your Fireactjs in just minutes: [https://fireactjs.com/docs/core-package/installation/](https://fireactjs.com/docs/core-package/installation/)
- Development - learn how to read the user info and create your own feature component: [https://fireactjs.com/docs/core-package/development/](https://fireactjs.com/docs/core-package/development/)

## Roadmap

I am planning to add another package to extend the project to integrate with Stripe for SaaS subscription payments in the next few months. Follow me and stay tuned.

## Contribution

Please help me with this project. You don’t have to contribute code to help, simply using it and giving feedback will help too. If you like it, please share it with your friends who are also working in web development.
In One Minute : Amazon Cognito
Tags: aws, cognito, beginners, oneminute
Published: 2022-11-19 10:30:00

Amazon Cognito is a simple user identity and data synchronization service that helps securely manage and synchronize mobile app data.

Amazon Cognito lets you add user sign-up, sign-in, and access control to your web and mobile apps quickly and easily. Amazon Cognito scales to millions of users and supports sign-in with social identity providers, such as Apple, Facebook, Google, and Amazon, and enterprise identity providers via SAML 2.0 and OpenID Connect.

## Work Offline
You can use the optional Amazon Cognito client SDKs to automatically create a local data store to cache user app data on the device. This means your app can keep reading and writing data regardless of the device connectivity state.

## Store and Sync across Devices
With Amazon Cognito you can easily synchronize app data across all of an end user’s devices. Amazon Cognito manages the complexity of conflict resolution and intermittent network connectivity so that your app can always deliver a great user experience.

{% embed https://youtu.be/ftqrN-hoEH0 %}

## Control Access to AWS Resources
You can use the unique user identifiers that Amazon Cognito generates in your access policies to enable or restrict access to other AWS resources on a per-user basis.

## Safeguard AWS Credentials
When you use Amazon Cognito, the service takes care of all the steps necessary to create a unique identifier for your app’s users and retrieve temporary, limited privilege AWS credentials.

## Interaction with other Amazon services 
AWS Cognito can interoperate with AWS SES, AWS SNS, AWS Lambda, and more.

http://aws.amazon.com/cognito/
The Wonderful Carbon - Laravel
Tags: laravel, php, webdev, beginners
Published: 2022-11-19 10:00:15

Today I am talking about a great simple PHP API extension for DateTime that we use a lot in our projects, but I wanted to have a closer look at it.

At first we go to https://carbon.nesbot.com/ Here we will see a lot of interesting information and go deeper into it
See also https://github.com/briannesbitt/Carbon


- See a short tip on the benefit

```php
$user->created_at->diffForHumans();
=> "17 hours ago"

$user->created_at->diffForHumans([
     'parts' => 2
]);
=> "17 hours 54 minutes ago"

$user->created_at->diffForHumans([
     'parts' => 3
     'join' => ', ',
]);
=> "17 hours, 54 minutes, 50 seconds ago"

$user->created_at->diffForHumans([
     'parts' => 3,
     'join' => ', ',
     'short' => true,
]);
=> "17h, 54m, 50s ago"
```


I hope you enjoyed the article and I hope you always enjoy the code .
How to Make a QR Code Reader in HTML, CSS & JavaScript
Tags: html, css, javascript, webdev
Published: 2022-11-19 09:56:55

In this article, we will make a QR code reader in HTML, CSS & JavaScript. We will make the QR code using QR API which we will use in JavaScript. In this, we will provide an area to add an image of Qr code, and as soon we upload image then it automatically tries to read the Qr code. And also, If we try to upload anything except Qr code, then it won’t read it.
[Read More](https://rocoderes.com/how-to-make-a-qr-code-reader-in-html-css-javascript/)
Ideal Cryptocurrency Exchange Development ideas you must notice
Tags: cryptocurrencyexchange, whitelabelsoftware, development, beginners
Published: 2022-11-19 09:49:43

When Blockchain technology emerged, cryptocurrency was no more a millennial man’s business. But innovation is on the verge of entering the mainstream. There are plenty of potential crypto business ideas to generate money in the crypto market. 

Now, all individuals are turning into entrepreneurs to grab their position in the crypto space. Among several crypto business ideas, building a cryptocurrency exchange is the ideal one. If you are having a business plot to start a cryptocurrency exchange, then you need to be aware of the cryptocurrency exchange development.

The crypto exchange development is predominantly based on the Return on Investment (ROI) features executed in the cryptocurrency exchange and a user-friendly interface on mobile. If you are creating a crypto exchange, then you can generate income in numerous ways such as staking, trading fees, listing fees, fiat deposit fees, and so on.

As an entrepreneur, **cryptocurrency exchange development** can be done in two possible ways: Development from scratch and white-label crypto-exchange app development. Developing from scratch isn’t piece of cake. It takes an enormous time, and money, and leads to being as nutty as a fruit cake. In these two ways, white-label cryptocurrency exchange software is the finest solution to achieve your goal in a specific period.

**White label cryptocurrency exchange software** is a 
ready-made exchange solution with a core backend and can be customized as per your business needs. From your specific ideas, you can stick out from the competitors. In that regard, you need to go with the right cryptocurrency exchange development way to attain your goal.

As a budding crypto startup, if you have the conception to build a crypto exchange, then you can refer to this article - **[Cryptocurrency Exchange Development](https://blog.cryptostars.is/cryptocurrency-exchange-development-8501dfc71202?utm_source=dev1911&utm_medium=article&utm_campaign=VJ)**. This article might help you get clarity before starting a cryptocurrency exchange.
I made a flipcard which has drawboard + todolist in it!?
Tags: webdev, javascript, beginners, programming
Published: 2022-11-19 09:38:51

Yes,I made a flipcard which has drawboard + todolist in it!?


I made this for fun.I used a javascript library called [drawingboard.js](http://leimi.github.io/drawingboard.js/). Its really a very great library and is easy to use.



```
interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener
  })
  .resizable({
    preserveAspectRatio: false,
    edges: { left: true, right: true, bottom: true, top: true }
  })
  .on('resizemove', function (event) {
    var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

    // update the element's style
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    target.textContent = event.rect.width + '×' + event.rect.height;
  });

function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }
```


Here is image of the website -

![Drawingboard.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cdhhv69mrhmo3t0tiyj.png)

And for todo list i used this github project - [Todo List Project](https://github.com/devmayor/Pure-Javascript-Todo-list)

It was very fun to make this small project i hope i get to make more of types projects! I have made project open source you can contribute or make your own.There are currently some bugs that will be fixed in some days.If you want to contribute - [Click here for the project](https://github.com/vinyashegde/draweb)


Here are the screenshots -

![Front](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb7hxbiw2recchekqsrt.png)


![Back](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujot38ct52rl2oaq3xch.png)

Link to the webpage - [Here](https://vinyashegde.github.io/draweb/)
15 Free Icon libraries for web developers 📢✅
Tags: webdev, javascript, css, html
Published: 2022-11-19 09:27:11


tablericons.com
fontawesome.com
teenyicons.com
iconmonstr.com
smashicons.com
heroicons.com
thenounproject.com
simpleicons.org
flaticon.com
ionicons.com
freepik.com
icons8.com
lucide.dev
css.gg

#javascript #react #css #webdevelopment #php #python #java #sql #frontend
If you want to Learn web development check this websites 🎯📢
Tags: webdev, javascript, css, html
Published: 2022-11-19 09:26:34


❯ CSS ➟ https://css-tricks.com/
❯ JavaScript ➟ https://javascript.info/
❯ React ➟ https://scrimba.com/
❯ Python ➟ https://lnkd.in/dsSyKZzh
❯ PHP ➟ https://www.learn-php.org/
❯ Java ➟ https://lnkd.in/dSYCk47Z
❯ SQL ➟ https://lnkd.in/d86TitbC
❯ DSA ➟ https://www.programiz.com/
❯ Web Dev ➟ https://lnkd.in/dtUuPigk
❯ API ➟ https://rapidapi.com/hub

#javascript #react #css #webdevelopment #php #python #java #sql #frontend