teleren/devto huggingface dataset:
Valid Numeric Anagram
Tags: javascript, programming, algorithms
Published: 2022-05-13 08:45:36

Given 2 postive integers, write a function to determine if they have the same number of repeated / non-repeated elements.

Thoughts:
- Since this question uses numbers instead of string it is possible to employ some JS tricks to get the individual digits
    - we could stringify first and get the character in each position
    - OR we could use mathematical formula to get the same result
- The mathematical method employs the same trick as in [Radix Sort](https://dev.to/henryong92/radix-sort-57p6)
- Employ the same mathematical tactic to practice since it is the more difficult solution
- Stringify method is simpler but is hard to translate over to other languages as a solution

```js
function getNumOfDigits(num) {
    if (num === 0) return 1;
    return Math.floor(Math.log10(num)) + 1;
}
function getDigitByPos(num, pos) {
    if (num === 0) return 0;
    return Math.floor(num / Math.pow(10, pos)) % 10;
}

function ValidNumericAnagram(numX, numY) {
    if (getNumOfDigits(numX) !== getNumOfDigits(numY)) return false;

    let digitCounter = {};
    let limit = getNumOfDigits(numX);
    for (let i=0; i<limit; i++) {
        const digit = getDigitByPos(numX, i);
        if (digitCounter[digit] === undefined) {
            digitCounter[digit] = 0
        }
        digitCounter[digit]++;
    }
    
    for (let i=0; i<limit; i++) {
        const digit = getDigitByPos(numY, i);
        if (digitCounter[digit] === undefined) {
            return false;
        }
        digitCounter[digit]--;
    }

    return true;
}
```
PDFToImage PDF Box
Tags: node, javascript, java
Published: 2022-05-13 08:19:57

Hi, I am working on a project where I want to convert the pdf file pages into png images then I am compressing the images using the imagemin with imageminpngquant plugin. the process is working fine when I am using the following command line code from the node js.

```
pdfConvert = spawn('java', [
                        '-jar',
                        `${pdfBoxPath}`,
                        'PDFToImage',
                        '-dpi',
                        dpi,
                        '-imageType',
                        'png',
                        '-outputPrefix',
                        `${rawPdfDir}/page-`,
                        `./${pdfFilePath}`,
                    ]);
```

but when I want to convert only specfic pages I am using the following code and the image is also getting converted but while compressing it is showing cannot decode image for some images.

```
for (let i = 0; i < requiredPages.length; i++) {
                        // split the page ranges 
                        const range = requiredPages[i].trim().split('-');
                        const startPage = range[0];
                        const endPage = range[1] ? range[1] : range[0];

                        // console.log(`range -> ${range}`);
                        // console.log(`requiredPages -> ${requiredPages[i]}`);

                        pdfConvert = spawn('java', [
                            '-jar',
                            `${pdfBoxPath}`,
                            'PDFToImage',
                            '-dpi',
                            dpi,
                            '-imageType',
                            'png',
                            '-outputPrefix',
                            `${rawPdfDir}/page-`,
                            `./${pdfFilePath}`,
                            `-startPage`,
                            `${startPage}`,
                            `-endPage`,
                            `${endPage}`
                        ]);

                    }
```
I am using the loop in this case.
NextJS Authentication With Social OAuth Provider's-Next-Auth (full course 2022)
Tags: javascript, webdev, beginners, programming
Published: 2022-05-13 07:52:30

🔥🔥Hello and welcome to the next js social login authentication, part of the full course on NextJS.In this video we are going to:- Setup our Social OAuth service with Facebook- Add the social provider into our NextJS project- Compile and run the application- Finally test to see if it works. So let's get started
[Watch More](https://youtu.be/8wEnIDTZk8g)
What do you look for in a Code Editor?
Tags: discuss, productivity, performance, motivation
Published: 2022-05-13 07:45:24

I find myself often searching for better editor experiences when writing code.

Things I've tried:
 - `Visual Studio code`: too slow, resource hog.
 - `Atom`: same as above.
 - `Intellij`: _very_ slow to open.
 - `NeoVim/Vim`: steep learning curve and requires a good memory (human, not computer!).
 - `Lite (and Lite-xl)`: lacking fully-featured language support currently.
 - `Sublime Text`: Has probably come the closest to my reliable editor, but actually getting it setup to be an editor can be fiddly, because it's primarily supposed to be a text editor.

Things I need:
 - Speed - my biggest frustration
 - cross-platform
 - LSP integrations (specifically gopls and pylsp)
 - debug support (delve, pdb)
 - Large extension library / list of plugins

Things I want:
 - Nice Testing & coverage visualisations
 - Kubernetes & docker support
 - hackability / customisation

This got me thinking, with modern LSPs (Language Server Protocols) and rich web-based ecosystems - what do you look for in an editor?
VS Code plugin to share errors easily
Tags: vscode, javascript, beginners, productivity
Published: 2022-05-13 07:13:21

Hi everyone,

Please checkout a new VS code plugin I made to help developers share bugs/errors with fellow teammates easily along with the context of the error.


https://marketplace.visualstudio.com/items?itemName=RoyalJain.share-error&ssr=false#overview

It's still in beta, suggestions/contributions highly welcome. Link to repo in the link above.
Bug while creating react website.
Tags: react
Published: 2022-05-13 06:54:57

Hey Everyone, I found a bug while creating a react website. I am a beginner on React. I linked my home page with services, products & sign-up pages but didn't redirect to that page while I click to signup  button or services button. It is showing in the url local host 3000/product did't opened that page.Can anyone help me out to fix this bug!
Acing your next tech interview
Tags: interview, coding, tip
Published: 2022-05-13 06:19:36

Tech interviews have been getting harder each year, the Covid pandemic only increased the competition worldwide.

I constantly see posts on LeetCode, where people shared that it took them an average of one year to get a good job offer.
My journey has been similar, it took a year of prep, lots of job applications, rejections and feeling of sheer hopelessness, until I finally got two great job offers. There have been a lot of learning and un-learning for me. 

This is the precursor of a 5 part series - on my preparation journey and what worked for me. Hoping that it helps someone who is in the same boat as I was last year.

1. [How to ace the Coding Interview in 2022] (https://dev.to/sanjbhat/how-to-ace-the-coding-interview-in-2022-336f)

2. [How to ace the System Design Interview in 2022]
(https://dev.to/sanjbhat/how-to-ace-the-system-design-interview-in-2022-4epp)
My SDE intern Experience With Hacker Rank (Twice)
Published: 2022-05-13 06:10:58

Hi everyone 👋

I got the opportunity to interview with HackerRank India for Twice i.e in September for winter session and for June session in march profiles, both off campus. The story is quite dramatic 🙈. Hope you enjoy it.

Selection Status : ❌(**Even After Clearing interviews ,seat got full because I appeared little late for interview , during festival session of Diwali**)

Interview Experience: ✔️

Recruitment Experience: ✅(OK)


####How do I apply?
_I applied directly to their carrier portal and within 4 days got mail of shortlisted after having a phone conversation with the recruiter, she asked me some questions about my college as to allow intern of 6 months and some basic non-technical questions._
####Interviews

_Now my 1st interview is scheduled with the engineering manager of hacker rank. It was not a DSA round(Hackerank doesn't ask DSA questions only your Project discussion around 20 min.)
After it 2nd interview with CTO (around 20 to 30 min. ), it is about again on projects and past internship experiences.
After it, within 2 weeks I got seat full mail._

Thanks
Hope you like it.
JavaScript Technical Interview Questions 2
Tags: javascript, webdev, beginners, wecoded
Published: 2022-05-13 05:57:03

Q. Which statement below is not true about functions in JavaScript?

- Functions can be reused throughout your code
- Functions can receive arguments that can alter the output of a function
- Functions are able to be recursive.
- A function must always be assigned an identifier

Answer - A function must always be assigned an identifier

Functions without identifiers are called anonymous functions which are used quite frequently used in JavaScript.


Q. What are the two types of scope JavaScript uses?

- Global and Local
- Abroad and Local
- Outside and Inside
- Surrounding and Inner

Answer - Global and Local

Q. As a developer, I want to be able to remove the last element of my array and I want to also be able to add a new element to the beginning of my array. Which two array methods should I use?

- concat() and shift()
- forEach() and pop()
- push() and sort()
- pop() and unshift()

Answer - pop() and unshift()

The pop array method removes the last element of an array and the unshift method adds an element to beginning of the array.

Q. How do we access a value stored in an object?

- Period notation, Square bracket notation
- Dot notation, Bracket notation
- Dot notation, Curl bracket notation
- Equal notation, Abstract notation

Answer - Dot Notation & Bracket Notation

We have two ways of accessing data inside of an object, dot notation and bracket notation.

Q. What is an object method?


- An array saved inside of an object
- Keys in an object that have a number assigned to it
- A function associated with an object
- A function that takes an object for an argument

Answer - A function associated with an object

Q. What is the purpose of the 'This' operator?


- The keyword 'This' refers to the object it is in. 'This' changes based on which object it is in when being called.
- This' is an array where we can easily store global variables for when we need access to them.
- This' keyword lets us make a reference to our window gives us access to special object methods.
- This' keyword allows us to specify certain variables to it which can be used in the global scope.

Answer - The keyword 'This' refers to the object it is in. 'This' changes based on which object it is in when being called.

Q. From the reason listed below which is NOT true about JavaScript.


- JavaScript increases interactivity of our websites.
- Javascript allows developers to create richer interfaces for the users.
- JavaScript lets provide the user immediate feedback upon an action.
- JavaScripts handles numbers better than most programming languages.

Answer - JavaScripts handles numbers better than most programming languages.
For-Loop in JavaScript
Tags: javascript, codenewbie, wecoded, beginners
Published: 2022-05-13 05:45:28

There's a limitation of only accessing arrays based on the index value. We would be repeating a lot of code when we are doing this. Instead we can use a `for-loop` to execute code more than once. 

One of the primary reasons for us to use our for-loop is because we can loop over the items in our array. For-loops are often used to iterate over arrays.For-loops are just iterative repeatable blocks of code that is going to run a certain number of times. How many times our loop is going to run is based on for-loop definition.

Let's breakdown our for-loop a bit more in detail.

Every for loop begins with a FOR keyword followed by a set of parentheses. This looks familiar to our if statements. Followed by parentheses there will be curly brackets.

```
for (
var i = 0;i < 5; i++) {
This block of code will run each time
}
```
 Going into our for-loop we get three parts. In the block of code above `var i = 0` is our declarative statement - where we come and declare our variables which can be used through out the process. We are going to start at position zero is what we are defining here.` i < 5` determines when our loop should be broken. In other words our condition no longer evaluates to true when i is less than 5. This brings us to the last part `i++` where we increment or modify our pointer to change how we are moving through the loop. i++ means `i = i+1` which then brings us back to the condition check. 

In for-loop we also take the advantage of arrays length property. We loop until we are one less than the array length. In a for-loop we are not looping over an array but we are looping over a position to point in to each part of our array from start to finish.
Day 5/100 complete
Tags: 100daysofcode
Published: 2022-05-13 05:21:34

#100DaysOfCode Day 5/100 complete. Technically have 6 hours, 24 minutes completed in 5 days. Completed my first project through the CS50 course. I wanted to do something simple learn how to do everything from scratch. Here’s the link if you want to check it out: #100DaysOfCode Day 5/100 complete. Technically have 6 hours, 24 minutes in 5 days. Completed my first project through the CS50 course. I wanted to do something simple learn how to do everything from scratch. Here’s the link if you want to check it out: https://scratch.mit.edu/projects/689767515…
Debugging a Django Application with PyCharm Community
Tags: django, python, pycharm
Published: 2022-05-13 05:14:02

PyCharm is a Jetbrains product focusing on the development of Python projects. It also comes with robust support for debugging in the applications you are writing and Django. 

Even if the professional version definitely has better support for Django, you can use the Community version and configure it for debugging.

Let's see how to do it.

## Creating a Debug configuration

Open your Django application using PyCharm and make sure to configure a virtual environment. You can learn more about it [here](https://www.jetbrains.com/help/pycharm/creating-virtual-environment.html#python_create_virtual_env).

To create a debug script, click on **Run** in the navigation bar and choose "Edit Configuration". You'll have a similar screen.

![Screenshot from 2022-05-12 16-07-13.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652417612278/uPdJn-Z8g.png)

We have no configuration for this project. Let's create a configuration to run a Django application.

### Adding a Django configuration

The next step is to click on "Add new run configuration" and choose "Python" for the option. You'll be presented with another widget where you have to add some basic configuration so PyCharm can know how to run your application.

![Screenshot from 2022-05-12 16-08-05.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652417869119/MdkYpEuaU.png)

The configuration is done, and we are nearly done. The Pycharm version comes with handy options, and feel free to modify it to your needs.

Once you are done, click on **Apply**, and congrats! You have your first run configuration in Django.

### Running a Django application in Debug mode

Pycharm offers two ways to run the Django application. In **Run** mode or **Debug** mode. 

The **Debug** mode helps you place a breakpoint on your application's code and analyze the state of your application. 
You get access to the frames and variables plus their values. Pretty cool, unh? Let's try it.

Press **Shift + F9** to run the configuration in **Debug** mode. You can also directly click on the **Bug** sign on the top bar.

![Screenshot from 2022-05-12 16-08-41.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652418307552/1tY0XvhrQ.png)

Add some breakpoints in the code of the Django project. In my case, I've added a breakpoint in a `viewset` of my Django projects. 
Then, I requested the endpoint that this viewset handles. You'll have something similar with different states and frames.

![Screenshot from 2022-05-12 16-39-30.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652418446286/LtHsS3upq.png)

Your Django application has stopped, and you can analyze the application's state. To resume, press **F9**.


*Article posted using [bloggu.io](https://bloggu.io). Try it for free.*
How to generate a side-by-side view of a Google-translated webpage in Angular
Tags: angular
Published: 2022-05-13 05:13:22

We would like to embed Google-translated webpages in our Angular application using a side-by-side view, rather than just a link. For example, https://www-amazon-com.translate.goog/dp/B07NLNRWBV?_x_tr_sl=de&_x_tr_tl=zh-CN&_x_tr_hl=en-US&_x_tr_pto=wapp

However, built-in html tags such as iframe do not work, as these websites prohibit embedding via such html elements.

Is there a solution for this?
Improve Code Quality on the fly in IntelliJ with Sonarlint
Tags: webdev, codequality, java
Published: 2022-05-13 04:54:29

Sonarlint is a IDE extension that improves code quality by detecting code smells. It enables you to code better with on-the-fly analysis and support for hundreds of deep static analysis rules to detect common mistakes, tricky bugs, and security issues.

**How to Install SonarLint plugin to IntelliJ IDEA**
Step 1: Open IntelliJ IDEA and got to setting dialog.

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

Step 2: Select the Plugin tab and then search for Sonarlint and install the plugin.

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

You will need to restart IntelliJ to see Sonarlint in action.

**working with SonarLint**
Step 3: Right click on any file/folder you wish to analyze with sonarlint -> 

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

Step 4:
Shared layouts for markdown files in Remix
Tags: react
Published: 2022-05-13 04:52:41

In the previous article, we added the [Typography Tailwind plugin](https://daily-dev-tips.com/posts/adding-tailwind-typography-plugin-in-remix/) to render each blog nicely.
However, we didn't have an excellent place to put the `prose` class for rendering purposes.

We set the prose on the `root.tsx` file.
This works, but it means we add the prose class to literally every rendered page.

To make it a bit more sustainable, we can use the [shared layouts method](https://daily-dev-tips.com/posts/remix-shared-layouts-a-first-look/) to create a unique blog layout.

## Adding a shared markdown layout

When we set up our [markdown files in Remix](https://daily-dev-tips.com/posts/rendering-markdown-in-remix/), we dedicated a `blog` folder for them.

We can simply create a `blog.tsx` file in our routes directory to use the shared layout.

This file can be used to render specific layouts for the blog items.

Let's keep it super simple for now:

```js
import { Outlet } from '@remix-run/react';

export default function Blog() {
  return (
    <div className='prose'>
      <h1>Welcome to the blog:</h1>
      <Outlet />
    </div>
  );
}
```

Each blog item will now have this static heading title and its markdown rendered inside the outlet!

Resulting in the following:

![Markdown layout in Remix](https://cdn.hashnode.com/res/hashnode/image/upload/v1651590094486/DKbcexiiZ.png)

The cool part is that this layout can be as extended as you want, and it will be used by all markdown files in the blog directory!

If you are interested, I uploaded the code for this article on this [GitHub repo](https://github.com/rebelchris/remix-starter/tree/blog-layout).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Migration CSS modules to vanilla-extract
Tags: vanillaextract, css, cssmodules, migration
Published: 2022-05-13 04:48:34

## Introduction
We have created a tool to generate typescript files for vanilla-extract, a Zero-runtime Stylesheets, from css (scss/sass) style definitions.
https://github.com/activeguild/css-to-vanilla-extract

The tools described here can be tried in the [playground](https://css-to-vanilla-extract.netlify.app/).

The following APIs are covered.
- [styling-api/#style](https://vanilla-extract.style/documentation/styling-api/#style)
- [styling-api/#globalstyle](https://vanilla-extract.style/documentation/styling-api/#globalstyle)
- [styling-api/#globalfontface](https://vanilla-extract.style/documentation/styling-api/#globalfontface)
- [styling-api/#globalkeyframes](https://vanilla-extract.style/documentation/styling-api/#globalkeyframes)

## Motivation
- Convert style definitions received from designers without any errors.
- Cost-effective migration of existing projects using css modules.

## e.g.
### input
```
.foo {
  background-color: blue;
}
@media (min-width: 1200px) {
  .foo {
    font-size: 5rem;
    color: red;
  }
}
```

### output
```
import { style } from "@vanilla-extract/css";
export const foo = style({
  backgroundColor: "blue",
  "@media": {
    "(min-width: 1200px)": {
      color: "red",
      fontSize: "5rem",
    },
  },
});
```

This tool was created on a trial basis.I think css modules and other css can be converted with little or no problem.
Mock Trade - Appwrite hackathon
Tags: appwritehack
Published: 2022-05-13 03:57:41

### Overview of My Submission
Mock Trade is a fully-responsive, fullstack web app that allows users to trade mock stocks. It uses appwrites as its primary backend.

### Submission Category: 
Web2 Wizards

### Link to Code
[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

[LIVE DEMO-Mock Trade](https://21-appwrite-sim.vercel.app/)
[GITHUB REPO](https://github.com/PatrickValera/21_Appwrite_sim)
###Technologies and libraries used
- HTML/CSS/Javascript
- React
- Appwrite
- Material UI

### App Preview (video/image)
{% youtube IkSZWVCbv_g %}

#### Market Page
![Front Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co87771ira1watifasby.jpg)
#### Stock Action Panel
![Action Panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qufx7q80dzmhuelsigwz.jpg)
#### Leaderboard page
![Leaderboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0jyn6o3shpx4thp2rab.jpg)
 
 


#### Final Note
Thanks for checking out my project.
Thank you to all staffs for this hackathon <3
Load More Data in Laravel Using Ajax jQuery
Tags: laravel, javascript, php, jquery
Published: 2022-05-13 03:48:35

In this article, we will see the example of load more data in laravel using ajax jquery. Many websites have huge content, when you scroll down the page for more content at that time it will take some time to load more data. So, here we will auto load more data on page scroll using ajax.

So, let's see laravel 8 auto load more data on page scroll with ajax, auto load more data on page scroll, load more data on page scroll in laravel 8, ajax jquery load more data in laravel 8 

Many times you need to load more data on the infinity page scroll in laravel. So, I will give you an example of ajax jquery loading more data in laravel.

```
Step 1 : Install Laravel 8

Step 2 : Create Model and Migration

Step 3 : Add Route

Step 4 : Create Controller

Step 5 : Create Blade
```

---

> **_[Read More : Load More Data in Laravel Using Ajax jQuery](https://techsolutionstuff.com/post/load-more-data-in-laravel-using-ajax-jquery)_**