Design Community: Shijie Zhou

Top 10 AI Design Tools for Creative Professionals

Shijie Zhou — Sat, 08 Nov 2025 14:59:39 +0000

As a creative designer, what AI design tools are you currently using to speed up your workflow? However, the pace of design has changed. Nowadays, creative teams need to deliver high-quality original work across platforms and touchpoints.

To stay ahead, many creatives and designers are adopting AI design tools to streamline repetitive tasks, enhance creativity, and unlock new possibilities in the design process. Whether you’re crafting social content, optimizing UI layouts, or building brand systems, AI can play a valuable assistant role throughout your entire workflow. In this article, we will share the best AI design tools that designers can explore and use in 2025.

If you are a full-time designer, a freelancer, or a programmer working on design, AI can help you work smarter and create more impactful work. Let’s get started now!

Adobe Firefly Press enter or click to view image in full size

Key Features:

Quickly create visual effects by entering brief text prompts.
Use generative fill to add or remove elements in images for easier editing.
Create stylized text with different visual effects to achieve outstanding typography.
Generate video content from text or visual effects with minimal editing.
Maintain the original style and tone when translating audio and video into new languages.

Adobe Firefly is Adobe’s dedicated AI design tool, designed to help creatives generate high-quality visuals with simple text prompts. Unlike many standalone AI generators, Firefly is closely integrated with the Adobe ecosystem, allowing users to seamlessly switch between Firefly and tools like Photoshop or Illustrator. As one of the most powerful AI tools for designers, it helps you quickly and easily turn your ideas into reality, whether you’re creating social media graphics, product mockups, or visual concepts.

Pros of Adobe Firefly:

Easy to use, especially for those already familiar with Adobe products.
Smooth collaboration with design platforms like Photoshop and Illustrator.

Cons of Adobe Firefly:

Full access requires a subscription to Adobe Creative Cloud.
Limited support for advanced 3D or motion design (compared to other AI tools).

Adobe Firefly Pricing: Subscription options start at $9.99 per month.

Midjourney Press enter or click to view image in full size

Key Features:

Create visual effects using simple text descriptions and explore various artistic variations.
Adjust the output by specifying image style, materials, lighting, and artistic influences.
Access and collaborate in real-time via Discord.

Midjourney is a high-performing AI design tool that helps transform ideas into detailed images. It operates through Discord, where users can input natural language descriptions and receive AI-generated visuals. The platform is easy to use and can produce stunning effects, ranging from surreal scenes to imaginative artistic styles.

Pros of Midjourney:

Generates highly realistic images with detailed control over style and composition.
Provides high-resolution output quickly for fast-paced creative work.

Cons of Midjourney:

Limited free trial, so users must subscribe to continue using it.

Midjourney Pricing: Paid plans start at $10 per month.

Fontjoy Press enter or click to view image in full size

Key Features:

Generate font pairings using an AI-based design tool trained on multidimensional font data.
Adjust the contrast between fonts to meet different design needs.
Preview font combinations with your own text to test visual effects.

Fontjoy is an AI design tool that helps designers easily create visually balanced font pairings. It uses deep learning to recommend font combinations based on contrast and similarity, allowing users to adjust contrast, lock in preferred fonts, and generate complementary matches in real time. As one of the most user-friendly free AI design tools, Fontjoy is particularly suitable for UI and web design projects that focus on consistency and readability.

Pros of Fontjoy:

Recommends font combinations with good contrast and harmony.
Provides an interactive way to explore different typographic options.

Cons of Fontjoy:

Lacks direct export to popular design platforms like Figma or Adobe.

Fontjoy Pricing: Free to use.

Leonardo.AI Press enter or click to view image in full size

Key Features:

Generate images using advanced AI models customized for different artistic styles.
Create animated content from images through an AI-based video platform.
Create detailed 3D textures by uploading models and applying AI-generated designs.
Edit and optimize visual effects directly within the platform using the AI Canvas tool.

Leonardo.ai is a powerful image generation model developed by OpenAI, capable of transforming detailed text descriptions into high-quality visuals. It offers a suite of tools that enable users to easily create images, videos, and 3D textures. Whether you are working on concept art, game assets, or marketing materials, Leonardo.ai can streamline the creative process, allowing you to quickly conceptualize and execute your ideas.

Pros of Leonardo.ai:

Provides a variety of AI tools to support different types of creative projects.
Offers high-quality output suitable for professional use.
Builds a user-friendly interface accessible to users of all experience levels.

Cons of Leonardo.ai:

Advanced features may be challenging for users without experience in design tools.

Leonardo.ai Pricing: Free plan with limited access; paid plans start at $12 per month, unlocking more features and capacity.

DALL-E 3 Press enter or click to view image in full size

Key Features:

Generate images from text prompts with enhanced contextual understanding.
Interactively optimize and iterate images within ChatGPT conversations.
Create images in a variety of styles, including realistic and artistic representations.
Access the model through ChatGPT Plus and OpenAI’s API for broader integration.

DALL·E 3 is a powerful model developed by OpenAI for generating visual effects from descriptive text. It stands out among the new generation of AI design tools due to its seamless integration with ChatGPT through direct conversation. This allows users to interactively optimize images, making the creative process more intuitive and user-friendly.

Pros of DALL·E 3:

Helps users quickly turn ideas into accurate visual effects without design skills.
Easily understands complex and detailed prompts, enabling users to create what they imagine.

Cons of DALL·E 3:

Full access to all features requires a subscription to ChatGPT Plus.

DALL·E 3 Pricing: Available through ChatGPT Plus at $20 per month, with additional API access options.

Luma AI

Press enter or click to view image in full size

Key Features:

Generate videos based on text prompts using the Dream Machine model.
Transform static images into dynamic videos with cinematic effects.
Apply predefined styles and effects to customize visual output.
Utilize APIs for scalable and automated content generation.

Luma AI is a cutting-edge platform that helps creators generate high-quality videos and 3D visuals from simple text prompts and images. Designed for creators in media, marketing, and entertainment, the platform uses advanced AI models to simplify complex video production tasks. With tools like Dream Machine and Ray2, Luma AI enables users to easily generate realistic motions, apply cinematic effects, and customize output.

Pros of Luma AI:

Simplifies video creation by transforming text and images into dynamic visuals.
Provides high-quality, realistic output suitable for professional use.
Offers intuitive tools accessible to both beginners and professionals.

Cons of Luma AI:

Free plan limits video duration and output quality.

Luma AI Pricing: Luma AI offers a free plan with limited functionality, while paid plans start at $9.99 per month, providing higher resolutions and additional tools.

7.RunWay
Press enter or click to view image in full size

Key Features:

Generate videos from text prompts, images, or existing videos using multimodal input.
Utilize AI video editing tools, including background removal, motion brush, and lip-syncing features.
Integrate with other design tools to enhance creative workflow efficiency.

Runway Gen-2 is an advanced AI video generation platform that can transform text prompts, images, or existing videos into high-quality dynamic video content. As video becomes increasingly important in modern design workflows, Runway is gradually being recognized as one of the hottest AI design tools in 2025. It is designed to support everyone from marketers to filmmakers in storytelling, experimentation, and rapid video production.

Pros of Runway Gen-2:

Designed with simplicity in mind, making it easy to use for all types of users.
Facilitates real-time collaboration with team workspaces, enhancing creative workflows.
Cloud-based, allowing access from any device without additional software.

Cons of Runway Gen-2:

Requires a reliable internet connection since it operates in the cloud.

Runway Gen-2 Pricing: Runway offers a free plan with limited functionality, while paid plans start at $12 per month per user, providing higher resolutions and additional tools.

Haiper AI Press enter or click to view image in full size

Key Features:

Generate videos based on text prompts using AI-driven models.
Transform still images into engaging videos with built-in animation capabilities.
Convert existing videos into new styles and effects using the redrawing function.
Make video editing faster and easier with built-in template options.

Haiper AI is an innovative tool that transforms text prompts and visual effects into engaging video content. Designed for creators, marketers, and educators, it simplifies the video production process, allowing users to generate high-quality content without technical expertise. With features like text-to-video, image animation, and video redrawing, Haiper AI meets a variety of creative needs.

Pros of Haiper AI:

Quickly create videos from text or images, saving time and resources.
Provides a versatile tool for various content types, from social media posts to educational materials.

Cons of Haiper AI:

Limited video duration in the free version.

Haiper AI Pricing: Haiper AI offers a free plan with basic features, while paid plans start at $8 per month.

Stable Diffusion 2025 Press enter or click to view image in full size

Key Features:

Create high-resolution graphics from text input with Stable Diffusion.
Generate videos from text or images using Stable Video Diffusion.
Produce music tracks up to three minutes long with Stable Audio.
Deploy models locally or integrate via API for customized workflows.

Stability AI offers a suite of open-source generative models that enable creators to produce high-quality images, videos, audio, and 3D content using simple text prompts. For those seeking the best graphic design AI tool with full control and customizable workflows, Stability AI stands out for its flexibility and open-source accessibility. The platform supports both cloud and self-hosted deployments, catering to the needs of individual creators and enterprises.

Pros of Stability AI:

Handles multiple media formats to support flexible content creation.
Provides flexible deployment options, including self-hosting and API access.

Cons of Stability AI:

Maximizing advanced features may depend on the user’s technical skills.
Some tools and models are still under development and are continuously updated.

Stability AI Pricing: Stability AI offers a free plan for non-commercial use. Paid plans for commercial use start at $20 per month, with enterprise licenses available for larger organizations.

Animaker.AI Press enter or click to view image in full size

Key Features:

Transform scripts into videos using AI automation and scene building.
Create animated characters and automatically synchronize them with voiceovers.
Speed up production with a variety of templates, stock assets, and music.
Enable real-time team collaboration through an integrated editing space.

Animaker AI is a comprehensive platform that makes it easy for users to create animated and live-action videos. Instead of starting from scratch, users can select templates, input scripts, and let the tool handle the tedious work from animation to voiceovers. With a drag-and-drop interface, a large library of pre-built assets, and support for over 100 languages, Animaker easily turns ideas into complete videos in just a few steps, making it one of the most feature-rich AI design tools.

Pros of Animaker:

Enables non-designers and beginners to create videos.
Accelerates the editing process with ready-made templates and AI automation.
Supports multilingual voiceovers to reach a global audience.

Cons of Animaker:

Some features may be limited for users seeking full creative control.

Animaker Pricing: Paid plans start at $15 per month.

Conclusion:
With the AI designing tools are developing in examination level, it become the most useful and creative tools in our daily life. In the way of the speed, flexibility, and the quality of the output can help those creators to produce much more valuable product.

No matter if you look for video generating, text, image etc, all these AI integration user experience design can leverage our productivity into next level.

How to Export All iCloud Note From Macbook to Markdown or Txt File

Shijie Zhou — Sun, 29 Aug 2021 09:23:50 +0000

How to Export All iCloud Note From Macbook to Markdown or Txt File

If you’re using a MacBook to store all the apple notes on your device, how do you migrate all other notes to different applications such as Evernotes, Microsoft Notes, or some other app? Here is the most simple way and safe way to help you ensure all the files and information is transferred.

Download the Exporter from App Store

‎Exporter

Once you download and install, just go-ahead to open the app

Once you download it, you can just click on the export button and it will scan and analyze all the note files on the mac.

You will see all your files under your selecting location.

Now you will see all the files in the mdformat. you can change it to txtif you are not familiar with .md

Congratulation! now you can drag the folder or zip it importing to Evernotes, Bear, Microsoft Notes.

This is not about the promotion but the way to save your time .

Top 10 Plugins to Enhance DevOps in Webpack

Shijie Zhou — Fri, 21 May 2021 01:21:17 +0000

Top 10 Tips for Configuring Automated Plugins to Enhance DevOps in Webpack

Webpack is a packaging tool whose purpose is to pack all static resources. Some people will ask why is webpack needed? Webpack is the cornerstone of modern front-end technology. Conventional development methods such as jQuery, HTML, and CSS static web page development have fallen behind. Now is the era of MVVM and data-driven interfaces. Webpack packs all kinds of new and useful technologies in modern JavaScript development.

Trying to describe webpack can be overwhelming, so I won’t waste everyone’s time. Understand this picture to know the ecosystem of webpack:

1. Loader Lists

**raw-loader: Load the original content of the file (UTF-8)
**file-loader: output the file to a folder, and use the relative URL to refer to the output file in the code (processing pictures and fonts)
**url-loader: Similar to file-loader, the difference is that the user can set a threshold, if the threshold is greater than the threshold, it will be handed over to the file-loader for processing, and when the threshold is less than the threshold, it will return the file base64 format encoding (processing pictures and fonts)
**source-map-loader: Load additional Source Map files to facilitate breakpoint debugging
svg-inline-loader: Inject compressed SVG content into the code
image-loader: load and compress image files
json-loader loads JSON files (included by default)
handlebars-loader: Compile the Handlebars template into a function and return
babel-loader: Convert ES6 to ES5
ts-loader: Convert TypeScript to JavaScript
awesome-typescript-loader: Convert TypeScript to JavaScript, performance is better than ts-loader
sass-loader: Convert SCSS/SASS code to CSS
css-loader: Load CSS, support modularization, compression, file import and other features
style-loader: Inject CSS code into JavaScript, and load CSS through DOM manipulation
postcss-loader: Extend CSS grammar, use next-generation CSS, and automatically fill in CSS3 prefixes with the autoprefixer plug-in
eslint-loader: Check JavaScript code through ESLint
tslint-loader: Check TypeScript code through TSLint
mocha-loader: Load the code for Mocha test cases
coverjs-loader: Calculate the coverage of the test
vue-loader: Load Vue.js single file component
i18n-loader: Internationalization
cache-loader: It can be added before some loaders with high performance overhead, the purpose is to cache the results to disk

