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.

Student Project: Bootstrap

One of my students (rising 8th grader) showed me her project with Bootstrap today:

 

After taking the bootstrap course from me, she is now fluent with CSS & Bootstrap, it only took her 2-3 days to "draw" an online store website.

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!

How To: Permission denied when installing npm modules in Mac OSX

If you installed nodejs from binary installer pkg, the node_modules folder (usually under /usr/local/lib) has ownership to be root:wheel.

What you need to do to resolve this problem is:

• Step 1: Find the path to npm's directory:

          npm config get prefix

                      For many systems, this will be /usr/local.                    

• Step 2: Change the owner of npm's directories to the name of the current user (your username):

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}                       

This changes the permissions of the sub-folders used by npm and some other tools (/lib/node_modules, bin, and share).

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)