Hello everyone, I will tell you about Vue Js Lifecycle and lifecycle hooks. Every system has a life cycle. It is created, updated, and finally exited from that cycle. Vue Js also has a lifecycle and there are hooks to connect to these lifecycles and run functions there, these are lifecycle hooks.

These hooks can be shown in the diagram as follows.

I will tell you about the hooks used in Composition API. These are:

🪝onBeforeMount()

The onBeforeMount hook occurs just before the component is mounted to the DOM. The onBeforeMount lifecycle hook happens right before the onMounted hook.

Type:

🪝onMounted()

The onMounted hook is the function that will be called when the component is added to the DOM.

Type:

🪝onBeforeUpdate()

The onBeforeUpdate hook is called whenever there is a change in the data of a component, but before the update is rendered to the screen. The onBeforeUpdate lifecycle hook happens right before the onUpdated hook.

Type:

🪝onUpdated()

The onUpdated hook is called when the component updates the Dom tree.

Note: This hook is called after any DOM update of the component, which can be caused by different state changes because multiple state changes can be batched into a single render cycle for performance reasons. If you need to access the updated DOM after a specific state change, use nextTick() instead. (https://vuejs.org/api/composition-api-lifecycle)

Type:

🪝onBeforeUnmount()

The onBeforeUnmount lifecycle hook is called just before a component is removed from the DOM.

When this hook is called, the component instance is still fully functional.

Type:

🪝onUnmounted()

Registers a callback to be called after the component has been unmounted.

This hook can for example be used to remove event listeners or cancelling timers or intervals.

Type:

I can add this as a note. These hooks are not called during server-side rendering.

In general, these are the hooks and features for Composition API, I hope this was useful to you.

See you in the next writing.

Vue Js Lifecycle Hooks was originally published in CNK Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello everyone, you may have heard of the Context API and the useContext hook separately many times. I will actually tell you the relationship and usage of these two definitions.

Firstly, Why you should use Context API?

You know that in React, props are passed to pass information from parent component to child component. But in a multi-component and complex related system, it becomes increasingly difficult to pass props. Because it needs to go through the components in between. This is called prop drilling.

The Context API is used to eliminate this problem.

For example, in this flow chart, when there is without Context API, it is necessary to pass the prop through the userProfile.js file in between, but when the Context API is used, it can be used directly in the file to be used without visiting the file or files in between.

So what steps do you need to perform to use it?

1. Create a context
2. Use that context from the component that needs the data.
3. Provide that context from the component that specifies the data.

Create a context

First, you will create a context and export it.

You can use default value as an argument in createContext.

Use the context

Suppose you have a component that takes level and children.

To use context in this component, we need to define the useContext hook and our own defined context.

This is where the useContext hook comes into play.

The component to be used at the beginning was like this,

When the context imported:

In this way, since we define the level value as context, we can call it wherever we want.

🔗 useContext hook tells React that the LevelComponent component wants to read the LevelContext.

Provide the context

The Provider component helps wrap the components which have access to our context.

The Provider component receives a prop called “value,”, which can be accessed from all the components wrapped inside the Provider.

That’s it! You saw the Context API writing style and where the useContext hook is used.

Generally, the Context API is used in these operations:

• Authentication
• Theming
• Responsiveness
• User profile management

I hope I have informed you enough about Context API and useContext. See you in my next post.

Context API and useContext was originally published in CNK Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hi everyone, today I will tell about the most used React hooks. First of all, what does hooks mean? let’s look at this.

Hooks were added to React in 16.8 version. It allows you to use state and other React features without writing class. Hooks are the functions which hook into React state and lifecycle features from function components. It does not work inside classes.

Alright, what are the hooks rules? There are 3 rules for hooks:

• Hooks can only be called inside React function components.
• Hooks can only be called at the top level of a component.
• Hooks cannot be conditional

Now that we have general information about React hooks, we can look at their types.

• useState Hook
• useEffect Hook
• useRef Hook
• useCallback Hook
• useMemo Hook
• useContext Hook
• useReducer Hook

🪝UseState Hook

The useState hook allows you to create state variables in React function component. In this way, you access and update certain values in components over time.

When we create a state variable, we must provide it a default value.

Below is a simple example where you can update the color state.

It is defined in [ ] with a const prefix, the first value is the changed or retained value and access is provided by this value. The second value is the state function, the state value is changed with this function, usually starts with “set”. On the other side of the equation are the useState function and its first value.

You can update the state with functions that update it, in this example, I updated it with onClick.

🪝UseEffect Hook

The useEffect hook allows you perform side effects in your component. Some examples of side effects are, fetching data, directly update the DOM and timers.

Let’s use a timer as an example.

When I do this way it will running continuously but I want it to run 1 time so I need to second parameter for useEffect.

useEffect(() => {
  //Runs only on the first render
}, []);

Final version with correct spelling:

🪝UseRef Hook

Refs are special attribute that are available on all React components. They allow you to create a reference to given element/component when the component mounts.

useRef allows us to use React refs. They are helpful when we want to directly interact with an element, such as to clear its value or focus it, as with an input.

🪝UseCallback Hook

The useCallback hook returns a memoized callback function. Memoization is caching a value so that it does not need to be recalculated. This allows us to isolate resource intensive functions so that they will not automatically run on every render. The useCallback hook only runs when one of its dependencies update and this can improve performance.

Using this way it won’t be rendered again when it doesn’t change.

🪝UseMemo Hook

The useMemo hook returns a memoized value. UseMemo hook to memoize the expensiveCalculation function and the useMemo hook only runs when one of its dependencies update. This can improve performance.

useMemo returns a value from the computation, which is then stored in a variable.

🪝UseContext Hook

In React, there are multiple prop requirement problems to pass data from one parent to two or more levels, and this is called prop drilling.

Context is helpful for passing props down multiple levels of child components from a parent component and sharing state across your app component tree. The useContext hook removes the unusual-looking render props pattern that was required in consuming React Context before.

I will talk more about this hook in my next post.

🪝UseReducer Hook

The useReducer is a state management hook like useState. The difference is that useReducer allows custom state function. This function is also called reducer.

useReducer, more helpful for managing state across multiple components that may involve different operations or “actions”.

useReducer hook accepts two arguments:

useReducer(<reducer>, <initialState>)

The reducer function contains your custom state logic and the initialState can be a simple value but generally will contain an object.

The useReducer hook returns the current state and a dispatch method.

I hope I have given enough information about hooks. In my next post, we will examine the useContext hook in more detail. See you 👋

React Hooks was originally published in CNK Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

In js, we sometimes use the back or forward button when switching or redirecting pages. But sometimes we need to use the browser’s back or forward buttons, and in this case, if we want to control these buttons and redirect, the goBack() function may not work.For this reason, we may need to somehow control this action (the action of pressing the browser’s back button) and direct it to the pages we want.For example, you are building a platform and you are using a form on your page where members need to enter their information, or you use a rich text editor such as Ckeditor/jodid etc and you want to display the final version of it on your next page.and after you see the final version here, you want to go back to the form page and make the necessary changes by pressing the Borwsers back button to edit the places you don’t like.Yes, you can do this by defining the goBack( ) function to the Button you have defined and designed on our own page.

<button onClick = {() =>history.goBack()}>Go Back</button>

But what if the user uses the browser back button? your page can go to the main page or to two previous pages if you didn’t edit it.For this reason, you should control the browser’s back button and make it act as you want. How can we do this? We can do this in two ways, at least I found these two methods, if anyone finds different methods, you can share them in the comments so that we can learn new methods together.

1-The first method is to disable the browser’s back button, that is, to prevent this process when the user wants to click the back button in the browser. In this way, the user will press the back button that we defined to go back and our goBack function will work and go to the previous page.You can use one of the following for this:

a) <button onClick = {() history.goBack()}>Go Back</button>

b) <a href=”javascript: history.go(-1)”>Go Back</a>

c) <a href=”##” onClick=”history.go(-1); return false;”>Go back</a>

2-The second method is to control the browser’s back button and send it to the page you want. So how do we do this? There are many articles and questions about this on Stackoverflow, you can find various answers there, but I will share with you the method that I think is the easiest and most understandable one, of course for Js.

const onBackButtonEvent = (e) => {

e.preventDefault();var currentLocation = window.location.pathname;

history.push(`${currentLocation}/mypage/new`)};

useEffect(() => {window.addEventListener(‘popstate’, onBackButtonEvent);return () => {window.removeEventListener(‘popstate’, onBackButtonEvent);

};}, [])

Now I’ll try to briefly explain what’s going on here. First of all, in order for our application to realize that the browser has pressed the back button, we add into the useEffect : window.addEventListener(‘popstate’, onBackButtonEvent); Of course, after we get what we want later, we can remove this : window.removeEventListener(‘popstate’, onBackButtonEvent);Well, there may be a question here. What happens if we don’t add => window.removeEventListener(‘popstate’, onBackButtonEvent);?As an answer, I can say that it won’t be in your mind until you try it, so even if I say yes or no, you can try the code I shared above by copying it to make it more permanent.

By doing this, => window.addEventListener(‘popstate’, onBackButtonEvent); we now know that onBackButtonEvent will work thanks to addEventListener.Now it’s time to determine what this function will do when called.

const onBackButtonEvent = (e) => {

e.preventDefault();

var currentLocation = window.location.pathname;

history.push(`${currentLocation}/mypage/new`)

};

Here we call our function hey bro you first make e.preventDefault(); and save me a burden and then the most important thing to me is to able to go to the page I want when I press the back button of the browser.We do this by taking the URL of the page, which I will explain in detail in my next article.

var currentLocation = window.location.pathname;

history.push(`${currentLocation}/mypage/new`)

In short, to summarize the situation, we filled the information from the form page and went to the preview stage, then when the user wants to use the browser’s back button instead of the button we put on the page, we direct him to the page we want, I explained it here based on the example of redirecting to the previous page, but you can redirect to the page you want).

Controlling and directing browser’s back button with JavaScript was originally published in CNK Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

What are Fibonacci Numbers ?

Fibonacci numbers are used to create technical indicators using a mathematical sequence developed by the Italian mathematician, commonly referred to as “Fibonacci,” in the 13th century. The sequence of numbers, starting with zero and one, is created by adding the previous two numbers. For example, the early part of the sequence is 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,144, 233, 377, and so on.

For more information : https://www.livescience.com/our-solar-system.html

Different methods for Fibonacci Sequence:

You will see that there are many resources and solutions on this subject when you search on the internet.

1.Loops

Examples of this can first be solved with loops.

a. While Loop

While a “while Loop” allows you to run a code, it will terminate your code execution when a specified condition is true but the condition is no longer true.

While doing this with the while loop, we can use different methods in our code by making small changes and get the same result.

As you can clearly see here, we first define the function, then we define “while loop” in it and return our result with “return”.As can be seen above, the only change here is that in the first application, we defined the “result” part in the function and we did not have to define [0,1] (as seen in Image two)in the console log while getting the output.However, if you want to reach the last element of the last list, not the number array, you should revise the “return” part as follows.

b. For Loop

The for loop is executed a certain number of times, and if the loop continues to satisfy the specified condition each time it returns, it continues to run in the loop.

