DEV Community: Rajiv Verma

Snipper – A Lightweight Snipping Tool Alternative for Windows

Rajiv Verma — Fri, 29 Aug 2025 08:24:02 +0000

If you use Windows daily, chances are you rely on screenshots more than you realize. Microsoft’s built-in Snipping Tool works in a pinch, but when you need speed, polish, and flexibility, it starts to fall short.

That’s why I built Snipper — a lightweight screenshot app for Windows designed for developers, creators, and anyone who wants more control over their captures.

⚡ Key Features of Snipper

Snipper is a lean Windows Snipping Tool alternative whose focus is to take screenshots fast and make them look 10X more beautiful. All that in seconds!

Below is a quick list of features that make Snipper a better alternative to any Windows screenshot tool out there currently.

Simple, fast UI → no clutter, no distractions.
Customizable backgrounds & padding → make screenshots presentation-ready in seconds.
Watermark support → add your brand or name without extra editing tools.
*Lightweight build *→ unlike many third-party tools, Snipper won’t hog your system resources.

🔍 Who is Snipper for?

Snipper fits perfectly in the workflow of different types of content creators, testing and QA people, managers, among many others. Here's a quick list of people who appreciate beautiful (and faster) screenshots to 10X their work and productivity.

Developers writing technical blog posts or docs.
Founders & marketers creating quick product shots.
Anyone looking for a Snipping Tool alternative that feels modern.

Snipper is available for Windows now: Download here

If you’ve been searching for the best screenshot tool for Windows that’s minimal, fast, and actually fun to use — give Snipper a spin.

How To Access Phone Contacts In Flutter?

Rajiv Verma — Mon, 21 Aug 2023 09:58:21 +0000

Accessing phone contacts saved on a mobile phone is one of the most common things that as mobile app developers, we will come across.

While there are quite a few ways of accessing phone contacts in Flutter, I prefer the simplest way to fetch phone contact details in Flutter, which I explain below. But in short, working with phone contacts in Flutter, that’s a good thing to know before we begin 🙂

We will use a Flutter contact picker and the end result will look like this:

https://www.youtube.com/watch?v=mYVPFpq-CGw

Access Phone Contacts Using Flutter

In order to access phone contacts using Flutter, the first thing we will need to do is add the flutter_native_contact_picker package to our Flutter project. We will do this by adding the package to the pubspec.yaml file of our project.

At the time of writing this, the latest version of the package is flutter_native_contact_picker: ^0.0.4. You can download the package from here.

You don’t need to manually do flutter pub get anymore but in case you need to, save the pubspec.yaml file after adding the package (take special care of spacing while adding the package to the yaml file) and then run the following command in the terminal.

flutter pub get

The UI we create to show an example of how to access phone book using Flutter, is quite simple. We only have 3 elements:

Label to tell the user to Click below to pull up the phone’s contacts (Optional)
An ElevatedButton to show the phone’s contact when clicked
A label to show the selected phone number (Optional)

Now, let’s head to the main.dart file of the project and delete everything there. Then, paste the following code and save the file.

import 'package:flutter/material.dart';
import 'package:flutter_native_contact_picker/flutter_native_contact_picker.dart';

void main() {
  runApp(const FlutterContacts());
}

class FlutterContacts extends StatefulWidget {
  const FlutterContacts({super.key});

  @override
  State<FlutterContacts> createState() => _FlutterContactsState();
}

class _FlutterContactsState extends State<FlutterContacts> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Contacts',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.brown),
      home: const MainPage(),
    );
  }
}

