teleren/devto huggingface dataset:
Server, Web Server & HTML
Tags: html, servers, webdev, beginners
Published: 2022-11-06 04:30:00


## What is a Server?

> Program that provides the service to the other computers.
In this case the other computers can be also called as clients. And the term **servers** is being referred to where the request is being  received for web file and being sent back to client.

 

- As they are constantly providing the service they can't be shut down else there would be service interruption.

- Below are some  the examples for servers 

    1. Application server
    2. Blade server
    3. Cloud server
    4. Database server
    5. Dedicated server
    6. Domain name service
    7. File server
    8. Mail server
    9. Print server
    10. Proxy server
    11. Standalone server
    12. Web server 


## Web Server

> The term web server refers to both hardware or software or both working together.



There are 2 type of web servers
 1. Static web server (Server the static sites) and 2. Dynamic webserver (Server the dynamic sites).

All the communication takes place with the help of protocols which are nothing but the set of instructions. 


## HTML Tags

There are total 6 levels of heading from H1 to H6.

```
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
```

However because of accessibility concern we should not skip the sequencing of these tags.


## Not Recommended 

```
<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
```

## Recommended

```
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
``` 

## The Anchor element

Syntax: ```<a href="destination_url">label</a>```

- This element or tag creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

- This element has a attributes, download, href, hreflang, ping, referrerpolicy, rel, target, type.

> To link the phone number 
  ```<a href="tel:+91 125466555">Call Us</a>"```
  o/p: <a href="tel:+91 125466555">Call Us</a>

> To link email
   ```<a href="mailto:test@gmail.com">Email</a>```
   o/p: <a href="mailto:test@gmail.com">Email</a>

- We can also enclosed the ```<a>``` tag withing other tags/elements like ```<p>, <strong>``` etc. and some tags within it as well.

- And we use **target** attribute to open the links in new tab.

Ex: 

```<a target="_blank" href="https://www.test.com">Test</a>```
This will open the link in the new tab.
Recommended VSCode extensions for use with React and TypeScript　
Tags: vscode, typescript, react, javascript
Published: 2022-11-06 04:04:04

There are a lot of extension in vscode.
I will introduce only five first.


## 1. [TypeScript Importer](https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter)


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

When you type in some code and it will automatically 
import the modules in .ts, .js, .tsx, etc.

You should install it definitely at first if you write TypeScript.


## 2. [JavaScript and TypeScript Nightly](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next)


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

It can enables the nightly build of TypeScript.

What is the nightly build?

>A daily build or nightly build is the practice of completing a software build of the latest version of a program, on a daily basis. This is so it can first be compiled to ensure that all required dependencies are present, and possibly tested to show no bugs have been introduced. 


## 3. [Move TS - Move TypeScript files and update relative imports](https://marketplace.visualstudio.com/items?itemName=stringham.move-ts)


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


Extension for moving typescript files and folders and updating relative imports in your workspace.

if you move the file location, then it will change all relative paths automatically.


## 4. [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)


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

If you normally use vscode, perhaps you already have it installed.
Prettire is a code formatter. It understands your code and formats it according to the rules you set.


## 5. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)


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

Here is the last one.
When you are writing HTML or JSX in React, have you ever wanted to rename a tag or typoed it?

In such a case, it would be so tedious to modify both the start and the end of each one.

With this extension, you are free to modify only the start and even the end tag.

## Conclusion
In this article, we have mainly focused on TypeScript functions and the extensions that we would like to introduce first.
By using VScode extensions, you can dramatically increase your development efficiency.
We hope you will try using them.

Thank you <3
Stairs Problems
Tags: godot, gamedev
Published: 2022-11-06 01:54:44

Stairs are a challenge for me in this game. I want the sprites to have a way to get to other floors without only using the hammer to punch a hole. Stairs seemed like an obvious solution. I originally thought that since I have left and right moving sprites on a slightly different z position that just having the stairs in that same orientation for up and down would "just work". I had not considered how sprites would react when they encountered the staircase from the wrong side. I chose to just have them ignore the stairs unless they run into the staircase from the expected direction. This seems to work, but I won't be able to double up two staircases as pictured below and have a sprite travel from the third floor all the way down to the first since they will always run into the "up" staircase whenever they are walking left. I might just decide to live with this quirk and make sure that my levels are built in a way that this isn't a problem.

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

There is something weird with the speed of the sprites walking down the stairs. I'll need to investigate the physics parameters that might cause this (friction?).

To get the stairs to work, I had the opportunity to implement adding props to rooms. I'm hoping to make some lockers and other interesting features for the school that this game takes place in. 

Next up:
- Fix stair walking speed
- Add ability to launch a sprite over something in a room (hole or stair opening)
- Add ability to break hole in left or right wall
"Smart" JavaScript Delivery, Qwik + React in one?
Tags: javascript
Published: 2022-11-06 03:22:40

What if there was a meta-framework with the best of Qwik and React / Next.js? What if the delivery mechanism for html and javascript was automatically decided for you based on how users interact with your site? Say you have a webpage with a simple button. 

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

What if the system knew 79% of the people who landed on this page would most-likely end up clicking the button and loaded it? Conversely if on 15% clicked it it would not send the javascript down when the page loaded.

Is there a possibility in the future the javascript delivery mechanism wouldn't be something the programmer has to think about, the optimizations when it comes to code-splitting could be determined using algorithms, machine learning, user interaction patterns?
Building a stack
Tags: node, ejs, css, express
Published: 2022-11-06 03:10:27

Building a stack for data rendering and handling seemed like they all follow the same MVC structure. I might be wrong about that but it's the same idea but structured differently. Building an Express app is kind of similiar to the way you would with React, but not quite the same as Angular's build. Almost the same as asp.Net Core's MVC, or at least the same principle.

When I learned the basics and learned how to build with Node and express for a full stack application, it opened my eyes to how it's done. I have built MERN apps and Express Apps as a freelancer since then, sometimes WordPress or shopify. Although I don't like using those because I don't feel creative when using platforms to piece together content, but if it what the client wants and they pay for it.

This recent period of time seemed to have slowed down with website creations or even maintenance on existing ones.  Have any of you experienced this too or is it just my area? Even with referrals, when I did get some, it slowed down to. What I do during that time is keep learning new techniques and creating courses to sell, so I don't lose skills I learned either.

My recent portfolio if anyone wants to critique or make suggestions, 

https://stephens-webapps.herokuapp.com/
Retina background images with Tailwindcss
Tags: retina, tailwindcss, images
Published: 2022-11-06 02:45:12

How do you use and test retina background images in tailwindcss?
I am writing: bg-[image-set(url(/assets/Home.jpg)_1x,url(/assets/Home@2x.jpg)_2x,url(/assets/Home@3x.jpg)_3x)], for example, but the images are ignored during the build (using vite.js).
vite.js errors in tailwindcss production builds
Tags: tailwindcss, vitejs, retina
Published: 2022-11-06 02:40:21

I am using vite.js as the development platform for tailwindcss. When I build the website it doesn't process multiple files: 1. image files in slider.js slideshows (it seems to process small shows - 5 slides); 2. it doesn't process pdfs and some audio files that are linked to the site; 3. it ignores the combinations of background images prepared for retina displays.
Recriando o jogo Freeway com boas práticas de programação
Tags: javascript, programming
Published: 2022-11-06 02:29:31


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

## Introdução

O objetivo desse pequeno projeto é entender a importância de utilizar boas práticas de programação, na manutenção do código e a legibilidade do mesmo para outras pessoas. No decorrer do projeto utilizei a estrutura de lista para armazenagem das minhas variáveis e passagem por indíce, como também laços de repetição e decisão

Ao longo desse projeto, percebi que o arquivo principal (sketch.js) acabou ficando extenso demais e um pouco confuso para realizar manutenção. Primeiro objetivo foi fazer rodar, entretanto acabei me perdendo na medida que fui adicionando novos elementos para o projeto, resolvi então descentralizar a responsabilidade em códigos separados para cada objetivo. Com a utilização de listas consegui enxugar meu código, evitando chamar funções quase idênticas, após a refatoração do código ficou assim :)

## Utilização de listas e laço de repetição

Nessa situação temos o arquivo carro.js onde tenho 3 objetos carro. Inicialmente sem a utilização da lista tive que criar uma variável `x` e `y` para cada objeto, uma função chamando cada objeto, mas porquê não passar tais parâmetros em uma lista ? Dessa forma consegui economizar algumas linhas do meu código e consequentemente espaço em memória.

Listas com as variáveis dos objetos.

```javascript
let xCarros = [600, 600, 600, 600, 600, 600];
let yCarros = [40, 96, 150, 210, 270, 318];
let velocidadeCarros = [2, 2.5,  3.2, 5, 3.3, 2.3];
let comprimentoCarro = 50;
let alturaCarro = 40;
```

Com a utilização do `for` consigo executar as variáveis de todos os meus objetos, onde estou incrementando para a minha variável `i`,enquanto a mesma for menor que a quantidade de elementos da variável `imagemCarros` e por fim verifico a veracidade da minha função `passouTodaATela` através do laço `if`, retornando verdadeiro meu objeto retorna para o início de sua posição `x` 

```javascript
function voltaPosicaoInicialDoCarro(){
  for (let i = 0; i < imagemCarros.length; i++){
    if (passouTodaATela(xCarros[i])){
      xCarros[i] = 600;
    }
  }
}
```



