DEV Community: Tanmay Naik

Manticore 1.0 is released!

Tanmay Naik — Sun, 19 Apr 2020 13:58:14 +0000

Manticore is a simple, minimal static site generator in Python. It's free and open source, and I would appreciate feedback.

This is my first contribution to open source, looking to make many more. Forks and pull requests, improvements on the codebase are all welcome!

blazephoenix / manticore

Static site generator in python

Manticore

A simple, minimal static site generator in Python.

Getting Started

Create a virtual environment - virtualenv venv
Run pip install -r requirements.txt
Add posts in markdown format in the content folder
- In content/resume for resume.
- In content/default for blog posts.
Check commands with python build.py --help

Usage: build.py [OPTIONS]

Options:
  -d, --default TEXT  Generate the default blog template
  -r, --resume TEXT   Generate a resume template
  --help              Show this message and exit.

E.g. To generate a blog, Type python build.py --default default
- An output folder will be created with the markdown files in content/default
- The directory structure in the output folder
```
\output
 \posts
  home.html
```

The process is similar but a little easier for generating a resume since it only creates one page.

Prerequisites

Python 3.6 or higher.

Deployment

Deployment solutions are currently being worked on. Deployment with Netlify CLI could be available in upcoming releases.

Built With

Markdown2 - A…

View on GitHub

What are some features that every frontend developer should know how to implement?

Tanmay Naik — Sun, 19 Apr 2020 06:03:45 +0000

As the question suggests, what are some frontend features every frontend developer should know how to implement/optimize for, as a standard thing a frontend dev should know? A few things off the top of my head would be,

Working with APIs to

Search
Sort
Filter

Optimizing by

Throttling
Debouncing
Memoization

What else?

CLI applications in Python with Click

Tanmay Naik — Wed, 18 Mar 2020 13:11:36 +0000

What happens when you're in quarantine and got nothing to do?

You code, of course. And we are back again with another tutorial-ish article about how to make CLI applications in Python with the Click library. This should be enough to get you started building your own CLI applications using Click.

What we'll be making

We'll be making a madlibs program that takes text input and makes a madlib.

    __  ___          _____ __            ________    ____
   /  |/  /___ _____/ / (_) /_  _____   / ____/ /   /  _/
  / /|_/ / __ `/ __  / / / __ \/ ___/  / /   / /    / /  
 / /  / / /_/ / /_/ / / / /_/ (__  )  / /___/ /____/ /   
/_/  /_/\__,_/\__,_/_/_/_.___/____/   \____/_____/___/   


Enter an animal: Flamingo
Enter a food: Hamburger
Enter a city: New Jersey

Once upon a time, deep in an ancient jungle,
there lived a flamingo.  This flamingo
liked to eat hamburger, but the jungle had
very little hamburger to offer.  One day, an
explorer found the flamingo and discovered
it liked hamburger.  The explorer took the
flamingo back to New jersey, where it could
eat as much hamburger as it wanted.  However,
the flamingo became homesick, so the
explorer brought it back to the jungle,
leaving a large supply of hamburger.

The End

Overview

Before we begin, it's advisable to create a virtual environment. Since this is a very simple application, we are only going to need one python file, not including the virtual environment. We will be using Click for the CLI and pyFiglet for that fancy ASCII lettering. You can install them by using pip with your virtual environment active,

pip install Click, pyfiglet

In the same directory, create a new file called madlibs.py and paste the following code,

import click
from pyfiglet import Figlet

f = Figlet(font='slant')
print(f.renderText("Madlibs CLI"))

@click.command()
@click.option('--animal', prompt='Enter an animal', help='Name of an animal')
@click.option('--food', prompt='Enter a food', help='Name of a food')
@click.option('--city', prompt='Enter a city', help='Name of a city')
def madlibs(animal, food, city):
    '''
    A CLI application that takes the name of an animal, food and place to make up a madlib.
    '''
    story = f"""
Once upon a time, deep in an ancient jungle,
there lived a {animal.lower()}.  This {animal.lower()}
liked to eat {food.lower()}, but the jungle had
very little {food.lower()} to offer.  One day, an
explorer found the {animal.lower()} and discovered
it liked {food.lower()}.  The explorer took the
{animal.lower()} back to {city.capitalize()}, where it could
eat as much {food.lower()} as it wanted.  However,
the {animal.lower()} became homesick, so the
explorer brought it back to the jungle,
leaving a large supply of {food.lower()}.

The End
            """

    click.echo(story)


if __name__ == "__main__":
    madlibs()

What's happening here?

The first two lines import each of the packages.

Click is based on declaring commands through decorators. Here, @click.command() is the decorator which converts a function into a command line tool. To put it simply, @click.command() turns the function madlibs() into a callable script. You can try doing,

@click.command()
def madlibs():
    click.echo('Madlibs!')

And it will print out the statement on the console by invoking the function as a command.

@click.option() is used to pass optional parameters to the function. In this case, we are passing the names of an animal, food and city. The good thing about Click is that it automatically generates help text for you, and it's easily customizable. As you can see here,

@click.option('--animal', prompt='Enter an animal', help='Name of an animal')

and the script description added within the function,

def madlibs(animal, food, city):
    '''
    A CLI application that takes the name of an animal, food and place to make up a madlib.
    '''
    .
    .

If you type python madlibs.py --help, you will be shown the following,

    __  ___          _____ __            ________    ____
   /  |/  /___ _____/ / (_) /_  _____   / ____/ /   /  _/
  / /|_/ / __ `/ __  / / / __ \/ ___/  / /   / /    / /
 / /  / / /_/ / /_/ / / / /_/ (__  )  / /___/ /____/ /
