Create A Webpage For This Repository

[aryashah2k]

The only way to increase the reach for this repository is via creating a webpage (possibly hosted on Github Pages) with all the programs in all the programming languages. This way it becomes easy to share the content of this repository to every person who could benefit from the content of this repository. The Tech Stack completely depends on you whatever you are comfortable in projecting this repository in form a static webpage.

I would really appreciate people working on this issue. The Repository has complete patterns with all code files for the languages - C#, JAVA, PYTHON. What's left is some programs in C++ and Complete C Pattern programs.

[ChlorinePentoxide]

Sound good. How do you want the webpage to be like? I can try...

[aryashah2k]

Hey there buddy, thanks for reaching out!, So basically I want a website in a way that it populates my github repo with all its content- should be intuitive since majorly students will be using it. Feel free to come up with any queries regarding the repo, I'm pretty active here! Tech stack-depends on you UI- Depends on you and I can give my inputs for the same

Feel free to use any frameworks if you want, just make sure it is host-able on Github Pages!

[aryashah2k]

You can browse through the repo and understand the aim behind its creation! A user should be able to find the code from the huge pattern collection that exists in the repository.

Feel free to connect for better communication! LinkedIn:https://www.linkedin.com/in/arya--shah/ Twitter:https://twitter.com/aryashah2k

[ChlorinePentoxide]

You can check this website I designed - bitphoton.ml If you like it I can design this in the same way,

P.S: I am NOT a pro, just an amatuer. P.P.S: I am also a java dev and I see that all java tasks are taken. Feel free to assign (if required) to me in the future of such tasks, I shall more than happy to help.

Cheers!!

[aryashah2k]

Sure buddy, the Java section has two sections still left and you can definitely join the existing contributors there, I'll assign you those issues, you can check them here #30 #28 (Just post a message there showing your willingness to contribute to those issues) If you're comfortable in working on them, then do go ahead. Also for the website thing, I checked out your work and its great and might suit my repository's purpose, you could create a prototype website for my repo and I can check if we can proceed with that further! Sounds Great?

[ChlorinePentoxide]

Yes, I am delighted you liked it. I shall start the work on the prototype right away.

Question: Does the project have a official logo, symbol anything ?? or does it have to be a just the name?

[aryashah2k]

Well Well, I havent thought on a project logo, might ask my designer friends to get me one made, is there any way you can hold that and create without need for that? In turn, let your creativity also reflect! You can go ahead and add a logo from your side or simply add a dummy one for now to suit the purpose!😊

[ChlorinePentoxide]

I have an initial preview of the website. You can check it out here Known improvement scopes/issues:

• The page isn`t responsive i.e it does not scale well on mobile widths and heights
• The links do not work, I will add those ones after other pages (about, and browse) are done.

You might want to change the color theme of the website. Currently it black and white. You might also want to change the fonts used. I open to those inputs. Hope you like it.

ChlorinePentoxide

[ChlorinePentoxide]

• also it does deploy on Github Pages, I am just using Netlify here since I had an account there and it works faster.

[aryashah2k]

Thats wonderful, I saw the website and it suits the purpose and is pretty well for version 1.0! (I hope you will be working with me in the future too😊) Some Inputs:

• Please could you change the theme to a dark background? Something like this:

• Align this section also to the left only because most of our users would be accessing it via phone or tablet, so trying to make their troubles less!

• Do notify me when the buttons are linked and I can actually browse through the website in shoes of a user.

PS: YOU HAVE DONE A GREAT JOB!!!! You can go ahead with the enhancement of the website and make your very valuable contribution.

My Wishlist: If you can find a workaround to make it responsive, then its an icing on top of the cake!!!!

[ChlorinePentoxide]

I so very glad you liked it. I do something up my sleeve to make it responsive. I will align it to the left. Sure, I will notify you when the links work.

Cheers, ChlorinePentoxide

[ChlorinePentoxide]

Hey there, Are the patterns same across all language or is it specific? If they are the same could you mind linking them here so I can use them for the website?

ChlorinePentoxide

[aryashah2k]

Hey there, the patterns are mostly same across all languages, I'm adding the links to the readmes for each language here, hope that was exactly what you were trying to convey! C -https://github.com/aryashah2k/Printing-Pattern-Programs/blob/main/C%20Pattern%20Programs/README.md C++-https://github.com/aryashah2k/Printing-Pattern-Programs/blob/main/C%2B%2B%20Pattern%20Programs/README.md C#-https://github.com/aryashah2k/Printing-Pattern-Programs/blob/main/C%23%20Pattern%20Programs/README.md Java-https://github.com/aryashah2k/Printing-Pattern-Programs/blob/main/Java%20Pattern%20Programs/README.md Python-https://github.com/aryashah2k/Printing-Pattern-Programs/blob/main/Python%20Pattern%20Programs/README.md

[ChlorinePentoxide]

If they are the same, then that will save me a lot of work. Thanks P.S Currently creating the Browse pages, drop some suggestions if required

[aryashah2k]

Cool , I ran down all the folders and concluded that all the patterns are same for all the languages, each language has the same number of patterns so you can have images from any one folder and do it for the rest of the languages!

[aryashah2k]

Indeed I would love to discuss the layout of the webpage, what is the progress and if you could send a screenshot and I could suggest some ideas!

[ChlorinePentoxide]

Checkout this I have not started work on the responsiveness and dark themes, though I will be implementing it very soon, after the browse pages and code pages have been done.

Question: How do we want the code to be displayed, in the sense should we redirect the user to a different webpage (which is easier and looks best) or appear like a pop up message (it is definitely more user friendly but will be nightmare for syntax highlighting and website responsiveness because the source isn`t going to be small)?

Cheers, ChlorinePentoxide

[aryashah2k]

Hey there, I checked it out, it's perfect and exactly aligns the way I pictured it, So I believe that the way you described-"in the sense should we redirect the user to a different webpage (which is easier and looks best)" is the best way to take it forward! PS I support your view of no popups! Buddy trust me I've grown fond of the work you've done and really looking forward to the final product! You might have better understanding with the designing of the webpage and feel free to implement your way, I'll also make suggestions here and there, but it is just my view point and as a friend you can always correct me and make me learn from your point of view!

[aryashah2k]

Also what I've understood behind how the webpage will work is that the patterns will be displayed like the link you sent.https://lucid-dijkstra-752329.netlify.app/browse.html And,

So, as we change the language, the links for the code behind the patterns will be changed for that language right?

[ChlorinePentoxide]

• When the user selects a specific pattern, the javascript in the website processes the pattern code and the selected language to redirect the user to a specific language implementation of the pattern. This approach could not have been possible if the patterns were not same across the different language. So really condensed my work.
• I am not sure if it would look exactly good, but the headings which says "Alphabetic Patterns" needs to go, and we need color code the pattern types or just leave it numerically increasing so the internal links still differentiate the pattern types but not to the website user (The reason is the way the patterns are displayed. The current implementation allows it look exactly same and remain usable on smaller displays but do not allow for headings to be displayed without compromising the responsiveness).
• Also, the current design I have thought of takes the source code directly from the repository. The advantage is subsequent changes is directly reflected. The minor changes have to be done for this to work. Some web browsers do not like non-alphanumeric characters like "#,$.." in the directory paths. So that might have to change for this to work. For instance the root directory for C# (C# Patterns) has the character '#' in the path.

Hopefully you will do the needful, ChlorinePentoxide

[aryashah2k]

Got it, so for changes on my part, I need to get rid of # in the C# so do I make it CSharp? Will that work?

[ChlorinePentoxide]

Yes that will do. Check other paths too. Please also do tell whether we go color coded or increasing numbers. The preview for color-coding is available here as well.

[aryashah2k]

So, the color coded ones is perfect and you can proceed with that, I'm checking all the paths and getting rid of all the signs that may cause trouble.

[ChlorinePentoxide]

Perfect. I will move on to other patterns. I am currently enjoying this thoroughly. Thanks for the opportunity, I will let you know when the first complete working demo is possible, which is very soon.

Cheers, ChlorinePentoxide

[aryashah2k]

Pleasure working with you buddy! I've made the changes you requested and we are good to go! I respect the fact that you considered taking source code directly from the repository since the repo is still not complete with codes for a few languages, so that really takes care of the state of website which gets dynamically updated as the repository progresses towards completion. Will the + in C++ create a problem? if yes let me know I'll change it right away with CPlusPlus!

[ChlorinePentoxide]

Yes its best to change that too.

