Main navigation

Jest, React and mocks

I use Facebook's Jest to test my React applications. Yesterday, I ran a test to make sure that the changes I made to my Work component passed in my Portfolio React app. It did not! But as indicated in the iTerm2 console, it was not because of any errors in the Work component. It was because I am using a .pdf file in my About component, and Jest does not take kindly to it. [crayon-5a31e433148a7876466020/] I include it in my webpack configs so that webpack knows to load ... Continue Reading

Importing images in React

As some of you who are following my posts may already know, I have been working on a React version of my Front End Developer Portfolio. As much as I love my Jekyll version, I wanted to try new things. I also wanted to get going on my own projects using React while continuing my deep dive into various React workflows. I'll be getting into the various changes I made to my developer toolkit related to the app's workflow in other articles. Here I just want to talk about what I had to do to make ... Continue Reading

React workflows update 1

React Workflows Presentation My React Workflow journey did not stop with my presentation on the topic the other day. I am working on a new rendition of my portfolio site using React, and while working on it, I checked another application I have hosted on gh-pages, and noticed that it did not have production quality code. I made the necessary changes to my webpack config, splitting my one original config there into two: webpack-dev.config.js and webpack-prod.config.js. And then I updated them to ... Continue Reading

Flexbox sticky footer and React

Currently I am working on a React version of my portfolio site. I like my Jekyll version, but wanted to compare UX between React and Jekyll. I also wanted to add animation and interactivity which were not present in my Jekyll site. I came across a design challenge pretty quickly into the project. The "raised footer" issue. Pages which had little or no content meant a footer which failed to stay grounded to the bottom of the page. It was time to add the Flexbox "sticky footer" solution developed ... Continue Reading

I gave my first presentation tonight

Tonight I gave my first tech presentation (ever), and it was about creating your own React workflow without using create-react-app. I was nervous at first, but then after a minute or two, I relaxed and rode with it. 17 minutes into it, I was signaled that I only had 5 minutes left, and I still had 11 minutes to go. I had timed it quite a few times, and brought it down to 28 minutes. Yikes! Well, I was as cool as a cucumber and skipped part of it to move onto the section on configuring POSTCSS ... Continue Reading

requestAnimationFrame and polyfill in React 16

If you read my previous post, "My first time using React 16.0", you know that I got the following warning when I typed npm run test in Terminal: [crayon-5a31e433165f3759751613/] Notice something different? [crayon-5a31e433165fd682453241/] The React Polyfills link took me to the gist on Github entitled "React 16 JavaScript Environment.md". There, I learned that React 16 depends on the collection types Map and Set. And, that if developers are supporting older browsers and devices which may ... Continue Reading

My first time using React 16.0

Yesterday I started working on a new React project which I am calling for the time being React Universal Blog. I set up my basic workflow, directory structure, and files. I set up for Jest testing, initially mocking out stylesheets and images to make sure everything was working properly. Later I'll switch over to mocking CSS Modules, because I use them with POSTCSS. It's not necessary to do that unless you intend to use Jest Snapshot Testing, and I do! I really want to check it out, and it just ... Continue Reading

removing caps from css headers

I was wrapping up my React Workflows without Create React App presentation using reveal.js for the ReactNYC meetup this Thursday, September 28, 2017, and was not pleased with the way some of my slide titles came out. Many of them were made up of code, and they looked awfully funny all in caps! I had never thought about changing the styling of css headers before. I just passively accepted that headers were in caps. But working on this presentation got me thinking, "There just has to be a better ... Continue Reading

My first tech presentation

I'm giving my first technical presentation @ReactNYC meetup this Thursday, September 28, 2017. 😅 And I'm using reveal.js for my slide presentation. The subject is "React Workflows without Create React App". I'm trying a fun and new approach which won't be revealed until the presentation itself, and people will be able to continue referring to it after the presentation is over! I'm sharing the stage with some really cool speakers (and topics): Christian Cho and Rocky Meza of Everwise, ... Continue Reading

Deploying to gh pages with git subtree

So I just completed a todo app the other day using React. This was the second time I followed the course "Build Your First Production Quality React Application" on egghead.io. The first time I followed the course exactly, using create-react-app. However, I kept on encountering errors in the console. Probably some of them were due to errors on my part, but some definitely related to create-react-app. And the thing is, I wasn't able to figure out what the issue was without running the eject ... Continue Reading