Hikari Devlog #19

Hello everyone, welcome to Devlog #19 of Hikari! (ﾉ◕ヮ◕)ﾉ*:･ﾟ

Streaming Links

Talking about the updates for this devlog, I have added the streaming links where you can watch the animes.

Currently, I have added:

• Crunchyroll
• Netflix
• AnimeSuge (ㅅ´ ˘ `)

How Does the Search Work?

So, talking about how it searches the anime…

First of all, this applies to Crunchyroll and Netflix only, because AnimeSuge isss… umm… (ó﹏ò｡) not legit.

But hey, it’s just for learning purposes, okay!

So, for Crunchyroll and Netflix, the search works by checking the AniList API to see if a streaming link for that particular anime is available or not.

If a Direct Link Is Not Available

If the direct streaming link is not available in the API, then it will redirect you to that particular streaming platform by searching for the anime.

This also applies to AnimeSuge, and actually it always apply to AnimeSuge as the API is never gonna have streaming link of the site for sure(ᵕ—ᴗ—)

So, instead of sending you to a random page, it will search for the exact name of the anime on that platform and show you the result.

For example, let’s say there is an anime called Anime A.

If the streaming link for Anime A is not available in the API, then when you click on the streaming link, Hikari will search for Anime A on the streaming platform and redirect you to the search result page.

Scrollbar Design

I have also added a slight design to the scrollbar.

I didn’t want to remove the scrollbar completely, because I thought people might actually want to scroll through and read the information.

So instead of removing it, I just gave it a little design to make it look a bit better than the plain default scrollbar.

It’s a small change, but I wanted to mention it since I made some changes here as well. (￣▽￣)ゞ

That’s It!

And yeah, that’s it for this devlog!

If you have any questions, please do tell me and let me know in the comments.

As always, thank you so much for reading, and have a very nice day! ✨

(ﾉ´ヮ`)ﾉ*:･ﾟ✧

Hikari Devlog #18

Hello everyone, welcome to Devlog #18 of Hikari! (ﾉ◕ヮ◕)ﾉ*:･ﾟ

Movie Trailer

I just wanted to give a quick update on the Movie section.

So, I finally added a trailer feature to the Movie section as well!

The trailer comes from the TMDB API only, as I could not find any trailer data on OMDB API.

I mean, I tried searching, but I didn’t find any trailer data on OMDB, so for now, I’m using the trailer data provided by TMDB.

I’ll add a screen recording of the movie trailer in action below.
[Sorry , for the lag, my laptop is kinda weak and lags even more with screen recording on]

That’s It!

Yeah, that’s it for this devlog!

Thank you so much! (≧▽≦)

And if there is any question, then please do tell me in the comments. I’ll try my best to explain it there as well.

Thank you so much for reading, and have a very nice day!

(ﾉ´ヮ`)ﾉ*:･ﾟ

Hikari Devlog #17

Hello everyone, welcome to Devlog #17 of Hikari! (ﾉ◕ヮ◕)ﾉ*:･ﾟ

OMDB as TMDB Fallback

The first update I would say is that I have added the OMDB API as the fallback for the TMDB API.

And yeah, obviously, I use the free version, and when I was getting the API key, it told me that it can handle around 1,000 requests per day.

And…, I think that should be enough for a personal project like this.

And on top of that, it’s only being used as a fallback.

First, the requests will be handled by TMDB, and if that fails, then only it will come to OMDb.

So, 1,000 requests per day is already more than enough for a personal project like this(i guess). (￣▽￣)ゞ

Movie Genre Filters

Talking about the next update, I have also added the genre filters for movies.

I will add a screenrecording showing it in action, I’ll attach it below.

Trailer Feature for Manga

And I have also added a trailer feature for manga!

Yeah, even manga have trailer features available through the AniList API, so I added it there as well. (≧▽≦)

That’s It!

And yeah, that’s it for this devlog!

If you have any questions or want me to explain anything again, then please feel free to leave a comment.

I will try my best to explain it there as well.

And as always, thank you so much for reading, and have a very nice day! ✨

(ﾉ´ヮ`)ﾉ*:･ﾟ

Asobi Devlog #17

Hello everyone, welcome to Devlog #17 of Asobi! (ﾉ◕ヮ◕)ﾉ*:･ﾟ

Clicker Game Update

Okay, umm.. I’m writing this devlog to update you about the The Clicker game of Asobi.

So, I have added a basic CSS design to the game.

I also tried a couple of other designs as well. . But decided to go with this design . I will add a screenshot below.

Currently, I have this one, but I’m still not sure what I’m going to use.

I’m still experimenting with the design, so if I change anything, I’ll let you all know in the next devlog. (￣▽￣)ゞ

That’s It!

And yeah, That’s all for this devlog.

If you want me to explain something, then please do tell me in the comments. I’ll try my best to explain it as well. (≧▽≦)

Thank you so much for reading, and have a very nice day!

(ﾉ´ヮ`)ﾉ*:･ﾟ✧

Hikari Devlog #16

Hello everyone, welcome to Devlog #16 of Hikari! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

TMDB Fetching Improvements

So, this time I worked on improving the fetching method of the TMDB API.
Previously the fetch returned empty or missed the fetch alot of time, but now its quite better.

I will attach a video below showing how it works. (｡•̀ᴗ-)✧

And also, I have added the OMDb API as the backup for this one.

So now, if TMDB fails, OMDb can act as a fallback. Hopefully, this will make the movie recommendation system a bit more reliable. (ง •̀_•́)ง

Watch Trailer Btn Design

In the video, you can also see a simple design of the Watch Trailer button.

I mean, it’s not exactly simple, but I thought that it looks pretty good, at least to me.

But still… I spent a lot of time checking different button designs and stuff for that.

I literally spent so much time on that single button.
(╥﹏╥), hope ya all like that too

Genre Filtering

Currently, I am working on filtering the genres of the movies.

This should make it easier to get recommendations based on the genres you want. (｡•̀ᴗ-)✧

A Little Bug…

Also, in the video, you might see that the Watch Trailer button also appeared in the Movie section.

But that’s actually a bug that I need to fix. (￣▽￣;)

Basically, when the anime has the Watch Trailer option, and then I switch to the movie section, the button keeps appearing there as well.

I still need to figure out how to solve this one. (•́ ᴖ •̀)

To show this properly, I force restarted the site in the video as well, to show that the movie doesn’t have the Watch Trailer option in that session right now.

So yeah… another little bug to deal with. (╥﹏╥)

That’s It!

So yeah, that’s it for this devlog!

If there is anything you think I didn’t explain properly, or you want me to explain something, then please do tell me in the comments.

I’ll try my best to explain it there as well. (￣▽￣)ゞ

As always, thank you so much for reading, and have a very nice day!

(ﾉ´ヮ`)ﾉ*:･ﾟ✧

Hikari Devlog #15

Hello everyone, welcome to Devlog #15 of Hikari! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Watch Trailer Feature

So, talking about the updates…

I have finally added the Watch Trailer feature! (≧▽≦)

Currently, it’s only on the Anime section.

Okay, so how it works is, if there is a trailer link available in the API, then it will play it on YouTube.

The YouTube video will be embedded within the site, which means you don’t need to go to another tab, and you will NOT be redirected to a new tab. (｡•̀ᴗ-)✧

The trailer will simply be displayed within the website itself(in the poster area), as it is embedded. [anime trailers might be limited to certain country and because of it , some of the trailers can be unavailable, depending upon where you live]

I’ll put a clip below showing working.

Watch Trailer Button

Currently, the Watch Trailer button has no design yet. I’m planning to work on that later. (￣▽￣)ゞ

To close the trailer, you just need to click the same button again.

The Watch Trailer button will change its text to Close Trailer, and you can click it to stop the trailer. (っ˘ω˘ς )

Pretty simple!

TMDB Movie API

Also, currently I’m working on improving the fetching method of the TMDB Movie API.