• A small correction required, the images in subfolders series and wave patterns do not fit the standard(all others) size of 160x160 pixels you may want to fit the patterns to that size for uniformity in display space. Do note that it is still possible to work with non-standard image size but will stand out because it will look different.
• Another small discrepancy I noticed is that all the images JPEG formated which is fine except for Pattern 49 in pyramid patterns which is saved as PNG.
• You can check the new color schemes here

[aryashah2k]

Hi, so I shall proceed making those wave pattern images into 160x160 size?

I'll also make sure to convert that png image to jpeg

The new color scheme is awesome! Would you be doing further improvements into making the complete background dark? Let me know, The work till now is amazing!!!

[ChlorinePentoxide]

Lets make everything into standard size of 160x160. Yes I will be working on the dark color scheme once the code pages have been done. Thanks for the response.

Cheers ChlorinePentoxide

[aryashah2k]

I've made all the changes required:

The images are now uniform size 160x160 The Pattern 49 is now jpeg

Thanks a lot for taking your time out on a sunday to work on this, really appreciate it!

[ChlorinePentoxide]

No problem. I usually feel bored on weekends. Check the website out now. It has added search functionality. Known Issues: I do know the search isn`t working perfectly and will look to fix it very soon. I will be moving on to the code pages. If you have any inputs please do share.

ChlorinePentoxide

[aryashah2k]

That's wonderful, the website is really improved and feels populated now, also you can move forward with adding for the remaining two pattern types which are now in 160X160 resized(Series and Wave Patterns)

The filter pattern does work only thing is to find a workaround to sort of bring the filtered content right to the top. I tried with the lowest situated pattern and had to scroll right below in order to see my filtered patterns. Usually the website users might not take that much effort and end up thinking the functionality is not working properly, You can try your best to get that sorted, if it doesn't happen then we might just add a note stating to scroll down to view the filtered content...

For code pages, I trust you on this the way you feel right to be done, as we discussed yesterday, you can move forward with that...(linking the repository code directly to the code page)

[ChlorinePentoxide]

I have preview for the code pages here Shall I go ahead and generate the html files for all the source files?

Few points to note:

• The source uses a webservice called EmGithub which takes a Github file and embeds it into a webpage using a static link of the file.
• I see some code has not be written (for C and C++), the EmGithub links can be generated but will show an error on the page if viewed before its development.
• The filenames must not be changed after the creation of links for EmGithub. So whatever filenames are used to generate will be stuck if it is not updated in the future.
• Therefore I suggest before we go ahead the source files can be made into standard naming conventions such as snake case (for python) and pascal case (for java). Most source files have been named without taking into account the conventions.

Upsides:

• The code will automatically be updated if the file in the master branch is updated.
• There are different themes EmGithub can operate in so dark theme implementation is going to be easier.

Cheers ChlorinePentoxide

[aryashah2k]

Hi, I checked the source page and it's neat and well and suits the purpose,

Regarding the case of missing source code files for c and c++ what do you suggest should be done?

Do I add empty files in .c and .CPP formats for the missing patterns as of now and you link them and later any contributor or myself could update it with the code inside and will the changes reflect in the emgithub generated?

[ChlorinePentoxide]

I suggest you add an issue regarding naming conventions for different languages, so I can generate the code based on those patterns, any voluntary contributor will know where and how exactly he/she must frame the code, and emgithub will operate without any hiccups in the foreseeable future. Please cover the naming conventions, how to name alternative method files, alignment of code and depth which comments for code must cover. For example here is a sample convention for this repository:

• The source code for a specific pattern must have the same name as the pattern
• If there are two method for the same pattern, then both the methods shall lie within the same source.
• The name of the file shall carry the same name as the pattern and it must reside in the same directory as the pattern type (for eg. source for Alphabetic Pattern 1 must reside in the directory "alphabetic patterns" and must be named Pattern1.java or pattern1.py/c/cpp/cs)
• No two inner class name declaration must be the same for a specific pattern type
• The documentation/comments/variable names/method names must clearly reflect its purpose
• The code must be properly aligned and clearly readable
• The following contributors must preserve the effort of the existing contributions by not removing the name of the previous contributors in the source files

This is a just a suggestion. Feel free to modify to suit the amount of restrictiveness of the code. Hopefully you shall find this useful.

P.S: I might only be able to work on weekends from now. Hopefully you would have done the changes by then.

Cheers ChlorinePentoxide

[aryashah2k]

Sure I'll add an issue regarding naming conventions for pattern code files.

As of now, every contributor has quite maintained the naming convention without it being explicitly stated and mostly I will only be the one who shall take up the remaining two languages code files so rest assured, the convention shall remain the same...

Also for alternative patterns, I'm going to inform individual contributors to simply merge the alternative code in a single file so no issues will exist for cases for alternative patterns.

I just wanted to ask that of I add blank .c and .cpp files already with the correct naming convention followed till now will the source page get updated once code is updated in that blank file?

Also thanks a lot for all your efforts, you've been a valuable addition to this small family of contributors to this repository. Just like you there was this one guy who singlehandedly took care of the while c# section of repository, I'm so glad that open source has given me this chance to interact such great people like you...sure you can handle stuff on your weekends...I'm glad you took so much of efforts towards this

[aryashah2k]

Just let me know about this: I just wanted to ask that of I add blank .c and .cpp files already with the correct naming convention followed till now will the source page get updated once code is updated in that blank file?

[ChlorinePentoxide]

Don`t mind. I will take care of it. :)

