ESLint parsing (in React)

Note: I use VS Code. I just completed creating a new custom workflow for React which included support for CSS Modules, SCSS, and image imports. I use ESLint as my linter, went full throttle with an extended configuration as well as adding a babel-eslint loader in my webpack.base.config.js. I added a custom lint: eslint . script in my package.json. I found, however, when I ran the npm run lint script after a production build, the script crashed, and some strange errors showed up in the Terminal ... Continue Reading

The New Babel 7 Config

Update December 3, 2018: There were some issues along the way due to breaking changes in Babel 7 which affected Jest, React, and ESLint. Unless you are using create-react-app, your workflow might have to be adjusted depending on what support you want to provide in any given application. I have brought all resources together in the repository for the second edition of my custom React Workflow on Github. Please visit issues to learn more. For the last day or so, I have been working on making Jest ... Continue Reading

The Jest Side Effect

Update December 3, 2018: I found the solution to this issue and wrote an article about it last night which I published this morning entitled The New Babel Config. I have brought all resources together in the repository for the second edition of my custom React Workflow on Github. Please visit issues to learn more. In my last post, I discussed the changes I had to make in my Jest configuration so that Jest could mock out image imports in my React components. Then my Jest tests would pass. I made ... Continue Reading

Importing Images in React 2.0: Jest (and Babel 7)

Note December 3, 2018: There were some changes I had to make after adding support for image imports into React because it caused “side effects”. Please visit my article entitled “The Jest Side Effect” and “The New Babel Config” to get the whole picture. There were some issues along the way due to breaking changes in Babel 7 which affected Jest, React, and ESLint. Unless you are using create-react-app, your workflow might have to be adjusted depending on what support you want to provide in any ... Continue Reading

My updated custom React workflow (2nd edition) is here

Update December 3, 2018: There were some issues along the way due to breaking changes in Babel 7 which affected Jest, React, and ESLint. Unless you are using create-react-app, your workflow might have to be adjusted depending on what support you want to provide in any given application. I have brought all resources together in the repository for the second edition of my custom React Workflow on Github. Please visit issues to learn more. Some of you may know that I created a custom workflow last ... Continue Reading

When a Bare Bones Automated JS Workflow Makes Sense

Sometimes we have JavaScript projects which don't need workflow tools such as Gulp, Grunt, Browserify, Webpack, and the like. But we want to be able to simplify our lives with a simple automated workflow. Right now I am working on updating my React workflow to reflect the changes that have taken place in React, Webpack, and Babel. I am using the reveal.js presentation deck, and I wanted to be able to quickly and easily deploy my presentation to gh-pages. I didn't want to integrate some ... Continue Reading

The Importance Of ESlint (And React)

Please also visit my post entitled ESLint parsing (in React). ESlint (or some other code formatter) is very important in (code) development. I have been using it for JavaScript development for a very long time. When using Create React App, I depended on its code formatting suggestions, and took built in code formatting for granted. Then I kind of slipped lately because I use my own custom React workflow. I was using ESlint, but noticed recently that there was something wrong with my ... Continue Reading

A New React Workflow With React 16.6 and Webpack 4+

To view the second edition of my custom React workflow, please visit the react-workflow-updated-2018 repository on Github. I just finished updating the first iteration of my React workflow to reflect changes in React 16.6 and Webpack 4.3.0. A lot has changed since last year when I put my last workflow together and documented it. Now it's a matter of updating that documentation. I am starting that today! What prompted me to start sooner than I expected was the following article shared on ... Continue Reading

The Importance Of Adapting To Change Quickly

Lately I had been focusing more on the backend of web development. Recently, I started revisiting some of the front end projects I had created some time ago. Some were even from more than two years ago! One static app in particular, no longer even worked locally or remotely (for different reasons). Looking on it, I found that Front End development can be extremely workflow heavy. In fact, it usually is, if there is anything of any import going on. But with knowledge of the big picture, one can ... Continue Reading

Implementing ES6 Modules Without Webpack or Babel

ES6 Modules have been around since ECMAScript 2015 (aka ES2015, ES6). When they were first introduced, we transpiled them somehow to ES5 via creation of a single bundle.js file. This was usually done with npm module bundling tools such as Browserify or Webpack. ES6 modules have been fully supported in Chrome since version 65. So why do we still get errors if we try and use the import/export keywords to import or export modules in JavaScript files? Even though ES6 modules ARE fully supported ... Continue Reading