DEV Community: Jorge González

Integrating Tinkerwell with GNOME

Jorge González — Wed, 24 Feb 2021 22:22:31 +0000

Tinkerwell is one in the growing list of apps created by BeyondCode. This Desktop app allows you to execute PHP code from a REPL interface, which can be connected to a local environment, the production one or even a Docker container! 👀

Why Tinkerwell?

This incredible app was developed with the Laravel Developer in mind, to simplify the work that we all already do: Use the tinker tool. 🤔

tinker is a package created by the core laravel team, which uses the psysh REPL under the hood. This allows developers to tinker with their Laravel applications directly, executing code in the console and seeing the results right away, without needing to enter debug mode, or create test routes to verify that a simple Eloquent query work as they expect.

Tinkerwell was born to provide the same benefits from tinker, but packed with a pretty UI, and the ability to switch context without having to leave the app ❤️.

Oh... By the way... This app is multi-platform! It is available for Windows, macOS and Linux 😍.

Linux? Where do I sign?

Well, you can buy a Tinkerwell license in their website without hesitation, no compromises!

Now, one thing you need to know about the Linux compatibility is that it's distributed via AppImage packages, which is a simple executable form factor that doesn't require the end user to install system libraries nor recompile their kernel for an app to run.

In my opinion, this was the right move.

However, AppImages do come with a cost: Lack of system integration.

As many Linux users may know, most Desktop Environments come with the ability to display your Desktop applications in their own application menu, however, since AppImages are not meant to be installed, they will not show in your application list.

Today, I'm here to tell you there's a way to solve this and provide neat discoverability for your application when using the GNOME Desktop Environment 👨‍💻...

Tinkering with GNOME

It is stated in the GNOME Documentation, that you can create your own application shortcuts by creating files with the extension .desktop and linking them in one of the corresponding directories.

From this point forward, I'm going to assume that you have downloaded the
Tinkerwell AppImage in the ~/Applications/Tinkerwell/ directory

First, verify that your AppImage is executable, otherwise, make it executable using the command:

chmod a+rx ~/Applications/Tinkerwell/Tinkerwell.AppImage

Before creating our Desktop Entry, we must get an icon for our start menu. You can simply google for the tinkerwell icon and just save it in the same directory as the AppImage file.

Now, let's create the Desktop shortcut for Tinkerwell. I'll be creating it in the same directory that Tinkerwell was downloaded:

touch ~/Applications/Tinkerwell/beyondcode-tinkerwell.desktop

To keep things simple, you can copy and paste the following Desktop Entry:

[Desktop Entry]
Name=Tinkerwell
Exec=/home/<your-user>/Applications/Tinkerwell/Tinkerwell.AppImage
Icon=/home/<your-user>/Applications/Tinkerwell/icon.png
Type=Application
Categories=tinkerwell;electron;php;beyondcode;laravel;

Remember to specify your user's path properly, as well as the AppImage name and icon file name.

Once you created your Desktop Entry and properly referenced both the AppImage and icon files, it's time to tell GNOME to include your application. In this case, we will be creating a Symbolic link to our desktop entry:

# Remember: The syntax for the link command is
#     ln -s <TARGET> <LINK_NAME>
# In other words, it means
#     ln -s <ORIGIN> <DESTINATION>

# Important: You must always reference absolute (full) paths when creating any type of links.

ln -s \
  /home/<your-user>/Applications/Tinkerwell/beyondcode-tinkerwell.desktop \
  /home/<your-user>/.local/share/applications/beyondcode-tinkerwell.desktop

If you read the GNOME documentation linked previously, you would remember that linking a Desktop Entry file to ~/.local/share/applications/ will allow GNOME to index and display your application in their main menu 🔮.

Now, in order to tell GNOME to immediately show us the way, we must run the following command:

# Look ma! No sudo!
update-desktop-database

If every piece is properly configured, we should now see tinkerwell in our application menu! 🎉

Now, besides having such a powerful tool at your disposition, you also have a quick access entry in your application menu 🏃‍♂️.

Setting up Laravel applications with Caddy 2

Jorge González — Wed, 24 Feb 2021 22:13:06 +0000

Managing web servers can be kind of tricky, and with an increasing number of applications in one server, managing all of their configuration files can start to feel like a burden 🥴.

