DEV Community: Bearveloper 🐻

Thoughts about Twitter and the migration to Mastodon

Bearveloper 🐻 — Sun, 06 Nov 2022 19:18:57 +0000

I usually don't stress thinking or having an opinion about what others do or think. My motto in these cases is mostly you do you, but with the recent actions taken by Elon Musk, one has to stop and think a bit about it. I do not care what he does with his money. If he wants to buy Twitter, Facebook, or the corner store, I don't care. The problem to me begins when he starts firing employees, allegedly after questionable reasons like the number of lines of code, ideology, and who knows what else. Many of the fired employees were in charge of the moderation tools, so as soon as this happened, thousands –if not millions at this point– of tweets with aggressive, racist, transphobic, etc. content started to propagate the social network. That is not cool. Yes, you have the right to express your opinion, but there must be a limit, and to me, that limit is when you cross the line and disrespect, insult, or attack others. That, to me, is not free speech. That is abusive speech.

Mastodon has been around for a while. I discovered it in a previous Twitter migration circa 2018. Like many, this past week, I had to learn new concepts, search for instances, try different clients, and eventually install and run my server. It did not stick. After a few months terminated my instance and moved on. But that is not the end of the story. I have been in and out of Mastodon many times and on many servers. I still have a few –redirected– accounts today that I used in the past. Still, this time and thanks to the massive attraction Mastodon gained, I have posted more statuses than ever and am currently growing my network. Many ask if this will be just another fluke or if this will be another WhatsApp to Telegram attempt. My answer is no, it might not make Twitter go bankrupt, but it will stick with many people. Why do I think this? Because I've seen lots of messages that agree with me, some like:

I have posted more in Mastodon in the last few days than I ever did all these years on Twitter.

Or:

Everyone is so welcoming here! Love it.

And also:

It feels so good to be in Mastodon. It has a '90s vibe where everyone is nice, and there is no algorithm driving what I read.

So, yes, many of those 250K+ new users will not stick around after a while, but many will and those will share their experiences with the rest of the world.

Mastodon is now visible and in many users' mouths (and fingers).

Welcome to the Fediverse!

WPBakery Developer Documentation

Bearveloper 🐻 — Fri, 28 Jan 2022 16:39:49 +0000

If you work with WordPress and WPBakery (also known by some as Visual Composer) chances are you have had to develop a custom shortcode element. Although I think WPBakery is a pretty good developer tool, their docs are far from being the best ones, and they are sometimes pretty hard to find.

To save myself (and you) some research time, here are some developer links I use a lot:

Codes of Conduct

Bearveloper 🐻 — Sun, 21 Feb 2021 12:37:43 +0000

I am a big fan of having, following, and enforcing a Code of Conduct (CoC) in all projects where I participate. If by any chance they do not have one, I always seek to collaborate with the project maintainers to adopt one that aligns properly with their values. So far I have seen great results, we all grow together, and ensure a safe and civilized space for everyone.

My favorite Code of Conduct, is Contributor Covenant. It is pretty easy to understand, pretty easy to implement, and it is backed by a lot of open source projects.

Good practices for presentations

Bearveloper 🐻 — Wed, 16 Dec 2020 05:00:55 +0000

A few days ago while I was doing some note cleanup and brainstorming for post ideas, I found a list of good practices for presentations and screen sharing I wrote some years ago and, even though we are already well into the new remote age, I decided to share them with you.

I hope you (or someone close to you) find them helpful.

Hide all system bars and desktop icons

Objective : Privacy, Avoid distractions

This is a subjective one, but I can count with the fingers in my hand the times I have attended a presentation where the system bars and desktop icons were hidden, and I must say it was a big difference to avoid all these subtle distractions. How many times have you though I use that app too!, I know those icons!, or even worse What program is that? ?.

It is fairly easy to temporarily hide all this UI elements, and, the less reasons we give our audience to be distracted, the better.

Move all windows to a secondary monitor

Objective : Avoid distractions, Performance

