Vue Notes

I was studying the Vue framework today and I put together this little sample app to demonstrate the basics of Vue components and Pinia state management.  Pinia is kinda like Redux for Vue. 

Pinia is a state management system for Vue.js applications. It provides a modern and ergonomic way to manage application state in Vue applications, and it is designed to work seamlessly with the Vue ecosystem. Pinia takes inspiration from concepts in modern state management libraries while focusing on simplicity, performance, and ease of use.

Key features and concepts of Pinia include:

Stores: Pinia introduces the concept of "stores," which are modules that encapsulate a specific piece of application state and its related actions (mutations and actions). Each store represents a distinct area of your application's data and logic.

Reactivity: Pinia leverages Vue's reactivity system, ensuring that changes to store state are automatically reflected in the UI components that depend on that state. This allows you to build reactive and responsive user interfaces.

Composition API: Pinia encourages the use of Vue's Composition API, which provides a more flexible and expressive way to structure component logic. This allows you to create stores using the Composition API's setup function.

Typescript Support: Pinia is designed with TypeScript support in mind. It provides strong typing for stores and their methods, helping you catch type-related errors during development.

Separation of Concerns: Pinia encourages a clear separation of concerns by grouping related state and logic within individual stores. This promotes a modular and maintainable codebase.

Devtools Integration: Pinia integrates with Vue Devtools, making it easier to inspect and debug your store's state and actions.

Plugin System: Pinia supports plugins that can extend its functionality, allowing you to add features or integrations to your stores.


All Aboard the ExpressJS

All Aboard the ExpressJS

Express is a popular and widely used web application framework for Node.js. It simplifies the process of building robust, scalable, and efficient web applications and APIs by providing a set of features, utilities, and tools that streamline common tasks involved in web development.

Key features and characteristics of Express include:

Web Application Framework: Express provides a framework for building web applications and APIs using Node.js. It abstracts away many low-level details, allowing developers to focus on application logic.

Routing: Express allows you to define routes for handling HTTP requests. You can specify different routes for various HTTP methods (GET, POST, PUT, DELETE, etc.) and URL patterns.

Middleware: Express uses middleware functions to process requests and responses. Middleware can handle tasks like parsing request bodies, authentication, logging, error handling, and more.

HTTP Utility Methods: Express provides shorthand methods for common HTTP operations, making it easy to send responses, redirect, and set headers.

Template Engines: Express supports various template engines (such as EJS, Pug, and Handlebars) that allow you to generate dynamic HTML content and render views on the server.

Static File Serving: Express makes it simple to serve static files (such as HTML, CSS, JavaScript, images) from a directory, enhancing the performance of your application.

Request and Response Objects: Express provides request and response objects with extended features and methods for working with incoming requests and generating responses.

RESTful APIs: Express is often used to build RESTful APIs, allowing you to create endpoints for interacting with data and resources over the HTTP protocol.

Error Handling: Express provides mechanisms for handling errors and responding with appropriate error messages or status codes.




Vercel is a cloud platform and hosting service designed specifically for deploying and serving modern web applications. It focuses on providing a seamless and efficient experience for frontend developers, enabling them to deploy their projects quickly, scale as needed, and optimize for performance.

Key features and capabilities of Vercel include:

Static Site Hosting: Vercel excels at hosting static websites and single-page applications (SPAs). It uses a global content delivery network (CDN) to deliver content quickly to users around the world.

Serverless Functions: Vercel supports serverless functions, allowing you to deploy server-side logic in response to HTTP requests without managing server infrastructure. This feature is particularly useful for building APIs, handling form submissions, and more.

Automatic Deployments: Vercel provides seamless integration with version control systems like Git. It can automatically trigger deployments whenever you push changes to your repository, making continuous deployment straightforward.

Preview and Staging Environments: Vercel allows you to create preview and staging environments for your applications, enabling you to test changes and new features before they are deployed to production.

Custom Domains: You can easily associate custom domain names with your Vercel deployments, allowing you to use your own branded URLs.

