teleren/devto huggingface dataset:
(Re)discover my passion for web development
Tags: webdev, journey
Published: 2020-09-18 13:37:44

## Hi!

I must admit I'm a little bit nervous. Even though I have about 10 years in Communications behind me and been a native online since the mid-90s (yes I'm old) – this is really the first time I'm writing a personal blog post.

## How it all started

My passion for web development has always been there. I clearly remember the first time I save some HTML code in **Notepad.exe** and realized the connection to the webpage it created. That was the start of a journey of self-education in programming and web design. 
Another vivid memory is me at the public library, printing loads of pages with instructions and code examples for Javascript to bring home and study offline 🤓📠 

## Present state

Fast forward 25 years and I have a Master of Arts in Teaching, I am employed as a Communications Officer at the university in my hometown and trying to squeeze in as much of the web as possible into my 9-to-5. 
As I've just finished my first major assignment as a **Web Project Manager** I find myself thinking a lot about the future of my career: _What's missing? What should I keep? How do I want to work? With whom?_

## The problem

A feeling has been growing on me. It was a bit evasive at first but I think I've managed to put my finger on it: 

> I have all this hands-on knowledge, about programming, how the web works, what's good design, how to build a website, when to use/not use a SaaS etc. 
> But I'm not really **making use of that in my career.** And I'm not sure anyone else really **know this about me.**

If that sounds a bit strange, yes it probably is. But to me, it also sounds a lot like me 🤷🏻 

## What to change

So, here is my plan: 
1. More code: Update my programming skills and knowledge of (modern) front-end technologies.
2. More social: Tell others about my journey and share my work/passion/thoughts with others.

