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.

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:

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.

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.

I have been working with Bootstrap for years and have not spent much time with Angular Material. So i created a simple todo app tonight.

Angular Material is a UI component library and design system for building user interfaces in Angular applications. It follows the Material Design principles established by Google, providing a set of pre-designed and customizable components that can be easily integrated into Angular projects. Angular Material helps developers create visually appealing and consistent UIs while adhering to best practices for design and user experience.

Key features and concepts of Angular Material include:

1. Component Library: Angular Material offers a comprehensive collection of reusable UI components, including buttons, cards, dialogs, menus, forms, tooltips, and more. These components are built using Angular and can be seamlessly integrated into your application.

2. Theming and Styling: Angular Material supports theming and provides a theming system that allows you to customize the appearance of components to match your application's branding and design. You can define color palettes, typography settings, and other styles.

3. Responsive Design: Angular Material components are designed to be responsive and work well across different screen sizes and devices. They adapt to the available space and provide consistent user experiences.

4. Accessibility: Angular Material places a strong emphasis on accessibility, ensuring that components are designed and developed with accessibility best practices in mind. This helps create inclusive and user-friendly interfaces.

5. Component Variants and Flexibility: Many components in Angular Material come with multiple variants and customization options, allowing you to tailor them to your specific use cases.

I have been toying with the idea of creating a simple extendable pagination service for angular using RxJs.

RxJS (Reactive Extensions for JavaScript) is a powerful library for reactive programming in JavaScript. It provides a set of tools and operators that enable developers to work with asynchronous and event-driven code in a more functional and declarative manner. RxJS is heavily based on the concept of Observables, which are streams of data that can be observed and manipulated over time.

Reactive programming, as facilitated by RxJS, allows you to work with data streams and events in a consistent and composable way, making it easier to handle complex asynchronous scenarios. It's particularly useful for scenarios like handling user input, managing AJAX requests, working with real-time data, and managing state changes in web applications.

Key concepts and features of RxJS include:

1. Observables: Observables represent sequences of data over time. They can emit values, errors, and completion signals. Observables can be subscribed to, and you can perform operations on them using various operators.

2. Operators: Operators are functions provided by RxJS that allow you to transform, filter, combine, and manipulate data streams. Operators enable you to compose complex asynchronous logic in a concise and readable manner.

3. Subscription: Subscribing to an Observable allows you to receive values and notifications emitted by the Observable. Subscriptions can be managed to control when data is consumed and to avoid memory leaks.

4. Subjects: Subjects are a type of Observable that allows you to both emit values and subscribe to them. They are often used for creating event emitters or managing state changes.

5. Schedulers: Schedulers provide a way to control the execution context and timing of Observables. They are useful for managing concurrency and handling asynchronous operations on different threads or environments.

Have you ever wanted to make a dropdown menu with multiple levels and a typeahead feature? I created this with ngx-bootstrap.

ngx-bootstrap is an open-source library that provides a set of native Angular directives and components that are built on top of the popular Bootstrap framework. It enables developers to easily integrate Bootstrap's CSS styling and interactive components into Angular applications using Angular-specific syntax and APIs.

The primary goal of ngx-bootstrap is to enhance the development experience for Angular developers by providing a seamless way to use Bootstrap components without the need for manual jQuery or JavaScript integration. This allows you to take advantage of Bootstrap's design and functionality while leveraging the power of Angular's component-based architecture.

Key features and benefits of ngx-bootstrap include:

Angular Directives and Components: ngx-bootstrap offers Angular-specific directives and components for common Bootstrap elements like modals, tooltips, carousels, date pickers, and more. These components can be used seamlessly in your Angular templates.

Bootstrap Styling: You can apply Bootstrap's CSS styling and responsive design to your Angular components without the need to manually include Bootstrap's JavaScript or jQuery dependencies.

Customization: ngx-bootstrap provides options for customizing the behavior and appearance of its components to match your application's design and branding.

Performance: By using Angular's native components and change detection, ngx-bootstrap can offer better performance and maintainability compared to traditional jQuery-based integrations.

Integration with Reactive Forms: Many ngx-bootstrap components are designed to work well with Angular's reactive forms, providing seamless integration with form controls and validation.

