teleren/devto huggingface dataset:
How to generate dynamic html css layout 
Published: 2021-02-24 05:46:44

I am working on a template generation service. I want the user to change the webpage layout, alignment, insert images, remove tags, and change styling. After all the changes the user can save that template which be rendered with dynamic data into it whenever and wherever used again. Please let me know the way to achieve this.
P.S:- I will use a standard template at the beginning which can be manipulated and saved.
Beginner To Advanced level projects.
Tags: html, css, javascript
Published: 2021-02-24 05:33:46

##Benefits of doing the project.
Making a project when learning something is one of the best ideas to get advanced knowledge than learning.
People stuck with many things when coming to coding and programming so understanding the concept when you are learning is the hardest part.
So by making projects while learning will keep you always better than memorizing.

###Table of Content
* Beginner-level Project.
* Intermediate level project.
* Advanced level project.

##Beginner-level Project
In the stage of a coding newbie, you need to do many projects to acquire the coding concept at the next level.

####Beginner Project are:
* BMI Calculator.
* To-Do List.
* Basic UI-CSS.

##Intermediate level Project
In the stage of coding, you need to understand the concept of a production-level environment to get knowledge about the fully functional website.

####Intermediate Project are:
* WebPage with Form.
* Landing Page.
* Photography Site.

##Advanced level Project
In the Advanced stage of coding, you need to SDLC and many UX and UI in web, so you can easily build a website in a short duration.

####Advanced Project are:
* Dark-Mode Site.
* Portfolio.
* Animation Site.
Where to use programming other than programming itself?
Tags: healthydebate, programming
Published: 2021-02-24 05:27:54

Since I've been programming, almost two years, I have always had the impression that the main contribution of programming is not on the field itself. I do agree that there are many libraries and framework, that are such a piece of work that make us focus on this instead. Of course this can be also a matter of taste, but still I think programming is a great tool to solve problems on other fields. 
I would like to hear your opinion about this, and of course I will accept any suggestion of what this other fields could be.

Here I'm listing one of the most common fields that I've been thinking about, but they are pretty
predictable:

