One of the most common React Hooks that I’ve found myself using is one to handle API calls. Often we see ourselves writing almost the same exact codes in more than one different component. Ideally what we could do in such cases would be to extract that recurrent logic into a reusable piece of code (hook) and reuse it where the need be.
2020 is probably the best and the worst year I’ve ever had. I’ll try to summarize my notions about it.
An unexpected COVID-19 pandemic caught our lives unawares. Some of us lost our family, friends, and familiars, some of us couldn’t accomplish our goals.
I still remember the day that my company at that time sent us to our homes for an unknown date. We were all laughing and making jokes about it and thinking that people are just exaggerating it. Well, it turns out we all got mistaken. People started to get sick and die every day and we…
Sorry to inform you guys this article has been written fully in Turkish since it’s all about me and my immigration story from Istanbul to Berlin. Thank you for your understanding.
Hikayemin ilk bölümünde şimdilik teknik detaylara (vize süreci, iş bulma, CV hazırlama vs. gibi) girmeden bu kararı almamın altında yatan başlıca sebepleri kendimce açıklamaya ve kendimi tanıtmaya çalışacağım.
Many new features are released in React v16.6.0. React.memo is one of the cool features in it.
memo means memorizing. This is a performance optimization feature for the function components.
React.memo() is similar to
PureComponent that it will help us control when our components re-render.
Components will only re-render if its props have changed! Normally all of our React components in our tree will go through a render when changes are made. With
React.memo(), we can have only some components render.
memo has made it easier to avoid the continuous rendering process that we could do with the…
You’ve already learned a lot about the
<video> element in my previous article “What I’ve Learned From Working With HTML5 Video Over A Month”, but did you know that the
<canvas> elements would be a great choice to use together? In fact, the two elements are absolutely wondrous when you combine them! I’m going to show you a handy demo using these two elements, which I hope will prompt cool future projects from you.
Firstly, place the
<canvas> elements in your HTML. Give your dimensions(width, height) to
<canvas> according to your video. And of course, hide…
I had a chance to work with HTML5 Video in a project over a month and am going to tell you my experiences and knowledge on it.
The project is a kind of simulation of an interactive video similar to Netflix’s Bandersnatch series. The story goes upon user choices: adding tomato or pickle, choosing brioche or classic bread, whether garnishing with an egg or an avocado sauce or just skipping it, etc. You get the idea…
It’s called “Ya Sen Yapsan”, means “What If You Do It” in Turkish. You can try it from here. …
Approximately more than 85% of our visitors access yemek.com from mobile browsers.
Most of us have used a slider at least once in the components or somewhere in projects. In yemek.com, we were using react-slick which works well on desktop but causes some performance and memory leak problems on mobile browsers.
It was causing a freezing bug while scrolling and tapping the hamburger menu that affects user experience extremely bad. Also, the bundle size for react-slick is 14.5kB minified + gzipped.
Here are 4 ways to remove duplicates from an array and return only the unique values.
Set is one of the cool thing happening in ES6. It’s a new data structure that stores unique values of any type. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set’s collection.
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
In order to find out this option, let’s understand what these two…
I love using Flickity, it’s great and super easy to use. But… When I started to work with React and need Flickity, things got pretty confusing. So I started to look for a component style library but find nothing effective. And built mine…
You can install flickity with;
yarn add flickity
npm install flickity --save
Slider.js file will contain Flickity configurations. You can of course name it as you want but be careful with naming component name and then importing also 😜
Voilà! You’ve made it! 😍
Thanks for reading! 💛