DEV Community: Just Patrick

Why react just won't die 😠

Just Patrick — Fri, 24 May 2024 12:17:48 +0000

Incoherent Intro

React sucks because of the many reasons highlighted by other react haters. Better frameworks have come up but react continues to grow i.e It keeps getting new devs. A technologies death is marked by the decline of adoption by new users. React continues to be the most preferred option for new web devs and companies, why?

Obvious Reasons

Hiring Pool - Already has many adopters so companies choose it because of a larger hiring pool.
The loop - As more companies hire for react, new devs are even more influenced to pick it because there are more Jobs for it. And the circle is complete.
React native - I chose Vue during my bare js graduation, but now I write react because its the best way to build mobile apps with js. Now am even learning freaking nextjs because of work. My goodness I even started liking jsx after being a vocal hater (still hate hooks though). In short the presence of react native turned me into a react dev.

In conclusion

And the conclusion is yes.

Am writing this in the toilet, it smells. Very fitting since this could've been a shitpost tweet thread, but I miss writing on here.

I Built a Voice Assistant ~ Simulated Artificial Intelligence 🤔

Just Patrick — Tue, 27 Sep 2022 03:19:50 +0000

Last year I was in a dilemma. I don't remember exactly what it was about but it was the usual silly should I do this or that. And I just had a thought of how common I had these silly dilemmas "Should I feed the chicken first or give them water first". I know its silly but this is the least silly of dilemmas I often have. Most times I ended up wasting a lot of time on trivial decisions and sometimes I ended up doing nothing. So I thought, "Sometimes its good to have someone tell you what to do", cause damn it I can be indecisive on the silliest of things. And that's where I got the idea of creating a simple app that tells me what to do. The app was pretty simple. It was a kind of a chatbot where I would type the two or more options I had and it would tell me which one to go with. It did this using just two concepts/technologies, regex and randomization. The simple algorithm would extract the options from the message using a regular expression that would split the string into choices by checking for "should" and "or". I don't want to go into more details but yeah, I made it and it worked perfectly. I would be shopping for a snack and would ask the app which snack to buy and it would pick.

Fast forward to two months ago and our lecture tasked us to create an app,game or website targeting three demographics namely children, disabled people or elderly folks. It was a design class so the main consideration was designing for these three target groups. While brain storming I thought of the difficulty elderly people have navigating mobile operating systems and thought of a way which this overhead would be removed. "How can we enable an elderly person to make a call without having to deal with the typing on those tiny keys"
The answer was obvious, using voice. That's when the idea of creating a voice assistant come in. But there was one hurdle, all current voice assistants use complicated AI and machine learning systems. AI being a field I have barely any knowledge in, made me consider dropping the project, but right there I remembered the dilemma chat-bot app I had made. Most people I gave to try out the app thought that I was using some AI to make it work. So maybe, just maybe, I could simulate an AI interaction, maybe I didn't need a whole "speech pattern model" to make a freaking a phone call. Yees, yeees, yeeeeeees. And that's what I went with.

I would go on mock up a design in Figma of the app, setup speech recognition using this package, list out all the features I wanted and setup android permissions for making calls, sending messages and so on... But I was met with a great hurdle again. Setting a conversation system like the one google assistant has was difficult. It took over a week and many re-writes to finally decide and implement an architecture for the conversation system. Again I don't wont to go into details of its workings but you can check out this folder on the repository to get a feel. Be warned the code is not pretty. After the base was laid down, I could add any feature I wanted to the app, and I went wild and totally ignored the target demographic. I added jokes, quotes, memes, games and other silly things. But most importantly the core things work like making a call, sending a text message, sending an email, sending a WhatsApp message and opening apps. I would say I was somewhat successful in simulating an AI system as one Data Scientist was convinced I was using some sort of machine learning and AI after seeing a demo of the app. Of course the app is not perfect so if you have some time to burn you can make a pull request to improve, fix or add features to the app, you know, just for fun. You can get it on playstore here or on github here

The question is not can you build it, but rather should you build it

Just Patrick — Thu, 03 Mar 2022 08:41:49 +0000

Its widely known that execution is more important than the idea. Millions of people have great, possibly world changing ideas, every day, but none come into existence. For the few that set out to pursue their ideas its is a rough journey littered with failure. Most ideas fail due to poor execution. Great products come from widely known ideas which are finally executed well. Of course there are plenty of books, talks, videos and studies dedicated to learning and mastering execution but that's not where I want to focus. I want us to address those wonderful ideas that should never be made. Yes, ohh yes, you read that right.

See there is a big flaw in the minds of creative people. They get so hung up in the adrenaline rush of creating that they don't notice the impact of what their making. From the guy who made the atomic bomb to the guy who invented pop up ads it is evident that there are many great minds that regret what they made. At the time they thought it was a great idea or were driven by the challenge or foolishly only focused on the goods and ignored the bads, only to have their 'babies' turn into monsters. As a software developer you bear the greatest power in humanity and you choose whether to use it for good or for bad.

I've always wondered what goes into the minds of the developers that make the systems that are destroying society. Systems designed to make users spend hours upon hours in this apps and websites while forsaking all other responsibilities. Systems with aggressive data collection that is sold to the highest bidder. What about the social engineers who helped build these toxic features, do they regret anything? Or maybe they just needed the money to feed their families. Is that a valid enough reason? I pondered these questions in a high and mighty mindset. "Am better than them" "I would never do that". But something happened that made me rethink all this.

I wanted to get some analytics for FLB Music, a music player I made. Basically in wanted to get info on the number of times a user opens the app and its resource usage. So I set it all up and added it to the next update. Here's a screenshot of the data am collecting stored in supabase.

After getting analytics from the first 50 or so users I got excited. I don't know how to explain but I felt powerful. Something about getting incite on a someones setup had me in an adrenaline rush. "What more could I find out?" "What if I collected this also?" It was at that moment that I realized the power a user gave me over their machine when they installed the app. There was a time I even wanted to collect their ipaddress and then it hit me. What am I thinking. "Is this how it starts?" Sure I could collect even more data to improve the app but how much was too much. There is no real limit. It was easy to come up with some reason why collecting a certain type of data would help in its development. But no. What if the data got leaked? What if I got acquired and had to give access to some malicious company. And this is where this whole thought train began.

Its time we developers start thinking about the impact of our code on the lives of people not just on the time they spend on our platforms. Too many companies and developers have become too growth oriented to the point of building destructive systems. Systems made to keep users there for hours, systems built to boost propaganda and negativity to peak attention, systems over capitalizing on the dopamine feedback loop to turn the apps and websites into drugs, systems with no regard for privacy as they view users as money machines. Take a break from your 10x 13 hour coding session and your 3 hour user journey map meeting and look at people as not just users but as humans. We do not need another social media app or another video creation or conferencing app. We don't need another robot in our houses to put our kids to sleep or turn on the lights. It doesn't matter how complex your AI model is built we don't need it. Why so much aggression against technology? Well its because I am tired of people being fed lies of how this new feature or technology will "improve their lives". The movie Wall E is not just some animation, I believe it was a prediction. A life where people are glued to their screens switching from one app to the other with their entire lives controlled by some algorithm. I am not naive, I know that we will not be able to escape that future, but you can choose to not be part of its creators.

Before you sit down to make that new feature or implement that new idea, please consider the negatives of birthing it. But this is all my opinion, don't get too offended. This is just an expression of my love hate relationship with tech.

Shameless plug: Check out FLB Music

The Rise of Browser Os

Just Patrick — Wed, 19 Jan 2022 08:56:34 +0000

Why is chrome so heavy? The all to famous question and meme. Well I have the answer. See chrome and other web browsers are more of operating systems than browsers. Lets look at it from this perspective, websites these days are being referred to as web apps, why? Well, maybe because they are more of like apps. Is Gmail a website or a web app? What about github? I'll do you one better, what about figma or gravit designer? The days where web developers were "looked down on" by the developer community is long gone. Web developers(backend and frontend) are building some seriously complex systems.
Let's do a quick experiment.Open Figma If you are on a chromium based browser press Shift + Esc to open your browser's task and check how much memory and cpu Figma is using. Here is mine 👇

Figma is using 300+ mb of ram(currently, I just rechecked). More than the browser itself. What about YouTube?