Maybe just my point of view, maybe not at all...

In the last few days, I started looking for a way to migrate from Nginx to a Caddy web server for all my Laravel applications, just because of two things:

Caddy is HTTPS-first, so I don’t need to worry about certbot trying to renew domains that are no longer available in my private server, nor failing to manage recently added domains that I forgot to tell certbot about. Caddy manages this for me automatically 💖.
Caddy’s configuration files are way easier to understand than Nginx’s, even without previous knowledge of the properties of a Caddyfile, you can easily grasp what a config file is doing just by reading it.

Surprisingly to me, Caddy just got its v2 upgrade a few months ago, which is full of new awesome features, and the cherry of the cake for me is that their traditional Caddyfiles just got way easier to read! So much was done right for this update!

Also surprising to me was the lack of Laravel templates available for Caddy 2, which is not a big deal, but I hoped to find a good template as a starting point after all these months that Caddy 2 has been available.

Instead, I found Mattias’ Laravel template for Caddy v1 (thanks Mattias!), which seemed pretty solid to me, so I saved a copy and started to work 👨‍💻.

Getting Started with Caddy

First of all, you need to install Caddy on your server (obviously), you can find a pretty detailed guide on Caddy’s Documentation. So just go and surf the documentation before coming back.

PHP + Caddy = ❤️

So, managing PHP applications with Caddy is dead simple, and even Laravel is a dead simple framework for PHP, so a pretty good match can come out of this 👀.

Let’s take a moment and think of what we need to tell Caddy about our Laravel application:

It should use HTTPS.
It should serve static files if possible.
If no static files are found, then it should properly route incoming requests to PHP-FPM.

Well, this seems like a good starting point. So, I present to you the Caddy 2 template I use for Laravel:

my-website.com {
    # Resolve the root directory for the app
    root * /var/www/my-website/public

    # Provide Zstd and Gzip compression
    encode zstd gzip

    # Allow caddy to serve static files
    file_server

    # Enable PHP-FPM
    php_fastcgi unix//run/php/php7.4-fpm.sock
}

A fun thing about this is that Caddy does support the Zstd Compression Algorithm, however, no browsers actually support it. Anyhow, supported algorithms are requested from the client, so we're prepared for the time when browsers start supporting zstd.

As you can see, integrating Laravel with Caddy is dead simple. Just define the root directory, present our PHP-FPM socket to Caddy and finally tell Caddy to serve static files when possible.

But wait... What about HTTPS? Where do I define port 443? How do I configure my Let’s Encrypt SSL certificates? Well... SURPRISE!!! Caddy automatically handles SSL certificates for you! 😍. No need to define port 443, no need to have a folder with certificates, all is handled automatically by Caddy and it’s internal Let’s Encrypt integration 🥳.

Up to this point, everything should be OK for you, you can start copy-pasting this template for all your websites! 🚀

Let's make this easier...

Okay, hold on a sec... Didn't I say that it is a burden to manage multiple configuration files? Yeah, I did... But we can actually abstract this template into a Caddy Snippet which can help us to re-use this template without copy-pasting anything!

Supposing that you're interested enough, I hope you already took a look at the link above, if not, go check it out!

Now, back to our snippet... In my setup, I have a /etc/caddy/snippets/ directory where I place all my snippets, so I can easily import them beforehand:

