I actually lost the challenge. Totally forgot to make a design on the 28th. This should’ve been Day 6, but ah well. In this case, what I’ll simply do is push it a day extra, so the challenge would end on the 3rd of Jan instead. I will continue the challenge.

So, this is a post/comment based component. Something you’d see on any social media. It does look a little similar to Facebook but that’s just your imagination. 😋

Demo | Download | In The Making Timelapse (Coming)

I can confidently say that with this one I’ve managed to combine the use of FlexBox and Grid and go up a level! 🧙‍♂️ It’s amazing how they both can work together.




I struck off the 24 hour limit as I’ve been insanely busy during the past 2 days. But I managed to complete this design before morning (6.30am) so I won’t be considering it a “next day” yet for the sake of not ruining my own challenge. 🤔

Demo | Download | In The Making Timelapse


This design, again, was done as fast as I could with little planning as I woke up at around 4.00am and begun at 4.30~. So it took me about an hour and half to complete this one.

I used FontAwesome 5 for the icons and picked out a gradient color from



Colors used are:

  • Primary Gradient (#ff9966)
  • Secondary Gradient (#ff5e62)
  • White n’ Black

And as the last 2 designs, Open Sans was used for the type face.


So this design was done in the most possibly messy way. I screwed up a lot given I was unavailable the whole day to work on anything, then sleepily designed something as simple as I could within 2 hours.


Demo | Download | In The Making Timelapse


Given I almost dozed off between coding, I messed up the file system and lost all source files at the end. Thankfully,  I had a tab open in the browser and saved it directly from there then as messily as I could, pushed it to the repo.

There’s nothing fancy, just a static design without any responsive or feedback details given the amount of time I had available.


I got the display picture from, it belongs to @AdhamDannaway.


There’s a little effect where the background is black and it fades in once the page has loaded completely. Obviously something broke since I made a static save from the browser and it’s now not working. Don’t really want to touch it either.



Colors used are simply black and white.

There is no responsivity given the amount of time I had but it shouldn’t do bad on devices since it’s grid-made and sticks to the center.



Product modals aren’t really my strong point. This was a pretty good time to change that.

A clean, “pastel-feel”, “blue-ish” with slight touches of Material design brings light to “Display” – the refreshingly sleek product modal.


With today’s design, I managed to get a tighter grip on CSS Grids & some Flexbox. Indeed, it really makes things much easier once you’ve managed to comprehend the gist of it.


Demo | Download | In The Making Timelapse (Youtube)


The Apple Smart watch mockups were taken from Freepik. Respective used asset licenses are available here.


Colors used:

  • Good ol’ white (#fff)
  • Background (#94B4DD)
  • Primary Color (##779CF1)
  • Shades of Black

Font: Open Sans


And that conclude Day 2.


Day 1 – ‘Authenticate’ | December Web Design Challenge

And we start off Day 1 with a login design component. A rich yet simple page focused on a quick login with content available to its’ left.

I first had it use a pastel blue color which looked completely off on mobile devices, rendering the white text hard to read. I then switched to a darker contrast of that color which not only looks nice on the desktop but mobile devices as well.


Demo | Download | In The Making Timelapse (Youtube)


The logo and pattern at the bottom is taken from Respective used asset licenses are available here.



There are 3 colors used:

  • White (#fff)
  • Pastel Turquoise (#8ECCC8)
  • Nearly Black (#4C4C4C)

Font: Montserrat


It took more more than the average time to make this one thanks to the learning curve placed by CSS Grids. I got hang of the column and row components so far since there was nothing too complex done.


This concludes Day 1.


10 Days Web Design Challenge – December 2017

As I slowly find myself within the pleasant grasps of winter holidays, I come to realize that I have become rusty in web designing and there’s still yet a lot more to learn. And therefore, I challenge myself to a 10 day web design challenge.

10 days might not be a lot, but it’s a starting point.


  • Every day I must design and code something.
  • I can inspire from other designs.
  • I must do so using Flexbox & CSS Grid technologies.
  • It can be website components or pages or an entire package
  • Challenge ends on January, the 2nd; meaning I’ll be starting on the 24th of December


  • I will come to par with latest CSS technologies
  • I will have more stuff for my portfolio
  • I’ll have a clear view of my abilities and time management for projects


So, what do I have planned for tomorrow?



No idea.






Update: Unfortunately due to lack of time and unforseen circumstances, wasn’t able to complete this challenge! I leave it at Day 5 and may restart the challenge with a higher goal next time!




Jikan REST 2.0 – Developers Preview + November Update

What a basic app utilizing Jikan would require would be data on any anime or manga, then furthermore on the characters and staff members. These 4 types of data are essential to any app for the masses and Jikan can now robustly cover any app developer in those areas.



Note: There is no doc available for this endpoint as of yet, you’ll have to play by the data responses.


without further ado

It’s been a year since I started on Jikan and half a year since the REST API went up. To get this out of the way – I’m immensely excited to announce that a complete rewrite of the Jikan PHP API has been completed. Making the API more:

  • Friendly to developers for contribution
  • Cleaner responses + less bugs
  • Easier installation
  • More Robust
  • PSR-4/Autoloading


Now what’s left is the rewrite of the REST API. I’ve selected Lumen as the micro-framework to handle Jikan REST requests. And that’s currently in the works as I wrap my head around the features of this framework.

But my excitement could not be held back and I really wanted to see the new API in action – spitting out nicely formatted JSON without any malformed sorts of data. I quickly set up a new endpoint using the old REST API code – producing a developers endpoint.

And I hereby present:

You’ll notice a massive difference from the v1.1 or v1.2 REST version as this version of the API is equipped with the latest Jikan PHP commits. Now let me show you the possible type of requests.


  4. – Episode pages are now paginated if there’s more than a 100 episodes, a key named episode_last_page will tell you how many pages the episodes page is paginated into.


With these core prospects for the API being stable and robust, it’s time to focus on implementing more endpoints for scraping more data out of an anime, or the most required function – the search endpoint.


the success of this project

I’ve been contacted by a plethora number of developers regarding the usage/feedback/etc of this project. Everyone’s happy – I’m happy. There’s a working, easy to use API that can tell you anything about your favorite Japanese cartoon and I think that’s what matters the most.

Currently there’s a popular and active android App, namely AnYme that’s utilizing Jikan for their data, you can check them out here:

The usage of Jikan has been very successful – there’s a thousand of requests spanned across of hundreds of clients daily. Here’s a small chart on the usage since we hit off back in May.

jikan stats chart


what’s in store next?

The next foremost thing that is going to be accomplished is going to be REST v2.0. This will be based on the Lumen framework and a much faster server – thanks to a friend of mine. The base endpoint would be, instead of what we’ve now.

After that – I’ll see what’s next on the agenda.


oh by the way

Did I mention that Jikan is now available on You can install it as a dependency in your PHP project as simply as: composer require jikan-me/jikan