teleren/devto huggingface dataset:
JavaScript really needs a way to load local files. . .
Tags: javascript, webdev, watercooler
Published: 2022-04-29 23:54:14

So, I'm getting a bit fed up wiþ JavaScript.

I had an idea for a (mega-)application, but, it requires me to load files.
So, I needed to test if it was possible, so I wrote a quick test:
```javascript
fetch("test.txt", {
    headers: {"Content-Type": "text/plain"},
    mode: "no-cors"
}).then(
    r => r.ok ? r.text() : `Status ${String(r.status)}: ${r.statusText || r.type}`
).then(text => alert(text));
```
And... Not to my surprise, it didn't work.
It has never really worked for a good while, now.

But, I find ðis very irritating because it's a ***TEXT*** file, JUST TEXT, and CORS does not want me to access it.
Sure, in ðe past ðere were "security issues" wiþ ðis, but, is it really ÐAT hard to validate ðat a file is wiþin ðe same directory-branch as ðe HTML/JS file?

## One issue wiþ ðis...

Now, before you all scream a possibly very obvious answer at me, I see an issue.
Ðe HTML file could just tell or coerce ðe person viewing it to paste some of ðeir documents in ðe folder ðe HTML file is in.

BUT, I don't þink ðat should be someþing preventing ðis feature.
Why? Because it's common sense to not blindly trust a webpage, local or not.
<hr/>
I get it.
Not everyone has common sense.
But come on, if we made ðis argument all ðe time, we'd have to secure everyþing ðat code could do, and baby-proof absolutely everyþing.

<br/>

Þank you for attending my rant on JavaScript.

<br/>

<h1><b><center>Þanks for reading!<br/>Cheers!</center></b></h1>
Using Sass' @each and @for for Bootstrap-Like Behavior of Margin & Padding Classes
Tags: webdev, scss, css, sass
Published: 2022-04-29 23:45:24

## Bootstrap Backgrounder
Bootstrap includes margin and padding functionality that allows you to decide on what side of the element the margin or padding should be applied and how much of it should be layered on (multiple of the base font-size).

This means that if on an element you'd like to add _padding to the top_ by _3 multiples of the base font-size_, it'll add 45px of padding to the top of the element [base font size 15 x 3 = 45px] and is done with the class `pt-3`.

## Problem
I don't like using Bootstrap libs since they restrict design, but I want the same class functionality that's used for margin and padding adjustments from directly within the HTML element.

---

# Sass' @each and @for Features
If you're a `.scss` fan (css extension), then you can add the `@each` and `@for` methods to a global stylesheet for this same behavior:
```scss
// Margin
@each $abbr, $name in ("t": "top", "r": "right", "b": "bottom", "l": "left") {
  @for $i from 1 through 20 {
    .m#{$abbr}-#{$i} {
      margin-#{$name}: 1rem * $i;
    }
  }
}

// Padding
@each $abbr, $name in ("t": "top", "r": "right", "b": "bottom", "l": "left") {
  @for $i from 1 through 20 {
    .p#{$abbr}-#{$i} {
      padding-#{$name}: 1rem * $i;
    }
  }
}
```
What's going on here?
* Defined abbreviations associated to full words in an array
* Defined limits of multiple (1 to 20)
* Applied with template literals where abbreviation pairs should be applied along with the multiple
Migration Readiness : Well Architected Framework for Landing Zone Assessment Part 1
Tags: migrations, landingzone, migrationreadinessassessment, wellarchitectedframework
Published: 2022-04-29 23:34:49

Hello Fellow Builders , 

I have been recently involved with a few Migration Readiness assessment for my clients 
Some of the assesments were for complete Journeys to cloud  while some were performed to check the Migration readiness assessment for them.
During these assessment there 2 topics which were consistent and proved out to be a great help for me as well the clients.

1. Cloud Landing Zone Assessment
2. DevSecOps Baselining.

In this post I am attaching a strawman of the **_Landing Zone_** assessment which was carried out and I am sure this would come in pretty handy for all the Architects/engineers or leaders who are currently involved in Migration Journeys.

**This can also be treated as a Well Architected Framework for a Landing Zone Assessment**

This assessment touchbases 6 major pillars of a Landing Zone .
I would cover each and every pillar in detail in my further posts 

_Although I would also like to hear your inputs /guidance/questions/comments if this is turning out to be useful or any improvements around it  ._
_Thanking in Advance _

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dad0b0kcdzwhum035gwi.png)
object oriented programming in Javascript (part 5)
Tags: javascript, programming, tutorial, beginners
Published: 2022-04-29 23:29:56

We have discussed 2 ways of creating object blueprints which are constructor functions and ES6 classes, but there still 1 less popular way of doing so which is the **Object.create()** method

## Creating objects with object.create()
first, the method takes 1 required paramater and another optional param, the first is the prototype to assign to the newly created object and the other is the props of the object
### Example
let's recreate the Customer blueprint
```javascript
const CustomerProto = {
  name: "",
  email: "",
  password: "",
  settings: {},
  cart: [],
  setSettings: function (settings) {
    this.settings = settings;
  },

  orderFood: function (food) {
    console.log(`ordering ${food}`);
  },
};

const customer = Object.create(CustomerProto);

customer.name = "name";
customer.email = "email";
customer.password = "password";
customer.setSettings({});
customer.cart = [];
customer.orderFood("pizza");
```
the methods declared in the CustomerProto oject will be applied to the new object automatically
as you can see this approach takes more code to work than other methods
in the next post i will talk about the principles of object oriented programming
Checksum
Tags: checksum, beginners, codenewbie
Published: 2022-04-29 23:22:38


When data are transmitted over the internet data could be loss due to signal noise or synchronization error. **Checksum** is a way to guarantee we have transmitted or received the full data.

## What is Checksum 

Checksum is a value that represents the sum of all bits a file have and then turned into a fixed length string. It also related as file's Hash. It can be identified as a very long string composed by letters and numbers.

## Why Checksum is important

Its a way to guarantee that the file you wanted is not corrupted or broken. Its a way to ensure all the bites were transferred correct, guaranteeing file's integrity.

When downloading a file you will receive the file's checksum, when the download is completed, you can validate the checksum you received at the beginning of the download and calculate the current file checksum. If the result is slightly different, you can delete the file and try again or even contact the providers.


## Incompatible checksum causes

It could be caused by a simple internet error - due a slow or not stable connection or a third party trying to intercept and change your data' transfer


## Where is it used

You can check on Microsoft's windows checksum by [running some terminal commands](https://support.microsoft.com/en-gb/topic/d92a713f-d793-7bd8-b0a4-4db811e29559) for example.

## Cooking a Checksum.

Checksum is generated by an algorithm that have an input file and will spit out a Hash - string composed by letters and numbers.

This algorithm in general terms will count all the bites and then use some techniques involving MD5, SHA-1 or SHA-256 to generate an HASH. The file's size has no influence on HASH length, it could be a 100KB or 100GB it will output an HASH will keep with the same HASH length.


There is some interesting ways to compute and techniques that could be used, which would make this merely article very long, so, not going to cover it now.


Its being noticed that MD5 and SHA-1 have generated same HASHes for files with different content, so it would invalidate the file's checksum. Although SHA-256 has no issue related reported.



## Conclusion

Checksum is a HASH that is used to check file's integrity after a download. Its generated by algorithms and basically uses MD5 or SHA-1 or SHA-256 as its base and Big Tech firms use it to guarantee you downloaded everything correctly.
Quest - Convert Figma to React
Tags: react, design, startup, nextjs
Published: 2022-04-29 23:01:03

The better way to build your frontend is here. Generate React components automatically from Figma. Get clean & extendable code as if you hand coded it. Built in support for MUI and design systems. Export your individual components or full apps with Create React App or Next.js We just had a successful run on Product Hunt yesterday and want to continue getting the word out and hear what concerns or features people would want in a product like this. 

Thanks and appreciate the feedback!
Andrew
co-founder Quest
https://www.quest.ai
Compile time dependency injection in Java with Dagger2
Published: 2022-04-29 22:56:40

---
title: Compile time dependency injection in Java with Dagger2
published: true
description: Compile time dependency injection in Java/Spring with Dagger2
tags: 
//cover_image: https://direct_url_to_image.jpg
---

This post is just for reference. Need to further look into how to use the compile time feature of Dagger2 in Spring/Spring boot. Spring sometimes relies on runtime dependency injection using reflection. Resource 1 (from Baeldung) has a easy to understand example of using Dagger2 to inject dependencies.

