Blog2me

Simple images as radio buttons with tailwindcss 2.2.x

Sun, 18 Jul 2021 23:07:03 GMT

Example: https://play.tailwindcss.com/N5UxhWwTKN

Tailwind CSS v2.2 introduced the peer utility class that allows us to target sibling elements and style them based on the ‘peer’ element state.

This feature is only available in Just-in-Time mode, so please remember to add mode: 'jit' in your tailwind.config.js file

With this utility we can change a label style based on the radio button input ‘checked’ state, as long they are direct siblings in the HTML.

We need to add the ‘peer’ class to the element that will change its state, and then the peer and the desired pseudo-class selector for that state, in this case we will use peer-checked

<form>
  <label for="option_1">
    <input type="radio" id="option_1" class="peer">
    <span class="peer-checked:border-green peer-checked:border-4">...</span>
  </label>

  <label for="option_2">
    <input type="radio" id="option_2" class="peer">
    <span class="peer-checked:border-green peer-checked:border-4">...</span>
  </label>
</form>

In this example, the label will get a green border when the radio button is selected. You can do the same with checkboxes or other elements, and with almost all pseudo-classes available.

Now the only step missing to create a radio button disguised as an image, its to add the utility class ‘hidden’ to the input element, and add an image in the span element in the example, or just add the tag as a sibling to the input element and add the classes to that element.

<div class="flex space-x-4">
  <label for="opt1" >
    <input type="radio" id="opt1" name="test" class="peer hidden" />
    <img src="http://placehold.it/200x200" alt="" class="peer-checked:border-green-500 peer-checked:border-4" />
  </label>

  <label for="opt2" >
    <input type="radio" id="opt2" name="test" class="peer hidden" /> 
    <img src="http://placehold.it/200x200" alt="" class="peer-checked:border-green-500 peer-checked:border-4" />
  </label>
</div>

https://play.tailwindcss.com/N5UxhWwTKN

How to prevent brute-force ssh attacks with fail2ban

Wed, 14 Jul 2021 22:36:51 GMT

If you are experiencing a brute-force ssh attack (people or robots trying different combinations of username and password to log into remote servers), you probably want to implement a fail2ban strategy to prevent them to keep trying.

Before writing about fail2ban, if you are using AWS, I will highly suggest checking your Network ACLs. If possible, whitelist the IPs that can use the ssh port in your server. Sadly we have dynamic IP’s here in Argentina and it’s going to be really tedious to go and whitelist my IP every time it changes, especially when you could need to access multiple servers a day.

Fail2ban

I won’t go too deep on all that you can do with this software, but if you are interested in read more about it in their github wiki

We will use it for blocking IPs to keep trying to access via ssh after N number of attempts.

First you need to install the package, my server uses ubuntu so we run:

sudo apt-get install fail2ban

Now to configure you need to create a jail.local file in the folder at /etc/fail2ban/. You can read the default configuration from /etc/fail2ban/jail.conf. Let’s create that file:

sudo touch /etc/fail2ban/jail.local

Since we are only going to use the ssh module, we just need these lines in the file:

[sshd]
maxretry = 5
bantime=10800

Feel free to change those values as it better fits your usage.

Now we just need to restart the fail2ban service and we are ready to go:

sudo systemctl restart fail2ban.service

Now your server will reject connections via ssh if they fail to access more than 5 times in a row. Great!

If you want to check the status of fail2ban, check how many fail attempts happened and how many IPs are banned at some point in time you can run fail2ban-client status sshd and it will display something like this:

Status for the jail: sshd\
|- Filter\
|  |- Currently failed:	1\
|  |- Total failed:	75\
|  `- File list:	/var/log/auth.log\
`- Actions\
|- Currently banned:	2\
|- Total banned:	6\
`- Banned IP list:	161.35.80.11 186.159.10.210

Troubleshoot

fail2ban adds rules in iptables program from your linux distro. I had issues while trying to execute iptables —list, to check how those rules where applied after configuring fail2ban in one of my staging servers:

modprobe: ERROR: could not insert 'ip_tables': Cannot allocate memoryiptables v1.4.21: can't initialize iptables table `filter':
Table does not exist (do you need to insmod?)
Perhaps iptables or your kernel needs to be upgraded.

In a previous post I commented about linux images taking too much space in your inodes disk space (df -i returning 99%+ in /dev/xvda1). The solution, if applied incorrectly like I did, may corrupt the execution of iptables commands. In short, try to don’t delete the image that you are currently using. To check which version to keep check the output of uname -r in your server terminal.

Thankfully, we can easily re-install that linux image by using that output too:
sudo apt-get install linux-image-$(uname -r)

That should reinstall the iptables program. I read that some people needed to run sudo apt-get full-upgrade and then reinstall the linux image.

Rails env setup, Apple Silicon (M1) troubleshooting

Sat, 19 Jun 2021 21:51:38 GMT

I was setting up my dev environment for a rails 5 app that runs with ruby 2.4.x and a good mix of gems.

The gems ffi, pg, mysql2, mimemagic and sassc needed some extra steps besides the regular bundle install, here’s what I did:

Postgres

Use brew to install postgres, its actually easier than using Postgres.app

ffi 1.9.18

brew install libffi
type this in a terminal to set them as env variables export LDFLAGS="-L/opt/homebrew/opt/libffi/lib" export CPPFLAGS="-I/opt/homebrew/opt/libffi/include" export PKG_CONFIG_PATH="/opt/homebrew/opt/libffi/lib/pkgconfig"
run the install with this cflags gem install ffi -v '1.9.18' -- --with-cflags="-Wno-error=implicit-function-declaration"

mysql2

Install mysql, openssl and zstd
brew install mysql
brew install openssl
brew install zstd

Then use this flags on the gem installation:
gem install mysql2 -v '0.5.2' -- --with-opt-dir="$(brew --prefix openssl)" --with-ldflags=-L/opt/homebrew/Cellar/zstd/1.5.0/lib

If you need the path for zstd lib because its different than mine, you can find it like this ls -la $(which zstd)

mimemagic

 brew install shared-mime-info
 gem install mimemagic -v '0.3.10'

sassc

In this case I just updated the gem because they solved the issue in newer versions. bundle update sassc It installed without issues using v2.4.0

miniracer

While trying to run rake tasks, mini_racer throw some errors.:

dyld: lazy symbol binding failed: Symbol not found: __ZN2v82V813InitializeICUEPKc  Referenced from: /Users/<user>/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/mini_racer-0.2.6/lib/mini_racer_extension.bundle

They addressed those issues on newer versions, so again, just updating the gem does the trick:
bundle update mini_racer

Tips for Teaching (WIP)

Mon, 16 Nov 2020 00:09:27 GMT

Set clear expectations. Provide a clear summary/syllabus beforehand, make it easy to understand, and encourage them to do research on those topics before lessons. It’s easier to learn when you prepared your mindset for it.
Value failure while learning. Move fast and break things. The fear of failure often slows down the learning process, let them know that bugs and errors are a good way to learn from them.
Use real-world process. Use github repos for the assignments, pull request, and code reviews for evaluations (and evaluate with pass/no-pass instead of scores)
Allow them to copy-paste, but encourage learning through it. Teach them how to find answers on stack overflow, github, or by reading blog articles. Allow them to implement them while learning to do so.
Use best practices. Don’t use placeholders for coding examples like foo/bar, and teach them how to look for best practices by themselves.
Discourage memorization. Usually, students came with the idea of learning everything by memory. Teach them that what they need to learn is how to solve problems, not the actual implementation. Let them know that in real jobs they will be able to use all type of resources, so they don’t feel the need to memorize entire APIs.
Show them how to learn something that you don’t know. Be the example of how to research something that you don’t know yet and how to use it in a real scenario.

Write the lessons in text, you can use them later as blog articles or as text complement to other resources.
From the text version, you can later transform that into visual resentations, videos, or podcasts.

Staying up to date, engineering blogs to avoid tech FOMO

Sun, 15 Nov 2020 23:31:39 GMT

These 3 sources are a great companion for a morning coffee before starting the routine. No scoped to any specific language/dev stack.

My current approach is to have daily.dev extension (curated dev posts on chrome/edge new tab), read every morning the titles of engineering blogs, and be subscribed to dev.to mailing list.

In addition to this, I’m also subscribed to some weekly newsletters for the languages/stacks that I’m
ed in:

To avoid procastination, I only commit between 30 or 40 minutes in the morning for this, and if I want/need to read more, I leave those important articles opened in tabs for later (after lunch or after finishing my daily routine)

Solving disk space issues at EC2 AWS Linux instances

Thu, 20 Aug 2020 20:52:08 GMT

More often than not (sadly) I struggle with the next error message at my amazon aws instances:
unable to create '/something/something.tmp': No space left on device

So, disk space issue… probably big log files that needs to be wiped or something like that? not always that easy.

How to diagnose the issue

When I ran df -H the output says that I still have some space left, so what is it?

Well, is possible that is the inodes allocation. Run df -i to check them out. If you find that you are at 100% or close to it, you need to get rid of them.

How to locate the files to remove

Where are they at? You can try to run this script (that doesnt needs to create a tmp file for it, since we dont have space left for that)

cd /
sudo find . -xdev -type f | cut -d "/" -f 2 | sort | uniq -c | sort -n

Common cause: linux-headers inodes

But, you can save some time if you first try for the most common source of this issue… old linux-headers

They are located at /usr/src/ folder, just run a ll and delete some to recover some inodes space (you wont be able to purge them using apt-get if you are at 100% disk usage). Don’t delete them all they are used by linux, just get rid of some old versions that may be lingering there.

So, for example, run:

sudo rm -rf  linux-headers-4.4.0-130/

Then you can try to purge some of them using sudo apg-get -f autoremove (and then manually remove old ones that weren’t removed that way)

TLDR;

Check if the issue are the inodes by running df -i

If its at 100% or close to it, try removing old linux-headers to recover some space. Don’t go crazy on this step, try removing only 1 of the oldest images and then run sudo apt-get -f autoremove

They are located at /usr/src/ folder (you can remove them with rm -rf)

Ruby on windows, a week later

Sun, 10 May 2020 23:22:47 GMT

A few days ago I wrote about how to get started on ruby using just windows (no WSL2). And so far it was a good experience, but with a few gotchas when I tried to get a client project working on the env.

No RVM or rbenv

Those tools are specific for linux/macos, but don’t worry, the solution provided for windows works excellent: Let me introduce you to URU

If you installed ruby following my last post, you only need to add it bin path to uru.

To install uru you can just download the binary and add it to a folder that is already in your PATH env (so you can start using the cli in your terminal), or install it through scoop:

scoop install https://bitbucket.org/jonforums/uru/downloads/uru.json

Then you can add your existent ruby version to it with this command:

uru admin add C:\Ruby24-x64\bin

Then to install other ruby versions just download the installer from https://rubyinstaller.org/downloads/, while installing make sure that you don’t overwrite any other stuff and that it just installs in a different folder. After you are done just run uru admin add <the_other_ruby_version_bin_path>

If you want to save disk space by re-using the devkit through different ruby versions, follow this guide. After that just install ruby versions without the devkit, they will fallback automatically to use it from the shared parent folder.

You can check your available ruby versions with uru ls and change to a different one using the names listed from that command, like this:

$ uru ls
    224p230     : ruby 2.2.4p230 (2015-12-16 revision 53155) [x64-mingw32]
    2410p364    : ruby 2.4.10p364 (2020-03-31 revision 67879) [x64-mingw32]
    266p146     : ruby 2.6.6p146 (2020-03-31 revision 67876) [x64-mingw32]

$ uru 2410p364
---> Now using ruby 2.4.10p364 tagged as `2410p364`

$ ruby --version
ruby 2.4.10p364 (2020-03-31 revision 67879) [x64-mingw32]

Gemsets will be scoped to those ruby versions. You can manage different gemsets for that ruby version using uru admin gemset init your_gemset_name in your specific project folder.

OpenSSL, rubygems and bundler

This seems to be a popular one, and a easy one to fix tho. In my project I have something like this in my gemfile:

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end

gem 'some_gems_from_github', github: '/usr/repo', branch: 'master'

source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.3.3'
end

The issue here, at least in fresh installations, will be related to https and openssl. It will complain about the certificates while trying to fetch from these sources.

I highly suggest to use Chocolatey and Scoop to install this kind of stuff. In this case, we need OpenSSL: choco install openssl

If the error persists even after installing openssl (and restarting your terminal) you can try with regular http sources, or go with a better long term solution: fix your certificates.

