Stories by Sararellano on Medium

AI Personal Historian

Sararellano — Mon, 15 Jun 2026 06:31:00 GMT

AI Personal Historian

I built a memory journal that asks you ONE question a day… then writes your biography

Yes, you read that right. A robot that interviews you for a year and turns your messy answers into a beautiful life story.

Hi, I’m Sara 👋
I’m a developer who loves weird side projects. And this one? It’s probably the most personal thing I’ve ever built.

Meet Personal Historian, a private, snark-free, actually‑useful memory journal that doesn’t just store your answers. It understands them.

Let me explain why I built it, what it does, and the stack I used to make it happen.

The problem with regular journals

Most journaling apps are a blank page and a sad “how do you feel?” prompt.
That’s terrifying. I always feel like I have to write something deep, profound, and Instagram‑worthy.

So I thought: what if the app asks one tiny, specific question every day?
Not “tell me your life story”.
But:

“What was your favourite toy as a kid?”
“Who was your first crush?”
“What’s a mistake you’re glad you made?”

No pressure. Just one answer. 365 days.

What Personal Historian actually does (the cool part)

You sign up, and every day you get a new question. You answer it. That’s it.

But behind the scenes, my app goes full detective mode.

It extracts people, emotions, lessons, and milestones from your answers (using a local AI model — more on that later).
It notices when you keep talking about the same person (e.g., “your grandpa shows up a lot — tell me more about him”).
After a few weeks, it can generate chapters like “My childhood” or “Lessons from my first job”.
And when you’re ready? It writes your entire biography in first person, like a little memoir.
You can export it as PDF, share “20 lessons my grandpa taught me”, or just keep it for yourself.

It’s part journal, part AI ghostwriter, part time machine.

And it works offline. Yes, even on a plane.

The stack (because I know you’re here for this)

I wanted a modern, fast, and actually deployable stack — no magic black boxes.
Here’s what I used 👇

Frontend

React 19 + TanStack Start (full‑stack framework with SSR and file‑based routing — way better than classic React Router for this kind of app)
Tailwind CSS 4 + Radix UI — because I’m lazy and I like beautiful, accessible components
Recharts for emotional timeline graphs
React Markdown + html2pdf.js — biography preview and PDF export

Backend & database

Supabase (PostgreSQL + Auth + Row Level Security) — handles users, answers, analysis results, and recurring topics
All sensitive queries are protected — users can only see their own data

AI (the fun part)

Local Ollama with Qwen2.5‑Coder 7B during development
In production, the app uses Lovable AI (through a simple abstraction — I can swap providers in one line)
Prompts are short, temperature is low (0.15), and they always return clean JSON. No hallucinations, I promise.

Deployment

Vercel with Nitro preset — builds the TanStack Start app as serverless functions
GitHub for version control (obviously)
No vercel.json magic – everything is in vite.config.ts (you can check the repo)

Yes, it’s a full‑stack TypeScript app with SSR, offline support, and a local‑first AI. And it runs on a free Vercel plan. 😎

Why I’m proud of this (and you should be too if you build it)

I didn’t just glue APIs together. I built:

A question scheduler that never repeats the same prompt too soon
An offline answer queue with IndexedDB (syncs when you’re back online)
A streak + heatmap system that actually motivates you
Recurring topic detection — the AI notices patterns without being annoying
A first‑person biography generator that doesn’t sound like a robot

And the whole thing is fast. Lighthouse scores > 90, dark mode, keyboard accessible, and installable as a PWA.

Would I use this myself?

100%.
I’ve been answering questions for three weeks now, and yesterday the app asked: “What smell reminds you of your childhood home?”
I wrote two paragraphs about my grandmother’s kitchen.

That’s the magic of small questions over time. You don’t realise you’re building a story until it’s already there.

Try it, clone it, or just laugh at my over‑engineering

You can play with the live version here:
https://ai-personal-historian.vercel.app

