teleren/devto huggingface dataset:
MEAN vs. MERN vs. MEVN Stacks ? What's the difference ?
Tags: webdev, codenewbie, beginners, javascript
Published: 2020-12-06 03:45:40

### __Full stack development__

First, we have to know that those stacks are **Full stacks** so you do the Frontend and the Backend.
They are all JavaScript!
The Frontend and the Backend will be done through JavaScript Frameworks.

***

### __Technologies you should know before the comparison__

* __JavaScript:__ 
It's a programming (scripting) language used both on the client-side and server-side that allows you to make web pages interactive. 

* __Node.js:__
It's a runtime environment that executes JavaScript outside the browser as writing Backend code.

* __Express.js:__ It is a back end web application framework for Node. It is designed for building web applications and APIs.

* __MongoDB:__ It's noSQL (Json-like) database .

* __Angular:__ It is a client side JavaScript framework was developed by Google.

* __React:__ It is a client side JavaScript framework was developed by Facebook.

* __Vue:__ It is a client side JavaScript framework was developed by a single person Evan You who was working in Google.

***

### What is the difference between them ?

In those stacks there are common letters which are M - E - N .
* **M**: MongoDB
* **E**: Express.js
* **N**: Node.js

Those are the Backend technologies be while the Frontend technologies are A - R - V for MEAN - MERN - MEVN .

Then Obviously,
* **A**: Angular
* **R**: React
* **V**: Vue

So, choose the stack that you love but before you have to learn the basics if web development which are:
* HTML5
* CSS3
* JavaScript
* JS Dom and Bom
* ES6 Syntax
* SASS (optional but preferred)
* CSS Frameworks ( Bootstrap, Tailwind CSS, etc...)

---
[**Subscribe to my newsletter**](https://amrelmohamady.hashnode.dev/)


You can also buy me a coffee that would help :)
<a href="https://www.buymeacoffee.com/amrelmohamady" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
Splitting a Number into Individual Digits Python
Tags: python, beginners
Published: 2020-12-06 03:30:01

If you are looking only for the code then here it is

```python
number = 12345
numList = [int(digit) for digit in str(number)]
```

`numList` in this example would return
`[1, 2, 3, 4, 5]`

The best way to look at all the individual numbers in a number is to use list comprehension by first turning the number into a string. This way you will be able to iterate over the string as each individual character. Then finally turn the individual characters into a number. This can all be done in side of a list.

To breakdown the above code, to make it look nicer:
```python
for digit in str(number):
    int(digit)
```
This block of code returns a number, so if you put it around square brackets, then it will become a list.
Then you would be able to iterate over the list and do as you please.
Advent of Code 2020: Python Solution Day 4
Tags: adventofcode, python, algorithms, challenge
Published: 2020-12-06 03:08:04