Resource: 
1. [Introduction to Dagger 2](https://www.baeldung.com/dagger-2)
2. [Dagger 2 Documentation](https://dagger.dev/dev-guide/)
3. [Inversion of Control & Dependency Injection in Spring](https://www.baeldung.com/inversion-control-and-dependency-injection-in-spring)
querySelectorAll JS
Published: 2022-04-29 22:56:11

this line of JS code return an empty list :
`const starsEl = document.querySelectorAll(".fa-star");`
HTML code : 
`<div class="stars-container">
 <i class="fa-solid fa-star"></i>
 <i class="fa-solid fa-star"></i>
 <i class="fa-solid fa-star"></i>
 <i class="fa-solid fa-star"></i>
 <i class="fa-solid fa-star"></i>
 </div>`
Some Native-Like Elements for Web Apps in Safari
Tags: webdev, pwa, mobile
Published: 2022-04-29 22:35:29

There are small behaviours in web apps, initially overlooked, that make it feel less like an actual app when viewing through a mobile browser. Here are some meta tags / links to apply to your index page so you can make the site/app feel more like an app when viewed in Safari.

---

### Remove Scaling
Sometimes you'll notice that the page will zoom in without your prompt, usually when you select a field or element of focus (like a form):

```html
<!--Removed <meta name="viewport" content="width=device-width, initial-scale=1"> to make more app-like -->
<meta name="viewport" content="user-scalable=no, width=device-width" />﻿
```

---

### Change the iOS Status Bar
This is the bar that shows the device's battery life and network. You can change this by adding this meta tag; and change the color options with content, adding default, black, black-translucent:
```html
<meta name="apple-mobile-web-app-status-bar-style" content="default"/>
```

---

### The Moving Scroll
When you scroll to the very bottom or very top, and keep pulling the screen, you'll notice that the screen will tug a bit and reveal a default hidden layer. To stop this you can add the following script at the end of the body:
```html
<script>
function BlockMove(event) {   event.preventDefault() ;  }
</script>
```
With this added to your `<body>` tag:
```html
<body ontouchmove="BlockMove(event);">
  ﻿<!--App root code-->
</body>
```
The best keyboard I ever had for coding - Revisited
Tags: watercooler, webdev, productivity, programming
Published: 2022-04-29 22:31:34



<a href="https://dev.to/joelbonetr/the-best-keyboard-i-ever-had-for-coding-l3m" target="_blank" alt="The best keyboard I ever had for coding">Previous post</a>

Some months ago they released a new version, this time with GL switches instead Romer G ones, so I bought it -again with clicky switches- to test the differences.

The usage is almost the same but this new GL are allegedly more durable and so on.

Both keyboards work as fine as the first day so I guess I'll have to wait to see how much the Romer G ones lasts. 

<blockquote>
After testing it since February 2020 I can ensure that

Logitech G915 / Logitech G915 TKL with Clicky switches

is the best keyboard for coding.
</blockquote>

They also swapped the material on the key caps which is something I'm not sure if I like or not.

It's been more than two years since I bought the first G915 TKL while I bought the second one in January 25th 2022.

One thing I didn't mention in the last post is that it has two possible connections. Through the dongle and through Bluetooth.
This is specially helpful in my daily usage as I connect it using Bluetooth to the company's laptop to work and then I can switch to my own computer just by hitting a button.

I can confirm that the low profile thingy is a must, no more pain in my wrists!

This time I also got some pics of my current desktop 😁

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73beta1adoioqmpt2ugf.jpg)


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


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

<strong>TL;DR</strong>
After more than 2 years I still think that this is the best keyboard I ever had for coding.

<hr />
What keyboard do you use? Have you watched for ergonomics and health at your workspace?

Also if you need help with peripherals or hardware ask me anything!
Using Local Storage for Remembering User Visits
Tags: angular, javascript, webdev, typescript
Published: 2022-04-29 22:12:51

### What is Local Storage?
Local storage is an object in the DOM where you can store data, based on user behavior. When you store data on the `localStorage` object (as opposed to `sessionStorage`) it **never expires**. This is pretty handy since you can store something in the DOM (using the `set` method), and get that same data (with a future `get` method) to see if that user had been on the page yet.


## The Use-Case
We will assume that there is a toast notification that is triggered when the custom function `announceToast()` is called in a component. We'll also assume that it's recently been updated with new information.

In the `app.component.ts` file, we've initialized a property (to the type of string) to hold a value representing the latest post:

```typescript
export class AppComponent implements OnInit {
  currentToast = 'Robots vs. Humans';
}
```

Now we can check to see if there's an object key in `localStorage` called `blog` (to the type of string) by checking when the component initializes:
```typescript
export class AppComponent implements OnInit {  
  currentToast = 'Robots vs. Humans';  

  ngOnInit { // When the app initializes
    // If the localStorage object key 'blog' has a value that does not match the currentToast string
    if (localStorage.getItem('blog') !== this.currentToast) {
      // Then we will clear localStorage altogether      
      localStorage.clear();
      // We will trigger the new announcement toast      
      this.announceToast();
      // And we'll set the 'blog' key to have the new current value      
      localStorage.setItem('blog', this.currentToast);    
    }  
  }
}
    // If it does match, then we will do nothing and the value we set will continue to sit in localStorage under that key

```

This means, that when we eventually change the value of the currentToast property to something that is NOT 'Robots vs. Humans', the component will automatically evaluate this, clear the object and replace it with the new value (while triggering the new toast).

Now we only need to update one string to ensure that the user will see a new toast every time (and we don't pollute the localStorage object with old key value pairs).
How to Tweet YouTube video without link
Tags: youtube, videotweet, clippost
Published: 2022-04-29 22:06:00

---
title: How to Tweet YouTube video without link
published: true
description: 
tags: #Twitter #YouTube #VideoTweet #Clippost
---

[YouTube is the largest video sharing website](https://kinsta.com/blog/video-hosting/#1-youtube) on the internet, by far. With 1.9 billion logged-in users active on the site every month, nothing even comes close. You can now tweet YouTube videos without link on Twitter. Video tweets get more user engagement and interaction as compared to sharing url link on Twitter. 

Clippost.io can convert YouTube video into video tweet. You cannot only convert clips within a YouTube video to video tweet. But, you can also post a complete thread of clips on twitter from a single YouTube video. Please follow steps below to tweet YouTube video without link.

## Step 1
Go to [clippost.io](https://clippost.io) and click **LOGIN WITH TWITTER**

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

## Step 1
You will see Dashboard screen after login. Click **New Video** and paste your YouTube video url

Note: If you want to tweet video in reply to another tweet then click on checkbox _**Send as a reply to a tweet**_ and paste url of the tweet you want to reply to

![Image description](https://blog.clippost.io/wp-content/uploads/2022/04/youtube_2-2048x1184.png)

## Step 3
It will take you to New Video screen. Now click on **add clip** and add start time and end time of clip in MM:SS format where MM is minutes and SS is second.

Note: If you want to tweet whole video as video tweet thread. Please select _**Generate clips automatically**_

![Image description](https://blog.clippost.io/wp-content/uploads/2022/04/youtube_3-1536x888.png)
 
## Step 4
It will take you to **Tweet Text** page. In this page you can add tweet text to each clip. Also, you can choose between you want to schedule the tweet or send it immediately

![Image description](https://blog.clippost.io/wp-content/uploads/2022/04/youtube_5-2048x1186.png)

## Step 5
You are done

![Image description](https://blog.clippost.io/wp-content/uploads/2022/04/youtube_7-2048x1184.png)

You can keep track of status any time visiting info screen

![Image description](https://blog.clippost.io/wp-content/uploads/2022/04/youtube_8-2048x1187.png)

You can also watch our YouTube video for [How to Tweet YouTube Video without link](https://www.youtube.com/watch?v=5TSRIqKrZ_w&ab_channel=clippost)

For queries please email us at help@clippost.io
Programming Tip #1: Avoid Primitives, Use Product Types
Tags: programmingtip, elm, elmlang
Published: 2022-04-29 21:50:50

---
title: Programming Tip #1: Avoid Primitives, Use Product Types
published: true
description: 
tags: programmingtip,elm,elmlang
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6s6zn909j13mrmq4f76.jpg
---

Programming Tip #1 - in Elm, Avoid Primitives, Use Product Types

[Learn More](https://thoughtbot.com/blog/lessons-learned-avoiding-primitives-in-elm)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6s6zn909j13mrmq4f76.jpg)
[Desafio] - Configurar Timeout de um API Gateway
Published: 2022-04-29 21:37:40

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1520154762875838464)

---

Ei dev,

Final de semana tá aí e vc não vai perder tempo descansando, transando, bebendo, se divertindo, tá? Aceita esse desafio que é muito mais legal!

O desafio é sobre você pensar em como configurar timeouts. Já teve que lidar com isso?

cc @sseraphini
 
🧵

---

É normal quando a gente está iniciando não pensar muito em configurações de timeout, né?

Mas imagina que vc agora é responsável por configurar um endpoint novo num API Gateway e você precisa definir o timeout e justificar sua decisão.

O cenário é o da imagem aqui.

![img](https://pbs.twimg.com/media/FRistNCUcAAR1L2?format=jpg&name=small)

---

Você precisa ser capaz de trabalhar com as informações do desenho – nem tudo está aí.

Claro, como é uma brincadeira/exercício vc pode assumir algumas premissas. Inclusive, isso é bom pq assumir premissas te faz pensar nas perguntas que deveriam ser feitas num cenário real.

---

Comenta aí qual o timeout vc definiria e qual seria o racional da sua decisão.

Obrigado demais por ter se interessado pela thread :) ❤️ 

Ah, e vê se vai se divertir depois de terminar a definição do timeout. 🥳
5 Higher Order Functions untuk Memanipulasi Array di Javascript
Tags: javascript, webdev, tutorial
Published: 2022-04-29 21:23:29

Kali ini gua bakal menjelaskan 5 Higher Order Functions untuk Memanipulasi Array, yang mungkin berguna untuk projek-projek Javascript lu kedepannya.

- Foreach

Fungsi forEach digunakan untuk me-looping sebuah array, berdasarkan banyaknya elemen atau item di dalam array tersebut.

![Foreach snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tuvxnwesv394n8937ktq.png)

- Map

Fungsi map digunakan untuk menghasilkan array baru dari sebuah array.

![Map snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg22exf3ov8boc0h7uzv.png)

- Filter

Fungsi filter digunakan untuk memfilter elemen-elemen atau item-item pada sebuah array dengan spesifik.

![Filter snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01mdv0w36mdqm3rv208y.png)

- Find

Fungsi find digunakan untuk mencari sebuah elemen atau item pada sebuah array.

![Find snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2ihye4jvf0lxhzsuei8.png)

- Reduce

Fungsi reduce digunakan untuk mengeksekusi atau membaca nilai setiap elemen atau item pada sebuah array lalu mengkalkulasinya ataupun menggabungkannya.

![Reduce snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxbix5736ti1rygetua8.png)
Appwrite Hackathon Reminder ⏰
Tags: appwritehack, appwrite, meta
Published: 2022-04-29 21:22:55

---
title: Appwrite Hackathon Reminder ⏰
published: true
description: You still have time to participate in the Appwrite Hackathon on DEV! 
tags: appwritehack, appwrite, meta
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sbnvyv22dhhuq83lnvk.png
---

### Submissions for the Appwrite Hackathon on DEV are due on May 12 at 11:59 PM UTC.

{% embed https://dev.to/devteam/announcing-the-appwrite-hackathon-on-dev-1oc0 %}

---

[Appwrite](https://appwrite.io/) is a self-hosted backend-as-a-service platform that gives developers all the APIs required to build any application. With Appwrite, you can add a number of crucial services into your app including user authentication, file management, image handling, Cloud Functions, Realtime database and more.

The [Appwrite Hackathon on DEV](https://dev.to/devteam/announcing-the-appwrite-hackathon-on-dev-1oc0) is an opportunity to harness Appwrite to build a new application, write a post about it on DEV (your "submission"), and share your work with the world! In doing so, you'll earn a limited-edition profile badge, a DEV sticker pack, and a special Appwrite t-shirt. You'll _also_ be eligible to win up to $2,000 USD in cash, up to $300 USD towards the Forem Shop, and lots more. 🔥 

Full details and rules for participating in the Appwrite Hackathon on DEV can be found [here](https://dev.to/devteam/announcing-the-appwrite-hackathon-on-dev-1oc0).

---

If you get stuck at any point, please refer to the [help thread](https://dev.to/devteam/appwrite-x-dev-hackathon-help-thread-4jfj) which the DEV and Appwrite teams are monitoring. If you instead just want to connect or swap ideas with other participants, the [community discussion thread](https://dev.to/devteam/community-discussion-thread-appwrite-x-dev-hackathon-13aj) is the spot to do just that!

If you've already published your submission, great job! Our judges look forward to reviewing your project. Thanks for participating. You're also invited to submit multiple times if you wish!


Happy coding!