BinaryFish

Why the Default Mac App “Notes” is the best note-taking app in the world

Mon, 22 Jul 2024 00:00:00 GMT

In today’s world of Information Revolution, many note-taking apps are focused on certain domains. These apps can be as complex as Obsidian and as simple as Google Docs. There has also been a debate about which app people should use for note-taking.

Although Google Docs is the ultimate option for people with Windows, Linux, and Android, if you are a Mac user, the default “Notes” app is the optimal note-taking app you can ever have in your life. This is primarily due to its simplicity. There are many aspects to the “Notes app” being an excellent option for Apple users, and this article aims to explain its critical factors.

Why Apple Notes?

The note app is probably the best in the world for its simplicity. While apps like Obsidian and Evernote allow users to sophisticate their writing, not many users are leveraging the app to the full extent. The Notes App, however, has a relatively simple UI- only 13 buttons to use for daily uses.

Compared with the UI of “Apple Notes”, Obsidian (one popular note-taking app)’s UI is very simple, yet it can be very unclear for users using the app for the first time.

The note that most people take doesn’t include any complex components like highlighters and quotes. It generally includes text and images, with some bullet points and headings.

Moreover, the Note app doesn’t require the internet to work. Although Google Docs and several other apps work with no internet, the Apple Notes has superior speed and stability in both online and offline situations.

Probably it is all that you need to create daily notes as simple as a shopping list. Another reason is the “Notes” app’s high security standards. Firstly, since it runs on local devices, there is a remarkably low risk of getting hacked online. (There is still a possibility that your Apple product gets hacked but…) This ensures a high level of privacy with some personal pieces of information.

In addition, by default, the Notes App supports password protection of notes. For instance, you can use your device password to lock your notes. Moreover, the app also lets you lock your notes using TouchID- one of the most secure methods to protect your notes even from friends and families.

Several apps let you keep your notes secure like Obsidian and Notion, however, it is only the “Mac Notes App” that has this safety measure by default.

The third and final reason to use the app “Apple Notes” is the ultimate ease of sharing between your friends, families, and other Apple devices you own. To share with other people, you can just click the share button and send it to anyone who has an Apple ID.

There are no other apps that let you see your notes as quickly and reliably as the “Apple Notes” app. I have used the Notion app to manage daily notes, but other than the times I need to make mathematical notes or complex notes with sub-pages, I now tend to use Apple Notes more. The speed at which I can look at & edit the notes is astonishing, and it just beats most apps in terms of speed and portability.

Extra information:

With the latest Apple OS(iPhone, iPad, and Mac), you can start your math calculations inside the note app. I live in Japan so I couldn’t test this on my Apple devices, but this seems practical in daily use.

Conclusion:

In essence, the default “Notes” app is the best note-taking app in the world for most uses. Unless anyone wants to create a complex line of math proofs and database-oriented notes, Apple Notes can do everything swiftly and securely. So if you are an Apple user, start using it now. There is also Meduim version of this article, so feel free to like that one as well! Thank you for reading 🚀

Looking for more information?

For anyone who wants to find out more about the “Apple Notes” pros, you can type in Apple Notes on YouTube or watch the video embedded below:

10 Stylish CSS Button ideas to put into your website

Mon, 12 Feb 2024 00:00:00 GMT

Estimated reading time: 5 minutes

Introduction

This guide is for any skill-level CSS programmer, to get some inspiration of button design for their website. Please read until the very end to get as much inspiration from this article as possible.

Sample with all buttons

Here is my code pen project that contains all the code for all the button ideas shown in this article.

Idea #1 Rich Shadowed Blue Button

First off is a simple blue button. It futures box shadow and translate Y function when hovered.

Idea #2 Gradient Button

Next up is the gradient button. Also, its decoration is simple compared to other CSS buttons, it is relatively simple to create and manage its style.

Idea #3 Red scaled button

