teleren/devto huggingface dataset:
I visualized 8 lessons from 1 year doing indie development
Published: 2022-04-14 18:31:46

---
title: I visualized 8 lessons from 1 year doing indie development
published: true
description: visualize,indie,app,development
tags: 
//cover_image: https://direct_url_to_image.jpg
---

It's been a year since I returned to Twitter and started making apps seriously.

What I've got besides 💰💸? Lots of new friends and valuable lessons along the way 🥰

It all started with a change in mindset ⚡️

Therefore I've made these 8 visuals to share what I've learned

1. Take risk. 
If you're so afraid to make mistake, you've already made your 1st mistake.
When you win, you win. 
When you fail, you've learned yourself a lesson.

![](https://pbs.twimg.com/media/FQUCa2yVQAESdGD?format=jpg&name=large)

2. Build in public

Don't start with an idea and build in the dark.
Build in public, validate and reiterate your ideas, together with your audience.

![](https://pbs.twimg.com/media/FQUCbVcVcAAn34E?format=jpg&name=large)

3. Just do it

There are no unique ideas. It's all about execution.
When in doubt, start small, start many.

![](https://pbs.twimg.com/media/FQUCb2EVQAclfwO?format=jpg&name=large)

4. The maker mindset

When people complain, you realize the problem. Make a solution that heals their pain.

![](https://pbs.twimg.com/media/FQUCcTHUcAg057X?format=jpg&name=large)

5. In the community

Twitter is all about the community, the relation.

Don't shout to the void. Make friends. Interact with people. Grow together.

![](https://pbs.twimg.com/media/FQUCcx3VcAgZC_v?format=jpg&name=medium)

6. Give, then ask.

To give is to receive.

![](https://pbs.twimg.com/media/FQUCdM7VkAIPJrH?format=jpg&name=medium)

7. Build. Fail. Learn.

Learning without doing is a waste of time. Only learning is a sign of procrastination.

Build something. You will learn a lot along the way. All the practical lessons that you can't learn from books.

![](https://pbs.twimg.com/media/FQUCdnDVgAMviPf?format=jpg&name=large)

8. You may be able to do anything, but you cannot do everything

Time is a limited resource. 
Successful people say no most of the time.
Spend your time on things that truly matter

![](https://pbs.twimg.com/media/FQUCeC3VUAQIZCB?format=jpg&name=large)

Thanks for reading. If you love this sharing, please say hi on Twitter as well https://twitter.com/onmyway133
Conditional Rails Serializers
Tags: beginners, rails
Published: 2022-04-14 18:13:26

Over the last few weeks while learning Ruby on Rails, one of my most common searches was serializer. The issue I came across most frequently was trying to use serializer on only one action in a model, while not using it on the other. 

Here is an example to show the issue I came across and how I solved it. The model I was working on was Episodes, and the two actions I was working on were show and index. I was looking to display all of my episodes along with their attributes with the _index_ action. And I was looking to display only one episode with the _show_ action, but also with the nested Guest information associated with that episode. When I tried to utilize a serializer in the show action, it affected my index action as well. 

In order to get around this, I used a flag in my serializer. Using a flag in the serializer with a condition allows you to restrict the serializer from applying to the action where you do not want it to apply. Below is the code in my serializer and my controller. 

```
class EpisodeSerializer < ActiveModel::Serializer
  attributes :id, :date, :number

  has_many :guests, if: :condition

  def condition
    @instance_options[:flag] != "restrict"
  end
  
end
```

```
class EpisodesController < ApplicationController

    def index 
        @episode = Episode.all
        render json: @episode, flag: "restrict", status: :ok
    end


    def show 
        episode = Episode.find(params[:id])
        render json: episode, serializers: EpisodeSerializer, status: :ok
    end
end
```
Below is the response for the index action, showing only the episode data:
```
[
    {
        "id": 1,
        "date": "1/11/99",
        "number": 1
    },
    {
        "id": 2,
        "date": "1/12/99",
        "number": 2
    },
......
```

Below is the response for the show action for one episode with the nested guest data as a result of the episode serializer: 

```
{
    "id": 1,
    "date": "1/11/99",
    "number": 1,
    "guests": [
        {
            "id": 1,
            "name": "Michael J. Fox",
            "occupation": "actor"
        }
    ]
}
```



This is my first blog post and I am new to Rails so if there are any suggestions, please feel free to leave a comment below!
github action generating version tag out of order
Published: 2022-04-14 18:12:30

I have an existing repository with 150 commits and latest release as v3.00 which was created manually. moving forward I want to use github action to automate that process but the below code when used with my existing repo, is creating a version tag out of order v0.1.0.please how can i fix this issue.
~~~
on:
  push:
   branches:
     - master

jobs:
  release:
   runs-on: ubuntu-latest

   steps:
    - name: checkout
      uses: actions/checkout@v2

    - name: conventional changelog action
      id: changelog
      uses: TriPSs/conventional-changelog-action@latest
      with:
        github-token: `"${{ secrets.GITHUB_TOKEN }}"`

    - name: create release
      uses: softprops/action-gh-release@v1
      if: `${{steps.changelog.outputs.skipped == 'false'}}`
      env:
        GITHUB_TOKEN: `${{ secrets.GITHUB_TOKEN }}`
      with:
          tag_name: `${{ steps.changelog.outputs.tag }}`
          name: `${{ steps.changelog.outputs.tag }}`
          body: `${{steps.changelog.outputs.clean_changelog}}`
          draft: false
          prerelease: false
Status Player with React
Tags: javascript, react, nextjs
Published: 2022-04-14 18:09:38

Lets first figure out how many components are there in our system.
First there is this top bar seperated into pieces according to the number of items or "statuses".
Second is the block displaying the status item. For now we just have scaled it for images and texts.

Lets start by designing the top bar
First of, what would we call the animated white bars. Ummm! lets call them simply bars.
What I did was, make a div flex container to hold all bars. Then loop through the statusArr create bar container i.e a div.
Now the outline is ready.

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

Now the animation
For every bar container, lets have a div with some animation. Just a normal animation with two layovers(0% and 100%). We are just increasing scale from 0 to 1.
But when are we adding this div to the container div?
When there is an increase in the counter(currItem) which I am going to cover in sometime. Here the counter is the single source of truth.

Lets now build the block, where our status item is displayed. Not going deep into styling it, let dive into the logic.
We are maintaining two state variable named statusArr(array) that you must have came across previously and currItem to keep track of the current status item . However we aren't changing anything by adding or removing to the array, we are using state to scale in future.

In the mounting stage(useEffect with empty array as dependency), we are running a loop over the statusArr, add a setTimeout with some delay(say i*1000), here i is the current index of the loop. Inside the callback, update the currItem. This way in some interval, the currItem is updating thus adding animated div(bar) to the container div and updating the status item to statusArr[currItem]. Hooray!!

But wait, what is happening. The image has not loaded yet, but the top animation is done and the currItem is updated and we are in next item.
How can we solve that?
Will preloading the image work? But how?
We can load all images but show only when the currItem is equal to the current item index. This way image loading improves but the issue persist. How can we stall the process until the image is completely loaded.
Recursion! So for each loop inside our useEffect, lets check if it is an image and if image, is it loaded completely using the standard approach(image.complete && image.naturalHeight !== 0). If loaded then fine, but if not call the checkLoad function which is a utility function that checks if an image is loaded or not and break from the loop. Add some delay so that the calls are made only after some and the Call-Stack is not exhausted. Inside the utility function start from the index from where you left and repeat the whole process.

Cool! Now no more disparity between the components and also the process stalls if the image is not loaded.

**Preview**
{% vimeo 699538954 %}
Django Tutorial Part 6 -- polls アプリでテーブルの中身を好きな順番で並べる
Tags: django
Published: 2022-04-14 17:50:28


https://docs.djangoproject.com/en/4.0/intro/tutorial03/#write-views-that-actually-do-something


```py
from django.shortcuts import render
from django.http import HttpResponse
from .models import Question

def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:3]
    output = ', '.join([q.question_text for q in latest_question_list])
    return HttpResponse(output)
```

Question テーブルを models からインポート

```php
<QuerySet [
  <Question: What's new?>, <Question: Question 2>,
  <Question: Questions 3>, <Question: Questions 4>
]>
```

Question の objects を作成日順に 3 つまでに制限して取得する。

```php
["What's new?", 'Question 2', 'Questions 3', 'Questions 4']
```

`, ` で 先ほどのリストを展開したものを連結する

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

admin でみると Questinons 4 まである状態でも

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

最新の 4 から 2 まで 3 つだけ並んだ。

```py
latest_question_list = Question.objects.order_by('-pub_date')[:4]
```

これを 4 に変更すると

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

一番古い、最新から 4 つ目の question_text まで並んだ。

```py
latest_question_list = Question.objects.order_by('pub_date')[:4]
```

`-pub_date` を `pub_date` に変更すると、

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

古い順で並ぶ。

```py
output = ' | '.join(
  [q.question_text for q in latest_question_list]
)
```

区切りを ` | ` に変更すると

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

これで区切られる。view を気にするのはフロントの仕事になるので、こうやってみやすい区切り文字に変更することはないと思うが。

次回は template。
polls/template/index.html を view に組み込み、テーブルのデータを HTML に渡すようにする。
How to Get the URL for Pictures
Tags: tutorial, productivity, opensource
Published: 2022-04-14 17:50:28

- In your favorite search engine, type whatever you want a picture of and press `Enter` (Windows) or `return` (Mac).

![duck enter](https://i.ibb.co/PgCyL8Y/Screen-Shot-2022-04-14-at-1-39-49-PM.png)

- Left-click on the search engine's `Image` tab.

![duck images](https://i.ibb.co/y4DgdV2/Screen-Shot-2022-04-14-at-1-40-05-PM.png)

- Left-click on any picture to bring it up.

![Duck left click](https://i.ibb.co/Yj416vY/Screen-Shot-2022-04-14-at-1-40-47-PM.png)

- Right-click the picture for options and left-click `Copy Image Address`

![Duck right click](https://i.ibb.co/Bn2gP1p/Screen-Shot-2022-04-14-at-1-41-09-PM.png)

- Press `ctrl + v` (Windows) or `Command + v` (Mac) to paste the image address wherever you need it.
Converting path params to query params in Spring Cloud Gateway
Tags: spring, gateway, route, microservices
Published: 2022-04-14 17:21:58

#Problem Statement

How can I convert path-params on the incoming request to query params for one of your APIs.

## TL;DR

```
.filters(fs -> fs.rewritePath("/(?<country>.\\S+)/(?<locale>.\\S+)/v(?<version>\\d+)/my-endpoint(?<queryParams>.*)",
                        "/api/v2/my-endpoint?locale=${locale}&country=${country}&"))
```

## Solution

API evolution is part of Microservices based development. One of our APIs used to have locale and country as path params. As we were writing a new version of the same API, we decided to have those path-params passed on as query-params instead.

In order to support migration from old to the newer version we decided to add `gateway` between the clients and two versions of the API.

The challenge now becomes that the client will keep sending the locale and country information like before but we need to somehow convert those params before calling the newer version. 

Surprisingly, we were able to do that with relative ease. All you need is the following `FilterSpec` being added to your `route` - 

```
.filters(fs -> fs.rewritePath("/(?<country>.\\S+)/(?<locale>.\\S+)/v(?<version>\\d+)/my-endpoint(?<queryParams>.*)",
                        "/api/v2/my-endpoint?locale=${locale}&country=${country}&"))
```

With that in place the our gateway is now able to route the request to both the versions of our API without any impact on the client. Here are some logs collected for the gateway application - 

```
Incoming request http://localhost:8081/us/en/v1/my-endpoint?channel=WEB is routed to id: my-api-v2-/us/en/v1/my-endpoint, uri:http://localhost:8080/api/v2/my-endpoint?locale=en&country=us&?channel=WEB
```

The above log statement was generated by using the code available on this [thread](https://stackoverflow.com/questions/54117061/springcloudgateway-log-incoming-request-url-and-corresponding-route-uri) on StackOverFlow
HOW TO RUN A SQL FILE AND CREATE A DATABASE
Tags: postgres, ubuntu
Published: 2022-04-14 17:04:35

It is not always a good practice to insert data with a psql command line. Creating a sql file and running it is sometimes easier.

First we create a file with .sql extension (with notepad for example).

```
DROP TABLE products;

create table products (id serial primary key, name varchar (50) not null, price varchar (50) not null);
 insert into products (name, price) values ('hamburger','10');
```
Why DROP TABLE? 
It would delete the previous table and rewrite it, otherwise it would cause en error.
Then we log into psql.

`run \i fastfoodshop.sql`

It is important to indicate the correct place of the file.

After that, check table and entries.

Wish you an easy coding!
How to make an API Query the Blockchain
Tags: blockchain, ethereum, api, javascript
Published: 2022-04-14 17:03:34

Blockchain makes data public to anyone however it can be a little tricky to access.

In this blog I’ll break down how to make API requests to blockchains, using Avalanche as an example.

Much of Avalanche’s API functionality requires you to have access to each Node’s permissions or to run your own node which currently has a startup staking fee of 2,000 AVAX or $126,000.

For developers who wish to access Avalanches on-chain data without staking their own node, the Avalanche team provides a public endpoint to make api requests.

[](https://docs.avax.network/build/tools/public-api/)

For this demonstration we will be request the latest block from Avalanche’s C-Chain.

Because the C-Chain is an instance of the Ethereum Virtual Machine powered, you can request much of the same information you could using GETH in Ethereum:

[](https://github.com/ethereum/execution-apis/tree/main/src/eth
)

## Let’s Get Started

To make things easy, we’ll first request the latest block curl. Using the first link above, we see we can request information from the C-chain using 
[](https://api.avax.network/ext/bc/C/rpc).

By browsing through the eth execution-apis in the second link we can use `eth_getBlockByNumber` to get the latest block data.

Putting it all together we get the following curl request:

`curl -X POST --data '{
     "jsonrpc":"2.0",
     "id"     :1,
     "method":"eth_getBlockByNumber",
     "params":["latest", false]
}' -H 'content-type:application/json;' https://api.avax.network/ext/bc/C/rpc`

If you open terminal, paste and enter this command you should get a response looking similar to this:

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

Congratulations! You just made a request to the Avalanche blockchain.

## Avalanche Request using HTTP Postman

If you prefer http requests, we can make the same request be using postman:

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

Paste in link and the body into Postman like in the screenshot above, then press Send.

You’ll get a response looking like this:

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

Just like before we can see the latest block’s gas fee, height, transaction hashes and more.

## We could also use Axios

`await axios.post(postUrl, {
     "jsonrpc": "2.0",
     "id": 1,
     "method": "eth_getBlockByNumber",
     "params": ["latest", false]
})
.then((res: any) => {
     console.log("AVAX BLOCK DATA: ", res.data.result)
})
.catch((err: any) => {
     console.log("err: ", err.response)
     return err
})`

Once you get the hang of it, requesting Avalanche and Ethereum chains is pretty straightforward and by using public APIs we can save a lot of resources.
My First YouTube Video | I am Back!!
Tags: youtube, python, flutter, news
Published: 2022-04-14 16:59:06

## Hi 👋
Hey folks, I am Yash Makan, a 17-year-old teenager whose life revolves around technology. I love creating and building stuff. I am a freelancer, online blogger, and app developer(in Bangalore based company) and now I have finally decided to start my own youtube channel. I am really excited and would love support from y’all. Here is my first video if you are interested.

{% embed https://youtu.be/ijGq7w2ZbJk %}

Now basically I have planned so much for this youtube channel so if you really don’t want to miss out on the content then make sure to subscribe so that I can pop on your feeds. In my upcoming videos, you can expect cool python projects related to NLP, machine learning, image processing, automation, backend development, flask, and Django. Also, you can expect videos on flutter/dart on app development, Figma frontend designs, the latest tech news (for me and you guys 😉) and one secret project that I can’t reveal right now but I can tell you one thing. It’s going to be **HUGE!.** I am really excited and if you guys have any ideas then do let me know in the discussion below. I will consider each one of your thought... Also, If you are not too excited till now and don’t use youtube often then worry not, for each of my videos, I will also create a blog post with all the code files or anything else so that you can bookmark the article and read later. So, I guess that’s it for today’s article I will meet you guys in the next video and blog post. Till then keep learning! 

PS: If you are on Twitter then you can follow [me](https://twitter.com/Yash_Makan) there as well I will be posting short tips related to programming in general there as well on daily basis.

### **For business enquiry**

yashmakan.work@gmail.com
v1 released: my do's and don'ts for the next
Tags: mobile, health
Published: 2022-04-14 16:51:02

Hi there, I am Preeda. 🖐️ Currently working for [**phoneFit**](https://phonefit.app). Recently, the first version has been released on iOS! (Android soon).

It is my second app I built for mobile platforms. And even though I have had got some lessons from building the first one, I still repeated some of the mistakes again.

So, next release just have to be better! 💪

—

My list of do's and don'ts, as to remind myself, is here as follows.

🚩 **Mistakes repeated:**
- still spent way too much time (than it should have been) on UI refinements and some performance optimization
- hesitated on pressing the release button

☀️ **Good thing done:**
- did not wait for a big launch / promotion. Just eventually simply launched it.

✅ **Do's:**
- maintain, even improve, the development cycle speed
- write more, blog more (still very few now)

✖️ **Don'ts:**
- don't spend too much time on refinements thing. Will try to improve the design specs, establish a standard

Feel like too much attention to details can be bad. It is time consuming. Definitely working on this aspect! 😆

—

In case you wonder what **phoneFit** is:

It is an app to help you do workouts / fitness with your Phone.

![phonefit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idvp7exranq3o8fxevlh.png)

You can find the app and learn more here: [phonefit.app](https://phonefit.app).

Have a nice day!
CREATE A TABLE ON A POSTGRESQL DATABASE
Tags: postgres, ubuntu
Published: 2022-04-14 16:51:01

First some useful commands:

list if databases:
`\l`

switch to a database:
`\c exampledatabase`

now it is time to create a table:
    `CREATE TABLE products (id serial primary key, name varchar (50) not null, price varchar (50) not null);`

we have a table but no entries, so:
`INSERT INTO products (name, price) VALUES ('hamburger','10');`

to check the tables:
`\dt`

and to see entries on our table:
`SELECT * FROM products`

wish you an easy coding!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejqhb1zvktpuivcsaduh.png)
Day-66 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-04-14 16:46:23

Date:14/04/2022
Day:Thursday

Today,I started at about 10:40 am as I was in progress of learning the course so, I started with it and firstly the instructor started with this keyword and firstly he defined it as this keyword is stated when a special variable is created for every function takes value of the owner function in which this is used and explained that this is not static it depends on the how function is called and its value is only assigned when the function is called after this the instructor started with implementing the this keyword in real time then he stated the diffence between regular function and arrow function in java script in regular function we need to mention the function keyword but in the arrow function we does not need to mention the function keyword and directly implement in form of arrow .after this the instructor started with the difference between primitives and reference types primitive types include number, string,boolean,undefined ,null, symbol,bigint and on other hand reference type includes object literal,array,
function, and many more after this I started the ninth module so, in this I started with destructuring the array  as we declare arrays in python as well so, to initialise or use them it is used via console log and after this the primary or secondary which ever entity we have to target. so, this way my day ended up and I got to learn many new things.