Skip to content

Home

  • 2 min read

How to Use Webpack with React and Bootstrap

Today, I was setting up a project using Webpack, React, and Bootstrap without jQuery. What seemed like a straightforward task ended up taking more time than expected, so I've decided to document the steps below:

Step 1: Install All Dependencies

First, install all the required dependencies:

npm install react react-dom bootstrap react-bootstrap babel-preset-react --save
npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev

Step 2: Add Loaders in webpack.config.js

Next, add the necessary loaders to your webpack.config.js file:

var path = require("path")
var webpack = require("webpack")

module.exports = {
  entry: "./main.js",
  output: { path: __dirname, filename: "bundle.js" },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["es2015", "react"],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png$/,
        loader: "url-loader?limit=100000",
      },
      {
        test: /\.jpg$/,
        loader: "file-loader",
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff",
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream",
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader",
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml",
      },
    ],
  },
}

Step 3: Import Bootstrap CSS in main.js

In your main.js file (or whatever your entry file is), import the Bootstrap CSS:

import App from "./app.jsx"
import Bootstrap from "bootstrap/dist/css/bootstrap.css"

Step 4: Import React Bootstrap in app.jsx

Finally, in your app.jsx, import React Bootstrap components:

import React from "react"
import ReactDOM from "react-dom"
import { Button } from "react-bootstrap"

const buttonsInstance = <Button>Click me!</Button>

ReactDOM.render(buttonsInstance, document.getElementById("here"))

HTML Setup

Don't forget to include a div with the appropriate ID, as well as the bundle.js:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
  </head>
  <body>
    <div id="here"></div>
    <script src="bundle.js"></script>
  </body>
</html>

That's it! Feel free to reach out if you have any questions.

  • in podcast
  • 2 min read

How to Use Webpack with React and Bootstrap

Hello everyone and welcome to "Continuous Improvement", the podcast where we explore various tips, tricks, and techniques to constantly improve our development skills. I'm your host, Victor, and today we're going to talk about setting up a project using Webpack, React, and Bootstrap without jQuery.

So, I recently had the experience of setting up a project with these technologies and it turned out to be a bit more time-consuming than I initially anticipated. But worry not! I've decided to share the steps I followed to save you from any possible headaches.

The first step is to install all the required dependencies. Open up your terminal and type in the following commands:

npm install react react-dom bootstrap react-bootstrap babel-preset-react --save
npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev

Once you have installed the dependencies, it's time to move on to step two. In this step, we need to make some changes to the webpack.config.js file. Open it up and add the necessary loaders. Here's an example of how your webpack.config.js file might look:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.png$/,
        loader: "url-loader?limit=100000"
      },
      // ... more loaders ...
    ]
  },
};

Great! Now that we have our loaders set up, let's move on to step three. In this step, you need to import the Bootstrap CSS into your main.js file. This can be done with a simple import statement, like this:

import App from './app.jsx';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

Finally, we're at step four! In this step, we'll import React Bootstrap components into our app.jsx file. Here's an example of how that might look:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';

const buttonsInstance = (
  <Button>Click me!</Button>
);

ReactDOM.render(buttonsInstance, document.getElementById('here'));

Don't forget to include a div with the appropriate ID in your HTML file, as well as the bundle.js file. Here's an example of what your HTML file might look like:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="here"></div>
    <script src="bundle.js"></script>
  </body>
</html>

And that's it! By following these steps, you should be able to set up a project using Webpack, React, and Bootstrap without the need for jQuery. But remember, continuous improvement is all about learning and adapting, so feel free to explore and experiment with different setups that suit your needs.

If you have any questions or need further assistance, don't hesitate to reach out. You can find me on Twitter, my handle is @VictorDev. Thanks for joining me on this episode of "Continuous Improvement". Stay tuned for more exciting topics in the world of development. Until next time, happy coding!

  • in zh
  • 2 min read

如何將Webpack與React和Bootstrap一起使用

今天，我正在設定一個使用Webpack、React和Bootstrap（不包括jQuery）的專案。原本看似簡單直接的任務結果卻花了我比預期多的時間，所以我決定將步驟記錄在下面：

步驟1：安裝所有依賴

首先，安裝所有需要的依賴：

npm install react react-dom bootstrap react-bootstrap babel-preset-react --save
npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev

步驟2：在webpack.config.js中添加Loaders

接下來，在你的webpack.config.js文件中添加必要的loaders：

var path = require("path")
var webpack = require("webpack")

module.exports = {
  entry: "./main.js",
  output: { path: __dirname, filename: "bundle.js" },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["es2015", "react"],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png$/,
        loader: "url-loader?limit=100000",
      },
      {
        test: /\.jpg$/,
        loader: "file-loader",
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff",
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream",
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader",
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml",
      },
    ],
  },
}

步驟3：在main.js中引入Bootstrap CSS

在你的main.js文件（或者是你的進口文件）中，引入Bootstrap CSS：

import App from "./app.jsx"
import Bootstrap from "bootstrap/dist/css/bootstrap.css"

步驟4：在app.jsx中引入React Bootstrap

最後，在您的app.jsx中，導入React Bootstrap組件：

import React from "react"
import ReactDOM from "react-dom"
import { Button } from "react-bootstrap"

const buttonsInstance = <Button>Click me!</Button>

ReactDOM.render(buttonsInstance, document.getElementById("here"))

HTML設定

別忘了附上一個帶有適當ID的div，以及bundle.js：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
  </head>
  <body>
    <div id="here"></div>
    <script src="bundle.js"></script>
  </body>
</html>

這就完成了！如果有任何問題，歡迎隨時向我提問。

  • 2 min read

How to Be a Good Consultant?

I worked as a Software Engineer for a major Australian technology firm. While I am bright, skilled, and dedicated, these qualities alone are not sufficient to make one a successful consultant. Fortunately, after consulting with an experienced coach, I've come up with some insightful tips. Here are the three levels of consulting expertise I've learned:

1st Level

At the basic level, you possess a particular skill that you know better than others. For instance, I specialized in JavaScript front-end development and knew more about it than the employees at my client's company, which happened to be the world's largest gaming company. They sought your services because of the unique skills you can offer. However, this level of work isn't ideal for you in the long term. Mistakes will occur, making it challenging to maintain a professional first impression. Over time, you'll become indistinguishable from the millions of other individuals with similar skills. Your contribution becomes limited, and there's a narrow gap between what the client pays you and the value you deliver.

2nd Level

At the senior level, you offer significant value to clients by leveraging multiple skill sets. Remember, we're humans, not machines; we should all possess diverse talents. Drawing from your previous client experiences, you can provide a unique perspective on current challenges, setting you apart from the client's in-house team. You understand what works and what doesn't, what the client likes or dislikes, and what both the client and consulting firm genuinely need. Cultural awareness can go a long way in building trust.

3rd Level

At the highest level, you serve as a trusted advisor, akin to a king's confidant. Even if the king may not like hearing the truth, it's your responsibility to tell him. Should anything go awry, you will be held accountable from the client's perspective, as people are unlikely to blame themselves or admit they were wrong. You don't have to personally like the client, but you must care about them. Understand their motivations and recommend what's genuinely best for the company with compassion. Love may be a strong word, but it helps humanize your business approach. Your focus isn't solely on your success; you're concerned about the client's success as well. When the client wins, you win.

Final Thoughts

Reaching the highest level of consulting expertise is challenging. To establish a win-win situation, you must continuously learn and offer high-value skills to your client, your consulting firm, and yourself. It won't be easy and will require years of dedication, but these guidelines will serve as valuable markers on your consulting journey.

  • in podcast
  • 3 min read

How to Be a Good Consultant?

I worked as a Software Engineer for a major Australian technology firm. While I am bright, skilled, and dedicated, these qualities alone are not sufficient to make one a successful consultant. Fortunately, after consulting with an experienced coach, I've come up with some insightful tips. Here are the three levels of consulting expertise I've learned:

Welcome to "Continuous Improvement," the podcast where we explore strategies, insights, and personal experiences in the world of consulting. I'm your host, Victor, and today we'll be diving into a topic that is crucial for any consultant looking to excel in their field: the three levels of consulting expertise.

As a former Software Engineer turned consultant, I've had my fair share of experiences and lessons learned along the way. And I'm here to share them with you. So let's get started!

At the basic level of consulting expertise, you possess a specific skill that sets you apart from others. For instance, in my case, it was JavaScript front-end development. Clients sought my services because I had a deep understanding of this skill, even surpassing the knowledge of their in-house team. However, relying solely on specialized skills can have its limitations.

Mistakes can happen, and it becomes challenging to maintain a consistently professional impression. Over time, you risk becoming indistinguishable from the sea of individuals with similar skills. This level limits your contribution, as the gap between what the client pays you and the value you deliver becomes narrower.

That's where the second level of consulting expertise comes into play. At this senior level, you bring significant value by leveraging multiple skill sets. Through previous client experiences, you gain a unique perspective on current challenges. You understand what works, what doesn't, and what the client truly needs from you and your consulting firm.

Cultural awareness also plays a crucial role in building trust with clients. By understanding their preferences and incorporating diverse talents, you set yourself apart from their internal team. This level allows you to contribute more effectively and provide a broader range of solutions.

