Many third-party mods come with hidden dangers, such as backdoors, viruses, and even botnets disguised as innocent add-ons. Aware of these risks, I refused to compromise my device's security by using any of the available mods, no matter how tempting they might seem.

So, what was the solution? I decided to take matters into my own hands. With a background in software engineering, I embarked on a journey to reverse engineer WhatsApp's Android source code. My goal was simple: to disable the features that annoyed me the most and regain control over my messaging experience.

After diving into the intricacies of WhatsApp's codebase, I identified the offending features and carefully disabled them. It was a challenging process, but the satisfaction of finally having a WhatsApp experience tailored to my preferences made it all worth it.

Once I had made the necessary modifications, I recompiled the code into an APK, effectively creating my own customized version of WhatsApp. However, I want to make it clear that I have no intentions of violating WhatsApp's End User License Agreement (EULA) by distributing this modified version. It's a personal solution to a personal problem, and I'm content with keeping it that way.

Now, if you're a friend of mine reading this, you might be wondering how to get your hands on my customized WhatsApp APK. Well, the answer is simple: just reach out to me directly. I'll be more than happy to share my solution with those who share my frustrations.

In conclusion, my experience with WhatsApp's updates and status feature taught me the importance of taking control of my digital life. Instead of passively accepting annoyances, I chose to actively seek a solution that worked for me. And while reverse engineering WhatsApp's source code might not be feasible for everyone, it's empowering to know that there are alternatives out there for those willing to take the plunge.

So, here's to reclaiming our digital autonomy, one line of code at a time! 👨‍💻📱

In this blog post, we will explore the key differences between statically typed languages and dynamically typed languages, including code examples and comparisons, to help you understand which one might be more efficient for your next project.

What is a Statically Typed Language?

A statically typed language is a programming language where the type of a variable is known at compile time, rather than at runtime. This means that the type of a variable must be specified when it is declared, and any operations that involve that variable must be performed on values of the correct type. If an operation is performed on a value of the wrong type, the compiler will report an error, preventing the code from being executed.

Examples of statically typed languages include Java, C#, and C++. Here is an example of code written in Java:

int x = 10;
String y = "Hello, world!";
System.out.println(x + y);

In this example, the type of x is int and the type of y is String. When the code is compiled, the compiler will report an error because the + operator cannot be used to add an int and a String.

What is a Dynamically Typed Language?

A dynamically typed language, on the other hand, is a programming language where the type of a variable is determined at runtime. This means that the type of a variable can change during the execution of the program, and operations can be performed on values of any type. If an operation is performed on a value of the wrong type, the error will only be reported at runtime, rather than at compile time.

Examples of dynamically typed languages include Python, Ruby, and JavaScript. Here is an example of code written in Python:

x = 10
y = "Hello, world!"
print(x + y)

In this example, the type of x is initially int, but the type of y is str. When the code is executed, an error will be reported because the + operator cannot be used to add an int and a str.

Advantages and Disadvantages of Statically Typed Languages

The main advantage of statically typed languages is that they catch errors early in the development process, before the code is even executed. This can save a lot of time and effort, as well as make the code more reliable. Statically typed languages also typically have better performance than dynamically typed languages, as the type information can be used by the compiler to generate more efficient code.

However, statically typed languages can be more verbose and require more boilerplate code than dynamically typed languages. This can make the code more difficult to read and understand, and can slow down the development process. Additionally, statically typed languages can be more rigid and less flexible than dynamically typed languages, as they do not allow for as much dynamic behaviour.

Advantages and Disadvantages of Dynamically Typed Languages

The main advantage of dynamically typed languages is their flexibility and ease of use. Because the type of a variable can change

In conclusion, statically typed languages and dynamically typed languages each have their own advantages and disadvantages, and the choice between them depends on the specific needs of a project. Statically typed languages offer the benefit of catching errors early in the development process, resulting in more reliable code, and typically better performance. However, they can be more verbose and rigid, slowing down the development process.

Dynamically typed languages, on the other hand, offer greater flexibility and ease of use, but with the trade-off of potentially encountering errors at runtime. The choice between these two types of languages ultimately comes down to a trade-off between safety, reliability, and performance, and the desired level of flexibility in the development process.

Ultimately, the choice between statically typed and dynamically typed languages is not a one-size-fits-all decision, and it is up to the individual software developer to weigh the pros and cons and make the choice that best fits their needs. Whether you choose a statically typed language or a dynamically typed language, the important thing is to understand the trade-offs and make an informed decision based on the specific requirements of your project.

This article was originally posted by me on iThinkLogically

The method I am sharing with you right now will probably boot your AJAX skills.

Just for the record:

AJAX is a developer’s dream because you can:

• Update a web page without reloading the page

• Request data from a server – after the page has loaded

• Receive data from a server – after the page has loaded

• Send data to a server – in the background

So without wasting much more time let’s get our hands dirty with some AJAX 🙂

Things You need:

1. MAIN PAGE – A page from where you will send request to another page without reloading the current one or navigating to other page

2. SOURCE PAGE – It’s generally written in server side scripting language eg. PHP

Now We are done, the key part is server side scripting language needs fully executed just like loading new web page but it doesn’t look dynamic so AJAX comes into play.

JUST FOCUS FOLLOWING 2 PARTS TO GET ENOUGH ABOUT AJAX.

1. parentpage.html

parent.html

1. source.php

source.php

Don’t worry the source code of these two files are available HERE on my github repository!

If you have any query or suggestions Drop your responses below in comments. I will be happy to help you 🙂

This article was recovered from my old blog salmanually.com and reposted here on (26/06/2022) Check orgiginal Archive.org - wayback version of this post

