DEV Community: Ricardo Sawir

Tutorial: Sorting ~1761 subreddits to see which subreddits are popular

Ricardo Sawir — Thu, 14 Jan 2021 01:40:48 +0000

Hi, I am researching of subreddits to make my next product. I want to get an overview of how I sort subreddits.

This will use vanilla JS.

1. grab the subreddits data from here https://pastebin.com/XVBDM4jn (copy the raw paste data)

Copy the json data to your html code like this (and don't forget to parse it)

<script>
let json_subreddits = JSON.parse(`//the copy pasted json data`)
</script>

2. We need to sort the subreddits from most popular to least popular. We need to use sort() function.

But the problem is our data is an object, and not an array.
To convert it, we need to iterate the object

let json_subreddits = JSON.parse(`the copy pasted json data`);

let sortable = [];
for (let subreddits in json_subreddits) {
sortable.push([subreddits, json[subreddits]]);
}

now we have an array

3. Use sort function

let json_subreddits = JSON.parse(`the copy pasted json data`);

let sortable = [];
for (let subreddits in json_subreddits) {
sortable.push([subreddits, json[subreddits]]);
}

sortable.sort(function(a, b) {
    return b[1] - a[1];
// this will return from big to small. to inverse it, just switch the a and b
// return a[1] - b[1];
});

4. Console.log(sortable) to see the result

And you can view subreddits in your console. Enough to give you which subreddits are popular and which are least popular.

If you like this, you can follow my journey live on Twitter https://twitter.com/RicardoSawir

Here's how I make app fast yet flexible to extend. Suitable for those who want to ship app fast (Suitable for any langs)

Ricardo Sawir — Mon, 04 Jan 2021 01:58:42 +0000

I wrote SingleFile App

This is how I built apps fast in a single file. You're free to modify how it should be done.

Some examples I built with this file

https://hnanalytics.sawirstudio.com
https://kolapedia.com
https://typecatch.com
https://hampersy.com
https://christmas2020.sawirstudio.com

Follow me on Twitter for feedbacks or live updates https://twitter.com/RicardoSawir

See the repository here: https://github.com/sawirricardo/singlefileapp

<?php
// 1. uncomment if you want to turn on your error
// error_reporting(E_ALL);

// 2. define your ABSPATH here. It's your choice you want to place this in root or in a 'public' folder
// this assume you put index.php in your public folder
define('ABSPATH', dirname(__DIR__));

// ucomment if you use composer/3rd party vendor
// include_once join(DIRECTORY_SEPARATOR, [ABSPATH, 'vendor', 'autoload.php']);

// you can include other files here if you want

run_app();
/**
 * Main App process happening here
 * @author Ricardo <sawir.ricardo@gmail.com>
 * @author Follow me on Twitter for feedback or live updates https: //twitter.com/RicardoSawir
 *
 * @return void
 */
function run_app()
{
    //you can also initialize session here
    $arr_route = (explode('/', ltrim(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH), '/')));
    if ($_SERVER['REQUEST_METHOD'] == 'GET') {
        if ($arr_route[0] == '') {
            // handle index here
            controller_get_index();
        }
        //examples you can use to access other route
        elseif ($arr_route[0] == 'about') {
            // handle /about

        } elseif ($arr_route[0] == 'contact') {
//handle /contact
        }
// by the way, you can also add route for /api here
        elseif ($arr_route[0] == 'api') {

        }
        // we need to handle assets here, else you cannot access assets
        // (I assume you use folder named 'assets')
        elseif ($arr_route[0] == 'assets') {
            controller_get_assets();
        } else {
            controller_get_404();
            //or die ('404');
        }
    } elseif ($_SERVER['REQUEST_METHOD'] == 'POST') {
// handle your post request here
    }
    // if you want to include other request method like DELETE/PUT/PATH
    exit;
}

function controller_get_404()
{
    // handle view
    echo render_header();
    echo render_footer();
}

function controller_get_assets()
{
    $arr_route = explode('/', ltrim(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH), '/'));
    unset($arr_route[0], $arr_route[1]);
    $str_path = join(DIRECTORY_SEPARATOR, $arr_route);
    $name     = join(DIRECTORY_SEPARATOR, [ABSPATH, 'public', 'assets', $str_path]);
    $fp       = fopen($name, 'rb');
// send the right headers
    header("Content-Type: image/png");
    header("Content-Length: " . filesize($name));
// dump the picture and stop the script
    fpassthru($fp);
    exit;
}

function controller_get_index()
{
// handle view
    echo render_header();
    // I name this render_index just to follow the name convention. If your controller is controller_get_random_name, then I suggest you name render_random_name. Just to make things more easy to organize later.
    echo render_index();
    echo render_footer();

}

