Printing-Pattern-Programs icon indicating copy to clipboard operation
Printing-Pattern-Programs copied to clipboard

Create A Webpage For This Repository

Open aryashah2k opened this issue 4 years ago • 48 comments

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.

aryashah2k avatar Jan 30 '21 04:01 aryashah2k

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

ChlorinePentoxide avatar Jan 30 '21 12:01 ChlorinePentoxide

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 avatar Jan 30 '21 12:01 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

aryashah2k avatar Jan 30 '21 12:01 aryashah2k

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!!

ChlorinePentoxide avatar Jan 30 '21 12:01 ChlorinePentoxide

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?

aryashah2k avatar Jan 30 '21 12:01 aryashah2k

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?

ChlorinePentoxide avatar Jan 30 '21 12:01 ChlorinePentoxide

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!😊

aryashah2k avatar Jan 30 '21 12:01 aryashah2k

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 avatar Jan 31 '21 13:01 ChlorinePentoxide

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

ChlorinePentoxide avatar Jan 31 '21 13:01 ChlorinePentoxide

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: Untitled

  • 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!

Untitled

  • 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!!!!

aryashah2k avatar Jan 31 '21 13:01 aryashah2k

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 avatar Jan 31 '21 14:01 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

ChlorinePentoxide avatar Feb 06 '21 10:02 ChlorinePentoxide

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

aryashah2k avatar Feb 06 '21 10:02 aryashah2k

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

ChlorinePentoxide avatar Feb 06 '21 10:02 ChlorinePentoxide

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 avatar Feb 06 '21 10:02 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!

aryashah2k avatar Feb 06 '21 10:02 aryashah2k

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

ChlorinePentoxide avatar Feb 06 '21 11:02 ChlorinePentoxide

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 avatar Feb 06 '21 11:02 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,

Untitled

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

aryashah2k avatar Feb 06 '21 11:02 aryashah2k

  • 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

ChlorinePentoxide avatar Feb 06 '21 12:02 ChlorinePentoxide

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?

aryashah2k avatar Feb 06 '21 12:02 aryashah2k

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.

ChlorinePentoxide avatar Feb 06 '21 12:02 ChlorinePentoxide

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.

aryashah2k avatar Feb 06 '21 12:02 aryashah2k

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

ChlorinePentoxide avatar Feb 06 '21 12:02 ChlorinePentoxide

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!

aryashah2k avatar Feb 06 '21 12:02 aryashah2k

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

ChlorinePentoxide avatar Feb 07 '21 08:02 ChlorinePentoxide

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!!!

aryashah2k avatar Feb 07 '21 09:02 aryashah2k

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

ChlorinePentoxide avatar Feb 07 '21 10:02 ChlorinePentoxide

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!

aryashah2k avatar Feb 07 '21 10:02 aryashah2k

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

ChlorinePentoxide avatar Feb 07 '21 10:02 ChlorinePentoxide