Mustafa Dalga

In this blog post I will explain how I upgraded our Heybooster front-end project which is built on the vue.js framework and what motivated me to do so. In our previous project we used the vue version of 2.5.11 and the webpack version of 3.6.0 and we had some problems with it.

Photo by Markus Spiske / Unsplash Heybooster is a client-based project. The data in the Heybooster changes depending on the client. The user can see different client information on different browser tabs under normal circumstances. However, we don’t want to show different client information in different browser tabs.

I have created a document to set a standard for writing CSS code at Heybooster. I also wanted to share this documentation as open source. We use SCSS as CSS Preprocessing. Our CSS architecture is generally based on the BEM. methodology. However, in some cases, we may be able to use OOCSS or SMACSS as alternative solutions.

In this article, you will find the naming conventions we used in our Heybooster front-end project. Variable Naming The camelCase naming convention is used to define a variable. Examples const dataSourceName = ''; const stepsConnectStatus = { 1: false, 2: false, 3: false, 4: false, }; const apiBaseUrl = {}; const bookmarkID = []; const loaderStatus = []; const axiosCancelStatusCodes = []; const notifications = []; Props Naming The camelCase naming convention is used to define a prop.

While I was starting out as a front-end developer at Heybooster, our product owner asked me to handle the following problems: Lead the development of solutions for web page speed issues, a problem for which we receive frequent feedback from users, Resolve bugs in the current structure, Develop new designs in the same way and responsively at a rate of 99% , Make sure we cover all userflows on the site .

Our previous article discussed the importance of using vuex modules in large projects. I will explain and show how we can exchange data between vuex modules in this blog post. In the course of using vuex modules, we may encounter situations such as the following: Using a different module state in an action.

If you are using vuex in a small project, you can keep state, mutation, getters, and actions in a single file. On the other hand, when developing a large project, we can divide vuex into modules based on categories, thereby keeping file sizes down, keeping the code cleaner, and increasing the chances of more than one developer being able to work on the project at the same time.

If a user has an ongoing transaction on a website, we would like them to continue from the last transaction to provide a better user experience. If a user registers on a website and then leaves the website after completing any step, we can ensure that the user continues from where they left off, even if the tab or browser is closed and then reopened.

How to create multiple mixins in one file and using specific mixin in vue js