ISB Vietnam Blog

ARTICLE

November 16, 2023

How to balance the current job with hobbies?

Your current job may be very busy and stressful, so balancing your current job with your hobbies will be very difficult. However, it’s essential to give yourself a period to look inside yourself so that you can maintain a healthy work-life balance.

Here are some tips that can help.

<1>Prioritize your hobbies:

It's important to identify which hobbies are most important to you and make time for them accordingly. This could mean dedicating certain days or times of the week to your hobbies or setting aside a specific amount of time each day.

<2>Schedule your time:

Make a schedule that includes both work and hobbies. By planning out your day, you can ensure that you have enough time for both and avoid overloading your schedule.

[Example] (^o^)ﾉｿ

For me, those are the times when I'm immersed in painting and making cards.

<3>Be flexible:

Sometimes unexpected things come up, and you may need to adjust your schedule. Be willing to make changes as needed to accommodate your work and hobbies.

<4>Set boundaries:

It's important to set boundaries between work and hobbies. Avoid working during your designated hobby time and vice versa.

[Example] (*’u’*)

For me, yoga gradually turned from a hobby into a habit, it helps me reduce stress and maintain balance in life.

<5>Incorporate hobbies into your workday:

If possible, try to incorporate your hobbies into your workday. For example, if you enjoy reading, take a break during lunch to read a book.

<6>Practice time management:

Effective time management can help you balance your work and hobbies. Use tools such as calendars, to-do lists, and timers to help you manage your time

[Example] (*^_^*)

For me, a light break with a few pages of love stories is enough.

Remember that achieving a good balance between work and hobbies requires effort and discipline. By following these tips, you can successfully balance your current job with your hobbies and enjoy a fulfilling work-life balance.

ARTICLE

November 16, 2023

Mastering Conflict Resolution in the Workplace

Conflict is an inevitable part of any workplace. Differences in opinions, communication styles, and work habits can lead to disputes between colleagues. However, how these conflicts are handled can make a significant impact on the overall work environment and employee morale. In this blog, we will explore effective conflict resolution strategies that can help foster a harmonious workplace.

Understanding workplace conflicts

Before diving into resolution strategies, it's essential to understand the various types of workplace conflicts:

Interpersonal conflicts: These occur between individuals and are often based on personal differences, misunderstandings, or disagreements.
Task-related conflicts: Stem from differences in work priorities, responsibilities, or project goals.
Structural conflicts: Arise due to organizational issues, such as resource allocation, roles, or policies.
Value-based conflicts: Involve differences in core values, beliefs, or ethics.

The impact of unresolved conflict

Unresolved conflicts can harm the workplace, such as decreased productivity, increased stress, and a toxic work environment. Therefore, it's crucial to address conflicts constructively.

Common Conflict resolution strategies

Open communication: Encourage people to express their concerns openly and honestly. Actively listen to their perspectives and try to understand their point of view.
Listen actively: Allow each party an opportunity to express their thoughts and feelings. Ensure they feel heard and understood.
Identify the issue: Clearly define the problem, considering the root causes and the individuals involved.
Negotiation: Find common ground and work towards a compromise that satisfies both parties. This can involve discussing and adjusting expectations or solutions.
Mediation: Consider involving a neutral third party, such as a supervisor or HR representative, to mediate the dispute and facilitate a resolution.
Collaboration: Encourage employees to work together to find mutually beneficial solutions to the conflict. This approach can build stronger relationships among team members.
Analyze and brainstorm: Encourage the involved parties to analyze the conflict, consider alternative solutions, and brainstorm ideas for resolution.
Choose a solution: Collaboratively select the most suitable solution, considering the needs and preferences of both parties.
Implement the solution: Put the chosen resolution into action and monitor its effectiveness.
Follow-up: After a resolution has been implemented, follow up with the parties involved to ensure that the conflict is truly resolved and that there are no lingering issues.

Conflict is a natural part of any workplace, but it doesn't have to be disruptive or harmful. By understanding the types of conflicts that can arise and using effective conflict resolution strategies, organizations can create a more harmonious work environment. When conflicts are addressed and resolved constructively, employees can focus on their tasks and collaborate more effectively, ultimately leading to a more productive and happier workplace.

NEWS

November 16, 2023

October 20th – A Day To Honor Vietnamese Women