This challenge is more harder than previous ones. Many people are using Regex but I am not comfortable with it so I am going after traditional way. Again the input is saved as `day4.txt` on same directory as the Jupyter Notebook is. My entire codes is on [this repository](https://github.com/q-viper/Adevent-Of-Code-2020). 
**Solution of Challenge 1**
```python
with open("day4.txt") as fp:
    lines = [f.strip() for f in fp]
    
#1
curr_passport = {}
all_passports = []
valid_passports = []
all_keys = ["byr", "iyr", "eyr", "hgt", "hcl", "ecl", "pid", "cid"]
key_count = 0
for line in lines:
    if line != "":
        temp_line = line.split(" ")
        temp_dict = {item.split(":")[0]:item.split(":")[1] for item in temp_line}
        
        for key, value in temp_dict.items():
            curr_passport[key] = value
            
    else:
        if all(field in curr_passport for field in req_keys):
            valid_passports.append(curr_passport)
        curr_passport = {}
        all_passports.append(curr_passport)
all_passports.append(curr_passport)

len(all_passports), len(valid_passports)        
```

**Solution of Challenge 2**
```python
import re
ecl = "amb blu brn gry grn hzl oth".split(" ")
new_valid_passports = []
for passport in valid_passports:
    valid_keys = 0
    for key, value in passport.items():
        #print(passport)
        if key == "byr":
            if 1920<=int(value)<=2002:
                valid_keys+=1
        elif key == "iyr":
            if 2010<=int(value)<=2020:
                valid_keys+=1
        elif key == "eyr":
            if 2020<=int(value)<=2030:
                valid_keys+=1
        elif key == "hgt":
            if value[-2:] == "cm" and 150<=int(value[:-2])<=193:
                valid_keys+=1
            elif value[-2:] == "in" and 59<=int(value[:-2])<=76:
                valid_keys+=1
        elif key == "hcl":
            if re.match('^#[0-9a-f]{6}$', value):
                valid_keys+=1
        elif key == "ecl" and value in ecl:
            valid_keys+=1
        elif key == "pid":
            if re.match('^[0-9]{9}$', value):
                valid_keys+=1
    if valid_keys==len(all_keys)-1:
        new_valid_passports.append(passport)
    valid_keys=0
            
len(new_valid_passports)
```

I write blogs about Computer Vision projects on my GitHub page [q-viper.github.io](https://q-viper.github.io) and if you got some time please share yours too.
Advent of Code 2020: Python Solution Day 3
Tags: adventofcode, algorithms, python
Published: 2020-12-06 02:57:54

This is Day 3 of the challenge and it is more challenging.
The challenge can be found [here](https://adventofcode.com/2020/day/3).
Also there is a Jupyter Notebook along with my input on this [GitHub Repository](https://github.com/q-viper/Adevent-Of-Code-2020).
My solution on Python is given below.

```python
# 1
with open("day3.txt", 'r') as f:
    lines=f.readlines()

curr_x = 0

slope_x = 3
slope_y=1

trees = 0
for curr_y, each_line in enumerate(lines):
    if each_line[curr_x] == "#":
        trees+=1
    curr_x = (curr_x + slope_x) % len(each_line[:-1])
print(f"Solution 1:{trees}")

#2
slopes = [(1,1), (3,1), (5,1), (7,1), (1,2)]
mult_trees=1
for slope in slopes:
    print("Slope: ", slope)
    slope_x, slope_y=slope
    trees = 0
    curr_x = 0
    for curr_y, each_line in enumerate(lines):
        if curr_y%slope_y == 0:

            if each_line[curr_x] == "#":
                trees+=1
            curr_x = (curr_x + slope_x) % len(each_line[:-1])
    print("Trees on this slope: ", trees)
    mult_trees*=trees
print("Solution 2: ", mult_trees)

```
I write blogs about Computer Vision projects on my GitHub page [q-viper.github.io](https://q-viper.github.io) and if you got some time please share yours too.
Advent of Code 2020: Python Solution Day 2
Tags: adventofcode, python, programming, algorithms
Published: 2020-12-06 02:52:27

This challenge can be found at [this link](https://adventofcode.com/2020/day/2).

My solution is:

```python
with open("day2.txt", "r") as f:
    inp=f.readlines()

linp = [i.split("\n")[0] for i in inp]
# print(linp)
valid_2 = []
valid_1 = []
for lin in linp:
    key, value = lin.split(": ")
    char = key.split(" ")[1]
    # print(char, key.split(" ")[0].split("-"))
    n1, n2 = key.split(" ")[0].split("-")
    n1, n2 = int(n1)-1, int(n2)-1
    
    if n1+1<=value.count(char)<=n2+1:
        valid_1.append(lin)
    
    c = 0
    try:

        if value[int(n1)] == char:
            c+=1
        if value[int(n2)] == char:
            c+=1
        if c == 1:
            valid_2.append(lin)
    except:
        pass
print(f" Solution 1: {len(valid_1)}\nSolution 2:{len(valid_2)}")
```

I write blogs about Computer Vision projects on my GitHub page [q-viper.github.io](https://q-viper.github.io) and if you got some time please share yours too.
Advent of Code 2020: Python Solution Day 1
Tags: adventofcode, algorithms, python, programming
Published: 2020-12-06 02:44:53

This is my first ever challenge and I was amazed by the challenges. I am proficient in Python so all codes will be on Python3.

Day 1 seems to be easier to tackle. 
I am saving my input as `day1.txt` on same directory as my Jupyter Notebook is.

```python
with open("day1.txt", "r") as fp:
    num = fp.readlines()
# print(num)
num = [int(i.split("\n")[0]) for i in num]
print("Solution: 1\n")
# solution 1
for i in num:
    if 2020-i in num:
        print(i, 2020-i, i*(2020-i))

print("Solution: 2\n")        
# solution 2
for i in num:
    for j in num:
        if (2020-i - j) in num:
            print(2020-i-j, i, j)
```
Result of above code is given below:
```
Solution: 1

933 1087 1014171
1087 933 1014171

Solution: 2

566 59 1395
1395 59 566
566 1395 59
59 1395 566
1395 566 59
59 566 1395
```

I write blogs about Computer Vision projects on my GitHub page [q-viper.github.io](https://q-viper.github.io) and if you got some time please share yours too.
How to create a basic structure for a Next JS App, manually or using a boilerplate tool. 
Published: 2020-12-06 02:36:24

Next.js is a wonderful production framework for React. This framework has two ways to create a Next Js App.  The first way is using a boilerplate from Next Js APP, to use this tool, perform the following steps.

Before, you should have installed, one tool for package management such as npm or yarn.

#Create next-app Tool.


1.Yarn 

```javascript 
   yarn create next-app
```
OR 
1.Npm 

 ```javascript 
   npm create next-app
```

2. NPM OR YARN.
The assistant should ask your app name, in this case, write a name for your app and press the KEY ENTER. 

3. Now your app structure was created, enter to App directory.  

cd my-app

4. Enjoy! Now you can run the application, create a build, and finally run the application in production mode. 

// Run Dev Server

```javascript 
yarn dev 
```

```javascript 
yarn build // Create a build
```

```javascript 
yarn start // run server in production mode after a build
```
You can use the same commands with npm, only replace the word "yarn" for "npm"

# Manually. 

To create the structure app manually perform the next steps: 

1. Make a directory with the name of your application. 
In the console write: 

```javascript
mkdir next-js-app
```

2. Enter to Directory. In the console write: cd next-js-app

3. NPM: npm install next react react-dom OR Yarn write: 
yarn add next  react react-dom

```javascript
npm install next react react-dom
```
OR 

```javascript
yarn add next  react react-dom
```
4. Edit the file Package.Json, and add in the scripts section, the next lines. 

```javascript
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},
```

5. Now, you need a page directory: In the root directory, create a directory named pages. 
Example: mkdir pages 
```javascript
mkdir pages 
```


Enjoy, now you can run the app. for example in dev mode. 

```javascript
npm run dev. 

```
OSD600 - Release 0.4 First PR - Front end Glory
Published: 2020-12-06 02:33:11

Here at Seneca OSD600 is an Open Source development class where we learn how to contribute to open source and manage our own projects. For [Release 0.4](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/release-0.4) we are required to contribute 3 PR's (pull request).  I found this [issue](https://github.com/Seneca-CDOT/telescope/issues/1410) on [telescope](https://github.com/Seneca-CDOT/telescope).  The problem was that there was a wrong function name in a file.  I changed the function name and created my [PR](). Right then discovered two errors, one of them was in another file.  That error became a new issue on telescope as it was unrelated to what I was working on. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/znb0a6m25xcbksam3e2d.png)

At first it was suggested that I change onScroll to onClick, however in this error the onScroll prop needed to be added in the propTypes. I added the onScroll to the propTypes and waited for the approvals.  Horay, approvals came in and my changes were [merged](https://github.com/Seneca-CDOT/telescope/commit/a1b234c9b).

Somehow in this process, I became more familiar with the telescope project and how it works. Even recently I asked a friend to share what he was tried to do for another class.  I think for the first time I looked at a new project I understood what they were trying to accomplish. Of course this one was much smaller then telescope. I feel like I made progress!
Done with Labs, Now last left. Exams week is here. Too Much, but it's ok.
Tags: opensource
Published: 2020-12-06 02:28:09

Hello there everyone. Welcome back again to my blogpost on my Journey to a professional programmer. This week was super busy (well duh). Mainly due to the because of final exams and bombardment of assignments from all courses. But, managed to kick most (all) out of the park. Now it's only studies. Hope I can cover all the revision in 1 day. Fingers crossed. Anyways I want to update yall on my last Lab on open source development.

This lab was not your usual lab. Yep, its finally released. And yea, you can literally use it right now. I'll tell more about this later on in the blog post. But first, I wanted to tell how I ended up with a fully released package in npm (the real one, you can see my name there uhuhuhuhuhuhuhu). I know it is not a big deal for most, but for me it's a huge one. seeing my name up there is one of my achievements. haha, I know most people has there name on it, but I don't mind being one of them. I want to thank my professor David who taught us this course. I know I am not great of a student, was not always on time with my coursework, but thank you for cutting less marks and giving me feedback on everything. Learned tons this semester, specially with open source. So, thank you! 

Ok, now lets talk about my release. As you guys know it is a CLI program that finds broken links for you. It can take anything like txt files, html, or even single links. It will give you a result. If its working and good, it will show up as green, and red ones for bad links. Implemented lots of thing in the program from testing to linting, lots of functionality, etc. Few random people from my course also contributed to my project. I thank them for giving some time to deal with my project. I also had few friends who helped me this semester. Want to thank them too!. Three of my friend come in my mind when I think about the word "friends". They are Tony, Devansh (Dev), and Paul. I know them since semester 1 and they are super pros compared to me. So, If I get stuck somewhere I always go for them help. I know I am suppose to go to my prof but my questions are usually 2iq questions, so don't want to take it to the prof haha and I keep the profs as my last case scenario (after more research). I want to make sure I researched everything, consulted my friends, and still don't get the answer, I go to the prof cause I know for sure ill get an answer. I'll be vey busy the following week cause of finals, but will still mass upload blog posts lol.

That's so far for now. But, keep your eyes on my blogpost cause I'll me mass uploading very very soon on my open source plans and stories. Till then thank you for reading this blog post and I hope you guys stay home and stay safe. I'll be linking my "npm" package below, please do check it out. Thank you!.

Oh and thank you again David, Tony, Dev, and Paul. You guys made programming a lot more fun and enjoyable!
Becoming A Developer: Did You Make It? Will I Make It?
Tags: beginners, startup, codenewbie, programming
Published: 2020-12-06 02:15:40

###**I**t all comes down to applying the knowledge you acquire right? You can absorb so much but at the same time if you don't use it then what's the point?###

**R**ight now I'm going through a coding bootcamp and it truly has been great so far, definitely challenging everyday and time consuming. In my opinion I have been keeping up pretty good, having my ups and downs like everyone else but when you are in one of the downs... Man let me tell you it is not good.

**P**ersonally the worst part for me is balancing the bootcamp with the rest of my life, finding the energy and time to complete the task at hand gets tough and tougher. It's true when you're parent's tell you to enjoy being in high school because after that it becomes real.

**M**y situation is where work is very stressful and has nothing to do with technology so the only exposure I get to code is the one I put myself into, this makes it hard because in my own time I enjoy doing other things to relax and instead I am supposed to constantly engage into code even if I don't feel like it just because it is the only way to go. Here comes the exhaustion and loose of will to keep pushing.

**I** think that it is very important to become part of this awesome community and learn from everyone, learn from their journey, their mistakes and help each other out. This is one of my biggest motivations from all of this.

**S**o my question is... to whoever is out there. What is your trick? How do you do it? Did you make it? 

**T**hank you for reading and looking forward to your input
มือใหม่ backend developer มักลืมว่าโปรแกรมอาจจะรันหลาย node
Tags: programming
Published: 2020-12-06 01:54:33

สิ่งที่คนเขียน Backend (ไม่ว่าจะ web server side ทั่วไปหรือจะทำ API) มือใหม่มักพลาดคือลืมไปว่าเวลาโค้ดเราต้องทำงานจริงๆ มันไม่ได้ถูกรันไว้แค่ 1 node มันจะถูกรันไว้หลายๆ node แล้วแบ่งภาระกันโดยมี Load Balancer ช่วยกระจาย request ให้

พอลืมนึกถึงตรงนี้ จะทำให้บางครั้งเราออกแบบพลาด เช่น อยากทำ cache บางอย่างเพื่อจะได้ทำงานได้เร็วขึ้น ก็จะไปจำไว้ใน global memory สักที่
แม้จะเขียนจัดการ lock อย่างดีไม่ให้แต่ละ thread แย่งกันใช้งาน แต่พอลืมนึงว่ามันรันหลาย node พร้อมกัน ก็จะลืมคิดว่าแล้วจะ reset cache หลายเครื่องพร้อมกันยังไงไปนั่นเอง

จริงๆแล้วก็ทำได้หลายท่าในการ clear cache หลายๆ node แต่ถ้าเรานึกเรื่องนี้ไว้แต่แรก อาจจะไปตกที่ ไม่ต้องเขียนเรื่อง cache ใน memory เองสิ ไปใช้ service อื่นเช่นเก็บลง Redis อะไรแบบนี้ที่มันเขียนจัดการ cluster หลายๆ node ของ Redis เอาไว้แล้ว เป็นต้น
OSD600 Release 0.4 Second PR - Search Button revisited
Published: 2020-12-06 01:36:44

For anyone reading this for the first time, here at Seneca OSD600 is an Open Source development class where we learn how to contribute to open source and manage our own projects. For [Release 0.4](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/release-0.4) we have to contribute 3 PR's (pull request). This contribution I have tried this [issue](https://github.com/Seneca-CDOT/telescope/issues/1225) before and failed. You can read about it on ["Tenacious"](https://dev.to/strawberries73/osd600-release-0-3-tenacious-2fmn).  

This time I read, I studied and then studied some more.  I started practicing. I am determined to learn more about CSS.  What was so confusing about this process is that I didn't know the best way to do this.  There is several approaches but what one works best without disrupting the flow of the telescope search. The biggest struggle I had was that when I was able to get the search button in the right place, it was completely hidden behind the search bar.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dkd1imf7qx6nw543w6jq.png)

I was just about to give up hope but then the solution came into view. I had to blink.  I couldn't believe it.... there it was!  I laughed(almost crying).  My teenagers probably thought I'd really gone loony.  School killed what was left of my sanity that they didn't take.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/szn57g8wvjdqfj6ew2bm.png)

My [PR](https://github.com/Seneca-CDOT/telescope/pull/1474) was created.  Alas! I was given two approvals and my contribution was [merged](https://github.com/Seneca-CDOT/telescope/commit/9412aa4).

Wise words from my professor "it's important to learn how to fail at technical challenges for the right reasons, and in the right way".  Whoah!  I know this already but lost site of this in my journey through school so focused and absorbed into doing my best.  As they used to say when I was a kid "I gave it 120%".  I swear sometimes I was giving 150%! A reminder that as important it is to work hard, it is important not to neglect one self. Thank you to all whom supported me through this contribution and through my program at Seneca.
Trivial Media Queries with Styled Components in React
Tags: react, css
Published: 2020-12-06 00:46:24

The sometimes overlooked [`css` ](https://styled-components.com/docs/api#css)tag in [styled-components](https://styled-components.com/) can give you a hand in writing media queries in your styles.

Suppose, for instance you have the following breakpoints (in px): 

```javascript
let theme = {
    breakpoints: {
        mobile: { value: 450 },
        tablet: { value: 700 },
        desktop: { value: 900 }
      }
}
```
You may be setting up a reset for your app like so:

```javascript
const GlobalStyle = createGlobalStyle`
*, *:before, *:after{
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}

html{
  box-sizing: border-box;
  
  /* set default font size i.e. 1rem to 62.5% of 16px=10px */
  font-size: 62.5%; 
}
`
```

But maybe you want that default font size to change by your breakpoints!

You could write ordinary media queries throughout your app, but that's a bit clunky eh?

```css
@media only screen and (max-width: ${theme.breakpoints[bp].value / 16}em) {
      ${css(...args)}
    }
```

That's where `css` can come in...

```javascript
import { css } from "styled-components";

theme.media = {};
Object.keys(theme.breakpoints).map(bp => {
  theme.media[bp] = (...args) => css`
    @media only screen and (max-width: ${theme.breakpoints[bp].value / 16}em) {
      ${css(...args)}
    }
  `;
});

theme.media.min = {};
Object.keys(theme.breakpoints).map(bp => {
  theme.media.min[bp] = (...args) => css`
    @media only screen and (min-width: ${theme.breakpoints[bp].value / 16}em) {
      ${css(...args)}
    }
  `;
});

```

## What's going on here?

As the [docs](https://styled-components.com/docs/api#css) suggest, the `css` function isn't so dissimilar to styled-components' usual `styled.tag_method` in that it will interpolate for you (the usual `${props=>props.blah}`). What we're doing here is creating our own tags (the `theme.media.breakpoint_name`s + `theme.media.min.breakpoint_name`s for max and min queries respectively) that we can use to generate css that _**will be interpolated in the usual  `styled.tag_method`**_!

### Now make the font size responsive:

```javascript

const GlobalStyle = createGlobalStyle`
*, *:before, *:after{
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}

html{
  box-sizing: border-box;
  
  font-size: 62.5%; 
  ${theme.media.tablet`
    font-size: 50%;`}
  ${theme.media.mobile`
      font-size: 40%;`}
}
`
```

## Easy 😎


_Note: if theme is not in scope you'll need to use a callback e.g. `props=>props.theme.media.tablet` through which styled components will hydrate props with your theme given it through context_

___

### Thanks for reading. Think this is a useful pattern 🤓? Let me know! Think it's junk? Let me know what's better 💡  Questions? Just Ask ⬇️

_You can see this post on [my personal site](https://www.ouellet.dev/#/blog/6) as well._