teleren/devto huggingface dataset:
Melina - Tailwind CSS Portfolio Template
Tags: tailwindcss, htmltemplate
Published: 2022-09-07 03:32:27

---
title: Melina - Tailwind CSS Portfolio Template
published: true
description: Melina is a responsive portfolio HTML template built with Tailwind CSS.
tags: #tailwindCSS #HTMLTemplate
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itsrhsovum1phjuaj641.png
# Use a ratio of 100:42 for best results.
---

Melina is a responsive HTML portfolio template built with Tailwind CSS version 3+. Some of the features of this template.

##Template Features:

- Build with Tailwind CSS v3.1.8
- Light and dark mode
- Fully Responsive and easy to customize
- Compatible with all modern browsers
- W3C Validated Code
- Clean code with comments
- Validated PHP Contact form
- Detailed documentation 

Check it out [Melina - Portfolio template](https://vigowebs.gumroad.com/l/melina) now
Updates and Such!
Tags: webdev, programming, blog
Published: 2022-09-07 03:15:18

Hello, everyone!

On this day last year, I started my web development and programming journey at [Perpetual Education](https://perpetual.education). I worked with an awesome mentor and a wonderful group of colleagues. Sadly, when my mother passed away a few months into the course, the hiatus set back my progress and I wasn’t able to continue, so I withdrew from the mentorship. I’m thankful, however, to have the opportunity to still see what my fellow developers are working on as well as the writings they publish.

Since my withdrawal back in June I’ve started balancing out things in my life and trying to meet the needs of my family. In addition to practicing what I learned about web development, I have started exploring aspects of computer science. I developed a fascination with computer communication. I am learning more about how backend stacks work as well as using CLI. Most recently I’ve been learning how to use Git with CLI and Terminal. My subsequent posts will have more details about these new ventures.

I hope everyone is doing well and I look forward to sharing things as they unfold!

Regards,

Andrew
wj-config Live Demo
Tags: react, wjconfig, node
Published: 2022-09-07 03:12:40

See a **ReactJS** demonstration using **wj-config** _version 2 in beta_, the next generation configuration system.

Remember that **wj-config** works as well in **NodeJS**, and is programmed in the exact same way.  One configuration for all your JavaScript is now a thing.

Published via [npmjs](https://www.npmjs.com/package/wj-config) and source code available in [GitHub](https://github.com/WJSoftware/wj-config/tree/Version_2).

_Drag the left handle to the right to reveal the `config.js` module's source code._

{% embed https://codesandbox.io/embed/restless-rgb-rk6h1p?fontsize=14&module=%2Fsrc%2Fconfig.js&theme=dark %}

**IMPORTANT**: Version 2 is in public beta.  If you would like to contribute to its final shape, test now and open an issue in **GitHub** with your findings.
GitHub Workflow 101
Tags: beginners, github, git
Published: 2022-09-07 03:11:12

## How to fix bugs or add features on personal branch and then merge with main branch successfully

The GitHub workflow is how developers add features to code and test them without disrupting the main branch. It is important to memorize this process since developers use it frequently. By the end of my coding bootcamp I will know these commands in my sleep!

## Instructions for MacOS terminal

1. Use **`git status`** in MacOS terminal to check which branch you are operating in 
Returns:
`On branch main`
`Your branch is up to date with 'origin/main'.`

2. Create a new branch with **`git checkout -b prefix/description`**
Returns: `Switched to a new branch 'prefix/description'`

3. Verify you are in the correct branch with **`git status`**
Returns: `On branch prefix/description`

4. Add code changes to personal branch **`git add -A`**

5. Create commit and describe changes **`git commit -m "enter description"`**

6. Double check that your branch is updated with most recent version with **`git pull origin main`**

7. Push changes from local branch to remote branch with **`git push origin prefix/description`**

8. Create a pull request

- Open GitHub repo in browser
- Select `Compare and pull request` (green)
- Add descriptive title and comment about changes
- Select `Create pull request` (green)
- Once pull request has been approved by teammates

## LAST STEPS! 

1. Confirm there are no conflicts with main and personal branch
2. `Merge Pull Request`
3. Delete personal branch
4. Open MacOS Terminal
5. `git checkout main` to switch back to main branch
6. `git pull origin main` to update merge on local device

## That's it! 

These are the basic commands to create a new branch, make changes to code, push changes to remote branch, create a pull request, and merge with main branch. You will use these daily as a developer
Você faz parte de DevRel (e talvez nem saiba)
Tags: devrel, community, advocate
Published: 2022-09-07 03:08:53

Se vc trabalha com tecnologia, vc faz parte (sendo dev ou não, piadista!!).

Se vc está lendo isso no Dev, vc faz parte (e agora já sabe hehehe).

Se vc já sabe que faz parte (e não somente pq é dev), parabéns, já chegou ao final do post.

Porém, se vc caiu aqui e não faz idéia do que é DevRel entenda isso que vc faz parte com [esse conteúdo da Pachi](https://dev.to/feministech/pt-br-devrel-o-basico-4e7m).

Agora que estamos na mesma página, vamos combinar: se vc disser sim a pelo menos uma dessas perguntas, 
receba desde já as boas vindas e saiba que vc faz parte de DevRel.

- Já assistiu algum tutorial de tecnologia.
- Consulta documentação técnica.
- Já entrou e/ou segue blogs, foruns, páginas, perfis de tecnologia.
- Trabalha em uma empresa que diga sim a qualquer item acima.
- Trabalha em uma empresa que tenha profissionais de tecnologia.
- Lidera profissionais que trabalhem com tecnologia.
- É empresa e está pensando na melhor forma de não perder seu time de tecnologia pras empresas gringas.
- É empresa e produz produtos e serviços que envolvam tecnologia ou profissionais de tecnologia.
- É empresa e precisa adquirir algum produto de tecnologia.
- É empresa e já hospedou algum evento de tecnologia.
- Já participou de alguma comunidade de tecnologia.
- Já deixou sua avaliação em qualquer produto ou serviço de tecnologia.
- Trabalha com marketing de relacionamento.
- Já recebeu indicação ou indicou alguém pra uma vaga em tecnologia.
- Já publicou sua impressão (boa ou ruim) sobre a experiência de trabalhar com tecnologia em algum lugar.
- Já participou de algum evento de tecnologia.
- Já ajudou algum colega em uma dúvida sobre tecnologia.
- Já contribuiu em algum repositório de GitHub, GitLab, BitBucket, FTP, SVN...
- Já participou de algum podcast (entrevistando ou sendo a pessoa convidada).
- Já deu uma palestra, curso, tutorial, workshop.

Deixe seu comentário carinhoso nesse post e receber novamente as boas vindas ao maravilhoso mundo da DevRel. 😍
Detect Cycle LinkedList - I
Tags: javascript, leetcode
Published: 2022-09-07 02:55:12

## Approach 1
Where we are using Temp pointer.
```js
/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */

/**
 * @param {ListNode} head
 * @return {boolean}
 */
var hasCycle = function(head) {
    
    let tempNode = new ListNode(0);
    let current = head;
    
    while(current){
        if(current.next === tempNode){
            return true;
        }
        let saveNext = current.next;
        current.next = tempNode;
        current = saveNext;
    }
    return false;
};

```

## Approach 2
 Using Map (or can be done using set) to keep track of visited pointers
```js
var hasCycle = function(head) {
    let mapValues = new Map();
    while (head) {
        if (mapValues.has(head)) {
            return true;
        } else {
            mapValues.set(head, "Yes");
            head = head.next;
        }
    }

    return false;

};
```

## Approach 3
 Where you can modify the way of creating Node by using additional pointer -(Visited = false(default)) & can traverse list.
if visited is true -> return true else false

## Approach 4 :

Using slow & fast pointer 

```js
var hasCycle = function(head) {
    let slow = head;
    let fast =  head;
    while(fast !== null && fast.next !== null){
        slow = slow?.next;
        fast = fast?.next?.next;
        
         if(slow == fast){
            return true;
        }
    }
    return false;
};

```
Merge Two Sorted Linked List - I
Tags: javascript, leetcode
Published: 2022-09-07 02:53:46

Merging two Linked List 

## Approach 1 (Naive)
Getting items from both list, sorting them & forming linked list again.

```js
var mergeTwoLists = function(list1, list2) {
    let array = [];
    let current = list1;
    while(current){
        array.push(current.val);
        current = current.next;
    }
    
    current = list2;
    while(current){
        array.push(current.val);
        current = current.next;
    };
    
    array = array.sort((a,b) => a-b);
    
    let head = null;
    
     const insertAtLast = (data) => {
      if (head === null) {
        head = new ListNode(data);
      } else {
        let current = head;
        while (current.next) {
          current = current.next;
        }
        current.next = new ListNode(data);
      }
    };

    for (let i = 0; i < array.length; i++) {
      insertAtLast(array[i]);
    }
    
    return head;
    
  
};

```

## Approach 2
Using two pointer & new List, Using comparison of values & generating new list
```js
var mergeTwoLists = function(list1, list2) {
    let newNode = new ListNode(null,null);
    let listTail =newNode
    let listPointer1 = list1;
    let listPointer2 = list2;
    
    
    while(listPointer1 || listPointer2){
        
         if (!listPointer1) {
            listTail.next = listPointer2;
            break;
        } 
        if (!listPointer2) {
            listTail.next = listPointer1;
            break;
        }
        
        if(listPointer1.val > listPointer2.val){
            listTail.next = listPointer2;
            listPointer2 = listPointer2.next; 
        }else{
             listTail.next = listPointer1;
            listPointer1 = listPointer1.next; 
        }
        
        listTail= listTail.next;
    }
    return newNode.next;
};

```
Uses and Benefits of 10 minute mail
Tags: 10minutemail, tempmail, 10minutesmai
Published: 2022-09-07 02:40:18

**What is [Temp Mail](https://10-minutemail.net/),[10 minute mail](https://10-minutemail.com/)**?

Temp mail is an e-mail service that is created by randomly determining the address and extension and self-destructs after a while. By using this service, you can receive a free e-mail with a disposable email without giving the original e-mail address. Temp email is also called [10minutemail](https://10-minutemail.com/). When registering for a site, application, forum, or when we want to download a program, we are sometimes asked to confirm the code that will be sent to our e-mail address. We do not want spam and junk mail to come to the real e-mail address that we always use. 10 minute mail is a free e-mail service that allows us to get rid of such spam and stay safe.


**Is [Temp Mail](https://10-minutemail.org/) Free?**

Temp mail provided by us is completely free. To use this service, you do not have to pay any fees, subscribe to anything, provide your card information and personal information. It is one of the most important features of the 10 min mail service that it does not require a fee and protects users from harmful mails.


**Where is [Temporary E-mail](https://10-minutemail.com) Used?**

Temporary e-mail service is one of the most needed services in daily life. A temporary e-mail service is required to view the content of a forum, to use a 7-day trial version of a program, to use an online service. Because most sites or apps that want to email you do so to send you ads, spam, or send you infected files that can damage your devices and steal your data. You do not want such mails to come to your personal and always used e-mail address.

**Where Can i use [10 minutes mail](https://10-minutemail.com) service?**

You can use the service from the following websites:
1 [10 minute mail](https://10-minutemail.com/) https://10-minutemail.com/
2 [10 min email](https://email10min.com/) https://email10min.com/
3 [temp mail](https://www.mailtemp.net/) https://www.mailtemp.net/
4 [10 minute mail](https://10minmailnet.com/) https://10minmailnet.com/
5 [10 min mail](https://email10min.net/) https://email10min.net/
6 [ten minutes mail](https://tenminutesmail.net/) https://tenminutesmail.net/
7 https://10-minutemail.net
8 https://10-minutemail.org
I build a tunneling service use ssh,look like ngrok
Tags: webdev, linux
Published: 2022-09-07 02:35:59

I built a tunnel service demo, which uses ssh, and it can be used with one line of commands without installing any software。

like this:
`ssh -R 80:127.0.0.1:8080 test@thetbw.com`
![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7o6xn90umhuw1163wm8d.png)
> `8080` is the port which you want forward，`80` is irrelevant

> `test` is you accout, password is `test1`,you can also go to thetbw.com to register an account, but the interface is in Chinese, I don't have that much energy for now

Linux and mac come with ssh, and windows, you only need to open openssh in the optional function.

If you think it's good, look forward to your feedback, this is just a demo, please don't use it for production purposes, I haven't finished developing it yet, and the server may be shut down at any time
Criando contas com AWS Organizations.
Tags: aws, cloud, help, beginners
Published: 2022-09-07 02:32:09

**No console da aws possuo duas formas para criar as contas**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrvf8qb0e6kd435eymo6.gif)

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

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

* Clique no botão: **adicionar uma conta da aws**

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

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

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

* Criando OU(unidades de organização)
vá para a raiz de todas as contas lá voce pode criar as OU,

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

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



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


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


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


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


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

* Aplicando policies.
as mesmas servem para aplicar permissões ou restringir acessos dos usuários.
Por padrão as politicas são desabilitadas, para ativa-las:

Navegue até a página Policies (Políticas) e escolha Service Control Policies (Políticas de controle de serviço).

Na página Service Control Policies (Políticas de controle de serviço), escolha Enable service control policies (Ativar políticas de controle de serviço).

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cbgbjh03g3nbzglyu4l.gif)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39s2sax3pdpay8pea8eg.gif)

* você pode habilitar as policys em OU's ou em contas.
Aplicando nas OU's todas as contas pertencentes do grupo herdaram a policy.
Para adicionar as policys é simples:
Ainda na conta Root na AWS Organizations acesse uma conta ou OU

Policy->Anexar->Policy criada->Anexar Política.

---

O intuito é criar um artigo rápido na hora da dúvida para uso pessoal, ficarei feliz caso tenha te ajudado ou esclarecido algo.

Dúvidas, me chama no linkedin: https://www.linkedin.com/in/hugo-lemos-da-silva/

ou no insta: https://www.instagram.com/hugollemos.s/
How does next.js determine the value of NEXT_PUBLIC_BASE_URL?
Tags: nextjs, help
Published: 2022-09-07 02:24:44

I am not setting any environment variable for NEXT_PUBLIC_BASE_URL. However, on running the application locally and using a `.env.local` file, I see the `process.env.NEXT_PUBLIC_BASE_URL` is set to `localhost:3000`

I have tried looking for it in the next cli source code, but I am not able to find where it's being set
Why is ngrok returning HTML?
Tags: ngrok, fetch, javascript, beginners
Published: 2022-09-07 02:22:54

Using [ngrok](https://ngrok.com/) for creating a proxy of your local backend is in every development journey, mostly when you want to expose a local service using an environment variable.

I found a problem that entertained me the whole afternoon while trying to deploy a Gmail Addon using Google App Script.
I couldn't make a request since the **response returns HTML**.
[ngrok](https://ngrok.com/) tries to ensure that if someone shares this URL with another part, this part knows that this URL is a tunnel to another endpoint.

The solution is straightforward. We should set `ngrok-skip-browser-warning` in the headers of the response with any value, e.g
```
// Only for local development
headers['ngrok-skip-browser-warning'] = 'skip-browser-warning';
```
Singletons in JS And How To Use Them
Tags: javascript, programming, beginners, oop
Published: 2022-09-07 02:20:18

Hi Team,

Today, I'd like to tell about singletons and how we are using them on daily-basis. 
So, singleton pattern allows us to create single instance of particular class. For which purposes  can it be helpful? We are using them for:

* data interchange services, which take care about data transferring to/from underlying services
* data processing services, which can be instantiated only once on application start
* cache services
* testing purposes

For example, we decided to continue with previously described Cache Service (https://dev.to/frozer/vanilla-js-data-cache-service-1ei2), for some reasons we don't need multiple 
cache services in our app, so how we are going to create a singletone?

Let's start with very basic code to create a singletone:
```
class SingletoneService {
  static instance;
  
  getInstance(args) {
    if (!SingletoneService.instance) {
      SingletoneService.instance = new SingletoneService(...args);
    }
    
    return SingletoneService.instance;
  }
  
  constructor(args) {
    // do something with args
  }
  
  doSomething() {
    // do something
  }
}
```
So, how does it work? In the main program we can create instance of singleton by calling this *getInstance* method with arguments (if we need them):
```
function main() {
  const instance = SingletoneService.getInstance();
  
  instance.doSomething();
}
main();
```
By calling the *getInstance* method it checks for static **instance** field value of class SingletoneService, and then instantiate a new object based on that class using the *new* keyword. If it exists, it simply returns the existing instance.

Now, once the draft implementation is done, try to move this functionality into our CacheService:
```
class SomeServiceWithDataCache {
  static instance;
  
  getInstance(args) {
    if (!SomeServiceWithDataCache.instance) {
      SomeServiceWithDataCache.instance = new SomeServiceWithDataCache(...args);
    }
    
    return SomeServiceWithDataCache.instance;
  }
  
  constructor() {
    this.cache = {
      isLoading: false,
      expire: 0,
      data: null
    };
    this.cacheSubscriptions = [];
  }
  ...
}
```
Also, you can use singletones to inject dependency to your class:
```
class DataProcessingService {
  // use existing DataCacheService instance by default
  constructor(cacheService = DataCacheService.getInstance()) {
    // do something in constructor)
  }
  ...
}
```
Which allows you to implement code isolation and Open-Closed principle.
For the backend, what programming language are you using
Tags: programming, backend
Published: 2022-09-07 02:18:48

---
title: For the backend, what programming language are you using
published: true
description: Hi Dev, for the backend, what programming language are you using? and Why?
tags: programming, backend
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Following redirects with http.client Python module
Tags: python
Published: 2022-09-07 02:18:41

Unfortunately, there is no configuration for automatic following redirects (3XX status) while using `http.client` Python module.

If you are stubborn like me and still wants to use the module, here is a snippet for following redirects:

```py
#! /usr/bin/python3

from http.client import HTTPSConnection
from urllib.parse import urljoin

def get(host, url):
    print(f'GET {url}')

    connection = HTTPSConnection(host)
    connection.request('GET', url)

    response = connection.getresponse()
    location_header = response.getheader('location')

    if location_header is None:
        return response
    else:
        location = urljoin(url, location_header)
        return get(host, location)

response = get('en.wikipedia.org', '/api/rest_v1/page/random/summary')

print(response.read())
```
"The Morning News" website template on Deta platform
Tags: javascript, webdev, node, template
Published: 2022-09-07 02:06:51

<p>The Morning News (TMN) is a modern website template built for publishing breaking and intensive news on the Internet. Once you install this template on Deta or on a web hosting service with Node.js as a runtime, you can publish news with videos or text only around the world. So, you can use this template as a videos and movies website or as a breaking news website.</p>

<p>Moreover, this template offers you a possibility to create and edit video playlist with ease without the need to install any plugin. In addition, with the embedded Disqus comment system, you can share your articles or movies on Facebook or Twitter anytime.</p>

<p>To help you make money by displaying different advertisements on your website, this template has reserved a big spot on the front page and on each post page for your advertisements. Click the picture below to see the real demo website.</p>

<a href="https://khmerweb.deta.dev/post/4wjwwhd4a77m"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sfg3xn5ajl7i4buuppo.png" /></a>