teleren/devto huggingface dataset:
Rails Authentication with Devise
Tags: rails, authentication, devise
Published: 2021-04-25 16:52:44

#Authentication in rails applications with Devise gem

Authentication is a way to allow users to obtain identification and get identified. it is the process of verifying the identity of an individual.
It also covers cases such as when the user has forgotten their password or when a user would like to sign in through third-party providers. Although that all sounds time-consuming, if not complicated, Devise is here to help.

##Integrating Devise

Devise provides us with a lot of features that are easy to integrate with. so Let’s see it for ourselves.
First, let’s grab Devise from [RubyGems.org](https://rubygems.org) and add it to our gemfile 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xep1msq8y93o95roumho.png)
Now let's do `bundle install` first to download the gem
Then run `rails generate devise:install` to boostrap it

We now need to write the following code in app/environment/development.rb. which configures the default host and port for Action Mailer, the module responsible for sending out emails.

```
config.action_mailer.default_url_options = {
    host: 'localhost',
    port: 3000
  }
```
Also, let’s change the e-mail’s sender for any emails sent by Devise. This can be done by changing the value of mailer_sender defined in
app/initializers/devise.rb
```
config.mailer_sender = 'no-reply@example.com'
```

Now we will use flash messages so when a user signs in, for instance, we will let them know that they have successfully signed in.To do that add the following code to app/views/layouts/application.html.erb
```
<body>
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
  ......
```
The notice method displays the string assigned to flash[:notice] at the time the controller is rendering the page. The alert notice is similar; however, it fetches a message associated with flash[:alert].
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydqmepqrs7q8c2w0to2x.png)

Because we usually want to customize many session pages, rather than following Devise’s default templates, let’s run `rails g devise:views` to copy all of Devise’s views into our own app/views folder so that we can customize them as we like

Last but not least, let’s generate the supporting fields which are required by Devise to support various features that come with it.To do that run `rails g devise user` where`user` is the model name.

Now run `rails db:migrate` and after the migration, let's check the sign-up form on our app. To do that run `rails server`
Then go to this address [New Form](http://localhost:3000/users/sign_in)
You will see the sign-up form, auto-generated by devise. It doesn't have any special style, but you can easily take care of that and customize it as you please.

Congratulations, you now know how to install devise in your applications. and you can add more fields to the form as well as styling it however you like.

For the complete guide and reference please check [Devise Doc on github](https://github.com/heartcombo/devise)

Thank you for reading!
SSH over HTTP Proxy
Tags: squid, httpproxy, nowindows, macos
Published: 2021-04-25 16:37:40

## story
`nc -X connect` is the popular way to communicate with SSH over proxy. However, it's broken when your client is MacOS.

## solution
Install corkscrew

```sh
brew install corkscrew
```

SSH now: 

```sh
ssh -4 \
  -o "ProxyCommand corkscrew ip.http.proxy port-http-proxy %h %p" \
  user@ip-machine-in-other-network
```

.i.e: in following example my HTTP_PROXY is `192.168.1.15:3128`. And i want to login into `10.11.6.23`
```sh
ssh -4 \
  -o "ProxyCommand corkscrew 192.168.1.15 3128 %h %p" \
  user@10.11.6.23
```

Note  : `-4` is to force ipv4 over other options (ipv6)
Music and AI
Published: 2021-04-25 15:54:49

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlverf1yyw5j1jz0tzku.jpg)
**can artificial intelligence make Music?**
<p> Melodrive is one of the first AI systems capable of composing emotional and original music in real time. The AI composes music by listening to the media atmosphere and attempting to fit the video's mood and overall style.<p/>
<p>Several music software programs that use AI to create music have been developed. Artificial intelligence is also at the heart of so-called interactive composition technology, in which a computer composes music in response to a live musician's performance.<p/>
<p> Other A.I. applications to music include not only music composition, production, and performance, but also how music is sold and consumed. Aside from AI-powered music production, many music player apps have been created that use voice recognition and natural language processing technology to control music.<p/>
**How Ai used in artificial intelligence?**
<p>Personalized Playlists Help AI Enhance Listeners' Experiences: Companies such as Joox, QQ Music, and KuGou have been using AI to evaluate their listeners' tastes and suggest specially designed playlists for a more personalised customer experience.<p/>
**How AI helps Spotify?**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8s9ytq1wfi50hyfw34b.jpg)
<p> *Spotify uses AI and machine learning to discover and act on insights gleaned from external data and user experience, allowing it to maintain its position as one of the most popular music streaming services on the internet*.<p/>
<p> Today, Spotify is the most used on-demand music service. The company has a history of breaking technological barriers by using AI and machine learning to improve the user experience through nuanced customer data insights. They've recently acquired a number of data science companies in order to continue pushing the boundaries and ensure that they stay at the forefront of the music streaming industry.<p/>
**What the Future Holds? - AI Music**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vv2uhn781f2sk683w1gk.jpeg)
<p> In recent years, progress in the artificial intelligence music sector has accelerated, and the evolution of music technology has tended toward notable changes. Music technology is on the verge of a bright future, and AI will eventually change the music industry.<p/>
<p> As with many innovative technologies, AI raises concerns about disruption, as its impact is likely to spread rapidly and alter how we listen to music in the coming years. As a result, it's reasonable that independent composers and producers who work on original music will want a technology that can replicate their work in a similar standard.<p/>
Strong Password Generator 🤩
Tags: html, css, javascript, 100daysofcode
Published: 2021-04-25 15:37:12

