Stories by Shubh Agrawal on Medium

<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.

Custom User Model in Django 3

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8V3BhaLgQYh8-OkYYuMc0Q.jpeg"><figcaption>Photo by <a href="https://www.pexels.com/@negativespace?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels">Negative Space</a> from <a href="https://www.pexels.com/photo/computer-keyboard-34153/?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels">Pexels</a></figcaption></figure>Before we go to the topic let’s do some basic revision.
<blockquote>Linear Search or sequential search is a method for finding an element within a list. It sequentially checks each element of the list until a match is found or the whole list has been searched. <a href="https://www.wikiwand.com/en/Linear_search">https://www.wikiwand.com/en/Linear_search</a>
</blockquote>
and,
<blockquote>Divide and conquer is an algorithm design paradigm based on multi-branched recursion. A divide-and-conquer algorithm works by recursively breaking down a problem into two or more sub-problems of the same or related type until these become simple enough to be solved directly. <a href="https://www.wikiwand.com/en/Divide-and-conquer_algorithm">https://www.wikiwand.com/en/Divide-and-conquer_algorithm</a>
</blockquote>
According to me, Linear Search is the most basic algorithm. It is pretty straight forward and easiest to implement. So naturally, every programmer knows this.
It doesn’t matter whether you are self-taught or learned to program in school or college, 90% chances are that you know how to implement linear search by simple iteration, And frankly, it is the best and only practical way!
So what’s the point of this post then?
Let’s come to it.
Think about the divide and conquer technique. As per the definition you have to recursively divide the bigger problem into two or more smaller problems. So basically we are diving and ruling. Now it doesn’t matter if you are dividing the problem into exactly two equal halves or many different smaller parts or some kind of uneven distribution.
Now we use this fact in the Linear search algorithm.
Let's look at the Iterative approach
<a href="https://medium.com/media/de335989542e19947b83a2975a79d6a8/href">https://medium.com/media/de335989542e19947b83a2975a79d6a8/href</a>Let’s see the Recursive approach
<a href="https://medium.com/media/f6a0cce5af16ff5a295e70b14ecbe6c5/href">https://medium.com/media/f6a0cce5af16ff5a295e70b14ecbe6c5/href</a>What’s going on here?
We are calling a function and giving it an array, size of the array, element to search, and index as argument.
Inside the function, we are doing some basic checks and finally, we are calling the function again and this time we are incrementing the index by 1 (cause initially it was 0).
If you are confused that how this can be a divide and conquer, then please take a look at the definition again. It says to divide the problem into two or more parts and here we are dividing our array into an array of size one less than the original one.
But,
Here’s a catch. To apply it recursively can be good if you want to trick some beginner but for practical uses, this is as useless as it can be.
We are taking comparatively more resources and then also we have to complexity of O(n).
The main takeaway is to use the iterative method for linear search but if you want to have some fun then give someone this program.
For me, it was a different way to look at problems.
Thanks for reading! Good Day!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=7a442689d3ca" width="1" height="1" alt="">

Other Articles