teleren/devto huggingface dataset:
Why Older Versions of Mastodon Made It Easier to Follow Accounts
Published: 2023-01-31 15:58:05

Recently, I discussed with a friend ways to simplify the process of following accounts across Mastodon instances. There have been a wave of chrome extensions for achieving this, I personally use [Mastodon Profile Redirect](https://chrome.google.com/webstore/detail/mastodon-profile-redirect/limifnkopacddgpihodacjeckfkpbfoe). We considered the idea of browsers implementing a `fedi:` scheme, like `mailto:`, for links. However, I was reminded of the easy follow mechanism in older Mastodon versions and wanted to document how it worked and ponder why it was removed 🤔.

## What's the issue?

Let's say your instance is `indieweb.social` and you want to follow someone on a different instance, say `tech.lgbt` (which uses v4.0.2). What currently happens? It will show this popup when you press the follow button:

![Screenshot of what happens on mastodon v4.0 when you follow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gv6htm60fxi2ztpk0fk3.png)

Can you see that? It actually asks you to copy and paste into your instances search box 🤦...

> Copy and paste this URL into the search field of your favourite Mastodon app or the web interface of your Mastodon server.

## What happens on older versions of mastodon?

I had to do some digging to find an example server to use running 3.0, I found [usne.social](https://usne.social). When you attempt to follow someone on 3.0 you're greeted by this popup. For me my `username@instance` is pre-populated by chrome making it really easy to fill.

![Proceed to follow popup in mastodon 3.0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaa6hstb8pddcxbqdq32.png)

The second popup is optional, and depends if your logged into your instance already, it's unlikely you'd see this but is essential to understanding how this works.

![optional login popup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wefy149ciaqi0kyxjylb.png)

Then I get another popup. 

![Second (or third depending if your logged in) popup mastodon 3.0 gives you to follow.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl6g2lb477l3xlvqy1es.png)

## How does this work?

Older versions of Mastodon use special endpoints, redirects, and cookies to navigate users to the desired location.

Here are the URLS in order:

* `<FOREIGN_INSTANCE>/users/<FOLLOWING_USER>/remote_follow`
* `<YOUR_INSTANCE>/auth/sign_in` (optional)
* `<YOUR_INSTANCE>/authorize_interaction?uri=<FULL_PROFILE_URL>`

From this you can get a better understanding of the redirects involved. First you start out on the account you want to follow and input your `username@instance` this allows the foreign instance to redirect you to your instance, which checks if there's a logged in user, if not asks you to log in, if yes, provides a page with a follow button for you.

## Conclusion

I wonder why this feature was dropped in 4.0. Perhaps it presented a security vulnerability if someone "faked" the popup and asked for user credentials? If you have any thoughts or relevent github comments let me know below!
Codespaces Tips: How to Create Pull Requests Without Leaving Your Code Editor # codespaces # beginners # github # tutorial :
Published: 2023-01-31 15:56:02

Codespaces has been a game changer for the way I work with repos on GitHub. For example, [FIFA 23mod apk](https://243tuto.com/fifa-23-apk-mod-obb-datafifa-2023-mobile-apk/) I no longer clone repositories to my local machine since there isn’t a need to do so anymore with Codespaces in the browser.

Last week, while pushing code to update an internal workflow, Codespaces asked me an interesting question. Once I hit enter after my regular git push, a notification popped up asking if I wanted to open a PR in Codespaces with GitHub’s Pull Request and Issues extension.

Usually, I would completely ignore these pop up messages but I was intrigued enough to select “yes” and what happened next completely blew my mind - ok, ok, slight exaggeration but I was impressed!

GIF

This beautifully intuitive UI popped up on my side panel showing me my branch, the main branch that I need to merge my changes into, a title box with my commit message and a description section for my PR needs. [Fifa 23 mod apk](https://www.lushitech.net/fifa-2023-mod-apk-obb-datafifa-23-mobile-nouveaux-kits/) There was even an option to create the PR as a draft, see below
AWS 基礎 Part 9 -- ALB で EC2 サーバーたちをロードバランスする
Tags: aws, alb, ec2
Published: 2023-01-31 15:52:34


# ALB (App Load Blancer) と他の ELB との違い

---

## ELB とは

https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/introduction.html

ELB とは、アクセスを各サーバーに分散して転送するもの。

- 転送先のサーバーが一つダウンしたら転送をやめる
- 内部(サブネット？転送先？)の CPU の状態をモニターする

他にもこれらの機能がある。

また、ELB は ALB を含む大きな括りであり。ALB 以外もある。
ELB には ALB の他に

- Network Load Balancer
- Gateway Load Balancer
- Classic Load Balancer

これら 3 つがある。

---

## NLB, ALB, CLB　の違い

https://qiita.com/suzuki-navi/items/a8f4e21d75e685df51e9

違いとしては

- NLB: IP 固定と急激な負荷への対応
- ALB: リクエスト元によって向き先を変える、ログを取る
- CLB: キャッシュを受け取る、カスタムセキュリティポリシーの作成

これらの特徴があるようだ。

Gateway Load Blancer は情報が少ないので、主流ではないと予想して調べなかった。

---

## ALB の詳しい機能

https://qiita.com/suzuki-navi/items/a8f4e21d75e685df51e9#alb

同じく suzuki-nabi さんの記事を参考にして

ターゲットは

- Lambda 関数
- EC2 インスタンス ID
- IP アドレス

この 3 つで指定できるようだ。

ECS コンテナに繋げたい時は、ECS で private IP を出して、そこに IP アドレス指定するようだ。

- ターゲットからのリクエストは転送される
- クライアントからは直接ターゲットを向いているように見える

このように書いてあったので、リクエストのクエリやペイロードなどを改めて渡し直す処理は書かなくてもできると解釈した

---
---

# ALB の構築

---

## 前提条件

https://dev.to/kaede_io/aws-ji-chu-part-5-ta-mitai-toben-fan-yong-no-ec2-insutansuwozuo-cheng-suru-e53

この記事で作った VPC サブネットに構築する。

https://youtu.be/Y-Mc2OenReA?t=2556

クラインさんの動画を参考にする。

- 基本情報
- 領域(AZ)
- セキュリティグループ
- ターゲットグループ
- ターゲット

これらを設定して作成することができる。

---

## 基本情報

- 名前: klein-alb
- スキーマ: インターネット直面
- IP タイプ: ipv4
- リスナー: HTTP 80

---

## 領域(AZ)

- VPC: vpc-elb-ec2
- サブネット: klein-public-1a
- サブネット: klein-public-1c

VPC とサブネットは接続先の EC2 が入っているものである必要があると考える。

---

## セキュリティグループ

ALB がどこからアクセスできるかの設定。

- 名前: klein-alb-sg
- カスタムTCP 80 
- ソース 0.0.0.0

---

## ルーティングのターゲットグループ

ALB がどうやってアクセスするかの設定

- 名前: klein-alb-sg
- ターゲットの種類: インスタンス
- プロトコル: HTTP
- ポート: 80
- ソース 0.0.0.0

---

## ターゲットの登録

ALB がどこにアクセスするかの設定。

インスタンスにこれらを指定。

  - elb-ec2-test-A
  - elb-ec2-test-B

---

## ロードバランサーの完成

上記を全てを設定すると、ロードバランサーが作成できる。

## アクセスする

ロードバランサーの詳細ページから Public IP を確認してアクセスする。

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

これで、アクセスするたびに
private サーバーA
private サーバーB

これらを均等に割り振ってくれるようになった。
Want To Build Your Very Own Lofi Radio Live Stream?
Tags: amazonivs, aws, livestream, lofi
Published: 2023-01-31 15:43:01

Have you ever wanted to build your own Lofi Radio live stream? Tune in to Streaming on Streaming tomorrow, Feb 1, at 4:00pm ET on [twitch.tv/aws](https://twitch.tv/aws) to learn how to do just that. We'll show you how to create and broadcast your very own Lofi channel with Amazon Interactive Video Service (Amazon IVS) in less than an hour. See you then!

{% youtube https://www.youtube.com/watch?v=8_hR4N5EVR0 %}
RPM: dynamic macro for %_topdir
Tags: linux, rpm, macro, short
Published: 2023-01-31 15:27:39

When building RPM packages with `rpmbuild` and you run `rpmdev-setuptree` to setup the build environment. The default macro for `%_topdir` is `%{getenv:HOME}/rpmbuild`.

If you _don't_ want to use the default location, you can define that with `--define` on the command line, or define the macro in `~/.rpmmacros`.

To use a custom path I've seen suggestions to use `$(pwd)` - which is a great way to select current path. However… If you then run `rpmdev-setuptree` in your home folder, forgetting about the macro. All folders end up all over your home folder.

So, here's an example to set a macro in `~/.rpmmacros` to make it more dynamic - and to prevent your custom macro to run in HOME.

```conf
# RPM build
# ------------------------------------------
# rpmdev-setuptree:
#   - If run in HOME: use standard folder layout
#     Ex: HOME/rpmbuild
#   - if not: use PWD from current dir
#     Ex1: PWD/rpmbuild,
#     Ex2: $ mkdir project && cd rpmbuild/project
#          $ rpmdev-setuptree
#          HOME/rpmbuild/project/{SOURCES,SPECS,etc}
#
# This is mainly a protection, to prevent PWD to create
# the folders directly in HOME
#
%_topdir %([[ %(pwd) == %{getenv:HOME} ]] && \
    echo %{getenv:HOME}/rpmbuild || echo %(pwd))
```

- - -

So, now I can use it in better and more organized way. I put all in `.rpm/rpmbuild/`, and all projects can live side-by-side in there.

```bash
# Example
$ cd .rpm/rpmbuild/
$ mkdir baz && cd baz
$ rpmdev-setuptree
$ mkdir X_NOTES && touch X_NOTES/__notes.txt
$ cd ..
$ ls
foo bar baz
```

- - -

This setup works really great for me. The xtra `X_NOTES` folder is just something I find useful to keep notes in, backups, original files, logs from failed builds, etc. Whatever you dont want to put in the other folders. Keeping it a bit cleaner.

Hope you found it useful.

&nbsp;

_// Happy hacking…_ :+1:

· Eric
CSS tutorial series: CSS variables
Tags: beginners, webdev, css, tutorial
Published: 2023-01-31 15:27:05

Up until this post we've constantly used the conventional way of defining CSS properties.

In this post we're going to explain what are CSS variables and why are they helpful and time saving and efficient.

## What are CSS variables?
CSS variables are variables that declare that are intended to be used repeatedly throughout the CSS document.

## How do we declare CSS variables
At the top of you CSS file

```CSS
:root {
  --variable: value;
}
```

### What is  `:root` ?
`:root`, is a `pseudo-class` that represents the `<html>` element which is the top level element of the document object model. **`:root` has a higher specificity than `<html>`**


## Dissecting the custom property
A custom property are defined using `--` two hyphens prefixing the property, following that property a colon `:` then the value that we'd like to assign it.

Let's look at an example.

```CSS
 :root {
   --color: #000;
 }
```
We've created a variable called `color` and assigned the color black to it. Now this won't be visible on the page unless the custom variable **_ is assigned to a property_** like `background-color`.

This might seem complicated but we're going to see everything visually to understand better.

## How to assign a custom variable to a property?
We cannot directly assign the custom variable to a property.
What do we mean by that? Let's take the above variable `--color` to a property.

For example, let's say we have a `<div>` and we want to give it a background of black using the above variable.

```CSS
 div {
  background-color: --color; 
}
```
Doing so won't apply the color to the background of the `<div>` because it is an invalid syntax. To make the property work, we use the function `var()`.

## The function `var()`
`var()`, is used to plug in the value of the custom variable to the property in order for it to work. 

```CSS
 div {
  background-color: var(--color);
}
```

This function takes  multiple arguments, the first arguments being the custom variable we want assigned to a specific property followed by multiple fallback values.

## what is a fallback value?
A fallback value is another value that substitutes the first argument which is the custom property if it isn't available.

Let's look at that 

```CSS
:root {
   --color: #000;
 }

 div {
  background-color: var(--color, red);
}
```
if the first argument `--color` is not available the color red will be applied. Let's take a look at another example: 

```CSS
:root {
   --font: 'Inter';
 }

 div {
  font-family: var(--font, 'Arial');
}
```
Let's say the font family `Inter` is not available on some other browser, the fallback value `arial` will be the one taking effect.

## Why do we use CSS variables?
In case we'd like to suddenly change the `background-color` in our style sheet, instead of going through the entire document we can just change the value of the custom variable we assigned to the `background-color` property. It is time saving.

{% codepen https://codepen.io/fullstackjo/pen/KKBGaed %}
PHP Scraper + Python fasttext model
Published: 2023-01-31 15:26:55

## What I built

A little tool to help developers with data science tasks. Often when working with machine learning models - you need large amounts of data, this tool will allow for scraping of data from Shopify and other sources (responsible use off course!).

Once the data is scraped - a basic fasttext model can be generated to provide text classification functionality.

### App Link
https://github.com/kwnaidoo/scraper-mltoolkit
Malware Samples - Some challenges from 2022
Tags: cybersecurity, malware, security
Published: 2023-01-31 15:20:23

Putting up my analysis of some malware samples

| Samples | Report |
|--- |--- |
|`5dee718c386934d2494ee5ddde79d27a69c1687493b6eb40d0db47f730ab76fb`| [View](https://sy1.sh/malware-analysis/Sample_5dee71.pdf) |
|`6fd9909f8ec811577351402832665d4a6b6e5399422b8cac79dd98532ac48913`| [View](https://sy1.sh/malware-analysis/Sample_6fd990.pdf) |
|`19a3dd8024bb4677261ecd8bb85e8a4c53d15870e4b9d2203e933a00b7eecb85`| [View](https://sy1.sh/malware-analysis/Sample_19a3dd.pdf) |
|`280d2ceb081745412127a018055234f5a72935a77aa102aef7924ba21f43d4ee`| [View](https://sy1.sh/malware-analysis/Sample_280d2c.pdf) |
|`f8c4c946eaedcfa8bbb722970211c2c4a458f6483dafb5d5a7fd83b3daa441cd`| [View](https://sy1.sh/malware-analysis/Sample_f8c4c9.pdf) |

# `f8c4c946eaedcfa8bbb722970211c2c4a458f6483dafb5d5a7fd83b3daa441cd` 

I eventually found the XOR cipher key, unfortunately my bruteforce script wasn't able to recover the url but in the end the string wasn't exactly an url. The key was `en-CB` and the decoded string is `c2.2go.ma1w.are_eT!/eab/+CE%&6d`
Beginning
Tags: beginners
Published: 2023-01-31 15:19:42

Good evening folks,
This is sreeraj, I am a final year BCA student. I created an account in dev.to an year ago but i am not active. Today onwards i am active in dev.to and sharing some tech information or what ever i am doing on my projects. I done two projects in node.js that is an E-commerce site and an Field Employee attendance management and track work progress based on GPS and i done 100+ questions in leetcode. Also i am a student at acciojob. Currently am planning to create an education solution that contains Students attendance , Syllabus based notes and exam hall arrangement ... I am trying to update my journey of education solution.

Thank you.
Spend long hours in front of screens? Then, you need to protect your eyes.
Tags: glasses, barnerbrand, antibluelight
Published: 2023-01-31 15:09:14

---
title: Spend long hours in front of screens? Then, you need to protect your eyes.
published: true
description: 
tags: #glasses #barnerbrand #antibluelight
# cover_image: https://cdn.shopify.com/s/files/1/0015/5110/6106/products/Osterbro_black-noir_man_frente_8_400x.jpg?v=1668162311
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-31 14:24 +0000
---
**Shop Barner brand products and enjoy 10% discount.** 

- Anti blue light glasses 
- Sunglasses 😎🕶️
- Reading glasses
- Prescription lenses
..and accessories 

Order your eyewear below!!🛍️🛒
https://linkpop.com/avastoresng
Discount code: **VICTORIAAVA**

Virtual tryons is also available.
CodePen Designs - 30 : Daily UI #008 - 404 Page
Tags: codepen, css, webdev, devops
Published: 2023-01-31 15:04:23

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---


#### Codepen Design - 30
---
{% codepen https://codepen.io/rafaelavlucas/pen/NWWQNjZ %}


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
Crucial git commands
Published: 2023-01-31 15:01:16

We're going to use this post as a place to store the running list of commands that I need fairly routinely when developing on rails, but tend to forget the specific syntax.  Everything that gets done on the rails console belongs here, we'll try to organize it as we add to it:

**Gem Stuff**:
to install your gem bundle: `bundle install`

**Ruby at the command line**:
Run ruby from the command line: `rails console`

**Start your app**: `bin/server`

**generate a migration file**: `rails generate model Thingy name:string description:text`

**migrate** the built database: `rails db:migrate`

(Here is a good general resource for migrations: https://guides.rubyonrails.org/v3.2/migrations.html)

**Scaffolding!** Build a new DB with all the commands and stuff ready to go: `rails g scaffold`

A scaffold is a set of automatically generated files which forms the basic structure of a Rails project. **Scaffold is the same thing as generating a migration, but using the `scaffold` syntax tells rails to set up the associated db files.** You could technically write it all in yourself after doing a `rails generate migration`, but using `scaffold`is a shortcut that saves you a lot of thinking and typing.

These scaffold files include:
- A controller
- A model
- Views for every standard controller action (index, edit, show, new)
- A new route.
- A migration to prepare your database.
Exploring the Stunning Imagination of AI: Discovering its Contribution through Discord
Tags: ai, dicord
Published: 2023-01-31 14:50:21

## AI and It's Imagination
Artificial Intelligence (AI) has been gaining widespread attention in recent times. It has the ability to imagine and create stunning images based on a given scenario. This process is a result of the rapid advancement of AI technology and algorithms that allow it to generate visuals that are beyond human imagination.

> The imagination of tomorrow is more important than the history of yesterday." - Walt Disney

## Discord, Source of AI Generated Images
Recently, I stumbled upon some images made by AI on discord, and I was truly impressed by their quality. These images showcase the power of AI in creating visually appealing and surreal scenes. The use of AI in creating images and other forms of digital art is an exciting development that is sure to open up new possibilities in the world of art and design.

## Conclusion
In conclusion, AI is rapidly changing the way we think about art and design. It has the potential to bring a new dimension to the field of visual arts and can be a valuable tool for creative minds looking to explore new avenues for expression.

## Samples

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zu6hbowu24e20jqp0zg2.png)
Welcome @devintelbyte, the 1 millionth registered DEV!
Tags: meta, watercooler
Published: 2023-01-31 14:45:08

DEV just passed 1 million registered members, and the 1 millionth is @devintelbyte 😆.

**Thank you** to all those who have been along along for the ride, and we hope you have been enriched by at least one thing you've read on DEV. I suspect you have.

We're deep in the continuous process of reinvention, and growth of all kind to ensure that we provide a valuable experience for the whole developer ecosystem. This would not be possible without all 1 million of those registered members (even the spam bots and hackers, who have helped us develop a resilient system). It's exciting to take a moment to celebrate this milestone.

Of those registered members are 669 individuals who have committed code to [Forem](https://github.com/forem/forem), the open source technology that powers DEV — and our core team members, past and present.

**Here's to the first million, and our collective efforts to create a welcoming environment for the next million!**

![cheers to 1 million](https://media.giphy.com/media/8Iv5lqKwKsZ2g/giphy.gif)

Happy coding!
TL;DR CommonJS vs ESM
Tags: javascript, webdev, node, typescript
Published: 2023-01-31 14:39:38

In a [Node.js](https://nodejs.org/en/) project, you're likely to run into both CommonJS and ESM modules. Here's how to tell these module types apart at a glance.

## CommonJS

[CommonJS](https://nodejs.org/api/modules.html) modules were part of Node.js when it was written in 2009. They run synchronously. Imports and exports are resolved and scripts are executed dynamically at runtime.

CommonJS uses `__filename`, `__dirname`, and `NODE_PATH` variables. ESM does not.

## ESM

[ECMAScript modules](https://nodejs.org/api/esm.html) (ESM) or ES Modules were introduced in 2015 with JavaScriptES6 (also known as [ECMAScript](https://www.freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript-cba48c73a2b5/) 2015 or ECMAScript 6). They are asynchronous. Imports and exports are resolved statically at parse time. The ESM module loader then downloads and parses scripts. Finally, the script executes.

ESM uses top-level `await` (`await` in a file outside an `async function()`). CommonJS does not.

## Package.json

CommonJS:

```JSON
"type": "commonjs"
```

ESM:

```JSON
"type": "module"
```

Node.js throws an error for ESM modules without `"type": "module"`, but I have yet to see a `package.json` with `"type": "commonjs"` in the wild.

## Imports

CommonJS:

```JavaScript
var module = require('file path');
```

ESM:

```JavaScript
import defaultStuff, { namedStuff } from 'file path';
```

## Exports

CommonJS: 

```JavaScript
// default
module.exports =

// default read-only
exports =

// named
module.exports.name =

// named read-only
exports.name =
```

ESM:

```JavaScript
// default
export default name

// named
export name
```

## File Extensions

Node.js will treat `.js` and `.ts` as CommonJS modules by default.

CommonJS uses `.cjs` for JavaScript and `.cts` for TypeScript.

ESM uses `.mjs` for JavaScript and `.mts` for TypeScript.

## Runtime Environments

CommonJS is supported in all versions of Node.js.

ESM is supported in browsers and Node.js v12 or higher.

## Strict Mode

CommonJS needs `use strict` at the top of the file.

ESM uses strict mode by default.

## This

In CommonJS modules, `this` points at `exports`.

In ES modules, `this` is `undefined`.

## Conclusion

At this point, I've upgraded a package and gotten an error like "ES Modules not supported" or "[module] is a CommonJS module, which may not support all module.exports as named exports" a few times. While troubleshooting, the search results I got were guides on how to write these modules or treatises on which one is better. This is the summary I wish I had before I had to jump down a rabbit hole just to understand an error.
Is anyone thinking on starting a podcast about development?
Tags: podcast, collaboration, development
Published: 2023-01-31 14:32:22

---
title: Is anyone thinking on starting a podcast about development?
published: true
description: Lets colab and start something together.
tags: 
 - podcast
 - collaboration
 - development
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-31 12:03 +0000
---

### If you are 
Then reach out to me or just post your linkedin profile in the comments, I will reach out and we can discuss.

### If you are not then you can still reach out on linkedin just in case. :)