In this example, we can reach the results we want by making a small change in the “return” part.We can bring a solution to this situation by adding a small change to the point of view.

I would like to show you the example below with a little change in two ways.

The point to be considered here is that in both examples, while arr = [0,1], in sample one , the value of “i” from zero but in sampe two “i” starting from 2.In order that the lengths of the list we get as a result are equal, the conditions inside the for loop must be adapted accordingly.But the other thing that catches your attention here is that the “arr.push” parts also look different, but if we examine them carefully, we see that they give the same result here.I tried to express this as visually below

Finally, if you want to take the desired number and output it to the screen and you want to do it according to certain conditions, you can do it as follows.

First of all, you must create the input and button part that will allow the user to enter and send the relevant arrangement on the html page.Then you should get the information the user has entered with getElementById.and you need to determine the action(the functions which we mentioned above ) with addEventListener that to be done after pressing the user the button to send input information.if you want to add various conditions or add restrictions regarding the data to be entered, you can specify that it is shown in the above example in html and javaScript files.

Document

Fibonacci Sequence Algorithm with Javascript was originally published in CNK Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

The software industry is going crazy on Agile matters. It is rapidly becoming the choice of software development when the climates are unpredictable or are expected to change over time.Here will try to help you gain knowledge on what is Agile, why Agile is better suited for these situations. We will also cover some of the most common Agile frameworks, like SCRUM and XP in-depth.Firsit of all we’re going to talk about Agile Fundamentals, why Agile? What is Agile? What are Agile values and principles? And what are the benefits and challenges of this approach?

After that we’re going to talk about how do you do Agile requirements and planning? What is the Agile approach to requirements? How do you write effective user stories? So user stories are something that we will learn about in Agile. How do you generate user stories?And at last we are going to talk about SCRUM which is one of the ways to implement Agile. We’re going to learn in detail about what are the practices and ceremonies of SCRUM.If we have enoug time we can talk about in this article we’re going to learn about an overview of XP and some of the practices and principles of XP.But if we dont we can talk about it in another article.Of course, while writing these, some terms may seem unfamiliar to those who are new to the field of Software Development.You can share these terms in the comments if you want and I can find extra explanation about them or they can be found easily from google.Actually agile is not a model, it’s a mindset. There were a lot of top leaders in the software industry that were building the software very successfully. And so they came together and said, “What is it that we are doing that is making us successful?” And they articulated what we call now the Agile Manifesto and Principles.

And as these Manifesto and Principles were crafted, there were models like Scrum and Kanban and XP that helped implement this mindset, that helped promote this mindset. So, you can see it’s not just these three but many other models came into being. The basic idea behind all of these models was that instead of building this whole one year cycle, you build in short cycles.So, you define little, you build, you test, and you learn, and then again, you just keep doing this. That way, you can adjust to the market quickly and then you are learning from your users quickly. And so the change became a norm because after every cycle, you may have a change.

And so, the software industry also has to learn how to respond to this change quickly and confidently. And the idea of continuous integration where a developer who is building the code, as soon as he commits the code or as soon as he finishes the code, it’s integrated with all the other components of that software. And then all the tests that verify whether the system is running are run. They are called the automated testing. So as soon as you commit the code, all of the tests are tested to make sure nothing else is broken in the system.

Now we will continue by briefly trying a few models that I think are important.

Predictive model: In this model, the customer knows exactly what she/he wants and the code is not interfered with in the process.

Adaptive model: The customer does not know exactly what he wants, he has an idea about what he wants and the process begins, but with the feedback, the project begins to take shape. The final product is created according to user requests.

Incremental model: We have an idea of what we want here, but as in predictive, the process does not consist of a single stage and we divide the stages into parts and do it. For example, you want to build a house and you make the outer walls of the house in this first incremental, you add the roof in the second, you attach the doors and this way you complete the pieces of the whole time and build the house .So here, we can actually associate it with both the Adaptive model and the Predictive model. Because if you get feedback on each Incremental piece and shape the final iron accordingly, this is similar to the Adaptive model, but if you stay fixed with the idea you started without returning, it is similar to the Predictive model in a way.

Iterative model:If we were to explain this with an example, think about if you want to go somewhere, and you need a vehicle for this, and you may decide to go with a scooter so that it will be cheaper at first, but you may decide to go with a scooter, but on the way, your mind will change and you can change it with an electric bike and then you will find the place where you want to go. You can change your mind to a car by saying that it is too far and it may rain while you are on the road. In short, you have a purpose, this is certain, but in this process, the product that will serve this purpose may change according to the needs of the user.

So what is Agile?

Now, if we refer to the waterfall method while explaining the network, I think it will be more understandable. When you look at the photo above, you will see the comparison of the agile and waterfall method. What are the common things between them? In both of them, there is a time frame to develop a product, there is a product that needs to be developed, there is a team that needs to develop this product, and there are processes such as testing and design in this development process.In Agile, processes are made in short parts and it is easier for you to understand that you need to take or take precautions in case of any disruption that may occur, new interventions (customer needs, etc.)

But in waterfall, if you have not determined the needs correctly, it is not possible in most cases to intervene in the situation until the product is released, because the intervention system to be used may turn upside down and this may cause great losses in terms of both time and cost.

If the needs are determined correctly and if the process takes a long time, people’s wishes may change this time. Besides, it is very difficult to determine the requiremnt most of the time. If a problem occurs and the problem is faked too much, the cost will be high.

