Stories by Shubh Agrawal on Medium

<h3>Large File Uploads in the Background with React Native</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ZHPLogBpVXNTJosR"><figcaption>Photo by <a href="https://unsplash.com/@mike_van_den_bos?utm_source=medium&amp;utm_medium=referral">Mike van den Bos</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure>React Native, a popular framework for building cross-platform mobile applications empowers developers to create seamless user experiences. In this article, we will dissect a crucial piece of code, a file upload component utilizing background processing, helping you understand its structure, functionality, and potential applications.
Uploading large files in a mobile application is often a complex task that demands a careful balance between user experience and efficient resource management. In React Native, handling asynchronous tasks, especially those involving large data sets, can be challenging. This article dives into a robust solution for large file uploads in React Native while your application is in the background.
First, let’s discuss the dependencies and approach
Dependencies:
<ul>
<li>React Native (I thought it was a Java article… just kidding)</li>
<li><a href="https://www.npmjs.com/package/react-native-fs">react-native-fs</a></li>
<li><a href="https://github.com/Rapsssito/react-native-background-actions#readme">react-native-background-actions</a></li>
<li>axios</li>
</ul>
I don’t want to bore you with the description of these as they are pretty self-explanatory. When we use these they will become clear.
<h3>Approach</h3>
The first step to uploading a file is to get the file first, the code that I will give you is an independent component that takes the file as input.
Technically the input is supposed to come from some kind of picker like ‘<a href="https://www.npmjs.com/package/react-native-document-picker">react-native-document-picker</a>’, you can just pass the selected file from it to the UploadFile component.
Once we have access to the file we will read the file in chunks and then send those chunks to the backend.
Enough talking, let’s get to code! 🧑‍💻
<h4>handleUpload</h4>
<pre>const handleUpload = async (filePath: string) =&gt; { const options = { taskName: 'FileUpload', taskTitle: 'Uploading File', taskDesc: 'Progress', taskIcon: { name: 'ic_launcher', type: 'mipmap', }, color: '#ff00ff', //change this for opening the app from notification linkingURI: 'uploadFile', }; await BackgroundService.start(() =&gt; uploadFileInChunks(filePath), options); };</pre>
This function will run when the user clicks the Upload button and we will send filePath to this function. The options object that we have created is required by the react-native-background-actions library. After that, we are starting a BackgroundService. As the name suggests this will start a service that will run a function in the background. This function will be uploadFileInChunks in our case, which we will work on next.
There are several configurations that you can do using options, for that refer to the docs: <a href="https://github.com/Rapsssito/react-native-background-actions?tab=readme-ov-file#options">https://github.com/Rapsssito/react-native-background-actions?tab=readme-ov-file#options</a>
<h4>UploadFileInChunks</h4>
Coming to the paneer part (I am vegetarian so can’t write meat!), jokes aside, this function is where we will break the file into chunks and start to send it to our backend chunk by chunk.
Without going into much literature, here is the code
<pre>const uploadFileInChunks = async (filePath: string) =&gt; { const uploadUrl = 'https://example.com/upload'; const chunkSize = 1023; //READ THE POINTS BELOW THE CODE const currentFile = selectedFile[0]; //File which we are getting from our picker try { const fileSize = currentFile.size; let offset = 0; while (offset &lt; fileSize) { //here we are reading only a small chunk of the file. const chunk = await RNFS.read(filePath, chunkSize, offset, 'base64'); const requestBody = { fileContent: chunk, offset: offset.toString(), totalSize: fileSize.toString(), }; await axios({ method: 'POST', url: uploadUrl, headers: { Authorization: 'Bearer YOUR_TOKEN_HERE', 'Content-Type': 'application/json', // since we are sending base64 in JSON format }, data: JSON.stringify(requestBody), }); let percentage = Math.round((offset / fileSize) * 100); console.log('filesize, offset ', fileSize, offset); await BackgroundService.updateNotification({ progressBar: { max: 100, value: percentage, }, taskDesc: `Uploading file: ${percentage}% completed`, }); offset += chunkSize; } console.log('Upload complete'); await BackgroundService.updateNotification({ taskDesc: 'File Uploaded', }); } catch (error) { console.error('Error during chunk upload:', error); await BackgroundService.updateNotification({ taskDesc: 'File upload Failed', }); } };</pre>
<h4>Some points to remember</h4>
Our whole concept is to divide the file into chunks, but this raises another question. What should be the size of the chunk? Well, my honest answer would be to try different sizes and see what difference it creates.
For those in a hurry, here’s the tl;dr
If you create a chunk of 1kb as I have in this code then your upload will be very slow because you are calling the API for every 1kb of data, that’s a total waste. APIs can easily handle much more than that. With my experimentation, I have found the chunk size ~500kb to be a good match.
<blockquote>NOTE: For base64 the chunk size should be a multiple of 3. Please go through this (~1min) <a href="https://stackoverflow.com/a/7920834">https://stackoverflow.com/a/7920834</a>
</blockquote>
<h3>That’s it</h3>
Now you have a working solution for your application where you can upload files to your backend in base64 format and it will also show you a progress notification while doing so in the background 😌
If you liked this article, give it a clap. You can follow me on your suited platform <a href="https://theshubhagrwl.in/">https://theshubhagrwl.in/</a> 😄
<h3>In Plain English 🚀</h3>
Thank you for being a part of the <a href="https://plainenglish.io/">In Plain English</a> community! Before you go:
<ul>
<li>Be sure to clap and follow the writer ️👏️️
</li>
<li>Follow us: <a href="https://twitter.com/inPlainEngHQ">X</a> | <a href="https://www.linkedin.com/company/inplainenglish/">LinkedIn</a> | <a href="https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw">YouTube</a> | <a href="https://discord.gg/in-plain-english-709094664682340443">Discord</a> | <a href="https://newsletter.plainenglish.io/">Newsletter</a>
</li>
<li>Visit our other platforms: <a href="https://stackademic.com/">Stackademic</a> | <a href="https://cofeed.app/">CoFeed</a> | <a href="https://venturemagazine.net/">Venture</a>
</li>
<li>More content at <a href="https://plainenglish.io/">PlainEnglish.io</a>
</li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=1b9fe49e367c" width="1" height="1" alt=""><hr>
<a href="https://javascript.plainenglish.io/large-file-uploads-in-the-background-with-react-native-1b9fe49e367c">Large File Uploads in the background with React Native</a> was originally published in <a href="https://javascript.plainenglish.io/">JavaScript in Plain English</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Large File Uploads in the background with React Native

<figure><img alt="Header image of a person viewing the sunset" src="https://cdn-images-1.medium.com/max/1024/1*AHssmEnGYN5_37yb4LZDkQ.jpeg"></figure>You must have heard from your friends, people on social media, and authors of self-help books that:
<blockquote>“It’s all about the journey and not the destination”.</blockquote>
I believed the same. Rectifying myself, I believed it without thinking or experiencing it.
At the time when I read such things, I didn’t have the experience of travel neither I was old enough to realize these things. So, I just picked this up in my mind.
But now after doing some traveling with different people and also growing up in the meantime, I believe I can sit and think about this quote and analyze it, not for others but for myself.
This article is just my thoughts on this topic, it’s not to influence anyone, it’s just my mind dump or it may be overthinking being fused with my love for writing.
I would like to start with a slight variation of the main quote,
<blockquote>Life is a journey, not a destination.</blockquote>
This is the original quote by Ralph Waldo Emerson, as you may get by searching on Google but it’s not. More details: <a href="https://quoteinvestigator.com/2012/08/31/life-journey/">https://quoteinvestigator.com/2012/08/31/life-journey/</a>
Anyway, this isn’t a history article so leaving the facts to history people (I trust them). This quote has a significant meaning if you think about it.
In the case of our life, or the life of our pets, plants, etc. we know what the result is. Death. Death is the ultimate truth. Lord Krishna also said to Arjuna in Bhagavad Gita that Death is an inevitable part of the cycle of life and one should not fear it. So, in our life what we can focus on is “present” and “present” is what we can enjoy. And what we are doing now counts as our journey. So, life indeed is a journey and not a destination.
This is a beautiful quote that is in the movie Kungfu Panda.
<blockquote>“Yesterday is History, Tomorrow is Mystery, Today is the gift. That’s why it is called Present.”</blockquote>
Now let’s shift our perspective a little.
Whenever it comes to traveling, some people say that in travel the destination is not the thing you look forward to, rather it’s the journey that you enjoy.
In the starting I believed this, what else do you expect from a person with no travel experience sitting and discussing this topic in a room on a call with a friend 🤷‍♂️
After some time, the sun shed some light on my life, and I got to make some trips. I traveled with family, and groups of friends, just me and one of my friends, I took short journeys, road trips, and multi-day train journeys and got a lot to experience. In all this, my overthinking brain was subconsciously analyzing things like journey, destination, listing out some pros and cons, etc.
I came up with a 70:30 ratio.
The 70% I put to Destination and the 30% to the Journey.
This ratio can vary depending on the type of people you are with, but I found the upper limit of the journey to be 40% so that makes it 60:40.
This is what I think. Whenever you are going to any place there is naturally an excitement about what you will see there, what you will get to eat there etc. That counts for the destination. How you will reach there is the journey part, if you are doing something adventurous then you are excited about that adventure, but don’t you think your mind made that adventure your destination? And I hope it doesn’t happen with you but if your destination is not worth it for some reason, or you had some bad experience then do you not feel bad about it? Well, I do, and I see people who say destination doesn’t matter also feels bad about such things. So, it’s natural, if you put efforts into something whether it be travel or a relationship and you don’t get the same output then it hurts.
It’s not that the journey is not the enjoying part, it surely is. When you travel with your friends the journey becomes super exciting because everyone is excited about the destination, and everyone is full of energy. In the returning part the journey can become a little boring as we get worn out and well you know, we are reaching home, so we know our destination. Overall destination plays an important role.
Going with unknown people however makes the journey a little more fun because, first of all, you have the excitement of the destination and second you are with people whom you don’t know and the same goes for them as well. So, you will communicate with them, they will share their experiences and stories and you will too. That can make a very long journey super short. On my recent trip to Manali, I got to meet a lot of different types of people from various careers and age groups and I enjoyed their company. We traveled together and had a lot of fun.
On this trip, me and the guys I met there decided to go on a trek. The views from the top of the trek (destination again) were the best views I have ever seen till now.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9yCXkIpGv3F30h1ospOg5Q.jpeg"><figcaption>Halfway trek view</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*L8DDfyvDbn-VFzMScXmB2Q.jpeg"><figcaption>View from top</figcaption></figure>I mean in case of a trek, you stress your body a lot and if you reach the top and don’t get some good views then it defeats the purpose, at least for me. On my trek, I reached the destination (top) early and I got to witness the sunlight, the sunset, and the dusk.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5rTuGR7ukWdmxYvKRy07Iw.jpeg"><figcaption>Sunset form top</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*L8ACvb0wx-kce9srt67pCg.jpeg"></figure>Depending on the type of person you are, you may or may not agree with my views, and to be honest, that’s okay. I just don’t try to convince myself that destination doesn’t matter. It matters. It matters a lot. At least for me!
These are just my thoughts, and I don’t want anyone to blindly follow me like I did all those authors. Everyone learns from their own experiences.
Thanks for bearing through my overthinking. If you have anything to add then please add a comment, I would love to hear different perspectives.
Also, you can DM (and follow) me on Instagram <a href="https://www.theshubhagrwl.in/insta">@theshubhagrwl</a>
All the images used in this article are my original work: <a href="https://pexels.com/@theshubhagrwl/">https://pexels.com/@theshubhagrwl/</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4430365be95d" width="1" height="1" alt="">

It’s all about the Journey and not the Destination. Really?

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*GQlKookOhdb8nQc0"><figcaption>Photo by <a href="https://unsplash.com/@imdshakil?utm_source=medium&amp;utm_medium=referral">Motiur Rahman Shakil</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure>Being a front-end web developer, I have to constantly deal with creating high-quality user interfaces with proper functioning to provide a clean and enjoyable user experience.
People think Front End Developer’s work is to only create the “website”. Maybe these are the ones who consider HTML a programming language🤷
More pragmatically, we don’t have websites now, we have “web apps” and web apps are not just about the “design” there is a great emphasis on the functioning part.
I have most of my work in React JS. If you have worked with React you must be aware of Material UI or MUI. It is a great library that provides well-written, consistent, functional, customizable, and well-designed React components that are very easy to integrate.
In this article, I will be showing you how I made a custom TextField component that can be used for Dates. Dates are just an example but with this template in mind, you can easily extend this to other fields like email, phone number, etc.
<h3>All this is ok, but WHY?</h3>
Well, Good Question!
Most of the time you can get away without caring too much about customizing MUI components but let’s say the TextField is being used in many places for different purposes then you have to get onto the rough track of customization.
I was working on a project that had specific form fields like GST, PAN, etc. which require their validations and some different stylings, and since they were scattered across the application it makes sense to make a common component that I can use in all places.
&lt;TextField/&gt; of MUI is a very capable component and I have leveraged this component and adjusted it to my needs.
<h3>Talk is Cheap, show me the code!</h3>
Alright, let’s get to it:
Create a component named DateField
<pre>import { TextField } from "@mui/material"; import React from "react"; const DateField = (props) =&gt; return ( &lt;TextField label={"HELLO THERE} type="date" /&gt; ); }; export default DateField;</pre>
&lt;TextField/&gt; in this code is pretty basic, let’s spice things up. For this, we will use props.
<pre>const DateField = ({ date, handleDateChange, dateError, disabled = false, required = true, label = "Select a suitable day", sx }) =&gt; return ( &lt;TextField label={label} type="date" InputLabelProps={{ shrink: true, required: true }} inputProps={{ style: { textTransform: "uppercase" }, }} sx={sx} value={date} required={required} disabled={disabled} onChange={handleDateChange} error={dateError} helperText={dateError ? "Select a valid date" : ""} /&gt; ); }; export default DateField;</pre>
Let’s look at the props once:
<ul>
<li>
date: The variable that stores the current date value, generally a useState().</li>
<li>
handleDateChange: This function is responsible for updating the value of the date state.</li>
<li>
dateError: This is also a state that handles whether the Date field has any error or not</li>
<li>
sx: This is a concept from MUI that allows us to work with a superset of CSS. We can use this to pass on inline styling to our component if required.</li>
</ul>
Now, you can declare all the required variables where you want to call the &lt;DateField/&gt;, and then you have to pass them as props.
<pre>import { useState } from "react"; import DateField from "./DateField"; export default function App() { const [date, setDate] = useState(new Date()); const [dateError, setDateError] = useState(false); const handleDateChange = (e) =&gt; { setDate(e.target.value); }; return ( &lt;DateField date={date} handleDateChange={handleDateChange} dateError={dateError} label="Select a Day" /&gt; ); }</pre>
Well, this is sufficient enough to be used but we can add up more functionality in this component to make it even more functional.
We will add a method in the component to restrict the user from selecting a date that has passed, in other words, the user can not select a past date.
Inside the DateField component, we can add a function that handles the logic for past dates and we can control this behavior using a prop.
<pre>const hidePastDate = () =&gt; { const today = new Date(); const dd = String(today.getDate() + 1).padStart(2, "0"); const mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0! const yyyy = today.getFullYear(); return yyyy + "-" + mm + "-" + dd; };</pre>
<pre>const DateField = ({ date, handleDateChange, dateError, disabled = false, required = true, disablePastDate = true, label = "Select a suitable day", sx }) =&gt; { const hidePastDate = () =&gt; { const today = new Date(); const dd = String(today.getDate() + 1).padStart(2, "0"); const mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0! const yyyy = today.getFullYear(); return yyyy + "-" + mm + "-" + dd; }; return ( &lt;TextField label={label} type="date" InputLabelProps={{ shrink: true, required: true }} inputProps={{ style: { textTransform: "uppercase" }, min: disablePastDate &amp;&amp; hidePastDate() }} sx={sx} value={date} required={required} disabled={disabled} onChange={handleDateChange} error={dateError} helperText={dateError ? "Select a valid date" : ""} /&gt; ); }; export default DateField;</pre>
This is the complete component. Here we have used a prop disablePastDate to control whether we want to allow the user to enter a past date or not.
This is just an example of how we can do this, but similarly, we can make a function that can restrict the user from selecting a future date. It mostly depends on your use case to allow for functionality.
It is easier to get overwhelmed by adding more and more functionalities into a component, but that is not ideal. You have to understand the requirement and then add up the required functionality only.
I hope this article was worth your time, I will be covering more such topics in the Future😁
<h3>In Plain English</h3>
Thank you for being a part of our community! Before you go:
<ul>
<li>
Be sure to clap and follow the writer! 👏
</li>
<li>
You can find even more content at <a href="https://plainenglish.io/">PlainEnglish.io</a> 🚀
</li>
<li>
Sign up for our <a href="http://newsletter.plainenglish.io/">free weekly newsletter</a>. 🗞️
</li>
<li>
Follow us on <a href="https://twitter.com/inPlainEngHQ">Twitter</a>, <a href="https://www.linkedin.com/company/inplainenglish/">LinkedIn</a>, <a href="https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw">YouTube</a>, and <a href="https://discord.gg/GtDtUAvyhW">Discord</a>.
</li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=6623772e6bf7" width="1" height="1" alt=""><hr>
<a href="https://javascript.plainenglish.io/customizing-mui-textfield-6623772e6bf7">Customizing MUI: TextField</a> was originally published in <a href="https://javascript.plainenglish.io/">JavaScript in Plain English</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Customizing MUI: TextField

<h3>Infinite Scroll in React — Without External Libraries</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Tk7ADgIOkHQcnSD1"></figure>Infinite Scroll is an effect we put on websites to create a seamless user experience. This effect is no magic, it is just some clever use of JavaScript to give the website a better overall experience.
This technique is used on many websites, especially those with a feed, e.g. YouTube.
<h3>So how does this thing works?</h3>
Let’s discuss the basic idea of Infinite Scrolling.
In an Infinite Scroll, the user is shown a single page with limited results. When the user reaches the end of those results, more content is loaded, and this goes on.
So what actually happens here?
For an Infinite Scroll, we prefer an API that has pagination enabled. So first, we simply request the first page from the API. Now when the user reaches the end of the page, a new API call is made with the next page number.
As you might have noticed from the above paragraph, we make the API call when we reach the end of the page. There are two ways to detect the end of the page. Either the page is fully scrolled, or the last element is fully visible on the screen. In this article, we are going to learn how to exactly do this.
We will discuss two methods of implementing Infinite Scroll
<h3>Prerequisites</h3>
<ul>
<li>Knowledge of React Hook: useState, useRef, useEffect</li>
<li>A basic react application setup</li>
</ul>
<h3>Implementation — #1</h3>
In this method, we will use the different values of windows that are provided by the browser.
We need to attach a scroll event listener to the window. This will be done inside useEffect because the listener needs to be attached as soon as the component is mounted.
<pre>useEffect(() =&gt; { window.addEventListener("scroll",handleInfiniteScroll); return () =&gt; window.removeEventListener("scroll", handleInfiniteScroll); },[]</pre>
When the component is loaded, we have attached a Scroll Event listener to the page which will run handleInfiniteScroll the method. Then we remove that event listener in the cleanup method of useEffect.
<blockquote>
Try to remove the cleanup method (return) in the useEffect and run the code. Observer carefully how the requests are being made then.
</blockquote>
Let’s define handleInfiniteScroll method
<pre>//states const [page, setPage] = useState(1); const [loading, setLoading] = useState(true); //method const handleInfiniteScroll = async () =&gt; { try { if ( window.innerHeight + window.document.documentElement.scrollTop + 1 &gt;= window.document.documentElement.scrollHeight ) { setLoading(true); setPage((prev) =&gt; prev + 1); } } catch (error) { console.error(error); } };</pre>
We have declared two states here, page keeps track of the page number because our API supports pagination so we need to pass a page number to it.
In the handleInfiniteScroll method, we are checking for the condition that, the sum of window.innerHeight and window.document.documentElement.scrollTop + an additional number of pixels is greater than equal to window.document.scrollHeight.
window.innerHeight: Returns the interior height of the window in pixels window.document.documentElement.scrollTop : Returns the number of pixels that are scrolled vertically window.document.documentElement.scrollHeight: Returns the total height of content (which is yet not visible on the screen)
So when innerHeight and scrollTop are added together they will always result in scrollHeight. You can verify this by doing a console log of these values and checking them manually.
This method will make changes to the state page. So we will add an useEffect which will call our API.
<pre>//state const [card, setCard] = useState([]) //method const getCardData = async () =&gt; { const res = await fetch( `https://jsonplaceholder.typicode.com/posts?_limit=9&amp;_page=${page}` ); const data = await res.json(); //solved: the first page is repeated twice if (page !== 1) { setCard((prev) =&gt; [...prev, ...data]); } else { setCard([...data]); } setLoading(false); }; //useEffect useEffect(() =&gt; { getCardData(); }, [page]);</pre>
This piece of code is really simple. All we have done here is called the API and stored the data in setCard() (probably not a good name 😅)
Now that we have all the main code setup we can simply pass our data which is in card to a component that will render the items.
And THAT’S IT!!
You get an infinite scroll there.
Here is a live demo of the app that I created: <a href="https://effortless-granita-f1a33d.netlify.app/">https://effortless-granita-f1a33d.netlify.app/</a>
And you can get the code here: <a href="https://github.com/theshubhagrwl/infinite-scroll-react-window">https://github.com/theshubhagrwl/infinite-scroll-react-window</a>
<h3>Implementation — #2</h3>
In this… well let’s continue this is next article.
To give you a hint, in the second approach we will use the IntersectionObserver API
Good Day!
Originally published at <a href="https://blog.theshubhagrwl.in/infinite-scroll-in-react-without-external-libraries">https://blog.theshubhagrwl.in</a>.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=a05a20723a00" width="1" height="1" alt=""><hr>
<a href="https://medium.com/quick-code/infinite-scroll-in-react-without-external-libraries-a05a20723a00">Infinite Scroll in React — Without External Libraries</a> was originally published in <a href="https://medium.com/quick-code">Quick Code</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Infinite Scroll in React — Without External Libraries

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*zOgs_ihLgwtfx29B"><figcaption>Photo by <a href="https://unsplash.com/@brookecagle?utm_source=medium&amp;utm_medium=referral">Brooke Cagle</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure>Using audio and video files can sometimes be tricky. To a beginner, it may look like a lot of work but in reality, they are simple to work with.
My project idea was very simple and straightforward. I was trying to make a React app that has multiple audio files inside it. There are several buttons and when the user clicks on the button a certain audio is played.
My project stack was
<ul>
<li>TypeScript</li>
<li>React</li>
<li>Tailwind</li>
</ul>
JavaScript takes care of the types but with TypeScript you gotta watch your step.
Till now I have only worked with images in React so I googled how to use audio files and two libraries shot up.
<ul>
<li><a href="https://www.npmjs.com/package/react-sound">react-sound</a></li>
<li><a href="https://www.npmjs.com/package/use-sound">use-sound</a></li>
</ul>
use-sound is a relatively new package compared to react-sound so I picked that up.
The work of libraries is to make the implementation simple and these perfectly do that. I implemented as it says in the docs.
<pre>import useSound from 'use-sound'; import boopSfx from '../../sounds/boop.mp3'; const BoopButton = () =&gt; { const [play] = useSound(boopSfx); return &lt;button onClick={play}&gt;Boop!&lt;/button&gt;; };</pre>
The implementation was straightforward and I started using it.
After some days when I was making an update to the sound component I was taking to one of my friends about using and storing sound files in React, and he told me to use HTML5 &lt;audio&gt; component. I was like “Will that work in React? 😲”.
Now one thing to note here is that React also uses HTML, and React is just an abstraction of the complex JavaScript functions that convert your JSX into HTML so almost all the HTML tags and stuff work by default in React.
I was skeptical about whether HTML &lt;audio&gt; tag will work on not but then I read about the Tag on <a href="https://developer.mozilla.org/en-US/">MDN</a> (best resource).
The &lt;audio&gt; tag takes in an srcand some attributes like controls, muted, etc. The &lt;audio&gt; tag does not have any such visual output, so if you hide the controls, nothing will be visible to you. This is perfect if you want to play audio when clicking on a custom button.
Coming to importing audio files. Many places including use-sound docs suggest to import audio files like
<pre>import boopSfx from '../../sounds/boop.mp3';</pre>
Well, this doesn’t work, at least not in my case with TypeScript. 🥲
This answer from StackOverflow worked for me <a href="https://stackoverflow.com/a/59456219/9715289">https://stackoverflow.com/a/59456219/9715289</a>
The solution is to use ES5 require()
<pre>const mySound = require("../assets/file_name.mp3");</pre>
This imports the file nicely. ✌️
Now the final task was to add a click event to the button to play audio when button was clicked.
For that my implementaion is simple. I used a onClickevent to trigger the playand pause function of the audio.
<pre>const AudioPlayer = () =&gt; { const audio = document.getElementById("audio_tag"); const [play, setPlay] = useState(false); return( ... &lt;button onClick={() =&gt; { play ? setPlay(false) : setPlay(true); play ? audio.pause() : audio.play(); }} &gt; ... &lt;/button&gt; &lt;audio id="audio_tag" src={mySound} /&gt; ) }</pre>
This sums up the implementation
<h3>TLDR;</h3>
This little incident made me realize that basic things like HTML and CSS are feature-packed and they are very well suitable for simple tasks. Like in my case I just wanted to play audio upon clicking so I don’t need to add an external library for that I can just use the built-in tools to achieve what I want.
This in no way means that external libraries are bad. They are excellent at providing you with a simple implementation and provide additional features. But first, we should also look at what the default tools are providing us.
<h3>Conclusion</h3>
In the current state of the web new libraries are coming up everyday and it is tempting to put them into our projects but first we should try to assess whether that libarary actually provides some value or that work can be done using the built-in tools only.
That’s it ENJOY and &lt;CODE/&gt;
<blockquote>
About me: I am Shubh Agrawal, a Frontend Developer and I love to code, write, read and click pictures. 😁 <a href="https://www.theshubhagrwl.in/">https://www.theshubhagrwl.in/</a>
</blockquote>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=a265870dabda" width="1" height="1" alt="">

You might not need a sound library for React

<h3>How Not To Read A Book A Week</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/640/1*x5s_n3-rQp4oPzUMzEvcCg.jpeg"><figcaption>Photo by <a href="https://unsplash.com/@fredmarriage?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">freddie marriage</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption></figure>The Internet is the place where all smart people spread their fame, but no one cares about setbacks.
“How I read a book a week?” this is one of the many internet glories we see nowadays. This is grown with the fact that people who read books are considered smart. Yeah, they are smarter than the average because books provide a different perspective to the individual. So it increases the knowledge of the reader.
But there is one thing made famous by the online “influencers” that you should read plenty of books. This is a good piece of advice. Reading for knowledge is a good thing, but reading for the sake of reading or increasing the count to show off on social media is dumb.
Through a simple YouTube search, you can find a ton of people who will tell you how to read a book per week. These people can be right in their ways of doing things because they have to get views and show others the numbers and be considered “smart”. But learning is not a number game.
I have two main concerns for reading a book a week:
<h4>1. Learning</h4>
Let’s say you read a book per week. I don’t think most books are simple enough to be understood in a single read.
I read a tweet by Kunal Shah where the gist was: Reading a book is not about remembering everything you read. It’s more about acquiring a new perspective.
<h3>Kunal Shah on Twitter: "A lot of people worry that they can't remember what they read from a book. They forget this is not a textbook and there's no exam to give. Book's task is to give you more perspectives. And humans rarely lose a newly acquired perspective if they are read with an open mind. / Twitter"</h3>
A lot of people worry that they can't remember what they read from a book. They forget this is not a textbook and there's no exam to give. Book's task is to give you more perspectives. And humans rarely lose a newly acquired perspective if they are read with an open mind.
One read cannot change the perspective. To get the whole about the book you have to go a little slow and deep and think about it.
This takes me to the next point,
<h4>2. Time</h4>
Reading is time-consuming. Unless you are reading a short book like “Who moved my cheese?” you can’t just wrap up a book in a week. The majority of the books are decently long and need a focused mind to read.
I don’t think you are free enough to read the whole day. As a developer and a student, I have to manage time between work, college, and personal things. The people making videos are also taking out time to make videos. Right?
<h4>3. Are you a Scanner?</h4>
When I started reading books, YouTube suggested videos on how to read a book quickly. These are seductive titles and as Naval said in Joe Rogan Podcast “You have to buy that stupid car to understand it is stupid”.
The main point of them(videos) was that you don’t have to read every single line. You just have to SKIM/SCAN the book and read the interesting things.
This may be applied to highly repetitive titles like “The Power of Your Subconscious Mind”, but I don’t get what these smart folks can learn by scanning or skimming “The Psychology of Money”. They’re probably smarter than the writer… I don’t know.
<h3>What’s My Way?</h3>
I am sharing my way, but I strongly recommend finding your way rather than blindly following someone. While writing this article I was reading “The Psychology of money”. I sit, read the book without a highlighter or pencil and read for about 30mins. You can do it chapter-wise as well.
The main thing is that you just need to read the book and don’t care too much about understanding everything you are reading. It may sound counterintuitive, but give it a try. It’s like skimming and scanning but at a lot slower pace.
This will give you an idea about what is interesting and what is not. This can take you approx. a week or two depending on the book. Then you can post on social media LOL
After the initial phase, take a break of a day or two and after that,
Take a pencil or highlighter, start reading the book with full focus and start marking the important quotes, lines, ideas, vocab. This will be helpful as you already have an idea of what is important. Also, sometimes you don’t get what the writer is trying to say in the first go but when you re-read with concentration you get the point. You can get that Aha moment.
I do this for around 30mins, again depends on the book and you. This is the part where you extract the most out of a book.
One more thing I do is write the small points I find in the book in the Sticky Notes app, then later tweet them. This increases my understanding and also writing skills, this helps me to understand and write better.
Whenever you are learning something it is better to follow “Spaced repetition”. The tweets or the small notes you will make will support that. This way you don’t have to read the whole book again, but will be able to get all the useful information out of it whenever you want.
Playing the number game is not always a good idea and people on social media are obsessed with this game.
Reading for fun and learning is what you should look for, not for Social Validation. A tweet about social validation I wrote after watching a video by Mark Mason.
<h3>Shubh Agrawal on Twitter: "The thing about Social Validation isWe will always crave it, but we can change who we seek it from.Instead of just not caring about what people thinks, just find better people.Seek validation from people whom you look up to, who understands you and respects you. / Twitter"</h3>
The thing about Social Validation isWe will always crave it, but we can change who we seek it from.Instead of just not caring about what people thinks, just find better people.Seek validation from people whom you look up to, who understands you and respects you.
Thanks for putting your valuable time on this article. If you enjoyed this article then consider supporting me. Thanks Again!
<figure><a href="https://www.buymeacoffee.com/theshubhagrwl"><img alt="" src="https://cdn-images-1.medium.com/max/170/1*9vg3-OY14aZN1UpKwIxxZg.png"></a><figcaption><a href="https://www.buymeacoffee.com/theshubhagrwl">https://www.buymeacoffee.com/theshubhagrwl</a></figcaption></figure><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=fbc58dbdee1" width="1" height="1" alt="">

How I Read Less Than A Book A Month

Should you write your own CSS or use any Library?
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oHroNLeFrBjw_m8cRRsdIQ.png"><figcaption>Photo by <a href="https://www.pexels.com/@shubh-agrawal-3060000?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels">Shubh Agrawal</a> from <a href="https://www.pexels.com/photo/keyboard-backlit-laptop-keyboard-6541339/?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels">Pexels</a></figcaption></figure>Web Development is a booming field, there are thousands of web developers and hundreds of technologies that assist the awesome developers in achieving their goals.
To a newcomer or even an experienced person glancing at the choices available can be too much confusing and overwhelming. There is literally a framework or library for everything. In JavaScript, you even have one for checking if the number is even and you will be amazed by its popularity (<a href="https://github.com/i-voted-for-trump/is-even">Check here</a>)
Anyways, coming to the topic in the midst of so much pre-written code that can reduce a lot of work for you, writing all the code from scratch can look like a stupid question.
In short, the answer is totally dependent. There is no clear answer to this question. The answer totally depends on you and this is what I have tried to explain in the rest of this story. I have tried to keep it ASAP (As Short As Possible)
Let's Discuss more.
<h3>Advantages of Libraries &amp; Frameworks</h3>
<ul>
<li>Pre Written Code → Lot less work to do</li>
<li>Consistency → Styles look the same across the website</li>
</ul>
The biggest and the most obvious advantage of the prewritten code is that it is “pre-written” so you have to do a lot less work in writing everything from scratch. Like if you are using React and you use Material UI then you get a ton of subtle animations already in the button styles, the Grid System which is one of the most useful things in MUI and for the most part you don’t have to worry about your site being responsive.
Another awesome thing you can achieve is “consistency”, i.e. your design looks the same on your whole website. This is because you are mostly referring to the same components.
<h3>Disadvantages of Libraries and Frameworks</h3>
<ul>
<li>Pre-written Code → Can be hard to modify code</li>
<li>Consistency → Code can be consistent across many ‘other’ websites</li>
<li>External Libraries can sometimes be bulky</li>
</ul>
It is a fact that everything has advantages and disadvantages unless it’s VSCode (No more bad jokes ahead!) so does this.
One thing to note here is that these are the disadvantages according to me, so it is subjective and may or may not apply to you, I have tried to give you a general idea from my experience.
The first negative point according to me is the “pre-written” code. This is a subjective point as it totally depends on the person doing the thing. For a beginner, it can be difficult for her to make a lot of customizations. I have personally felt this while working with MUI for the first time, it took me a good amount of time to figure out the customizations I wanted to make. But if you are a bit experienced then you can get along with this pretty easily.
The other disadvantage that I think, and is a norm among the people who use Bootstrap is that the sites made with Bootstrap look like “Bootstrapped Sites”. What I think is, this is true for a beginner but an experienced person can easily get around this. So again it depends.
Another issue can be that the extra libraries can be “bulky”, I guess this was the case with Bootstrap because Bootstrap 4 used jQuery which was quite heavy. I think jQuery is removed in the later version of Bootstrap. Feel free to correct me if I am wrong.
<h3>Addressing the Elephant in the Room</h3>
Personally, I have used both ways to create websites.
I one project I used MUI and tried to customize it a lot (<a href="https://github.com/theshubhagrwl/MyMovieTime">https://github.com/theshubhagrwl/MyMovieTime</a>) while in the other I used only Custom CSS (<a href="https://theshubhagrwl.vercel.app/">https://theshubhagrwl.vercel.app/</a>) and as a user, you won’t be able to spot the difference but the main difference comes in the development time and the knowledge of CSS you have.
My advice is, if you are a web developer then you shouldn’t be afraid of CSS, actually, I used to hate CSS at one time, but then I met JavaScript (I promise this was the last one). Writing your own CSS can drastically improve your CSS knowledge.
The other and sometimes more important thing is the amount of time you want to spend on a project. If you want to get some project done quickly and not caring a lot about the design then it is better to use some framework or library because it will have a ton of stuff done for you.
So I hope this post proved helpful for you. Give it a like if it helped you and share it with others.
Connect with me on Twitter: <a href="https://twitter.com/theshubhagrwl">https://twitter.com/theshubhagrwl</a>
You can see my work on my website: <a href="https://theshubhagrwl.vercel.app/">Shubh Agrawal (theshubhagrwl.vercel.app)</a>
Thanks for spending your valuable time on this post.🙏
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d0a49cd4f87f" width="1" height="1" alt="">

The World Of CSS

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/0*NQp7RLCL1KkSS99S.png"></figure>You made an app with Django. Great! , and you are excited to show it to everyone on the planet. For that, you need to put it somewhere online so that others can access it.
Okay, you did some research and selected Heroku. Great Choice!👍
Now you started to deploy your app and did your research online and now you have many different resources to follow which suggest millions of ways to do it. So you are confused, frustrated and stuck and somehow managed to put host it but after that, to your surprise, you found that your CSS files didn’t show up.🤦‍♂️
OK, Now let’s solve your problems. This article covers almost everything that you will need.
<h3>Roadmap</h3>
<ul>
<li>Install Required Tools</li>
<li>Create Required Files</li>
<li>Create a Heroku app</li>
<li>Edit settings.py</li>
<li>Make changes for static files</li>
</ul>
<h3>Install the required tools</h3>
For deploying to Heroku you need to have Heroku CLI (Command Line Interface) installed.
You can do this by going here: <a href="https://devcenter.heroku.com/articles/heroku-cli">https://devcenter.heroku.com/articles/heroku-cli</a>
CLI is required because it will enable us to use features like login, run migrations etc.
<h3>Create Files required by Heroku</h3>
After installing the CLI let’s create all the files that Heroku needs.
Files are :
<h4>requirements.txt</h4>
Requirements.txt is the simplest to make. Just run the command
<pre>pip freeze &gt; requirements.txt</pre>
This command will make a .txt file which will contain all the packages that are required by your current Django Application.
Note: If you add any package further then run this command again, this way the file will be updated with the new packages
What is the use of requirements.txt? As you can see that it contains all the dependencies that your app requires. So when you put your app on Heroku it will tell Heroku which packages to install.
<h4>Procfile</h4>
After this make a new file name Procfile and do not put any extension in it. It is a file required by Heroku
According to Heroku :
<blockquote>Heroku apps include a Procfile that specifies the commands that are executed by the app on startup. You can use a Procfile to declare a variety of process types, including:</blockquote>
<blockquote>Your app’s web server Multiple types of worker processes A singleton process, such as a <a href="https://devcenter.heroku.com/articles/scheduled-jobs-custom-clock-processes">clock</a> Tasks to run <a href="https://devcenter.heroku.com/articles/release-phase">before a new release is deployed</a>
</blockquote>
For our app we can write the following command
<pre>web: gunicorn name_of_your_app.wsgi -log-file -</pre>
If you are confused about your app name, then just go to wsgi.py file in your project and you will find your app name there.
For this, you should have gunicorn installed and added to you requirements.txt file
Installing is super simple. You must have guessed it!
<pre>pip install gunicorn</pre>
<h4>runtime.txt</h4>
After this make a new text file called runtime.txt and inside it write the python version you are using in the following format
<pre>python-3.8.1 </pre>
That’s all the files we require. Now we have to start editing our settings.py file.
<h3>Create a Heroku App</h3>
This is a simple step and can be done in 2 ways, either by command line or through the Heroku Website.
Let’s use the Heroku Website for now.
<ul>
<li>After making Heroku Account you will see an option to create a new app</li>
<li>It will ask you for a name, the name should be unique. After hit and trials, you will be redirected to your app dashboard.</li>
<li>There are many options to play with here but let’s go to the settings tab and there click on Reveal Config Vars</li>
<li>In the KEY write SECRET_KEY and in VALUE paste the secret key from the settings file and you can change it because only this key will be used.</li>
<li>That’s all for now.</li>
<li>We will revisit it soon.</li>
</ul>
<h3>Edit settings.py</h3>
There are quite a few changes that should be made in this file.
Lets’ start
First change
<pre>DEBUG = False</pre>
In the allowed hosts enter the domain of your Heroku app
<pre>ALLOWED_HOSTS = ["your_app_name.herokuapp.com", "127.0.0.1"]</pre>
Replace the SECRET_KEY variable with the following (assuming that you have setup the secret key in heroku from the previous step)
<pre>SECRET_KEY = os.environ.get('SECRET_KEY')</pre>
What this does is, it gets the SECRET_KEY from the environment. In our case, we can set the secret_key in Heroku and it will provide the key here through environment variables.
<h3>Setup Static Files</h3>
In settings file, you will find
<pre>STATIC_URL = '/static/'</pre>
Replace this with the following code
<pre>STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), )</pre>
Basically, this will create a folder named static which will hold all the static files such as CSS files.
If your App contains images that you have stored on it or the user has the ability to store then add the following lines
<pre>MEDIA_URL = "/media/" MEDIA_ROOT = os.path.join(BASE_DIR, 'media')</pre>
This is pretty much the same as the above
There is one more thing you need to do.
If you have media files then to allow Django to server them you have to add a line to your urls.py file of the project (top-level urls file)
<pre>from django.conf import settings from django.conf.urls.static import static urlpatterns = [ # ... the rest of your URLconf goes here ... ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)</pre>
I highly recommend you have a look at this documentation.
<a href="https://docs.djangoproject.com/en/3.1/howto/static-files/">https://docs.djangoproject.com/en/3.1/howto/static-files/</a>
The last thing you need to serve your static files in production is WhiteNoise
<blockquote>With a couple of lines of config WhiteNoise allows your web app to serve its own static files, making it a self-contained unit that can be deployed anywhere without relying on nginx, Amazon S3 or any other external service. (Especially useful on Heroku, OpenShift and other PaaS providers.) -WhiteNoise Documentation</blockquote>
Install white noise
<pre>pip install whitenoise</pre>
Add it in MIDDLEWARE in settings.py file
<pre>MIDDLEWARE = [ # 'django.middleware.security.SecurityMiddleware', 'whitenoise.middleware.WhiteNoiseMiddleware', # ... ]</pre>
After this don’t forget to run the command which creates the requirements.txt file. Remember?
have a look at the documentation <a href="http://whitenoise.evans.io/en/stable/">http://whitenoise.evans.io/en/stable/</a>
So finally we have completed the 2 most important steps for deploying
<h3>Adding Code To GitHub</h3>
Make a new Github Repo and add all of your code in it. <a href="https://dev.to/ayomide_bajo/pushing-an-existing-repository-to-github-1f68">Use this post a reference</a>
After that go to Heroku and under the Deploy tab, you will see an option to connect Github.
Connect your repo and you can hit the deploy button to deploy your app.
<h3>Using Heroku Postgres</h3>
<h4>What is the Need? I am using SQLite already!</h4>
The problem is that
<blockquote>The Heroku filesystem is ephemeral — that means that any changes to the filesystem whilst the dyno is running only last until that dyno is shut down or restarted. Each dyno boots with a clean copy of the filesystem from the most recent deploy. This is similar to how many container-based systems, such as Docker, operate. In addition, under normal operations, dynos will restart every day in a process known as “Cycling”.</blockquote>
<a href="https://help.heroku.com/K1PPS2WM/why-are-my-file-uploads-missing-deleted">https://help.heroku.com/K1PPS2WM/why-are-my-file-uploads-missing-deleted</a>
Basically, all the data you will store will get delete every 24hrs.
To solve Heroku suggest using either AWS or Postgres. Heroku has made it very simple to use Postgres.
Let’s do this
Go to your app dashboard and in the Resources section search for Postgres. Select it and you will get something like this
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vAF5EGk4PwJwspHat3C4Vg.png"><figcaption>Postgres Add-on in Heroku</figcaption></figure>Now go to the settings tab and reveal the config vars
You will see a DATABASE_URL key there. It means that Heroku has added the database and now we have to tell our app to use this database.
For this, we will be needing another package called dj_database_url. Install it through pip and import it at top of settings.py file
Now paste the following code below DATABASES in settings file
<pre>db_from_env = dj_database_url.config(conn_max_age=600) DATABASES['default'].update(db_from_env)</pre>
That’s it now your database is setup
Currently, your database is empty and you might want to fill it.
<ul>
<li>Open terminal</li>
<li>type → heroku login</li>
<li>After the login run the following commands</li>
</ul>
<pre>heroku run python manage.py makemigrations heroku run python manage.py migrate heroku run python manage.py createsuperuser</pre>
Now your app is ready to be deployed
either use
<pre>git push heroku master</pre>
(after committing the changes) or push it through Github.
OK, so it’s finally done. It is a bit long but quite easy to do because you have to make only some minor changes, nothing too big.
If this article proved to be helpful then don’t forget to give it a clap 👏
If there is any kind of improvement then please tell me in the comments. 😄
<h3>Check Out my other articles</h3>
<ul>
<li><a href="https://medium.com/@theshubhagrwl/should-you-track-your-time-by-shubh-agrawal-968aecfcf97f">Should you Track your Time? -by Shubh Agrawal</a></li>
<li><a href="https://medium.com/@theshubhagrwl/custom-user-model-in-django-3-3750fb5656c4">Custom User Model in Django 3</a></li>
</ul>
<h3>Visit My Blog</h3>
<a href="https://theshubhagrwl.hashnode.dev/">Blog of Shubh Agrawal</a>
<h3>Check out my Articles on Dev.to</h3>
<a href="https://dev.to/theshubhagrwl">Shubh Agrawal - DEV Profile</a>
<h3>Visit my website and follow me on Blogging and social platforms</h3>
<a href="http://theshubhagrwl.netlify.app/">http://theshubhagrwl.netlify.app/</a>
Originally published at <a href="https://dev.to/theshubhagrwl/deploying-django-app-to-heroku-full-guide-4ce0">https://dev.to</a> on September 20, 2020.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=6ff7252578d7" width="1" height="1" alt=""><hr>
<a href="https://medium.com/quick-code/deploying-django-app-to-heroku-full-guide-6ff7252578d7">Deploying Django App to Heroku: Full Guide</a> was originally published in <a href="https://medium.com/quick-code">Quick Code</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Deploying Django App to Heroku: Full Guide

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DHPQyXoRV35RySvdOpoNZw.jpeg"><figcaption>Photo by <a href="https://www.pexels.com/@ian-panelo?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels">Ian Panelo</a> from <a href="https://www.pexels.com/photo/hourglass-and-wooden-letters-3995852/?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels">Pexels</a></figcaption></figure><h3>The reason behind this post</h3>
About 6 months ago during my college life, I was watching a lot of productivity videos on YouTube and tried to follow the advice in them. Time tracking is one of the most common advice which many YouTubers give. The main reason for this is by doing so we get to know where our time is going and we kind of learn to estimate time more precisely. Humans are very bad at estimating and this is the reason this is a famous approach.
I used Toggl which is an awesome app to start time tracking. There are also several other but this not a place to discuss which one to choose.
I tracked my time for around 6 months. Daily. It was the most consistent thing that I did. LOL
<h3>Benefits</h3>
Whenever you start a new thing you are generally more excited about it but slowly the fun goes away. This is a normal thing.
For analogy you can consider it like a Soda Bottle, it has tremendous energy but once you shake and open it after a few seconds it becomes like normal water. This is the same thing that happens with humans.
When I started tracking the time I was excited and tried to track almost every single task. This was way too much as I am a Human, not a Robot 🤖 , and in the world where the average attention span is 15seconds, it is harder to focus on one thing.
To counter this problem I made a threshold. I started tracking all those tasks that took more than or equal to 30mins. This was helpful and due to this, I was also not in the hurry to make an entry in the app. That was too much.
So I continued this and after I week when I was gazing at my weekly summary I was able to see the tasks which I did the most or in other words where my time went. One more thing that was the time when there was a lockdown due to a pandemic and I had too much time, so it was kind of necessary to keep a track where I am spending my time.
This went well for 3 months, I was motivated to spend more time on a single task so that I can put it on the app and it was working. A kind of habit developed in me.
<h3>Problems you might face</h3>
Now if you follow the last paragraph and want to start tracking your time then it is good, go on, give it a try. Don’t read further, Experiment it.
If you are reading this then here I would like to tell you some problems that I faced.
When maintaining a time log becomes your habit and if somehow you are unable to get the hours that you spend the last day or week then there comes an element of frustration. It may sound a little silly but it will happen when you do this consistently for around 3 months. And if this frustration repeats then our mind comes up with the brilliant strategy of cheating. This happened to me, I increased 5–10mintues on tasks just to meet that goal. This can make you less predictive about how much time you need.
Another big disadvantage, what happened to me was that I was racing against the clock and not the work. If I had some side task which I wasn’t tracking but it was necessary then I was delaying it and I know it’s a little hard to explain but it was not doing too good for me.
So I decided to give it a break.
<h3>So What Happened after that?</h3>
After facing some issues I decided to not track time for a week. This was very helpful for me. After 6 months of consistently marinating a log now, I was free. I did whatever, whenever and for how long I want to do and it was a good feeling. I had one less thing to worry about. I also analyzed that I was even more productive than before.
<h3>TL;DR</h3>
The best advice that I can give is Start Tracking your time. Do it till you don’t face the above-mentioned problems.
Time tracking taught me to give time to a task and not to rush through many things at a time. This was going great but when I found I was cheating with myself I had to do some change. So I quit time tracking and it helped me. Probably after some time, I will start it again.
Thanks for giving your valuable time to this post!
Give it a clap if you liked it.
<h4>A little about me</h4>
I am a Full Stack Developer and a Technology lover. Other than technology I love reading and gaming.
Checkout my portfolio: <a href="https://theshubhagrwl.netlify.app/">https://theshubhagrwl.netlify.app/</a> and let’s connect on social platforms.😉
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=968aecfcf97f" width="1" height="1" alt="">

Should you Track your Time?

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rAkrFWT2qbrcwI2tPrGA5A.jpeg"><figcaption>Photo by <a href="https://www.pexels.com/@kevin-ku-92347?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels">Kevin Ku</a> from <a href="https://www.pexels.com/photo/coding-computer-data-depth-of-field-577585/?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels">Pexels</a></figcaption></figure><h3>Introduction</h3>
Hi, in this post we will learn to make a Custom User Model in Django 3 and we will also change the default login functionality of the Django Admin. We will use Email and Password to log in.
<h3>Motivation</h3>
I had to make a Custom User for my app, I was able to make the model but the problem was createsuperuser command was not working. To debug it I had to do a lot of research and the problem was most of the resources at that time were outdated, so I decided to write this post.
I have made a <a href="https://github.com/theshubhagrwl/django_custom_user_app">GitHub </a>repo, so if you want you can directly use that (instructions are there)
<h3>Let’s Get Started</h3>
First of all, make a Django Project and create an app called users
<h4>Now we can start editing the models.py file inside our users app</h4>
Before editing let’s do some theory.
What are managers in Django?
<blockquote>A Manager is an interface through which database query operations are provided to Django models. At least one Manager exists for every model in a Django application.- Django Docs</blockquote>
Simply speaking Managers provide us a way to manage our model. We can implement this by making our model a subclass of the Manager Class. The manager class is the place where commands like createsuperuser can be edited.
Now open up the models.py and put the following code in it
<a href="https://medium.com/media/e5b016b92dcb10ac2b2437abc2870c86/href">https://medium.com/media/e5b016b92dcb10ac2b2437abc2870c86/href</a>The most important thing to note here is the is_staff and is_superuser attributes. Making a typo in this can cause a hard time debugging.
<h4>What have we done here?</h4>
We have made a manger for our user model. Inside of this, we have made 2 functions called create_user and create_superuser.
create_user, as the name suggests, creates a new user, and create_superuser is used to create a superuser by setting is_staff and is_superuser to true.
After the manager, we have our usual model.
We have set username to none because we do not want to include a username.
USERNAME_FIELD in it indicated which we declare ‘email’. This should be unique.
session_token is an optional field. I have it there because I was making my custom token.
The last line of the models.py indicates that the CustomUser is an object of UserManager.
<h3>Important Thing</h3>
After you have made the model, Open settings.py file and add a line in it
<pre>AUTH_USER_MODEL = 'users.CustomUser'</pre>
<blockquote>Django allows you to override the default user model by providing a value for the AUTH_USER_MODEL setting that references a custom model. This dotted pair describes the name of the Django app (which must be in your INSTALLED_APPS), and the name of the Django model that you wish to use as your user model. -Django Docs</blockquote>
<h3>Last Steps</h3>
Now you can run the migrations commands and create superuser also.
<pre>py manage.py makemigrations py manage.py migrate py manage.py createsuperuser</pre>
It will ask for your email and password. Give it the details.
<h4>Don’t forget to register the app in admin</h4>
<pre>admin.site.register(CustomUser)</pre>
Now you can run the server and login with your email and password in the admin panel.
If you have any suggestions then please let me know.
Give this a clap if it was helpful.
Check out my portfolio: <a href="https://theshubhagrwl.netlify.app/">https://theshubhagrwl.netlify.app/</a>
Connect with me on Social Platforms:
LinkedIn: <a href="https://www.linkedin.com/in/theshubhagrwl/">https://www.linkedin.com/in/theshubhagrwl/</a>
Twitter: <a href="https://twitter.com/theshubhagrwl">https://twitter.com/theshubhagrwl</a>/
GitHub: <a href="https://github.com/theshubhagrwl">https://github.com/theshubhagrwl</a>
Instagram: <a href="https://www.instagram.com/theshubhagrwl/">https://www.instagram.com/theshubhagrwl/</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=3750fb5656c4" width="1" height="1" alt=""><hr>
<a href="https://medium.com/quick-code/custom-user-model-in-django-3-3750fb5656c4">Custom User Model in Django 3</a> was originally published in <a href="https://medium.com/quick-code">Quick Code</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Other Articles