Nowadays most desktop environments (Windows, macOS, different Linux flavors) support multiple virtual desktops which we can take advantage of when presenting. If for some reason you need various programs or windows open during your presentation, but you do not have to share them, use this feature to move such windows out of view.

If you have the privilege of a second display this becomes even easier, just move those windows out of the shared screen while still keeping them visible to you.

Turn on “Do Not Disturb”

Objective : Privacy, Avoid distractions

It is easy to get distracted and lose our train of though when we get notifications, alerts, popups, etc. therefore it is best to use the “Do Not Disturb” feature, not only on our mobile devices but also on our computer. Most OS today have this feature available to you in a couple of clicks, no matter where you are or what you are doing.

Besides avoiding the mentioned distractions for the presenter and the audience, most notifications include text excerpts, previews or images; DND is also useful to avoid potential privacy problems.

Quit all nonessential programs

Objective : Privacy, Avoid distractions, Performance

It is pretty common to keep several programs running while we are working on the computer whether they are related to our daily activities or not, like different browser tabs, email client, music, videos, reference material, etc. but most of these are not required during a presentation, hence it is better to just quit all programs that are not strictly required for the presentation. In addition to avoid distractions, it saves us from potential privacy problems and it also frees some resources to improve the computer (and internet connection) performance.

Make use of private browsing

Objective : Privacy, Avoid distractions, Performance

In line with hiding system bars and desktop icons. If you are using your internet browser to present, it is recommended to use the private (incognito) browsing mode preventing this way to unintentionally sharing your browsing history, downloads, search history, etc.; as a bonus point, private browsing also disables all browser extensions/plugins which will also free up some resources for the browser itself and avoid extra icons and other distractions.

One more slightly advanced tip is to create an alternate browser profile for testing or presentations. This option is available in most browsers and, in my opinion it is the most flexible one, but it requires some extra fiddling and setup.

Prepare your screen before hand

Objective : Performance, Contingency plan

There is nothing like not having the right link or a sudden slow internet to throw your focus (and the rest of your presentation) out the window.

Evade problems and time waste by preparing not only what you have to say, but also what you have to share; if possible, open all links on new tabs, and if you have to demo a series of interactions, open each step on a new tab or window you can use to quickly switch to if something unexpected happens.

Remember Murphy’s law, anything that can go wrong, will go wrong.

Take screenshots in a controlled environment

Objective : Performance, Contingency plan

Expanding and improving the previous point, if you have the time and tools, there is nothing better than take a series of screenshots or video captures of what you will present as a contingency plan; a picture is worth a thousand words, a video is worth a thousand pictures.

If you choose to use these images or videos on your presentation as opposed to just use them as a back plan you will be leveling up your presentation quality even more before these are taken (usually) on a controlled environment, that is, in a quiet place, with a good internet connection, ideal screen size, ideal data, etc. Some of the best technical presentations I have assisted to included one or more video captures from the presented topics.

I really hope you find all these recommendations as useful for your presentations as I have along the years. You do not have to implement all of them at once, but I definitely recommend you to start using some of them and you will see immediate results.

Dear new (and not so new) developers

Bearveloper 🐻 — Thu, 02 Jul 2020 00:00:22 +0000

I understand not everyone has or will have the privileges of good mentors, internet access, or even knowing how to read and understand English, but for those who have them, is that I want to share these bites of wisdom that have helped me advance my career over 17 years now.

Let me give you a bit of context about me. I graduated from CS 15 years ago, in a small university at my home town (Puebla, Mexico); and paid most of it by working in a small computer repair store near my home. Most of what I know today I either learned it from great mentors I have had over the years, because of someone answering my question in some form of online platform, or self thought.

When you start learning something, a programming language, a library you want to use, heck, even a new code editor, you will have that feeling of uncertainty and that is OK, do not run away from it, embrace it. If you know how to channel this feeling into questions and searches, you will go far. There is nothing more exciting and intimidating that start a new project, in an empty folder, with an empty file; so many possibilities but where and how do I start?

