teleren/devto huggingface dataset:
Day 42/100 The bigger Picture
Tags: 100daysofcode, programming, codenewbie, challenge
Published: 2021-10-27 18:00:44

It amuses me how one could make an idea so relevant and achieve everything. I'm sure it's so deserving to be in paradise, a well planned idea where it goes perfectly fine without knowing the value of its true nature. It's charming, how to map properly?

![css.map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p08y3vwngohgtlohv8fp.png)
How to install Go (Golang) in Arch Linux/Manjaro
Tags: go, manjaro, archlinux
Published: 2021-10-27 17:55:34

---
title: How to install Go (Golang) in Arch Linux/Manjaro
published: true
description: How to install Go (Golang) in Arch Linux/Manjaro
tags: golang,manjaro,archlinux
canonical_url: https://citizix.com/how-to-install-go-golang-in-arch-linux-manjaro/
//cover_image: https://direct_url_to_image.jpg
---

Learn How to install Go (Golang) in Arch Linux/Manjaro here https://citizix.com/how-to-install-go-golang-in-arch-linux-manjaro/
I want to be a Software Engineer
Tags: beginners, programming, tutorial, react
Published: 2021-10-27 17:45:26

Hi, This is Niranjan vadala, I am a B.tech Holder from Civil Engineering department, recently I entered in blockchain technology like trading BTC and understanding automatic trading bots creation, I am here very enthusiastic to learn about to enter in software field so please suggest me how to start as beginner, which thing i should learn first.
UI Dev Newsletter #80
Tags: html, css, javascript, webdev
Published: 2021-10-27 17:13:26

## Links


[Prevent Scroll Chaining With Overscroll Behavior](https://bit.ly/3pBfz4Q)
Ahmad Shadeed goes through the overscroll-behavior CSS property, the problem it solves, how it works, and where we can use it.


[Evaluating Clever CSS Solutions](https://bit.ly/3Bge2TI)
Michelle Barker explains why the “cleverest” solution isn’t always the best and some new specifications that might make clever hacks less necessary.


[HTML with Superpowers](https://bit.ly/3Ei76HR)
Dave Rupert shares his talk about using, styling, and building Web Components and why they are worth investigating.


[We Analyzed 425,909 Favicons](https://bit.ly/3noedHH)
Adam, Nathan & Patrick analyzed the top 100,000 websites’ favicons and shared some fascinating insights.


[What do I need to read to be a great at CSS?](https://bit.ly/2ZmrBnY)
Baldur Bjarnason answers if reading CSS articles like CSS-Tricks & Smashing Magazines is a waste of time.


[Why I Hate Frameworks, Benji Smith.](https://bit.ly/3CgDXfi)
Fredrik Holmqvist explains how it is to use frameworks but using a hammer as an example.


[Houdini.how](https://bit.ly/38Tq7SR)
The community-driven resource library of CSS Houdini worklets.


[Lorem.space](https://bit.ly/3b9oXUE)
A useful placeholder image generator.


## Popular on Twitter

[For the last 5+ years, web developers have been frustrated with CSS. Why?](https://bit.ly/310iTw0)
Jen Simmons asks why developers are ranting and hating CSS.


**Happy coding!**

[Subscribe to the newsletter here!](https://buttondown.email/starbist)
Combining PDFs in a Ruby on Rails application
Tags: rails, ruby, webdev
Published: 2021-10-27 16:51:20

When [creating PDFs](https://jerryweyer.lu/creating-pdfs-in-a-ruby-on-rails-application) you might need to combine different PDFs into one larger file, for example if you want to add a cover page to a PDF report you are generating, or if you want to add your general terms to an invoice PDF you are sending via your application.

[CombinePDF](https://github.com/boazsegev/combine_pdf) is a pure Ruby solution to parse PDF files and combine (merge) them with other PDF files, watermark them or stamp them.

Combining PDFs, for example an invoice and terms and conditions, is pretty straight-forward:

```ruby
  pdf = CombinePDF.new
  pdf << CombinePDF.load("invoice.pdf")
  pdf << CombinePDF.load(Rails.root.join('lib', 'data', 'terms.pdf').to_s)
  pdf.save "combined.pdf"
```
  
CombinePDF offers the handy `parse` method to [handle PDFs from a remote location](https://github.com/boazsegev/combine_pdf#loading-and-parsing-pdf-data). This can be especially useful when working with ActiveStorage files hosted on Amazon S3 and similar services.

In one of our apps, our users can upload documents that will be combined into a larger PDF. It is not always possible to scan for compatible PDFs during the upload, and we don't want to abort the entire process when an incompatible PDF is uploaded.

CombinePDF offers the `allow_optional_content` option, which allows you to merge PDFs with **optional content sections** without raising an exception. We encountered a few instances where uploaded PDFs were not correctly displayed when using this option, but it allows the user to get the final PDFs and assess themselves if they want to replace the PDF in question by a compatible version.
Factorial function in JavaScript (with recursion)
Tags: javascript, recursion, fctorial
Published: 2021-10-27 16:48:36

### Introduction
This is a simple program that computes the factorial of a number using recursion.

### So, what is Recursion? 🤨
Recursion in programming is a technique or method of writing a function in which that function calls itself until a specified condition is met.
Recursion can be used to repeat an action without using a for or while loop.

A Simple Factorial Function in JavaScript.

![Factorial function in JavaScript](https://res.cloudinary.com/dae4sosbl/image/upload/v1635352958/Screenshot_from_2021-10-27_17-41-41.png)

Line 3 and 8 will stop the function from calling itself (i.e stops the recursion) when the value of n is less than or equal to 1.
If n is still greater than one then line 4 and 9 will will be executed and as you can see line 4 and 9 still calls its respective functions, that's recursion in action 😁.

Here is the result:
![The Result](https://res.cloudinary.com/dae4sosbl/image/upload/v1635353138/carbon_1.png)

### Note: 🙏 ✍
Make sure the condition to break your recursion is valid. If the condition is not valid you will run into an infinite recursion, this means your recursion will run forever and ever (hope you didin't say Amen 🤣). Have fun.
Add Magic Login with just 2 script tags
Published: 2021-10-27 16:35:12

In this post, learn how to integrate Magic's custom, production-ready passwordless login to your website with just 2 script tags and a Magic account. 

New to [Magic](https://magic.link)? [Sign up for free](https://dashboard.magic.link/signup)

Currently it only supports Web(JavaScript). Stay tuned for React Native, iOS and Android.

# Step 1 - Add login form script to login page.

Create a new login page and add the script tag below:

```javascript
<!-- /login.html -->
<script
  src="https://auth.magic.link/pnp/login"
  data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]"
  data-redirect-uri="/callback"> <!-- Replace with the location of your callback.html -->
</script>
```

Your API key can be found on the Home page of your [Magic Dashboard](https://dashboard.magic.link/signup).

This will generate a pre-built login form based on the branding and login methods you’ve enabled via Dashboard. Users will automatically be redirected to the URI provided in `data-redirect-uri` upon authorization. If no `data-redirect-uri` is specified, a relative path — `/callback` — is automatically used as a fallback.

# Step 2 - Add the callback script

Next, create a page containing the script tag below to handle the authentication callback.

```javascript
<!-- /callback.html -->
<script
  src="https://auth.magic.link/pnp/callback"
  data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]">
</script>
```

# Try it out!

Open your login page to try out your new end-to-end Magic authentication flow.

# Logging users out

You can optionally provide an endpoint in your app to log users out of their Magic session. Users will automatically be redirected to the URI provided in `data-login-uri` or `data-redirect-uri` upon successful logout. If no `data-login-uri` or `data-redirect-uri` is specified, the current value of `window.location.origin` is used instead.

```javascript
<!-- /logout.html -->
<script
  src="https://auth.magic.link/pnp/logout"
  data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]"
  data-redirect-uri="/login"> <!-- Replace with the location of your login.html -->
</script>
```

To learn more about script options, customization and FAQs [read here](https://magic.link/docs/login-form).
Agregar un step de coverage en github actions - Frontend (Angular)
Tags: frontend, github, devops, spanish
Published: 2021-10-27 16:27:14

Con la llegada de github actions se ha simplificado la creación de flujos CI/CD y uno de los pasos importantes es los de las pruebas unitarias y que mejor que tener un step que valide nuestra cobertura, por eso dejo un script que puede ayudarnos a cubrir.
Primero creamos una carpeta llamada `.github` en la raíz de nuestro.
Dentro de esta creamos otra de la siguiente forma `.github/workflows`
Por último un archivo `yml`  con el siguiente nombre por buena practica `coverage.yml`  dentro de el dejaremos el siguiente código.

```jsx
name: CI Angular app through Github Actions
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: Setup
        run: npm ci

      - name: Test
        run: |
          npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
```

Tip: La ultima línea es la ejecución de pruebas unitarias en angular esta puede ser remplazada por el de tu preferencia, recuerda que debe ejecutarse bajo un navegador sin interfaz.

Espero te ayudara este post.

Gracias por leer, nos vemos en la próxima.
🎃Patch Note du 27/10/2021
Tags: snkfrance, news, minecraft, french
Published: 2021-10-27 14:32:22

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

Bienvenue sur le PatchNote du **Mercredi 27/10/2021** 

> Voici la liste des petites modifications, corrections de bugs et > des petits ajouts à partir du 27/10/2021.

On vous en dit plus juste ici . 👇
&nbsp;

###**Chasse à la citrouille**

Dans SNK France des citrouilles sont apparues, à vous de les retrouver et de les capturer. Il y en a actuellement __50__ dans shiganshina, d'autres seront prochainement ajoutées.

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

*Il vous suffit de faire un clique droit sur la citrouille pour la capturer* 

👀 Pour obtenir plus d'information vous pouvez exécuter la commande ``/citrouilles``.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfpqbaa0poic25kmyr7u.png)
 
Vous pouvez cliquer sur **Cadeau** pour voir les **récompenses** des paliers des citrouilles.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjidkbd74bxiajwp6wdu.png)
 
💡Astuce : Pour vous aider à capturer les citrouilles : L'analyseur de citrouille est là pour vous aider. Il vous permet de **détecter les citrouilles dans un rayon de 32 blocks qui n'ont pas été capturée**.

Pour l'obtenir il vous suffit de cliquer sur "Objet" du livre de la commande ``/citrouilles``.

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

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

Pour 750 € au ``/shop`` vous pourrez l'utiliser 10 fois en faisant un clique droit.

Une fois les 10 utilisations passées, l'objet n'est plus utilisable.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysvodrf3yrbco4xehfuk.png)
   
📊 Vous pouvez également visualiser un classement en ligne des citrouilles et consulter les 50 meilleurs chercheurs de citrouilles via le site suivant :

📡 https://citrouilles.snk-mc.fr

&nbsp;
&nbsp;


###**Nouveau pack de texture**
``Par DrHaiku``
 
Un nouveau pack de texture a été crée spécialement pour la saison, créant une ambiance terrifiante. Venez voir par vous même !.
&nbsp;
&nbsp;

------

Merci à vous de votre lecture et nous attendons avec impatience vos commentaires et réactions ! Restez à l'affut de nouvelles mises à jour arrivent très prochainement 🥰

&nbsp;

🎃 Venez passer votre halloween avec nous sur SNK France !

```java
this.setContributor("TwiDev", "DrHaiku");
this.setDevelopers("TwiDev");
```
Created a Quora Community for Dart/Flutter tips and tricks
Tags: darklang, flutter
Published: 2021-10-27 15:50:38

Dart is a great programming language.

So I created a Quora Space for Dart/Flutter tips and tricks

Join as a contributer: [Click Here](https://dartfluttertipsandtricks.quora.com/?invite_code=Xvo22G8rcyrStbEp47j0)

Join as a follower only: [Click Here](https://dartfluttertipsandtricks.quora.com/?invite_code=nTZS4ujcwEN5iPtRjxOv)
Tiiny Host hits $2,000 MRR 📈🎉
Tags: showdev, javascript, webdev
Published: 2021-10-27 15:46:35

[Tiiny.Host](https://tiiny.host) grows past $2,000 MRR! 🎊

Stripe:
![Stripe](https://tiiny.host./blog/assets/images/mrr2.png)

Paddle (for PayPal):
![](https://tiiny.host./blog/assets/images/mrr1.png)

Considering we barely had any traffic for the first 12 months, I honestly didn't expect it to reach this far. 

It amazes me that over 230 people out there like the product enough to pay for it. I'm extremely grateful to each and every one of them.

But I've begun to realise why they do, more on this later.

Here are some facts for you:

💼 Part-time
💰 MRR: $2.2k
🔗 Subscriptions: 235
⬆️ Sites uploaded to date: 40,000+
👥 Average monthly visitors: 13,000+
🌍 Top countries: India, USA & Vietnam (last 30 days)
⏲️ Average session duration: ~5 mins

You can read more here: https://www.indiehackers.com/post/tiiny-host-hits-2-000-mrr-ea7b79b3ce
Surrogacy Centre India - India's Most Trusted Surrogacy Centre
Tags: surrogacy
Published: 2021-10-27 15:38:52

Surrogacy Centre India is India's most trusted surrogacy center, working with aims to reduce the stress and hassle-free associated with infertility investigations and treatment by offering a one-stop diagnostic and treatment service for infertile couples.

Our team of SCI Healthcare feels privileged to meet many wonderful people from around the world. We are all proud of the contribution we make in helping our clients realize their dream of becoming parents. Below are some words from our international surrogacy family.
Using MDX with Docz Has Never Been This Easy!
Tags: github, opensource, tutorial, beginners
Published: 2021-10-27 15:17:05

**Code documentation** seems to be a cumbersome process for most developers. However, with the right set of practices and manageable tools, the task gets a bit painless. For me, Docz is the go-to tool for documentation needs as it creates SEO-friendly, interactive, production-ready documentation sites in a heap of minutes. The Gatsby-powered OSS has helped me to cut down the overheads of building and maintaining custom documentation sites. If you are an open source contributor, you can contribute to Docz here.

FYI- It is already popular on GitHub with 21k stars :star: and 26k weekly downloads. In a nutshell, :eyes: [Docz](https://github.com/doczjs/docz/) is a zero-config, typescript-supported OSS with customisable themes and plugins to style your document.

The software uses *MDX ( .mdx files)* extensively to render desirable formatting features in your doc. For a heads-up, MDX is short for Markdown with JSX. It finds use cases in building React components to Markdown files and speeds up the document workflow. With MDX, you can make interactive charts, alert components and directly add them to your documentation. That’s how MDX does all the heavy-lifting formatting for your doc. Now that you have a fair idea about Docz and MDX, let’s dive deep into the integration- using Docz with MDX.

![aviyel-docz-with-mdx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9skmvng7y1nh384m1prq.png)

## The Use Cases: Docz with MDX

Did you ever stumble upon questions like “I want to build a new component for my new feature? Is it already there? If yes, what it does? Does it work the same I want it to be?” The foremost use-case of Docz and MDX is to create documentation that can be shared and used over and over by a developer network in an organisation.

You can also use the feature to build reusable React components for your front-end project. The combination also finds use in agile software development to bookmark several documentation phases including Implementation Details, SRS, Design Documents, Test Cases, and End User Documents.

If you are settled with Docz, use the tool to create an online resume. That’s how you have an edge to impress your interviewer and showcase your front-end skills.

![documentation-humor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ults7e6fy4zn3gsw5yoa.png)

To read full article, please visit [Aviyel](https://aviyel.com/post/1265/using-mdx-with-docz-has-never-been-this-easy) :rocket:
What is a Message Broker? & How does it work? | Message Broker vs REST API
Tags: messagebroker, rabbitmq, apachekafka, microservices
Published: 2021-10-27 15:06:08

{% youtube GDeK8sBwIug %}

If you've ever worked on a Microservice Architecture or want to learn about Microservices, then you must know, "How do Microservices Communicate?"
Watch this video tutorial till the end to know the answer.
Hacktoberfest 2021 🏆
Tags: hacktoberfest, opensource, hacktoberfest2021, github
Published: 2021-10-27 14:53:34

---
title: Hacktoberfest 2021 🏆
published: true
description: Hacktoberfest 2021
tags: Hacktoberfest, OpenSource, Hacktoberfest2021, github
//cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vwba339p16r3jruwcd6.png
---

![Hacktoberfest 2021 🏆](https://www.panayiotisgeorgiou.net/wp-content/uploads/2021/10/hacktoberfest2021-1024x841.png)
For the third consecutive year I have just completed the #hacktoberfest2021 challenge with 6 Pull Requests (1 still pending) successfully merged.

It is with great pleasure to be involved in Hacktoberfest and contribute on several people projects.

DONE ✅ #Hacktoberfest #OpenSource 💪

🙌 @hacktoberfestteam 

Previous editions [2020](https://dev.to/panayiotisgeorgiou/hacktoberfest-2020-1c48) | [2019](https://dev.to/panayiotisgeorgiou/hacktoberfest-2019-41ch)
How to easily debug rxjs pipes
Tags: javascript, typescript, rxjs, reactive
Published: 2021-10-27 14:45:52

When i first started approaching reactive programming and rxjs i struggled a little bit to understand how data flows throught observables, pipes, operators and so on. All i had to help me were marble diagrams, but they just helped increasing the headache.

I wanted to create something that could help beginners approaching rxjs, while helping more experienced developers debug complex pipes. 
This is how [rx-debugger](https://www.npmjs.com/package/rx-debugger) is born! 

### How does it work?
Getting started with rx-debugger is super easy. All you have to do is patching source observable and using operators exported by the library. 

Here is an example:
```typescript
import { rxDebugger, map, toArray } from 'rx-debugger';
import { of } from 'rxjs';

rxDebugger(of(1, 2, 3))
  .pipe(
    map((item) => item * 2),
    toArray()
  )
  .subscribe();
```

Doing so, you will get following output nicely printed in the console:
![output example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcqc2is5rib9aatywhpc.png)
Isn't that super cool? 

By the way, rx-debugger supports way more options than just printing tables in the console. You can find all the options in the [docs](https://github.com/corradodellorusso/rx-debugger).

### Contributing
rx-debugger is open source and hosted on [GitHub](https://github.com/corradodellorusso/rx-debugger). While being fully functional, it is in early stages of development, and any help or feedback would be appreciated!
Flutter: Avoid Widget Rebuild by Using const Constructor
Published: 2021-10-27 14:40:45

Buy me a Coffee: https://www.buymeacoffee.com/noobcoders

As we know that by using the setstate function. Flutter rebuilds the whole UI. Since this is a bad practice and memory intensive.

To Prevent this initialize it with const

```
// As we Know that stateful Widgets rebuild the whole UI. 
// Which is really bad practice!! 
// To Prevent rebuilding of static components like non changing text 
// Initialize them with const  
// Jump to line 38 
import 'package:flutter/material.dart'; 
 
void main() => runApp(const MyApp()); 
 
class MyApp extends StatefulWidget { 
  const MyApp({Key? key}) : super(key: key); 
 
  @override 
  _MyState createState() => _MyState(); 
} 
 
class _MyState extends State<MyApp> { 
  Color _containerColor = Colors.yellow; 
 
  void changeColor() { 
    setState(() { 
      if (_containerColor == Colors.yellow) { 
        _containerColor = Colors.red; 
        return; 
      } 
      _containerColor = Colors.yellow; 
    }); 
  } 
 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
        title: 'Flutter Demo', 
        theme: ThemeData( 
          primarySwatch: Colors.blue, 
        ), 
        home: Scaffold( 
          // Avoid Widget Rebuild by Using const Constructor 
          appBar: AppBar(title: const Text("A Simple App Stateful Widget")), 
          body: Container(decoration:  BoxDecoration(color: _containerColor)), 
          floatingActionButton: FloatingActionButton( 
            onPressed: changeColor, 
            child: Icon(Icons.add), 
            tooltip: "Book Here", 
          ), 
        )); 
  } 
} 
```
See line number 38 here to prevent the Text to be rebuilt. A const was used.

[Try It Here](https://dartpad.dev/?id=776eaab0ab443c66efa7f8ee9c33c3d8&null_safety=true)
Ocelot: Windows Authentication
Published: 2021-10-27 14:13:52

Hi,

Using OCELOT, I would like to know if it's possible to send a request to a web api that know only windows authentication.

I have differents webapi applications: some that works in anonymous (so using token from ocelot is ok) and some that works with windows authentication (so I cant use the JWT).

IS Ocelot can work with only JWT or also with windows authentication ?
If yes, how to do that ?

Thanks a lot,

Aby
Making the most boring website ever with TypeScript, NestJs, React and others. Part 5. 
Tags: react, typescript, node, webdev
Published: 2021-10-27 14:09:06

_This series is about making a generic website for a local business with TypeScript, NodeJs, NestJs, Prisma, React and NextJs. I'm trying to make my videos quite short, about 10 minutes each (except for the first one), while putting as much content there as I can. [Here](https://www.youtube.com/playlist?list=PL7b0cPjh8z6K_4qLNu_QdE3RpiU6omViC) is the full playlist._

This time we'll implement appointment booking for clients and add the missing Services page.

Enjoy :)

{% youtube SO-fTzJu988 %}
Lazy loading of a YouTube video with Vue.js
Tags: vue, javascript, webdev, beginners
Published: 2021-10-27 14:05:39

![Vue js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nggyj9csordenp14cfas.png)

When you embed a YouTube video on a webpage, you have to think that many users will not click to play the video, some of them want to do something else like reading the contents on the page or whatever features the website is providing.

That’s why it’s a good idea to implement **lazy loading** on the video. Lazy loading is the practice of delaying the load of resources until they’re actually needed.

By reducing the initial load time, you can offer a better experience to the users and you are also doing **SEO** since Google takes into account the initial load time.

How to implement this lazy loading on Vue.js?

Example of usage:

    <LazyYoutube
    max-width="414px"
    aspect-ratio="16:9"
    thumbnail-quality="standard"
    src="https://www.youtube.com/watch?v=CCBpeKLaX3o"
    />

The 'LazyYoutubeVideo' component renders only thumbnail images on pager renders. On clicking the play button the YouTube video gets downloaded. 

You can see the behavior on my website where a YouTube video is embedded on the home page: https://rollideo.com/

For more details about the installation, check the github documentation:
https://github.com/andrewvasilchuk/vue-lazy-youtube-video