Men make houses, women make homes. Besides their own career, to create a little home, a peaceful place for the whole family, women really have to sacrifice a lot. And Vietnamese Women's Day – 20/10, will be a special occasion for us to send our love and thanks to our important women for their silent sacrifices.

And to celebrate Vietnamese Women's Day - 20/10 this year, a series of events took place at IVC. Following the success of the Blog Contest last year, this year's event has returned with an upgraded version. With the motto "love is not only expressed in writing but also expressed through speaking", the event “IVC Speaking Contest” was held with the Topic: “The woman who influenced you the most”, attracting a large number of contestants. Inherently in each of us, love and respect for our mother, wife or most important woman always exists, but in the mass of life, it is difficult for us to express. This contest is really a good opportunity for everyone to express their feelings, appreciation, and gratitude to our dear woman.

In order to help the loving letters reach their rightful owners, the Company sent them directly to the most influential woman of each contestant participating in this contest, along with a sincere thank-you & greeting message written by our General Director and a bouquet. Even though it’s a small gift, we believe that it contains invaluable energy and spiritual strength.

Continuing the series of events is the program "Give Word of Love", a quieter way to express our love, our thanks to our dear woman. Lovely postcards are prepared by the Company for everyone to write down messages to send to their woman. In addition, the Company also supports the delivery these lovely postcards to their owners. So, don't hesitate to write down your words, don't hesitate to express concerns for your woman!

Moreover, on October 20, the Company also sent the healthy gifts to all the mothers or the most important women of all IVC members. Wishing our mothers or most important women will always be happy, healthy and full of joy to be able to accompany with us on the life journey ahead.

This series of welcoming events has ended with the enthusiastic participation of all IVC members. It can be said that your enthusiasm is an important factor in creating the success of this event. Once again, the Organization Team would like to thank all IVC members and all contestants.

Our company would like to try to maintain this meaningful activity in the coming years, as a part of our corporate culture.

TECH

November 15, 2023

Visual Basic for Applications and its practical applications in daily life

Have you ever wondered how health data from devices like Smartwatch, Smart Band, etc., can be displayed in visually appealing charts such as bar charts, line charts, etc., creating an aesthetically pleasing and user-friendly experience?

TECH

November 15, 2023

Introduce about free DICOM image tools DVTK

To handle DICOM images in the medical field, there are numerous tools available, both paid and free. Based on my experience, one of the free tools that offers considerable functionality is the DVTK toolkit. This toolkit comprises various individual tools, and in this article, I'll introduce three commonly used ones.

TECH

November 15, 2023

Mutable Object In JavaScript And How To Change From Mutable Object To Immutable Object

Data type in JavaScript has been analyze to 2 type Primitive and Reference. By default, reference data types are mutable including function, array, object..

1. What is Mutable in JavaScript?

Let's consider the following example:

let arr1 = [2, 3, 4];

let arr2 = arr1;

arr2[0] = "javascript";

console.log(arr1);

// ['javascript', 3, 4]

Variable arr1 has data type Array, variable arr2 is created from variable arr1. But when we change the value of variable arr2, variable arr1 is also changed. So, if a data type is mutable it will allow you to modify existing values without creating new values.

When the array or object is created, a pointer is added to the stack and this pointer points to a value on the Heap.

When we create the variable arr2, another pointer is added to the stack, but both point to the same object on the heap. When doing let arr2 = arr1; Reference data does not copy values on the heap, but only pointers on the stack.

2. How to copy values Object, Array are mutable?

The solution is to always create a reference for each new object when you want to clone an object. There are many ways to clone an Object, now I will only introduce the two ways that are considered the most practical: using the Object.assign() method and the rest operator (...).

Here's the syntax:

Object.assign(target, source)

- The target: clone the source properties into the target and return the final result.
- The source: is the place where the original drugs are stored.

Note: The target can be an empty object {}.

For example:

const obj1 = { name: "Java", age: 20 }

const obj2 = Object.assign({}, obj1);

obj2.age = 40;

console.log(obj1.age); // 20

console.log(obj2.age); // 40

The value of obj2.age has been converted to 40 and does not affect the value of obj1.

The rest operator (...) is quite simple to use, just add the sign ... in front of the name of the object to be copied.

For example:

const obj1 = { name: "Java", age: 20 }

const obj2 = { ...obj1};

obj2.age = 40;