Strong Password Generator App Using Vanilla JavaScript 😍

Demo : https://gen-passwordjs.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day15

Check out my #100DaysOfCode Challenge 
https://github.com/saidMounaim/100DaysOfCode/tree/main/Day15
Image maps
Published: 2021-04-25 15:34:39


An image map is an image with specific clickable areas, and it’s defined with `map` tag. These areas are set using the `<area>` tag. Basically, this allows you to embed links in different parts of image that can lead to other pages, which is great for describing things within a picture.


| Shape  | Coordinates                |
| ------ | -------------------------- |
| rect   | left, top, right, bottom   |
| circle | center-x, center-y, radius |
| poly   | x1, y1, x2, y2, .….        |
| fault  | Th entire region           |

For example, let’s use Africa’s map:


    <map name="africamap">
              <area
                shape="poly"
                coords="414,289,412,263,422,248,419,233,430,212,446,209,459,215,488,217,510,213,529,210,539,222,543,234,527,254,517,269,507,287,469,281,479,296,476,311,499,313,440,302,433,291"
                target="_blank"
                alt="nigeria"
                href="https://en.wikipedia.org/wiki/Nigeria"
              />
    </map>


![](https://paper-attachments.dropbox.com/s_BCEED88617712C77CAE5CD54DE11AC1E83C79089C594AA90B5E140237B54EFFC_1619364730460_Screenshot+307.png)


We can have this replicated for each country, as seen [here](https://clickable-areas-image.netlify.app/)
My first Dev.to post.
Published: 2021-04-25 15:30:42

Hey, I am Andrew Okpainmo. I am a Front end web developer. This is my first post on Dev.to. I am so glad you are reading this post. 
I came on Dev.to to start out my developer blogging career. I have been coding for some years now, and I believe that I have got some good knowledge that will be of much good to fellow developers on Dev.to. 
I am an aspiring full-stack Js developer, but for now, I build websites with frontend web development technologies. 
I am always open to help, at least that's one primary reason why we are all here. anytime soon, I will be rolling out some good articles. 
It's great being on Dev.to, and I hope to really make some good impact.
If you are interested in how to get your Gulp workflow up and running so well. Then check out my next article. It's going to be the most definitive article about setting up Gulp that you've ever read.
I'll be sharing how to set gulp for your project in 2021. Thanks to all the troubles I faced while setting mine up.
you can't miss it.
Cheers.
Development Icons
Tags: webdesign, photoshop, icons, transparent
Published: 2021-04-25 15:33:02

Looking for customized icons for your development project? I created a repository which includes 27 open source icons tailored towards development languages and technologies. 

https://github.com/jaredseefried/Development-Icons 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sclrls6mpvvtrjtw3xup.png)
Go: pointer to array index expressions
Tags: go
Published: 2021-04-25 15:30:47

วันนี้เพิ่งรู้ว่า pointer to array ก็สามารถใช้ index expressions เพื่อเข้าถึง element ของ array ที่ pointer นั้นชี้อยู่ได้

เอาจริงๆก็ไม่ค่อยได้ใช้งาน array ตรงๆอยู่แล้ว เรามักจะใช้ slice แล้วค่อยใช้ฟังก์ชันอย่าง make, append ในการจัดการ underlying array ให้เราเอง แต่ก็รู้ไว้สักหน่อยก็ไม่เป็นไร :D

ตัวอย่าง pointer to array เช่น

```go
package main

import (
	"fmt"
)

func main() {
	arr := [4]int{1, 2, 3, 4}
	ptrToArr := &arr
	fmt.Printf("%T\n", ptrToArr)
}
```

เมื่อสั่งรันก็จะได้ type ของ ptrToArr ออกมาแบบนี้

```
$ go run main.go
*[4]int
```

ทีนี้ถ้าเราต้องการเข้าถึง element ของ `arr` ผ่าน `ptrToArr` แบบแรกถึงใช้ operator pointer indirect `*` เพื่อเข้าถึง `arr` ก่อนแล้วค่อยใช้ `[]` แบบนี้

```go
fmt.Println((*ptrToArr)[0])
fmt.Println((*ptrToArr)[1])
fmt.Println((*ptrToArr)[2])
fmt.Println((*ptrToArr)[3])
```

จะเห็นว่าเราต้องใช้ วงเล็บ ครอบ `*ptrToArr` ไม่งั้นมันจะถูกตีความเป็น *(ptrToArr[0]) ซึ่งจะ compile ไม่ผ่านเพราะเหมือนไปใช้ `*` กับค่าที่เก็บใน element ที่ 0 ซึ่งไม่ใช้ pointer

ท่าต่อไปคือ Go สำหรับ pointer to array Go ยอมให้ใช้ indexing expressions ได้เลยไม่ต้องใช้ pointer indirect `*` ก่อน ดังนั้นจากตัวอย่างเมื่อกี้เราเลยเขียนให้เหลือแค่นี้ได้


```go
fmt.Println(ptrToArr[0])
fmt.Println(ptrToArr[1])
fmt.Println(ptrToArr[2])
fmt.Println(ptrToArr[3])
```

และใช้กับ for range ได้เหมือนกับ array, slice ได้เช่นกัน

```go
for _, v := range ptrToArr {
	fmt.Println(v)
}
```

และแน่นอนว่ามันเข้าถึง element ของ array ที่มันชี้อยู่ ทำให้แก้ไขค่าของ index นั้นได้เช่นกัน

```go
for i := range ptrToArr {
	ptrToArr[i] *= 2
}
for _, v := range arr {
	fmt.Println(v)
}
```

เมื่อรันก็จะได้

```go
$ go run main.go
2
4
6
8
```

## ขอฝาก Buy Me a Coffee
สำหรับท่านใดที่อ่านแล้วชอบโพสต์ต่างๆของผมที่นี่ ต้องการสนับสนุนค่ากาแฟเล็กๆน้อยๆ สามารถสนับสนุนผมได้ผ่านทาง Buy Me a Coffee คลิ๊กที่รูปด้านล่างนี้ได้เลยครับ

<a href="https://www.buymeacoffee.com/weerasak" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

ส่วนท่านใดไม่สะดวกใช้บัตรเครดิต หรือ Paypal สามารถสนับสนุนผมได้ผ่านทาง PromptPay โดยดู QR Code ได้จากโพสต์ที่พินเอาไว้ได้ที่ Page DevDose ครับ https://web.facebook.com/devdoseth

ขอบคุณครับ 🙏
Debugging and Brainstorming
Tags: taskforce, webdev, debugging, discuss
Published: 2021-04-25 14:58:32

Greetings,

We started this week with the plan of implementing the feedback Micheal gave us in the past demo, we divided the tasks and I was given the task of implementing the responsiveness of the challenge I tried my best I came up with the idea while implementing it I met a blocker I was not able to trigger the popup as it has been long without giving a try front-end tasks, my teammate Bienaime told me he may take it from where I am and be the lead of the implementation as I will keep doing my research.

It's been almost two hours without a hope of solution, I reached out to Yannick and connected us to HB to provide some help us, HB looked into it and connected us to Elie to help us out but still we don't get to the solution, yes we panicked thinking how we will be presenting non finished things but Bienaime figured out a way to present it to the client and in demo Micheal shared with us a way we can implement it and have it responsive which we later on implemented.


This week on wednesday we were also given the graduation project. It's really an interesting app, I have even thought about developing the same thing in December. It’s a meme app but this time it has some cool features. We took the advantage and set the project up and while starting the project we faced a problem on the backend where the social login is difficult to integrating it with both the front-end and the mobile but we came up with the idea of handling the authentication on the client-side and send the token to the backend.

The main takeaway of this week is to never give up on things when they get more complicated. It's better to approach experienced people to help you out.
CAPTAIN AMERICA-DISNEYPLUS LANDING PAGE
Tags: webdev, html, css
Published: 2021-04-25 14:35:51

This is a kind of fanart.:smile:
It is actually a landing page made using only Html,css.
Idea was to take forward concept art by [Spideyvegas](https://www.instagram.com/spideyvegas/?hl=en), one step ahead.
Check here ->
[DISNEYPLUS](https://pratikd2124.github.io/Disneyplus-series-landing-page/)
[DISNEYPLUSHOTSTAR](https://pratikd2124.github.io/Disneyplus-Hotstar-landing-page/)
8 Amazing API For Your Project
Tags: javascript, webdev, beginners, productivity
Published: 2021-04-25 14:02:14

Hello,

How are you all Today I have written this post about the 8 amazing API every developer know there are in this many APIs are free & easy to use also you will behave fun when you are using this APIs. I hope you like this also comments about your thoughts.

Latest post :- 

https://dev.to/nikhil27b/amazing-image-hover-effect-using-html-css-4m76


1. Chuck Norris JOKE API

[https://api.chucknorris.io/](https://api.chucknorris.io/).

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


2. Pokemon API For Fun.
 
[https://pokeapi.co/](https://pokeapi.co/).

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

3. Food API.
 
[https://www.themealdb.com/api.php](https://www.themealdb.com/api.php).

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

4. Marvel API.
 
[https://developer.marvel.com/](https://developer.marvel.com/).

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

5.Github API.
 
[https://api.github.com](https://api.github.com).

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

6.Openweather API.
 
[https://openweathermap.org/](https://openweathermap.org/).

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

7.Google Map API.
 
[https://developers.google.com/maps/](https://developers.google.com/maps/).

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

7.Covid19 API.

[https://api.covid19api.com/](https://api.covid19api.com/).

The last one is very important also For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

If you want to more support me then buy me a [coffee](https://www.buymeacoffee.com/nikhilbobade27).

Thank you!
Best and Must - 3 Practices For Optimizing Your Website
Tags: optimization, cdn, website, practices
Published: 2021-04-25 13:53:09

# Introduction
The speed of the website will directly depend on how longer the user is going to spend time on the website. So, For an E-Commerce website it directly increases revenue. Believe me or not, Speed of the website also builds trust no one wants to spend their time and money in straggling website.

There are and may be many ways to it but here we are going for the **Best and Must** ways.

# 1.Use Content Delivery Network (CDN)

A content distribution network is a set of web servers spread around different geographical areas, that deliver web content to end-users based on their location. Yeah this the formal definition, but in short as your website is hosted on CDN they will be delivered very fast.
If you ever used Gatsby.JS you might have known about static sites, when these static sites combined with CDN = 🔥 Super Fast Website. Many such websites or web apps feel like native apps.

Top 3 CDN's -
  * Cloudfare
  * Fastly
  * CloudFront

# 2.Optimize Images

All enjoy visually appealing images. As you know photos play a critical role in the popularity of E-commerce pages. So, using the required dimensions of the image is highly necessary.
On Page load you can use set of images to render on different screen sizes.
[Read More About Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

# 3.Reduce the Number of Packages/Plugins

Plugins are essential components of every website. They have third-party-suggested features. So, The more plugins more code to run which eventually decreases the performance of the site and they need to be updated making sure site still works without breaking it. If not updated website may be vulnerable for attacks.

# Conclusion

That is it for this blog, make sure your next website follows these **Best and Must** Rules.

peace ✌
How to backup Postgresql 
Tags: postgres, devops, docker, programming
Published: 2021-04-25 13:26:40

If your Postgres in docker container use `pg_dumpall` to backup:
```
docker exec -t your-db-container pg_dumpall -c -U postgres > dump_`date +%d-%m-%Y"_"%H_%M_%S`.sql
```

and then restore it:
```
cat dump_24-04-2021_20_50_17.sql | docker exec -i some-postgres  psql -U postgres
```

If you want to play with the current command we can run a new docker container with postgres, create table, and check how a command is working.

Start a container:
```
docker run --name some-postgres -e POSTGRES_PASSWORD=pass -d postgres
```

Go inside the container:
```
docker exec -it some-postgres bash
```

Start psql console:
```
psql -U postgres
```

Create table:
```
CREATE TABLE first_table (column1 int);
```

And then you can do anything you want :)
JSON Web Token VS Session based authentication
Tags: node, javascript, help, webdev
Published: 2021-04-25 13:25:11

Hi folks!
I've been using passport with express sessions for user authentication for a while. Now I wanna try authentication with JWT (JSON Web Token). JWT authentication with email and password seems pretty simple. But I think it gets a little complicated when JWT is used with OAuth. I just wanna ask that:
1. Is it a popular practice to use JWT for OAuth?
1. Which method is better, JWT or session based authentication?
And please provide a link to a simple guide to use JWT for OAuth if you think JWT for OAuth is a better choice.

Thanks
Firefox theme `Aurora Future`
Tags: firefox, aurora, theme, webdev
Published: 2021-04-25 13:19:31

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

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

Recently I had switched back to Firefox for web development. 

Thinking back, I had left Firefox since 4-5 years ago, I remember Firefox had the best layout debug tool called [firebug](https://getfirebug.com/).

> Not sure how many of the web developer now days hear of this tool.

Therefore I decided to make a Aurora Theme for Firefox as well and here it is!

(Side note I still love Chrome, I still switch between the two from time to time, but a lot more on Firefox now days, because for some reason Chrome is very laggy for my MacBookPro. Also I am thinking of making a chrome theme as well~)

Here is place to download this theme: https://addons.mozilla.org/en-US/firefox/addon/aurora-future/
Spotify Mixtapes For Coding
Tags: music, productivity
Published: 2021-04-25 13:14:58

## Curated mixtapes 

Last year, I published my [growth hack technique](https://dev.to/flexbox/how-to-get-4000-followers-on-spotify-2kla) to get some followers on Spotify.

I reached 12 playlists and I hope it will help some of you to get "into the zone" and release amazing products to production!

## The List

- [HACKER #1: Mixtape for coding](https://open.spotify.com/playlist/0Jt2JW0NTIL6MvV9dSOnqZ?si=2f09e2def13f4704)
- [HACKER #2: Rock for coding](https://open.spotify.com/playlist/3LdxHInEvlJZqtqeRmtiGv?si=8accab0a704941c6)
- [HACKER #2.11: Aggressive mixtape for programming](https://open.spotify.com/playlist/59h0570gNwpTrqiD4KFt9c?si=1a0b2eaf51154914)
- [HACKER #3.0: Movies Mixtape for coding](https://open.spotify.com/playlist/0pf103tVqmwkF060LHk0RG?si=218d1fbed3dd4292)
- [HACKER #3.1: OST Mixtape for coding](https://open.spotify.com/playlist/6IZ1Mh2grWaxgdQnK9xIAO?si=285875d545294822)
- [HACKER #3.2: Gaming Mixtape for coding](https://open.spotify.com/playlist/301Kl8b7hslXbV8wxk3SrV?si=dc78f2f4ea8544c5)
- [HACKER #4: Electro Mixtape for coding](https://open.spotify.com/playlist/6Zmw201xJGrD7LuGwF2Ph0?si=5a019dd3d1e04cb8)
- [HACKER #5: Chill Mixtape for coding](https://open.spotify.com/playlist/2Adv3s73yJNLm3z1BwK9rP?si=0837002aac384e46)
- [HACKER #6: Mixtape for laser-focus at work](https://open.spotify.com/playlist/26yEmL1emKzN9Xpt1dyhPm?si=09aaee200ded4f3d)
- [HACKER #7: Summer of code](https://open.spotify.com/playlist/3FYezFABeZdD13RMQiff0G?si=88d85f4cda414ebc)
- [HACKER #8: Retro Mixtape for Coding](https://open.spotify.com/playlist/5PDDbk2cvJiiqBT37iHs9S?si=0eb0d79dfafb468f)
- [HACKER #9: DJ Mixtape for Coders](https://open.spotify.com/playlist/5rR8hKi3BWEx3rnHPD7M72?si=d1066285f44049a2)
- [HACKER #10: Stress free Mixtape for programming](https://open.spotify.com/playlist/0yuappB07Oz6xj0xBhH2Y3?si=53e53272732f4ca9)
- [HACKER #11: HipHop Coders Krew](https://open.spotify.com/playlist/1iQK1OHiOgpF2DlOaz0Xow?si=6b1f5a9a371b4cf8)
- [HACKER #12: Discovered from an apple watch —the mixtape](https://open.spotify.com/playlist/6D6P1XCXeuyOlKPPSObfLG?si=418cf5e342944d7e)

---

👉 Discover all my curated [playlists for programming](https://davidl.fr/music)
5HT N2O
Tags: sml, haskell, coq, lean
Published: 2021-04-25 13:12:13

Hello, I'm Namdak Tonpa known known as author of full-stack blueprint [N2O.DEV] for different languages [N2O.TECH]. This is the first true language-agnostic framework for building scaleable business web applications [BPMN, MQTT, WebSockets, HTML5] in advanced functional programming languages [LEAN4.DEV], Standard ML [O1.GITHUB.IO/N2O], F# [WS.ERP.UNO], Haskell [O3.CLICK].
I built doge theme of Reddit using MERN Stack!
Published: 2021-04-25 13:03:03

Hello developers, I've recently created a doge theme version of Reddit, called Dogeit using the MERN Stack (MongoDB, Express JS, React JS, and Node JS).

{% github kimlimjustin/dogeit %}

Any comments will be appreciated :)
### If you like this project, be sure to drop a star on GitHub 🌟!
## Happy coding!

You might also like these articles:

{% post https://dev.to/kimlimjustin/3-good-quality-apps-for-windows-to-make-your-computer-seems-modern-k4k %}{% post https://dev.to/kimlimjustin/my-personal-website-built-using-html-css-and-vanilla-javascript-13kd %}{% post https://dev.to/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1 %}