elyahu41/royzmanimwebsite

Improved website based on Elyahu41.github.io/RabbiOvadiahYosefCalendar/

Hi there, my name is Elyahu Jacobi! Welcome to my github profile!

Here are some projects that I am proud to have worked on:

Terasology - A minecraft project in the works!
Minesweeper built with Razor/MVC - A fun Minesweeper game developed for the browser using Razor/MVC.
Five Ads - Check out this project that experiments with ads!
Voice Activated Personal Assistant - A voice-activated personal assistant project.
Tic Tac Toe GUI with Python - Have fun with this Tic Tac Toe GUI developed in Python!
Android Flashlight App - An app for your Android device to use the flashlight.
Email Crawler - A project that involves crawling emails.
Othello - Dive into this Othello game project!

Listed here are religious projects that I have worked on:

My pride and joy projects:
⚡Rabbi Ovadiah Yosef Calendar App ()⚡
⚡Rabbi Ovadiah Yosef Calendar App ()⚡
⚡KosherSwift⚡
royzmanim Website
Rabbi Ovadiah Yosef Calendar (unofficial) Website
KosherJava
KosherCocoa
Rabbeinu Tam IOS App
Rabbeinu Tam Android App

Visitor count

royzmanimwebsite's Issues

Weekly View - Landscape Support

Currently, our weekly view UI implemented in the Mobile Application only accounts for the fact that it would be shown in portrait mode, on a device that could scroll. However, when considering the fact that this will be shown on a computer, we need to account for that as well. To show a table with 7 columns won't do us any good, but perhaps we could split it? Problem is how are we going to split it?
Of course, our implementation also needs to account for the fact that on mobile, we would like to have it match the mobile app's view layout. Thereby, when it comes to maintaining a good implementation that can account for both, we would need to use negative margins and such for mobile.

Add options to change the theme of the website

This is really just a cosmetic thing and you can ignore this, however, it is always nice to give the user the ability to change the colors/background of the website to customize it to their liking.

As mentioned in issue #15, there should be some form of customization to the theme of the website. (No pressure for this at all as light mode and dark mode satisfy 95% of the users)

Detect Web Filters

If Web Filters cannot allow us to access the elevation APIs, then elevation should be disabled. Currently, we just crash the whole app.

Add an option to show both versions of the time for the tekufa

As mentioned in issue #15 , there should be an option/setting to allow the user to see both times for the tekufot I.E. according to the Ohr HaChaim calendar and according to the Amudei Horaah calendar. As mentioned before, the difference between these times is just 21 minutes. In the apps, if the user decides to see both of the times for the tekufot, I show both of the times as separate listings. However, what you could do is to merge the times and overlap them.

For example: Let's say that according to the Ohr Hachaim calendar, the tekufa happens at 9:30am. Then you would not be able to drink water from 9 - 10 am. The Amudei horaah calendar would subtract 21 minutes from both these times. So the tekufa would come out to 9:09am and you would not drink from 8:39 - 9:39 am.

You could show this as two separate listings if the user wants to see both, OR you could just merge them and put the earliest and latest time I.E. 8:39am - 10am.

I leave it up to you.

As mentioned in issue #15 , there should be an option/setting to allow the user to see both options for the tekufot.

Add option to show the seconds of the zmanim

As mentioned in issue #15 , there should be an option/setting to allow the user to see the seconds of the zmanim.

Offline-Mode Notice

Surprisingly, the actual Zmanim implementation worked offline for me, giving me the correct Zmanim for the area I already specified

If so, we should make it so that only auto locationer is broken, rather than letting the browser assume that it needs to be online to work.

Layout implementation for daily view

The layout is probably the most important thing to consider right now. On the default website, there is much wasted space because of a max width, which meant scrolling was necessary. However, on a screen which can accommodate more content, why not use what we're given?

Thereby, it's time we designed three different layouts for the daily view, depending on which screen size you have available:

Desktop Layout