final FlutterContactPicker _contactPicker = FlutterContactPicker();
Contact? _contact;
String? selectedNumber;

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Contacts'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const SizedBox(
                  height: 20.0,
                ),
                Text(
                  'Click below to show contacts..',
                  textAlign: TextAlign.center,
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
                const SizedBox(
                  height: 20.0,
                ),
                ElevatedButton(
                  onPressed: () async {
                    Contact? contact = await _contactPicker.selectContact();
                    if (contact != null) {
                      setState(() {
                        _contact = contact;
                        List<String>? phoneNumbers = contact!.phoneNumbers;
                        selectedNumber = phoneNumbers?[0] ?? 'Nothing selected';
                      });
                    }
                  },
                  child: const Text('Show Contacts'),
                ),
                const SizedBox(
                  height: 30.0,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text(
                      'Number: ',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text(selectedNumber ?? 'No Number selected'),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

We are not doing anything fancy here. The only thing to note here are the following object and the variable that we will be using to fetch the contacts on the phone.

The FlutterContactPicker **comes from the package we added to our project to access the phone contacts on the device. We use the **final _contactPicker below, to get and store the selected contact, as below:

...
ElevatedButton(
   onPressed: () async {
      Contact? contact = await _contactPicker.selectContact();
          if (contact != null) {
                setState(() {
                    _contact = contact;
                     List<String>? phoneNumbers = contact!.phoneNumbers;
                        selectedNumber = phoneNumbers?[0] ?? 'Nothing selected';
                     });
               }
           },
  child: const Text('Show Contacts'),
),
.....
...```



Here, on click of our ElevatedButton,the line Contact? contact = await _contactPicker.selectContact(); already gives us the selected contact or null, in case the user clicked Cancel.

Then, in the following line, we display the selected contact in a Label.

Please also note that contact!.phoneNumbers returns all the phone numbers (work, home, mobile…) a contact can have. For this example, we only consider the first one, hence phoneNumbers?[0].

If you want to download this project and dig into the code, you can do so by pulling it down from GitHub, [here](https://github.com/hackernewbie/flutter_contacts).

I Created a Flutter App Without Writing ANY Code, using ChatGPT!!

Rajiv Verma — Tue, 18 Apr 2023 10:04:05 +0000

ChatGPT has been everywhere lately. Be it on Twitter, YouTube, or the Blogosphere, people are talking about it all the time. And given the crazy stuff ChatGPT can do, I would so, all the buzz around it is only natural.

I however have only been watching it from afar, until this morning, when I finally thought of giving it a few hours and see how it goes.

Not to mention, it is the most accurate chatbot I have ever talked to. I began with some basic stuff like generating blog posts with ChatGPT and asking a few random questions here and there.

But the real fun began when I thought of asking it to create a Flutter App for me!

Creating a Flutter App using ChatGPT

Functionality-wise, the requirement was quite simple. My main intention was to see whether ChatGPT can give me the complete code and instructions, if any, that I can just copy-paste to VSCode and run.

Without writing a single line of code!

I thought of asking it to create a simple RunningApp in Flutter, that can track the distance covered and the time taken when on a run.

My first ChatGPT prompt was this:
Write me a simple running app in Flutter

ChatGPT, almost immediately, threw this bit of code for me:

import 'package:flutter/material.dart';
import 'dart:async';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Running App',
      home: StopwatchPage(),
    );
  }
}

class StopwatchPage extends StatefulWidget {
  @override
  _StopwatchPageState createState() => _StopwatchPageState();
}

class _StopwatchPageState extends State<StopwatchPage> {
  Stopwatch _stopwatch = Stopwatch();
  Timer _timer;
  Duration _duration = Duration();

  void _startTimer() {
    setState(() {
      _stopwatch.start();
      _timer = Timer.periodic(Duration(milliseconds: 100), _updateTimer);
    });
  }

  void _stopTimer() {
    setState(() {
      _stopwatch.stop();
      _timer.cancel();
    });
  }

  void _resetTimer() {
    setState(() {
      _stopwatch.reset();
      _duration = Duration();
    });
  }

  void _updateTimer(Timer timer) {
    setState(() {
      _duration = _stopwatch.elapsed;
    });
  }

  String _formatDuration(Duration duration) {
    String twoDigits(int n) {
      if (n >= 10) return "$n";
      return "0$n";
    }

    String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
    String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));
    String twoDigitMilliseconds =
        twoDigits(duration.inMilliseconds.remainder(100));
    return "$twoDigitMinutes:$twoDigitSeconds.$twoDigitMilliseconds";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Running App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Distance: 0 km',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            Text(
              'Time: ${_formatDuration(_duration)}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FloatingActionButton(
                  onPressed: _startTimer,
                  child: Icon(Icons.play_arrow),
                ),
                SizedBox(width: 20),
                FloatingActionButton(
                  onPressed: _stopTimer,
                  child: Icon(Icons.stop),
                ),
                SizedBox(width: 20),
                FloatingActionButton(
                  onPressed: _resetTimer,
                  child: Icon(Icons.replay),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Below the code, ChatGPT also gave me some basic details about how the code works. You can see that bit, below:

This code creates a simple UI with two text widgets for displaying the distance and time, and three floating action buttons for starting, stopping, and resetting the stopwatch.

The stopwatch is implemented using a Stopwatch object and a Timer object to update the UI every 100 milliseconds. The distance is currently hard-coded to 0 km, but you can replace it with your own implementation for tracking distance based on location data.

That's it! You should now have a basic running app in Flutter that tracks your running time.

On the side, I had already created a fresh Flutter project. All I had to now do it was, replace the existing code in the lib/main.dart file with what ChatGPT has given me and see if it works.

I copy-pasted the above-mentioned code, saved the main.dart file and hit run.

Bamm!! Error!!

On line 22, the Timer _timer; value threw the following error:
Non-nullable instance field '_timer' must be initialized.

Thankfully, it was a simple problem that I solved by updating the variable declaration as in the code below:

late Timer _timer;

That's the only code I had to write. The app ran smoothly on the simulator and did what it was supposed to, theoretically.

Damn!! This is for real!!

A flutter app completely written by a chatbot that is smart!

You can download the app created by ChatGPT from here.

How To Create CSS Animated Blobs In Under TWO Minutes And More?

Rajiv Verma — Tue, 31 May 2022 06:54:46 +0000

If you ask me, blobs are one the most beautiful-looking things that one can create using CSS. The animated ones, even more so.

But me being someone who sucks at creating beautiful design elements, thinking about making something like a blob seemed pretty scary to me in the beginning. Turns out, beyond the fear, things are pretty simple. It is fairly simple to create nice-looking blobs using plain CSS and without the need for any CSS libraries like TailwindCSS.

Let’s dive in and see how can we create CSS Blobs.

Create CSS Blobs

We will create a simple a create a couple of varieties of a CSS blob, along with a simple CSS blog. They will look as below:

A Simple CSS blob

To create something like the above, create an HTML file and create a couple of divs in it as done in the code below:

<body>
...
<h1>CSS Blob & Animated Blob Examples</h1>
    <div class="container">
        <div class="blob">
        </div>

    </div>
...
</body>

This will be the base of the design, which we will style.

Now to turn this invisible div, add the following CSS to the style section of your HTML file, or, link it to an external CSS file. I do the latter, in my example.

.container .blob{
    border-radius: 94% 31% 30% 67% / 67% 37% 56% 34%;
    width: 250px;
    height: 250px;
    background: #f09;
    background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);
    box-shadow: -10vmin 10vmin 0 rgba(255,255,255,0.07);
}

And that’s it!

That’s all you need to create a CSS blob as shown above. Feel free to play with the CSS values and see how they reflect on the HTML page.

How To Animate CSS Blobs?

While it might sound a complex thing to do, it only takes a few additional lines of code to animate your CSS blob. Update the following CSS code in your file and reload the HTML page and you should see the animation in action!

border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
    width: 250px;
    height: 250px;
    background: rgb(0, 255, 98);
    background-image: linear-gradient(45deg, #3023AE 0%, rgb(0, 255, 98) 100%);
    box-shadow: -10vmin 10vmin 0 rgba(255,255,255,0.07);
    animation: animateBlob 10s linear infinite alternate;

[BONUS] How To Add an Image Background To a CSS Blob?

While playing around with the look & feel of the CSS blob, I also tried adding a background image to an animated blob, just to see how it looks. I liked what I was able to come – up with so sharing the same. Maybe you will find some real use case to use it. If you do, I would be interesting to see it. So, do share.

CSS Blob with background image

The code of the CSS Blob with an image background is given below:

border-radius: 23% 31% 30% 67% / 72% 47% 40% 26%;
    width: 450px;
    height: auto;
    background: linear-gradient(#a03692, #b46ca8, #c0aec5);
    overflow: hidden;
    animation: animateImg 8s linear infinite;

You can also download the example project from here. It has all the 3 examples I have talked about here.

**This article was originally posted here.

How To Make A Sentiment Analyzer In PHP, In Under 10 Minutes?

Rajiv Verma — Fri, 25 Feb 2022 09:14:09 +0000

I came across this concept of this sentiment analysis only recently. It sounded quite interesting and I wanted to learn more about it and maybe, also come up with some fun app around the same.

After a little looking around, I came across a great library that does exactly what I was looking for. In fact, it did more than that.

For my initial experimentation, all I wanted was something that can, when I enter some text, tell me whether the text has a negative, positive or neutral. sentiment

This is the package I used to make my tiny little Laravel Sentiment Analyzer.

Creating the App

I have already written more than about how to create a new Laravel app on my blog, so I am not going to delve into that. If you haven’t already, take a second and go create a fresh Laravel app and then come back to continue.

Adding the Sentiment Analyzer Package

The Github page of the package itself is pretty self-explanatory but I will quickly summarize the steps anyway.

To bring in the package in your new laravel project, run the following command in the terminal.

composer require davmixcool/php-sentiment-analyzer

This is will install the required package, which does all the heavy lifting.

Implementing The Sentiment Analyzer Package

In your controller, as a first step, import the following:

use Sentiment\Analyzer;

Then, in its simplest form, all you need is just a couple of lines of code and you should be done. In this case however, I tried to write a little more than that to make the app a tad bit more meaningful.

$analyzer = new Analyzer();
 $output_text = $analyzer->getSentiment($request->text_to_analyze);
    $mood        = '';
    if($output_text['neg'] > 0 && $output_text['neg'] < 0.49){
        $mood = 'Somewhat Negative ';
    }
    elseif($output_text['neg'] > 0.49){
        $mood = 'Mostly Negative';
    }

    if($output_text['neu'] > 0 && $output_text['neg'] < 0.49){
        $mood = 'Somewhat neutral ';
    }
    elseif($output_text['neu'] > 0.49){
        $mood = 'Mostly neutral';
    }

    if($output_text['pos'] > 0 && $output_text['pos'] < 0.49){
        $mood = 'Somewhat positive ';
    }
    elseif($output_text['pos'] > 0.49){
        $mood = 'Mostly positive';
    }
    //dd('Negative: ' . $output_text['neg'] . ' Positive: ' . $output_text['pos'] . ' Neutral: '. $output_text['neu']);
    return view('welcome')->with('text',$mood);
}

In the code above, I pass a line of text via a post request from a blade file. Basically, I just stripped down the default welcome.blade.php of Laravel and added a form with one textbox and a button and used TailWindCSS to make things look better.

`<!DOCTYPE html>

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

    <!-- Styles -->
    <style>
        /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
        html{line-height:1.15;-webkit-text-size-adjust:100%}
        body{margin:0}
        a{background-color:transparent}[hidden]{display:none}
        html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
    </style>

    <style>
        body {
            font-family: 'Nunito', sans-serif;
        }
    </style>
    <script src="https://cdn.tailwindcss.com"></script>

</head>
<body class="antialiased">
    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
        @if (Route::has('login'))
            <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
                @auth
                    <a href="{{ url('/home') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Home</a>
                @else
                    <a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a>

                    @if (Route::has('register'))
                        <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</a>
                    @endif
                @endauth
            </div>
        @endif

        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <div class="flex justify-center pt-8 sm:justify-center sm:pt-0">
                {{-- <svg viewBox="0 0 651 192" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-16 w-auto text-gray-700 sm:h-20">
                    <g clip-path="url(#clip0)" fill="#EF3B2D">
                        <path d="M248.032 44.676h-16.466v100.23h47.394v-14.748h-30.928V44.676zM337.091 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.431 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162-.001 2.863-.479 5.584-1.432 8.161zM463.954 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.432 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162 0 2.863-.479 5.584-1.432 8.161zM650.772 44.676h-15.606v100.23h15.606V44.676zM365.013 144.906h15.607V93.538h26.776V78.182h-42.383v66.724zM542.133 78.182l-19.616 51.096-19.616-51.096h-15.808l25.617 66.724h19.614l25.617-66.724h-15.808zM591.98 76.466c-19.112 0-34.239 15.706-34.239 35.079 0 21.416 14.641 35.079 36.239 35.079 12.088 0 19.806-4.622 29.234-14.688l-10.544-8.158c-.006.008-7.958 10.449-19.832 10.449-13.802 0-19.612-11.127-19.612-16.884h51.777c2.72-22.043-11.772-40.877-33.023-40.877zm-18.713 29.28c.12-1.284 1.917-16.884 18.589-16.884 16.671 0 18.697 15.598 18.813 16.884h-37.402zM184.068 43.892c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002-35.648-20.524a2.971 2.971 0 00-2.964 0l-35.647 20.522-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v38.979l-29.706 17.103V24.493a3 3 0 00-.103-.776c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002L40.098 1.396a2.971 2.971 0 00-2.964 0L1.487 21.919l-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v122.09c0 1.063.568 2.044 1.489 2.575l71.293 41.045c.156.089.324.143.49.202.078.028.15.074.23.095a2.98 2.98 0 001.524 0c.069-.018.132-.059.2-.083.176-.061.354-.119.519-.214l71.293-41.045a2.971 2.971 0 001.489-2.575v-38.979l34.158-19.666a2.971 2.971 0 001.489-2.575V44.666a3.075 3.075 0 00-.106-.774zM74.255 143.167l-29.648-16.779 31.136-17.926.001-.001 34.164-19.669 29.674 17.084-21.772 12.428-43.555 24.863zm68.329-76.259v33.841l-12.475-7.182-17.231-9.92V49.806l12.475 7.182 17.231 9.92zm2.97-39.335l29.693 17.095-29.693 17.095-29.693-17.095 29.693-17.095zM54.06 114.089l-12.475 7.182V46.733l17.231-9.92 12.475-7.182v74.537l-17.231 9.921zM38.614 7.398l29.693 17.095-29.693 17.095L8.921 24.493 38.614 7.398zM5.938 29.632l12.475 7.182 17.231 9.92v79.676l.001.005-.001.006c0 .114.032.221.045.333.017.146.021.294.059.434l.002.007c.032.117.094.222.14.334.051.124.088.255.156.371a.036.036 0 00.004.009c.061.105.149.191.222.288.081.105.149.22.244.314l.008.01c.084.083.19.142.284.215.106.083.202.178.32.247l.013.005.011.008 34.139 19.321v34.175L5.939 144.867V29.632h-.001zm136.646 115.235l-65.352 37.625V148.31l48.399-27.628 16.953-9.677v33.862zm35.646-61.22l-29.706 17.102V66.908l17.231-9.92 12.475-7.182v33.841z"/>
                    </g>
                </svg> --}}
                <h1>Laravel Sentiment Anaylysis POC</h1>
            </div>


            <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
                <div class="grid grid-cols-1 pr-2">
                    <form class="w-full max-w-sm" action="{{route('analyse.submit')}}" method="POST">
                        @csrf
                        <div class="flex items-center border-b border-teal-500 py-2">
                          <input class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none" type="text"
                          name="text_to_analyze" placeholder="Enter Text To Analyze" aria-label="Enter Text To Analyze" required>
                          <button class="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded" type="submit">
                            Analyse
                          </button>
                        </div>
                      </form>
                </div>
            </div>

            <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
                <div class="text-center text-sm text-gray-500 sm:text-left" name="mood">
                    {{isset($text) ? 'Your Mood is: ' . $text : 'Nothing entered'}}
                </div>


            </div>
        </div>
    </div>
</body>

In the web.php route file, I added one route to handle the post request:

Route::post('analyse', [Controller::class,'analyse'])->name('analyse.submit');

And that’s it!

The sentiment analyzer app was ready! This is how it looks.

All the code can be found on my GitHub page here. Feel free to download and play around with it.

This post was originally posted here - https://rajivverma.me/blog/tech/sentiment-analyser-php-laravel/

How To Make A Google Chrome Extension In Under 15 – Minutes?

Rajiv Verma — Thu, 10 Feb 2022 17:27:01 +0000

Browser extensions are a fascinating piece of technology. Nifty yet very powerful. I have been thinking about delving into this world of Browser Extension development but never got time to do something interesting.

Now, I know that I don’t have time is a mere excuse if you really want to do something. So, I finally took the plunge and have been spending time on the same lately. The first thing I realized, on starting is the fact that starting with how to build a Chrome extension is pretty simple.

So much so that, we can actually build something very basic (that doesn’t really do much), in under 15 mins. Let’s see how.

Basics of Building a Google Chrome Extension

Browser extensions are nothing but sort of a sandbox that includes our regular HTML, CSS, and JavaScript files along with any resources (images, videos, etc.) as needed. All this, along with a super important file, the manifest.json file. Together they form a Chrome plugin or Chrome extension, that runs on the browser.

Steps To Build a Chrome Extension

The first step to building a Chrome Extension is to create the manifest.json file inside your newly created project folder. In our case, we will call the plugin ‘Hello Chrome Extension’ and that’s what will be our project folder’s name too.

Let’s now get to the manifest.json file. As the name suggests, it’s the project’s manifest file that tells the browser where to start, what permissions are needed, and so on. A manifest file can be pretty detailed but in our case, it will be a pretty simple one.

{ "name": "Hello Extensions", "description": "This is a simple Chrome Extension", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "hello.html", "default_icon": "hi.png" } }

This is all that we need in our manifest.json file, for this example. The default icon’s image, ‘hi.jpg’ is optional and you can add any small icon-size image to the project folder. Since this post is based on the official documentation, you can use the icon that’s used in the example there. The image can be downloaded from here.

Let’s dissect the above now:

name – This is the name you want to give your plugin
description – This is a small description about your plugin
version – Every plugin must have a version
manifest_version: The manifest also should have a version
actions: Things that happen on various events within the plugin
default_action: The file that should be called when the plugin icon is clicked
default_icon: In case you want to give your plugin an icon

As you can see, the default_popup of our plugin is hello.html. This means that when the plugin icon is clicked, the hello.html file should open up. So, now, let’s create the file inside our project folder.

<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h2>Your Chrome Extension</h2> <div> <p>This is simple Chrome Extension.</p> <small>This doesn't really do much though, but you can always extend to whatever you want :-) </small> </div> </body> </html>

As you can see, it’s a very simple HTML file. However, if you look closely, you will see, we are referencing a style.css file as well. So, let’s go ahead and create that file too, inside the same project folder.

div{ width: 200px; height: auto; }

At this moment, our plugin is ready to be used.

How To Add Chrome Plugin To The Browser?

Chrome plugins are installed from the Chrome Webstore, once published. But for our purpose, we don’t have to do that.

In order to upload our new plugin to the browser, type the following in a new tab on Chrome.

chrome://extensions/
Once there, enable Developer Mode by flipping the switch. A new bar would show – up at the top with some additional features.

Click the Load Unpacked button and navigate to your project folder and click Upload. You will see your plugin added to the grid below.

Now, click the icon marked in green, in the image below to open the list of installed extensions. Scroll down to your newly-created extension there and click the pin icon next to it [marked in red]. This will bring the icon next to the address bar of your browser.

Click the Pin icon to bring the Extension to the Pinned Extensions region of the browser
Once there, click on your extension’s icon and it should pop up, showing the text that we had added in our hello.html.

Our Plugin Working 🙂
There!

You have your first Chrome Extension!

This post is republished from here.