teleren/devto huggingface dataset:
What is gun.js?
Tags: braziliandevs, gunjs, database, webdev
Published: 2021-06-08 14:49:03

Lately a technology that has been calling my attention is Gun.js, besides being easy to use it also has a very interesting concept about how we should see data, usage and rights over it. Today I'm going to talk a little more about what gun.js is, as well as discuss Decentralized web concepts

###1 - Gun is based on Decentralized web or "Dweb" and aims to make the internet freer and less greedy

The way the internet works today is dependent on large corporations, which store their data on their own servers. However, this has caused some discomfort for millions of people around the world, with the suspicion that these large corporations are using data and personal information for marketing and choosing what people see on the internet.

###2 - What is Dweb

Dweb stands for decentralized internet, and it's the concept Gun.js is based on.

The idea behind Dweb and hence behind Gun.js is that the internet is formed by a concept of community. Soon the information would be stored through the devices of all users of the system. Each one storing a bit of information along with the free servers provided by Gun.js itself

This makes the internet not only freer but also cheaper for programmers and consequently for end users. Since, large companies today are responsible for taking a large part of the money that goes into the system and also able to freely access a large part of the data without having to know for sure whether we are providing data to be spied on or not

###3 - Gun.js

GUN is an ecosystem of tools that allows you to create encrypted applications that run thanks to a community.

With it were created versions of youtube and other social networks

The database is formed by the user's information stored on his own machine, on other users' machines and on larger servers in the system, which allows the information to remain reliable and prevents loss of information if a user's device is lost. Besides, it's an amazing concept to think you're part of a giant database.

[more info in my blog](https://programador-de-quintal.webnode.com/l/o-que-e-gun-js/)
36 - Application Insights: The Tool You Never Knew You Needed
Tags: devops, development, azure, monitoring
Published: 2021-06-08 14:46:41

**This post was originally published on Fri, May 21, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/application-insights-the-tool-you-never-knew-you-needed).**

Understanding how our applications function in the wild is essential for developers when issues arise. With the power of knowledge, we can enable ourselves to provide the best experience to our fellow developers, and our stakeholders.

One of the solutions that supplies this power is Application Insights. Application Insights is a service provided by Microsoft allowing you to monitor your application live, detect performance anomalies, and observe this data with powerful analytics.

Together we will see how easy it is to add Application Insights to our applications, whether we have access to the code-base or not. Once instrumented, we will dive deeper into the capabilities of Application Insights and show how to leverage all the rich data collected from our application. Finally, as developers the last thing we want to do is troubleshoot an issue in Production, with everyone watching and the stakes are high.

Watch as we monitor a live application that is throwing exceptions and how Application Insights can be used to help us solve the problem faster. When we are done, attendees will be empowered with the knowledge to leverage Application Insights to be more productive with their work.

{% youtube yFV4uBsH26M %}
Snippet: Grab lat/lon from Google Maps URL
Tags: beginners, regex, javascript
Published: 2021-06-08 14:46:21

I needed to grab several latitude/longitude coordinates recently from Google Maps without using an API. This line can be executed in the console to quickly produce the coordinates derived from the URL.

```
[_, lat, lng] = location.href.match(/@([-0-9]+\.[0-9]+),([-0-9]+\.[0-9]+),/); console.log(lat, lng);
// 39.9532614 -75.1539449
```
A quick way to add Dark Mode for any site
Tags: javascript, html, css
Published: 2021-06-08 14:27:07

For those who don't want to bother and write styles for Dark Mode, I suggest this simple solution using CSS filters.

It may not be the best way, but for many sites it will still look pretty good.