I created a BMI calculator to watch my weight. This is simple Javascript skinned with BootstrapJS

Bootstrap is an open-source front-end framework for building responsive and visually appealing web applications. It provides a collection of pre-designed HTML, CSS, and JavaScript components, as well as a responsive grid system, that streamline the process of designing and developing consistent and modern user interfaces.

The primary goals of Bootstrap are to:

Ease of Use: Bootstrap simplifies web development by offering a set of ready-to-use components and styles. Developers can quickly build and prototype web interfaces without having to start from scratch.

Responsive Design: Bootstrap's responsive grid system allows developers to create layouts that adapt to different screen sizes and devices, ensuring a consistent user experience across desktops, tablets, and mobile devices.

Consistency: By using Bootstrap's design and components, developers can achieve a consistent and cohesive look and feel throughout their web application, regardless of the team's design skills.

Customizability: While Bootstrap provides a default theme, it's highly customizable. Developers can easily modify colors, typography, and other design elements to match their branding.

Cross-Browser Compatibility: Bootstrap is designed to work across different web browsers, helping ensure that your application looks and functions consistently for users.

Key features and components of Bootstrap include:

Responsive Grid System: Bootstrap's grid system allows developers to create flexible and responsive layouts by organizing content into rows and columns.

Typography: Bootstrap provides a set of typography styles for headings, paragraphs, lists, and other text elements.

CSS and Components: Bootstrap offers a wide range of CSS classes and components for buttons, forms, navigation bars, modals, alerts, cards, and more.

I have been working I18n localization. It has caused me to need to generate large list of messages in JSON, YAML and Java properties. So I got creative and made this little app to generate them. I call it Message Writer.

I18n, short for "Internationalization," is the process of designing and developing software applications in a way that makes them adaptable and culturally relevant for users from different regions and languages. The goal of internationalization is to create software that can be easily localized for different languages, cultures, and regions without requiring significant changes to the underlying codebase.

Key concepts and practices related to internationalization (I18n) include:

Localization (L10n): Localization is the process of adapting an application or content to a specific locale or language. It involves translating user interface elements, text, dates, numbers, and other content to make the application culturally relevant to a target audience.

Unicode and Character Encoding: Unicode is a character encoding standard that represents characters from virtually all written languages in a consistent manner. It allows software to handle different scripts and languages without encoding conflicts.

Text Externalization: In internationalized applications, text strings and other user-visible content are externalized into resource files or databases, making it easier to replace and translate them for different languages.

Date and Time Formatting: Internationalized applications consider regional date and time formats, including different date orders, time zones, and localized date representations.

Number and Currency Formatting: Different cultures use varying formats for numbers, currencies, and decimal separators. Internationalized applications adjust these formats based on the user's locale.

I recently had the opportunity to develop a serverless application with the use of AWS Lambda and API Gateway. It was my first introduction to the technology. My coworker suggested the solution as a way to keep cost down for for hosting a relatively simple  REST API needed for multiple other services in our main application. We started with a Spring Boot Java application connected to DynamoDB in a docker container. Then we created a Lambda file to define the API endpoints. A Lambda file in this case is was a single Java class with methods for each endpoint which is basically the same thing as a traditional Spring Boot Controller. The Lambda file called an additional service file to do the core logic which also depended on a CRUD Repository file that integrates to DynamoDB. This Lambda project is deployed to AWS via a serverless.yml file that defines the paths and parameters for the Lambda file. The challenges I faced were mostly learning to use AWS API Gateway and serverless.yml. We used the original spring controller to debug during development. Once we got it working it seemed rather simple though. 

AWS Lambda is a serverless computing service provided by Amazon Web Services (AWS) that enables you to run code in response to events without the need to provision or manage servers. With AWS Lambda, you can build and deploy applications using a "pay-as-you-go" model, where you only pay for the compute time that your code actually consumes.

Key features and concepts of AWS Lambda include:

Serverless Architecture: With AWS Lambda, you don't need to worry about server provisioning, scaling, or maintenance. AWS takes care of the underlying infrastructure, allowing you to focus on writing and deploying code.

Event-Driven Execution: AWS Lambda functions are triggered by events from various AWS services or custom sources. These events can include changes in data, HTTP requests, database updates, file uploads, and more.