Find your application

First, you need to find the application id of the app you want. To do that run the command below in the terminal.

$ flatpak list

Find the Application ID and save it somewhere, it's going to be important later on.

If you want to test the env variables or arguments you can use the temporary solution below. Otherwise, use the permanent solution.

Temporary solution

Run the command below in a terminal. Make sure replace Application ID with the id you saved in the earlier section and remove the brackets <>.

Note: Angled brackets <> in command references means that the argument is mandatory, while square brackets [] means that the argument is optional. you will see this a lot in manual pages (man command).

$ flatpak run [--env=VARIABLE=VALUE] <Application ID> [--custom-argument-here]

Example

Recently I had a problem with Discord lagging when mouse hovered over the server list. On my system discord is installed as a flatpak. I solved this issue by adding--enable-gpu-rasterization argument as below

$ flatpak run --command discord com.discordapp.Discord --enable-gpu-rasterization

discord needs the --command flag. Your app probably doesn't need it but if you have any problems you can reach out to me in the comments.

However, this is a one-off solution. To make it permanent follow the section below.

Permanent solution

If you only want to add some custom env variables there is an easy method. We use the override command of flatpak for it. This method doesn't work for custom arguments (See issue #2913 on flatpak repo) so if you want to add custom arguments please follow create custom desktop entry section.

Create override

$ flatpak override --user < --env=VARIABLE_NAME=VARIABLE_VALUE > <Application ID>

This will make your env variable permanent.

Note: you can remove the --user flag if you want the override to be applied system-wide. I only wanted it applied for my user so I'm using the flag here.

To make custom arguments permanent we just have to get a little more involved.

Create custom desktop entry

By default installed flatpak application with desktop entries export their .desktop files in ~/.local/share/flatpak/exports/share/applications. What do these .desktop files do? Well, these files contain information about the application's desktop icon, what kind of a program it is and the command used to launch the app. Which is just what we need.

We will first copy this desktop file so that the original file is intact

$ cp ~/.local/share/flatpak/exports/share/applications/<Application id>.desktop \
    ~/.local/share/applications

After this open the <Application ID>.desktop file at ~/.local/share/applications in your editor.

Example

Some lines in your file might be different.

As you can already see in my edited file, we are going to directly modify the flatpak run command in the Exec field. This is similar to what we did in the [temporary solution](#heading-temporary solution) but this time it will run every time the app is launched.

You just need to modify the Exec field. Here is a reference, you can also use the screenshot above.

Exec=/usr/bin/flatpak run [--env=VARIABLE=VALUE] com.discordapp.Discord [--custom-argument]

References

• flatpak docs
• wonderful people in issue #2913 in flatpak repo

That's it for now! Please reach out if you face any issues. If this helped you please consider supporting me. Thank you!

It's Not Hard To Build Usable Websites

It takes more effort to create unusable websites. In fact, take a look at this motherfucking website.

See? This website may look ugly but it's usable.

It takes 7 CSS declarations to make it better. We might as well just call it better motherfucking website at this point.

Are you not convinced yet? Let's also review an unusable one. Behold. A 2000's horror

Ah yes, "I love my websites like I love my newspaper job boards" Age. I hope no one has to see or visit this page again.

Why Do I Want To Build Better Websites

I grew up with windows xp, vista and 7. I've come to dislike windows but that's a story for another time. What I mean is I've used lots of shitty interfaces. I don't wish that for anyone.

My intentions are to make your experience on the web better.

I want to make your life on the web easier.

It helps everyone.

After all

The Web Is For Everyone.

The web has come a long way from sharing documents with fellow academics to creating the web with frens. It is a living and evolving construct, connecting all of us.

We can make it better. More accessible, more secure and empowering for all.

See Mozilla’s vision for the evolution of the Web for more.

Let's make it better.

Thank you for reading.

Docs and websites in this article will be updated frequently

Last updated on 2022-11-10 09:50 UTC

Always Be Learning, Always Be Seeking

As web developers we need to learn. A lot. And it's not just learning, we also need to stay on top of new technologies and keep practicing.

Learning Resources

• The Odin Project

  The Odin Project is one of my favorite resources to learn web development. What makes odin unique is that they do not hold your hand and walk you through. They give you the tools and you use them to learn, you set up your own development environment. In my opinion Odin prepares you to be a developer that can learn any new technology on their own. This is a very powerful and important skill.

• freeCodeCamp

  freeCodeCamp is great for newbies. I recommend it to everyone that is just starting out with programming in general. The lessons are pretty integrated and most of them can be done in the browser at the beginning stage.

  It is also a good challenge to do Odin and freeCodeCamp simultaneously. Best of both worlds.

• Frontendmasters

  Frontendmasters is one of the best out there. In there, you will have the true masters of their craft teaching you front-end engineering. Highly recommended for all web developers from beginners to seasoned experts.

  If you are a student and eligible for Github Student Pack, you get 6 months free on this platform! More info on frontendmasters' website and github student pack

  They also have a completely free bootcamp for total webdev beginners where they teach the very basics of HTML, CSS and JavaScript. Check it out on their website

• LearnWeb3DAO

  LearnWeb3DAO is created by wonderful Kacie Ahmed and Haardik, they helped lots of people get into web3 with their program.

  LW3 is great for everyone. You do need to have some programming experience but other than that there are no hard requirements. If you have little to no experience with web3 you can start right at their freshman track and move on to sophomore, junior and senior.

  I am about to finish Sophomore and I can say that lessons are pretty good paced and you get to build stuff!

• Developer Dao Academy

• Alchemy's Road to Web3 and upcoming Alchemy University

Practice, Practice, Practice

It is undeniable that we need to practice to get good at programming, frameworks and everything in between. There is not a single person in the world that is good at a new skill without practice. That is why you should visit these sites frequently and keep your skills sharp!

• Codewars

  Codewars has "kata". Which are basically programming problems. You can code the solution in their web editor and get integrated TDD (test driven development) out of the box.

  As you solve kata, you will progress to more difficult ones and earn ranks. This is an example of mastery learning.

• Leetcode

  Leetcode has lots of challenges in all difficulties. This is a good platform to prepare for dreaded technical intervews as you will find challenges and interview questions here.

• Hackerrank

  Hackerrank is also great for preparing for interviews. They are more structured and hackathon-like compared to Leetcode. Definitely recommended.

• Project Euler

  Project Euler is one of my favorites. All of the problems are math problems. Don't let that scare you though, this is great for thinking with numbers. Check it out!

• Exercism

  If you want to learn a new language, get some practice and receive feedback then Exercism is just for you.

  It has more than 60 languages. With their guided track you learn and solve problems. After solving the problem you wait for feedback from the community mentors. After the mentor approves your solution you move onto the next problem. I found it very helpful while learning JavaScript, Rust and Bash.

• Frontend mentor

  Frontend mentor gives you website templates to create with your tech stack. It is great for web developers to get some real practice.

• Buildspace

  Learn web3 by doing cool projects. Prior programming experience required.

• Cryptozombies

  Gamified smart contract education, it's pretty cool.

Read The Documentation, Please!

When in doubt, hit the docs!

Often we make mistakes because we didn't read the docs and do not know what functions are there and how the api works - the list goes on and on!

Here are some wikis, docs and websites I visit frequently.

• freeCodeCamp
• The Odin Project
• MDN by Mozilla
• Devdocs -> massive collection of API Docs and more!
• React Docs
  • React Beta Docs is mostly complete, looks better and is more accessible
  • The good old React docs
• NextJS Docs
• Arch Linux Wiki -> Best wiki for all linux users

Join A Community

Learning and truly mastering web development is a long journey. You will often be frustrated, things will stop making sense. There will be errors on line 43 while your code is 42 lines long...

In a community you can ask questions, help others and grow together while having a feeling of belonging. Quoting this page by odin project

When you’re slogging through the desert of despair, where your code doesn’t work or even make sense to you anymore, you can find an oasis of knowledge and encouragement in our community. Veterans at The Odin Project love to help fill in knowledge gaps and provide new insights and perspectives on how to improve your code. We’ve all been there before!

Here are some of the communities I am in:

• 4C (Cool Community of Content Creators) by Francesco Ciulla

  4C is for content creators, newbies, seasoned developers and even github stars. Highly recommended!

• The Odin Project

• Reactiflux

• Tailwind

• Jamstack

• LearnWeb3DAO

• [Developer Dao]

  Developer Dao is a community that is very important to me. It is founded by Nader Dabit and other awesome people like Will Kempster. They started out when web3 hype on twitter was at the peak last year. This community is token gated but I guarantee you it is worth it. When I joined last year, minting the genesis NFT, I was sponsored by a kind benefactor. I am forever thankful for that.

My hopes are up with D_D!

• Alchemy

• The Web Developer Bootcamp

  This is the community discord for the udemy course the web developer bootcamp.

This list will be updated.

Ask Questions

How do you ask questions when you get stuck?

Like this?

Hi, is there anyone that knows React here?

Please do not ask to ask. It doesn't help anyone, it just burdens the people who want to help you. Tell us what are you working on, what have you tried and of course what is the expected behavior?

Something like this would help everyone.

Hi, I started learning react a couple days ago and I was trying to implement a custom hook to get window dimensions but it does nothing when I use it. It should return the window dimensions as shown in width and height but I keep getting an empty array.

Don't Burn Out

The internet is full of docs, tutorials, js frameworks and everyhing in between. With so many information sources it is easy to get overwhelmed and eventually burned out.

Take Breaks

We often get very absorbed in what we do. I'm sure you had that moment of bug fixing that went on for hours uninterrupted with no results and feeling tired.

Well, taking breaks is better than you think. This is because your brain continues to work on whatever you were doing, whether it is fixing a bug or learning a new JavaScript framework. Let's take a look at how we learn and focus.

There are essentially two modes of thinking/learning/focus in our brains. Diffuse and Active.

Active mode is better mentioned first because we all know what it is. Active mode of learning is when you are actively focusing on an issue or learning something actively. In this mode your focus is like a laser, hence the term laser-focused. This laser strikes straight to the target.

But the magic is with the "diffuse" mode of learning.

I want you to imagine two things. One is your focus. In this mode your focus is not a laser. It is a cloud that can encapsulate ideas, concepts, problems and stuff like that. The other is a vast sea of stars. Infinite stars glowing amidst the darkness. You got it? Good. Those stars are the ideas, memories, concepts, every problem you had and of course your previously active-focused items.

Diffuse mode is a super power. You can't enter this mode by actively focusing on something. To use the diffuse mode you can:

• Take a break
• Go on a walk
• Have a nap
• Do chores
• Make coffee
• Sit idly
• Meditate

Do you see the pattern here? The diffuse mode is when you focus diffusely. When you go on a walk, your focus spreads over the your sea of consciousness and starts working on it. What is really amazing is that this is the exact time your mind combines lots of concepts and cements your learning. It is impossible to do this with active focus because you just can't see and connect to other concepts and problems as well as in the diffuse mode. This is how to learn better and this is why you should take a break.

To learn more about learning please check out Barbara Oakley's free course on her free coursera course where she talks about what I explained above and much more!

Stay Healthy

As taking breaks help you solve things from new perspectives, staying healthy allows you to have the capability to do so in the first place.

Some tips to stay healthy

• Get enough sleep. It could be 6 to 8, depending on your physiology.
• Eat healthy.
• Stay active physically.
• Posture is important. Learn how to sit correctly.

Thanks for reading! Please let me know in the comments if there is anything.

Your frontend is finally complete, congratulations! Now you just need to deploy to vercel and add your cloudflare managed domain.

You go over to vercel and create a deployment from a github repository, probably. And it deploys just fine. Now it's time to add the secret sauce, your custom domain.

You choose the default settings and head over to cloudflare dashboard to change the DNS settings to point to vercel's servers. You've done these DNS setttings before, nothing can go wrong, right? Well DNS is a world of mystery and terror (mostly).

LGTM! SHIP IT

Oops, the ship has sunk.

Stop before you clear cookies, reinstall your browser or worse.

Why Does This Happen

This is due to SSL/TLS being set to "Flexible" in the cloudlare dashboard for your domain. When SSL/TLS is set to flexible cloudflare servers may send HTTP to Vercel's servers. Vercel's servers do not like HTTP when there is a certificate present for your domain, which is automatically assigned by Vercel after you change the DNS settings.

Vercel also has a guide about this, you can check that out as well.

The Fix

To fix this, find the SSL/TLS settings in the cloudflare dashboard.

Yep, it's set to flexible. Let's change that.

And we are done! It should start working in a minute at most.

As you can see, we are living on the edge.

Thanks for reading. Let me know in the comments if you have any questions or suggestions!

Learning React?

Here's 10 weird tutorial sites to up your react game!

:thread_emoji:

Bored of these copy-paste twitter threads filled with websites you will never visit but keep saving to bookmarks anyway?

Fear not! Take this blog with you.

Wait, Who Are You???

My name is Arda and I am a web developer with broad interests from Turkey. Since my childhood I loved fixing problems (not you, math) about tech stuff: devices, software, you name it. Growing up, I learned programming and this interest branched. I could create my own problems now!

About This Blog

This blog is actually a couple months old. It was left collecting internet dust. Why? Because I am a procrastinator. But now, I can't help but write. Here's why there is this urge compelling me to write:

Well you see, every time I found a solution to that weird bug or figured out how to make the cursed and undocumented npm package work I would get this urge to share my findings. Help others. I'd have already spent several hours and maybe a hundred browser tabs. Maybe I can save a few people the trouble and make their lives better. Not everyone enjoys diving deep into a rabbit hole about why some DNS server's bugs make downloads start exactly 5 seconds late. Hell, I am grateful to those blog owners take the trouble to prepare those guides to install things.

I want to do the same. Let me help you. We got this!

Why Do I Develop Things?

Programming is an outlet of creativity. You can read this blog post because of the wonderfully creative people that wanted to collaborate and share documents all over the world.

With the freedom we get from creating software, we get to make a life for ourselves. We can make a life that we succeed and feel fulfilled. And the greatest part yet, we can help others succeed. This is why I develop things. Thank you so much for reading!

Good luck in your journey!

Thanks to Hashnode for creating this awesome #4articles4weeks writeathon. This is my #week1 submission and actually my first blog post since 2008.