DEV Community: AP

Load an interactive 3d model onto your web app- Lazy Tutorials #1

AP — Thu, 20 Apr 2023 09:45:48 +0000

Introduction (completely optional to read, If you're too lazy 🥱)

Hi there! Long time no see! I must confess, I haven't felt the urge to write anything here for a while now. Maybe it's because I've been caught up with my own projects, or perhaps I've just been feeling a bit too lazy to put pen to paper. But actually, that's what sparked this idea. I've realized that reading through a lengthy article from start to finish can be a bit of a drag, and that's why people tend to prefer watching videos instead. I get it - I've been there myself many times. It got me thinking though, is there a way we could cut through all the fluff and get straight to the heart of the matter? As programmers, we often face challenges and constraints that we need to solve, and I think we could benefit from a more direct approach. No more wading through junky articles and endless videos - let's get to the point and solve those problems! 💪

As this becomes the first article to be written in the Lazy tutorial series, I hope this lets you find what you're looking for, faster.

I'm not gonna explain all the code I'm gonna write here (75% of it is self explanatory - besides, I'm writing this for those who don't have the interest in wasting their valuable time learning all that they do, but rather in finding a quick solution for the same 🙂).

1. Loading the 3d model:

Here I've used the <model-viewer> API for loading and rendering the 3d model:

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.min.js"></script>

<!-- Use it like any other HTML element -->
<model-viewer alt="Write a cool description about your 3d model." src="your_models_file_name_or_path.glb" ar environment-image="the_background_hdr_optional.hdr" poster="poster_to_be_displayed_before_loading_model.webp" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>

Obviously, it's important to change the source of the 3d model (src), the environment image file path (hdr, optional), and the poster (again, optional) to load the 3d model on your web page.

Here's the link to the API's docs just in case you wanna go further: ModelViewer.dev

Conclusion

That's it! This tip should have helped you load your own 3d model into your web page/web app... If so, do gimme your feedback in the comment box - If not, feel free to add any suggestions in the same spot - Happy Coding! 🥱💥

Phish anyone, anytime - all you need is Python!

AP — Sun, 23 Oct 2022 16:46:57 +0000

Howdy! It's been a while since I've posted any blogs in dev.to - but I bet that's balanced with this single post; it's interesting, trust me!

Warning: This article is meant for fun and educational purposes only. Using the tools mentioned in this page with ill-intention is illegal and can cause great losses. Plus, I'm not responsible for any such losses or harms. FOLLOW AT YOUR OWN RISK ⚠️.

PS: A great thanks to PyPhisher for making this tutorial possible.

As of a warm up blog, I'm not gonna explain what phishing is or how it works. (It's assumed that you know what it is :-)) Instead, I'm gonna go straight into the "hacking" area, where you can have some real fun. Again, I should remind you not to do this to others except your friends or maybe even your family members.

Requirements

All you need to setup this Hacking recipe, is a good PC to work on and have Python installed. Additionally, you will require a git repository to be cloned to your PC. Just run the below commands in a Linux terminal to move on to the next part of this tutorial.

Note: It's really important that you use a Linux terminal. If you're on windows, then try installing WSL (Windows Subsystem for Linux) and then running the command in that terminal.

git clone https://github.com/KasRoudra/PyPhisher
cd PyPhisher
pip3 install -r files/requirements.txt

Now, you have to install..... Wait! That's it! You have successfully configured all the necessary stuff for this tutorial. The only thing that's left for us is to run the code. Well, let's do that:

python3 pyphisher.py

Now, for the first time, running this command will take several minutes for the installation to be complete. After that, you will be prompted to enter some information (press Enter to set the defaults). This is only for the first time, and anytime you use it afterwards, there will be no more installations or such configs.

If you're getting a similar output, then just type in which social media website you want to be counterfeited. In a nutshell, you are again prompted to type in what kind of login page you want, and some extra (optional) features of the same.

After doing all these stuff, you will finally get the magic link! Now, it's yours to keep - forever. Use the link wisely, perhaps redirecting someone from your website to this link, or maybe even scamming them with an email containing this link can help you get their login credentials. Now go on, try doing it on yourself and see if you can trick others as well. Happy Phishing!