Disponível em:
https://github.com/jandersonsiqueira/freeway-js
Orderly Queue
Tags: leetcode, python, problemsolving
Published: 2022-11-06 01:45:36


You are given a string s and an integer k. You can choose one of the first k letters of s and append it at the end of the string..

Return the lexicographically smallest string you could have after applying the mentioned step any number of moves. 



```py

class Solution:
    def orderlyQueue(self, s: str, k: int) -> str:
        if k == 1:
            return min(s[i:] + s[:i] for i in range(len(s)))
        else:
            return ''.join(sorted(s))
        

```
Challenge - Study Group - ES6 (Modern Javascript)
Published: 2022-11-06 01:32:39

Challenge - Study Group - ES6 (Modern Javascript)
repository link: https: [Challenge-I](https://github.com/AlexxMotta/Desafio-JavaScript-ES6)

I started in a study group with my colleagues about the ES6 JS, yesterday on Friday we had our first meeting.
The first challenge was to build a simple Javascript code to practice where to use arrow functions and where to use normal functions.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/murwkdrgndw1gzyehi5b.png)
Google Docs no longer take free spaces in Google Drive
Tags: google
Published: 2022-11-06 01:27:44

---
title: Google Docs no longer take free spaces in Google Drive
published: true
description: Your Google Drive is "smaller" now since Google is counting your Google Docs into total spaces
tags: google
cover_image: https://www.reviewgeek.com/p/uploads/2022/05/e0e35369.png?width=1200
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-06 00:38 +0000
---

Everyone believes that their Google Docs sizes are not counted into the total 15G free spaces allocated, but it is no longer true!!

I found out today and it is quite a surprise to me and I have to triple-validate it before posting it here.

Google never said anything about it and it seems that most people aren't unaware of such new situation. Take [this article](https://www.reviewgeek.com/117723/heres-how-you-can-free-up-more-space-in-google-drive/) for example, which is only published this year at MAY 25, 2022, still believe otherwise:

> **These Things Do Not Count**
> 
> Google _does not_ count any word documents you create in _Google Docs_, any spreadsheets from _Google Sheets_, any presentation slideshows from _Google Slides_ (thankfully), any forms or surveys from _Google Forms_, or any information for Google Sites. 

