Forem: sakun

A super simple implementation of Infinite Scrolling

sakun — Mon, 23 Dec 2019 01:53:00 +0000

I thought I’d share our approach to implementing infinite scrolling using jQuery on https://sideprojects.net and how it could be applied to other sites.

In our case, our pagination is in a “load more” format where you have to click the “load next days” button every time you reached the bottom of the page in order to show content from the previous 4 days.

What we wanted to do was display the next few days as soon as you scrolled to the bottom of the page and that’s what this tutorial will cover.

Setup

Prerequisites

A website with some sort of pagination.
Add jQuery to your website if you haven’t already.



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

Add a class to the button the controls your site’s pagination if you don’t have one already.

1) Create a window scroll event



//Infinite scroll
$(window).on("scroll", function() {

});

2) Create a variable for the height of the entire document as well as a variable to determine your scroll position

Inside the scroll event, create 2 variables. We’re going to call them scrollHeight and scrollPos.



var scrollHeight = $(document).height();
var scrollPos = $(window).height() + $(window).scrollTop();

3) Let's do some math!

Remember: we want the event to fire every time the user scrolls to the bottom of the page.

We can check if you’ve reached the bottom of a page with the following conditional statement:



if ((scrollHeight - scrollPos) / scrollHeight == 0) {

We want the event to be triggered if the conditional statement is met.

In our case, the class name for our button is .load-more-days-button. That button will be clicked upon reaching the end of a page.



if ((scrollHeight - scrollPos) / scrollHeight == 0) {             
   $('.load-more-days-button').click();
}

So putting it all together, we get:



//Infinite scroll
$(window).on("scroll", function() {
  var scrollHeight = $(document).height();
  var scrollPos = $(window).height() + $(window).scrollTop();
  if ((scrollHeight - scrollPos) / scrollHeight == 0) {
    $('.load-more-days-button').click();
    console.log("bottom!");
  }
});

That’s all? Are we done?!? Well — yes, but no.

It works.

But it’s not great. Why?

It requires you to scroll all the way down so that your scrollbar touches the end before it fires the event.
It works poorly on mobile. I’ve noticed that it doesn’t always trigger on mobile and pick up the fact that you’ve reached the bottom of the page — even when you’ve scroll all the way down.

So let's fix it:

Let’s substitute this line:



if ((scrollHeight - scrollPos) / scrollHeight == 0) {

with this instead:



if(((scrollHeight - 300) >= scrollPos) / scrollHeight == 0) {

This line of code causes the scroll event to trigger when it is 300 (or less) pixels above the bottom of the page. (You can configure the 300 to something else if you’d like)

This works great on desktop and mobile!

Wrapping things up

Putting everything together, your code will probably end up looking something like this:



//Infinite Scroll
$(window).on("scroll", function() {
 //page height
 var scrollHeight = $(document).height();
 //scroll position
 var scrollPos = $(window).height() + $(window).scrollTop();
 // fire if the scroll position is 300 pixels above the bottom of the page
 if(((scrollHeight - 300) >= scrollPos) / scrollHeight == 0){
   $('.load-more-days-button').click();
  }
});

You can view a live example here.

How to get your first 500–1000 users for your product, project, and/or service for free.

sakun — Sun, 06 Oct 2019 21:14:11 +0000

So you’ve built a cool product: perhaps a website, blog, app, social network etc. and you don’t know where to find your first users and grow organically. I’ve worked on different projects (from forums, to apps, to websites) over the years and can attest to the fact that finding early users is one of the hardest part of launching a product/service.

The list you’re about to see started off as a personal collection of free websites and resources I’ve been assembling over the past year. I’ve since added my own annotations in hopes that they’d help shed light as to how effective they really are (at least from my own experiences).

Depending on your product or service, you may want to use most of these resources, mix n’ match, or use none of them at all. It all depends on what your product/service is and what you’re trying to offer.
If you know any other resources, please let me know in the comments or tweet me @sakofchit so I can update my Medium article accordingly :).

The 2 “must-use” Platforms

ProductHunt I think we’ve all accepted now that PH is the place you go to when you’re ready to launch your product. When/if you get featured, you’ll see a surge of thousands of unique visitors flocking to your website. A lot of journalists/bloggers browse PH and write about cool products they find. When I launched my weekend project, ReadShitFaster I had reached the #2 spot on PH and it was featured on Gizmodo, LifeHacker, etc. which was sick!
HackerNews Like PH, HackerNews will send in thousands of unique visitors to your site if you get put on the front of HN/ShowHN. HackerNews has over 5 million monthly page views, so you’d be making a mistake if you aren’t sharing your product here.

Other Platforms

SideProjects Alright, I’ll admit that I’m being a bit biased here as this was something I’m currently building; however, this is a platform where you can share your side projects and get feedback, ideas, and even support on them. It’s 100% free to use as well and you’re more than welcome to post on it. We’re working on some cool stuff for SP, so stay tuned! (Also feel free to join the discord server).
IndieHackers is a phenomenal platform that has a bit of overlap with SideProjects.net. You can share projects you’re working on and discuss a wide range of things. They’ve even got a “milestone” widget that allows you to share updates to your project which are then displayed on the site’s homepage.
Reddit There’s a lot of great communities on Reddit where you can post your product/service and garner early users + feedback. But if you want your post to be received well, be respectful when posting and avoid spamming/reposting at all costs. Below is a list of subreddits where you can share your project (unspecific to your project’s niche).

r/sideprojects
r/javascript (Showoff Saturday Threads)
r/webdev (Showoff Saturday Threads)
r/coding
r/alphaandbetausers
r/betatests
r/gamedev
r/programming (Certain exceptions)
r/usefulwebsites
r/developer
r/opensource
r/opensourcegames
r/iosapps
r/androidapps
r/testmyapp
r/androidapptesters
r/apps
r/webapps

There are tons of other subreddits you can post in. I recon that you determine the niche that your product/service fits into the most and to post in subreddits dedicated to that niche.

BetaList I have mixed feelings on this. It will help you gain users, but it usually takes over a month to get your project featured (if accepted) on their site. Posting is free, however if you want the review process for your project to be expedited, you’re able to pay a fee — which I personally don’t recommend paying for.
HackForums I’m aware that HackForums has a conflicting reputation, however the site has evolved into a platform for developers and they have sections where you can share projects that you’re working on.
BetaBound allows you to submit your product/service to accumulate beta testers. From my experience in using it however, you may not get very many users.

Miscellaneous

Quora This one takes more effort: answer questions people post on their site that relate in some way to your product/service and weave your product/service into your answer. Strive for writing answers that are still actually helpful so that you don’t come off as an advertising snob in your responses.
Participate in Forums Building a reputation in certain communities can help bolster your reach. Actively participating in sites such as StackOverFlow, Dev.To, and IndieHackers can help you build a reputation + audience. Post content that’s actually helpful.
BetaFamily This one’s for IOS/Android devices. BetaFamily is an incredible platform that was really helpful for me back when I was working on building a now-defunct video-sharing application. You can feasibly recruit testers to beta test your app and give feedback on it. I was able to accumulate over 100 beta testers from this site alone. Now whether these testers will convert into long-term users is another story — it all depends on what your app is and if it’s captivating.
Podcasts Podcasting is becoming increasingly popular. If you’re able to get featured on a (popular) podcast and you’re given the opportunity to talk about your product/service, you’ll have a handful of listeners flock to it.
Backlinks are vital to SEO. Back when I was about 14, I was into running forum communities and I used backlinks to foster growth. I would host downloads for Minecraft maps on my website and restrict the downloadability to only people registered on my forum. I would then go onto other forums, posting download links that would redirect users to my site. Eventually, when people would search for a specific map by its name on search engines, my website would end up being the first link. By the time I had sold the site, it had roughly 10k users and was growing at a rate of 100–200 users per week and I hadn’t spent a dime on advertising.
LinkedIn Assuming you’ve got connections on LinkedIn, you could make a post talking about your product/service. You’re likely not going to generate much buzz from using LinkedIn alone though.
Blog I’ve yet to do this as this is something I probably could never commit to, but blogging consistently about some aspect of your product/service and sharing writing on HackerNews, DevTo, Social Media (namely Twitter), etc. can help you garner an audience.
Word of Mouth is probably one of the oldest methods in the book, but believe it or not, it still works. Reach out to friends/family and let them use your product or service. Word will get out, and it’ll help you generate a bit of buzz. If you already have a following on social media, you already have an advantage, so use it.

Hope this helps :)

See the full article on Medium!

Gettingt 500–1000 users for your product, project, and/or service for free. | by Sakun | SideProjects | Medium

Sakun ・ Aug 23, 2020 ・
Medium

SideProjects.net | A platform to share side projects you're working on

sakun — Mon, 02 Sep 2019 22:25:05 +0000

I know a lot of people work on a lot of different side projects (myself included) on their own accord, experimenting with different technologies, concepts, ideas, etc.

So I built a platform that allows you to share early-stage projects that you’re personally working on and to seek feedback/validation from users within the community. Feel free to check it out and let me know what you think!

https://sideprojects.net

I just launched it on PH and it's currently at the #3 spot :)

There's currently a URL encoding issue with Firefox, so I recon you use another browser when trying to access SideProjects (for now at least :))