teleren/devto huggingface dataset:
I'm releasing on youtube my  Java parallelism course.
Tags: youtube, java, parallelism, concurrency
Published: 2022-03-06 06:27:52

I'm releasing on youtube my Java parallelism course, NWEN303 for VUW ECS new zealand. Feel free to learn all you can from it. It is going to be fun!

Here all the lectures out up to now:

Lecture 1, with the playlist:
https://www.youtube.com/watch?v=nMgXz1iucac&list=PLWsQqjANQic-Hh5w2srBkQro0K0xMvCg0

Lecture 2
https://www.youtube.com/watch?v=uUkd0Xuk1jE
https://www.youtube.com/watch?v=GhWL0W2xWwo

Lecture 3
https://www.youtube.com/watch?v=Kgw3aveClTE
https://www.youtube.com/watch?v=07JZj32QD6w

Lecture 4
https://www.youtube.com/watch?v=SA_6Jloh2bA
Useful Blog To Follow As A Web Developer
Tags: webdev, productivity, tutorial, opensource
Published: 2022-03-06 06:25:26

## [OnextraPixel](https://onextrapixel.com/)



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

---

## [CSS Tricks](https://css-tricks.com/)


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

---

## [Scotch.lo](https://www.digitalocean.com/community)


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

---

## [Codrops](https://tympanus.net/codrops/)



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

---


## [Simple Programmer](https://simpleprogrammer.com/)


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

---

## [Tutorialzine](https://tutorialzine.com/)


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


---

## [Sitepoint](https://www.sitepoint.com/blog/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zuopxgreq7lxy3hqguge.png)
SSG and SSR in Next.JS
Tags: nextjs
Published: 2022-03-06 05:39:22

## Is get Static Props only good for rendering static pages like About or Blogs

get Static Props fetches data at build time when the code gets compiled into exe and serves to the client the rendered HTML. It is the fastest Static Site Generation, SSG. The contents are cached on CDN, which makes it even faster.
However, it does not mean that it only servers static pages.
get Static Props can be used with client-side fetching using libraries like react-query or swr to get up-to-date information in run-time.
e.g. the About page makes a request to extreme-ip-lookup.com to find out user's city inside use Effect
This has the advantage of

1. Super fast TTFP (time to first paint) where user can see the page loaded instantly
2. JS request, interactions will be added soon after when they are loaded and executed. The SSG pages are fast and still capable of providing up-to-date information and interactivity.



## When would you use get Server Side Props instead of get Static Props