Environment Variables: Vercel enables you to manage environment variables for different deployment environments, ensuring that sensitive information is kept secure.

Optimized Performance: Vercel automatically optimizes your deployments for performance, including code splitting, image optimization, and lazy loading, which contributes to faster load times and better user experiences.


Fire it Up!

I deployed this sample code test of data tree search to Firebase.

Firebase is a comprehensive platform provided by Google that offers a suite of tools and services for building and managing web and mobile applications. Firebase provides a wide range of features that help developers quickly develop, deploy, and manage applications, while also providing functionality for real-time data synchronization, authentication, cloud storage, hosting, and more.

Key features and components of Firebase include:

Real-time Database: Firebase offers a real-time NoSQL cloud database that enables developers to store and sync data in real time across clients. It's particularly useful for building collaborative and interactive applications.

Authentication: Firebase provides authentication services, allowing you to easily integrate secure user authentication and authorization into your applications using methods such as email/password, social media logins, and more.

Cloud Firestore: Firestore is Firebase's scalable, cloud-native NoSQL database solution. It supports real-time synchronization, powerful querying, offline capabilities, and seamless integration with other Firebase services.

Cloud Storage: Firebase offers cloud storage for hosting and serving user-generated content like images, videos, and files. It provides scalable and secure storage options with easy access from both web and mobile clients.

Hosting: Firebase Hosting allows you to deploy and serve your web applications and static content with a global content delivery network (CDN), ensuring fast and reliable access for users around the world.

Cloud Functions: Firebase Cloud Functions enables you to run custom server-side logic in response to events from Firebase services and HTTP requests. It allows you to automate tasks and perform serverless backend operations.


NgRx Table

I created this example table of NgRx built with Angular and Material.

Let's walk through a simple example of how NgRx can be used to manage the state of a counter in an Angular application.

1. Setup: First, make sure you have Angular CLI installed. You can create a new Angular application using the following command:

ng new ngrx-counter-app

2. Install NgRx: Navigate to the project directory and install the necessary NgRx packages:


Reacting to the State of Angular

Reacting to the State of Angular

NgRx is a state management library for Angular applications. It is built on top of the Redux pattern, which is a predictable state container for managing application state in a consistent and scalable way. NgRx extends the Redux pattern to work seamlessly with Angular's components, services, and other features.

The core concepts of NgRx include:

1. Store: The central repository for managing the state of an Angular application. It holds the entire application state, and components can subscribe to changes in the store to receive updates.

2. Actions: These are plain JavaScript objects that describe an event that has occurred in the application. Actions are dispatched to the store to trigger state changes.

3. Reducers: Reducers are pure functions responsible for transforming the current state and an action into a new state. They specify how the application's state changes in response to different actions.

4. Effects: Effects provide a way to manage side effects, such as making API calls, updating the database, or navigating to a different route. Effects listen for specific actions and then perform asynchronous tasks.

5. Selectors: Selectors are functions that retrieve specific pieces of data from the store. They allow components to efficiently access and subscribe to only the relevant parts of the state.

By using NgRx, developers can maintain a clear separation of concerns between components, state management, and side effects. This can lead to more maintainable, testable, and scalable Angular applications.

It's worth noting that while NgRx is a powerful tool for managing state in Angular applications, it also introduces some additional complexity. Developers should carefully consider whether the use of NgRx is appropriate for their project's size and requirements.


How's the weather

RxWeather is one of my practice apps which fetches the weather from a free api using your location or you can enter a city name. I also displays a map zoomed in on the city. I built this as an example of a Typescript React application using redux-observable/RxJs and Mapbox. 

In case you have not heard of redux-observable, it is a middleware library for managing asynchronous operations and side effects in Redux applications. It enables you to handle complex asynchronous flows using reactive programming principles and techniques. The library is built on top of the popular RxJS library, which provides tools for working with asynchronous and event-driven code using Observables.

The primary goal of redux-observable is to provide a way to handle side effects in a more organized and maintainable manner while adhering to the principles of Redux. By using Observables, you can model and manage asynchronous actions, such as making API requests, handling user input, and managing timers, in a consistent and predictable way.

