Support NeoGAF

[PetriP-TNT]

Thanks guys. So to recap the advice I'm getting: Just start creating basic sites and experiment. As time goes on, it should sink in. This is a stupid question, I know...but how do I actually create websites? Do I need to get a domain name and web host for each site I create? NameCheap + Dreamhost? This is the kind of information I'm lacking. The setup and installation, and the actual way to apply coding to turn it into a website.

I know how to enter the HTML, CSS, and JavaScript in the Codecademy terminals, and the preview shows me my work. But how do I do this for an actual, reachable website of my own?

Once again my suggestion is GitHub Pages: https://pages.github.com/

It's free and rather flexible and you'll learn proper version control while doing it! If you want a custom domain ghPages supports that too, pretty much optimal for you use cases.

 

[Nelo Ice]

Thanks guys. So to recap the advice I'm getting: Just start creating basic sites and experiment. As time goes on, it should sink in. This is a stupid question, I know...but how do I actually create websites? Do I need to get a domain name and web host for each site I create? NameCheap + Dreamhost? This is the kind of information I'm lacking. The setup and installation, and the actual way to apply coding to turn it into a website.

I know how to enter the HTML, CSS, and JavaScript in the Codecademy terminals, and the preview shows me my work. But how do I do this for an actual, reachable website of my own?

I'm gonna recommend my friend's course again. It's free and you learn how to build an app. And there's a short video on HTML and that's really all you need to know about HTML. Imo thanks to taking his angular course and now this I'm pretty competent in JS and coding in general.
https://watchandcode.com/courses/practical-javascript

 

[Cptkrush]

Thanks guys. So to recap the advice I'm getting: Just start creating basic sites and experiment. As time goes on, it should sink in. This is a stupid question, I know...but how do I actually create websites? Do I need to get a domain name and web host for each site I create? NameCheap + Dreamhost? This is the kind of information I'm lacking. The setup and installation, and the actual way to apply coding to turn it into a website. Is there a resource available anyone is aware of that can teach me these rudimentary things?

I know how to enter the HTML, CSS, and JavaScript in the Codecademy terminals, and the preview shows me my work. But how do I do this for an actual, reachable website of my own?

For basic html/css/javascript/jquery sites just use a text editor, I recommend Atom.io or Brackets. Brackets is cool becasue it has a live preview function that's super nice. Save your html files as .html save your css as .css, and make sure you link your css to your html Section called External Stylesheets is relevant. You can run a page locally from start to finish. When you complete a site you want on the internet, you will have to look into hosting. But until then, just work locally. Running a page just requires your web browser and double clicking the html file. It's super easy.

 

[diaspora]

I learned to make a rest api using Express, Mongo, and Node, now I learned how to do it with fucking loopback in 10 seconds goddamnit.

 

[The Albatross]

Got an interesting jquery/JS challenge.

I'm working with a somewhat legacy application, about 5 years old, and this portion of the application has a disabled button that becomes enabled when the user enters text into a <textarea>. This has worked fine for ages... We're using .change() to look for changes, if a change occurs, it runs a conditional, if th conditional passes, the button becomes enabled.

However.

Recently, the application has had it's form fields replaced with a dojo-based code editor... The code editor feeds the raw code into this <textarea>. The problem with this, now, is that the .change() never runs because .change() is only fired (per the Jquery documentation/api) when mouse loses focus from the text box. Other alternatives like keyup() also won't fire because the user isn't keying anything in... JS is feeding this text box.

SO why can't we watch for change() on the new dojo component that's feeding it? Well, this component isn't a <textarea>, it's a series of divs that fake a <textarea> basically. I do not have any control over this dojo component... It's provided by a shared resource that I can't control.

So, question:

Does anybody know how to have JS/jquery watch for changes in a <textarea>, that isn't .change(), .keyup(), or any other user-initiated change?

CHEERS!

 

[D4Danger]

does the oninput event work?

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/oninput

 

[Somnid]

Got an interesting jquery/JS challenge.

I'm working with a somewhat legacy application, about 5 years old, and this portion of the application has a disabled button that becomes enabled when the user enters text into a <textarea>. This has worked fine for ages... We're using .change() to look for changes, if a change occurs, it runs a conditional, if th conditional passes, the button becomes enabled.

