Very nice free service list. I think it could been added a way of running node CLI’s without installation through npx instead of installing global packages.
This is kind of Off-topic, but I've been getting back to doing web development for the past few months. One thing I've been surprised is how much high quality content marketing/blogs there are especially regarding React.
The Logrocket blog is an excellent example of this. Lots of useful blog posts. Another one I've been relying on is the blog of Robin Wieruch [1].
I guess stating this is a little obvious, but one of the upsides of using popular tools is the productivity boost you get from the surrounding ecosystem.
I think so. I think it’s the intent that counts. They are clearly doing an SEO and content marketing play. I see their articles in SERPs for lots of keywords. But I find them to be just barely passable quality.
Is it intent? Authors write how-to books to make sales, not to pass on information for the good of humanity. Does that mean that all technical works are barely-disguised spam?
I'll grant that they probably do like the idea of passing on what they know, but I very much suspect the same thing of the tech lead who was asked to write a blog post by their marketer.
The last one I dropped was https://www.robinwieruch.de/web-applications which has more than 5000 words (1/6 of a book) of fundamentals in web development -- which took me 3 workdays of writing without anyone paying me for it. Still it gets less attention on Twitter than some random dev meme or inspirational dev tweet; and will probably not be picked up by HackerNews if anyone posts it ¯\_(ツ)_/¯
I do my best to teach people fundamentals. If they like my content on my blog, people buy my books/courses. This and their feedback (e.g. on Amazon, E-Mail) gives me confidence that I am doing the right thing. Without good content I don't get paid at the end of the month ...
> Is this listicle spam or helpful for people who get started with testing in React? :)
It is useful, but only because react-testing-library's documentation is horrendous in this front (its documentation is fine as a reference, but not as an introduction/getting started).
However, your post will end up rotting over time as react-testing-library evolves, and will end up being old cruft spam contributing to today's issues (you search for something and find an outdated reference that doesn't work anymore).
If you really want to have positive impact with your documentation efforts, the best avenue would be to work with the software authors themselves on getting your tutorial there. And then helping to maintain it.
Of course you are not in any kind of obligation to do so. I just wanted you to think about it ;)
This holds true for all kind of content (YouTube, Courses, StackOverflow, Reddit, HackerNews) where a person has no ownership or no monetary interest (or doesn't worship pure altruism) ... At least content creators are urged to keep their content up-to-date, otherwise they would receive bad feedback (and bad SEO scores over time if people don't stay on your website). I could name you lots of articles I have kept up-to-date over the last 3 years (more than I wrote for sure), and I know this doesn't apply to all content creators, but I can tell you that it really matters for your readers and your credibility.
For sure, the easiest thing as a content creator is publishing (almost) ever green content (see web applications article). However, most often you are looking for topics that solve actual problems of your readers (see react testing library article) which often leads to bleeding edge technology which isn't document well yet.
For what it's worth, there will always be companies with money who pay people to write content to support their products (e.g. SaaS). This makes it harder every day for individuals like me to sustain their livelihoods. However, I strongly believe in the long run quality trumps quantity.
In a perfect world, there would be (1) one perfect learning material (e.g. official documentation) and (2) one unified learning style (e.g. text, video, both) for all students. But we are not living in a perfect world and therefore people look for resources outside of the box.
Thanks for posting all those tutorials, I've learn a lot from those, great content! And keep up the good work! Also, if I may suggest, maybe you could update the React/Firebase series, convert to hooks maybe. Also, just out of curiosity, are you not a fan of TypeScript? You haven't really posted anything meaningful for that topic.
Really questioning this. The things available in vanilla js, html5 and css3 are immensely powerful and extremely well documented for those who care to dig into it
Since those are even more popular than React (given that React builds on top of that foundation), the point about using a popular tool for good ecosystem and documentation still holds for me.
You are correct that those have a pretty good interface.
But here is some advice from an old programmer: once you start making bigger and more complex projects, you will start to make your own convenience libraries. And soon you will realize that you've built your own React-like library. But only less stable and less well thought out, because react has the huge community and maturity.
But if you only do some small functionality, or something specific with the technology, vanilla is perfectly fine.
However, if you are a single page app coder, I would definitely go for something like React.
Not everything has to be built with React, and the size of it is orthoganal to the technology.
If fact, huge projects are likely to suffer from using React, because virtual DOMs get out of hand and a lot of resources a wasted by building and rebuilding VDOM and looking for the changes.
Also, for some reason, React brings a lot of cargo-culting. Many don't stop to thing whether they should even if they can. They bring React, then they bring Redux, then all the rest is being dragged in and you get multi MB bundles for some truly trivial purposes. Of course, that's more on developers than on React, but it happens way to often. And for some reason just bringing React and Co. is not enough, it usually ends up in some imressive architecture astronautics. At the end you have a project that is big, but slow and still impossible to understand because the levels of indirection are off the charts.
I'm not going to say you're wrong, because I don't have claim to back mine up, either. So, this is for the sake of discussion.
The sentiment that everybody reaches for Redux is tired, in my opinion. After following many in the web development community and keeping up with online forums such as this, it's fairly clear to me that people have moved on from the heavy armor previously associated with React if they have a choice. For instance, people learned that they were using Redux for prop drilling, which led to many switching over to the context API natively from React. Another good example is Gatsby, for those who realized they have a static site and would like to address the SEO issues associated with a SPA.
Also, a lot of times, companies adopted React and Redux before the inception of these new, more powerful libraries that are obvious choices on the ground as of August 2020. But, have fun refactoring your entire client side state seamlessly if you're tracking state more sophisticated than the status of the application sidebar.
So what do you suggest how huge projects should display data on a single page web app? MVC? MVVM? Just hack things in like the olden days, without any structure?
fair enough - I thought you were saying that you tried to implement a 3d graphics api in React and without React and the React one was much more difficult and I felt: that was as to be expected.
I used Vercel for the first time last week and the time between creating a repo to have a Next site publicly deployed was minutes. A custom domain was a couple minutes more. I was gobsmacked, this is something that took me weeks four years ago.
With Netlify Functions and FaunaDB (also with a generous free tier), I have a full stack web app, complete with a database, hosted for free (https://www.quidsentio.com)
I was first on Vercel free tier, yet one of my projects was a bit too resource hungry so they were kindly asking me to go for a paid tier. Before signing up for a paid plan I tried out Netlify.
According to Netlify my functions were even more resource hungry, and they were deployed to USEAST AWS region, with no way of changing that (unless you're an enterprise) — yet my API endpoint is in Europe, so they took longer to execute (~1200ms each).
Thus I finally went for the Vercel paid tier. They allow you to choose where your functions are deployed, so I've got ~300ms now. And they work better with Next.js apps, as on Netlify you have to jiggle around a bit more to get that working.
FaunaDB's 50MB/day data output quota is tiny, and they explicitly state they don't have a hard cap or throttling so if you ever get hugged to death by a viral HN/Reddit/whatever post it's going to be expensive. That puts me off using it for anything publicly accessible.
Do you (or anyone else) have any other suggestions for good low cost database/data layer services to work with these options?
These free services are fantastic but the limitation is that they seem to be only for static sites (static in the sense that there is no data persistence).
Firebase's free tier is enough to run a small startup on. The 1GB database size is small, but if you're only storing simple structured text records rather than media it goes a long way.
But why do you need it? Being on top of HN with 10,000 visitors doesn't kill a simple static site. Likewise, a client-rendered web-app shouldn't be too much for a simple server.
It makes sense to use those services for all the additional stuff, like Netlify's offers:
>User identity, Serverless functions, Instant forms, Split testing & rollouts, Analytics, Large media
I think it isn't so much about what traffic to a static site will do to a server, but rather what the experience is for the end user. The tie in to CDNs help reduce load time for your end user.
Yet web-apps are made to not be bothered by load-times. Web-apps are cached by the browser. Once downloaded, startup-time should be instantly.
And downloads shouldn't take too long. Basic 1Gbit connections give you 100Mbyte per second, 10M per 100mils. A landing page should be doable in 10M, and then there is at least one second left to load the rest of the page before the user can react and make a choice.
In the case you mentioned (top of HN with 10,000 visitors), each user would be loading the full webapp for the first time, so I think caching would be mostly irrelevant.
We've been using AWS Amplify and it's been pretty nice. It allows pairing with Github and deployments by branches. CI Integrations are not that great, like Slack bots and stuff, but it gets the job done as a good place to deploy code. The free-tier is fairly generous, and it's nice that everything lives in AWS (if you're already using them for other things)
Google Firebase offers a similar product called Firebase hosting [1]. They also offer a fairly generous free tier with 10GB of storage and 10GB of transfer for the hosting. The free plan also includes SSl and supports custom domains.
I've been using it to host project websites or single page apsp for a while and so far it turned out to be the cheapest option.
The CLI is also fairly good so its relatively easy to deploy with a CI system
So cool to see all the different free services out there for getting in to web dev. I remember having to do graphic design work growing up to afford a shared hosting plan on my mom's credit card. Times have definitely changed :D
Lately I've been enjoying KubeSail's (https://kubesail.com/) free tier for playing around with some SSR things. A lot of the lambda like services don't do great with doing realtime stuff since they're just meant to run one piece of code then die a few seconds later
Hey thanks! I’m the cofounder/CTO of KubeSail and this is more or less our purpose for existing! Our goal is to help people learn - open source tools and not black boxes - from just learning javascript to bootstrapping a company :)
> A lot of the lambda like services don't do great with doing realtime stuff
Another way to handle this is by delegating the management of long-lived connections to a separate infrastructure layer. Then it's fine if the app runs/dies all the time, since it only needs to run when there's client activity. Some options are Fanout (disclosure: I'm its founder) and AWS API Gateway.
It is fantastic how far we have gotten. I had a web in Geocities before the Yahoo purchase. It allowed 150 Kilobytes of storage and no CGI (Common Gateway Interface).
I do no see mention of size limits in the article. I just checked Firebase and the free tier allows up to 1 GiB total.
Security is the other change. To run CGI allowed control of too much for any provider to be comfortable with it. Containerization and overall Operating System improvements allow for server-side code with safety (Spectre aside).
Great article and great opportunity for anyone that wants to start small on the cloud.
It's worth pointing out that most (if not all) the options listed are only free to a certain point.
Netlify and Github Pages, for example, are capped at 100 GB of bandwidth per month. It's a very generous cap and ample for most use cases, but something to keep in mind as your projects gain traction.
Yea, they are very useful for small sites.
The bigger problem for me was to find a free backend hosting service, I've only found 3 free and all of them were pretty limiting: Heroku (the instances go to sleep and take 30+ secs to wake up), IBM cloud (256MB memory limit), Azure (pretty complicated, need a credit card for the free tier).
I was looking for a solution where I can host Java Spring/ASP.net toy projects easily and none of them were satisfactory
Do you dare to post the URL of your “super cheap to run” could run instance to test that theory?
(My point being you’ll need cloud flare DDOS protection or something similar, and I’m not sure I’d classify that as “super cheap” if we are comparing against “free”.
Don’t get me wrong, Cloud run is certainly an amazing product, I love it slot. It is also cheap to run as long as you don’t run into any hiccups. However, It’s ability to generate a personal $1000 or $10000 credit card bill disqualifies it from being a good candidate for small to medium projects. It is clearly an enterprise product.
I have always disliked services like netlify or vercel. Sure it seems nice with free hosting but in reality it's quite limiting and often it's cheaper to host on a $5 DO droplet or some similar vps offering. Also, with those kind of services that are free, soon gets very expensive as soon as you leave the free tier.
With a vps, you can do front and backend and host hundreds of low traffic websites.
I don't really understand what type of developer only does front end work or where do you host your backend stuff whjen you use Vercel / Netlify?
Yeah I get that, it's a fair reason to choose serverless stuff before a VPS and I understand why people do it.
In fact, I understand it enough and have felt the pain enough that I am actually working on a project that will help solve several of these issues for traditional server hosting. The only thing it won't have is a global cdn but that could potentially be added in the future as well.But I think a CDN is not needed for most projects actually and my service will focus on smaller to medium sized projects.
70 comments
[ 2.4 ms ] story [ 153 ms ] threadThe Logrocket blog is an excellent example of this. Lots of useful blog posts. Another one I've been relying on is the blog of Robin Wieruch [1].
I guess stating this is a little obvious, but one of the upsides of using popular tools is the productivity boost you get from the surrounding ecosystem.
[1]: https://www.robinwieruch.de/blog
I'll grant that they probably do like the idea of passing on what they know, but I very much suspect the same thing of the tech lead who was asked to write a blog post by their marketer.
Let's only allow some starving hippies to create content as of now.
The last one I dropped was https://www.robinwieruch.de/web-applications which has more than 5000 words (1/6 of a book) of fundamentals in web development -- which took me 3 workdays of writing without anyone paying me for it. Still it gets less attention on Twitter than some random dev meme or inspirational dev tweet; and will probably not be picked up by HackerNews if anyone posts it ¯\_(ツ)_/¯
I do my best to teach people fundamentals. If they like my content on my blog, people buy my books/courses. This and their feedback (e.g. on Amazon, E-Mail) gives me confidence that I am doing the right thing. Without good content I don't get paid at the end of the month ...
Thanks for the shoutout @Pandabob! :)
It is useful, but only because react-testing-library's documentation is horrendous in this front (its documentation is fine as a reference, but not as an introduction/getting started).
However, your post will end up rotting over time as react-testing-library evolves, and will end up being old cruft spam contributing to today's issues (you search for something and find an outdated reference that doesn't work anymore).
If you really want to have positive impact with your documentation efforts, the best avenue would be to work with the software authors themselves on getting your tutorial there. And then helping to maintain it.
Of course you are not in any kind of obligation to do so. I just wanted you to think about it ;)
For sure, the easiest thing as a content creator is publishing (almost) ever green content (see web applications article). However, most often you are looking for topics that solve actual problems of your readers (see react testing library article) which often leads to bleeding edge technology which isn't document well yet.
For what it's worth, there will always be companies with money who pay people to write content to support their products (e.g. SaaS). This makes it harder every day for individuals like me to sustain their livelihoods. However, I strongly believe in the long run quality trumps quantity.
In a perfect world, there would be (1) one perfect learning material (e.g. official documentation) and (2) one unified learning style (e.g. text, video, both) for all students. But we are not living in a perfect world and therefore people look for resources outside of the box.
But here is some advice from an old programmer: once you start making bigger and more complex projects, you will start to make your own convenience libraries. And soon you will realize that you've built your own React-like library. But only less stable and less well thought out, because react has the huge community and maturity.
But if you only do some small functionality, or something specific with the technology, vanilla is perfectly fine.
However, if you are a single page app coder, I would definitely go for something like React.
If fact, huge projects are likely to suffer from using React, because virtual DOMs get out of hand and a lot of resources a wasted by building and rebuilding VDOM and looking for the changes.
Also, for some reason, React brings a lot of cargo-culting. Many don't stop to thing whether they should even if they can. They bring React, then they bring Redux, then all the rest is being dragged in and you get multi MB bundles for some truly trivial purposes. Of course, that's more on developers than on React, but it happens way to often. And for some reason just bringing React and Co. is not enough, it usually ends up in some imressive architecture astronautics. At the end you have a project that is big, but slow and still impossible to understand because the levels of indirection are off the charts.
The sentiment that everybody reaches for Redux is tired, in my opinion. After following many in the web development community and keeping up with online forums such as this, it's fairly clear to me that people have moved on from the heavy armor previously associated with React if they have a choice. For instance, people learned that they were using Redux for prop drilling, which led to many switching over to the context API natively from React. Another good example is Gatsby, for those who realized they have a static site and would like to address the SEO issues associated with a SPA.
Also, a lot of times, companies adopted React and Redux before the inception of these new, more powerful libraries that are obvious choices on the ground as of August 2020. But, have fun refactoring your entire client side state seamlessly if you're tracking state more sophisticated than the status of the application sidebar.
1) That React is a powerful, productive, ergonomic language
2) That high quality resources exist for using it
I have struggled with both of these in React, yet in vanilla JS and html canvas I have no problem writing a 3d graphics engine lol
They also have smart features baked right in like pre-rendering. Literally hit a checkbox and you're prerendering.
With Netlify Functions and FaunaDB (also with a generous free tier), I have a full stack web app, complete with a database, hosted for free (https://www.quidsentio.com)
According to Netlify my functions were even more resource hungry, and they were deployed to USEAST AWS region, with no way of changing that (unless you're an enterprise) — yet my API endpoint is in Europe, so they took longer to execute (~1200ms each).
Thus I finally went for the Vercel paid tier. They allow you to choose where your functions are deployed, so I've got ~300ms now. And they work better with Next.js apps, as on Netlify you have to jiggle around a bit more to get that working.
These free services are fantastic but the limitation is that they seem to be only for static sites (static in the sense that there is no data persistence).
>Render is a unified platform to build and run all your apps and websites with free SSL, a global CDN, private networks and auto deploys from Git.
Apart from the CDN, that's all available for e.g. Digital Ocean Droplets. But why would a CDN be needed for static websites?
It makes sense to use those services for all the additional stuff, like Netlify's offers:
>User identity, Serverless functions, Instant forms, Split testing & rollouts, Analytics, Large media
But for a basic web-app, where's the benefit?
And downloads shouldn't take too long. Basic 1Gbit connections give you 100Mbyte per second, 10M per 100mils. A landing page should be doable in 10M, and then there is at least one second left to load the rest of the page before the user can react and make a choice.
Cache only works the second time the user comes to your page. By definition, every user will experience slow loading the first time.
That said, it probably depends on your use case if it is worth bothering with a CDN or not.
Read this [1] for workarounds but it's more than annoying to work around instead of just using a better hosting solution.
Personally I have only ever tried GH Pages and Netlify had no issues at all with Netlify.
[1] https://github.com/rafgraph/spa-github-pages
https://aws.amazon.com/amplify/console/
I've been using it to host project websites or single page apsp for a while and so far it turned out to be the cheapest option.
The CLI is also fairly good so its relatively easy to deploy with a CI system
[1] https://firebase.google.com/products/hosting?hl=en
Reason:
Zeit is very easy to use, you do not even need to config your workflow, and FaaS and multiple framework are well supported.
Firebase, it belongs to Google, there is no doubt Google will limit the free tier and charge you more in the next a few years.
Lately I've been enjoying KubeSail's (https://kubesail.com/) free tier for playing around with some SSR things. A lot of the lambda like services don't do great with doing realtime stuff since they're just meant to run one piece of code then die a few seconds later
Thanks so much for the shoutout!
Another way to handle this is by delegating the management of long-lived connections to a separate infrastructure layer. Then it's fine if the app runs/dies all the time, since it only needs to run when there's client activity. Some options are Fanout (disclosure: I'm its founder) and AWS API Gateway.
This reminded me of one of my projects, http://hasgluten.com, kind of forgotten but still up & running on github pages since I learned react 6y ago.
Code is here for the archeologists: https://github.com/hasgluten/hasgluten
I do no see mention of size limits in the article. I just checked Firebase and the free tier allows up to 1 GiB total.
Security is the other change. To run CGI allowed control of too much for any provider to be comfortable with it. Containerization and overall Operating System improvements allow for server-side code with safety (Spectre aside).
Great article and great opportunity for anyone that wants to start small on the cloud.
Netlify and Github Pages, for example, are capped at 100 GB of bandwidth per month. It's a very generous cap and ample for most use cases, but something to keep in mind as your projects gain traction.
I was looking for a solution where I can host Java Spring/ASP.net toy projects easily and none of them were satisfactory
(My point being you’ll need cloud flare DDOS protection or something similar, and I’m not sure I’d classify that as “super cheap” if we are comparing against “free”.
Don’t get me wrong, Cloud run is certainly an amazing product, I love it slot. It is also cheap to run as long as you don’t run into any hiccups. However, It’s ability to generate a personal $1000 or $10000 credit card bill disqualifies it from being a good candidate for small to medium projects. It is clearly an enterprise product.
It's configured to auto deploy from GitHub every time I merge to the "master" branch.
Works pretty well for my static site and it's free because I'm a solo founder therefore there's only one team member.
With a vps, you can do front and backend and host hundreds of low traffic websites.
I don't really understand what type of developer only does front end work or where do you host your backend stuff whjen you use Vercel / Netlify?
- Maintenance (zero)
- Auto deployment
- Global CDN
- Serverless functions can deal with spikes automatically, but cost zero when idle
In fact, I understand it enough and have felt the pain enough that I am actually working on a project that will help solve several of these issues for traditional server hosting. The only thing it won't have is a global cdn but that could potentially be added in the future as well.But I think a CDN is not needed for most projects actually and my service will focus on smaller to medium sized projects.
https://deployjs.com/ - but it's pretty far from even reaching an alpha release :)