In unix systems we usually have rvm or rbenv, and at least with rvm you have a script ready that fixes the rubygems certificates for you if the problem arises. In windows you will need to do that manually, but there is a really good step by step guide:

https://bundler.io/v2.0/guides/rubygems_tls_ssl_troubleshooting_guide.html#automated-ssl-check

The step that actually did the trick for me is to download the cacert.pem file in my ruby directory, and set a SSLCERTFILE env variable with the path to it.

Puma

So we had multiple workers and daemonized setup for development in this project, and neither of those options are available for windows.

This step is simple, just change your puma config to run normally with 1 worker for windows. Rubygems actually has a helper to check for windows os locally with Gem.win_platform?, so you can have a different puma setup for windows.

ActiveAdmin and method calls without parenthesis

Is a common practice in ActiveAdmin to write stuff like this:

#syntax error on windows, unexpected '{'
scope :completed { |scope| scope.where(completed: true) }

And I still can’t figure out if the error belongs to the version of ruby that I’m using on this windows machine or to something else related with ActiveAdmin dsl… but it expects to have the explicit parenthesis on that scope method call, like this:

#This works fine on windows
scope(:completed) { |scope| scope.where(completed: true) }

Linux paths

This last one is obvious, but if you have a gem that requires something from linux systems (like custom loggers and stuff like that), they won’t work. You can bypass them using again the Gem.win_platform? helper in their initializers or even in the Gemfile:

gem 'i_use_linux_paths' unless Gem.win_platform?

Final thoughts

Like I said in the first post, this is not intended to replace your unix development environment, and it shouldn’t since your code is 99% sure going to run in some kind of linux distro when you deploy it to production.

Still, is really handy to be able to do some quick maintenance work without having to jump into my macbook for it. The problems that I listed here were specific to this project, which only knew unix until this week (and its 3 years old). I expect to find different issues in different projects, and I plan to document them here if they pop up in the future.

Lastly, if you start a fresh new app in windows

Ruby on Rails on Windows (and without wsl2)

Thu, 07 May 2020 00:37:04 GMT

Don’t get me wrong, I still think that working on a Unix based system is the best way to go for this server development environments since I’m almost sure that the code will be running in some Linux distro at production.

But being able to play with code in my windows pc is still helpful! Sometimes you just want to throw some code and play with it at that moment, and switching OS/computers may now be suitable always.

And if you want to teach someone to code, it’s going to be way painless to the newcomers to just stick with their OS (and for my students that is windows 99% of the time)

Development with rails on windows in 2020 is surprisingly easy, way faster than it was in the past, and the setup experience (with the LTS versions) is smooth.

How to - First steps

First, you will need to install some dependencies to get started with your development environment.

Download a good text editor like VS Code or Sublime Text
Download and install git for windows. You will be using the git bash terminal from it! while installing stick with the default options.
Download and install node.js for windows (in the last step of the installer you can opt-in to install some extra dependencies like chocolatey and python, 3 birds in one shot)
Download and install yarn which is the package manager for javascript that Rails is using nowadays.

Now we are ready to start with the ruby magic!

Download version Ruby+Devkit 2.6.6-1 (x64) from RubyInstaller. Don’t download a newer version unless it is in bold fonts and with an arrow on the left of the name. The version with those indicators is the stable one, and for windows, you need maximum compatibility. A newer version may work, but some gems are still not updated for windows+latest ruby version (like nokogiri, at the time of the writing).

While installing, click next and stick with the defaults. The last step will start a bash console where you are prompted to select one of the 3 options. Since this is your first installation, press 1 and then Enter

Now let’s install rails 6 like you always do: gem install rails

And that’s it!

Just a few gems may depend on libraries that don’t play nice with windows all the time, so it’s not a perfect solution, but for my day to day use cases, it works excellent! (and there’s a lot of support from the community at StackOverflow and relatives GitHub issues)

Hack a nice day.

Learn react native by example

Tue, 05 May 2020 21:42:43 GMT

I’ve been watching the youtube series based on this github repo https://github.com/react-ui-kit/dribbble2react and they are pure gold content.

You will be able to see how a react dev goes from a Sketch/Adobe XD design to a live react native application.

The repository contains the final code for each project, as well the links to the design files/posts at dribble.