function render_index()
{
    ob_start();?>
<main></main>
<?php return ob_get_clean();
}

function render_header()
{
    ob_start();?>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <?php return ob_get_clean();
}

function render_footer()
{
    ob_start();?>
  </body>

</html>
<?php return ob_get_clean();
}

I built a font pairing generator

Ricardo Sawir — Fri, 18 Dec 2020 10:33:54 +0000

http://typecatch.com

How To Build A Tiny App/Product - The Tech Stacks And Tips I learned

Ricardo Sawir — Fri, 04 Dec 2020 03:25:05 +0000

Hi friends, today I want to talk about building tiny apps. During this pandemic, I have built some kind of 1 day 1 product, although I didn't intend to blast it as a hashtag #1day1product or #1day1app or whatever you would like to call it 😁

Not long ago, I started Ask HN in Hacker News Forum asking if can we sell tiny products?

And there are a number of people who participated the discussions which gives me a hint to probably talk a bit more about making a tiny product/app.

(And also I want to thank you for the kindness of the members there, they are kind to share what they thought and some gems. I feel humbled by the community's generosity.)

So, let's discuss A Tiny app, shall we?

What is a tiny app/product/game?

Usually from my perspective, it is

a one page app/game/info (if you are making an info product),
you can use it directly without those sign-in page. (it may differ depending on your industry)
you can get something out of it.
(Optional) Only ask for 1 input, why would you put more inputs if you can put 1?
(Optional & relative) You can build the tiny product in considerably short time (Less than 24 hrs to less than 1 week to less than 1 month maximum)

You may say, "That's an MVP, bro". And yes, you are correct. But I would argue MVP is also a product. But may be not so solid, still contains bugs, and so on. But we're not going to talk that here.
Those are my opinions, if you have other opinions, you can comment below or have a discussion with me on My Twitter @RicardoSawir or if you prefer by email, you can reach me out at sawir.ricardo@gmail.com

During this pandemic, I have built these apps:

~March'20 - Stay Off Please Game - Inspired from lock down - A mini game I built, If I'm not mistaken, it was made in <24 hrs including watching tutorials about Unity.
~April'20 LOL Product. I made this inspired by Card Against Humanity, But I changed the answers with HN's articles
~May'20 Rosary Prayer - It's made HTML basically. It helps when people want to livestream prayer with their OBS App and just screen share this web so people could follow along, hence the giant font size.
~June'20 Hacker News, but with 3 sections of Top, Best, New Stories side by side - It's HTML and with Axios to help with HTTP Client.
~August'20 FastIcon – Generate Icons for your mobile app with ease - I'm starting to use PHP for faster development.
~Early November'20 Deeper In God - An app to record 'rhema'/notes while reading bible - It may not fall into tiny, but rather small to medium app, built in 2-4 days if I'm not mistaken.
~November'20 API Only Website - It is an API Only web. Really fun playing with returning JSON.
November'20 I make a tutorial about building login form with PHP - A screencast First time screencasting myself coding.
[~Mid Novemeber'20 My Subscription Form][https://subscribe.sawirstudio.com] - I build my own subscribe form.
November'20 I create an ebook about 50 Useful Tips using PHP There's also a write up here in Dev.to - 9 useful php tips and code snippets that get the jobs done.
November'20 I also create an ebook about 34 design tips to apply - There's also a write up - here
~Latest November'20 HN Analytics - I started to be more active in HN communities. I think if I want to nominate the most successful tiny product, I would vote for this. This one gets the most exposure to me.

Probably, there are more. But I could only note down this 12 tiny products based on my memory 😁.

Now, let's discuss what tech stacks I used to build those.

I use mostly index.html and axios. It mostly done the job. especially if you are looking to host in static site. (like Netlify/Github).
I have a shared hosting. Cheap. But good enough to validate my ideas and products. I usually copy/paste my local code to the production server code. (Not even with FTP 😅). I think that is fast enough.
I use PHP if I need to handle logic. The HN Analytic contains a little PHP code, to parse the input logic. However in my opinion, PHP still excel in shipping fast and tiny product. I don't use framework for this. I will discuss about how I structure my tiny app project. (Spoiler: it's almost just an index.php!)
Fortunately, My shared hosting provides MySQL Database, so I use that. Easy connect with PDO. I use database usually to contain my subscribe form. Some of the apps mentioned above also use SQLite3 Database, if possible.
App feels an app when you show modal (agree? no? 😅 comment below, then! hehe). I use Sweet Alert 2. Fast, good, and solid.
CSS, I use mostly TailwindCSS and their Tailwind UI. Free, and I like it. Simple and help me fast to get start. You can also use Bootstrap, but I probably want to wait for their version 5 (as of this writing, their version is 4.5 latest).
I use DataTable if I need to show tables (HN Analytic uses it). That means I will also use jQuery.
For dropdowns/accordions, I use alpinejs (They have an example plus built in tailwind example) so if I ever need dropdown, I would just include alpine js script.

Well, without I realize it, the tech stacks here are for web apps. Do you have other not mentioned here? Comment below or tweet me some ideas, would love to here from you.

Now I want to share some of the tips I learned. (works for me at least 😋)

I don't separate javascript and css. I just include it with HTML. Somehow, I can better debug it when things go wrong and not have to click css/js files just to fix it.

<html>
<body>
<style>/** Hello CSS **/</style>
<script>// Hello JS. Usually I put axios here</script>
</body>
</html>

Yea, that looks more like it.
How about you?

I use index.php. a single file is all I need. (again it depends). PHP code on top, then below is the HTML code. I would take a PHPMailer example here
I want to remind you, do basic security for your apps by putting your index.php/html into your "public" folder (especially if you are working with PHP). And point your server to /public path. This will help you to prevent hacker accessing forbidden files, such as your database sqlite. You also don't need to spam .htaccess or web.config to forbidden access. Here are an example from Laravel Repository public folder
If you make a non app product, you may consider to use no-code if possible. I use Notion for my ebook, and Gumroad to receive the payment.

What's next

I am going to continue documenting about tiny app/product (may be also other things not related with this, who knows?) and share what I find useful to the community.

Do you have other opinions or something in mind? I would like to hear from you.

If you like this article, you can follow me as I document my journey mostly there.

My Formula in naming functions (Applicable in any programming languages)

Ricardo Sawir — Mon, 30 Nov 2020 04:36:29 +0000

Ricardo Sawir

@ricardosawir

My formula in naming a function:
function filename_whatItIsabout_whatItDoes(some arguments) {
// the code
}

Useful especially when working with global/top functions.

example: function session_handleToken_get() {
return $_SESSION['token'];
}

applicable in any programming lang

04:28 AM - 30 Nov 2020

0 0

// filename.php
function filename_whatItIsAbout_whatItDoes(some, arguments) { 
// the code
}

//example
//session.php
function session_token_get() {
return $_SESSION['token'];
}

Do you have your own formula? You can share yours. I use this especially when dealing with top/global functions.

Happiness is a choice

Ricardo Sawir — Sat, 28 Nov 2020 13:13:51 +0000

Ricardo Sawir

@ricardosawir

Happiness is a choice. Well said.

13:07 PM - 28 Nov 2020

0 0

Today, I learned a point. At the extreme situation, you may still not get what you want. May be your code and mine still not working at the end of the day, may be there are still errors in our program, but thing is, I learned to be thankful at the end of the day. It's a choice.

I usually post some tweets about coding related and around spirituality, You can follow me at Twitter here https://twitter.com/RicardoSawir

5 Tactics In Typography and Design That Can Help You Ship Your MVP Fast and Good for Indie Hackers, Bootstrappers & Beginners

Ricardo Sawir — Fri, 27 Nov 2020 16:16:45 +0000

Hi friends, my name is Ricardo Sawir. Follow and subscribe if you like to get more updates on what I make:

My Newsletter https://subscribe.sawirstudio.com
Twitter https://twitter.com/RicardoSawir
Github https://github.com/sawirricardo
Youtube https://www.youtube.com/channel/UC5Db4Y8Sb2pc0LgitPSRTkQ
Gumroad https://gumroad.com/ricardosawir
(More to come...)

A little background story, before I jump into programming, I learned design in my university. I have worked as a graphic designer and have taken projects related with designing.

Now that I also enter into programming world, work as a programmer, too, what I'm going to share are some tips I learned along the way that can help someone create something fast for their MVPs, or even for someone who need it for their day-to-day job, or even for you who are just starting to learn about design, may be you are coming from developer background and want to grasp a bit about design, I hope this book can help you to achieve that.

With that in mind, I just can't wait to share with you the tips and I hope the best for you. So, let's start from out first point!

1. Always aim for contrast

You may or may not aware this but you may notice that heading is always bigger than the paragraph. And that's no coincidence. This is one of the basic design skill every design student learn. You want to differentiate either in:

font size
font weight
color

And sure, you can combine these, too. Usually between bold and big, light and small, and so on.

2. Emphasize important info

You just know what I'm trying to point at, right?

Use Bold or italic to emphasize, not just regular

3. One font is enough

Note: If you aim for MVP, I suggest use 1 font only. If you feel you understand font pairing, you can certainly try the middle type. Remember the 1st point? Aim for the contrast between 2 typeface.

4. Use color code #555 or #777 for paragraph. Safest Option.

5. Use color code #222 or #333 for heading.

Alright, I hope you find this useful for your work. Do you have any other tactics you are willing to share?

P.S. There are 29 more points more that can help you ship your mvp fast and good

If you want to see the rest, you can buy my ebook at https://gumroad.com/l/34fastmvp/blackfriday

You can get this at $9.99 (Over 30% OFF from originally $14.99). Go and grab it fast!

9 Useful PHP Tips and Code Snippets That Get The Jobs Done

Ricardo Sawir — Thu, 26 Nov 2020 14:06:36 +0000

Hi friends, my name is Ricardo Sawir. Follow and subscribe if you like to get more updates on what I make:

My Newsletter https://subscribe.sawirstudio.com
Twitter https://twitter.com/RicardoSawir
Github https://github.com/sawirricardo
Youtube https://www.youtube.com/channel/UC5Db4Y8Sb2pc0LgitPSRTkQ
Gumroad https://gumroad.com/ricardosawir
(More to come...)

Okay, I think that's enough 😁 I collect these tips and code snippets mostly from the awesome communities in StackOverflow. This code snippets and advice works but not limited from PHP 5 to PHP 8. I curate this myself and use it firstly for my job.

I don't claim any of these code snippets or tips written here as mine. The credits goes to the respective authors. All of these tips and code snippets are collected by me that I see as "useful" for me and I hope you find them useful, too.

If you find any errors, probably a typo from me, please let me know at my email (you can find at the bottom).

So, let's jump directly to our 1st tip!

1. Use Prepared Statements if you are working with database to prevent SQL injection

Source: https://stackoverflow.com/a/60496/9478774

$stmt = $pdo->prepare('SELECT * FROM employees WHERE name = :name');

$stmt->execute([ 'name' => $name ]);

foreach ($stmt as $row) {
    // Do something with $row
}

This is to set up the connection, you can copy paste this:

$dbConnection = new PDO('mysql:dbname=dbtest;host=127.0.0.1;charset=utf8', 'user', 'password');

$dbConnection->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$preparedStatement = $db->prepare('INSERT INTO table (column) VALUES (:column)');

$preparedStatement->execute([ 'column' => $unsafeValue ]);

2. Prepared Statements for dynamic queries? Restrict the possible values by using if else

Source: https://stackoverflow.com/a/60496/9478774

if (empty($dir) || $dir !== 'DESC') {
   $dir = 'ASC';
}
// only 2 possible options

3. Check if a string contains a specific word

Source: https://stackoverflow.com/a/4366748/9478774

// @ver below 8
$a = 'How are you?';

if (strpos($a, 'are') !== false) {
    echo TRUE;
}

// @ver 8
if (str_contains('How are you', 'are')) {
    echo TRUE;
}

4. Handle undefined index/offset with array_key_exists() or isset()

Source: https://stackoverflow.com/a/4261200/9478774

//isset()
$value = isset($array['my_index']) ? $array['my_index'] : '';
//array_key_exists()
$value = array_key_exists('my_index', $array) ? $array['my_index'] : '';

5. When you want to get the value of $_POST or $_GET or $_REQUEST, you can use isset() or !empty()

Source: https://stackoverflow.com/a/4261200/9478774

$value = isset($_POST['value']) ? $_POST['value'] : '';
//empty()
$value = !empty($_POST['value']) ? $_POST['value'] : '';

//for PHP 7 and later
$value = $_POST['value'] ?? '';

6. Display Error in PHP

Source: https://stackoverflow.com/a/21429652/9478774

ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(E_ALL);

7. Always remember require_once() 99,99%

Compared to include(), require() function will handles errors differently, it will stop the script execution while include() will still continue the script despite the error.

8. Helper functions if you want to redirect

Source: https://stackoverflow.com/a/768472/9478774

function redirect($url, $statusCode = 303)
{
   header('Location: ' . $url, true, $statusCode);
   die();
}

9. Return JSON with this script

Source: https://stackoverflow.com/a/4064468/9478774

<?php
$data = /** whatever you're serializing **/;
header('Content-Type: application/json');
echo json_encode($data);

And.. there are 41 more points to go.

I hope you find this useful for your work. I hope the best for you!

if you want see the rest, you may want to buy at https://gumroad.com/l/50phpcode/blackfriday
P.S. It is Black Friday deals, so you may want to grab this rare opportunity fast 😁👍🏻

Also, if you have any feedback, please send to my email at sawir.ricardo@gmail.com

I want to thank you again, you are the best!