teleren/devto huggingface dataset:
Micro-SaaS: single-feature 'vending machine' web apps
Tags: product, startup, webapps, decodingcoding
Published: 2021-10-19 23:43:41

---
title: Micro-SaaS: single-feature 'vending machine' web apps
published: true
description: What are the single feature apps that would be fun to make? Let's brainstorm! 
tags: product,  startups, webapps, decodingcoding
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdzcitc9bm6cx2u1bgpo.jpg
---

## *What are the single feature apps that would be fun to make? Let's brainstorm!*

---

Here’s one trend-setting [tweet](https://twitter.com/levelsio/status/893214998477983745?s=20) in 2017 by @levelsio:

> Here’s a new trend: fast food-type web apps. They’re single feature apps that do one thing, charge $ quickly and give instant gratification.
> 
> They have some characteristics:
> - tiny
> - single feature
> - no sign up
> - fast user flow (<1 min)
> - low price
> - charge $ quickly_
> 
> They grew out of the MVP trend, but we realized it’s not just us who like minimal, users like it too. No giant app with 100 features. A tiny app with 1 feature for one flat price. As a dev (or studio) you need about 10 of these (at $1,000/m-$5,000/m) to make a solid income ($10,000/m-$50,000/m). Homework exercise: think of something that you can charge $1-$5 for a single feature web app, that’s easily shareable and can go viral.
> 
> “I really love this trend — it makes websites feel like vending machines, in a good way.”
> 
> “Examples of fast-food apps: go to fiverr or ifttt and explore those small gigs/jobs which have users. E.g your resume as an infographics etc”

I love the entire thread. A treasure throve of ideas and inspiration for micro-SaaS. I love the idea of a single feature app, easy to code, and low bar to purchase. On top of that, single feature means less support needed, and less maintenance too. To be honest, making a full-featured SaaS feels daunting for me now, so breaking down the learning journey into smaller steps like this makes it more approachable. 

Since he gave homework, I thought a little brainstorm would be fun:

* Mindful work bell timer
* Google Analytics counter widget to show just page views / users
* Collections for Twitter bookmarks
* Nocode tool to create simple Chrome extensions that show content
* Nagging web app to email/sms/message you multiple times per day until you complete the task
* Embeddable blog that works on Carrd
* Embeddable calendars on Carrd/JAMstack
* Embeddable news tickers or banners on Carrd/JAMstack
* Embeddable polls on Carrd/JAMstack
* Embeddable upload form on Carrd/JAMstack
* Embeddable sliders on Carrd/JAMstack
* Embeddable maps on Carrd/JAMstack
* Embeddable floating buy/subscribe buttons on Carrd/JAMstack
* Convert PDF to fillable PDF
* Convert PDF to Excel/Word
* Convert Excel calculator into web app/page

*What else? Any ideas for a single-feature web app that will help you?*

---

Follow my daily writings on [Lifelog](https://golifelog.com/goals/30), where I write about learning to code, goals, productivity, indie hacking and tech for good.
2021 Hacktoberfest - AppScan CodeSweep for GitHub Live Show
Published: 2021-10-19 23:38:45

Tune in tomorrow for our newest #hacktoberfest2021 AppScan Lunch & Learn! Get an introduction to our new open-source security software, AppScan CodeSweep, and our cloud-based security software, AppScan on Cloud (ASoC). You can also look forward to a demonstration on how these two solutions can work together to optimize your application security framework.

Register Today!
https://lnkd.in/dFFDh4DC
React Typescript conditional rendering using objects
Tags: react, javascript, typescript
Published: 2021-10-19 23:34:10

Lately, I've been looking for a better way to write clean conditional rendering code instead of ternary and && operators and even if statements, because sometimes they can be confusing and I found that I can write the same functionality with objects, it makes the code more readable. let's see how we can write a well-typed object to render a component based on the parent component state and props

``` javascript
export default function Products({state}:ProductsStateEnum)
:ReactElement {
const [_ProductsState, setProductsState] = useState(state)
  const ProductsState: { [key in ProductsStateEnum]: ReactElement } = {
    loading: <Loader width={150} />,
    failed: (
      <div>
          <Badge bg='danger'>Somethig Went Wrong</Badge>
      </div>
    ),
    done: (
      <>
        {products?.map(
          ({ id, title, image, description, category, price }) => (
            <ProductCard
              key={id}
              id={id}
              title={title}
              description={description}
              category={category}
              price={price}
              image={image}
            />
          )
        )}
      </>
    )
  }

  return <div className='row p-3'>{ProductsState[_ProductsState]}</div>
}
```
We notice here that we didn't write any if statement or any operator, based on the state the component will render the React component with key that's equal to the **_ProductsState**,

Another and better solution from [lukeshiru](https://dev.to/lukeshiru) is using functions/components 
```javascript 
import type { FC } from "react";

type State = "loading" | "failed" | "done";
type ProductsProps = { readonly state?: State };

export const Products: FC<ProductsProps> = ({ state = "loading" }) => {
    const ProductsState = (
        {
            loading: () => {/* Your loading code here */},
            failed: () => {/* Your failed code here */},
            done: () => {/* Your done code here */}
        } as Record<State, FC>
    )[state];

    return (
        <div className="row p-3">
            <ProductsState />
        </div>
    );
};
```
in the above code we can render only the exact state components when needed.

tell me if you know another way to write readable conditional rendering options!
Day 475 : Deep
Tags: hiphop, code, coding, lifelongdev
Published: 2021-10-19 22:23:05

_liner notes_:
- Professional : Had a couple of more meetings today. There was a town hall thing with all the employees and leadership. Reviewed some pull requests. Worked on hooking a demo application to a back-end server. Not a bad day.

- Personal : Last night, I did some work on my side project. Went down a rabbit hole. I may have ran into an issue with the service worker that could derail the whole project. May have found some alternatives, but need to dig deep to see if it'll work for my use case.

![A dirt patch though a forest in Papudo, Chile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlfsr6zxh0c79lqts0ao.jpg)

Got a meeting with a friend a little later about a possible project in the future. Going to go through some tracks for the radio show. Probably do more research on a workaround for the issue I ran into. Also want to watch an episode of "Squid Game". Been a minute since I watch an episode.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube PjhgVyCwb6U %}
Automatically add the Hacktoberfest tag to all of your GitHub repositories
Tags: hacktoberfest, kotlin, ktor
Published: 2021-12-16 19:25:23

---
title: Automatically add the Hacktoberfest tag to all of your GitHub repositories
published: true
date: 2021-10-19 22:13:06 UTC
tags: hacktoberfest,kotlin,ktor
canonical_url: https://lengrand.fr/automatically-add-the-hacktoberfest-tag-to-all-of-your-github-repositories/
---

 ![Automatically add the Hacktoberfest tag to all of your GitHub repositories](https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDF8fGdpdGh1YnxlbnwwfHx8fDE2MzQ2ODE0OTQ&ixlib=rb-1.2.1&q=80&w=1080)

_TL;DR : Clone [this](https://github.com/jlengrand/kotlin-samples/tree/main/kotlin-github-hacktoberfest-tags), change the input variables and run_

I'm sure you know it already, it's [#hacktoberfest](https://hacktoberfest.digitalocean.com/) season!

We're welcoming pull requests at Adyen, and we have quite a few repositories. So as any engineer would do,  I spent an hour automating something I could have done in 10 minutes! Here is a small utility that finds all the repositories you are an owner of, and add the Hacktoberfest topic to them :).

I really like Kotlin, and today was the Kotlin Premiere event (lots of good stuff announced btw, have a look!) so that's the language I decided to go for. Instead of using the Java GitHub API, I went barebones with a [Ktor client](https://ktor.io/docs/getting-started-ktor-client.html) and the default kotlinx serialization.

You can find the complete code [here](https://github.com/jlengrand/kotlin-samples/tree/main/kotlin-github-hacktoberfest-tags), it's not super complicated :). Here it is, in all of its glory :

<!--kg-card-begin: image-->

![Automatically add the Hacktoberfest tag to all of your GitHub repositories](https://lengrand.fr/content/images/2021/10/image-2.png)

<!--kg-card-end: image-->

A few things I learnt tonight :

- It is quite easy to remap the JSON payload of the requests when deserializing using  the `@SerialName` annotation.
- Don't forget to use the _`ignoreUnknownKeys`_ if you go for minimal interfaces, at the risk of spending some time searching why your deserialization fails.
- Using enums as strings is quite seemless, no need for the toString methods. Nice!
- Also nice to see that you can easily add elements to immutable list (well, return a new immutable list with the new element added) simply using the `+` operator.  I tried it, coming from Elm and BOUM it worked! 

That's it! There isn't much more to say :). I know it can be improved and there is some slight duplication but for its use that's definitely good enough. If I'm motivated enough, I might try to see if I can make it multi-platform, that'd be fun!

Till next time!
Prometheus Additional Configs
Tags: monitoring, linux
Published: 2021-10-19 21:55:30

This is for the prometheus.service created 
```
[Unit]
Description=Prometheus
Wants=network-online.target
After=network-online.target

[Service]
User=ubuntu
Group=ubuntu
Type=simple
ExecStart=/usr/bin/prometheus \
    --config.file /etc/prometheus/prometheus.yml \
    --storage.tsdb.path /var/lib/prometheus/ \
    --storage.tsdb.retention=2d
    --web.console.templates=/etc/prometheus/consoles \
    --web.console.libraries=/etc/prometheus/console_libraries

[Install]
WantedBy=multi-user.target
```

***--storage.tsdb.path*** is for where logs will be stored
***--storage.tsdb.retention*** is for how long will the logs be stored


Other settings prometheus.yml
```
global:
  scrape_interval: 15s
  evaluation_interval: 15s
# Alertmanager configuration
alerting:
  alertmanagers:
  - static_configs:
    - targets:
      - alertmanager:9093

# Load rules once and periodically evaluate them according to the global 'evaluation_interval'.
rule_files:
  # - "first_rules.yml"
  # - "second_rules.yml"
    - "/etc/prometheus/mem_over.yml # A Rule for Alert noted below

scrape_configs:
  - job_name: 'prometheus'
    # scrape frequency
    scrape_interval: 1m
    static_configs:
      - targets: ['localhost:9090']
  - job_name: 'node'
    # scrape frequency
    scrape_interval: 1m
    static_configs:
      - targets: ['localhost:9100']

```


A Rule that can send alerts under conditions, mem_over.yml:
```
groups:
- name: Memory alarm rules
  rules:
  - alert: Memory usage alarm
    expr: (node_memory_MemTotal_bytes - (node_memory_MemFree_bytes+node_memory_Buffers_bytes+node_memory_Cached_bytes )) / node_memory_MemTotal_bytes * 100 > 80
    for: 1m
    labels:
      user: prometheus
      severity: warning
    annotations:
      description: "The server: Memory usage over 80%!(Current value: {{ $value }}%)"
```
Hash Tables
Tags: datastructures, hashtable
Published: 2021-10-17 10:41:18

> *In this article we are starting by example before digging deeper into hash tables.*
suppose a cashier working in a grocery store and need to know the price of an apple, he/she would find the price in a book. If the book is alphabetized he/she would use a simple search which would take O(n) time. And if the book is alphabetized he/she would use binary search to find price of apples which would take O(log n) time.
But what if the cashier is having an assistant, who memorize every item and its price, so it would take O(1) time.

##Hash Function
>hash function maps a string to a number. So a hash function can play the cashier assistant role, where he/she maps string **item** to number **price**. 
suppose we are having an array where we store the prices, we would give the hash function the apple price to be stored and the hash function would output number 0 which is the index where the apple price is stored in the array.

## Hash Table
>It is a complex data structure as it is a combination of a hash function and an array. hash tables consist of key and value.
`{"apple": 5, "banana": 3}`
_you don't have to implement a hash table yourself it is already implemented in most programming languages._

## Hash Table Use Cases
>#####Using hash tables for lookup
* the phone contact every name has a number associated to it.
* lookup for IP address that is associated with a web address.

>#####Preventing duplicate entries
* like voting system the same person cannot vote twice.

>#####Using hash table as a cache
* memorizing data instead of requesting it over and over.

##Collisions
> It is when two keys are assigned to the same slot in memory.
One way to deal with a collision, if multiple keys are assigned to the same slot, start a linked list at this slot.

##Performance 
>In the average case, hash tables have O(1) time complexity of everything!
Generate QR Code with PHP CodeBoxx
Tags: php
Published: 2021-10-19 21:15:32

Here's a quick video showing how I implemented Code Boxx PHP QR Code generator.  This involved MaterializeCSS and a problem with their modal feature.

{% youtube bPp-i2BnHgc %}

The QR code will be used for the WizBits shortened URL SaaS.  So shortened URLs will optionally have QR Codes.

Code Boxx
https://code-boxx.com/generate-qr-code-php/

MaterializeCSS
https://materializecss.com/modals.html

WizBits - ShortLink generator
https://wizbits.me

WizBits is created using low-code development tool Wizards Toolkit
https://wizardstoolkit.com
Getting through a Bootcamp
Published: 2021-10-19 20:59:09

I did it! I have finished the full course with Flatiron getting through all 5 mods! I came in knowing nothing about ruby to fully understanding it and growing my knowledge of JavaScript. What next? I'm now working on a new project taking my first project which was a ruby cli and giving it a user UI with React. I will be pulling from a starwars API to take in data to display to the user to info about 6 different categories. 

I want to take my knowledge I learned from React in mod5 and grow on that with hooks. I want to keep learning and build more projects to keep code fresh in my mind. I want to start learning Node.js as a backend server as its liter to use over something like Rails. I also might want to pick up python also. I can't wait to see what life throughs at me next!
The "new" Nullpointer Exception in Java 17
Tags: java, news, programming, productivity
Published: 2021-10-19 20:54:09

As a java developer everyone should know the **Nullpointer Exception** or NPE. It is that one thing, you always should try to prevent from happening. In some cases it means that you need to debug your code to find the little mistake that happened. 
The NPE is a runtime exception which is thrown when your code wants to use an object or an object reference that has a null value. That can be if simply no value is assigned or a object is without reference.

Before the newest version of the openJdk (version 17) the common Nullpointer Exception looked something like this in your stack-trace:
```
java.lang.NullPointerException: null
```
Probably theres much more on you stack-trace going on but this is it.
As you can see it does not indicate where or why your npe occurred.

Help is on the way!
Watch how Java 17 Handles this:

```
Exception in thread "main" java.lang.NullPointerException:
Cannot assign field "i" because "a" is null
at Prog.main(Prog.java:5)
```

In this example the exception pinpoints out **where** and **what** our null object reference is.

Just that simple! 


As all of my posts this was also written on my [private blog](https://www.harun-sevinc.com) where i try to write useful posts for developers.

Or just follow me on [twitter](https://twitter.com/harsvnc) or dm me 

Cheers!
How to fix Helm's "Upgrade Failed: has no deployed releases" error
Tags: sre, devops, kubernetes
Published: 2021-10-19 20:36:47

When you are using the command `helm upgrade --install`, you may think that it will always work and rollback in case of a failure. But sometimes, it happens that another error can appear.

## Upgrade error
> Error: UPGRADE FAILED: "..." has no deployed releases

The first time you will see it, you may don't understand what's going on. Especially if it's you already install multiple release of a project with the same command, because you will see all your elements on your cluster and the secrets related to each releases.

## How to correct it
### Update secret
To correct it, it's quite easy. You just need to update the last secret related to your release. 

In it, there is a **label** called **status**. 

Change its value to **deployed**, then reuse your "helm upgrade --install" command and it will works !

#### Use a Kubernetes command
You can use the following command to resolve your issue directly

> kubectl patch secret *[release secret]* --type=merge -p '{"metadata":{"labels":{"status":"deployed"}}}' -n *[namespace]*

### Recreate release
Another way to correct this issue is to delete the release 

> helm uninstall *[release name]*

and reinstall it.

> helm install *[release name]* ...
>
> *or*
>
> helm upgrade --install *[release name]* ...


⚠ **WARNING** ⚠

***If you are using this solution, you must be aware that the service deployed with the release will be unavailable during a period of time!***

I'm talking about this possibility, just let you aware about this possibility.

---

I hope it will help you! 🍺
I built my first dApp!
Tags: dapp, web3, react
Published: 2021-10-19 20:00:48

This past weekend I completed a [web3](https://www.freecodecamp.org/news/what-is-web3/) project from the awesome folks at [buildspace](https://buildspace.so).

The project was building out a [dapp](https://ethereum.org/en/developers/docs/dapps/) that allows you to send messages and store them on the blockchain. Under the hood, it was [Solidity](https://github.com/ethereum/solidity) for the [smart contract](https://ethereum.org/en/developers/docs/smart-contracts/), TypeScript, [NEXT.js](https://nextjs.org/), [Theme UI](https://theme-ui.com/), good old semantic markup, and a splash of ARIA in the frontend. Shoutout to the `<details />` element! Aside from that, some other web3 goodies like [hardhat](https://hardhat.org).

The buildspace projects have really straightforward instructions. I did go a bit rogue though. I recently created a web3 starter, and decided to use that as the base for my first foray into dapp development.

{%github https://github.com/nickytonline/web3-starter %}

I also decided to make the project my own and made some modifications. For one, I added another field for the message in the smart contract for storing a URL. I was doing this quickly, so just opted to use images from a funny site I love, [http.cat](https://http.cat).

![An open message on pics.iamdeveloper.com showing a picture of a cat in the message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5en7a1fzcyrmikyjmj9k.png)
 
The code is still a bit scrappy as it really was a weekend project, but I'm still happy with how it turned out. I've made some tweaks since then, but there's still a bunch of refactoring to do. 😅

If you're into TypeScript, there's a couple examples of declaration merging [like this one to get the `<marquee />` element in JSX](https://github.com/nickytonline/picture-portal/blob/main/@types/global.d.ts#L3-L10).

The dapp is live running the contract off the [Rinkeby network](https://www.rinkeby.io/). Feel free to check out the dapp's source code.

{%github https://github.com/nickytonline/picture-portal %}

And while you're here, check out the live dapp at [pics.iamdeveloper.com](https://pics.iamdeveloper.com)!

![The picture portal site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsmhsmo18sfdtji14ydw.png)
Background: Updating a Dice Rolling App
Published: 2021-10-19 19:49:17

One of my favorite parts of coding is getting to dig into existing code. Adding functionality. Debugging. Really getting to figure out how a piece of code works. It's been a while since I have done that but recently I got a chance to flex that muscle.

No code in this post, this is just about the project. It's a small one but this will explain what I had to do.

##Background: Role Playing Games and Dice

My friends and I casually play different role playing games over slack. If you haven't played role playing games it's kind of like playing pretend, you create a character with certain skills and you interact in a world and with other players to explore that world. Often there are times when you need to bring luck into play (are you able to defeat someone in battle, hack into a computer, recognize a dialect) and when that happens you roll dice.

##More Background: Rolling

Slack has a nice app for rolling dice that you can use. You type /roll to start the slash command and then list out the specific dice you want to roll.

So like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gz9v4vq4znrhg1p4ljhi.png)

This works great. But my friends and I play games that use dice a little differently. So when we started needing dice to roll differently a friend of mine built a custom dice rolling app for Slack to do the job. For example this code rolls percentiles where you can ask it to roll an extra die for a bonus. The bonus die replaces the tens place if it's lower helping you get a low roll. Like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slh4yku20ytj4zi1rh96.png)

This is a custom app so we aren't using the built in /roll slash command but our own /r slash command. The c signifies that it's using the percentiles roll for this different game. The b signifies roll a bonus die. You can also roll a penalty die with a p. And this app also rolls normal dice like the built in app so we don't need to go back and forth between applications.

##Background: a new game

So we started playing a new game. In this game the dice exploded. That means if you rolled a max value, you had to roll the die again and the total was what you rolled. So if you roll a 6 on a 6 sided die you can roll again and if you get a 3 that time your actual roll was a 9. The built in roll app can do this, so we considered going back to that built in app. But after a little playing we realized it doesn't handle multiple rolls the way we wanted it to.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dbsom4mbi5l82ibx9mv.png)

So it rolls both dice, and explodes them nicely BUT it gives you a total of both dice when we frequently found we wanted two separate subtotals.

So it was decided we should update our custom app. My friend who wrote the code didn't have time to update it but offered to share the javascript code with me so I could update it. In my next post I'll step through how I attacked this fun job.