# Caddyfile
import snippets/*

And that's it, all available snippets in the directory will be available for us,
now, we can create our laravel-app snippet:

# snippets/laravel-app
# {args.0} represents the root url of the app. Example: "jorgeglz.io".
# {args.1} represents the root path to the app. Example: "/var/www/my-site.com"

(laravel-app) {
    {args.0} {
        # Resolve the root directory for the app
        root * {args.1}/public

        # Provide Zstd and Gzip compression
        encode zstd gzip

        # Enable PHP-FPM
        php_fastcgi unix//run/php/php7.4-fpm.sock

        # Allow caddy to serve static files
        file_server
    }
}

Cool! Now we can start referencing this snippet for all our Laravel apps:

import snippets/*

# Use the "laravel-app" snippet for our site:
import laravel-app my-site.com /var/www/my-site.com

And with this, we're good to go! ⚡

Just beware that modifying the snippet will update the configuration for all your applications, so keep it as simple as you can 😉.

Implementing Dark color scheme with TailwindCSS

Jorge González — Tue, 21 Apr 2020 02:42:39 +0000

Dark mode 🌑 has been a hot topic in the UX land for quite some time, and it recently blew up with its official implementation in major Operating Systems during the last few months.

With this trends, many websites started to generate a Dark mode version of themselves, which may enabled manually by the user, automatically based on your device's preference, or both ways.

Modern web browsers implemented this functionality recently with the introduction of the prefers-color-scheme CSS Media Query. We can use this feature to dynamically adjust the look of our websites to match users preferred setting :hushed:.

In this post I'll explain how to achieve automatic adjustment based on the prefers-color-scheme media query with TailwindCSS ⭐. If you would like to implement a manual-based switch, this is not for you 😢.

TailwindCSS and its Utility-first Design

TailwindCSS allows the developer to use utility classes to define the look and feel of their websites, instead of needing to create complex CSS classes for your components ⚡. Also, it allows us to customize the configuration even further, by changing the default color palette, screen breakpoints, interactive variants, and way more! ✨

Implementing the `prefers-color-scheme` Media Query

We don't need to re-write all class utilities offered by Tailwind in order for them to switch between Dark/Light modes 😬, instead, we can use media queries to define our new color scheme the Tailwind way 🔥.

All we need to do is extend the responsive configuration in our tailwind.config.js file like this:

theme: {
    extend: {
        screens: {
            'dark': { raw: '(prefers-color-scheme: dark)' }
        }
    }
}

This will add a dark responsive utility that works like any size utilities like sm, md, etc. This new responsive utility will come in handy when defining (for example) which colors to use when a user's color preference is set to dark.

A simple example will be to define a White background by default, and switch to a Darker one if possible. With our new responsive variant we could do something like this:

<!-- On your HTML code... -->
<body class="bg-white dark:bg-gray-900">
    <!-- Your content here... -->
</body>

And that's it folks, we can start implementing our own Dark website! 🎉

What about `hover` or `focus`?

This could be a tricky situation, for example, when you change the color of an element based on a hover interaction. The most common solution I've seen is that many people end up implementing both a dark-hover and dark-focus variants.

The good news is that it's not needed for most of the use cases 🧐.

There's actually a (not so) secret Tailwind feature that allows us to combine responsive prefixes with interaction variants!

As seen in the official docs, we can use orange-based colors for a button on certain screen sizes, and green-based colors for the other screen sizes 😮:

<button class="bg-orange-500 hover:bg-orange-600 sm:bg-green-500 sm:hover:bg-green-600 md:bg-red-500 md:hover:bg-red-600 lg:bg-indigo-500 lg:hover:bg-indigo-600 xl:bg-pink-500 xl:hover:bg-pink-600 ">
  Button
</button>

Look carefully... Theres a sm:hover:bg-green-600 class! So, if our dark query truly is a responsive prefix, then it means we could switch sm for dark and follow the same naming conventions... And the answer is YES!

If we want to use a white-based colors for a button in our Light scheme, and gray-based colors for the same button in our Dark scheme, we can write something like:

<button class="bg-white hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700">
    <!-- ... -->
</button>

This will indicate that:

When on Light scheme, our button will have a white background, and a subtle gray when hovered.
When on Dark scheme, our button will have a darker background, and a slightly lighter color when hovered.

With this, we can start expanding our coloring schemes to give those Dark users the feeling they truly want and prevent soaring eyes (DEV pun intended)!

A pretty long story about myself and how I became a self-taught developer.

Jorge González — Thu, 23 May 2019 12:45:02 +0000

NOTE: I've been here at dev.to some time already, but never actually introduced myself, so Hello World!

I'm Jorge González, I'm (at the time of writing this) currently coursing a Software Engineering degree in Mexico 🇲🇽.
I love to code and play around with new technologies. Mostly, I've been in the Web development world, learning about the
Do's and Don'ts for both the Frontend development and the Backend development. I consider my self a Full-Stack
capable developer.

TL;DR

I'm not new to the internet, I've been around for quite some time, but this is technically my first formal presentation
to the world, and done in a way that web archives can keep for history.

My story

My first approach to technology was when I was around 4-5 years old. I can remember that my grandfather bought a digital
camera, which was, by the time, only available in English. He taught me how to use it to take photos, and since he let
me play with it almost every day, I discovered how to turn on the Sepia and B/W filters, and later on, how to record
video footage. This was definitely the biggest turn point in my whole life.

After 2 years, he also bought a Desktop Computer, and requested internet access from a pretty common Mexican ISP.
With that new computer, he taught me to use Windows Paint, and I got to spend hours trying to draw cars and houses,
but as soon as I got bored, I started exploring the different options, menus and configurations that I could find in
that program, without really knowing what anything was actually, since I was just starting to learn to read and write
in Spanish.

Some time after mastering my circle painting skills, I discovered that the PC had more programs than paint that I could
actually use without blowing up the whole system, being those the File Explorer and the Internet Explorer.
Files are files, right? But... Internet? Wow, that was new to me... I could go in IE and it would open up Google
automatically, and if I typed anything with the keyboard, it would go and search for it in a catalog of items...
I remember that somebody once talked about Encartas for local system dictionary searches, but Google was way more than
that, I could literally type anything and it would result in some matches.

And aunt of mine showed me how I could use Google to get some pretty basic search results in Spanish, so I was able to
Google for Power Ranges, Racing and other random games, as well as to look for news.
The combination of the high neoplasticity of a young me, and the power of the internet allowed me to start accelerating
my learning path, starting of by learning to read and write in English at the same time that I was learning to do so
in Spanish, so I was able to develop my secondary language almost as fast as I was improving my mother language.

Technological news got my attention, I started learning how to actually use the Internet, how to make Google searches,
how to take advantage of Wikipedia to make my homework, and also, to use Youtube just to see those Super Saiyan 50
Goku and Vegeta theories.

Now, back to more relevant stuff...

At the age of 10, I asked myself if it was possible for me to build a website like Google, or like Facebook, just so I
could have miscellaneous stuff in there for other people to watch. So I came across with Jimdo and Wordpress, and they
where really great, but wasn't satisfied with the customization options that they offered me by the time, so I started
googling for tutorials that guided you to make your own Website.

Some years later, I got involved in the PHP world, all because I wanted to write Minecraft: Pocket Edition (Now known as
Bedrock Edition) plugins, and the only software available at the time was
PocketMine-MP. I learnt to use Object Oriented programming and started
developing my very first coding project (which by the way, was Open Source):
EssentialsPE. This was an ambitious project, since I was porting
some of the features from a Java plugin to PHP, and also, I started learning about code optimization and peer-working,
and thanks to Github, I was able to get involved with some other cool developers, and we created the
LegendsOfMCPE (aka LoMCPE) organization, which aimed to develop plugins for PocketMine-MP.

Actually most of the plugin ideas we had, were not able to see the light of a stable release, but the ones that did,
gained quite some popularity in the community. We were able to grow a lot and learn one from another. That was the first
time I experienced the phenomena called globalization by myself.

Time passed, most of those Legends that developed plugins started looking to other life projects, and most of us, started
looking toward further developing our path in the coding world.

If you remember, at the beginning of this post, I was talking about being a capable Full-stack developer, well, my
very first introduction to the Backend land was indeed while programming plugins with the LoMCPE organization,
but I also got some a lot of experience since I got a job years later as a Junior Dev at a Multiplayer Games
Company. That's where I got lots of knowledge on project architecture, API optimization and kind of what is called
Microservices for high availability of our services.

My introduction to the Frontend land was indeed with that company, I was one of the only employees that really liked to
work with PHP, since I worked with it before in some projects, so I was asked to cover the Website developer while he was
away for a week. I remember contacting that developer a week before he went busy, asking him to help me getting familiar
with the structure of the Website. To my surprise, he was actually using a pretty solid PHP Framework, I was expecting
pure-php code, like many tutorials explain for people that just started programming.

Everything went fine, I was able to know how to modify the Website without breaking everything up, deploy it and also create
modules for connecting with our game servers and show an (almost) live count of players currently playing in each of the
games we offered.

I left that company a year later, but full of new knowledge.

Nowadays, I'm further developing my coding skills by maintaining some personal side projects, and working independently
for a Nutritional Center, developing their whole system.

So, this is currently me, but we're just getting started.