What's the point? The point is that website are pretty heavy these days. They are apps and the browser is the operating system managing them. We have browsers suspending tabs after some idle time to conserve memory, well that there is memory management, a concept in Operating Systems. We can go all in in mapping operating system functions to features in modern web browsers but I'll stop at that one.

You can perform pretty much 99% of your tasks right on your browser. You can code (stakblitz, code pen, codesandbox),design (figma, gravit designer, vectr), video editing(invideo,clipchamp,veed.io), photo editing (photopea, pxlr, fotor), zip and compress files, heck even gaming with google stadia and xbox game pass. This is why this concept came to me. I can 100% live in the browser. Am guessing this realization was also the fuel for building chrome os. And while we are on that, lets talk about google.
Google and Microsft are hell-bent on making the browser an os. Checkout the fugu project that is on a course of availing all native apis (file system access, bluetooth and so on) to the browser. Check this out 👇

This is a screeshot from the whatpwacando website that lists all of the features progress web apps can do. This list is just unbelievable. The gap between web apps and native is quickly getting filled. And in the process of bridging this gap, the browser operating systems are slowly being built.

Am not sure whether to support this progression or to oppose it because it has benefits and drawbacks. But whatever my or your stance is on this it wont stop this process. With each passing day we get closer to the "web winning", in the "virtual war" between web and native. What do you think.

I made an App Store

Just Patrick — Sun, 22 Aug 2021 04:57:01 +0000

Why

I love checking out new stuff, apps, apis, websites and such. And my obsession for trying out new stuff found me continuously visiting https://electronjs.org/apps. Its a website that allows people to browse apps made with electron. Developers add their apps by making a pull request to electronjs apps repo on Github. Every week there's always a new app added.

After visiting the website hundreds of times I started thinking why it wasn't an app store. I mean the general layout of it looks like an app store. At that time I was learning about reverse engineering closed apis and I thought it would be a fun project to build a desktop client for the website. On checking I saw that the api requests send back html which was not a problem as I had had some experience with parsing html from a previous project of mine FLB Podcasts. So I knew how to build it but I didn't really have time to do it. But last week I decided to take a break from building FLB Music and build it.

Where can I find it

I just pushed the alpha build yesterday so its only available here in the releases.

Features

Browse Apps from 10+ Categories
Search for apps by keyword and app name
Download .exe , .appimage ,.dmg and other file formats
Automatic Install for .exe files (.appimage soon, see roadmap)
Loads the app website if the ReadMe is absent for the app page

Screenshots

Some screenshots...

Roadmap

Install apps without spawning the installer modal
Support installation of Appimages
Create a CLI that has the same functionalty
Encourage a Common ReadMe format from the app developers to have the app pages look more seeamless
Support for Youtube preview videos shown on the website

" There will never be Twitter Desktop..."

Just Patrick — Fri, 25 Jun 2021 10:45:52 +0000

For me the greatest highlight of yesterday's Windows 11 reveal was the new Microsoft Store. Finally Microsoft has heard the cries and mostly complaints from the developers and the users. The former Microsoft store was full of problems. From the payment /pricing issues that caused many developers to opt out of investing in the Microsoft store to the difficult process of getting a non UWP apps to the store.

But that is now in the past. Microsoft is making big strides in helping out developers. I will be discussing all the changes to the Microsoft store in the next article but for now lets talk about one particular special feature. Progressive Web App support.

Microsoft has been really pushing for PWA support. Let me quickly list out the efforts:

1. Microsoft Edge integration

Edge is by far the leading browser in pushing users to install progressive web apps.

2. Windows 10 integration

PWA apps have been beautifully integrated into Windows to a point where users can't even differentiate them with native desktop apps.

And now the Microsoft Store. Microsoft unveiled that there will be full support for Progressive web apps in the MS Store.

Microsoft is just pouring out resources to support PWA technology. I mean they even have this https://blog.pwabuilder.com/posts/introducing-the-brand-new-pwa-builder/ dedicated PWA builder to help developers in creating well integrated and optimized PWAs. The Store Page for PWAs is no different from the native apps. From all this its quite clear that Microsoft is dedicated to Pushing for PWAs. And its not just Microsoft.

Google. My goodness, I could divulge into an all nerdy rant of all the efforts google has been making for the PWA technology. But let me chill and just calmly list them out.

1. PWAs on PlayStore 🤯