[aryashah2k]

Hey @ChlorinePentoxide , I have merged all alternative programs into a single file for various patterns in all the language folders. I hope all the hurdles have been cleared... Do let me know how the webpage is progressing, I havent added Blank Files for pending pattern programs , let me know if you want me to do that... Apologies to ping you on a weekday, you can acknowledge this message during the weekend, take your own pace ... grateful for all the efforts so far!

[ChlorinePentoxide]

Thanks!! Saves me a lot of work. Sorry I have not been able to work this weekend. I will make sure I will drop some improvements next week. Hope you will excuse me for that.

ChlorinePentoxide

[aryashah2k]

Yup no issues, take your own time, there's no hurry! As and when you can take time out for this project, it's up to you how to proceed...!

[ChlorinePentoxide]

So sorry, I did not update you on the progress this Sunday. I have not updated the netlify cloud website. I will be doing that this Sunday. Here is the progress I have made so far:

• Added extra themes
• Made it responsive, finally (Subject to testing, lol)

With regards, ChlorinePentoxide

[aryashah2k]

Hey @ChlorinePentoxide , thanks for the update, waiting for this Sunday to view your creation, by then the Java section shall also be compete hopefully, I have personally requested the contributors to help speed up the completion of pending sections, I myself am personally working on C and C++ Section to ensure timely completion!!

[ChlorinePentoxide]

Hey there, We hit a roadblock... The service I had intended to use (EmGithub) for dynamic sourcing, is not working properly. I am afraid that we have to fallback. Instead I intend to create an application that will generate the required web pages from the sources automatically. The only downside being this has to be done manually.

Now onto some good news, The web design part is almost over. I intend to open a pull request tomorrow that will add all the website functionality.

With regards, ChlorinePentoxide

[aryashah2k]

Hey there, no issues, since adding manually will be a lot of hard work, I encourage you take your time and maybe figure out an alternative for emgithub. Also thanks for completing work on design part, cant wait to see how the webpage looks !! Eagerly waiting for the PR. Take care, Regards, Arya

[ChlorinePentoxide]

I had already searched alternatives for EmGithub, and the short answer is there are none.

The good news is the development for the application is almost over and it works like magic. The application is responsible for doing all the tasks like creating the webpage for individual pages. Here is shortlist of all the things it is able to do currently:

• Construct web pages from templates
• Take information from config files for automated link management
• Use rules file for syntax highlighting in code
• Generate CSS headers for multiple themes using style files The application is built from scratch and tailor made for this repository and use case only. I have attached the screenshot of its working below.

I could not finish it by today, sorry. But it is great progress so far.

P.S: I had to reorganize the project structure i.e that is the basic layout of the project. Hope you are fine with it.

P.P.S: Just a suggestion. Would you consider opening a Gitter chat room for this project. Commenting on this issue will only make it grow bigger. :)

Till next time, With regards, ChlorinePentoxide

[ChlorinePentoxide]

I accidently pressed unassign, sorry, you can reassign me

[aryashah2k]

Hi there, that's great progress, no issues, take your time...I shall open a gitter chat room for this project by today. Havent used gitter before if there are any suggestions to that then do let me know!!

[ChlorinePentoxide]

Please do check the gitter, often !! :)