I installed pyenv-win, I installed Django, I followed the lecture. Nice! Btw Django is awesome, it may look scary because it’s using templates (a concept in which I haven’t developed anything yet, but I am familiar with the syntax, I even wrote a bit about Twig - a template engine for PHP (I had to learn it for work, but haven’t used it in the end. The article/tutorial/introduction to Twig is here).

Watching lectures and coding along with a demonstration is nice, but at some point one has to work on a project. And if one wants to earn a verified certificate with an official stamp from Harvard University (I am one, I want such a cert), one has to submit the required projects that meet the required criteria. For this, after coding the Project 0 (which, btw, I pushed to my GitHub repo first), I had to figure out how to submit it for grading. The instructions told me to install submit50, to make things easier. And what’s the first thing I see? To use Linux and install Ubuntu, like a proper human person, not a Windows normie… I’m both gaming and developing on my personal machine, I don’t want to ditch Windows… But WSL comes to the rescue. And with the newer WSL2 version (from Win11) it apparently has a dedicated Linux kernel (I don’t really know what it means, but it sounds professional). And I have already installed WSL on another machine, where I had to set up a dev environment for a big project at work. Seems easy, so let’s do it.

Problem: Install Python, pip and pyenv on a Windows machine using WSL, while keeping Windows versions intact (pyenv-win, Python installed on Windows, pip installed on Windows) so that they don’t clash

Starting point: Win11

Goal: be able to use submit50

Steps:

1. Installing WSL and Ubuntu

• First, install WSL and Ubuntu, following the official docs: https://learn.microsoft.com/en-us/windows/wsl/install

• Restart the system

• Open Ubuntu: open terminal and enter wsl -d Ubuntu

2. Installing pyenv

• Install pyenv following this tutorial: https://realpython.com/intro-to-pyenv/#installing-pyenv (also make sure that your system is updated before doing that (sudo apt update)

• Verify that pyenv was correctly installed by running pyenv --version

And if you have a pyenv-win installed, here is a potential issue. In my case pyenv was trying to execute the Windows version pyenv-win using Windows commands cygpath and cmd:

And that’s not what I want.

By running which pyenv I verified that indeed it is looking in the Windows file system:

Steps to fix this and point my Linux pyenv to correct executable while keeping my Windows version of pyenv-win intact:

• Edit ~/.bashrc by typing nano ~/.bashrc in the terminal

• Add those lines at the end of the file:

•   export PYENV_ROOT="$HOME/.pyenv"
    export PATH="$PYENV_ROOT/bin:$PATH"
    eval "$(pyenv init --path)"
  

• Save the file (CTRL + X, then Y, then Enter).

• Reload your shell by typing source ~/.bashrc

• Verify the pyenv location and version again:

3. Installing Python and pip

Find what is the latest stable Pythin release at https://www.python.org/downloads/. Similarly, check what is the LTS for pip https://pypi.org/project/pip/. Because I have both aleady installed, but on Windows, I run into a similar issue as with pyenv:

It is using the Windows version. Because my bashrc profile already contains the path for pyenv, it should be pointing to the correct pyenv version. But it isn’t. I found that adding another line at the end of the file solved the problem. Add this line to ensure that WSL does not point to Windows pyenv-win: export PATH=$(echo "$PATH" | sed -e 's|/mnt/c/Users/wojew/.pyenv/pyenv-win[^:]*:||g')

To do this, edit your bash profile similarly to the steps above. So, to repeat for clarity:

• Type nano ~/.bashrc in the terminal

• Scroll down and add this line to the end of the file: export PATH=$(echo "$PATH" | sed -e 's|/mnt/c/Users/wojew/.pyenv/pyenv-win[^:]*:||g')

• Save the file (CTRL + X, then Y, then Enter).

• Reload your shell by typing source ~/.bashrc

• Now verify pip and python installation on WSL using the commands: pyenv which pip and pyenv which python. On my machine it is not finding the commands, meaning the Windsows installation is not being recognized anymore and I successfully separated them:

Now I need to install pip and Python on WSL using pyenv.

LTS for Python as I write it is 3.13.2 and for pip it is 25.0.1. Let’s install them using pyenv:

Set it as global with pyenv global 3.13.2. Verify with python --version that this Python is actually being used and correctly installed. Now let’s check pip. When installing pyenv, pip should be installed automatically. Let’s verify which version is installed with pip —version:

Since I haven’t worked on any projects yet, let’s upgrade pip to LTS, using python -m pip install --upgrade pip==25.0.1:

Verify that it is currenlty using the desired pip version.

Now that everything is set up, I can finally submit my Project 0 code for grading using submit50! It took me only… 2 hours of faffing about ;)

4. Submitting work with submit50 - but first you need to install it

To install submit50 using pyenv-managed version of Python, first check where pip is located using which pip3. If it points to /usr/bin/pip3, it’s installing system-wide, bypassing pyenv. If it’s pointing to /home/[username]/.pyenv/, it is using pyenv. The correct way of using pyenv to install packages is:

pyenv exec pip install submit50
or
python -m pip install submit50

However, I run into issues. Rust and Cargo were needed to compile it… At this point I started to question all my choices because I don’t know what I’m doing anymore. Thankfully ChatGPT helped me figure out what to do about it.

Hint: See above for details. Eh. ChatGPT says “This means the package jellyfish (a dependency of submit50) requires Rust to compile, but Rust is missing in your WSL environment“. Fair. I’ll just provide a screenshot:

So I installed Rust and Cargo to be able to use submit50. Great. Re-running the installation was successfull. Hurray!