YouTube:

2. PWA Billing (Double shocked Emoji)

YouTube:

3. File System Access

YouTube:

4. Quick Actions

And a lot more...

Companies are all over dedicating their resources to migrating their webapps/websites(debate later) to Progressive Web Apps, which brings us to the meat of this article. There will never be a native desktop app for twitter or Facebook or YouTube and for many other popular websites. Many Companies have opted to investing in PWA technology instead of technologies like Electron. And this is a trend that will soon become a norm. Many companies and developers will be opting to build PWAs instead of native apps. Its obvious decision to choose PWA over other tech if your product does not require access to most OS level features. For example, in my opinion WhatsApp, slack and discord would be better off investing in PWA tech instead of their current electron apps since they work perfectly as websites. There's no need of wrapping them app in another browser and having to deal with hustles of this technology. Many Companies and devs will come to this realization soon.

To put it bluntly I believe that in the end PWA tech will beat electronjs(The current king), UWP and Flutter Desktop(Yes I said it Flutter Devs, kill me🤣) and many other desktop development technologies. But this realization was not bolstered by PWA but mealy supported. The even bigger statement is this (Beware⚠ Controversial Statement ahead🤣)

The Web Will win. I mean look at Figma vs Adobe XD. A web app vs a Native Desktop App. Most people prefer Figma. Adobe Illustrator vs Gravit Designer. Gravit doesn't win but its still amazing how it gives AI a run for its money. Check out Spline and see the power of 3D in the web. Browser based Gaming, Video Editing, Photo Editing, AR, VR, Video Calling, Chatting..... the web is clearly on its way to win.

Am not naïve though. There are areas that native wins like: Performance, Design that fits the OS and System Level access. But this does not deter the WEB in this "race". Strides are being made in this shortcomings. Strides that will hopefully lead to their eradication.

Shameless plug time 🤣
Do check a product of mine FLB Music 👉 https://feelthebeat.xyz

I would Love to here your thoughts.

Doing Serious Backend Development on your Phone

Just Patrick — Mon, 27 Jul 2020 09:41:57 +0000

Its Finally here guys, as promised. Today we are going to setup your phone for some back end development. I'll walk you through all the tools you need to continue coding your apis on your Phone, on your couch 😎😎. We are going to hook up a rest api with some CRUD functionalities to our MongoDB service RUNNING ON OUR PHONE🎉🎉.

Replacements

1. Terminal/Linux environment

Its none other than the Legendary Termux app. This app is a terminal emulator that will provide a sort of Linux enviroment/shell(correct me if am wrong though) where we can install NodeJs,Git and Vim. Of course termux has A LOT more capabilities and functions but for today we will just use it for some JS development. I do encourage you dive in more deeper into termux as it is just freaking amazing and has a pretty nice community.

2. Postman

In order to test our routes we will be using an app called REST Api Client which you can download here.

3. MongoDb Compass

For our mongodb service we will be using an app called Dory Mongo which you can also directly download using this link. The developer pulled it down from play store but you can get from apkpure(the website). You can ofcourse just use the connection string from your remote database running on Atlas.

OK, if your done with downloading the apps we can start.

Setting Up Termux

So when you first launch termux you'll be greeted by this screen.

You can treat these as the bare environment you get after installing Linux. Let's first update termux by running this command apt update && apt upgrade.
As I said we need NodeJs,Git and Vim(optional, if you hate it, nano is preinstalled).
Just run the commands below

pkg install git

pkg install nodejs

***NB: This will install will install the Latest release of Node with for my case is v 14.0.0*

pkg install vim

Lets create a shared folder where we will be storing all our project files. I recommend this as the termux files and folders you create in the root directory will not be visible in your Default File Manager.

First give termux access to your storage by running this command

termux-setup-storage

Then lets create our folder in the shared Directory.

cd storage/shared && mkdir Termux

We can now access this folder from Termux and from our File Manager

Initializing our Project

You can just go about this using your normal workflow like mkdir Backend && cd Backend && npm init -y and so on. But to shorten this tutorial i'll just pull some boiler plate code for a Node Mongoose CRUD api from github.

git clone https://github.com/fedosejev/restful-api-express-mongoose.git

cd restful-api-express-mongoose

npm install

This is how the project looks like