Key concepts of redux-observable include:

Epics: Epics are the core building blocks of redux-observable. They are functions that take a stream of actions as input and return a stream of new actions as output. Epics allow you to react to specific actions and perform asynchronous operations, transforming them into new actions.

Observables: Observables are streams of values that can be observed over time. In the context of redux-observable, Observables represent streams of actions and can be transformed using various operators from the RxJS library.

Actions and Action Creators: Just like in Redux, actions represent events or changes in your application. Action creators are functions that create action objects. In redux-observable, you can use actions to trigger epics and produce new actions.


Take a PDF and pass it on

So I made this app to generate a QR code and download a PDF all in the browser, no server needed. I used jsPDF to generate the PDF.

jsPDF is a popular open-source JavaScript library that allows developers to generate PDF documents directly in a web browser. It provides an easy and flexible way to create PDF files from HTML, text, images, and various other types of content, making it a valuable tool for tasks like generating reports, invoices, and printable documents within web applications.

Key features and capabilities of jsPDF include:

1. Document Generation: jsPDF enables you to create new PDF documents or modify existing ones by adding pages, text, images, and other content.

2. Text and Styling: You can add text to PDF documents and apply various styling options, such as fonts, colors, font sizes, and alignment.

3. Images: `jsPDF` allows you to insert images into PDF documents, which can be useful for adding logos, illustrations, or charts.

4. Tables: You can create tables within PDF documents, organizing data in rows and columns.

5. Customization: The library offers a range of configuration options and methods for fine-tuning the appearance and layout of the PDF document.

6. Export Formats: `jsPDF` supports exporting PDF documents as data URLs, Blob objects, or directly saving them to the user's device.

Here's a simple example of how you might use `jsPDF` to generate a PDF document with some text:


How you say

I made a simple app that uses voice recognition and translates the transcript. It uses WebkitSpeechRecognition, SpeechSynthesisUtterance and a Free Rest API for translation.

WebkitSpeechRecognition is an API provided by web browsers that allows web applications to integrate speech recognition capabilities directly into the browser. This API is specific to browsers based on the WebKit rendering engine, which includes browsers like Google Chrome and Safari.

With webkitSpeechRecognition, developers can create applications that listen to and transcribe spoken language into text, enabling users to interact with the application through voice commands. It's commonly used to create voice-controlled interfaces, dictation features, and other speech-related functionalities within web applications.

SpeechSynthesisUtterance is a JavaScript interface provided by web browsers that allows developers to generate and control speech synthesis, also known as text-to-speech (TTS), directly within web applications. This API enables you to convert text into spoken audio, providing a way to make your web applications more accessible and user-friendly.

Using SpeechSynthesisUtterance, you can create and customize instances of spoken messages, controlling various aspects of the synthesized speech, such as pitch, rate, volume, and voice selection.


How many pesos is that?

I don't know much about Cinco de Mayo.
I'm never sure what it's all about.
But I say I want you and you don't believe me.
You say you want me but I've got my doubts
Oh baby, I was bound for Mexico.
-- Song by Cake

Need to convert your dollars into another currency. I was board, so I made this simple app in React and Material UI.

Material-UI is a popular open-source design system and component library for building user interfaces (UIs) in React applications. It provides a set of pre-designed and customizable UI components, styles, and themes that follow the Material Design guidelines created by Google. Material Design is a design language focused on creating visually appealing and consistent user experiences across different platforms and devices.

Material-UI offers a wide range of components that cover common UI elements, such as buttons, input fields, navigation bars, modals, cards, and more. These components are designed to be highly modular, reusable, and flexible, allowing developers to create visually appealing and responsive user interfaces with ease.

Key features and concepts of Material-UI include:

1. Component Library: Material-UI provides a comprehensive collection of ready-to-use components that follow the Material Design principles. These components are built using React and can be easily integrated into your application.

2. Theming: Material-UI supports theming, allowing you to customize the look and feel of your application by defining a theme with colors, typography, spacing, and other design attributes.