Many negativities in the processes led to the development of Agile Software Development Manifesto. And these people met at a resort in Utah in 2001. They skied, relaxed, and also identified these four values and twelve principles.Because they also talk among themselves why so many projects have been unsuccessful. As you can see, they did not define a new process or new applications. They said that this is the common mentality of the method we found successful. They just defined a mindset that can help software development teams succeed. In summary, what the industry has realized is that software development is a creative process and we need adaptive methods to be successful at it. And the following 4 values have been determined.

The four core values of Agile software development as stated by the Agile Manifesto are:

• individuals and interactions over processes and tools,
• working software over comprehensive documentation,
• customer collaboration over contract negotiation,
• responding to change over following a plan

To briefly explain these items. First, “individual interactions on processes and tools”. What this means is that most of the time when there is a problem or we want to improve our processes, we always look, you know, is there an additional process that can help us? Is there another tool that can help us? And we do not focus on individuals and their interactions.Too often we don’t invest enough in individuals and interactions. Second, “software running on extensive documentation”. Like I said, that doesn’t mean you haven’t documented. You do it, you do the documentation wherever it’s critical, whatever it takes, but then what customers really care about is the software that works.Third, “customer cooperation rather than contract negotiation”. That’s why a contract is important because it defines a limit at which you should work, but only through collaboration can you understand the user’s needs and build better software. And the last one is “responding to change by following a plan”. Again, a plan is needed because it helps you stay on track. But we shouldn’t say no to change and ultimately build something that the user won’t need.

Well, Agile has no negative aspects, is it always very good? Of course, like everything else, we can’t expect it to be perfect in Agilene. It is very good in terms of process management and interaction, but what I can say negative about it comes out. For example, when we want to be able to adapt to changes immediately and are managed in small pieces, when there is constant change, we can get confused in the team and the project staff and I wonder what we are doing in the project.People say that what should we changed again and it can sometimes demoralize people.

In addition, new changes and needs in the Frontend will cause the database modeling to change constantly, which may cause developers to feel lost in control. In addition, the fact that the customer is constantly involved in the process and is in direct communication with the developers can create extra pressure on the developers. In addition, agile is not very much suitable for predictive and repeatable works. Yes it can be used here, but it can be used in traditional models or predictive models here.

Not: Predictive modeling is a widely used statistical technique to predict future behavior. Predictive modeling solutions are a form of data mining technology that works by analyzing past and current data and creating a model to help predict future outcomes.

Not: Traditional strategy development assumes that markets/industries are stable, but this is not the rule for most firms today. The strategy is built on some vital assumptions about the external environment and what the firm can control. planning, controlling and stopping.

Apart from this, there are 12 Agile Principles as I have listed below, which I will not mention in detail here. There are many explanations and resources on this subject, both on youtube and on google, you can get much more detailed information from here.

1-Our highest priority is to satisfy the customer through early and continuous delivery of valuable software.

2-Welcome changing requirements , even late in development. Agile processes harness change for the customer’s competitive advantage.

3-Deliver working software frequently, from a couple of weeks to a couple of months, with a preference to the shorter timescale.

4-Business people and developers must work together daily throughout the project.

5-Build projects around motivated individuals. Give them the environment and support they need, and trust them to get the job done.

6-The most efficient and effective method of conveying information to and within a development team is face-to-face conversation.

7-Working software is the primary measure of progress.

8-Agile processes promote sustainable development. The sponsors, developers, and users should be able to maintain a constant pace indefinitely.

9-Continuous attention to technical excellence and good design enhances agility.

10-Simplicity–the art of maximizing the amount of work not done–is essential.

11-The best architectures, requirements, and designs emerge from self-organizing teams.

12-At regular intervals, the team reflects on how to become more effective, then tunes and adjusts its behavior accordingly.

Well, if this Agile is so important, you can think about which companies are using it, here are some companies that use agile; Google, Apple, Facebook, Yahoo, Spotify, Adobe, AirBnB, SpaceX,Microsoft.

Agile Frameworks

So as we know, Agile is a mindset. So the question is, how do you actually apply this mindset on a software development process? Well, the good news is that there are a lot of frameworks that are available that you can use to apply this Agile mindset for your team or for your project. But there’s no silver bullet. So you have to customize this framework to meet the needs of your team, your project, or your organization. And the key to customization is to make sure that you stay true to the principles and the values of Agile and do not get bogged down by the rituals or practices of a specific framework. So, let’s familiarize ourselves with some of these frameworks which are out there. One of the most common ones is called Scrum.

And Scrum is based on this one to four week cycle, where you take part of your project and you do your define, your develop, your design and you test your software and so your product is developed incrementally. Another popular one is called Kanban, which is based on a continuous flow model where you basically try to optimize your existing software development process. Then of course there is a combination of these two called Scrumban where you use Scrum as your primary framework. And then you use Kanban to optimize your flow within your sprint.

Another popular one which is similar to Scrum is called XP. And so XP has most of the practices of Scrum but it also defines some engineering practices which are very crucial for an Agile team. Then of course there is the hybrid of Scrum and XP. Another one which has become quite popular recently is called Lean Startup which helps you if you have a lot of unpredictable market or industry and you want to really prove your solution before you implement it. So Lean Startup helps you in that area. And there are many more. And more often than not, organizations actually end up customizing some of these frameworks to meet the needs of their team, or their project, or the organization. And if I may repeat, I want to make sure that you stay true to the Agile principles and practices and do not get bogged down by the rituals or practices of a specific framework. In terms of popularity, Scrum is by far the most popular of all. It’s about 70% of the Agile teams use either Scrum or one of its variants. And that’s how sometimes, people equate Agile to Scrum, which, of course, you can see that it’s not true. There are so many frameworks out there that you can use for your Agile implementation.

