Jekyll2024-03-09T11:06:10+00:00https://blog.rampatra.com/feed.xmlBlog - Ram PatraA tech blog mainly about coding, java, leetcode, algorithms and data structures, how-tos, my research and findings, the projects I create, and the list goes on.Ram PatraHow to create css styles for specific components in React?2024-03-09T00:00:00+00:002024-03-09T00:00:00+00:00https://blog.rampatra.com/how-to-create-css-styles-for-specific-components-in-react<p>You can use <strong>React Context</strong> to manage styles for specific components or groups of components. It involves creating a context that provides style information to its consumer components. Here’s a more detailed explanation of how you can implement this approach:</p>
<ol>
<li><strong>Create a Style Context</strong>: First, you need to create a React context to manage the styles. This context will hold the style information that you want to apply to your components.</li>
</ol>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// StyleContext.js</span>
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">StyleContext</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createContext</span><span class="p">();</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">StyleContext</span><span class="p">;</span>
</code></pre></div></div>
<ol>
<li><strong>Provide Style Information</strong>: Wrap your application or a specific part of your application with a provider component that sets the style information in the context.</li>
</ol>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// StyleProvider.js</span>
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">StyleContext</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./StyleContext</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">defaultStyles</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">backgroundColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">white</span><span class="dl">'</span><span class="p">,</span>
<span class="na">color</span><span class="p">:</span> <span class="dl">'</span><span class="s1">black</span><span class="dl">'</span><span class="p">,</span>
<span class="c1">// Add more default styles as needed</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="nx">StyleProvider</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">children</span> <span class="p">})</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">StyleContext</span><span class="p">.</span><span class="nx">Provider</span> <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">defaultStyles</span><span class="p">}</span><span class="o">></span>
<span class="p">{</span><span class="nx">children</span><span class="p">}</span>
<span class="o"><</span><span class="sr">/StyleContext.Provider</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">StyleProvider</span><span class="p">;</span>
</code></pre></div></div>
<ol>
<li><strong>Consume the Style Context</strong>: In your components, use the <code class="highlighter-rouge">useContext</code> hook or the <code class="highlighter-rouge">Context.Consumer</code> component to access the style information from the context.</li>
</ol>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// MyComponent.js</span>
<span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useContext</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">StyleContext</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./StyleContext</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">styles</span> <span class="o">=</span> <span class="nx">useContext</span><span class="p">(</span><span class="nx">StyleContext</span><span class="p">);</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">div</span> <span class="nx">style</span><span class="o">=</span><span class="p">{</span><span class="nx">styles</span><span class="p">}</span><span class="o">></span>
<span class="p">{</span><span class="cm">/* Component content */</span><span class="p">}</span>
<span class="o"><</span><span class="sr">/div</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">MyComponent</span><span class="p">;</span>
</code></pre></div></div>
<ol>
<li><strong>Override Styles as Needed</strong>: Components can override the default styles provided by the context by merging them with their own styles.</li>
</ol>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// MyComponent.js</span>
<span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useContext</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">StyleContext</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./StyleContext</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">customStyles</span> <span class="p">})</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">defaultStyles</span> <span class="o">=</span> <span class="nx">useContext</span><span class="p">(</span><span class="nx">StyleContext</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">mergedStyles</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">defaultStyles</span><span class="p">,</span> <span class="p">...</span><span class="nx">customStyles</span> <span class="p">};</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">div</span> <span class="nx">style</span><span class="o">=</span><span class="p">{</span><span class="nx">mergedStyles</span><span class="p">}</span><span class="o">></span>
<span class="p">{</span><span class="cm">/* Component content */</span><span class="p">}</span>
<span class="o"><</span><span class="sr">/div</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">MyComponent</span><span class="p">;</span>
</code></pre></div></div>
<p>With this approach, you have centralized control over the styles applied to your components. You can easily adjust styles globally by modifying the default styles provided by the context, or you can override them on a per-component basis as needed. This can be particularly useful for creating themes or managing styles across different parts of your application.</p>Ram PatraYou can use React Context to manage styles for specific components or groups of components. It involves creating a context that provides style information to its consumer components. Here’s a more detailed explanation of how you can implement this approach:How to create a generic Dialog component in TailwindCSS that takes in title, description, etc. as props?2024-02-23T00:00:00+00:002024-02-23T00:00:00+00:00https://blog.rampatra.com/how-to-create-a-generic-dialog-component-that-takes-in-title-description-etc-as-props<p>If you want to create a separate, generic Dialog component where you can pass in the title and description as props, you can do so by defining a reusable Dialog component. You can even pass HTML content in the description of the Dialog component, you can do so by utilizing React’s <code class="highlighter-rouge">dangerouslySetInnerHTML</code> attribute. Here’s how you can achieve this:</p>
<ol>
<li>
<p><strong>Create a Generic Dialog Component</strong>:</p>
<div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Dialog.js</span>
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Dialog</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@headlessui/react</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">CustomDialog</span><span class="p">({</span> <span class="nx">title</span><span class="p">,</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">isOpen</span><span class="p">,</span> <span class="nx">onClose</span> <span class="p">})</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="p"><</span><span class="nc">Dialog</span> <span class="na">open</span><span class="p">=</span><span class="si">{</span><span class="nx">isOpen</span><span class="si">}</span> <span class="na">onClose</span><span class="p">=</span><span class="si">{</span><span class="nx">onClose</span><span class="si">}</span><span class="p">></span>
<span class="p"><</span><span class="nc">Dialog</span><span class="p">.</span><span class="nc">Overlay</span> <span class="na">className</span><span class="p">=</span><span class="s">"fixed inset-0 bg-black opacity-30"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">className</span><span class="p">=</span><span class="s">"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-4"</span><span class="p">></span>
<span class="p"><</span><span class="nc">Dialog</span><span class="p">.</span><span class="nc">Title</span><span class="p">></span><span class="si">{</span><span class="nx">title</span><span class="si">}</span><span class="p"></</span><span class="nc">Dialog</span><span class="p">.</span><span class="nc">Title</span><span class="p">></span>
<span class="p"><</span><span class="nc">Dialog</span><span class="p">.</span><span class="nc">Description</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">dangerouslySetInnerHTML</span><span class="p">=</span> <span class="p">/></span>
<span class="p"></</span><span class="nc">Dialog</span><span class="p">.</span><span class="nc">Description</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="nx">onClose</span><span class="si">}</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nc">Dialog</span><span class="p">></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">CustomDialog</span><span class="p">;</span>
</code></pre></div> </div>
</li>
<li>
<p><strong>Use the Generic Dialog Component</strong>:</p>
<div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Example.js</span>
<span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Fragment</span><span class="p">,</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">CustomDialog</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./Dialog</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">Example</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">isOpen</span><span class="p">,</span> <span class="nx">setIsOpen</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
<span class="k">return</span> <span class="p">(</span>
<span class="p"><</span><span class="nc">Fragment</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="p">()</span> <span class="o">=></span> <span class="nx">setIsOpen</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span><span class="si">}</span><span class="p">></span>Open Dialog<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"><</span><span class="nc">CustomDialog</span>
<span class="na">isOpen</span><span class="p">=</span><span class="si">{</span><span class="nx">isOpen</span><span class="si">}</span>
<span class="na">onClose</span><span class="p">=</span><span class="si">{</span><span class="p">()</span> <span class="o">=></span> <span class="nx">setIsOpen</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span><span class="si">}</span>
<span class="na">title</span><span class="p">=</span><span class="s">"Dialog Title"</span>
<span class="na">description</span><span class="p">=</span><span class="s">"<p>This is the <strong>content</strong> of the dialog.</p>"</span>
<span class="p">/></span>
<span class="p"></</span><span class="nc">Fragment</span><span class="p">></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">Example</span><span class="p">;</span>
</code></pre></div> </div>
</li>
</ol>
<p>Inside the <code class="highlighter-rouge">CustomDialog</code> component, we use <code class="highlighter-rouge">dangerouslySetInnerHTML</code> to render the HTML content safely. However, please be cautious when using <code class="highlighter-rouge">dangerouslySetInnerHTML</code> as it can expose your application to <strong>cross-site scripting (XSS)</strong> attacks if not used carefully. Make sure that you trust the source of the HTML content or sanitize it properly before rendering.</p>Ram PatraIf you want to create a separate, generic Dialog component where you can pass in the title and description as props, you can do so by defining a reusable Dialog component. You can even pass HTML content in the description of the Dialog component, you can do so by utilizing React’s dangerouslySetInnerHTML attribute. Here’s how you can achieve this:How to smoothly scroll to a specific content or element in React?2024-02-19T00:00:00+00:002024-02-19T00:00:00+00:00https://blog.rampatra.com/how-to-smoothly-scroll-to-a-specific-content-or-element-in-react<p>To implement scrolling to a specific content or element on click in a React application, you can follow these steps:</p>
<ol>
<li>Identify the element you want to scroll to by giving it an <code class="highlighter-rouge">id</code>.</li>
<li>Implement a function that handles the scrolling behavior.</li>
<li>Attach an event listener, such as an <code class="highlighter-rouge">onClick</code> handler, to the element that triggers the scrolling function.</li>
</ol>
<p>Here’s how you can do it in a React component:</p>
<div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">scrollToElement</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">scrollIntoView</span><span class="p">({</span> <span class="na">behavior</span><span class="p">:</span> <span class="dl">'</span><span class="s1">smooth</span><span class="dl">'</span> <span class="p">});</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">MyComponent</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="p">()</span> <span class="o">=></span> <span class="nx">scrollToElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">myContent</span><span class="dl">'</span><span class="p">)</span><span class="si">}</span><span class="p">></span>
Scroll to Content
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="p">=</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="p">=</span><span class="s">"myContent"</span><span class="p">></span>
Content to scroll to
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">MyComponent</span><span class="p">;</span>
</code></pre></div></div>
<p>In this example:</p>
<ul>
<li>We have a button that triggers the scrolling behavior when clicked.</li>
<li>The <code class="highlighter-rouge">scrollToElement</code> function takes the <code class="highlighter-rouge">id</code> of the element to scroll to, finds the corresponding element using <code class="highlighter-rouge">document.getElementById</code>, and then calls <code class="highlighter-rouge">scrollIntoView</code> on it with <code class="highlighter-rouge">{ behavior: 'smooth' }</code>.</li>
<li>Below the button, there’s a placeholder <code class="highlighter-rouge"><div></code> with some height to create space for scrolling.</li>
<li>Following that, there’s the content we want to scroll to, which has the <code class="highlighter-rouge">id</code> of <code class="highlighter-rouge">'myContent'</code>.</li>
</ul>
<p>This example demonstrates scrolling within the same page. If you’re navigating to a different page within a Next.js application and want to scroll to a specific content element on that page, you would typically pass some sort of identifier or reference to the destination page and then trigger the scrolling behavior once the new page is mounted.</p>
<p>Now, to make the above method a bit more polished, we can do two things:</p>
<ol>
<li>Prevent `#` from being appended to the url on click of an anchor tag</li>
<li>Add a `padding` option which will determine the offset from the top of the element to stop scrolling before</li>
</ol>
<div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">function</span> <span class="nx">scrollToElement</span><span class="p">(</span><span class="nx">event</span><span class="p">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">MouseEvent</span><span class="o"><</span><span class="nx">HTMLElement</span><span class="p">,</span> <span class="nx">MouseEvent</span><span class="o">></span><span class="p">,</span> <span class="nx">id</span><span class="p">:</span> <span class="nx">string</span><span class="p">,</span> <span class="nx">padding</span><span class="p">:</span> <span class="nx">number</span> <span class="o">=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">targetPosition</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">getBoundingClientRect</span><span class="p">().</span><span class="nx">top</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span> <span class="o">-</span> <span class="nx">padding</span><span class="p">;</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">scrollTo</span><span class="p">({</span> <span class="na">top</span><span class="p">:</span> <span class="nx">targetPosition</span><span class="p">,</span> <span class="na">behavior</span><span class="p">:</span> <span class="dl">"</span><span class="s2">smooth</span><span class="dl">"</span> <span class="p">});</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Now, you can call this method from an anchor tag like this:</p>
<div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="p">=</span><span class="s">"#"</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span><span class="nx">scrollToElement</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="dl">'</span><span class="s1">myContent</span><span class="dl">'</span><span class="p">,</span> <span class="mi">80</span><span class="p">)}</span><span class="si">}</span><span class="p">></span>Click<span class="p"></</span><span class="nt">a</span><span class="p">></span>
</code></pre></div></div>Ram PatraTo implement scrolling to a specific content or element on click in a React application, you can follow these steps:How to center an element using Tailwind CSS?2024-02-17T00:00:00+00:002024-02-17T00:00:00+00:00https://blog.rampatra.com/how-to-center-an-element-using-tailwind-css<p>In Tailwind CSS, you can center an element using flexbox utilities directly in your HTML markup. Here’s how you can center an element horizontally and vertically:</p>
<ol>
<li>Centering Horizontally:</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"flex justify-center"</span><span class="nt">></span>
<span class="c"><!-- Your content here --></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p>In this example, the <code class="highlighter-rouge">justify-center</code> class is used to horizontally center the content within its parent container.</p>
<ol>
<li>Centering Vertically:</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"flex items-center"</span><span class="nt">></span>
<span class="c"><!-- Your content here --></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p>Here, the <code class="highlighter-rouge">items-center</code> class is used to vertically center the content within its parent container.</p>
<ol>
<li>Centering both Horizontally and Vertically:</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"flex justify-center items-center"</span><span class="nt">></span>
<span class="c"><!-- Your content here --></span>
<span class="nt"></div></span>
</code></pre></div></div>
<p>By combining <code class="highlighter-rouge">justify-center</code> and <code class="highlighter-rouge">items-center</code>, you can center the content both horizontally and vertically within its parent container.</p>
<p>Tailwind CSS provides a wide range of utility classes to manipulate flexbox properties directly in your HTML markup, making it easy to create responsive layouts without writing custom CSS. Adjust these classes according to your specific layout needs and hierarchy.</p>Ram PatraIn Tailwind CSS, you can center an element using flexbox utilities directly in your HTML markup. Here’s how you can center an element horizontally and vertically:How to make an HTML button element behave like a Link component in Next.js?2024-02-09T00:00:00+00:002024-02-09T00:00:00+00:00https://blog.rampatra.com/how-to-make-an-html-button-element-behave-like-a-link-component-in-next-js<p>In Next.js, you can use the <code class="highlighter-rouge">Link</code> component from <code class="highlighter-rouge">next/link</code> to create client-side navigation. However, if you want to use an HTML button element (<code class="highlighter-rouge"><button></code>) to behave like a link, you can wrap it with the <code class="highlighter-rouge">Link</code> component. Here’s how you can do it:</p>
<div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">Link</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">next/link</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">MyButton</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="p"><</span><span class="nc">Link</span> <span class="na">href</span><span class="p">=</span><span class="s">"/destination-page"</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span><span class="p">></span>Go to Destination Page<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"></</span><span class="nc">Link</span><span class="p">></span>
<span class="p">);</span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">MyButton</span><span class="p">;</span>
</code></pre></div></div>
<p>In this example, clicking the button will navigate the user to the <code class="highlighter-rouge">/destination-page</code> route in your Next.js application. The <code class="highlighter-rouge">href</code> prop of the <code class="highlighter-rouge">Link</code> component specifies the destination page. You can style the button as needed using CSS, and it will behave like a link for navigation purposes.</p>
<p>Remember to replace <code class="highlighter-rouge">"/destination-page"</code> with the actual path to the page you want to navigate to. Additionally, you can pass query parameters or other dynamic route segments as needed in the <code class="highlighter-rouge">href</code> prop.</p>
<p>Read more about the <a href="/main-advantages-of-using-the-link-component-in-next-js-over-anchors-and-buttons">advantages of using Link component in Next.js</a>.</p>Ram PatraIn Next.js, you can use the Link component from next/link to create client-side navigation. However, if you want to use an HTML button element (<button>) to behave like a link, you can wrap it with the Link component. Here’s how you can do it:Main advantages of using the Link component in Next.js over Anchors and Buttons2024-02-09T00:00:00+00:002024-02-09T00:00:00+00:00https://blog.rampatra.com/main-advantages-of-using-the-link-component-in-next-js-over-anchors-and-buttons<p>The main advantage of using the <code class="highlighter-rouge">Link</code> component in Next.js for client-side navigation is its optimized prefetching behavior, which enhances the performance and user experience of your web application. Here’s a breakdown of the key advantages:</p>
<ol>
<li><strong>Client-side Navigation</strong>: The <code class="highlighter-rouge">Link</code> component enables client-side navigation, allowing users to navigate between pages in your Next.js application without full page reloads. This results in a smoother and faster browsing experience for users.</li>
<li><strong>Prefetching</strong>: Next.js automatically prefetches linked pages in the background when the user hovers over or focuses on a link, reducing the perceived latency when navigating between pages. This prefetching behavior ensures that linked pages are quickly loaded when users decide to navigate, optimizing performance.</li>
<li><strong>Automatic Code Splitting</strong>: Next.js performs automatic code splitting, generating separate bundles for each page. When using the <code class="highlighter-rouge">Link</code> component, only the JavaScript and CSS required for the linked page are loaded, minimizing the initial load time and improving the overall performance of your application.</li>
<li><strong>SEO-friendly</strong>: Next.js ensures that client-side navigation with the <code class="highlighter-rouge">Link</code> component does not compromise SEO (Search Engine Optimization). It automatically generates static HTML for linked pages during the build process, allowing search engines to index the content properly.</li>
<li><strong>Improved User Experience</strong>: With faster navigation and optimized prefetching, the <code class="highlighter-rouge">Link</code> component contributes to an improved user experience by reducing page load times and providing seamless transitions between pages, resulting in higher user engagement and satisfaction.</li>
</ol>
<p>Overall, the <code class="highlighter-rouge">Link</code> component in Next.js offers significant advantages for client-side navigation, prefetching, performance optimization, SEO, and user experience, making it a powerful tool for building high-performance web applications.</p>
<p>Read more on <a href="/how-to-make-an-html-button-element-behave-like-a-link-component-in-next-js">how to make an HTML Button element behave like a Link</a>.</p>Ram PatraThe main advantage of using the Link component in Next.js for client-side navigation is its optimized prefetching behavior, which enhances the performance and user experience of your web application. Here’s a breakdown of the key advantages:What’s the use of useEffect hook in React?2024-02-02T00:00:00+00:002024-02-02T00:00:00+00:00https://blog.rampatra.com/whats-the-use-of-useeffect-hook-in-react<p>In React, the <code class="highlighter-rouge">useEffect</code> hook is used to perform side effects in functional components. Side effects can include data fetching, subscriptions, manual DOM manipulations, and other operations that cannot be handled during the render phase.</p>
<p>The <code class="highlighter-rouge">useEffect</code> hook is called after the component has rendered, and it runs the specified function (the effect) that can contain code with side effects. Here’s a basic example to illustrate its usage:</p>
<div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useEffect</span><span class="p">,</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">ExampleComponent</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// State to store data fetched from an API</span>
<span class="kd">const</span> <span class="p">[</span><span class="nx">data</span><span class="p">,</span> <span class="nx">setData</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
<span class="c1">// useEffect hook to fetch data when the component mounts</span>
<span class="nx">useEffect</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">fetchData</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="c1">// Simulating an API call</span>
<span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://api.example.com/data</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">setData</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="dl">'</span><span class="s1">Error fetching data:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="nx">fetchData</span><span class="p">();</span> <span class="c1">// Call the function to fetch data</span>
<span class="c1">// Cleanup function (optional): will be called when the component unmounts</span>
<span class="k">return</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// Perform cleanup, unsubscribe, etc.</span>
<span class="p">};</span>
<span class="p">},</span> <span class="p">[]);</span> <span class="c1">// Empty dependency array means the effect runs only once after the initial render</span>
<span class="k">return</span> <span class="p">(</span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
<span class="si">{</span><span class="cm">/* Render component using the fetched data */</span><span class="si">}</span>
<span class="si">{</span><span class="nx">data</span> <span class="p">?</span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Data: <span class="si">{</span><span class="nx">data</span><span class="si">}</span><span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p">:</span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Loading...<span class="p"></</span><span class="nt">p</span><span class="p">></span><span class="si">}</span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">ExampleComponent</span><span class="p">;</span>
</code></pre></div></div>
<p>In this example:</p>
<ul>
<li>The <code class="highlighter-rouge">useEffect</code> hook is used to fetch data from an API after the component has mounted.</li>
<li>The function passed to <code class="highlighter-rouge">useEffect</code> is the effect itself.</li>
<li>The empty dependency array (<code class="highlighter-rouge">[]</code>) means that the effect runs only once after the initial render. If you provide dependencies, the effect will run whenever those dependencies change.</li>
</ul>
<p>Key points about <code class="highlighter-rouge">useEffect</code>:</p>
<ol>
<li><strong>Side Effects:</strong> It is primarily used for handling side effects in functional components, where side effects might include data fetching, subscriptions, or manual DOM manipulations.</li>
<li><strong>Asynchronous Operations:</strong> You can perform asynchronous operations inside the <code class="highlighter-rouge">useEffect</code> function, such as fetching data using <code class="highlighter-rouge">async/await</code>.</li>
<li><strong>Cleanup:</strong> If your effect involves any cleanup (e.g., clearing intervals, unsubscribing from subscriptions), you can return a cleanup function from the <code class="highlighter-rouge">useEffect</code>.</li>
<li><strong>Dependency Array:</strong> By providing a dependency array, you can control when the effect runs. If the array is empty, the effect runs once after the initial render. If dependencies are specified, the effect runs whenever those dependencies change.</li>
</ol>
<p><code class="highlighter-rouge">useEffect</code> is a crucial tool for managing side effects in React functional components, contributing to better organization and lifecycle management.</p>Ram PatraIn React, the useEffect hook is used to perform side effects in functional components. Side effects can include data fetching, subscriptions, manual DOM manipulations, and other operations that cannot be handled during the render phase.What’s the use of key prop in Suspense component in React?2024-02-01T00:00:00+00:002024-02-01T00:00:00+00:00https://blog.rampatra.com/whats-the-use-of-key-prop-in-suspense-component-in-react<p>In React, the <code class="highlighter-rouge">key</code> prop is used to uniquely identify and track a set of elements during their life cycle. When used with the <code class="highlighter-rouge">Suspense</code> component, the <code class="highlighter-rouge">key</code> prop helps React keep track of suspended components and their associated data dependencies.</p>
<p>Here’s an explanation of how the <code class="highlighter-rouge">key</code> prop is used with the <code class="highlighter-rouge">Suspense</code> component:</p>
<ol>
<li>
<p><strong>Uniquely Identifying Suspended Components:</strong></p>
<ul>
<li>When you have multiple instances of a component that can potentially suspend rendering (e.g., fetching data with <code class="highlighter-rouge">React.lazy</code> or <code class="highlighter-rouge">useEffect</code> with asynchronous operations), React needs a way to distinguish between them.</li>
</ul>
</li>
<li>
<p><strong>Preventing Component Mismatch:</strong></p>
<ul>
<li>The <code class="highlighter-rouge">key</code> prop ensures that React doesn’t mistake one suspended component for another. Without the <code class="highlighter-rouge">key</code> prop, React might incorrectly reuse a suspended component’s state, leading to incorrect rendering or data fetching behavior.</li>
</ul>
</li>
<li>
<p><strong>Re-rendering Suspended Components:</strong></p>
<ul>
<li>When a suspended component is re-rendered (due to a state change or other reasons), React uses the <code class="highlighter-rouge">key</code> prop to determine whether the component is the same as the previous one. If the <code class="highlighter-rouge">key</code> remains the same, React knows it can reuse the suspended state.</li>
</ul>
</li>
</ol>
<p>Here’s an example illustrating the use of <code class="highlighter-rouge">key</code> with <code class="highlighter-rouge">Suspense</code>:</p>
<div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Suspense</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">fetchData</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./api</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">MyComponent</span><span class="p">({</span> <span class="nx">postId</span> <span class="p">})</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">fetchData</span><span class="p">(</span><span class="nx">postId</span><span class="p">);</span>
<span class="k">return</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span><span class="si">{</span><span class="nx">data</span><span class="si">}</span><span class="p"></</span><span class="nt">div</span><span class="p">>;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="p"><</span><span class="nc">Suspense</span> <span class="na">fallback</span><span class="p">=</span><span class="si">{</span><span class="p"><</span><span class="nt">div</span><span class="p">></span>Loading...<span class="p"></</span><span class="nt">div</span><span class="p">></span><span class="si">}</span><span class="p">></span>
<span class="p"><</span><span class="nc">MyComponent</span> <span class="na">key</span><span class="p">=</span><span class="si">{</span><span class="nx">postId</span><span class="si">}</span> <span class="na">postId</span><span class="p">=</span><span class="si">{</span><span class="mi">1</span><span class="si">}</span> <span class="p">/></span>
<span class="p"></</span><span class="nc">Suspense</span><span class="p">></span>
<span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p>In this example, the <code class="highlighter-rouge">key</code> prop is used with the <code class="highlighter-rouge">MyComponent</code> inside the <code class="highlighter-rouge">Suspense</code> component. If the <code class="highlighter-rouge">postId</code> changes and triggers a re-render, the <code class="highlighter-rouge">key</code> helps React identify that it’s a different instance of <code class="highlighter-rouge">MyComponent</code> and should not reuse the previous suspended state.</p>
<p>It’s important to note that while <code class="highlighter-rouge">key</code> is a helpful tool, it should be used judiciously. The value of <code class="highlighter-rouge">key</code> should be stable across renders and unique among siblings, but it doesn’t necessarily need to be globally unique in the entire application.</p>Ram PatraIn React, the key prop is used to uniquely identify and track a set of elements during their life cycle. When used with the Suspense component, the key prop helps React keep track of suspended components and their associated data dependencies.Questions the Tester asks on your Practical Driving Test day in Ireland2024-01-26T00:00:00+00:002024-01-26T00:00:00+00:00https://blog.rampatra.com/questions-the-tester-asks-on-your-practical-driving-test-day-in-ireland<h3 id="highlights-of-the-entire-driving-license-process">Highlights of the entire Driving License process:</h3>
<ol>
<li><strong>Take the Driver Theory Test</strong><br />
i. Book your test here: <a href="https://theorytest.ie">https://theorytest.ie</a>.<br />
ii. Practice for the test from this app: <a href="https://apps.apple.com/app/driver-theory-test-ireland/id1407740480">https://apps.apple.com/app/driver-theory-test-ireland/id1407740480</a> and give a few mock exams on the app and also here: <a href="https://www.officialdttonline.ie">https://www.officialdttonline.ie</a>. <br />
iii. Give the test and get your pass certificate.</li>
<li><strong>Book an appointment at NDLS once you pass your test</strong><br />
i. Book your appointment here: <a href="https://ndls.ie">https://ndls.ie</a>. <br />
ii. Submit all the required documents and your pass certificate. <br />
iii. Wait for your Learner License to arrive (usually takes around 5 days to reach).</li>
<li><strong>Book an ADI and start taking driving lessons</strong><br />
i. After you get your Learner License, you can start taking lessons.<br />
ii. Book the best ADI you can. Check reviews, recommendations, etc. I heard that ISM is really good but they have a very long waiting queue. Airport Driving School is another well-known one.<br />
iii. By default, you need to take 12 lessons but if you have a full license in your home country then you can reduce this to 6 lessons. You don’t even need to wait for 6 months to give your practical test in this case. For this, you need to submit your driving license and a letter of entitlement to NDLS. There are a few other terms and conditions that you can find on Google when you search “Reduced EDT”.<br />
iv. After around 20 days, you will get a letter from NDLS saying you are eligible for Reduced EDT. Keep this letter with you and also take this letter to your test. This isn’t mentioned anywhere on their website nor on their pre-test checklist and because of this I wasn’t able to sit on one test but they realised it was their mistake and refunded my money.</li>
<li><strong>Take the Driving Test</strong><br />
i. After completing the required number of lessons, book your driving test on the rsa.ie website (remember to choose a time when the road won’t be busy).<br />
ii. Go to the test center with your learner permit, and the letter from NDLS (for Reduced EDT). Make sure you read the “<a href="https://www.rsa.ie/docs/default-source/services/s1.5-driving-test/checklist-for-your-driving-test.pdf">Prepare for driving test day</a>” section from the RSA booklet. That’s it. All the best!</li>
</ol>
<h3 id="questions-and-answers-that-the-tester-asks-before-the-practical-test">Questions (and Answers) that the Tester asks before the practical test</h3>
<h4 id="rules-of-the-road">Rules of the Road</h4>
<ol>
<li>What do 2 broken white lines in the middle of the road indicate?</li>
<li>What does a continuous white line indicates?</li>
<li>What does a broken yellow line of the side of the road indicate?</li>
<li>What do 2 continuous parallel yellow lines at the side of the curve indicates?</li>
<li>What does a continuous yellow line at the side of the road indicate</li>
<li>What is aquaplaning?</li>
<li>What is a clearway?</li>
<li>Where should you not park your car?</li>
<li>Who can legally stop or direct traffic?</li>
<li>How would you spot zebra crossing at night time?</li>
<li>How would a pedestrian let you know they were going to cross a zebra crossing?</li>
<li>When can you overtake on the left Lane?</li>
<li>What road markings would you see at the start of a one way street?</li>
<li>What are the speed limits on the following roads Motorway/Dual carriage way/National route/ Pedestrian/Built up area/Regional and Local roads?</li>
<li>What is a contra flow bus lane?</li>
<li>What is the difference between a bus lane and QBC?</li>
<li>Give 2 instances where you can drive on a hard shoulder?</li>
<li>When where can you not perform a U turn?</li>
<li>What does amber lights signify?</li>
<li>What do flashing amber lights mean?</li>
<li>When should you turn on your side lights?</li>
<li>When should you dip your headlights?</li>
<li>What should you do if you are dazzled by an oncoming driver’s Hi Beam?</li>
<li>What is the difference between a pedestrian and Pelican crossing?</li>
<li>What do white zig zag lines indicate?</li>
<li>What do yellow zig zag lines indicate?</li>
<li>List 4 things you cannot do on a motorway?</li>
<li>When can you drive through a junction box?</li>
<li>Can you ever stop in a yellow box?</li>
<li>Describe your approach from a minor road to a dual carriage way?</li>
<li>Describe your approach to a roundabout on how you would take the third exit?</li>
<li>Who has the right of way at a crossroads where the roads are of equal importance?</li>
<li>What is the minimum legal tread depth of a tyre?</li>
<li>What does a stop sign mean on what road markings would UC if the road onto which you are emerging is clear can you proceed without stopping?</li>
<li>How far from the junction must you park your car?</li>
<li>How far from the curb are you allowed to park your car?</li>
<li>What does an island in the middle of a pedestrian zebra crossing indicate?</li>
<li>What does a broken white line in the middle of the road mean?</li>
<li>What is the one thing you should not do when a car is overtaking you?</li>
</ol>
<h5 id="answers">Answers</h5>
<ol>
<li>Indicates that a single or double white line is coming up</li>
<li>You must keep to the left of the road no overtaking</li>
<li>Indicates the edge of the carriage carriageway or hard shoulder</li>
<li>No parking at anytime</li>
<li>No parking during business hours usually between 7 AM and 6:30 PM</li>
<li>Aquaplaning occurs when a film of water lies in the road and when you brake your car skids</li>
<li>You cannot park or stop in a clearway during the times indicated</li>
<li>On double or single yellow lines/On white or yellow zigzag lines/At a bus stop/ln a clearway/Where it is a continuous white line/On the brow of a Hill/On a bend/On a humpback bridge</li>
<li>Garda/School Warden/Person in charge of animals/Pointsman</li>
<li>2 flashing beacons oval in shape on either side of the crossing</li>
<li>They must put their foot out on crossing</li>
<li>When the car on the right has indicated they are turning right when you intend to turn left and have indicated so when traffic in the righthand Lane is travelling slower than the left Lane</li>
<li>A continuous white line with a broken line behind it</li>
<li>120/100/100/50/80</li>
<li>A bus Lane that travels in the opposite direction to the flow of traffic</li>
<li>A bus Lane operates Monday to Saturday 7.00 to 19.00 hours while a QBC operates monday to Sunday 24 hours a day</li>
<li>When you wish to allow faster moving traffic to overtake and when you wish to build up speed when you have made a left-hand turn onto a major road</li>
<li>When there is traffic in the immediate vicinity where there is a continuous white line never near a bend within 15 metres of a junction of a set of lights on a motorway in a one way street</li>
<li>Prepare to stop unless it is unsafe to do so</li>
<li>This indicates a Pelican crossing ahead you must yield to pedestrians but you may continue if the crossing is clear</li>
<li>At the beginning and at the end of lighting of hours during the day when it is over cast when it is raining</li>
<li>When there is oncoming traffic/when you are travelling behind traffic/in dense snow or fog/going over a humpback bridge/going round a bend/where there is special speed restriction in a residential area/in general not to inconvenience of a traffic</li>
<li>Look at the verge slow down and stop if necessary</li>
<li>At a Pelican crossing the lights change from red to flashing amber to allow traffic to flow if there are no pedestrians on the crossing whereas a pedestrian crossing changes from red to green like normal traffic lights</li>
<li>Indicates a pedestrian Pelican zebra crossing is ahead and no parking or overtaking is allowed between the lines</li>
<li>School Keep clear</li>
<li>Stop/Reverse park/U turn</li>
<li>When your exit is clear on the opposite side</li>
<li>When you are making a righthand turn and you are not obstructing traffic</li>
<li>Approach on the righthand lane or the right hand side of your Lane indicating right you must treat the joke carriage way as a two way street yield to traffic coming from the right and if it’s clear proceed to the media nor central island you must now yield to the traffic on the left and when clear proceed into the right turn aiming for the left Lane if your car is too long to fit the median you must complete the turn in one go</li>
<li>Approach the roundabout on the right hand side of the Lane with the right hand indicator on yield to the traffic coming from the right of the roundabout continue around the roundabout until you have passed the second exit and switch your indicator to the left hand indicator an exit close to the left hand side of the road while constantly checking your mirrors</li>
<li>You must you too traffic on right hand side and also to traffic when they already in the junction</li>
<li>1.6 mm</li>
<li>You must stop at a stop line or if no stop line, stop at the stop sign, if no stop sign at the stop ine</li>
<li>5 metres</li>
<li>45 cm</li>
<li>It indicates 2 pedestrian crossings are not one you Keep over to the lefthand side of the road so as to to do so may proceed if professions are not on your side of the crossing</li>
<li>Allow cars to overtake also overtaking is permitted when it is safe</li>
<li>Increase your speed</li>
</ol>
<h4 id="questions-about-the-car-engine">Questions about the car engine</h4>
<ul>
<li>
<p>How would you check the following:</p>
<ul>
<li>Engine Oil level</li>
<li>Coolant level</li>
<li>Windscreen Washer Fluid level</li>
<li>Brake Fluid level</li>
</ul>
</li>
</ul>
<p>For answers to the above questions, please check your car’s manual or ask your ADI.</p>
<h4 id="questions-about-car-interior-controls">Questions about car interior controls</h4>
<p><strong>Q1.</strong> How to turn on the front demister?<br />
<strong>A1.</strong> This is a slightly tricky. The answer is to put fan speed to maximum and then change mode to front demister. The front demister depends on the car model. If you forget to say about the fan speed then you would get a mark (green).</p>
<p><strong>Q2.</strong> How to turn on the rear demister?<br />
<strong>A2.</strong> Just press the rear demister button.</p>
<p><strong>Q3.</strong> How to turn on full beam/dipped headlights?<br />
<strong>A3.</strong> Check your car’s manual or ask ADI.</p>
<p><strong>Q4.</strong> How to turn on the windscreen wiper (with and without water)?<br />
<strong>A4.</strong> Check your car’s manual or ask ADI.</p>
<h3 id="useful-resources">Useful resources</h3>
<ol>
<li>Video series by RSA.ie: <a href="https://www.youtube.com/playlist?list=PLi8nqrsVU6htG_YioGm047eltfgvkW5OH">https://www.youtube.com/playlist?list=PLi8nqrsVU6htG_YioGm047eltfgvkW5OH</a> (you can watch other videos on their youtube channel as well)</li>
<li>Video series by ISM: <a href="https://www.youtube.com/playlist?list=PL9wfPZmOZvK3mZy0o52l0hFe2jGZupThv">https://www.youtube.com/playlist?list=PL9wfPZmOZvK3mZy0o52l0hFe2jGZupThv</a> (they are old but believe me they say all the rules that my ADIs’ failed to tell me)</li>
<li>Tallaght test routes: <a href="http://www.adischoolofmotoring.com/tallaght-test-routes/">http://www.adischoolofmotoring.com/tallaght-test-routes/</a> (find something similar for your test routes. This helped me a lot to know the subtleties of the routes. I passed my test on Route 3 which is the hardest among all in Tallaght and a big chunk of my ‘thank you’ goes to these videos)</li>
<li>Official Rules of the Road book: <a href="https://www.rsa.ie/docs/default-source/road-safety/rules-of-the-road.pdf">https://www.rsa.ie/docs/default-source/road-safety/rules-of-the-road.pdf</a></li>
<li>Subscribe to RSA on Twitter/Fb/Youtube/etc. to stay abreast of any news.</li>
</ol>Ram PatraHighlights of the entire Driving License process:How to hide the title bar in a SwiftUI macOS app?2024-01-26T00:00:00+00:002024-01-26T00:00:00+00:00https://blog.rampatra.com/how-to-hide-the-title-bar-in-a-swiftui-macos-app<p>Let’s say you have a view named <code class="highlighter-rouge">ContentView</code> and your main <code class="highlighter-rouge">App</code> file looks like this:</p>
<div class="language-swift highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">@main</span>
<span class="kd">struct</span> <span class="kt">ExampleApp</span><span class="p">:</span> <span class="kt">App</span> <span class="p">{</span>
<span class="k">var</span> <span class="nv">body</span><span class="p">:</span> <span class="kd">some</span> <span class="kt">Scene</span> <span class="p">{</span>
<span class="kt">WindowGroup</span> <span class="p">{</span>
<span class="kt">ContentView</span><span class="p">()</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>To hide the title bar in the main window, you can simply add this line <code class="highlighter-rouge">.windowStyle(.hiddenTitleBar)</code> to the <code class="highlighter-rouge">WindowGroup</code> like this:</p>
<div class="language-swift highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">@main</span>
<span class="kd">struct</span> <span class="kt">ForegroundApp</span><span class="p">:</span> <span class="kt">App</span> <span class="p">{</span>
<span class="k">var</span> <span class="nv">body</span><span class="p">:</span> <span class="kd">some</span> <span class="kt">Scene</span> <span class="p">{</span>
<span class="kt">WindowGroup</span> <span class="p">{</span>
<span class="kt">ContentView</span><span class="p">()</span>
<span class="p">}</span>
<span class="o">.</span><span class="nf">windowStyle</span><span class="p">(</span><span class="o">.</span><span class="n">hiddenTitleBar</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Note: Sometimes the Xcode preview doesn’t hide the title bar even after applying the above code. However, building and running the project will hide the title bar as expected.</p>Ram PatraLet’s say you have a view named ContentView and your main App file looks like this: