<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Aditya Naik | Personal Website</title>
    <link>https://d6cbd428.hugo-blog-e6x.pages.dev/</link>
    <description>Recent content on Aditya Naik | Personal Website</description>
    <generator>Hugo</generator>
    <language>en</language>
    <lastBuildDate>Sat, 24 Oct 2026 09:32:59 +0200</lastBuildDate>
    <atom:link href="https://d6cbd428.hugo-blog-e6x.pages.dev/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Freeing up disk space on mac and APFS local snapshots</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/note/freeing-disk-space-mac-apfs-local-snapshots/</link>
      <pubDate>Sat, 24 Oct 2026 09:32:59 +0200</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/note/freeing-disk-space-mac-apfs-local-snapshots/</guid>
      <description>&lt;p&gt;Today, I faced the infamous &#xA;&lt;a&#xA;  href=&#34;https://cleanwithcrumb.com/blog/apfs-snapshots-taking-up-space/&#34;&#xA;  &#xA;  target=&#34;_blank&#34; rel=&#34;noopener&#34;&#xA;  &gt;Mac APFS&lt;/a&#xA;&gt;&#xA; issue, and panicked a bit wondering if something was eating up all the space I was freeing up on my mac.&lt;/p&gt;&#xA;&lt;p&gt;Like everyone else, I ran out of space and nuked quite a bit of old cruft that had gathered over the years. Only to see not a bite freed when I ran &lt;code&gt;df -h&lt;/code&gt;. Talking with local qwen based parrot only showed me whats still left on the disk.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Certificates compromised, PHP vulnerability</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/note/20261022-ca-certs-compromised/</link>
      <pubDate>Thu, 22 Oct 2026 21:12:52 +0200</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/note/20261022-ca-certs-compromised/</guid>
      <description>&lt;p&gt;Today was not a great day for web security on multiple fundamental levels. There was an issue within core layers of TLS and you can read more about it &#xA;&lt;a&#xA;  href=&#34;https://blog.cloudflare.com/emudhra-certificate-compromise&#34;&#xA;  &#xA;  target=&#34;_blank&#34; rel=&#34;noopener&#34;&#xA;  &gt;on cloudflare blog&lt;/a&#xA;&gt;&#xA;&lt;/p&gt;&#xA;&lt;p&gt;On the non-technical side, this issue could have been much better handled by both the eMudhra company and indian regulator, but they instead decided to gaslight and claim social media fear mongering. Standard reaction and expected, but disappointing none the less. Interestingly enough, they used very low entropy root keys for their intermediate certificates, but any key is as random as any other key so this looks embarrassing for them to have used test keys in production for more than a year without realizing this process gap. Since then, they have announced that they are moving out of SSL/TLS business but perception damage is done.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Redis | Cache user data with Redis in golang app</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2023/07/16/redis-cache-user-data-with-redis-in-golang-app/</link>
      <pubDate>Sun, 16 Jul 2023 08:56:12 +0000</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2023/07/16/redis-cache-user-data-with-redis-in-golang-app/</guid>
      <description>&lt;p&gt;Imagine this. Your fantastic app, written in Golang, is chugging along. You are getting more users and increased activity all the time. Over time, you start hearing complaints about slow performance. This takes you by surprise, and you start exploring potential causes for the slowdown.&lt;/p&gt;&#xA;&lt;p&gt;The absolute obvious problem you want to fix first is the user behavior tracking system. You want to know most frequently used paths to select code areas for refactoring, simplification, optimization and potential automation.&lt;/p&gt;</description>
    </item>
    <item>
      <title>PGBadger | Postgresql log analysis made easy</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2023/07/02/pgbadger-postgresql-log-analysis-made-easy/</link>
      <pubDate>Sun, 02 Jul 2023 06:33:21 +0000</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2023/07/02/pgbadger-postgresql-log-analysis-made-easy/</guid>
      <description>&lt;h2 id=&#34;the-need-for-postgresql-log-analysis&#34;&gt;The need for postgresql log analysis?&lt;/h2&gt;&#xA;&lt;p&gt;While writing sql for any flow, primary focus is on the correctness of the query and not on the performance of the query. Performance issues creep in when updating/iterating a flow iteratively over multiple development cycles.Query performance is important to analyze during scaling. This is where query log analysis comes in.&lt;/p&gt;&#xA;&lt;p&gt;In one of our cases, a complicated workflow was significantly slow when we load tested it. We were trying to figure out the bottleneck both in code structure and with query performance. Our go-to tool for query performance analysis became &lt;code&gt;pgBadger&lt;/code&gt;.&lt;/p&gt;</description>
    </item>
    <item>
      <title></title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/note/autolink-jira-ticket-github-pr-l88mhdh8fntkqix/</link>
      <pubDate>Fri, 04 Nov 2022 09:56:14 +0100</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/note/autolink-jira-ticket-github-pr-l88mhdh8fntkqix/</guid>
      <description>&lt;p&gt;I just found out a cool way to connect between Github and Jira.&lt;/p&gt;&#xA;&lt;p&gt;I wanted a quick way to link Jira ticket in the PR raised on Github. I came across this awesome &amp;lsquo;autolink&amp;rsquo; functionality in github that is exactly suitable for this purpose.&lt;/p&gt;&#xA;&lt;p&gt;Just navigate to github project settings, and at/near bottom you will find the autolink setup.&lt;/p&gt;&#xA;&lt;p&gt;Just add it and you are good to go.&lt;/p&gt;&#xA;&lt;p&gt;Read more at &#xA;&lt;a&#xA;  href=&#34;https://github.blog/2019-10-14-introducing-autolink-references/&#34;&#xA;  &#xA;  target=&#34;_blank&#34; rel=&#34;noopener&#34;&#xA;  &gt;https://github.blog/2019-10-14-introducing-autolink-references/&lt;/a&#xA;&gt;&#xA;&lt;/p&gt;</description>
    </item>
    <item>
      <title></title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/note/economic-slowdown-klarna-layoffs-9ww2h2cwfohxcov/</link>
      <pubDate>Tue, 24 May 2022 13:33:57 +0200</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/note/economic-slowdown-klarna-layoffs-9ww2h2cwfohxcov/</guid>
      <description>&lt;p&gt;Klarna, the swedish payment giant, is laying off some ( seems like 10% or so ) their workforce, and apparently there were some hiccups in the process.&lt;/p&gt;&#xA;&lt;p&gt;Klarna was one of the shining examples of new age Swedish unicorns and this news will adversely impact the local valuations and fund raising plans for others following in its footsteps towards growth.&lt;/p&gt;&#xA;&lt;p&gt;This confirms that the global tech salary bubble has now burst, along with growth stock valuation bubble.&lt;/p&gt;</description>
    </item>
    <item>
      <title></title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/note/slowdown-in-global-economy-laaosmcdf9teile/</link>
      <pubDate>Wed, 18 May 2022 10:28:49 +0200</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/note/slowdown-in-global-economy-laaosmcdf9teile/</guid>
      <description>&lt;p&gt;There is rising inflation in most of the countries. Printing money and reducing rates to stimulate economy during COVID and some severe supply chain disruptions, has led to oversupply of money and shortage of goods.&lt;/p&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;Due to war in Ukraine, there is massive impact on wheat, fertilizer and oil supply chains&lt;/li&gt;&#xA;&lt;li&gt;Due to ongoing COVID restrictions, there are strict lock downs in China, further impacting supply chains&lt;/li&gt;&#xA;&lt;li&gt;Due to adverse weather, grain production is going to be adversely impacted across the world.&lt;/li&gt;&#xA;&lt;li&gt;Most countries, (apart from China) do not have huge stocks of grains to survive through the year without taking a huge hit on the economy.&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;p&gt;It is going to be a painful year.&lt;/p&gt;</description>
    </item>
    <item>
      <title></title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/note/man-is-a-social-animal-eooecpcji1fpty/</link>
      <pubDate>Mon, 16 May 2022 20:22:07 +0200</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/note/man-is-a-social-animal-eooecpcji1fpty/</guid>
      <description>&lt;p&gt;It was fascinating to talk about personal roots and awareness of mortality today.&lt;/p&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;We all (or most) want to belong to a tribe. It could be ideological, familial, political, athletics fans or whatever else.&lt;/li&gt;&#xA;&lt;li&gt;It would a feeling of profound loss, if you have been connected to an ancestral place that was settled for many generations, and then you uprooted for better life and opportunities. Specially if you have been to the place and can find a personal connection.&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;p&gt;Also certain milestones and events make you think of mortality of oneself or close connections, and sometimes we take some action to capture part of a person that we fear we will lose.&lt;/p&gt;</description>
    </item>
    <item>
      <title></title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/note/micropub-is-enabled-z88qhyc0iocjfk/</link>
      <pubDate>Sat, 14 May 2022 21:18:19 +0200</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/note/micropub-is-enabled-z88qhyc0iocjfk/</guid>
      <description>&lt;p&gt;It has been quite busy last few weekends, but I finally pulled off setting up posting notes through micropub!!🎉&lt;/p&gt;&#xA;&lt;p&gt;Seems really convenient to just log into any web client and post a quick note on my blog. Takes the formality of blogging away!!&lt;/p&gt;</description>
    </item>
    <item>
      <title>Links, images, captions, quotes and iframes in a hugo blog</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2022/04/23/links-images-captions-quotes-and-iframes-in-a-hugo-blog/</link>
      <pubDate>Sat, 23 Apr 2022 00:00:00 +0000</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2022/04/23/links-images-captions-quotes-and-iframes-in-a-hugo-blog/</guid>
      <description>&lt;h2 id=&#34;this-blog-is-built-with-hugo&#34;&gt;This blog is built with hugo&lt;/h2&gt;&#xA;&lt;p&gt;I like hugo, its easy to work with and blazing fast!&lt;/p&gt;&#xA;&lt;p&gt;This post is just to document a few changes I recently did with my website and some notes for myself. Kind of a meta post really.&lt;/p&gt;&#xA;&lt;h2 id=&#34;improve-iframe-loading-for-faster-page-load&#34;&gt;Improve iframe loading for faster page load&lt;/h2&gt;&#xA;&lt;p&gt;For a static site, almost instant page load is expected, and should be verified by lighthouse as such.&#xA;I attached an iframe to share code/result for &#xA;&#xA;      &#xA;    &#xA;  &lt;a&#xA;  href=&#34;https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2020/05/20/material-ui-how-to-easily-set-up-dark-theme-toggle-in-react/&#34;&#xA;  title=&#34;How to toggle MUI theme&#34;&#xA;  &#xA;  &gt;one of the blog posts&lt;/a&#xA;&gt;&#xA; and that was slowing down the page load significantly. It pulls in stuff from the third party and it loads the amount of code it needs to load.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Material UI | How to easily setup popup notifications</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2021/12/12/material-ui-how-to-easily-setup-popup-notifications/</link>
      <pubDate>Sun, 12 Dec 2021 00:00:00 +0000</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2021/12/12/material-ui-how-to-easily-setup-popup-notifications/</guid>
      <description>&lt;p&gt;Using Material UI and React Context to set up global notification system.&lt;/p&gt;&#xA;&lt;h2 id=&#34;need-for-global-notification-system&#34;&gt;Need for global notification system&lt;/h2&gt;&#xA;&lt;p&gt;In your application, you want have good user experience and let the user know if the actions/clicks have resulted in success or failure. We should also show warning and information messages to guide user through the flows.&lt;/p&gt;&#xA;&lt;p&gt;It is of course possible to display a local popup component wherever needed, but it quickly becomes a bloat and irritating to manage. It would be really cool to just set up the whole system once and trigger it from wherever from the app to get consistent experience.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Run cypress tests in parallel on CircleCI</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2021/11/26/run-cypress-tests-in-parallel-on-circleci/</link>
      <pubDate>Fri, 26 Nov 2021 00:00:00 +0000</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2021/11/26/run-cypress-tests-in-parallel-on-circleci/</guid>
      <description>&lt;h2 id=&#34;background&#34;&gt;Background&lt;/h2&gt;&#xA;&lt;p&gt;I use and enjoy Cypress for testing, and use CircleCI for CI/CD purposes.&lt;/p&gt;&#xA;&lt;p&gt;In the spirit of learning by tinkering, I wanted to tweak our CircleCI workflows to see if we could cut down on our CI run times and potentially save on some credits.&lt;/p&gt;&#xA;&lt;p&gt;I wanted to dynamically split up tests and use parallel machines each running only some of the tests to speed up the testing step.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Cypress | How to handle auth JWT using env and commands</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2021/04/24/cypress-how-to-handle-auth-jwt-using-env-and-commands/</link>
      <pubDate>Sat, 24 Apr 2021 00:00:00 +0000</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2021/04/24/cypress-how-to-handle-auth-jwt-using-env-and-commands/</guid>
      <description>&lt;ul&gt;&#xA;&lt;li&gt;&#xA;&lt;a&#xA;  href=&#34;#1-setting-the-scene&#34;&#xA;  &#xA;  &#xA;  &gt;1. Setting the scene&lt;/a&#xA;&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;a&#xA;  href=&#34;#2-need-for-writing-explicit-network-requests-in-cypress&#34;&#xA;  &#xA;  &#xA;  &gt;2. Need for writing explicit network requests in cypress?&lt;/a&#xA;&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;a&#xA;  href=&#34;#3-why-not-mock-api-responses-or-seed-the-data-or-both&#34;&#xA;  &#xA;  &#xA;  &gt;3. Why not mock API responses OR seed the data OR both?&lt;/a&#xA;&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;a&#xA;  href=&#34;#4-what-are-cypress-commands&#34;&#xA;  &#xA;  &#xA;  &gt;4. What are cypress commands?&lt;/a&#xA;&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;a&#xA;  href=&#34;#5-how-does-the-login-command-look&#34;&#xA;  &#xA;  &#xA;  &gt;5. How does the login command look?&lt;/a&#xA;&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;a&#xA;  href=&#34;#6-how-to-access-redux-store&#34;&#xA;  &#xA;  &#xA;  &gt;6. How to access redux store?&lt;/a&#xA;&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;a&#xA;  href=&#34;#7-exploring-cypress-env&#34;&#xA;  &#xA;  &#xA;  &gt;7. Exploring Cypress env&lt;/a&#xA;&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;a&#xA;  href=&#34;#8-how-to-set-and-access-cypress-env&#34;&#xA;  &#xA;  &#xA;  &gt;8. How to set and access cypress env&lt;/a&#xA;&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;a&#xA;  href=&#34;#9-tldr-some-example-code&#34;&#xA;  &#xA;  &#xA;  &gt;9. TLDR: Some Example code&lt;/a&#xA;&gt;&#xA;&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;h2 id=&#34;1-setting-the-scene&#34;&gt;1. Setting the scene&lt;/h2&gt;&#xA;&lt;p&gt;A typical case of application structure is when we have a client paired with API. In such a scenario, its very useful to set up end-to-end tests using &#xA;&lt;a&#xA;  href=&#34;https://www.cypress.io/&#34;&#xA;  &#xA;  target=&#34;_blank&#34; rel=&#34;noopener&#34;&#xA;  &gt;Cypress&lt;/a&#xA;&gt;&#xA;, which will help you mimic actual user behavior across the application and builds a lot of confidence in your implementation.&lt;/p&gt;</description>
    </item>
    <item>
      <title>How to easily test react stripe elements using cypress</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2020/05/27/how-to-easily-test-react-stripe-elements-using-cypress/</link>
      <pubDate>Wed, 27 May 2020 00:00:00 +0000</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2020/05/27/how-to-easily-test-react-stripe-elements-using-cypress/</guid>
      <description>&lt;h3 id=&#34;how-to-use-react-stripe-elements&#34;&gt;How to use react-stripe-elements&lt;/h3&gt;&#xA;&lt;p&gt;&#xA;&lt;a&#xA;  href=&#34;https://medium.com/craft-academy/get-paid-in-your-react-app-in-5-minutes-or-less&#34;&#xA;  &#xA;  target=&#34;_blank&#34; rel=&#34;noopener&#34;&#xA;  &gt;I have already written&lt;/a&#xA;&gt;&#xA; about how to set up and use &#xA;&lt;a&#xA;  href=&#34;https://github.com/stripe/react-stripe-elements&#34;&#xA;  &#xA;  target=&#34;_blank&#34; rel=&#34;noopener&#34;&#xA;  &gt;react-stripe-elements&lt;/a&#xA;&gt;&#xA;.&lt;/p&gt;&#xA;&lt;p&gt;However, there is another easier way to test stripe implementation than mentioned in the article.&lt;/p&gt;&#xA;&lt;h3 id=&#34;how-to-test-react-stripe-elements&#34;&gt;How to test react-stripe-elements&lt;/h3&gt;&#xA;&lt;p&gt;Just use following function to your cypress test&lt;/p&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&lt;figure class=&#34;highlight&#34;&gt;&#xA;  &#xA;  &lt;pre class=&#34;language-js&#34; &gt;&lt;code&gt;function fillInStripeForm() {&#xA;  const input = [&#xA;    [&#34;cardnumber&#34;, &#34;4242424242424242&#34;],&#xA;    [&#34;exp-date&#34;, &#34;1220&#34;],&#xA;    [&#34;cvc&#34;, &#34;123&#34;],&#xA;  ];&#xA;  cy.wait(1000);&#xA;  cy.get(&#34;.__PrivateStripeElement &gt; iframe&#34;).each(($element, index, list) =&gt; {&#xA;    cy.get($element).then(($iframe) =&gt; {&#xA;      const body = $iframe.contents().find(&#34;body&#34;);&#xA;      cy.wrap(body)&#xA;        .find(`input[name=${input[index][0]}]`)&#xA;        .type(input[index][1], { delay: 10 });&#xA;    });&#xA;  });&#xA;}&lt;/code&gt;&lt;/pre&gt;&#xA;&lt;/figure&gt;&#xA;&lt;p&gt;and call it when tripe form needs to be filled.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Material UI | How to easily set up dark theme toggle in React</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2020/05/20/material-ui-how-to-easily-set-up-dark-theme-toggle-in-react/</link>
      <pubDate>Wed, 20 May 2020 00:00:00 +0000</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2020/05/20/material-ui-how-to-easily-set-up-dark-theme-toggle-in-react/</guid>
      <description>&lt;h3 id=&#34;scaffold-react-application&#34;&gt;Scaffold React Application&lt;/h3&gt;&#xA;&lt;p&gt;A new react app is easily scaffolded using&lt;/p&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&lt;figure class=&#34;highlight&#34;&gt;&#xA;  &#xA;  &lt;pre class=&#34;language-bash&#34; &gt;&lt;code&gt;npx create-react-app my-app&lt;/code&gt;&lt;/pre&gt;&#xA;&lt;/figure&gt;&#xA;&lt;h3 id=&#34;install-dependencies&#34;&gt;Install dependencies&lt;/h3&gt;&#xA;&lt;p&gt;I need to install material ui &lt;code&gt;core&lt;/code&gt; package.&lt;/p&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&lt;figure class=&#34;highlight&#34;&gt;&#xA;  &#xA;  &lt;pre class=&#34;language-bash&#34; &gt;&lt;code&gt;// with npm&#xA;$ npm install @material-ui/core&#xA;&#xA;// with yarn&#xA;$ yarn add @material-ui/core&lt;/code&gt;&lt;/pre&gt;&#xA;&lt;/figure&gt;&#xA;&lt;h3 id=&#34;wrap-application-in-theme-provider&#34;&gt;Wrap application in Theme Provider&lt;/h3&gt;&#xA;&lt;p&gt;For the purpose of this demo, I will use &lt;code&gt;App.js&lt;/code&gt; to set up everything.&lt;/p&gt;&#xA;&lt;ol&gt;&#xA;&lt;li&gt;Add &lt;strong&gt;Light&lt;/strong&gt; and &lt;strong&gt;Dark&lt;/strong&gt; themes&lt;/li&gt;&#xA;&lt;/ol&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&lt;figure class=&#34;highlight&#34;&gt;&#xA;  &#xA;  &lt;pre class=&#34;language-js&#34; &gt;&lt;code&gt;export const light = {&#xA;  palette: {&#xA;    type: &#34;light&#34;,&#xA;  },&#xA;};&#xA;export const dark = {&#xA;  palette: {&#xA;    type: &#34;dark&#34;,&#xA;  },&#xA;};&lt;/code&gt;&lt;/pre&gt;&#xA;&lt;/figure&gt;&#xA;&lt;ol start=&#34;2&#34;&gt;&#xA;&lt;li&gt;Import &lt;code&gt;ThemeProvider&lt;/code&gt; and &lt;code&gt;createMuiTheme&lt;/code&gt;&lt;/li&gt;&#xA;&lt;/ol&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&lt;figure class=&#34;highlight&#34;&gt;&#xA;  &#xA;  &lt;pre class=&#34;language-js&#34; &gt;&lt;code&gt;import { ThemeProvider } from &#34;@material-ui/core&#34;;&#xA;import { createMuiTheme } from &#34;@material-ui/core/styles&#34;;&lt;/code&gt;&lt;/pre&gt;&#xA;&lt;/figure&gt;&#xA;&lt;ol start=&#34;3&#34;&gt;&#xA;&lt;li&gt;Set up the toggle logic&lt;/li&gt;&#xA;&lt;/ol&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&lt;figure class=&#34;highlight&#34;&gt;&#xA;  &#xA;  &lt;pre class=&#34;language-js&#34; &gt;&lt;code&gt;const [theme, setTheme] = useState(true);&#xA;const icon = !theme ? &lt;Brightness7Icon /&gt; : &lt;Brightness3Icon /&gt;; // Icons imported from `@material-ui/icons`&#xA;const appliedTheme = createMuiTheme(theme ? light : dark);&lt;/code&gt;&lt;/pre&gt;&#xA;&lt;/figure&gt;&#xA;&lt;ol start=&#34;4&#34;&gt;&#xA;&lt;li&gt;Wrap the render inside &lt;code&gt;ThemeProvider&lt;/code&gt; and pass the &lt;code&gt;appliedTheme&lt;/code&gt;&lt;/li&gt;&#xA;&lt;/ol&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&lt;figure class=&#34;highlight&#34;&gt;&#xA;  &#xA;  &lt;pre class=&#34;language-js&#34; &gt;&lt;code&gt;return &lt;ThemeProvider theme={appliedTheme}&gt;//rest of the code&lt;/ThemeProvider&gt;;&lt;/code&gt;&lt;/pre&gt;&#xA;&lt;/figure&gt;&#xA;&lt;ol start=&#34;5&#34;&gt;&#xA;&lt;li&gt;Trigger toggle using &lt;code&gt;onClick&lt;/code&gt;&lt;/li&gt;&#xA;&lt;/ol&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&lt;figure class=&#34;highlight&#34;&gt;&#xA;  &#xA;  &lt;pre class=&#34;language-js&#34; &gt;&lt;code&gt;onClick={() =&gt; setTheme(!theme)}&lt;/code&gt;&lt;/pre&gt;&#xA;&lt;/figure&gt;&#xA;&lt;p&gt;Now our theme toggle logic is in place.&lt;/p&gt;</description>
    </item>
    <item>
      <title>How to test your react websocket implementation with cypress</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2020/05/12/how-to-test-your-react-websocket-implementation-with-cypress/</link>
      <pubDate>Tue, 12 May 2020 00:00:00 +0000</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2020/05/12/how-to-test-your-react-websocket-implementation-with-cypress/</guid>
      <description>&lt;h3 id=&#34;set-up-demo-application&#34;&gt;Set up demo application&lt;/h3&gt;&#xA;&lt;p&gt;I scaffold a standard react application&lt;/p&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&lt;figure class=&#34;highlight&#34;&gt;&#xA;  &#xA;  &lt;pre class=&#34;language-bash&#34; &gt;&lt;code&gt;$ npx create-react-app ws-demo&lt;/code&gt;&lt;/pre&gt;&#xA;&lt;/figure&gt;&#xA;&lt;p&gt;Clean up and update &lt;code&gt;app.js&lt;/code&gt; to set up a websocket client.&lt;/p&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&lt;figure class=&#34;highlight&#34;&gt;&#xA;  &lt;figcaption&gt;app.js&lt;/figcaption&gt;&#xA;  &lt;pre class=&#34;language-js&#34; data-line=&#34;18-34&#34;&gt;&lt;code&gt;import React, { useState } from &#34;react&#34;;&#xA;&#xA;const App = () =&gt; {&#xA;  const [message, setMessage] = useState(&#34;websocket is closed&#34;);&#xA;&#xA;  return (&#xA;    &lt;div className=&#34;App&#34;&gt;&#xA;      &lt;p id=&#34;websocket&#34;&gt;{message}&lt;/p&gt;&#xA;      &lt;WebsocketHandler setMessage={setMessage} /&gt;&#xA;    &lt;/div&gt;&#xA;  );&#xA;};&#xA;&#xA;export default App;&#xA;&#xA;// WebsocketHandler does what the name suggests - launch/close websocket client and receive messages&#xA;&#xA;const websocketUrl = &#34;ws://127.0.0.1:5000&#34;;&#xA;const WebsocketHandler = ({ setMessage }) =&gt; {&#xA;  const ws = new WebSocket(websocketUrl);&#xA;  ws.onopen = () =&gt; {&#xA;    console.log(&#34;conn open&#34;);&#xA;    ws.send(&#34;connection is open&#34;);&#xA;  };&#xA;  ws.onmessage = (message) =&gt; {&#xA;    setMessage(message.data);&#xA;    console.log(&#34;onmessage triggered&#34;, message);&#xA;    ws.send(&#34;message received&#34;);&#xA;  };&#xA;  ws.onclose = () =&gt; {&#xA;    console.log(&#34;connection closed&#34;);&#xA;  };&#xA;  return null;&#xA;};&lt;/code&gt;&lt;/pre&gt;&#xA;&lt;/figure&gt;&#xA;&lt;p&gt;As highlighted, I have a &lt;code&gt;WebsocketHandler&lt;/code&gt; component which handles websocket and sets state in &lt;code&gt;app.js&lt;/code&gt;&#xA;when it receives the message.&lt;/p&gt;</description>
    </item>
    <item>
      <title>How to access Redux state in Cypress</title>
      <link>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2020/05/08/how-to-access-redux-state-in-cypress/</link>
      <pubDate>Fri, 08 May 2020 00:00:00 +0000</pubDate>
      <guid>https://d6cbd428.hugo-blog-e6x.pages.dev/blog/2020/05/08/how-to-access-redux-state-in-cypress/</guid>
      <description>&lt;h3 id=&#34;set-up-our-application&#34;&gt;Set up our application&lt;/h3&gt;&#xA;&lt;p&gt;I borrowed the code from &#xA;&lt;a&#xA;  href=&#34;https://react-redux.js.org/introduction/basic-tutorial#a-todo-list-example&#34;&#xA;  &#xA;  target=&#34;_blank&#34; rel=&#34;noopener&#34;&#xA;  &gt;react-redux.js.org&lt;/a&#xA;&gt;&#xA;&#xA;which showcases &lt;strong&gt;react + redux&lt;/strong&gt; in action using a todo list application.&lt;/p&gt;&#xA;&lt;h3 id=&#34;set-up-and-scaffold-cypress&#34;&gt;Set up and scaffold Cypress&lt;/h3&gt;&#xA;&lt;p&gt;&#xA;&lt;a&#xA;  href=&#34;https://www.cypress.io/&#34;&#xA;  &#xA;  target=&#34;_blank&#34; rel=&#34;noopener&#34;&#xA;  &gt;Cypress&lt;/a&#xA;&gt;&#xA; is a fantastic testing framework. It is easy to set up and can be picked up pretty quickly.&lt;/p&gt;&#xA;&lt;p&gt;Setting up Cypress is pretty straight forward - just run:&lt;/p&gt;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&#xA;&lt;figure class=&#34;highlight&#34;&gt;&#xA;  &#xA;  &lt;pre class=&#34;language-bash&#34; &gt;&lt;code&gt;$ npm install cypress&#xA;or&#xA;$ yarn add cypress&lt;/code&gt;&lt;/pre&gt;&#xA;&lt;/figure&gt;&#xA;&lt;p&gt;We will also install the recommeded dependency&lt;/p&gt;</description>
    </item>
  </channel>
</rss>
