Forem: Chris Texe

Keychron Linux Function Keys

Chris Texe — Fri, 24 Nov 2023 08:58:00 +0000

I have a Keychron K8 keyboard. I like this keyboard so much! If you have a Keychron keyboard you noticed that in Linux when you press e.g. F2 key in order to change name of some file you adjust brightness (in my case). Default behavior of these keyboards is multimedia keys in function keys.

The second problem I noticed: reconnection takes very long time. I had to try many times to connect after disconnect. It was so frustrating...

So I found a solution in these two articles:

Mike resolved problem with function keys in Keychron keyboard.

Set the keyboard to Windows mode via the side switch
Use Fn + X + L (hold for 4 seconds) to set the function key row to "Function" mode. (usually all that's necessary on Windows)
type echo 0 | sudo tee /sys/module/hid_apple/parameters/fnmode in terminal

Andre resolved problem with slow reconnection via Bluetooth:

Edit the file /etc/bluetooth/main.conf
Uncomment FastConnectable config and set it to true: FastConnectable = true
Uncomment ReconnectAttempts=7 (set the value to whatever number that you want)
Uncomment ReconnectIntervals=1, 2, 3

What I did additionally was creating autostart above commands when my system is starting up.

Create a file '/opt/my_scripts/keychron.sh'

   #!/bin/sh
   #sleep 20
   echo 0 | tee /sys/module/hid_apple/parameters/fnmode
   exit 0

Notice there is no sudo in this file!!!

Make this file executable by typing sudo chmod a+x /opt/my_scripts/keychron.sh
Create a service file: sudo touch /etc/systemd/system/keychron.service
Edit this file sudo xed /etc/systemd/system/keychron.service and paste it:

   [Unit]
   Description="Keychron service"

   [Service]
   ExecStart=/opt/my_scripts/keychron.sh
   Restart=on-failure
   RemainAfterExit=true

   [Install]
   WantedBy=multi-user.target

Start this service sudo systemctl start keychron
Make it lauch automatically upon booting sudo systemctl enable keychron

That's it. From now when I boot my system my function keys are working not in "multimedia mode" and Bluetooth reconnection is very, very fast.

Composer in Docker

Chris Texe — Sun, 14 Aug 2022 16:48:00 +0000

When you are PHP developer I am sure you use Composer. In this article I will not explain here what Composer is (I assume you know it). But how to use Composer without installing PHP in your operating system? The answer is simple - use Docker.

I use composer in my system (currently Linux Mint 20.3) by this command:



docker run --rm -v $(pwd):/app composer -V

Let's see what parameters we have here:

docker run - we run image

--rm - we remove this image from memory after it will finish job

-v $(pwd):/app - we map current directory (pwd) to /app directory inside of docker container

composer - we run composer image (it's image name)

-V - we check the version of composer (we don't have to do it, I did it to check if composer is working)

When we will run the above command the composer will start working. First docker checks if the image is present in the local system. If yes, Docker will run it, if not, Docker will download it. So when you will run this command first time, it can take some time to download the image but later running the command will be very fast.

From now every time you want to use composer you can run the above command. I know, I know, I hear your shout: What does it mean? Should I use this long command every time?

No you shouldn't. You can make an alias in your system. Open the .bashrc file from your home directory and add at the end of this file these lines:



#my aliases
alias composer='docker run --rm -v $(pwd):/app composer'

From now when you will type composer in your terminal, composer will start running. Of course after saving the .bashrc file you have to close terminal (it was opened) and open it again in order to load the new settings form .bashrc file.

CAUTION! The .bashrc file is hidden!

Let's try to make an example from real life. In this example I will install Laravel application but it is only example.

First let's clone Laravel repository:



git clone https://github.com/laravel/laravel.git laravelapp/

We cloned all Laravel files to our local directory laravelapp. Next we change directory to laravelapp:



cd laravelapp

Now we are ready to install vendor packages by using this command:



composer install

#or if we didn't create alias:
docker run --rm -v $(pwd):/app composer install

We will see that composer will start downloading packages:

Or course when you will use other commands, composer will work e.g.:



composer require laravelcollective/html

This command will install laravelcollective package in your Laravel application.

Is it simple? Tell me in comments what do you think.

It would be great if you will comment or follow me on social media:

Also you can visit my websites:

Custom tab in WooCommerce

Chris Texe — Thu, 04 Aug 2022 15:57:57 +0000

Hello WordPress guys and gals! Sometimes when we work with WooCommerce we need to add some special tab. Recently I had to do it when I was creating a e-commerce shop for one of my client. It was a shop with clothes and every item in the shop had a size (L, M, XL etc.). So I decided to create a custom tab with "Size charts" name. In this tab I put the table with sizes.

Here you can see example but it's not from the shop I talked about above:

So how to create a custom tab in WooCommerce?

Just open functions.php file of your theme and paste these lines of code:

It would be great if you will comment or follow me on social media:

Also you can visit my websites:

Beautiful mark tag style in CSS

Chris Texe — Wed, 03 Aug 2022 05:12:38 +0000

I am sure you many times used a mark tag in your HTML document. Without any styling it can be a little bit boring:

With few lines of CSS code we can make it a little nicer, like this:

The whole secret is in these lines of CSS code:



mark.one {
  background: linear-gradient(
  -100deg,
  hsla(48,92%,75%,.3),
  hsla(48,92%,75%,.7) 95%,
  hsla(48,92%,75%,.1)
  );
  border-radius: 1em 0;
  padding: .3em;
  }

It would be great if you will comment or follow me on social media:

Also you can visit my websites:

CSS animations - Zoom image

Chris Texe — Tue, 02 Aug 2022 08:23:08 +0000

I am sure you saw many times on some website image with this kind of animation:

The CSS code for this effect can not be very difficult:



.ct-animate-zoom {
    animation: zoom_image;
}

@keyframes zoom_image {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

We defined animation and we scale from 0 to 1 our image. Simple, isn't it?

It would be great if you will comment or follow me on social media:

Also you can visit my websites:

CSS animations - slide text

Chris Texe — Mon, 01 Aug 2022 06:24:00 +0000

Recently I showed you how to fade in or out any text in your HTML document. Today I will show you how to easily slide text into direction we want.

Slide into the right

First let's try to slide it into the right like this:

The code is very simple:



.ct-slide-right {
    position: relative;
    animation: my_animation 1s;
    animation-fill-mode: both;

}

@keyframes my_animation {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

Let's stop here for a second and see what we have here. The main elements of this code are:

animation: my_animation 1s; - we have here the name of our animation and duration, 1 second in this case

@keyframes my_animation - defines our animation. So the start position is -300px from the left side and opacity 0. Then we are going to the to state. In this case margin left will be 0 and opacity 1. Duration of this takes 1 second. Opacity adds some smooth revealing.

Slide into the left

To change direction just change left into right in animation parameters:



@keyframes my_animation {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

Slide into the top

If you want to move your text from bottom to top just change the same parameters but this time into bottom:



@keyframes animatetop {
    from {
        bottom: -300px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}

Slide into the bottom

And analogous change the bottom into top when you want to move element from top to the bottom:



@keyframes animatebottom {
    from {
        top: -300px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

It would be great if you will comment or follow me on social media:

Also you can visit my websites:

CSS animations - fade in/out text

Chris Texe — Sun, 31 Jul 2022 10:37:00 +0000

Have you ever wanted to make a fade in animation of any element in your website? For instance something like this:

If yes, you are in the right place. It's very easy and to make this animation on your website put these lines in your style sheet:



.ct-animate-fadein {
   animation: fadeInAnimation ease 2.5s;
   animation-iteration-count: 1;
   animation-fill-mode: both;
   }

@keyframes fadeInAnimation
{
   0%
   { 
   opacity: 0;
   }

   100% 
   {
   opacity: 1;
   }
}

Maybe you want to fade out?

The same you can do when you want to make a fade out animation. Just reverse the opacity in keyframes:



@keyframes fadeOutAnimation
{
   0%
   { 
   opacity: 1;
   }

   100% 
   {
   opacity: 0;
   }
}

It would be great if you will comment or follow me on social media:

Also you can visit my websites:

CSS animations - blinking text

Chris Texe — Thu, 28 Jul 2022 08:27:00 +0000

If you want to make some text like this:

Just put this code in your styles:



.ct-animate-blink {
   animation: blink 1.5s infinite;
   animation-fill-mode: both;
   }

@keyframes blink {
   0% { opacity: 0 }
   50% { opacity: 1 }
   100% { opacity: 0 }
   }

What we did? We created animation with blink name and set duration for 1.5s. The animation will be played infinitely (see the infinite parameter).

Next we set the keyframes (from 0% to 100%) and opacity (from 0 to one, and back to 0).

It would be great if you will comment or follow me on social media:

Also you can visit my websites:

How to show different menus to logged in users in WordPress

Chris Texe — Wed, 27 Jul 2022 12:17:06 +0000

Sometimes we want to show different menus to logged in users than logged out users. Especially it could be useful when we have for instance a e-commerce shop. So how to do it?

Step 1 - create menu for logged in users.

Notice the menu ID - it will be required later. So menu for logged users should have a "LOGOUT" menu item.

Step 2 - create menu for non-logged in users:

Step 3

Open functions.php file which is in your theme directory and paste this code:

That's all! Now you can see you have two different menus depended on you are logged in or not.

Chris Texe

How to draw a radius on Google Maps

Chris Texe — Thu, 21 Jul 2022 08:55:37 +0000

I'm sure you saw many times maps like this:

On this map we have a radius (circle) with operating range of some company. We have red line around the circle and also this radius is filled by transparent red. So how to make this?

Step one

First we have to open Google Maps, type the city name in search field. Then we should copy GPS coordinates by right click on the city and click on GPS coordinates:

Step two

Next open any KML generator, I usually use this KML circle generator but you can use any. KML means Keyhole Markup Language and it is a file format used to display geographic data in an Earth browser such as Google Earth. Then paste these GPS coordinates into form field and type radius in kilometers, miles etc. You can select color. Finally click Generate button and download the KML file.

Step three

Open Google My Maps sign in, and create a new map. In the new window beside Untitled layer click Import and upload a KML file you've created in step one.

Next select color and line width. You can name your map if you want.

Step four

Click on Share and enable Anyone with this link can view. You can decide if others can see you name and photo on this map. Next click Close.

Step five

Click on preview.

The new tab will open with default view of this map. Click Share and choose <> Embed on my site. Copy the code and paste it in your website code.

Example of the code looks like this:

<iframe src="https://www.google.com/maps/d/embed?mid=1AJnVYcE_SzVL3kbu-FRkQLFbKOzB1JE&ehbc=2E312F" width="640" height="480"></iframe>

And you have a map with operating range on your site! You can adjust width and height.

It would great if you will follow me on Twitter: Chris Texe

Remove version strings from CSS and JS link hrefs in WordPress

Chris Texe — Tue, 19 Jul 2022 03:52:29 +0000

Yesterday I gave you a quick tip how to remove meta generator tag in WordPress. After applying this tip you can still see the WordPress version in the source code:

What to do if you want to hide it? Just apply below code into functions.php file of your theme.

If you want more tips follow me on Twitter: @TexeChris:

Remove meta generator tag from WordPress

Chris Texe — Mon, 18 Jul 2022 10:51:01 +0000

Standard WordPress installation displays version of WordPress in source code:

There are some security reasons to hide or remove this information. It's better than bad guys will not see your version of WordPress.

So, if you want to remove WordPress version from <head>section put this code into functions.php file:

After saving the file, the whole tag has gone!

And maybe better cheat bad guys?

After saving the second code in the source code you will see:

<meta name="generator" content="FrontPage 4.0">

If you want more tips follow me on Twitter: @TexeChris: