teleren/devto huggingface dataset:
Super simple imports with Webpack resolve
Tags: javascript, beginners, webdev, webpack
Published: 2021-05-08 11:16:12

[Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) were, without a dought, one of the best improvements that came with ES6. When combined with Webpack, it allows us to write code in a more developer-friendly way. But file referencing when importing can sometimes become repetitive, error-prone, and hard to look at. Luckily Webpack has us covered with the right solution that is super easy to configure.

## Webpack resolve
[Resolve](https://webpack.js.org/concepts/module-resolution/) is a Webpack library that helps locate imported modules. To configure it, add the code snippet below to the config file.

**webpack.config.js**
```js
module.exports = {
  resolve: {
    // configuration options
  },
};
```
Resolve library allows us to resolve imports in two ways: with `modules` or `alias`.

## Modules
Modules resolve imports by searching for them in the specified directories. Often this is used to resolve node modules.

**webpack.config.js**
```js
resolve: {
  modules: ['node_modules']
}
```

This configuration allows us to replace this:

```js
import Module from '../../../../node_modules/module';
```

with this:

```js
import Module from 'module';
```
Using `resolve.modules`, this is all you have to do to make imports work since it will not cause issues with other config files.

## Alias
Alias resolves imports by replacing the original path with the custom one.

**webpack.config.js**
```js
resolve: {
  alias: {
    @components: path.resolve(__dirname, 'components/'),
    @partials: path.resolve(__dirname, 'partials/'),
  },
}
```

This allows us to change this:

```js
import Component from '../../../../components/component';
import Part from '../../../../partislas/part';
```

to this:

```js
import Component from '@components/component';
import Part from '@partials/part';
```

*Note that `__dirname` points to the location of the `webpack.config.js` file.*


### ESLint adjustment
Using an alias you might get an ESLint error saying the path can’t be resolved. To fix that you can use [eslint-import-resolver-webpack](https://www.npmjs.com/package/eslint-import-resolver-webpack).

To configure it you can add this line of code to the `.eslintrc.yml` file:

```js
settings:
  import/resolver: webpack
```
This setting will work if a `webpack.config.js` is in the same directory as the `eslintrc.yml` file. Otherwise, see other settings options.

## Summary
Configuring Webpack can be overwhelming with all the available options but luckily, this library is very simple to understand and configure. It helped me to write cleaner imports, and I am sure you will find it as useful as I have.
10 Javascript interview questions that will help you taking preparation
Published: 2021-05-08 11:16:02

1. What is the difference between null and undefined?
Answer: Null means to cancel out something or not the existence of something that means if we set a variable null, we can say that there is nothing in the variable.
But undefined can happen in many ways if we want to access a parameter that is not passed then we get undefined if we just declare a variable without values then it will show undefined if we want to access a property of an object which is not present there that will also give us undefined.
this will be enough to explore that you know something about that question.

2. Difference between double equal(==) and triple equal(===)?
Answer: Triple equal is very strict it will show the type of variable that is compared but double equal is not so strict it will convert the variable into the same type and then check. For example:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4vxmjxg601486le3n0a.JPG)
Project Euler 002
Tags: projecteuler, programming, challenge
Published: 2021-05-08 11:15:34

# Hello DEV

Project Euler is a series of challenging mathematical/computer programming problems that I like to start. I'm sure there will be a lot to learn for me, and I would like to share my solutions here in DEV.

❓ Here is problem 002:

> Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:
>
> 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...
>
> By considering the terms in the Fibonacci sequence whose values do not exceed four million, find the sum of the even-valued terms.

💡 For solving this problem, we can use a combination of the Modulo operation and also Addition.

❗ The first solution you might think of when working with Fibonacci sequence or other similar concepts in programming is for sure,
the recursive approach. but we always need to remember that these functions may be called a thousand times and this simply means
you will face one of those `Maximum call stack size exceeded` like errors!

This happens because of 💀 the space complexity of these algorithms ([Have a 👀 at this article on this topic](https://syedtousifahmed.medium.com/fibonacci-iterative-vs-recursive)), so I use the Iterative approach instead here.

This is the formula for the Fibonacci sequence:

```
fib(n) = fib(n-1) + fib(n-2) → for n > 1
fib(n) = 1 → for n = 0, 1
```

we can suppose we have these variables:

```python
MAX = 4000000

first_number = 1
second_number = 1

sum = 0
```

then we calculate the answer by calculating every next term by its previous terms that we simply store in 2 different variables!
and then filtering out the even numbers and summing them all up.

💻 So, my solution in Python is:

```python
while second_number <= MAX:
    temp = second_number
    second_number += first_number
    first_number = temp

    if second_number % 2 == 0:
        sum += second_number
print(sum)
```

This might not be the best answer to this problem, but it only calculates 32 numbers (odd numbers also included) for this problem,
which is much better than the recursive approach. clearly if you be able to find a way not calculating the odd numbers at all! that
will be a perfect improvement, Can't wait to see if you have any ideas about this.

✅ The answer to this problem is **`4613732`**.

## **Thank You** ❤️

I wish my posts to be useful to anyone new to the world of programming or anybody curious 🧐!
If you find the content useful to you, please comment your thoughts, I would love to learn from you all.

Thank you for your loving directions.
I Built a VSCode Inspired Developer Portfolio
Tags: showdev, webdev, react, nextjs
Published: 2021-05-08 11:06:26

## The Idea & Inspiration

Truth be told, I've lost count of the number of amazing portfolio websites I've visited and been in awe of. I would try to take some inspiration from them and recreate them in my own way for my portfolio. However, after working on it for a few hours, I would come across a different design or idea and hop onto that instead. 

Due to this cycle, I have over 5-6 incomplete portfolio websites on my laptop, each having a different design. I love the creativity of some websites but I just can't make up my mind and stick to one design. So, what caught my eye this time? This amazing [Ubuntu-themed portfolio website](https://vivek9patel.github.io/).

I liked the idea so I thought of what tools do developers use. And what could be a better choice than the text editor most of us write code on: Visual Studio Code.

## VSCode-Themed Portfolio

If you're interested in exploring the project yourself, there's the link to it: http://vscode-portfolio.vercel.app/

{% github itsnitinr/vscode-portfolio %}

This is a responsive and server-side rendered portfolio website built with Next.js, one of the technologies that I mentioned in my "Technologies I'll be Learning in 2021" post.

{% post https://dev.to/itsnitinr/technologies-that-i-ll-be-learning-in-2021-as-a-mern-stack-developer-with-resources-4pci %}

Right from the layout to appearance, I'm aiming to build a portfolio website that looks and feels like Visual Studio Code. This includes adding some cool stuff like themes, extensions, an interactive terminal, and probably more. 

## Can You Help Me?

As you might've noticed, most of the pages are still empty because I wanted some feedback on the layout and VSCode aspects of the design. What type of design would you like to see for the other pages? What other features would you like to see in this project? I would highly appreciate if you leave a feedback, criticism or suggestion of any kind. 

The best part of the project is that since the other pages are yet to be built, you can fork the project and implement your own design which can help you stand out from the original project.

If you're interested in contributing, the project is open-source and I would appreciate any sort of help. Otherwise, you can share it or star the repo, if you want to of course.
Some useful array operations in MongoDB
Tags: mongodb
Published: 2021-05-08 10:34:41

# Data Schema
```js
{ "_id" : ObjectId("60966503a06708c0a9d05b51"), "item" : "journal", "qty" : 25, "tags" : [ "blank", "red" ], "dim_cm" : [ 14, 21 ] }
{ "_id" : ObjectId("60966503a06708c0a9d05b52"), "item" : "notebook", "qty" : 50, "tags" : [ "red", "blank" ], "dim_cm" : [ 14, 21 ] }
{ "_id" : ObjectId("60966503a06708c0a9d05b53"), "item" : "paper", "qty" : 100, "tags" : [ "red", "blank", "plain" ], "dim_cm" : [ 14, 21 ] }
{ "_id" : ObjectId("60966503a06708c0a9d05b54"), "item" : "planner", "qty" : 75, "tags" : [ "blank", "red" ], "dim_cm" : [ 22.85, 30 ] }
{ "_id" : ObjectId("60966503a06708c0a9d05b55"), "item" : "postcard", "qty" : 45, "tags" : [ "blue" ], "dim_cm" : [ 10, 15.25 ] }
```
## Query
### 1 - Fine by order
Suppose you would like to find the item which contains `blank` and `red` in the specified order, then you can write the queries like below.
```js
db.items.find({tags:["blank","red"]})

// output
{ "_id" : ObjectId("60966503a06708c0a9d05b51"), "item" : "journal", "qty" : 25, "tags" : [ "blank", "red" ], "dim_cm" : [ 14, 21 ] }
{ "_id" : ObjectId("60966503a06708c0a9d05b54"), "item" : "planner", "qty" : 75, "tags" : [ "blank", "red" ], "dim_cm" : [ 22.85, 30 ] }
```
> Note: Order of the query matters
If you have specified `[red,blank]` then you'll get only `[red,blank]` not `[blank,red]`

### 2 - Find without order
If you don't want the exact order then you can use `$all` operator of MongoDB.

```js
db.items.find({tags:{$all:["red"]}})

// output
{ "_id" : ObjectId("60966503a06708c0a9d05b51"), "item" : "journal", "qty" : 25, "tags" : [ "blank", "red" ], "dim_cm" : [ 14, 21 ] }
{ "_id" : ObjectId("60966503a06708c0a9d05b52"), "item" : "notebook", "qty" : 50, "tags" : [ "red", "blank" ], "dim_cm" : [ 14, 21 ] }
{ "_id" : ObjectId("60966503a06708c0a9d05b53"), "item" : "paper", "qty" : 100, "tags" : [ "red", "blank", "plain" ], "dim_cm" : [ 14, 21 ] }
{ "_id" : ObjectId("60966503a06708c0a9d05b54"), "item" : "planner", "qty" : 75, "tags" : [ "blank", "red" ], "dim_cm" : [ 22.85, 30 ] }
```

### 3 - Check for single element
You can directly provide string in the query parameter.
```js
 db.items.find({tags:"red"})
```
Find all items which contain `red` as an element, anywhere in the array.

### 3 - Check for single (Conditionally)
You can provide operators for the conditionality check
```js
db.items.find({dim_cm:{$gt:21,$lt:50}})
```
The above query will find all items, which has any element inside `dim_cm` array which is less than 50 and greater than 21.

## Explore
You can explore more here https://docs.mongodb.com/manual/tutorial/query-arrays/


# Thanku
Challenge: Write a true quine
Tags: challenge, javascript
Published: 2021-05-08 10:16:12

By a true quine I mean a real true quine. Maybe the wikipedia article of quine will help:

{% wikipedia https://en.wikipedia.org/wiki/Quine_(computing) %}

So no evals or reading the source like this:
```javascript
function quine() { console.log(quine.toString()+" quine();") } quine();
```

Can you do it? 

{% details If you need a hint %} The wikipedia article contains a Java Quine {% enddetails %}
Top 10 JavaScript Interview Questions And Answers.
Published: 2021-05-08 08:51:19


## 1. Truthy & Falsy Values
When a value is counted in the context of Boolean then which values show true we consider them as truthy and which show false we consider them as falsy value there are some example of falsy value (false, 0, -0, "", undefined, NaN)


## 2. Null Vs Undefined
When we define a variable but don't assign any value in it then javascript shows us undefined on the other hand, Null is assigned null means empty and explicitly means nothing
```
var abc;
console.log(abc);
// undefined

var xyz = null;
console.log(xyz);
// null
```

## 3. Double Equals (==) vs Triple Equals (===)
Double Equals (==) check only value. It converts the type of value to match each other. on the other hand, Triple Equals (===) match both value and type.
```
const num = 1234 
const stringNum = '1234'  

console.log(num == stringNum) //true
console.log(num === stringNum)  //false
```

## 4. Have a look at the difference between bind, call, apply
**apply():** method call a function and pass all the arguments in a array
**call():** method passes all the arguments with comma
**bind():** returns a new function, allowing you to pass in an array and any number of arguments.

##5. How JS code executes
Everything in JavaScript happens inside an "Execution Context”. When a code stared execution the execution context is created. 
first of all Creation Phase or Memory Creation & after Code Execution Phase. In Creation Phase, JS create global variable for all diclared variable & after Execution Phase JS follow Call stack  system

##6. What is an API
Full form of API is Application Programming Interface. API allow two application to communicate  each other. API delivers our request to the provider & provider response back to us.

##7. Reverse a string
To reverse a string we will use three method these are split(), reverse(),join()

```
function reverseString(str) {
    // Step 1. Use the split() method to return a new array
    var splitString = str.split(""); // var splitString = "hello".split("");
    // ["h", "e", "l", "l", "o"]
 
    // Step 2. Use the reverse() method to reverse the new created array
    var reverseArray = splitString.reverse(); // var reverseArray = ["h", "e", "l", "l", "o"].reverse();
    // ["o", "l", "l", "e", "h"]
 
    // Step 3. Use the join() method to join all elements of the array into a string
    var joinArray = reverseArray.join(""); // var joinArray = ["o", "l", "l", "e", "h"].join("");
    // "olleh"
    
    //Step 4. Return the reversed string
    return joinArray; // "olleh"
}
 
reverseString("hello");
```
##8. Count the number of words in a string
```
var speech = "I am Rafi"
var count =0;
for(var i = 0; i< speech.length; i++){
    var char = speech[i];
    if(char === " "){
   count ++
  }
}
// expected count is 3
```

## 9. is comming soon
Cool syntax #1 | Optional chaining
Tags: javascript, tips, beginners, syntax
Published: 2021-05-08 10:12:36

Welcome to the first post of the *Cool Syntax* series! I intend to publish a post, from time to time, on how to write clean JavaScript code like a pro!

The first text is about **optional chaining**. A syntactic sugar that makes reading content of an object much shorter and simpler. Let me show it to you. 

Take a look at this array of objects. 
```javascript
const art = [
    {
        type: "paining",
        about: {
            name: "The starry night",
            author: "Vincent van Gogh",
            year: "1889",
            medium: "Oil on canvas",
        },
        dimensions: {
            width: "92.1",
            height: "73.7",
        },
    },
    {
        type: "sculpture",
        about: {
            name: "David",
            author: "Michelangelo",
        },
        dimensions: {
            width: "517",
            height: "199",
        },
    },
    {
        type: "photography",
        about: {
            name: "Pillars of Creation (Eagle Nebula)",
            author: "Hubble Space Telescope",
        },
    },
];
```
Imagine we fetched some data, and now we have the `art` array of objects. Then, let's say we want to log `type` of each object in the `art` array.
```javascript
art.forEach(artPiece => {
    console.log(artPiece.type);
})
```
Now, let's log each `height`.
```javascript
art.forEach(artPiece => {
    console.log(artPiece.dimensions.height);
})
```
And... Yes, it will display the error message -> TypeError: Cannot read property 'height' of undefined. It's because we don't have the `dimensions` (on each object), and we're trying to get a property from it.

### SOLUTION 1 - && operator

```javascript
art.forEach(artPiece => {
    console.log(artPiece.dimensions && artPiece.dimensions.height);
})
```
### SOLUTION 2 - optional chaining
```javascript
art.forEach(artPiece => {
    console.log(artPiece?.dimensions?.height);
})
```
Imagine you have a complex object with many objects in objects...

`w && w.x && w.x.y && w.x.y.z` 
vs
`w?.x?.y?.z`

I guess you see why optional chaining is the better solution (in terms of syntax)! 

I hope you enjoyed this short syntax-related post! Check out my previous posts and stay tuned for more cool JavaScript stuff!

Cheers,
Dalibor
Swift Performance Review - WordPress Caching Plugin der Superlative?
Tags: wordpress, geschwindigkeit, swiftperformance
Published: 2021-05-08 10:48:30

---
title: Swift Performance Review - WordPress Caching Plugin der Superlative?
published: true
date: 2021-05-08 10:04:33 UTC
tags: Wordpress,geschwindigkeit,swiftperformance
canonical_url: https://j0e.org/swiftperformance-review/
---

![Swift Performance Review](https://j0e.org/wp-content/uploads/2021/05/swiftperformance-review.png)

Das Swift Performance Plugin ist ein beliebtes Add-on für WordPress, das Caching ermöglicht und bereits über 10.000 Mal heruntergeladen wurde. Es verfügt über einen Einrichtungsassistenten, mit dem du ganz einfach auswählen kannst, welche Seiten du cachen möchtest. Das mobilfreundliche Design bedeutet, dass deine Besucher auf Handys und Tablets die gecachte Version deiner Seite sehen und nicht die mobilunfreundliche Version. Es ist außerdem leichtgewichtig und verlangsamt deine Seite nicht, was wichtig ist, denn auch eine Seite, die im Cache ist, muss noch geladen werden.

[Swift Performance Review](https://j0e.org/swiftperformance-review/)
Vue.js Project to help learn English with Youglish API and OwlBot Dictionary API.
Tags: vue, javascript
Published: 2021-05-08 10:02:16

## Helpful content when memorizing English words
I tried to make a project that will help you learn English with Vue.js. It gives you to understand the most common 1000 words in English randomly according to the range you entered and with the examples used on Youtube with Youglish API. I hope it will be useful content when studying English, memorizing words.

My purpose of doing this project was when I realized that I had a hard time memorizing English words. I did this project to get a little more familiar with the words. I think hard work can be overcome with simple solutions. My english is not perfect at the moment, but I am working on it. I hope it becomes a little easier for me to learn English with this project. I did this project in English-Turkish. But you can do this project in your native language by forking.

I will share the source code url of the project. You can see how he does it from there. I used two APIs in the project. One of them is OWLBOT DICTIONARY API and the other is Youglish API. These APIs helped me a lot in the project.

## The project is as follows;

- There is the most common 1000-word json in English, and the key values in this json correspond to English-Turkish words. 
You can change the most commonly used 1000 words in your language to JSON by forking the repo.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay6hg4wn51rgbpvnzn7y.PNG)

- In the project, there are two input ranges from 0 to 1000, the user selects the desired value in these ranges and comes across the user randomly in the desired range.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szbng1fvodhacm4wt163.PNG)

- It sends the APIs we use with this word, bringing the meaning of the word, an example sentence, the place where it is used in these APIs.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/quqc76wn0hay5b4wivxm.PNG)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88rtf4gozp8vf3qvtbth.PNG)

**[Project Live](https://cihat.github.io/dictionary/)**
**[Source Code](https://github.com/cihat/dictionary)**


- Project Gif
![dictionary](https://user-images.githubusercontent.com/57585087/117534885-f3fc9180-affb-11eb-91b5-72734fc07fc4.gif)
Day 55 of 100 Days Of SwiftUi
Tags: swift, 100daysofcode
Published: 2021-05-08 09:32:57

I just completed day 55 of 100 days of swift UI. Today I worked on adding swipe to delete and a detail view to the BookWorm app. You can find the code [here](https://github.com/sanmiAde/BookWorm)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ook9vesnb6qmutknd7p8.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m10z6c8n9e4c8978jfyc.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mmgmn6cvs2brbj2usjv.png)
Why is math needed, when we have HTML+CSS?
Tags: beginners, html, css, productivity
Published: 2021-05-08 08:53:16

Hey! I've decided to make some tutorials about CSS+HTML, something like "website school", so first of all we have to answer all these questions.

###Is really web development the future?
There is no exact answer to this question. Remember, today one programming language is popular, the next day not anymore. 
According to [Codingdojo](https://www.codingdojo.com/blog/top-7-programming-languages), today the web development direction becomes more and more popular.

It can't be named as future, as
- There are other directions that still have value. If all people start coding js, who will be making for example custom software?
- That is not the right question. It can be the most popular direction, but other directions that are not really popular such as ruby have their value. That means that this direction doesn't need a lof of people, but some with strict requirements (expirience, quality of projects and etc.)

###Then, what language to start?
It is a question for you. You shouldn't start coding on js just because it is popular. One day it becomes not and you have to choose another one. Choose something you like and you are really good in. Why? Because it is your key to have always job - your individuality and your quality.

###Why do programmers need math?
More and more programmers (if I can name them so) think that programming is 
- Coding
- Language to learn

But it is
- logic
- creativity
- MATH

####Why math?
_Do you really know fast algorythms to solve some problem without math?_
No. You can find the solution, but do you really understand to make your code faster in future?

_Have your algorythms same value as a fast one?_
No. Because logic brings shorter algorythms to solve any problem.

Logic brings faster solution and better quality:
- You can deal with problems faster as you find the solution faster.
- Your code is shorter 
- Your code is structured. All variables and methods have max value. So your program works faster

Math brings you logic:
- You know fast algorithms and you know their foundation
- You know programming definitions as it is in math

Some examples:
- Recursive functions - fast function processing
- Binary Trees - Fast Walk Through Data
- Sorting algorithms - a way to save space and time

Even if you study HTML+CSS, where there are no algorithms, remember, that logic is needed everywhere and math still have value even here: you save your time.

Btw, I want to start real tutorials with tasks about HTML+CSS, moving to JS and databases.

Check my website for more information

Follow me, if it is ineresting for you!