How to obfuscate or minify react javascript source code?

First of all, what is obfuscation of javascript code?

Obfuscation is the deliberate act of creating obfuscated code, i.e. source or machine code that is difficult for humans to understand. It is something similar to encryption however machine can understand the code and able to execute the code.

For example -- Original code:

function hello(name) {

console.log('Hello, ' + name);

}

hello('New user');

After Obfuscation:

eval(function(p,a,c,k,e,d{e=function(c{returnc};if(!''.replace(/^/,String)){while(c--){d=k||c}k=[function(e){return d[e]}];e=function({return'\\w+'};c=1};while(c--){if(k{p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k)}}return p}('3 0(1{2.4(\'5,\'+1)}0(\'76\');',8,8,'hello|name|console|function|log|Hello|user|New'.split('|'),0,{}))

What is minifies source code?

Minification is performed after the code for a web application is written, but before the application is deployed. When a user requests a webpage, the minified version is sent instead of the full version, resulting in faster response times and lower bandwidth costs. Minification is used in websites ranging from small personal blogs to multi-million user services.

Minification also a type of obfuscation here empty spaces will be removed and variables will be renamed.

React minifies the code during the build and generates source maps. JS ends up being sort of obfuscated as a byproduct of minification, not because of secrecy (well, that too, to some extend). That way, the end users are able to load scripts faster than if they were not minified, and you (and everybody else) get to navigate around original code when you (or they) open Developer Tools.

If you take a look in build/static/js directory after the build, there are pairs of .js and .mapfiles. JS files are loaded with your website, and .map files are loaded on demand, when Developer Tools are opened.

To disable sourcemap generation, run your build with GENERATE_SOURCEMAP environment variable set to false.

GENERATE_SOURCEMAP=false npm run build

or

GENERATE_SOURCEMAP=false yarn build

or make it part of build script in package.json

  {
    …
    "scripts": {
      …
-     "build": "react-scripts build"
+     "build": "GENERATE_SOURCEMAP=false react-scripts build"
    }
  }

If you omit the SOURCEMAP generation, .map files will not end up in production, and your original source code will not be available for anyone (including you).

How to wait for a few seconds then redirect to another page in React

It took me a bit of thinking to make the redirect work smoothly. This is the use case in my react app, users can look at the course details info, and attempt to register a course, if user doesn't log in yet, the registration page should redirect user to a login page, after display a message that user needs to login to register for 5 seconds. Here is what we need to do:

state = {
    redirect: false // add a redirect flag
};

componentDidMount() {
    // only change the redirect flag after 5 seconds if user is not logged in
    if (!auth) {
        this.timeout = setTimeout(() => this.setState({ redirect: true }), 5000);
    }
}

componentWillUnmount() {
    // clear the timeer just in case
    clearTimeout(this.timeout);
}

render() {
    // this is the key:
    // 1. when this is first invoked, redirect flag isn't set to true until 5 seconds later
    // 2. so it will step into the first else block
    // 3. display content based on auth status, NOT based on redirect flag
    // 4. 5 seconds later, redirect flag is set to true, this is invoked again
    // 5. this time, it will get into the redirect block to go to the sign in page
    if (this.state.redirect) {
        return <Redirect to="/signin" />;
    } else {
        if (!auth) {
            return (
                <div className="center">
                    <h5>You need to login first to register a course</h5>
                </div>
            );
        } else {
            return <div>Registration Page</div>;
        }
    }
}

ShuyanOnline project update: Now can register courses

Student now can browse course details, select one or more courses to register. Registration information is saved into firestore.

I'd like to implement email notification next. Technologies used:

• nodemailer at https://nodemailer.com/about
• cors at https://npmjs.com/package/cors
• cloud functions at https://cloud.google.com/functions
• Cross-Origin Resource Sharing: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

I will make a course out of this project, simplify the explanation of a lot of the stuffs teens can understand and follow. Source code will be open and available to my students learning programming with me :)

Stay tuned.

Adding simple animation to webpage

Today, I added SVG animation to shuyanonline.com

It only takes half an hour to do this animation:
1. Create the shapes and texts with Figma (Free);
2. We only need HTML and CSS for this effect;
3. I alslo added a SetTimeout function to show the "Enter >>" link when the animation about to complete.

shuyanonline.com is now LIVE!

Yay!

I just got my own domain www.shuyanonline.com, just couldn't wait to publish the app to the domain.

The app still has a lot to enhance and add, but I feel "it is never too late to have your own domain and build your own website" :)

I will continue to build the app ( along with some of my students ).

Cheers!

The VS Code extensions I used in the shuyanonline app

The following is the list of VS Code extensions I used for the shuyanonline.com project:

1. Bracket Pair Colorizer
2. ES7 React/Redux/GraphQL/React-Native snippets
3. Git History
4. Live Server
5. Prettier - Code formatter
6. SCSS IntelliSense
7. Sublime Babel

 With the proper extensions and tools, productivity can increase significantly. Keep exploring....

Initial version of the shuyanonline React app

I decided to create a React app for my personal website, that would promote the web development/programming courses I designed for kids/teens.

As of today, the initial version is test deployed at: https://shuyanonline-dev.firebaseapp.com, the app has/allows:

• Introduction about myself
• Show Structured courses by levels with description and details
• Allow users to Sign up and Log in to the website
• Allow admin (myself) to manage course (create, update, delete) courses

To Do's:

• Add contact/subscription forms
• Add email notification feature
• Add resources component

How I build the app and tricks and tips I noted through the app development will be converted to some course content as practical knowledge.

Technologies/Knowledge/Tools used so far in the app:

• HTML
• CSS
• Materialize CSS
• React
• Redux
• Firebase Function
• Firebase Firestore
• Firebase Hosting
• Git/Github
• VS Code (w/ various extensions)