Front End Libraries
The following are details outlying the final projects for the Front End Libraries certification from FreeCodeCamp.org
The specific libraries covered in the course work include Bootstrap, jQuery, SASS, React and Redux. Original projects are available as Pens on CodePen.com and include the certification tests used to validate each project. Modified versions of each project exist within this space and are viewable at Github.
This course pushed students to use Bootstrap for layout and responsive design. I made the effort to use Bootstrap in the originals, as you can view from the linked Pens. However, I found that CSS FlexBox much intuitive and easier to use. So as I adapted the apps so they could included on this page I refactored away from bootstrap to plain FlexBox.
Please consider contributing to FreeCodeCamp.org so it may continue to provide free access to educational material for software development. I really believe in their mission. What's more, they are a 501 3c so your donation is tax deductible.
The objective for this project was to build an app that could retrieve quotes from a remote API and display it in an App. In so doing using the React state management to update the text and author. The project also provided a user with a single button to retrieve new quotes.
This was the first project for the Front End Libraries certification. The work is pretty simple. I elected not to use Redux for any state management. The most difficult part was recalling how to use jQuery to make async API calls. I did not use any promises or async/awaits in this project (that came later). I also began to scratch the surface with Bootstrap though not to any significant degree.
Because of the simplicity of the project I spent more time in styling and discovering different ways to manage that styling. In my original project I used react state to update the style elements individually to change the theme color. In later projects I adopted a different approach of using CSS variables and classes to represent theme settings and use the React state to change to different theme classes in the parent container. This has the benefit of not having to modify style in multiple locations.
Resources:The Markdown Editor is an app that allows a user to enter markdown text in an editor window and see the HTML rendered results in a preview window. My understanding of React had expanded greatly through this project. Some concepts that I drilled into were controlled components and creating reusable components (see my Windowing capability).
Probably the most challenging aspect of this project was designing it for both Mobile and Desktop. I think editors in general are not a good use case for apps on mobile devices because of the limited working area. I think I made a good compromise in design for smaller viewports. A future redesign might move to a tabbed to facilitate easy switch between edit mode and preview mode.
Initially I just used the React state management for most of the interactivity, and later refactored the project to use Redux. It was during this period that I extracted out the expand/shrink functions out of CSS and moved it into the Redux state machine cycle. I had the idea that I could dispatch an event on one window that all windows would observe, then pass a state object that either expands the window or hides the window (when maximizing), or puts all the windows back to the original state.
WindowComponent = connect(
function mapStateToProps(state, ownProps){
let fullSize = state.windows[ownProps.id].fullSize;
let styleClass = "";
if(!state.windows.fullSize){
styleClass = "window col-md-" + state.windows[ownProps.id].width
}else{
if(fullSize){
styleClass = "window col-md-12"
}else{
styleClass = "window windowHide"
}
}
let toReturn = {
width: state.windows[ownProps.id].width,
fullSize: fullSize,
styleClass: styleClass
}
return toReturn
},
function mapDispatchToProps(dispatch){
return{
resizeWindow: (id, width) => {
dispatch(createResizeAction(id, width))
}
}
}, null, {forwardRef: true}
)(WindowComponent)
This is a fun app that lets a user play a sound engineer. The idea is to provide a set of 9 sounds tied to buttons that a user can press to play the noise. Some of the requirements for completion include using the audio html tag and its functions. I went beyond the minimum requirements for the project and built in two sound banks that could be switched back and forth. I also did some fun design work implementing my own toggles.
When I first started working on this assignment I still hadn't implemented any state management with Redux. One of the criticisms I have of the course work for this certification is that though it covers Bootstrap, React, Redux, and SCSS, the test cases never validated that these technologies were actually in use in the assessment of the projects. It was a simple matter to write simple React apps, manage state with React state and props. It was at this point that I committed to implementing Redux in the rest of the projects and to back track and implement it in previous projects to help cement anything I learned.
Initially I struggled to understand the API based just on the information within the course. For instance, the course work mentions the two functions mapStateToProperties, and mapDispatchToProperties in relationship to connect but never covered why one would write those, or why one not write those. It wasn't until my final project and hours of reading that I learned that mapStateToProperties has a direct affect in rendering cycles within react and that to reduce render cycles one should only return the absolute minimum amount of data for each function AND that I should check for no change state and return the original objects and not copies of the objects.
Resources:The fourth project involved writing a calculator app. The project requirements diverged from what I thought would be normal operating, particularly around the handling of negation and subtraction. As someone new coming into software development for the first time, this project was a great example of the divergence between Product and Engineering and highlighted the importance of a close working relationship between the two disciplines.
From a technical perspective I really enjoyed using Redux for state management in this app. What I appreciated most was the elimination of the need to do prop drilling. I was able to subscribe each button in the calculator to Redux and dispatch actions at the button level and allow Redux to process each dispatch centrally and update the state. The registers as subscribers to the Redux store only updated on the change to a single property within the state store minimizing the rendering cycles.
Resources:The final project involved building a Timer that implements the Pomodoro Technique. Wikipedia defines the Pomodoro Tehnique as :
... a time management method developed by Francesco Cirillo[1] in the late 1980s.[2] The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks. Each interval is known as a pomodoro, from the Italian word for 'tomato', after the tomato-shaped kitchen timer that Cirillo used as a university student.[3][4]
It was in this project when the Redux API finally clicked for me. The breakthrough came when I was reading about Higher Order Components (HOC). I could see that the React.connect method was an example of creating a HOC, but what struck me was that this was just a manifestation of the Decorator Pattern which I have used in Java It was the result of this that I was able to use the connect method to create HOCs that I could configure through the state object. Below is an example of one such HOC.
const TimingButton = (props)=>{
let className = "fa-"+props.label+"-circle"
return(
>button className="button lengthButton "
id={props.name}
disabled={props.timing}
onClick={props.action}>
>i className={"fas " + className}>>/i>
>/button>
)};
const SessionDecrementButton = connect(
state =>({timing: state.timing, label: "minus"}),
dispatch => ({action: () => { dispatch({type:DEC_SESSION})}})
)(TimingButton)
const SessionIncrementButton = connect(
state =>({timing: state.timing, label: "plus"}),
dispatch => ({action: () => { dispatch({type:INC_SESSION})}})
)(TimingButton)
As you can see the TimingButton is wrapped by the HOC generated by the connect function which ties a specific dispatch to the clicking of the button. In this way I was able to create a generic button component, the TimingButton, that I could use to generate the different timing buttons I needed simply by using the properties within the Redux store to populate their specific text.
Resources: