Forem: Mazahir

I Built a Chrome Extension with Svelte and Firebase!!🔥🔥

Mazahir — Mon, 17 Jun 2024 15:46:14 +0000

Hey everyone, hope you're doing well!

Recently, I discovered a site called Watchparty, which allows you to watch videos in sync with your friends and family. It's a fantastic concept, but I encountered a few issues: there were no options for syncing subtitles, and the user interface felt a bit outdated (no offense intended). Nonetheless, the site works wonders and is definitely worth checking out.

While exploring similar sites, I came across Metastream, which has a modern interface and supports subtitles with third-party Chrome extensions. However, I faced challenges there too—some videos didn't work, and the platform hadn't been updated in six years. So, I decided to tackle these issues myself.

Introducing Sync Buddy

Sync Buddy is a Chrome extension designed to let you watch any video from any website in sync with others. It also features a chat functionality that can be toggled by pressing Shift + Enter.
It can support any website as long it has a video tag in it. it syncs in real time and the chat box is nonintrusive as well.

While this isn't a tutorial, I'd like to provide an overview of the components involved in developing my Chrome extension:

Components:

Popup (Svelte): The main UI of the extension, accessible by clicking the extension icon in your browser.
content.ts: Injected script that adds listeners and updates the DOM on websites.
background.ts: Web worker managing logic and authentication.
manifest.js: Configuration file for the extension.

That's all, Yeah it's pretty easy to make an extension.

I made this project over the weekend and learned a lot about creating browser extensions. It's important to note that this is a personal/pet project, so there may be some bugs.

Oh, I forgot to tell you, it's pretty simple to use as well. Install the extension, then open a website with a video, click on the icon, and enter a room name. Share the room name and ask your friends and family to join using the same name (they should be on the same website as well). Voila! You're done. Enjoy binge-watching!

You can learn how to install and get started using the extension from the GitHub repository's README.

You can find the code on GitHub under the MIT License.

Credits:

I would like to give credit to Watchparty and Metastream for inspiring this project and providing valuable insights into synchronized video watching.

Additionally, this project is based on svelte-chrome-extension-template by taishi55. Thank you for the foundation!

Thank you so much for checking it out! Feel free to ask any questions, share suggestions, or provide feedback. Your input is valuable!😁😁

Just released an update of my app.

Mazahir — Fri, 12 Aug 2022 12:33:03 +0000

Hey guys, I hope you are all doing great.

I have some great news, I have just released a update for my app Koduko: A habit tracker.

To know more about the app, you can check out the previous post
here.

App link : here
Source Code : here

I do wish to release it on F-droid, if anyone could help me out please let me know.

Feedback and feature request will be appreciated.
Thank you 😁.

I made yet another habit tracker in flutter.

Mazahir — Tue, 02 Aug 2022 12:47:25 +0000

Hey guys!
I have been learning and exploring flutter for about a month, And I made an app from it.

Koduko

Its an Habit tracker made using flutter.

Yes, its a weird name.

What does it do?

Well, it keeps track of your daily habits like GYM or working on a hackathon project. it reminds you and also shows stats, so that you can stay motivated.

is it any different from other habit trackers?

To be honest, No. It is not that different, it may have unique design or some extra feature but overall its just another habit tracker. Also as it is first flutter project, Can't complain😎.

Features

it has notification support.
it has a Material 3 UI design.
has no ads.
dark mode 🌑.

Thank You

I hope you enjoyed my post. You can check out the project and tell me how you feel about it. and also found a bug? Raise an issue😁.

See you around👋.

I made a Next Js Project, Which helps you remember friends birthdays. 😁

Mazahir — Sun, 20 Feb 2022 15:17:53 +0000

Hey guys, So I have been working on this Next Js project for 20 days now.

SLAX

Yup, the name of the project is Slax 😎. This website will make your life easy, just add all the birthdays or any date which repeats every year and forget about it. You will receive an email on all your devices.

You can check out the live demo here, or the GitHub repo.

History

I would like to tell you why I created this project, I wanted to step into web development and and the first thing which comes on my mind is Next Js. it was popular and Full-Stack kinda thing.
I decided to learn it, and I like to learn from creating projects. My initial idea for the project was to create a event management app but that got to complex. so I Settled for a simple website named slax which just does one thing reminds you on your friends and family special day.

In the process I learnt a lot about Next js, mongo db, Next Auth, SMTP and con jobs.😊

The Ending

I ended up buying a domain for it as well😉, Anyways you can fork the project learn, add more features, make your own version out of it. Possibilities are endless.

Thank You
see you around.👋

Make your Blog into a App

Mazahir — Tue, 19 Oct 2021 10:00:13 +0000

Hey there, I hope you all are doing great. Recently i have been working on a Expo/Django Project which turns your blog into a app.

Really?

Yes, you can make an app given that your website has RSS support and you are ready to do some set-up process.
(you can turn your dev.to/[username] into an app).

How does it work?

Basically, it's an app that takes your website's RSS feed and displays it in a nice app UI.
For my fellow dev's out there, I have used Firebase, Django, expo and few more technology. You can check out the code in the github repo.

Tell me more...

Ever wanted to reach out to your readers and notify about some updates. if yes, then this app has got you covered, it has Push Notification support.
Want to know how many users log-in and out of your app. we have got you covered, Custom Analytics(basic).

Note: You can add your own Analytics service provider, if
you know how to.

App has Guest login, save for later, and much more.

Gotchas

Currently there is no ad's in the app, So there is no revenue generated from this app.
if you are an expo dev then you can add your own ad service.(if you want to)

is it Free?

Yep, its an open-source project.
At first everything that i have used is free but if u want to scale it up or your readers go crazy with the app. then you might have to pay (not to me but to Heroku or Firebase).

Where can i find it?

You can learn more about the app and its features here.

Thank you

Thanks for reading. hope you like it. Peace Out

How to create Animated FlatList in React-Native

Mazahir — Fri, 03 Sep 2021 14:53:05 +0000

Hey guys, I am Mazahir.
Today we are gonna learn how to use Animated API with FlatList to create
beautiful animations.

Requirements

Latest version of expo and react-native installed
Basic of expo with typescript
Nothing else, Let's get started

Preview

Before we get our hands dirty, let's see what are we trying to make.

Your project will end up looking like this.

Initialization

Create a new expo project

expo init -t expo-template-blank-typescript

After Creating a new project, We need some data to display. I am using faker to create fake data but you can use an API or Hard Coded data as well.

How to create fake data using faker

npm i faker
Paste this code snippet. ```

// Inside App.tsx
const fake : string[] = new Array(20).fill('test');
const data: data[] = fake.map(() => ({
name: faker.name.findName(),
job_title: faker.name.jobTitle(),
email: faker.internet.email(),
key: faker.random.alphaNumeric(10),
avatar: faker.image.avatar(),
}));

 * I am using **react-native-paper** for styling. Its not  necessary for you to install, but I highly recommend it.

`npm i react-native-paper`

## FlatList & Animations

* To create beautiful animations like I said, We first need a FlatList. Create a folder named components and add a file named list.tsx.


* Add the required import statements.

// inside components/list.tsx
import * as React from "react";
import { Text, View, StyleSheet, Animated, Dimensions } from "react-native";
import { Avatar, Surface } from "react-native-paper";

const { height } = Dimensions.get("screen");

_I am getting the height of the screen as well, which will be useful later_

* Now, we will create a basic function and a normal flatlist

interface Data {
name: string;
email: string;
job_title: string;
key: string;
avatar: string;
}

export default function List({ data }: { data: Data[] }) {
return (

data={data}
keyExtractor={(item) => item.key}
renderItem={({ item, index }) => {

      return (
        <Animated.View>
          <Surface style={styles.surface}>
            <View style={{ flex: 0.3, justifyContent: "center" }}>
              <Avatar.Image size={42} source={{ uri: item.avatar }} />
            </View>
            <View
              style={{
                flex: 0.7,
                flexDirection: "column",
                justifyContent: "center",
              }}
            >
              <Text style={{ fontSize: 22, fontWeight: "bold" }}>
                {item.name}
              </Text>
              <Text style={{ fontSize: 14 }}>{item.job_title}</Text>
            </View>
          </Surface>
        </Animated.View>
      );
    }}
  />
</View>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
},
surface: {
height: height * 0.1,
marginTop: 15,
padding: 8,
marginHorizontal: 10,
borderRadius: 8,
flexDirection: "row",
},
});

_Even if i add Animated.FlatList or Animated.View, it will work as normal View and FlatList._

### Animations

* Inside list.tsx, Create a ref for an animated value
`const scrollY = React.useRef(new Animated.Value(0)).current;`
_This will store the scroll offset of the Flatlist._

* To update the *scrollY*.

onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: scrollY } } }],
{ useNativeDriver: true }
)}

_Here we assign y offset of the list to our ref, useNativeDriver is true, that's something we don't need to worry about right now_

* if you save the changes, everything should work fine but there are no animations.

 1. to animate list we need 2 things *input range* and *output range*
 2. You can think of input range and output range as key frames if u know what that means.
 3. To define it input range is a set of values at which you want to animate or change a value.
 4. Output range is set of values that react or change based on the input range.
 _It's okay if u did not understand it._

* Enough theory let's get some animation on the screen.
 Inside the renderItem function we will add

const inputRange = [
-1,
0,
(height * 0.1 + 15) * index,
(height * 0.1 + 15) * (index + 3),
];

height * 0.1 because that the height of the item or the view according to the style, we add 15 because of the margin.

when the content offset is at -1 or 0 we don't want any changes to the view or item, but we want to start the animation as soon as the item touches the top and the animation to end when the 3rd element( 3rd element from the current item) touches the top.

* Now to animate the opacity

const opacity = scrollY.interpolate({
inputRange,
outputRange: [1, 1, 1, 0],
});

we store the animated value in const opacity. scrollY.interpolate it takes 1 argument an object with 2 array the input range and the outputrange.

* We also need to translateX or to move the view on the x-axis. so we create interpolated value.

const Offset = scrollY.interpolate({
inputRange,
outputRange: [0, 0, 0, 500],
});


* That's it, We have all the values we need. The only thing left to do is just wire them up.

style={{
transform: [{ translateX: Offset }],
opacity: opacity,
}}
>

if save the changes, You should have working animations. if you got an error or the code does not work then you can check it with the my completed code [here](https://github.com/Mazahir26/react-native-animated-flatlist)

* You can play around with the input range and output range
and get different results

## Conclusion
Animation in react native is pretty simple if you know what you are doing.

You can find the completed code  [here](https://github.com/Mazahir26/react-native-animated-flatlist)

I hope you enjoyed and learned something out of this.
Any suggestions or feedback would be awesome. :)

Thank you.