/_/  /_/\__,_/\__,_/_/_/_.___/____/   \____/_____/___/


Usage: madlibs.py [OPTIONS]

  A CLI application that takes the name of an animal, food and place to make
  up a madlib.

Options:
  --animal TEXT  Name of an animal
  --food TEXT    Name of a food
  --city TEXT    Name of a city
  --help         Show this message and exit.

Neat, huh!

It is advised to use setuptools if you plan on sharing it as a proper CLI application. Read more on setuptools integration in the official docs.

Until next time.

TL;DR to the code,

blazephoenix / python-cli-apps

A bunch of CLI apps made with Python 3

How do you debug your fullstack web apps?

Tanmay Naik — Mon, 30 Dec 2019 19:17:35 +0000

Consuming an API in Svelte

Tanmay Naik — Sun, 22 Dec 2019 21:10:22 +0000

I'd been figuring out Svelte since a week now and saying that I've fallen in love with it would be an understatement. Everything is so much faster to do and easier to understand that you'll probably see me becoming an unofficial evangelist for it. To be honest, React was difficult for me to grasp and it took me atleast a month of trying it out on and off before I was comfortable with it. It was only after the introduction of hooks that I was able to use it better. With Svelte though, here I am writing an article about it after fiddling with it for just over a week!

Without further ado, here we go!

Installation

Assuming you have Node installed on your system, enter the following in your command line,

npx degit sveltejs/template numberfacts

This uses the template from the official Svelte repository on Github and provides us with a ready to use Hello World project. Once that is done, cd into your directory and run npm install. It should install all the packages that Svelte needs to run your project. If you followed it right, npm run dev should serve your project up on localhost:5000.

What we're making

We'll be using the Numbers API as our endpoint to generate random facts about any number our user enters.

Overview

This is what our directory structure looks like -

node_modules
public
src
--app.svelte
--main.js
package.json
package-lock.json
README.md
rollup.config.js

I ignored the contents of the folders and have only focused on the ones we will be working with. In the main.js file, remove the props: 'World' part and replace the contents of the App.svelte file with the following code,

<script>
    let query = "";
    let result;

    async function getResult() {

        let response = await fetch(`http://numbersapi.com/${query}`);
        let text = await response.text();
        let data = text;
        return data;
    }

    function submitHandler(e) {
        result = getResult();
    }
</script>