The JavaScript.

JavaScript as a beginning was only famous for its front end web applications when the internet and web browsers became popular. The syntax was quite a bit easy-to-understand and not much complex as now because it does more things now than earlier. Nobody would have thought there will become lots of frameworks and open source libraries for javaScript as makes it the largest community online. Companies like Facebook & Google are building their own frameworks and libraries as an open source frameworks for global communities to contribute and utilise on that. So it means that if you are going to learn this skill is not a waste.

Facebook has developed their react and react-native while as Google has developed angular js on javaScript

Becoming a full stack developer we need to break down the process. The first process is you need to know things about backend and frontend and idea about developing mobile and desktop applications both for Android and Apple the popular mobile and desktop platforms out there and also for windows, luckily javaScript takes care about all of them.

Luckily JavaScript has now become so advance said that it’s not only now it is used as frontend but can be used as a very efficient back and programming language that can deal with all high and and process related executions efficiently. Yes, I am talking about node JS the Elite and revolutionary JavaScript framework that has changed how I think about JavaScript it’s so efficient that its execution is much faster than the other reputed programming language are such as python PHP even Java. Node JS also has a built-in popular dependency and package manager called as NPM (Node Package Manager) that intalls the dependecies rapidly. NPM has become so popular now other frameworks like react and other js frame works can be deployed by using NPM.

SO THE THING IS IF YOU MASTER THE JAVASCRIPT YOU DO NOT HAVE TO WORRY ABOUT TO LEARN A NEW LANGUAGE TO EXECUTE SOME DIFFERENT TASK FOR YOUR REQUIREMENTS.

With JavaScript, you can develop a front end of a website that’s really very responsive and can give a very rich experience to the users visiting your website by using any popular JavaScript frontend framework such as angular or react or vue JS there are also lot of other friend and platforms you can by your own. Most of all the library is open source & have a big community all over the globe. JavaScript becoming really really popular day by day you can see GitHub is really flooded with the JavaScript libraries and projects done on javascript we really do not know how far it’s going to get us and with the back-end the JavaScript can really be more efficient and can handle a lot of input and output in a non blocking scenerio that node JS is giving.

On the other hands by developing the applications no matter for mobile or desktop JavaScript really take care of that.

I am not going to stuff you with some old research and features I am going to tell you about the recent things that are happening in the market so forget about the hybrid mobile applications but the approach where used was a bit time consuming and how to get and applications that where buggy was not having a good impact on end-users on the developer side we could not get the most things done.

So I am introducing one and only react native which is another JavaScript framework that allows you to develop mobile applications and desktop applications independent of their operating system and platform they are on. Since the react-native has been in market it has really boosted dethevelopment of mobile applications much faster and smoother.

The JavaScript has really revolutionized the web experiences as well as the applications that are installed on end devices. With front-end libraries as angular and react or vue**JS you can make very responsive and very smooth looking front-end website in a new revolutionary way, and with node JS you can make your web server to do things at very faster and in a very efficient manner. With react native you can develop directly applications that you can letter deploy on app Store for Play Store**.

That is all, but one thing we need to worry about is a syntax that all different libraries and frameworks are using. Each of the library at their different types of syntaxes that they use but not really difficult another one it will hardly effect. Luckily is if you know the basics and core things of JavaScript you can master them and can directly jump on them and mostly all of them are using new ES5 or ES6 syntax style of JavaScript.

THERE IS A WAY THEY ARE ALWAYS.

This article was recovered from my old blog salmanually.com and reposted here on (26/06/2022) Check orgiginal Archive.org - wayback version of this post

Cryptocurrency is essentially a digital means of currency exchange and digital payments platform that uses blockchain technology.

Why this post?

The fact there are still some people out there who think that cryptocurrency is not halal or authentic according to Islam I have personally talked to lot of people what actually makes them feel this way but trust me most of them didn't know how cryptocurrency works but on other hand, some people new the logic behind cryptocurrency and they had some valid reasons also like they are some cryptocurrencies that clearly supports products, causes and ideology that is against Islam.

But based on hand full of tokens or coins we cannot say that cryptocurrency as whole is haram. It is certain that we should avoid those crypto tokens.

It's like saying I don't use mobile phone because it has a music player in it, well having a music player in it does not mean you are going to play music in it you can play MP3 Quran or any other thing that is not prohibited so it's just an analogy I guess a silly one 😅. But I hope you understand my point.

Why do I think cryptocurrencies aren't haraam?

I believe that cryptocurrencies are more authentic and more genuine means of transaction that's actually how the transaction was meant to be not just relying on a value with respect to US dollar (fiat) whose value and amount of circulation ( causes inflation, riches getting richer and poor getting poorer) is governed by the people whome we don't even know or we don't know there intentions. They can circulate how much of dollars as they want and your country is obligated to follow that because all other countries wanted to centralise the assets instead of directly setting the value of the respective currency to the world's available natural assets like gold after world war II

• To make a fully understand why I think to currencies more authentic then actual paper money. Let me give you a brief gist how transaction in exchange of an interest were happening and how we ended up with paper money and why it needs to be changed.

Well back in early days when people had to trade they use barter system where they were directly trading something with respect to something let's say if a person A wanted to buy fruits from person B, but the person A had to pay exact value that those fruits were of obviously the person A cannot pay in fruits because he don't have any that's why he is purchasing that. To close the deal person A pays exact value in chicken eggs that of fruits.

But the problem with above scenario was what if person B never wanted eggs but to make a sale they had to make some kind of sacrifice in those days in barter system.

