Mustafa Dalga

A passionate developer who wants to be a pioneer at what he is doing.
8 min read

Adventures of a Front-End Developer - Migration of Front-End Project

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.
2 min read

Watch and Handle Changes with Web Storage Api — Cross Tab Communication

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.
2 min read

CSS Architecture Documentation | Heybooster

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.
2 min read

Heybooster Front End Naming Conventions

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.
6 min read

Adventures of a Front-End Developer | Our Work to Improve Web Performance

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 .
5 min read

How to Exchange Data in Different Vuex Modules

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.
2 min read

Vuex on large projects: How to structure it ?

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.
2 min read

Storing and Using Last Visited Page in Vue JS

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.
2 min read

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

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