Right now, it picks a random ID between 1 and 500,000, but yeah… it misses a lot of times.

I mean, it was quite visible in the previous devlog video I uploaded. (╥﹏╥)

Also talking about the good luck, I just found that TMDB has a proper Discovery endpoint, which returns real and valid movies, and it has a much higher hit rate.

I mean, that’s what I found. (•̀ᴗ•́)و

But I’m still working on it, and I have not tested it yet.

If I get any updates, I’ll update you guys in the next devlog! (｡•̀ᴗ-)✧

That’s It!

Thank you so much for reading! (づ｡◕‿‿◕｡)づ

And as always, if there is any question, or you think that I didn’t explain something properly, then please do tell me in the comments.

I’ll try my best to explain that as well. (￣▽￣)ゞ

As always, thank you so much for reading, and have a very nice day!

(ﾉ´ヮ`)ﾉ*:･ﾟ✧

Hikari Devlog #14 ✨

Hello everyone, welcome to Devlog #14 of Hikari!

Visual Updates

For the updates, I have made the poster card change its size according to the poster size.

So, the card will adjust itself depending on the poster instead of having the same fixed size for every poster.

I also added a chibi on the bottom-left of the poster. I mean, why not? =)
Just as a little signature.
Just like I added in AniSuffle , though its a different chibi

Streaming Links & Backend

Currently, I am working on adding the streaming links, like adding the Watch Trailer option and stuff.

I am also working on fixing the images not being loaded for the Movie section, especially.

And after an API fails, there is no fallback right now as well, so I’m will be working on that as well.

That’s It!

Thank you so much for reading!

And if you didn’t understand something, or you think I didn’t explain something properly, then please do tell me in the comments. I’ll try to explain it there as well.

Thank you so much for reading, and have a very nice day! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Hikari Devlog #13

Hello everyone, welcome to Devlog #13 of Hikari!

Movie API

Talking about the update, I used an API called TMDB on this site.

Currently, I don’t have any fallback option for movies right now.

Visual Updates

I was also working on the card, giving it a default rectangular look.

Yeah, I’m trying to match AniSuffle, my old site, and bring some of that old style into Hikari(without looking the old code obviously).

What’s Next?

Before including more backup APIs for movies, I think I will be working on more visual changes, the auto resize is not added on the card yet, will add that first.

I’m also thinking of including streaming links, like I did before in AniSuffle.

And yeah, I guess that’s it for this devlog!

If you think anything was not explained properly, or if you want me to explain anything again, then please do tell me in the comments. I’ll try to explain it there as well.

Thank you so much for reading, and have a very nice day! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Incase you are having issue playing the video, click on the video and press SPACE BAR

Hikari Devlog #12

Hello everyone, welcome to Devlog #12 of Hikari!

Updates

So, talking about updates again, the updates are that I have added a card-like effect on the poster image.

Also , I increased the size of the Hikari logo.

I also added an animation of a sort of glow on the star beside the word Hikari. ⭐

I’ll add a video of it here below to show the current state of the site.

What’s Next?

Currently, next I’m going to work on the Movie section.

Yeah, I will mention about the API which I’ll be using for movies, in the next devlog probably, if everything goes well.

That’s It!

And if you have any questions, then please do tell me in the comments. I will try to explain there as well.

And yeah, thank you so much for reading!

As always, have a very nice day. (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Hikari Devlog #11 ✨

Hello everyone, welcome to Devlog #11 of Hikari!

Visual Updates

Talking about updates, the update is more on the visual side this time.

I have added the poster as the background — the same poster which is viewed on the card, with some blur effect.

I thought it was kind of cool and matches the old style of my site. (≧▽≦)

3D Card Effect

Currently, I am working on making the card have a 3D-like effect.

I found the source code for it on FreeFrontend.com. I will provide the link on the GitHub README, in the Credits section.

That’s It!

Yeah, that’s all for this devlog.

I mean, I’m enjoying writing these devlogs. I wrote a couple of devlogs today and I’m still enjoying it, so I’m uploading this one as well.

I thought it was good. It’s good to track the progress as well.

So,That’s it for this devlog!

If you want me to explain something, or if you think I did not explain something properly, then please do tell me in the comments. I’ll try my best to explain it again in the comments as well.

Thank you so much for reading, and have a very nice day! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Finally Shipping

Hikari Devlog #10

Hello everyone, welcome to Devlog #10 of Hikari! (｡•̀ᴗ-)✧

And so, this might be the final devlog before the first ship!

Final Touches

I have worked on the responsiveness and cleaned the code.

I also worked on making sure(cleaning) the experimental console.log things will not be displayed in the console tab of the site.

And finally, I have hosted the site!

Screenshot

I’ll add a simple screenshot of the site below:

If I make any changes later on, while my project is still waiting to be reviewed, I might add another screenshot to this devlog and update what was changed.

Site live at : https://shrestha-project-09.66ghz.com/

And if you have any questions, please do tell me in the comments. I’ll try my best to explain it there.

Thank you so much for reading, and have a nice day! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Update(after the ship for reviewers)

• Poster as Background

That’s It!

Thank you so much for reading!

And if you have any questions, please do tell me in the comments. I’ll try my best to explain it there.

Thank you so much for reading, and have a nice day! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Hikari Devlog #9

Hello everyone, welcome to Devlog #9 of Hikari! (｡•̀ᴗ-)✧

Genre Options

So, I added some glassmorphic, or honestly more blur-like effect, on the genre options.

I will add a screenshot below

What’s Next?

Yeah, I guess I will work on the responsiveness of the site next.

And I will remove the Cartoons, Movies, and Games options for now because I will be shipping it, and I will work on those topics later on.

That’s It!

Yeah, I guess that’s it.

And as always, if you have any questions, please do tell me in the comments, and I’ll try my best to explain it there.

Thank you so much for reading!
Have a nice day! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Hikari Devlog #8

Hello everyone, welcome to Devlog #8 of Hikari! (｡•̀ᴗ-)✧

Genre Filter

Talking about the updates
I worked on the genre filter and applied the filter to all four APIs .

And yeah, actually, that’s all for this update.

What’s Next? 👀

Next, I’m looking towards updating, or like, making some visual changes

Also , if everything goes right

I might ship it today. As shipping after making a big project might make people not want to read all those devlogs , so um yeah

That’s It!

Yeah, that’s it for this devlog.

And if you think that I didn’t explain something properly, or you want me to explain something more, then please do tell me in the comments. I’ll try again there.

Thank you so much for reading, and have a nice day! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Hikari Devlog #7

Hello everyone, welcome to Devlog #7 of Hikari! (｡•̀ᴗ-)✧

Manga API Fallback

Okay, so talking about the updates for this devlog, I have now finally added the API fallback chain for mangas as well.

I used:

AniList → MangaDex → Jikan → Kitsu

AniList is the primary API, then MangaDex, then Jikan, and finally Kitsu.

And it seems like both MangaDex and Jikan are down. When I used them a few months before, they were active, but I don’t wonder why they all are, like, getting down and not accepting the requests. (but still i kept them on the fallback just in case if any of them come to life =) )

What’s Next?

In the upcoming future, I am going to work on the genre filter for mangas in the same way i worked for the anime.

I was also thinking of shipping this project after completing the Anime and Manga sections.

I know it looks a bit plain right now, but I wanted to see what you all think about it. I might get some good recommendations from you guys, which I might implement.

That’s It!

Yeah, so I guess that’s it for this devlog.

If you want me to explain anything, or if you think that I did not explain something properly, then please tell me in the comments. I’ll try to explain it again.

and as always, thank you so much for reading!
and
Have a nice day! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Hikari Devlog #6

Hello everyone, welcome to Devlog #6 of Hikari! (｡•̀ᴗ-)✧

Manga Recommendation

For this devlog, the main update I would say is the starting of the Manga Recommendation section.

I have started working on the manga system now, and so far I have only implemented the AniList API for API calls for manga.

In the future, I am planning to add more APIs for manga as well:

• MangaDex
• Jikan
• Kitsu

This should give me more options for fallback APIs and hopefully make the manga recommendation system more reliable.

That’s It!

And yeah, I guess that’s it for this devlog.

This one is kinda short, ik (ᵕ—ᴗ—), but that’s the only update I have right now. So yeah, that’s all for this devlog!

And as always, if anything was unclear, then please do tell me in the comments. I’ll try to explain it there as well.

Thank you so much for reading!
Have a nice day! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Asobi Devlog #16

Hello everyone, welcome to Devlog #16 of Asobi!

So, I just started working on the new game, the Clicker.

Code Refinement

Okay, so talking about the updates, I did some code refinement.

I mean, I just cleaned up some code in the old game.

Nothing major, but I thought it would be better to clean things up before moving forward.

Clicker Game

And yeah, I have started working on the Clicker game.

Though it looks too empty right now, I have only worked on the HTML and JavaScript part for now.

I guess the main thing I worked on this time was working on the precision.

Precision Problem

I was trying different ways to count the clicks, and I was facing an issue with maintaining the precision.

I was not able to get anything more precise than two digits.

For example, something like:

3.7

After the 7, I could not really attain any significant number.

But I did search online and looked at other similar games and found out about the performance.now() in JavaScript, which I didn’t know about before.

So yeah, that was a lesson for me as well. (￣▽￣)ゞ

Now I can use it to get much more precise timing for calculating the clicks per second.

10 Seconds Challenge

For now, I have selected only 10 seconds of time in this game

During those 10 seconds, the user can click the button as many times as they can, and the game will count their CPS (Clicks Per Second).

Though this is just the beginning, I’m planning to add lots of things in the future.

Current Progress

I’ll still add a screenshot of the current progress.

Though, honestly, it will be quite empty and blank right now. =D

But yeah, this is just the beginning of the Clicker game.

That’s It!

Yeah, that’s all for this devlog!

If you think I did not explain something properly, or you want to know anything about the game, then please do tell me in the comments.

I’ll try my best to explain it there.

Thank you so much for reading!

Have a nice day! (≧▽≦)

Hikari Devlog #5

Hello everyone, welcome to Devlog #5 of Hikari! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Okay, now talking about the updates, I have added the similar randomization to AniList and Kitsu API as well.

Yeah, I mean, they work differently, but overall it is to achieve the same random result as it was applied in Jikan.

You can read Devlog #4 for more info.

Changes to Select Genre

Another change I made was on the Select Genre is how the results are displayed .

So basically, before, how it used to work was:

If you selected one genre, then it would give you the correct result.

But if you selected multiple genres, then it might:

• Give you the same anime again and again
• Give you some random unrelated anime
• Or sometimes even throw an error

But yeah, there are some changes I made to this.

Now, instead of showing some random unrelated anime or throwing an error, it would display something which comes within the range of your selected genres.

For example, if you selected:

• Action
• Comedy
• Drama

And if no such anime is found on the API which contains all three genres, then it would give you an anime containing Action or Comedy or Drama, or any combination of the selected genres.

So yeah, it will not totally disappoint you. I mean, I felt it would be better to give you something related to what you selected. (￣▽￣)ゞ rather than something totally unrelated.

Current Implementation

Currently, I have applied this system only to AniList.

I’ll apply it to Jikan and Kitsu soon

However, I am not applying it to SukiMori, as it is not giving quite the response required to display anything.

I did not comment out the whole code of SukiMori, but yeah, I am not applying the filters and stuff to SukiMori as it is throwing an error again and again, and it’s not letting me fetch any data.

I tried searching for it, but I could not really fix it.

So I asked AI, and it told me that it was refusing to connect and nothing can be done and something like that.

So yeah, I am not writing filters for that for now.

That’s It!

And yeah, that’s it for this devlog, I guess. (｡•̀ᴗ-)✧

If you have any questions, or if you think I did not explain anything properly, then please do tell me in the comments.

I’ll try to explain it there .

As always, thank you so much for reading!

and Have a very nice day! (≧▽≦)

Hikari Devlog #4

Hello everyone, welcome to Devlog #4 of Hikari! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Okay, so talking about the updates, this time I have integrated the Choose Genre filters, and other few update , i will explain it below.

Choose Genre

Now, while generating any random anime, you can choose or select genres on which you want the anime to be recommended.

And ngl but it works best when you choose one genre(ó﹏ò｡).

It might take some time, or sometimes give you some random anime, or maybe also sometimes throw an error when you choose a tones of anime

For example, if you select all the genres, then obviously it would not find any anime with all the genres, so it might either give you a random anime or worst case scenireo , might throw an erroe.

It works best when you select around one or two genres.

Fourth Fallback Option

Another update is that I have also implemented the fourth fallback option, which is Shikimori.

Though I ummm didn’t really find it much reliable(returns anime very little time(╥﹏╥)), I still kept it as a fallback option in case it might come to use.

Randomizing Jikan Pages

And the last update for this devlog is how the anime is fetched from Jikan.

So, let me tell you how it worked before.

Previously, when pulling any random anime from Jikan, it used to ask for one page.

The pages were based on the descending order of popular anime, so it would give me the 1st page containing popular anime.

Each page contains around 25 anime, and it would pull one anime randomly from that page.
and yeah , since it pulled from only that page , it would genreally revolve around those 25 popular anime.

But this time, I have randomized ** the page**.
So now, it isn’t limited to just the popular anime of 1st page.

It could be:

• Page 1 — containing the most popular anime
• Page 10
• Page 23
• Page 140
• Or basically any random page within the database

So, instead of only getting anime from the popular pages, you can now get something from pretty much anywhere within the available database.

Visual Changes

And yeah, there aren’t many visual changes this time as well.

The main visible change is that when you click the Select Genre option, it will display some checkboxes for the different genres.

That’s pretty much it for this devlog!

and yeah,
If you think I did not explain anything properly, or you want some detailed explanation, then please do comment.

I’ll try to explain it again there.

As always, thank you so much for reading!

Have a nice day! (≧▽≦)

Hikari Devlog #3

Hello everyone, welcome to Devlog #3 of Hikari! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Yeah, there are some major changes in this one.

More Anime Information

So, on the main page, I have added:

• Ratings
• Release Date
• Status
• Synopsis

The status tells you whether the anime is finished, currently ongoing or is upcoming
I have also added the synopsis, or you could say the description of the anime.

API Fallback System

And apart from that, I have also added Kitsu as a backup, after Jikan.

Okay, so let me make it clear.

I have made AniList the primary source for fetching anime.

After that, if something doesn’t work, it goes to Jikan, and after Jikan, it goes to Kitsu.

So right now, I have three APIs in total, and they all act as a backup for each other.

I am also planning to add one more API later.

(which is Shikimori)

Better Image Quality

And yeah, I also found out that there is an even better quality of image available.[So, the image displyed on this site will be even better then on AniSuffle =) ]

From now on, I’m going to use that.

Back & Forward

And finally, I have also made the Back and Forward buttons functional.

Now you should be able to go back and forward through the anime recommendations you have received.

So you can go back to the previous anime, and then come forward again to the anime you were recommended before.

That’s it for this small addition! (｡•̀ᴗ-)✧

Also , if you go to the previous anime and fetch a new one then the one which was at forward will be lost.

JavaScript Changes

I did not make many changes to the front end this time.

And by front end, I mean the layouts and stuff that are actually visible.

Most of the work this time was more on the JavaScript side, which isn’t really visible from the outside.

So, there might not be a huge visual difference, but quite a few things have changed behind the scenes.

That’s It!

So, to summarize:

Three APIs, all acting as backups for each other, better image quality, more anime information, and some changes on the JavaScript side.

Yeah, that’s it for this devlog! (｡•̀ᴗ-)✧

If you didn’t understand anything or felt i wasnt clear enough , then please do tell me in the comments, and I’ll try to explain it again.

Thank you so much for reading!

Have a nice day! (≧▽≦)