```javascript
const darkCss = `
@media screen {

/* Leading rule */
html {
  -webkit-filter: invert(100%) hue-rotate(180deg) brightness(80%) contrast(70%) grayscale(40%) !important;
  filter: invert(100%) hue-rotate(180deg) brightness(80%) contrast(70%) grayscale(40%) !important;
}

/* Reverse rule */
img,
video,
:not(object):not(body)>embed,
object,
svg image,
[style*="background:url"],
[style*="background-image:url"],
[style*="background: url"],
[style*="background-image: url"] {
  -webkit-filter: invert(100%) hue-rotate(180deg) !important;
  filter: invert(100%) hue-rotate(180deg) !important;
}
[style*="background:url"] *,
[style*="background-image:url"] *,
[style*="background: url"] *,
[style*="background-image: url"] *,
input,
[background] * {
  -webkit-filter: none !important;
  filter: none !important;
}

/* Text contrast */
html {
  text-shadow: 0 0 0 !important;
}

/* Full screen */
:-webkit-full-screen, :-webkit-full-screen * {
  -webkit-filter: none !important;
  filter: none !important;
}
:-moz-full-screen, :-moz-full-screen * {
  -webkit-filter: none !important;
  filter: none !important;
}
:fullscreen, :fullscreen * {
  -webkit-filter: none !important;
  filter: none !important;
}

/* Page background */
html {
  background: rgb(181,181,181) !important;
}

}
`;

checkTheme();

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  checkTheme();
});

function checkTheme() {
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    switchTheme(true);
  } else {
    switchTheme(false);
  }
}

function switchTheme(dark = false) {  
  if (dark) {
    document.head.insertAdjacentHTML('beforeend', `<style id="darkStyle">${darkCss}</style>`);
  } else {
    document.getElementById('darkStyle') && document.getElementById('darkStyle').remove();
  }
}
```
Download a list of PDFs with Firefox
Tags: firefox, download, pdf
Published: 2021-06-04 07:51:25

---
title: Download a list of PDFs with Firefox
published: true
description: 
tags: firefox,download,pdf
//cover_image: https://direct_url_to_image.jpg
---

12 มีนาคม 2562

I failed to download a list of PDFs by Wget, cURL, and Slimerjs. So I used Firefox and shell script.

First, I disable Pdfjs to force Firefox to download PDFs.