Scrum teams usually work with 2-week sprint series. Each sprint proceeds with a sprint planning meeting. The product owner and development teams also attend this meeting. And according to this meeting, the tasks are taken from the Product Backlog to the Sprint Backlog. If there is an unfinished business at the end of the sprint, you can take it back to the sprint backlog. And all the work is “todo” from the Scrum Board. It is followed from the “in progress” and “done” fields and discussed at daily stand-up meetings. In Scrum projects, a product or function is expected to be obtained at the end of the sprint. At the end of the sprint, new features are shown by making a Sprint review. In addition, a Retrospective meeting is held to improve performance in the new sprint. For this reason, it is tried to be corrected by determining what went well or not well during the sprint.

There are no two-week sprints and sprint backlogs in kanban. We can say that the work continues regularly by taking the work from the previous column of the empty columns (“todo” “in progress” and “done”). The works from the Kanban board are tracked and there is no time constraint, so the work is constantly finished. The most important thing here is to bring a work restriction to the columns. For example, there can be a maximum of 1 job in the “in progress” part. Daily meetings are held in kanban, like scrum, and new features are introduced, but unlike a certain time interval.

User Story ?

I think there is another important issue that we need to focus on is the user story.A user story is the smallest unit of work in an agile framework. The purpose of a user story is to express how a piece of work will bring back a certain value to the customer. So how should user stories be. We can summarize this under 6 headings;Independent, Negotiable, Valuable, Estimable, Small, Testable.Since the subject titles are clear, I will not go into details.I would like to point out that these titles are only for creating a perspective and emphasizing their importance. These are subject to change and extra titles can be added to them.

Story map?

One of the most popular problems faced by product development teams is the revision of requirements by customers repeatedly during development work. Although the story map makes our work easier, the dynamic and harmonious relationship and priorities of the product functions represented by these stories are simple and straightforward for anyone working on the project. To put it in an understandable way requires a separate study.

The purpose of Jeff Patton’s Story map is to visualize the needs of a product within the scope of the product in a hierarchical manner and to ensure that the overall impact of possible new requirements can be understood by all participants.Situations that can be considered technically detailed should be written in a simple and common language owned by all participants. In addition, they can be updated during the product development process. All stakeholders related to the project can be included in this study. User story It allows everyone to meet at the same point as an idea.

Scrum

As you know, the Product owner collects all the necessary inputs from users, customers, etc., and the product Backlog is created.If the team is ready, the sprint planning meeting starts. During this time, if the team has questions, the product owner answers them. Then Sprint Backlogs are created here and sprints are planned.We talked about Scrum in general terms and how it works, now we will talk about the important terms here in more detail.

Product Owner: Prioritizes the work in Scrum.Defines what needs to be done and in what order. Product Owner is going to talk to the executives, the team, the stakeholders, clients, users, and will try to define what exactly needs to be built. And so that will create something called a product backlog,which is basically a list of user stories which are prioritized and defines what needs to be done. Product owner reviews stories with the team and helps answer any questions or clarifies anything that is not clear.In short, he is the person who determines what work the Development Team will do in the Scrum Team. In this sense, he is the manager of the “Product Backlog”.Responsible for clarifying and prioritizing business requests.

Scrum Master: The Scrum Master is the person who takes part in the Scrum Team and coaches the team.Helps the team stay true to the Scrum values and principles, and then you will also notice that the Scrum Master helps facilitate most of the meetings in the team.And then if there are any roadblocks,then he will be the one who will drive the resolution of some of these roadblock.It strives to increase the harmony within the team, the harmony and communication between the team members.

Product Backlog Refinement (Backlog Grooming):It is a business process where the Scrum Team reviews the Product Backlog and makes the necessary adjustments, making sure that each item in the list is detailed and understood with all its clarity. Those are (informal meetings ) not in the Official Scrum Guide, but are often organized by the product owner.

Development Team: Do most of the building of the software, and it includes the developers and testers and everyone.Team is ready to sprint, they get together for a meeting called a Sprint Planning Meeting, where the whole team gets together and then they pick the top stories that they can work on in the existing sprint.In summary, the “Development Team” is the development team whose number varies from 3 to 9, taking as much work as it can do during a certain Sprint from the Product Backlog, which is the Product Owner’s to-do list, according to the priority determined by the Product Owner.

Product Backlog:The Product Backlog is a single list of everything needed in the product. Each item recorded in the Product Backlog is called a “Product Backlog Item.To summarize this in the shortest way, the work that needs to be done for the product can be explained as the list of features that the product should have.

Sprint Planning Meeting : Where the whole team gets together and then they pick the top stories that they can work on in the existing sprint. And the product owner reviews those stories with the team and helps answer any questions or clarifies anything that is not clear.

Sprint Backlog: The Sprint Backlog is a timed work list that keeps the content of a team’s work during the Sprint.

Daily Standup: Who participates in daily standup? What is its purpose? How can we get a good yield, now let’s talk about these a little bit.Usually the Core team and also the stakeholder can join to get information if needed or wanted.The key here is to cooperate with daily planning and check how things are going.And daily standups shouldn’t be long and everyone should be able to see the board which the works are written.This topic should be kept short, because a topic that you want to focus on may not be of interest to others and this issue should be resolved later, after daily standup. This should not waste time for others.

Sprint Review:Sprint Review is a meeting held at the end of the sprint and lasts for a maximum of 4 hours but an average of 1–2 hours. The main purpose of Review is to determine the value produced in the sprint and to update the Product Backlog accordingly.Here you start with summarizing what you planned, what you finished, what were your learnings, what were the road blocks, until you summarize what exactly happened in your sprint?You get some feedback, and based on that you can adjust your future direction. Who do you invite? Your core team members, your stakeholders and if there’s anyone else you want, also them

