teleren/devto huggingface dataset:
Difference Between Arguments and Parameters
Tags: javascript, webdev, beginners
Published: 2023-01-07 17:12:44

Both _arguments_ and _parameters_ both use parentheses in syntax in Javascript. While similar, they represent different purposes.



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

Above we have a function. This function's assignment is to _filter_ through all the movies in the database (since we are calling a filter it is **important** that 'movies' is an **array**) and include a _search_ parameter to look for a particular string. 


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

Zooming in on this function, these are the _parameters_ of the function. The words can be anything but it's best to make sure that make sense to what you want your function to do. 
>Parameters are essentially passed to functions by value — so if the code within the body of a function assigns a completely new value to a parameter that was passed to the function, the change is not reflected globally or in the code which called that function.
> _source: MDN_

Alternatively, when you go to call this function, you will need to pass through the _arguments_. Below is the code to check and make sure that the function we wrote is actually working.


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

The **parameters** have changed, slightly in the **arguments**. 'movies' in the argument has nothing to do with 'movies' in the parameter of the function. I could have easily name the arguments (myMovies,"The"). As long as the first argument is an array like how the parameters are set in the function is what matters.


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

Instead of using _search_ like we wrote in the parameters of the function, we turned that object into the string "The" as an argument. What we are passing through in the arguments is to *filter* through all of the movies in the database and bring us the ones that have "The" somewhere in the title. 

When that function is run, it would look like this: The function we created went through the array of movies in my database then **filtered** through the films and **called** the information we passed through the arguments.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1ns966vddrnfzqh7z1o.png)
Finding Ghost elements with Ghost CSS !
Tags: webdev, javascript, beginners, tutorial
Published: 2023-01-07 16:52:22

When you spend enough time at the front-end development, There will be some irritating moments where you couldn't figure out what is happening with the margins/paddings and scroll issues.

The `ghost-css` comes in handly when tackling these problems. We just make the following to all the elements.

```css
* {
    background: #171717 !important;
    color: #EDEDED !important;
    outline: solid #DA0037 1px !important;
  }
```
The above code does the following to your website.  You can see there is a small problem with the alignment with `Silly Project` , 2nd one is slightly above. 
![Without this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/981v05dmx3y70xxlyxgq.png)

![Sample Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5evwyh6u04cmqmrcg4us.png)

The first horizontal line we can see this clearly and the problem is because of the video being different heights. 

This 3 lines of code have saved me a lot of debugging with getting to know whats wrong with the code easily.