2. Webpack Dashboard

When using webpack, especially for a dev server, you are probably used to seeing something very long and difficult to read. However, webpack dashboard helps you to save time from reading the actual configuration:

To install:

$ npm install --save-dev webpack-dashboard
# ... or ...
$ yarn add --dev webpack-dashboard

Adding config to the webpack:

// Import the plugin:
const DashboardPlugin = require("webpack-dashboard/plugin");

// Add it to your webpack configuration plugins.
module.exports = {
  // ...
  plugins: [new DashboardPlugin()];
  // ...
};

3. Webpack Merge

**webpack-merge** provides a merge function that concatenates arrays and merges objects creating a new object. If functions are encountered, it will execute them, run the results through the algorithm, and then wrap the returned values within a function again.

This behavior is particularly useful in configuring webpack although it has uses beyond it. Whenever you need to merge configuration objects, webpack-merge can come in handy.

const { merge } = require('webpack-merge');

// Default API
const output = merge(object1, object2, object3, ...);

// You can pass an array of objects directly.
// This works with all available functions.
const output = merge([object1, object2, object3]);

// Keys matching to the right take precedence:
const output = merge(
  { fruit: "apple", color: "red" },
  { fruit: "strawberries" }
);
console.log(output);
// { color: "red", fruit: "strawberries"}

4. Speed Measurement Plugin

The first step to optimising your webpack build-speed, is to know where to focus your attention.

This plugin measures your webpack build speed, giving an output like this:

To install:

npm install --save-dev speed-measure-webpack-plugin

yarn add -D speed-measure-webpack-plugin

Adding config to the webpack:

const webpackConfig = {
  plugins: [new MyPlugin(), new MyOtherPlugin()],
};

5. Size Plugin

Prints the gzipped sizes of your webpack assets and the changes since the last build.

To install:

Install size-plugin as a development dependency using npm:

npm i -D size-plugin

Adding config to the webpack:

// webpack.config.js
+ const SizePlugin = require('size-plugin');

module.exports = {
  plugins: [
+    new SizePlugin()
  ]
}

6. Hot Module Replacement Plugin

Webpack’s hot update is also called Hot Module Replacement, abbreviated as HMR. This mechanism can replace the old module with the newly changed module without refreshing the browser.

The core of HMR is that the client pulls the updated file from the server. To be precise, it is chunk diff (the part of the chunk that needs to be updated). In fact, a Websocket is maintained between WDS and the browser. When local resources change, WDS will push updates to the browser, and bring the hash when it is built, so that the client can compare with the last resource. After comparing the differences, the client will initiate an Ajax request to WDS to obtain the changed content (file list, hash), so that the client can use this information to continue to initiate a jsonp request to WDS to obtain incremental updates of the chunk.

The subsequent parts — how to deal with the incremental update? Which state should be retained? Which need to be updated? — is completed by HotModulePlugin, which provides related APIs for developers to process for their own scenarios, such as react-hot-loader and Vue-loader uses these APIs to implement HMR.
HotModuleReplacementPlugin | webpack

config.plugins = config.plugins.concat([
 **new** webpack.optimize.OccurenceOrderPlugin(),
 **new** webpack.[**HotModuleReplacementPlugin](https://www.codota.com/code/javascript/functions/webpack/HotModuleReplacementPlugin)**(),
 **new** webpack.NoErrorsPlugin()
]);

7. File Hash

Hash: Related to the construction of the entire project, as long as the project file is modified, the hash value of the entire project construction will change

Chunkhash: It is related to the chunks packaged by Webpack. Different entries will produce different chunkhash.

Contenthash: Define hash according to the content of the file. If the content of the file is unchanged, the contenthash is unchanged

module.exports = {
  entry: {
  app: './scr/app.js',
  search: './src/search.js'
},
  output: {
  filename: '[name][chunkhash:8].js',
  path:__dirname + '/dist'
  }
}

8. CSS Autoprefix

The autoprefixer in postcss can be used to add response prefixes to some properties in CSS3 that need to be compatible with writing, which saves us a lot of time Since it is also a loader, we also need to install it first:

npm i postcss-loader autoprefixer -D

Creating **postcss.config.js **and import into the webpack config:

module.exports = { plugins: [require('autoprefixer')]  }

Adding config to the webpack:

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            }
        ]
    }
}

9. Webpack Bundle Analyzer

Visualize size of webpack output files with an interactive zoomable treemap.

To install:

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

Adding config to the webpack:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

10. Progress Bar Webpack Plugin

To install:

npm i -D progress-bar-webpack-plugin

Adding config to the webpack:

var ProgressBarPlugin **=** require('progress-bar-webpack-plugin');

plugins**:** [

**new** ProgressBarPlugin({      
    format: 'build [:bar] ' + chalk.green.bold(':percent') + '(:elapsed seconds)', clear: false    })

]

At this point, we have completed the basic configuration. But this is not perfect, or sometimes, we will have some other needs. The next article on webpack configuration will introduce some other situations. Thank you for reading.

More content at [https://shijiezhou.com/blog](https://shijiezhou.com/blog)

Build a Simple Todo App with Vue 3

Shijie Zhou — Sun, 21 Feb 2021 02:59:11 +0000

Vue 3 is officially live and most people want to try out the new feature. If you are also itchy to play around with it. Here I create a simple app for you to try on and understand better.
The image below is when developers shifting from Vue 2 to Vue 3 is rapidly increased from Google Trend and the red line indicating the Vue 3 and the blue line is what Vue 2 user actively participate.

Project setup

Install latest vue-cli

npm install -g @vue/cli

Then create the first project by using the command below.

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

Lifecycle Hooks in Vue3

In the new Vue 3, those lifecycle keywords had been changed. However, it still does what you want to achieve. Let me show you the diagram of the lifecycle hook:

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // ... 
    })
    onMounted(() => {
      // ... 
    })
    onBeforeUpdate(() => {
      // ... 
    })
    onUpdated(() => {
      // ... 
    })
    onBeforeUnmount(() => {
      // ... 
    })
    onUnmounted(() => {
      // ... 
    })
    onActivated(() => {
      // ... 
    })
    onDeactivated(() => {
      // ... 
    })
    onErrorCaptured(() => {
      // ... 
    })
  }
}

“If you don’t know where you are going, you’ll end up someplace else.” ― Yogi Berra, former New York Yankees catcher

Plan:

It’s very important to plan out what your app is doing and how does it serves what you expect. Once you know what it supposes to do. It will save you tons of time with coding.

The layout is out there and with some basic components. You can put your creativity to make it look fancy or more organized. Thus, this is for the demo purpose because you can always do a great thing from a small piece. Now let’s start to put some code to create this app.

Talk is cheap. Show me the code. Torvalds, Linus (2000–08–25).

Code:

From your app.js. You create a container file and also put the header.

<template>
  <h1>Vue 3 Todo App:</h1>
  <Container /> 
