teleren/devto huggingface dataset:
RxJS Tip: Understand the Terminology: Observable
Tags: angular, rxjs
Published: 2020-11-16 20:01:35

To get the most from RxJS, it's important to understand its terminology and one of the key terms is **Observable**.

# What Is an Observable?

An Observable is a collection of items over time. It is one of the key building blocks of RxJS.

A normal collection, such as an array, retains items you can access. An Observable doesn't retain items. You can only observe items as they are emitted.

>In that respect, an Observable is like a drive-up window: The person at the window emits food items over time.

# What Does an Observable Do?
An Observable doesn't do anything until a consumer subscribes. (More on subscriptions in a later post.)

When subscribed, the Observable begins emitting items or notifications to that consumer.

An Observable provides the following notifications: 

**next**: The next item is emitted
**error**: An error occurred and no more items will be emitted
**complete**: No more items will be emitted

# How Does an Observable Emit?
An Observable can emit items synchronously or asynchronously.

An Observable can emit one item and complete, such as the response returned from an asynchronous Http request.

An Observable can emit multiple items and complete.

An Observable can emit an infinite number of items, such as the location of each mouse move or key press.

Here is an oversimplified version of a marble diagram depicting two Observables.

![observable_slide](https://dev-to-uploads.s3.amazonaws.com/i/9egu4u2bm4fcz2ce9ck3.jpg)

The first Observable is "one and done", meaning it emits once and then completes. This is the type of Observable you'll get when using Angular's Http methods. In this example, the emitted returned response is an array of products.

The second Observable is "infinite", meaning it will continue to emit values until it's completed. In this example, it's emitting each key press.

#How Do You Create an Observable?
With Angular, an Observable is automatically created and returned when using features, such as Http.

```typescript
  products$ = this.http.get<Product[]>(this.productsUrl)
    .pipe(
      tap(data => console.log(JSON.stringify(data))),
      catchError(this.handleError)
    );
```

You can create your own Observable with the `new` keyword.

```typescript
const source$ = new Observable();
```

However, this technique is not often used. In most cases, it's best to create an Observable using a creation function, discussed in a [later post](https://dev.to/angular/rxjs-tip-use-a-creation-function-1523).

>See the comments section of this post for a good example of when you *would* want to use `new Observable()` to wrap the functionality of a third-party API.

I hope that's clarified the meaning of the term **Observable**.
Learning in Public
Tags: beginners, programming, career
Published: 2020-11-16 19:53:08

I came across a article that was posted by "SWYX", regarding "learning in public".  This was a new concept to me, I've been dabbling in web dev for a couple of years now, and I haven't heard of this.  The idea is simple, you publicize your learning journey.  Your experiences can be helpful to someone who is trying to learn.  I also think its helpful to yourself, to write out and explain a complex coding concept, to make it easy to understand.  It causes you to really reflect on what you have learned, and I believe reiteration, can you to remember and ingrain your knowledge.

#My Methods of "Learning in Public"
1. Writing blog posts
 * I'll be using dev.to moving forward for my blogging, I really 
  like the platform.  I'll also be connecting the API of dev.to to 
  my actual site to act as a CMS.
2. Discord groups
 * I am in a couple of discord groups that have a focus on web dev and React.  I've learned to not just be a observer, but actually contribute.  Even if its just checking in to see how everyone is doing.  While its not my favorite "public" app, it can help the group you are in, and some people are more comfortable in a small group setting.
3. Asking and answering questions
 * With multiple online forums and boards, it is true someone has likely had and asked about a problem or bug that are having.  I am not advocating that we spam, and ask the same questions that have already been answered, but maybe if you find the questions doesn't exactly meet your needs, ask or post in a different way.  Or maybe if you have found a different and better answer to something you had a hard time with, post it!  Chances are, someone else is going through, or will go through the same thing.

___

######Sources
https://www.swyx.io/learn-in-public/
https://careerchats.transistor.fm/episodes/learn-in-public
Set Puerto Rico’s timezone on Debian 10 Linux
Tags: linux, debian
Published: 2021-02-14 18:01:40

---
title: Set Puerto Rico’s timezone on Debian 10 Linux
published: true
date: 2020-11-16 19:45:00 UTC
tags: linux, debian
canonical_url: 
---

To set the correct timezone for Puerto Rico, run:

```bash

sudo timedatectl set-timezone America/Puerto_Rico

```

To list all timezones run:

```bash

timedatectl list-timezones

```
GitHub vs GitLab
Tags: github, git, gitlab
Published: 2020-11-16 19:15:42

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sz70f5mphbz74vp2273h.jpg)