get Server Side Props fetches data at run time (when exe starts running) from server. It is server-side rendering.
It is different from get Static Props in that:
data is fetched at run time, not build time
It provides better SEO as the data is rendered on server and available for crawler
It is slower than SSG because HTML is generated at run time
It can be faster than CSG because it is faster to make requests from server (but then you need to send the data back to client… hmm
It is the same as get Static Props:
Both can provide interactivity and up-to-date information (get Static Props work well with client-side fetching!)
Main pages or at least templates are rendered on the server
get Server Side Props is good when
data is not static. Data needs to be fetched at run time
SEO is important. We want the data to be pre-rendered
e.g. Medium paid content. Users need to be authorized as a paid member to view the articles so the article suggestions are to be generated in run time. (The article itself should be available at build time though.. or the content is put together at run time?


## How is get Initial Props different from get Server Side Props?

get Initial Props is an older method. It runs first on the server side and then it is run again on the client side ever time is it called. It is slower than get Server Side Props because the code inside get Initial Props is executed in the run time, whereas the Next JS just calls an API to run get Server Side Props on the server, which then returns a JSON data to the client.
It is the only method that runs on both server and client
initial data-population from server: good for SEO!
It is the only method that runs on _app.js
In the discussion thread,
ice hunter: get Initial Props has this benefit that
SSR to prefetch data on Server first for better SEO
subsequently fetching the data using CSR
grepug: get Server Side Props request seems to block the transition during each transition on the client. See if this will go away in future.
Here is a long informative discussion thread on the various use cases and issues with Next JS SSR.
BE A INTERNET EXPERT
Published: 2022-03-06 05:37:52

There are plenty of job opportunities in this sector in the present world which is interconnected with networks. Network experts are to be created in a world where banks , establishments and companies provide Internet based services. Smart homes and smart cities should be operated through uninterrupted network. There are  short term and long term courses for those who wish to be trained in this field.


JOB OPPORTUNITIES ON THE INTERNET

 Many services like communication , trade , education and the like are carried out based on the Internet. There are plenty of job opportunities for those who can make multi purpose websites in the most attractive fashion. There is a vast scope for the production of advertisements and short films to be published on the Internet.


Consolidation of data on how an Internet user searches and the pages that the he visits will be a vital piece of information. Analysing such data and reaching them through adertisements suitable for their various service is a major business strategy of the Internet. To evaluate the tendency of consumerism and thereby arrange the services in accordance with the same creates a lot of job opportunities.
Universal Icon Picker
Tags: javascript, iconpicker, opensource, github
Published: 2022-03-06 05:21:47


[https://github.com/migliori/universal-icon-picker](https://github.com/migliori/universal-icon-picker)

## Javascript Icon Picker for any icon library

### Main Features

- Load any icon library from a single JSON file
- Load the icon fonts stylesheets from local files or CDNs
- Autoload the icon fonts (JSON + stylesheets) or load them only on request
- Add as many icon libraries as you like to each instance of the plugin
- Create multiple instances and triggers on the same page
- Change the icon libraries attached to an instance whenever you want
- Group icons of the same family by categories
- Load one or more styles from the same icon family individually
- Search / Filter icons
- Built-in `onSelect()` and `onReset()` callback functions
- Attach the Icon Picker to any HTML element
- Add your favourite icon libraries very easily

### Integrated icon libraries

#### Font Awesome

- All
- Solid
- Regular
- Brands

#### Material Icons

- Filled
- Outlined
- Round
- Sharp
- Two-tone

#### Other icon libraries

- Bootstrap Icons
- Elegant Icons
- Feather Icons
- Foundation Icons
- Happy Icons
- Icomoon
- Open-iconic
- Tabler Icons
- Weather Icons
- Zondicons

*Universal Icon Picker* is free and open-source - License GNU GPLv3
Aplicando Sessões em Asp.Net Core
Tags: dotnet, aspnetcore, backend, session
Published: 2022-03-06 04:48:48

## O que são sessões?

Tendo em vista duas aplicações Cliente e Servidor que se comunicam através do protocolo HTTP e sabendo que este não mantém estado, a utilização de sessões são uma forma de armazenar os dados voláteis sobre o acesso de um usuário.

Uma sessão é criada para um navegador, cada uma é identificada por um id de sessão que é mandado para o front que o armazena em um cookie e o utiliza para enviar a cada requisição que faz para o back, desta forma a aplicação do lado servidor é capaz de recuperar os dados da sessão.

## Como utilizar sessões no Asp.Net Core

Quando criamos um projeto de API ou MVC com asp.net core temos acesso à propriedade HttpContext que guarda todas as informações sobre o acesso que está sendo feito como dados sobre: Session, Request, Response entre outros.

Porém para persistir dados na Session é preciso habilitar a sua aplicação para que guarde sessão através do uso de cache distribuído e utilizando a DI e o middleware de sessão.

## Passo a Passso

Adicionando as configurações do cache distribuído, nesse caso será usado o redis. Para utilizar esse métodos de extensão `AddStackExchangeRedisCache()` precisamos adicionar o pacote `Microsoft.Extensions.Caching.StackExchangeRedis`

```jsx
builder.Services.AddStackExchangeRedisCache(opt =>
{
    opt.ConfigurationOptions = new ConfigurationOptions {
        EndPoints = { "localhost" },
        Password = "teste",
        User = "beatriz" 
    };
    opt.InstanceName = "CacheDistributed";
});
```

Adicionando configurações sobre a sessão

```jsx
builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromSeconds(10);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
});
```

Adicionando o middleware de sessão à pipeline do app.

Obs.: Deve estar nesta ordem de chamada antes de `MapControllers()`

```jsx
app.UseHttpsRedirection();

app.UseAuthorization();
app.UseSession();
app.MapControllers();

app.Run();
```

Após isso podemos utilizar o `HttpContext.Session`. Código do `SessaoController.cs`

```jsx
[ApiController]
    [Route("sessao")]
    public class SessaoController : ControllerBase
    {
        [HttpGet]
        public IActionResult SetSession ([FromQuery] string nome)
        {
            HttpContext.Session.Set("nome", Encoding.UTF8.GetBytes(nome));
            
            return Ok();
        }

       [HttpGet("listar")]
       public IActionResult GetSession ()
        {
           var n = Encoding.UTF8.GetString(HttpContext.Session.Get("nome") ?? new byte[0]);
            return Ok(new { nome = n });
        }

    }
```

## Aplicação funcionando

Armazenando um valor na sessão.

![Adicionando um valor para armazenar na sessão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gngkylaicd2z5p9wx9a.png)

Consultando o valor armazenado na sessão

![Listagem dos valores armazenados na sessão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3t5eaa3rkop087v0yfz7.png)
My top 10 best vs code extensions for frontend developers
Tags: vscode, top, javascript, beginners
Published: 2022-03-06 04:33:36

Visual studio code, is the best coding editor till now. I am quite few years of using vs code editor. It was awesome experience working with the vs code editor. Extension for the vs code editor helps to boost the power. Here are my top 10 best extensions for vs code that I use daily.

1. [Github Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
2. [Gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
3. [Sftp](https://marketplace.visualstudio.com/items?itemName=liximomo.sftp)
4. [Auto rename tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
5. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
6. [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
7. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
8. [Auto close tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
9. [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
10. [Github Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)

Bonus. [TODO Highlight ](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
Improving My Sleep Habits
Tags: 100wordsaday, inkedin, programming, beginners
Published: 2022-03-06 04:23:13

Now day we have really distracted live let it be we're in front of a computer all day or just simply watch some TV before bed or be on our mobile phone before bed all of this thing might relate to you, and you might have heard that to be able to sleep good a night you need to stop using the phone before bed or not to drink coffee at night. So that way we keep our brains' photoreceptor as they should be. 

I have many problems but sleep seen to be a problem to most of us in today society or generation due to the fact that we are mostly on our phone all day or in the computer. So having a good night of sleep with a full 8 hours might be optimal, but in my current situation I could only get about 5 hours max of sleep per night. 

## The US Military Sleep Technique

- TLDR; Yes it works, I was surprise that as many podcast as I listen to or papers/ books read online I never came around this quick technique to help foe like me that might be suffering from Insomnia or a good deal of other stuff that could keep us from going to sleep at night. 

- There are a few short steps that must be taken for this to work properly as you could look this them up the US military sleeping technique a find many articles about I just learned or heard someone talk about it on one of the twitter space I was in the last couple of days I took it down a hard mental note about it and look it up, gave it a try, and it worked for me, so I repeated next day and I worked again, and again, wow this is life changing since due to my current situation I could only go to sleep after 11:30-12:30 most of the day, This Could be why I felt like a night owl all this time.

> **Relaxation, Breathing & Clearing You'r Mind**

- The way to begin this Technique as Describe online is to relax your  body from head to toe,  tighten muscle up and let them loose to a relaxed state.  I do this backward somehow, I start from my toe and work my way to my head in the pillow. 

- Controlling the breath or breathing, it's important to take big breaths and exhale slowly. Feel how the air enter and leave your nostrils. 

- Clean your mind of unwanted though Bet way is to repeat the word "nothing" or like they said "Do not think" either one should work.

- **[Reference Article](https://thatsleepguy.com/master-the-us-military-sleep-technique-the-easy-way/)**

> This Shall be taken as a Quick introduction  to the Sleeping technique, Please DYOR. 

> - **NOTE: This is one of 30 blogs that I would be attempting to write over the next 30 days to improve my writing skills.**
Web2 vs Web3
Tags: web3, web2
Published: 2022-03-06 04:17:32

Hi there, you are reading this article from Web2. So what is Web2 and how is it different from its trending successor web3.

To make things clearer, let us take a step back to the original web which existed before Web2. The original web was invented to make it easier for users to source information. So anybody with the right technology could get access to information online by navigating websites. However, these users could not contribute or interact with these websites as they were made up of static webpages. Basically, users could only perform READ operations on the original web.

Then along came the current iteration of the web(Web2). The major difference between the original web and Web2 is interactivity, users are not just able to source information online but are also capable of contributing data to websites. Examples of this interactivity are creating a post on this site and liking a post on Meta(Facebook).In summary, Web2 added WRITE capabilities to the READ capabilities of the original web. Over time, increased user interaction led to an explosion of data and opportunities but Web2 developed drawbacks which has got people (including the inventor of the original web Tim Berners Lee) seeking a new alternative.

Web3 seeks to be an improvement on Web2, two poignant differences are:

- Decentralisation

- Trust

A lot of data on Web2 is centralised within a few tech companies and have at times been accessed and traded by state and non-state actors. This centralisation means that ownership of user's data lies more with big tech than with the users themselves. Web3 comes with the promise of decentralisation and is actually the core of its existence. 

Rather than having data centralised within a few entities, data is stored by multiple entities. Decentralisation is achieved using technologies like blockchain and DAPPs (Decentralised Applications).Decentralisation ensures that a few companies do not dictate the flow of data but a lot more players are involved leading to democratisation of data.

Another difference and advantage of Web3 over Web2 is trust. Due to the fact that data is controlled by a lot of participants via a peer-to-peer network, no member can censor or hide data. This leads to greater freedom and trust. Blockchains are inherently immutable and chronological so data stored in them are consistent and safe from intrusion.

So there you have it, differences that signify that Web3 promises a to be an exciting new version of the web.
100 días de código: 82, implementando una API REST en Heroku
Tags: spanish, 100daysofcode, webdev, node
Published: 2022-03-06 03:50:46

¡Hey hey hey!

Hoy he terminado de crear una API REST para una aplicación de agenda de teléfonos. He usado la dependencia CORS para permitir solicitudes de otros orígenes a mi API, también he usado el middleware de morgan para mostrar información sobre las peticiones en consola e implemente mi aplicación con ayuda de Heroku CLI.

Realmente pensé que seria mas difícil realizar la implementación de la API pero con ayuda de la guia [nodejs y express de fullstackopen](https://fullstackopen.com/es/part3/node_js_y_express) y algunos otros recursos como la [documentación de morgan](https://github.com/expressjs/morgan) y la [guia de instalación de Heroku CLI](https://devcenter.heroku.com/articles/getting-started-with-nodejs) logre realizarlo mas rápido de lo que pensaba.

Ahora pasare a construir una aplicación frontend que haga uso de esta API para comenzar a practicar la conexión del back con el front.

Pensando en el stack de tecnologías para mi aplicación obtuve la siguiente lista:
#### Frontend
- Vite: empaquetador
- React
- Redux-toolkit: manejo de estado
- framer-motion: animaciones
- React-router: manejo de rutas

#### Backend
- Nodejs
- Express
- MongoDB: base de datos

La API REST ya la tengo montada solo me haría falta hacer uso de la base de datos y crear el frontend, aunque todavía tengo dudas de la compatibilidad de las tecnologías asi que tendré que investigar un poco antes de hacerlo. Me gustaría haberlo hecho con Next.js pero siento que en este momento no necesito esa tecnología... Al menos no para esta aplicación.

Por otra parte, necesito crear alguna aplicación con Next.js y creo que sera un blog que integrare con mi pagina web principal.

Ahora sigamos con la sección cotidiana de lo que realice...
### Hoy
- Implemente una API REST con Heroku.
- Aprendí mas sobre Cors y la seguridad de las peticiones http.
- Practique Touch Typing.

Y eso es todo por hoy.
¡Espero que tengas mucho éxito con tus proyectos!

Hasta la próxima!

Foto de [Quinn Nguyen](https://unsplash.com/@quinnnguyen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).
¿Qué es una dApp (aplicación descentralizada)?
Tags: cryptocositas, blockchain, web3, ethereum
Published: 2022-03-06 03:38:12

Una dApp es una aplicación descentralizada que utiliza "blockchain" para que los usuarios se relacionen directamente entre ellos y cierren acuerdos sin que exista una entidad central que interfiera en la transacción

**Características de una aplicación descentralizada**
 

**- Resistentes a la censura:** No existe gobierno empresa o autoridad que pueda censurar o cancelar a una aplicación descentralizada.

 

**- Resilientes:** Debido a que la lógica del negocio está contenida en tecnologías P2P , es imposible detener su funcionamiento.

 

**- Transparentes:** El uso de tecnología BLOCKCHAIN y de almacenamiento distribuido permite que todo su código , información y estado este siempre disponible para consultas.


**Apps tradicionales vs dApps**

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

**Tecnologías de apps tradicionales y dApps** 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n73enhud6sysgo92md6x.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zq5nlgd2afi5yblr7dd9.png)
Generate Random IPs using online tool
Tags: network, beginners, devops
Published: 2022-03-06 02:59:22

## What is IP?

IP is short for Internet Protocol. IP is a set of rules that govern how data travels from one machine to another in the internet.

IP, short for "Internet protocol," is a set of rules that govern how data travels from one machine to another on the Internet.

The Internet Protocol (IP) is an Internet protocol that provides a numerical label to computers so they can communicate in the network. IP is the most popular protocol on the internet.

There are a number of things that an IP address offers, but there are two main reasons why they exist. First, it gives computers names and second, it serves as a way to figure out where each device is. Second issue is more complicated than the first; there are many ways of figuring out where a device (or computer) is located or what network it belongs to.

**Using [Random IP Generator](https://codebeautify.org/generate-random-ip)**
![Random IP Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sazknqb9dqbnlc41309a.png)

## Steps to Generate Random IPs.

Step 1: click on https://codebeautify.org/generate-random-ip
Steps 2: Use configuration options on the right side of the screen.
Step 3: Click on Generate Green Button.
Grouping Mermaid nodes in Subgraphs
Tags: webdev
Published: 2022-03-06 02:21:24

---
canonical_url: https://waylonwalker.com/til/mermaid-subgraphs/
published: true
tags:
- webdev
title: Grouping Mermaid nodes in Subgraphs
---

Mermaid provides some really great ways to group or fence in parts of your graphs through the use of subgraphs.

Here we can model some sort of data ingest with some raw iot device and our warehouse in different groups.

``` mermaid
graph TD;

    subgraph raw_iot
        a
    end

    subgraph warehouse
        A --> B
        B --> C
    end
```
![mermaid diagram with two subgraphs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gqoy0hrek0wrjeppzs3.png)
 

## connecting subgroups

If we want to connect them, we can make a connection between a and A outside of the subgraphs.

``` mermaid
graph TD;

    subgraph raw_iot
        a
    end

    a --> A

    subgraph warehouse
        A --> B
        B --> C
    end
```
![Mermaid with two connected subgraphs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dozrcc1x51qt76czw7tz.png)
 

## separation of concerns

It's also possible to specify subgraphs separate from where you define your nodes. which allows for some different levels of grouping that would not be possible if you were to define all your nodes inside of a subgraph.

```
graph TD;
    a --> A
    A --> B
    B --> C

    subgraph one
        A
        C
    end
```


![Mermaid diagram with two nodes in a subgraph that are not otherwise connected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ung5ey7p6ttphjc90hw.png)