teleren/devto huggingface dataset:
A simple and robust expense tracking application developed with TypeScript and React
Tags: tracker
Published: 2023-08-18 07:46:51

---
title: A simple and robust expense tracking application developed with TypeScript and React
published: true
date: 2023-08-17 00:40:00 UTC
tags: Tracker
canonical_url: https://reactjsexample.com/a-simple-and-robust-expense-tracking-application-developed-with-typescript-and-react/
---

# Expense Tracker
 ![A simple and robust expense tracking application developed with TypeScript and React](https://reactjsexample.com/content/images/2023/08/code_2023-16-15-33-59.jpg)

Expense Tracker is a TypeScript and React-based project aimed at helping you manage and track your expenses efficiently. This project serves as a practical application of TypeScript and React concepts and was developed to enhance proficiency in these technologies.

[View Demo](https://expense-tracker-scynes.vercel.app/)[View Github](https://github.com/Scynes/expense-tracker?ref=reactjsexample.com)

## Features

- **Expense Input:** Easily input your expenses, providing details such as the amount, description, and category.
- **Categorization:** Categorize your expenses to gain insights into your spending patterns.
- **Validation:** Leverage the `react-hook-form` and `zod` libraries for streamlined form validation.
- **Interactive UI:** The user-friendly interface, built with React and Vite, ensures smooth and engaging interactions.
- **Data Visualization:** Gain quick insights into your financial trends with simple yet effective expense visualizations.

## Installation

1. Clone the repository:

2. Navigate to the project directory:

3. Install the dependencies:

## Usage

1. Run the development server:

2. Input your expenses, categorize them, and witness the power of effective expense tracking!

## Technologies Used

- **TypeScript**
- **React**
- **React Hook Form**
- **Zod**
- **Vite**

## Contributing

Contributions are highly encouraged! To contribute to the project:

1. Fork the repository.
2. Create a new branch for your feature: `git checkout -b feature-name`
3. Develop and test your feature or enhancement.
4. Commit and push your changes.
5. Open a pull request detailing your changes and their benefits.
24hrs format for html inputs in Firefox
Published: 2023-11-10 12:41:27

---
title: 24hrs format for html inputs in Firefox
published: true
date: 2023-11-09 00:00:00 UTC
tags: 
canonical_url: https://vknabel.com/tils/2023-11-09-firefox-24hrs-format-for-html-inputs/
---

My system language on my linux machine is set to English, but as a German raised with 24-hour days, I simply cannot wrap my head around to get the 12-hours `am`/`pm` format intuitively. By the time I learned that `am` is in the morning and `pm` is in the evening. But when it comes to `12:00` as the mid of the day and `0:00` in the night, I'm lost.

Of course I have already set the time format to 24-hours in my system settings (Ubuntu `Date & Time > Time Format` set to `24-hour`), but Firefox still uses the 12-hours format for html inputs with `type="time"`.

As a solution you open [about:config](about:config) and set `intl.regional_prefs.use_os_locales` to `true`.
Now simple `<input type="time">` will use the 24h format!
How to create a database,user and grant privileges in Postgresql Python-Django.
Tags: programming, python, coding, softwaredevelopment
Published: 2023-08-16 23:59:59

step1:
Launch the SQL Shell by running **postgres -u psql**, provide the login details, and execute the below-provided command to create a new user:
```
CREATE USER master WITH PASSWORD '1234';
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jursz80if9hq6yaaswzf.png)
you can  verify user creation by running “\du” command and see below :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj3hnvdpin5ga4lqlgb9.png)
output  signifies user  named master has successfully been created.

step2: creating a database use the below command:

```
postgres=# CREATE DATABASE django;
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8syadzra85jjf2enij3.png)
To verify the database creation, use the “\l” command:

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

The output snippet demonstrates that a new database named “django” has been successfully created 

step3:  Grant All Privileges/Access to the User/Role.
Finally, execute the “GRANT ALL PRIVILEGES” command to grant all the database privileges to the user, such as creating a database.
```
GRANT ALL PRIVILEGES ON DATABASE "django" to master;
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e2dw6ooj5enynj2mjse.png)
The output shows that the permissions have been successfully granted to the user.

Conclusion 
In PostgreSQL, the CREATE USER statement with “PASSWORD” attributes creates a new user with login privileges. While the “CREATE DATABASE” command creates a new database. However, the newly created user can’t access or modify the database objects, such as tables, functions, views, etc. until the user is granted privileges on the database objects. To fulfill this purpose, the “GRANT ALL” statement is used in Postgres. This post presented a comprehensive guide on creating a new user, a database, and granting/assigning the database privileges to the newly created user.
Local database > cache 💸
Tags: flutter, reactnative, database, webdev
Published: 2023-08-16 22:49:19

Most app developers don't really care about this argument, but they should. Here's why:


![Gif of mo cache mo problems](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grz61apdmbo6i7377rx5.gif)

## Users want delightful apps
We love products that take away mental overhead. The less thinking we have to do to get something done, the better. Using a cache will always require: 

1. more thinking from users
OR
2. more thinking from app developers to work around limitations that will require more thinking from users.


![Pedro Pascal eating a sandwich](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1q2qkmdj0x2dxstf0in9.jpg)

## 1. Caches are breadcrumbs, users want sandwiches
Caching works by persisting downloaded data. When users are offline, they can follow the trail back but they can't keep on exploring.

**WIN #1 for local database:** they let users explore parts unknown.

![Slap some tape on that leaky bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v62lg8p91kx0pceuyw2.gif)

## 2. Caches are leaky buckets
Caches don't know how much data is on the way so they have to keep deleting data to make space available. Haven't accessed data recently? Too bad, you can't see it anymore.

**WIN #2 for local database:** all data is there for you no matter how dusty it's become.

![Hella fresh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0wt0i6onz2p5poeze91.gif)

## 3. Caches keep stale data, users want fresh data
Cached data needs to be redownloaded if it has been updated elsewhere. If offline users want to access data that hasn't recently been redownloaded, they can't.

**WIN #3 for local database:** background syncing keeps local databases fresh.


## 4. Caches can cause slowness 🦥, users want fastness ⚡ 
Because a cache introduces a secondary source of data, an app needs to run through logic to decide:

- Am I online?
- Can I request server data?
- Did the request succeed?
- Do I need to look for the data in the cache?

This is usually fine, but not when connectivity is still _kind of_ available but very poor.

**WIN #4 for local database:** as the only source of data, apps don't waste time wondering where to fetch data.

## Easy, we'll all just use local databases from now on
Not so fast! Big BaaS providers like Firebase don't have easy ways to do that. Why? Does it have something to do with how they charge for data transfer between your app and their cloud and if you had a local database you'd make fewer calls? I can't say. But sync and consistency is a hard problem to solve whether you're using Firebase or something else.

## So what are you doing about it?
I'm working on an easy + (soon-to-be) open source way to solve sync and make using local databases easy for devs. Follow our progress [on discord](https://discord.gg/powersync) or check out [powersync.co](https://www.powersync.co).
Day 806 : Feels Like Summer
Tags: hiphop, code, coding, lifelongdev
Published: 2023-08-16 22:21:35

_liner notes_:
- Professional : Submitted some code snippets to some folks to check over before they get printed on flyers to be distributed to events. Replied to a community question. Spent the rest of the day trying to set up a demo application for a blog post I've got coming up. Found out the service I was going to connect to is going to be deprecated next year. Did a bunch of research and running demos to find a new alternative. Now I need to see if the new service can work with what I'm trying to do. That's tomorrow Dwane's problem. haha.

- Personal : So I figured out how I want to pass some data between components. I was thinking about using stores, but I didn't want to add another dependency so I went with using session storage built into browsers. Seems to work so far. Only issue now is that I'm getting an error that the token I'm generating is invalid. Awesome. I think I may be mixing up new and old stuff of the library I'm using. I'll work it out.

![Mangrove trees in the water in New Orleans Bayou, LA, USA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yv1u3lpfv5htundkjjkg.jpg)

It really feels like summer right now. It's hot in the summer and rainy in the evening. Going through tracks for the radio show and see if I can figure out the invalid token issue I'm running into with my side project. Still haven't watched any anime this week yet. I'm sleeping. haha.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube F1B9Fk_SgI0 %}
function vs expression vs arrow definitions - Performance comparison (Part 3)
Tags: javascript, performance
Published: 2023-08-16 20:32:11

In this post we are going to compare performance of javascript functions created with function definitions vs function expressions vs arrow functions.

To test this, we created three types of files:
- _withFunctionDefinition.js_ - contains simple function definitions
- _withFunctionExpression.js_ - contains function definitions using function expression syntax
- _withArrowDefinition.js_ - contains function definitions with arrow syntax

## withFunctionDefinition
- Lets create a file with name `withFunctionDefinition.js` and add 1 million function definitions to the file.

## withFunctionExpression
- Lets create another file with name `withFunctionExpression.js` and add 1 million function definitions using expressions to the file.

## withArrowDefinition
- Lets create yet another file with name `withArrowDefinition.js` and add 1 million arrow functions.

## Results
- File `withFunctionDefinition` takes a constant time to get executed and has the best overall performance.
- The time complexity of files `withFunctionExpression` and `withArrowDefinition` grows linearly alongwith number of functions defined in the file (and both are similar)

### References
https://github.com/manojadams/js-objects-memory/blob/main/function-definition_vs_function-expression_vs_arrow-function/README.md
Checking whether a Key or Value Exists in a Dictionary.
Tags: webdev, python, softwaredevelopment, ubuntu
Published: 2023-08-16 21:59:28

In this article you will learn how to check whether a key or Value Exists in a Dictionay in python by use of in or not Operators.

Enter the following code into the interactive shell and see the output:

```
>>> spam = {'name':'vincent','age':24}
>>> 'name' in spam.keys()
True
>>> 24 in spam.values()
True
>>> 'age' in spam.keys()
True
>>> 'color' in spam
False
>>> 
```
Note: if a  Value or key doesn't exist in a dictionay it returns false.
vite-rtk-query update
Tags: redux, rtkquery, reduxtoolkit, vite
Published: 2023-08-16 21:58:00

---
title: vite-rtk-query update
published: true
description: React Router and CSS Modules implovement.
tags: redux, rtkquery, reduxtoolkit, vite
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2023-08-16 21:58 +0000
---
> here is [original post](https://laststance.deno.dev/vite-trk-query-update-v0.4.0)

I've just updated [vite-rtk-query](https://github.com/laststance/vite-rtk-query).

### React Router(v6) setup
Added [React Router](https://reactrouter.com/en/main) and [redux-first-history](https://github.com/salvoravida/redux-first-history).  
redux-first-history allow dispatch page transition witihin React Router.

### CSS Modules nesting
Added [postcss-nesting](https://www.npmjs.com/package/postcss-nesting) for more convenient styling with CSS Modules.
For skip Redux peer depencency error, please use `npm i --force` option!  

Thank you for all users.
Digital Marketing For Real Estate in 2023
Tags: realestate
Published: 2023-08-16 21:49:31

The **real estate sector** has always been dynamic, responding keenly to market trends and demands. However, in the digital age, the pace of change has skyrocketed. 

In 2023, with the technological ecosystem more integrated than ever, real estate professionals must be adept in their digital marketing strategies, especially when targeting specific markets, like "casas en venta en Mérida" (houses for sale in Mérida).

## Why Digital Marketing is a Game-Changer

Gone are the days when real estate relied solely on word-of-mouth and print ads. Now, a robust online presence is vital for real estate businesses. Here's why:

**Reach:** Digital marketing platforms enable real estate professionals to connect with a global audience. Someone in Europe can easily discover "casas en venta en Mérida" with just a few clicks, all thanks to strategic online advertising.

**Interactivity:** Platforms like social media and virtual tour applications offer interactive experiences, giving potential buyers a more comprehensive feel of properties.

**Analytics:** Digital marketing tools come with analytics. By understanding who's visiting your website and what they are looking for, real estate professionals can tailor their offerings and strategies accordingly.

Incorporating SEO for "[Casas en Venta en Mérida](https://www.globalrealty.com.mx/casas-en-venta-merida
)"

Search Engine Optimization (SEO) is crucial in the digital marketing realm. To ensure your listings for "casas en venta en Mérida" reach the right audience:

**Keyword Strategy:** Beyond the primary keyword, consider related terms that users might search for. This can range from "luxury homes in Mérida" to "affordable family houses in Mérida".

**Quality Content:** Regularly update your website with informative articles, market updates, and testimonials. This not only helps in SEO but also establishes your brand as a thought leader in the "casas en venta en Mérida" niche.

Local SEO: Enhance your online presence in local directories and Google My Business. This ensures that when someone searches for properties in Mérida, your listings pop up.

## Other Digital Marketing Trends in 2023

**Virtual Reality (VR)** and Augmented Reality (AR): Allow potential buyers to take virtual tours of "casas en venta en Mérida", giving them an immersive experience without physically visiting the property.

Chatbots and AI: Automate responses and guide visitors searching for "casas en venta en Mérida" through your listings, answering queries in real-time.

**Video Marketing:** Videos showcasing properties, the surrounding neighborhood, and other attractive features can significantly boost the appeal of "casas en venta en Mérida".
The 58th Day of the 100 Days of Code Challenge
Published: 2023-08-16 21:48:11

Hey everyone!

Today was a day where I barely had any time to work on coding, but I did work some more on understanding on understanding how the personal assistant project I'm working on will work. I've started testing out the tools I'll be using in a stand-alone manner before implementing them into a flow.

There are multiple things to consider when it comes to an application that makes phone calls for you, which are:

- Transcription of the other party's speech.

- Generating responses to the other party's speech while following the user's wishes.

- Synthesizing the generated response (sounding it out to the other party)

The transcription is certainly the part that needs the most fine-tuning, as it tends to be a major contributor to latency.

These are the components I'll be testing out before working on the server's architecture. The one that will handle the phone call requests and the one that will actually make the phone calls. Both are different and contain different routes, so that's some food for thought!

That's it for today,
Happy coding everyone!
Unveiling the Power of Automation with AI
Tags: programming, ai, machinelearning
Published: 2023-08-16 20:17:43


Introduction
In the digital era, automation has emerged as a transformative force across industries, streamlining processes and enhancing efficiency. The integration of Artificial Intelligence (AI) into automation takes this concept to a whole new level, revolutionizing the way we approach coding and development. In this article, we will explore the synergy between automation and AI, with a subtle nod to the capabilities of Blackbox in the coding landscape.

Table of contents
Synergy Between Automation and AI
Leveraging Blackbox: The AI-Powered Partner

Synergy Between Automation and AI
Automation has long been a cornerstone of modern workflows, allowing developers to execute repetitive tasks with precision and speed. However, the infusion of AI introduces a dynamic element that empowers automation to adapt, learn, and optimize itself over time. We will delve into real-world scenarios where AI-driven automation, such as Blackbox, collaborates seamlessly with developers to expedite code creation, testing, and refinement.

Leveraging Blackbox: The AI-Powered Partner
Amidst the evolution of coding practices, tools like Blackbox provide a glimpse into the future of AI-augmented development. By complementing traditional automation with intelligent suggestions and insights, Blackbox facilitates efficient code generation and debugging, ultimately catalyzing innovation within the coding ecosystem.

Empowering Tomorrow's Developers
The era of AI and automation invites developers to embrace a symbiotic relationship that optimizes their productivity and creative potential. As we navigate this paradigm shift, leveraging tools like Blackbox empowers us to explore uncharted territories, crafting innovative solutions that reshape the boundaries of what's possible.
Find AI Grants, Compute Credits, and Investments
Tags: ai, investment, azure, aws
Published: 2023-08-16 20:51:22

Did you know? Over $8 Million USD in investments & credits are up for grabs for early-stage AI builders today.

But all this information is scattered across the web, making it challenging to track down. On top of that, if you want to check your eligibility for any program, you again have to browse various FAQs, rules (or sometimes even clarifications on Twitter) to make sense of it all.

We've tried to simplify it for you in the AI Grants Finder. On the tool you can easily browse:
🎖️ Program perks
📝 List of qualifiers
🌍 Accepted countries
📅 Deadlines
all in a single place.

## Check it out here: https://grantsfinder.portkey.ai/

Give it a whirl, and if you stumble upon a game-changing program for your builder journey, we'd love to hear about it🙏
Coding Review de una IA: Maximizando la Calidad del Código
Tags: ai, programming, productivity, machinelearning
Published: 2023-08-16 20:12:56

Introducción
En el emocionante mundo de la programación, la revisión de código es esencial para garantizar la calidad y la eficiencia de un proyecto. Con la llegada de la inteligencia artificial (IA), una nueva dinámica ha entrado en juego: el análisis y la revisión de código impulsados por IA. Este artículo explora cómo la IA colabora en la revisión de código, y por qué su incorporación puede marcar la diferencia en el desarrollo de software.

Tabla de Contenidos
Papel Transformador de la IA en la Revisión de Código
Identificación de Errores y Mejoras: Cómo la IA Optimiza la Calidad del Código

Papel Transformador de la IA en la Revisión de Código
La revisión de código es esencial para asegurar que un proyecto sea robusto y libre de errores. La introducción de la inteligencia artificial, como la IA de Blackbox, en este proceso ha impulsado una evolución en la forma en que se aborda la revisión. Esta sección explora cómo la IA de Blackbox aporta nuevas dimensiones a la revisión de código, mejorando la detección de problemas y promoviendo un enfoque más eficiente.

Identificación de Errores y Mejoras: Cómo la IA Optimiza la Calidad del Código
La IA de Blackbox ofrece una perspectiva única en la identificación de errores y áreas de mejora en el código. Al analizar patrones y tendencias en proyectos similares, la IA de Blackbox puede señalar posibles fallos y sugerir soluciones efectivas. Este enfoque colaborativo entre los desarrolladores y la IA de Blackbox resulta en un código más limpio, seguro y de mayor calidad.

Integración de Blackbox: Un Socio en la Revisión de Código
Dentro del entorno de programación, herramientas como Blackbox AI ofrecen una ventaja única en la revisión de código. A través de sus sugerencias basadas en IA, completado automático y generación de código, los desarrolladores pueden agilizar su flujo de trabajo y concentrarse en los aspectos creativos de la programación. Blackbox complementa la revisión de código al brindar información y soluciones que mejoran la calidad general del código.


Eleva tu trabajo con la IA
Explora cómo la IA puede potenciar tus esfuerzos en la revisión de código. Descubre cómo la colaboración con una IA como Blackbox puede optimizar tus habilidades de programación y elevar la excelencia de tu trabajo.