More use cases and found an existing post on dev.to after writing this. 
{% embed https://dev.to/david_ojeda/how-to-find-ghost-css-elements-1h00 %}

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

_Peace 🕊_
___
## Try Our new product for free!
[DocsAI](https://docsai.app/) - Create AI support agents with your documents in the most affordable price, starts at **0$**. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? [Check out our pricing](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---

## More things from me
{% embed https://dev.to/shrihari/the-chrome-dev-tool-you-are-missing-feat-recorder-4ao5 %}

{% embed https://dev.to/shrihari/print-particular-part-of-the-screen-easily-when-using-cmdctrl-p-5c5 %}

{% embed https://dev.to/shrihari/oauth-for-beginners-and-key-terms-1plo %}
How to count the lines of code you wrote in VS Code?
Tags: productivity, programming, webdev
Published: 2023-01-07 16:48:28

Knowing the number of lines of code is interesting, and sometimes important. There are many tools out there, but the best one in my opinion is:

# [VS Code Counter](https://marketplace.visualstudio.com/items?itemName=uctakeoff.vscode-counter)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9q3yepu3uj0d8kb4rw9n.gif)

After installing, press ` CTRL + SHIFT + P ` then search for count 


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

click the first one, then it will create new a folder like this,


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

Your ` results.txt ` the file would be like this:


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

the point is in ` .VSCodeCounter ` the folder these records will save by their date. 😉


[keep in touch](https://vito-dev.ir) 

Keep Coding Y'All 👨🏻‍💻
ruby format validates (regex)
Published: 2023-01-07 16:22:57


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


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

## regex

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

## rubular

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


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

## uniqueness validates 

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


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

## uppercase lowercase 

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


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

we can create user and save it in variable like this and compare their validations 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nv65zil9q8vm6a33kead.png)
Notion Quick Add - How I Remember Random Ideas
Tags: productivity, notion, ideas
Published: 2023-01-07 16:19:59

Ideas occasionally come up randomly. Sometimes during study time, entertainment or work. Having a system to store ideas without disrupting focus is important. Notion Database is a good option to store backlogs of ideas.

Using Notion’s database, it’s easy to manage items with features like tags, custom properties etc. You can prioritize ideas, and move items (ideas) into new databases (like a to-do list database).

But I needed a way to quickly add items (ideas) to the database without disrupting my focus on anything I am doing at the moment.

So Notion Quick Add was created. All I have to do is create a keyboard shortcut (Win Key + A in my case) to open a small input window without having to open Notion.

The input in the window is automatically focused on so I can type the title of the new idea and press enter to save it to my Notion database. I can always go back to it later to make changes to it or make plans for it.

Here’s a demo of how it works:

I wrote a guide on how I implemented this with Electron here. You can clone the code and edit the code to suit your need.

Please leave a star on the repository so people can find the app and use it.

Conclusion

While creating this app, I realized it could work for basically any database. You can improve the code to suit your need.

This project is open-sourced so you can make pull requests or suggestions to improve this app.
How to fix "dalvik.system.BaseDexClassLoader.findClass" exception in Flutter?
Tags: flutter
Published: 2023-01-07 15:56:51

Were you excited to release this app just to notice that the app was crashing when trying to load it in production? You are not alone. 

In my case, I examined the crash details in the Play Store console. I saw in the stack trace that it was caused by:

```
Caused by java.lang.ClassNotFoundException:
  at dalvik.system.BaseDexClassLoader.findClass (BaseDexClassLoader.java:218)
```

Make sure that the `package` value in `/app/src/main/AndroidManifest.xml` is the same as `android\app\src\main\kotlin\com\example\kombucha_app\MainActivity.kt`. 

In my case, it wasn't. Once they were the same and I published a new release of the app, it worked.
বুটস্ট্রাপ Modal কম্পোনেন্ট এর ক্লাসগুলোর সহজ, সিম্পল বিশ্লেষণ
Tags: bootstrap, css
Published: 2023-01-07 15:56:04

Bootstrap তাদের modal component এর code এ কোন কোন class কেন ব্যবহার করেছে সেটা আমরা আজকে এখানে কিছুটা আলোচনা করার চেষ্টা করব। 

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

```
<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

```

**modal ->** Normally কোনও website এ modal যেরকম হয় সেরকম type একটা styling দেওয়ার জন্য এই class দেওয়া হয়েছে। চাইলে এই ক্লাস টা রিমুভ করে দেখুন অউটপুট কিরকম আসে। 

**modal-dialog ->** কোনও button এ click করার পর যেই pop-up box টা modal hisebe open হওয়ার কথা সেটাই আসবেনা, full screen টা just blur হয়ে থাকবে। 

**modal-content ->** modal এর whole content এই class এর under এ রাখা হয়। 

**modal-header ->** modal এর content কে styling সুবিধার জন্য ৩ ভাগে ভাগ করা হয়েছে। header, body, footer. Header এর content গুলো এই class এর under এ রাখা হয়েছে।

**modal-title ->** header এর মধ্যে title দিতে এটা ব্যাবহার করা হয়েছে।

**modal-body ->** body র content গুলো এর মধ্যে রাখা হয়েছে।

**modal-footer ->** footer এর content গুলো এর মধ্যে রাখা হয়েছে। 

**~let's_code_your_career
~happy_coding!**
Become a FullStack DEV
Tags: codenewbie, tutorial, python, javascript
Published: 2023-01-07 15:51:45

Are you trying to become a fullstack dev?

I've created a step by step tutorial to build your own web app from scratch using python, javascript, docker and more!

It's not a TO-DO app, it's something real, with real problems and using multiple technologies to achieve it.

[https://gdi3d.github.io/learning-to-build/](https://gdi3d.github.io/learning-to-build/)

Feel free to contact me if you need support with it 😉
New Youtube Channel for Every Software Engineers
Tags: programming, beginners, webdev
Published: 2023-01-07 15:35:08

I decided to start Youtube to share what I learn about software development along with the project [Things I wish I had](https://github.com/bitethecode/things-I-wish-I-had).
I will focus on backend development, data structures & algorithms, and open source projects. If you like to see more useful content in depth, start follow https://www.youtube.com/@the-writer-dev. You will not regret..! Thanks!
Understand working of Online VS code for github repos.
Tags: webdev, python, github, beginners
Published: 2023-01-07 15:33:54

I am always surprised to see how modifying the link from "github" to "github1s" or "github.dev" allows me to view a repository in Visual Studio Code style. As a beginner web developer, I am always on the lookout for projects that can enhance my skills and knowledge. After some research and guidance from experienced professionals, I was able to understand how this feature works.


![Engineering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1sz7me7rrx3om29d87z.png) source: https://www.asme.org/topics-resources/content/the-engineering-behind-brain-research



First, the GitHub API plays a key role in allowing access to repository contents. The API provides access to publicly available repositories, and you can use it to retrieve the contents of a repository by making a GET request to the /contents endpoint. The response will include a list of objects representing the files and folders in the repository, along with their URLs, content, and encoding information. The content of each file is usually base64-encoded, so you will need to decode it using a function like atob() in order to access the raw data.

To display the contents of a repository in a Visual Studio Code-style code editor, you can use the Visual Studio Code APIs and JavaScript library. The APIs allow you to create custom editors that can interact with the underlying resource and provide features like syntax highlighting. You can find more information and examples on how to use the APIs in the documentation linked above.

This is just a basic overview of how this feature works. To implement it in your own project, you will need to delve deeper into the details and explore the available APIs and functions.

I think you like it:
Resources that might help you :
https://docs.github.com/en/rest/repos/contents?apiVersion=2022-11-28

https://microsoft.github.io/monaco-editor/

https://code.visualstudio.com/api/extension-guides/custom-editors#:~:text=Custom%20Editor%20API%20basics,interact%20with%20the%20underlying%20resource.
Migrations in DynamoDB with NodeJS
Tags: dynamodb, node, devops, aws
Published: 2023-01-07 15:26:08

When you work with frameworks such as ASP.NET or Django, ORM (Entity Framework, Django ORM) magically creates migration, and with DynamoDB, it may seem strange that you need to write migrations by yourself. But it is the price of using NoSQL and rejecting ORMs, but don't worry, managing migrations by yourself isn't that scary.

## Current State

Before we jump into migrations, I want to show you how we know the current state of tables.

`gist:8af50436e57df5071baab85ec073e774`

The function that turns the table name and primary key into parameters for DynamoDB comes from this [tiny library](https://github.com/RodionChachura/awsdynamoutils) with common utils.

## Create and Delete Tables

First, we want to delete tables we don't need anymore and create new ones. To do this, we compare the existing DynamoDB tables' names with our tables parameters. If there is a mismatch, we execute appropriate operations to delete and create tables accordingly to the current state.

`gist:0f86b729b448b6312708aac1d6eff1a6#prepareDB1.js`

## Running Migrations

To know which migration was executed last time, we have the table with migration information. It looks like this:

![migration item](migration-item.png)

All our migrations are simply an array of asynchronous functions that perform operations on tables items.

`gist:ba371a44a92c91f77159b20361d101bc`

To run these migrations, we take the index of the last executed one and run all migrations, starting from the index. If there was no migration item in the management table, it means that tables are empty, and there is no need to run migrations.

`gist:562d565dd5deab10b7441fadc73f5bb5`

Finally, we will have a script for database preparation. We can run it automatically in our CI/CD pipeline before deploying the new version of the back-end.

`gist:f7844131660c31029ee5594a1f6e0130`

It is a simple implementation of migrations mechanism :) If you would like to know about any other topic related to this, please let me know!
Cycling Challenge Dashboard with HTML & CSS
Tags: css, javascript, tutorial, beginners
Published: 2023-01-07 15:24:12

{% embed https://youtu.be/GJGSBDZWG8M %}

In this video you'll see how to build a cycling challenge dashboard in HTML & CSS. In detail you'll see how to
✔️ implement a heat map
✔️ implement CSS-only tooltips
✔️ use the clip-path property
✔️ use CSS grid layout

## Timestamps

00:00 • Basic Layout, Variables & Styles
04:55 • Challenge Profile
06:45 • Stage Statistics & Key Value List
08:55 • Achievements
11:22 • Sidebar & Heat Maps
15:06 • Tooltips
16:58 • Navbar
Testing DynamoDB + NodeJS App
Tags: node, dynamodb, bitbucket
Published: 2023-01-07 15:24:08

Do you have an Express application with the DynamoDB database and want to set up continuous integration and deployment? This article for you.

## Setting up the Testing Environment

According to the twelve-factor app, env vars are granular controls, each orthogonal to other env vars. We are going to look at the app where environment variables are the source of truth. We have three different places with env variables. First is the development environment(.env file), second is Bitbucket env variables, and the third one is AWS Elastic(staging).

`gist:36d751b3cbd8eb21aa4fa22d9b0a5b57`

Since AWS SDK has a global config object, we will run the setup code before we do any interactions with the database. It will specify credentials and point out that in a testing environment, we want to use local DynamoDB rather than a remote one.

`gist:61bd7b1614ed46a63f5b4675a7c950aa`

We launch local DynamoDB and create tables for tests before running tests. Once we executed tests, we delete the tables created before. To run these functions, we set paths to them in package.json. According to Jest documentation, both of them should return a promise.

`gist:5df4302867139b42618d259f2c04bd1b`

The logic of the setup function is pretty straightforward. If you are curious how represented tables params, check [this post](/blog/migrations-in-dynamodb).

`gist:c4b75adf7d1889d17ae326214fc69348`

We are using the same approach in the teardown function.

`gist:8f0e1dcc71790b70b99d29b2ed5611b9`

## Tests Termination

Sometimes we may abort tests before they finish running. In such cases, Jest won't execute globalTeardown. Better to delete tables first and after that create. Below you could see improved setup function.

`gist:6f1f8e5912863b6bc7ddb3abfd94ba61`

## CI/CD

This time for continuous deployment, we will use Bitbucket pipelines. In pipelines, we need to download java and some packages required for AWS deployment.

`gist:f2a2da8e8fd67fe7a32a74c4062fcb0f`

To optimize pipeline execution time, we could make a Docker image with the required packages.

`gist:c235b899caecca868e65ce53a56ad5b2`

I was lazy to download and configure docker on a local machine. Hopefully, there is a service on the Google cloud platform — Container Registry.

`gist:3dee4a5684204787bf543fb2abdf5162`
Analytics Just Got Plausible: A Step-by-Step Guide for Hashnode Bloggers
Tags: blogging, analytics, tutorial, beginners
Published: 2023-01-08 14:36:28

---
title: Analytics Just Got Plausible: A Step-by-Step Guide for Hashnode Bloggers
published: true
date: 2023-01-07 15:23:40 UTC
tags: Blogging,Analytics,Tutorial,Beginners
canonical_url: https://techdevblog.io/analytics-just-got-plausible-a-step-by-step-guide-for-hashnode-bloggers/
---

Welcome to this tutorial on setting up [Plausible Analytics](https://plausible.io) on your [Hashnode](https://hashnode.com) blog using a custom domain! [Hashnode](https://hashnode.com) is a powerful and easy-to-use platform for bloggers and developers to share their thoughts, ideas, and projects with the world. [Plausible](https://plausible.io) is a simple, lightweight, and privacy-friendly alternative to other analytics tools like [Google Analytics.](https://analytics.google.com) It helps you track your website's traffic and user behavior without collecting any personal data.

## Steps

1. First, make sure you have both a Hashnode blog and a [Plausible](https://plausible.io) account. If you don't have either of these yet, you can sign up for a free Hashnode blog at [https://hashnode.com](https://hashnode.com) and a free [Plausible Analytics](https://plausible.io) account at [https://plausible.io](https://plausible.io).
2. Once you have both accounts set up, log in to your [Plausible dashboard](https://plausible.io) and click on the "Add a website" button.
3. Enter your blog's domain in the "Domain" field. Make sure you do not include the "https://" part of the URL.
4. Pick a "Reporting Timezone" and click the "Add snippet" button to save your changes.
5. Now, log in to your [Hashnode](https://hashnode.com) blog and go to the blog's dashboard.
6. In the settings page, you should see a section called "Integrations". Find the [Plausible](https://plausible.io) integration in the list of integrations.
7. Toggle [Plausible](https://plausible.io) card to "On". This will enable [Plausible](https://plausible.io) on your [Hashnode](https://hashnode.com) blog start sending analytics data to [Plausible](https://plausible.io).
8. At the bottom of the page, click the "Update" button.

That's it! You've successfully set up [Plausible Analytics](https://plausible.io) on your [Hashnode](https://hashnode.com) blog using a custom domain. You should start seeing traffic data in your [Plausible Analytics](https://plausible.io) dashboard within a few hours.

<!--kg-card-end: markdown-->
Get All Items From DynamoDB Table with TypeScript
Tags: dynamodb, typescript
Published: 2023-01-07 15:14:37

[✨ **Watch on YouTube**](https://youtu.be/FU96SUD-Guc)

I need to get a CSV file with all the coupon codes stored in a DynamoDB table.

```ts
import { Key } from "aws-sdk/clients/dynamodb"
import fs from "fs"

import { tableName } from "../src/shared/db/tableName"
import { documentClient } from "../src/shared/db"

const getAllAppSumoCodeIds = async () => {
  const ids: string[] = []

  const recursiveProcess = async (lastEvaluatedKey?: Key) => {
    const { Items = [], LastEvaluatedKey } = await documentClient
      .scan({
        TableName: tableName.appSumoCodes,
        ExclusiveStartKey: lastEvaluatedKey,
        ExpressionAttributeNames: {
          "#id": "id",
        },
        ProjectionExpression: "#id",
      })
      .promise()

    ids.push(...Items.map((item) => item.id))

    if (LastEvaluatedKey) {
      await recursiveProcess(LastEvaluatedKey)
    }
  }

  await recursiveProcess()

  return ids
}
```

We will use the `scan` method to get all the items from the table. But we can't get everything in one go. The method returns a paginated result.

We will use recursion instead of a loop to run the scan method until it doesn't return `LastEvaluatedKey`.

We only need to pass the table name and last evaluated key to the scan method.

But since I only need an id, I'll also set `ExpressionAttributeNames` and `ProjectionExpression`.

Now we can set AWS environment variables and run the file with ts-node.