</template>

<script>
import Container from './components/Container';
export default {
  name: 'App',
  components: {
    Container
  }
}
</script>

<style>
#app {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Navigating to the components folder, and create Container.vue.

<template>
  <div class="container">
    <input
      type="text"
      v-model="msg"
    >
    <button @click="Create">Create</button>
    <TodoList
      :TodoLists="TodoLists"
      :Delete="Delete"
    />
  </div>
</template>

<script>
import TodoList from './TodoList';
import { ref } from "@vue/runtime-core";
export default {
  components: {
    TodoList,
  },
  setup() {
    let exampleData = [
      { id: 1, name: 'cooking' },
      { id: 2, name: 'eating' },
      { id: 3, name: 'dancing' },
    ];
    return {
      TodoLists: ref(exampleData)
    };
  },
  methods: {
    Create() {
      let id = 4;
      id += 1;
      const next = { id, name: this.msg };
      this.TodoLists.push(next);
    },
    Delete(idx) {
      this.TodoLists = this.TodoLists.filter((r) => r.id !== idx);
    }
  }
}
</script>

Until this step, you have a very fast and good project create already. Generate the Todo lists so you can see the render all the lists that you need.

<template>
  <ul>
    <li
      v-for="(todolist, index) in TodoLists"
      :key="index"
    >
      <span class="name">{{todolist.name}}</span>
      <span
        class="delete"
        @click="Delete(todolist.id)"
      >x</span>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    TodoLists: Array,
    Delete: Function
  },
}
</script>

Unbelievable! The app takes you less than 5 minutes to create and you get a simple todo app by experience Vue 3 feature. Yet, this todo app doesn’t require a lot of complex ideas. What you notice is the ref keyword, it is similar to the data . If you have used to React before, it should be familiar by you.
Hope you have enjoyed and learn more about Vue 3. This demo project can also be found on Vue3-Todo.
Reference:
https://v3.vuejs.org/api/application-config.html
https://v3.vuejs.org/guide/introduction.html
https://github.com/vuejs/vue-next/releases/tag/v3.0.0?ref=madewithvuejs.com
https://learnvue.co/2020/03/how-to-use-lifecycle-hooks-in-vue3/

Top 10 Tips to be a Professional JavaScript Developer in 3 Minutes

Shijie Zhou — Mon, 27 Apr 2020 00:34:05 +0000

We have heard the word "data binding" more often in the programming. The key to "data binding" is to monitor the changes of data, but for such an object: let obj = {value: 1}, how should we know that obj had Changed?

1. defineProperty

ES5 provides the Object.defineProperty method, which can define a new property on an object, or modify an existing property of an object, and return the object.

obj: an object
prop: attributes of the object
descriptor: the description of the permission of the object

let obj = {}
Object.defineProperty(obj, "money", {
    value : 100, // Updated value, the default value is undefine.
    writable : true, // The property can only be changed by the assignment operator if and only if the property's writable is true. The default is false.
    enumerable : true, // This attribute can appear in the enumerated attribute of an object if and only if the enumerable of this attribute is true. The default is false.
    configurable : true // The property descriptor can be changed and deleted if and only if the property's configurable is true. The default is false.
    get: () => value; // Get current value 
    set: (newVal) => newVal; // Set current value
});

2. Prototype Inheritance

The simple way to inherit from the parent class, just define the prototype of child class and create a new constant in order to get the parent's value.

function Car() {
    this.brand = 'bmw';
}

Car.prototype.getBrand = () => console.log(this.brand)

function ElectricCar() {}

ElectricCar.prototype = new Car();

const eleCar = new ElectricCar();

console.log(eleCar.getBrand()); 

// bmw

However, there is also a classical way to maintain the pure inheritance from a parent if you need to reuse the child some other places. See e.g.

function Car() {
    this.brand = ['bmw', 'audi'];
}

function ElectricCar() {
    Car.call(this);
}

const carA = new ElectricCar();

carA.brand.push('toyota');

console.log(carA.brand); // ["bmw","audi","toyota"]

const carB = new ElectricCar();

console.log(carB.brand); // ['bmw', 'audi']

3. Call / Apply

Call method calls a function with a given this value and arguments provided individually. See the example below.


const food = {
    value: 'apple'
}

function fruit() {
     console.log(this.value);
}

fruit.call(food); // apple

The same usage of call, apply can achieve the same result.


Function.prototype.apply = (info, arr) => {
      let info = Object(info) || window; 
      info.fn = this;

      const result;
      if(!arr) { result = info.fn(); }
      else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('info.fn(' + args + ')')
    }

    delete info.fn
    return result;
}

4. Memoize Function

Programs often waste time calling functions that recalculate the same results over and over again. This is particularly true with recursive and mathematical functions. A perfect example of this is the Fibonacci number generator. The Fibonacci sequence is a series of integers, beginning with zero and one, in which each value is the sum of the previous two numbers in the series.

function memorize(func) {
  var memo = {};
  var slice = Array.prototype.slice;

  return function() {
    var args = slice.call(arguments);

    if (args in memo)
      return memo[args];
    else
      return (memo[args] = func.apply(this, args));

  }
}

var count = function(a, b, c) {
  return a + b + c
}

var memoizedCount = memorize(count)

console.time('use memorize function')
for(var i = 0; i < 100000; i++) {
    memoizedCount(1, 2, 3)
}
console.timeEnd('use memorize function')

console.time('without memorize function')
for(var i = 0; i < 100000; i++) {
    count(1, 2, 3)
}
console.timeEnd('without memorize function')

5. Symbol

Symbol value can be used to the label or the attribute name of the object, and it promised the same property name

var mySymbol = Symbol();

// FIRST
var a = {};
a[mySymbol] = 'Hello!';

// SECOND
var a = {
  [mySymbol]: 'Hello!'
};

// THIRD
var a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// All of them have the same result but they never equal to each other.
console.log(a[mySymbol]); // "Hello!"

var s1 = Symbol.for("foo");
console.log(Symbol.keyFor(s1)); // "foo"

var s2 = Symbol("foo");
console.log(Symbol.keyFor(s2) ); // undefined

6. Array.from()

From ES6, the [...arguments] has been used rapidly. and how does it come from an array? See. e.g.

function mul(a, b) {
    let args = Array.from(arguments); // [4, 5]
    console.log(args.reduce((sum, cur) => sum * cur));
}
mul(4,5); //9

7. Array.prototype.slice.call()

Arguments cannot call array methods by themselves, it is another type of object, but the attributes are ranked from 0, 0, 1, 2 ... and finally the callee and length attributes. We also refer to such objects as array-like.

function mul(a, b) {
    let args = Array.prototype.slice.call(arguments); // [4, 5]
    console.log(args.reduce((sum, cur) => sum * cur));
}
mul(4,5); //20

8. Sort

Sort one array item at a time, and construct the final sorted array in this way. Assuming that the first item is already sorted, then it is compared with the second item. Should the second item stay in place or be inserted before the first item? In this way, the first two items are correctly sorted, and then compared with the third item (whether it should be inserted in the first, second, or third position?), And so on.