You do not have to define a bullet-proof, future-proof architecture from day 1, that is impossible. Yes, there are many companies out there with great ideas, but those ideas that worked for them will not necessarily work for you; even those big companies change direction 180º every so often, so why should you not? Just follow the Unix philosophy, take a big problem and break it in small manageable problems, solve those small problems, and eventually your big problem won’t be so big, and will be simple to solve.

Do you want to build a web site from scratch? There is absolutely no need to start with Docker on day one. You don’t need Webpack to start your project. Don’t waste your time thinking if TailwindCSS or Redux are your best options. Start small, start with a plain HTML file and as you progress you will eventually find what you need and what you don’t.

Asking a question is hard, asking good question is even harder

At some point you will find a blocker. Not a small one, a big one. One of those that stop your progress for hours, or even days. But there is nothing to fear about it. It is ok to not know the answer to your problem. It is ok even to not understand your problem. We are not geniuses (at least I am not) so stop thinking you have to know everything. You don’t. One of the best skills you will learn and master over the years is how to ask a good question, and not just to your friends or coworkers, but also to one of the many search engines out there.

You might be tempted to just copy and paste your errors in the search engine, or dump a big chunk of code on a forum or chat window and wait for someone to magically understand it, fix it, and send it back to you. I can tell you this might work one or two times, but it will eventually wear-off and those who were willing to help you will start ignoring you. Instead, follow again the Unix philosophy, start breaking your problem in smaller ones. Remove complexities, remove unnecessary details until you end up with the bare minimum, and then give it a try one more time.

Having issues fixing or adding a new style to an existing element in a webpage? Remove all styles from the element and try to get yours working. Something in your JavaScript code not working? Isolating the problem by doing something similar in a blank playground works wonders, be it a CodePen, or just a new HTML and JS file on your computer. If after isolating it you still can’t figure out what the problem is, then you have a good, clean example to ask (politely) someone else.

If your problem or your question is too generic, or on the contrary, too specific, be prepared to answer some questions you will get back to you. A good way to know if you are headed on the right direction to receive help is if the person who is helping you is asking you things, context is everything! If they are just throwing random “solutions” at you, most of the time is someone who only cares about “giving an answer” first, not actually solving your problem. Our problems are many times as unique as we are, so trying to solve someone’s problem requires most times a good chunk of time and a conversation to fully understand what you need to do and why.

Understand your problem, understand your solution

In cases where you feel in a rush or specially when starting with new projects or technologies you might be tempted to ask for a how-to or tutorial, more so if you feel like you are running in circles or you are running out of time, but believe me, a tutorial or a how-to will hurt you more than it will help you. Why? Because a tutorial or a how-to is tailored to a very specific use case, with a very specific goal in mind. Stop rushing yourself and start reading more. I know, not all projects have great documentation, but it will pay forward to read the official documentation to understand what you are doing instead of just blindly following someone’s “Ho to build a To Do with X and Y” guide. Don’t get me wrong, this is not a RTFM, you do not need to read the whole thing from back to back, but at the very least take the time to read and understand the functionality you are trying to use.

If you get some generic advice or links instead of a tutorial teaching you exactly what you are doing, give that person an honest Thank You and take the time to read whatever was shared with you. That person wants you to learn by giving you the right direction instead of just spitting out the first thing that crossed their mind that may or may not work at all for you.

Do not ask someone to solve your problem, ask them to explain you what you do not understand and point you in the right direction so you can solve your problem yourself.

This was slightly longer than I anticipated, but believe me, I have been there more than a handful of times in my 17 years of professional experience. To summarize:

Ask good questions
Read the official documentation
Divide your problems in smaller ones
Isolate your problems to remove external actors

Overlay text on images with PHP

Bearveloper 🐻 — Tue, 23 Jun 2020 04:00:06 +0000

Some time ago, someone asked me how to create a list of diplomas using a static background image and a list of names. The problem was simple enough to be implemented in less than 30 mins, so I decided to give a try and here is what I ended up with.

