teleren/devto huggingface dataset:
How to make a junior web developer portfolio website
Tags: beginners, codenewbie, webdev, portfolio
Published: 2020-04-21 14:04:18


{% youtube q-TRdVPtSfk %}

### Your portfolio needs to be mobile friendly! 
Design it mobile first. Mobile traffic accounts for about half of all internet traffic worldwide. So, there is a great chance your recruiter or hiring manager will look at it in mobile view. 


### Make sure you include links to other live projects, pages with live projects, and/or video snippets to live code. 
You should already have a link to your Github as well, but your future employer is going to want to see if you can launch something live. Remember, most recruiters and hiring managers will only spend a couple of minutes at most looking at your portfolio! Having live code let’s them play with the cool features you have built. If you can’t launch everything live, grab it with a (short) screen capture video. 


### Integrate code snippets OR a CSS framework is ok and encouraged! 
This shows you can integrate code into a live site. In the real dev world it’s common to incorporate snippets into a project. This also shows that you are able to work with someone else’s code!

Integrating code snippets or frameworks also ensures that your site will look great. CSS frameworks like Bootstrap or Semantic are already responsive and mobile friendly. Your portfolio will look better, it will be created faster, and you are less likely to be writing bugs by trying to create all that custom code.


### The url should be readable and custom. 
You want yourname.com. If  yourname.com isn’t available, try for .net, .io, etc. The point here is to make it professional and easy to type in. Don’t include a middle initial if it makes your name read weird. 


### Make sure any custom code is clean. 
Remove comments and get the formatting right. If your potential employer inspects your portfolio site, will they find a professional work, or a bunch of curse words and commented out notes and blocks?


### Your resume should be downloadable! 
They probably don’t have a copy. This is easy to do and it is often overlooked, AND you may get them to now look at your resume. Be sure to also link out to your LinkedIn, Blog, Github, etc, but you don’t need to link to everything under the sun! Keep it to just a few external links, so they can get a better picture of who you are.


### Lastly, QA it! 
Check all your links. Check it for typos. Check for spelling. Try to break your site. Make sure your hard work was done right!
Gmail Addon / OAuth Scopes
Tags: help
Published: 2020-04-21 13:57:19

# Hello 
### and hope you are doing well, reader of this question. 

I came up with my **very own, very first small** and simple Gmail addon that allows you to respond to multiple emails at the same time with the same text (*should have seen my face when I realise it works, even if it is just locally*). 
Like a batch respond chrome extension that was existing back in a day but just a gmail addon.

Here is how the app works under the hood and what scopes it is using. 

*gmail.send* - to send emails on user behalf (sensitive scope, but not restricted)
*gmail.labels* - find email threads based on certain label, that we will respond to with a loop (permitted scope)
•gmail.addons.execute* - just a scope to launch the app in the mailing list without a need for contextual triggers (as far as I was told, nobody cares about this scope in Google )
and the last but not least, I think scope *gmail.metadata* required, which is restricted scope. But I do not understand why this scope is required if my app finds threads by label just fine. All it needs to do is to reply to those threads.
But, whenever I try avoid this scope (metadata), I get this error

**Exception: Access denied: : Missing access token for authorization. Request: MailboxService.GetThread.**

Hence I am desperate to know, if this somehow can be worked around or this will never work without loads of cash for a security review?

Thank you for even reading this and have a blessed day!
Optimizing Your Blog For The Search Engines
Tags: Optimizing, blog, blogging, blogger
Published: 2020-04-21 13:55:37

If you have a blog and do not want to have it to consume your life with promotional and marketing efforts, you will have to turn instead to search engine optimization techniques.

Although there is an ongoing debate regarding the best ways to achieve search engine optimization, those who know about such things seem to agree on two points.


1) Maximum search engine optimization demands that you use specific, well-chosen keywords to optimize the content of each of your blog’s pages.

<img src="https://businesmama.ru/wp-content/uploads/2019/03/952256.jpg"/>

2) You need to create either one-way inbound links to your blog or reciprocal links.

