mucahid
.dev
  • Home
  • About
  • Projects
  • Blog
  • Media
  • Contact
  • Links
en

­čô░ Blog

I love to learn about programming and coding. And while I learn some new things, I also like to share my knowledge with the community. So I share my notes and experiences as articles. I share the articles in Turkish on Medium. You can find my medium account on the Contact page. I would be glad to hear your feedbacks and suggestions. And also if you wan't to get email updates, you can subscribe to my newsletter. I will send you the latest articles and updates.

Search article by topic

state
state-management
react-query
react
best-practices
writing
business
documentation
engineering
soft-skills
habbits
setup-guide
environment
macbook
installation
setup
javascript
undefined
difference
null
links
api
url
tutorial
repository-pattern
github
git
ui-library
version-control
npm
policy
package
package-manager
publishing
packagejson
semantic-versioning
nodejs

Search article by year

2022
2021
Article Image
state
state-management
react-query
react
best-practices
React QueryÔÇŐÔÇöÔÇŐYou do not need a Global State Manager

React QueryÔÇŐÔÇöÔÇŐYou do not need a Global State┬áManager Today I wonÔÇÖt give you something that you canÔÇÖt find in the documentation of @tanstack/react-query. So you can find more detail on the documentation. IÔÇÖll give you most use cases with examples and some of my experience with @tanstack/react-query. What is React Query in a nutshell? 2 hooks + 1┬áutility 5 kb ready-to-use highly configurable You can use @tanstack/react-query and your global state management together. And with @tanstack/react-query you can fetch, cache, and update data in your React and React Native applications all without touching any ÔÇťglobal stateÔÇŁ. So time to replace some of your state management logic with @tanstack/react-query. Why should you use @tanstack/react-query in your┬áproject? You canÔÇÖt mess it up. Yes if you use global state management and you donÔÇÖt have enough experiences in react you can easily knot your project. But with react-query, you canÔÇÖt do that even if you want it┬á:) It gives us the power of best practices of fetching with its own states, (like isLoading, isError, error,┬áetcÔÇŽ) Powerful cache and stale┬ásystem. Provide shorter codes. So at the end of the day, you will delete lots of line codes in your codebase. I wanna show my notes on react-query. So letÔÇÖs look at some key use┬ácases. Installation yarn add @tanstack/react-query @tanstack/react-query/devtools axios Setup I will go with a next app. And you can also use a free API. (apilist.fun) You should import QueryClientProvider, and QueryClient to your main App file and wrap your component with QueryClientProvider like┬ábelow. Then you should create a queryClient with QueryClient like below and you should give this queryClient to QueryClientProvider. And to see dev tools we should import ReactQueryDevtools and write it inside the QueryClientProvider. And set it in a position to see┬áit. import '../styles/globals.css'import type {AppProps} from 'next/app'import {QueryClientProvider, QueryClient} from '@tanstack/react-query'import {ReactQueryDevtools} from '@tanstack/react-query/devtools' function MyApp({Component, pageProps}: AppProps) { const queryClient = new QueryClient() return ( <QueryClientProvider {...pageProps} client={queryClient}> <Component {...pageProps} /> <ReactQueryDevtools initialIsOpen={false} position="bottom-right" /> </QueryClientProvider> )}export default MyApp APIs useQuery Basic Fetch We can use useQuery hook to fetch datas like below. it will return us lots of things. Like data, isLoading, error. import type {NextPage} from 'next'import {useQuery} from '@tanstack/react-query'import Link from 'next/link'import axios from 'axios' const Home: NextPage = () => { const {data, isLoading, error} = useQuery( ['users',] async () => { return await axios.get('http://localhost:4000/users') }, ) return ( <div> {isLoading && <>Loading...</>} {error && <>Error: {error.message}</>} {data?.data.map(item => ( <p key={item.id}>{item.name}</p> ))} </div> )} export default Home Advanced Fetch isFetching You can see the fetching moment by isFetching like┬ábelow. refetch Or you can refetch with your action. You can give this utility to a onClick or anything that you want to trigger┬áby. import type {NextPage} from 'next'import {useQuery} from '@tanstack/react-query'import Link from 'next/link'import axios from 'axios' const Home: NextPage = () => { const {data, isLoading, error, isFetching, refetch} = useQuery( ['users'], async () => { return await axios.get('http://localhost:4000/users') } ) return ( <div> <nav> <Link href={`/`}>Home</Link> <Link href={`/users`}>Users</Link> <Link href={`/users-rq`}>Users-RQ</Link> <Link href={`/users-rq-ssr`}>Users-RQ-SSR</Link> </nav> <div> {isLoading && <>Loading...</>} {isFetching && <>Fetching...</>} {error && <>Error: {error.message}</>} {data?.data.map(item => ( <p key={item.id}>{item.name}</p> ))} <button onClick={refetch}>Fetch Users</button> </div> </div> )} export default Home Info About┬áTimes 1000 => 1 second 5000 => 5 seconds 5000000 => 5┬áminutes cacheTime default => 5000000 / 5 minutes It will cache the data for 5 seconds if you write 5000 like┬áme. staleTime default => 0 / 0 seconds Your data that you fetch will be stale data after 4┬áseconds refetchOnMount default => true other options => ÔÇťalwaysÔÇŁ |┬áfalse refetchOnWindowFocus default => true other options => ÔÇťalwaysÔÇŁ | false Focus = We are doing something outside of the browser or outside of our app tab then we are returning to our app tab. This will fetch the data again if you focus your app again. For example, if you open another app or another tab then if you come back to your app page, it will fetch the data┬áagain. import type {NextPage} from 'next'import {useQuery} from '@tanstack/react-query'import Link from 'next/link'import axios from 'axios' const Home: NextPage = () => { const {data, isLoading, error, isFetching, refetch} = useQuery( ['users'], async () => { return await axios.get('http://localhost:4000/users') }, { cacheTime: 5000, staleTime: 4000, refetchOnMount: true, refetchOnWindowFocus: true }, ) return ( <div> <nav> <Link href={`/`}>Home</Link> <Link href={`/users`}>Users</Link> <Link href={`/users-rq`}>Users-RQ</Link> <Link href={`/users-rq-ssr`}>Users-RQ-SSR</Link> </nav> <div> {isLoading && <>Loading...</>} {isFetching && <>Fetching...</>} {error && <>Error: {error.message}</>} {data?.data.map(item => ( <p key={item.id}>{item.name}</p> ))} <button onClick={refetch}>Fetch Users</button> </div> </div> )} export default Home refetchOnWindowFocus and staleTime staleTime: 10000,refetchOnWindowFocus: true, If we use this together and if the data is not stale, we will not fetch data again, even if we pass refetchOnWindowFocus: true. refetchOnWindowFocus will fetch if your data is a staled┬ádata. Of course you can get over this problem if you need. Just pass ÔÇťalwaysÔÇŁ as value. like┬ábelowÔÇŽ staleTime: 10000,refetchOnWindowFocus: "always", refetchInterval (Polling) default => false This will fetch data on every timespan which you wrote┬ábelow. refetchIntervalInBackground default => false This will fetch data even if your focus is not on your app tab or browser┬áeither import type {NextPage} from 'next'import {useQuery} from '@tanstack/react-query'import Link from 'next/link'import axios from 'axios' const Home: NextPage = () => { const {data, isLoading, error, isFetching, refetch} = useQuery( ['users'], async () => { return await axios.get('http://localhost:4000/users') }, { refetchInterval: 2000, refetchIntervalInBackground: true, }, ) return ( <div> <nav> <Link href={`/`}>Home</Link> <Link href={`/users`}>Users</Link> <Link href={`/users-rq`}>Users-RQ</Link> <Link href={`/users-rq-ssr`}>Users-RQ-SSR</Link> </nav> <div> {isLoading && <>Loading...</>} {isFetching && <>Fetching...</>} {error && <>Error: {error.message}</>} {data?.data.map(item => ( <p key={item.id}>{item.name}</p> ))} <button onClick={refetch}>Fetch Users</button> </div> </div> )} export default Home onSuccess &┬áonError You can pass a callback function for onSuccess and onError. Also if the fetching is successful you will get the data if it has an error you will get the┬áerror. select You can use select to modify your return data. As you see below before I was using data.data.map but after select, I can use just┬ádata.map import type {NextPage} from 'next'import {useQuery} from '@tanstack/react-query'import Link from 'next/link'import axios from 'axios' const Home: NextPage = () => { const onSuccess = data => { console.log("You've got data: ", data) } const onError = error => { console.log("You've got an error: ", error) } const {data, isLoading, error, isFetching, refetch} = useQuery( ['users'], async () => { return await axios.get('http://localhost:4000/users') }, { onSuccess, onError, select: data => data.data, }, ) return ( <div> <nav> <Link href={`/`}>Home</Link> <Link href={`/users`}>Users</Link> <Link href={`/users-rq`}>Users-RQ</Link> <Link href={`/users-rq-ssr`}>Users-RQ-SSR</Link> </nav> <div> {isLoading && <>Loading...</>} {isFetching && <>Fetching...</>} {error && <>Error: {error.message}</>} {/* before select => {data?.data.map(item => ( */} {data?.map(item => ( <p key={item.id}>{item.name}</p> ))} <button onClick={refetch}>Fetch Users</button> </div> </div> )} export default Home Multiple Places with the Same┬áuseQuery If you need to use the same useQuery multiple components or multiple pages, you can create a utility with the same useQuery logic and you can use it anywhere you┬áwant. /hooks/useUsersData.js import {useQuery} from '@tanstack/react-query'import axios from 'axios' export const useUsersData = ({config}) => { return useQuery( ['users'], async () => { return await axios.get('http://localhost:4000/users') }, { ...config, }, )} /pages/xxx.js import type {NextPage} from 'next'import Link from 'next/link'import {useUsersData} from '../../src/hooks' const Home: NextPage = () => { const onSuccess = data => { console.log("You've got data: ", data) } const onError = error => { console.log("You've got an error: ", error) } const {data, isLoading, error, isFetching, refetch} = useUsersData({ onSuccess, onError, select: data => data.data, }) return ( <div> <nav> <Link href={`/`}>Home</Link> <Link href={`/users`}>Users</Link> <Link href={`/users-rq`}>Users-RQ</Link> <Link href={`/users-rq-ssr`}>Users-RQ-SSR</Link> </nav> <div> {isLoading && <>Loading...</>} {isFetching && <>Fetching...</>} {error && <>Error: {error.message}</>} {/* before select => {data?.data.map(item => ( */} {data?.map(item => ( <p key={item.id}>{item.name}</p> ))} <button onClick={refetch}>Fetch Users</button> </div> </div> )} export default Home How useQuery cache in Dynamic Pages like /users/1, /users/2 As you know when we create [id].js file in next js for dynamic pages. It is similar in pure react too. So the page is the same file. So how can useQuery understand the previous cache is from /1 or /2. We will see how @tanstack/react-query handle this with useQuery. First letÔÇÖs create a dynamic page under the /users /pages/users/[id].js import type {NextPage} from 'next'import {useQuery} from '@tanstack/react-query'import Link from 'next/link'import axios from 'axios'import {useUsersData} from '../../src/hooks'import {useRouter} from 'next/router' const Users: NextPage = () => { const router = useRouter() const {id} = router.query const {data, isLoading, error} = useUsersData(id, { select: data => data.data, }) return ( <div> <nav> <Link href={`/`}>Home</Link> <Link href={`/users`}>Users</Link> <Link href={`/users-rq`}>Users-RQ</Link> <Link href={`/users-rq-ssr`}>Users-RQ-SSR</Link> </nav> <div> {isLoading && <>Loading...</>} {error && <>Error: {error.message}</>} <div>Id: {id}</div> <div>Name: {data?.name}</div> <div>Alter Ego: {data?.alterEgo}</div> </div> </div> )} export default Users Now letÔÇÖs create our useQuery hooks. As you see below we pass an array as its first argument. one is ÔÇśusersÔÇÖ the second one is a dynamic value. In this way, @tanstack/react-query understands cache correctly. If we donÔÇÖt do this and if we pass just ÔÇśusersÔÇÖ instead of an array, then when we open /users/1 @tanstack/react-query will cache this, then when we open /users/2, @tanstack/react-query will show use the cache of /users/1. So it is an unwanted side-effect that we donÔÇÖt want. So we can handle it like┬ábelow. import {useQuery} from '@tanstack/react-query'import axios from 'axios' export const useUsersData = (userId, config) => { return useQuery( ['users', userId], async () => { return await axios.get(`http://localhost:4000/users/${userId}`) }, { ...config, }, )} Or we can handle it like below with queryKey. const fetchUsers = async ({queryKey}) => { // queryKey === ['users', userId] const userId = queryKey[1] return await axios.get(`http://localhost:4000/users/${userId}`)} export const useUsersDataWithQueryKey = (userId, config) => { return useQuery(['users', userId], fetchUsers, { ...config, })} Dynamic Multiple┬áRequests Or we can fetch multiple requests as dynamic. Ex: with props like┬ábelow import type {NextPage} from 'next'import {useQueries} from '@tanstack/react-query'import axios from 'axios' const fetchUser = async (id: string) => { return await axios.get(`http://localhost:4000/users/${id}`)} const DynamicParallelQueries: NextPage = ({userIds = [1, 3]}) => { const [{data: userOne}, {data: userThree}] = useQueries( userIds.map(id => ({ queryKey: ['user', id], queryFn: async () => fetchUser(id), })), ) return ( <div> <p>Users</p> <p>UserOne Name: {userOne?.data.username}</p> <p>UserThree Name: {userThree?.data.username}</p> </div> )} export default DynamicParallelQueries Dependent Query┬áFetching As you can see below we can fetch dependent query fetching together. We can wait request with useQuery thanks to┬áenabled. import type {NextPage} from 'next'import {useQuery} from '@tanstack/react-query'import Link from 'next/link'import axios from 'axios' const fetchUserByEmail = async (email: string) => { return await axios.get(`http://localhost:4000/users/${email}`)} const fetchCoursesByEmail = async () => { return await axios.get(`http://localhost:4000/courses`)} const DependentQueries: NextPage = ({email = 'mucahidyazar@gmail.com'}) => { const {data: userData} = useQuery(['user', email], () => fetchUserByEmail(email), ) const user = userData?.data const userId = user?.id const {data: coursesData} = useQuery( ['courses', userId], () => fetchCoursesByEmail(), { enabled: !!userId, select: data => data?.data?.filter(course => course.author === user?.username), }, ) return ( <div> <div> <p>User Id: {userId}</p> {email} <p>Courses</p> {coursesData?.map(item => ( <div key={item.id}> <p>Author: {item.id}</p> <p>{item.title}</p> </div> ))} </div> </div> )} export default DependentQueries useQueryClient().getQueryData & initialData useQueryClient => we can create a query client with useQueryClient hook. And we can use its getQueryData to get the data that it fetched before. initialData => we can use initialData key to return an initial value with useQuery┬áhooks. In this example, we send a request to get all users before this request below which is ÔÇťusersÔÇŁ. Then we click one of the users to see its detail and we send another useQuery with ÔÇťuserÔÇŁ key. But we donÔÇÖt want to see loading, we want to see data instead of that. Then we can use ÔÇťgetQueryDataÔÇŁ of queryClient. like┬ábelow. import {useQuery, useQueryClient} from '@tanstack/react-query'import axios from 'axios' export const useUserData = (userId, config) => { const queryClient = useQueryClient() return useQuery( ['user', userId], async () => { return await axios.get(`http://localhost:4000/users/${userId}`) }, { ...config, initialData: () => { const user = queryClient .getQueryData('users') ?.data?.find(item => item.id == userId) if (user) { return { data: user, } } else { return undefined } }, }, )} Pagination & keepPreviousData and Avoiding Layout┬áShift Pagination is as simple as below. We just keep a state to know page number and increment and decrement it. I wrote hardcoded it but you can get it from your database dynamically. keepPreviousData default => false we can use ÔÇťkeepPreviousDataÔÇŁ key using old data. We can avoid layout shifting thanks to ÔÇťkeepPreviousDataÔÇŁ. We just need to turn on ÔÇťkeepPreviousDataÔÇŁ to true. And by this way, we will keep and show previous data until we fetch the new data on the page. For example below we fetch the first page and we show 3 colors on 1. page. But when we click next we will still show the first page items until we fetch the items of the 2.┬ápage. import type {NextPage} from 'next'import {useQuery} from '@tanstack/react-query'import axios from 'axios'import {useState} from 'react' const PaginatedQueries: NextPage = () => { const [page, setPage] = useState(1) const {data, isLoading, isError, error} = useQuery( ['colors', page], async () => { return await axios.get( `http://localhost:4000/colors?_limit=3&_page=${page}`, ) }, { keepPreviousData: true, }, ) if (isLoading) { return <>Loading...</> } if (isError) { return <>Error: {error?.message}</> } return ( <div> <p>Colors</p> {data?.data.map(item => ( <p key={item.id}>{item.label}</p> ))} <button onClick={() => setPage(prev => prev - 1)} disabled={page < 2}> Prev </button> <button onClick={() => setPage(prev => prev + 1)} disabled={page > 2}> Next </button> </div> )} export default PaginatedQueries useInfiniteQuery & hasNextPage & fetchNextPage useInfiniteQuery => We can use ÔÇťuseInfiniteQueryÔÇŁ to implement and fetch infinite loading to our page. fetchNextPage => When we use this hook we can also use ÔÇťfetchNextPageÔÇŁ to trigger the load more button. hasNextPage => ÔÇťhasNextPageÔÇŁ will give us that we have a next page or not. We will return its return with ÔÇťgetNextPageParamÔÇŁ option. import type {NextPage} from 'next'import {useInfiniteQuery} from '@tanstack/react-query'import axios from 'axios' const fetchColors = async ({pageParam = 1}) => { // pageParam => 1, 2, 3, ... return await axios.get( `http://localhost:4000/colors?_limit=3&_page=${pageParam}`, )} const InfiniteQueries: NextPage = () => { const {data, isLoading, isError, error, hasNextPage, fetchNextPage} = useInfiniteQuery(['colors'], fetchColors, { getNextPageParam: (_lastPage, pages) => { if (pages.length < 3) { return pages.length + 1 } else { return undefined } }, }) if (isLoading) { return <>Loading...</> } if (isError) { return <>Error: {error?.message}</> } return ( <div> <p>Colors</p> {data?.pages.map((group, index) => ( <p key={index}> {group.data.map(item => ( <div key={item.id}>{item.label}</div> ))} </p> ))} <button onClick={fetchNextPage} disabled={!hasNextPage}> show more </button> </div> )} export default InfiniteQueries useMutation mutate & POST┬áRequests We can use mutate for post requests and we can use them like┬ábelow. queryClient.invalidateQueries We can mark the query as stale and we can tell it should be re-fetched again. So below when we add a user with useMutation hook then we can create a ÔÇťqueryClientÔÇŁ and use ÔÇťinvalidateQueriesÔÇŁ method inside of its onSuccess case. We can call it and we can say the usersÔÇÖ data is stale you should re-fetch┬áit. import axios from 'axios'import type {NextPage} from 'next'import Link from 'next/link'import {useEffect, useState} from 'react'import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' const Home: NextPage = () => { const [email, setEmail] = useState() const [password, setPassword] = useState() const { data: usersData, isLoading, isError, error, refetch, } = useQuery(['users'], async () => { return await axios.get('http://localhost:4000/users') }) const addUser = async user => { return axios.post('http://localhost:4000/users', user) } const queryClient = useQueryClient() const { mutate, isError: mutateIsError, error: mutateError, isLoading: mutateIsLoading, } = useMutation(addUser, { onSuccess: () => { queryClient.invalidateQueries('users') }, }) const handleAddUserClick = () => { const user = { email, password, } mutate(user) } if (isLoading) return <>Loading...</> if (isError) return <>Error: {error.message}</> return ( <div> <nav> <Link href={`/`}>Home</Link> <Link href={`/users`}>Users</Link> <Link href={`/users-rq`}>Users-RQ</Link> <Link href={`/users-rq-ssr`}>Users-RQ-SSR</Link> </nav> <div> <div> <input type="text" value={email} onChange={e => setEmail(e.target.value)} /> <input type="text" value={password} onChange={e => setPassword(e.target.value)} /> <button onClick={handleAddUserClick}>Add User</button> </div> {usersData?.data?.map(item => ( <p key={item.id}>{item.id}</p> ))} <button onClick={refetch}>Refetch</button> </div> </div> )} export default Home setQueryData Instead of using ÔÇťinvalidateQueriesÔÇŁ like above, we can use ÔÇťsetQueryDataÔÇŁ to get updated data. with ÔÇťinvalidateQueriesÔÇŁ we can send a new fetch request and get updated data again. Instead of this we can use ÔÇťsetQueryDataÔÇŁ and manipulate the ÔÇťqueryÔÇŁ of ÔÇťusersÔÇŁ. In this way, we do not need to send an extra one more request to get new┬ádata. onSuccess: data => { // queryClient.invalidateQueries('users') queryClient.setQueryData('users', oldQueryData => { return { ...oldQueryData, data: [...oldQueryData.data, data.data], } }) } refetchQueries Or if we need to fetch these data from more than one place, then we need to fetch the data for all of them. So we can use ÔÇťrefetchQueriesÔÇŁ to update them┬áall. onSuccess: data => { // queryClient.invalidateQueries('users') // queryClient.setQueryData('users', oldQueryData => { // return { // ...oldQueryData, // data: [...oldQueryData.data, data.data], // } // }) queryClient.refetchQueries("users") } Optimistic Updates Source => react-query.tanstack.com/guides/optimistic-.. We can immediately update the user interface with new data. (with this => queryClient.setQueryData(ÔÇśusersÔÇÖ, old => [ÔÇŽold, newUser])) Then we can send our request, if we have an error we can get back the new data from UI and show the previous data. (with onError => queryClient.setQueryData(ÔÇśusersÔÇÖ, context.previousUsers)) And we always re-fetch if the request succeeds or┬áfails. And these steps give us an optimistic update. const queryClient = useQueryClient() const { mutate, isError: mutateIsError, error: mutateError, isLoading: mutateIsLoading, } = useMutation(newUser, { //! onMutate => runs before the mutation is sent to the server onMutate: async newUser => { // we will cancel the queries because of we dont want they overwrite us // Cancel any outgoing refetches (so they don't overwrite our optimistic update) await queryClient.cancelQueries('users') // Snapshot the previous value const previousUsers = queryClient.getQueryData('users') // Optimistically update to the new value queryClient.setQueryData('users', old => [...old, newUser]) // Return a context object with the snapshotted value return {previousUsers} }, // If the mutation fails, use the context returned from onMutate to roll back onError: (_error, _user, context) => { queryClient.setQueryData('users', context.previousUsers) }, // Always refetch after error or success: onSettled: () => { queryClient.invalidateQueries('users') }, })

2022-08-05 07:03:33

Article Image
writing
business
documentation
engineering
soft-skills
DOCUMENTATION Matter

Hi, guys again. In my previous post, I had talked about ÔÇťWritingÔÇŁ and why ÔÇťWritingÔÇŁ matter. Now I want to talk about ÔÇťDOCUMENTATIONÔÇŁ and why it matter. I will give you examples and end of the article I just want you to apply these examples to your organization or projects. And before starting to read this article I suggest you read my previous article which is ÔÇťWRITING matterÔÇŁ. So letÔÇÖs┬ágoÔÇŽ 1. Professionalism Documenting anything gives and creates professionalism. We can share the story and information by documentation. Teams, companies, organizations and even between companies and customers need to use and share documentation. If you are a tech people you already knew about some API documentation but it is not tech or programmers stuff. Anyone can need documentation in their life or workflow. Think you bought a drawer from IKEA, if there is no installation guide paper inside the box, can you imagine how terrible it is? Yeah that much terrible if we havenÔÇÖt documentation in our jobs and┬álives. 2. Businesses can make much┬ámoney If you have a business at any scale, you should absolutely keep documentation. And you should set it as a rule for your business. Generally, most small startups do not think and apply these rules. Most of those do not know anything either about documentation. Even they knew they think they donÔÇÖt have time to document. Because they are always in a rush. But they are wrong. They are wasting their money much more than by doing this.┬áWhy? If your business doesnÔÇÖt document your works, after a while you will investigate and repeat the same works again┬áagain You will spend more money on orientation for a customer or an┬áemployee You will have an unmanageable workflow and it will slow your work┬ádown 3. Development, Investigation is┬áEasy It is not only to be more profitable for your company. It increases the quality of your organization and product. You will have a more scalable product. You will have more happy employees. Because everything is organized and ordinary. So everyone is happy to work on the project. No one wants to leave your project. Otherwise, if you had bad documentation, Your clients, and employees would be unhappy and they would try to leave you at the first┬áchance You can sell your product because it is so bad or you donÔÇÖt have a good documentation If you hadnÔÇÖt documentation you will always depend to the workers who developed your products. If he had some problem then you will be down in a┬ácrisis. 4. Single source of┬átruth You can have some disciplines in your organization, if you keep these hot you should keep the documentation for this. Or you can hire people or you can tell and teach by yourself one by one in your organization. Which is simple? I think ÔÇťDocumentationÔÇŁ is simple than doing this. In this way, you can create, define and write your rules and you can want to obey your employees. So your employees will follow the same rules with the same documentation and they will use a single source of truth. I wanna give a general example, Think you have an accountant company and you had 5 accountants, you can set a rule about folder structure and you can want them to obey this rule. So after you get the. report from your accountants you will work faster and effectively and also you wonÔÇÖt try to figure out which files and documents where. 5. Hiring & Onboarding is faster and┬áeasier If you hire new people to your company they will always need to learn your workflows, styles, and process. So they need to learn these things from somewhere. If you had any documentation then you need to tell them by yourself or you need to hire a person and pay for him. But you donÔÇÖt need to do that. All you need write and document your work at the same time when you have done with a job. Then when you hire a person, or when you sold a product give your documentation link and leave them by themselves. It is such┬áeasy. 6. Cuts down duplication of┬áwork If you donÔÇÖt have the documentation your jobs and work repeat their selves in time. Because you donÔÇÖt have documentation so your employees will do the same work every time again. Because they can forget the previous job or task, or you can hire a new person who doesnÔÇÖt have any idea about on project. So donÔÇÖt wait and create your document┬ánow. How you should document┬áit? Chose a platform. I strongly recommend you use a cloud note application, such as Notion, confluence or excel, or Google┬áDrive Define the categories and split your organization, piece by piece. (For org: Frontend Team, Backend Team)(For project: Project Name, Project┬áName) Tell the story. Use emojis, colors, white spaces, memes, and┬áimages. Ensure your team, organization or employees contribute this documentation Update the old logic by the time, right┬ánow Create tasks for documentation Write in English because English is the most common language in the┬áworld Keep your documentation simple but it also needs to have more detail inside of it. You can have a level system for┬ádetails. Use clean and sharpen┬átitles DonÔÇÖt write everything, define your requirements and write just what you┬áneed Conclusion I think this is so clear. DonÔÇÖt waste your time, your money, and your employee's time. Start to implement this right now. Create a page and contribute it. I want to share the documentation which I create for my organization. I just want to show you how I organized it and what the folder structures look like. I used confluence to create┬áthis. I also want to share some other documentation of big companies. You can also inspect them and can get some inspiration. So see you next┬átime. Professional Examples The Workstream | Your One-Stop-Shop for Managing Work React Docs Beta Sources Importance of Documentation | The Workstream 6 Reasons Why Documentation Is Important for Your Investment Operations Kudos Also, I can suggest another article which my old colleague wrote before. He also points out lots of important points. I strongly suggest you read this. Kudos to Ezer to share his experiences in this┬áarticle. How does documentation drive easier organizational scaling?

2022-07-29 07:03:36

Article Image
engineering
habbits
business
writing
documentation
WRITING Matter

Hi guys. TodayÔÇÖs topic is a really important topic for our business life, career and work life. I want to share this because I believe this is the most important topic in our life. I will tell you why and answer some of the key questions here shortly. But the main job is yours. You should read more articles about this and you should integrate this into yourselves, your teams, or your companies as a life rule. I will put some of the sources below. Then letÔÇÖs┬ástart. Purposes, reasonsÔÇŽ There is not just a purpose or reason to write here. There are a lot. As I work and inspect the big companies, they always write something regularly. They write documentation, they write technical blog posts, they write their experiences, they share their codes, and they navigate the people the right way. They always do such things. So they have so much collected experience, and this experience comes from thousands of engineers, decades years. So why donÔÇÖt we follow the steps they experienced and showed┬áus. Okay, I donÔÇÖt wanna make you boring so I will put some of the key purposes of why WRITING┬ámatters. 1. WRITING gives us to create a company┬áculture Generally, small startups donÔÇÖt think like the big companies and they donÔÇÖt give importance to this topic. So they just trying to push new features. And the most important thing is the income and expense flow of their products. This is wrong. If we create a company culture this will also boost our product quality, our employees' loyalty, happiness in our company, and everything. There are tons of words to write this topic but I donÔÇÖt want to go out of my topic. In a nutshell, if we want to create a company culture, we should write and keep our datas ordinarily. 2. WRITING increases and improves our soft┬áskills IsnÔÇÖt it so clear? If you write someone will read yours and you will read someoneÔÇÖs datas. And this shared experience improve your soft skill in┬átime. 3. WRITING teaches us new things from each┬áother The shared datas will teach you new things always. Of course, you can find lots of data on the internet with videos, articles, etcÔÇŽ But in your company, it will be a more real-life experience for you. And if you inspect these datas you will learn and┬áteach. 4. WRITING increases our code qualities After you learn new things it will reflect your codes and life. You will be writing more clear and more experienced. You will be stronger than ever. I can guarantee this also will reflect your real┬álife. 5. WRITING forces us to apply the single source of the┬átruth When we develop something we decide to use some tools, and we also follow some best practices. But everyone can apply these things in their own ways. And this is not good. If I give you an example: think you are working in a small team. There are 2 frontend teams. and each team developing their own product. They are using the best practices of the community(usually they donÔÇÖt), and they are using the same tools and languages. But one team is using style.js as a filename, one team is using Component.style.js. It is really tiny thing but there is no single source of truth in the company projects. I think this is bad. We should avoid and get rid of these things from our lives. So we should write and force each other to ensure┬áSSoT. 6. WRITING increases our product┬áquality After the above steps, you will increase your product quality in a visible way. You will realize life how beautiful is. 7. WRITING brings us┬átime Yes besides all of these things you will get lots of time to yourself, your team, or your company. You wonÔÇÖt waste your time. You will do the job in a good and experienced way. Even if you a nerbie employee you will do your job like a senior employee in the minimum duration. Where/How to┬ástart? Choose a tool like Notion, Confluence or something else. And create a structure for your organization. Split into groups your organization and give them some space on there. And create your own datas here and add ordinarily here. Or you can also create a website and share some of these as public to┬ápeople. Conclusion There is no end. We can say lots of things about the purposes or reasons for WRITING. And also we donÔÇÖt just write something we should also READ. I put some of the resources below. Eight Reasons Why Business Writing┬áMatters Why writing matters in the workplace Why Writing MattersÔÇŐÔÇöÔÇŐElectrical & Computer EngineeringÔÇŐÔÇöÔÇŐSaginaw Valley State University CommunicationÔÇŐÔÇöÔÇŐWhy Writing MattersÔÇŐÔÇöÔÇŐSaginaw Valley State University 5 Reasons Why Writing in Business is Important in Generating Better Business┬áResults And also I want to talk about Documentation in my next article. So see you there. Have a good day.┬áÔťő

2022-07-22 07:02:50

Article Image
setup-guide
environment
macbook
installation
setup
Environment Setup on Windows/Mac for IT People

In this article, I will share the common environment setup with you. You can be a frontend developer, a backend developer, QA engineer, or a product manager. I will share the common requirements for any IT person. We will go forward step by step. LetÔÇÖs say you get a new computer from your company. And you need to make your computer ready. Then follow the following steps and install the programs. Also, I will add a signature to show you which program I installed and I am┬áusing. 1. (MAC) homebrew (Package Manager)┬á­čÉ× Open its website and follow the instructions and install it in the correct┬áway. Homebrew (Optional) You can install some packages like the one below. Even if you are a UX/UI designer you may also need to use git at some point. So you should decide on┬áit. brew install tree ­čÉ× (It allows you to view all files in a tree view)brew install node ­čÉ×brew install git ­čÉ×brew install graphql-playgroundbrew install rubybrew install pythonbrew install kotlinbrew install postgresqlbrew tap heroku/brew && brew install heroku 1.1. GIT After you install git like above with brew. You should set your defaultBranch, name, and email┬ábelow. git config --global init.defaultBranch maingit config --global user.name "Mucahid Yazar"git config --global user.email mucahidyazar@gmail.com And generate an ssh key and add it to your GitHub account by using the instructions on Github documentation. https://docs.github.com/en/authentication/connecting-to-github-with-ssh 2. (MAC/Windows) Browser Installation, Settings, and Extension Everyone needs to use a browser even if it is a very old computer. So choose yours and use it. I prefer you to use Brave or Chrome.- Brave, ­čÉ×- Google Chrome, ­čÉ×- Firefox, - Opera, - Tor┬áBrowser Add a home button to your browser and open the most opened website by you.┬á­čÉ× And set your browser to open ÔÇťLatest closed websitesÔÇŁ after you open your browser again.┬á­čÉ× Log in to your Google Account and sync your browser with your browser.┬á­čÉ× Some of the extensions. that I am using.- Adguard ­čÉ× / Adblock, - Apollo Client Developer Tools,- JSON Viewer, ­čÉ×- Momentum, - React Developer Tools, ­čÉ×- Redux DevTools, ­čÉ×- Wappalyzer, ­čÉ×- daily.dev, ­čÉ×- Colorzilla, ­čÉ×- Whatfont, - Testing Playground, ­čÉ×- Vue Devtools, - Lighthouse, ­čÉ×- Grammarly, ­čÉ×- Remembery ­čÉ× 3. (MAC/Windows) Crone (Calendar App)┬á­čÉ× Cron | Early access This is the coolest calendar app that I have seen so far. Even you can install it on your windows computer. I think you need to give it a try.┬á:) 4. (MAC/Windows) Slack (Communication App)┬á­čÉ× Slack is your digital HQ Install Slack to communicate with your┬áteam. 5. (MAC/Windows) Terminal 5.1. Warp┬á­čÉ× Warp: The terminal for the 21st century I am using warp for a few months and it is really awesome in one word. It has a beautiful UI and it is easy to use. If you wonÔÇÖt use warp you will use iTerm. But that way, you should install some more extensions to improve your terminal experience. 5.2. iTerm2 iTerm2 - macOS Terminal Replacement Or as I said above you can install┬áiTerm2. 5.2.1. Terminal Helper Tools (Optional) If you will use iTerm instead of Wrap, you can/should one of these extensions. 5.2.1.1. fig.io Fig 5.2.1.2. oh-my-zsh https://ohmyz.sh/ - zsh-autosuggestions- zsh-syntax-highlighting 6. (MAC/Windows) Music┬áApp Some alternatives- Spotify ­čÉ×- Youtube Music- Apple┬áMusic Listening is everything 7. (MAC/Windows) Notion┬á­čÉ× Notion - One workspace. Every team. This is the best note app I have ever seen today. You can create everything with Notion. Even a website.┬á:) 8. (MAC/Windows) Design (UI/UX)┬áApp Figma: the collaborative interface design tool. There are some alternatives. But I think Figma is going to moon for a couple of years. So my favorite one is that. And I will put some of the alternatives.- Figma ­čÉ×- Sketch (Just for MAC)- Adobe XD- Zeplin- Photoshop 9. (MAC/Windows) 2FA (UI/UX)┬áApp Authy | Two-factor Authentication (2FA) App & Guides Most applications force us to set up a 2FA process to provide our safety. So we should use a 2fa application. You should install this 2FA application on one more device for me. The most popular one is Authy. But I will also put some of them below.- Authy ­čÉ×- Google Authenticator 10. (MAC/Windows) File Management App There are a few alternatives. But it depends on your case. If you have a Macbook you should use iCloud. I would not you to use the other ones. But if you use Windows or Linux you can choose one of the other┬áones. iCloud ­čÉ× Google Drive One Drive 11. (MAC/Windows) Developer Apps - Docker ­čÉ×- Postman ­čÉ×- MongoDB Compass ­čÉ×- Visual Studio Code ­čÉ×- Android Studio ­čÉ×- (MAC) Xcode┬á­čÉ× 12. (MAC/Windows) MongoDB Community & MongoDB Compass (Optional) ­čÉ× 1. Follow these instructions https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x/ 2. Download and install MongoDB Compass https://www.mongodb.com/try/download/compass Use the command brew list to see all installed packages 13. (MAC/Windows) VSCode & Settings┬á­čÉ× I am currently using SynthWave ÔÇÖ84 as a theme of┬áVSCode. 13.1. Typeface Code Editor Font: Dank Mono ­čÉ×Terminal Font: FuraMono Nerd Font┬á­čÉ× JetBrains Mono: A free and open source typeface for developers MonoLisa Dank Mono: The coding typeface for aesthetes GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures 13.2. Visual Studio Code┬á­čÉ× If you install VSCode the first time, make a clean installation with my following instructions. Then install ÔÇťSettings SyncÔÇŁ and save your settings to the Cloud. In this way, you would get and keep a backup save on the cloud and when you install VSCode again you will get all of your settings, and shortcuts with just one┬áclick. # The shortcuts of Settings Sync# UploadSHIFT + OPTION + U# DownloadSHIFT + OPTION + D 13.2.1. Extensions (Optionals) ­čÉ× You should install the packages that you┬áneed. code --install-extension auto-close-tag code --install-extension auto-rename-tag code --install-extension beautify code --install-extension better-comments code --install-extension code-settings-sync code --install-extension color-highlight code --install-extension copilot code --install-extension cypress-snippets code --install-extension dotenv code --install-extension es7-react-js-snippets code --install-extension fig code --install-extension gitlens code --install-extension glance code --install-extension grammarly code --install-extension html-snippets code --install-extension JavaScriptSnippets code --install-extension jest-snippets code --install-extension jestRunIt code --install-extension jquerysnippets code --install-extension LiveServer code --install-extension markdown-all-in-one code --install-extension markdown-preview-enhanced code --install-extension material-icon-theme code --install-extension mdx code --install-extension moonlight code --install-extension night-owl code --install-extension path-intellisense code --install-extension polacode code --install-extension prettier-vscode code --install-extension prisma code --install-extension quicktype code --install-extension quokka-vscode code --install-extension react-native-react-redux code --install-extension remote-containers code --install-extension remote-wsl code --install-extension solidity code --install-extension spellright code --install-extension sqlite-viewer code --install-extension styled-components-snippets code --install-extension swift code --install-extension synthwave-vscode code --install-extension vscode-commitizen code --install-extension vscode-docker code --install-extension vscode-eslint code --install-extension vscode-github-actions code --install-extension vscode-graphql code --install-extension vscode-html-css code --install-extension vscode-import-cost code --install-extension vscode-jest code --install-extension vscode-kubernetes-tools code --install-extension vscode-react-native code --install-extension vscode-sqlite code --install-extension vscode-styled-components code --install-extension vscode-tailwindcss code --install-extension vscode-todo-highlight code --install-extension vscode-typescript-next code --install-extension vscode-versionlens code --install-extension vscode-yaml code --install-extension vscodeintellicode 14. (MAC/Windows) NPM Packages Globally (Optional) npm i -g yarn ­čÉ×npm i -g babel-clinpm i -g eslintnpm i -g expo-clinpm i -g firebase-toolsnpm i -g gatsby-clinpm i -g jestnpm i -g lighthousenpm i -g netlify-clinpm i -g newmannpm i -g node-sassnpm i -g parcel-bundlernpm i -g pm2npm i -g prettiernpm i -g servenpm i -g spaceship-promptnpm i -g surgenpm i -g typescriptnpm i -g updatenpm i -g vercel Use the command npm list -g --depth 0 to see all installed packages 15. (MAC/Windows) PIP Packages (Optional) Use the command pip or pip3 to install depending on your┬ásystem. pip3 install astroidpip3 install autopep8pip3 install certifipip3 install chardet2pip3 install clickpip3 install Flaskpip3 install Flask-Corspip3 install harperdbpip3 install idnapip3 install isortpip3 install itsdangerouspip3 install Jinjapip3 install lazy-object-proxypip3 install MarkupSafepip3 install mccabepip3 install psycopg2pip3 install psycopg2-binarypip3 install pycodestylepip3 install pylintpip3 install python-dotenvpip3 install requestspip3 install setuptoolspip3 install sixpip3 install tomlpip3 install urllib3pip3 install Werkzeugpip3 install wrapt Use the command pip3 list or pip list to see all installed packages 16. (MAC) Emojis┬á­čÉ× Rocket - the best emoji app for Mac And also if you are using a MAC, I absolutely prefer you to look at my Macbook hint article. I am crazy sure you will find some useful things for yourself. 27 Macbook Tips & Tricks in 2022 See you at the next one.┬á­čĹő

2022-06-10 07:02:43

Article Image
javascript
undefined
difference
null
The story of NULL

undefined, JavaScriptde kesin yoklu─ču s├Âyleyen bir primitive valuedir. undefined, 1998 de JavaScript 1.3 e kadar direct olarak eri┼čilebilir de─čildi. Buda bize nullÔÇÖun o zaman, bir de─čerin olmad─▒─č─▒n─▒ a├ž─▒k├ža s├Âyleyen bir de─čer olarak kullan─▒ld─▒─č─▒ i├žin tasarland─▒─č─▒n─▒ s├Âyler. Initialize olmam─▒┼č de─čerler otomatik olarak undefined de─čerini al─▒rlar. undefined ise ECMAScript spesificationslar─▒nda t├╝r tiplerinden birisidir. null objectlerde kas─▒tl─▒ istenilen, b─▒rak─▒lan yoklu─ču ifade eden primitive valuedir. null da ECMAScript spesificationslar─▒nda t├╝r tiplerinden birisidir. JavascriptÔÇÖte null Java ile birlikte ├žal─▒┼čabilirli─či sa─članmak amac─▒yla tasarland─▒. Hem g├Âr├╝n├╝m perspektifinden, hemde programlama perspektifinden ├Ât├╝r├╝. Hem Brendan Eich hemde di─čer geli┼čtiriciler, 2 absence yani yokluk valuesinin olmas─▒ndan ho┼čnut olmad─▒klar─▒n─▒ ifade ettiler fakat 1995 de yinede EichÔÇÖe Javascripti Javaya benzetme emri verdiler. E─čer y├Ânetimden ÔÇťJava gibi yapÔÇŁ emrini almasayd─▒m ve daha fazla zaman─▒m olsayd─▒ (Bu iki sebebi ├ž├Âzmek zordu), ÔÇťHer┼čey bir objectÔÇŁ mant─▒─č─▒na benze bir approach tercih ederdim. Yani Boolean, Number, String sarmalay─▒c─▒lar─▒ yok, undefined null yok gibi. Ahh.Brendan┬áEich: Javan─▒n strongly-typed yap─▒s─▒ndan ├Ât├╝r├╝ null sadece typed variableslara yani typeÔÇÖ─▒ belirli variablelara assign edilebiliyordu. Ve Eich, javadaki null konseptine uyum sa─člamas─▒ amac─▒yla null i├žin object prototype chaninin en ├╝st├╝nde ├Âzel bir konum se├žti. (i.e.(yani) the top of the reference types). Ve null type ─▒n─▒, ÔÇťobject-type primitivesÔÇŁ ─▒n bir par├žas─▒ oalrak dahil etti. Bu y├╝zden typeof null, ÔÇśnullÔÇÖ de─čil ÔÇśobjectÔÇÖ┬ád├Âner. Typeof operat├Âr├╝, 19 Agustos 1996ÔÇÖda JavaScript 1.1 releases─▒nden k─▒sa bir s├╝re sonra┬áeklendi. typeof null ===┬áÔÇśobjectÔÇÖ From the V8┬áblog: typeof null, null un kendisinin bir type olmas─▒na ra─čmen null de─čil object return eder. Nedenini anlamak i├žin Javascriptteki typeslar─▒n 2 gruba ayr─▒ld─▒─č─▒n─▒ d├╝┼č├╝n├╝n. 1. objects (i.e. the Object┬átype) 2. primitives (i.e. any non-object value) Bu y├╝zden null ÔÇťno object valueÔÇŁ anlam─▒ndayken, undefined ÔÇťno valueÔÇŁ anlam─▒ndad─▒r. Daha iyi anlamak i├žin a┼ča─č─▒da ki grafi─če┬ábakal─▒m. Bu d├╝┼č├╝nce ├žizgisini takip ederek, Brendan Eich JavaScriptÔÇÖi, Java ruhu i├žinde, sa─č taraftaki t├╝m de─čerler, yani t├╝m objectler ve null de─čerler i├žin typeof return ÔÇśobjectÔÇÖ yapmak ├╝zere tasarlad─▒. ─░┼čte bu niye typeof null === ÔÇśobjectÔÇÖ niye null de─čilin sebebidir. Bu y├╝zden Eich, primitive typeslar─▒n hiyera┼čisini Java ile uyumluluk sa─člayabilmesi i├žin tasarlad─▒. Buda onu null i├žin ÔÇťobject-type primitivesÔÇŁ larda pozisyonlamas─▒na ├Ânc├╝l├╝k etti. Bunu yans─▒tmak i├žinde, nulldan sonra Javascripte typeof eklendi─činde, typeof null un ÔÇťobjectÔÇŁ d├Ânmesini se├žti. Javascript geli┼čtiricileri aras─▒nda typeof null === ÔÇťobjectÔÇŁ s├╝prizi, hem null hemde undefined a sahip weakly-typed language (JavaScript) ile sadece null a sahip bir ba┼čka strongly-typed language (Java) aras─▒nda bir impedance mismatch (or abstraction leak) olarak ifade edildi. Ki Javada null, bir primitive type a de─čil, kesinlikle bir reference type ─▒na at─▒fta bulunmak i├žin tasarlanm─▒┼čt─▒r. Bunlar─▒n hepsi mant─▒kl─▒, a├ž─▒klanabilir ve savunulabilir. typeof null === "object" bir bug de─čil fakat Java ile birlikte ├žal─▒┼čabilir olmas─▒n─▒n ikinci dereceden bir┬áetkisi. undefined─▒n bir valuenin yokluk durumunu g├Âstermesi ve null─▒n ├Âzellikle bir objectin yokluk durumunu g├Âstermesi dahil bir dizi geriye d├Ân├╝k akla yatk─▒n hale getirme conventions─▒ ortaya┬á├ž─▒kt─▒. Brendan Eich in bu konuyla alakal─▒ ilgili konu┼čmas─▒n─▒ g├Ârsel olarak a┼ča─č─▒ya b─▒rak─▒yorum. BrendanEich on Twitter: "JS was supposed to interconnect with Java, including object refs that could be null. Blame Java, yet again. / Twitter" JS was supposed to interconnect with Java, including object refs that could be null. Blame Java, yet again.

2022-04-01 07:02:58

Article Image
27 Macbook Tips & Tricks in 2022

This week I bought a Macbook Pro 16". So I just wanted to set and use my Macbook more efficiently. Before the Macbook I was using Windows for 15 years. Of course, It is not my first time with Macbook. I am also using Macbook for more than 3 years in my professional career. But I wasnÔÇÖt thinking to go forward by Mac this much. I never thought I will use Mac rest of my life since Apple released the last Macbook in 2021. Who knows I can buy another Windows computer but I am sure I will not use Windows for programming again. I can tell you why this another article. In a nutshell, I do want to integrate myself fully into Mac. So I searched and watched lots of videos and want to share them with you in this article. Have a good┬áread. 1. Custom Screen Lock┬áMessage You can set a custom message for your screen lock. In this way, if you lost your mac somewhere then someone who found and open your mac can see your message and contact you. My screen lock message is My Name: ÔÇťMy Number; My BrotherÔÇÖs Name: His┬áPhone;ÔÇŁ 2. Emojis control + command + space Ôçĺ This is the shortcut to how you can see the panel┬ábelow. 3. All Open┬áPages You can touch by your three-finger and swipe them up on the touch bar. You will see all windows┬ábelow 4. Hot┬áCorners I think no one does not wants to minimize all screens to see the desktop. There is a way. And it is hot corners. You can create another trick by hot corners. Open Spotlight search and search for Mission Control and open it. And set the right corner as Desktop. After that, you will see the window when you take your mouse right below corner. And do that again you will return┬áback. 5. Privacy You can add the files which you do not want to show in search┬áresults. 6. SidebarÔÇŐÔÇöÔÇŐFinder Preferences You can add some items to show on your┬ásidebar. And you will see the side bar like┬ábelow. 7. New Finder WindowÔÇŐÔÇöÔÇŐFinder Preferences When you open your finder you will see the recent page that you open. Instead of this, you can set another path as a default┬áwindow. 8. Three Finger┬áDrag As default, you should click the head of the window to drag and drop a window. But that is not easy if you are using the touchpad of a mac. There is an easy way to do that. That is this. Do that and enjoy with your touchpad. ­čśŐ 9. Tap to┬áClick As you know clicking is also not easy by the touchpad. Instead of using press the touchpad let's set it as┬átouch. 10. Desktop┬áItems I like to see some of the shortcuts on destop. like Macintosh HD. You can also do that like┬áme. 11. Dark┬áMode 12. Multi-Touch ID I think second or multi-touch id is one of the most important things in MAC. You can add your other finger or you can add your relative's finger. 13. Turn off the Notifications of the Unnecessary Apps 14. Connect for┬áSharing If you use Iphone like me, you do want to share some files between your mac and phone. This is a good way for┬áit. open ÔÇťFilesÔÇŁ in your┬áphone Click the ÔÇťÔÇŽÔÇŁ which is top right┬ácorner Then ÔÇťConnect to ServerÔÇŁ and write your computer name with┬áÔÇť.localÔÇŁ And you are connected. 15. Picture in┬áPicture 16. Automatically Hide and Show the┬áDock 17. Hide Recent Applications I donÔÇÖt like to see recent applications in dock so I am hiding them. Because the dock bar has a limited┬áarea. 18. Use┬áStacks This shows the same files as just a card. Just try it and discover it by yourself. 19. Show Status┬áBar I like to see Status Bar. If you are a person like me then click the View and Show the Status Bar like┬áme. 20. Increase Your Track┬áSpeed 21. Move Sound Icon to the┬áBar Click the Toggles Icon which is on the left of the Siri, then press the volume for a few seconds then drag it to the┬ábar. 22. Change the Screenshot Directory By default the screenshots will save to your desktop when you took one. It makes like a trash box our destop. (At least I feel like that) So let create a folder which name is screenshots and set it as the screenshot location. Command + Shift +┬á5 Options > Other Locations and chose the folder which you┬ácreate. 23. Macbook┬áName If you want to change your Macbook name, you can search Sharing Preferences on Spotlight Search and use this┬ápage. 24. Multi-Language for┬áKeyboard I am a Turkish guy and I have a Turkish keyboard layout on my MAC. But I also have an external English layout keyboard which is Keychron K2. And I am using the English language when I am coding something. If you are a guy like me you can add the English Language to your system. Open the Keyboard your System Preferences and add it like┬ábelow. 25. Disable Unnecessary Spotlight Options I just use ÔÇťApplicationsÔÇŁ, ÔÇťFoldersÔÇŁ, ÔÇťPDF DocumentsÔÇŁ and ÔÇťSystem PreferencesÔÇŁ. 26. Uncheck Scroll direction: Natural In this way, you can use scrolling in a familiar┬áway. 27. Show Tab/Path/Status Bar

2022-03-11 07:02:40

BOOST YOUR FRONTEND CAREER

THE FRONTEND DEVELOPER