Bonus track: another amazing source to learn react from videos is https://designcode.io/ but the difference is that you will need to invest in a subscription first (still completely worth it!)

Twitch IRC event message layout (sub example)

Tue, 05 May 2020 21:11:37 GMT

Here is an example of the message string (with breakpoints to read it easier) received from twitch irc chat when a user subscribes to a channel.

 @badge-info=subscriber/0
 badges=moderator/1,subscriber/0,premium/1
 color=#2226B2
 display-name=burago18
 emotes=
 flags=
 id=229ecd51-1ec2-4dda-ae43-6ac4058a25a3
 login=burago18
 mod=1
 msg-id=sub
 msg-param-cumulative-months=1
 msg-param-months=0
 msg-param-should-share-streak=0
 msg-param-sub-plan-name=Channel\sSubscription\s(yourchannel)
 msg-param-sub-plan=1000
 room-id=36476430
 subscriber=1
 system-msg=burago18\ssubscribed\sat\sTier\s1.
 tmi-sent-ts=1574904233310
 user-id=44812924
 user-type=mod :tmi.twitch.tv USERNOTICE #yourchannel

Useful information to parse from there are the msg-param-* parts, where you can get the subscription level selected, how many months and other stuff that they use to display the event in the chat properly.

I’m using this to display notifications in a html5 canvas, which is rendered over the video stream in OBS, and also for a loyalty points system within a chat bot for that channel.

Similar to this layout theres one for twitch points, twitch bits, raids, and other events with a custom style in the chat.

I will post the example in a future post, I would like to document how I solved many features requested for chatbots, loyalty systems, discord integration, etc.

Nginx per-site configuration

Mon, 04 May 2020 14:48:44 GMT

Somehow I wasn’t able to find this old mechanic in the documentations and within the first page of google results while looking for it for a memory refresh, so here we go with a rustic explanation, mostly for myself

There is a modular way to write nginx.conf blocks (http location config blocks for example), in a per-site fashion (similar approach as using ‘a2ensite’ and ‘a2dissite’ in apache)

This is helpful to keep an easy to maintain conf file when you have multiple sites/domains/subdomains configurations in the same server.

Quick how to

Change the site config at /sites-available/ and then make sure that the symlink to that file exists at /sites-enabled/, if it doesn’t create it with ln -s, example:

ln -s /etc/nginx/sites-available/mysite-production /etc/nginx/sites-enabled/

Then restart nginx

How it works

Nginx consists of modules which are controlled by directives specified in the configuration file that you can usually find at /etc/nginx/nginx.conf\

A way to load the per-site configuration is having this at the bottom in that file:

location @mysite_production {
  include /etc/nginx/conf.d/*.conf;
  include /etc/nginx/sites-enabled/*;
}

so it will include the configuration from the files found in that folder there, which are actually symlinks to the ones at /sites-available folder, more about that next.

How to update them

The way that you can opt-in which one to include in the live configuration is adding or removing symlinks from /sites-available/ to /sites-enabled/

If you update the config file located at /sites-available/mysite-production it will be included in the main nginx configuration only if the symlink exists in the /sites-enabled/ folder. Changes will be reflected at sites-enabled since the symlink just links to the original file from sites-available

That way you can serve multiple configurations, and enable/disable them to quickly test stuff or to scope per-site or even per-environment configurations.

To create a symlink you can write something like this:

ln -s /etc/nginx/sites-available/mysite-production /etc/nginx/sites-enabled/

And to remove it just go with the old rm or unlink command, pointing to the symlink path.

After that make sure to restart nginx to pick up the config changes sudo service nginx restart

Hello world

Wed, 28 Aug 2019 13:28:14 GMT

The ultimate original post, right? But how are you not going to publish a hello world post to start a new app? (a blog in this case)

So, hello random person on the internet! I’m not planning to promote myself as a product with this blog, I’m here just to satisfy my thirst for sharing and writing.

You are welcome to share your thoughts too, say hello, and if you have time, point me out errors! (that will be super helpful, since I decided to write this in English, which is not my main language nor even I studied it)

Upcoming posts ideas: what I’ve been doing/coding, lifestyles app experimentation, some teaching stuff, and whatever else that hits my mind.

Thanks for reading!

blog.start();