Stories: Stories are items that contain information about the work that a team and software developer undertake to complete during the sprint, taking into account the effort that will be spent.

Sprint Retrospective: Talk about process not about product.Not everything goes well during the process and sometimes some things need to be changed or updated. Therefore, questions arise in your mind to make the next processes better by giving good answers to them. How can we do better? What went well and what didn’t go well in the last sprint. Only the Core team participates in this.

Burndown/Burnup chart: Shows the amout of work left over the days of the sprint.Are we gona make it or not? Do we need additional help? We are going to use it for tracking our sprint.

How can we do Sprint Planning?

We can do sprint planning like this. First, we get a story (of course, in the order of priority and importance that we determined as a result of the meetings and arrangements we made before) and if our capacity is full, we start them, if not, we get the next story until our capacity is full.First of all, we determine the sprint capacity, while being realistic and making use of previous sprints and experiences. Then we ask ourselves “what are we trying to achieve in this sprint?” and we review the sprint goal, we review potential stories, the product owner shares and explains what those stories are generally.

Then we talk about how to apply the stories, what are the tasks we need to do, and we make a decision. And then if the thing is not accomplished, what was originally suggested abandons the process and then you can improve the goal. Once this is done, the entire team commits to “yes, we are ready and committed to finishing these stories”. And then once the commit is made, you put the stories on the quest wall and start executing.

Resources;

1-www.agileturkey.org

2-https://www.atlassian.com/agile

3-https://agilemanifesto.org/

4-https://agilemanifesto.org/

What is Agile and Scrum? was originally published in CNK Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

Flutter projelerimizde kimi zaman Android ve iOS için farklı görünümler tasarlama ihtiyacımız doğabilir. Bu senaryomuzu en kolay mantık ile aşağıdaki şekilde gerçekleştirebiliriz.

Bu yöntem basit manada işimizi görse de hem kodun okunabilirliği açısından hem de yarın bir gün örneğin iOS tarafında kendi tasarladığımız custom bir widgetı kullanmak istediğimizde projemizi düzenlemek bizim için zahmetli olacaktır. Bu yüzden şimdi factory method düşüncesi ile widgetlarımızı bize üretecek bir arayüz tanımı yapalım.

Yazdığımız bu soyut sınıfı implemente eden sınıflar createiOSWidget() ve createAndroidWidget() methodlarını doldurmak zorunda olacaklar. Biz de iki platforma spesifik olarak yazmak istediğimiz sınıflara bu arayüzü uygulayacağız. Örneğin bir Switch butonu yazalım ve üzerinde konuşalım.

SwitchPlatform sınıfımız oluşturduğumuz arayüzü uygulayıp geriye iOS için CupertinoSwitch; Android için Switch widgetlarını geriye döndürmektedir. Her iki implementasyon için de istediğimiz modifikasyonları yapabilmekte ve widgetlarımızı yönetebilmekteyiz. Ayrıca widgetlarımızı StatefulBuilder yapısı ile sarmalayıp state değişikliklerinden etkilenmesini sağlayabiliriz. Burada her iki widget’ımızı da StatefulBuilder ile sarmalayıp buton etkileşiminde setState callbacki ile değişen durumumuzu ekranda da görebilmiş olduk. Tabii direkt oraya bir Statefull sınıf da verebilirdik. Benim bu şekilde hoşuma gitti daha tatlı geldi , size de tatlı gelen farklı yollar varsa belirtmekten çekinmeyin :).

Umuyorum faydalı olabilmişimdir , iyi çalışmalar , mutlu yıllar 😊.

Referans kaynak:

Do Flutter apps dream of platform aware widgets?

Github:

flutter-playgrounds/platform_specific_widget_factory at master · SamedHrmn/flutter-playgrounds

Flutter | Platform Spesifik Widget Tasarlamak (iOS&Android — Factory Pattern) was originally published in CNK Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello, I am here with the second part of the article on Sass and Scss. In this part, I will talk about the life-enhancing features of Sass and Scss.

Topics we will talk about in this part:

• Map - get
• Nesting
• Mixin
• Function

💡 Map - get

The map-get structure actually resembles the switch case. The defined variable can take more than one state and value, and we can assign the value we want from these states by specifying when using it.

To understand better, let’s look at an example:

(SASS)

Here, I defined three states named light, gray and dark for the color variable and assigned color values to these states.
Likewise, I assigned small, medium and big states to the size variable and specified the pixel values.
When I come to the sections to be used, when you specify it as map-get($state name, assigned value), I will display in the CSS document that the value I have chosen is assigned.

❗️An important warning should be made for the Sass file: These situations must be defined side by side, it gives an error one after the other.

(SCSS)

In Scss, there is no obligation to write side by side, you can also make your definitions one under the other. It can be used in two ways as in the example. If you want, you can give the values directly, or you can use them by specifying that they are map and key.

💡Nesting

Rather than repeating the same selectors over and over again, you can write one style rules inside another. Sass will automatically combine the outer rule’s selector with the inner rule’s.

(SASS)

I mentioned in Sass that spaces are important. You can use spaces to indicate which element is below which element without repetition.

(SCSS)

In scss, we use curly braces to indicate that they are children of each other. It is sufficient to add curly braces to cover the nested items.

💡Mixin

Mixins allow you to define styles that can be re-used throughout your stylesheet. So you don’t have to repeat the same style elements over and over. Simply call the mixin you want to use with include.

First, we define the mixin, which includes recurring features, as @mixin mixinname. Then you can come to the box class you want to use and call it statically as @include mixinname.
If you want, you can give parameters to the mixin to use it dynamically. Thus, you can make it easier to use by changing the color or size you want with the parameter.
If you want to define more than one parameter and call it with a single parameter, you must specify it while defining the mixin, otherwise, if you give the direct value, it will be based on the first parameter. If you do not want it to be based on the first parameter, you must call it with the name of the parameter you defined ($height:1000px). This time, if you do not define both parameters with :null, it will give an error because :null means that this parameter can also be empty.