However.

Recently, the application has had it's form fields replaced with a dojo-based code editor... The code editor feeds the raw code into this <textarea>. The problem with this, now, is that the .change() never runs because .change() is only fired (per the Jquery documentation/api) when mouse loses focus from the text box. Other alternatives like keyup() also won't fire because the user isn't keying anything in... JS is feeding this text box.

SO why can't we watch for change() on the new dojo component that's feeding it? Well, this component isn't a <textarea>, it's a series of divs that fake a <textarea> basically. I do not have any control over this dojo component... It's provided by a shared resource that I can't control.

So, question:

Does anybody know how to have JS/jquery watch for changes in a <textarea>, that isn't .change(), .keyup(), or any other user-initiated change?

CHEERS!

https://jsfiddle.net/6qcx8bvf/2/

Basically unless you can throw away anything older than Edge for proxy support you're probably going to need to poll. I thought mutation observers would work but apparently not.

 

[grmlin]

Got an interesting jquery/JS challenge.

I'm working with a somewhat legacy application, about 5 years old, and this portion of the application has a disabled button that becomes enabled when the user enters text into a <textarea>. This has worked fine for ages... We're using .change() to look for changes, if a change occurs, it runs a conditional, if th conditional passes, the button becomes enabled.

However.

Recently, the application has had it's form fields replaced with a dojo-based code editor... The code editor feeds the raw code into this <textarea>. The problem with this, now, is that the .change() never runs because .change() is only fired (per the Jquery documentation/api) when mouse loses focus from the text box. Other alternatives like keyup() also won't fire because the user isn't keying anything in... JS is feeding this text box.

SO why can't we watch for change() on the new dojo component that's feeding it? Well, this component isn't a <textarea>, it's a series of divs that fake a <textarea> basically. I do not have any control over this dojo component... It's provided by a shared resource that I can't control.

So, question:

Does anybody know how to have JS/jquery watch for changes in a <textarea>, that isn't .change(), .keyup(), or any other user-initiated change?

CHEERS!

If you change the value of an input field via JS without triggering the change event by yourself, it's not fired.

I'm pretty sure though, that the dojo component does fire some sort of event then.

 

[KiKaL]

Well, spent 5 or so hours trying to figure out why my React Native app just stopped returning the body when using a fetch() out of nowhere. Then I finally found this issue, https://github.com/facebook/react-native/issues/6679

When your debugging tools are the actual reason your app is not working...

 

[The Albatross]

does the oninput event work?

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/oninput

https://jsfiddle.net/6qcx8bvf/2/

Basically unless you can throw away anything older than Edge for proxy support you're probably going to need to poll. I thought mutation observers would work but apparently not.

If you change the value of an input field via JS without triggering the change event by yourself, it's not fired.

I'm pretty sure though, that the dojo component does fire some sort of event then.

Thanks for the replies... I was able to tie into the dojo listener that feeds into that textarea, so any time the dojo component fires I fire my change event.

 

[davepoobond]

been having a lot of issues with my wordpress site recently. keeps giving me 503 errors. i have a feeling its a plugin, but its very sporadic. it went a month without issues but then the past 3 days, the site has been up and down like 10 times.

i have to manually restart it through my vps for it to start working again, but i have no idea what the culprit is. i thought i found it the first time i was doing this (resulted in 1 month of no downtime) but it just started doing it again

sigh

 

[Kinitari]

I'm teaching some FRP concepts ontop of react to a small group of people, and it's going really well, but I want to know if there's anything I can do to make it better. Anyone have any tips? Things that helped them learn? I'm finding live coding while they throw Qs at me seem to be the best received. So I'll probably continue with that, but I'm also considering writing up simple challenges.

 

[PetriP-TNT]

I'm teaching some FRP concepts ontop of react to a small group of people, and it's going really well, but I want to know if there's anything I can do to make it better. Anyone have any tips? Things that helped them learn? I'm finding live coding while they throw Qs at me seem to be the best received. So I'll probably continue with that, but I'm also considering writing up simple challenges.

Is the group well versed in programming in general (sounds that they are). Do they understand the benefits (and challenges) of reactive programming vs. other event driven paragdimes? I have found that reactive programming in general is a hard sell (sometimes) and is a thing where it's super important to concretify (is that a word?) when and especially when not reactive style of programming is beneficial.

