teleren/devto huggingface dataset:
A Guide to HTML and CSS 
Published: 2021-11-29 16:06:03

1. Get to know what HTML and CSS is and what it is used for. 

2. Understand its syntax. Know the general rules applied.

3. Start working on something practically. This way it gets to stick with you.

4. Join a community. This is an easier way to get to interact and learn from fellow developers from all around the world. 

**What is HTML?** 
Hypertext Markup Language(HTML) is a markup language used to describe the structure of a web page. It uses tags to define elements within a document.

**What is it used for?**
It is primarily used for creating web pages. HTML is free to use and is supported by most modern browsers. It ensures your text, images, and other elements are displayed intended. Without it, web pages would be plain text files.

You can also embed images, videos, audio files, and other multimedia via hyperlinks. And, you can link to other web pages on the same website or from another site. This allows visitors to easily navigate your website and jump between websites stored on different web servers.

 HTML is supposed to create a simple base upon which CSS and JavaScript can be added. 

**Cascading Sheet Styles (CSS)** is a style sheet language used to style HTML. It describes how HTML elements should be displayed to make them look nice.
With CSS, you can customize your styling and layouts, changing the color, font, and alignment of elements. 

**How Does It Work?**
CSS is read by web browsers. They take the HTML markup document, and then they apply the CSS styling rules to the elements within that document.
Some of its concepts include:

- Box Model

- Positioning

- Grid

- Flexbox

- Animation


**Where to Learn?**
There are tons of resources and tutorials to choose from especially from the internet. You could:

1. Go through an free/paid online course or guides i.e from FreeCodeCamp, Treehouse, Scrimba e.t.c.
2. Read books.
3. Attend a bootcamp. 


All these are good but remember not to get stuck in the 'tutorial hell' loop. With the little you know practice it by building something on your own. This is an effective way to master how things work. 

Ask for help when you feel stuck/understand.

It's ok to take a break.

**Resources**