Now, let's talk about the highest level of consulting expertise. At this level, you become a trusted advisor, someone akin to a king's confidant. Your responsibility is to provide honest feedback and recommendations, even if it's not what the client wants to hear. You hold yourself accountable for any potential issues that arise, as clients often find it difficult to blame themselves or admit their mistakes.

Building a genuine connection with the client becomes essential. It's not about simply liking them, but rather genuinely caring about their success. Understanding their motivations and recommending what's best for their company with compassion is the key. Your focus should extend beyond personal success; it should encompass the client's success as well. After all, when the client wins, you win.

Achieving the highest level of consulting expertise is undoubtedly challenging. It requires continuous learning, honing high-value skills, and offering exceptional value to your clients, your consulting firm, and yourself. It won't happen overnight, but by following these guidelines, you'll find valuable markers on your journey to becoming an exceptional consultant.

That wraps up today's episode of "Continuous Improvement." I hope you found these insights on the three levels of consulting expertise valuable and applicable to your own professional journey. Remember, continuous learning and self-improvement are key to success in this field.

If you enjoyed today's episode, be sure to subscribe to our podcast and stay tuned for future episodes where we'll explore more strategies for personal and professional growth. Until next time, I'm Victor, and thank you for joining me on "Continuous Improvement."

  • in zh
  • 1 min read

如何成為一個好的顧問？

我曾在一家大型澳洲科技公司擔任軟體工程師。雖然我聰明、擁有技能且我全心全意，但這些品質單獨存在並不足以讓一個人成為成功的顧問。幸運的是，經過與經驗豐富的教練諮詢後，我整理出了一些深刻的建議。以下是我學到的三個等級的諮詢專業知識：

第一等級

在基礎等級上，你擁有一種特定的技能，你比其他人更懂。例如，我專精於 JavaScript 前端開發，我對此知識比我的客戶公司的員工更瞭解，而這公司恰好是全球最大的遊戲公司。他們尋求你的服務是因為你可以提供的獨特技能。然而，這種等級的工作對你來說並不理想的長期工作。錯誤將不可避免地發生，使得維持專業的第一印象變得挑戰性。隨著時間的推移，你將與具有相似技能的其他百萬人口變得容易混淆。你的貢獻變得有限，客戶支付給你的和你提供的價值之間的差距變得狹窄。

第二等級

在資深等級上，你通過利用多種技能為客戶提供重大價值。請記住，我們是人，而不是機器；我們都應該擁有多種才能。從你之前的客戶經驗中學習，對於當前的挑戰，你可以提供獨特的視角，讓你區別於客戶的內部團隊。你知道什麼有效，什麼無效，了解客戶喜歡或不喜歡，知道客戶和諮詢公司真正需要什麼。文化意識可以在建立信任方面長期有效。

第三等級

在最高等級上，你起著受信任的顧問的作用，就像國王的密友一樣。即使國王可能不喜歡聽到事實，你也有責任告訴他。如果有任何事情出錯，從客戶的角度來看，你將被追究責任，因為人們不太可能責怪自己或承認他們是錯的。你不必親自喜歡客戶，但你必須關心他們。理解他們的動機，並以同情之心推薦對公司最好的事情。愛可能是一個強烈的詞，但它有助於人性化你的業務方法。你的關注點不僅僅在於你的成功；你也關心客戶的成功。當客戶獲勝，你也會獲勝。

最後的想法

達到最高等級的諮詢專業知識是困難的。要建立一個雙贏的局面，你必須不斷學習，並向你的客戶、你的諮詢公司和你自己提供高價值的技能。這將不會容易，且需要多年的奉獻，但這些指導方針將成為你諮詢旅程上重要的標誌。

  • 1 min read

Understanding Optionals and Exclamation Marks in Swift

Swift is a strongly-typed language, meaning all variables must have a defined type.

In Swift, there is a special type called "Optional," which can have only one of two possible values:

  1. A value that is not set, meaning it has never been set, or someone has explicitly set it to an unset state, i.e., to the value nil.
  2. A value that is set to something specific.

For example:

    var something = display.text

What is the type of something? We didn’t specify the type of this variable, but Swift can infer it from the context. It sets something to be the same type as display.text. Let's say display.text is of type String; then something will be an Optional String, which means it's an Optional that can contain a String.

How can you extract a string from an Optional? You can "unwrap" the Optional, meaning you inspect it and retrieve the associated value, using an exclamation mark:

    var something = display.text!

Now, the type of something is String, not an Optional. Note that if the value of display.text is nil, your program will crash!

  • in podcast
  • 2 min read

Understanding Optionals and Exclamation Marks in Swift