* Education, not only  for platforms that are focus on teaching programming but also other subjects. A good example of this is the platform [Brilliant](https://brilliant.org/). They focus on Mathematics and Computer Science, but there's a lot of good material on math, that to me is not so common. 
* Health, no idea what could be done here, but I'm pretty sure there's a lot of projects that are playing on this field.
* Transport, for a country under development, like the one I live, transport is a big issue. 
* Art, this is a niche that seems to be not related with computer science but still there's been platforms that are
covering part of it. A clear example of this is Spotify, which is an amazing platform focused on music. A few months ago I discovered this other platform called [Musixmatch](https://www.musixmatch.com/es), that allow me to read all the lyrics of any song I had in my phone. It's amazing, even more, is powered by a community, in a sense that you could contribute writing lyrics, correcting translations, etc...

Any other idea of where I should be looking at?
What is VPN - Types and Working of VPN
Tags: vpn, security, tutorial, beginners
Published: 2021-02-24 05:15:28

In this tutorial, We will study  [what is VPN](https://usemynotes.com/what-is-vpn-and-how-does-it-work/), Advantage, types of VPN - Remote Access, Site to site or Extra-Net and How VPN Working, etc.

## What is VPN?
VPN stands for the virtual private network. This is a technology that establishes a connection between the public network (Internet) at the time of 2 hosts, one of these is a server and the other host. This technology establishes a tunnel connection in which data is encrypted and you know how secure the encrypted data is.

In this technology, the network is private and more secure because it works on many network layers.

VPN technology is a technology that connects different hosts through the internet.

Peer-to-peer tunneling protocol and Point-to-Point Tunneling Protocol (PPTP) developed by Microsoft employees in 1996. PPTP is very secure and it provides a secure connection between computer and internet.

## Advantage of VPN
### Secure
VPN provides enhanced security with authorized access.
The security of a VPN is very high, in which the data is in encrypted form. In this, no one knows about your data, what data are you sending from whom?

### Less Expensive
In this we can make the VPN community establish by point-to-point connection, it is less expensive.
Its cost is very low, you can get it very easily.

### Reliable
VPN can be used anytime it is very reliable

### Easy and fast to establish
According to wired communication that it is very fast in establishments. If you use wireless VPN then it will cost you a lot cheaper and you can also use it very easily.

### Can be scaled
We can easily enlarge the VPN according to our needs.

## Types of VPN
### Remote Access VPN
Through the Remote Access VPN, any employer or worker can access the organization's network anytime and anywhere.
In this, the sharing of data with your employ becomes very easy.

### Site to site or Internet VPN
Through which site, different offices of which organization establish connections with each other through public networks such as the Internet through Site to site or Internet VPN.
With the help of this, organizations communicate well among themselves and address the exchange of data is easy.

### Extra-Net VPN
When an organization works with another organization, in such a situation, they can use Extra-Net VPN.
So that a lot of data can be exchanged simultaneously, in this the data remains in the middle of two organizations, the third cannot go because it uses data encryption techniques.

## How VPN Working?
VPN technology creates a tunnel between host and server, through this tunnel, data is passed from server to different hosts. All the data going through this tunnel goes in encrypted form, such VPN technology provides double-layer security.


![vpn.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614143563885/3YHP9otwR.png)

This is basically used to hide your IP address or change your IP address if you say and with the help of this you can access those websites as well, so your country is banned.
FEC Day 1
Published: 2021-02-24 05:14:50

Hi welcome to my blog! This is my first post of many to come daily. My partners Jack, Lara, and I just started our Front-End Capstone which is a two-week project that is heavily front-end-focused and requires heavy teamwork and workflow that imitates a real workspace. Today we got started with creating our Github organization/repo and set up our team trello board. Trello seems like a really cool way to keep track of everything that's happening with a project. You can label each task as a way to help sort the type of task and move them into different columns depending on status. I'm excited to start moving tasks to right when they're done and seeing a huge completed column at the end!
Howto: Create a daily email of website visitors using NodeJS and Web-stat
Tags: node, monitoring, javascript
Published: 2021-02-24 04:00:04

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

This is legit my "app", and I will go through it step by step. The first step is the Timestamp. This acts like a "cron" job, executing at a particular time of day. When you enter into the timestamp, you can set the time you want this to execute. Next is the function. This function will construct the URL that will be used to get Yesterday's date. The code inside of the function looks like this. 

    let yesterday = new Date();
    let year = yesterday.getFullYear();
    let MonthOffset = yesterday.getMonth() + 1;
    msg.date = yesterday;
    msg.month = MonthOffset;
    let Month = (MonthOffset > 9) ? MonthOffset + 1 : "0" + MonthOffset;
    //Since checking "yesterday" no need for "offset"
    let day = (yesterday.getDate() > 9) ? yesterday.getDate() : "0" + yesterday.getDate();
    var X = "&time_min=" + year + "-" + Month + "-" + day + " 00:00:00&time_max=" + year + "-" + Month + "-" + day +" 23:59:59";
    const key = "";// insert your key here
    msg.payload = "http://www.web-stat.com/XMLdetails.htm?key=" + key + X;
    msg.url = msg.payload;
    return msg;

The next step is to convert the XML response message to an Object. That is as easy as dragging over the XML parser. Next is a Switch. The switch cause I have is essentially 

    msg.payload.recent_visits.visit > 0

This will ensure that if I have no visitors, I don't get an email. After the switch statement is finally the last function. This function will take the visited array I have and convert it into a string body message for the email, as well as the email topic (subject line) for my email


    let SB = "";
    msg.payload.recent_visits.visit.forEach(function(visit) {
        SB += "Visiter \n";
        SB += "   time :" + visit.entrance_timestamp + "\n";
        SB += "   Referer :" + visit.referer + "\n";
        SB += "   IP :" + visit.ip + "\n";
        SB += "   country :" + visit.country + "\n";
        SB += "   region :" + visit.region + "\n";
        SB += "   city :" + visit.city + "\n";
        SB += "   Visit count :" + visit.n_visits + "\n";
        SB += "   Screen :" + visit.screen_size + "\n";
        SB += "   Agent :" + visit.user_agent + "\n";
    });
    msg.payload = SB;
    msg.topic = "You had new visitors to your site yesterday";
    return msg;

I was playing around with the template item, however, it was not working for me. if anyone has any ideas on how to get that working I am all ears. Finally, I have my email object. I configured this with my Gmail settings, and it just works. Web-stat has a rule in place to only email once a week. That said, they do have a lovely API, and why not use it. Let me know in the comments as well if anyone has any other interesting use cases they can do with this. Thanks
How to transfer your app designs made in Adobe XD to an app developer?
Tags: iosappdesign, designhelp, appdevelopment
Published: 2021-02-24 03:56:42

I'm a UI&UX Design Intern, mainly focusing on app design. I am designing using adobe xd. Slowly, we are transitioning into the testing phase for which quick development is required. Kindly let me know the best way possible to send my designs made in Adobe XD to the app developer in a way that will be helpful for him to check all the resources and use them easily for the development. (thanks in advance :p)
Hello World, will i be learning swift is worth?
Tags: swift, appledeveloper, ios
Published: 2021-02-24 03:18:00

As i know, swift is native programming for developed all of application in apple family, from tv until smart watch, i have not any clue of how needed the market for hire skilled programmer on this field. If i deep learning in this field and dedicated it's worth? Any want have information about it? Please share.
Be an Opportunist without being a Vulture
Tags: life, startup, programming, career
Published: 2021-02-24 02:59:55

Be an opportunist. Jump at every opportunity that you see. Understanding the opportunity is half the journey, which means you actually have to seize first. Look for opportunities everywhere, be it job opportunities, or an opportunity to go to a meetup to connect with someone, and actually take active steps towards seizing them.

At the same time, be generous.

Be in a habit of sharing your opportunities with everyone else. A good analogy for this is, "If I have an apple and you have an apple and we exchange apples, we still remain with 1 single apple. If I have an idea and you have an idea and we exchange ideas, each of us now has 2 ideas." The same is true for opportunities.

I personally share all opportunities with all of my close friends, regardless of the chagrin I receive from people for doing so. I believe in being generous without expecting anything in return (while at the same time not being a doormat for others). This stops you from appearing like, and becoming, a vulture who jumps on everything and gives it up half-way.

An example being that I had shared my current job role's opening with at least 10 others before applying to the post myself.

If you actually deserve it, you'll get it, is what I believe.

If you liked this post, why not [follow me on Twitter](https://twitter.com/thewritingdev)?
[Cypress] - Executando testes com múltiplas tags
Tags: testing, tutorial, javascript, cypress
Published: 2021-02-24 02:37:24

Olá pandolfos(as)! 

Tempos atrás eu estava automatizando alguns testes em um projeto pessoal, cujo tive contato com uma lib chamada **cypress-select-tests**. 

Basicamente, essa lib permite executar os testes baseado em **Tags**, o que facilita muito quando você quer executar apenas alguns testes que contenham determinada tag. 

Até aí legal né? Porém, o que essa lib e tampouco o cypress em si não permitem, é rodar múltiplas tags ao mesmo tempo.

Eis vos deixo a mágica!

1. Instalar a lib **cypress-select-tests** em seu projeto.

> npm install --save-dev cypress-select-tests

2. No seu projeto, abra o arquivo index.js que está dentro do diretório **cypress/plugins** e coloque o [código](https://gist.github.com/r0nunes/240e0b3a9484051d3781e8f62fbfc82c) abaixo.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glsgvyrs7n9811ym3y06.png)

3. Nos seus testes, inclua suas tags. No nosso caso, vamos usar as tags @contract e @healthcheck.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yia594brlj0rbxsjh2rg.png)
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7vpbd4nc926808utx4h.png)

4. Feitas as configurações, basta executar o comando abaixo para que seus testes sejam executados conforme as tags selecionadas:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uawlda0gxblff8c3qstb.png)

> Note que não há espaço na separação das tags. Se tiver, ocorrerá um erro no console _Cannot read property 'split' of undefined_.

No meu projeto, o resultado foi conforme a imagem abaixo. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xglrpxxs152hinl3lil.png) 
 
Se notarmos, na minha spec **booking.spec.js** eu tenho 9 testes, sendo que destes, apenas 1 passou e o restante foi ignorado, visto que não possuem a tag **@contract**. 

Na minha segunda spec **ping.spec.js**, eu tenho 6 testes, sendo que destes, apenas 1 passou e o restante foi ignorado, visto que não possuem a tag **@healthcheck**. 

É isso pessoal, espero que ajude vocês!

Who am I?: [Renato O. Nunes](https://www.linkedin.com/in/renato-o-nunes/).
Who helped me?: [Denis Fevereiro](https://www.linkedin.com/in/denis-fevereiro/), [Samuel Lucas](https://www.linkedin.com/in/samuellucass/)
Yeah, TYPO3 11.1 has been released today. I've tried it!
Tags: typo3, opensource, cms, backend
Published: 2021-02-24 02:02:58

Without a doubt, the new multi-factor authentication in TYPO3 is the most popular new feature. But I was most impressed by the fact that the backend is now very fast. This saves a lot of time and makes working with many content pages more pleasant.

{% youtube m-f8dCYNrkU %}

## Faster Page Tree and Pop-Ups
Especially the page tree has become faster and more user friendly. But also the modal windows, which are used to insert new content or for user confirmations, have become much faster.

## Multi-factor authentication
To be honest, this part is not very accurate in the video, because I am missing the provider app to use MFA, but at least there is a little sneak preview.

## My first conclusion
- Backend is much faster
- Backend looks tidier
- Color contrasts have been improved
- Multi-factor authentication does not work smoothly yet
- The file list module is much faster

## Links
- [My Website](https://simonkoehler.com)
- [Official TYPO3 Repository](https://typo3.org)
- [Official TYPO3 Website](https://typo3.com)
My Loan Calculator
Tags: javascript, html, css, codenewbie
Published: 2021-02-24 01:28:30

This was the first time I actually a JavaScript project myself that's not from a course or anyone giving to me. I saw someone do it and I decide I want to try it as well. And yes, it was hard for me since I only have little knowledge of JavaScript for now and for me to be better I have to keep doing this as people told and get the logic right.

Achieving this, I had to add and **EVENT LISTENER** to make the button in the task calculate my total interest, payment and monthly payment onclick, which I also make use of the innerHTML to pass the result into the paragraph tag in my HTML document. And to let you know, I Google, use StackOverflow just to achieve this result, as you know......a programmer is not completed with those two.
Getting started with Git!
Tags: github, git, vscode
Published: 2021-02-24 01:15:50

Using Git and GitHub is one of the most popular ways to collaborate on code with other team members. When using GitHub you will have a local and remote repository (or repo). 

Some key terms you should know are:
* clone
* pull 
* add 
* commit
* push
* branch

Cloning a repo creates a copy of a repo either locally or remotely. Git add puts changed files in a staging area so that they can be committed. A commit saves your changes and prepares then to be pushed. A push sends the code from your local repo to the remote repo in GitHub. A  pull retrieves the code from the remote repo and merges it with your local code. 

Branches are extremely useful when working with other team members. You can make different branches and then then merge them together later on. Say you want to work on a specific part of the project. If you make a branch from the current state of the project you can attempt to implement whatever you want without worry of making a catastrophic error.  

This image gives an example of how merging effects your project. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5m02uj3hlwiad2qejeun.png)

Personally I prefer to use git in the command line. I think as a future software developer it is important to be familiar and confident in the command prompt; however, there are a variety of ways to use GitHub. Some of these ways include the command line, VS code extensions, git hub desktop, and github.com. In this video I explain using GitHub in the command line and in VS code.
(Gitlab + ECR) Build and Push Docker Image to ECR - AWS
Published: 2021-02-24 01:12:51

Em tempos de estudo para aprender sobre outras ferramentas de CI\CD, peguei o desafio de realizar a criação de um CI para poder fazer o build e push das minhas imagens Docker para o ECR da AWS com Gitlab. Então depois de muitas consultas ao pai de todas as pesquisas (Google e Documentação), irei documentar e compartilhar neste Post de forma mais simples possivel como você pode utilizar aqueles minutos "free" do gitlab para fazer este processo.

Passos:

**AWS - IAM Permissões:**
* 1 - Crie um usuário com policy de acesso ao ECR, pode ser utilizada a policy **AmazonEC2ContainerRegistryFullAccess** para este teste, depois verifique qual a permissão mais adequada; 

* 2 - Crie o seu repositorio ECR na AWS;

**GitLab:**

* 3 - Crie no seu repositorio do gitlab, o arquivo .gitlab-ci.yml e também versione todos os seus arquivos referente a sua imagem Docker (.Dockerfile e etc);

* 4 - Definindo as variaveis de conexão com a sua account AWS para que o Gitlab possa se comunicar com o ECR.
> Acesse as configurações (settings -> CI\CD) do seu projeto;
> Defina as variaveis e os valores que serão utilizados no pipeline do gitlab.

**Variaveis Gitlab + AWS:**
As três variveis abaixo (AWS*) são nativas de integração do gitlab com a AWS para permitir realizar a autenticação com a AWS (get-login).
Referencia: https://docs.gitlab.com/ee/ci/cloud_deployment/
	
AWS_ACCESS_KEY_ID = ID da sua account aws;
AWS_SECRET_ACCESS_KEY = secret da sua account;
AWS_DEFAULT_REGION = region do ECR;

**Outras variaveis:**
DOCKER_REGISTRY = caminho do seu repositorio;
Exemplo: (seuregistry.dkr.ecr.us-east-1.amazonaws.com);
REPOSITORY = nome do repositorio (/nome_repositorio);

Exemplo:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzdsv1bioi3t7qaajwpj.png)

* 5 - Voltando ao .gitlab-ci.yml, iremos utilizar um agent shared do Gitlab no modo Dind (Docker in Docker);
Saiba mais sobre Dind: https://docs.gitlab.com/ee/ci/docker/using_docker_build.html

Só copiar e testar ;)
```
image: 
  #utilizado image aws-cli para permitir realizar o get-login da aws;
  name: amazon/aws-cli
  entrypoint: [""]

services:
  - docker:dind

stages:
  - build
before_script:
## realizando a instalação do docker
  - amazon-linux-extras install docker
  - aws --version
  - docker --version
##login na aws
  - aws ecr get-login-password --region $AWS_DEFAULT_REGION | docker login --username AWS --password-stdin $DOCKER_REGISTRY

Build and Push - ECR:
  stage: build
  script:
    - docker build -t $DOCKER_REGISTRY/$REPOSITORY:latest .
    - docker push $DOCKER_REGISTRY/$REPOSITORY:latest 

```
ES7 React/Redux/GraphQL/React-Native snippets in CodeSandbox
Published: 2021-02-24 01:05:16

If you have ever used the ES7 React, Redux, GraphQL, React-Native snippets VSCode Extension, you've probably become so used to using the shorthand prefixes to speed up your development process.

Sometimes when we want to throw something together quickly on CodeSandbox.io and then realised you don't have the ES7 React, Redux, GraphQL, React-Native snippets extension and you have to type it our manually, it slows down your entire development process.

Today I will show you how to add the same functionality in your CodeSandbox workspace.


Firstly we will start the process for the JavaScript version of the snippets.

Open the [generated.json](https://raw.githubusercontent.com/chillios-ts/vscode-react-javascript-snippets/master/src/snippets/generated.json) 

Copy the entire file contents of the raw `generated.json` file.

Now let's head over to CodeSandbox.io and __create a SandBox so we can access our settings__.

Once you have created a SandBox, go to the `File` menu, then `Preferences`, then `User Snippets`

![Screenshot 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9oaytsb788t6nzsvn27.png)

Then select `New Global Snippet File`
![Screenshot 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjm6q3045w9etp4s6f9j.png)

and name the file `snippets.code-snippets`

Paste the contents that you copied from the `snippets.json` into the newly created `snippets.code-snippets` file and Save.

Congratulations! You have now brought the functionality of the ES7 React, Redux, GraphQL, React-Native snippets extension over to CodeSandbox. Go ahead and try create a new react component as you normally would.

Enjoy and give me a like and follow if this helped you.

Join me on [HashNode](https://hashnode.com/@ItsMeStevieG/joinme)