Now I can finally follow the instructions at https://cs50.readthedocs.io/submit50/#submitting-with-submit50 to submit my work.

…and I did all that, only to find out that submit50 doesn’t work anymore and it is easier to just use git…

yay coding!

It was the final stage of the hiring process: the technical interview. Before this, I received a take-home coding task (it was easy, fetch data from an API, then sort and order it), and many questions were about the code in my solution. "This should be easy, right? I wrote this code. So what if I'm a bit ill," I thought. Wrong, when you're ill, you get penalties to your stats. In my case, INT saves always take a -2 penalty, even if it's "just a cold." My thinking is slowed and sluggish, and I miss incredibly obvious things and make awfully stupid mistakes (same when I'm tired, I miss obvious things and make silly mistakes then). Like trying to return a <p> tag inside another <p> tag because I didn't read the code a line above. The stress of the interview makes this even worse…

I’m currently a lvl 3 frontend dev (2 years of commercial exp + 1 year of learning) and in my current job I do lots of things: I write plenty of small projects in vanilla HTML, CSS (SCSS) and occasionally JavaScript for numerous clients of the company I’m working for, I do quality checks for the work supplied by freelancers (in terms of coding standards and adherence to strict technical requirements), and I write React components for a huge app we’re building. This app is a comprehensive solution for all things e-commerce-related, like inventory management, asset management, web scraper, newsletter, virtual workspaces, and many more. There are coding standards I have to adhere to that I didn’t come up with and had no chance to question (due to constant pressure of tight deadlines and a “work, work, work” mentality). It has a microfrontend architecture that I don’t fully grasp and wouldn’t be able to replicate in my own project (or maybe I would, I never tried, because I’ve never developer such a huge project on my own yet). Despite all that, I still contribute a lot to the project: I write reusable React components, I ensure code quality by participating in code reviews, and when the backend is lagging behind, I use dummy data, then connect them to the frontend once the API is ready. Sometimes it happens that dummy data have a different structure than live data from the API, so I need to correct the types in TypeScript to match those. I introduced a few features from scratch, refactored the code in lots of places, and fixed several bugs, so overall I'm feeling pretty confident in my current role, to the point that I'm trying to level up and get to that “mid” dev position. Also, that's why I didn't think much about revising theory before this interview (also, when sick all you want to do is sleep, not think) or checking my code twice - I wrote it, so I should know the What and the Why. This is what doomed me. Maybe I’m at the peak of mount stupid and this interview put me back in my place (that I know nothing).

When I was studying at the university, I always hated oral exams as they were much more stressful than written ones (for the record: I studied chemistry, so despite being science-oriented, I lack a traditional tech background). I should have treated this interview as an exam and prepared for it, but I didn’t, see the cover image.

The interview started with a simple data structures question: what is a Set? My thinking was so slow and I was so stressed that I was confused and thought the interviewer was asking about a state setter method. I used a Set in my code to extract all the company names that the API was returning to display them (without duplicates) in a company selector filter. So, what is a Set? It’s a built-in JavaScript object that lets you store a collection of values without duplicates. I don’t even remember what I answered. Another question: what is Strict Mode in React and why is it used? Well, Vite uses it as a default, and I used Vite to set up my take-home project. It helps to catch bugs like infinite loops and so on.

While the full answer should be: Strict Mode is used only during development to help you catch some common bugs early, like missing useEffect cleanups (that's why useEffect hooks are always run twice during development), missing ref cleanup (so ref callbacks are also run twice), and it highlights deprecated APIs.

What are keys in React? Again, I struggled with the answer because I do like to give a proper definition, yet I struggle with properly naming things I’m unsure of. So I went with something along the lines that “keys are like ids for virtual DOM elements, but not really ids”. React key is an attribute used to uniquely identify an item, for example while mapping over an array. It should be either a unique string or a number. Ideally keys should be included in data rather than generated on the fly. They are needed for DOM updates when the array elements change order due to sorting, addition or deletion. They should be unique between siblings, but can be the same for different JSX nodes in two different arrays. Thing is, I add a key prop automatically when I map over an array - since I learned that it is necessary (or else React throws errors), I never think twice about it, especially at work, where each items in an array comes with a uniqid prop.

What’s the difference between forEach and map? That’s another one where I gave a half-good answer. Both are built-in JavaScript methods used to perform actions on each item in an array while iterating over it, but the main difference is that forEach does not modify the original array, while map creates a new array, leaving the original unchanged. There’s another example where it’s easy to fall into doing things automatically—I never needed to modify the original items in an array, so I always use map. Heck, I even get warnings from ESLint in my code when I accidentally use forEach.

What do I use for debugging? Here my thoughts strayed towards proper debuggers, which I’ve never used because I don’t know how or why. I often use console.log or browser dev tools, check the browser console for errors, check the Network tab for errors in HTTP requests, and I also always check my terminal for TypeScript errors. I use try… catch… in my code, and I use a linter, but this wasn’t part of my answer due to impaired comprehension (-2 to INT). Even W3Schools teaches that console.log is a JS debugging technique. Chrome for developers gives a nice overview of how to use the built-in debugger in the browser, and that’s something I need to learn to descend from the peak of my mount stupid.

What is useEffect used for in React? It’s used for executing a side effect, which is something that renders a component impure (a pure function is a function that for a given input always returns the same output). A side effect in React is any operation that affects something outside of the component’s scope, such as data fetching, setting a timeout, updating the DOM manually, or interacting with browser storage. Junior devs like me often use useEffect for data fetching (unless they learn how to write their own hooks and/or how to use axios or Tanstack query) without thinking: why? What are we doing here? Fetching data from an API. Why this way, what are the consequences? What is the dependency array and why do we need it? What will happen if we don’t provide it? (The effect will run on every render, which may cause an infinite loop). What will happen if we leave the dependency array empty? (The effect will run only once).

How do you cancel an HTTP request? By using an AbortController, which works with the native fetch() method. It allows you to cancel a request before it completes. It is helpful for preventing race conditions between requests, avoiding memory leaks, handling rapid user inputs (it cancels old requests when a new one starts), and optimizing performance. It's a really helpful method.

Why did I use TypeScript? Side note: there is a way to answer a question wrong. One of those is by being too honest. What I answered: “Out of habit, and because I wanted to show that I can use it.” (I probably added some more words to my answer, but the gist of it was as quoted above.) Luckily, the interviewer kept drilling with questions like: “Why not JavaScript, how is it better, etc.” There is this ongoing debate among developers, JS vs. TS. Some arguments against TS are that it slows you down (type errors everywhere), that you write more code (and a general rule of thumb is: more code means more bugs), and that it is less flexible than JS. To be honest, I lack the experience in JS to be able to tell whether the less flexibility of TS is a good or a bad thing. My main experience writing JS code is conditional logic or DOM manipulation to show and hide elements, some calculations on dates, comparison sliders (e.g., like here on this project that I recently developed for work), and some fun exercises I did when I was learning JS with FreeCodeCamp (legacy course). I haven’t written a web app in vanilla JS, without using a framework or TypeScript (yet). It may be a good educational exercise to help me appreciate components and strict typing even more. But back to the question: why (how) is TypeScript better than JavaScript? Without going too deep into the whole debate, JS is a loosely typed language. It makes odd type coercions and other strange things. TypeScript prevents that and gives you more control over it. TS allows you to catch errors at compile time, it provides better code documentation (due to types), and it helps catch common errors that stem from undefined and null and write checks in the code to handle such cases.

What is the difference between a type and an interface? I tend to use them pretty much interchangeably in my code. As a rule, I use an interface for props in a component and a type for data that interacts with the backend. Both are highly similar. According to TypeScript documentation, almost all features of an interface are available in a type, with the key difference being that an interface is always extendable while a type cannot be reopened to add more properties. So it makes sense to use an interface for a component that may change and get new properties, and a type for data that interacts with an API.

What’s the difference between localStorage and cookies? I had no idea how to answer this one, because I never read about those. All I know is that they exist and that I can save some user settings (e.g. theme) in localStorage. Both are mechanisms to store some data on the client and are networking terms. They differ in amount of data they can hold, the time the data persists, and some other things. Below is a nice tabular overview of the differences:

Do I know any CSS preprocessors (SASS, LESS) and what do they do that CSS cannot? Luckily, SASS is one of the very first things I learned on the job. It is used extensively at my current workplace, and compared with regular CSS, it is awesome. It offers plenty of extra functionality: functions, conditional logic, mixins, partials, and many more. It works well together with CSS frameworks like Bootstrap as it allows generating a class for every variable. Thanks to partials, you can split your style sheets, and it handles nesting differently than CSS. It also works well with BEM naming rules (also thanks to nesting), which allows writing more concise code. I happen to use it daily, and whenever I need to go back to basic CSS, I feel like there’s something missing.

What is WCAG? This is an easy one, though I forgot the full name of the abbreviation. It's the Web Content Accessibility Guidelines, which define a set of rules (or guidelines, but I like to think of them as rules) for creating web pages and apps that are accessible to people with disabilities. For example, to make your website easy to navigate using a keyboard or a screen reader, choose a color scheme with recommended contrast, use semantic HTML tags (as they help with screen reader navigation), always add descriptive alt attributes to images, include other attributes like labels for form fields, provide visual feedback for focused elements (focus:visible), and so on. Sometimes it means adding an aria attribute to your HTML elements. The main goal is to make the web friendly and accessible to everyone, not just sighted users with a mouse.

There was also a question, or rather a live coding request, to open the code of my app, share my screen, and make every name show up in red if it has an even number of letters. This is when stress and being sick took over me (I’m also a terminal case of forgetting my own name when observed), and I wrote this monster and wondered why it didn’t work:

If I used Next.js for this project, it would probably steer me toward the correct answer by throwing a hydration error, and I would realize that I’m trying to render a <p> tag inside another <p> tag, instead of adding a class dynamically. I assume my interviewers now think I’m a moron and not even a junior.

I also got some questions related to syntax, like the nullish coalescing operator and optional chaining. The thing is, sometimes it isn’t easy to explain what something with a very technical-sounding name is, but if you see the code, you know what it is and when to use it. For instance, I used the nullish coalescing operator (or: ??) to set the default view to be a list (there is a switcher between list and grid view):

it means that if there is no value (null) in localStorage with the key isListView, set it to true. It is similar to || (logical OR operator), but slightly different, as it is a special case of logical OR.

Logical or || returns the first truthy value (so it checks for null, undefined, 0, empty string ““, NAN or false)

While nullish coalescing ?? returns the first defined (non-null) value, so it only checks for null or undefined values:

Another syntax-related question was about optional chaining. I use it a lot in JSX when accessing properties of objects. Sometimes a property doesn’t exist, so it is always safer to access it with optional chaining ?.. Then, if that property is not accessible, the expression short-circuits and returns undefined instead of throwing an error (in this case, availableCountries may be undefined because it comes from the data from the API).

(here is also that Set that opened the interview. Why did I want a Set here? Because I didn’t want any duplicates in the dropdown options).

Learning to code is a long and perilous journey. You may feel like you've escaped Tutorial Hell by building your own projects, like me, but you might find yourself at the Peak of Mount Stupid. It’s only slightly better than Tutorial Hell, but if you’re here, it means you know how to do things, but you don’t know why those things are done. To descend from the Peak of Mount Stupid, start not only reading the docs of the technologies you’re using but also questioning the way things are done. Why are we doing things this way? Why is this way better than the other? What’s the difference between x and y? Why did you choose tech x over tech y for your project? Asking the “how?” questions will only give you knowledge, but the “why?” questions will give you an understanding of underlying principles. And this is what helps you get down from the Peak of Mount Stupid. That’s what I will try to do.

References:

Cover image: https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Dunning%E2%80%93Kruger_Effect_01.svg/2462px-Dunning%E2%80%93Kruger_Effect_01.svg.png

#WomenWhoTech

Well, the thing is, some devices (looking at you, Apple) tend to handle certain CSS declarations in unexpected ways. That’s why it’s always a good practice to check how your site looks on an actual mobile device. I was recently reminded of this the hard way - my project looked perfect on my Windows machine, and everything seemed fine in the browser’s simulated device views. I typically test on a narrow mobile (360px wide), a larger mobile, iPhones, two tablet variants, a standard desktop (1920×1080), and a larger display (2560×1440). But despite these checks, my client wasn’t happy with how certain parts of the project appeared on his iPhone.

So, if you’re new to web development or just need a quick refresher, here’s an easy way to preview your local web project on a real mobile device - without installing any extra software or emulators.

Step-by-step guide

Step 1.

Open up a local port and make sure you’re project is being served there. Let’s say, you’re working on a Next.js project. Next.js npm run dev opens a local port 3000:

So when you open your browser and enter http://localhost:3000/, you will see your project there.

Step 2.

Make sure your mobile device is connected to the sam`e network as your PC/Mac.

Step 3.

Find out what is your IPv4 address.

Windows

If you’re on a Windows machine, use the command ipconfig in your terminal. Then you will see something like this:

Find the line that says ‘IPv4 address”. This is what you need. There are also other ways to find out your IP address on Windows (1).

Mac

If you’re on a Mac machine, the command is a bit different. Enter ipconfig getifaddr en0 in your terminal. As the output you should get your IP address. There are also other ways to find out your IP address from a Mac (2).

Step 4.

Once you have your local IP address, enter in in the browser of your mobile device, followed by the port at which your local project is running. So, in my previous example of a Next.js app, that would be http://[yourIPv4Address]:3000.

Step 5

Enjoy! Now you can live preview your project on your other devices, like a pro.

⚠ Important Note: Some firewalls or security settings may block access. If it doesn’t work, check your firewall settings and allow incoming connections for your development server.

Explanation

This is neat, but why does it work?

It all comes down to basic networking. Your local IP address (formatted as 192.168.x.x) is a unique identifier for your machine within your local network. When you run a development server (e.g., React, Next.js, or a local server like XAMPP), your computer listens for incoming connections on a specific port (e.g., 3000, 9001, etc.).

On your mobile device, entering your local IP address followed by the port number tells the browser to connect to your computer’s server over the same Wi-Fi network. This allows you to preview your locally hosted website on a real mobile device.

References

(1) https://support.microsoft.com/en-us/windows/essential-network-settings-and-tasks-in-windows-f21a9bbc-c582-55cd-35e0-73431160a1b9 - IP address on Windows

(2) https://www.wikihow.com/Find-Your-IP-Address-on-a-Mac - IP address on Mac

What is Twig?

Twig is a widely used and popular template engine for PHP. It provides a flexible, efficient, and secure way to separate the presentation (HTML or other markup) from the application logic in PHP-based web applications. Twig was originally developed as a part of the Symfony web framework but has since gained popularity in its own right and is used independently in various PHP projects. If you're coming from the frontend side of things, you may think of the Twig templates as something similar to React components, because the main architectural principles are the same: you compose a web app from building blocks, which display some data and can be conditionally rendered. The main difference though is that Twig is more "basic", has simpler syntax and is based on PHP.

What is Symfony?

Symfony is a high-performance PHP web application framework that facilitates the development of web applications and APIs. It follows the Model-View-Controller (MVC) architectural pattern and provides a wide range of reusable components and tools for building robust, scalable, and maintainable web applications. Symfony is open-source, well-documented, and has a large and active community of developers and contributors. You can learn more about it from this free ebook written by its creator.

What is a template engine anyway?

A template engine is a software component or system that facilitates the separation of data and presentation, also called the separation of concerns. Its primary purpose is to generate dynamic content by combining data (often referred to as the model) with templates that define the structure and layout of the final output (often referred to as the view). Separation of concerns makes the code more maintainable and easier to work with, as changes to the presentation do not require modifications to the underlying logic. Template engines provide many more useful features, such as reusable templates, dynamic content rendering and improved performance. They are commonly used in web development but can be found in other types of software as well and are especially valuable when creating applications that display dynamic data retrieved from databases, APIs, or user input.

And what are Twig templates?

Twig templates are essentially HTML files that include bits of Twig code. When the template is loaded, the placeholders in the Twig code are compiled to HTML and the resulting HTML is rendered in the browser.

Twig syntax

Twig has its own syntax that looks like a mix of PHP and HTML. The delimiters of Twig are curly braces { ... } coupled with other characters that signify what sort of Twig code it is. In brief, three basic types of Twig syntax are as follows:

All the Twig's syntax is based on the above principle. Below are some more specific examples.

Comments

Twig supports single-line comments using {# ... #}. The main feature of Twig comments is that they are only visible in Twig files, they do not get parsed to HTML comments.

{# This is a comment #}

Output variables

To output a variable's value in Twig, enclose it in double curly braces {{ ... }}. For example:

<p>{{ username }}</p>

Filters

Filters modify the output of a variable. You can apply filters using the pipe | symbol followed by the filter name.

{{ variableName | filterName }}

Twig filters are functions that allow you to modify or manipulate data within your templates. Conceptually, they are similar to inbuilt functions or methods in other programming languages. For instance, Twig filter upper achieves the same output as JavaScript's string method toUpperCase. Twig filters take an input value, perform an operation on it, and return a modified value. Filters in Twig are used to format, filter, or transform variables or expressions within your templates. You can read more about Twig filters in the docs.

Control Structures

Twig provides control structures like if, else, elseif, for, and block for conditional rendering and looping. They require an opening {% and a closing %} tag, sometimes with a nested tag in between:

{% if condition %}
    Content to display when condition is true
{% else %}
    Content to display when condition is false
{% endif %}

Loops

Twig's for loop is used for iterating over arrays and other iterable objects. It uses the for... in syntax.

{% for item in items %}
    {{ item }}
{% endfor %}

Strings

Strings are classically wrapped in either double or single quotation marks, but not the `...` backtics. Similar to HTML, if your string contains quotation marks, you can either escape the quotation mark with a backslash \ or use the other type of quotation mark.

{% set greeting = "Hello there" %}
{% set heading = 'Try the new 7" folding tablet' %}
{% set subheading = "The original Microsoft Surface was 3.5' long." %}
{% set alt_subheading = "The original Microsoft Surface was 3' 6\" long." %}

To combine strings, you can either use string concatenation with tilde ~ or use string interpolation #{...}. Important! Interpolation only works with double-quoted strings.

{# Concatenation #}
{% set greeting = "Hello, " ~ currentUser.friendlyName %}

{# Interpolation #}
{% set greeting = "Hello, #{currentUser.friendlyName}" %}

Templates

Template inheritance

The most powerful feature of Twig is template inheritance. It allows you to build a base "skeleton" of a page, that contains all the common elements of your site and defines blocks that child templates can override. Imagine a typical page (or open one, e.g. https://www.freecodecamp.org/): it has three main parts (blocks): header/navigation bar, main content, and a footer. The navbar and the footer stay the same for all the subpages, while the main content differs for each page:

To avoid repetition (the DRY principle), Twig allows us to create a 'master' template with those main blocks. Let's call it base.html.twig. Then based on this master template we can write child templates and populate them with content specific for each subpage, using the extends syntax.

{# In base.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %} Default Title {% endblock %}</title>
</head>
<body>
    <header>
        [header text, main navigation]
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        [footer text]
    </footer> 
</body>
</html>

{# In child.html.twig #}
{% extends 'base.html.twig' %}

{% block title %} The title of this page {% endblock %}

{% block content %}
    Content specific to this page
{% endblock %}

As you already noticed, to define a block of content in Twig we specify it's a block and give it a name {% block [name of this block] %} . Similarly to all other Twig code, it needs a closing tag: {% endblock %}. Now to override the content for a particular block, in the child template we need to specify a block element with the same name, so that Twig knows which block are we referring to, and specify the content for this particular page.

Include

It is also possible to render a part of a template using the include syntax. It is used to specify reusable building blocks that can stand on it's own. You can create with it, for example, buttons, form fields, navigation elements, blocks of content or anything else that is a building block of your webpage. Twig templates that are loaded into other templates with the include syntax are independent of other templates. The main difference from the block elements is that the templates loaded with the include syntax have to be specified in separate files. For example, to define a base skeleton template from the previous example, with a navigation, main content and a footer, we can use code like this:

{# In base.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %} Default Title {% endblock %}</title>
</head>
<body>
    {{ include('nav.twig') }}
    <main>
        {% block content %}{% endblock %}
    </main>
    {{ include('footer.twig') }}
</body>
</html>

then our nav.twig and footer.twig can look like this:

{# In nav.twig #}
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/variables">Variables</a></li>
        <li><a href="/conditionals">Conditionals</a></li>
        <li><a href="/loops">Loops</a></li>
        <li><a href="/templates">Templates</a></li>
        <li><a href="https://twig.symfony.com/doc/3.x/" target="_blank">Docs</a></li>
    </ul>
</nav>

{# In footer.twig #}
<footer>
    Styled with ❤️ <a href="https://simplecss.org/">simpleCSS</a>
</footer>

`Block, extends, include - what's the difference?

Although at first it may seem confusing what are the differences and similarities between the block, extends and include syntax elements or when each of them should be used, it is rather simple.

• include is used for reusing templates independently

• extends establishes template inheritance

• block defines and overrides content within templates following the inheritance hierarchy

The choice between these syntax elements depends on your specific needs: reuse, layout consistency, and content customization within your Twig templates. In more details, here is an in-depth comparison.

Installing Twig

To install Twig, you can use Composer, which is the recommended package manager for PHP projects. If you don't have Composer installed, follow the steps here: https://getcomposer.org/doc/00-intro.md. First, make sure you have PHP installed by running:

php -v

in your terminal. If you don't have PHP installed, follow the steps here: https://www.php.net/manual/en/install.php.

Once you have installed both PHP and the Composer package you can install Twig for your project by following the steps here:

1. Create a New PHP Project (if not already done):

If you don't have an existing PHP project, create a new directory for your project and navigate to it using your terminal or command prompt.

1. Install Symfony locally. Navigate to your project root directory and add Symfony using Composer:

    composer require symfony/symfony
   

   This will add a folder named vendor to your project, as well as two files: composer.json and composer.lock. Symfony will show up in dev dependencies in your composer.json file.

   

2. Install Twig locally:

    composer require twig/twig
   

   This will add Twig to your dependencies in the composer.json file:

   

3. You can now start using Twig in your PHP project. To do this, create Twig templates and use the Twig library to render them in your PHP code.

   Here's an example of how to render a Twig template. First, create an index.php file, then:

    <?php
    require 'vendor/autoload.php'; // Composer's autoloader
   
    // Create a Twig environment
    $loader = new \Twig\Loader\FilesystemLoader('/path/to/templates');
    $twig = new \Twig\Environment($loader);
   
    // Render a template
    echo $twig->render('template.twig', ['variable' => 'Hello, Twig!']);
   

   Replace /path/to/templates with the actual path to your Twig templates directory and template.twig with the name of your Twig template.

4. Create Twig Templates:

   Create your Twig templates with the .twig file extension and place them in the specified templates directory. You can use these templates to separate your HTML or other markup from your PHP logic.

That's it! You have now successfully installed and can use Twig in your PHP project.

Example

Let's render a simple string with two variables just to demonstrate how to use Twig. In the root directory of your project, create a folder named views. It is not a strict requirement to have a folder with this name, but it's a convention often used to organize Twig templates and is a recommended practice for maintaining a structured and organized project.

In your views folder create an HTML file. Let's call it hello.twig.

In index.php we'll echo two variables: name and age. In the hello.twig we will access those variables using the double curly braces syntax.

index.php
<?php
require 'vendor/autoload.php'; // Composer's autoloader

// Create a Twig environment
$loader = new \Twig\Loader\FilesystemLoader('views');
$twig = new \Twig\Environment($loader);

// Render a template
echo $twig->render('hello.twig', array(
    'name' => 'John Doe',
    'age' => 25
));

views>hello.twig

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Let's learn Twig</title>
</head>
<body>
    <header>
        <h1>Hello, {{ name }}! You are {{ age }} years old.</h1>
    </header>
</body>
</html>

Now to see how it is rendered in the browser you need to run a PHP server.

How to set up a server to run PHP locally

In a terminal, run the command:

php -S localhost:8000

This command opens a local server at port 8000 (PHP command -S : Run with built-in web server). Now you can navigate to your browser at localhost:8000 and see what is being rendered. If you followed the above steps you should see:

In case the PHP server won't run for you for some mysterious reason, there's also this neat VS code extension called PHP server from brapifra.

And that's it! You can find the code I used for the above example in this repo, with more examples in hello.html.twig file.

Happy coding!

Resources

1. Twig documentation: https://twig.symfony.com/doc/3.x/ (official documentation)

2. Symfony documentation on templates: https://symfony.com/doc/current/templates.html (official documentation)

3. Introduction to templating with Twig: https://craftcms.com/docs/4.x/dev/twig-primer.html (article)

4. Course on templating in Twig for Drupal https://symfonycasts.com/screencast/twig/basics (video course, paid)

5. Introduction to Twig and its syntax: https://www.youtube.com/watch?v=50RBUmPOYig (YT video)

6. Intro to Twig and templating: https://www.youtube.com/playlist?list=PLo5h1Mro0GtGoNDhF8KUWsiDdSbpnl7xr (YT playlist)

7. Twig blocks: https://www.youtube.com/watch?v=1rHvEq3XoRU (YT video)

8. Twig include, embed, and extends https://www.youtube.com/watch?v=XWhQku4QBD8 (YT video)

9. Source code with examples: https://github.com/WitchDevelops/Twig-tutorial/tree/main (GitHub repository)

10. VS code extension for syntax highlighting: https://marketplace.visualstudio.com/items?itemName=Stanislav.vscode-twig (VS code extension)

11. VS code extension with Twig snippets, auto-completion, emmet and syntax https://marketplace.visualstudio.com/items?itemName=bajdzis.vscode-twig-pack (VS code extension)

As a front-end developer, your codebase is your canvas, and git is your trusted brush. With git, you gain the ability to document your project's history, collaborate seamlessly with teammates, and ensure the stability and reliability of your web applications. Besides the essential git commands, like push, clone, pull and commit, there are a couple more incredibly useful commands. Let's dive in.

log

When to use

Whenever you want to see the commit history! Especially useful when combined with --oneline. This command only displays the first 7 characters of the SHA key of each commit, improving readability.

How to use it

Type git log --oneline. That's it. You can combine it with --graph to visualize the branches. It's not the prettiest and there are other ways to achieve a similar effect, but it's good to know that git has this as an inbuilt command. The effects may look like this:

Read more

https://git-scm.com/docs/git-log

revert

When to use

Say, you made a commit and the commit messed up your codebase. Or you committed something twice and you want to undo it. This is where git revert comes in handy: you give it the SHA key of the commit you want to undo and it removes the changes by creating a new commit with rolled back changes.

How to use it

You specify the SHA key (or the first 7 characters) of the commit you want to undo:

git revert [insert the SHA key of the commit you want to remove]

Example

for a git log like this:

git log --oneline
cb76ee4 bad commit
01b56c6 good commit
2e407ce first commit

a command git revert cb76ee4 will undo the changes and remove the last commit. It will create a new commit with the changes that are rolled back.

Read more

https://git-scm.com/docs/git-revert

https://stackoverflow.com/questions/19032296/how-to-use-git-revert

reset

When to use

For bigger fuckups, used to revert several commits and reset the current HEAD to the specified state. It requires the SHA key of the last commit you want to keep and removes anything that was committed after it.

How to use it

You specify the SHA key (or the first 7 characters) of the last commit you want to keep:

git reset [insert the SHA key of the last commit you want to keep]

Example

for a git log like this (same as previously):

git log --oneline
cb76ee4 bad commit
01b56c6 good commit
2e407ce first commit

command git reset 2e407ce will remove the good commit, the bad commit, and keep the code from the first commit only.

Read more

https://git-scm.com/docs/git-reset

squash

When to use

It happens that you were in a hurry, changed some code, pushed it, and then realized there are some more changes to be made with the same commit message. Or another example: you have a git history full of small commits with meaningless messages. To have a clear commit history with comprehensive messages it's best to squash some commits into one, with a single, meaningful message.

How to use it

Run git rebase in interactive mode. Select which commits you want to squash. Then select a commit message and push the changes.

Example

Let's say you have 4 commits you want to squash into one. For a git log like this:

git log --oneline
80801e4 more changes
e3873ff update styles
92c2f17 update css
186d599 changes
2e407ce first commit

1. run git rebase in interactive mode git rebase -i HEAD~4

2. this opens the editor window. Change "pick" to "squash" for every commit that you want to be squashed into one, except for the first one. Save changes and close the editor.

   

   

3. choose a commit message, save changes and close the editor.

   

4. push changes with git push --force origin HEAD

Read more

https://git-scm.com/docs/git-rebase

https://prasad-k-pawar.medium.com/how-to-combine-multiple-git-commits-into-one-c04c67367a36

Summary

In this article, we explored four incredibly useful commands: log, revert, reset, and rebase. These commands are indispensable tools in a developer's git toolkit, providing the ability to visualize commit histories, undo changes, reset branches, and streamline branch management.

• git log offers valuable insights into your project's commit history, helping you understand the evolution of your codebase and facilitating collaboration.

• git revert empowers you to gracefully undo specific commits, creating a new commit to reverse changes without altering history.

• git reset allows you to reset your branch to a specific commit, whether to unstage changes or start anew.

• git rebase provides an advanced way to rewrite and reorganize your commit history, promoting a linear and clean history that's easier to maintain and understand.

Mastering these commands not only enhances your efficiency as a git user but also empowers you to navigate the complexities of version control with confidence. By learning how to properly use git to its full potential, you'll be better equipped to manage your repositories and collaborate effectively with your team. By no means it's an exhaustive list as git offeres so much more. But we'll talk about it some other time. Happy coding!

I've been tasked recently with coding a landing page, which included a quiz as a slider, one question per slide. There was a background image (same for each slide, purely decorative). Each slide was generated with JavaScript, so that I could use an array of objects containing information such as question, answer, and which button is correct (it was a yes/no type thing). Then came The Client with their list of alt texts. The Client wanted to include an alt text to the background image of each slide. The alt texts were meaningless and purely sales-oriented, not to mention way too long and not descriptive at all. As I'm merely a junior developer at the very end of the chain of command, and The Client is of the "I'm always right, do as I say" type, I had to figure out a way to satisfy those ridiculous wishes in the best possible way.

I never paid too much attention to alt texts or best practices, I usually wrote some short description of an image if it's inserted with HTML and never paid any attention to those inserted with CSS (as they are usually only decoration with no meaning). So I thought it's good to learn more about alt texts, their importance and best practices. In this article, we will explore the proper use of alt texts according to W3C standards, their relevance for SEO and best accessibility practices.

What are alt texts?

Alt texts are short, descriptive texts added to image elements in HTML that serve as substitutes for images when they cannot be displayed. These texts are essential for users with visual impairments who rely on screen readers to access web content. When an image lacks an alt text, screen readers may read out the filename or provide no information at all, creating a confusing and frustrating experience for users.

According to the Web Content Accessibility Guidelines (WCAG) by the World Wide Web Consortium (W3C), alt texts should be concise, meaningful, and provide an accurate description of the image's content and function. Avoid using redundant phrases like "image" or "picture" and instead describe the purpose and information conveyed by the image.

Image types based on content and meaning

Not all images are equal so not all of them need an alt text. Based on their meaning, we can distinguish several image types.

• Decorative Images: For purely decorative images that do not convey any meaningful information, it's essential to provide an empty alt attribute or use aria-hidden="true" to indicate to screen readers that these images are not significant for content comprehension. From WCAG: "If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology".

• Informative Images: Images that contain valuable information must have descriptive alt texts that convey the same information to users who cannot see the image. From WCAG, again: "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose".

• Complex Images and Graphics: Complex images or graphics, such as charts or diagrams, may need alternative ways of conveying their content, such as using descriptive text near the image or providing a link to a separate page with an in-depth explanation. It is a great use case for a longdesc attribute (or was, as it's now deprecated. Current recommendation is to encapsulate an image in a link using the a element or to use aria-details attribute).

brief aside: longdesc and aria-details

Initially, longdesc attribute was meant to provide a link to a longer description of information-dense images, like flowcharts, schematics and so on (think highly technical type of graphics, like this one). The description was meant to be used both by visually-impaired users, as well as those needing more explanation and could have either been on the same page, on another page, or included in data. W3Schools provides some examples of that. This attribute has been deprecated and the current recommendation is to wrap the image in the a element instead. Alternatively, aria-details attribute can be used to provide additional information related to the object. It has a broader use, it's not exclusive to images. Its main use is to provide additional information, complex descriptions or navigable content related to the object. More information regarding the best practices can be found here.

Why are alt texts important for SEO?

Beyond their primary role in web accessibility, alt texts also play a crucial role in Search Engine Optimization (SEO). Search engines, such as Google, use alt texts to understand and index images on web pages. properly optimized alt texts can have a direct impact on boosting the SEO performance of websites.

Here's why alt texts are vital for SEO:

• Image Search Ranking: When users perform image searches, search engines rely on alt texts to understand what the images are about. By providing relevant and descriptive alt texts, we increase the likelihood of our images appearing in search results, potentially driving more organic traffic to our website.

• Keyword Relevance: Alt texts provide an opportunity to include relevant keywords that are related to the content of the image and the webpage. However, it's crucial to use these keywords naturally and avoid stuffing alt texts with excessive keywords, as search engines frown upon such practices and may penalize websites.

• Improved Page Relevance: Search engines consider alt texts as part of the broader context of a webpage. By crafting descriptive alt texts that closely relate to the page's content, we can boost the overall relevance of the page for specific search queries, ultimately contributing to better SEO performance.

• Accessibility and User Experience: SEO and web accessibility go hand in hand. By providing meaningful alt texts, we not only make our websites accessible to users with disabilities but also enhance the user experience for all visitors. A positive user experience can indirectly impact our SEO rankings, creating a win-win situation.

• Screen Reader SEO: Alt texts are crucial for users who navigate the web using screen readers. These assistive technologies rely on alt texts to provide relevant search results to visually impaired users. Crafting well-thought-out alt texts can significantly improve our website's visibility to users using assistive technologies.

Best practices for optimizing alt texts for SEO

Some essential best practices regarding alt texts optimized for SEO are as follows:

• Be Descriptive: Crafting concise and descriptive alt texts is crucial. These texts should precisely convey the image's content and context, leaving no room for ambiguity. Avoid using generic or vague descriptions that might not provide meaningful information to users while staying concise.

• Use Relevant Keywords: Including relevant keywords in alt texts can contribute to better SEO performance. Align these keywords with the image's content and the overall page, but ensure they are naturally integrated into the alt text. Avoid keyword stuffing, as it can harm SEO efforts.

• Avoid Keyword Stuffing: Maintain a balance with keyword usage. Overloading alt texts with excessive keywords is not only penalized by search engines but also can negatively impact user experience. Focus on providing useful information to users.

• Decorative Images: For purely decorative images that do not add valuable information, use empty alt attributes (alt="") or aria-hidden="true" to prevent them from being indexed and unnecessarily cluttering search results.

• Context Matters: Al texts should align seamlessly with the surrounding content and the image's purpose on the page. Relevant and contextually appropriate alt texts enhance the overall user experience and improve page relevance for search engines.

• Screen Reader Testing: One way I ensure that alt texts are serving their purpose is by testing them with screen readers. Verifying that screen readers read the alt texts accurately and provide meaningful information to visually impaired users is essential for creating an inclusive web experience.

Alt texts on background images

(why tho)

In general, background images rarely convey meaning and are typically added with CSS for the whole container. This prevents using the traditional way of adding an alt attribute to an img element (and according to WCAG alt texts on decorative images should not be used anyway, and what are background images if not decoration?). However, some workarounds adhere to W3C standards (workaround, as the name implies, is not the most straightforward or the best way to achieve your goal. So thread with caution).

Adding alt texts to CSS background images using ARIA

To provide alt text for background images, we can use ARIA roles and aria-label attribute. By applying the role="img" and aria-label to a container element, we inform screen readers that the container represents an image with the specified label. Here's an example of how to do it:

<div id="leftdiv" class="bkg_img" role="img" aria-label="A view of the woods with its magnificent autumn colors"></div>

The caveat of this solution though is in case the div contains any content, it will be hidden from screen readers, as the whole element will be conveyed as an image. ARIA role="img" changes the semantics of the code and is meant to use for a container that identifies a collection of elements that together form a meaningful image. For example, consider this code snippet:

<div role="img" aria-label="scared face">(ㆆ _ ㆆ)</div>

So in cases when the CSS background image is used on a container that provides some meaningful information, a better solution is to either add an empty span element with role="img" and aria-label, or an empty img element with an alt tag at the end of the container. But again, it's a misuse of alt tags and such practices should be discouraged.

Adding alt texts to images inserted with JavaScript

While images added via CSS cannot have direct alt texts, JavaScript can be used to dynamically set the alt text attribute using the setAttribute method. For example:

const image = document.getElementById("leftdiv");

image.setAttribute("alt", "A view of the woods with its magnificent autumn colors");

This method dynamically sets the alt attribute on the element with the specified alt text, making it accessible to screen readers.

Conclusion

In conclusion, understanding the significance of alt texts has given me a new perspective on web development. Web accessibility is an essential aspect of modern web development, and providing accurate and descriptive alt texts for images is a fundamental practice. As I continue to learn and grow in my role, I'm committed to creating websites that not only meet clients' demands but also adhere to best practices in web accessibility and SEO. Good SEO practices should always complement and not compromise web accessibility, ensuring that all users can benefit from a fully inclusive online experience.

References

WCAG guidelines https://www.w3.org/TR/WCAG21/#text-alternatives

ARIA roles https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

role="img" https://accessibilityinsights.io/info-examples/web/role-img-alt/

role="img" and aria-label (proper use) https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

aria-details https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details

image SEO best practices https://developers.google.com/search/docs/appearance/google-images

image alt text optimization for SEO https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/