Diego Díaz

A cross-platform React/Tauri exercise app. Using an AWESOME-APP seed, I replaced native web components with Next.js/React and created a TODO app. I connected and extended the back end in Rust in order to enhance project/task relationships before data reached the front end. The app's UX makes sure the user is always in the loop (no dead ends).

Angular 5 exercise with Spotify API to bind and unbind playlists to a user.

React/Redux-Observable exercise.

Boilerplate for MEAN stack with Gulp tasks to compile files from source into development and production environment.

- Super fast, combining Sass and CSS from Node modules and JavaScript into a single file.
- Compresses every image (requires TinyPNG API key) and SVG.
- Angular templateCache system.
- Bootstrap 4 alpha (6) with new and improved Flex grid.
- Gulp runs the Express app with LiveReload (only for development).
- Form sent to the API with server-side validation and nodemailer integrated.
- Build process gets the development environment and compresses it for easy uploading.
- CSS minified and JS uglified.
- Different from MBAS, this one is not server-side rendered before Angular rewrites the DOM.

This project was intended to create a front-end boilerplate taking advantage of Middleman rapid prototyping schema and its core language (Ruby), enhancing it with Angular and Sass. It was closed when Bootstrap 4 was super alpha and their flexbox implementation was poor. MBAS is still super useful for SEO due to elements written from the compiled version, and Angular only rewrites the DOM afterwards for any missing content.

This code serves the purpose of efficiently handling the color specifications outlined in the brand books of important clients. Each color is assigned specific values for properties like background color, color (text), border (solid 1px), and border color. To streamline development and maintain flexibility, this code generates classes for each color, allowing for easy assembly and customization. Furthermore, the code incorporates support for various element statuses and pseudo-classes, including :hover, :focus, :checked, :active, :first-child, and :last-child. By leveraging this approach, the goal is to expedite development processes while accommodating dynamic adjustments based on the brand book's color variables. Additionally, a color map function could be implemented to provide alternative ways of accessing and utilizing the color mappings.