For the simple challenges I'd suggest something like "here's a sample that uses xxxx, refactor the code to be reactive with yyyy and contemplate the benefits and shortcomings of the approach" or something like that.

 

[Zakalwe]

I'm applying for front-end developer positions. I had a chat with a recruit meant agency that specialises with this (in the uk) and the guy told me my answers to his questions probing me for my understanding were some of the best he'd heard, and the examples of work I'd produced were great.

I've got HTML/CSS/JS to a point I feel adept, and most of the 30-40k positions list these three as the primary requirements.

I've experience with:

Bootstrap, Foundation, Material (Standard, Angular, Lite).
jQuery.
Ajax.
Wordpress (theme installation/modification/design).

I'm currently learning SCSS.

I'm learning how to use Sourcetree.

Over the next few weeks I'm going to exploring ways to bolster my skills set that will make me more appealing to employers. Are there any specific things you'd recommend me learning?

 

[imBask]

learning sass and less is a good idea, otherwise you've got everything you need. Anything else will be company-specific and you'll learn it there

 

[JonathanEx]

Yeah, SASS/SCSS is a good addition. I'd say that's a nice set of skills there, and from there probably a good online portfolio is what's gonna sell you beyond that, get the best examples in an easy to see way, and make as much of it yourself. That's just from my experience looking for front-end devs though, others may have good skill suggestions to prioritise.

 

[Zakalwe]

Great, thanks! Feeling pretty confident and really looking forward to interviews.

 

[Kalnos]

This won't be some crucial step in getting a job but fuck learning Sourcetree, just learn Git with the terminal. Maybe spend some time messing around with Canvas and libraries like three.js too if you haven't, I have been using them a lot at work lately.

 

[PetriP-TNT]

just learn Git with the terminal.

Learning to how to efficiently use terminal is pretty crucial anyway, even if you are only doing front-end development. Nearly every modern web workflow is based around the command line and even if you can manage with out it, you are not doing yourself favours and most likely have to spend ages on doing things that could be done inside a single terminal window in seconds.

 

[John_B]

How do I make a modal/page/screen that sits on top of everything and can be scrolled? The code below gives you a screen that is on top, but if the content is longer than the screen height it can't be scrolled.

.modal {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: indianred;
}

.modal-content {
  width: 480px;
  margin: 0 auto;
  color: white;
}

 

[Zakalwe]

How do I make a modal/page/screen that sits on top of everything and can be scrolled? The code below gives you a screen that is on top, but if the content is longer than the screen height it can't be scrolled.

.modal {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: indianred;
}

.modal-content {
  width: 480px;
  margin: 0 auto;
  color: white;
}

overflow: scroll;

 

[GHG]

overflow: scroll;

Yep, you can also set overflow to "auto" and define the modal height and it should work.

 

[D4Danger]

How do I make a modal/page/screen that sits on top of everything and can be scrolled? The code below gives you a screen that is on top, but if the content is longer than the screen height it can't be scrolled.

you could use the <dialog> element

although support isn't great yet.

 

[grmlin]

Use as many wrappers as you can and overflow-y: auto one of em


a little example:
http://codepen.io/grmlin/pen/ZOyZpd/

remove the scrollbars from the document body, as it will look plain ugly in some browsers with two scrollbars side by side otherwise

 

[5olid_5nake]

First of all, I would like to say that this thread is awesome! Just what I need in my time of learning web development.

In the last couple of months I have trained extensively on HTML and CSS (pretty much worked with Bootstrap also), but now I feel like the next logical step for me to learn would be Javascript, JQuery and PHP/MySql.

So, to all the experienced programmers here, do you have any tips for me? Perhaps maybe a couple of good books, sites, etc.? It would really help me a lot.

Thx in advance!

 

[GHG]

First of all, I would like to say that this thread is awesome! Just what I need in my time of learning web development.

In the last couple of months I have trained extensively on HTML and CSS (pretty much worked with Bootstrap also), but now I feel like the next logical step for me to learn would be Javascript, JQuery and PHP/MySql.

So, to all the experienced programmers here, do you have any tips for me? Perhaps maybe a couple of good books, sites, etc.? It would really help me a lot.

Thx in advance!