I wrote a shell script for opening a URL with PDF file, and then I use xdotool to close the Firefox window. For xdotool command, thank Jon G - Megaphone Tech for [his comment](https://unix.stackexchange.com/a/203448) at Unix Exchange.

```sh
#!/bin/sh

for url in `sort -u eng_pdf_urls.txt | grep -i pdf`
do
    echo $url
    firefox -P exp1 "$url" &
    sleep 10
    echo CLOSE
    xdotool search "Mozilla Firefox" windowactivate --sync key --window 0 --clearmodifiers alt+F4
    sleep 10
done
```

I didn't use headless because I don't know how to close it properly. I tried timeout command but Firefox detected it as an improper shutdown.
[Dicas do VIM] Saindo do VIM / NeoVIM
Tags: vim, neovim, exit, braziliandevs
Published: 2021-06-08 14:15:41

Chegamos ao comando mais buscado da Internet. 

Para sair do VIM de um arquivo já salvo, digite 

```
:q
```

Para sair do arquivo modificado sem salvar as alterações, digite o comando

```
:q!
```
Step By Step Visual Roadmap To Any learn programming Language (Practice Questions included)
Tags: programming, beginners, roadmap, productivity
Published: 2021-06-08 14:13:00

It’s always a good idea to plan rather than directly jumping in, to achieve our goals in a shorter period of time.

To learn a programming language, follow a visual roadmap to understand the basics and succeed in that. Practice questions sheets are provided for some important topics. This roadmap & questions are applicable to any language you are learning because concepts are same in every language , only syntax is different. 

***Note: Assuming that you have chosen which programming language to learn.***

So let’s get started ,yippee..

Learn a new topic and practice that topic on alternate days, as shown below :

![Plan/Strategy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tz15ylrzu5m4ni05y8i.png)

Blue bar shows the day to learn a new topic . White bar shows the day to practice questions from below the **Practice Questions sheet** , topics that we have learnt a day before.
Sunday is our day off!!

Visual roadmap of topics that we should know in any programming language .

**Link :- https://cutt.ly/cnEJca4**

As promised , here’s the practice questions sheet :

**Link :- https://cutt.ly/5nTeQ4G**

Questions are not complex, but enough to make your concepts clear. Solutions of these questions can be very easily found on the internet , but try to spend at least 30mins figuring out the solution.

With these estimates you can complete the roadmap in about 3 month! It’s just a rough estimate and can vary from person to person.

**Bonus Tip:** If you are still searching for best resources to learn C++,JavaScript,Python , here’s the list:
**- C++(Paid):** https://cutt.ly/HnEJIjF
**- JavaScript(Free):** https://cutt.ly/JnEJDu8
**- Python(Free):** https://cutt.ly/LnEJJKd

At last all I would say is, keep on practicing as practice is the only key to success!

Thanks for reading,
Written with ❤️ & passion 🔥 by Rishabh Raghwendra
Quick way to serve static files with Netlify (100GB free)
Tags: webdev
Published: 2021-06-08 14:01:30

Needed to publish a website and serve a few GB of images and audio data. Here are my findings and what I ended up doing.

## Free Options
There are storage and bandwidth limits on many common sites. Bandwidth limit is how many times users can access your files per month.

- Github Pages (1GB limit)
- Bitbucket Cloud (2GB limit)
- Qovery (10GB limit)
- Cloudinary (25GB storage and 25GB bandwidth/month)
- Vercel (100GB storage and 100GB bandwidth)
- Netlify (100GB storage and 100GB bandwidth)

## Paid options
- AWS S3
- Google Cloud Storage
- Digital Ocean Block Storage

These storage options (especially for fast CDN serving) can run up to $20/month for just 10-20GB of data.

## Netlify & Vercel

Both Netlify & Vercel offer 10 GB of free storage and 10GB of bandwidth/month. I already use Vercel, but I since I have to use github or bitbucket to upload my files I would still hit the storage limits of the repository platforms.

### Netlify Large Media 

For Netlify, there is a Large Media to use Git LFS to basically upload the files to Netlify and put pointer files on your Github repository. 

After hours of tinkering I still couldn't upload files to Netlify and the workflow was awful.

## Netlify sync with Publii

Surfing the Internet I found a desktop website builder called  **Publii** that can sync to Netlify.

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

It was super easy to set up and after setting up the API key, I just need to press the **Sync** button to upload all my media files in the *media* folder of the preset template.

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

There is no version management because git is not setup but I prefer this workflow just to serve my jpg and mp3 files. Obviously there are ways to upload my files through Netlify CLI but this app just makes it much easier to set up.
MERN Stack Development - Best Fit for Web Development 
Tags: mongodb, react, node, javascript
Published: 2021-06-08 13:36:14

MERN Stack happens to be amongst the well-known JavaScript stacks intended for enhancing the web app development process. It is a combo of 4 components: MongoDB, ReactJS, Expressjs, and Nodejs.

Below we will take a close look at each of these components in brief.

1. MongoDB

MongoDB is a NoSQL database that is document-oriented. As compared to the relational database, it will not come across any column or table. It stores information with an extremely flexible document by making use of JSON-based query language. The time and the productivity needed for fetching the formation are much better than the RDBMS (Relational Database Management System).

2. ExpressJS

Being a framework for Node JS, Express JS is used for developing API and web apps with minimalized structure and outstanding speed. It removes the burden of writing the identical code again and again for the server, unlike the Node JS HTTP module.

3. React JS

This one happens to be a JavaScript library that Facebook has developed for creating UI of the webpages. Being declarative React views help to make the process of interface development much productive. It will be possible to run the same code on the server and the browser simultaneously by using React.

4. Node JS

Node JS is open-sourced by Google and is created on Google Chrome. It is built on the JavaScript engine of Chrome. It has been designed for creating network applications that are scalable and also executing JavaScript code outside a browser. Node JS works excellently when enclosed with an HTML page rather than making use of its module.

Let's know here 4 compontents features, pros & cons with Why use them: https://www.launchora.com/story/mern-stack-development-best-fit-for-web-developm
WWDC Keynote Facetimed us.
Tags: ios, android, discuss, todayisearched
Published: 2021-06-08 13:34:44

I got into WWDC keynote highlights this morning and one of the things I noticed was the facetime expansion. Apple announced that FaceTime is going to be available on the web so users can call in from Android devices and Windows PCs.

Facetime wants to compete with zoom by having links to scheduled calls. But is this possible, given that zoom is used by educators and professionals while Facetime is well "Let's Facetime !".

All of that said, being an Android user, Facetime is one of the features that make an iPhone stand out. The feature forms a community between Apple users, which adds to the companies 'not for everyone' tag.
Overview of the test case component & bug report in Software Testing
Tags: testing, tutorial, beginners
Published: 2021-06-08 13:27:30

**What is Test Case?**
A test case is a document that describes an input, action, or event, and its expected results, in order to **determine if a feature of an application is working correctly**.

A test case (**how to test**) is a document which consists of a set of conditions or actions which are performed on the software application in order to verify the expected functionality of the feature.

**Some elements of Test Case:**

*Test Suite ID*: The ID of the test suite to which this test case belongs.
*Test Case ID*: The ID of the test case.
*Test Scenario*: A Test Scenario is defined as any functionality that can be tested. It is a collective set of test cases .
*Test Procedure(Test Steps)*: Step-by-step procedure to execute the test.
*Test Data*: The test data, or links to the test data, that are to be used while conducting the test.
*Expected Result*: The expected result of the test.
*Actual Result*: The actual result of the test; to be filled after executing the test.
*Status(Pass/Fail)*: After comparing with both expected result & actual result the tester( creator of test case) evaluate weather the test case is Pass/Fail.

**What is Bug Report?**
A Bug Report in Software Testing is a **detailed document about bugs found in the software application**. Bug report contains each detail about bugs like description, date when bug was found, name of tester who found it, name of developer who fixed it, etc. Bug report helps to identify similar bugs in future so it can be avoided.

**The key elements of a bug report in Software Testing:**

*Title*: An appropriate title is simple, brief, and provides a description of what the bug is to the developer.
*Description*: This is a description, written in brief, of the bug and how and why it happened. More specifics than the title should be included in this part.
*Reproducing steps*: This must include the maximum steps required for the bug to repeat. The steps should ideally be brief, quick, and everyone can follow them.
*Environment*: This section should provide all the specifics of the setup and configuration of the environment that the app is running on.
*Expected Result*: This is the result of an activity that was anticipated or expected.
*Actual Result*: This is the result observed by the tester or user.
*Attachments*: Attachments can be very useful for the developer to recognize the problem faster.
*Severity and Priority*: Severity and Priority is a measure of how important and how serious an issue is.
*Assignee*: To whom the bug is allocated.
[Introductory] Laravel sucks. Here's 100 reasons why
Tags: laravel, php, sucks, badly
Published: 2021-06-08 13:14:55

I am going to assume you're reading this because you're pondering "But, how could one of the most popular frameworks in PHP suck?".

Well, fellow reader, that is I am here today; to assume things, waste my own time, waste your time, type some words that most people don't care about or don't want to know, just so I can feel like I have a voice in some weird attempt to validate my beliefs.

## Upcoming topics
Each post in this 100 part series will be on a single topic.
- Laravel encourages poor programming practices (_BuT iTs A fEaTuRE_)
- Painful type-hinting (both phpDoc & literals) 
- Why Taylor Otwell's twitter followers are the worst
- How developers learn "Laravel", not PHP
- Laravel tinker
- Why we should not build "REST" APIs with Laravel
- Lumen should not exist
- Test helpers not helping
- Taylor Otwell's tweets
- Macros
- The generosity of Laracon organisers
- Obvious pain points with the artisan scheduler
- The insulting lack of credit where it's due

This is not an exhaustive list above. Just providing an idea on the subjects to come.

## What this series will **not** do
**Talk about any of the positives** to do with Laravel. We honestly have enough advocates and blogs on that already, go read those instead.

I'm going to be real and say I might get bored of writing these. It's **very** possible I will never make it to part 100, but here's to being 'ambitious'.

## Post formatting
Sometimes posts in this series will be extremely technical, others will be more abstract or conceptual. Sometimes I will strawman, sometimes it might be blatantly rude, or wrong. I will try and tag them appropriately so you can filter what is boring to you.

## Comment
Obviously with a series named "100 reasons Laravel sucks" my stance is very clear. You can try and argue and change my mind in the comments, but you'll be wasting your own time - just as I am here writing this.

---

I'm calling it a day here at post #1. We've covered the overview & introduction which serves part 1's purpose.

Part #2 will be covering "Laravel encourages poor programming practices" - coming later this week.
Sorting Algorithms Visualizer
Tags: javascript, react, algorithms, webdev
Published: 2021-06-08 12:54:49

Hello folks,

Designed and developed "Sorting Algorithms Visualizer" (using React and Zustand) to help everyone, learning popular sorting algorithms easier and fun.

Link to the webapp: https://sadanandpai.github.io/sorting-visualizer/dist/


Repo: https://github.com/sadanandpai/sorting-visualizer
Kelemahan dan Keunggulan Kamera Polaroid
Tags: kamera
Published: 2021-06-08 12:53:27

Sejauh ini, kamera Polaroid tidak pernah tanpa penggemar. Tidak heran mengingat keunikan kamera ini dan kesan klasik retro yang tercipta di foto-fotonya. Tidak bisa dipungkiri, mereka sangat cantik! Apakah Anda berpikir untuk memiliki kamera cantik ini? Pertama, periksa pro dan kontra dari kamera Polaroid. Bagaimana menurut anda?

Kamera Polaroid sendiri sebenarnya adalah merek dagang dari jenis kamera langsung, di mana foto langsung diproses di bodi kamera setelah diambil. Kamera ini pertama kali diluncurkan sekitar tahun 1947 dan dirancang oleh Dr. Edwin Land yang dirancang. Saat ini, kamera Polaroid lebih banyak digunakan sebagai koleksi daripada fungsi normal seperti kamera pada umumnya. Namun bukan berarti kamera ini tidak bisa menandingi kamera lain!

Kamu juga bisa membeli kamera Polaroid di toko yang direkomendasikan oleh kami.

Kelebihan Kamera Polaroid 

Sempurna untuk fotografer pemula

Tidak seperti kamera digital dengan banyak tombol pengaturan, kamera Polaroid ini dirancang untuk memudahkan pengguna dalam penggunaan dengan pilihan tombol yang sedikit dan penggunaan yang mudah dipahami. Sehingga sangat praktis untuk digunakan.

Mudah dan cepat

Dari menangkap hingga mencetak gambar, semuanya dilakukan dalam waktu kurang dari 5 menit! Sangat berbeda dengan kamera biasa, yang membutuhkan waktu lebih lama untuk mencetak foto, bukan? Disini kita bisa cek langsung foto fisiknya, yang tidak memakan waktu lama.

Eksklusif

Kamera ini hanya mencetak satu foto per bidikan. Hal ini tentu saja membuatnya lebih berharga dan efektif. Apalagi jika foto yang Anda ambil memiliki nilai dan memori tersendiri. Itu harus benar-benar layak.

Kekurangan Kamera Polaroid

Ukuran foto terbatas
Karena foto dicetak langsung, ukurannya tidak bisa diatur sesuai kebutuhan. Agak rumit ketika kita hanya membutuhkan ukuran yang lebih kecil atau lebih besar.

Isi ulang kertas foto
Terbatasnya jumlah kertas foto yang dimuat ke dalam kamera membuat kami harus selalu membawa kertas isi ulang ke mana pun kami pergi. Jika Anda kehabisan kertas foto dan tidak membawa isi ulang, Anda tidak akan bisa menggunakan kamera.

Harga kertas isi ulang mahal
Selain jumlah kartu isi ulang yang terbatas, harganya juga agak mahal. Untuk harga 1 pack tanpa motif isi 10 lembar harganya (kurang lebih) Rp 100.000. Sedangkan kertas bermotif biasanya berharga sekitar 120.000 rupee. Nah kalau dihitung-hitung, sekali tembak harganya Rp. 10.000.

Source: https://kdkproduk.com/kelebihan-dan-kekurangan-kamera-polaroid/