- [css-tricks](https://css-tricks.com/)
- [HTML cheat sheet](https://html.com/cheat-sheet/)

- [Learn HTML basics](https://webdesign.tutsplus.com/courses/start-here-learn-html-basics)

- [Practice flexbox](https://flexboxfroggy.com/)
O uso de NodeJS por iniciantes
Published: 2021-11-29 19:42:45

Olha só quem está aqui, e dessa vez é para falar um pouco sobre NodeJs! Essa tendência que cada vez mais empresas estão adotando em seus projetos, uma potência para suas aplicações!
Porém... Por que iniciantes no mundo da programação devem ter um cuidado redobrado?

Bora ver!

Eu sei que todos vocês vão pensar que é outro artigo criticando ExpressJS, mas devo dizer antes de ler este artigo, minha única intenção é orientar iniciantes ou alguém que está tentando usar / mudar para Node.js. 

Existem muitos artigos na Internet que também dizem a mesma coisa. No entanto, estou compartilhando minha experiência que servirá como um guia para iniciantes para evitar o mesmo erro que cometi.

O ExpressJS não lançou nenhuma atualização a tempos e, ao mesmo tempo, o NodeJs foi continuamente atualizado para oferecer suporte aos recursos Ecmascript mais recentes. Existem muitas falhas no ExpressJS, por exemplo você só pode obter roteamento com ExpressJS, mas você precisa de mais do que roteamento em estrutura da web, que você teria que integrar sozinho ao criar um aplicativo que, em minha opinião, não é muito amigável para iniciantes, por exemplo, acessar um banco de dados, etc. 

Se você tentar aprender NodeJs na Internet, verá um tutorial sobre ExpressJS em vez de NodeJs.

Então o que deveríamos fazer? 

Se você é iniciante, deve realmente tentar aprender os recursos do Nodejs como loop de evento, variáveis ​​globais, processo, módulo http, etc. 
Isso o ajudará a entender como o Node funciona por baixo dos panos.

Ainda uso ExpressJS? Hoje por conta da minha atuação como desenvolvedor Mobile, não estou utilizando. 
Ainda devo aprender ExpressJS? Bem, a resposta depende... Existem muitos outros frameworks NodeJS que são bem mantidos e fáceis de aprender.

Aqui há um artigo que mostra um pouco sobre isso!
https://www.simform.com/blog/best-nodejs-frameworks/

De forma clara e rápida, uma breve leitura para quem quer entender melhor sobre essa tecnologia!
Learning to Code and Thought Processes in the Brain
Tags: javascript, beginners
Published: 2021-11-29 19:39:31

A few months ago, I began my coding journey...

I hope you can remember the beginning of your personal coding journey. If it was anything like mine, it involved many late nights, online tutorials, the thrill of seeing no errors in the console, and the frustration of seeing many errors in the console.

I expected the highs and the lows.

I did not, however, expect to begin thinking in terms of JavaScript functions.

It first hit me when I woke up in the middle of the night, trying to remember if I had locked the door. In the past, my attempts to recall had been rooted in trying to retrieve specific memories: "Did I leave my keys in the door?" / "Did I even leave the house today?" 

But that fateful night, my groggy mind used another procedure to ascertain the door's state...

A function.

Something like this:

![Coding in a tired mind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/du9huyoqnmwylboho24l.png)

Admittedly, the function is neither elegant nor useful, but it illustrated to me how quickly programming alters the pathways in our minds. 

The next morning, I found this [article](https://hub.jhu.edu/2020/12/17/brain-activity-while-reading-code/) by Jill Rosen detailing a Johns Hopkins study that used fMRI scans to monitor the activity in programmers' minds as they read code. 

> Though researchers have long suspected the brain mechanism for computer programming would be similar to that for math or even language, this study revealed that when seasoned coders work, most brain activity happens in the network responsible for logical reasoning, though in the left brain region, which is favored by language.

This is consistent with [MIT scientists' findings as reported by Anne Trafton.](https://news.mit.edu/2020/brain-reading-computer-code-1215)

Programming brain activity does not conform to those consistent with math or language but rather activates the multiple-demand network, which is associated with complex problem-solving- not unlike figuring out if your door is locked at 3:00AM...

Happy coding.
Build Tic Tac Toe with JavaScript, HTML and CSS - Tutorial
Tags: javascript, tutorial, gamedev, webdev
Published: 2021-11-29 19:10:11

In this video we are going to make the classic game Tic Tac Toe using JavaScript HTML and CSS. Throughout this tutorial we will touch on many topics.  

CSS topics such as: How to create a Tic Tac Toe board using CSS grid layout. Css positioning with absolute. We will also be using flex layout in several areas of the application. 

JavaScript topics such as: How to access and manipulate HTML elements from JavaScript,  Arrow functions, destructuring objects, event handling(click event), arrays,  adding sound via the Audio class and much more.

I will also touch on a few productivity tips in VS Code such as multiple cursors and using the live server extension. 

I hope that you enjoy the tutorial. If you do please subscribe like and share.

{% youtube fPew9OI2PnA %}
How to resize your Instagram post design to Story size in Figma
Tags: figmaplugin, figma, uidesigner, socialmedia
Published: 2021-11-29 18:59:43

---
title: How to resize your Instagram post design to Story size in Figma
published: true
date: 2021-11-29 18:56:02 UTC
tags: figmaplugin,figma,uidesigner,socialmedia
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*CVNl0A0SiiG65NJ6.jpg)

Today, we’ll look at how to quickly resize our Instagram post design to story size faster using a Figma plugin called Thumblisher.

### What You Will Need

You’ll need the following resources to follow along with this Figma tutorial:

**Install Thumblisher Figma Plugin**

Before getting started, make sure to install Thumblisher Figma Plugin to your Figma editor to resize your social media graphics easily.

[https://www.figma.com/community/plugin/1037826586645134259/Thumblisher](https://www.figma.com/community/plugin/1037826586645134259/Thumblisher) 

**Download Exercise File**
To access the social media templates we’ll use in this tutorial, duplicate the Social Media Exercice File:

[https://www.figma.com/community/file/1045659071341514535/Social-Media-Exercice-File](https://www.figma.com/community/file/1045659071341514535/Social-Media-Exercice-File)

Find more resources on [https://www.captain-design.com/](https://www.captain-design.com/)

### Watch Video Tutorial

{% youtube ifKpw-XRxlg %}

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/how-to-resize-your-instagram-post-design-to-story-size-in-figma/) _on November 29, 2021._
Publishing shinny-ssg Nuget Package 
Tags: nuget, csharp
Published: 2021-11-29 18:45:58

In the last lab of OSD600, I have a chance to publish and release my static site generation application. I chose Nuget.org as my package registry. I have always loved Microsoft documentation as it is clear and easy to follow. This time, I simply followed their [instructions](https://docs.microsoft.com/en-us/nuget/nuget-org/publish-a-package) and got my package available [here](https://www.nuget.org/packages/shinny_ssg/).
## Pack 
To start, I needed to set the application's PropertyGroup in the project files
```XML
	<PropertyGroup>
		<OutputType>Exe</OutputType>
		<TargetFramework>netcoreapp3.1</TargetFramework>
		<RootNamespace>shinny_ssg</RootNamespace>
		<PackAsTool>true</PackAsTool>
		<PackageId>shinny_ssg</PackageId>
		<Version>1.0.1</Version>
		<Authors>Emily Phan</Authors>
		<PackageOutputPath>./bin</PackageOutputPath>
		<IsPackable>true</IsPackable>
		<RunPostBuildEvent>Always</RunPostBuildEvent>
	</PropertyGroup>
```
Then you can use the command  line to pack the package:
```bash
dotnet pack
```
This command generated a .nugkp in the `/bin` folder. 

## Publish
The next part is publishing the package to nuget.org. 
To prepare for that, I created a Nuget account and retrieved the API key. This key is used to identify your account to the Nuget Gallery.
After that, I ran this command to publish Shinny-ssg
```bash
dotnet nuget push shinny_ssg.1.0.1.nupkg --api-key <token> --source https://api.nuget.org/v3/index.json
```
And that was it, my tool was ready to use. 

## Testing
I asked one of my friends to test the tools. We have found a bug in my application. When she ran `shinny-ssg -v` , she got `Multiple options with name "v" found. This is usually due to nested options.` I realized that I did implemented the -v|--version twice and I did not specify it right in my Options class. I will fix this issue and update the version.

Publishing the package is a happy ending for the project I have worked on the last 2 months. After this, I understand more about a project's lifecycle: developing, testing and publishing.
Article on introduction to version control systems and ultimate HTML and CSS
Published: 2021-11-29 18:45:20

         Introduction to version control systems
  They are software tools that make it possible for the software team to track the changes made to the source code.
Version control systems records all the changes made to a file or set of files so a specific version maybe called later if needed in the future.
It is the responsibility of the version control systems to keep all the team members on the same page, it makes sure that everyone on the team is working on the latest version of the files and most importantly make sure that all theses people can work simultaneously on the same project.

     Benefits of version control systems 
1. It helps in management of the source code for the software team by keeping track of all the modifications that are being made to the code.
2. It protects the source code from any intended human error and consequences
3.it keeps record of all the modifications made to the code
4.it compares earlier versions of the code to help fix the mistake while reducing disruption to all team members
 
    Best versions of version control systems
 1. GitHub
 2. GitLab
 3.PerForce
 4.BeanStalk
 5.AWS CodeCommit
 6.Apache Subversion
 7.Team Foundation Server
 8.Mercurial
 9.Bitbucket
 10.Concurrent Version Control

     Ultimate HTML and CSS
  HTML is a Hyper Text Markup Language
    it is used to define the building blocks of the webpages.

 CSS is cascading style sheet
    it is used for styling webpages and making them beautiful.
Notification with Audio in JavaScript
Tags: html, javascript, notification, tutorial
Published: 2021-11-29 18:41:39

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/notifica%C3%A7%C3%A3o-com-audio-no-javascript-327791111e70)

We always need a feedback to our user about some information, whether it’s a finalized registration or something removed, and today one of the best ways to give feedback to our users is with notification, so let’s create a notification using javascript and stay more professional we will add an audio whenever the notification is called.

## Code

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

```html
<button>Click here</button>
```

To display our notification, let’s just create one button.

```javascript
const buttonEl = document.querySelector("button");

const title = "Success";
const msg = "Message";
const icon = "https://via.placeholder.com/50x50";
const song = "notification.mp3";

buttonEl.addEventListener("click", notifyMe);

function notifyMe() {
  if (!("Notification" in window)) {
    alert("This browser does not support Desktop notifications");
  }
  if (Notification.permission === "granted") {
    callNotify(title, msg, icon);
    return;
  }
  if (Notification.permission !== "denied") {
    Notification.requestPermission((permission) => {
      if (permission === "granted") {
        callNotify(title, msg, icon);
      }
    });
    return;
  }
}

function callNotify(title, msg, icone) {
  new Notification(title, { body: msg, icon: icone });
  new Audio(song).play();
}
```

In our javascript code we have our constants that have the message title, the message an icon and an audio file.

For the notification, a function called **notifyMe** was created that will be executed whenever we click on the button.

In the **notifyMe** function, we first check if the browser supports notification, then we check if the user has already allowed to be notified, and if not, then we check if he hasn’t denied it either, and then the notification api itself makes the request to the user checking whether or not he authorizes the sending of notification.

Finally, we have the **callNotify** function in which the notification is displayed with the title message and icon that we defined, and we still use the browser’s own audio api so that whenever this function is called, play in the audio file.

ready simple like that.

## Demo

See below for the complete working project.

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

_if you can't see it [click here](https://codepen.io/WalterNascimento/pen/KKmVXQd) and see the final result_

## Youtube

If you prefer to watch it, see the development on youtube.

{% youtube Lig_iQCeyS4 %}

***

## 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 later! 😊😊

***

## Support Me

[Youtube - WalterNascimentoBarroso](https://www.youtube.com/channel/UCXm0xRtDRrdnvkW24WmkBqA)
[Github - WalterNascimentoBarroso](https://github.com/walternascimentobarroso)
[Codepen - WalterNascimentoBarroso](https://codepen.io)
Docker Compose - Kafka simples
Tags: docker, linux, beginners, tutorial
Published: 2021-11-29 18:38:51

Olá meu pessoal bom de papo, tudo bão?:grin: Vim aqui com um script que aprendi para poder fazer um trabalho da faculdade usando Kafka e Python, quem sabe faço outro artigo mostrando como conectei e criei os consumers e producers usando Python.

Bem é um script com intuito de ser simples, pois a maioria dos que eu vi eram um pouco complicados e com outras ferramentas das quais eu não necessitava.

Na versão final só deixei o Zookeeper usado no kafka para fazer com que tudo trabalhe em conjunto de forma correta, o Kafka em si, e uma dash para ver melhor o que está acontecendo (isso ajuda muito) sendo possível de acessar pelo navegador no endereço `localhost:8080`

## Script :bookmark_tabs:

``` yaml
version: '3'
services:
  zookeeper:
    image: confluentinc/cp-zookeeper:latest
    environment:
      ZOOKEEPER_CLIENT_PORT: 2181
      ZOOKEEPER_TICK_TIME: 2000
    ports:
      - 2181:2181
  
  kafka:
    image: confluentinc/cp-kafka:latest
    depends_on:
      - zookeeper
    ports:
      - 29092:29092
    environment:
      KAFKA_BROKER_ID: 1
      KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
      KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://kafka:9092,PLAINTEXT_HOST://localhost:29092
      KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: PLAINTEXT:PLAINTEXT,PLAINTEXT_HOST:PLAINTEXT
      KAFKA_INTER_BROKER_LISTENER_NAME: PLAINTEXT
      KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1

  kafka-ui:
    image: provectuslabs/kafka-ui
    container_name: kafka-ui
    ports:
      - "8080:8080"
    restart: always
    environment:
      - KAFKA_CLUSTERS_0_NAME=local
      - KAFKA_CLUSTERS_0_BOOTSTRAPSERVERS=kafka:9092
      - KAFKA_CLUSTERS_0_ZOOKEEPER=zookeeper:2181
```

### Algumas observações:exclamation:
O **kafka** está exposto na porta 29092 então quando for conectar coloque para conectar nesta porta em localhost.
Se for fazer alguma mudança cheque se as conexões entre os serviços estão funcionando, por exemplo, se mudar a porta do kafka será necessário alterar tanto no *kafka-ui* quanto no *zookeeper*

E por hoje é só pessoal! tchau :wave:
Creating a custom VSCode Terminal Profile for using Rosetta on an M1 Mac (Apple Silicon)
Tags: vscode, bash
Published: 2021-11-29 18:29:45

## Why do this?

Many programs and packages still do not support the ARM architecture used on the new Apple M1 chip.
If you are a developer dealing with older codebases, you may have already had issues installing npm dependencies or running specific tools.

Luckily, Apple provides us with the [Rosetta](https://support.apple.com/en-us/HT211861) emulation layer.
It enables us to emulate the x86 architecture to run all the programs made for older Macs, with a little performance decrease when compared to apps optimized for M1.

## Rosetta Terminal

When installing build tools like CocoaPods, you have to run your whole terminal session with Rosetta enabled.

A prevalent practice to achieve this is to create a copy of the Terminal.app, click "Get Info" and enable the flag "Open using Rosetta". Now you have a second terminal that is always running as Rosetta.
![RosyTerm copy of Terminal app using Rosetta](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/noy7hict7wowtefyc7uk.png)
 
## How to do this in VSCode

I very much enjoy using the integrated Terminal in VSCode because I don't have to switch windows so often and can continue coding while running processes like building my app or installing dependencies.

How to create a custom terminal profile:
- Open Visual Studio Code
- Use `cmd+shift+p` to open the Command Palette.
- Type "Open Settings (JSON)" and press enter
- In the settings.json file, search for the property `terminal.integrated.profiles.osx`, it should look similar to this: 

    ```
    "terminal.integrated.profiles.osx": {
        "bash": {
        "path": "bash",
        "args": ["-l"],
        "icon": "terminal-bash"
        },
        "zsh": {
        "path": "zsh",
        "args": ["-l"]
        },
        "fish": {
        "path": "fish",
        "args": ["-l"]
        },
        "tmux": {
        "path": "tmux",
        "icon": "terminal-tmux"
        },
        "pwsh": {
        "path": "pwsh",
        "icon": "terminal-powershell"
        }
    }
    ```

- Add this property:

    ```
    "terminal.integrated.profiles.osx": {
     ....,
      "rosetta": {
        "path": "arch",
        "args": ["-x86_64", "zsh", "-l"],
        "overrideName": true
      }
    }
    ```

- Save the file

**Tada! You now have a dedicated rosetta Terminal profile in VSCode**

Click the dropdown arrow at the right side of your VSCode terminal. You should see the option "rosetta".

![Rosetta profile in terminal dropdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udj6pmf4jvehywq3u2b7.png)
 
If it doesn't work or you have anything else you want to tell me, feel free to hit me up anytime on [Twitter](https://twitter.com/markwitt_me).
How To Improve Your Productivity.
Published: 2021-11-29 18:08:32

I have been struggling to get things done because of procrastinating and a lack of self-discipline.

I decided to bring that to an end and research ways I could improve my productivity to get more things done.

I discovered some of the methods I have been using and that you too can use to beat procrastination, build self-discipline and get more things done.

 

### 1. The 20/20/20 Formula

This is a morning routine I have installed in my life to help me manage my mornings.

It involves dividing the first hour after waking up into three sections of twenty minutes each.

The first twenty minutes of the formula require that you move.

It involves doing some exercise or workout first thing every morning.

This will revolutionize the quality of your days.

The second twenty minutes are supposed to be for reflecting, praying, meditating, or planning for the day.

This will help you boost your self-awareness, dissolve stress, fuel your happiness and restore your inner peace.

The third twenty minutes are centered around ensuring that you are inspired or motivated.

Use this time to watch or read something that inspires you or motivates you to go for what you want for yourself in life.

### 2. The 90/90/1 Rule

This rule suggests that for the next 90 days, schedule yourself to invest the first 90 minutes of your workday on one activity that when completed at world-class, will cause you to own your field.

This 90-minute period must be completely free of any noise and interruptions.

### 3. The 60/10 Method

This method suggests that you work at your best for 60 minutes straight while sitting or standing quietly.

Just concentrate and create the highest results you can possibly make.

After your 60-minute productivity sprint is done, refuel for 10 minutes.

Start over again and repeat.  

### 4. The Daily 5 Concept

This concept suggests that you list five things you wish to accomplish over the day.

Start with the most important thing that needs to get done and move in that order.

This will help you feel that your day was one that was well spent.

### 5. The Weekly Design System

This system suggests that you set aside 30 minutes early each Sunday morning to create your "Blueprint for a beautiful week."

Start the process by reflecting on the highlights from the just-finished week. 

Then record the lessons you learned and improvements for making the coming week.