This is a simple PHP script with some assumptions that can be run directly in the command line. It can easily be tweaked to fulfill other more complex requirements, like water marking images, mobile optimized images, reading data from Google Spreadsheets or Airtable, etc., so feel free to fork the repo or download the source and hack it as you need it.

With the code below I go:

From this…	…to this

To the code.

<?php

First, some variables so we can tweak the script behavior without having to figure out where in the code are this things setup

$csv_file = 'names.csv';
$background = 'background.jpg';
$signature = 'sig.png';
$font = 'ConeriaScript.ttf';

Then, we read the CSV file and parse so it is easier to read later by converting it to an associative array with the column names as the keys.

// CSV code from https://www.php.net/manual/en/function.str-getcsv.php
$csv = array_map('str_getcsv', file($csv_file));
array_walk($csv, function (&$a) use ($csv) {
    $a = array_combine($csv[0], $a);
});
array_shift($csv);

For this specific background we will need the current date as three strings to be placed in three different places.

$day = date('j');
$month = date('F');
$year = date('Y');

Now we start having fun with PHP’s image functions. First, we need to read our background image to get some basic info and do some preparation, like setting the text color, the image width (for centering the text), and reading the signature image and its sizes.

$image = imagecreatefromjpeg($background);
$color = imagecolorallocate($image, 0, 0, 0);
$width = imagesx($image);
$signature = imagecreatefrompng($signature);
$signature_width = imagesx($signature);
$signature_height = imagesy($signature);

Now that we have the image data ready, we will start reading each name in our list so we can generate individual images with all the overlaid text. For easier reading, I am saving the name and reason in their own variables.

  foreach ($csv as $row) {
    $name = $row['Name'];
    $reason = $row['Reason'];

Here, I am reading the background image again. For the first item in the loop this does not make sense because I already read it above, but since all the image* functions alter their input, if I do not do this I will end every image in the list will end up all the previous text from all the previous images overlapped; not good. I am also getting the text “bound boxes” which are basically the positions of the four corners of my text; I do this to be able to center the text in the image.

    $image = imagecreatefromjpeg($background);
    $name_box = imagettfbbox(40, 0, $font, $name);
    $reason_box = imagettfbbox(40, 0, $font, $reason);

Now it is time to actually render the text on the image. This is done by providing some information to PHP, including the destination image, text size, angle, x and y position, color, font (yes you can use your fonts!), and last but not least, the actual text.

    imagettftext($image, 40, 0, ($width - $name_box[2]) / 2, 635, $color, $font, $name);
    imagettftext($image, 40, 0, ($width - $reason_box[2]) / 2, 790, $color, $font, $reason);
    imagettftext($image, 32, 0, 400, 895, $color, $font, $day);
    imagettftext($image, 32, 0, 600, 895, $color, $font, $month);
    imagettftext($image, 32, 0, 600, 975, $color, $font, $year);

Once the text is overlaid correctly, I need to add the “signature” image on top of the text so it looks nicer, so I tell PHP to copy the signature image (a transparent PNG file) on top, as you can see, I had to not only provide position, but also size.

    imagecopy($image, $signature, 400, 980, 0, 0, $signature_width, $signature_height);

Almost there! Here I am saving the resulting image to disk by providing a name. I I did not provide the name, PHP would just output the content, which could be used instead as a download link by also providing the correct header.

    imagejpeg($image, "diplomas/$name.jpg");

I do not want to clutter my memory, so once I am done with the image, it is destroyed.

    imagedestroy($image);

And done, to the next item on the list!

As you can see this is a fairly simple yet powerful script that can be used for many different purposes. Feel free to see or fork the full project and these are the links to the image functions used in this example:

I hope you enjoy this post and find it useful!

php

Writing a Link Shortener with PHP and Airtable

Bearveloper 🐻 — Mon, 03 Feb 2020 05:00:27 +0000

Over the weekend I was working on a small side project for a meetup I started attending to a few weeks ago. I am printing a QR code (with a link) for a small flyer and adding an NFC tag (with the same link) to it as well. All of the sudden I was thinking 🤔 I need a practical way to update a my link without having to print again my QR code and reprogram the NFC tag.

My initial thinking was to just use one of the many services out there but then I thought why not build a really simple one so I can update it as I need?, I also wanted to have a quick way of updating it without having to republish the code, or jumping into an ssh session to change some file on a server.

The answer 💡 I came up was to write a pretty small, yet effective, PHP script that gets an ID, fetches the real link from Airtable, and ends up redirecting the browser to the real link.

To make it look fancier, I used Apache’s mod_rewrite so I get a clean URL, but it is really not required.

What you’ll get

A custom URL shortener with your own domain 🎉.

What you’ll need

A server with Apache and PHP.
An Airtable account.

How to put everything together

We start by preparing Airtable. If you do not have an account, get one, it is free and really useful. Once you are ready with your account, you can copy my Base into your account. This will save us some time and will allow you to familiarize yourself with Airtable at your own pace. The table has some fields, but the important ones are ID and URL. ID is using Airtable’s record ID (removing the letters rec from the beginning) and URL is a string with your URL.

After you are ready with your Base and Table, you need to get your Base ID and API Token. To get the Base ID go to https://airtable.com/api, click on your base name and you should see an API explorer with the ID of your base in the first paragraphs of the Introduction. To get your API Token go to https://airtable.com/account and you should have an obfuscated field in the API section, to get the token just click on it and it will reveal the token. I am assuming you copied my base so I’ll assume your Table name is the same as mine (if not, you can change the name on the config.ini file).

With this 3 pieces of information we are ready to get some magic done 🧙🏻‍♂️. We’ll start by adding a folder on our web server; since it is a link “shortener” it made sense to me to create a folder named s. Inside this folder I have the following files:

.htaccess

    RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} !index.php
    RewriteRule .* index.php?id=$0 [QSA,L]

