the-programmers-hangout / website Goto Github PK

Must limit image width inside markdown component, and most likely word-wrap the links.

Not entirely sure about this one, but this would go at the bottom of every resource page that has external links

Attach resources metadata in head (using <SEO />)

Main thing to be done is tweaking the resources to correctly set title and description (maybe a limited, cut down version of the start of the article?)

basically when we are on light mode, and refresh the page, the css sets itself to dark mode, but u can still click "Switch to dark mode"

It's currently used as "Docs", but I don't think it's quite right. "Knowledge base" comes to mind, open to suggestions.

To put in perspective, our vision is to offer articles or longer explanations on some languages/topics, mainly those frequently discussed concepts.

The best for this would be to extract the mobile sidebar state to the SidebarProvider, and run a function to close the sidebar on clicking the links.

Currently needed content/items (ranked in most hard to most easy to do):

• Tech spotlights/what-is..? (See #69)
  -Needs content for pages.
  -Create an info hierarchy/display for the what-is repo, since some of them deviate from the "template".
  -We can have 2 places to archive it since all of it is already in a Git repository. Gotta talk to Fox.
  -Sidebar
• FAQ
  -Needs content for page(s).
  -Follows initial design for the about page
• Hotbot (and other bots?)
  -Needs content for pages.
• Take a look at the landing page and see what else can be done to it to make it better.
• Code backgrounds!
  • Update styling for dark theme
• Clean up file trash can 🗃🗑
  -I'm looking at you and your memes, JP.

update: 12sept

• do toggle button styles
• create moss's mega list of design resources

This would allow us to see the avatars and usernames of contributors. We could even go as far as to fetching the roles too so we can have a discord-like hovercards for users.

• Needs content.
• Create an info hierarchy/display for the what-is repo, since some of them deviate from the "template". (H1-H6).
• Fetch (on build?) data from the what is repository (https://gitlab.com/Aberrantfox/what-is-archive)

Decide if we want to store this in the repo, what is/should be the source of truth for the data. It could make sense to have the source of truth here since we need to manage the markdown hierarchy.

Hitting a 404 from anywhere will trigger the page below:

Things that would be nice:

• Separate resources 404 from generic 404 (inspired from https://www.gatsbyjs.org/docs/creating-prefixed-404-pages-for-different-languages/ same concept as us)
• Suggest a set of probable wanted pages via Levenshtein

Let's also make it pretty.

Right now we don't really have anywhere to publish the plans for this project, I figured we could set up some place to make a todo-list or roadmap so we're all on the same page.

We could potentially use the Projects tab on this github repo.

Just kidding, but the site is really broken in IE, and I figure if someone is learning to be a programmer through us, we should probably at least tell them "hey, before you do that programming thing, download an actual browser".

Should be maybe 1 meta tag, or maybe there is an npm lib to do this in a better way.

• Sidebar style
• Typography
• Contributors avatar stack (see #32)
• Recommended reading functionality (link to the proper article) (see #33, closed in #50)
• External articles (see #50)

Given Figma's:

background is #E7E7E7
or 9% opacity black

We currently have a separate website that offer forms to copy/paste formatted content for #hire-me etc. I think the the websites should be merged.

Figma file visible here: https://www.figma.com/file/Yz2t51GRnlcPPRujlTj3ggLl/tph-sketch?node-id=0%3A1&viewport=-774%2C487%2C0.5131944417953491

Note to anybody wanting to contribute:
We are not done with the design, avoid opening a design-related PR for the time being. (Especially true with the rebranding). A clean up is being done in #64.

Also meta issues can be found in #64.

They were never meant to cut like this

What is the issue?

Long code blocks cause certain elements of some pages to be unresponsive. This is especially prevalent on mobile devices due to the screen resolution typically being lower than on desktop devices.

Examples

All of the examples below are from the what is docker page though, I've also experienced elsewhere, like the what is graphql page.

This issue also may occur on desktop depending on the browser zoom level, OS scaling settings, screen resolution and font size:

Here's a video demontration

There are a lot of concepts in computer science / programming that are shared between programming languages, for example implementing a recursive function.

If we could create tabs for code examples, maybe something similar to this then we'd we able to provide examples for multiple languages while using less space.

Articles and resources to note:

• https://www.modularscale.com/?18&px&1.1487
• https://zellwk.com/blog/why-vertical-rhythms/

Maybe implement on https://kyleamathews.github.io/typography.js/ (https://github.com/KyleAMathews/typography.js)

To consider, content comes from markdown, which supports h1, h2, h3, h4, h5, h6, and body.

Going with 1.1487 for now.

from 18px body, we get:
body 18px body
h6 20.677px
h5 23.751px
h4 27.283px
h3 31.34px
h2 36px
h1 41.353px

Yeah

We are still using the old logo, update favicon for the newest logo.

https://theprogrammershangout.com/resources/javascript/es6/arrow-functions.md

I haven't changed my profile picture, which apparently breaks the profile picture, as seen in #146.

I think it is because my tag is listed as "t0m#5956" on the article as apposed to what it actually is "T0M#5956".

At the moment, breadcrumbs have the first level of each word uppercased:

Home > Resources > Javascript > Intro

Problem is with some word/acronyms, like PHP, or PDO, that should be uppercased.

Furthermore, the title of the page should also be handled (currently lowercased from the filename (shall we use the article title?)

The order is random right now, I'm not sure where the issue is:

Most likely as context, save to localstorage. A few gotchas on Gatsby in general..

Useful read: https://markoskon.com/dark-mode-in-react/

Right now the /resources page shows us something like this

Some of these are kind of "crypting", for example java/generics and java/class. These items don't really describe the content but they're like this because that's the file names.

Would it be better to show the article titles instead?

To reproduce:
Head on Resources (https://tph.netlify.com/resources)
Click on Javascript
Click on Callbacks
Click on Intro
Reload the page

Expected behaviour:
Javascript tree open/selected, with Callback/Intro open.

Current behaviour:
CPP (the first item) is open/selected.

The style is exactly the same as "recommended reading".

To be added in the ResourceHeader component (at least, as of now?), and added to the graphql query in the template.

This is partially done, just need to stack them.

The discord link button does not lead anywhere right now, clicking it has no effect.

Find a better way to implement the waves across resolutions.

Possibly catalogue the homepage across common resolutions on Figma to get a "best case scenario".

bad: 2560x1440 @ 2560x955 body

The logo was auto-optimized in svgomg, and we broke it, oops. It's way rounder than it should be.

https://theprogrammershangout.com/resources/kotlin/native/creating-c-bindings.md

Profile picture does not load up for me ^^

Currently, the sub directories (from the breadcrumbs) will lead to a 404.

Two big things (maybe separate issues?):

• Languages should/could have a dedicated page with some intro, links, and then a tree of the articles (reuse the algo from the https://tph.netlify.com/resources page). This page needs to be created in gatsby-node
• Sub-directories.... either we generate pages for them (via gatsby-node), or we stop linking to them all-together in the breadcrumbs. Maybe there isn't a huge benefit to sub-directories, so probably just not linking to them would make more sense...

Make the "menu" part of the sidebar scrollable, just below the banner, using perfect-scrollbar.

pretty much just this https://www.gatsbyjs.org/docs/progressive-web-app/

It would be nice if we were able to link to a specific part of a post. E.g:

Currently it's just dumb text. I believe the path should exactly match, except with .md. (Use Gatby's Link)

We've implemented generated types from the GraphQL endpoint, but they are not used everywhere:

example of implementation:

example where it's missing:

Currently, changing the page will completely wipe the state of the SidebarContext.

See: https://www.gatsbyjs.org/docs/browser-apis/#wrapPageElement
And: gatsbyjs/gatsby#6127
And: https://www.gatsbyjs.org/packages/gatsby-plugin-layout/

Odds are we want to use gatsby-plugin-layout

Add

    @media screen and (max-width: 991px) {
      font-size: 58px;
    }
    @media screen and (max-width: 767px) {
      font-size: 32px;
    }

to this in order to not break the page when loading the miscellaneous pages like rules and the about page.

Something that was discussed was a beginner introduction to each language, I volunteered to do the Java one, so I've added this issue to track the feature.