This has been reccomended a few times throughout this thread:

https://watchandcode.com/courses/practical-javascript

Having gone through the content this weekend I'd say it's one of the best JavaScript tutorials I've come across. Should be a good starting point for you.

 

[John_B]

Thanks for the help on the modal. Got it working now.

 

[runningjoke]

Creating a small page with some jquery/bower components is pretty weird after having built React apps. Constantly thinking wow I have to manually toggle props on all other buttons? I'd so much rather just set a state

 

[5olid_5nake]

This has been reccomended a few times throughout this thread:

https://watchandcode.com/courses/practical-javascript

Having gone through the content this weekend I'd say it's one of the best JavaScript tutorials I've come across. Should be a good starting point for you.

Thank you so much! Starting with it now.

 

[grmlin]

Creating a small page with some jquery/bower components is pretty weird after having built React apps. Constantly thinking wow I have to manually toggle props on all other buttons? I'd so much rather just set a state

I actually enjoy building good old websites from time to time, as I don't have to think about anything, very relaxing

 

[Copons]

So, I've passed an interview with a big name (and one that I've always dreamed but felt a hard impostor syndrome about) and now I'm doing this trial and it feels super weird.

Basically they gave me a plugin and told me to add a feature (the easy part) and to fix it because it wasn't compliant to their code style, and it has some security issues and whatnot.

Fuck me, I'd rather had a super hard task, because then at least if you go sloppy you can say eh but I've still done the task you asked me, mates!
While in this case I'm shitting my pants because the task was TOO easy, and I'm pretty sure I'm gonna deliver the code with some obvious things missing, like OMFG I'm gonna forget to increase the plugin semver, they gonna think i'm STUPID.

Goddamn me!

 

[megarockexe]

Hello Web Design GAF. Are there people who like to suffer and code email templates? I've worked on a responsive email template that seems compatible in most cases. I'm not too experienced in HTML, I think. So I'd like someone to look it over for review and suggestions.

 

[runningjoke]

Hello Web Design GAF. Are there people who like to suffer and code email templates? I've worked on a responsive email template that seems compatible in most cases. I'm not too experienced in HTML, I think. So I'd like someone to look it over for review and suggestions.

It's been over a year, but I've done email templates for 5 years, ask away.

 

[megarockexe]

It's been over a year, but I've done email templates for 5 years, ask away.

Wow, 5 years?
OK, so here is what I got.
Built from a free template by Litmus and with lessons learned from a paid template. Works well in Outlook 2010 and Outlook 2011 Mac. Scales well on mobile in the default Mail app on Windows Phone 8.1 and the default Mail app on Windows 10. Outlook Web Access is the biggest hurdle now. Links break. Buttons fall apart. It's even worse on OWA mobile. What could be done to fix this?

 

[imBask]

just reading "responsive email" gave me PTSD

 

[runningjoke]

OWA? The one I know the least about :lol I also can't test that.

Anyway I see you have this twice in a place it doesn't belong: (line 471, 525)

<tr>
  <td height="40"></td>
</tr>

that may mess up the layout.

You will need to inline all your styles to get them to work. I used to also put a span within an A tag to force consistence. Like

<td style="color: #000000; font-family: Arial, Helvetica; line-height: 24px; font-size: 13px;">
  Some text
  <a href="http://www.google.com" title="google" target="_blank" style="color:#00aeef; text-decoration:underline">
    <span style="color:#00aeef; text-decoration:underline">and a link</span>
  </a>
</td>

You have max-width:600px on cells in your 100% width table, the max-width doesn't do anything there.

I wouldn't use padding:0 40px on a table, just make it width="540" and align="center".


Can you make a screenshot of the mail in OWA? That may help some more

 

[megarockexe]

OWA? The one I know the least about :lol I also can't test that.

Anyway I see you have this twice in a place it doesn't belong: (line 471, 525)

<tr>
  <td height="40"></td>
</tr>

that may mess up the layout.

You will need to inline all your styles to get them to work. I used to also put a span within an A tag to force consistence. Like

<td style="color: #000000; font-family: Arial, Helvetica; line-height: 24px; font-size: 13px;">
  Some text
  <a href="http://www.google.com" title="google" target="_blank" style="color:#00aeef; text-decoration:underline">
    <span style="color:#00aeef; text-decoration:underline">and a link</span>
  </a>