console.log(obj1.age); // 20

console.log(obj2.age); // 40

3. How to create immutable Objects in JavaScript?

Normally Objects in javascript are mutable. However, you can also create immutable Objects. In this article, we will cover the usage of Object.defineProperty.

To create an immutable Object with Object.defineProperty, just define the property with writable as false (the default value of writable is false so you can ignore this).

const object1 = {};

Object.defineProperty(object1, 'property1', { value: 10, writable: false });

object1.property1 = 20; // throws an error in strict mode

console.log(object1.property1); // 10

Once we have defined an Object with Object.defineProperty, we will not be able to change the values of the properties in the Object.

4. Conclusion

Through this article, you will understand mutable properties in JavaScript. This will help you avoid errors regarding this feature during programming.

Objects are mutable but in some cases can still prevent the ability to change. Let's continue exploring JavaScript.

[Reference Source]

https://www.freecodecamp.org/news/mutability-vs-immutability-in-javascript/
https://www.pexels.com/

TECH

November 15, 2023

Writing Cleaner CSS Code With The BEM Naming Convention

As we know, in most programming languages nowadays there are some common naming conventions, such as:

Camel Case (Ex: firstName and lastName)
Snake Case (Ex: first_name and last_name)
Kebab Case (Ex: first-name and last-name)
Pascal Case (Ex: FirstName and LastName)

So are there any naming rules in CSS?

We have BEM, so let's find out what BEM is in the next part of this post.

1. What is BEM?

The B in "BEM" stands for "Block".

The E in "BEM" stands for "Elements".

The M in "BEM" stands for "Modifiers".

BEM is a naming convention for HTML and CSS classes that helps developers create maintainable and organized code. It provides a structured format for naming the HTML and CSS classes (block, elements, and modifiers components)

2. Benefits of BEM

Class naming has never been an easy part of CSS. But by using the BEM naming convention, this challenge becomes easy.

Here are a few reasons for you to consider using the BEM:

Clarity

BEM makes cleaner CSS code and makes it easy to understand and maintain.

Reusability

When using the BEM, you will have a friendly structure that will not be confused with other CSS blocks. Thereby it makes reuse easier.

Developer-Friendly

Naming CSS classes is intuitive and easy to understand, helping developers easily understand the code and help each other during the repair or further development process.

Maintainability

BEM provides a clear structure for each block that facilitates changing a specific element of a website without affecting the style of other blocks. Thereby maintenance becomes easier and takes less time.

3. How It Works?

A BEM class name includes up to three parts:

Block

The outermost parent element of the component is defined as the block.

Element

Inside of the component may be one or more children called elements.

Modifier

Either a block or element may have a variation signified by a modifier.

If all three are used in a name it would look something like this:

[block]__[element]--[modifier]

After that brief introduction, let's look at some specific examples.

Example 1: Using the BEM naming convention to indicate [block]__[element]

The person has a head, two arms, and feet.

Using the BEM, it would look something like this:

In HTML code:

In CSS code:

In SCSS code (Recommend):

Through example 1, we learned how to use BEM to represent [Block]__[Element].

To fully demonstrate [Block]__[Element]--[Modifier], let's continue with example 2 below.

Example 2: Using the BEM naming convention to indicate [block]__[element]--[modifier]

There are two persons, person A has a blue head and person B has a red head.

Using the BEM, it would look something like this:

In HTML code:

In CSS code:

In SCSS code (Recommend):

Through the two examples above, we know how to use BEM in CSS.

Within the scope of this post, my purpose is to introduce BEM to you.

To better understand BEM, you can refer to some other post about it on the internet.

4. When should we use BEM?

Large-Scale Projects

When you have a project with a large code base, consists of multiple developers building different parts of the project. Without standard CSS class naming, you'll have a CSS mess. It's very bad when someone on the team changes or further develops someone else's code. That's when you and your team should use BEM, it makes it easier to maintain projects and reduces the risk of errors and code conflicts.

Accessibility-focused projects

When you need to develop a website that prioritizes user access and search engine optimization (SEO). With BEM, your plan will be easier to implement.

5. Conclusion

In this post, we have explored the BEM naming convention of CSS and how it can be used in a Web application. BEM helps build robust and performant applications of any design complexity with less code.

If you are not using BEM currently, I highly recommend it for your next project. BEM naming convention will be a great trend, helping to save time and effort.

Thank you for reading!

[Reference Source]

https://www.devbridge.com/articles/implementing-clean-css-bem-method/
https://www.geeksforgeeks.org/understanding-the-css-bem-convention/
https://blog.openreplay.com/writing-cleaner-css-code-with-bem/
https://images.pexels.com/photos/14553707/pexels-photo-14553707.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

TECH

October 24, 2023

Floating Point errors in JavaScript

When learning JavaScript, you are warned that 0.1 + 0.2 != 0.3. The result is equal to 0.30000000000004.

This's not a JavaScript error; it's your processor doing this.

ARTICLE

November 8, 2023

How to Handle Work in High Pressure Situations

I am here to talk about how to handle work in high-pressure situations. Now, I reckon we've all found ourselves in a tight spot at work from time to time, where the pressure's higher than a cow jumping over the moon. But fear not, because I'm here to share some tips on how to keep your cool and handle those high-pressure situations like a pro.

TECH

November 8, 2023

Deploy a Flutter web app to Firebase hosting manually

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications (Mobile, Web, Desktop) from a single codebase.

Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices. With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).

In this blog post, I will show you how to deploy a Flutter web app to Firebase manually.

1. Create a Flutter web app (Skip this step if you have a Flutter web project already)

First, you need to download Flutter SDK to create your Flutter app. Go to Flutter’s Installation page and follow the instructions to install the Flutter framework. After you have installed the SDK, you can create your application.

Open your terminal and run the following command

flutter create web_example

This command will create a project inside the web_example folder.
We may run and debug our project in a Chrome browser by running the below command.

cd web_example
flutter run -d chrome

2. Build Release a Flutter project for web

Open your terminal, navigate to project folder and run the following command

flutter build web

After building is completed, contents are contained in /build/web folder as below

3. Create a project on Firebase

From browser, go to Firebase console with your Google Account and create a project in 3 steps:

After the project is created, it will be as below

4. Initialize Firebase Hosting

If you haven't installed Firebase CLI, please follow the installation document to install it.

Run below command to log in Firebase

firebase login

Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?

You can enter No or Yes.

A browser will be opened to link your Google Account.

Select "Allow" to Firebase CLI access your Google Account

Now your Google Account logged in Firebase successfully, you are able to start to initialize Firebase Hosting.

Run below commands:

firebase init hosting

Step by step, select options as below:

? Are you ready to proceed? --> Yes

? Please select an option: --> Use an existing project

? Select a default Firebase project for this directory: --> web-example-72287 (web-example)

? Detect an existing Flutter codebase in the current directory, should we use this? --> No

? Do you want to use a web framework? --> No

? What do you want to use as your public directory? --> build/web

? Configure as single-page app (rewrite all urls to /index.html)? --> Yes

? Setup automatic builds and deploys with Github? --> No

? File build/web/index.html already exists. Overwrite? --> No

5. Deploy to Firebase Hosting

Now, deploy the web app to Firebase Hosting by single command

firebase deploy

After deploy complete, we can check info of site in Firebase Hosting console

And here is the web-example site after being deployed to Firebase Hosting

Conclusion
Deploy a web app to Firebase Hosting is simple so it will reduce time and effort needed. Besides support manual deployment, Firebase Hosting also support automatic build and deploy with Github.

Firebase Hosting is a great choice to host your web application because it supports a lot of features besides basic hosting such as custom domains, HTTPS, and the scalability to handle huge amounts of traffic.

Refer to Firebase Hosting to learn more.

« 1 2 3 4 5 … 11 »

what we think

How to balance the current job with hobbies?

Mastering Conflict Resolution in the Workplace

October 20th – A Day To Honor Vietnamese Women

Visual Basic for Applications and its practical applications in daily life

Introduce about free DICOM image tools DVTK

Mutable Object In JavaScript And How To Change From Mutable Object To Immutable Object

1. What is Mutable in JavaScript?

2. How to copy values Object, Array are mutable?

3. How to create immutable Objects in JavaScript?

4. Conclusion

Writing Cleaner CSS Code With The BEM Naming Convention

1. What is BEM?

2. Benefits of BEM

3. How It Works?

4. When should we use BEM?

5. Conclusion

Floating Point errors in JavaScript

How to Handle Work in High Pressure Situations

Deploy a Flutter web app to Firebase hosting manually