DEV Community: Alvin Chui

Inventor Users! I Built an Add-in to do Amazing Things - DesignX

Alvin Chui — Mon, 11 Mar 2024 09:09:42 +0000

Hey fellow Inventor users,

If you are looking for ways to improve your design workflow, there is DesignX on the Autodesk App Store. As the creator, I can assure that you will be amazed how much it can help. However, with all the SEO and AI stuff nowadays, it wasn't easy to let people know about it. The struggle with the SEO online is very messed up, so I wanted to reach out directly to the Inventor community.

Here's what DesignX aims to do:

Automate the Mundane: Let DesignX handle those time-consuming, repetitive tasks that drag on projects. Focus on what you do best – design!

Streamline Your Workflow: DesignX is designed to make your workflow smoother, helping you move seamlessly between tasks and projects. Say goodbye to those frustrating inefficiencies.

Boost Productivity: Imagine finishing projects faster with less effort. DesignX could be your key to unlocking new levels of productivity.

You can find the extension on App Store - DesignX

Is DesignX the answer? I don't know yet!

This is where the Inventor community, come in. I'm humbly reaching out to see if DesignX can actually be helpful. Maybe it can save you some time too!

Here are some videos which showcase what DesignX can do: DesignX - YouTube

For Developers or Those with Curiosity

Some people, especially fellow developers, will be curious for a few things about DesignX application. The following may answer what you want to know.

DesignX's installer is being built and verified by Autodesk. However, users may receive a warning during the download or during the installation since we didn't want to spend $250 USD a year to subscribe for a certificate.
We intended to distribute DesignX for free to the community. However, we have implemented an activation process as a measurement to protect our intellectual property. That is why Inventor users will need an activation code to activate the extension.

Here's what I'd love to know:

Have you tried DesignX yet?
What are your biggest workflow pain points in Inventor?
Any suggestions for improvement?

Let's Discuss and Improve Together!

I'm genuinely interested in creating a tool that benefits Inventor users. So, please share your thoughts and experiences in the comments below.

A Cup of Tailwind CSS

Alvin Chui — Sat, 17 Sep 2022 05:27:05 +0000

As programmers, we love to simplify life. Tailwind CSS is a framework that is created to help programmers from writing a humongous amount of CSS loads while allowing us to style our design in HTML.

However, nothing is perfect. Just like drinking a cup of tea, some people may like Black Tea and some may prefer to drink Green Tea. The post may even be taken down if the author overlooks the idea of Coffee. So, let's not talk about tea and start evaluating the taste.

PROS:

One for All: It makes work easier because one doesn't need to switch between the HTML and CSS Styling. Everything can be done on one page.

Concise CSS Styling: CSS code is simplified into smaller blocks of "index" which can be used immediately in an HTML file.

Robust and Responsive Customization: Tailwind CSS is a responsive and mobile-friendly CSS Framework. It is also open source, providing freedom for customizations.

Others:

Great Community Support: The framework is developed by top-notch engineers. The code is constantly being maintained and updated.
CSS Power Up: One doesn't need to know CSS to use TailwindCSS.

CONS:

Verbose HTML Code: Due to the nature of having everything implemented together, codes may become difficult to read.

Others:

Lack of Styling Components: Some people may want to structure their design in components. Tailwind CSS has a different design workflow.
Learning Curve: Some people hate to memorize vocabulary.

Summary

Great for writers, sad for readers

Secret Message

You can balance code's readability and coding efficiency by using Tailwind CSS only for styling such as hovering effects. Everything else (styling components, positioning, etc.) could remain the same.

Front-End Workflow for Next.js

Alvin Chui — Fri, 02 Sep 2022 23:10:26 +0000

1) Setup

yarn create next-app
# OR
npx create-next-app
# AND
npm i -g create-next-app

2) Pages & Routes

Home
About
Others...

3) Layout Components

Navigation Bar
Header
Footer
Layout

4) Styling

Choosing a Theme
404 Error Page
Responsive Design

5) Database

MongoDB
REDIS
MySQL
Others...

6) Fetching

// Basic Example
import fs from "fs";
import path from "path";

export async function getStaticPaths() {
    const files = fs.readdirSync(path.join("blogs"));

    const paths = files.map((filename) => ({
        params: {
            slug: filename.replace(".txt", ""),
        },
    }));

    return {
        paths,
        fallback: false,
    };
}

export async function getStaticProps(context) {
    const blog = fs.readFileSync(
        path.join("blogs", context.params.slug + ".txt"),
        "utf-8"
    );

    const content = blog;

    return {
        props: {
            content,
        },
    };
}

7) Dynamic Routing

/Content/index.js
/Content/[slug].js

8) Testing

ES6 or ES2016+

# Dependencies
npm install --save-dev eslint
npm install --save-dev eslint-config-next

npm run lint

QUnit

npm install --save-dev qunit

Mocha experience

Matching "Test" file structures

Others...

9) Deployment

Vercel
Others...

OTHERS

# Basic Example
npm i --save-dev next-seo

Optimization

Memory Palace to Next.js

Alvin Chui — Fri, 02 Sep 2022 22:39:37 +0000

Quick Setup

yarn create next-app
# OR
npx create-next-app
# AND
npm i -g create-next-app

Storage:

Node.js
Microsoft Visual Studio Code
NPM (package manager)
YARN (package manager)
Typescript
ES6 or ES2016+

Box:

Github
Vercel