The search engine optimization of your blogs should begin even before you create them, with keyword research. But do not forget about [write my paper for me](https://writemypaperbro.com/), which you should already have in order to fill out the content of your blog.
The first thing you need to know if your blog should generate decent traffic is which keywords will attract the most visitors for the least amount of work.

The easiest way to do this is to either pay for a daily or monthly subscription to [WordTracker](https://www.wordtracker.com/) or to use the [Overture](https://www.merriam-webster.com/dictionary/overture) tool to research the number of searches that have been performed on every blog appropriate keyword of which you can possibly think.

Make a record of the number of searches that have been done on your selected keywords, and then analyze how many pages are already using those keywords by searching for each of them on Google.

In addition to determining the number of pages using them, look at the sites which are the leading competitors for them, according to their positions in the Google page rankings. You don’t want a keyword that is already in use by a highly ranked site.

What you do want in a keyword which will maximize your blog’s search engine optimization is a high number of searches, with a low number of sites already using it, and with those sites having low Google page rankings. If you find keywords that qualify on all three counts, grab them and don’t let go!

<img src="https://fl-club.com/wp-content/uploads/2017/02/%D1%8B-720x380.jpg"/>

Now you are ready to create your blog’s on-page search engine optimization. You accomplish this by using your selected keywords at a density of about 1.5%, or six times for every three hundred words, on each page of your blog, and by including them in your page’s headers and titles.

You need to make sure that the other content of your blog is related to your keywords and useful to both your readers and the search engine spiders.

Finally, you can conclude your efforts for search engine optimization with off-page optimization, creating title links to your blog which contain your chosen keyword and submitting them to blog directories.

You can also join link exchanges and offer to feature links to other quality blogs in your blog if your blog links will receive equal billing in them
TwilioHackathon - Video Chat app using Gatsby and twilio - Project Submission
Tags: twiliohackathon, gatsby, react, webdev
Published: 2020-04-21 13:55:33

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

## What I built
For the Twilio Hackathon, I have built a very Simple Video app, which can be created with ease and deployed in no time with netlify.

After that share the link with your known people and enjoy video conferencing. 

## Demo Link
 It is deployed via netlify [here](https://simplevideoapp.netlify.app/)

## Link to Code
Simple Video app together with its README and set up instructions is available under a MIT license in [this](https://github.com/nabendu82/SimpleVideoApp) git repository.

## How I built it 
I had build quite a few web-apps with gatsbyjs and wanted to build something using gatsbyjs and then, found an awesome [youtube tutorial](https://www.youtube.com/embed/K02SnxY6c_0) which helped me build this web-app.


## Additional Resources/Info
 I got to learn how to integrate a Twilio video service with gatsby easily. The result is a pretty simple video app, and I'm quite happy with the result.
Dotenv-linter: looking after the environment for you
Tags: linter, rust, env, dotenv
Published: 2020-04-21 13:43:47

When developing applications, we always try to stick to the Manifesto of Twelve Factors. This approach helps you to avoid a number of the problems associated with the ongoing support of applications throughout their lifecycle. 

One of the principles of the manifesto is that all settings should be stored in environment variables, allowing you to alter them for different environments (development, automated testing, staging/QA, production) without changing the code.

[Learn more about a new tool to lint .env files](https://evrone.com/dotenv-linter)
A basic implementation of Model-View-Controller pattern in only 20 lines of code based on OOP
Tags: php, oop, mvc, pattern
Published: 2020-04-21 13:38:05

---
title: A basic implementation of Model-View-Controller pattern in only 20 lines of code based on OOP
published: true
description: 
tags: php, oop, mvc, pattern
cover_image: https://res.cloudinary.com/dbvcampra/image/upload/v1588399627/Webp.net-resizeimage_2_metpik.jpg
---

I will present in this article a easy way to separate PHP code from HTML code using Model-View-Controller pattern, almost all PHP MVC frameworks implement this, at the beginning of PHP was common to interpolate PHP code with HTML code, the PHP code runs on server and generate HTML code.<br>
index.php
{% gist https://gist.github.com/adavidoaiei/bf55d185c1d8ca67769a613abdc4c0bf.js %}
<b>.htacces</b> redirects all requests to <b>index.php</b>.<br> 
What is doing the following request: <b>http://localhost/forecast/index</b> &nbsp; ?
It is searching the class forecast in the controllers folder if exists creates object forecast, after that checks if exists method index and invokes it, this is a basic implementation of routing in a common MVC frameworks.
Root of web application has the following structure:
-<b>folder controllers</b>
-<b>folder models</b>
-<b>foder views</b>
-<b>file .htaccess</b>
-<b>file index.php</b>
<br>
/controllers/forecast.php
{% gist https://gist.github.com/adavidoaiei/8e6b9a418ddec629345a78dd13f1cee1.js %}
/views/forecast.html
{%gist https://gist.github.com/adavidoaiei/f387f9d1b754f213ef9928656b451d6e.js %}
/models/money_per_month.php
{%gist https://gist.github.com/adavidoaiei/ba31c9fa7c36dd6eef1a15cae1975387.js %} 
The complete code could you find on GitHub: <a href="https://github.com/adavidoaiei/Model-View-Controller-Pattern">https://github.com/adavidoaiei/Model-View-Controller-Pattern</a>
Daily Challenge #230 - Beeramid
Tags: challenge
Published: 2020-04-21 13:30:18

---
title: Daily Challenge #230 - Beeramid
published: true
series: Daily Challenge
description: Buy and build the world's largest 3D pyramid constructed of beer cans.
tags: challenge
---
Let's pretend your company just hired your friend from college and paid you a referral bonus. Awesome! To celebrate, you're taking your team out to the terrible dive bar next door and using the referral bonus to buy, and build, the largest three-dimensional beer can pyramid you can. And then probably drink those beers, because let's pretend it's Friday too.

A beer can pyramid will square the number of cans in each level - 1 can in the top level, 4 in the second, 9 in the next, 16, 25...

Complete the beeramid function to return the number of complete levels of a beer can pyramid you can make, given the parameters of:

1) your referral bonus, and

2) the price of a beer can

For example:

beeramid(1500, 2); // should === 12
beeramid(5000, 3); // should === 16

Tests:
beeramid(9, 2)
beeramid(21, 1.5)
beeramid(-1, 4)

***
_This [challenge](https://www.codewars.com/kata/51e04f6b544cf3f6550000c1) comes from kylehill on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Fixing Bugs And Glitches For Your App 
Published: 2020-04-21 13:28:46

Fixing bugs and glitches is the greatest part of development. You get to respond to your customers, and even better get more customers! So how would you do this? Well everybody might think this: "Well listen to your customers!" Well, yes, you could do that. But it is __YOUR APP__ . You can do anything you want with it. And maybe even make a version 2! If you want to. But, the most *important* part of your app, is that it has almost no bugs in it, but also you want the people to love it! Whenever you want to you can hire game-testers and people like that so you can test the app before you release it! I would do that but, I like testing my own games. Now if you are a at home dev (like I am) then you want to always make your games better. Do you know why? Because I mostly am bored any have nothing to do except answer emails from my customers and update/make new apps. So I have pretty much all the time I could have right now! I update and make new games every day! And if your wondering, yes I will eventually post some of them in an article. I will always be open, unless I'm doing what I just said I would be doing. If you have any suggestions please comment, I will add them to the article! Thanks!
How work at home Dev's are Out of Order
Published: 2020-04-21 13:13:08

So everybody is pretty much a developer in dev.to right? If not please comment. So developers. Yeah if you work at a workplace then you might be a *little* more organized. Well I am a work at home developer and I make not that much money. But I still get to do what I love. So now into the article. 

# Main 
So yeah if you are a work at home dev I know what it feels like. G-mails from your game-haters, requests for updates, etc; Now you might want to do those things but this is about how you are out of order and how you can get back to being **In Order**. So you're a work at home dev right? And you want to make money right? So the simplest thing to do with organizing your money is to: Make in app purchases in your games or apps (this is my opinion it does not have to be yours). Back to the game-haters and update requests. You should always respond to them as quickly as you can. Unless they are actually mean and using profanity, then you don't have to respond. If you want your emails to be organized just filter them! It is so easy. 
### IF YOU HAVE ANY SUGGESTIONS FOR THE EXTENSION OF THIS ARTICLE PLEASE COMMENT! Thank You
📹 ESNext in 2020 - flat() : Flatten an Array( with Video🔥)
Tags: javascript, webdev, node, tutorial
Published: 2020-04-21 13:11:42

<h3>Array.prototype.flat()</h3>
---

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Flat is really a useful feature of EcmaScript.

Just uploaded a new Video on ESNext series 🎉
<b>ESNext in 2020 - flat() : Flatten an Array</b>

{% youtube Av8TSBEO9Ho %}

Please SUBSCRIBE for my future videos on ESNext series and also other cool series 🙌

YoutTube Channel: <b>https://www.youtube.com/channel/UCy5EgfydCQlVv_AM-FZyYcg</b>

See you in my next Post!
Cheers!
:wave:
No more passwords
Tags: linux, ssh, beginners, security
Published: 2020-04-21 13:08:52

Okay, today let's see together why SSH & ED-25519 can simplify your life.

## SSH keys

To authenticate to a service you can use a username and a password, but you can as well use a pair of keys: SSH keys.

It is really simple, you generate 2 keys. One public that you can share. One private that is a **secret**. You can generate different types of keys and you probably know the RSA type. Let's give it a shot:

Open a terminal and generate a key, with RSA **t**ype, a minimal recommended length of 2048 **b**its, and a **C**omment.

> Read the next part before generating your keys...

```sh
ssh-keygen -t rsa -b 2048 -C "my@email.test"
```

You can decide the destination folder and if you want a passphrase. On a Unix system, it should be generated here: `~/.ssh/`.

### Use state-of-art keys

Shorter, and more secure than RSA, Rivest–Shamir–Adleman? Impossible? *Hold my beer*, here comes ED-25519. Another type of keys but with a smaller public key! (And more secure, see links below.)

```sh
ssh-keygen -t ed25519 -C "my@super.email"
```

More infos here: [https://docs.gitlab.com/ee/ssh/#generating-a-new-ssh-key-pair](https://docs.gitlab.com/ee/ssh/#generating-a-new-ssh-key-pair)

Short example of public keys (The one you share and usually copy-paste):

```bash
# ED25519 🔑
ssh-ed25519 AAAAC3NzaC1lZNYMPE5AAAAILeqT4uN/abIL8P6+oAIZGGg
BXT6o/pJRI1joLlLBCgl my@e.mail

# RSA 🗝
ssh-rsa AAAAB3Nwmnec2EAAAADAQABAAACAQDBZrkOYcnjvX/B3PvbgfNhvwgD
mySNp/VyedwywZMukoL0n8sb7ts9Xn3uIDh7psJtjY0mwIpr4yBGUZpzMAk/F1
uExrYwo/T1MqFHJcbjn28CdpM8aMx6QPf7QetM4cJnqdwdüozn3kW2cWE3K
+mJ7iTWTRqFLEaN9wzH9JUkKFffhH5xpGhEKvWQrJ1IXs0HkPfssAG+iSxEDsXwUh
eBcTAC3obFS95tfhsxUSR40NiCUGjJwd/9b31iwUyVryQcnlXr1wAtGV2AvZYzTt
v8nrqzrHVVYk+qTgdpWE+Jg8awdOswy23XV0Snx2+h8OWdDDM+RLeKmo+7ZACSWT8o
tCynfIh/8ORHnYUONkym8Lqs5Lo/dRbXXFWK6hUNOc1PsvDy5P9jNfJs3oxKTpkM6
1Twrtx7uomFkddyvk73LqN58plOOqVVnc+vv+/qhv3CAom5l+5UrvMQsSPoEdT6fWUWXl/mAKJUzzrpBcYeUjyPOkb8uvo3MTZVB1ZsArkp7t/I
Y6ekcur+7pHHSjhHj/s8fWy2twk0pET+3cmky8EbJEWH93OCmSXuDrFaGDkpny
umLBn4oXqDACeÖePa9lgmJUpMmQli6
jaAqmzgBXfGsHKvmyiN69D+tiC64EH8Ty0sUkugbrRa2BAasdpJMRnYAi4m5F5Q
Ya3bxhdKbmsAQ== my@e.mail
```

Shorter & more secure, use ED-25519!

> **Eddy**, **25** years old and he has **five** **19**' years old brothers.

## Applications

### Github & Cie

No more passwords to authenticate to Github (and every git-cloud) when you push your code. Go to your profile on the github website: 

`Personal Settings > SSH keys > New SSH keys`. 

Give a name to your key and copy-paste the content of your private ~~rsa~~ *ed25519* keys (in `~/.ssh/id_ed25519`).

From now on, when you will push something to Github, it will recognize who you are based on the keys you have in your `~/.ssh`.

### Servers

Same process with servers, instead of using a password to connect to them, add your SSH *public* key to the `authorized_keys` file in `~/.ssh` of the server.

`:wq`

Originally published [here](https://lepape.me/ssh-keys-vs-passwords)
Low-code HTML forms that submit directly to your email address! (Free serverless forms)
Tags: serverless, html, javascript, showdev
Published: 2020-04-21 13:05:07

I built a free API that you can submit HTML forms to and receive the data to your email - attachments included!

[Check it out](https://www.mailslurp.com/product/forms/)

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

## Why did I make it?
I wanted an easy way to make contact forms for static websites. With MailSlurp forms you can now create forms that submit to your email address without any server or Javascript.

## Example
Just `POST` any HTML form to `https://api.mailslurp.com/forms?_to=YOUR_EMAIL_ADDRESS`.

```html
<form action="https://api.mailslurp.com/forms?_to=YOUR_EMAIL" method="post">
  <!-- include any form fields, even files -->
  <textarea name="example"></textarea>
</form>
```

Any named input field will be put into a table and sent to your email address within seconds.

## Attachments
You can add files too by adding an `enctype="multipart/form-data"` attribute to your `<form>` element.

```html
<form
  action="https://api.mailslurp.com/forms"
  method="post"
  enctype="multipart/form-data">

  <input multiple name="files" type="file">
  <button type="submit">Send to me</button>

</form>
```

## More settings
You can set the subject, bcc, cc of the email and more by adding query parameters to the url. You can see a full [list of config options here](https://www.mailslurp.com/product/forms/). 

You can also alias or mask your email address behind an MailSlurp ID so that your email address is not exposed to the public.

```html
<form action="https://api.mailslurp.com/forms" method="post">
  <!-- hide email with an alias (create a free account for this) -->
  <input
    type="hidden"
    name="_toAlias"
    value="9b32cb34-e75a-48a6-8f6c-817204c354e7"
  />
  <!-- data to submit -->
  ...
</form>
```

## Get started
MailSlurp forms are free :). If you want extra features like on demand email addresses, or a MailServer API then you can explore MailSlurp's paid account. Have fun!
Tracking Lines at Stores during COVID-19
Tags: twiliohackathon, android, java
Published: 2020-04-21 12:59:26

As my first hackathon (and first post on Dev, so Hello World!), I wanted to work on something that would push me outside my normal comfort zone. Working with APIs is something I am relatively new to, and this hackathon is a good opportunity for getting my hands dirty with APIs.

The goal is to create an Android application that will allow users to find a store and add a review for how long the queue was for entering the store at that time of the day. At this point, I am just starting on this idea, and I am not sure exactly how it will work.

Optimizing the waiting queues at shops/grocery stores is something I would love to see happen, as there are many stores that are empty at some times of the day, and have long queues at other times. 

This is my plan so far. I am looking forward to creating something that will help in these difficult times while learning along the way, and I hope I will be able to complete this project.
I built a simple Nodejs watcher
Tags: javascript, node
Published: 2020-04-21 12:33:51

I built a simple Nodejs watcher that is syncing changes made in your CSV file to MongoDB.  So let's say you have some service that exports periodically CSV file which you want later to sync with the database, in this case, MongoDB. 
My approach was to have a script that will run (continuously) and whenever you made some changes in the CSV file it should update the database. 
For my scenario, I have one collection in the database called `properties`.

```javascript
const dataCsv = './sample_data.csv';
const mongodb = require("mongodb").MongoClient;
const csvtojson = require("csvtojson");
const fs = require('fs');
let url = "mongodb://yoururl";
```
As you can see I am using MongoClient, CSVTOJSON and FS.
Below is the rest of the code, as you can see it is very simple, connect to MongoDB and watch changes when they appear. Also, I put `console.log ` to see what is happening. 

```javascript
fs.watchFile(dataCsv, (curr, prev) => {

console.log('changes')
    csvtojson()
        .fromFile(dataCsv)
        .then(csvData => {
            mongodb.connect(
                url,
                { useNewUrlParser: true, useUnifiedTopology: true },
                (error, client) => {
                    if (error) return console.log(error);
                    console.log('connected')
                    let dbo = client.db('databsename');
                    dbo.collection('properties')
                        .deleteMany({},(err, data) => {
                            if (err) return console.log('err', err);
                            dbo.collection('properties')
                                .insertMany(csvData, (err1, res) => {
                                    if (err1) return console.log(err1);

                                    console.log(`Inserted: ${res.insertedCount} rows`);
                                    client.close();
                                })
                        })
                }
            );
        });

    console.log(`${dataCsv} file Changed`);
});
```
I hope that this code will help somebody, have all a nice day. 
Keep on coding.