teleren/devto huggingface dataset:
My Portfolio
Tags: portfolio, webdev, javascript, react
Published: 2022-01-20 07:13:14

this is my portfolio

check it now [Mishab-ka](https://mishab-ka.netlify.app/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kf3hmwdefp8bvsunfmws.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qa2a7almr4ze6v813kco.png)
HTTP 1.1 VS HTTP 2
Published: 2022-01-20 07:06:42


![HTTP 1.1 VS HTTP2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vilicnn4048dqt3smv1i.jpg)

HTTP/2 improved on HTTP/1.1 in a number of ways that allowed for speedier content delivery and improved user experience.

**Binary protocols:**
Binary protocols consume less bandwidth, are more efficiently parsed and are less error-prone than the textual protocols used by HTTP/1.1. Additionally, they can better handle elements such as whitespace, capitalization and line endings.

**Multiplexing:**
HTTP/1.1 loads resources one after the other, so if one resource cannot be loaded, it blocks all the other resources behind it. In contrast, HTTP/2 is able to use a single TCP connection to send multiple streams of data at once so that no resource blocks any other resource. HTTP/2 does this by splitting data into binary-code messages and numbering these messages so that the client knows which stream each binary message belongs to.

**Server push:** 
Typically, a server only serves content to a client device if the client asks for it. However, this approach is not always practical for modern webpages, which often involve several dozen separate resources that the client must request. HTTP/2 solves this problem by allowing a server to "push" content to a client before the client asks for it. The server also sends a message letting the client know what pushed content to expect – like if Bob had sent Alice a Table of Contents of his novel before sending the whole thing.

**Header compression:** 
Small files load more quickly than large ones. To speed up web performance, both HTTP/1.1 and HTTP/2 compress HTTP messages to make them smaller. However, HTTP/2 uses a more advanced compression method called HPACK that eliminates redundant information in HTTP header packets. This eliminates a few bytes from every HTTP packet. Given the volume of HTTP packets involved in loading even a single webpage, those bytes add up quickly, resulting in faster loading.

**Increased security:** 
Web browsers only support HTTP/2 via encrypted connections, increasing user and application security.
Building a Spotify that can interact with social media and we can upload song there
Published: 2022-01-20 06:57:13


[Connect me in 🤖 Instagtram](https://www.instagram.com/nop.__e_/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0fx6owq2eb57g7u1zoa.png)
How to create a list on HTML.
Tags: html, webdev, tutorial, css
Published: 2022-01-20 06:25:40

As you all know, HTML is the base of web development. It decides the structure of a website. Everything starts with HTML, followed by CSS for the designing, and JavaScript for the functioning of the website. Here, take a look at how to create a list in HTML.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7c8hj3q4wc5bfvs8u9sh.jpeg)

Always keep in mind that maintain a standard in coding. Don't mix up all the lines while coding. Reduce the use of too much comment in the code. I have seen that some people will write too much comment in 3 or 4 lines. That is totally unnecessary. If you really want to add a comment, conclude it in 1 or 2 lines.

Save this post, and make sure to check out all the useful contents for web development in this page.
Happy coding!
Top 3 Code Editors you should use (According to your needs)
Tags: discuss, programming, productivity
Published: 2022-01-20 05:58:36

#Intro
Sorry for the late post, I got unwell for a week and after recovering my mind didn't gave me any idea so that's why this post got late and also in mean time I got to see that we are just **3 followers short from 100 followers** so can we get just 3 followers from this post ?
And also please do comment down that what should I write in next post or suggest me something or tell me something I can improve .

Now, lets get to the point; so in this post I will suggest you some code editors you should use according to your needs. So let's get right into it.


# #1 VS-CODE
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6he9du0ipvkty6xuww06.png)
So basically VS Code is the editor I personally also use it is superb in performance and code writing as it comes with many extensions you can download. It also has in built features which helps a lot and I would recommend this Code Editor to **those people who want to get in the field of programming and want to learn languages like HTML,Python,Java etc as the User interface (UI) seems complicated for beginners who don't know what are extensions or they don't have much knowledge about IDEs.**
You can download this IDE from [here](https://code.visualstudio.com/download) and select your computer architecture and then download the installer.

# #2 Sublime Text / Notepad++
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j37rfbakp0xorf9421zo.png)
Actually there is almost no difference between Sublime Text and Notepad++ only main differences which I see are in the UI and some features only In UI wise I would suggest Sublime text and features wise I would suggest Notepad++ as it has many features that Sublime Text offers in it's paid version. Also many people suggest atom as a good IDE I personally don't recommend Atom as it comes no where in the comparison. **So I would recommend Sublime Text/Notepad++ to those people who needs a editor which is better than notepad for school projects , the thing I want to say is that Sublime text and notepad++ are for those who want and editor just for sake of school project or mini projects.**