This blog will review the similarities and differences between GitHub and GitLab.

## What is Git?
Git aims to manage software development projects and files. Files are maintained using a Git repository, which is an environment where Git is initialized to track all changes made to files in your project. It will also build a history over time. You'll know if the project is initialized because there will be a _.git/_ in the directory. Git repositories are also a way for developers to store, share, test, and collaborate on open source web projects.

## The Basics of GitLab and GitHub
### GitLab
GitLab provides the and shared goals of a Git repository, but focuses on being a [DevOps](https://about.gitlab.com/topics/devops/) platform that includes CI/CD toolchain. If there is a CI/CD tool that you are already comfortable with you can use that. Additionally, they do allow third-party CI/CD.

![DevOps](https://about.gitlab.com/images/press/devops-lifecycle.png)

### GitHub
Similar to GitLab, GitHub is a place for hosting Git repositories. They offer public and unlimited private repositories.  However, it uses 3 party software to provide access to tools like CI/CD or GitHub Actions.

## Key Differences
When choosing between GitLab and Github, it is good to consider the following: 

### Security
In GitHub, other users have access to the source code. This is helpful for open source projects. When collaborating with a team, you can grant them read or write access. However, GitLab allows you to restrict others to just viewing any tracked issues. 

### CI/CID
GitLab CI and GitHub Actions are the built-in CI/CID tools in each. GitLab has automated processes that support the continuous integration of projects. When using GitHub Actions, you'll need to do just a little extra work of writing tasks that will be automated integration.

### Tracking Issues
Both GitLab and GitHub provide dynamic issue trackers. You can get automatic feedback, assign team members to issues, and use third-party widgets to display issue reports.

### Community
Currently, GitHub has the largest community between the two. Wikipedia is reporting, 
>As of January 2020, GitHub reports having over 40 million users and more than 190 million repositories (including at least 28 million public repositories), making it the largest host of source code in the world.

With such large numbers and history, you'll find that more programmers will know how to GitHub, helping to shorten your learning curve in finding code solutions.

## Conclusion
In conclusion, GitHub focuses on maintaining repositories and providing a platform for developers to network. However, it may require a little more work and integration of third-party tools to get the results you're looking for. That is where GitLab has the advantage because it is built to address having a continuously integrated repository during the program life cycle phases. 

I hope you enjoyed this blog.
O que é HTTP 3 e qual a diferença?
Tags: tecnologia, httphttp3, protocol, protocolo
Published: 2022-03-31 20:57:32

---
title: O que é HTTP 3 e qual a diferença?
published: true
date: 2020-11-16 19:08:59 UTC
tags: Tecnologia,httphttp3,protocol,protocolo
canonical_url: https://marquesfernandes.com/tecnologia/o-que-e-http-3-e-qual-a-diferenca/
---

 ![](https://marquesfernandes.com/wp-content/uploads/2020/11/pexels-pixabay-159304-150x150.jpg)

O HTTP 3 é a nova versão do protocolo [HTTP](https://marquesfernandes.com/tecnologia/o-que-e-http/), o suporte ao HTTP/3 já existe desde setembro de 2019 na versão de testes do Chrome, embora ainda não esteja ativado por padrão em qualquer navegador, em 2020 começou a ter o suporte não-padrão nas versões estáveis do Chrome e Firefox e ele já pode ser ativado. Já para o navegador da Apple, o Safari, o suporte experimental para HTTP/3 foi adicionado ao Safari Technology Preview em 8 de abril de 2020.

Alguns sites já começaram a utilizar a nova versão do protocolo, como é o caso do Google, Facebook, YouTube, Instagram e [muitos outros](https://w3techs.com/technologies/details/ce-http3).

## O que é HTTP?

**Hypertext Transfer Protocol**  ou  **HTTP ** para os mais íntimos é um conjunto de regras para transferência de dados como arquivos de texto, imagens, áudio, vídeo e outros arquivos multimédia.

Quando você digita um site em seu navegador, ele por trás dos panos está enviando uma requisição  **HTTP ** solicitando a página desejada para algum servidor web. Pense nos protocolos da internet como regras de trânsito, elas são necessárias para que todos os carros (dados) consigam chegar em seu destino (cliente).

O protocolo  **HTTP ** foi desenvolvido junto com a linguagem de marcação [HTML](https://pt.wikipedia.org/wiki/HTML) para criar a primeira experiência interativa em navegadores web. Até hoje o protocolo segue sendo o principal meio de comunicação da internet! Você pode conferir com mais detalhes o que é o HTTP e a sua história nesse [artigo](https://marquesfernandes.com/tecnologia/o-que-e-http/).

## O que há de novo no HTTP3?

A nova especificação promete uma experiência web mais rápida, melhor e segura. O HTTP 3 pretende simplificar o handshake TCP (é um handshake de 3 vias, _oi_; _oi de novo; ok, você recebeu o meu oi_). Resumindo, as conexões são estabelecidas mais rapidamente usando o [Protocolo QUIC](https://pt.wikipedia.org/wiki/QUIC), que é algo relativamente novo também.

Esse estabelecimento de conexão aprimorada promete uma melhor migração de conexão que ocorre principalmente entre conexões wi-fi e redes móveis.

Por último, o QUIC também tenta atualizar o início lento do TCP, permitindo que altas velocidades sejam alcançadas mais rapidamente. O QUIC tenta aumentar a exponencial da janela de congestionamento para isso. Esta será uma atualização importante para a jogabilidade em casos como [Stadia](https://stadia.google.com/)e streaming de vídeo em Ultra High Definition ou superior.

O post [O que é HTTP 3 e qual a diferença?](https://marquesfernandes.com/tecnologia/o-que-e-http-3-e-qual-a-diferenca/) apareceu primeiro em [Henrique Marques Fernandes](https://marquesfernandes.com).
New: Improved site navigation
Published: 2020-11-16 19:08:22

We recently added a new navigation feature to Simple Dev called module navigation. With our new module navigation, links to related tutorials will appear on the right side of the tutorial you're currently viewing (or on the bottom if you're viewing the site on a smartphone). 

For example, if you're currently looking at a tutorial on a CSS selector, you will see all of the other tutorials on CSS selectors on the side of the screen, like in the picture below:

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

This makes it easier to jump around related tutorials.

## What's a module?

Currently, we group related tutorials into what we call Topic pages. We have Topic pages for HTML, CSS, Git, and many other topics. The modules for the topic are the subsections listed on the Topic page. For example, the CSS Topic page has the following modules: Introduction, Syntax, Values, Properties, and Selectors, as well as a few others.

Some modules only contain one tutorial at the moment, but most contain several tutorials.

## Moving between modules

If you want to move between different modules, you have a couple of options. The easiest thing to do is to click on the  Topic link that is listed on the top of each tutorial to go back to the main Topic page. There you can see all of the modules and all of the tutorials in that topic.

Alternatively, if you're at the first or last tutorial in a module, you can use the Next and Previous navigation links at the bottom of the tutorial to get to the next or previous module (if there is one).

## Conclusion

As always, if you want to find information even faster, you can always use our powerful search feature to instantly find any tutorial on the site.

Let us know what you think of this new feature in the comments below!
Javascript Regex Part 2 Character Classes
Published: 2020-11-16 19:05:02

**Intro**

In my part one of my previous post I displayed how to find literal pattern matches. If you need to search for a literal pattern with some flexibility you can use regex character classes.

**Character Classes**

Character classes allow you to define a set of characters you wish to match by using square brackets:

```
let myPet = "cat"
let notMyPet = "cut"
let myRegex = /c[au]t/

myPet.match(myRegex) // Returns ["cat"]
notMyPet.match(myRegex) // Returns ["cut"]
```

**Match a Range**

If you need to match a large set of letters you can also define a range using a hyphen:

```
let myPet = "cat"
let notMyPet = "bat"
let forMyFloor = "mat"
let myRegex = /[b-m]at/

myPet.match(myRegex) // Returns ["cat"]
notMyPet.match(myRegex) // Returns ["bat"]
forMyFloor.match(myRegex) // Returns ["mat"]
```

You can also a hyphen to match any number in a string:

```
let myName = "Dan061983"
let myRegex = /[a-z0-9]/ig // Will match all letters and numbers in myName
myName.match(myRegex)
```
HacktoberFest Badge
Published: 2020-11-16 18:53:52

"DEV will be awarding exclusive Hacktoberfest badges mid-November, so you’ll want to sign up for an account by November 13. Make sure your GitHub information appears on your DEV profile to receive a badge."
I received this mail on 3'Nov and so umm...I wanted to know when will be getting this badge possibly? Or, anyone here who got the badge already?
Scheduling blog posts with Powershell and Pelican
Tags: powershell
Published: 2020-11-16 18:44:22

---
title: Scheduling blog posts with Powershell and Pelican
published: true
description: How to schedule posts on pelican using PowerShell and the windows schedule
tags: PowerShell
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7jjkesihiltlnny4nm30.png
---

Hy folks, first time posting here on dev.to :). Recently I've been migrating some of my scripts from bash to PowerShell and I thought that would be a good time to code an automation script to publish posts on my [personal blog](https://www.sipmann.com). I host my blog with Github Pages and I use [Pelican](http://getpelican.com) as a static site generator. The main problem I have with this toolkit is the lack of scheduling posts. For those who are new to Pelican, the post system is similar to dev.to, we write the posts using Markdown and we have a `Status` tag to tell when the post is a draft or not. 

The main idea of my script is, run through the Markdown files and check those who have Draft as status. Once I found any post, I start getting some info like the Date and the Slug. The Date part is a little tricky because we need to find the line, split the text, and then parse it to do date comparisons. If the post date is lower than the current timespan I replace the `Status: Draft` tag and save the file. After that, all we have to do is commit to git and let it go.

```powershell
$postsPath = "E:\projetos\sipmann.github.io\content\";
$files = Get-ChildItem $postsPath -File -Filter *.md

<# Get the current DateTime so we can compare with the post date #>
$now = Get-Date

<# Set the current location, with this we can work with the git commands #>
Set-Location $postsPath

foreach($file in $files) {

	<# Get's only posts with draft status #>
    $isDraft = Get-Content ($postsPath + $file) | Where-Object { $_ -ccontains "Status: Draft" }

    if ($isDraft) {

		<# First we find the line with the date, then we get only the datetime and then parse it #>
        $pubDate = [datetime]::parseexact(((Get-Content ($postsPath + $file) | Where-Object { $_ -Match "^Date:*" }) -split '\s+', 2)[1], 'yyyy-MM-dd HH:mm', $null)

		<# TODO: Maybe call google and bing api to submit a new url #>
		$slug = ((Get-Content ($postsPath + $file) | Where-Object { $_ -Match "^Slug:*" }) -split '\s+', 2)[1]
        
        if ($now -ge $pubDate) {

			<# Sets the content without the Draft status #>
            ((Get-Content ($postsPath + $file)) -replace 'Status: Draft', '') | Set-Content ($postsPath + $file)

            git add .
            git commit -m ("New scheduled post: " + $file)
            git push origin master
        }
    }
}
```

Hope you find the script useful, and if you are interested in the other scripts I'm making with PowerShell, take a look at my [github repo](https://github.com/sipmann/PowerShellScripts), still lacks many of my scripts, but it's there where I'll keep them updated. See ya.

{% user sipmann %}
Marketplace on Solidus, Helping Local Businesses
Tags: solidus, ruby, rails, ecommerce
Published: 2020-11-16 18:36:12

{% youtube WtZcxRQAskg %}

Edwin Cruz from MagmaLabs takes us through struggles and triumph while detailing the work they've done on Solidus with marketplaces.

"Marketplace on Solidus, Helping Local Businesses"
Edwin will share how MagmaLabs leveraged existing open source projects such as Solidus and solidus marketplace extension to create a portal where the main goal was to help local businesses to deal with the fact that they needed to sell their products and services online in order to have better chance to survive.
Implementing Night Mode in React Hooks
Tags: react, beginners, javascript, css
Published: 2020-11-16 18:32:24

Many apps are providing night/dark mode now as it is more comforting to the eyes and improves visibility so I wanted to make a simple react app and implement the night mode. Below here is shown what I did to achieve it.

First I created a button to toggle on/off night mode.
```javascript
   <button
      className="theme-btn"
      onClick={() => {}}
   />
```
and styled it like this
```javascript
.theme-btn {
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border-width: 1px;
  background: pink;
  border-color: pink;
  margin-right: 10px;
  cursor: pointer;
}
```
Then I added some text and gave styles to it, my app component looked like this
```javascript
return (
    <div>
      <div className="nav">
        <button
          className="theme-btn"
          onClick={() => {}}
        />
      </div>
     <h1>
        Dark Theme
     </h1>
     <h2>
        Dark theme is so cool!
     </h2>
    </div>
 );
```
```javascript
.nav {
  display: flex;
  flex: 1;
  flex-direction: "row";
  align-items: center;
  width: "100%";
  height: 40px;
}
```
After that, I initialized the state using React Hooks with its initial value as false and toggled its value between true and false upon the dark mode button click.
```javascript
 const [isDarkTheme, setIsSetDarkTheme] = useState(false);
```
onClick method looks like this
```javascript
   onClick={() => {
      setIsSetDarkTheme(!isDarkTheme);
   }}
```
Now I just applied conditional styling to text like this
```javascript
   style = {isDarkTheme ? { color: "white" } : { color: "black" }}
```
I also initialized another state that will show the text of the button according to the mode selected.
Whole component looked like this
```javascript
export default function App() {
  const [isDarkTheme, setIsSetDarkTheme] = useState(false);
  const [themeText, setThemeText] = useState("Go Dark");
  return (
    <div
      style={
        isDarkTheme
          ? { backgroundColor: "black" }
          : { backgroundColor: "white" }
      }
    >
      <div className="nav">
        <button
          className="theme-btn"
          onClick={() => {
            isDarkTheme ? setThemeText("Go Dark") : setThemeText("Go Light");
            setIsSetDarkTheme(!isDarkTheme);
          }}
        />
        <p style={isDarkTheme ? { color: "white" } : { color: "black" }}>
          {themeText}
        </p>
      </div>
      <h1 style={isDarkTheme ? { color: "white" } : { color: "black" }}>
        Dark Theme
      </h1>
      <h2 style={isDarkTheme ? { color: "white" } : { color: "black" }}>
        Dark theme is so cool!
      </h2>
    </div>
  );
}
``` 
You can keep `isDarkTheme` state in redux to use it in multiple components across the app, you can also create `dark-theme` and `light-theme` styling classes and use it across the app.

Try running the demo of Night Mode here
{% codesandbox reactdark-theme-v2fo3 %}