DEV Community: Halí

Crear un PDF con HTML y CSS

Halí — Thu, 18 Mar 2021 04:18:00 +0000

Para crear PDF existen una gran variedad de herramientas; personalmente encuentro el uso de HTML y CSS sencillo, por lo que quiero mostrarte cómo hacer un PDF a partir de estos dos lenguajes de programación (ya sé que no son lenguajes de programación 😂).

Convertir una página a PDF es una tarea... «sencilla», únicamente tienes que imprimir la página que quieras hacia un archivo y listo, sin embargo el tamaño de una pantalla difiere bastante del de una hoja de papel estándar (8.5in x 11in) si intentas hacerlo así nadamás, encontrarás algo cómo esto...

Para dar estilo específico a la impresión, debes agregar una hoja de estilos que se utilize en esa situación, con especial atención al atributo media="print"

<link rel="stylesheet" href="style.css" media="print" />

Ahora solo queda hacer los estilos, necesarios para que se vea así:

Estilos

Unicamente pondré algunos que valen la pena mencionar, los demás los puedes encontrar en esta hoja de estilos

break-after: always; /* Forza el salto de línea después del elemento */
break-before: always; /* Forza el salto de línea antes del elemento */
break-inside: avoid; /* Previene el salto de línea en el elemento */

Una de las cosas que más hago al convertir una página a PDF es asignar manualmente algunos saltos de línea con break-after y break-before, para evitar errores (muy grandes) en el diseño, está claro que no podrás evitar todos, pero sí se puede ver más o menos decente.

Otro muy importante es evitar que algunos elementos se dividan entre dos páginas, con break-inside se puede lograr.

Además yo elimino los márgenes de mis contenedores más grandes (html, body, main) ya que en una impresión, el usuario puede asignar sus propios márgenes o incluso quitarlos.

Agrego una clase printable para ocultarla mientras se muestra en pantalla y hacerla visible en la impresión.

También elimino algunos elementos que no vale la pena tener en PDF, como videos, elementos interactivos e incluso ciertas secciones de la página como el header y footer entre otras.

Espero que esto te haya servido como introducción a los estilos de impresión, y me encantaría saber tus opiniones sobre esta capacidad de HTML y CSS en los navegadores modernos.

Adiós 👋🏽

Laravel routes in JavaScript

Halí — Sun, 05 Jul 2020 05:01:37 +0000

TL;DR With a Package
https://github.com/halivert/laravel-js-routes

We generally use JavaScript for the front-end in our applications, if we also use Laravel we notice that it includes a very useful wrapper called Laravel Mix, that can preprocess our JS files.

There's a problem when we want to get some Laravel route in any JS module. A naive approach is to export all our routes into a JSON and then use a function that has a similar behavior but in JS.

Code

That's why I crafted a Laravel command (usable with php artisan) composed by this code:

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Route;

class CreateJSRoutesCommand extends Command
{
    public function handle()
    {
      /*
       * When we call the command, this method executes 
       * first.
       */
    }

    public function createFile($fileName, $contents)
    {
      /*
       * This method creates a file with name equals to
       * $fileName and content equals to $contents, it also 
       * asks if you want to overwrite the file in case 
       * another with same name exists.
       */
    }

    private function includeRoute($value, $routeName)
    {
      /*
       * This function determines if a route must be included 
       * or not in our JSON, by default excludes telescope 
       * routes.
       */
    }

    public function getJSPath($path)
    {
      /*
       * This returns the route where our new file with JSON 
       * and function must be written.
       */
    }
}

The handle function does most of the work, first we get Laravel routes, filter it and keep its URI.

$routes = collect(
    Route::getRoutes()->getRoutesByName()
  )->filter(function ($route, $key) {
    return $this->includeRoute($route, $key);
  })->map(function ($route) {
    return [
      'uri' => $route->uri
    ];
  });

The content of our file will be composed of the JSON and function route so we start adding the var name and the content.

$jsonFlags = JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE;

$content = 'const routes = ';
$content .= json_encode($routes, $jsonFlags);
$content .= ";\n\n";

Then we build the route function (it's on a separate file)

$content .= file_get_contents(
    __DIR__ . '/../assets/js/routeFunction.js'
);

// assets/js/routeFunction.js

// This function receives as a route name and an array of
// parameters
const route = (routeName, params = []) => {
  // It searches in the stored routes one that match with the
  // given name and if it doesn't exists throws an error
  const _route = routes[routeName];
  if (_route == null) throw "Requested route doesn't exist";

  let uri = _route.uri;

  // If an URI is found, replace the parameters with a RegEx
  // (I don't know how I did it) and throws another error if
  // there are missing parameters. 
  // Remaining parameters will be ignored.

  const matches = uri.match(/{[\w]+}/g) || [];
  const requiredParametersCount = matches.length;

  if (params instanceof Array) {
    if (params.length < requiredParametersCount) throw "Missing parameters";

    for (let i = 0; i < requiredParametersCount; i++)
      uri = uri.replace(/{[\w]+}/, params.shift());

    for (let i = 0; i < params.length; i++)
      uri += (i ? "&" : "?") + params[i] + "=" + params[i];
  } else if (params instanceof Object) {
    let extraParams = matches.reduce((ac, match) => {
      let key = match.substring(1, match.length - 1);
      if (params.hasOwnProperty(key)) {
        uri = uri.replace(new RegExp(match, "g"), params[key]);
        delete ac[key];
      }
      return ac;
    }, params);

    Object.keys(extraParams).forEach((key, i) => {
      uri += (i ? "&" : "?") + key + "=" + extraParams[key];
    });
  }

  if (uri.includes("}")) throw "Missing parameters";

  return "/" + uri;
};

export { route };

Finally we create the file.

$fileName = $this->option('name') ?? config('app.jsroutes.name');
if ($this->createFile($fileName, $content)) {
  $this->info("$fileName created");
}

Installation

composer require halivert/laravel-js-routes

Before use

If we already add the command to Laravel, then we execute it with

php artisan route:tojs

Then we add the file to our webpack.mix.js file, so it can be processed.

mix.js("resources/js/routes", "public/js");

And after a yarn prod or npm prod we can use our routes function when we want to call a route by its name in a JS file.

import { route } from "./routes.js";

Use

Use examples:

axios
  .get(route("routeName", [param1, param2]))
  .then(response => {
    console.log(response.data);
  });

I would love to read your comments
Happy coding! 👋

Convert mp4 to gif

Halí — Fri, 15 Nov 2019 20:29:45 +0000

We, dev people, have the need to post evidence of different behaviors of our desktop in many places (issues, documentation, blogs, etc.).

In this post, We'll learn how to convert an mp4 file to gif in two simple steps.

Requirements

Instructions

First, we need to extract the frames from our video. FFmpeg can do it with the next command:

ffmpeg -i video.mp4 -vf fps=5 frames/%03d.png

The fps option defines the playback speed of the gif, I suggest between 5 and 6 to get closer to speed of the original video.

Then we "glue" the frames to make the gif.

convert frames/* output.gif

With this, we have ready our gif, but maybe it's too big, so we can do the next step. Gif optimization.

convert output.gif -fuzz 1% -layers Optimize optimized.gif

Extra

For the naming part: %03d.png we need to multiply fps times seconds in the video, so, if our video lasts up to 166 seconds (2 minutes and 46 seconds) and we are using 6 fps, we can use %03d.png, but if the video is longer, it could be necessary change the names to %04d.png, in order to have the frames sorted.
The fuzz percentage partly determines the optimized gif quality, that's why we use only 1%, you will notice that increasing that percentage will reduce the final quality.

Vim macros for Bulma

Halí — Tue, 23 Jul 2019 20:32:32 +0000

When you use a CSS framework as flexible as Bulma, you want to have only the necessary components and no more. When you create your own "theme" you can import only the components and elements that you want to use.

Now, what happens when you're not sure which files contain which rules?
Import everything and then comment on those that are not necessary in that moment.

But... How do we import all the components and elements of Bulma, easily?

I've found these macros that can be very useful:

let @q='02t/"cyt"o^[;r ^Rc^Mdd.2kI// ^[2j0'
let @j='0f"a../.^["cpF/l3dfsA;^[j0'
let @k='02f"i.sass^[j0'

Now, if you copy and paste these commands, they won't work because they contain control characters (and others), you should replace the following:

Original	Replace
`^[`	Ctrl + v, Esc
`^R`	Ctrl + v, Ctrl + r
`^M`	Ctrl + v, Enter
`;`	`:`

Note: I have these mappings in normal mode: noremap ; : and noremap : ;.

To make this easier, you can type :%s/\V^[/[Ctrl + v, Esc]/g and so on with the other two control characters.

When you are in the same directory as the node_modules folder, you can use those macros and do the following:

See you in the next vim-tip 👋🏽

Extra

¿How do these macros work?

let @q='02t/"cyt"o^[;r ^Rc^Mdd.2kI// ^[2j0'

First things first, go to beginning of line with 0.
Next, search forward 1 character before second / with 2t/.
Then, paste in the c register the rest of the line until the quotes with "cyt".
Insert a line below and exit the insert mode with o^[.
Add to the file the content of the c register with ;r ^Rc^M.
Delete the comment line and then the charset line with dd..
Go up two lines with 2k.
Comment on the line in which we are with I//.
Exit the insert mode, go down two lines and go back to beginning of line with ^[2j0.

let @j='0f"a../.^["cpF/l3dfsA;^[j0'

Go to beginning of line with 0.
Search the first quotes with f".
Agregamos un ../. with a../..
Exit the insert mode with ^[.
Paste the content of the c register with "cp.
Search backwards the first / and move one character forward with F/l.
Delete until the third s with 3dfs.
Add the semicolon at the end of the line A;.
Exit the insert mode, go down one line and go to the beginning of the line with ^[j0.

let @k='02f"i.sass^[j0'

Look for the second quotes from the beginning of the line with 02f".
Insert the string .sass with i.sass.
Finally, exit the insert mode, go down one line and go to the beginning of the line with ^[j0.

Originally posted in spanish in: https://halivert.github.io/blog/2019/07/vim-macro-for-bulma/

Git in local server

Halí — Tue, 05 Mar 2019 06:39:44 +0000

Using git for version control it's in itself a great help, however, the tool becomes more useful when it has to be used to upload code or projects to a local server.

To start, you must verify that your server has git installed, then you must create an empty repository with the next command:

git --bare init <Repo name>
# By convention, empty repos have the .git extension.
# Example:
git --bare init glowing-computing-machine.git

Once you've created the empty repo, you can access it and view a similar structure.

Now, for your repo to update automatically, you must add a hook... exacly, in the hooks folder, you'll find some by default but the one you'll use is called different: post-receive. Create the file and add the next line:

git --work-tree=<destination path> --git-dir=<origin path> checkout -f

# The origin path will be the path where your empty repo will be placed
# And destination path will be the path where your files will be inserted
# By instance:
git --work-tree=/home/hali/Documentos/Git/_site \
--git-dir=/home/hali/Documentos/Git/glowing-computing-machine.git \
checkout -f

Finally, add the permissions to execute the created file

chmod +x post-receive

Only you must review, that your destination directory is completely empty

Then, execute git clone

Ready!, we can upload content... but it becomes annoying to have to write our password every time we do pull or push, so with the help of ssh-copy-id command, we can add our public ssh key to list of accepted keys on the server

ssh-copy-id <server IP>

That's how we can upload code to our repo and it will be automatically copied in the folder that we choose.