teleren/devto huggingface dataset:
App to grab your Revue newsletters
Tags: webdev, serverless, html, typescript
Published: 2022-11-13 14:44:58

So I wrote about how Twitter is scrapping Revue.

{% embed https://dev.to/nickytonline/revue-being-phased-out-by-twitter-4kle %}

I was able to pull down all my subscribers, as you can export them.

![Drop down on the Revue Subscribers page with an option to export all subscribers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmqf3723msiuv81ykoun.png)

That is important, but I also wanted all my past newsletter issues. Revue has an API, so [I wrote a Deno script to save them](https://gist.github.com/nickytonline/102bb45e625db6b9ae0157e293cfb0a3).

This works great, but I was like, let's make this easier for folks who want to grab their newsletters and not have to worry about coding all this. So I wrote a small app to do it.

It uses a [Netlify function](https://www.netlify.com/products/functions/) written in TypeScript to grab the newsletter issues and good old HTML with some inlined style and inlined JavaScript.

{% embed https://twitter.com/nickytonline/status/1591627552128634880 %}

Here's the source code if you're interested. It's all open source, MIT licensed.

{% embed https://github.com/nickytonline/get-revue-newsletters %}

If you have a Revue newsletter, try it out at [revue.iamdeveloper.com](https://revue.iamdeveloper.com). All you need to do is get a Revue API key. To get one, go to [https://www.getrevue.co/app/integrations](https://www.getrevue.co/app/integrations) and request one. It should be at the bottom of the page. It takes around 24 hours to get your API key.
Gradient animated text with Tailwind CSS
Tags: tailwindcss, animation, css, beginners
Published: 2022-11-13 14:34:50

I've been working on a new project recently and I wanted to add some cool effect on my landing page's hero section's text. I've seen this effect on lots of sites this year but I've never been curious how it was made.

I mainly work with Tailwind CSS because it's really easy to use and developer friendly. I'm not a designer and CSS is not my cup of tea. I prefer to make things work and look relatively good in short time rather dealing with CSS/SCSS/SASS files.

So my approach was really simple and what I've needed was some keyframe and a clipped text.

To achieve this we need to add our custom text animation and keyframes into `tailwind.config.js`. We can use any keyword to define these, but since we're dealing with text I've decided to name them `text`.

Note that you have to add the `animation` and `keyframes` definitions into your `extend` object.

```
modules.export = {
  theme: {
    extend: {
      animation: {
        text: 'text 5s ease infinite',
      },
      keyframes: {
        text: {
          '0%, 100%': {
            'background-size': '200% 200%',
            'background-position': 'left center',
          },
          '50%': {
            'background-size': '200% 200%',
            'background-position': 'right center',
          },
        },
      },
    }
  }
}
```

Now what's left to be done is to add your text wherever we want it.

```
<h1 class="animate-text bg-gradient-to-r from-teal-500 via-purple-500 to-orange-500 bg-clip-text text-transparent text-5xl font-black">
    Hello World
</h1>
```

As you can see, we have the `animate-text` class that is using the `tailwind.config.js` definitions, our gradient and 2 more extra classes: `bg-clip-text` that's clipping the background to our text and `text-transparent` that's making exactly what it says in order to be able to see the animated background.

That's all. Here's a Tailwind Playground with this in action:
https://play.tailwindcss.com/VCZwwz1e3R

#### Support & follow me
| [![Buy me a coffee](https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/geowrgetudor) | [![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/geowrgetudor) | [![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/geowrgetudor) | [![Linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/geowrgetudor) |
| ------------- | ------------- | ------------- | ------------- |
JavaScript variables
Published: 2022-11-09 20:41:29

In general, variables play an essential role in programming and solve many questions. As every programming language, JavaScript or JS contains variables. It means that we can create them and give them some value. The values can be different such as numbers, strings, or boolean. But before giving value, we must make the variable. To do that, first, we write the type of variable(var, let, const), which I will explore later. So, for example, we first write: 

var 

Then we have to create a name for that variable. It can be anything but let's call it n. So we have the variable n or:

var n 

Now we can give some value to our variable. To do that, we put = and then put the value. Let's assume that the value is 5. So we have
 
var n = 5

If we want to give a string value, we must use "" or we will get an error. Additionally, if we write numbers in "", it will no longer be a number. For example:

var m = "Hello"

In the same way we can give boolean values:


var x = true
var y = false


Now let's talk about the difference between var let and const.
The var and let are approximately the same, and we can change their values during the process. But we can't change the value of const. 


What about scopes.
In JavaScript, scopes are the areas where the variable is visible. In JavaScript, there are 3 types of scopes.

Block scope
Function scope
Global scope

Variables in the Block Scopes {} and are accessible only inside that block. For example 

{
   let x = "Hello"
}


 If there is a function scope, the situation is the same, we can access to variable only in function. For example:

function(){
 
  const n = 10

}


Variables in the global scope are visible in everywhere.It means that we can put the variable everywhere and it will work without errors
 For example:

let a = true
function SayHello()
{
   if(a==true){
      
       console.log("Hello")
   
     }
}
My Personal Portfolio
Tags: react, portfolio, webdev, javascript
Published: 2022-11-13 13:58:43

Hi all,
I'm build my portfolio website using Reactjs.
You can check it out live here! 👉 [https://rajamanickam.vercel.app/](https://rajamanickam.vercel.app/)

I received a lot of feedback during/after I created this, I wanted to finally put out this post as to what goes into building the perfect developer portfolio.

**Dark/Light Mode**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/waur1nuxr06uk0z0boxw.gif)

**Blog Section**
Recent Blog data Get from the dev.to using fetch api in owlcarousel2.

**Contact Form**

EmailJS is a JavaScript library that helps send emails using only client-side technologies. The cool thing about EmailJS is that no servers are required; all you have to do is connect it to one of the supported email services, create an email template, and use EmailJS to trigger an email.


and, also integrate Google Analytics
Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications.
User friendly and mobile responsive website.

You can visit my portfolio : [https://rajamanickam.vercel.app/](https://rajamanickam.vercel.app/)

Thanks for reading.. See you next article..
[PWN.03] Exploitation with pwntools
Published: 2022-11-13 13:55:46

**pwntools** is a python tool used for exploitation.
We can use it and exploit easier than in the past.

```python
#!/usr/bin/python
from pwn import *

# remote connection
r = remote("{IP}", PORT)

# Write payload to exploit
payload = ...

# Send data to {IP}
r.send(payload)
r.sendline(payload)
r.sendafter("{STRING FROM REMOTE}", payload)
r.sendlineafter("{STRING FROM REMOTE}", payload)

# Receive data from Remote
r.recv(int)
r.recvline()
r.recvuntil("{STRING}")
... and more

# Change to Little endian or Big Endian
# Little endian
hex(u32(VALUE))
hex(u64(VALUE))

# Big Endian
hex(p32(VALUE))
hex(p64(VALUE))

# for PLT(Procedure Linkage Table) and GOT(Global Offset 
Table)
e = ELF('{FILE}')
puts_plt = e.plt['puts']
read_got = e.got['read']

# Set architecture
context.arch = "amd64" # or i386, arm

# SHELL making AUTOMATICALLY
s = shellcraft.sh()
```

We can easily perform exploits using the above.
PHP
Tags: php
Published: 2022-11-13 13:55:09

PHP et MariaDB vous permettent de créer une boutique en ligne. Grâce à PHP, il enregistrera que quelqu'un a mis un article dans un panier. De plus, PHP générera du code HTML, du texte et peut-être des graphiques qui vous permettront de voir un panier sur la page de paiement.
The difference between dependencies and devDependencies in package.json
Tags: beginners, codenewbie, javascript, node
Published: 2022-11-13 13:45:17

The file `package.json` is an integral part of every Node.js project. It stores all the dependencies that your
project needs.

All the dependencies (most often open-source npm modules) are split into two categories: production dependencies
and development dependencies.

The difference between the two is that development dependencies won't be installed in the production environment
as they aren't needed there. It could be something that checks the quality of your code like `ESLint`, debug tools
like `Nodemon` ot testing helpers like `Chai`, `Mocha`, `Enzyme`.

You can include production dependencies by running the `npm install --save` command.

For example, here's how you'd install the module `express`.

```bash
npm install --save express
```

Once the installation is complete it will appear in the list of `dependencies` in `package.json`.

```json
{
  "name": "my_node_project",
  "version": "0.0.1",
  "dependencies": {
    "express": "^4.18.11"
  }
}
```

To install the development dependency, you'll need to use the flag `--save-dev` instead of the `--save`.

```bash
npm install --save-dev mocha
```

This way the module will appear in the section `devDependencies` in `package.json`.

```json
{
  "name": "my_node_project",
  "version": "0.0.1",
  "dependencies": {
    "express": "^4.18.11"
  },
  "devDependencies": {
    "mocha": "^10.0.0"
  }
}
```

Once it's clear how to add the different types of dependencies (dev and prod) to your Node.js project, 
you should learn how to install them separately or all at once.

To install only dev dependencies from an existing `package.json` you can use either the full command
```bash
npm install --only=dev
```

or a shorter version

```bash
npm i -D
```

To install only production dependencies, you can use the same flag `--only`, but now with the argument `prod`.

```bash
npm install --only=prod
```

Thanks for reading! I hope this tutorial helped you understand the difference between development and production
dependencies in `package.json` and you learned how to use either of them in you Node.js projects.
[IOT] Raspberry Install Home Assistant
Tags: iot, homeassistant, homebridge, homekit
Published: 2023-12-30 13:02:45

---
title: [IOT] Raspberry Install Home Assistant
published: true
date: 2022-11-13 13:36:18 UTC
tags: 
- IoT
- HomeAssistant
- HomeBridge
- Homekit
canonical_url: https://www.kmp.tw/post/raspberryinstallhomeassistant/
---

# Install Dependency
```
apt-get install -y python3 python3-dev python3-venv python3-pip libffi-dev libssl-dev libjpeg-dev zlib1g-dev autoconf build-essential libopenjp2-7 libtiff5 libturbojpeg0-dev tzdata
```


# Create HA User

```
useradd -rm homeassistant
```


# Create Virtual ENV
```
mkdir /srv/homeassistant
chown homeassistant:homeassistant /srv/homeassistant

# Change User
sudo -u homeassistant -H -s
cd /srv/homeassistant
python3 -m venv .
source bin/activate
```


# Install HomeAssistant And Package
```
python3 -m pip install wheel
pip3 install homeassistant
```

# Use `hass` To Start HA Process
```
hass
```

# Use Browser Visit `http://ha:8123`
![](https://img.kmp.tw/rbpi301.png)

# Trouble Shoot
### If You Get When You Run `hass`
```
(homeassistant) homeassistant@raspberrypi:~ $ hass
Traceback (most recent call last):
  File "/srv/homeassistant/bin/hass", line 10, in <module>
    sys.exit(main())
.
.
.
.
ImportError: cannot import name 'contextfilter' from 'jinja2' (/srv/homeassistant/lib/python3.7/site-packages/jinja2/__init__.py)
```
### Sulotions
```
(homeassistant) homeassistant@raspberrypi:~ $ pip uninstall jinja2
Uninstalling Jinja2-3.1.1:
  Would remove:
    /srv/homeassistant/lib/python3.7/site-packages/Jinja2-3.1.1.dist-info/*
    /srv/homeassistant/lib/python3.7/site-packages/jinja2/*
Proceed (y/n)? y
  Successfully uninstalled Jinja2-3.1.1
(homeassistant) homeassistant@raspberrypi:~ $ pip install jinja2==3.0.3
```
Don’t do this mistake in the Laravel collection
Tags: laravelframework, php, laravel, opensource
Published: 2022-12-01 23:49:41

---
title: Don’t do this mistake in the Laravel collection
published: true
date: 2022-11-13 13:12:38 UTC
tags: laravelframework,php,laravel,opensource
canonical_url: https://blog.devgenius.io/dont-do-this-mistake-in-the-laravel-collection-8abdd519f01b
---

[![](https://cdn-images-1.medium.com/max/2600/0*wilZ-WMSixqlsUxT)](https://blog.devgenius.io/dont-do-this-mistake-in-the-laravel-collection-8abdd519f01b?source=rss-17217f29618a------2)

Avoid using the empty function in the Laravel collection

[Continue reading on Dev Genius »](https://blog.devgenius.io/dont-do-this-mistake-in-the-laravel-collection-8abdd519f01b?source=rss-17217f29618a------2)
Detect Capslock using HTML, CSS and JavaScript
Tags: javascript, webdev, beginners, css
Published: 2022-11-13 12:52:52

Hello Guys! Welcome to [Coding Torque](https://codingtorque.com). In this blog, I'm going to explain to you how to make a Detect Capslock using HTML, CSS and JavaScript. This will be a step-by-step guide. Let's get started 🚀.

## **Step 1: Import Fontawesome CDN**
Import the font awesome CDN in our HTML `<head>` tag. fontawesome is a library that is used for icons on a website.

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />
```

## **Step 2: HTML Code**

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <title>Detect caps lock using JavaScript - @code.scientist x @codingtorque</title>
 
</head>

<body>
    <div class="center">
        <p>
        <div class="container">
            <h3>Detect Caps Lock using JavaScript</h3>

            <input id="myInput" placeholder="Some text..">
            <div style="display: flex;align-items: center;">
                <div id="signal"></div>
                <p id="message">Capslock is ON!</p>
            </div>

        </div>
        </p>
    </div>
  
</body>

</html>
```


### **Output Till Now**


![Detect Capslock using HTML, CSS and JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/daeyzpm7y07x11x0cykk.png)

## **Step 3: CSS Code**

```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

body {
    display: flex;
    font-family: poppins;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: white;
    height: 600px;
}

.container {
    padding: 40px;
    border: 2px solid deepskyblue;
    border-radius: 10px;
}

#text {
    display: none;
    color: red
}

input {
    font-family: poppins;
    width: 200px;
    height: 30px;
    transition: 0.3s;
    border-radius: 5px;
    padding: 0 5px;
    border: none;
    outline: none;
}

#signal {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: red;
    box-shadow: 0 0 7px red;
    margin-right: 10px;
}
```

[continue reading](https://www.codingtorque.com/2022/09/detect-capslock-using-html-css.html)
Let’s talk about Big Tech | FTX Crash
Tags: crypto, exchange, ftx, binance
Published: 2022-11-13 12:27:33

**FTX** is the most recent example of the instability of cryptocurrencies, following in the footsteps of **Voyager** and **Three Arrows Capital**.

It moved from being the industry's prospective rescuer, orchestrating rescues of failing enterprises, to needing a bailout itself in less than a week.

This post will go over the events that have impacted **FTX** this month.

## Nov 02, 2022

Reports come to light that FTX's cash is based mostly on FTT, it's own centrally controlled token. 

## Nov 06, 2022

Binance CEO Changpeng “CZ” Zhao and FTX CEO Sam Bankman-fried have an argie bargie. Binance says it plans to pull out of FTT. 

## Nov 08, 2022

Binance offers a bailout. Binance appears to have fallen in love quickly, as it signed a nonbinding letter of intent to acquire its smaller rival.

## Nov 09, 2022

Love was short-lived. After a "business due diligence" review found problems with FTX's financial status that Binance said were "beyond our control or ability to help," Binance swiftly changed course and withdrew from the purchase.

The Securities and Exchange Commission and the Commodity Futures Trading Commission started looking into the company's connections to sibling companies Alameda Research and FTX US, along with claims that it mishandled customer funds, in addition to its liquidity crisis.

FTX's bad luck spreads to the rest of the crypto industry. 

## Nov 10, 2022

Alameda Research falls. 

According to Reuters, FTX is now looking for $9.4 billion in rescue cash from investors, as many customers have sold their stakes. Bankman-Fried was apparently in talks with rival exchange OKX and stablecoin maker Tether to raise funds. He also solicited capital from current FTX investors, such as Sequoia Capital. He did, however, reach an agreement with Justin Sun, the founder of blockchain network Tron, to allow Tron-related token holders to remove their holdings from FTX.

Trading may be suspended on FTX US in a few days, despite Bankman-Fried claiming in a Twitter thread that the exchange "was not financially damaged by this shitshow" and was "100% liquid." Any positions you wish to close, kindly do so. Withdrawals are still possible and will be.

## Nov 11, 2022

FTX files for chapter 11 bankruptcy and Bankman-Fried steps down.
Validating your site's links in a world of SSR and server components
Tags: webdev, javascript, react, node
Published: 2022-11-13 12:14:40


Over the last 5 years, I have loved working in the "Jamstack" movement, where static site generators (like Hugo, Jekyll, Gatsby, etc) pre-generated your HTML for you, and your pages were served from a CDN. Validating links before pull-requests were merged was easy, because all your checks could run against this pre-generated HTML

Lately though, with popular frameworks like NextJS, Remix, and the whole shift to Server Components, more of the modern web if shifting back to server-side rendering. It's becoming harder to do these checks BEFORE pull-requests are merged. 

This is why I built [LinkProofer](https://github.com/jamespohalloran/linkproofer), an extremely lightweight CLI tool for validating links stored in `js` or `ts` files.

![linkproofer](https://media.giphy.com/media/pC4IgjB4fxVZFggIPG/giphy.gif)

Instead of proofing the links in the built-html, it proofs them before they are consumed. 

## ✨ Features

- Out-of-the-box Typescript support.
- Customizable entry (Provide your own filepath glob, or store links in `*.linkproof.<js | ts>` files).
- Support for absolute or relative links.
- Run LinkProofer checks locally, or in CI.
- Lightweight! (~50 kB).

You can learn more about the project by checking out the [GitHub repository](https://github.com/jamespohalloran/linkproofer)
How to Make Ad Blocker Detector in HTML, CSS & JavaScript
Tags: html, css, javascript, beginners
Published: 2022-11-13 11:49:08

In this article, we will make an ad blocker detector in HTML, CSS & JavaScript. We will create this ad blocker detector without any API or something. Here, we will create a popup message, or you can say a box, where we will add message to remove message and as soon user disable the ad blocker then box will get disappeared.
[Read More](https://rocoderes.com/how-to-make-ad-blocker-detector-in-html-css-javascript/)
Why I use TailwindCSS for all of my projects
Tags: tailwindcss, css, webdev
Published: 2022-11-13 11:27:54

I use TailwindCSS for all of my projects. Here are three reasons why.

## 1. Most engineers are bad at CSS

I remember my first time working in a large codebase. CSS was an absolute mess with multiple `!important` values fighting over one another. Most engineers suck at CSS and don't understand its cascading nature. It's a tragedy that CSS gets overlooked by most engineers, but it's rare to find engineers who truly devote themselves into learning it.

It only takes one bad engineer to ruin CSS for everyone else. With TailwindCSS, bad engineers can't ruin the codebase because their bad code is scoped to the components that they are working on and engineers do not have to think about the cascading nature of CSS.

## 2. There is TailwindUI Fallback (or other copy paste alternatives)

Main benefit of TailwindCSS is that we can copy paste other people's code and expect it to look the same. There is a big community of paid (i.e. TailwindUI) and free TailwindCSS components that engineers can copy paste into their code.

## 3. Isn't tied to JavaScript

CSS in JS has a lot of the same benefits as TailwindCSS. For example, we can scope the style changes to component so that bad CSS is harder to infect other parts of the codebase. The main downside to CSS in JS is that it's tied to JavaScript. TailwindCSS is language agnostic which makes it a safer choice because some engineers avoid JS like the plague.
Introducing ZenStack: a schema-first toolkit for creating CRUD services in Next.js projects
Tags: nextjs, crud, fullstack, typescript
Published: 2022-11-13 11:12:42

{% embed https://www.loom.com/share/76ba1308fb734af993765a6696b62c96 %}

---

Next.js is evolving fast to become an increasingly appealing choice for building full-stack web apps. However, coding up the backend part of an app, especially implementing CRUD services efficiently and securely, is still tricky (and boring 😒 too).

[ZenStack](https://go.zenstack.dev/?utm_campaign=devto&utm_medium=organic&utm_content=intro_article) is a toolkit that simplifies the construction of CRUD services with a schema-first approach. It offers a modeling language for defining data models, relations, and access policies and then generates RESTful CRUD services (with authorization) and React hooks for you. It also allows you to share types between client and server-side coding and achieve end-to-end type safety without pain.

Our goal is to let you save time writing boilerplate code and focus on building what matters - the user experience.

If it feels relevant, please also check out the excellent detailed tutorial by @jiasheng for how to use it in action:

{% embed https://dev.to/zenstack/how-to-build-a-production-ready-todo-app-in-one-nextjs-project-with-zenstack-2acc %}

, or find more details directly at Github:

{% embed https://github.com/zenstackhq/zenstack %}

Also, [join us on discord](https://go.zenstack.dev/chat?utm_campaign=devto&utm_medium=organic&utm_content=intro_article) for chat and the latest updates!

Have fun!