Conclusion

I hope this tutorial lets you know more about phishing, and how scaringly easy it is to phish someone using simple tools and self-explanatory code. In essence, Python is indeed a magic wand that lets you create wonders, with minimal utilities. Thank you for reading this blogpost and I will see you on another cool tutorial. Till then, Au revoir!

Top 3 resources to get assets for your website...

AP — Tue, 25 Jan 2022 08:27:37 +0000

Hello, world! In this article, I'm gonna walk you through a few useful resources from where you can get assets for your website.

This article does not intend to make use of unnecessary affiliates, advertisements or any kind of misleading content. These are based on my personal interest.

#1 Unsplash

Unsplash is a great asset library for high-resolution images and illustrations. They provide us with free images that can be used for both commercial and non-commercial purposes, without any kind of attribution.

Visit Unsplash at https://unsplash.com/.

#2 Icons8

Icons8 is a plethora of web assets that you can use for free for your web project, though it might require some kind of attribution.

Now, when I say web assets, I mean it all - yeah, Icons8 does contain a wide variety of icons, images, illustrations, design softwares, clipart, music, image enhancement tools, PBR textures, face generators, audio editors and many more.

While I personally use Google's Material Icons for icons on web apps, I use Icons8's icons as favicons.

Visit Icons8 at https://icons8.com/.

#3 FreeSound

Since FreeSound is an audio asset library, it is not specific to web only, but any branch of computer science that deals with sound (Remember: By the term audio assets, I mean sound effects and not music). I frequently use this resource for searching sound effects for video editing, game dev, etc. While there are millions of resources out there that can provide you with free music, I couldn't find a better resource for sound effects than FreeSound.

Visit FreeSound at https://freesound.org/.

Conclusion

And that's it! I went over a few amazing asset libraries that I personally use during web dev, which might help you too. Thanks for reading - see you next time!

Develop a hangman game in Python in just 5 minutes

AP — Thu, 16 Dec 2021 06:14:30 +0000

Hello, world! In this post, I will walk you through a simple hangman game in Python. This post already assumes that you have prior programming experience in Python. If not, a great way to get started is via here.

Now, this is isn't a GUI based game - just a terminal based I/O game that can improve your pythonic knowledge.

What's a hangman game?

Hangman is a paper and pencil guessing game for two or more players. One player thinks of a word, phrase, or sentence, and the other tries to guess it by suggesting letters within a certain number of guesses. (Source: Wikipedia)

So, what's the plan?

Now that you know what's Hangman, let me provide you with a fine pseudocode for the same:

Pick a random word from a large dataset.
initialize points to 0
while True:
    set POSSIBLE_ALPHABETS = list of "abcdefghijklmnopqrstuvwxyz"
    set RANDOM_ALPHABETS = pick 3 random alphabets from POSSIBLE_ALPHABETS
    for ALPHABET in RANDOM_ALPHABETS:
        replace ALPHABET from the random word with a "_"

    print the random word (after replacement of alphabets)
    take input from the user as ANSWER

    if ANSWER is equal to the random word:
        #Hurray!
        increment points by 1
    else:
        #Alas!
        print the total points
        break

This will be the infrastructure of our game - feel free to change or modify this pseudocode according to your means.

Pip requirements

Install the following packages:

colorama (optional)
nltk

Alright! With a nice and firm pseudocode, let's get into the actual code:

First of all, we want to import all modules.

import random
import colorama

from nltk.corpus import brown

Note: Here I'm using brown dataset from nltk.corpus which is a large collection of words - alternatively, you can replace the usage of Brown with your own dataset.

Now, we want to get all the words of the Brown dataset and put it in a variable:

word_list = brown.words()

Note: If you are using your own dataset, try this: word_list = ['apple', 'computer', 'banana', 'soap', 'snake', ...]

Now, let's initialize a points variable and set its initial value to zero 0.

points = 0

Now, I came up with an idea of using "Colorama" which can provide you with colored output on the terminal window. It is optional, and I did this to make the output a bit nice.

colorama.init(autoreset=True)

Since we need to loop our game till the player loses (so that we can increment the points), let's wrap the upcoming lines of code with an infinite loop:

while True:
    #rest of the code goes here.

Now, I don't why I did this, but I re-initialized the word_list with another variable words:

words = word_list

Ok, this is the time we need a list of all possible alphabets (from A to Z):

possible_alphabets = list("abcdefghijklmnopqrstuvwxyz")
old_word = random.choice(words)

Note: I also added a variable old_word to choose a random word from word_list - I named it like that, just so that I can differentiate it from the word after that it has been modified.

Now, add these lines of code to your existing Python code:

alphabets = [] #initialize alphabets list

for i in range(3):
    alphabets += random.choice(possible_alphabets)

I did this so that I have an alphabets list, and that I append 3 random letters to the alphabets list from the possible_alphabets list (as per the pseudocode we designed before).

Now that we have that, let's replace all these random alphabets from the old_word with an underscore, so that we could make our guessable string (Eg: "developer" as "de_e_ope_")

for alphabet in alphabets:
    word = old_word.replace(alphabet, '_')

Cool! Everything seems to be right till now; let's start getting the user input.

if "_" in word: #additional error checking
    print(word) #printing the word with underscore
    answer = input('word: ')
else:
    continue

Now, as a conslusion, add these lines of code:

if answer == old_word:
    points += 1
    print(f'That\'s correct! Total points: {colorama.Fore.CYAN}{points}')

else:
    print(f'Sorry, but you lost. (The actual word was {colorama.Fore.GREEN}{old_word}{colorama.Fore.WHITE})\n')
    print('------GAME OVER------')
    print(f'\nTotal points: {colorama.Fore.CYAN}{points}\n')

    break

We finally checked whether the user input was the same as of the original word, and if it was, we incremented the points by 1. If it wasn't, we then broke out of the loop, saying that the game was over.

In a nutshell (for lazy developers):

import random
import colorama

from nltk.corpus import brown

word_list = brown.words()
#word_set = set(word_list)

#print(random.choice(word_list))

points = 0

colorama.init(autoreset=True)

while True:
    words = word_list

    possible_alphabets = list("abcdefghijklmnopqrstuvwxyz")

    old_word = random.choice(words)

    alphabets = []

    for i in range(3):
        alphabets += random.choice(possible_alphabets)


    for alphabet in alphabets:
        word = old_word.replace(alphabet, '_')

    if "_" in word:
        print(word)

        answer = input('word: ')
    else:
        continue

    if answer == old_word:
        points += 1
        print(f'That\'s correct! Total points: {colorama.Fore.CYAN}{points}')

    else:
        print(f'Sorry, but you lost. (The actual word was {colorama.Fore.GREEN}{old_word}{colorama.Fore.WHITE})\n')
        print('------GAME OVER------')
        print(f'\nTotal points: {colorama.Fore.CYAN}{points}\n')

        break

Run the code, and see what you get!

This was just a beginning; here's an idea for you to make our project more interesting: why not create a GUI for the same?

Having any doubts or queries regarding the topic? Feel free to mention it in the comments below and I will try my best to respond to you!

Conclusion

Python is so amazing that it is meant for any branches of computer science. It's way of implementing algorithms in easier syntaxes makes it unchallenging to execute any plan.

If you liked the project, give it a thumbs up 👍, so that I can make cooler projects like this - till then, see you next time!

Create a simple web app with Python and flask in 10 minutes

AP — Wed, 15 Dec 2021 07:11:30 +0000

Hello, world! Today, I would be creating a simple python web application with Flask, a microframework for creating full-fledged web applications. I will be covering this topic with Flask since it is an intermediate + beginner tutorial, where anyone with no prior experience can follow along.

Before we move on...

This tutorial assumes that you have Python installed in your Mac or PC (required) and that you have done object-oriented programming in Python before. These prerequisites (except the former one) are recommended but not required.

What is Flask?

Flask is a micro web framework written in Python.
It is classified as a microframework because it does not require particular tools or libraries.
It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.

(Source: wikipedia)

Installation

It is always recommended to create a new directory as your project folder, and that you have activated a virtual environment (optional).

Via Pip - pip install Flask (See this for specifications.)
Via Conda - conda install -c anaconda flask (See this for specifications.)