<div class="container mt-5">
    <div class="row">
        <div class="col-md"></div>
        <div class="col-md-8 text-center">
            <h1 class="display-4">Random Number Facts</h1>
            <form class="form-inline" on:submit|preventDefault={submitHandler}>
                <input class="w-75 form-control" type="number" bind:value={query}>
                <button class="w-25 btn btn-dark">Submit</button>
            </form>

            {#if result===undefined}

            <p></p>

            {:else}

            {#await result}

            <p>Loading...</p>

            {:then value}

            {value}

            {:catch error}

            {error.message}

            {/await}

            {/if}
        </div>
        <div class="col-md"></div>
    </div>
</div>

What is happening here?

In Svelte, an application is composed from one or more components. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a .svelte file. The 'hello world' example we currently have is a simple component.

In the code above, we are only using HTML and Javascript and letting Bootstrap take care of the CSS for us.

We initialize a query string which we bind to the value of input using bind:value={query}. The curly brackets indicate that we are using JS variables inside HTML. Next, we declare a result variable that will store the result of our request when we send it.

The onSubmitHandler() runs when the user enters a number in the input. We assign the return value of getResult() to result here. getResult() performs an async fetch request and returns the response.

On to the HTML part, Svelte provides a lot of functionality out of the box which is very helpful. The on:submit directive is the Svelte version of the event listener in Javascript. We assign it the onSubmitHandler() function when the user presses 'Submit'.

The {#await},{:then} and {:catch} blocks are used to resolve promises on the rendered component. The {#if} {:else} block as you may have guessed is a conditional block.

Creating a Card component

Next, we will create a new component that will render the content we get from the fetch request. Create a new file in the same directory and call it Card.svelte. Add the following code in Card.svelte,

<script>
export let data;
</script>

<div class="card mt-5">
    <div class="card-body">
        <h5 class="card-title">{data}</h5>
    </div>
</div>

This one is pretty small. Here we simply write how we want our card to look like and where we want the rendered data to be. We use export let data to let our main App.svelte component use this variable to pass props down to our card. The syntax is a little weird in places, but you will get used to it. Just remember that Svelte is not Javascript. It's a compiler for Javascript which builds to vanilla Javascript in production.

Now, we have to make some changes in our App.svelte component to render our card. First, add this line in the script tag on top,

import Card from './Card.svelte';

Now we can add the card component as an HTML tag and pass down the result of our request to it as a prop, like so,

{#if result===undefined}

 <p></p>

{:else}

<p>Loading...</p>

{#await result}

{:then value}

 <Card data={value} />

{:catch error}

 <Card data={error.message}/>

{/await}

{/if}

Aand, that's pretty much it! You should be able to enter a number and have a result rendered on your screen. There are other minor things you can do, such as clearing the input field once a number is entered and adding a spinner instead of the loading p tag that we have right now. Svelte provides some animations and transitions out of the box too!

TL;DR Take me to the code:

blazephoenix / numbersapi

API consumption with Svelte

Why learning to program is like owning a dog (in some ways)

Tanmay Naik — Fri, 06 Dec 2019 13:37:53 +0000

So I just recently got a White German Shepherd pup, and within a few days of being with him, I've come to realize that owning a dog is not an easy thing. But then, neither is programming. So here are some parallels I drew from that. Just a fun post :)

You don't know whether you can do it

My first language was JavaScript, and when I started to learn, I had no idea whether I could make a website. My motivation didn't matter because.. motivation only gets you started. It's the same with owning a dog, you don't know if you can own and care for one, but you want one, so you get a dog. And then you are clueless about what to do next.

You have to take it one day at a time

Owning a dog is a lot of responsibility. And if you think of the big picture, you can end up scaring yourself shitless. There's a lot to learn on how to discipline your dog, what to buy, when to vaccinate, vet schedules, and so on. It's the same with programming, there is a whole lot to learn with no end in sight. So, it's important to know that at this point, you don't need to learn everything on day one.

You can't ignore the ugly parts

Programming is a mentally stimulating activity where you get to learn new things all the time. And we all have a preference for a particular part of it, frontend, backend, fullstack, database, application development, these are just the broader parts of it. And you can go even deeper than that in terms of job titles. But even then, sometimes a part of your job will require you to have some idea of the others too, even if you don't like to do them. Owning a dog means you get to play with it, pet it, go out on walks, have a furry companion who would trust you with their eyes closed, but it also means having to clean up after them, regular vet visits, partly chewed furniture, and so on.

You can't slack off

That said, programming is a very demanding field where you have to always keep abreast of the happenings. I remember not coding for about half a year and feeling like a complete newbie because Angular was replaced by React and you could suddenly make apps with web technologies. Your dog is also very demanding by nature, you have to be alert at all times so he doesn't do something you wouldn't want him to, like poop on the carpet.

Inspite of everything, it's fun and you love it

At the end of the day though, it's still a lot of fun to make things and to have a furball to play with after an eventful day, and you wouldn't want it any other way.

That's all folks!

Implementing Flexbox with SCSS mixins

Tanmay Naik — Thu, 03 Oct 2019 11:51:35 +0000

I was scouring the internet for a good mixin for flexbox but I would always come across mixins like these,

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

with a mixin for every possible property,

@mixin justify-content($justify) {
  -webkit-justify-content: $justify;
     -moz-justify-content: $justify;
      -ms-justify-content: $justify;
          justify-content: $justify;
            -ms-flex-pack: $justify;
}

While this may work for a lot of people, I still felt that it could be made simpler, or "DRY'er". I'm pretty sure someone must have done something like this before, but I couldn't find it. So after a little bit of struggling around with SCSS mixins and functions, I came up with this,

More functions can be created and extended into the mixin such as flex-direction, flex-wrap, flex-grow, etc. with the @content directive in a similar way. It can also be used on properties that use the same values like justify-self or align-self. I will be updating this post with a github repo for all the functions and mixins soon.

Would love to know if anyone finds it useful. Thanks.

How to find the motivation to blog?

Tanmay Naik — Wed, 18 Sep 2019 18:49:44 +0000

Also, given the motivation, how do you plan your posts?

Node JS Help

Tanmay Naik — Mon, 09 Sep 2019 11:23:09 +0000

I'm working on a portfolio template that uses a local JSON file that has an object with the name, links and email address, to load data and manipulate the DOM accordingly.

The issue I have is that, it only runs on the server and not on the client side. I'm using the Fetch API and I discovered that it does not allow loading of JSON locally without a server for security reasons. I know I can use Node to run a server, pass the data to client side JS and manipulate the DOM. But the problem is that I want the eventual site to be static and the changes to be persistent, which they are not.

Is there a way to run the server script to simply pass the JSON to client side and then shut it down and have the changes stay permanent? Or am I using the wrong tool to do this?

Social Media Card UI

Tanmay Naik — Thu, 05 Sep 2019 17:44:03 +0000

Minimis - The portal to your web footprint

Tanmay Naik — Wed, 04 Sep 2019 12:59:21 +0000

Minimis is a Latin word for 'minimal', which was kept in mind when designing this template. It essentially acts as a portal to your web footprint in a professional capacity. A lot of times, writing a blog and being consistent with it is generally not feasible to every developer or designer out there. And sites like Medium, and dev.to as well, have made having a personal blog kind of pointless to a large degree.

So I created Minimis with an intent to have a decent looking single page website as a gateway to all your other profiles that you could show a potential employer or a client.

Here's a live demo of my own website using it - blazephoenix.github.io

Would love some feedback on it. Thanks!

Webscraping in Python with Flask and BeautifulSoup 4

Tanmay Naik — Tue, 05 Feb 2019 18:19:13 +0000

What is web scraping?

Web scraping is a term used for the process of extracting HTML/XML data from websites. Once extracted, it can be parsed into a different HTML file or saved locally in text/spreadsheet documents.

Who does it?

A lot of websites that aggregate data from other websites on the internet. Some examples could be websites that give you the best deals on the same product after comparing across multiple platforms (Amazon, Flipkart, Ebay, etc.), and also sites that collect datasets to apply ML algorithms to.

How is it useful to me?

I would recommend you to limit your thinking to how something could benefit you especially when you know little to nothing about it. It helps to be a generalist when you’re just starting out. Learn everything, you never know when you’ll need it! You can always settle and specialize in one area eventually, when you’re well aware of the options you have.

What we’ll need

Python v3.6.8
VSCode

Installing Python (skip if already installed)

Go to — python.org > Downloads > Windows
Scroll to version 3.6.8 > x86 (32 bit) / x86–64 (64 bit) > Executable
Double-click and check “Add Python to PATH”
Follow the installation instructions.
Check if correctly installed
Press Windows key+R > Type “cmd” to open the command line.
In the command line > Type,
python --version

If Python is installed correctly, you should see, 3.6.8 in the terminal.

Installing VSCode (skip if already installed)

VSCode is a free code editor with lots of features that make writing and debugging code much easier.

Go to code.visualstudio.com > Download for Windows > x86/x64 > Installer.
Double-click and follow the instructions.

Let’s begin!

Create a new folder and call it “Webscraper”
Inside the folder, create a new file named webscraper.py
Open VSCode > File > Open Folder > Navigate to “Webscraper”

Now we need to import a few libraries which will help us build our web scraper.

Go to Terminal > New Terminal

This is basically the command line but within the editor so we don’t have to have two windows and keep switching between them.

Next we call pip

You could call it the Alfred to Python’s Batman. Hehe.

In your terminal, type pip install beautifulsoup4

This installs the beautifulsoup library which will help us scrape webpages.

Next type pip install flask and pip install requests

Flask is a lightweight framework to build websites. We’ll use this to parse our collected data and display it as HTML in a new HTML file.

The requests module allows us to send http requests to the website we want to scrape.

In your file, type the following code:

    from flask import Flask, render_template
    from bs4 import BeautifulSoup
    import requests

The first line imports the Flask class and the render_template method from the flask library. The second line imports the BeautifulSoup class, and the third line imports the requests module from our Python library.

Next, we declare a variable which will hold the result of our request

    source = requests.get(‘https://webscraper.droppages.com/').text

We send a GET request to https://webscraper.droppages.com and convert the HTML to plain text and store that in the source variable.

Next we declare a soup variable and store the value we get after passing source to BS. ‘lxml’ is the markup we want our rendered code to have.

    soup = BeautifulSoup(source, 'lxml')

At this point, we have our code working. You can check it out by passing soup to a print function, like this print(soup) after the previous line and running python webscraper.py in the terminal.

Right now, we are pulling the entire web page rather than specific elements on it. To get specific elements, you can try these by yourself.

But before you do that, you should be aware of what exactly you want to get. You can either run the last command again or open the web page in the browser and inspect it by right clicking on the page. Some knowledge of HTML DOM and CSS is required here. You can head over to W3Schools or MDN for a quick crash course on both.

    <variable> = soup.find('<HTML_element_name>')
    <variable> = soup.find('<HTML_element_name>').select_one('child_element')
    <variable> = soup.find('<HTML_element_name>').find_all('child_element')

You can pass regular CSS notation in the brackets to be more specific about the elements you want.

Now, we are only actually just outputting HTML along with the text inside it. What if we just want the text?

That’s easy.

We simply pass .text at the end of it. Just like we did with source. Here’s an example.

    head = soup.find(‘main’).select_one(‘article:nth-of-type(4)’).div.text

Here, we tell Python to store the text of the div in the 4th article element which is in the main element, in the head variable.

You can check the output by passing head to print() and running python webscraper.py in the terminal.

Try getting the names of one of the authors if you can.

You can get an author like this,

    author = soup.find(‘main’).select_one(‘p’).text

Notice how you also get the date along with the name. That’s because both of them share the same element. There is a way to get the author name separately by using Python string methods like split and slice. But we won’t cover that here.

Next up, we will use flask to re-render our received data the way we want on a local server.

In your file, type the following code,

    app = Flask(__name__)
    @app.route('/')
    def index():
       return render_template('index.html,**locals())
    app.run(debug=True)

Create a new templates folder in your main webscraper folder and call it index.html

The flask part is a little complicated to explain but to put it simply, we created a simple server that will take our index.html from the templates folder and serve it on a local server — localhost://5000

Now, we can combine multiple variables we declared in all the previous code using soup and pass the text to our HTML and use CSS to style them the way we want!

You can use this code for the index.html file,

    <!DOCTYPE html>
    <html lang=”en”>
     <head>
      <meta charset=”UTF-8">
      <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
      <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
      <title>Webscraper in Python using Flask</title>
     </head>
     <body>
      <!-- Variables from Flask here -->
     </body>
    </html>

Now, we can use all the code we learned so far to create custom variables and pull specific data from our site. If we are well versed with the structure of our target site, we can use shortcuts like these.

    head = soup.header.h1.text

    second_author = soup.main.select_one(‘article:nth-of-type(2)’).p.text

    first_article = soup.main.article.div

Type these inside the index() function that we created, just above the return statement.
Save the file
Go to index.html

Now we’ll pass these variables into our HTML while it gets rendered so we can see the data on our webpage.

    <!DOCTYPE html>
    <html lang=”en”>
     <head>
      <meta charset=”UTF-8">
      <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
      <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
      <title>Webscraper in Python using Flask</title>
     </head>
     <body>
      <h1>{{ head }}</div>
      <p>{{ second_author }}</p>
      <article>{{ first_article }}</article>
     </body>
    </html>

Now open the terminal and run python webscraper.py

Aand we did it!

If you’re wondering how it’s so easy, well, it’s not. This was just a single page, and a simple one at that, with no classes or IDs added to the HTML. But this is a good start.

Wonder how you can scrape multiple pages?

The answer is multiple for, while, try, except and if-else loops!

Hello, this was my very first technical article. If you find any errors in the code or the way I approached the tutorial, feel free to correct me. I'm excited to be part of this community as I grow with it and intend to contribute meaningful content. Thank you for reading!