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


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


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…


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.


BEM it’s a very useful development methodology based on components. The base of this methodology is to divide the user interface into separate blocks to create scalable, flexible and reusable components. Also, it proposes a style to name each of the classes, thus allowing to create a consistent and clear code (also helps you with the difficult task of finding the best names for each element).

BEM = Block + Element + Modifier

BLOCKS

A block is a container where other elements will be. A block is the root of the CSS class and will always go first, and from it…


CSS Efficient

I have to be honest: I didn’t think about how efficient my CSS is. I focus more on trying to make my JS code more efficient so that the browser renders it as soon as possible, but I had never looked at my CSS. So I started to find information about how to make more efficient CSS code and I would like to share with you my investigation:

Selector types

There are 4 selector types: ID, classes, tags and globals. They are ordered according to how efficient they are.

#btn — submit {} /* ID (fastest) */body .main #faq {} /*…


Debugging time

When I’m writing Javascript code, I put every 2 lines a “console.log”. But I have some problems because many times I can’t find a good answer. So I have investigated other forms to test my code and I found some interesting methods.

First of all, what is console.log?

“Console” is an object that provides access to the browser debugging console, and you can print values of your variables. You can use any kind of variables: string, number, boolean, object and array.

Here we have some examples with different types of results:


Shorthands

Shorthands (no matter what language we are working in) always help to make your code shorter, optimized and much cleaner. Here I want to recap some helpful shorthand coding techniques in Javascript that will surely help you a lot.

  1. Ternary operator

We can use “conditional ternary operator” instead of if … else statement and use only one line of code:

// Longhand
let name = document.querySelector(‘input.name’).value,
user;
if(name){
user = name;
} else {
name = "Anonymous"
}

// Shorthand
const user = name ? name : "Anonymous"

2. Null, Undefined or Empty

You can check if a variable is…


In JavaScript there’s some Array methods, like forEach(), indexOf(), map(), reduce()… But today I want to show you (if you don’t know them), three methods that seem to be less frequently used to query an array “without looping”. I put it in quotes because it is not entirely true: you don’t make a loop, but internally the loop is created.

Let’s get down to business: some(), every() and find()

  1. SOME()

This method determines if one or more values are in your array and return false or true, depending on whether the values match. …


In any programming language, one of the most important things is to have a clean code that can be read by anyone. And, if you can delete some lines and make it sorter, even better! In Spain we have an old saying: «lo bueno si es breve, dos veces bueno» (The good, if it is brief, twice good). Although whoever invented this saying I don’t think he was thinking about programming, it also works for us.

To carry out this fact, I teach you three very useful JS operators that we don’t use a lot and many people don’t know…

Sararellano

Junior frontend developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store