Array.prototype.insertionSort = function() {
    let j
    let temp
    for (let i = 1; i < this.length; i++) {
        j = i
        temp = this[i]
        while (j > 0 && this[j - 1] > temp) {
            this[j] = this[j - 1]
            j--
        } 
        this[j] = temp
        console.log(this.join(', '))
    }
    return this
}

9. Async/Await

ES2018 introduces asynchronous iterators, which are like regular iterators, except that the next () method returns a Promise. Therefore, await can be used with for ... of the loop to run asynchronous operations in a serial manner.

async function increase(array) {
    for await (let i of array) {
         // request to api
    }
}

10. Javascript Key Code

Knowing most of the key code in JavaScript may help you improve the user experience of your web application.

let keyCodeMap = {
    8: 'Backspace',
    9: 'Tab',
    13: 'Enter',
    16: 'Shift',
    17: 'Ctrl',
    18: 'Alt',
    19: 'Pause',
    20: 'Caps Lock',
    27: 'Escape',
    32: 'Space',
    33: 'Page Up',
    34: 'Page Down',
    35: 'End',
    36: 'Home',
    37: 'Left',
    38: 'Up',
    39: 'Right',
    40: 'Down',
    42: 'Print Screen',
    45: 'Insert',
    46: 'Delete',

    48: '0',
    49: '1',
    50: '2',
    51: '3',
    52: '4',
    53: '5',
    54: '6',
    55: '7',
    56: '8',
    57: '9',

    65: 'A',
    66: 'B',
    67: 'C',
    68: 'D',
    69: 'E',
    70: 'F',
    71: 'G',
    72: 'H',
    73: 'I',
    74: 'J',
    75: 'K',
    76: 'L',
    77: 'M',
    78: 'N',
    79: 'O',
    80: 'P',
    81: 'Q',
    82: 'R',
    83: 'S',
    84: 'T',
    85: 'U',
    86: 'V',
    87: 'W',
    88: 'X',
    89: 'Y',
    90: 'Z',

    91: 'Windows',
    93: 'Right Click',

    96: 'Numpad 0',
    97: 'Numpad 1',
    98: 'Numpad 2',
    99: 'Numpad 3',
    100: 'Numpad 4',
    101: 'Numpad 5',
    102: 'Numpad 6',
    103: 'Numpad 7',
    104: 'Numpad 8',
    105: 'Numpad 9',
    106: 'Numpad *',
    107: 'Numpad +',
    109: 'Numpad -',
    110: 'Numpad .',
    111: 'Numpad /',

    112: 'F1',
    113: 'F2',
    114: 'F3',
    115: 'F4',
    116: 'F5',
    117: 'F6',
    118: 'F7',
    119: 'F8',
    120: 'F9',
    121: 'F10',
    122: 'F11',
    123: 'F12',

    144: 'Num Lock',
    145: 'Scroll Lock',
    182: 'My Computer',
    183: 'My Calculator',
    186: ';',
    187: '=',
    188: ',',
    189: '-',
    190: '.',
    191: '/',
    192: '`',
    219: '[',
    220: '\\',
    221: ']',
    222: '\''
};

function renderKeyName(keycode) {
    if (keyCodeMap[keycode]) {
        return keyCodeMap[keycode];
    } else {
        console.log('Unknow Key(Key Code:' + keycode + ')');
        return '';
    }
};

Reference:

Memoization Function

Array.prototype.slice

Key Code

Top 10 Promise Way to Build and Level Up your Coding Skills

Shijie Zhou — Mon, 24 Feb 2020 01:38:45 +0000

There are many great ways to improve your coding skills, experiment with new technologies. The truth of the matter is to understand JavaScript and Promise.

Part 1:

const prom = new Promise((res, rej) => {
  console.log('first');
  res();
  console.log('second');
});
prom.then(() => {
  console.log('third');
});
console.log('fourth');

// first
// second
// fourth
// third

Promise executes synchronously, promise.then executes asynchronously

Part 2:

const prom = new Promise((res, rej) => {
  setTimeout(() => {
    res('success');
  }, 1000);
});
const prom2 = prom.then(() => {
  throw new Error('error');
});

console.log('prom', prom);
console.log('prom2', prom2);

setTimeout(() => {
  console.log('prom', prom);
  console.log('prom2', prom2);
}, 2000);

// prom 
// Promise {<pending>}
// __proto__: Promise
// [[PromiseStatus]]: "resolved"
// [[PromiseValue]]: "success"

// prom2
// Promise {<pending>}__proto__: 
// Promise[[PromiseStatus]]: "rejected"[[PromiseValue]]: 
// Error: error
//     at <anonymous>:7:9

promise has three different states:

pending
fulfilled
rejected

Once the status updated, pending->fulfilled or pending->rejected, it can be changed again. The prom1 is different from prom2 and both of them return new Promise status.

Part 3:

const prom = new Promise((res, rej) => {
  res('1');
  rej('error');
  res('2');
});

prom
  .then(res => {
    console.log('then: ', res);
  })
  .catch(err => {
    console.log('catch: ', err);
  });

// then: 1

The resolve or reject only execute once even there is a resolve call after the reject. It won't execute.

Part 4:

Promise.resolve(1)
  .then(res => {
    console.log(res);
    return 2;
  })
  .catch(err => {
    return 3;
  })
  .then(res => {
    console.log(res);
  });

// 1
// 2

Promises can be chained. When referring to chained calls, we usually think of returning this, but Promises do not. Each time a promise calls .then or .catch, a new promise will be returned, thus implementing chained calls.

Part 5:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('first')
    resolve('second')
  }, 1000)
})

const start = Date.now()
promise.then((res) => {
  console.log(res, Date.now() - start, "third")
})
promise.then((res) => {
  console.log(res, Date.now() - start, "fourth")
})

// first
// second 1054 third
// second 1054 fourth

A promise .then or .catch can be called multiple times, but here the Promise constructor is executed only once. In other words, once the internal state of a promise changes and a value is obtained, each subsequent call to .then or .catch will directly get the value.

Part 6:

const promise = Promise.resolve()
  .then(() => {
    return promise
  })
promise.catch(console.error)

// [TypeError: Chaining cycle detected for promise #<Promise>]
// Uncaught SyntaxError: Identifier 'promise' has already been declared
//    at <anonymous>:1:1
// (anonymous) @ VM218:1

The value returned by .then or .catch cannot be the promise itself, otherwise, it will cause an infinite loop.

Part 7:

Promise.resolve()
  .then(() => {
    return new Error('error');
  })
  .then(res => {
    console.log('then: ', res);
  })
  .catch(err => {
    console.log('catch: ', err);
  });

// then: Error: error!
// at Promise.resolve.then (...)
// at ...

Returning an error object in .then or .catch does not throw an error, so it will not be caught by subsequent .catch, you need to change to one of them:

return Promise.reject(new Error('error'))
throw new Error('error')

Because returning any non-promise value will be wrapped into a promise object, that is, return new Error ('error') is equivalent to return Promise.resolve (new Error ('error')).

Part 8:

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

  // 1

The argument of .then or .catch is expected to be a function, and passing in a non-function will results the result of value to be ignored such as .then(2) or .then(Promise.resolve(3).

Part 9:

Promise.resolve()
  .then(
    function success(res) {
      throw new Error('Error after success');
    },
    function fail1(e) {
      console.error('fail1: ', e);
    }
  )
  .catch(function fail2(e) {
    console.error('fail2: ', e);
  });

//   fail2:  Error: Error after success
//     at success (<anonymous>:4:13)

.then can accept two parameters, the first is a function that handles success, and the second is a function that handles errors. .catch is a convenient way to write the second parameter of .then, but there is one thing to pay attention to in usage: .then the second error-handling function cannot catch the error thrown by the first successful function and subsequent ones. catch catches previous errors. Of course, the following code works if you want to rewrite:

Promise.resolve()
  .then(function success1 (res) {
    throw new Error('success1 error')
  }, function fail1 (e) {
    console.error('fail1: ', e)
  })
  .then(function success2 (res) {
  }, function fail2 (e) {
    console.error('fail2: ', e)
  })

Part 10:

process.nextTick(() => {
  console.log('1')
})
Promise.resolve()
  .then(() => {
    console.log('2')
  })
setImmediate(() => {
  console.log('3')
})
console.log('4');

// Print 4
// Print 1
// Print 2
// Print 3

Both process.nextTick and promise.then belong to microtask, while setImmediate belongs to macrotask, which is executed during the check phase of the event loop. A microtask is executed between each phase of the event loop (macrotask), and the beginning of the event loop is executed once.

Top 10 Homebrew Tools You Didn't Know You Needed in 2020

Shijie Zhou — Sun, 05 Jan 2020 05:08:24 +0000

1. Wget

if you use Linux or Mac os, the wget is the best command-line tool to help you download any repo from GitHub.

https://www.gnu.org/software/wget/

brew install wget

2. Imagemagick

Imagemagisk has many functionalities that can convert an image from one format to another format easily. And it can convert multiple threads very fast for the large image.

https://imagemagick.org/index.php

brew install imagemagick

3. Zsh

Z shell can be a very beautiful shell for you to run any command you want. and it notices the git repo you have commit or not. It has a very attractive color highlight so it helps you to develop your projects without push your stuffs to git.

https://ohmyz.sh/

brew install zsh

4. Speedtest-cli

As you read the name of this repo, it check the speed of the your internet connection, and there is more information to show the internet speed.

https://formulae.brew.sh/formula/speedtest-cli

brew install speedtest-cli

5. Archey

If your team works together in the same office and the same network, what if you want to share the localhost:3000 to your team without him to run the app. Of course, archey provided the IP and information of your computer and it helps you guys to share apps across the same offices.

https://obihann.github.io/archey-osx/

brew install archey

6. Htop

This is a command-line version of activity monitor, top provides very rich information about what you desire and a lot of useful information about the processes running on your computer. It is much easy to navigate and make a simple selection of the process.

https://hisham.hm/htop/

brew install htop

7. Tree

With the default of mac os, it does not show the tree structure files in the folder. So if you want to check out the folder structure, a tree command will save your life very quickly.

http://mama.indstate.edu/users/ice/tree/

brew install tree

8. Ant

Apache Ant is a Java library and command-line tool whose mission is to drive processes described in build files as targets and extension points dependent upon each other. The main known usage of Ant is the build of Java applications. Ant supplies a number of built-in tasks allowing to compile, assemble, test and run Java applications. - Apache Ant

https://ant.apache.org/

brew install ant

9. NVM

NVM - Node version manager, for those developers who love to switch different nodes in the environment, an nvm command is very easy to help you switch the tools between different node versions. More about: nvm

https://formulae.brew.sh/formula/nvm

brew install nvm

10. Cask

The cask is to bring its elegance, simplicity, and speed to the installation and management of GUI macOS applications.

https://formulae.brew.sh/cask/

brew install cask

Using Prettier and husky to make your Emberjs Great Again

Shijie Zhou — Sun, 22 Dec 2019 04:24:10 +0000

Whether you work in a company, a big team or by yourself, having consistently formatted code is significant for maintainability and readability. Also, there are tons of ways and this is the standard way and most developers should look into it.

Too Long; Didn’t Read

Most developers know the tool of Prettier because it is very easy to use and it makes sense to run the command.

npm run prettier -g

However, we will forget or sometimes when you push to pipeline, you realize the problem that you didn’t run the prettier before you commit. Or sometimes, the VPS you used does not have prettier or nothing like linter install. That means it will make your pipeline fail.

Check out the Emberjs Application repo:

The major issue is that you forget to format the Ember Code, it can create the mess that other developers may have a problem reading the code. See. e.g.

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router
  .extend(  {
            location: config.locationType,
     rootURL: config.rootURL
} );

Router
    .map(function() {
});

export default Router;

As you can see, the code above does not make use to read easily, and you do not want to run npm prettier every single time.

Format Code Like Pro:

Is that an easier way to format your code without using any IDE like VS Code, IntelliJ, NetBeans, or Eclipse when you commit your project to Github/GitLab/Bitbucket? Of course, that can be as simple as it is.

So, there are three packages you need to install before :

npm i husky prettier pretty-quick --save-dev

Now you should see the package that installs on your Emberjs:

"husky": "^3.1.0",
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1"

Once you have all those packages installed, there is one last step before you will make your commit much efficient.

First Step:

// package.json
"scripts": {
  prettier": "prettier --write \"app/*/*.js\""
}

Second Step:

// package.json
"husky": {
  "hooks": { 
    "pre-commit": "npm run prettier && pretty-quick --staged && git add ."
  }
}

Now you are all set up! Test out by running git command on your ember project.

git add .
git commit -m 'automation format'
// output
app/adapters/application.js 42ms
app/components/article-body.js 24ms
app/components/article-list.js 12ms
app/components/article-share-menu.js 9ms
app/components/bear-list.js 17ms
app/components/loader.js 8ms
app/components/nav.js 8ms
🔍  Finding changed files since git revision 123456.
🎯  Found 0 changed files.
✅  Everything is awesome!
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)

Conclusion

Prettier, husky and pretty-quick can improve your workflow by formatting your JavaScript files before every commit. If you want to learn more about how to use link-staged.

Check out full repo on the link to see how easy it is.

Top 7 Space-Time Complexity Algorithms You Must Know

Shijie Zhou — Mon, 11 Nov 2019 21:26:12 +0000

Some developers may be stuck on the concept of the "Big O" time complexity analysis. So you should read about how big-O work on this article.

From the image above, you get the ideas of how a balanced tree looks like. "Big O" is about a problem in relation to the size of the input. In the diagram above, how was the shortest way to find the number 5? Obviously, the tree on the right takes more than the tree on the left.

1. Linear.O(n)

This is the most optimal algorithm that runs in linear time. No matter how much code you have and it stills run in the same linear time for every situation.

2. Constant. O(k)

Constant time algorithms have a running time independent of input size. Mathematical formulas, for instance, have fixed running times and are considered constant time.

3. Logarithmic. O(log(n))

Logarithmic is often seen on the trees. You can think about the height of the tree because it always includes traversing down the height of a tree and can be considered logarithmic in time.

4. Superlinear. O(n*log(n))

Most sort operation in O(n^2) time. Some of the popular sorting algorithms such as heapsort, mergesort, and quicksort. Usually, it is not a recommended way to do.

5. Quadratic or Cubic / Polynomial. O(n^2) or O(n^3)

Brute force algorithms often run in O(n^2) or O(n^3) because you are going to loop through all the situations. e.g. you want to find all the combinations of an array. [1,2,3] => [1,2,3], [1,3,2], [2,1,3] ... The complexity of the operation is n^3 time.

6. Exponential. O(2^n)

The exponential algorithm is also not the best but it is better than the factorial algorithm. One example is computing the fibonacci sequence. C(n) = C(n-1) + C(n-2). e.g. 1,1,2,3,5,8,13,21,34 ...

See the image below to understand factorial:

7. Factorial. O(n!)

This is the slowest algorithm that you never want to use. For example, list all the path of traveling n countries. Let's say you have three-country, the USA, Mexico, Canada. You first need to visit n city, and n-1 cities, and n-2 cities. The run-time stacks up as n*(n-1)*(n-2) = O(n!).

A lot of candidates get stuck here by either getting too deep in nitty-gritty details and overcomplicating this like saying "This is O(6 * k * n3), where k is the number of comparisons..." Most software engineers don't care about this level of detail, and you can often get away with simply saying "This is quadratic time because we have two for-loops, each one iterating from 1 to n."

One more tip - do not say "This is O(m + v + e)," when you haven't defined what m, v, or e are. You generally want to say "... where m is the height of the matrix, v is the number of vertices, e is the number of edges, etc.," Once you start reciting formulas without defining the constants you're using, your analysis will appear amateurish.

Top 10 Workstation Every Developer Likes

Shijie Zhou — Sat, 12 Oct 2019 01:43:09 +0000

Considering developers spend so much time at your desk, it’s important to create a space that not only works for you and aids your productivity but is also an area you actually enjoy being in. Yes, here’s an awesome collection of items, accessories and other things that developers recommended for a sweet desk setup:

1. One Monitor

2. One Vertical and Two Horizontal

3. Neon Light Desktop

4. Three Monitors in Studio

5. One iMac and Macbook Pro and Mac Display

6. One foot long Monitor with Mac

7. One Mac Display plus Macbook Pro

8. One Surface plus blend Display

9. Three Vertical Setup Monitor

10. Two Dell Display plus one iMAc

Leave your comment or which one you like the best.

Top 10 Chrome Extensions Every Developer Likes

Shijie Zhou — Sun, 08 Sep 2019 04:07:41 +0000

1.Octotree

Octotree Pro is loaded with features that bring your productivity on GitHub to the next level! Thousands of developers are using Octotree Pro daily to boost their productivity.

Cancel online anytime with a click of a button. But you will probably never do that as our cancellation rate is less than 1%.

We recommend the Team plan which only costs ~$2 per employee per month. Your company can invite anyone into their subscription.

https://www.octotree.io/

2. Dark Reader

Dark mode for every website. Take care of your eyes, use dark theme for night and daily browsing.
This eye-care extension enables night mode creating dark themes for websites on the fly. Dark Reader inverts bright colors making them high contrast and easy to read at night.

You can adjust brightness, contrast, sepia filter, dark mode, font settings and ignore-list.

https://darkreader.org/

3. SourceGraph

Sourcegraph provides this standard developer platform to every company, helping startups and large enterprises ship better software faster.

https://sourcegraph.com

4. Web Developer

The web developer extension for Chrome adds a little toolbar with different tools available. The original concept of this Chrome extension for developers came from the PNH Developer Toolbar.
The chrome extension web developers has a lot of handy tools a developer can use in their day-to-day work – for designers as well as programmers. It allows you to do a lot of more then the standard Chrome Inspector, like being able to easily add outlines to elements just by clicking, displaying rulers, finding all broken images on a page, and lots more.

https://chrispederick.com/

5. ColorPick Eyedropper

An eye-dropper & color-picker tool that allows you to select color values from webpages.
If you feel the need to alert the developer about a bug use the feedback forum instead of writing a review.

If you are having problems with accuracy use the arrow keys, and enter to pick colors once you get the mouse in the approximate location.

Please note that colors are picked from a snapshot of the page that is updated only when you scroll. To take a new snapshot press r or use the re-snap button. Sometimes if you just changed tabs, you may see a snapshot error - this is an intentional security feature. Press R or scroll to correct this, or exit color pick and try again.

http://vidsbee.com/

6. Ghostery

Ghostery is a great Chrome extension which detects trackers, pixels, and any other embedded snippet on a website. You immediately see which plugins and trackers are installed on the web page you’ve visited. Further on, Ghostery lets you protect your privacy. There’s no registration or sign up required to use this Chrome extension.

https://www.ghostery.com/

7. Session Manager

Simple yet powerful tab set management. Quickly and easily save, update, remove, and restore sets of tabs!
Session Manager is a simple yet powerful extension that makes it quick and easy to save, update, remove, and restore sets of tabs.

https://chrome.google.com/webstore/detail/session-manager/mghenlmbmjcpehccoangkdpagbcbkdpc?hl=en

8. JSONView

You can configure JSON parsing method in options page:

the default method (JSON content is extracted from displayed page) is faster but can (in some rare cases) alter or fail to parse the JSON content.
the safe method costs an extra XMLHttpRequest request (JSON content is extracted from the HTTP response) but is 100% safe.

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en

9. Page Ruler

Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.
Page Ruler lets your draw out a ruler to any page and displays the width, height and position of it.

https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme?hl=en

10. Wappalyzer

Wappalyzer is a cross-platform utility that uncovers the technologies used on websites. It detects content management systems, ecommerce platforms, web frameworks, server software, analytics tools and many more.

https://www.wappalyzer.com/

Top 10 JavaScript Patterns Every Developer Likes

Shijie Zhou — Tue, 23 Jul 2019 04:24:57 +0000

1. The constructor Pattern

In classical object-oriented programming languages, a constructor is a special method used to initialize a newly created object once the memory has been allocated for it. In JavaScript almost everything is an object, we have most often interested in object constructors. Since object constructors are used to creating specific types of objects, for example, both preparing the object for use and accepting arguments a constructor can use to set the values of member properties and methods when the object is first created.

As we saw know JavaScript does not support the concept of classes, so inside a constructor, the keyword this references the new object that's being created revisiting object creation, a basic constructor may look as follows:

function Car(model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}

// Usage:
var bmw = new Car('M4', '2019', '1000');

2. The module Pattern

Modules are an integral piece of any robust application's architecture and typically help in keeping the unit of code for a project cleanly separated and organized
There are several option for implementing modules. These include:

Object literal notation
The module Pattern
AMD modules
CommonJS module
ECMAScript Harmony modules

Object literals :

var newObject = {
  variableKey: variableValue,
  functionKey: function() {
    //…
  }
};

The modules Pattern:

Let's begin looking at an implementation of the Module pattern by created a module that is self-contained.

var testModule = (function() {
  var counter = 0;
  return {
    incrementCounter: function() {
      return ++counter;
    },
    resetCounter: function() {
      counter = 0;
    }
  };
})();

// Usage:
testModule.incrementCounter();
testModule.resetCounter();

3. The Revealing Module Pattern

One thing that the revealing module can do is avoiding repeat the name of the main object when we want to call one public method from another or access public variables.

var myRevealingModule = (function() {
  var privateVariable = 'not okay',
    publicVariable = 'okay';
  function privateFun() {
    return privateVariable;
  }

  function publicSetName(strName) {
    privateVariable = strName;
  }

  function publicGetName() {
    privateFun();
  }

  return {
    setName: publicSetName,
    message: publicVariable,
    getName: publicGetName
  };
})();

//Usage:

myRevealingModule.setName('Marvin King');

4. The Singleton Pattern

The Singleton pattern is thus known because it restricts instantiation of a class to single object. Singletons differ from static classes as we can delay their initialization. generally because they require some information that may not be available during initialization time. For code that is unaware of a previous reference to them, they do not provide a method for easy retrieval. Let's have a look of the structure of singleton:

var singletonPattern = (function() {
  var instance;
  function init() {
    // Singleton
    function privateMethod() {
      console.log('privateMethod');
    }
    var privateVariable = 'this is private variable';
    var privateRandomNumber = Math.random();
    return {
      publicMethod: function() {
        console.log('publicMethod');
      },
      publicProperty: 'this is public property',
      getRandomNumber: function() {
        return privateRandomNumber;
      }
    };
  }

  return {
    // Get the singleton instance if one exists
    // or create if it doesn't
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

// Usage:
var single = singletonPattern.getInstance();

5. The Observer Pattern

The observer is a design pattern in which an object maintains a list of objects depending on it observers, automatically notifying them of any changes to state.

Subject
- Maintains a list of observers, facilities adding or removing observers
Observer
- Provides an update interface for object that need to be notified of a subject’s change of state
ConcreteSubject
- Broadcasts notifications to Observers on changes of state, stores the state of ConcreteObservers
ConcreteObserver
- Stores a reference to the ConcreteSubject, implements an update interface for the observer to ensure state is consistent with subjects

function ObserverList() {
  this.observerList = [];
}

ObserverList.prototype.Add = function(obj) {
  return this.observerList.push(obj);
};

ObserverList.prototype.Empty = function() {
  this.observerList = [];
};

ObserverList.prototype.Count = function() {
  return this.observerList.length;
};

ObserverList.prototype.Get = function(index) {
  if (index > -1 && index < this.observerList.length) {
    return this.observerList[index];
  }
};

//...

When a subject needs to notify observers about something interesting happening, it broadcasts a notification to the observers ( including specific data related to the topic of the notification)

When we no longer wish for a particular observer the notified of changes by the subject it is registered with, the subject can remove it from the list of observers. In the future, I will talk more about the feature of how the observer can be used in JavaScript widely.

6. The Mediator Pattern

If it appears a system has too many direct relationships between components. it may be time to have a central point of the control that components communicate through instead. The mediator pattern promotes loose coupling by ensuring that instead of components referring to each other explicitly.

var mediator = (function() {
  var topics = {};
  var subscribe = function(topic, fn) {
    if (!topics[topic]) {
      topics[topic] = [];
    }
    topics[topic].push({ context: this, callback: fn });
    return this;
  };

  // publish/broadcast an event to the rest of the application
  var publish = function(topic) {
    var args;
    if (!topics[topic]) {
      return false;
    }
    args = Array.prototype.slice.call(arguments, 1);
    for (var i = 0, l = topics[topic].length; i < l; i++) {
      var subscription = topics[topic][i];
      subscription.callback.apply(subscription.content, args);
    }
    return this;
  };
  return {
    publish: publish,
    subscribe: subscribe,
    installTo: function(obj) {
      obj.subscribe = subscribe;
      obj.publish = publish;
    }
  };
})();

7. The Prototype Pattern

One of the benefits of using the Prototype pattern is that we've working with the prototype strengths JavaScript has to offer natively rather than attempting to imitate features of other languages. let's look at the pattern example.

var myCar = {
  name: 'bmw',
  drive: function() {
    console.log('I am driving!');
  },
  panic: function() {
    console.log('wait, how do you stop this thing?');
  }
};

//Usages:

var yourCar = Object.create(myCar);

console.log(yourCar.name); //'bmw'

8. The Factory Pattern

Factory can provide a generic interface for creating objects, where we can specify the type of factory object we wish to create. see the diagram below.

function Car(options) {
  this.doors = options.doors || 4;
  this.state = options.state || 'brand new';
  this.color = options.color || 'silver';
}

9. The Mixin Pattern

Mixins are classes that offer functionality that can be easily inherited by a sub-class or group of sub-classes for the purpose of the function reuse.

var Person = function(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.gender = 'male';
};

var clark = new Person('Clark', 'kent');

var Superhero = function(firstName, lastName, powers) {
  Person.call(this.firstName, this.lastName);
  this.powers = powers;
};

SuperHero.prototype = Object.create(Person.prototype);
var superman = new Superhero('Clark', 'Kent', ['flight', 'heat-vision']);

console.log(superman); //output personal attributes as well as power

In this case, superhero is capable of overriding any inherited values with values specific to its object.

10. The Decorator Pattern

The Decorators are a structural design pattern that aim to promote code reuse. Similar to Mixins, they can be considered another viable alternative to object subclassing. Classically, Decorators offered that ability to add behavior to existing classes in a system dynamically. The idea was the decoration itself wasn't essential to the base functionality of the class. Let's checkout how decorator work in JavaScript

function MacBook() {
  this.cost = function() {
    return 997;
  };
  this.screenSize = function() {
    return 11.6;
  };
}

// Decorator 1

function Memory(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 75;
  };
}

// Decorator 2

function Engraving(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 200;
  };
}

// Decorator 3

function Insurance(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 250;
  };
}

var mb = new MacBook();

Memory(mb);
Engraving(mb);
Insurance(mb);

mb.cost(); // 1522

All the patterns may not use to one project, and some projects may benefit from the decoupling benefits offered by the Observer pattern. That said, once we have a firm grasp-of design patterns and the specific problems they are best suited to. Thus, it becomes much easier to integrate into our application architecture.