The rules and information should really all stay in the same y axis as the times it'd be for. Thereby, I've came up with a grid mechanism, with a sidebar that'll span 40% of the screen and the zmanim that'll span the other 60%. The Zmanim will be listed in an accordion style, meaning clicking on the name for one of them will mean bringing up the info immediately below it. Also, the sidebar is split into two different sections.

TV Layout

These TVs have A LOT of horizontal space, but not vertical. Thereby, since they either way won't be seeing the information on the zmanim, we could just trim out all the horizontal fat by putting all the zmanim in the same horizontal line, similar to weather apps.

If they want to see information, they can click on the zman name to have a modal pop up with the relevant information. The information will be split into three, and span on top on top of the zmanim themselves

Mobile Layout

This is not necessarily a mode, but rather a feature of creativity within limitation. Since there is no extra space to use, there wouldn't be a way to implement a grid in the first place, so the layout of being a big column stays the same. However, it will still be affected by the setting of whether it would have been under the desktop layout or the TV layout had the screen been bigger. While the times will still be the list design regardless of the layout, hitting the button would carry over the property from the specific layout:

• Desktop Layout will get the accordion dropdown
• TV layout will get the modal (akin to what's currently on the app)

Now, within the pillar, the groups of information will also persist from the modes presented prior. In other words, users who set their mode to desktop will get two groups while users who set their mode to TV layout will get three groups.

The real question is, though, what's the cutoff point? Bootstrap's breakpoints should be a good reference of when to start hosting it in pixel size, but if we could do by minimum aspect ratio, I'd like to instead suggest having 16:9 be the above full layouts with below being the mobile mode.

Widget - Small Screens too!

https://www.computerworld.com/article/3689698/custom-android-widget.html

Add an option to always show mishor sunrise

Even if chaitables is implemented in the website, there should always be an option to always show mishor sunrise regardless whether or not there is a time available for visible sunrise. Many kehilot use this time since they do not use chaitables.com and we want people to see it as well to not be overwhelmed by other people saying the time for sunrise is different.

As mentioned in issue #15 , there should be an option/setting to allow the user to always see mishor sunrise.

Media queries for printing

Printing is probably one of the most essential things when it comes to this website, in particular because of the "כל מי שיש לו שמרטפון" crowd that rejects looking at screens. Thereby, we need to make sure that the site can provide its content when printing without printing out the site itself.

• Remove the navbar when printing
• Make our advertisement in the footer subtle (do we want to advertise the apps? Or would the website by itself be fine)?
• Remove the calendar buttons. no one can exactly click them
• Remove the next upcoming zman indicator
• Remove the accordion button, and relocate the padding for it.

Hide RT everyday unless user wants it

Right now, by default, the zman for Rabbeinu Tam is shown everyday. Whereas, by default, in both of the calendars, RT is hidden everyday unless it is Shabbat/Yom Tov. As mentioned in issue #15 , there should be an option/setting to show RT everyday if the user wants it. However, by default, it should be hidden except for shabbat/yom tov.

Monthly View - Making the PDF redundant

This monthly view is going to be interesting, because it basically needs all the screen-realestate it can get. Where Rabbi Dahan could get away with making font sizes smaller due to how printer quality can usually indicate letters by feeling + the fact that words are "rendered" in a vector-like format, that will not work for the pixel-based screens of laptops, televisions and other things.

One thing we should make clear is that this is the one area where a mobile version will not be supported. While I will get feature parity for everything else, this cannot be ported over due to how the mobile sizing works. However, since printing is independent of mobile, they can instead be featured with a print button, which can allow them to save the document as a PDF they could easily open and read.

The way I will be handling this from a UI perspective is that you can swap among the "pages" of the different months. Years will be handled by a dropdown menu, which will account for a range of 50 within the year that your current page is on. For example, if you select the year 2701, your options will be 2651-2751. To get to 2801, you'll have to select 2751 and then go to 2801.
Of course, when printing, all the different months of the current year will be shown.

Show when shabbat ends on Friday or the day before yom tov

So this feature is implemented in the backup website https://elyahu41.github.io/RabbiOvadiahYosefCalendar/

Change the date to any friday and you will see the red box on top of the zmanim list.

This was added as an option in the apps because some people wanted to see when shabbat ends the day beforehand. It was especially annoying because shabbat mode did not show the next day's zmanim until 12AM.

For the website, we do not need to add when shabbat ends into the list of zmanim, since we have space, we can make a separate box for it. See picture below for example. (You could also show rabbeinu tam if you have space).

As mentioned in issue #15 , there should be a box to display when shabbat/yom tov ends. Also a setting to disable this if you feel it is needed.

Add option to show shabbat mevarchim

As mentioned in issue #15 , there should be an option/setting to allow the user to see if this shabbat is shabbat mevarchim. There is a method for this in KosherZmanim that should make this trivial.

Settings - Customization of the website

Jews will always want options; that's why we have two Jews and three opinions. Our site will definitely be used by people everywhere, and while we'll have the best defaults, we need to make sure the options would highlight exactly what the end-user would like. Thereby, I'd like to separate all available options into different categories:

Zmanim

• Location: This will be the first option, where the user would be faced with the input field that they were first greeted with. This bar has the ability to put the location name to get the longitude and latitude results from the API, with two buttons on the right side to set it based on the user location or to manually insert the longitude & latitude. Default will be user location, unless the end user refuses to provide the permission, in which case this will be the only option that will affect whether or not you can close the modal.
• Calender Psak option: This will only show if the Location above is NOT found in Eretz Yisrael. The user will have the option to choose between "Amudeh Hora'ah" or "Ohr Hachaim", with a description that says the difference is whether degrees are used. We need to decide which one will be default, considering that currently, our two haskamah givers prefer one method over the other while the right way in Eretz Yisrael is arguing on those Haskamah givers. If we get an Haskamah from the Rebeim in Eretz Yisrael, I would be comfortable with putting Ohr Hachaim as default.
• Customizable Times: A subsection where you can specify exactly how many minutes you want for various different options:
  • Candle Lighting: Number Field where you can specify however many numbers you want to put for Candle Lighting. Presets will be based on Shitat Hayereim: 15 (22.5m mil), 18 (24m mil), 20 (24m mil rounded, default), 22.5 (full mil) & 40 (minhag Yerushalayim). We should place this in a list as the description, with reasons why each number would be used.
  • Shabbat Ending times: Default is 30 minutes for those using degrees, 40 for those using fixed. Let people enter a custom time, with presets including Ashkenazi sides.
  • Fast End: Rabbi David Yosef (20m seasonal), Ben Ish Hai (27m seasonal), Hakham Ben Tzion Aba Shaul (30 minutes fixed)
  • Plag Hamincha & Hatzot Laylah: Rabbi Ovadia (Symmetric), Ben Ish Hai (Alot til Psak Tzet), Ben Tzion (Netz till Tzet)

Visuals

• Language: What's the point of having a website if the end user cannot even read it? There will be three different options: Hebrew, English Transliterated & English. The selector will be a radio slider with Hebrew on the left, English Transliterated in the middle and English on the right. The description of this setting should give an example of each way of writing. Keep in mind that we also need to determine which method of transliteration we'll go with; I would prefer the more authentic Sepharadi way (Ch -> H for Hets, use th's when Ashkenazim would use a s for a Taw without a Dagesh, Waw instead of Vav), but obviously this is...controversial.
• Layout: TV Layout vs Vertical Mode - Differences already explained in another issue #3
• Theme Override: I feel comfortable "hiding" this by putting this below Zmanim considering that most people will be using non-EOL browsers which will already support the dark theme media query. Thereby, this setting will default itself to "Auto" with an option to put it in Force Dark and Force Light. Force Light will change the media query of dark.css to something that will always be false (made-up media query, which will be ironic if a browser in 200 years from now decides to name for their media query). Force Dark will change the media query to only check if the user is looking at a screen, which will only be false if the user is printing it (which, let's be real; if the user wants to print the page, we shouldn't be using dark theme anyway). It will be a radio slider with the force dark in the left, auto in the middle and force light on the right side
• Time Format: ברוך שלא עשני אמרכני - We Canadians use the 24h system format by default, which is what the rest of the world uses. However, since the primary developer is American, we will be forced to accommodate the 12h system. To settle the score between us, we will let it be an option, with 12h being the default.
• Seconds Display: Currently, we use a system where we either do not show the seconds at all or force display it in the menu. Despite being unreliable, I don't think those that want to see the seconds for one small activity should have to modify it via going to a modal, toggling the option and then exiting the modal, only to redo that for disabling the seconds view. Instead, we should use tooltips to show the user the seconds when they aren't explicitly printed on the screen. Thereby, the options will be "Tooltip" (default) and "Force print". Of course, description will warn the severity of the seconds.
• Plag Hamincha: We currently have two different Plag Haminchas; one for the more machmir and one that's more traditional. Obviously, we should be encouraging people to follow the Shita decided by our Posek, so there wouldn't be an option to leave just the Mekel Shita. However, since having both Shitas at all times is screen-clutter, we'll add an option to hide the more Mekel shita and rename the Machmir Shita to just "Plag Hamincha"

Functionality

• Notifications: Configure which times get notifications, with options to specify how earlier the notification would come.
• ChaiTable Netz Force Disable: By default, NetzTable will be enabled. However, because ISPs could be annoying the end user because of how many pages it would try to access, we need to have an option that would force usage of the regular zmanim.

Add option to hide accordions

Not sure if you want this, however, in the apps, there is an option to hide the dialog pop ups. It is not so applicable to the website, however, if you want, you can add an option that hides the accordions

As mentioned in issue #15 , there should be an option/setting to allow the user to hide the accordions.

Add option to round up RT

This might be something you want to leave out. However, in the apps, I by default round up the zman of Rabbeinu Tam because I figured most people would want that. And if people do not want that, I made an option to disable it.

As mentioned in issue #15 , there should be an option/setting to allow the user to choose whether or not they want to round up RT.

Chai Tables for Netz

The way the Java app has it now is that it downloads a file into its memory, converts it to data the language can understand, then use that data to get the netz timing.

For the website, we'll need to implement an API instead, since it cannot do that very first thing without being wasteful to the client side (downloading the file and its interpreter). I can easily write this in Deno and host it on my VPS.
Of course, if there is a web filter that disables access to the API link, fallback to current implementation

To implement, I will need to find the relevant Java code and see how I can replicate it from a backend perspective.
I will use a standard routing system for now, eventually replacing it with Deno.serve once it becomes stable

Check users locale before changing the website

This issue is very important. If the user is in Israel or Canada or somewhere where they use a 24h clock, the website should be updated to display 24h times.

Hebrew should not be shown to the user unless they choose it for their zmanim.

You should only make the entire website Hebrew if the user's default language is in Hebrew.

Right now, every time I open the website on a new computer, the website is entirely in hebrew. Then I need to navigate to the settings (which I do not know how it is written in hebrew) and change it there in order to use the website. The website needs to be in english first and foremost as that is our target audience. We can make another website with co.il extension for people in Israel if needed.

Either way this issue needs to be a priority.

Use media queries for dark theme

The browser already does the heavy lifting for us. It is rather pointless to implement it ourselves

Auto Mode - Shabbat Mode replacement

The current implementation of Shabbat Mode mirrorly increments the screens y position by about 3 px every absolute 50mil, which makes for a non-smooth scrolling. The indicator that this isn't a bug but rather a feature is with an absolute positioned banner on the top that reads Shabbat mode as long as the 5 times the text is defined wouldn't disappear if your screen is too wide because a 6th element wasn't added. To disable this, you first need to click on the banner to disable it, then get the screen to scroll to the nav bar and finally disable it from there...
...needless to say, this did not take into account the recent advancements we made for desktop users. With all the horizontal width we take advantage of, there is no scrolling that could happen on a 1440p screen. As such, only the fact that there is a blue bar is the indicator.

To fix this, I would like to rename Shabbat Mode to "Auto Mode", which would be inclusive of Yom Tov and convey the purpose in the name. With that, there would actually be three implementations:

• Off: Must I explain?
• Category flipper: Wed put each time into different categories which wed then flip through every few seconds.
• Burn in-Reduction: Current system, except using requestAnimationFrames and a modal for canceling when touching anywhere

Make everything surround the actual Zmanim page itself

Right now, the current site (elyahu41.github.io/royzmanim) has everything as separate pages. With the exclusion of the Molad calendars, I'd prefer handling the extra content as a modal rather than a separate page.

• Make Settings a Modal (#13)
• Make initial greetings a modal
• Make About a Modal
  • Accessible from the initial greetings
• Read location data from localStorage instead of URL prompts.

Add option to change when candle lighting time is

As mentioned in issue #15 , there should be an option/setting to allow the user to change when candle lighting is according to his/her minhag. While the Amudei Horaah calendar put candle lighting at 18 minutes because that is the minhag. In the Ohr HaChaim calendar, it shows 20 minutes and 40 for those that are strict.

Currently there is not way to change this time.

User Customization

Right now the website displays the zmanim according to either the Ohr HaChaim calendar or the Amudei Horaah calendar. There are some setting that have been added to the android and ios apps that help customize what zmanim to show if the user so chooses it. I will make a separate Issue for each setting.

Some dialogs are missing from the website that are in the app

Currently the website just shows the accordions as a substitute dialog for the apps, and only the calculations for the zmanim are shown. However, there are multiple dialogs/accordions missing that I think are needed for users that do not know as much. Here is a list of dialogs missing:

1. UlChaparat Pesha (for musaf. Most people don't know what this is at first sight)
2. Tekufa (Most people don't even know this halacha applies nowadays. I didn't know until last year myself)
3. Tachanun (It should show a list of days that we skip tachanun for and a note on the bottom that says that there could be special occasions as well)

These are the main three that are misssing, however, you can add more dialogs if you want. Like for Hallel and other simple features.

Ohr HaChaim calendar is not used in Israel by default

All rabbanim agree that the Ohr Hachaim calendar should be used in Israel. I just tested the website by putting in "Jerusalem" and it put me in Israel, however, it was still using the amudei horaah calendar. There needs to be a check in place to always set the calendar to ohr hachaim if the inIsrael boolean is true.

Finish migration of data to be read by element attributes & CSS selectors

In the old file, everything was handled via JavaScript, whether it was the info modal (which we're using a details dropdown instead), the times or even the names of the time. Now, on the premise that JavaScript should be handling functionality rather than the metadata, I've started moving all of it towards being read by element attributes (rather than the ones that need special attention).

However, I did not finish. Here's the leftovers:

• There is still a need of implementation for Candle Lighting, Tzeit, Havdalah and anything after Plag.
• After we get it all in HTML, run a script to get the information to move it to a YML
  • Makes it MUCH easier to port the zmanim handlers themselves.

This needs to be reflected for both the TV layout and the regular wide layout

Add option to change when shabbat ends (Ohr Hachaim only)

In Amudei Horaah mode, we display shabbat ending at 7.14 degrees after sunset. However, in Ohr HaChaim mode we show 40 minutes.

We should show 30 minutes after sunset in Israel for the Ohr HaChaim calendar as that was Rabbi Ovadiah's psak. (Check the isInIsrael boolean)

As mentioned in issue #15 , there should also be an option/setting to allow the user to change when shabbat ends in minutes after sunset.

For example, in NY, people usually end shabbat after 50 minutes. So maybe the user wants to override the 40 minute setting.

Add Notifications

To make this into a full webapp, this will also need to implement JS notifications. Unfortunately, all custom implementations are AWFUL and anything good is paid.
We'll need to figure this out in a better way.