And the code is on GitHub (because of course it is).

— Sara
Developer who accidentally became a digital biographer

JavaScript RegEx Cheatsheet

Sararellano — Fri, 03 Jun 2022 11:15:51 GMT

JS regex cheatsheet

Hello!

I’ve found information about RegEx in JavaScript and I thought it would be interesting to share it with everyone and also, for me to save it and have it always available like a cheatsheet.
Also, to test everything I recommended you the page https://regex101.com/

So… let’s start!

What is RegEx?

RegEx (regular expressions) are a series of symbols that will allow us to define search patterns in text strings.

Regex in JavaScript

In JavaScript, a RegEx is an object that describes a sequence of characters used for defining a search pattern, for example /^a…s$/ this regEx select any 5 letter string starting with “a” and ending with “s”:

abs -> no match
alias -> match
Alias -> no match

There are two ways to create a RegEx :

1. Using a regular expression literal: consists of a pattern enclosed between “/”:

const regularExp = /abc/;

2. Using the RegExp() constructor function:

const regularExp = new RegExp('abc');

Metacharacters

There’re characters that are interpreted in a special way by a RegEx engine: [].^$*+?{}()\|

[]

Specify a set of characters you want to match:

[abc] -> 'Hello world' -> No matches
[abc] -> 'Say goodbye' -> 3 matches
[a-e] -> is same as [abcde]
[1-4] -> is same as [1234]
[^abc] -> means any character except a, b or c
[^0-9] -> means any non-digit character

A period “.” matches any single character (except newline ‘\n’)

.. -> means 2 characters -> 'Ey' -> 1 Match
.. -> 'abcd' -> 2 matches

To check if a string starts with a specific character:

^a -> 'abc' -> match
^ac -> 'abc' -> No match 
^ab -> 'abc' -> match

To check if a string ends with a specific character:

a$ -> 'Sara' -> match
ab$ -> 'Hello' -> no match
lo$ -> 'Hello' -> match

Matches one or more occurrences of the pattern left to it:

he+l -> 'hello' -> match
he+o -> 'hello' -> no match ('he' has to be before 'o')
ma+n -> 'man' -> matches
ma+n -> 'mmaan' -> matches (it recognizes duplicate letters)

Matches zero or one occurrence of the pattern left to it:

he?l -> 'hello' -> match
he?o -> 'hello' -> no match
ma?n -> 'man' -> match
ma?n -> 'mmaan' -> no matches (it doesn't recognize duplicate letters)

Matches zero or more occurrences:

ma*n -> 'woman' -> match
ma*n -> 'main' -> No match ('n' has to be before 'ma')
ma*n -> 'maaan' -> match (it recognizes duplicate letters)

+ and * are very similar, but there is a little difference: * means zero-or-more, and + means one-or-more. So the difference is that the empty string would match the second expression but not the first (because the expression is optional).

{}

{n, m} this means at least n and at most m repetitions of the pattern left to it:

a{2,3} -> 'abc saara' -> 1 match (saara)
a{2,3} -> 'aabc saara' -> 2 matches
[0-9]{2,4} -> 'ab123cxde' -> 1 match (123)
[0-9]{2,4} -> '12 and 345678' -> 3 matches (12, 3456, 78)

()

It’s used to group sub-patterns. For instance, (a|b|c)xz match any string that matches either a or b or c followed by xz

(a|b|c)xz -> 'abxz' -> 1 match (bxz)
(a|b|c)xz -> 'axz cabxz' -> 1 matches

Is used for alternation (or):

a|b -> 'abc' -> 2 matches
a|b -> 'hello' -> no matches

Special Sequences

Special sequences make commonly used patterns easier to write:

Matches if the specified characters are at the start of a string:

\Athe -> ‘the sun’ -> match 
\Athe -> ‘in the sun’ - not match

Matches if the specified characters are at the end of a string:

JavaScript\Z -> ‘I like JavaScript’ -> match
JavaScript\Z -> ‘JavaScript is a frontend language’ -> no match

Matches if the specified characters are at the beginning or end of a word:

\bfoo -> ‘a football team’ -> match
foo\b -> ‘a football team’ -> no match
foo\b -> ‘the afootest’ -> no match

Matches if the specified characters aren’t at the beginning or end of a word. It’s the opposite of \b

\Bfoo -> ‘a football team’ -> no match
foo\B -> ‘a football team’ -> match
foo\B -> ‘the afootest’ -> match

Matches any decimal digit. Equivalent to [0–9]

\d -> ‘12abc3’ -> 3 matches (1, 2, 3)
\d -> ‘JavaScript’ -> no match

Matches any non-decimal digit. Equivalent to [⁰-9]

\D -> 1ab34”7 -> 3 matches (a, b, “)
\D -> 1345 -> no match

Matches where a string contains any whitespace character. Equivalent to [\t\n\r\f\v]

\s ->’RegEx’ -> no match
\s -> ‘Regular expression’ -> 1 match

Matches where a string contains any non-whitespace character. Equivalent to [^\t\n\r\f\v]

\S -> ‘a bc’ -> 3 matches (a, b, c)
\S -> ‘ ‘ -> no matches

Matches any alphanumeric character. Equivalent to [a-zA-Z0–9_]

\w -> 12&”:;c -> 3 matches (1, 2, c)
\w -> $%& -> no matches

Matches any non-alphanumeric character. Equivalent to [^a-zA-Z0–9_]

\W -> 12&”:;c -> 4 matches (&, “, :, ;)
\W -> JavaScript -> no matches

How to use RegEx

String Methods

exec() -> Executes a search for a match in a string and returns an array of information. It returns null on a mismatch.
test() -> Tests for a match in a string and returns true or false.
match() -> Returns an array containing all the matches. It returns null on a mismatch.
matchAll() -> Returns an iterator containing all of the matches.
search() -> Test for a match in a string and returns the index of the match. It returns -1 if the search fails.
replace() -> Searches for a match in a string and replaces the matched substring with a replacement substring.
split() -> Break a string into an array of substrings.

Regex Flag

g: performs a global match (find all matches).

m: performs multiple match.

i: performs case-insensitive matching.

const string = 'Hello hello hello';

// performing a replacement
const result1 = string.replace(/hello/, 'world');
console.log(result1); // Hello world hello

// performing global replacement
const result2 = string.replace(/hello/g, 'world');
console.log(result2); // Hello world world

// performing case-insensitive replacement
const result3 = string.replace(/hello/i, 'world');
console.log(result3); // world hello hello

// performing global case-insensitive replacement
const result4 = string.replace(/hello/gi, 'world');
console.log(result4); // world world world

Examples

// Splitting strings into array elements
const regex = /[\s,]+/,
  result = 'hello world! '.split(regex);
console.log(result); // ['Hello', 'world!', '']

// Searching the phone number pattern
const regex = /(\d{3})\D(\d{3})-(\d{4})/g,
  result = regex.exec('My phone number is: 666 123-4567.');
console.log(result); // ['666 123-4567', '666', '123', '4567']

Validating a phone number

function validatePhone(num) {
  const regex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/g;
  
  // Check if the phone number is valid
  let result = num.match(regex);
  if (result) {
    console.log(The number is valid.);
  } else {
    let num = prompt('Enter number in XXX-XXX-XXXX format:');
    validatePhone(num);
  }
}

let number = prompt('Enter a number XXX-XXX-XXXX');
validatePhone(number);

Validating the email adress

function validateEmail(email) {
  const regex = /\S+@\S+\.\S+/g;

  // check if the email is valid
  let result = regex.test(email);
  if (result) {
    console.log('The email is valid');
  } else {
    let newEmail = prompt('Enter a valid email:');
    validateEmail(newEmail);
  }
}

let email = prompt('Enter an email:');
validateEmail(email);

I hope you find it useful!

Drupal Behaviors

Sararellano — Thu, 14 Oct 2021 11:51:34 GMT

Drupal behavoirs

Hello!!
Maybe you know about Drupal.behaviors, but if you just know this word, be aware to this article.

What is Drupal.behaviors?

Drupal.behaviors is an object inside the Javascript structure in Drupal, which allows us to attach functions to be executed at certain times during the execution time of the application.

Drupal core will call Drupal.behaviors when the DOM is fully loading, but these behaviors can be called again.

Difference between Drupal.behaviors and document.ready

The advantage of Behaviors over document.ready() or document.addEventListener(“DOMContentLoaded”, function(){}) is that they are automatically re-applied to any content loaded through AJAX.

document.ready() or document.addEventListener(“DOMContentLoaded”, function(){}) (jQuery and JS code) only run once when the DOM is ready, but Drupal.behaviors can be run multiple times during page execution.

For example, in views with infinite scroll, more elements will be loaded when user clicks load “more button”, hence, DOM will change after initial load. But Drupal will call attached behaviors when the DOM is loaded, and also, when it’s changed by Ajax.

What if we want to add classes to the newly added elements? Here Drupal Behaviors come handy. Also, these behaviors allow you to override or extend the existing behavior. So for instance, if a module behavior adds a bounce effect on all links, another module could replace that behavior with a different bounce effect.

How to use them?

Drupal official documentation says that all modules have to integrate javascript using Drupal.behaviors. The new object needs to have at least an attach method.

Inside a JS file you have to add this structure:

Drupal.behaviors.behaviorName = {    
  attach: function (context, settings) {      
    // Custom code to be run on page load and on Ajax load
    $('.element-example', context).click(function () {        
      $(this).next('ul').toggle('show');      
    });

  }

};

Like you can see, we have to pass two arguments: context and settings:

Context: It is the modified DOM object, it refers to the HTML that is being affected. It allows us to act within the affected scope, for example in the submission of an Ajax form the context will only be the HTML of the form.
Settings: contains all the settings injected server side (added by Drupal/PHP). This argument is added in Drupal 8.

It’s important to say that the first time that attach() method is called, the context variable contains the document object (the whole DOME), but for the next calls, the variable context will hold the affected piece of HTML.

Drupal behaviors started in Drupal 6, but they have changed:

// Drupal behavior D8 & D9

Drupal.behaviors.behaviorName = {  
  attach: function (context, settings) {    
    // Your custom JavaScript goes inside this function...  
  }

};

// Drupal behavior for D7

Drupal.behaviors.behaviorName = {  
  attach: function(context) {    
    // Your custom JavaScript goes inside this function.  
  }

};

// Drupal behavior for D6

Drupal.behaviors.behaviorName = function(context) {  
  // Your custom JavaScript goes inside this function.

};

AttachBehaviors()

We can see this function in misc/drupal.js:

// Attach all behaviors

$(function () {  
  
  Drupal.attachBehaviors(document, Drupal.settings);

});

Remember that in jQuery $(function() {} ) is a shorthand for $(document).ready()

Here we see a new method: Drupal.attachBehaviors() . This method can be called more times after the DOM is loaded. For instance, Drupal core will call Drupal.attachBehaviors() when:

When DOM is ready
After an administration overlay has been loaded into the page
After submitting an Ajax Form API
When an Ajax request returns a command that modifies the HTML code, such as ajax_command_replace()

Also, contrib and custom modules can execute Drupal.attachBehaviors(). For example:

Ctools calls it after loading a modal
Views calls it after loading a new page using Ajax
Views calls it when you have a pagination and you change the page
Any custom module can be called by executing the method in JS: Drupal.attachBehaviors()

When we don’t have to use Drupal.behaviors?

In general, Drupal invites us to always use Drupal.behaviors, however there are cases where it is not convenient to use it: when we need the JS code to be executed in a single moment, like a script that defines the behavior of a hamburger menu. We will only need it to be executed when the DOM is ready and no more, because it won’t affect the HTML that we manipulate in the javascript.

Detach

The converse to the attach() method is Drupal.behaviors.behaviorName.detach. Any code in the detach() method will be called before page content is about to be removed from the DOM. Allowing JavaScript behaviors to be detached from the element before it’s removed. This can be especially useful for expensive tasks like polling, which could continue to run in the background even if the DOM element they are working on has been removed.

Drupal.behaviors.behaviorName.detach = function(context, setting, trigger) {  
  // Your code here

You can see more information about detach behaviors in this doc

jQuery Once

Drupal.behaviors can be called multiple times, but if we want to run our code only one time we have to use once().

jQuery Once ensures that something is processed only once by adding a class in a DOM element after the code has been executed.

Drupal.behaviors.behaviorName = {    
  attach: function(context, settings) {      
    $('.modal', context).once('remove-modals').each(function () {        
      // Do stuff.        
      $(document).keyup(function (e) {          
        if (e.keyCode == 27) {            
          $('.modal', context).removeClass('modal-active');          
        }              
      })      
    })    
  },    
  detach: function(context, settings, trigger) {      
    $('.modal', context).removeOnce('remove-modals').each(function() {        
      // Undo stuff.      
    });    
  }  
};

In this example, the code will add remove-modals class the first time the function is executed. But the next time that Drupal.attachBehaviors is called, .once() will find the class and will skip it.

To sum up

Behaviors will be called first when the DOM is loaded, and they can be called more times with a context that represents new additions or changes to the DOM.

More info:

Stacking Context

Sararellano — Wed, 13 Oct 2021 07:43:34 GMT

Stacking Context

The stacking context is a CSS functionality that is often difficult to understand and one of the most misunderstood tool in CSS.

These terms that I’m going to explain may not be entirely clear. Things are always better understood by seeing them in action, that’s why I have created a website where you can play with the different position values and add z-index to them to see what happens.

What is stacking context?

Is a tool to control the stacking order of HTML elements. Like in image editors (like PhotoShop), you have different layers and you can put one layer after or before another. In CSS the same happens: an element can contain a set of layers.

This can be a root stacking context, as created by the html element. Or it can be a local stacking context, as created by specific properties and values.

To order the different elements we have some properties (opacity when the value is less than 1, filter when the value is not none, mix-blend-mode when the value is not normal or transform when the value is not none), but in this article I’m going to explain in more detail the best known: position and z-index.

We can create a stacking context in any part of the document and it can be created by any element. To know exactly what properties have to have the elements to create a new stacking context to see them in detail in MDN. But it’s important to pointing that:

➔ Only child elements are affected. Stacking context doesn’t affect siblings.

➔ We can have a stacking context inside another stacking context.

When you create a stacking context, the children are painted from bottom to top in this order:

Children with a negative stack level (usually with `z-index: -1`)
Children with position: static
Children with stack level equal to 0 (usually with `z-index: auto`)
Children with positive stack level (`z-index >= 1`)

Also, children with the same stack level are ordered by their origin order (the second child is painted in front of the first child).

Z-index

When we positioned elements ww have 3 axes: X (width), Y (height) and Z: the third dimension. That dimension is useful to put an element in front of other elements, or behind them.

Z-index creates a layer order following the Z axis.

Z axis

The values for this property are positive or negative numbers. An element on the web page appears in front of other elements as its z-index value is higher.

To add z-index to an element, this element has to be positioned: it has to have a position value not equal to static or be in a grid or flex context.

The default value of z-index is auto, except the HTML that has z-index: 0.

Positions

The default value of position property is static. But position has other values: relative, absolute, fixed and inherit.

Static

Is the default value. It determines that the element is not positioned, so if there’s a top/right/bottom/left/z-index property, there will be no effect on that element. We use this value, usually, to delete a real position value.

Inherit

This value means the position of an element is the position of its parent. It inherits the value of the parent. If the parent is position: absolute, the child will be position:absolute;

Relative

This is the most common value (I think…) but also, a bit complicated to understand. If you add relative value without other properties like top/right/bottom/left then there will be no effect. BUT (always there’s a BUT) if the others elements are not positioned (they are static), this element will appear in front of the others, even if you don’t add z-index property. Also, you can’t put a relative element behind a static element adding z-index to the static element.

In a relative element you can add the properties top/right/bottom/left and move the element. If you add left: 20px the element will be moved 20px to the right.

An important thing it’s that children from a relative element can be positioned absolute inside that element, creating a new stacking context.

Absolute

This value uses the properties top/right/bottom/left to move an element where you want. The position of this element depends on the relative parent (with position relative or absolute). And if there’s no a positioned parent, the element will depend on the whole HTML.

Also, we have to be careful because these elements are removed from the flow of elements on the page. This means that this element is not affected by other elements and it does not affect other elements. That can limit the flexibility of your site.

Fixed

Elements with fixed value are positioned relative to the viewport. This means that they are going to stay in the same position even if you scroll the window. This happens because the viewport doesn’t change the position when you scroll a page.

This position type is very useful for menus for example, or cookie banners.

Also, you have to be careful because these fixed elements are always going to appear in front of other elements and sometimes they can overlap others. For example, you have a fixed menu with links to internal links. So when you click on an internal link you have to subtract the height of the menu, because if you don’t do it, the menu is going to overlap the content of your link (a way to solve this is adding scroll-margin-top: “menu height” ).

Sticky

Sticky is a very powerful value. It’s a mix between relative and fixed. A sticky element depends on its positioned parent and with top/right/bottom/left you can move the element relative to its parent. The interesting part of this value is when we scroll, because the sticky element is going to become fixed and it changes its parent by the body of the HTML. Then, when you return the scroll to the original parent, it’s going to return relative.

This is very useful when you have a menu in the bottom of your principal and first element. But when you scroll down you want to have the menu on top of the page.

— — — — — —

I hope you like it!

Custom Twig Filters and Functions

Sararellano — Tue, 14 Sep 2021 10:10:33 GMT

Twig Filters and Functions

Twig is the template manager used by Symfony to add some logic to our variables in our templates. The functions and filters problem is that we have a limited number of them. So we are going to learn how to add new filters and functions.

But first… what are filters and functions?

What are filters and functions?

Filters and functions are the logic available in your twig templates. You can see in Twig Documentation the different functions and filters existing. For instance, we have the filter |upper and |lower to put some text uppercase or lowercase. This is the syntax of the filters:

Filter upper

{{ ‘Hello world’|upper }} -> Output HELLO WORLD

And, in the case of functions, you have other examples, like active_theme() to know the theme you are using in Drupal:

Function active_theme()

{{ active_theme() }} -> Output your_theme

But what is the difference between Filters and Functions?

Filters transform the data, but Functions are used when you need to do heavier actions than only show simple datas. The functions are used when you need to calculate things to represent the result (not only show it).

How to add new filters and functions in Twig

In this post we are going to create a filter to convert a number into money € format (moneyFormat), another filter to cut a text and add ‘…’ (cut_text), and also, a function that returns a text in a custom color (color_text).

To do all, we have to have a custom module. In my post, the name of this module will be “MyModule”.

1. Create the service file with this structure: MyModule.services.yml

services:  
  MyModule.twig_extension:    
    class: Drupal\MyModule\MyModuleTwigExtension    
    tags:      
      - { name: twig.extension }

2. Now we have to create the file MyModuleTwigExtension.php in the source: MyModule/src/MyModuleTwigExtension.php

Here we are going to declare the class MyModuleTwigExtension and this class will extends from the class Twig_Extension

 
namespace Drupal\MyModule;
 
 
/**
* Class MyModuleTwigExtension
*/
class MyModuleTwigExtension extends \Twig_Extension {
 
 //  A list with all the defined functions. The first parameter is the name by which we will call the function. The second parameter is the name of the function that will implement the function.
 public function getFunctions() {
   return [
     new \Twig_SimpleFunction('color_text', [$this, 'colorText']),
   ];
 }
 
 //  A list with all the defined filters. The first parameter is the name by which we will call the filter. The second parameter is the name of the function that will implement the filter.
 public function getFilters() {
   return [
     new \Twig_SimpleFilter('money_format', [$this, 'moneyFormat']),
     
     new \Twig_SimpleFilter('cut_text', [$this, 'cutText']),
   ];
 }
 
 // Returns the extension name
 public function getName() {
   return 'MyModule.MyModuleTwigExtension';
 }
 
 
 // Function that returns an example text with a color passed as a parameter. 
 public function colorText($color = "black", $text = 'Lorem ipsum dolor sit amet,
 consectetur adipiscing elit.  Quos quidem tibi studiose et diligenter
 tractandos magnopere censeo.') {
   return ' ' . $text . ' ';
 }
 
 // Filter to convert a number into €
 public function moneyFormat($string) {
   setlocale(LC_MONETARY, 'es_ES.UTF-8');
   return money_format('%i', $string);
 }
 
 
 // Filter that cuts a text according to the maximum number of characters. You can also choose which characters will be put at the end of the text. By default is ‘...’
 public function cutText($text, $maxchar, $end = '...') {
   if (strlen($text) > $maxchar || $text == '') {
     $words = preg_split('/\s/', $text);
     $output = '';
     $i = 0;
     while (1) {
         $length = strlen($output)+strlen($words[$i]);
         if ($length > $maxchar) {
             break;
         }
         else {
             $output .= " " . $words[$i];
             ++$i;
         }
     }
     $output .= $end;
 }
 else {
     $output = $text;
 }
 return $output;
}
 
}

Now, you have to clean the cache and… that’s all! You can use your new filter and your new function in your templates.

The syntax will be:

{# Function #}
{{ color_text('orange')|raw }}
{{ color_test('green', 'I am testing the new function')|raw }}
 
{# Filters #}
{{ '150'|money_format }} // Output: 150,00 EUR

{{ 'Hello! We are learning how to create new twig extensions'|cut_text(15) }}
 // Output: Hello! We are...

{{ 'Hello! We are learning how to create new twig extensions'|cut_text(15, '-') }}
 // Output: Hello! We are-

Another interesting thing is that Twig variables can be modified by filters. Also, you can add more than 1 filter in a variable, so the output of the first filter will be affected by the second filter:

{{ ‘I am going to cut this text’|cut_text(10)|upper }}

For more information, you can see the documentation from Symfony about how to do that.

Window.location

Sararellano — Wed, 11 Aug 2021 11:05:28 GMT

window location object

Window.location is an object to have information about the actual page. Also you can redirect or upload it.

First of all we need to know window.location properties:

For example, we have this URL: https://sararellano.medium.com/js-shorthands-3f675d4c3b13?filter=fronted#top

* This is a read-only property

PORT

In my example you see the result of the port is ‘’. This is because if the port number is default (80 for http and 443 for https), most browsers will display 0 or nothing.

We are going to see another example to understand port and the difference between host and hostname.

URL: http://localhost:8080

.port => 8080

.host (domain + port) => localhost:8080

.hostname => localhost

.origin (protocol + hostname + port) => http://localhost:8080

WINDOW.LOCATION METHODS

window.location methods

DIFFERENCES BETWEEN .ASSIGN() AND REPLACE()

These methods work very similar: they will redirect you or take you to another url. BUT .assign() will save in history your actual page before the redirection. Therefore, if you use .assign() and click on the back button you can go back to the previous page. And with .replace() you can’t go back.

What have you said?

Maybe I didn’t explain well, so I’m going to add an example:

.assign()

Open your browser and go to ‘google.com’
Add window.location.assign(‘https://stackoverflow.com)
Click “go to back” and you will see ‘google.com’

.replace()

Open your browser and go to ‘google.com’
Add window.location.replace(‘https://stackoverflow.com)
Click “go to back” and you will see a white page

HOW TO REDIRECT A PAGE?

You can do a redirect in 3 ways:

window.location.href = ‘new web’
window.location.assign(‘new-web’)
window.location.replace(‘new-web’)

Only with .replace() you are not going to return to the previous page (.assign() and .href save the previous page in the history).

BONUS

About how to redirect a page, I want to add another method, but not for window.location object. This method is only for window object: .open()

window.open() allows you to open a new tab (a white page) without losing your current page.

Git Bisect

Sararellano — Wed, 07 Jul 2021 07:59:34 GMT

Debugging with Git Bisect

Today I’m going to write about Git Bisect. This is a very useful tool to find any specific error in our code.

What is Git Bisect?

Bisect means binary search algorithm and is an efficient way to search large groups of ordered data. It divides the data in half several times and applies a validation criterion. Thus, we can scan a large amount of information with few iterations.

When is a good moment to use bisect? When you want to search for a change and you don’t know when this change happened. For example, you have a version 2 and you have an error or you have accidentally deleted some code, but you know that on version 1 everything is working. But between version 1 and version 2 you have 15 commits and you don’t know which commit caused the error.

How to work with bisect

To start you have to know the last commit where everything was working well and a commit where everything broke to specify search limits.

To start we put:

git bisect start

Then you have to check the last commit where the bug doesn’t exist. You can add the commit SHA, tag or branch and put it “good”:

git bisect good 123456789

And now, you have to add the commit where you know that the bug exist:

git bisect bad 987654321

Now, git starts a binary search: it splits commits in half and shows you the commit in the middle and you have to tell if this commit is good or bad. For instance, we have 15 commits between our v1 and v2, so you will see a message like that:

Bisecting: 15 revisions left to test after this (roughly 4 steps)

And bisect puts you on the seventh commit. Now you have to run code and check if in this commit everything is working or not and tell bisect your answer:

git bisect good||bad

Then, bisect jumps into other commit to test other and you have to repeat the test and put the answer:

git bisect good||bad

And so on until finding the commit where your code does not work.

If you can’t test a determined commit, you can run git bisect skip and jump into the next commit.

When bisect finds the first bad commit it gives you this answer:

135792468 is the first bad commit

And here you have your problematic commit! If you make: git show 135792468 you will see the changes done in this first bad commit and fix it.

To end with bisect you only have to run:

git bisect reset

And et voilà! thanks to this, we have been able to test 15 commits in just 4 steps. It saves you from testing all commits one by one. It’s so quick and very useful.

But that is not all! You can automate some tests with scripts. You only have to run:

git bisect run [script] [arguments]

For instance, you have an error while compiling your code. You can automate bisect to find the first bad commit like this (think that my script to compile my code is npm run build-prod) and find where the compilation stopped working:

git bisect start

git bisect good 123456789

git bisect bad 987654321

git bisect run npm run build-prod

If you have an error 0 is that this commit is good. If you have a 125 error means that bisect can’t do the test and jump into the next commit (like git bisect skip). Any other error means that the commit is bad.

Defer and Async

Sararellano — Wed, 12 May 2021 07:54:13 GMT

Defer vs Async

When your scripts are heavy and/or you have a slow server, they can affect the performance of your page. To help with this, we have 2 attributes that we can add to our scripts so that they don’t block or delay the execution of our website.

But first we have to understand how the execution of a web works.

How the execution of a web works

When the browser loads HTML and finds a `script` tag, it cannot continue to build the DOM. It has to wait for the script to download and then, execute the downloaded script. Then it can process the rest of the page.

For example:

First paragraph