Scss is also used in the same way, only the semicolon and curly brackets are different.

💡Function

Functions allow you to define complex operations on SassScript values that you can re-use throughout your stylesheet. They make it easy to abstract out common formulas and behaviors in a readable way.

Operations such as for loop, if-else structure, mathematical operations can be used within functions. Returns a value with @return.

As in the example, the function is defined and the style element is added according to the return values and the value it is called.

Scss is also used in the same way.

We have come to the end of the second part of the Sass & Scss article, I will talk about other topics in the next parts.
See you in the next parts 👋

SASS & SCSS — PART 2 was originally published in CNK Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

Merhabalar arkadaşlar bu yazımda mobil dünyasında çokça kullandığımız haritalardaki işaretlerden bahsedeceğim. Bildiğiniz üzere konum adresimiz gönderirken veya bir konumu bulmak için işaretler kullanırız ve o adrese doğru yolculuk ederiz. Bazen ise bu adresler bir banka ATM’si, bazen bir restoran, bazen bir hastane gibi devam etmekte. Bazı yerlerde düşünüldüğünde birden fazla ATM bankasını işaretlemek zorunda kalıyoruz ve burada işaretler iç içe giriyor ve kaç ATM bankası sayısını bilmekte zorlanıyoruz. Haritalarda bu kısmı düzeltmek için Google Maps’te kullandığımız Cluster yapısını bugün değineceğim.

💻 İşaretçilerimizden önce google maps’imizi kuralım ve ekranımızda gösterlim. Eklememiz gereken iki kütüphaneyi app modulü altında dependency kısmında ekliyoruz. Birincisi Google Maps servisimiz ikincisi ise Cluster yapımız için kullanacağız. Eğer bu yazı tarihinden sonra güncellemeler geldiyse güncel değerlerini giriniz.

//Google Maps
implementation 'com.google.android.gms:play-services-maps:17.0.1'
implementation 'com.google.maps.android:android-maps-utils:2.2.5'

Kütüphanelerimizi eklediğimize göre diğer bir kısım olan Google Map API key alıyoruz ve local.properties MAPS_API_KEY=? yazıyoruz ve manifest dosyamızda meta data olarak ve google gms version meta datamızı ekliyoruz. İnternet izni ve lokasyon bilgisini almak için izinlerimizi ekliyoruz. Meta datamız <application... tagın içerisinde olmasına dikkat ediyoruz. Eğer uygulamamız API leveli 28 ve üstü ve kütüphanemiz 16.0.0 üstü ise Google apache.http.legacy metadatamızı eklememizi istiyor aksi takdirde eklememize gerek olmadığı yazmakta.

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />

<application...

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" /> 

<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />

<!-- Eğer api levelimiz 28 ve üstüyse eklememiz gerekiyor-->
<uses-library
    android:name="org.apache.http.legacy"
    android:required="false" />

</application>

Kullanıcıdan lokasyon iznini isteyeceğiz neden kabul etmesi gerek hakkında bilgi vereceğiz. İzinler hakkında çok yakında bir yazı daha gelecek. Şimdilik izin için istenen kodu aşağıdaki gibi yazıyoruz.

Şimdi xml dosyamızı düzenleyelim main sayfamızda bir framelayout koyarak fragmentımızı koyacağız.

Fragment yapımızı tasarımını yapalım.

MainActivity’de fragmentımızı ekliyoruz.

Tasarımlarımız tamamladıktan sonra fragment yapımızı yazalım.Boş bir fragment yapısı oluşturuyoruz. Maps koyacağımız fragment view supportMapFragment sayesinde fragment yapımızı setliyoruz.

//onCreatedView kısmında view layoutumuzu setleyip dönüyoruz.
View view = inflater.inflate(R.layout.fragment_map, container, false);
//initialize map fragment
SupportMapFragment supportMapFragment = (SupportMapFragment) getChildFragmentManager().findFragmentById(R.id.google_map);

Artık nesnesini ürettiğimizin supportMapFragment yapısında getAsyncMap fonksiyonumuzu çağırıyoruz. Asenkron fonksiyonlar uygulamamız açılırken yeni bir thread açarak asenkron bir şekilde çalışmasını sağlar bu sayede kullanıcı UI ekranında kasma görmemekte ve stabil bir şekilde arka tarafta isteklerimizi atarken kullanıcı uygulamada gezinebilmeyi sağlamakta.

private GoogleMap mMap;
private ClusterManager<MyClusterItem> clusterManager;

supportMapFragment.getMapAsync(new OnMapReadyCallback() {
    @Override
    public void onMapReady(@NonNull GoogleMap googleMap) {
       mMap = googleMap;
    }
});

onMapReady fonksiyonumuz override ederek artık googleMap nesnemize erişebilmekteyiz. Private olarak sınıfımızın içerisinde fonksiyonlarımız erişmesi için GoogleMap’ten mMap nesnesine eşitliyoruz.

Sırada Cluster’larımızı yerleştirmekte. Öncelikle MyClusterItem adlı bir sınıf kuruyoruz ve ClusterItem’dan impelements almasını sağlıyoruz. ClusterItem kütüphanesi import ediyoruz.

import com.google.maps.android.clustering.ClusterItem;