The third idea is the red button with hover scaling transitions. It makes stronger boxshadow and bigger buttons when hovered. <iframe height="300" style="width: 100%;" scrolling="no" title="Border-transition" src="https://codepen.io/Fire-Dingo/embed/gOEZNbv?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Fire-Dingo/pen/gOEZNbv"> Border-transition</a> by Fire Dingo (<a href="https://codepen.io/Fire-Dingo">@Fire-Dingo</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>

Idea #4 Light shadowed button

A light shadow button with a special animation. <iframe height="300" style="width: 100%;" scrolling="no" title="Button4" src="https://codepen.io/Fire-Dingo/embed/gOEqRxK?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Fire-Dingo/pen/gOEqRxK"> Button4</a> by Fire Dingo (<a href="https://codepen.io/Fire-Dingo">@Fire-Dingo</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>

Idea #5 Simple Green Button

A simple green contained button for your website.

Idea #6 Gradient green button with animation

Idea #7 Yellow 3d Button

A yellow button that plays 3d like animation when hovered. <iframe height="300" style="width: 100%;" scrolling="no" title="orange 3d button" src="https://codepen.io/Fire-Dingo/embed/RwdvjOB?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Fire-Dingo/pen/RwdvjOB"> orange 3d button</a> by Fire Dingo (<a href="https://codepen.io/Fire-Dingo">@Fire-Dingo</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>

Idea #8 Color changing Button

A blue modern-styled button with a toon-like box-shadow when hovered.

Idea #9 Glowing dark blue button

A blue dark-themed button with a glow effect.

Idea #10 Round Glowing Blue Button

A round version of dark dark-themed button with a glow effect. <iframe height="300" style="width: 100%;" scrolling="no" title="Glowing Blue Button" src="https://codepen.io/Fire-Dingo/embed/WNmPYPq?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Fire-Dingo/pen/WNmPYPq"> Glowing Blue Button</a> by Fire Dingo (<a href="https://codepen.io/Fire-Dingo">@Fire-Dingo</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>

Conclusion

In this article, I showed 10 simple yet beautiful CSS button ideas. I will try to continue publishing CSS-only style ideas every two months or so, so please stay in tune for the next guide. Thank you for reading.

How to create a QR code in Canva

Tue, 09 Jul 2024 00:00:00 GMT

How to create a QR Code in Canva

In this guide, we will explore how you can create a QR code in Canva- a famous design app that allows anyone to create appealing designs in a minute.

Method 1: Using the app "Gen QR"

The first way to create a QR code inside the Canva app is by using an app called "Gen QR." While many Canva apps allow users to create a QR code, this app is one of the best. In addition to being able to make a QR code for your websites, this app lets you customize the design of the QR code itself. For instance, you can customize the margin of your QR code. After you modify the QR code, you can add it to your design by pressing the "Add to design" button.

Method 2: Using external websites to generate a QR code, then import it to Canva.

The next way to create a QR code is by importing a QR code that was created with websites outside of Canva. Yet, this method requires you to go outside of the production track, which is the primary reason why Binaryfish doesn't recommend this way. In addition, there are better ways to create a QR code- such as Method #1.

Method 3: Using AI to create an artistic QR code - "Hello QArt"

The third and last way to create a QR code in Canva is by using another app called "Hello QArt". This app is unique compared to all the other websites and apps because the AI generates a QR code with a picture like the photo below. Although you cannot control the result/output of the AI, it is still possible to make a unique QR code that stands out to your audience.

How to use the app "Hello QArt in a nutshell:

Copy & Paste the link you want people to go to when they scan the code.
Write some descriptions/prompts on types of drawing/art the AI should generate
Click Generate and wait.

With this step, you only have to do three simple steps to create an artistic QR code.

Conclusion

Although this guide was quite short, we summarized how you can create a QR code in Canva. If you can, supporting this blog through social media ( X, Instagram, Threads...) with #BinaryFish will be very helpful. Thank you for reading this article.

Image Attribution

Photo by <a href="https://unsplash.com/@alejandroortiz?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Alejandro Ortiz</a> on <a href="https://unsplash.com/photos/a-purple-and-blue-abstract-background-with-squares--xI7IFIp5Wo?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>

How to sort lists, tuples, and strings in Python

Mon, 29 Apr 2024 00:00:00 GMT

In this guide, you will learn how to use Python's sort() method and sorted() function to sort data sets. Sorting is an essential skill to become a professional programmer, and by the end of this article, you will be able to use this skill with ease.

Easiest way to sort (Method #1)

The simplest way to sort items in Python is using the sort method. Sorting with the sort method can be done like the code below.

numbers = [0,100,20,30,40,80,10]
numbers.sort()
print(numbers)
## Output: [0, 10, 20, 30, 40, 80, 100]

As you can see, the sort method quickly sorts any list in order. Now let's get into the argument that you could include to use in other situations like you want to sort from largest to smallest. You can do that by using the reverse argument. This option will reverse the order of sorting from largest to smallest.

The reverse argument can be used like the code below:


numbers = [0,100,20,30,40,80,10]
numbers.sort(reverse=True)
print(numbers)

## Output: [100, 80, 40, 30, 20, 10, 0]

To sort a list with strings, you can use the key argument. For example, the code below sorts the list of fruit in alphabetical order.

Fruits = ["Banana", "Apple", "Lemon"]
Fruits.sort(key=str.lower)
print(Fruits)
# Output => Apple Banana Lemon

The value str.lower converts the string value to lowercase.

With these examples now you understand how you can sort a list in Python. Yet, the sort() method only accepts a list as a data type. Then how should you sort other types of data structures like strings?

This is where the second method sorted() function comes in handy.

The alternative: Method #2 Sorted()

The sorted function is similar to the sort function except for its uses and how it doesn't destroy the original variable. Particularly, if you use the sort() function, it destroys the original list. This means that you will not be able to keep the original values in your list.

One example of the way you can use the sorted function is like the code below:

numbers = [0,100,20,30,40,80,10]
sortednumbers = sorted(numbers)
print(sortednumbers)

# The output: [100, 80, 40, 30, 20, 10, 0]

As mentioned earlier, you can use the sorted() function to sort other data types like tuples and strings.

For the tuple type variable, you can use the sorted() function in the same way as the list. For instance, you can sort your tuple in order using several lines of code like the example below:

tupleA = (10,10,20,30,50,9,1,2,8)
print(sorted(tupleA))
## Result: [1, 2, 8, 9, 10, 10, 20, 30, 50]

While it successfully arranged the values of a tuple variable in order, however, the sorted value is transferred into a list when it is sorted. To fix this issue and keep the variable in the tuple data type, you can use the tuple() function to convert the result back to the original tuple data type. This can be done in the upgraded version of the previous code:

tupleA = (10,10,20,30,50,9,1,2,8)
print(tuple(sorted(tupleA)))
## Result: (1, 2, 8, 9, 10, 10, 20, 30, 50)

Now let's move into how you can sort a string variable. Similar to how you can sort a tuple, you can sort a string by simply using the sort() function. By using the code shown below, you can sort a String into A-Z order:

Apple = "Apple"
print(sorted(Apple))
#Result: ['A', 'e', 'l', 'p', 'p']

Conclusion

In this article, we learned that:

You can use sort() method to quickly sort a list.
You can use the sorted() function to sort most datatypes.

Before ending this article, I want to note that supporting my blog through social media and linking to your website will be very helpful. Thank you for reading.

Image Attribution

Photo by <a href="https://unsplash.com/@fakurian?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Milad Fakurian</a> on <a href="https://unsplash.com/photos/blue-and-yellow-folder-icon-CN2FEPXERRI?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>

All Python String function explained

Sun, 04 Feb 2024 00:00:00 GMT

Estimated Reading time: 12 minutes

Introduction

In this guide, you will learn every single function that is integrated in string object. Read until the very end to become Python String master.

.capitalize()
.casefold()
.center()
.count()
.encode()

.capitalize()

Firstly, in Python we can use the capitalize() function to make the first letter in the sentence capitalized.

Input

S = "hello world"
#Print cpitalized string
print(S.capitalize())

Output

Hello world

.casefold()

Secondly, there is the casefold() function. This function allows user to decapitalize a capital letter(s) in a string object.

Input

S = "HELLO WORLD"
print(S.capitalize())

Output

hello world

.center()

Next, there is the center() function. This function can be used to center text in python. Additionally, the second argument can be used to insert specific letter in both letter before and letter after specific text.

Input

S = "BINARY FISH"
# Insert the total number of letter after the text is centered.
print(S.center(len(S)+4,"…"))

Output

……BINARY FISH……

.count()

The count() function can be used to count the number of specific word or phrases in given string object. For example, count() function will return 2 if the word is banana and 'n' is specified.

Input

S = "BANANA"
print(S.count("N"))

Output

.encode()

The encode() function is used to encodes the specific string using specific encoding method.(Default is utf-8).

Input

print('+-*÷'.encode('utf-8'))

Output

b'+-*\xc3\xb7'

Atcoder Beginners Contest 321 "Cutoff" explained

Sun, 17 Dec 2023 00:00:00 GMT

Problem

Here is a very very simplified version of this problem. If it seems like it is too complicated, please read the official text by clicking the link below.

There is a test that has "N" rounds

For each round, there is a score range of 0-100

The overall score is the sum of scores without the maximum and minimum

The score of the "i" round is expressed as Ai

How many points must you get to exceed X points?

If you can't exceed X points even when you get 100, print -1

Input N　X A1 A2 A3 .....

https://atcoder.jp/contests/abc321/tasks/abc321_b

Algorithm

So here is a detailed guide to this problem. Firstly, one thing to keep in mind when solving this problem is that like the image below, our total score is the sum of scores without the maximum and minimum scores.

Basically the only thing we have to do is to test every possibility for score "i" from 0-100. If we have a required score that is lower than 100, that's great and we can just print the score "i". On the other hand, even if score i of 100 can't reach score X, we can then print -1.

Below is the code that got AC.

Example Code in Python

This is the code that got AC on this problem. Feel free to read the comment that is attached to the code.

# -*- coding: utf-8 -*-
#Get Inputs
N, X = map(int, input().split())
As = [int(x) for x in input().split()]
#Sort As from the lowest to the highest
As = sorted(As)
#１００回繰り返す
for x in range(0,101):
    scorenow = As[0:len(As)]
    #↑Reset score to the default score
    scorenow.append(x)
    #Delete the maximum scores from total
    scorenow.remove(max(scorenow))
    #Then delete the minimum
    scorenow.remove(min(scorenow))
    #If score is bigger or equal to x, print the scoreneeded and exit
    if sum(scorenow) >= X:
        print(x)
        exit()
    else:
        continue
#If not, print negative one
print(-1)

How to get max and min value of an array in python.

Mon, 08 Jan 2024 00:00:00 GMT

Estimated Reading Time: 2 minutes

How to get the max and min values of an array in Python

In Python, you can create an array, full of functions to perform with. In this article, it will explain to you how to get the minimum and the maximum value of an array. This tip can be used for other data types, so make sure to read the whole page until the end.

How to get the minimum value

To get the minimum value of an array, you can use the min() function. The min() function will return the minimum value of a data set(including variables and arrays) given inside the brackets ().

scores = [0,100,200,300]
print(min(scores)) #returns 0, the smallest in the array "scores"
# = 0

How to get the maximum value

How to get the minimum value

To get the maximum value of an array, you can use the max() function. Just like the min() function, the min() function will return the maximum value of a data set(including variables and arrays) given inside the brackets ().

wins = [20,28,39,68]
print(max(wins)) #returns 68, the largest in the array "wins"
# = 0

Conclusion

Overall, it is pretty easy to get both the minimum and the maximum value of an array in Python. Yet, knowing this function makes a huge difference from the others that don't know. If this article was helpful, please consider sharing the link to your SNS. <br />Thank you for reading.

Atcoder Beginners Contest 346 Recap

Sun, 24 Mar 2024 00:00:00 GMT

Welcome Atcoders to BinaryFish! In this article, we will recap Atcoder Beginners Contest #346, diving into key ideas, detailed explainations, and more. Whether you participated in this contest or not, this article will help you with your journey of competitive programming. Let's dive in!

https://atcoder.jp/contests/abc346/tasks?lang=en

Problem A-> Adjacent Product

This problem had decent difficulty, but it should be a question that most coders can answer. Here is the problem.

You are given N integers $$ A_1, A_2,…,A_N $$ . Also define $$ B_i = A_i \times A_{i+1} (1≤i≤N-1)$$. Print $$B_1,B_2,...,B_{N-1}$$ in this order, separated by spaces.

Guide

So the only two things you have to do in order to solve this problem is

Create a list with every $$ A_i * A_{i+1} $$
Sperate the results with spaces, then print it.

It took about 7 minutes to get AC on this problem. My code is not the simplest way of solving this problem, but still I got it right.

Here is the code that does the two things and got AC on Atcoder.

Answer

# -*- coding: utf-8 -*-
# Get Inputs
N = int(input())
As = input().split()
# Array to store the results
Bs = []

# Cacuculate
for i in range(0,N-1):
    Bs.append(int(As[i])*int(As[i+1]))
# Bss is the variable that gets printed
Bss = ""
# For loop for formatting the answers
for i in range(0,len(Bs)):
    Bss = Bss +str(Bs[i] )  + " "
print(Bss)

Problem B => Piano

Problem B was the problem that I got stuck on. Usually, I am able to atleast correctly answer both A and B, but I couldn't in this competition. I strongly belives that this question is one of the hardest problem B in all of the Atcoder Beginners Contest. Still, I solved this problem afterwards so I will write a recap here.

Here is the problem.

There is an infinitely long piano keyboard. Is there a continuous segment within this keyboard that consists of W white keys and B black keys? Let S be the string formed by infinitely repeating the string wbwbwwbwbwbw. Is there a substring of S that consists of W occurrences of w and B occurrences of b?

Guide

So this problem is type of problem that has numerous way to solve it. For instance, the official explanation uses a strategy with mod, but here I used a simpler method inspired by code of a youtube @EbimaLabo. After the competition, I looked at his code and analyzed what was really happening. Here is the result of my analysis and adaptation to it.

Firstly, you have to create a reccuring String "Wbwbwwbwbwbw" that has exact length as length of original String and values of W and B. Next, test if the certain section of the String contains exact number of "w" as the given value. If there is a section, then print Yes, and if not print No.

That is the basic algorythm that is used to solve this problem. Here is my adapted code that got AC, (the original version from @ebimalabo).


# -*- coding: utf-8 -*-
Letter = "wbwbwwbwbwbw"

W,B = map(int,input().split())
NewString = Letter * (W+B)
answer = False
# Repeat 12 times (The length of original String)
for i in range(len(Letter)):
    answer |= NewString[i : i + W + B ].count("w") == W
# If answer is true then print Yes, if not print No
if answer:
    print("Yes")
else:
    print("No")

Full problem explaination by EbimaLabo

Here is a Youtube Video I found that explains every problem. This guide walked through only the As and Bs so if you need more guide, this would definently help. The audio is in Japanese, but it should be not be that hard to undertsand with auto translation of subtitles.

Conclusion

The contest 346 was a good contest, with new types of problems and skills I worked on. I apologize that I only put two questions in this guide, but it would be greatly appreciated if you can understand that I am a beginner Atcoder. Thank you for reading.

Atcoder Beginners Contest 349 Recap

Sun, 14 Apr 2024 00:00:00 GMT

How did you do in Atcoder Beginners Contest 349? For me, I got A and B correct and I gained AC on C after the competition. This guide will explain how I solved A through B during the competition, and how I got C after it. Let's dive in!

Problem A "Zero Sum Game"

Problem:

https://atcoder.jp/contests/abc349/tasks/abc349_a?lang=en

Guide

The problem A in this contest was somewhat convoluted. This is because to solve this question, you had to deeply understand what the problem was asking for and how to calculate it. Yet, it becomes so simple once you understand the fact that the order of the game doesn't affect the result. , I didn't understand this and I got stuck on this problem for a while until I finally noticed that it was a question that asked me to make a simple process to calculate the player's unknown points by calculating the number of wins and losses for other players.

The way I used to solve this problem is simple. I thought of the array As as a list with each person's number of victories. Then, I checked if the person[i] has won a lot or not (A>0), and if so delete the expected score by the score of person[i]. This goes for the opposite. If a person[i]'s score is negative, then I added their score to the expected score. And finally, I print out the expected score, and the code finish.

Here is a code that I got AC on this problem:

# -*- coding: utf-8 -*-
N = int(input())
As = list(map(int,input().split()))
answer = 0

for i in range(0,len(As)):
    if As[i] > 0:
        answer -= As[i]
        continue
    elif As[i] < 0:
        answer += abs(As[i])
        continue
print(answer)

Link to my submission (As a proof):

https://atcoder.jp/contests/abc349/submissions/52344057

Problem B "Commencement"

Next, I would like to discuss problem B. In my opinion, problem B was much easier to understand and solve than problem A. Let's take a look at the guide.

Problem

https://atcoder.jp/contests/abc349/tasks/abc349_b?lang=en

Guide

The way to solve Problem B is fairly simple. You have to create a list of letters with each letter's frequency and count the number of letters with the same frequency in the array letters. If all the number of letters with the same frequency is either 2 or 0, then the code prints Yes. If not, the code will print No.

To give more explanation on what I just said, let's take a look at the printed output of the list of "letters" in my code.

commencement
[2, 1, 3, 3, 2, 1]

As you can see, the list contains the frequency of each letter in a given word, starting with the frequency of 'c' and ending with the frequency of 't'. We can use this list inside a for loop to count the number of a number in the list. The code below is an example of a for loop that does this job perfectly.

for i in range(0,len(letters)):
    if letters.count(letters[i]) == 2:
        continue
    elif letters.count(letters[i]) == 0:
        continue
    else:
        print("No")
        exit()

For each turn, the code calculates the frequency of a specific letter in Letters[i] using the .count() method. If the returned value is either two or zero, the for loop continues; if the value is neither one of them, it stops the code by printing no.

Here is my code that got AC on this problem.

Code

# -*- coding: utf-8 -*-
S = input()
letters = []
alreadyused = []
for i in range(0,len(S)):
    if S[i] not in alreadyused:
        letters.append(S.count(S[i]))
        alreadyused.append(S[i])
        continue
    else:
        continue

for i in range(0,len(letters)):
    if letters.count(letters[i]) == 2:
        continue
    elif letters.count(letters[i]) == 0:
        continue
    else:
        print("No")
        exit()
print("Yes")
exit()

https://atcoder.jp/contests/abc349/submissions/52328192

Problem C "Airport code"

Finally, I would like to explain problem C "Airport code." This problem is one of my favorite C problems in Atcoder because of how this problem is really straightforward and also delightful. The link to the problem is attached below.

Problem

https://atcoder.jp/contests/abc349/tasks/abc349_c?lang=en

Guide

This problem is one of the simplest problems in the world. It gives you two values, S which tells the airport's name, and T which gives the airport's code. The problem asks one simple question: Is the given airport code a valid airport code? According to the problem, a valid airport code satisfies either of these two requirements.

The code is a capitalized version of the substring(it can have some distance- like Narita's code can be NRA).
The first two letters of the code are the capitalized version of a substring of S, and the third letter is X.

Now that we know what the question asks, it gets to "how?"

The "how" part can be done in multiple ways. The way I and a user from whom I got my code inspired was to run a for loop that checks for each letter in T with S. If it all matches three times or it matches two times but the third letter in T is "X", the code prints "Yes", and if this is not true then the code prints "No". Here is my version of this algorithm in code. Feel free to tweak some parts to understand how it works in detail.

S = input().upper()
T = input()
# Count=> The number of letters of T so that is in the airport's name
Count = 0
for i in S:
    if T[Count] == i:
        Count+=1
        if Count == 3:
            print("Yes")
            exit()
        elif Count == 2 and T[2] == "X":
            print("Yes")
            exit()
        else:
            continue
    else:
        continue
# If not all the letters in T were in the airport's name, then print no.
print("No")
exit()

Conclusion

In conclusion, Atcoder beginner's Contest 349 was another superb contest with lots of great problems and ways to solve them. There are millions of possibilities to solve each problem, so I recommend you look for other people's submissions in your language that are correct if you want to dig deep into other ways of solving these problems. I will be thrilled if someone finds this article useful. Thank you for reading.

Atcoder Beginners Contest 350 Recap

Wed, 24 Apr 2024 00:00:00 GMT

How did you do in Atcoder Beginners Contest 350? For me, I got A and B correct. My performance score was 362! This guide will explain how I solved A through B during the competition.

Problem A "Past ABCs"

Problem:

https://atcoder.jp/contests/abc350/tasks/abc350_a?lang=en

Guide

The problem A in this contest was somewhat easy. Probably this was the problem that most people got AC since in Atcoder Problems it is rated 32. The only thing you have to do is to check if it's a valid contest name that existed or not. This can be done by putting an if statement like this:

if S != "ABC316" and int(S[3:6]) <= 349 and int(S[3:6]) > 0 and "ABC" in S and len(S) == 6:

Other than that, the only thing you have to be careful about is some exceptions. For instance, ABC350 and ABC316 are not a valid contest name. So, the code prints "Yes" if it meets all the requirements and prints "No" if it doesn't. It is as simple as the code below.

# -*- coding: utf-8 -*-
S = input()
if S != "ABC316" and int(S[3:6]) <= 349 and int(S[3:6]) > 0 and "ABC" in S and len(S) == 6:
 print("Yes")
else:
 print("No")

Link to my submission (As a proof):

https://atcoder.jp/contests/abc350/submissions/52553391

Problem B "Dentist Aoki"

Next, I would like to discuss problem B. In my opinion, problem B was much easier to understand and solve than problem A. Let's take a look at the guide.

Problem

https://atcoder.jp/contests/abc350/tasks/abc350_b?lang=en

Guide

The way to solve Problem B is fairly simple. You have to create a list named teeth which holds either "0" or "1" depending on whether he has teeth in a specific position or not. First, we get the input from the problem using the code below.

N, Q = map(int,input().split())
Ts = list(map(int,input().split()))

Then when the teeth[i] is 0, the code changes the value to 1. And when it is the opposite, Teeth[i] changes to 1.

if Teeth[number] == 0:
 Teeth[number] = 1

After all the treatment is done (when the for loop finishes), the code prints the number 1 in the list.

print(Teeth.count(1))

Here is my code that got AC on this problem.

Code

# -*- coding: utf-8 -*-
N, Q = map(int,input().split())
Ts = list(map(int,input().split()))
Teeth = []
for i in range(0,N):
 Teeth.append(1)
for i in range(0,Q):
 number = Ts[i]-1
 if Teeth[number] == 0:
 Teeth[number] = 1
 continue
 if Teeth[number] == 1:
 Teeth[number] = 0
 continue
print(Teeth.count(1))

https://atcoder.jp/contests/abc350/submissions/52567991

Conclusion

In conclusion, Atcoder Beginner's Contest 350 was another awesome contest with lots of great problems and ways to solve them. There are millions of possibilities to solve each problem, so I recommend you look for other people's submissions in your language that are correct if you want to dig deep into other ways of solving these problems. I hope someone finds this article useful. Please consider sharing this page on your social media so you can support this blog. Thank you for reading.

About this blog

Sun, 03 Dec 2023 00:00:00 GMT

Welcome to Binary Fish, a blog all about learning Atcoder, web, and game development!! Here, I will share my learning journey as I build a new website and explore the world of computer science.

Goals for this blog

Before we get into goals and some of the basic directions of this blog, I just want to bring up this quote from Pablo Picasso.

Good artists copy, and great artists steal.

Like the quote above, the ultimate goal for this website is to become the website that you can steal and get better at coding.

Making things fun: Computer science can sometimes be boring because how you have to stare at your screen for hours. This blog's first goal is to resolve this by writing down as many ways to solve your issues or errors or wondering as you visit this website. Furthermore, this blog will hopefully be a website that helps you avoid mistakes that I made while going through this journey.
Be the big tree: This website will be the tree of knowledge and wisdom, with anyone to see and learn from.
Be the helper: this website's third and final goal is to keep everyone's passion and motivation through easy-to-read blog posts.

What's next

I will try to post as many articles and blog posts as I can. So look forward to new articles!!!!

A year in BinaryFish!!

Sat, 28 Dec 2024 00:00:00 GMT

Hello everyone!! This is SnowDingo from BinaryFish.

Although it's a bit late, I decided to write an article celebrating one year since the release of BinaryFish.

Looking back, my article from a year ago was quite short and lacked quality, but I've improved it over time.

Instead of dwelling on the past, I'd like to rapidly share some statistics:

Most Read Article: "How to get the maximum and minimum value of an array in Python"

https://binary-fish.vercel.app/blog/pythonmaxmin/

Best Page Viwes: 1173 in November

This article is very brief, but I want to extend a huge thanks to everyone who supported my blog this year. I aim to update this blog monthly, so please check out my articles in 2025!

Happy New Year!!

-By SnowDingo

Manim for the beginners - A complete guide to mainm a python library to make math animations

Thu, 04 Apr 2024 00:00:00 GMT

In this guide, you will learn the basics of manim, a python math animation library. Manim is really fun tool you can use, and you will be able to use the core parts after reading this article. Let's dive in!

Installation

To install manim, you have to run commands shown below in your Python envoirment. Please take a look at the official document for multiple platform installation of manim.

https://docs.manim.community/en/stable/installation.html

brew install py3cairo ffmpeg

brew install pango pkg-config scipy

pip3 install manim

Project 1- Displaying circle, cube, and triangle

As our first step at understanding Manim, let's try rendering three basic shapes with Create() animation. Manim provides several classes for basic shapes, such as these three shapes that we are going to display. To create a triangle, you can use the Triangle object. Yet, this line of code itself won't render a triangle on the screen. To solve this, we have to use the function self.play() to animate and show the object we are trying to show on the screen. In this case, I used Create() animation, which animates an object like it has been rendered. The rest of the code follows the same step, except for the previously created object.

from manim import *
 
class SquareToCircle(Scene):
    def construct(self):
        triangle = Triangle()
        self.play(Create(triangle))
        square = Square()
        self.play(Create(square))
        circle = Circle()
        self.play(Create(circle))

Once you have written the code, run the following command in your terminal.

manim -pql [filename].py [functionname]

Then, after several seconds new window should be popped up with following video.

Now that we know the very basic of manim, let's try animating texts.

Animating the texts

In Manim, you can use the Text() class to display a text, or equation on the screen. The text could be written in either a plain way or a LaTeX format supporting many mathematical symbols. If you follow several steps, you will be able to create this↓

Let's get started!

Firstly, try creating a variable called original equation, which stores the original form of the equation we want to animate.

    original equation= Text(r"2x = 4")

You may have noticed that there is r in front of the string object. Since we are displaying an equation, we are using the LaTeX format of text by putting r in front of the String. The LaTeX supports many math symbols and formulas, from the classic π to trig functions like cotangent. As I mentioned in the project 1, this itself won't display text on the screen. For this reason, we have to use Write() animation.

self.play(Write(original equation))

There are other alternatives for displaying text, like the FadeIn animation and GrowFromCenter(). Don't use the create() animation for displaying text though! When used to display the text, it will often lead to a disaster, like the photo below.

Now that we know how to animate and create Text in manim, let's work on the rest of our code. For the rest of the code, we can create two more variables, one for the step 2 equation and another for the final state. In addition, I used self.play(ApplyMethod(Text-variable-name.shift.Position) to move text upward- avoiding overlap of the text during the animation.

Here is the final code. Feel free to copy&paste and tweak some things to make this code your own!

from manim import *
 
class SquareToCircle(Scene):
    def construct(self):
        originalequation= Text(r"2x = 4")
        self.play(Write(originalequation))
        self.wait(0.5)
        self.play(ApplyMethod(originalequation.shift, UP))
        equation2 = Text(r"x=4/2")
        self.play(Write(equation2))
        self.play(FadeOut(originalequation))
        self.play(ApplyMethod(equation2.shift, UP))
        equation3 = Text(r"x=2")
        self.play(Write(equation3))
        self.wait(0.5)
        self.play(FadeOut(equation2))
        self.play(FadeOut(equation3))

Conclusion

In this guide, I explained the key concepts of Manim, with two simple animation projects that everyone can easily make and have fun tweaking it. I am sorry the article went through the concepts rapidly, I am planning to make a detailed article that explains more in detail for each concept so stay tuned! If you want more guidance on Manim or any other concepts in computer science, feel free to share this guide on your Social Media. Thank you for reading!

How to get started on Atcoder- a complete guide for coders

Wed, 06 Dec 2023 00:00:00 GMT

How to get started on Atcoder

In this article, you will learn how to get started on Atcoder
Estimated reading time: 12 minutes
Just as proof, the link to my Atcoder profile is pasted below

https://atcoder.jp/users/DINGOO

What is Atcoder?

Atcoder is a Japanese website that hosts weekly programming competitions. Although Atcoder is a Japanese website, it has decent English support as well. Atcoder has three main contests that they host regularly: Atcoder Beginners Contest (ABC contest), Atcoder Regular Contest(ARC), and Atcoder Heuristic Contest (AHC).
There are lots of other contests like the Atcoder Grand Contest that you can participate in, however, if you are a person who just started coding or Atcoder, participating mainly in Atcoder Beginners Contest is strongly recommended.

Some pros of starting Atcoder

So here are some of the very generalized bullet points of skills you can get while doing Atcoder.

You can learn more about your favorite programming languages like Python and C#.
You can learn some of the important algorithms that can help you in your real-world project.
Abstract thinking As you get better at Atcoder, you need more and more skills in thinking about the problem abstractly and simply.

The rating system of Atcoder

Before getting started on sign-up and competition, there is one more important thing in Atcoder. The rating system. In Atcoder, when you participate in a competition and solve problems, your ¨rating¨ either increases or decreases depending on how well you do in the competition. For every 400 points or rating, you become a new color.

0-400 Grey

401-800 Brown (Skill level about the same as a typical college student with computer science as their major)

801-1000 Green

1001-1600 Light Blue (People at this rank will most likely fill most of the needs of the average tech company)

1601-2000 Blue (The skill exceeds the general high-standard requirement of all the companies)

2001-2400 Yellow (From here, the level reaches a point where you are ready to be competitive)

2401-2800 Orange

2801-∞ Red (The highest color)

How to start your journey

Now that we know Atcoder, let's start the journey. This section will briefly summarize the process needed to start Atcoder from sign-up to how to guide participating in the contest.

Step 1: Create an Atcoder account

The first step for any competitor is to create an account. To do this, first visit the official Atcoder website listed below.

https://atcoder.jp/home

Then, there is a "sign up" button in the header, so click it like the image below.

Consequently, it will lead to the sign-up form, where you can fill out your new account username, password, and email. Some choices are optional, so only four of them are required. When you are ready, press the sign-up button to finalize the process.

If you have successfully created an Atcoder account, you have two choices; you can choose to wait for the competition or to try doing some sample problems before participating. From past experiences, doing some sample problems is strongly recommanded for anyone who started Atcoder.

Sample Problems

Here is the link to the practice problem. The website shows you all the steps and fundemental knowledge to participate in contests. The guide will not explain all the details here since there is better guide inside the practice contests.

https://atcoder.jp/contests/practice

Conclusion

When you are done with all of these steps, try participating competitions. It is hosted weekly, so participating every week will be helpfull with making a great start on your journey. If you want to solve past problems, Binary Fish offers several free guides, so make sure to check that out as well. Lastly, Rome isn't built on one day. Therefore try doing Atcoder consistently, and one day you will establish your own coding Roman empire. Thank you for reading.

【Unlock your daily creativity】- A beginner's guide to digital journaling with Obsidian in 2024.

Sun, 21 Apr 2024 00:00:00 GMT

In this guide, you will learn how you can use the Obsidian app to start your journaling habit for free. Make sure to follow our social media through Github and X. Let's dive into the world of digital journaling.

What is Obsidian?

Obsidian is a free note-taking app that you can download on most devices. Obsidian includes a wide variety of features from simple todos to advanced markdown editing. Similar to the famous app "Notion" Obsidian uses Markdown to create each note page.

Pricing

Obsidian is free for most uses. Obsidian doesn't require any sign-in, and it is free unless you want to do something commercial using Obsidian. While Obsidian has some premium options, it doesn't have a pay-block wall like most note-taking app does. Here is the list of things you have to pay to use and its price:

Commercial Use (50$)
Sync (4$ on yearly billing) - A plan in which you can sync your obsidian notes with two or more devices.
Publish (8$ on yearly billing) - A subscription where you can share your Obsidian file to the Internet.
Early Access (25$+) - A way to use the newest version of Obsidian

So, unless you want to use it in a other way than a personal note-taking app, you can confidently and safely use Obsidian as your favorite app.

You can download Obsidian from the link below.

https://obsidian.md

Why digital journaling?

Digital journaling can help you in many ways

Digital journaling can bring many benefits to you. First, using the digital journaling method can make it much easier for you to write a journal. There are other benefits to this like improving the privacy of your journal. Many scientists and wise leaders have proved journalism's effectiveness for many centuries. So, digital journaling is an online version of the classic diary technique.

Setting up Obsidian

Now let's get started on our journey. First, go to

https://obsidian.md/

to download Obsidian on your devices. Then, launch Obsidian. After you launch Obsidian, you can probably see this screen.

This is Obsidian's start page. You have to follow several simple steps to start journaling. The first step is to create something called vault. Like what the name suggests, the vault acts as a folder/container that stores all of your related notes in one place. You can create multiple vaults, making it easy to organize your everyday notes. For instance, you can have one vault for digital journaling and another with personal tech wiki. In addition, installed plugins are not shared with other vaults, making it easier to specialize the vault into a container for each use.

To create a Vault and start writing, follow the steps below.

First, press the Create New Vault button. This will move you to a screen where you can configure vault settings.

Next, name your vault(2) and select where you want to create your vault(3). In this guide, I chose Desktop as the location.
Lastly, you can press the Create button. This finishes all the setup🚀

After all of these steps, you should see this screen.

Using Obsidian

Now that we have finished setting up Obsidian, we can start learning how you can use it. Let's get started by learning how to create a new note. It is pretty easy. You just have to click the button with the pencil icon like the image below.

And boom! You just created your first note.

For any readers who are interested in knowing more about each button, here are my explanations. The number is from left to right, in order.

Create Note - Create a new note like I just explained above.

Create a folder - Create a folder where you can store Images, plugin files (Like Excalidraw files), and notes.

Sort notes- Sort your vault in ordered ways. ( Sort in alphabetic order, Created time, etc...)

Expand/Collapse all. Either expand or Collapse the folder view to make it simpler to look at.

Now you can write & create notes. As a next step, let's learn how you can create daily entries in your vault.

Creating Daily Entries

To create a daily entry, you can click the calendar button. This lets you instantly create a note with a date in the file name.

The rest of the guide focuses on features and plugins that you can use to boost your productivity of journaling.

Extra: Best Plugins to install when you write your journal in Obsidian

#1 Editing Toolbar

The first plugin you want to install when you write your wiki/journal in Obsidian is the Editing Toolbar. It is straightforward. It creates an editing toolbar on your screen like Google Docs and Word, where you can easily write markdowns without huge amounts of effort. This is probably one of the few must-have plugins in any vault. Consider using this to increase your productivity in Obsidian journaling.

#2 Reminder

This plugin, "Reminders" helps you with creating reminders with Obsidian. When writing a daily journal, sometimes we want to make a reminder to ourselves like, "Tomorrow by 5 pm - Buy three apples." This plugin just does that. The details about how you can use this plugin are all written in the description of the plugin so I won't explain how you can use it in detail. But it is still a cool plugin you can use so make sure to install it.

Conclusion

In this article, I explained how you can start your digital journaling using Obsidian. It explained the steps to set up the app and a way to create your daily journal entries. I hope this article helped you in your journey. Make sure to share this post on social media like X and put #BinaryFish for more articles. Thank you for reading.

Image Attribution

Photo by <a href="https://unsplash.com/@thoughtcatalog?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Thought Catalog</a> on <a href="https://unsplash.com/photos/woman-sitting-beside-table-using-laptop-UK78i6vK3sc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>

Photo by <a href="https://unsplash.com/@ricvath?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Richard Horvath</a> on <a href="https://unsplash.com/photos/blue-and-white-heart-illustration-cPccYbPrF-A?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>

https://en.m.wikipedia.org/wiki/File:2023_Obsidian_logo.svg

CSS Margin VS Padding in a nutshell

Tue, 16 Jul 2024 00:00:00 GMT

When working with CSS, it is very beneficial to know the difference between CSS margin and padding. It is widely understood by numerous people that the two properties are spacing properties, but there are only a few engineers who understand the true difference between these properties. Let's dive in!

CSS Margin VS Padding

Padding

In CSS, padding is a property that sets the inner spacing of a CSS element. In a nutshell, the padding determines the spacing of the inner area. Padding has four sub-properties that you can use to specify the spacing.

Padding-Top
Padding-Bottom
Padding-Left
Padding-Right

Instead of specifying the padding of each direction using every one of these sub-properties, you can also select the same value in plain padding property like this:

padding: 2px 2px 2px 2px; /* From left=>right: Top, Right, Bottom, Left */

For more details about padding, visit the MDN docs.

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Margin

The margin, on the other hand, sets the spacing of the outer element. It is used to create an actual space between one component with the other. Similar to padding, there are four sub-properties like padding-bottom and padding-right.

You can also easily apply a margin of four directions in plain margin property like this:

margin: 2px 2px 2px 2px; /* From left=>right: Top, Right, Bottom, Left */

For more details, visit the MDN docs.

https://developer.mozilla.org/en-US/docs/Web/CSS/margin

In Tailwind CSS

In tailwind CSS, margin and padding can be applied by using the following class:

Padding: p-2

Margin: m-2

‼️ Never use padding for positioning

Many beginners fall into this trap of using padding for positioning and mixing up the roles of each property. While some uses are acceptable in web design, it is not a good idea to use padding for positioning elements. This is because the true role of padding is to extend the border of the elements(the inner spacing), not to adjust the spacing of the elements. In addition, using margin instead of padding for positioning gives more clarity and consistency to your code from a third person's view. So, use margin instead of padding when it comes to the positioning of elements.

So Padding VS Margin

According to the MDN Web Docs, margin and padding can be explained in the following sentence:

Padding creates extra space within an element. In contrast, a margin creates extra space around an element.

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

In a nutshell, while padding creates an inner space of an element, the margin determines the outer spacing.

A diagram representing the relationship between the content, padding, and margin

Now that we know what is the difference between these two properties, how should we determine which one to use? In this guide, we created a table that anyone can use to determine which one to use:

	Margin	Padding
Creating space between two or more items	✅	⚠️
Adding space between text and the border of a button	❌	✅
Space between the header/footer and the body	✅	❌

QUIZ:

Now take our two-question test that tests your knowledge from this guide. The answer is in the very end.

How do you apply a 2px margin to a p element?
Which one is the correct use of padding? A. Creating spacing between the header and body B. To modify the positioning of an element C. To create inner space in its element.

Conclusion

Throughout this guide, we explained a quick overview of CSS margin and padding, with its differences. We hope this guide helped you in your web design journey. Lastly, we would appreciate it if you could share our posts and blog on social media using the hashtag #BinaryFish. Thank you for reading.

Quiz Answers:

margin-right:2px;
C

Image Attribution

Photo by <a href="https://unsplash.com/@frostroomhead?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Rodion Kutsaiev</a> on <a href="https://unsplash.com/photos/a-close-up-of-a-blue-and-yellow-liquid-F573ZRbKOEw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>

Hover dropshadow CSS animation in 3 minutes

Sun, 21 Jan 2024 00:00:00 GMT

Introduction

In this guide, you will learn how to create your own custom CSS drop shadow animations. It is really easy and useful, so please read this guide until the very end.

Finished Code

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNRmvyN" data-user="Fire-Dingo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/Fire-Dingo/pen/rNRmvyN"> Untitled</a> by Fire Dingo (<a href="https://codepen.io/Fire-Dingo">@Fire-Dingo</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Step 1: HTML

First off, let's start by writing some HTML. In this guide, we will use an img tag as our main object to apply animation. You can either write the code entirely from scratch or copy the code I wrote below.

<img src="https://assets.st-note.com/img/1703121447054-We6okqAydF.png?width=800&dpr=2" alt="sled" />

Step 2: CSS

You can add shadows to an element(s) by using box-shadow property. in this guide, I will not explain about this property deeply, but you can check the details on the website pasted below.

https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

Firstly, let's start writing CSS for default conditions. Properties that we need to define are box-shadow and transition. Here is a sample program for the default status styling.

img{
    transition: all .3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

With this code, your element(in this case, an image) should look similar to the photo below.

After this, let's set up the hover animation. In CSS you can use the transition property to apply simple animations easily. The basic way to use transition property is,

body{
    transition:all /* Duration */ /* Type of animation */;
}

If we apply this, the code will look something like this.

img:hover{
    box-shadow: 0 4px 18px rgba(0,0,0,.4);
    transition: all .3s ease-in-out;
}

Now let's follow step by step on what this code does. On the first line, the code sets the box shadow to the color rgba(0,0,0,0.4). Compared to the default style, the hovered style will decrease the transparency of the shadow.

Secondly, the second line of the code applies ease in our transition for 0.3 seconds, which creates an animated effect of the shadow widening. By applying both the transition and the box-shadow property in two states, the transition property can successfully create a rich animation without any conflict or issues.

Finished code

img{
    transition: all .3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
img:hover{
    box-shadow: 0 4px 18px rgba(0,0,0,.4);
    transition: all .3s ease-in-out;
}

Conclusion

This guide explains the best way to add rich box-shadow animation to your website. Sharing our website through social media platforms will be greatly helpful. Thank you for reading.

What is so good about Godot? -BinaryFish

Thu, 21 Dec 2023 00:00:00 GMT

Estimated reading time: 3 minutes

Recently, there was a large news in game dev community which was all about famouse game engine called Unity changing its charging mesurement. About five years ago, Unity and Unreal Engine were the top two on game dev market. However, the boom of Godot is changing this fact that was true five years ago. If you like this article, please consider sharing this on social media platforms.

What is Godot Engine🤔？？？

Here are main takeaways of this article The great part of Godot

Beginner friendly
Light
Supportive and active communities
Completely free
Supports both 2D and 3D games

So let's get into the details. Godot Engine is a opensource games engine that was released in 2014. Because of how this engine is open-source, it is completely free to use.

No fees. No payments. No pro subscriptions.

Furthermore, this game engine offers GDScript(basicaly Python) as a main coding language, which really helps game devs with any levels to code around their project. Although Godot doesn't fully support c#, it still has some resources you can use to migrate from Unity.

With these futures, godot is supported by thousands of game developers worldwide...

Things you can do with Godot

You can make both 2D and 3D games in Godot. Because it recived a major update 4.0 last year the overall feel of the engine got polished too.

There is currently no AAA games made with Godot but because of its popularity there might be one soon.

The video attached below shows mantmajor titles made with Godot. It is intresting and inspiring so watching until the end is strongly reccomanded.

Conclusion

In conclusion, Godot is wonderful game engine despite some of the downsides. From its friendly and polished quality, you can build games from 2d tradtional tetris to massive 3d open world game. The link to download the game engine is attached below so please go and download Godot. Thank you for reading.

https://godotengine.org/

Grammarly vs QuillBot - The ultimate writing assistant app review for free users in 2024

Mon, 21 Oct 2024 00:00:00 GMT

Are you looking for the best writing assistant to elevate your writing in 2024? There are tons of free writing assistant apps, but I belive that the two best and solid options are Grammarly and QuillBot. But which one is the “ultimate” writing app that everyone should use? The advantages and disadvantages of every app will be discussed in this article by SnowDingo, along with the ranking’s eventual winner. Before we compare them, let us take a closer look at each app’s description and details.

What is Grammarly?

<br/>

Grammarly is an app released in 2009 in Kiev. Now it is a multinational company that hosts offices in some of the most famous cities in the world, like Los Angeles.

Grammarly’s main feature is its English correction, which identifies a variety of common mistakes made by users. In addition to this, Grammarly provides several suggestions that allow users to write more clear.

It is available for downloads on any of the following platforms in 2024:

Chrome Extension
Mac
Windows
Safari Extension
IPhone and iPad
Android

While Grammarly offers most of its basic features for free, its premium plan costs $12 per month. The premium version unlocks tone editing, AI, clarity, engagement suggestions, and more. Yet since the majority of users use the free version, and this article is focused on each app's free tier, I will not discuss the premium features.

What is QuillBot

QuillBot is an app that emphasizes AI that was launched in 2017. Similar to Grammarly, QuillBot provides spelling, grammar, and punctuation correction at default. It is available as:

Web app-> Visit https://quillbot.com for the app.
MacOS app
IOS app
Android app
Word add in
Chrome Extension

QuillBot’s premium plan costs $8.33 per month This includes things like unlimited length of text for every tool, generating 500 emails per day, and comparing between different writing tones.

Comparision: Which app is the best for free users?

There are tons of ways where one stands out than the other, but I’ve tried to rank them by each of these five distinct criteria. Please note that the tick and no are based on free versions. That does not mean it doesn’t have that specific feature in the premium version.

Criteria	Grammarly	QuillBot
Rephrasing tools	⛔️	✅
Desktop and native apps	✅	⚠️
Multiple Language Support	⛔️ (🇺🇸🇬🇧)	✅ (🇺🇸🇩🇪🇪🇸)
Web Extension	✅	✅
AI	✅	⛔️
Overall	3	3.5

As shown in the table, overall QuillBot is more appealing to its users than Grammarly. Now let’s take a deep look at why I ranked each app like this.

Criteria 1: Rephrasing/Paraphrase Tools

The first criteria was the rephrasing/paraphrase tool. This one is relatively easy to compare between the two since Grammarly offers only three free rephrasing suggestions per day for free users. In contrast, while paraphrasing in a variety of tones is a paid feature, QuillBot offers its free users limitless paraphrasing in a general and fluent tone.

This clearly shows that Quillbot is the winner in this field.

Criteria2: Desktop and Native Apps

The next part is the desktop and native apps. I tested both apps in the desktop version, but since my mobile devices were too old to install anything, this is mainly for desktop. (Pardon me for neglecting to test on mobile devices.😰) For this one, Grammarly is the winner for a few reasons. While QuillBot works perfectly in Mac, unlike Grammarly, it doesn’t work on every single app. There are only a few apps that QuillBot works with: Apple Notes, iMessage, Word, Mail, Pages, and Slack.

Grammarly, on the other hand, functions flawlessly in all apps that have an input field, regardless of operating system. It offers the same features as the web extension version, and it is free to download. The only drawback of Grammarly is its heaviness, which prevents some apps from running smoothly.

The results are ambigious, but in essence, QuillBot will get 0.5 points and Grammarly will get 1 full point.

Criteria 3: Multiple Language Supports

While many of these writing assistant apps offer English versions, it is equally important for some users to have multiple language support or billingal support. For this section, QuillBot is the clear winner since Grammarly only offers suggestions in English. QuillBot has German, Spanish, and other language support.

Criteria 4: Web Extension

Even though I knew from the start that both of the apps would receive full points on this section, I wanted to compare it between the two. Both offer Chrome extensions, but the only difference is that QuillBot supports Microsoft Edge and Grammarly supports Safari. Both extensions work perfectly, so each gets one point.

Criteria 5: AI

Lastly, I want to finish the ranking by comparing its AI features. Since each of the apps has different types of AI, I scored based on the usefulness of the AIs. QuillBot has several AI features that are open to use for any user. Unfortunately, most of the AI features in QuillBot are for premium users. In contrast, Grammarly offers 100 uses for its generic Grammarly AI. As a result, I chose Grammarly as the winner for this one.

Conclusion

In conclusion, while QuillBot edged out Grammarly by 0.5 points in this comparison, the best writing assistant for you ultimately depends on your specific needs and how you intend to use the tool. For free users, QuillBot offers slightly more features, particularly in paraphrasing and basic features. However, if you opt for the paid versions, both apps provide powerful, comprehensive tools that can support your entire English writing journey.

Huge thanks to both Grammarly and QuillBot for helping me with writing this article.

If you find this article helpful, please consider sharing it with your friends on Social Media. Adding your opinion on which one you prefer will definently be wonderful as well! Any support you can provide will largely help me with the continued writing of great articles like this.

Sources:

Please use these sources to download and try these tools on your own.

Grammarly Official Website

http://grammarly.com

Quillbot Official Website

http://quillbot.com

Guide at making Github profile appealing

Thu, 25 Jan 2024 00:00:00 GMT

Introduction

In this guide, you will learn how to create a appealing and beatiful Github profile. Read until the end to make your Github profile 100% better!

Question: Why do I have to even care about Github profile page?

The reason you should make your profile page appealing is because similar to portfolio, the content of your Github profile page is what people will look to try understand what kind of person you are. Having great profile user/README.md file is not required, but it is still something free that you can use to build your reputation.

Editing your `user/README.md` file

For each account, Github gives you access to one README file that could be written as a profile. The content of README file will be displayed on its user's profile, like the image shown below.

This can be used to tell not only about yourself, but your projects and portfolio as well. The important thing is that this profile page could be written in readme format, meaning that it supports far more variety of content to display than normal Github profile description.

Step 1: List out things about yourself.

The first step at creating appealing Github profile is to make a list about yourself. This should probably include your main language, goals, visions, and some links to your projects or portfolio.

You could use list formt - abcd to display each information in bulleted list form. Here is a template that you can copy and paste into your own README.

# About ME
I am a young passionate coder, and here are some little facts about me:
- 😎 current status
- 👀 Your intrest/curiocity/field
- 🌱 What you are learning
- 📫 Portfolio/contact information
- 🌟 Additional information(Like your nationality.)
- 💞️ Pronouns(Extra)

Step 2: Use Github Stats to display your Github status

This already looks great, but there is another thing that you can put into your Github profile README file. There is a tool called Github Stats, which allows anyone to put their Github statistics inside your profile. There are plenty of customization available, but this guide will not go full depth into this so please visit the link below for detiled guide at using this.

https://github.com/anuraghazra/github-readme-stats

Sample

Here are some of the sample cards you can copy and paste into your README file.

Simple:

![GitHub Stats Card](https://github-readme-stats.vercel.app/api?username=username)

Dark theme:

![snowdingo's GitHub stats](https://github-readme-stats.vercel.app/api?username="username"&show_icons=true&theme=radical)

Gradient:

![snowdingo's GitHub stats](https://github-readme-stats.vercel.app/api?username="username"&show_icons=true&theme=ambient_gradient)

Github extra pins:

(https://github.com/SnowDingo/BinaryFishBlog)

![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username="username"&repo=binaryfishblog)(https://github.com/SnowDingo/BinaryFishBlog)

Github language chart:

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username="username"&langs_count=5)

Top language without chart:

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username="username"&hide_progress=true)

Step 3: Final adjustments

For final adjustments, make sure to check for any speeling or grammar erros in your profile. Futhermore, you can try adding some emojis if your README looks too professional.

Conclusion

This guide explained how to make your Github profile appealing in 3 simple steps. Again, Github stats has plenty of things to customize so we reccomand readingg their guide onece. Sharing our website through social media platforms will be greatly helpful. Thank you for reading.

BinaryFish

Why the Default Mac App “Notes” is the best note-taking app in the world

Why Apple Notes?

Extra information:

Conclusion:

Looking for more information?

10 Stylish CSS Button ideas to put into your website

Introduction

Sample with all buttons

Idea #1 Rich Shadowed Blue Button

Idea #2 Gradient Button

Idea #3 Red scaled button

Idea #4 Light shadowed button

Idea #5 Simple Green Button

Idea #6 Gradient green button with animation

Idea #7 Yellow 3d Button

Idea #8 Color changing Button

Idea #9 Glowing dark blue button

Idea #10 Round Glowing Blue Button

Conclusion

How to create a QR code in Canva

How to create a QR Code in Canva

Method 1: Using the app "Gen QR"

Method 2: Using external websites to generate a QR code, then import it to Canva.

Method 3: Using AI to create an artistic QR code - "Hello QArt"

Conclusion

Image Attribution

How to sort lists, tuples, and strings in Python

Easiest way to sort (Method #1)

The alternative: Method #2 Sorted()

Conclusion

Image Attribution

All Python String function explained

Introduction

Contents

.capitalize()

Input

Output

.casefold()

Input

Output

.center()

Input

Output

.count()

Input

Output

.encode()

Input

Output

Atcoder Beginners Contest 321 "Cutoff" explained

Problem

Algorithm

Example Code in Python

How to get max and min value of an array in python.

How to get the max and min values of an array in Python

How to get the minimum value

How to get the maximum value

How to get the minimum value

Conclusion

Atcoder Beginners Contest 346 Recap

Problem A-> Adjacent Product

Guide

Answer

Problem B => Piano

Guide

Full problem explaination by EbimaLabo

Conclusion

Atcoder Beginners Contest 349 Recap

Problem A "Zero Sum Game"

Guide

Problem B "Commencement"

Problem

Guide

Code

Problem C "Airport code"

Problem

Guide

Conclusion

Atcoder Beginners Contest 350 Recap