To check whether Flask has been successfully installed on your Mac or PC, type in flask --version.

If getting an error, try using python -m flask --version or python3 -m flask --version.

If none of the above commands work for you, you can directly run your app instead of running it from the terminal or command prompt (more on that later).

Hmm...Seems like a handful of configurations, but these are only necessary for the first time when you install flask. (Not meant for people using virtual environment).

Our first Flask app

Now, it's time to create our flask app; create a new file in the project directory and name it "app.py". This file contains the back-end code for our application.

As a starter template, type in this code:

# app.py
from flask import Flask

app = Flask(__name__)


@app.route('/')
def index():
    return "Hello, world!"

# Omittable
if __name__ == "__main__":
    app.run(debug=True)

Code lines explained (for newbies)

from flask import Flask - seems a bit strange that you have to import Flask, again from flask? What is happening here is that you are importing a class named "Flask" (capitalized) from the actual module that we installed before, named flask.

app = Flask(__name__) - Here, we are instantiating the Flask class and declaring it in a variable named "app"; this app variable is the main structure of our app that can handle routes, run the app, debug it, etc.

The extra parameter that we give to the Flask class (__name__) just checks whether we are in an application package, or just an individual module. (Learn more here).

@app.route('/') - Now, this is a Python decorator.
Here, we are defining a route (If you are already familiar with web programming and have used any web frameworks for this purpose, you might be familiar with routes as well).
A route is a simple way of telling the server to create a specific path in the app, so that the users will be able to visit it via a web browser.

For the purpose of demonstration, consider these routes as a pathway where users can walk through.

A web app can contain multiple routes, and each route is prefixed with a forward slash "/". If you visit a URL, most of the times the default route will be "/" (For example, " dev.to/", " google.com/"). Other examples include:

/search
/login
/signup
/posts/abcd (This is a nested route, having a route inside another route)
/greet?name=John+Smith (A route with a URL parameter "name" and its value set to "John Smith")

def index(): return "Hello, world!" - This line of code defines a function named index and the above decorator installs this function to the app instance of Flask class, then this function returns "Hello, world!" which would be displayed in the user's browser as an HttpResponse.

Next lines of code can be omitted if the flask --version commands worked in your terminal window. These lines just run the app, only if the user is actually running the "app.py" file and not when importing the file from somewhere else.

Running the app

To run our app, just type in flask run to run it via the terminal window or command prompt (in Windows), or just run the python file to run it directly (python app.py).

Hurray! Our app has been run, now you can visit localhost:5000 in your favorite browser to see our app up and running!

Note: Try changing the value of "Hello, world!" in the 8th line to see the result being reflected on the browser.

Some HTML, perhaps?

Ok, now it's time to write some HTML and make our app look a bit nicer. Our app only returns "Hello, world!" since, which no one would like to stay with. You can also add inline HTML to the string provided (For example, return "<h1>Hello!</h1>"), but that isn't the way to do it. The following steps show you how to add an html file to the server and display it to the user to make it an actual web app.

Create a new folder named templates in the project directory; inside of it, create a new file named "index.html". Then, inside "index.html":

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>

<body>
    <h1>Hello, world</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>

</html>

Note: I've added additional Bootstrap CDN to style our web app.

Now, in our Python code, change the from flask import Flask to something like:

from flask import Flask, render_template

This is done to make sure that we import a function named 'render_template' which returns an HTML template as an HttpResponse.

Then, change the return "Hello, world!" to something like:

return render_template('index.html')

The above is self-explanatory. It just returns index.html whenever someone visits the "/" route.

Note: if you are using the command flask run, you may have to stop the server (Ctr + C) and rerun it to see the changes.

Challenge: More routes

Now, our app is just serving one route, but we can add more routes to make it more sophisticated:

# app.py
from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')

@app.route('/greet')
def greet():
    return render_template('greet.html')

# Omittable
if __name__ == "__main__":
    app.run(debug=True)

This creates another route named "greet", and returns another HTML file "greet.html". Try creating the "greet.html" file in the templates folder and visiting localhost:5000/greet to see the newly created file!

Serving static?