That is why people wanted to get something that has a value that can be exchanged in spite of its form that is why gold coins where introduced so if a person wanted to purchase fruits he can give some amount of gold coin and person B can re-use those coins and purchase something that he was interested in.

• Here is the catch

People were not comfortable carrying gold coins across and those gold coins had very highest value let's say if a person wanted to buy small goods so buying with gold coin was not a good option because it would be 1000 part of it so the transactions will not accurate and people tried to find more accurate way to do transactions.

Thats why paper based money (fiat) was introduced, tell here you would have some idea that the way we make transaction is bound to change we cannot rely on one particular mode, it's a human nature would always try to find a better and improved version of what was already existing.

But when fait money came, it made entry of banking system so strong that most of the Muslim countries are slaves to this system, credit systems, loans, life insurance and interest based schemes were also born. Which I believe is major fall of Muslim era.

Cryptocurrency works on blockchain and blockchain is a decentralized system that is not governed by a country or an organization. Its circulation is limited (some exceptions) and its value may increase decrease and these tokens are mined similarly it possesses characteristics just like gold.

The authentic part is that every transaction gets recorded permanently and is open to everyone anyone connected to the blockchain network can see what transaction has been made from which wallet (just like your bank account number but in a different way).

I believe cryptocurrencies will eliminate central banks that are the main cause behind world hunger and poverty and prohibited in islam. We all are in this banking system even of we want or not and cryptocurrencies are way out of it and an upgrade to the way we transact.

What Aalims say

A comprehensive Islamic interpretation, one that sparked a massive rise in Muslim investment in Bitcoin and Ethereum in 2018, was provided by Sharia advisor Mufti Muhammad Abu-Bakar (former advisor to Blossom Finance) who argued that Bitcoin is permissible under Shariah law. He considered arguments that crypto itself was speculative, but his view was that all currencies have a speculative element and this did not automatically deem crypto as haram.

From the perspective of Islamic contract rules, there must be an element of consideration - Mal. Mal refers to possession and effective storage, and cryptocurrencies meet the criteria required as they can be possessed and stored and have commercial value (Mutaqawwam). Crypto is a real and viable digital asset, its worth and value lies in what is paid for it, and it is capable of being owned and traded commercially so the Shariah requirements are satisfied.

The Shacklewell Lane Mosque in East London became one of the first mosques in the UK to accept cryptocurrency donations and Zakat contributions in 2018 during Ramadan.

DIGITAL CURRENCIES AND SHARIAH LAW

Islamic finance principles dictates that in order for income, or investing in any product or asset, to be deemed halal it has to meet certain criteria. The principles of Shariah law should be applied to the financial systems we operate in and there has been some discussion about whether rules devised centuries ago can still be applied to a technologically modern digital financial marketplace.

The answer quite simply is yes, Shariah principles can be applied to modern crypto analysis as they are based on social justice, accountability and ethics which transcend all forms of financial transactions. As long as there is no illegal activity, then trading or investing in crypto should not be deemed to be contrary to Shariah principles. Ref Here

Final Comments

There are some cryptocurrencies out there which are clearly against our sharia and islam we must do our research before making any transactions or any trade. We need to look into the whitepaper( a detailed information about the particular token) of the ever cryptocurrency we deal with.

P.S: I may have done lot of errors in this post both logical and typing mistakes,

for typing mistakes, I felt lazy to type this long post so I used voice to text software.

as far as if I have made some logical error, please let me know with valid justification, so I can correct myself.

May Allah swt guide us all and help us in getting rid of banking system.

As a developer it will catch every developers attention that they can post to there blog directly with git push

You can now use your favourite IDE such as VSCode to directly make a blog post! Isn't it cool?

Steps to post articles via GitHub on Hashnode

1. Hashnode account:

If you don't have Hashnode account create one (affiliate link)

2. Create an empty repository on GitHub

Create a repo on GitHub that we will be used to save all you new posts like a normal GitHub repo

3. Connect Hashnode with Your GitHub

You need to goto you Blog Setting on hashnode and to inegrations

Blog Home -> Blog Dashboard -> Integrations -> Connect To GitHub

4. Allow Hashnode App on GitHub

You need to authorize HashNode App on GitHub and under repository select Newly Created Repository and click on Install

Now you have successfully intalled a.k.a connected to GitHub and 1 step behind publishing via VSCode

5. Clone your repo

git clone https://github.com/example/your-repo.git

Open your repo in VSCode or any other IDE you like and create new .md file (example.md, name of the file doesn't matter)

You need to keep this thing in mind that with every post you have to create a new .md file containing exactly below details a as metadata that will help hashnode to get title, imgae, tags etc. (You git the idea)😊

---title: GitHub Test
slug: github-test
tags: Test, GitHub
cover: https://cdn.isalman.dev/photos/1.jpeg
domain: blog.isalman.dev
---

Note: I have used my domain name on which I have hosted hashnode, you can replace it by your own

Now all you have to do is commit and push to your repo and hashnode will automatically post to your hashnode blog.

Also if you have to edit your post you can't do it from hashnode, you have to edit from you GitHub repo (That looks weird but it makes sense, bcuz both of them will store same version of your post!)

Some Tips:

Since you have to use markdown syntax you can use few extensions on VSCode to WYSIWYG editor to speed up 🚀 publishing time and have a visual experience

Name: Markdown Editor Id: zaaack.markdown-editor Description: A full-featured WYSIWYG editor for markdown. Version: 0.1.10 Publisher: zaaack VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor

or if you don't want any extensions VSCode has a built-in .md previewer, all you have to do is press ctrl+shift+v from any .md file.

Thanks, See you in next blog post, (PS: I have published this blog post from VSCode 😊)

YouTube has lots of educational information or infotainment data available, but it takes our focus away while an ad gets played. So, how about the approach where we can get override those ads and enjoy our educational or any kind of video? But this approach will need you develop your own app from scratch!

I know some of you might be thinking dude, there are adblockers or some modded apps that does the same! So what is the point? 🤔

But here I am explaining two things:

• The ethical way - i,e its the YouTube that will allow us to play ad-free videos and are aware about this.

• The most important part i,e we will get to learn more of react.

PS: I have made basic App UI just to cover-up fundamentals so, you can improve it if you want it. 😅

Lets start 🚀

1) Setting up App.js:

import './App.css';
import Header from './components/header'
import Body from './components/body'
import Footer from './components/footer'


function App() {
  return (
    <div className="main">
      <Header />
     <div className="container">
        <Body />
     </div>
     <Footer />
    </div>
  );
}

export default App;

2) Components:

To make an optimized build, we divided our chunks of code into smaller components

• header.js
• body.js
• footer.js

1) Header.js

We just used bootstrap's CSS to get quick start in our styling and our head does the same.

export default () => {
  return(
      <div className="bg-danger">
          <center><h1 className="text-white">&lt;YouTube Player /&gt;<span style={{fontSize: "small"}} className="d-inline fontVersion">v1.0 by Salman Qureshi</span></h1></center>
      </div>
  )
};

2. Body.js

This is our core engine which does all the required part.

• For state management We used useState() hooks

• To get YouTube videos We used official YouTube API v3, its free and easy to get your client API credentials. You can know more about YouTube API here 👉 YouTube API

• For asynchronous API Calls We used axios, axios is powerful alternative of JavaScript's fetch( ), it gives us flexible and full controll of every http request.

Thats it we're ready to go 🏃

import React, {useState} from 'react'
import axios from 'axios'
import ReactPlayer from 'react-player/youtube'

import PythonImg from "./../imgs/python.png"
import ReactImg from "./../imgs/reactjs.jpg"
import ReactNativeImg from "./../imgs/reactnative.png"
import GraphQLImg from "./../imgs/graphql.png"
import JSImg from "./../imgs/javascript.png"
import NodeImg from "./../imgs/nodejs.png"
import DenoImg from "./../imgs/deno.svg"
import TSImg from "./../imgs/typescript.png"
import DockerImg from "./../imgs/docker.png"

export default () => {
    const [data, setData] = useState('');
    const [searchBoxFlag, setSearchBoxFlag] = useState(false);
    const [skills, setSkills] = useState("Select a skill to load tutorial");
    const [playlistResponse, setPlaylistResponse] = useState([]);
    const [currentVideo, setCurrentvideo] = useState('');
    const [title, setTitle] = useState('Click n the video title from the play list to begin with');
    const [description, setDescription] = useState('Select a video');


    const [print,setPrint]=useState(false)
    const [btnState,setBtnState]=useState(true)
    const [space,setSpace]=useState(false)
    const [apPlaylistAPI]=useState('loading...')
    const [buffer,setBuffer]=useState('Enter Domain Name To Get Details....')
    const [showDomain, setDomain] = useState('')

// Function For Saving text to state
function getData(val){
    // console.warn(val.target.value)
    setData(val.target.value)
    if(data !== ''){
        setBtnState(false)
    }
    if(data === ''){
        setBtnState(true)
    }
    setPrint(false)
}
// Send data to API server
function submitData(){

    if(data === ''){
        // setBtnState(true)
        alert("Text box can't be empty!")
    }
    else{
        setSearchBoxFlag(true)
        console.log("correct");
        // setData(''); //clear state buffer for user
        // Send data to API
        // var newUrl = 

        // Set loading gif after click
        setSpace(false)
        // setBuffer(<img src={preloader} alt="Preloader" />)
        console.log("clicked");
        axios.get('https://www.googleapis.com/youtube/v3/search?part=snippet&key=AIzaSyBWLybXWaAdV7-7tlm9aClkSPiPAdm7boA&type=video&maxResults=20&q=' +data)
            .then((response) => {
                // console.log(response.data);

                setPlaylistResponse(response.data.items);


            });
    }


}

    // buttons

    function submitSkillButton(skill){
        setSkills(skill)
        setSearchBoxFlag(false)
        var playlistId = '';
        if(skill == 'python'){
            playlistId = "PLsyeobzWxl7poL9JTVyndKe62ieoN-MZ3"
        }
        if(skill == 'reactjs'){
            playlistId = "PL4cUxeGkcC9ij8CfkAY2RAGb-tmkNwQHG"
        }
        if(skill == 'reactnative'){
            playlistId = "PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ"
        }
        if(skill == 'graphql'){
            playlistId = "PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f"
        }
        if(skill == 'javascript'){
            playlistId = "PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET"
        }
        if(skill == 'nodejs'){
            playlistId = "PLillGF-RfqbYRpji8t4SxUkMxfowG4Kqp"
        }
        if(skill == 'deno'){
            playlistId = "PL4cUxeGkcC9gnaJdxuGvEGYQ9iHb8mxsh"
        }
        if(skill == 'typescript'){
            playlistId = "PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI"
        }
        if(skill == 'docker'){
            playlistId = "PLhW3qG5bs-L99pQsZ74f-LC-tOEsBp2rK"
        }

        console.log("Python button clicked!");
        axios.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=100&key=AIzaSyBWLybXWaAdV7-7tlm9aClkSPiPAdm7boA&playlistId=' +playlistId)
            .then((response) => {

                setPlaylistResponse(response.data.items);

                console.log("inside skills image");



            });

    }


    //next video of playlist

    function nextVideo(nextVideo, title, description){
        setTitle(title)
        setDescription(description)
        setCurrentvideo("https://www.youtube.com/watch?v="+nextVideo)
        // console.log(description);
    }


    return(
        <div className="bg-secon">

            <center><small className="text-black">Welcome To Distraction Free Youtube Learning Experience 👓</small>
                <h1 className="text-danger">What Do You Wanna Learn Today?</h1></center>
            <center><div className="my-2">
                        <img
                            className="pointer skill-img mx-1"
                            style={{width: "80px"}}
                            src={PythonImg}
                            onClick={() => {submitSkillButton('python')}} />

                        <img
                        className="pointer skill-img mx-1"
                        style={{width: "80px"}}
                        src={ReactImg}
                        onClick={() => {submitSkillButton('reactjs')}}
                        />
                        <img
                        className="pointer skill-img mx-1"
                        style={{width: "80px"}}
                        src={ReactNativeImg}
                        onClick={() => {submitSkillButton('reactnative')}}
                        />
                        <img
                        className="pointer skill-img mx-1"
                        style={{width: "80px"}}
                        src={GraphQLImg}
                        onClick={() => {submitSkillButton('graphql')}}
                        />
                        <img
                        className="pointer skill-img mx-1"
                        style={{width: "80px"}}
                        src={JSImg}
                        onClick={() => {submitSkillButton('javascript')}}
                        />
                        <img
                        className="pointer skill-img mx-1"
                        style={{width: "80px"}}
                        src={NodeImg}
                        onClick={() => {submitSkillButton('nodejs')}}
                        />
                        <img
                        className="pointer skill-img mx-1"
                        style={{width: "80px"}}
                        src={DenoImg}
                        onClick={() => {submitSkillButton('deno')}}
                        />
                        <img
                        className="pointer skill-img mx-1"
                        style={{width: "80px"}}
                        src={TSImg}
                        onClick={() => {submitSkillButton('typescript')}}
                        />
                        <img
                        className="pointer skill-img mx-1"
                        style={{width: "80px"}}
                        src={DockerImg}
                        onClick={() => {submitSkillButton('docker')}}
                        />

                    </div>
                    <h3>OR</h3>
                    </center>

            <center>
                <div className="box" style={{textAign: "center"}} >
                    <div className="my-2">
                        <input type="text"
                        placeholder="Machine Learning..."
                        value = {data}        
                        onChange={getData}
                        required

                        />
                    </div>
                    <div className="my-2">
                        <button className="btn-danger"
                        disabled = {btnState}
                        onClick={() => {submitData()}}
                        >Go!</button>
                    </div>
                </div>
            </center>

            {/* main player  */}{
            searchBoxFlag ?


                    <div className="mainPlayer row">
                        <h1 style={{textAlign: "center"}}>Search Results For: {data}</h1>
                <div className="col-md-8 py-4 embed-responsive embed-responsive-4by3" style={{backgroundColor: "#fcfcfc"}}>

                <center>
                    <ReactPlayer
                    className="align-self-baseline"
                    url={currentVideo}
                    controls
                    light
                    width="100%"
                    onEnded={() => {alert("video ended!")}}
                    />


                    {/* <button onClick={() => {nextVideo()}}>Next Video</button> */}
                    <h3>{title}</h3>
                    <hr />
                    <pre>{description}</pre>
                </center>
                </div>


                <div className="col-md-4 overflow-auto" style={{height: "500px"}}>
                    {playlistResponse.length}

                    {playlistResponse.map(function(d, idx){
                        return (<div className="playlistBox" key={idx}>
                                    {}
                                <div className="d-flex flex-row pointer" onClick={() => nextVideo(d.id.videoId, d.snippet.title, d.snippet.description)}>
                                    <div className="p-2">
                                        <img src={d.snippet.thumbnails.default.url} className="media-object" />
                                    </div>
                                    <div className="p-2">
                                        <p className="display media-heading">{idx+1}) {d.snippet.title}</p>

                                    </div>
                                </div>
                                <hr />

                        </div>)
                    })}

                </div>

            </div>


                    :
            <div className="mainPlayer row">

                <div className="col-md-8 py-4 embed-responsive embed-responsive-4by3" style={{backgroundColor: "#fcfcfc"}}>
                {/* // Render a YouTube video player */}
                <h3 style={{textAlign: "center"}}>{skills}</h3>

                <center>
                    <ReactPlayer
                    className="align-self-baseline"
                    url={currentVideo}
                    controls
                    width="100%"
                    onEnded={() => {alert("Congratulations! You Have Completed This Module! Keep Learning and growing 👍")}}
                    />


                    {/* <button onClick={() => {nextVideo()}}>Next Video</button> */}
                    <h3>{title}</h3>
                    <hr />
                    <pre>{description}</pre>
                </center>
                </div>


                <div className="col-md-4 overflow-auto" style={{height: "500px"}}>
                    <p className="bg-danger" style={{textAlign: "center"}}>Total items: {playlistResponse.length}</p>

                    {playlistResponse.map(function(d, idx){
                        return (<div className="playlistBox" key={idx}>
                                    {}
                                <div className="d-flex flex-row pointer" onClick={() => nextVideo(d.snippet.resourceId.videoId, d.snippet.title, d.snippet.description)}>
                                    <div className="p-2">
                                        <img src={d.snippet.thumbnails.default.url} className="media-object" />
                                    </div>
                                    <div className="p-2">
                                        <p className="display media-heading">{idx+1}) {d.snippet.title}</p>
                                        {/* <p>{d.snippet.description}</p> */}
                                    </div>
                                </div>
                                <hr />

                        </div>)
                    })}

                </div>

            </div>
            }






        </div>
    )
  };

If you made till here, I am glad to inform you that we have covered the most of the part and left with only footer.js which only contain meta data about our app and author credits and isn't necessary for the operation of our APP, you can replace footer by your own.

Here we go

3. Footer.js:

I first decided not to include footer on this article but I kept it for reference point of view.

export default function Footer(){

return(
<div>
      <div class="container">
            <div class="m-4">
                  <p>Platform Developed By Salman Qureshi! This is beta version and other courses will be updated soon!</p>
                  <h3>Features:</h3>
                  <ol>
                        <li>Distraction Free Youtube Learning</li>
                        <li>2x page optimization speed</li>
                        <li>Lite Version</li>
                        <li>Focused Learning</li>
                  </ol>
                  <h3>Future Goals:</h3>
                  <ol>
                        <li>User Base Personalization(Statefull)-will need your cookies :)</li>
                        <li>Dedicated Account for each user</li>
                        <li>Course Completion Tracking</li>
                        <li>....many more ❤ (P.S: I am out of ideas if you have one, inform me 😊</li>
                  </ol>
            </div>

      </div>
      <center>Source Code: <a href="https://github.com/hotheadhacker/youtube-player" target="_BLANK">hotheadhacker/youtube-player</a></center>
<footer className="footer mt-2 bg-danger">
       <h3>Designed by 😆 <a href="https://isalman.xyz">Salman Qureshi</a></h3>
       <p>
       <a href="https://github.com/hotheadhacker" target="_BLANK"><i className="fab fa-github fa-2x mx-2 github"></i></a>
       <a href="https://twitter.com/salmanually" target="_BLANK"><i className="fab fa-twitter fa-2x mx-2 twitter"></i></a>
       <a href="https://instagram.com/salmanually" target="_BLANK"><i className="fab fa-instagram fa-2x mx-2 instagram"></i></a>
       <a href="https://isalman.dev" target="_BLANK"><i className="fas fa-mouse-pointer fa-2x mx-2 website"></i></a>
       <a href="mailto:isalmanqureshi@gmail.com" target="_BLANK"><i className="fas fa-envelope fa-2x mx-2 email"></i></a>
       <a href="https://blog.isalman.xyz" target="_BLANK"><i className="fas fa-blog fa-2x mx-2 blog"></i></a>
       </p>
      </footer></div>
)
}

We have deployed our app on Netlify:

Here is the live preview of our app 👉 YouTube APP

There are some files and project structure I have not discussed, for that I will leave my full GitHub repo containg all of the code required for this project below👇👇👇.

This tutorial is based on python programming language and I will be discussing the tools that can we use to make your on website analyser.

1) built-with: this is the tool that we are going to use to receive information about tech stacks of the website and it's just when being called IT returns the object containing all information about the website it's little bit slow but can be optimised according to the taste.

2) fastAPI: we use this to serve our application.

3) ReactJS: this app is for those who just wanna go ahead and create their own front and so that where users can submit the website of which divine get details and on receiving can get the details about the website.

This is how our 'main.py looks like: The value of our API

from fastapi import FastAPI
import builtwith
from fastapi.middleware.cors import CORSMiddleware
from fastapi.encoders import jsonable_encoder
from fastapi.responses import JSONResponse
from pydantic import BaseModel
import json

app = FastAPI()

# CORS origin fix
''' For specific domains '''
# origins = [
#     "http://localhost.tiangolo.com",
#     "https://localhost.tiangolo.com",
#     "http://localhost",
#     "http://localhost:8080",
#     "http://localhost:3000v"
# ]

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# How to page
@app.get("/")
async def root():
    return {"message": "Hello World"}

# Main Handler For API
@app.get("/get/{url}")
async def root(url: str):
    newUrl = 'http://' + url
    print(newUrl)

    data = builtwith.builtwith(newUrl)

    return JSONResponse(content=builtwith.builtwith(newUrl))
    # return {"message": "Hello World"}

For those who wanted see the full source code and the source code of a friend and that is made using react JS. Here is the GitHub repository.

You can test the API here

Integrate API to your own application by calling this node:

https://glacial-taiga-01626.herokuapp.com/get/<exaple.com>

Front-End hosted on netlify

Click Here

Steps:

1. First of all I used Python to configure web scrappers (beautifulsoup4) and inspected respected elements of Greater Kashmir's website and mapped the elements of web page DOM today web scraper objects and classes.

2. Now I have to configure the server for that I created an API based on python using fastAPI framework, and made the endpoints working for fetching and receiving the data. I created two endpoints first one was listing latest posts as the homepage and the second end point was driving the single article view based on the article that the user will access or requested.

3. After the development was over and testing was done I deployed this web scraping service on the online host where my Python application and API got served and is in the live mode and can be easily accessed by anyone. the UI is not good because the core concept behind this is that it will just display the headline of the article and the feature image and after that the whole description of their article without any ads and without any distractions.

The main aim behind this idea was the Kindle devices and other low memory devices needs distraction free experience while reading the article so I created this one just said the example that any webpage can be modified whatever the way we want.

Detailed Tweet:

ScrapperAPI is live and deployed on: https://p6h4oq.deta.dev/

The source code is under private repository on my GitHub, and will be updated here once I will make it public.

The alternate solutions: Wordpress supports rebuild JSON API called as wp-api WP rest API, one can use that approach on any wordpress enable sites to get the details of any required article are any data that is uploaded on the wordpress website without developing his own web server and the hosting all this he need is to have good defined friend and it could be react JS, angular, vue etc.

Disclaimer

This project was only for the educational purposes and will not violate any DMCA or EULA. For reasons you want to put down this project kindly send the query on 📧 me@isalman.xyz

In this post I will only discuss about Trape

But before beginning I would like to acknowledge that the mentioned resources in this blog post only for educational purposes and I do not take any responsibility whatsoever!

I know many of you have personally contacted me to explain there working and how do we implement them, and most importantly what are the best tools available. In most cases I was able to answer the queries but as these queries were in repeated manner, so I decided to write this blog post for the future references. I know this blog post will not include each of the OSINT, but here I will give the generalized idea and few popular tools that are mostly used and research gathering pre reconnaissance.

Lets Get Started 🏃

TRAPE:

Before working with Trape I would like to tell you guys that trip works on python 2.7 and won't work on Python 3 and is not compatible with python3 modules. So that means you have to work with legacy version of python.

Trape is an OSINT analysis and research tool, which allows people to track and execute intelligent social engineering attacks in real time. This is the most frequently used open source intelligence tool. Is very popular and the features it includes are:

LOCATOR OPTIMIZATION: Trace the path between you and the target you're tracking. Each time you make a move, the path will be updated, the location of the target is obtained silently through a bypass made in the browsers, allowing you to skip the location request on the victim's side, and at the same time maintain a precision of 99% in the locator.

APPROACH: When you're close to the target, Trape will tell you.

REST API: Generates an API (random or custom), and through this you can control and monitor other Web sites on the Internet remotely, getting the traffic of all visitors.

PROCESS HOOKS: Manages social engineering attacks or processes in the target's browser.

--- SEVERAL: You can issue a phishing attack of any domain or service in real time as well as send malicious files to compromise the device of a target.

--- INJECT JS: You keep the JavaScript code running free in real time, so you can manage the execution of a keylogger or your own custom functions in JS which will be reflected in the target's browser.

--- SPEECH: A process of audio creation is maintained which is played in the browser of the target, by means of this you can execute personalized messages in different voices with languages in Spanish and English.

PUBLIC NETWORK TUNNEL: Trape has its own API that is linked to ngrok.com to allow the automatic management of public network tunnels; So you can publish the content of your trape server which is executed locally to the Internet, to manage hooks or public attacks.

CLICK ATTACK TO GET CREDENTIALS: Automatically obtains the target credentials, recognizing your connection availability on a social network or Internet service.

NETWORK: You can get information about the user's network.

--- SPEED: Viewing the target's network speed. (Ping, download, upload, type connection)

--- HOSTS OR DEVICES: Here you can get a scan of all the devices that are connected in the target network automatically.

PROFILE: Brief summary of the target's behavior and important additional information about your device.

--- GPU --- ENERGY

30-session recognition

Session recognition is one of trape most interesting attractions, since you as a researcher can know remotely what service the target is connected to.

How to use Trape:

First unload the tool.

git clone https://github.com/jofpin/trape.git cd trape python2 trape.py -h

If it does not work, try to install all the libraries that are located in the file requirements.txt

python2 -m pip install -r requirements.txt Example of execution

Example:

python2 trape.py --url http://example.com --port 8080

If you face some problems installing the tool, it is probably due to Python versions conflicts, you should run a Python 2.7 environment :

pip install virtualenv virtualenv -p /usr/bin/python2.7 Vpy27 source Vpy27/bin/activate pip2 install -r requirements.txt python2 trape.py -h

HELP AND OPTIONS

user:~$ python2 trape.py --help usage: python trape.py -u <> -p <> [-h] [-v] [-u URL] [-p PORT] [-ak ACCESSKEY] [-l LOCAL] [--update] [-n] [-ic INJC] optional arguments: -h, --help show this help message and exit -v, --version show program's version number and exit -u URL, --url URL Put the web page url to clone -p PORT, --port PORT Insert your port -ak ACCESSKEY, --accesskey ACCESSKEY Insert your custom key access -l LOCAL, --local LOCAL Insert your home file -n, --ngrok Insert your ngrok Authtoken -ic INJC, --injectcode INJC Insert your custom REST API path -ud UPDATE, --update UPDATE Update trape to the latest version

--url In this option you add the URL you want to clone, which works as a decoy.

--port Here you insert the port, where you are going to run the trape server.

--accesskey You enter a custom key for the trape panel, if you do not insert it will generate an automatic key.

--injectcode trape contains a REST API to play anywhere, using this option you can customize the name of the file to include, if it does not, generates a random name allusive to a token.

--local Using this option you can call a local HTML file, this is the replacement of the --url option made to run a local lure in trape.

--ngrok In this option you can enter a token, to run at the time of a process. This would replace the token saved in configurations.

--version You can see the version number of trape.

--update Option used to upgrade to the latest version of trape.

--help It is used to see all the above options, from the executable.

At last I would like to share the tutorial that's available on YouTube and I find it very usefull. In this tutorial the author has shown execution on parrot operating system but you need not follow that.

Gif source: Tennor

Steps:

You can access your GitHub home/feed of your GitHub account as an RSS feed?

Simply following:

https://github. com/<your_username>.private.atom?token=<token>

XML Response:

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" xml:lang="en-US">
  <id>tag:github.com,2008:/hotheadhacker</id>
  <link type="text/html" rel="alternate" href="https://github.com/(user_name)"/>
  <link type="application/atom+xml" rel="self" href="https://github.com/(user_name).private.atom?token=(some token)"/>
  <title>Private Feed for (User_name)</title>
  <updated>2021-01-24T14:12:40Z</updated>
  <entry>
    <id>tag:github.com,2008:WatchEvent/14927097760</id>
    <published>2021-01-24T14:12:40Z</published>
    <updated>2021-01-24T14:12:40Z</updated>

Did you knew about this? Tell us write in replies!

GitHub Official Docs

Gif from Tenor

• Let's take a recent example how signal app gone so popular over WhatsApp just because its open source on the other hand WhatsApp is not. Slowly people are realising about their privacy and how their data is being used processed against them.

The drastic increment in user base of signal has blown away the old monopoly closed source companies that pray on your personal data and steal the ad preferences information.

I am computer science engineer with 6 years of experience in web development I have never seen anything as famous as open source. Open sources is the future of technologies and workflows.

Few reasons why open source is game changer:

1) Collaborative Work:

☞ Collaborative work is more productive than any other work experience studies have shown that one developers that collaborate work they tend to have more optimised and more creative experience, while programming a particular task.

2) Open-Source:

☞ Of course being open source one can watch, analyse, rewrite, reproduce and add some modifications in such a way that it can be more useful then before. isn't it great?

3) Community:

☞ You know what makes more special about a particular technology and what makes it last so long? It's the community it has. Python, JavaScript, and another languages, they are so much dominant in their field only just because their community and it has been accepted by their original developers or by original creators of that particular technology, there are amazing communities on open source that you always provide a positive juster no matter how big or small the project is.

4) Transparency:

☞ No matter where you will find your source and no matter how is deployed you will always receive authentic reliable and the accurate results from the origin and from the official source.

5) Privacy and Security:

☞ Open-Source softwares provide more privacy than any other closed-source s/w. It is because you know actually what's happening with you information that you share and how secure it is. I'm not sharing you that open source technologies are always more secure then close source but you can always check if you know the code you know your information is being handled properly or not.

I hope this article has helped you in some way if you have any other suggestions or views please feel free to write in comment box thanks for reading.

This is the original GitHub Repository of mine.

This project is live @ Live/Demo

Example WHOIS Data of facebook.com

Usage:

Make all of your api calls to https://whois-api-server.herokuapp.com/<domain_name>

Response:

The server will respond with a json data

{"address":"1601 Willow Rd","city":"Menlo Park","country":"US","creation_date":"Sat, 29 Mar 1997 05:00:00 GMT","dnssec":"unsigned","domain_name":"FACEBOOK.COM","emails":["abusecomplaints@registrarsafe.com","domain@fb.com"],"expiration_date":"Thu, 30 Mar 2028 04:00:00 GMT","name":"Domain Admin","name_servers":["A.NS.FACEBOOK.COM","B.NS.FACEBOOK.COM","C.NS.FACEBOOK.COM","D.NS.FACEBOOK.COM"],"org":"Facebook, Inc.","referral_url":null,"registrar":"RegistrarSafe, LLC","state":"CA","status":["clientDeleteProhibited https://icann.org/epp#clientDeleteProhibited","clientTransferProhibited https://icann.org/epp#clientTransferProhibited","clientUpdateProhibited https://icann.org/epp#clientUpdateProhibited","serverDeleteProhibited https://icann.org/epp#serverDeleteProhibited","serverTransferProhibited https://icann.org/epp#serverTransferProhibited","serverUpdateProhibited https://icann.org/epp#serverUpdateProhibited","clientDeleteProhibited https://www.icann.org/epp#clientDeleteProhibited","clientTransferProhibited https://www.icann.org/epp#clientTransferProhibited","serverDeleteProhibited https://www.icann.org/epp#serverDeleteProhibited","serverTransferProhibited https://www.icann.org/epp#serverTransferProhibited","clientUpdateProhibited https://www.icann.org/epp#clientUpdateProhibited","serverUpdateProhibited https://www.icann.org/epp#serverUpdateProhibited"],"updated_date":"Tue, 10 Mar 2020 18:53:59 GMT","whois_server":"whois.registrarsafe.com","zipcode":"94025"}

This project is written in Python and deployed on Heroku servers

Hope This helps you 👍. Let me know in comment section what do you think about this, or any upgrades.

Well coming back to Facebook , I am sci-fan & believe “With Great Power Comes Greater Responsibility” but having so much controversies within Facebook on security aspect — Well they come with nothing A funny story happened recently when they prompt me with this funny notification. Image for post Funny yeah, But truth. Well I can’t Believe They Did it? Who does that on production system? The Fact Behind This Glitch Facebook stored millions of passwords in plain text format, change your FB password now Facebook said on Thursday it has resolved a glitch that exposed passwords of millions of users stored in readable format within its internal systems to its employees. The passwords were accessible to as many as 20,000 Facebook employees and dated back as early as 2012, cyber security blog KrebsOnSecurity, which first reported said in its report. “These passwords were never visible to anyone outside of Facebook and we have found no evidence to date that anyone internally abused or improperly accessed them,” the company said. KrebsOnSecurity, citing a senior Facebook employee, said the an internal investigation by the company so far indicates that between 200 million and 600 million Facebook users may have had their account passwords stored in plain text. Facebook said the issue was discovered in January as part of a routine security review. Majority of the affected were users of Facebook Lite, a version of the social media app largely used by people in regions with lower connectivity. The social network is also probing the causes of a series of security failures, in which employees built applications that logged unencrypted password data for Facebook users, the report said.”We estimate that we will notify hundreds of millions of Facebook Lite users, tens of millions of other Facebook users, and tens of thousands of Instagram users,” the company said. Via — Reuters For Non Technical People. It takes only few line of code to convert a plan text into cypher text. Also it’s execution won’t take much processing time for basic encryption technique like MD5.