<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Manu Krishnan</title>
    <description>The latest articles on DEV Community by Manu Krishnan (@manu_).</description>
    <link>https://dev.to/manu_</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F666894%2F4b141372-a887-48ed-b7a4-b2327acf0eaf.jpg</url>
      <title>DEV Community: Manu Krishnan</title>
      <link>https://dev.to/manu_</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/manu_"/>
    <language>en</language>
    <item>
      <title>5 Reasons Why You Might Want to Rethink Using an iPhone</title>
      <dc:creator>Manu Krishnan</dc:creator>
      <pubDate>Mon, 28 Oct 2024 09:13:53 +0000</pubDate>
      <link>https://dev.to/manu_/5-reasons-why-you-might-want-to-rethink-using-an-iphone-3131</link>
      <guid>https://dev.to/manu_/5-reasons-why-you-might-want-to-rethink-using-an-iphone-3131</guid>
      <description>&lt;p&gt;While iPhones are popular and known for their sleek design, there are a few everyday tasks that can feel a bit frustrating, especially for those who like things to be quick and smooth. Here are five small but annoying reasons (completely personal UX experience) that might make you consider ditching the iPhone:&lt;/p&gt;

&lt;h2&gt;
  
  
  WiFi Turn-Off is Temporary (Only Until Tomorrow)
&lt;/h2&gt;

&lt;p&gt;When you turn off WiFi from the Control Center on your iPhone, it doesn’t fully disconnect. Instead, it turns back on automatically the next day. This is Apple's way of keeping you connected for services like AirDrop, but for users who want full control over WiFi, it feels unnecessary and confusing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Can't Jump to Contacts from the Recent Call List
&lt;/h2&gt;

&lt;p&gt;On many other phones, you can easily tap on a recent call and go directly to the contact's details. But on an iPhone, this feature doesn’t exist. If you want to access the contact, you need to go through a few extra steps, which can feel a bit inconvenient.&lt;/p&gt;

&lt;h2&gt;
  
  
  No Contact Search from the Dial Pad
&lt;/h2&gt;

&lt;p&gt;Unlike other smartphones, iPhones don’t let you search for a contact from the dial pad itself. This means you have to go into your contacts list separately. It’s a minor detail, but it can slow things down when you’re trying to reach someone quickly.&lt;/p&gt;

&lt;h2&gt;
  
  
  Complicated File Saving and Sharing
&lt;/h2&gt;

&lt;p&gt;Saving or sharing a file from apps like Gmail or Google Drive to local storage or sharing it on WhatsApp often involves multiple steps. Sometimes, it’s hard to understand Apple’s logic for these extra steps, and it can feel overly complicated if you’re used to quicker options on other devices.&lt;/p&gt;

&lt;h2&gt;
  
  
  Multiple Steps to Download Files from the Browser
&lt;/h2&gt;

&lt;p&gt;Downloading files from a browser on an iPhone usually involves a few extra clicks, like opening the file first, then choosing where to save it. For tech-savvy users, this multi-step process can feel clunky and disrupts the smooth, user-friendly experience Apple is known for.&lt;/p&gt;

&lt;p&gt;While iPhones offer a lot of great features, these little inconveniences can add up, especially if you value efficiency. If these issues sound familiar and are becoming daily frustrations, it might be time to explore other options.&lt;/p&gt;

</description>
      <category>ios</category>
      <category>iphone</category>
      <category>android</category>
      <category>ux</category>
    </item>
    <item>
      <title>React's Evolution: Moving Beyond Create React App</title>
      <dc:creator>Manu Krishnan</dc:creator>
      <pubDate>Mon, 04 Mar 2024 06:42:43 +0000</pubDate>
      <link>https://dev.to/manu_/reacts-evolution-moving-beyond-create-react-app-2ho6</link>
      <guid>https://dev.to/manu_/reacts-evolution-moving-beyond-create-react-app-2ho6</guid>
      <description>&lt;p&gt;In the ever-evolving world of web development, staying up-to-date with the latest trends and technologies is crucial. As developers, we understand the importance of being on the bleeding edge, constantly learning and adapting to the changes happening around us. Recently, I stumbled upon an interesting shift within the React ecosystem that got me thinking about the pace of change in our industry.&lt;/p&gt;

&lt;p&gt;For years, Create React App (CRA) has been the go-to tool for quickly setting up React projects. Its simplicity and ease of use made it a favorite among developers worldwide. However, it seems that &lt;a href="https://react.dev/learn/start-a-new-react-project" rel="noopener noreferrer"&gt;React is now embracing a new direction&lt;/a&gt;, one that steers away from CRA and towards frameworks like &lt;a href="https://nextjs.org/" rel="noopener noreferrer"&gt;Next.js&lt;/a&gt; or &lt;a href="https://remix.run/" rel="noopener noreferrer"&gt;Remix&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Upon revisiting the official documentation for starting a React project, I was surprised to find minimal mention of CRA. Instead, the focus has shifted towards highlighting the benefits of Next.js and Remix. This change in emphasis got me reflecting on how rapidly the landscape of web development can evolve.&lt;/p&gt;

&lt;p&gt;Interestingly, while I might be a little late to the party, &lt;a href="https://github.com/facebook/create-react-app/issues/13072" rel="noopener noreferrer"&gt;discussions and updates&lt;/a&gt; regarding this shift happened around a year ago, shedding light on React's direction well before it caught my attention.&lt;/p&gt;

&lt;p&gt;Moreover, alongside this transition, there's been a buzz around &lt;a href="https://vitejs.dev/" rel="noopener noreferrer"&gt;Vite&lt;/a&gt;, a lightning-fast bundling tool that's gaining traction within the React community. Its speed and efficiency offer an enticing alternative to traditional bundlers like Webpack, further reflecting the constant innovation driving our field forward.&lt;/p&gt;

&lt;p&gt;As developers, we're accustomed to embracing change and adapting to new technologies. It's what keeps our skills sharp and our projects innovative. React's shift towards Next.js, Remix, and the buzz surrounding Vite serve as reminders of the importance of staying informed and being open to new tools and frameworks.&lt;/p&gt;

&lt;p&gt;While change can sometimes feel daunting, it also presents exciting opportunities for growth and exploration. By staying curious and continuously learning, we can ensure that we remain at the forefront of our field. So, whether you're a seasoned React developer or just starting out, take some time to delve into these evolving recommendations. Who knows what new insights and possibilities you might discover along the way!&lt;/p&gt;

&lt;p&gt;In conclusion, React's evolution beyond Create React App signals a dynamic shift within the web development community. Embracing change is not just a necessity but also an exciting journey that allows us to push the boundaries of what's possible in our craft. So, let's keep exploring, learning, and evolving together as we navigate the ever-changing landscape of web development.&lt;/p&gt;

&lt;p&gt;Ref - &lt;a href="https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741" rel="noopener noreferrer"&gt;read Dan Abramov's post on github&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>react</category>
      <category>nextjs</category>
    </item>
    <item>
      <title>Debug a website (local or remote hosted)on an android mobile device</title>
      <dc:creator>Manu Krishnan</dc:creator>
      <pubDate>Wed, 13 Dec 2023 05:26:27 +0000</pubDate>
      <link>https://dev.to/manu_/debug-a-website-local-or-remote-hostedon-an-android-mobile-device-3n4l</link>
      <guid>https://dev.to/manu_/debug-a-website-local-or-remote-hostedon-an-android-mobile-device-3n4l</guid>
      <description>&lt;p&gt;Debugging from a desktop is very easy with the debugger and dev tools available with different browsers. Google's chrome dev tools is a handy tool for all web developers. But how do we inspect in a mobile browser, or see the network requests or even put a debug point? Most of the developers requires debugging a website that runs on localhost, which may not be possible from a mobile device without additional steps. I am trying to address this two problems here.&lt;br&gt;
Pre requisites :-&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Google chrome on android device and desktop&lt;/li&gt;
&lt;li&gt;USB cable for debugging&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Steps :-&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Enable usb debugging on your android device (Various links are available for how to do this, am trying to reduce the scope here).&lt;/li&gt;
&lt;li&gt;Open chrome in desktop and type chrome://inspect . We can see the devices in the network and the mobile device in devices&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl9dbnarclkvqs4f6u9e7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl9dbnarclkvqs4f6u9e7.png" alt="Chrome inspect device screen" width="720" height="475"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Connect your android device via USB to the desktop. There may be a prompt on mobile for allow debug and allow that. You can see a new device is listed in devices list in chrome.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs51okkd6pu0gvkbc3vmk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs51okkd6pu0gvkbc3vmk.png" alt="Android device in chrome devices" width="720" height="475"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Now if we add a new tab or go to a website, the tabs and address will listed in desktop. Inspect link is right over there and click on that&lt;/li&gt;
&lt;li&gt;This will open up a mobile screen cast and all the set of chrome dev tools options&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The second problem is debugging a website hosted in local web server. By default android will not allow this as localhost for an android device means itself and there is no server running on android and it is running on the development machine. Chrome provides a way to forward port. i.e. you can add a port mapping so that requests coming on the device will forward it to development machine.&lt;br&gt;
Steps to debug in localhost&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Click on port forwarding in the devices tab. This will open port forward settings&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnt6ezf0rlhxs2250ku5d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnt6ezf0rlhxs2250ku5d.png" alt="Port forward settings" width="720" height="304"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add the required port and corresponding localhost address in the list. For example I just added port 3000 and its corresponding ip and port as localhost:3000.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4ktbaxr9r81nplf6ab1u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4ktbaxr9r81nplf6ab1u.png" alt="Port forward settings detail" width="720" height="668"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Check the enable port forwarding and click done. After this, just need to type in localhost:3000 in mobile browser. &lt;strong&gt;Boom..&lt;/strong&gt;We are done. We can see the website hosted on 3000 port on your dev machine.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4koa64xwb5zig7jeodf3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4koa64xwb5zig7jeodf3.png" alt="USB connected mobile device" width="480" height="640"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbman90qc03nahcxtv1pc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbman90qc03nahcxtv1pc.png" alt="mobile device chrome inspection" width="720" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;[Wrote this in medium few years back. Just switched to the dev.to forum]&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>android</category>
      <category>programming</category>
    </item>
    <item>
      <title>How to write redux middleware - sample code snippet</title>
      <dc:creator>Manu Krishnan</dc:creator>
      <pubDate>Wed, 15 Jun 2022 11:15:46 +0000</pubDate>
      <link>https://dev.to/manu_/how-to-write-redux-middleware-sample-code-snippet-3g8f</link>
      <guid>https://dev.to/manu_/how-to-write-redux-middleware-sample-code-snippet-3g8f</guid>
      <description>&lt;p&gt;Here is a sample snippet where you can add your logic to the redux middleware (this snippet will just console all your actions)&lt;/p&gt;

&lt;p&gt;&lt;code&gt;const logMiddleWare = store =&amp;gt; next =&amp;gt; action =&amp;gt; {&lt;br&gt;
    // Replace your logic below&lt;br&gt;
        console.log(action.type, action);&lt;br&gt;
    next(action);&lt;br&gt;
}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Here is how it should be included in your store&lt;/p&gt;

&lt;p&gt;&lt;code&gt;const Store = createStore(rootReducer, applyMiddleware(thunk, logMiddleWare));&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

</description>
      <category>redux</category>
      <category>react</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>JS tips - Operator which can detect null and undefined but no other falsy values like zero,false, empty string in javascript</title>
      <dc:creator>Manu Krishnan</dc:creator>
      <pubDate>Tue, 14 Jun 2022 13:34:23 +0000</pubDate>
      <link>https://dev.to/manu_/operator-which-can-detect-null-and-undefined-but-no-other-falsy-values-like-zerofalse-empty-string-in-javascript-3mbo</link>
      <guid>https://dev.to/manu_/operator-which-can-detect-null-and-undefined-but-no-other-falsy-values-like-zerofalse-empty-string-in-javascript-3mbo</guid>
      <description>&lt;p&gt;In one word its a very simple solution, i.e. Nullish coalescing operator (??)&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>ecma</category>
      <category>typescript</category>
    </item>
  </channel>
</rss>