Moreover, as of Saturday, November 05, 2022, this is what wikipedia says about [Google Drive](https://en.wikipedia.org/wiki/Google_Drive):

> Google gives every user 15 GB (1 GB = 1 billion bytes) of free storage through [Google One](https://en.wikipedia.org/wiki/Google_One). [Google Docs](https://en.wikipedia.org/wiki/Google_Docs), [Google Sheets](https://en.wikipedia.org/wiki/Google_Sheets) and [Google Slides](https://en.wikipedia.org/wiki/Google_Slides) files _do not_ count towards the storage limit.[<sup>\[35\]</sup>](https://en.wikipedia.org/wiki/Google_Drive#cite_note-:1-35)

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

YET, they ***do*** _now_! 

Be aware!
Adding Upsizer to axi_stream_width_converter
Tags: fpga, opensource, vhdl, axi
Published: 2022-11-06 01:02:08

Today we started working on adding the upsizer case (where output bus width is larger than input bus width) to the axi_stream_width_converter in Andre Suoto's fpga_cores repository. 

See the debris field here:

https://github.com/Abraxas3d/fpga_cores

Join or follow along with all our fun at https://openresearch.institute 

:D
Cognifit Brain Games | Best Online Platfrom
Tags: games
Published: 2022-11-06 00:36:41

Cognifit [brain games](https://www.cognifit.com/brain-games) take advantage of the unique cognitive strengths of each learner, empowering them to find their gifts and use them to supercharge learning. Cognifit has perfected an unmatched suite of brain-enhancing games that help all learners, from beginners to professionals, to find their cognitive strengths.
Joined Mastodon
Tags: writing
Published: 2022-11-06 21:37:28

---
title: Joined Mastodon
published: true
date: 2022-11-06 00:00:00 UTC
tags: writing
canonical_url: https://programmerdays.com/2022/11/06/Joined-Mastodon/
---

I just joined [Mastodon](https://joinmastodon.org/).

Twitter is in a point of transition. It got bought, lots of folks were laid off, and major changes were announced. Most people are predicting doom and gloom. And as people worried about the end of twitter, I heard about the app “Mastodon” a bunch of times. So, I decided to try it out. After some pointing and clicking I created a new account.

https://mas.to/@danhan01010

My tentative plan is to just post to it regularly. I will try to get out of my way and just post things. In my bio, I said I’ll be posting “half-baked ideas”. I could then look through old posts and expand on them as more fully baked blog posts.

Let’s see how this goes.
True or False?
Published: 2022-11-05 23:56:54

In one of our class projects we need to be able to show whether or not a users' account is private or not.  To do this I chose to use an if/else statement and used the logical operator && (and) to check if the user whose page we are on is private by writing 

```ruby
 if @the_user.private && "false" 
    <dd>true</dd>
else
    <dd>false</dd>
```
@the_user is an instance variable in this ruby code that returns the user whose page we are currently on, private is one of the columns in our Users table from our database that stores the boolean value that we compare with "false" thus getting the correct return value.
Days 1-34 / #100daysofcode
Tags: 100daysofcode, nextjs, webdev, blog
Published: 2022-11-05 23:06:04

## Past

Overall in this period of time, I devoted time into learning NEXTJS, which I would say is successful. I learned how to use a API and use Firebase for databases, I have made various projects to learn more about NEXTJS.

**My favorite ones are:**


- **Meal Saver:** For this project, I decided that I would use an API and Firebase. I used the API to get data and used Firebase so that the user could log in and save recipes and cocktails. I decided that I would do the Meal Saver project so that I could learn how to use an API and Firebase. This was the first project I did with Firebase, which was easy because of the clear documentation.


- **Todo List:** For the to-do list decided to use Firebase and Bootstrap. For this project specifically, I did not want to do a lot of styling, so I decided to use bootstrap. I used Firebase to save tasks, and their description and toggle completed and uncompleted tasks. The main goal of this project was to work on my NEXTJS and Firebase skills. The overall goal was to make sure that I knew what I understood the basics.



- **Job Saver:** I used Firebase for this project, which was quick. I decided to do this project just so that it would be easier to save data about a job on a website. This website was so useful to me that I decided to add user authentication and deploy it so everyone could use it.


## Present

Since I have proved to understand most of NEXTJS I have decided that I would start learned NodeJS and MongoDB. I have started the basic parts of my big project which will be presented in the next part.

## Future

The big project that I plan to work on was inspired by a lesson that I had in engineering class. Our class decision was about how people purchase ideas from others. The entire day I thought about how hard it is to come up with ideas sometimes or how other people need help executing the ideas. So I decided that I would create a website where people post their ideas on the web, then people who need help with coming up with an idea can then come to this website and contact the person about the idea.
## Highlights

A highlight of this experience would be using Firebase. I love how easy it is to get started with it and how beginner friendly Firebase is. I have been using Vercel to deploy the website and learned Git to help with deploying the website. I found some jobs that I would be qualified for if I was of legal age and not in high school. [Click here to see the job!](https://www.showwcase.com/job/5366-web-developer) Thank you guys for reading and I plan to post in bulk.
Learning How to Learn
Published: 2022-11-05 22:52:29

When it comes to self-teaching it's often the case that you will fall into hours of unproductive study. It may even be the case that you have forgotten how to study completely! The three methods outlined below will get you back on track...


![unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xc8lwzjdyrwe6i2d3it2.jpg)

**What is chunking and why is it an effective learning technique?
**
Chunking is a learning technique that can help you better understand and remember information. By breaking down information into smaller, more manageable pieces, you can better process and recall the information. There are a few different ways to chunk information, such as using mnemonic devices or creating meaningful groups. Ultimately, chunking is an effective learning technique because it helps you process and recall information more effectively.


![unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il85o5kh6j3icb8fse5c.jpg)

**How can you use retrieval to improve your learning?
**
Retrieval is an important part of learning and can be used to help improve your memory. Here are some tips on how to use retrieval effectively:

Make sure to vary the types of retrieval exercises you do. This will challenge your brain in new ways and help you learn more information.

Use retrieval techniques when you are struggling with a task. By using strategies like mental imagery or flashcards, you can help yourself remember the information better.

Think about what you want to remember when trying to retrieve information. If you know the material very well, try using visualisation techniques or mnemonic devices to help yourself remember it better.

Be patient with yourself – learning something new takes time and practice! don't get discouraged if you find it hard at first; keep practicing, and eventually retrieval will become easier for you!


![unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jt4hbxkfpbexd2zf4ac6.jpg)

**Why is spaced repetition a powerful tool for learning?
**
Spaced repetition is a powerful tool for learning because it allows you to review information at increasingly longer intervals. By spacing out your review, you can better retain the information and have it available when you need it. Additionally, spaced repetition is a great way to learn new material, as it allows you to focus on one thing at a time and gradually build up your understanding. Finally, spaced repetition is flexible and can be adapted to suit your individual needs – so if you find yourself struggling with a particular concept, you can space out your reviews more frequently until you feel confident with the material.

I hope these methods prove to be beneficial on your self-taught journey, I wish you all the best and good luck with your studies!