</td>

You have max-width:600px on cells in your 100% width table, the max-width doesn't do anything there.

I wouldn't use padding:0 40px on a table, just make it width="540" and align="center".


Can you make a screenshot of the mail in OWA? That may help some more

Yeah, that extra td height seems like a mistake I made. I'm trying to have consistent space below sections so they have some padding when they're put together in any order.

I remember reading about the span trick, so I'll see how that performs.

A previous template had done padding on the sides that way before. It might be necessary for the img-max class to work the way it does. I'll see if specifying the exact width helps with compatibility.
Yeah, I know styles have to be inlined, but there are inliners. It was just becoming too overwhelming to actually design with inline styles.

Here's what it looks like in OWA desktop. Spacer td gets killed, but I'm more concerned about the buttons. It's not responsive as well, which is okay.
http://i.imgur.com/EZlBLNL.png

Here's mobile OWA.
http://i.imgur.com/TMOZnx2.png
http://i.imgur.com/Fk4fgzm.png
Same brokenness, but i have to pan around and can't zoom.
There has to be a way to fix this.

 

[runningjoke]

First link seems to be broken.

I guess OWA doesn't want to apply display:block to the A tag, you can try to use line-height and pad the text with nbsps. Failing that, apply the background colour to the cell and trust people to click the text instead of the coloured area around it.

 

[megarockexe]

First link seems to be broken.

I guess OWA doesn't want to apply display:block to the A tag, you can try to use line-height and pad the text with nbsps. Failing that, apply the background colour to the cell and trust people to click the text instead of the coloured area around it.

I'd still need to see if your span suggestion would make them clickable again. Because even text links wouldn't work right now. Line height could help on buttons, but would there be a way to target OWA specifically to do this effect?

 

[jokkir]

How exactly does flex-wrap work? I've been using Flexbox for a ton of my projects but I can never figure out the proper usage of flex-wrap and how to use it in general.

 

[runningjoke]

I'd still need to see if your span suggestion would make them clickable again. Because even text links wouldn't work right now. Line height could help on buttons, but would there be a way to target OWA specifically to do this effect?

I don't think a span will help to make the links clickable. (They have a href of #, you have given them a normal url right?) I'm not aware of a way to target OWA specifically and couldn't find it on a quick Google. I really don't know enough about it

 

[Somnid]

How exactly does flex-wrap work? I've been using Flexbox for a ton of my projects but I can never figure out the proper usage of flex-wrap and how to use it in general.

It makes it wrap to the next line kinda like text layouts. You typically don't use it by itself but as part of the "flex-flow" combination property which you specify "row wrap", "row nowrap", "column wrap" or "column nowrap". If you say use "row nowrap" there will be exactly one row and the algorithm will jam everything into it. If you say "row wrap" then it takes the flex basis into consideration and starts laying things out, if the items become greater than the width of the container they wrap to the next line (and extra space will be filled depending on the flex-grow of the items). Column works the same except vertically.

I typically use it when I have patterns of alternation, like content can be 2 50/50s or 1 100 but it's dynamic but it's mostly just important to understand the algorithm and keep it as a tool in your CSS toolbox because it can be used for a number of things where you might try to add more markup than necessary.

 

[AquaticSquirrel]

This may sound like a stupid question but here goes anyway.

I'm trying to get my footer to stay at the bottom of the page regardless of the size of the main content of the site.

Just to clarify I don't want the footer to be fixed to the viewport and float up and down the screen. I just want it to stay at the bottom of the page no matter how large or small the content of the main page is.

I've been looking around for solutions but they all seem really messy/hacky. Is there any clean way to do it?

Any help with this would be greatly appreciated.

 

[PetriP-TNT]

This may sound like a stupid question but here goes anyway.

I'm trying to get my footer to stay at the bottom of the page regardless of the size of the main content of the site.

Just to clarify I don't want the footer to be fixed to the viewport and float up and down the screen. I just want it to stay at the bottom of the page no matter how large or small the content of the main page is.

I've been looking around for solutions but they all seem really messy/hacky. Is there any clean way to do it?

Any help with this would be greatly appreciated.

Cleanest non-flexbox sticky footer there is:

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 100px; // same as the height of the footer
}

