174: Canva

 Today I used Canva to create an engaging social media post as part of a content strategy for a small business. Canva is a design suite with a huge amount of templates that you can edit. With tools like Canva any developer can have good looking graphics even without having a professional designer. I'm interested in using Canva more and seeing how it compares to Figma. 

173: SVGs

 Today I began working on a little portfolio site using Codux. For the intro section, I wanted to have a nice red line underneath my title. I achieved this using an SVG from an online generator. SVGs are defined using a series of vectors that map out the lines and shapes of the image, unlike traditional bitmap raster graphics like JPEG which are defined as a series of pixels. This allows SVG to scale to any size without loss of quality. For this reason, unlike JPEG or PNG embedded images from a source file, SVGs can be defined entirely in your HTML with vectors. This is accomplished using the <svg> tag in your code, along with things like <path> , <defs> and <linearGradient>. This allows us to create all kinds of graphics that can be written directly into our apps' source codes, which the user renders unto their browser at any resolution.

172: Firebase Funtions

The Firebase backend as a service allows developers to quickly create viable products. One powerful tool is the serverless function, which allows your app to make requests to run code in a Node environment. These functions are built a combination of the Firebase website console and code written utilizing the Firebase Functions node package. I've started working on a little implementation with SendGrid to send emails based on events in the React app frontend. 

171: Codux

 I saw a video a video about a visual IDE for React called Codux which I downloaded and tried out. Styling an app is always the most difficult and frustrating part for me and so far I like the experience with Codux. It doesn't seem any faster yet, but maybe as I get more adept with the editor I'll be able to create good looking UIs quickly within the environment. All the business logic of the app is still written in code using Typescript. 

170: Lottie and Framer Motion

 Eye catching graphics and animation create a memorable experience and can help drive user conversions. Lottie and Framer Motion can both provide this in a React app. Lottie is a library for vector graphics and animations developed by AirBnB. Framer Motion allows a developer to create animations and transitions within a React app. With these two libraries we can create lively pages with micro animations to drive the user experience forward. 

169: Firebase & React

 Combining Firebase with React allows a single developer to quickly create full stack applications. The React frontend interacts with the Firebase backend using a package of hooks. With these the application can query the database and write to it. The frontend will re-render any time there's a change to the Firebase database, so this combo is perfect for all kinds of applications with real time data. 

168: Firebase

 I want authentication in my app so I need some kind of backend. I started learning about Firebase. Firebase has a real-time database which allows mobile apps to update quickly in response to changes in data. The cloud server functions also allow server side code to be ran in response to events triggered by the application. Seems like a good thing to being learning.

167: Debugging Context

 I encountered a strange bug in my app. After clicking a specific crypto, the app navigates to the coin's page properly and renders the name, icon, and price chart. However, the current price and marketcap would not show. Changing the currency in the navbar will succesfully update everything, so this bug only existed in the initial load. The fact that the coin name loaded successful means that the useParams hook was successful pulling info from the URL, so that wasn't the issue. The coin would also show its market dominance rank, so the API seemed to be working fine. More puzzling was the fact that the dollar symbol showed ($) on the price area, so it seemed like the currency object in context was being passed properly as well. I used the react dev tools to navigate to my price chart component and investigate the object it received from context and found the issue: the initial value for the context was set to USD in all caps. The capitalized string was not valid in the object returned by the API, so those lines never rendered. The bug was fixed and the price renders properly now on the initial pageload. 

166: Chart JS p2

 Today I parsed some data from an API and used is as the labels and dataset for a dynamically generated chart with ChartJS. More to come.[

165: Chart JS

 Today I started learning some Chart JS. It's a powerful library for all kinds of data visualization on web pages and as a React library. Looking forward to adding some charts to the demo app I'm making currently.

164: MUI Breakpoints

 A modern responsive web app will render appropriately whether its viewed on a desktop or phone or anything in between. This doesn't just resizing the elements. but also rearranging the order of components on the page so the visual design and user experience are pleasing on any screen. Material UI has certain default screen size values which can be used conditionally when rendering your app. Style values within the component's sx prop can themselves be defined as an object who's key values correspond to your screen size breakpoints. This allows us for example to have a responsive flex direction that will align or stack the items on screen depending on whether the page is viewed on a computer or phone screen. 

163: Pagination

 The demo app I'm creating has a section where the API returns a long list of data that when rendered into a table will scroll on and on basically forever. To make this section usable we need pagination to render our table into separate pages on a navigable list. I accomplished this by importing the Pagination component from Material UI and building one in the page to create a good looking interface to select your page. Like other controlled inputs this is connected to a React state. The state is then used in conjunction with javascript's slice() method to render the page of the table accordingly. The number of pages in the pagination is also dynamic, and is derived from a the number of current search results from the search bar. As the search becomes more broad or narrow the number of pages of results adjusts as needed.