DEV Community: Manuel Alférez Ruiz

WRONGTYPE Operation against a key holding the wrong kind of value

Manuel Alférez Ruiz — Tue, 14 Nov 2023 11:57:44 +0000

The error arises when attempting a KV operation (set or get) in Vercel after creating an entry using a different data structure.

Replicating the error

await kv.set('userSession', '123abc');

Subsequently, we opt to change the data structure.

await kv.hset('userSession', { userId: 123, email: 'ex@example.com' });

Error:

UpstashError: WRONGTYPE Operation against a key holding the wrong kind of value, command was: ["hset","userSession", ...]

Solution

Remove the key from Vercel before modifying the data structure.

Go to Vercel: https://vercel.com/dashboard/stores/kv
Delete that key:

DEL userSession

Custom fonts in Fresh + Twind

Manuel Alférez Ruiz — Thu, 19 Oct 2023 14:20:12 +0000

To add fonts to your Fresh project, you don't need any extra dependencies:

1- Go to Google Fonts and choose your preferred fonts.

2- Select the desired font styles and copy the link:

3- Paste that link into your Fresh project's main index, under the <head> tag:

   // routes/index.tsx
   <Head>
     ...
     <link rel='shortcut icon' href='/favicon.png' type='image/png' />
     <link rel='preconnect' href='https://fonts.googleapis.com' crossOrigin="true"/>
     <link rel='preconnect' href='https://fonts.gstatic.com' />
     <link
       href='https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;600;800&display=swap'
       rel='stylesheet'
     />
   </Head>

4- Configure Twind to use the imported fonts:

// utils/twind.ts

import { IS_BROWSER } from "$fresh/runtime.ts";
import { Configuration, setup } from "twind";
export * from "twind";
export const config: Configuration = {
  darkMode: "class",
  mode: "silent",
  theme: {
    fontFamily: {
      sans: ["Inter", "sans-serif"],
    },
  },
};
if (IS_BROWSER) setup(config);

That's it! If you have any question, feel free to ask me.

ChatGPT-Powered Finance App

Manuel Alférez Ruiz — Fri, 06 Oct 2023 09:31:21 +0000

Hi everyone,

I am thrilled to announce the official launch of Flowinance, a cutting-edge Financing App that is revolutionizing the way you manage your finances! Flowinance is designed to simplify and streamline your financial life, providing you with the tools and security you need to take control of your money.

Key Features

🔐 Secure Authentication: Flowinance uses Supabase for authentication, ensuring that your data remains protected and confidential.

📋 Automatic Transaction Categorization: Thanks to ChatGPT, Flowinance automatically categorizes and cleans your transaction records, making it effortless to track your spending.

🔒 Top-Notch Data Encryption: Your financial information is fully encrypted, and every transaction field is inaccessible to anyone but you.

📈 Real-Time Spending Trends: Keep a close eye on your spending trends and make informed financial decisions in real-time.

User Interface:

💼 Transactions: Visualize your transactions effortlessly with a clean and intuitive interface.

📊 Dashboard: Gain insights into your financial health through an organized dashboard.

⚙️ Settings Page: Customize your Flowinance experience with ease.

✨ Easy Upload with ChatGPT: Simplify data entry with the assistance of ChatGPT.

Technologies Used

💼 Supabase: Our secure authentication and data management are powered by Supabase, guaranteeing the utmost protection for your financial information.

🖥️ RadixUI: We've incorporated RadixUI to create an intuitive and seamless user interface for Flowinance, ensuring a smooth and enjoyable experience.

🌐 Next.js: Flowinance utilizes Next.js to provide a fast, responsive, and dynamic web application that adapts to your needs.

🎨 Tailwind CSS: Our design is built on the foundation of Tailwind CSS, giving Flowinance a sleek and modern appearance while maintaining exceptional performance.

The best part? Flowinance is absolutely FREE! Your feedback is invaluable to us ❤️, so please don't hesitate to let us know what you think.

Adding Responsive Design to embedded YouTube videos with TailwindCSS

Manuel Alférez Ruiz — Sat, 02 Apr 2022 09:36:56 +0000

YouTube does not offer a way to automatically resize and scale. Here is a list of steps to achieve this with Tailwind:

1- Install the plugin @tailwindcss/aspect-ratio

npm i @tailwindcss/aspect-ratio

2- Add the installed plugin to the Tailwind settings

// tailwind.config.js 

plugins: [require("@tailwindcss/aspect-ratio")],

3- Add Responsive Design to your videos:

<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://youtu.be/NX_NW6bt6_s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

References

Sizing Images and Videos with Aspect Ratios with Tailwind CSS (Link to YouTube)
@tailwindcss/aspect-ratio (Link to npm)

Custom fonts in Next.js + Tailwindcss

Manuel Alférez Ruiz — Tue, 14 Dec 2021 18:14:50 +0000

To add fonts to your Next.js project you do not need any extra dependency:

1- Download your fonts and add them to the public/fonts directory.

2- Tailwindcss tells us in their guide the fastest way to include Tailwind if we do not plan to write any custom CSS in our project is to import it directly into pages/_app.js:

// pages/_app.js

- import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
}

export default MyApp

However, this is not our case and therefore we maintain styles/globals.css:

// styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

3- Declare your fonts in style/globals.css:

// styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'MyFont';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('/fonts/MY-FONT.woff') format('woff');
}

@font-face {
  font-family: 'MyFont';
  font-style: bold;
  font-weight: 600;
  src: local(''), url('/fonts/MY-FONT-BOLD.woff') format('woff');
}

4- Configure Tailwindcss to add the fonts you have imported:

// tailwind.config.js 

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'

  theme: {
    extend: {
      fontFamily: {
        myfont: ['MyFont'],
        sans: ['MyFont', 'sans-serif'],
      },
    },
  },

  variants: {
    extend: {
      fontFamily: ['hover', 'focus'],
    },
  },

  plugins: [],
  corePlugins: {
    fontFamily: true,
  },
};

5- Use your font 😊

// components/MyComponent.js

export default function MyComponent() {
  return (
    <div className="font-myfont">
      Hello World
    </div>
  );
}

Any questions about the post? Feel free to ask me.

Original post.