DEV Community: Pasindu Laksara

𝐑𝐞𝐯𝐨𝐥𝐮𝐭𝐢𝐨𝐧𝐢𝐳𝐞 𝐘𝐨𝐮𝐫 𝐂𝐨𝐝𝐢𝐧𝐠: 𝐈𝐧𝐭𝐫𝐨𝐝𝐮𝐜𝐢𝐧𝐠 𝐆𝐨𝐨𝐠𝐥𝐞 𝐆𝐞𝐦𝐢𝐧𝐢 𝐂𝐨𝐝𝐞 𝐀𝐬𝐬𝐢𝐬𝐭𝐚𝐧𝐜𝐞

Pasindu Laksara — Thu, 27 Feb 2025 11:11:28 +0000

AI is transforming the coding landscape, and Google’s Gemini Code Assistance is at the forefront of this evolution. This new release offers an innovative set of features designed to streamline your development workflow directly within your favorite IDE.

𝐆𝐞𝐦𝐢𝐧𝐢 𝐂𝐨𝐝𝐞 𝐀𝐬𝐬𝐢𝐬𝐭𝐚𝐧𝐜𝐞: 𝐀𝐧 𝐎𝐯𝐞𝐫𝐯𝐢𝐞𝐰
i. 𝐄𝐱𝐩𝐥𝐚𝐢𝐧 𝐂𝐨𝐝𝐞: Highlight a section of code and click “Explain this” to receive
a detailed natural language breakdown.

ii. 𝐆𝐞𝐧𝐞𝐫𝐚𝐭𝐞 𝐍𝐞𝐰 𝐂𝐨𝐝𝐞: Use the “/generate” action to prompt Gemini to
write new code snippets that fit your project context.

iii. 𝐅𝐢𝐱 𝐄𝐫𝐫𝐨𝐫𝐬: When issues arise, the “/fix” action suggests corrections to
resolve errors.

iv. 𝐆𝐞𝐧𝐞𝐫𝐚𝐭𝐞 𝐔𝐧𝐢𝐭 𝐓𝐞𝐬𝐭𝐬: Automatically propose unit tests, ensuring that
your code is robust and well-tested.

v. 𝐒𝐦𝐚𝐫𝐭 𝐀𝐜𝐭𝐢𝐨𝐧𝐬 𝐏𝐚𝐧𝐞𝐥: All features are organized in a dedicated tab,
making it easy to switch between functionalities.

𝐂𝐨𝐦𝐩𝐚𝐫𝐢𝐬𝐨𝐧 𝐰𝐢𝐭𝐡 𝐆𝐢𝐭𝐇𝐮𝐛 𝐂𝐨𝐩𝐢𝐥𝐨𝐭 (𝐅𝐫𝐞𝐞 𝐕𝐞𝐫𝐬𝐢𝐨𝐧):

i. 𝐂𝐨𝐝𝐞 𝐄𝐱𝐩𝐥𝐚𝐧𝐚𝐭𝐢𝐨𝐧: Gemini provides a dedicated “Explain this” feature,
while Copilot primarily offers inline suggestions.

ii. 𝐂𝐨𝐝𝐞 𝐆𝐞𝐧𝐞𝐫𝐚𝐭𝐢𝐨𝐧: Gemini uses a specific “/generate” command; Copilot
continuously suggests code as you type.

iii. 𝐄𝐫𝐫𝐨𝐫 𝐅𝐢𝐱𝐢𝐧𝐠 & 𝐓𝐞𝐬𝐭 𝐆𝐞𝐧𝐞𝐫𝐚𝐭𝐢𝐨𝐧: Gemini features distinct actions for
fixing errors and generating unit tests, compared to Copilot’s more
integrated approach.

𝐈𝐧𝐬𝐭𝐚𝐥𝐥 𝐰𝐢𝐭𝐡 𝐕𝐒 𝐂𝐨𝐝𝐞:

𝐈𝐧𝐬𝐭𝐚𝐥𝐥𝐚𝐭𝐢𝐨𝐧 & 𝐈𝐧𝐭𝐞𝐠𝐫𝐚𝐭𝐢𝐨𝐧:
Ensure your IDE supports Gemini by installing the necessary plugin or
extension from the Google Code Assist page.
https://lnkd.in/gv2C9FcX
𝐔𝐬𝐢𝐧𝐠 𝐆𝐞𝐦𝐢𝐧𝐢 𝐢𝐧 𝐕𝐒 𝐂𝐨𝐝𝐞:
i. 𝐄𝐱𝐩𝐥𝐚𝐢𝐧𝐢𝐧𝐠 𝐂𝐨𝐝𝐞:
a. Select the code—highlight a specific line or block.
b. Click “Explain this” to trigger a plain language explanation, perfect for
debugging and learning.

ii. 𝐆𝐞𝐧𝐞𝐫𝐚𝐭𝐢𝐧𝐠 𝐍𝐞𝐰 𝐂𝐨𝐝𝐞:
a. Use the “/generate” action in the Gemini panel to prompt new code
snippets for additional functionality or boilerplate code.

iii. 𝐅𝐢𝐱𝐢𝐧𝐠 𝐄𝐫𝐫𝐨𝐫𝐬:
a. Click “/fix” on error-prone code to receive AI-suggested corrections.

iv. 𝐆𝐞𝐧𝐞𝐫𝐚𝐭𝐢𝐧𝐠 𝐔𝐧𝐢𝐭 𝐓𝐞𝐬𝐭𝐬:
a. Click “Generate Unit Tests” to automatically create tests that ensure
comprehensive code coverage.

This streamlined workflow minimizes context switching and boosts productivity, positioning Gemini Code Assistance as a powerful new tool for modern developers.
hashtag#GoogleGemini hashtag#CodeAssistance hashtag#VScode hashtag#DeveloperTools hashtag#AICoding hashtag#AI hashtag#Programming hashtag#TechInnovation hashtag#GitHubCopilot hashtag#CodingLife

LT Browser: The Ultimate Free Tool for Effortless Responsive Web Testing in 2025

Pasindu Laksara — Thu, 27 Feb 2025 11:04:44 +0000

Responsive web design is more crucial than ever in 2025. With countless devices available, ensuring a seamless user experience across different screen sizes is a challenge for developers and QA testers. LT Browser is a free, efficient, and game-changing tool that simplifies responsive web testing and makes it accessible to everyone.

**
What Makes LT Browser Stand Out?**

LT Browser excels with its unique features and ease of use. Some standout qualities include:

Completely Free: Unlike other tools, LT Browser offers a comprehensive set of features at no cost.
User-Friendly Interface: Intuitive design for both developers and testers without a steep learning curve.
Cross-Device Testing: Test across multiple device resolutions with pre-defined viewports effortlessly.

Key Features of LT Browser

Pre-Built Viewports: Test your website on popular devices such as iPhones, tablets, and desktops with a single click.

Side-by-Side Testing: Compare your website’s appearance across multiple devices simultaneously.

Network Throttling: Evaluate performance under different network conditions to optimize user experience.

Performance Reports: Integrated with Google Lighthouse to provide SEO and performance insights.

Hot Reloading: Instantly reflect code changes without refreshing the browser.

Collaboration Tools: Easily share issues, screenshots, and reports with your team.

Other Useful Tools from LambdaTest

LambdaTest provides additional free tools that complement LT Browser, including:

HTML Tester and Online Compiler: Write, run, and test HTML code online.
Code Compare Tool: Highlight code differences instantly.
CSS Validator: Check CSS code for errors and warnings.
Random Test Data Generator: Generate realistic test data.
String to JSON Converter: Convert strings into JSON format easily.

Why Choose LT Browser?

No Setup Hassle: Start testing immediately without complex installations.
Boosts Productivity: Quickly identify and fix responsive issues.
Perfect for Agile Teams: Supports rapid testing cycles aligned with agile methodologies.
Modern Frameworks Support: Works seamlessly with React, Angular, and Vue.js.

Getting Started with LT Browser

Download and Install: Get LT Browser for free from the official LambdaTest website at Download LT Browser.
Select a Device: Choose from pre-defined devices or create your custom viewport.
Start Testing: Inspect your website and make improvements instantly.

Conclusion
LT Browser is an essential tool for web developers and testers in 2025. It offers an easy-to-use, free, and feature-rich solution to streamline responsive web testing. Whether you're a freelancer, startup, or enterprise team, LT Browser is a must-have in your testing toolkit.

WebDevelopment #ResponsiveDesign #UITesting #QATesting #WebTesting #WebDesign #FrontendDevelopment #DevCommunity #AgileTesting #UXDesign #TechTools #WebPerformance #TechBlog #CodingLife #FreeTools #WebOptimization #TestAutomation

useEffect Hook with simple example

Pasindu Laksara — Mon, 27 Mar 2023 19:39:53 +0000

In this example, we define a component called Example that uses the useEffect hook.

First, we define a state variable count using the useState hook.

Inside the useEffect hook, we update the title of the document using the document.title property. The useEffect hook takes a function as its first argument that will be called after the component has been rendered. In this case, we're updating the document title to reflect the current value of count. We also pass an array [count] as the second argument to useEffect, which tells React to only re-run the effect when the count state variable has changed.

Finally, we render the current value of count using an HTML paragraph element and a button that updates the count state variable when clicked.

This simple example demonstrates how we can use the useEffect hook in a React component to perform side effects, such as updating the title of the document based on the current state of the component.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  const handleButtonClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleButtonClick}>Click me</button>
    </div>
  );
}

Learn useState and useRef from simple example

Pasindu Laksara — Mon, 27 Mar 2023 19:12:43 +0000

React is a popular JavaScript library for building user interfaces. One of the key features of React is its use of hooks, which allow developers to manage state and perform side effects in functional components. In this article, we'll explore two of the most commonly used hooks: useRef and useState.

useRef is a hook that returns a mutable ref object that can be used to store a value that persists between renders. useState is a hook that returns a state variable and a function to update that variable.

Let's take a look at a simple example that demonstrates how to use both useRef and useState in a React component:

In this example, we define a component called Example that uses both useState and useRef hooks.

First, we define a state variable count using the useState hook. We also define a ref called inputRef using the useRef hook.

Inside the handleButtonClick function, we update the state of count using the setCount function, which increments the count by 1 each time the button is clicked. We also use the focus method of the inputRef to set the focus on the text input field.

Finally, we render the current value of count using an HTML paragraph element and an input field that is assigned the inputRef ref. We also render a button that calls the handleButtonClick function when clicked.

This simple example demonstrates how we can use both useState and useRef hooks in a React component to manage state and references to DOM elements.

useRef can be particularly useful for managing references to DOM elements that need to persist between renders. For example, if you need to programmatically set focus on an input field when a button is clicked, you can use useRef to store a reference to that input field and then call its focus method in an event handler.

useState, on the other hand, is useful for managing state that changes over time. Whenever you need to store a value that can change based on user interactions or other factors, you can use useState to define a state variable and an associated updater function.

Overall, useRef and useState are powerful tools that can help you build more robust and dynamic React components. By leveraging these hooks, you can more easily manage state and references to DOM elements, allowing you to create more responsive and interactive user interfaces.

import React, { useRef, useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const inputRef = useRef(null);

  const handleButtonClick = () => {
    setCount(count + 1);
    inputRef.current.focus();
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <input type="text" ref={inputRef} />
      <button onClick={handleButtonClick}>Click me</button>
    </div>
  );
}

How to Use the useState Hook to Show/Hide Content in React

Pasindu Laksara — Mon, 27 Mar 2023 17:52:15 +0000

When building a React web application, you may want to show or hide content based on user interaction. A common way to accomplish this is to use a button that toggles the visibility of the content. In this article, we'll show you how to use the useState hook to implement a button to show/hide content in React.

The useState Hook

The useState hook is a built-in hook in React that allows us to add state to a functional component. With useState, we can create a state variable and a function to update that variable. Whenever the state variable is updated, React will automatically re-render the component to reflect the new state.

To use useState, we first need to import it from the React library:

import React, { useState } from 'react';

Then, we can call useState and pass in an initial value for the state variable:

const [isVisible, setIsVisible] = useState(false);

In this example, we're setting the initial value of isVisible to false, indicating that the content should be hidden by default. We're also using array destructuring to create two variables: isVisible, which holds the current value of the state variable, and setIsVisible, which is a function that updates the state variable.

Toggling the Content

Now that we have a way to keep track of whether the content should be shown or hidden, we can use the isVisible state variable to conditionally render the content in our component.

To do this, we can use a conditional statement to check whether isVisible is true or false, and render the content accordingly:

return (
  <div>
    <button onClick={() => setIsVisible(!isVisible)}>
      {isVisible ? 'Hide content' : 'Show content'}
    </button>
    {isVisible && (
      <div>
        <p>This is the content to show/hide.</p>
      </div>
    )}
  </div>
);

In this example, we're rendering a button that toggles the isVisible state when clicked. We're also using a conditional statement to render the content only if isVisible is true. If isVisible is false, the content will not be rendered.

full code

import React, { useState } from 'react';

function ShowHideContent() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Hide content' : 'Show content'}
      </button>
      {isVisible && (
        <div>
          <p>This is the content to show/hide.</p>
        </div>
      )}
    </div>
  );
}

export default ShowHideContent;

Conclusion

In this article, we've shown you how to use the _useState _hook to show/hide content in React. By creating a state variable to keep track of whether the content should be visible, and conditionally rendering the content based on the state variable, we can create a simple and effective way to toggle the visibility of content in our React components.