November 21, 2023
Having multiple skilled developers in a software company is crucial for adapting to the ever-evolving target market and staying competitive in the tech industry. Here are some reasons why diverse skill sets are essential:
November 15, 2023
GraphQL is an open-source data query manipulation language intended for developing APIs.
- Provides an easy-to-understand data structure.
- Determine what you need or no need when you request.
- With many developer tools and easier upgrades in the future.
- One of the best solutions for microservices and complex systems.
- Using Hierarchical Structure.
- Way faster than other communication APIs.
- Easy to learn, use, and explore an API quickly.
- It only has a single endpoint.
- Fetching only the exact and specific data in a single request.
GraphQL supports many popular current programming languages such as:
Data access
Response data
Best suited
Validate error
|
Rest API |
GraphQL |
||
|---|---|---|---|
|
|
In the below example, I just want to get information on name, email, and phone number.
- The REST API returns a fixed data structure that includes: name, email, phone number, and many other information.
- The GraphQL API, on the other hand, allows you to specify exactly what data you need, so it will return the correct data you.
specified (name, email, phone)
[Reference Source]
November 15, 2023
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?
November 15, 2023
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.
November 15, 2023
Data type in JavaScript has been analyze to 2 type Primitive and Reference. By default, reference data types are mutable including function, array, object..
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.
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)
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 |
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.
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]
November 15, 2023
As we know, in most programming languages nowadays there are some common naming conventions, such as:
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.
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)
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:
BEM makes cleaner CSS code and makes it easy to understand and maintain.
When using the BEM, you will have a friendly structure that will not be confused with other CSS blocks. Thereby it makes reuse easier.
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.
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.
A BEM class name includes up to three parts:
The outermost parent element of the component is defined as the block.
Inside of the component may be one or more children called elements.
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.
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.
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.
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]
November 8, 2023
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.
November 7, 2023
Automation testing has many advantages and can greatly enhance the efficiency and effectiveness of software testing. It can help increase test coverage and improve overall testing accuracy. However, there are certain scenarios where manual testing still plays a crucial role and can’t be entirely replaced by automation. Here are a few factors to consider:
Usability testing focuses on understanding how users interact with the software and how easy it is to use. This type of testing is often based on the “look and feel” of the application, which automation testing can’t assess. While automation tools can interact with UI elements, human testers assess not only color, size and interaction between UI elements, but also position, inconsistencies in the UI, different screen resolutions and ensure that the UI meets the desired standards. Manual testing is especially useful for evaluating usability of an application, as human testers can provide valuable insights and observations about the user experience that automation may miss.
Exploratory testing is an important aspect of software testing. It involves unscripted and ad-hoc testing where testers rely on their knowledge, experience, and intuition to identify potential issues. It requires creativity, critical thinking, and the ability to adapt to changing circumstances. Human testers are better suited to perform exploratory testing as they can uncover unknown defects and assess the software's behavior in real-time, whereas automation performs predefined tests.
Automation testing typically requires initial investment in developing test scripts, setting up test frameworks. It takes much time and cost. This is why automation test is suited for long-term and large-scale projects, whereas manual testing is suited for smaller, short-term project. Manual testing can be quickly set up and executed without the need for extensive test script development.
Automation tests are written using programming languages or scripting tools. Similar to any software, they can have errors in the code such as incorrect conditional statements or data comparisons. These errors can cause inaccurate test results, leading to false positives which can pose challenges for your team.
If there are frequent changes in the software requirements or if the test cases need to be updated frequently, manual testing allows testers to quickly modify their approach and test cases accordingly, whereas automation testing can have challenge keeping up with rapid changes because making changes to test scripts can be complicated.
During the initial stages of development, when features are still developing and changing rapidly, manual testing is often preferred. Testers can provide early subjective feedback for improvement and help prevent late-stage bugs that are more costly to fix. Automated tests often require a stable environment, well-documented requirements, and a consistent user interface. In the early stages, these prerequisites may not be fully established.
In summary, automation testing cannot completely replace manual testing in all cases. A combination of both methods is ideal to achieve the best software quality. Testers can focus on exploratory testing, usability testing, and other areas where human judgment and creativity are essential, while automation can handle repetitive and predictable tests.
Image source:
https://www.freepik.com/free-photo/person-using-ai-tool-job_60363006.htm
November 6, 2023
Have you ever wondered how can an accountant create a web application without programming? Is there any solution to replace Excel with a web application with the following criteria: quickly setup, stability, ease of use, Granular access control ?
Pleasanter is a no-code/low-code development platform (Opensource) that runs on .NET. It has developed by the Implem Inc Japan since 2014. You can quickly create business applications without programming.