To start the server we can run the script node app.js but not yet. We need a mongodb connection silly 😅.

Starting a MongoDB Service

Again this is not necessary if you have a remote mongo service running in the ☁☁. You can just replace the IP and Database name in the connection string with your own.
But lets focus on offline for when your at your grandma's and and there's no network 🏕.

So open the Dory Mongo app and click on the play button to start the service.
Replace the IP address in your connection string with the one nemo, sorry Dory, is running on and replace the database name part with...you guessed it, A database name of your liking.

Ok, so now we have setup a mongodb service and connected to it. You can now finally start your server(node app.js) 🎉🎉🎉🎊🎊🎊🎊

Our server is finally running on port 8080 but now we have to test our api to see if we forgot any semicolon in our code(😂Java guys)

Testing our routes

Open the REST Api Client App.
Switch to http on the left of the input field
And Finally enter the address as 127.0.0.1:8080/api/items/
Select POST, enter your Json Data and click Send

You will the be shown a response from the server

NB: Go to the Models folder of the project and see what type of data is expected

You can now run other requests, GET,DELETE,PUT and so on.

Phew we are finally done. That was simple right. "Hey, what was Vim for Bro?". Sorry I almost forgot. Its of course for editing your files from termux. You can 'cd' into your project and run vim . then select the file you want to edit. or just use nano. or even better use Spck editor.

Combine this article with my previous one about spck editor and wallah, You are doing Fullstack Web Developmet on Your Phone

Have a great day.

THE VSCODE OF MOBILE

Just Patrick — Tue, 21 Jul 2020 11:37:41 +0000

So a few months ago I stumbled upon spck editor app on playstore while doing my occasionaly peruse around Playstore. I checked out the rating and the preview pictures and got super hyped to try it out.

I have tried a lot of other mobile text editors to enable me to do some front end development on my phone but I never quite found what I was looking. But this was until I found Spck Editor. (Pronounced as "speck")

Its availabele for web and android

Some of Its Major awesome features

1. GitHub integration

2. Boiler plates for popular fronted frameworks

3. Ability to add Css frameworks to your projects

4. The Chrome-Like Console

5. Autocomplete, suggestions, Keyboard shortcuts and Find 'n' replace

6. And of course syntax highlighting

GitHub Integration

With Spck you can clone GitHub repos which gets added onto your Project Pane as a new Project.

Once you make changes to your project you can then Commit All (Commit all the changes) and then Push (Push the changes to the remote repo)

You can also make pull requests and Revert changes using the Pull and Revert All options.

You Can Create and Switch Branches, Add remote repo to existing project, Fetch and Log History

Basically the GitHub integration is unbelievable (for a mobile app)

Boilerplate for popular front end frameworks

You can create a Vue, React or Angular project super easily with steps below.

Click on the Plus Icon on the project pane
Select New Project
Select the Front end Framework you want.
Lastly, the Css Framework.

Note for VueJs the project is not initialized in the single file component model but with Vue being imported and targeting a particular div.

Ability to add Css frameworks to your projects

Currently when you create a project you can choose either the following css frameworks to be automatically imported/linked with your Project

Bootstrap
Bulma
Material Design Lite
Semantic UI
UIkit

The Chrome-Like Console

The Console is a stripped down version of the Chrome Console.You can toggle it on off in the Preview mode. It Features the The JS Console Tab, The Elements Tab,The Resources tab and Settings tab

The Js console tab is Just like the Chrome console

Autocomplete, suggestions, Keyboard shortcuts and Find 'n' replace

What can I say here. A lot like VSCode

The are a lot and I mean a lot more features that I have not covered. And I do believe that Spck editor app is the closest thing to our beloved Vscode on Mobile

I'll also be posting an article about doing back end development on Mobile. And again I mean serious back end development with express and a Mongodb service running on the PHONE. So stay tuned (or just follow me :) )

Linux is a bigger threat to windows than you think

Just Patrick — Mon, 20 Jul 2020 11:17:21 +0000

Why so. WSL that's why. So there has been a lot of excitement in the Linux community over the release of WSL2. Most "Linuxers" believe that WSL(Windows Subsystem for Linux) will help in encouraging adamant windows users to try out Linux whilst at the comfort of their familiar WIN 10. The hope is that many people will realize the benefits and ease of use(YES it is) of Linux and eventually decide to fully dive into a full installation of Linux.

