teleren/devto huggingface dataset:
Ease into htmx with htmx-get
Tags: webdev
Published: 2022-03-25 17:10:21

---
canonical_url: https://waylonwalker.com/til/htmx-get/
cover_image: https://images.waylonwalker.com/til/htmx-get.png
published: true
series: til
tags:
- webdev
- webdev
- webdev
title: Ease into htmx with htmx-get
---

I recently attended [python web conf 2022](https://2022.pythonwebconf.com/) and after seeing some incredible presentations on it I am excited to give [htmx](https://htmx.org/) a try.

## The base page

Start with some html boilerplate, pop in a script tag to add the htmx.org script, and a button that says click me.  I added just a tish of style so that it does not sear your delicate developer your eyes.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      html  { background: #1f2022; color: #eefbfe; font-size: 64px; }
      button {font-size: 64px;}
      body { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items:center; }
    </style>
    <!-- Load from unpkg -->
    <script src="https://unpkg.com/htmx.org@1.7.0"></script>
  </head>
  <body>
  <!-- have a button POST a click via AJAX -->
  <button hx-get="/partial" hx-swap="outerHTML">
    Click Me
  </button>

  </body>
</html>
```

Save this as `index.html` and fire up a webserver and you will be presented with this big beefcake of a button.

![big beefcake of a button](https://images.waylonwalker.com/htmx-get-til-click-me.png)

If you don't have a development server preference I reccomend opening the terminal and running `python -m http.server 8000` then opening your browser to `localhost:8000`

## The Partial

Now the page has a button that is ready to replace itself, notice the
`hx-swap="outerHTML">`, with the contents of /partial. To create a
static api of sorts we can simply host a partial page in a file at
`/partial/index.html` with the following contents.

```html
<p>
hello
</p>
```

![the final results](https://images.waylonwalker.com/htmx-get-til-hello.png)

<script src="https://unpkg.com/htmx.org@1.7.0"></script>

## Tree

To make it a bit clearer here is what the file tree looks like after setting this up.

```txt
~/git/htmx  v3.9.7 (git)
❯ tree
.
├── clicked
│   └── index.html
└── index.html
```

## Demo

I added htmx to this page and setup a partial below, check out this easter egg.

<button hx-get="./partial" hx-swap="outerHTML">
    Click Me
</button>


## Links

* [python web conf 2022](https://2022.pythonwebconf.com/)
* [htmx](https://htmx.org/)
* [big beefcake of a button](https://images.waylonwalker.com/htmx-get-til-click-me.png)
* [the final results](https://images.waylonwalker.com/htmx-get-til-hello.png)
Instalação do Erlang e Elixir com ASDF no Ubuntu
Tags: elixir, erlang, programming
Published: 2022-03-25 16:59:25

Primeiramente vamos entender o que é o [ASDF](https://github.com/asdf-vm/asdf). O ASDF é uma ferramenta CLI que permite o gerenciamento de múltiplas linguagens como elixir, ruby, erlang, python, entre outras...

Para instalação do ASDF, seguimos as orientações encontradas no site https://asdf-vm.com/guide/getting-started.html

**Instalação de dependencias e do Erlang**
Nesse caso, vamos seguir as configurações referente ao Ubuntu 20.04 LTS. Você pode ver as configurações de diferentes distros no link do [github do asdf-erlang] (https://github.com/asdf-vm/asdf-erlang#before-asdf-install)

```bash
apt-get -y install build-essential autoconf m4 libncurses5-dev libwxgtk3.0-gtk3-dev libwxgtk-webview3.0-gtk3-dev libgl1-mesa-dev libglu1-mesa-dev libpng-dev libssh-dev unixodbc-dev xsltproc fop libxml2-utils libncurses-dev openjdk-11-jdk
``` 
Após a instalação das dependencias, instalaremos o plugin do erlang com o seguinte comando:

```bash
asdf plugin add erlang https://github.com/asdf-vm/asdf-erlang.git
```

Com o plugin instalado, você pode ver todas as versões disponíveis para instalação com o comando: 

```bash
asdf list all erlang
```

Neste caso, iremos instalar a versão `24.3.2` com o comando:
```bash
asdf install erlang 24.3.2
```
Com o próximo comando, deixaremos a versão `24.3.2` do erlang como a default no nosso sistema operacional.

```sh
asdf global erlang 24.3.2
```
**Instalação do elixir**
Da mesma forma, instalaremos primeiro o plugin do elixir conforme o [github do asdf-elixir] (https://github.com/asdf-vm/asdf-elixir).
```bash
asdf plugin-add elixir https://github.com/asdf-vm/asdf-elixir.git
```
Após instalação do plugin, vamos instalar o elixir. Caso seja necessário olhar compatibilidade das versões do erlang e elixir, você pode conferir em https://hexdocs.pm/elixir/master/compatibility-and-deprecations.html#compatibility-between-elixir-and-erlang-otp

Nesse caso, instalaremos a versão `1.13.3-otp-24` que encontramos utilizando o seguinte comando:
```bash
asdf list all elixir
```
Para instalação utilizamos o comando:
```bash
asdf install elixir 1.13.3-otp-24
```
Para deixar essa versão global, utilizamos o comando:
```bash
asdf global elixir 1.13.3-otp-24
```

Agora você pode ver suas configurações do erlang e elixir com o comando `elixir -v`
Vale a pena ressaltar que com o asdf você pode ter um arquivo em cada projeto para utilizar a versão específica daquele projeto. Basta ter um arquivo chamado `.tool-versions` na raiz do projeto e o asdf irá utilizar a versão da linguagem especificada nele. Você pode ter mais informações no [link](https://asdf-vm.com/guide/getting-started.html#local).
Why we {}
Published: 2022-03-25 16:38:02


**[Life is short](http://paulgraham.com/vb.html)** so

If you {} for [bread](https://en.wikipedia.org/wiki/The_Bread) , I can understand, so do I.

If you {} for [making](https://www.indiehackers.com/), I can understand, much want I.

If you {} for [craftsmanship](https://youtu.be/8R02NE050Jk), I can understand, with much respect.

If you {} for [interest](http://paulgraham.com/genius.html), I can understand, a bit jealous maybe.

If you {} for … I’m not sure … 🤔

If you {} for [], sorry forgive me, I can’t understand it. 

**Notes**

- {}, [] are placeholders. E.g. replace {} with Coding, [] with LeetCode
- Inspired by reading [The Moon and Sixpence](https://en.wikipedia.org/wiki/The_Moon_and_Sixpence)
Launching a Remix SaaS kit this monday
Tags: remix, react, saas, javascript
Published: 2022-03-25 16:35:12

---
title: Launching a Remix SaaS kit this monday
published: true
description: TLDR; Follow me or subscribe to my Gumroad page to get notified when I launch, **the first 24 hours will be 100% free**, then 2 weeks of early access at -$149 to give me time to fix users bugs, and the final price will be $299.
tags: remix,react,saas,javascript
cover_image: https://yahooder.sirv.com/saasfrontends/remix/ih/launching-cover.png
---

TLDR; [Follow me](https://twitter.com/AlexandroMtzG) or [subscribe](https://alexandromg.gumroad.com/) to my Gumroad page to get notified when I launch, **the first 24 hours will be 100% free**, then 2 weeks of early access at -$149 to give me time to fix users bugs, and the final price will be $299.

![Remix SaaS kit](https://yahooder.sirv.com/saasfrontends/remix/ih/Screen%20Shot%202022-03-25%20at%209.22.47.png)

## Some context on Building SaaS kits

Some of you already know SaasFrontends, SaaS starters for Vue2, Vue3, Svelte, and React. And a .NET API for as the back-end.

I built this for 3 reasons: 

1. Find the right front-end framework for me (React)
2. [Help](https://github.com/AlexandroMtzG/react-starter) [others](https://github.com/AlexandroMtzG/svelte-starter) [build](https://github.com/AlexandroMtzG/vue3-starter) [their](https://github.com/AlexandroMtzG/vue2-starter) SaaS apps
3. Make [this side hustle](https://saasfrontends.com/) profitable

## Remix - Everything I've been expecting

I'm married to **.NET**, but after trying **Remix**, I'm getting a divorce.

I started migrating the React + .NET stack to Remix this past Monday, and oh boy, **I'm never going back to .NET for new apps**. You can create loaders (API GET calls) and actions (API POST, PUT, DELETE calls) on the same file. I can finally see why people use Node.js more than .NET.

I think it says a lot about Remix that I'm actually finishing the migration in just 1 week (or at least that's my plan 😅).

## Stack

- Framework: [Remix](https://twitter.com/remix_run)
- CSS: [Tailwind CSS](https://twitter.com/tailwindcss)
- Database: [Supabase](https://twitter.com/supabase) and Sqlite
- ORM: [Prisma](https://twitter.com/prisma)
- Subscriptions: [Stripe](https://twitter.com/stripe)
- Emails: [Postmark](https://twitter.com/postmarkapp)

## Breaking changes

- **State**: No more Redux nor localStorage. Everything important is now with cookie storage (Light or dark mode and Current User (UserId, TenantId, WorkspaceId)
- **Payments**: Stripe checkout (no more storing user card tokens)
- Whatever I break this weekend

## Features

Basically, everything you can do at https://react.saasfrontends.com but **BETTER**.

## Get it for free

[Follow me](https://twitter.com/AlexandroMtzG) or [subscribe](https://alexandromg.gumroad.com/) to my Gumroad page to get notified when I launch, **the first 24 hours will be 100% free**, then 2 weeks of early access at -$149 to give me time to fix users bugs, and the final price will be $299.

---

Let me know your thoughts! Thanks.
Jump into conclusions
Published: 2022-03-25 16:34:51

**Opinionated** means at least you have opinions, which isn’t a bad thing imho, otherwise...


I was recently poking around with [SvelteKit](https://kit.svelte.dev/) to build some stuff, and came across an interesting article [https://www.swyx.io/svelte-sites-react-apps](https://www.swyx.io/svelte-sites-react-apps) from @swyx.

My initial reaction, soon after reading the title (w/o checking contents), was like “Huh? Isn’t it a common sense that both Svelte and React are amazing front-end frameworks that are capable of building awesome sites **AND** apps??”.

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

However, there is a thing called [jumping conclusion bias](https://en.wikipedia.org/wiki/Jumping_to_conclusions).

So i went through the article and took a step back. I read the title again, and it became as (__ are placeholders)

```
__ for Sites, __ for Apps
```

But how do we compare Sites vs Apps?


|Sites|Apps|
|---|---|
|Static|Dynamic|
|Content centric|Rich interaction|
|Lightweight|Rich features|


Then we need to fill in the placeholders.

```markdown
Eleventy for Sites, Next.js for Apps
```

Is it a good title? maybe not. Let’s try again.

```markdown
Svelte for Sites,  React for Apps
```

Much better huh?

The final question might be “do you agree with what the author said?”, the answer is simply “i don’t know”.  But does it even matter 🙂

**Notes**

Some cool technologies mentioned above

- [https://github.com/11ty/eleventy](https://github.com/11ty/eleventy)
- [https://nextjs.org/](https://nextjs.org/)
- [https://svelte.dev/](https://svelte.dev/)
- [https://reactjs.org/](https://reactjs.org/)
Laravel Livewire CRUD Tutorial with File Upload | Laravel 9 Tutorial
Tags: laravel, php, tutorial, beginners
Published: 2022-03-25 16:23:20

{% embed https://www.youtube.com/watch?v=mCZ2Xk-AucY %}

This video will show how to make crud with Laravel and Livewire. Upload image and preview before upload.
How to make crud with Laravel and Livewire.
Laravel 9 tutorial.
Laravel livewire tutorial.

Support me: 
https://www.patreon.com/Laraveller
https://paypal.me/TonyXhepa

Follow me:
Twitter: https://twitter.com/Laravellercom
Facebook Page: https://www.facebook.com/1laravellercom
Instagram: https://www.instagram.com/laravellercom/
Github: https://github.com/laraveller
Website: https://laraveller.com/

Setup VS CODE for Laravel: https://youtu.be/EliywWn4IK4
Setup Mac for development: https://youtu.be/yxuR5myrVi4

Playlists:
Laravel Restaurant Reservation: https://bit.ly/3Jc5IcG
Spatie Laravel Permission: https://bit.ly/3pOsOhN
Laravel Testing For Beginners: https://bit.ly/3t1gNq4
Laravel Roles and Permissions: https://bit.ly/3gOhM7d
LARAVEL INERTIA MOVIE APP: https://bit.ly/3FVMp4Q
Laravel Livewire Movie App: https://bit.ly/3s8D6v1
Laravel Classified Website - https://bit.ly/3nsFRnb
Livewire Employees - https://bit.ly/2ZtIpZY
Laravel Employees Management - https://bit.ly/3Gglt14
Laravel admin panel - https://bit.ly/3CcX75M
How to subscribe Kinesis Data Firehose to SNS in other account
Tags: aws, sns, firehose
Published: 2022-03-25 16:13:23

This post gathers the steps how to subscribe Kinesis Data Firehose to SNS in other account via the AWS Console.

**Glossary:**
Kinesis Data Firehose - ETL service to deliver real-time streaming data to destinations such as S3, Redshift, OpenSearch Service, Splunk, Custom HTTP endpoints
SNS - Amazon Simple Notification Service, a notification service


![Diagram of how SNS and Firehose connect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3avaylmocl5ms4fwmrad.png)

**Step to subscribe**
1. Create SNS topic in Account A
2. Setup the Access policy in SNS topic of Account A to allow Account B to subscribe
(Make sure Access policy contains)
```
{
  "Effect": "Allow",
  "Principal": {
    "AWS": "arn:aws:iam:<account_b_id>:root"
  },
  "Action": "SNS:Subscribe",
  "Resource": "arn:aws:sns:eu-west-1:<account_a_id>:<SNS-Topic-name>"
}
```

3. Create Kinesis Data Firehose in Account B
4. Create IAM role which will be used for subscription in Account B
```
Permissions: AmazonSNSRole, AmazonKinesisFirehoseFullAccess, AmazonSNSFullAccess
```
5. In Account B, Go to SNS page > Subscriptions > Create subscription
    - Enter Topic ARN (Get this information SNS topic from Account A)
    - Select "Amazon Kinesis Data Firehose" as Protocal
    - Enter ARN of Delivery stream as Endpoint
    - Enter ARN of IAM role we created in step 4 as Subscription role ARN

**How to test**
1. Go to SNS topic in Account A, Publish a test message
2. Go to Kinesis Data Firehose in Account B, Find the S3 bucket and go the file that is recently created and click download
3. In terminal, open the file or cat the file to check the content of the message. You should see the test message we send from SNS topic in Account A
Build a MERN Stack App in 5 Days (The Introduction)
Tags: react, webdev, javascript, tailwindcss
Published: 2022-03-25 16:10:12

- **What we will create**: *Kysymys* - A MERN Stack social question and answer site similar to Quora with functionalities of User Authentication, Posting a Question, Submitting Answers to Questions, etc.
<hr/>


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

- **What tools will we be using**: *React* for frontend + *TailwindCSS* for styling, *MongoDB* for database, *NodeJS* + *Express* for backend server, routing and communicating with the database and *Firebase* for Google Authentication.

Trying to make the switch from frontend/backend to full-stack? Or just looking to have fun and sharpen up on your dev skills? Then come along and join the 5-part series where we go over the planning, coding (and debugging) of a MERN Stack Application from scratch.

This series is meant to be a beginner-friendly introduction to the MERN stack to devs who are acquainted with React and NodeJS, have worked on the technologies independently but are unable to connect it all together to complete the puzzle to build a full stack application. With ample space to add more functionalities and completely customize the app, upon completing this 5-part tutorial ,you will be confident in your skills to code a complete MERN stack application from scratch and take your dev skills to the next level!

[Part 1](https://dev.to/rohanjsx/build-a-mern-stack-app-in-5-days-day-1-setting-up-the-backend-44fe)
#66 Days of Data
Tags: python, datascience, 100daysofcode, ankitgupta
Published: 2022-03-25 15:54:40

## **Learning Python**  👨‍💻

D 41 of #66daysofdata 📈

Today I have learnt OOPs Concept in Python - Polymorphism & Encapsulation

Checkout 👉 [My #66 Days of Data timeline on Github](https://github.com/mrankitgupta/66DaysOfData)

Say me Hi! 
I'll be glad to connect on 
👇

**Twitter** @ [Mr_AnkitGupta01](https://twitter.com/Mr_AnkitGupta01)

**Github** @ [MrAnkitGupta](https://github.com/mrankitgupta)
Everyone should have a blog
Published: 2022-03-25 15:44:18

I think everyone should have a blog, let me explain why.
* * *
## Processing thoughts
I started writing down my thoughts on the internet in 2016. (That's six years ago already 🤯)
Back then, it was mostly thoughts about faith and my life with God. (I [still do that](https://awesomebible.de), it's German, though.)

This blog helped me process my thoughts and emotions.

I now started this blog to write down more tech related thoughts and experiment a little with [Hugo](https://gohugo.io).

## Learn new skills
The second reason why I think, everyone should blog is to learn new skills.
This blog helped me become familiar with [Hugo](https://gohugo.io).

The other side of the coin is, to document things and essentially help others learn new things.

I've kind of noticed a pattern with me searching for stuff online. If I need a software for a niche use case, or need a solution to a problem, most of the time, I find the solution on a blog.

Of course, there are forums too, but often the blog post about something has more detail.

## Having a knowledge base
You can't imagine how helpful it is, to have a knowledge base of things that you otherwise would have to look up again and again.
This basically goes for every subject and field of work, not only tech.

## It's quick, it's easy and it's free!
![Pouring river water in your socks: It's quick, it's easy, and it's free.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2trcrh04uhnnqb37kqn.png)
 

Spinning up this blog with hugo took me like 30 minutes. And writing a post is nothing more than writing it and clicking one button to deploy it.

![The Git source control panel in VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nztlz7hq5nea9ocjtpoo.png)
 

And if you use something like [Forestry](https://forestry.io) - which is a great product - you can reduce the 30 minutes to something like 5 minutes. I also got my domain for free, from [Freenom](https://freenom.com) and my blog is deployed using [Netlify](https://netlify.com)'s free tier.

It's literally just a click of a button - so what's your excuse not to do it?
Maybe start with something like [#100DaysToOffload](https://100daystooffload.com/), to give yourself an incentive to keep going.

In reality, you don't have to blog every day or even every week. Just every time you come across something cool, or something you want to document.

### Microblogging
There's one thing I haven't touched on in this post, and that is Microblogging.
If long-form content isn't particularly your style, maybe consider joining a [Mastodon](https://joinmastodon.org/) or [Misskey](https://join.misskey.page) instance and using that as your blogging platform.

**Just start blogging.**
Break the Code 2 x DEV Chat
Tags: breakthecode2, gaming, challenge
Published: 2022-03-25 15:40:14

---
title: Break the Code 2 x DEV Chat
published: true
description: This is your place to discuss Break the Code 2 with other members of the DEV Community!
tags: breakthecode2, gaming, challenge
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upr5uxye641kjqnbjp72.gif
---

This is a dedicated thread to discuss your experience with [Break the Code 2](https://s1.breakthecode.tech/) with others on DEV. Keep the conversation friendly and focused around the game! We also request that you avoid spoiling surprises and clues for others.

{% embed https://dev.to/devteam/do-you-have-what-it-takes-to-break-the-code-2246 %} 

Have a question about Break the Code 2? Representatives from Break the Code 2 will be monitoring this thread and jumping in if you need assistance. 

Have fun! 👩‍💻
Do You Have What it Takes to Break The Code?
Tags: breakthecode2, announcements
Published: 2022-03-25 15:39:45

---
title: Do You Have What it Takes to Break The Code?
published: true
description: Play Break the Code 2 to find special DEV easter eggs, win prizes, and challenge yourself!
tags: breakthecode2, announcements
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w99v8kewpfkdzc7ae272.gif
---

_DEV Community: Start your engines_ 🏁

Today is a pretty cool day for those of you on DEV who love gaming, cyphers, and tech nostalgia. 

#### We’re excited to announce the release of [Break the Code 2](https://go.tech/devtoadd2) — a unique online game by .Tech Domains built to challenge and entertain developers like you. Best of all, this second version of Break the Code is full of surprises tailored for the DEV Community. 

--- 

### Background 

A little while back, the awesome team at Break the Code reached out to us with an invitation to shape parts of the second release of their game specifically for our community. 

After exploring the game a bit and how much fun its players seemed to have, the decision to share the game with you was easy. After you poke around Break the Code a bit, we think you'll agree. 

Oh, and there is absolutely no sponsorship behind this announcement — we just think Break the Code is that cool.

### Our Favorite Parts of Break the Code 2 

Here at DEV, we are all about tech nostalgia and the programs, tools, and hardware that got us hooked on coding in the first place. Break the Code 2 features a Windows 98 look and feel that we love (and think you will, too). 

The playful visual theme of Break the Code 2 is paired with problem-solving, logic-based skills, and a story you won’t be able to get out of your head. You’ll have to play it to see what we mean 😉



### Break the Code 2 x DEV
Over the next 21 days, we’ll be spreading the news about Break the Code and celebrating all participants coming from the DEV community. Along the way, you’ll find awesome <mark>DEV Easter eggs<mark> sprinkled throughout the game to delight and entertain our community. 

**We invite you to check out this [Break the Code discussion thread](https://dev.to/devteam/break-the-code-2-x-dev-chat-5739) where you can connect with other players. At the end of the month, we'll share some instructions on how to claim a unique DEV profile badge to show off your participation.** 


## [>> Click here to start playing Break the Code 2!](https://go.tech/devtoadd2)

_Just make sure you sign up with your DEV email address so we can award your badge!_