Download Sublime Text [here](https://download.sublimetext.com/sublime_text_build_4126_x64_setup.exe)
Download Notepad++ [here](https://github.com/notepad-plus-plus/notepad-plus-plus/releases/download/v8.2/npp.8.2.Installer.x64.exe)


So that's it for today I hope you enjoyed this post. 
_We will meet in the next post till then Stay safe and do take very good care of yourselves._

**Singing off,**
_Potato Pie_
Learn Elixir with my free series
Tags: elixir, programming
Published: 2022-01-20 05:54:07

I have been coding with Elixir for the last four years after spending many years coding with Ruby on Rails, Javascript and other languages.

I would say that Elixir is an awesome programming language that is fast, scalable, and elegant. It's currently my favorite and I would highly recommend that you give it a shot.

I have created a free Series on CodeCast to get you started: [https://www.codecast.io/series/58-intro-to-elixir ](https://www.codecast.io/series/58-intro-to-elixir)

It's ideal for anyone who know another programming languages because I don't go into things such as what is a variable and what is a function. I assume you have some idea about such things.

Take a look!

I would love to have your feedback on it.
JS Event Loop and Call Stack
Tags: javascript, webdev, beginners, programming
Published: 2022-01-20 05:35:02

Hello everyone 👋, I hope you are doing great.

So, today you are going to learn An Overview of what JavaScript event loop and call stack are, and how JavaScript work visually.

Many JavaScript developers don't know how JavaScript works. If you are new to JavaScript, then this article will help to learn how JavaScript works.

⚙️ **JavaScript Engine**
The JavaScript engine is a program that executes your JavaScript code. A popular example of a JavaScript engine is Google's V8 engine.

⚙️ **V8 Engine**
The V8 engine is an open-source, high-performance JavaScript and Web Assembly engine written in C++. The V8 engine is used inside Google Chrome, Node.js, and electron, among others.


**Event Loop** : _The event loop is the secret behind JavaScript’s asynchronous programming. JS executes all operations on a single thread, but using a few smart data structures, it gives us the illusion of multi-threading. Let’s take a look at what happens on the back-end._

**Call Stack** : _The call stack is responsible for keeping track of all the operations in line to be executed. Whenever a function is finished, it is popped from the stack._

![Image of call stack and it's function push and pop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zkazqq7fx5sykqecl06.png)
 
**Event Queue** : _The event queue is responsible for sending new functions to the track for processing. It follows the queue data structure to maintain the correct sequence in which all operations should be sent for execution._

![Image of a queue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajsp1lwhphv7t2dhvdaq.png)

Whenever an async function is called, it is sent to a browser API. These are APIs built into the browser. Based on the command received from the call stack, the API starts its own single-threaded operation.

An example of this is the setTimeout method. When a setTimeout operation is processed in the stack, it is sent to the corresponding API which waits till the specified time to send this operation back in for processing.

Where does it send the operation? The event queue. Hence, we have a cyclic system for running async operations in JavaScript. The language itself is single-threaded, but the browser APIs act as separate threads.

The event loop facilitates this process; it constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.

![whole diagram of JavaScript environment ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuzsf8e6r06p3v1mmxtw.png)

Thanks for reading! My name is Surajit Shaw; I love to share my learning with others. You can follow me on [Twitter](https://twitter.com/SURAJIT__SHAW) if you’d like to learn about web development and JavaScript.

Here's a link where I explain how JavaScript work much briefly [Understanding of JavaScript Function Executions.](https://twitter.com/SURAJIT__SHAW/status/1484022930833313792?s=20)
My resume 
Published: 2022-01-20 05:23:02

This is my resume

[click here 📍](https://storage.cloudconvert.com/tasks/a601474b-6a6e-4af1-95ce-eac291c9827e/Web%201920%20%E2%80%93%203.pdf?AWSAccessKeyId=cloudconvert-production&Expires=1642741465&Signature=VMEoViYfwgVMXseqWFpxFUNd8SQ%3D&response-content-disposition=attachment%3B%20filename%3D%22Web%201920%20%3F%203.pdf%22%3B%20filename%2A%3DUTF-8%27%27Web%25201920%2520%25E2%2580%2593%25203.pdf&response-content-type=application%2Fpdf)
How to Use CIFS to Mount a Windows Share on Linux
Tags: diyelectronics, linux, windows
Published: 2022-01-20 05:06:20

A Windows share can be mounted on a specific mount point in the local directory tree using the cifs option of the mount command on Linux and UNIX operating systems.
https://shopmakergenix.blogspot.com/2022/01/how-to-use-cifs-to-mount-windows-share.html
Pico Zero RP2040 : RP2040 Based Board on Pi Zero Form Factor
Tags: pico, raspberrypi, rp2040
Published: 2022-01-20 05:03:39

RP2040 Chip | Micro-SD Card Slot | 64 MB Flash Memory | Two Buttons | Micro-USB Power Supply Port | Standard Raspberry Pi 40 Pins https://bit.ly/3Kj3HfF
How to install tailwind Css (Fast and Easy)
Tags: tailwindcss, css, uiweekly, javascript
Published: 2022-01-20 04:51:58

## 
here is the link to the video [Watch Video here](https://www.youtube.com/watch?v=cqwkhPwMTeM) ...it's straight to point.
please, do not forget to subscribe
Help my Channel grow :blush: :pray:

**step 1**
make sure you download and install **nodejs** if you haven't
use this link [download NodeJs](https://nodejs.org/en/)

**step2** 
create a new folder called **tailwindproj** (you can call it anything you like)

**step 3**
open the project folder in your code editor (I am using Vs Code)
and **open a new terminal**

**step 4**
copy and run the following command into your terminal

```html
npm init -y

```
**step 5**
```html

npm install -D tailwindcss

```

**step 6**
```html

npx tailwindcss init

```

**step 7**
copy and replace the command in "tailwind.config.js" file with the command below
```html

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}


```
**step 8**
-create a new folder called "**src**" inside your project folder
-create a file called "**styles.css**" inside the **src** folder

**step 9**
copy and paste the code below inside the **styles.css** file created

```html
@tailwind base;
@tailwind components;
@tailwind utilities;
```
**step 10 **
paste and run the code below in your terminal

```html
npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch
```

**step 11**
A new folder called "**public**" is automatically generated after running the command above
-create a new html file "**index.html**" for your project inside the folder "**public**"

**step 11**
link the generated css file (**styles.css**) to your project.

your project should basically look like this now
![from unsplash](https://res.cloudinary.com/dhmvn4nnf/image/upload/v1643207433/project-structure_zg0ksq.png)

step 12
reload your project and that's it. 

here is the link to the video [Watch Video here](https://www.youtube.com/watch?v=cqwkhPwMTeM) ...it's straight to point.
please, do not forget to subscribe
Help my Channel grow :blush: :pray:
thaaaank you sooo much :blush:
3 Integration Testing Tips For Developers To Release Software With Confidence
Tags: testing, programming, codequality, devrel
Published: 2022-01-20 04:40:49

Earlier, we discussed [the thumb rules of unit testing.](https://dev.to/talina/thumb-rules-of-unit-testing-45of)

Unit tests form the first level in the [Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html) - we achieve faster results by assuming behaviour for all external boundaries.

Integration tests are a step ahead - they sufficiently test the communication over these external boundaries.

Here are 3 things developers should keep in mind while writing integration tests.

---

## #1 Deconstruct The External Interactions

Allow integration tests to be [_narrow_](https://martinfowler.com/bliki/IntegrationTest.html).

> _Integration tests validate if two separately developed units work well together._

We can allow integration testing to be white-box if we test each integration point at a time.

**Example: An application interacts with a database and an external API service.**

Integration testing for database interaction - 

1. Start a database.

2. Invoke the code that performs database operations.

3. Validate the operations were successful.

The integration test can mock all other external interactions as it only tests database interactions.

> _Narrow integration tests test for one integration point at a time._

---

## #2 Use Local Environment

We don't need to initiate an entire stack to run integration tests if they are narrow.

All external services should be set up locally so that integration tests can be run during the development phase and reduce any operational hassles.

> _A local setup makes integration tests fast and easy to run -  they can be added to the build pipeline with ease._

Example: A single deployment file that spins up services on your laptop using an orchestrator such as "docker".

> _A local setup makes integration tests more deterministic - we remove network failures._

---

## #3 Test Doubles Are Acceptable

External services don't always imitate exact behaviour in a local environment.

The local instance could be unofficial or mismatch the latest versioned behaviour.

In such a case, we should opt for mocking the service at the last level of interaction by using appropriate test doubles.

These test doubles guarantee that the [public interfaces](https://martinfowler.com/ieeeSoftware/published.pdf) work as expected.

> _Narrow integration tests validate clients not servers._
fuzzy wallpaper with fzf
Tags: linux, cli, bash
Published: 2022-01-20 04:21:24

---
canonical_url: https://waylonwalker.com/til/fzf-wallpaper/
published: true
tags:
- linux
- cli
- bash
title: fuzzy wallpaper with fzf
series: til
---

I really appreciate that in linux anything can be scripted, including setting the wallpaper.  So everytime I disconnect a monitor I can just rerun my script and fix my wallpaper without digging deep into the ui and fussing through a bunch of settings.

``` bash
feh --bg-scale ~/.config/awesome/wallpaper/my_wallpaper.png
```

> I set my default wallpaper with `feh` using the command above.

Leaning in on feh, we can use fzf to pick a wallpaper from a directory full of wallpapers with very few keystrokes.

```
alias wallpaper='ls ~/.config/awesome/wallpaper | fzf --preview="feh --bg-scale ~/.config/awesome/wallpaper/{}" | xargs -I {} feh --bg-scale ~/.config/awesome/wallpaper/{}'
```

> I have mine alias'd to `wallpaper` so that I can quickly run it from
> my terminal.
getint() and getfloat()
Tags: c, cpp, programming, computerscience
Published: 2022-01-20 04:13:58

The post below is my most popular and most liked post till date.

**[Reddit page is here](https://www.reddit.com/r/C_Programming/comments/s6pos9/getint_and_getfloat/?utm_medium=android_app&utm_source=share)**
Create a File Manager Component in a Blazor WebAssembly Application
Tags: webdev, csharp, dotnet
Published: 2022-01-20 04:12:37

Learn how to create and configure the Syncfusion [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component easily. This video explains how to create a Blazor WebAssembly application and add the Syncfusion Blazor package. Then, it shows you how to add the Syncfusion Blazor File Manager component, perform file operations using server-side PhysicalFileProvider codes, download a file, upload a file, and show image previews in File Manager.


Example project: https://github.com/SyncfusionExamples... 

Explore tutorial videos: https://bit.ly/3fAz0Ch

Product Overview: https://www.syncfusion.com/blazor-components/blazor-file-manager

{% youtube qcH3B8FTPao %}
Self-Taught Developer Journal, Day 44: TOP Building Rock Paper Scissors UI
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-20 03:55:18

Today...

We are revisiting the Odin Project Rock Paper Scissors Assignment and now building a UI (User Interface). I'm excited to create a UI for the first time.

After setting up git branch for the UI changes, I walkthrough the instructions laid out in the assignment.

The first step was to remove the logic to play exactly five rounds of the game. 

The next step was to create three buttons, one for each selection (rock, paper, or scissors). Then add an event listener to the buttons that call my playRound function with the correct playerSelection every time a button is clicked. 

I am trying to use the [BEM methodology](http://getbem.com/naming/) so I am keeping that in mind as I am naming things. I created the buttons in HTML and gave them each a class.

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

In my JavaScript, I used the querySelector to select the buttons by their class. Then added an eventListener to each node to listen for an "click" event and passed in the playRound function.

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

For now, I am console logging the event to see what is returned, but I am getting an error in console that I am trying to resolve.

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

I Googled the error and looked through [this stackoverflow post](https://stackoverflow.com/questions/26107125/cannot-read-property-addeventlistener-of-null). I realized I forgot to put the include the **defer** keyword in my script tag to load the file after the HTML is parsed.
 
That fixed the error and the event is now logging to the console.

![Event Log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncqen5uuu82qxmxt5iom.png)
 
## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
[Revisiting Rock Paper Scissors](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/revisiting-rock-paper-scissors)
Apostar por las energías renovables de la mano de DBP Ingeniería

Published: 2022-01-20 03:55:01

La energía fotovoltaica es una forma de energía más limpia y sostenible que constituye un ahorro considerable en las facturas, por eso son cada vez más las personas que deciden optar por esta energía.

Para ayudar y asesorar a quienes quieran dar el paso de apostar por las energías renovables, la empresa DBP Ingeniería les ofrece sus servicios con más de 10 años de experiencia en el sector.

Un paso hacía la energía renovable
Las nuevas necesidades energéticas de la sociedad, sumadas al esfuerzo colectivo que actualmente lucha en beneficio del medioambiente, han hecho que la energía renovable se convierta en la mejor opción. Sin embargo, pasar de las fuentes tradicionales a una sostenible, como por ejemplo la energía fotovoltaica, es un paso que requiere conocimiento y análisis. Solo de esa forma se puede optimizar al máximo el consumo y al mismo tiempo reducir el coste de las facturas. DBP Ingeniería es una compañía capaz de ayudar a los interesados a cambiar el modelo energético. Su equipo de expertos cuentan con una década de experiencia en el diseño, instalación y mantenimiento de instalaciones fotovoltaicas. Además, son especialistas en proyectos de eficiencia energética y en ofrecer soluciones innovadoras y efectivas para instalaciones de autoconsumo. A través de ellos tanto particulares, como empresas pueden encontrar la asesoría necesaria para todo lo relacionado con la energía renovable.

Ayudando a reducir las facturas de la luz
Tan solo unos cuantos años atrás, la energía fotovoltaica era un lujo al que no todos podían acceder. No obstante, con el avance de la tecnología, poco a poco se ha vuelto una alternativa cada vez más accesible para la mayoría. De hecho, hoy en día, permite hasta ahorrar más dinero en las facturas de luz, en comparación con otras fuentes energéticas tradicionales. DBP Ingeniería realiza un estudio detallado, preciso y personalizado de las facturas y el consumo de luz de sus clientes. De esta manera pueden determinar con mucha precisión el consumo previsto, la potencia que se requiere instalar, la cantidad de paneles y, por supuesto, el ahorro estimado en las facturas de luz. Todo esto con el objetivo de que el cliente disfrute del mejor suministro adaptado a sus necesidades, pero a un menor coste.

Ya son muchos a los que está compañía ha ayudado a optimizar su consumo energético a través de energía renovable y a sacar el máximo partido a su suministro energético.

[Ver mas...](https://informeanualrsf.es/)
Face Mask Detector with ML5.js
Tags: ml5, machinelearning, ai, covid
Published: 2022-01-20 03:11:26

In this article, we will cover how to build a simple image classification using the ml5.js library to detect whether you are wearing a mask or not. You can also re-train the model to classify the new classes (for example, whether it is a cat or dog, holding a phone or not, etc) on your demand.

https://medium.com/the-web-tub/face-mask-detector-with-ml5-js-b44ca95dc0cc
Create Your First Machine Learning Mobile Application
Tags: ai, machinelearning, gamedev, javascript
Published: 2022-01-20 03:10:20

In this article, we will cover how to train the machine learning (ML) model with Teachable Machine, incorporate the model with web and mobile applications, and finally create a simple rock-paper-scissors game to play with a computer. In particular, we will be building an image classification model in which we show our hand to the camera, and the model will predict whether the hand is “rock”, “paper”, or “scissors”.

https://medium.com/the-web-tub/create-your-first-machine-learning-mobile-application-853176e4eaa1