But in my opinion I think not. The way I see it windows is trying to demean Linux by presenting it like just some app you can download and install thus prompting many people to just opt using it that way. Well why would you go through the hustle of dual-booting another OS whereas you can just click some buttons and paste some commands and get it.

And its WORKING!!

See Microsoft now recognizes Linux as an actual and worthy contender in the battle of the OSs. Which other reason would Microsoft invest so many resources in WSL? While you are thinking about this question remember that Microsoft is a company, a company that defends its market share and ensures that their profit margins are always rising.

"But surely Linux hasn't reached the level windows is?"

IT HAS.
Let's look at the areas that have made windows users reluctant to switch

GAMING (Linux is the Future of Gaming)

There weren't a lot of games supported on Linux in the past, but that was before the release of STEAM on Linux. I'm not going to dive into this topic that much but i'll leave with a few things.
You get waaaay better performance on Linux.
You can play tons of games on Linux, TONS I say. Through steam a lot of games are now available on Linux. Check this out

Video Editing,VFX Compositing, Photo Editing and Graphic Design

I'll quickly list out some linux alternatives to the softwares exclusive to windows

Photo Editing (Photoshop Realm) > Here we have GIMP

Graphic Design(Illustrator realm) > We got two of 'em: Inkscape , Gravit Designer

VFX Compositing(The Kingdom of After Effects) > Nuke,Blender and Black Design Fusion

Video Editing (The great Premier Pro) DaVinci Resolve,Blender and KdenLive

IF Adobe Decided to provide support for Linux, that would be the biggest blow to windows and would for sure cause an gigantic switch from windows to Linux. Just saying 😁.

The Linux market share continues to grow and not just techies are switching to Linux but also ordinary people(none techies). People of all ages are seeing the awesomeness of Linux.

Well this is just my opinion. Tell me what you think.

PWA,just as good as native apps?

Just Patrick — Thu, 14 May 2020 21:59:02 +0000

Progressive web apps have been on the hype in the web dev community. Many developers are "converting" their sites into PWAs. But am not here to tell you about converting a site to a pwa, but on making mobile apps through pwa technology.

Oh and I'll also help you in making your pwa into an installable app and even publish it to playstore if your interested in that.

Mobile first design

First of all make sure that you have designed your app to look and feel well on mobile.

You can do this through css media queries and ensuring that the animations if any are smooth but if you're not willing to go through that hustle I would suggest using a mobile UI framework like Ionic
Check it out here Ionic Docs

Generating the manifest.json file

After all the coding is done and you have your beautiful app ready, now its time to generate the file that will allow the browser to identify your app as a pwa.

You can type out the file using the following structure

"name": "Temporas", "short_name": "Temporas", "theme_color": "#222831", "background_color": "#ffad17", "display": "standalone", "Scope": "", "start_url": "/index.html", "icons": [ // A lot of icons ]
or generate it using a tool like this one
I believe everything here is self explanatory 😉.

Put this file outside your the folder containing your static assets e.g Public or Dist folder

Registering the service worker > A service worker is generally a script that gives you access to some native device features like push notifications and background sync and allows caching of your assets (markup,css and Js) to allow your app to run offline To register it you can just paste in the following snippet in your index.html (or the html file you specified as you start url in the manifest.json)

<script> // Registering our Service worker if('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js', { scope: './' }) } </script>

4.The last step 🎉🎉

Now we need to tell the browser which files to cache for offline use.

This is done in the sw.js file. Create this outside of your assets folder in the same level as your manifest file.
The edit this snippet in accordance with your app.

const cacheName = 'Temporas'; // Cache all the files to make a PWA self.addEventListener('install', e => { e.waitUntil( caches.open(cacheName).then(cache => { // Our application only has two files here index.html and manifest.json // but you can add more such as style.css as your app grows return cache.addAll([ './', './index.html', './manifest.json' ]); }) ); });

We are all done, or are we 😑. At this stage you can open your app on your phone web browser and then click on Add to homescreen 🎉🎉

Since I don't want to make this post any longer I'll cover the deployment in part 2 of this. Be free to ask any question or give suggestions or corrections wherever necessary.