CSS, JS and Assets (like images, video clips, SVG, etc.) files never change dynamically - so these can be called as static files. Create a new folder in the project directory named "static", and inside of it, you can place all your static files. One more tweak in the "app.py" file, and you are ready to go.

from flask import Flask, render_template, url_for

When linking static files, consider adding this way:

<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
...
<script src="{{url_for('static', filename='script.js')}}"></script>

{{}} are Jinja syntaxes. Now, Jinja is a templating language used by Flask to serve dynamic pages.

Dynamic pages?

Pages that can change its content dynamically according to the data entered by the user are called dynamic pages. These can be easily created by passing in the values (to be dynamically displayed) in the render_template function, like:

return render_template('index.html', name="Brian")

This can be called from the "index.html" like:

<h1>Hello, {{name}}!</h1>

Conclusion

Congrats, you've created and run your first Flask app!

If you are having any queries or suggestions related to this topic, feel free to mention it in the comments below, and I will try my best to reply for the same!

Flask is an amazing platform to get started with web programming. Possibilities are endless with Flask, and you can do a lot more than the details listed in this article.

There are a lot of tutorials on the internet that can provide you with the finest materials for creating more advanced projects, and I too soon will be posting a tutorial for creating advanced apps in Flask; this was just a beginning. I will also post an article on how you can host your web app on Heroku for free. Till then, bye 🖐!

Top 5 UI trends of 2021 every developer should know

AP — Tue, 14 Dec 2021 05:40:21 +0000

Hello, world! Often we are developing a full-stack web application, we usually start from the backend, focusing on the main bugs and issues of it. Then we move onto the front-end stuff; perhaps a taste of React would do.

But ever thought about how other web apps look much nicer than yours? Well, my tip is to find inspirations like that. But remember that the UI plays a major role in making a good impression on your web apps' users - so it should be as good as any web apps of 2021, and soon as in 2022.

So, you need inspiration? - Here you go! I've gathered a few trends of 2021 to include in your web app to make it look cooler.

1. Usage of box-shadow in CSS (Neumorphism)

Shadows became an important aspect of web UI in 2020. they make the web components look like they are floating, which makes it more interactive with the user.

But NEVER use shadows in a contrast way, having sharp edges and black fill. This will have an adverse effect on the user, and I, as any user, hates the way it looks like. Here is a picture depicting what I mean:

Instead, I would suggest something like this:

Note: You don't have to do this yourself! There are millions of apps out there that can do this for you - I would consider this or maybe this, or you can even copy the values of the CSS's shadow property from other cool web apps like Programiz, via the developer tools in your browser.

So, shadows should me smooth, attractive and hyper realistic; they are there for impressing the user and not for scaring them out.

Then comes these topics:

2. Usage of JavaScript for animations and better user interactivity:

Yes, it's amazing! JavaScript is one of the best ways by which you can improve user interactivity and can do a lot to increase the business productivity. It's so cool that you can use it for any kind of web designing - at least one library would be there, meant for the purpose of doing so.

3. Translucency on the web - Glassmorphism:

Ok, now I wouldn't recommend mixing up glassmorphism with neumorphism - that would be a mess. But glassmorphism alone is a robust way to design your app, where each element is given a particular translucency with a bit of blurred background to resemble glass.

4. Image formats - JPEG, PNG, WEBP OR SVG?

Image formats should be chosen wisely - JPEG for photographs, PNG for icons, SVG for animations and icons, WEBP as a better alternative for both PNG and JPEG, GIF for images containing multiple frames (animated clips), and many more.

5. Code obfuscation

Now, I wouldn't put this topic in "web trends", but it's worth a glance, as it can save a number of lives.

Code obfuscation is a way by which you deliberately make your code look ugly with the help of an obfuscator. This is done to make sure that no one (including yourself!) steals any code from your web app's front-end via the Developer tools of the browser, so that you can easily monetize with your app and no one will be able to get the source code (unless you are building an open source software!) .

Conclusion

In short, web is an ever-increasing plethora of wonders - do it the best way, and you too can create wonders with it. I hope the techniques and tools mentioned above played at least a minor role in your development career - Thanks for reading!