Swift is a strongly-typed language, meaning all variables must have a defined type.

Hello everyone, and welcome to another episode of "Continuous Improvement." I'm your host, Victor, and today we'll be discussing a fundamental concept in Swift programming—Optionals. So grab a cup of coffee, sit back, and let's dive right in!

Swift is a strongly-typed language, which means that every variable must have a defined type. But sometimes, there are cases where a variable's value may not always be set or could be set to a specific value. That's where Optionals come in.

In Swift, an Optional is a special type that can have one of two possible values. First, it can have no value set, meaning it's in an unset state, represented by the value nil. And second, it can have a specific value set.

To understand how Optionals work, let's take an example. Imagine we have a variable called something and we assign it the value of display.text. We haven't explicitly specified the type of something, but Swift can infer it from the context.

If display.text is of type String, then something will be an Optional String. In other words, it's an Optional that can contain a String.

But how do we extract a String from an Optional? Well, we can "unwrap" the Optional, which means we inspect it and retrieve the associated value. To do this, we use an exclamation mark after the Optional variable.

So, by writing var something = display.text!, the type of something is now a String, not an Optional. However, it's important to note that if the value of display.text is nil, our program will crash!

Optionals are a powerful feature in Swift that help ensure our code handles both cases—the one where a value is set and the other where it's not. It prevents unexpected crashes by explicitly forcing us to consider the possibility of a variable being nil.

Well, that wraps up today's episode on Optionals in Swift. Remember, Optionals allow us to handle the absence of a value in a structured way and prevent unforeseen errors.

If you enjoyed today's episode, make sure to subscribe to "Continuous Improvement" so you never miss an episode. And don't forget to leave us a review and share the podcast with your friends.

Thank you for joining me today. Stay curious, keep learning, and until next time, happy coding!

  • in zh
  • 1 min read

在Swift中理解選項和驚嘆號

Swift是一種強類型語言，意味著所有變量都必須有一個定義的類型。

在Swift中，有一種特殊的類型叫做"Optional"，它只能有兩種可能的值：

  1. 一個未設定的值，意味著它從未被設定，或者有人明確地將它設定為未設定的狀態，即，設定為nil的值。
  2. 一個設置為特定東西的值。

例如：

    var something = display.text

something的類型是什麼？我們並未指定此變量的類型，但是Swift可以從上下文中推斷出來。它將something設為和display.text同樣的類型。假設display.text的類型是String；那麼something將會是一個Optional String，即，它是一個可能包含String的Optional。

那麼您如何從Optional中提取一個字符串？您可以"解包"Optional，也就是說，您可以檢查它並取出相關的值，使用驚嘆號：

    var something = display.text!

現在，something的類型是String，而不是Optional。請注意，如果display.text的值是nil，那麼您的程式將會崩潰！

  • 2 min read

Connection between .h and .m files in Objective-C

When you first open an Objective-C project in Xcode, the .h and .m files may look confusing. It's important to understand the simple connections and the hidden code behind the scenes.

These files are used to separate the public and private parts of the class. The .h file serves as a header file for public declarations of your class, functioning like an API, while the .m file contains the private implementation.

When you need to call a function from other files, you just need to import the .h file for referencing. For example,

    #import <Foundation/Foundation.h>

In the .h file, you can declare public @property attributes of the class, which can be accessed from outside:

    @property (strong, nonatomic) NSString *something;

Here, @property is a pointer to an object whose class is NSString. All objects live in the heap, so we need the asterisk (*). As a side note, "strong" means "keep the object in memory until I set this property to nil." "Nonatomic" means "access to this property is not thread-safe;" otherwise, the compiler will generate locking code.

In the .m file, the "getter" and "setter" methods for this property are automatically generated for you behind the scenes to make the @property instance accessible:

    @synthesize something = _something;
    - (NSString *) something
    {
      return _something;
    }
    - (void)setSomething:(NSString *)something
    {
      _something = something;
    }

Note that by default, the backing variable's name is the same as the property's name but with an underscore in front. You don't need to write the above code unless you want to override the method and do something differently.

When you create a new method, you need to put the declaration in the .h file:

    - (int)newMethod:(ArgType *)arg;

And then write the actual details in your .m file.

    - (int)newMethod:(ArgType *)arg
    {
      int num = 0;
      // something in the method...
      return num;
    }

Also, for private declarations, you can include them in the .m file like this:

    @interface Something()
    // private declarations...
    @end

Finally, when you are reading other people's code for the first time, you just need to look at the .h files to get an overview of the projects. If you need to delve into the details, then look at the .m files.

Understanding the fundamental concepts outlined above will make the rest of the code start to make sense. :D