footer {
  height: 100px; // same as the margin bottom of the body
  position: absolute;
  bottom: 0;
  width: 100%;
}

Now your footer is on the bottom of the page, if the content is shorter than the viewport, but doesn't overflow the content like a fixed element does.

Only drawback is that you need to specify the height of the footer.

If you can use flexbox, then you can just do

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content {
  flex: 1;
}

 

[jokkir]

It makes it wrap to the next line kinda like text layouts. You typically don't use it by itself but as part of the "flex-flow" combination property which you specify "row wrap", "row nowrap", "column wrap" or "column nowrap". If you say use "row nowrap" there will be exactly one row and the algorithm will jam everything into it. If you say "row wrap" then it takes the flex basis into consideration and starts laying things out, if the items become greater than the width of the container they wrap to the next line (and extra space will be filled depending on the flex-grow of the items). Column works the same except vertically.

I typically use it when I have patterns of alternation, like content can be 2 50/50s or 1 100 but it's dynamic but it's mostly just important to understand the algorithm and keep it as a tool in your CSS toolbox because it can be used for a number of things where you might try to add more markup than necessary.

Thanks! I'll try it out right now. How does it determine when to collapse? a 12 grid system or something else? And does the inner elements need to have a fixed width or can they just auto grow via flex-grow?

 

[megarockexe]

I don't think a span will help to make the links clickable. (They have a href of #, you have given them a normal url right?) I'm not aware of a way to target OWA specifically and couldn't find it on a quick Google. I really don't know enough about it

Yeah, I just noticed. The blank href caused it to not even be clickable. So at least that concern is taken care of. OWA is fickle. Looks like there's no answer for too-wide emails on mobile OWA. I hope it won't be a major issue.

 

[Somnid]

Thanks! I'll try it out right now. How does it determine when to collapse? a 12 grid system or something else? And does the inner elements need to have a fixed width or can they just auto grow via flex-grow?

IIRC it won't shrink if you ask it to wrap because there is always more space, only when not wrapped and it hits the limit. The children should have a flex-basis which is the size (horizontal for rows, vertical for columns) that the item "naturally" takes. If you have a container that's 100px across with 3 items of 40px basis and flex-grow 1 and you ask it to "row wrap" then the what happens is the first 2 items get laid out with 80px, it sees that another 40px won't fix so that element wraps to the next line. The top 2 take up 80px and will each grow 10px to fill the rest of the space on that line. The third element will grow to 100px to fill the second line.

 

[Nelo Ice]

So anyone have open source projects or can recommend ones to contribute to?. I've only made 1 open source contribution and that was fixing a typo for freecodecamp but I'm learning and trying to contribute actual code like bug fixes or new features. So far haven't found any projects that I can contribute to yet or there's no issues that I think I can tackle at my current level.

 

[Maron]

Having some annoyances with my webcomic's site that seem like they should be simple, but I'm just at a loss since I'm very slowly only learning bits and pieces of this stuff.

So one of the alterations I want to make is removing this default gray box that sits next to the small image I made for the header, and to use that space potentially for ads and such. This is WordPress running ComicPress by the way.

Problem is I'm clueless on how to do it, but I know it at least can be done since another site running the same program pulled it off (and was one of the inspirations on me going with ComicPress due to it's attractive site layout).

I'm using a child theme I created based on ComicPress and when contacting the main guy behind that program these days, he told me to copy the header.php file from the parent theme into the child theme and then edit accordingly to remove the default box my header image sits with. Any idea how I can do that, or what code I need to edit/add to get rid of that default header area?

 

[Kalnos]

So anyone have open source projects or can recommend ones to contribute to?. I've only made 1 open source contribution and that was fixing a typo for freecodecamp but I'm learning and trying to contribute actual code like bug fixes or new features. So far haven't found any projects that I can contribute to yet or there's no issues that I think I can tackle at my current level.

My experience is that it's pretty hard to jump into random open source projects. I pretty much have to be using it for my company/project and thus need some sort of functionality fixed in order to feel natural about contributing.

My advice is to start your own project and open source it or look for things like Digital Ocean's Hacktoberfest in which companies/projects seek new/first time contributors. There are also sites like this one which aggregate certain tags meant for people looking to contribute but I have never used them personally.