With this as my guiding stars, I hope to rediscover my passion for web development. And doing it in a different, more personal, way this time. Click **Follow** to tag along on the journey!
<br>
This text is crossposted from [my blog at psu.se](https://psu.se)
Leetcode #387 First Unique Character in a String with Python and HashTable
Tags: python, leetcode, 100daysofcode, codenewbie
Published: 2020-09-18 13:26:51

{% youtube bgHdb64A9YU %}

Enjoy the video 😀🙏

Also written version https://losseff.xyz/leetcode/001-first-unique-character-in-a-string/python/
Create links to WhatsApp with just HTML and JAVASCRIPT
Tags: whatsapp, linkstowhatsapp, javascript, html
Published: 2020-09-18 13:23:40

[[clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/gerador-de-link-para-o-whatsapp-d163aa410ce3)

WhatsApp allows you to create links from your phone to share with your contacts, with the new WhatsApp feature you can start a conversation even without having the person’s contact in your phonebook.

> [WhatsApp’s click to chat feature allows you to begin a chat with someone without having their phone number saved in your phone’s address book. As long as you know this person’s phone number and they have an active WhatsApp account, you can create a link that will allow you to start a chat with them. By clicking the link, a chat with the person automatically opens. Click to chat works on both your phone and WhatsApp Web.](https://faq.whatsapp.com/general/chats/how-to-use-click-to-chat?lang=en)

With this resource it is also easy to share our number without complications.

# CODE

We will create our own tool to facilitate the creation of links.

First let’s create the interface, we’ll do something simple, just HTML.

```html
<h1>Gerador de link pro whatsapp</h1>
<form name="form_main">
  <label for="number">Número: </label>
  <input type="text" name="number" id="number"> <br>
  <label for="message">Mensagem: </label>
  <input type="text" name="message" id="message"> <br>
  <p id="end_url"></p>
  <button type="button" onclick="generateLink()">Gerar</button>
</form>
```

Now let’s do the generateLink function.

```javascript
function generateLink() {
  let number = document.form_main.number.value;
  let message = document.form_main.message.value;
  let url = "https://wa.me/";
  let end_url = `${url}${number}?text=${message}`;
  document.getElementById('end_url').innerText = end_url;
}
```
There, it’s that simple.

# Demo

See the complete project working below.

{% codepen https://codepen.io/WalterNascimento/pen/XWdNrNY %}

# Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

{% youtube  vhmwIfzVayA %}

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊
Detailed Steps to Create a New AWS Account
Published: 2020-09-18 13:22:16



1.Go to the Amazon Web Services home page and sign up for an account.

•	Go to the [Amazon Web Services home page](https://aws.amazon.com/).
•	Click **Create a Free Account**.
•	On the sign-in page, click **Create an Account**. 
**Note:** This might be unavailable in your browser if you previously signed into the AWS Management Console. In that case, click **Sign into a different account**, and then click **Create a new account**.
•	Type the requested account information, and then click **Continue**.
•	Choose **Personal** or **Professional**.
**Note:** These two account types are identical in functionality. You can choose a personal account for your personal projects or choose professional for use within your company, an educational institution, or an organization.
•	Type the requested company or personal information.
•	Read the AWS Customer Agreement, and then check the box.
•	Click Create Account and Continue.

2.Add a payment method.

•	On the **Payment Information** page, add a payment method by typing the requested information associated with your payment method.
•	Click **Secure Submit**.

3.Verify your phone number.

•	On the **Phone Verification** page, type a phone number that you can use to accept incoming phone calls.
•	Enter the code displayed in the security check.
•	When you're ready to receive a call, click **Call me now**. In a few moments, an automated system will call you.
•	Type the provided PIN on your phone's keypad. After the process has completed, click **Continue**.

4.Choose a support plan and sign into your console.

•	On the **Select a Support Plan** page, select the **Basic Plan** included in the free tier.
•	Click **Sign in to Console** to sign in to your console.
Github CLI 1.0 chegou 🥳
Tags: git, github, opensource
Published: 2020-09-18 13:09:42

O post original foi escrito no meu blog, você pode acessar [Aqui](fernandodossantos.netlify.app/blogs/github-cli-1-0-chegou)

No começo do ano o **Github** anunciou o [Github CLI](https://github.blog/2020-02-12-supercharge-your-command-line-experience-github-cli-is-now-in-beta/) beta e ontem o **Github** voltou a anunciar o [Github CLI 1.0.](https://github.blog/2020-09-17-github-cli-1-0-is-now-available/) 

De uma forma bem resumida o **Github CLI** trás o **Github** para o seu terminal. O **Github CLI** te dá super poderes como desenvolvedor, você poderá checar o status do **Github** **Issue** e **Github Pull request**, possibilidade de buscar por Issues específicas ou Pull request, podes crirar e forkar um repô, criar Issue e Pull request. Tudo apartir da sua linha de comando (Terminal). 

Sabe aquele processo de estar a toda hora mudar de contexto, editor de código e Github, Github e editor de código, é bem cansativo e chato. Então para ajudar na concentração e para a criação de um fluxo de trabalho facilitado surgiu essa belezinha. 🥳

## O que é o GitHub CLI?

A melhor forma de que achei de descrever o GitHub CLI é: **Github de linha de comando**. Com o Github CLI 1.0 você poderá:

- Rodar todo teu Github workflow apartit do terminal
- Chamar a API do Github para fazer o script de qualquer ação e definir **alias** personalizados para qualquer comando.
- Conectar-se ao GitHub Enterprise Server além do [Github.com](https://github.com)

**gh** Github na linha de comando, ele trás **Pull requests**, **Issues** e outros conceitos do Github.

## Como começar?

Para instalar o **Github CLI** na sua máquina, existe um guia no Github. Para fazer o download click [aqui](https://cli.github.com/) e o guia você encontra [aqui](https://github.com/cli/cli#installation-and-upgrading). O **Githbu CLI** está disponível para Linux, MacOS e Windows.

## Como fazer a autenticação

Se a instalação foi bem sucedida, agora basta fazer a autenticação com o seu usuário do **Github.** Para fazer a autenticação basta rodar o seguinte comando no seu terminal. **gh auth login**. Siga todo o resto do processo e no final, você terá o Github CLI instalado na sua máquina. 🥳

## Gerenciando seus repositórios usando Github CLI

**gh repo** é usado para criar, clonar, forkar e ver repositórios.

## Ver repositórios

Quer ver o repositório de um projeto rápidinho, basta rodar o seguinte comando: **gh repo view [repositótio] [flags]**. Exemplo: **gh repo view https://github.com/codder404/fernando-blog.git -web**. E abra no seu browser favorito. A flag -w ou —web, é para abrir no navegador. 

## Criando repositório

Para criar um novo repositório use o seguinte comando: **gh repo create [nome-do-repo] [flags]**

Como por exemplo: **gh repo create app-demo**.


## Fazendo fork de um repositório

Então para fazer o fork de um repositório o comando a ser usado é: **gh repo fork [repositorio] [flags]**. Por exemplo: **gh repo fork https://github.com/vercel/og-image.git**
React bootstrap modal
Published: 2020-09-18 12:59:57

Bootstrap Modal is a dialog box/popup window that is displayed some information to the user.

How to use React bootstrap modal

one need to install it at react app

<h1>How to install</h1> 

npm install react-bootstrap bootstrap

<h2>how to import in React App and use</h2>

```javascript
import "bootstrap/dist/css/bootstrap.min.css";
import { Modal , Button } from "react-bootstrap";
```


one can get More on it (code example) 

https://react-bootstrap.github.io/components/modal/

Source <a href="https://askavy.com/react-bootstrap-modal/">React bootstrap modal</a>
Hello (DEV) World
Tags: writing
Published: 2020-09-18 12:59:48

Hello everyone 👋
This is my first post on DEV.
I am a student with interest in Operating systems, compilers and love of physics.
Having learnt a lot from DEV, I am hoping to give back some, and aiming to write a blog every other week. I am planning to write about projects I have done, things I am learning, and other things.
Have a nice day !
How to intercept a request with Axios
Tags: javascript, react, reactnative
Published: 2020-09-18 12:53:06

Maybe, in your application you need to do a request with **Axios** using a token. But, you don't have a token yet. So, the application makes a request and then return an error with status code 401.

Fortunately, the **Axios** have a middleware that can help us to intercept the requests. For this, use the `interceptors` of instance of **Axios** thas was created.

```js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.spotify.com/v1/',
});

api.interceptors.request.use(
  (request) => {
    if (api.defaults.headers.authorization) return request;

    throw new axios.Cancel('Token is not available. Do login, please.');
  },
  (error) => {
    return Promise.reject(error);
  },
);

export default api;
```

This code will avoid that the application from making the request and showing a error in the browser's console. The code check if exists a token in property `Authorization`, if a token is not found, the request won't be executed, returning an error from own **Axios**.

```js
throw new axios.Cancel('Token is not available. Do login, please.');
```

This function `Cancel` from Axios is very important.

Do you know any other way to do this? Share with the community.
Usability Testing - UX Part 4
Tags: ux, technicalwriting, technicalwriter
Published: 2020-09-18 12:42:12

In the previous blog of the UX series, we had discussed[The Heuristic Evaluation and 10 Heuristics for the UX] (https://dev.to/adhistac/heuristic-evaluation-and-10-heuristics-for-the-ux-part-3-29di). Today we will dive deeper into usability testing.

Let's get started:

### Introduction

*Usability Testing* is a process of testing a product designed with representative users. The goal here is to identify usability-related problems, collect data, and rate the satisfaction of a user after using the product. Generally, while running a usability test, a test plan is drafted, representative users are chosen, and the findings are analyzed. Usability testing does not require a formal lab and can be conducted remotely.

### Advantages of usability testing

One of the main advantages of conducting usability testing is the identification of problems by the design team prior to coding. The early identification of problems, the less expensive the fixes will be. During usability testing, we will know whether participants are able to complete the task, the time taken to complete the task, level of satisfaction, changes required to improve user performance, and analyze whether user objectives are met.

Furthermore, the cost of usability testing depends on the number of days required to complete the testing, the number of participants, and the types of tests that will be performed.

### Aspects to be considered while performing usability testing

*Time* is the major aspect while performing usability testing. Generally, a usability specialist plans time for running the test, analyzing the findings, drafting a report, and presenting the findings to the development teams.

*The cost of recruiting* is decided based on the requirement. Either participant is hired from the same company within their office hours or by recruiting agencies.

*Rental Cost* is planned when you secure a room for testing such as; Meeting room or Conference room. Furthermore, if you do not have any equipment to record the evaluation or monitor such as; camera, sound recorder, and projector then it will be added under rental cost.

*Compensation for participants* are planned for travel or time factor only. 

Finally, usability testing is an iterative process. Usability specialists should have a clear idea of why testing is conducted in the first place and implement the changes.

In the upcoming blog, we will dive deeper into *How usability testing is planned*.
Creating a new social network
Published: 2020-09-18 12:39:50

If you've seen my last few posts, I am trying to create a new social network! Although a few challenges I've ran into. The app itself doesn't seem revolutionary, but it does have features many people have said they wanted to see in existing apps. Other challenges I've faced was finding a place to host the photos and videos. Cloudinary seems to be my best solution since I won't need a credit card for the free tier. 

That's all for today's post. I'll update you guys later!
Country State City Dropdown List In Php
Tags: laravel
Published: 2020-09-18 12:37:54

Today In this tutorial, we will show you how to dynamically create a country state city dropdown list in PHP using jQuery ajax from MySQL database.

This tutorial will guide you step by step on how to create country state city in dropdown list onchange in PHP from MySQL using Ajax or populate the first, second, and third dropdown based on the first and second selection of dropdown in PHP. jquery plugin for country state city dropdown in this tutorial.

[jquery plugin for country state city dropdown](https://www.phpcodingstuff.com/blog/country-state-city-dropdown-list-in-php.html)
Introducing Requestly Developer Tools
Tags: requestly, testing, webdev, developer
Published: 2021-06-11 12:53:18

---
title: Introducing Requestly Developer Tools
published: true
date: 2020-09-18 12:36:25 UTC
tags: requestly,testing,webdevelopment,developer
canonical_url: https://medium.com/@requestly/introducing-requestly-developer-tools-d56bd4959c68
---

[Requestly](https://requestly.com) bundles some powerful tools to do a lot more with network requests than it was possible to do with a normal browser. For instance, you can create rules to redirect URLs, manipulate headers, modify parts of URL, emulate website for different devices, execute scripts on page, modify response and much more.

If you are an existing user, you know what rule to create to serve your purpose and Requestly magically does your job.

_But this is not all._

I’m sure you have few questions dangling in your mind — if you created the rule right? if your rule intercepted the request you wanted to? if the rule applied the way it was intended to? etc etc.

_We have a Good news for you!_

**Requestly launches its Developer Tools where you can see all network requests intercepted and modified in a page by your rules.**

If you are an advanced web developer, you must be already familiar with Developer Tools available in browser and have used it to inspect page elements or network requests. But even if you are not, you may [learn more about it here](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools).

![](https://cdn-images-1.medium.com/max/1024/1*vf-WbWtK5fdxPsvyQB-Oyg.png)<figcaption>Requestly Tab in browser developer tools</figcaption>

In browser developer tools, you will find a tab “ **Requestly** ” which displays the following details:

1. Intercepted request URL
2. Time lapsed from first intercepted request
3. Request method — GET, POST, PUT, PATCH, DELETE. ([More details](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods))
4. Request type — XHR, script, stylesheet, document, etc. ([More details](https://developer.chrome.com/extensions/webRequest#type-ResourceType))
5. Name of rule applied. Clicking on name, opens the rule in new browser tab, so you can quickly view or edit its definition.
6. A brief about the modification

By default, Requestly does not capture or preserve logs for rules applied. And therefore, when you first open the Requestly Developer tool, you don’t see any detail. You have to either reload the page or make new requests to see data coming up.

You can explicitly clear previous logs by clicking the **Clear**  button.

You can also filter logs by **request URL** or **rule name**.

![](https://cdn-images-1.medium.com/max/1024/1*qBnVGnPFvoGW2xSgvap_Eg.png)

_That’s all my buddy.._

Hope you liked the new addition. We will soon come up with more exciting features in Requestly.

> If you are facing any issue or have any feedback, please reach out to us at: contact@requestly.io
Show and tell: Show off your vim setup 🚀
Tags: discuss, beginners, vim, productivity
Published: 2020-09-18 12:28:15

Hey DEV!

I was inspired by the post about [vscode setups](https://dev.to/danielw/show-and-tell-show-off-your-vs-code-setup-47be), so I decided to create this one.

I would love to see what the vim users of the DEV community use the most from color schemes, plugins, workflows, etc.

## Starting with mine:
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2wm7hmlak3pn78mg2u36.png)

Check out the [dotfiles](https://github.com/reobin/dotfiles). (Use as a reference only, it is not yet documented ☹️)

### Color scheme

I use [iceberg.vim](https://github.com/cocopon/iceberg.vim), made by the great designer [cocopon](https://cocopon.me/).

Check out cocopon's work!

### Plugins

I don't use many plugins, but 3 are vital right now to my workflow:

- [fzf](https://github.com/junegunn/fzf)
  - Fuzzy find a file by its name
  - Search for text in all files
  - Quickly switch between open vim buffers
- [coc.nvim](https://github.com/neoclide/coc.nvim)
  - autocompletion for many languages through extensions
- [vim-fugitive](https://github.com/tpope/vim-fugitive)
  - Resolve conflicts
  - Stage changes line by line

### Outside vim

- [tmux](https://github.com/tmux/tmux) to manage terminal panes
- [typewritten](https://github.com/reobin/typewritten), a minimal async zsh prompt

Share your own! 🚀
Get GitHub CLI in WSL2
Tags: github, opensource, productivity, wsl
Published: 2020-09-18 12:27:45

Get the new GitHub CLI now in your wsl2 dev environment.

`gh` helps you work with issues, pull requests, releases and more. It brings GitHub to your terminal.

# Installation

For people using Debian based WSL2 use these commands to install `gh`

```shell
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-key C99B11DEB97541F0
sudo apt-add-repository https://cli.github.com/packages
sudo apt update
sudo apt install gh
```

For people using wsl based on OpenSUSE, Fedora etc and for manual installation you may look into this [Linux Installation docs](https://github.com/cli/cli/blob/trunk/docs/install_linux.md)

# Authenticating

After installation of the CLI, you will need to authenticate your GitHub account. For authentication, you will have to follow few steps 

```shell
gh auth login
```

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

You will have two options to authenticate, either use browser method or use authentication Token. I will suggest using Browser method as its quick and easy.

Next, you will be asked to choose git protocol, choose https or ssh as per your own convenience.

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

Voila!! You are all done with the setup!!

For more commands follow this [manual](https://cli.github.com/manual/)
Food Delivery App: is it essential or not?
Published: 2020-09-18 12:15:24

Today we all observe the blooming of online life. We buy online, read online, receive banking services online and many other daily things. It is also fair for ordering food online. What is your first idea when you are hungry and don’t want to cook or you are too busy? Most likely you take the smartphone and tap on the app of your favourite food delivery app. Why? Because it is fast and convenient. 

I would say that it is not the single benefit of having an app. Along with offering new service for your customers, you as a restaurant owner can enjoy the advantages of loyalty program options, social nets integration and greater marketing tools.

So, Iets move further: from telling about why it is important, to describing **what functions are important** for a food delivery app.    

To satisfy all your hungry customers we recommend to take care of the following:

1. Your app should notify your customers that the order is received.
2. The app should keep your customers updated regarding the order status and the time of expected delivery.
3. A customer should be able to make everything in your food delivery app. Don’t redirect them to website that can be not mobile-friendly. 

How much? This question is among one of the first asked before making the decision to move further.

***The cost of app development*** depends on several aspects: your special requirements, functions you want to add, design as well as the developer services cost. 

In case you are thinking of food delivery app development I  recommend checking our review of [The Business Benefits of Food Delivery Apps](https://dinarys.com/blog/food-delivery-apps), where we are sharing our team experience in this issue. Hope you’ll enjoy reading and get inspired!