MyClusterItem yapımızda new bir position için latitude and longitude değerlerini constructor yapımızda alıyoruz ayrıca her bir yer işareti için title ve snippet alanı alıyoruz. ve ClusterItem’dan implements aldığımız fonksiyonlarımızı override ediyoruz. Pozisyon değeri null bir değer olamaması için NonNull annotation yazıyoruz. Şimdi setupCluster() fonksiyonumuzu oluşturuyoruz. Bu fonksiyonumuzda ClusterManager nesnemizi setliyoruz. Ayrıca başlangıç olarak İstanbul kordinatlarını veriyorum ve açıldığı zaman map ilk olarak İstanbul açılmasını sağlıyoruz

ClusterManager nesnesi oluşturuyoruz ve bu nesnemize context ve oluşturduğumuz mMap(GoogleMap) nesnesini consturctora veriyoruz. Eğer activity kullanıyorsak thisdiyerek context yapısına erişebiliriz. mMap yapımıza setOnCameraIdleListener() yapısına oluşturduğumuz clusterManager nesnemizi veriyoruz. Bu sayede clusterManager yapımız map hareketliliklerini dinleyerek işlem yapacaktır. Ayrıca Mapte tıklama hareketlerini de setliyoruz. Yer işaretlerimizi oluşturmak için setMarkerList() fonksiyonumuzu yazıyoruz.

Datalarımızı yüklüyoruz. Buradaki değerleri ben Mock data olarak ekledim. Eğer servisten gelen verileriniz var ise burada setlemeniz gerekmektedir. Son olarak Fragment yapımız aşağıdaki gibi olmaktadır.

Sonuç olarak belli bir alanda birden fazla yer işaretleri olduğu zaman eğer haritayı büyüttüğümüzde yer işaretleri toplanarak kaç tane yer işareti olduğunu gösteren haritamızı elde etmiş oluyoruz.

Uygulamanın github linki;

GitHub - fatihkurcenli/ClusterMarkersMap: ClusterMarkers with Google maps using Java Language

📚 Kaynaklar

• Maps SDK for Android Utility Setup | Google Developers
• Google Maps Android Marker Clustering Utility | Maps SDK for Android

Bir sonraki yazıma kadar görüşmek üzere keyifli kodlamalar dilerim. :)

Google Harita ile Yer İşaretleri was originally published in CNK Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello, in this article I will talk about Sass and Scss. Let’s first look at what Sass and Scss are, then let’s take a look at their features.

Topics we will talk about in this section:

• What is Sass?
• What is Scss?
• Install Sass
• Converting Sass file to CSS file
• Sass and Scss Spelling Rules
• Variables in Sass and Scss

💡 What is Sass?

Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor. In other words, we can say that CSS is translated into the programming language.

It is there to avoid confusion and repetition that occurs when long CSS codes are written. It compiles the codes written with the logic of the programming language and converts them to CSS codes.

💡 What is Scss?

The difference between Scss and Sass is the syntax difference. What are these syntaxes? Curly braces and semicolons. It is preferable for those who cannot switch directly from CSS to Sass. In short, we can say that it is the version of Sass that is closer to CSS.

Now that we have learned what Sass and Scss are for, let’s look at how to install them.

💡 Install Sass

For installation, you will see that there are various installation paths from Sass’s site https://sass-lang.com/install. For this, the application can be downloaded and used, it can also be used by installing from the terminal. I prefer to install via npm. The code you need to type in the terminal is as follows:

npm install -g sass

In this way, you include the Sass and Scss structure in your project.

💡 Converting Sass file to CSS file

• In order to convert the Sass or Scss files to a CSS file, the css.map file runs in the meantime and this file does the conversion operations. There are several methods to provide these operations and convert them to CSS files. The first of these methods is to specify the Sass file you want to convert and the .css extension you want to convert manually in the terminal. For this you have to enter the following command:

sass index.scss index.css

• Another method is to use extensions. As soon as we save the code with the extension, there are extensions that enable compilation and conversion to .css code. VS Code offers us a plugin called Live Sass Compiler for this. With this plugin, you can convert Sass and Scss files to .css files.

💡 Sass and Scss Spelling Rules

📍 Sass

One of the most distinctive main features of Sass is the absence of curly braces and commas. As in CSS and Scss, you will not get an error when you do not put them, on the contrary, you should not use these elements. It’s actually a great preprocessor for those who forget continuous semicolons and curly braces.

Another spelling rule is indentation. The indentation is very important in Sass because the features you want to specify are determined according to which element they belong to.

In the example below, the properties of the box are specified in a tab. If the title is in line with the box’s properties, this title is now the child element of the box, that is, it is specified as .box.header in CSS. Likewise, if the content class is under the header, this time the content is the box and the element under the header. If the content was at the level of the box, it would have been a separate class.

📍Scss

Curly braces and semicolons are used in Scss, so it is very similar to CSS, but of course, it has many different features from CSS, which I will talk about in the next topics. Unlike Sass, indentations have no meaning. Indent as much as you want, the elements do not affect each other.

💡 Variables in Sass and Scss

Variables in Sass and Scss can be used by defining them and calling them wherever desired. This allows you to easily call ($name) by the name we choose, without the need to specify the same color or the same size all the time.

Values that are not defined in any element at the top are global variables. If they are not changed, they can be used everywhere with the same value.

There are local variables as well as global variables. Local variables are defined in the specified scope and are valid in that scope. Even if there is a local variable with the same name, they do not change the global variables, they can only change it in a single case, which changes the value defined above after making the local variable a global variable by typing !global next to the variable value defined in the scope. In addition, in the scope where a local variable with the same name is used, the local variable is checked first.

We have come to the end of the first part of the Sass and Scss article, I will talk about other topics in the next parts.
See you in the next parts 👋

SASS & SCSS — Part 1 was originally published in CNK Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.