index.php

<?php
$config = parse_ini_file('config.ini');
$id = $_GET['id'];
$request_url = 'https://api.airtable.com/v0/' . $config['base_id'] . '/' . urlencode($config['table_name']) . '/rec' . $id;

$options = [
  'http' => [
    'method' => 'GET',
    'header' =>
      'Authorization: Bearer ' . $config['token'] . "\r\n",
  ],
];
$context = stream_context_create($options);

$response = file_get_contents($request_url, false, $context);
$record = json_decode($response, true);
$url = $record['fields']['URL'];

if ($_GET['debug']) {
  echo '<pre>';
  var_dump($options);
  var_dump($response);
  var_dump($record);
  var_dump($url);
  echo '</pre>';
} else {
  header("location: ${url}");
}

config.ini

base_id=your-airtable-base-id-here
table_name=Your Table Name
token=your-api-token-here

Once these 3 files are in place, there is not much else to do. We just need to have at least a link in the base, copy the ID and use it in our browser using the correct domain and path to your server. In this example, our server domain is example.com and our s folder is in the root of the public folder, so we could try going to http://example.com/s/SOMEID (assuming also that SOMEID is a valid ID in our table) and get redirected to the real URL 💥.

If for some reason I need to debug 🐛 the code and see what is going on, I can add ?debug=true to the URL and the script will show me some variables instead of doing the redirect.

There you go! A custom link shortener with very few code and you can also change the URL whenever you need.

Pending items

Airtable allows you to do 5 requests per second, so you might need to use a different storage if you are thinking to go to production with this code (which I do not recommend for big or heavy usage).

There is no error handling at all, nor logging, so again you need to think twice before going to production with this code 😉.

Closing thoughts

I still like PHP a lot for small and quick solutions like this. I it very simple to get it up and running and I do not need to setup any monitor or daemon to keep my process running as I would need to do with Node.js.

Airtable is also a very nice tool I use pretty often both from the Web UI and programatically.

I hope you like and find this example useful. If so, please leave a comment and share with it with your friends 🙂.