0 Down time
GraphQL
NextJS
Mongo
VITE
MEAN
MERN
Rust
Spring
Hibernate
Liquid
SASS
REST
Spring
React
Angular

A-Form built with Angular Reactive Forms

Nov 02 2023

I built a reusable component module to streamline the creation of Angular Reactive Forms

Angular Reactive Forms are a way to manage and validate form inputs in Angular applications. They provide a more programmatic and flexible approach to handling forms compared to Template-Driven Forms, which rely on two-way data binding. Reactive Forms are a powerful and versatile way to work with forms in Angular applications.

Reactive Forms offer a more structured and maintainable way to work with forms in Angular applications, particularly in complex scenarios with complex validation requirements or dynamic form elements.

To use Reactive Forms in an Angular application, you need to import the necessary modules, create a form model using the FormBuilder, define your form controls and validation rules, and then bind the form controls to HTML elements in your template using directives like formControlName.

My AForm Module allows you to skip the process of importing the dependencies and writing a Reactive form by providing a data object to the AForm component.

For Example:

Template:

Try it on Stackblitz
more...

NgRx Table

Aug 07 2023

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:

Edit on Stackblitz
Open in browser
more...

Take a PDF and pass it on

Jun 20 2023

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:

Stackblitz
more...

How you say

Jun 20 2023

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.

Stackblitz
more...

Todo: Use Angular Material more

Jun 15 2023

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.

Check it out on Stackblitz
more...

Turn the Page

Jun 08 2023

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.

more...

Typeahead within a dropdown within a dropdown within a dream

Jun 08 2023

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.

more...

Fun With Numbers

Jun 01 2019

See the Pen Fun With Numbers by jonclawson (@jonclawson) on CodePen.

React Version

See the Pen React with Numbers by jonclawson (@jonclawson) on CodePen.

Angular VX

See the Pen Angular 6 starter by jonclawson (@jonclawson) on CodePen.

I had some free time last Saturday, so I decided to play with d3.format() and created an AngularJS number filter for formatting numbers in common formats you might see on a website or application. This is what I came up with.

Just to be fair, I decided to make a React as well as an Angular 6 version too.

D3.js (Data-Driven Documents) is an open-source JavaScript library for creating dynamic and interactive data visualizations in web browsers. It allows developers to bind data to Document Object Model (DOM) elements and then apply data-driven transformations to create complex and customized visual representations of data.

Key features and concepts of D3.js include:

Data Binding: D3.js enables you to bind data to DOM elements, associating data values with visual elements like SVG shapes, HTML elements, or Canvas graphics.

Data-Driven Transformations: D3.js allows you to apply data-driven transformations to manipulate the visual properties of elements, such as position, size, color, and shape.

SVG and Canvas Support: D3.js works with Scalable Vector Graphics (SVG) and HTML Canvas, giving you flexibility in choosing the appropriate rendering technology for your visualizations.

Selections: D3.js provides a powerful selection mechanism that allows you to select, filter, and manipulate DOM elements based on data conditions.

Data Joins: D3.js supports data joins, where you can efficiently join data with existing DOM elements or create new elements based on data.

Transitions and Animations: D3.js allows you to create smooth transitions and animations to enhance the visual experience of your data visualizations.

Scales and Axes: D3.js provides scale functions to map data values to visual attributes, such as positioning data on axes or determining the size of elements.

more...

Measuring Up

May 09 2018
Measuring Up

Measurabl is a software platform designed to help organizations manage and report on their sustainability and environmental, social, and governance (ESG) performance. It provides tools for collecting, analyzing, and reporting data related to sustainability initiatives, energy usage, water consumption, greenhouse gas emissions, and other key metrics.

For the past 6 years I spent with Measurabl, I led the upgrade of a web application to a modern framework with a custom build with new dependencies for theming, internationalization and deployment chosen and implemented by me. Over the years, I directly engineered a library of reusable presentational components such as tables, forms, maps and charts which I used in multiple premium subscription features of the application. Additionally, I integrated many 3rd party services into the app with internationalization, reporting and deployment/debugging technologies. 

In collaboration with the development team, we developed a web application and optimized the quality and efficiency of the CI/CD process. With a passion for building rich UI frontend applications and efficient APIs and proficiency in software technologies has allowed me to bridge the gap between technical and non-technical audiences. Resolving client demands and simplifying technical issues.

One of the premium subscription features I engineered was the Physical Climate Risk Report. This report required a client side component base UI to communicate with a REST API to render climate risk data as a report for the customer's portfolio. The UI report consists of filters to refine the results to specific climate risks and locations with the results produced on a page with charts, tables and a maps. There is also a PDF export rendered on the backend server with additional charting libraries.

Measurabl
more...

MEAN Stack

Aug 09 2017
MEAN Stack
MEAN Stack
MEAN Stack
MEAN Stack

My MEAN Stack App

Here is a personal project of mine. It is a MEAN stack app with Angular4. The purpose of this app is right now is to demonstrate the foundation of any app performing authentication, user management, content management complete with custom fields and custom content forms. It is sort of a MEAN Stack CMS if you will. I intend to give it some purpose and publish it to the app store. For now it is a demonstration of the type of coding I have done with past projects that I am not allowed to show off. 

The MEAN Stack is a popular open-source web development stack that consists of four main technologies: MongoDB, Express.js, Angular, and Node.js. These technologies are combined to create a full-stack JavaScript development environment for building dynamic and modern web applications.

Here's a breakdown of each component in the MEAN Stack:

MongoDB: MongoDB is a NoSQL database that stores data in a flexible, document-based format known as BSON (Binary JSON). It is designed to handle large amounts of unstructured or semi-structured data and is particularly well-suited for applications that require scalability and real-time data updates.

Express.js: Express.js is a lightweight web application framework for Node.js. It provides a set of features for building web servers and APIs, handling routing, managing middleware, and interacting with databases. Express.js simplifies the process of creating server-side logic and handling HTTP requests and responses.

Angular: Angular is a popular front-end JavaScript framework for building dynamic and responsive web applications. It provides tools and features for building single-page applications (SPAs) and offers a component-based architecture, dependency injection, data binding, and other advanced features for creating rich user interfaces.

https://github.com/jonclawson/mean-app
more...

script