Mejoras visuales

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

How to visually improve our system design?

Improve your software development skills by learning how to implement visual enhancements to your system. The class focuses on specific optimizations, from adjustments in the forms area to the structure of database queries. The experience gained here will allow you to deliver a more attractive and efficient interface. Let's delve into some of the most crucial changes you can make.

How to optimize the display of comments?

The first improvement starts with something seemingly simple but impactful on user accessibility: the comments tag that is in English. Here we suggest replacing the "content" tag with "comment". This adjustment, although seemingly minor, is crucial for consistency and clarity in systems designed for Spanish-speaking users.

Form tag implementation:

// In the form component'tag' => 'comment';// When integrating with the system, you can keep null thanks to type auto-discovery.

This not only ensures that the interface is aligned with the user's language, but also simplifies development, as the system correctly deduces the field type without additional settings.

How to improve access to the main menu?

Another simple but significant step is to make sure that menu accesses are clear and direct. The "home" option must be present to improve navigation.

Implementation of home access:

<a href="/" class='home-link'>Home</a>.

By adding this option, users can easily return to the home page, thus improving the user experience with quick access to the home.

How to optimize database queries?

Efficient SQL query execution is key to web application performance. Recognizing how SQL queries interact with the database can reduce the workload and speed up system performance.

Basic optimization example:

For comments and categories, queries can be optimized using LEFT JOIN, this reduces the number of queries executed and improves system speed.

SELECT *FROM postsLEFT JOIN comments ON posts.id = comments.post_id;

Here you can combine data from different tables in a single query, reducing the number of times you have to access the database.

How to customize the data presentation?

A visual aspect that can be further improved is the control over the presentation style. Changing colors or removing an underline from links can make the data look more polished and neat.

Styling settings on links:

.text-dark { color: #343a40; text-decoration: none;}

By implementing this class, we can give a more professional and cleaner look to the links.

How to manage the display of partial data?

Handling partial views allows better organization of the code and improves the maintainability of the system. Creating small modular twig files, which can be included in other views, helps maintain order and facilitates future updates.

Create a partial view:

{# info.html.twig #}<div class="text-muted">{{data}}</div> .

Importing this view elsewhere allows you to reuse visual components recurrently.

What challenges can you take on to further optimize?

An excellent exercise to strengthen your skills is to tackle the query optimization challenge. The goal is to reduce the number of queries as the number of comments varies. This will not only be a technical challenge, but an effective way to apply what you have learned.

Take on this challenge by conducting a review of how comment queries are handled based on the number of comments, and look for ways to reduce them without losing functionality. Go ahead, there are no limits to learning!

Contributions 1

Questions 0

Sort by:

Want to see more contributions, questions and answers from the community?

Cristhian Coaquira

2 years ago

Mi solucion al reto
En el controlador

    #[Route('/blog/{slug}', name: 'app_post')]
    public function post($slug, PostRepository $postRepository): Response
    {
        return $this->render('page/post.html.twig', [
            'post' => $postRepository->findOneBySlug($slug),
            'form' => $this->createForm(CommentType::class),
        ]);
    }

En el repositorio

    public function findOneBySlug($slug): ?Post
    {
        return $this->createQueryBuilder('post')
            ->andWhere('post.slug = :slug')
            ->setParameter('slug', $slug)
            ->addSelect(['comments', 'category', 'user'])
            ->leftJoin('post.comments', 'comments')
            ->leftJoin('comments.user', 'user')
            ->leftJoin('post.category', 'category')
            ->getQuery()
            ->getOneOrNullResult();
    }